diff --git a/src/App.tsx b/src/App.tsx index ac727625..cc0927d9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,6 +52,15 @@ function AppRoutes({ /> } /> + + } + /> } /> ) diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index 8aa6f92c..00adffa7 100644 --- a/src/components/Bookmarks.tsx +++ b/src/components/Bookmarks.tsx @@ -1,5 +1,5 @@ -import React, { useMemo } from 'react' -import { useParams, useLocation } from 'react-router-dom' +import React, { useMemo, useEffect, useRef } from 'react' +import { useParams, useLocation, useNavigate } from 'react-router-dom' import { Hooks } from 'applesauce-react' import { useEventStore } from 'applesauce-react/hooks' import { RelayPool } from 'applesauce-relay' @@ -23,10 +23,21 @@ interface BookmarksProps { const Bookmarks: React.FC = ({ relayPool, onLogout }) => { const { naddr } = useParams<{ naddr?: string }>() const location = useLocation() + const navigate = useNavigate() + const previousLocationRef = useRef() const externalUrl = location.pathname.startsWith('/r/') ? decodeURIComponent(location.pathname.slice(3)) : undefined + + const showSettings = location.pathname === '/settings' + + // Track previous location for going back from settings + useEffect(() => { + if (!showSettings) { + previousLocationRef.current = location.pathname + } + }, [location.pathname, showSettings]) const activeAccount = Hooks.useActiveAccount() const accountManager = Hooks.useAccountManager() @@ -50,8 +61,6 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { setShowHighlights, selectedHighlightId, setSelectedHighlightId, - showSettings, - setShowSettings, currentArticleCoordinate, setCurrentArticleCoordinate, currentArticleEventId, @@ -94,7 +103,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { relayPool, settings, setIsCollapsed, - setShowSettings, + setShowSettings: () => {}, // No-op since we use route-based settings now setCurrentArticle }) @@ -160,7 +169,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { onLogout={onLogout} onViewModeChange={setViewMode} onOpenSettings={() => { - setShowSettings(true) + navigate('/settings') setIsCollapsed(true) setIsHighlightsCollapsed(true) }} @@ -171,7 +180,11 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { selectedUrl={selectedUrl} settings={settings} onSaveSettings={saveSettings} - onCloseSettings={() => setShowSettings(false)} + onCloseSettings={() => { + // Navigate back to previous location or default + const backTo = previousLocationRef.current || '/' + navigate(backTo) + }} classifiedHighlights={classifiedHighlights} showHighlights={showHighlights} selectedHighlightId={selectedHighlightId} diff --git a/src/hooks/useBookmarksUI.ts b/src/hooks/useBookmarksUI.ts index 91852a5c..be2f8d1a 100644 --- a/src/hooks/useBookmarksUI.ts +++ b/src/hooks/useBookmarksUI.ts @@ -14,7 +14,6 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => { const [viewMode, setViewMode] = useState('compact') const [showHighlights, setShowHighlights] = useState(true) const [selectedHighlightId, setSelectedHighlightId] = useState(undefined) - const [showSettings, setShowSettings] = useState(false) const [currentArticleCoordinate, setCurrentArticleCoordinate] = useState(undefined) const [currentArticleEventId, setCurrentArticleEventId] = useState(undefined) const [currentArticle, setCurrentArticle] = useState(undefined) @@ -46,8 +45,6 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => { setShowHighlights, selectedHighlightId, setSelectedHighlightId, - showSettings, - setShowSettings, currentArticleCoordinate, setCurrentArticleCoordinate, currentArticleEventId,