diff --git a/src/App.tsx b/src/App.tsx index a584f12c..58fb44d0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react' -import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' +import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom' import { EventStoreProvider, AccountsProvider } from 'applesauce-react' import { EventStore } from 'applesauce-core' import { AccountManager } from 'applesauce-accounts' @@ -12,6 +12,18 @@ import Bookmarks from './components/Bookmarks' const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew' +function BookmarksRoute({ relayPool }: { relayPool: RelayPool | null }) { + const navigate = useNavigate() + + return ( + {}} + onLogin={() => navigate('/login')} + /> + ) +} + function App() { const [eventStore, setEventStore] = useState(null) const [accountManager, setAccountManager] = useState(null) @@ -71,12 +83,7 @@ function App() { {}} - /> - } + element={} /> } /> {}} />} /> diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx index 68805fa6..34c96bfe 100644 --- a/src/components/BookmarkList.tsx +++ b/src/components/BookmarkList.tsx @@ -13,18 +13,20 @@ interface BookmarkListProps { isCollapsed: boolean onToggleCollapse: () => void onLogout: () => void + onLogin?: () => void viewMode: ViewMode onViewModeChange: (mode: ViewMode) => void selectedUrl?: string onOpenSettings: () => void } -export const BookmarkList: React.FC = ({ - bookmarks, +export const BookmarkList: React.FC = ({ + bookmarks, onSelectUrl, isCollapsed, onToggleCollapse, onLogout, + onLogin, viewMode, onViewModeChange, selectedUrl, @@ -57,6 +59,7 @@ export const BookmarkList: React.FC = ({ void + onLogin?: () => void } -const Bookmarks: React.FC = ({ relayPool, onLogout }) => { +const Bookmarks: React.FC = ({ relayPool, onLogout, onLogin }) => { const { naddr } = useParams<{ naddr?: string }>() const [bookmarks, setBookmarks] = useState([]) const [highlights, setHighlights] = useState([]) @@ -144,6 +145,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { isCollapsed={isCollapsed} onToggleCollapse={() => setIsCollapsed(!isCollapsed)} onLogout={onLogout} + onLogin={onLogin} viewMode={viewMode} onViewModeChange={setViewMode} selectedUrl={selectedUrl} diff --git a/src/components/SidebarHeader.tsx b/src/components/SidebarHeader.tsx index cbde6547..eadef0bb 100644 --- a/src/components/SidebarHeader.tsx +++ b/src/components/SidebarHeader.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChevronRight, faRightFromBracket, faUser, faList, faThLarge, faImage, faGear } from '@fortawesome/free-solid-svg-icons' +import { faChevronRight, faRightFromBracket, faRightToBracket, faUser, faList, faThLarge, faImage, faGear } from '@fortawesome/free-solid-svg-icons' import { Hooks } from 'applesauce-react' import { useEventModel } from 'applesauce-react/hooks' import { Models } from 'applesauce-core' @@ -10,12 +10,13 @@ import { ViewMode } from './Bookmarks' interface SidebarHeaderProps { onToggleCollapse: () => void onLogout: () => void + onLogin?: () => void viewMode: ViewMode onViewModeChange: (mode: ViewMode) => void onOpenSettings: () => void } -const SidebarHeader: React.FC = ({ onToggleCollapse, onLogout, viewMode, onViewModeChange, onOpenSettings }) => { +const SidebarHeader: React.FC = ({ onToggleCollapse, onLogout, onLogin, viewMode, onViewModeChange, onOpenSettings }) => { const activeAccount = Hooks.useActiveAccount() const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null) @@ -58,13 +59,23 @@ const SidebarHeader: React.FC = ({ onToggleCollapse, onLogou ariaLabel="Settings" variant="ghost" /> - + {activeAccount ? ( + + ) : onLogin ? ( + + ) : null}