refactor(ui): replace logout button text with icon button

- Replace text logout buttons with IconButton component
- Use faRightFromBracket icon for a cleaner, more minimal interface
- Apply changes to both loading state and normal state
- Maintain consistent styling with ghost variant

src/components/BookmarkList.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faChevronRight, faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
 import { Bookmark, ActiveAccount } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
+import IconButton from './IconButton'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -56,9 +57,13 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
           >
             <FontAwesomeIcon icon={faChevronLeft} />
           </button>
-          <button onClick={onLogout} className="logout-button">
+          <IconButton
-            Logout
+            icon={faRightFromBracket}
-          </button>
+            onClick={onLogout}
+            title="Logout"
+            ariaLabel="Logout"
+            variant="ghost"
+          />
         </div>
       </div>
       

src/components/Bookmarks.tsx

@@ -3,11 +3,13 @@ import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
+import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
 import { Bookmark } from '../types/bookmarks'
 import { BookmarkList } from './BookmarkList'
 import { fetchBookmarks } from '../services/bookmarkService'
 import ContentPanel from './ContentPanel'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
+import IconButton from './IconButton'
 
 interface BookmarksProps {
   relayPool: RelayPool | null
@@ -104,9 +106,13 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
               <p className="user-info">Logged in as: {formatUserDisplay()}</p>
             )}
           </div>
-          <button onClick={onLogout} className="logout-button">
+          <IconButton
-            Logout
+            icon={faRightFromBracket}
-          </button>
+            onClick={onLogout}
+            title="Logout"
+            ariaLabel="Logout"
+            variant="ghost"
+          />
         </div>
         <div className="loading">Loading bookmarks...</div>
       </div>