From 036ee20d98e1efd7d7c3b2730b08afdca2cf1571 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 20:09:46 +0200
Subject: [PATCH] feat: add URL routing for /me page tabs

- Add routes for /me/highlights, /me/reading-list, /me/archive
- Redirect /me to /me/highlights by default
- Update Bookmarks component to extract tab from URL path
- Pass activeTab prop to Me component based on current route
- Update Me component to use URL-based tab state instead of local state
- Update tab click handlers to navigate to appropriate URLs
- Enable deep-linking to specific tabs (e.g., /me/reading-list)
---
 src/App.tsx                  | 22 ++++++++++++++++++++++
 src/components/Bookmarks.tsx | 10 ++++++++--
 src/components/Me.tsx        | 18 +++++++++++++-----
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0b63ce61..24c5bae2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,6 +72,28 @@ function AppRoutes({
       />
       <Route 
         path="/me" 
+        element={<Navigate to="/me/highlights" replace />} 
+      />
+      <Route 
+        path="/me/highlights" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/reading-list" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/archive" 
         element={
           <Bookmarks 
             relayPool={relayPool}
diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index e7abf2e1..c9ea02b6 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -36,7 +36,13 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   
   const showSettings = location.pathname === '/settings'
   const showExplore = location.pathname === '/explore'
-  const showMe = location.pathname === '/me'
+  const showMe = location.pathname.startsWith('/me')
+  
+  // Extract tab from me routes
+  const meTab = location.pathname === '/me' ? 'highlights' : 
+                location.pathname === '/me/highlights' ? 'highlights' :
+                location.pathname === '/me/reading-list' ? 'reading-list' :
+                location.pathname === '/me/archive' ? 'archive' : 'highlights'
   
   // Track previous location for going back from settings/me/explore
   useEffect(() => {
@@ -263,7 +269,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
         relayPool ? <Explore relayPool={relayPool} /> : null
       ) : undefined}
       me={showMe ? (
-        relayPool ? <Me relayPool={relayPool} /> : null
+        relayPool ? <Me relayPool={relayPool} activeTab={meTab} /> : null
       ) : undefined}
       toastMessage={toastMessage ?? undefined}
       toastType={toastType}
diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index cc2d829e..387e4f78 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -23,14 +23,15 @@ import { faBooks } from '../icons/customIcons'
 
 interface MeProps {
   relayPool: RelayPool
+  activeTab?: TabType
 }
 
 type TabType = 'highlights' | 'reading-list' | 'archive'
 
-const Me: React.FC<MeProps> = ({ relayPool }) => {
+const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
-  const [activeTab, setActiveTab] = useState<TabType>('highlights')
+  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
   const [highlights, setHighlights] = useState<Highlight[]>([])
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
   const [readArticles, setReadArticles] = useState<BlogPostPreview[]>([])
@@ -38,6 +39,13 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
   const [error, setError] = useState<string | null>(null)
   const [viewMode, setViewMode] = useState<ViewMode>('cards')
 
+  // Update local state when prop changes
+  useEffect(() => {
+    if (propActiveTab) {
+      setActiveTab(propActiveTab)
+    }
+  }, [propActiveTab])
+
   useEffect(() => {
     const loadData = async () => {
       if (!activeAccount) {
@@ -286,7 +294,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
             data-tab="highlights"
-            onClick={() => setActiveTab('highlights')}
+            onClick={() => navigate('/me/highlights')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
             <span className="tab-label">Highlights</span>
@@ -295,7 +303,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           <button
             className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
             data-tab="reading-list"
-            onClick={() => setActiveTab('reading-list')}
+            onClick={() => navigate('/me/reading-list')}
           >
             <FontAwesomeIcon icon={faBookmark} />
             <span className="tab-label">Reading List</span>
@@ -304,7 +312,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           <button
             className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
             data-tab="archive"
-            onClick={() => setActiveTab('archive')}
+            onClick={() => navigate('/me/archive')}
           >
             <FontAwesomeIcon icon={faBooks} />
             <span className="tab-label">Archive</span>