From 0b1cf267a77f2690170c36761c4ef48b1fd04eca Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 11:08:42 +0200
Subject: [PATCH] refactor: reorder explore tabs - highlights first, writings
 second

- Change default tab to highlights on /explore
- Reorder tab buttons in UI (highlights, then writings)
- Update route: /explore shows highlights, /explore/writings shows writings
- Update route detection logic in Bookmarks component
- Highlights are now the primary content on explore page
---
 src/App.tsx                  |  2 +-
 src/components/Bookmarks.tsx |  2 +-
 src/components/Explore.tsx   | 20 ++++++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3b0a8575..ed2c139d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -71,7 +71,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/explore/highlights" 
+        path="/explore/writings" 
         element={
           <Bookmarks 
             relayPool={relayPool}
diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index fbe3f8fe..73b92fd9 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -41,7 +41,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const showProfile = location.pathname.startsWith('/p/')
   
   // Extract tab from explore routes
-  const exploreTab = location.pathname === '/explore/highlights' ? 'highlights' : 'writings'
+  const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
   
   // Extract tab from me routes
   const meTab = location.pathname === '/me' ? 'highlights' : 
diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx
index 10283919..934d417e 100644
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -25,7 +25,7 @@ type TabType = 'writings' | 'highlights'
 const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }) => {
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
-  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'writings')
+  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
   const [blogPosts, setBlogPosts] = useState<BlogPostPreview[]>([])
   const [highlights, setHighlights] = useState<Highlight[]>([])
   const [loading, setLoading] = useState(true)
@@ -293,22 +293,22 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
         )}
         
         <div className="me-tabs">
-          <button
-            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
-            data-tab="writings"
-            onClick={() => navigate('/explore')}
-          >
-            <FontAwesomeIcon icon={faPenToSquare} />
-            <span className="tab-label">Writings</span>
-          </button>
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
             data-tab="highlights"
-            onClick={() => navigate('/explore/highlights')}
+            onClick={() => navigate('/explore')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
             <span className="tab-label">Highlights</span>
           </button>
+          <button
+            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
+            data-tab="writings"
+            onClick={() => navigate('/explore/writings')}
+          >
+            <FontAwesomeIcon icon={faPenToSquare} />
+            <span className="tab-label">Writings</span>
+          </button>
         </div>
       </div>