feat: add inline action buttons for bookmarks

- Add Archive toggle button with visual feedback (diagonal recessed background, grayscale thumbnail)

- Add "Show in Linkding" action that opens the bookmark's detail view

- Add Delete button with 5-second double-click confirmation

- Update BookmarkItem to use Kumo Tooltip and Phosphor Icons for actions

- Extend bookmarkService and background script to support these new actions

Author: MrWillCom

components/BookmarkItem.module.css

@@ -8,3 +8,17 @@
     filter: saturate(0.5);
   }
 }
+
+.bookmarkItem[data-archived='true'] {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 4px,
+    var(--color-kumo-recessed) 4px,
+    var(--color-kumo-recessed) 8px
+  );
+
+  & img {
+    filter: grayscale(1);
+  }
+}

components/BookmarkItem.tsx

@@ -1,5 +1,11 @@
-import { memo } from 'react'
-import { Link } from '@cloudflare/kumo'
+import { memo, useState, useRef, useCallback } from 'react'
+import { Button, Link, Tooltip, TooltipProvider } from '@cloudflare/kumo'
+import {
+  TrayArrowDownIcon,
+  TrayArrowUpIcon,
+  ArrowSquareOutIcon,
+  TrashIcon,
+} from '@phosphor-icons/react'
 import { BookmarkContent } from './BookmarkContent'
 import type { Bookmark } from '@/utils/types'
 import styles from './BookmarkItem.module.css'
@@ -8,16 +14,39 @@ interface BookmarkItemProps {
   bookmark: Bookmark
   isDimmed: boolean
   onToggleUnread: (id: number, currentUnread: boolean) => Promise<void>
+  onDelete: (id: number) => Promise<void>
+  onToggleArchive: (id: number, currentArchived: boolean) => Promise<void>
+  onOpenInLinkding: (bookmark: Bookmark) => void
 }
 
 export const BookmarkItem = memo(function BookmarkItem({
   bookmark,
   isDimmed,
   onToggleUnread,
+  onDelete,
+  onToggleArchive,
+  onOpenInLinkding,
 }: BookmarkItemProps) {
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleDeletePress = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    if (isConfirmingDelete) {
+      onDelete(bookmark.id)
+      setIsConfirmingDelete(false)
+    } else {
+      setIsConfirmingDelete(true)
+      timerRef.current = setTimeout(() => {
+        setIsConfirmingDelete(false)
+      }, 5000)
+    }
+  }, [isConfirmingDelete, onDelete, bookmark.id])
+
   return (
     <div
       data-dimmed={isDimmed}
+      data-archived={bookmark.is_archived}
       className={`group relative flex items-start gap-1 py-2 px-2 hover:bg-kumo-elevated transition-colors ${styles.bookmarkItem}`}
       style={{ contentVisibility: 'auto' }}
     >
@@ -51,6 +80,57 @@ export const BookmarkItem = memo(function BookmarkItem({
         tagClassName={styles.dimAsset}
         previewClassName={styles.dimAsset}
       />
+      <div className="absolute bottom-1 right-2 z-10 flex items-center opacity-0 group-hover:opacity-100 transition-opacity">
+        <TooltipProvider>
+          <Tooltip content={bookmark.is_archived ? 'Unarchive' : 'Archive'} asChild side="top">
+            <Button
+              variant="ghost"
+              shape="square"
+              icon={
+                bookmark.is_archived ? (
+                  <TrayArrowUpIcon weight="bold" />
+                ) : (
+                  <TrayArrowDownIcon weight="bold" />
+                )
+              }
+              aria-label={bookmark.is_archived ? 'Unarchive' : 'Archive'}
+              onClick={e => {
+                e.stopPropagation()
+                onToggleArchive(bookmark.id, bookmark.is_archived)
+              }}
+            />
+          </Tooltip>
+          <Tooltip content="Show in Linkding" asChild side="top">
+            <Button
+              variant="ghost"
+              shape="square"
+              icon={<ArrowSquareOutIcon weight="bold" />}
+              aria-label="Show in Linkding"
+              onClick={e => {
+                e.stopPropagation()
+                onOpenInLinkding(bookmark)
+              }}
+            />
+          </Tooltip>
+          <Tooltip
+            content={isConfirmingDelete ? 'Click again to confirm' : 'Delete'}
+            disabled={!isConfirmingDelete}
+            asChild
+            side="top"
+          >
+            <Button
+              variant={isConfirmingDelete ? 'destructive' : 'ghost'}
+              shape="square"
+              icon={<TrashIcon weight="bold" />}
+              aria-label={isConfirmingDelete ? 'Confirm delete bookmark' : 'Delete bookmark'}
+              onClick={e => {
+                e.stopPropagation()
+                handleDeletePress()
+              }}
+            />
+          </Tooltip>
+        </TooltipProvider>
+      </div>
     </div>
   )
 })

components/BookmarksInfiniteList.tsx

@@ -13,6 +13,9 @@ interface BookmarksInfiniteListProps {
   loadMoreRef: React.RefObject<HTMLDivElement | null>
   loadMore: () => void
   onToggleUnread: (id: number, current: boolean) => Promise<void>
+  onDelete: (id: number) => Promise<void>
+  onToggleArchive: (id: number, currentArchived: boolean) => Promise<void>
+  onOpenInLinkding: (bookmark: Bookmark) => void
 }
 
 export const BookmarksInfiniteList = memo(function BookmarksInfiniteList({
@@ -24,6 +27,9 @@ export const BookmarksInfiniteList = memo(function BookmarksInfiniteList({
   loadMoreRef,
   loadMore,
   onToggleUnread,
+  onDelete,
+  onToggleArchive,
+  onOpenInLinkding,
 }: BookmarksInfiniteListProps) {
   return (
     <div className="flex flex-col divide-y divide-kumo-line border-b border-kumo-line">
@@ -35,6 +41,9 @@ export const BookmarksInfiniteList = memo(function BookmarksInfiniteList({
               bookmark={bookmark}
               isDimmed={unreadFilter === 'all' && !bookmark.unread}
               onToggleUnread={onToggleUnread}
+              onDelete={onDelete}
+              onToggleArchive={onToggleArchive}
+              onOpenInLinkding={onOpenInLinkding}
             />
           ))}
           <div ref={loadMoreRef} className="py-4 flex flex-col items-center gap-4">

components/BookmarksList.tsx

@@ -154,6 +154,20 @@ export default function BookmarksList({ variant = 'default' }: BookmarksListProp
     await bookmarkService.deleteBookmark(id)
   }, [])
 
+  const handleToggleArchive = useCallback(async (id: number, currentArchived: boolean) => {
+    await bookmarkService.toggleArchive(id, currentArchived)
+  }, [])
+
+  const handleOpenInLinkding = useCallback(async (bookmark: Bookmark) => {
+    const response = await browser.runtime.sendMessage({
+      type: 'get-server-url',
+    })
+    if (!response.ok || !response.server) return
+    await browser.tabs.create({
+      url: `${response.server}/bookmarks?details=${bookmark.id}`,
+    })
+  }, [])
+
   if (error) {
     return (
       <div className="p-4 flex flex-col items-center gap-4">
@@ -201,6 +215,9 @@ export default function BookmarksList({ variant = 'default' }: BookmarksListProp
           loadMoreRef={loadMoreRef}
           loadMore={loadMore}
           onToggleUnread={handleToggleUnread}
+          onDelete={handleDelete}
+          onToggleArchive={handleToggleArchive}
+          onOpenInLinkding={handleOpenInLinkding}
         />
       </div>
     </div>

entrypoints/background.ts

@@ -98,7 +98,13 @@ async function processSyncQueue() {
   }
 }
 
-type MessageType = 'sync-request' | 'api-request' | 'api-patch' | 'api-post' | 'api-delete'
+type MessageType =
+  | 'sync-request'
+  | 'api-request'
+  | 'api-patch'
+  | 'api-post'
+  | 'api-delete'
+  | 'get-server-url'
 
 interface ApiMessage {
   type: MessageType
@@ -157,6 +163,11 @@ export default defineBackground(() => {
   browser.runtime.onMessage.addListener((message: ApiMessage, _sender, sendResponse) => {
     const { type, url, data, options } = message
 
+    if (type === 'get-server-url') {
+      serverStorage.getValue().then(server => sendResponse({ ok: true, server }))
+      return true
+    }
+
     if (type === 'sync-request') {
       processSyncQueue()
         .then(() => sendResponse({ ok: true }))

utils/bookmarkService.ts

@@ -35,4 +35,20 @@ export const bookmarkService = {
   async addBookmark(bookmark: Bookmark) {
     await db.bookmarks.add({ ...bookmark, _sync_status: 'synced' })
   },
+
+  async toggleArchive(id: number, currentArchived: boolean) {
+    const newArchived = !currentArchived
+    await db.bookmarks.update(id, {
+      is_archived: newArchived,
+      _sync_status: 'pending',
+      _local_modified_at: new Date().toISOString(),
+    })
+    await db.sync_queue.add({
+      action: 'update',
+      bookmark_id: id,
+      payload: { is_archived: newArchived },
+      timestamp: Date.now(),
+    })
+    browser.runtime.sendMessage({ type: 'sync-request' })
+  },
 }