feat: move support button to bottom-left of bookmarks bar

src/components/BookmarkList.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart } from '@fortawesome/free-solid-svg-icons'
 import { formatDistanceToNow } from 'date-fns'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
@@ -48,6 +49,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   relayPool,
   isMobile = false
 }) => {
+  const navigate = useNavigate()
   const bookmarksListRef = useRef<HTMLDivElement>(null)
 
   // Pull-to-refresh for bookmarks
@@ -149,6 +151,13 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         </div>
       )}
       <div className="view-mode-controls">
+        <IconButton
+          icon={faHeart}
+          onClick={() => navigate('/support')}
+          title="Support Boris"
+          ariaLabel="Support"
+          variant="ghost"
+        />
         {onRefresh && (
           <IconButton
             icon={faRotate}

src/components/SidebarHeader.tsx

@@ -1,7 +1,7 @@
 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, faBolt } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faPlus, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
@@ -117,13 +117,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Explore"
           variant="ghost"
         />
-        <IconButton
-          icon={faBolt}
-          onClick={() => navigate('/support')}
-          title="Support"
-          ariaLabel="Support"
-          variant="ghost"
-        />
         <IconButton
           icon={faGear}
           onClick={onOpenSettings}