From bec769ac1b256e7d25ee7a3892652eae133fea25 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 16:17:58 +0200
Subject: [PATCH] refactor: move add bookmark button to web bookmarks section

- Removed add bookmark button from sidebar header
- Added small CompactButton style button next to 'Web bookmarks' heading
- Button only shows when user is logged in and web bookmarks section exists
- Moved bookmark creation logic from SidebarHeader to BookmarkList
- Cleaned up unused imports in SidebarHeader
---
 src/components/BookmarkList.tsx  | 38 ++++++++++++++++++++++++++++----
 src/components/SidebarHeader.tsx | 33 ++-------------------------
 2 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx
index e2f0e092..9a4d536f 100644
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -1,19 +1,24 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart, faPlus } from '@fortawesome/free-solid-svg-icons'
 import { formatDistanceToNow } from 'date-fns'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import SidebarHeader from './SidebarHeader'
 import IconButton from './IconButton'
+import CompactButton from './CompactButton'
 import { ViewMode } from './Bookmarks'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
 import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet } from '../utils/bookmarkUtils'
 import { UserSettings } from '../services/settingsService'
+import AddBookmarkModal from './AddBookmarkModal'
+import { createWebBookmark } from '../services/webBookmarkService'
+import { RELAYS } from '../config/relays'
+import { Hooks } from 'applesauce-react'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -55,6 +60,16 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   const navigate = useNavigate()
   const bookmarksListRef = useRef<HTMLDivElement>(null)
   const friendsColor = settings?.highlightColorFriends || '#f97316'
+  const [showAddModal, setShowAddModal] = useState(false)
+  const activeAccount = Hooks.useActiveAccount()
+
+  const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
+    if (!activeAccount || !relayPool) {
+      throw new Error('Please login to create bookmarks')
+    }
+
+    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
+  }
 
   // Pull-to-refresh for bookmarks
   const { isRefreshing: isPulling, pullPosition } = usePullToRefresh({
@@ -122,7 +137,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         onToggleCollapse={onToggleCollapse} 
         onLogout={onLogout}
         onOpenSettings={onOpenSettings}
-        relayPool={relayPool}
         isMobile={isMobile}
       />
       
@@ -153,7 +167,17 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
           />
           {sections.filter(s => s.items.length > 0).map(section => (
             <div key={section.key} className="bookmarks-section">
-              <h3 className="bookmarks-section-title">{section.title}</h3>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem' }}>
+                <h3 className="bookmarks-section-title" style={{ margin: 0 }}>{section.title}</h3>
+                {section.key === 'web' && activeAccount && (
+                  <CompactButton
+                    icon={faPlus}
+                    onClick={() => setShowAddModal(true)}
+                    title="Add web bookmark"
+                    ariaLabel="Add web bookmark"
+                  />
+                )}
+              </div>
               <div className={`bookmarks-grid bookmarks-${viewMode}`}>
                 {section.items.map((individualBookmark, index) => (
                   <BookmarkItem 
@@ -215,6 +239,12 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
           />
         </div>
       </div>
+      {showAddModal && (
+        <AddBookmarkModal
+          onClose={() => setShowAddModal(false)}
+          onSave={handleSaveBookmark}
+        />
+      )}
     </div>
   )
 }
diff --git a/src/components/SidebarHeader.tsx b/src/components/SidebarHeader.tsx
index d326eb8f..4997621f 100644
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -1,28 +1,22 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faPlus, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { Accounts } from 'applesauce-accounts'
-import { RelayPool } from 'applesauce-relay'
 import IconButton from './IconButton'
-import AddBookmarkModal from './AddBookmarkModal'
-import { createWebBookmark } from '../services/webBookmarkService'
-import { RELAYS } from '../config/relays'
 
 interface SidebarHeaderProps {
   onToggleCollapse: () => void
   onLogout: () => void
   onOpenSettings: () => void
-  relayPool: RelayPool | null
   isMobile?: boolean
 }
 
-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool, isMobile = false }) => {
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, isMobile = false }) => {
   const [isConnecting, setIsConnecting] = useState(false)
-  const [showAddModal, setShowAddModal] = useState(false)
   const navigate = useNavigate()
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -54,14 +48,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
     return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
   }
 
-  const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
-    if (!activeAccount || !relayPool) {
-      throw new Error('Please login to create bookmarks')
-    }
-
-    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
-  }
-
   const profileImage = getProfileImage()
 
   return (
@@ -124,15 +110,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Settings"
           variant="ghost"
         />
-        {activeAccount && (
-          <IconButton
-            icon={faPlus}
-            onClick={() => setShowAddModal(true)}
-            title="Add bookmark"
-            ariaLabel="Add bookmark"
-            variant="ghost"
-          />
-        )}
         {activeAccount ? (
           <IconButton
             icon={faRightFromBracket}
@@ -152,12 +129,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
         )}
         </div>
       </div>
-      {showAddModal && (
-        <AddBookmarkModal
-          onClose={() => setShowAddModal(false)}
-          onSave={handleSaveBookmark}
-        />
-      )}
     </>
   )
 }