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

@@ -71,7 +71,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/explore/highlights" 
+        path="/explore/writings" 
         element={
           <Bookmarks 
             relayPool={relayPool}

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' : 

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>