notifications view sidebar

src/js/components/header/Header.test.tsx

@@ -0,0 +1,29 @@
+import { cleanup, render, screen } from '@testing-library/preact';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import localState from '@/state/LocalState.ts';
+import { translate as t } from '@/translations/Translation.mjs';
+
+import Header from './Header.tsx';
+
+describe('Header Component Rendering', () => {
+  afterEach(cleanup);
+
+  it('renders iris logo for homepage', () => {
+    localState.get('activeRoute').put('/');
+    render(<Header />);
+
+    const logo = screen.getByText('iris');
+    expect(logo).not.toBeNull();
+  });
+
+  it('renders login and signup buttons when not logged in', () => {
+    render(<Header />);
+
+    const loginBtn = screen.getByText(t('log_in'));
+    expect(loginBtn).not.toBeNull();
+
+    const signupBtn = screen.getByText(t('sign_up'));
+    expect(signupBtn).not.toBeNull();
+  });
+});

src/js/components/Header.tsx → src/js/components/header/Header.tsx

@@ -3,16 +3,15 @@ import { Cog8ToothIcon, HeartIcon } from '@heroicons/react/24/outline';
 import { ArrowLeftIcon, HeartIcon as HeartIconFull } from '@heroicons/react/24/solid';
 import { Link, route } from 'preact-router';
 
-import Component from '../BaseComponent';
-import Key from '../nostr/Key';
-import Relays from '../nostr/Relays';
-import localState from '../state/LocalState.ts';
-import { translate as t } from '../translations/Translation.mjs';
-import Icons from '../utils/Icons';
-
-import Show from './helpers/Show';
-import SearchBox from './searchbox/SearchBox.tsx';
-import Name from './user/Name';
+import Component from '../../BaseComponent.ts';
+import Key from '../../nostr/Key.ts';
+import Relays from '../../nostr/Relays.ts';
+import localState from '../../state/LocalState.ts';
+import { translate as t } from '../../translations/Translation.mjs';
+import Icons from '../../utils/Icons.tsx';
+import Show from '../helpers/Show.tsx';
+import SearchBox from '../searchbox/SearchBox.tsx';
+import Name from '../user/Name.tsx';
 
 declare global {
   interface Window {

src/js/views/About.tsx

@@ -4,7 +4,7 @@ import Show from '@/components/helpers/Show';
 import { RouteProps } from '@/views/types';
 
 import Follow from '../components/buttons/Follow';
-import Header from '../components/Header';
+import Header from '../components/header/Header.tsx';
 import Avatar from '../components/user/Avatar';
 import Name from '../components/user/Name';
 import { translate as t } from '../translations/Translation.mjs';

src/js/views/KeyConverter.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { RouteProps } from '@/views/types.ts';
 
-import Header from '../components/Header';
+import Header from '../components/header/Header.tsx';
 import Key from '../nostr/Key';
 import { translate as t } from '../translations/Translation.mjs';
 

src/js/views/Subscribe.tsx

@@ -1,6 +1,6 @@
 import { RouteProps } from '@/views/types';
 
-import Header from '../components/Header';
+import Header from '../components/header/Header.tsx';
 import { translate as t } from '../translations/Translation.mjs';
 
 const Subscribe: React.FC<RouteProps> = () => (

src/js/views/View.tsx

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce';
 import { useEffect, useRef } from 'preact/hooks';
 
 import ErrorBoundary from '../components/ErrorBoundary';
-import Header from '../components/Header';
+import Header from '../components/header/Header.tsx';
 import Show from '../components/helpers/Show';
 
 import Search from './Search';

src/js/views/feeds/Notifications.tsx

@@ -6,6 +6,7 @@ import EventDB from '@/nostr/EventDB';
 import Events from '@/nostr/Events';
 import Key from '@/nostr/Key';
 import { RouteProps } from '@/views/types.ts';
+import View from '@/views/View.tsx';
 
 import Feed from '../../components/feed/Feed';
 import Session from '../../nostr/Session';
@@ -60,13 +61,15 @@ const Notifications: React.FC<RouteProps> = () => {
   }, [updateNotificationsLastOpened]);
 
   return (
-    <Feed
-      key="notifications"
-      showDisplayAs={false}
-      emptyMessage={t('no_notifications_yet')}
-      filterOptions={filterOptions}
-      fetchEvents={fetchEvents}
-    />
+    <View>
+      <Feed
+        key="notifications"
+        showDisplayAs={false}
+        emptyMessage={t('no_notifications_yet')}
+        filterOptions={filterOptions}
+        fetchEvents={fetchEvents}
+      />
+    </View>
   );
 };
 

src/js/views/login/Login.test.tsx

@@ -7,7 +7,7 @@ import Login from '@/views/login/Login.tsx';
 describe('Login View Rendering', () => {
   afterEach(cleanup);
 
-  it('renders login form', () => {
+  it('renders login form', async () => {
     render(<Login />);
 
     const loginInput = screen.getByPlaceholderText(t('whats_your_name'));

src/js/views/profile/EditProfile.tsx

@@ -6,7 +6,7 @@ import { ID } from '@/utils/UniqueIds.ts';
 import { RouteProps } from '@/views/types.ts';
 
 import Upload from '../../components/buttons/Upload.tsx';
-import Header from '../../components/Header.tsx';
+import Header from '../../components/header/Header.tsx';
 import SafeImg from '../../components/SafeImg.tsx';
 import Key from '../../nostr/Key.ts';
 import SocialNetwork from '../../nostr/SocialNetwork.ts';

src/js/views/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import Header from '../../components/Header';
+import Header from '../../components/header/Header.tsx';
 
 import SettingsContent from './SettingsContent';
 import SettingsMenu from './SettingsMenu';