From ad3f88208186871c0964739372d375d2194ad3b8 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Tue, 14 Apr 2026 01:21:27 +0530
Subject: [PATCH 1/2] feat: implement bookmarks page

---
 src/app.css                                   |   2 +-
 src/app/components/BookmarkListPicker.svelte  | 284 ++++++
 src/app/components/Chat.svelte                |  88 +-
 src/app/components/ChatMessageMenu.svelte     |  10 +
 .../components/ChatMessageMenuMobile.svelte   |  11 +
 src/app/components/PrimaryNav.svelte          |   7 +
 src/app/components/RoomItemMenu.svelte        |  15 +-
 src/app/components/RoomItemMenuMobile.svelte  |  19 +-
 src/app/core/commands.ts                      | 151 +++
 src/app/core/state.ts                         |   2 +
 src/app/util/routes.ts                        |  21 +-
 src/app/util/title.ts                         |   1 +
 src/routes/bookmarks/+page.svelte             | 902 ++++++++++++++++++
 src/routes/spaces/[relay]/[h]/+page.svelte    |  89 +-
 src/routes/spaces/[relay]/chat/+page.svelte   |  95 +-
 15 files changed, 1623 insertions(+), 74 deletions(-)
 create mode 100644 src/app/components/BookmarkListPicker.svelte
 create mode 100644 src/routes/bookmarks/+page.svelte

diff --git a/src/app.css b/src/app.css
index e36458bd..fa0b8a76 100644
--- a/src/app.css
+++ b/src/app.css
@@ -327,7 +327,7 @@
 
 .note-editor .tiptap {
   --tiptap-object-bg: var(--color-base-200);
-  @apply input rounded-box block h-auto min-h-32 w-full p-[.65rem] pb-6;
+  @apply input rounded-box h-auto min-h-32 p-[.65rem] pb-6;
 }
 
 .input-editor .tiptap {
diff --git a/src/app/components/BookmarkListPicker.svelte b/src/app/components/BookmarkListPicker.svelte
new file mode 100644
index 00000000..039a0c24
--- /dev/null
+++ b/src/app/components/BookmarkListPicker.svelte
@@ -0,0 +1,284 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {first, uniqBy} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {DELETE, getTagValue, getTagValues, sortEventsDesc} from "@welshman/util"
+  import {load} from "@welshman/net"
+  import {pubkey, waitForThunkError} from "@welshman/app"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
+  import Folder from "@assets/icons/folder.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
+  import TrashBinMinimalistic from "@assets/icons/trash-bin-minimalistic.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {createBookmarkList, addEventBookmark, deleteBookmarkList} from "@app/core/commands"
+  import {deriveEvents, INDEXER_RELAYS, shouldIgnoreError} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+
+  type Props = {
+    event?: TrustedEvent
+  }
+
+  type BookmarkList = {
+    key: string
+    label: string
+    count: number
+  }
+
+  const {event}: Props = $props()
+
+  const listEvents = deriveEvents([{kinds: [10003, 30003, DELETE]}])
+
+  const getListKey = (listEvent: TrustedEvent) =>
+    `${listEvent.kind}:${getTagValue("d", listEvent.tags) || ""}`
+
+  const getListLabel = (listEvent: TrustedEvent) =>
+    getTagValue("d", listEvent.tags) || (listEvent.kind === 10003 ? "Saved Items" : "Untitled List")
+
+  const userLists = $derived(
+    sortEventsDesc($listEvents).filter(
+      listEvent => listEvent.pubkey === $pubkey && listEvent.kind !== DELETE,
+    ),
+  )
+
+  const userDeletes = $derived(
+    sortEventsDesc($listEvents).filter(
+      listEvent => listEvent.pubkey === $pubkey && listEvent.kind === DELETE,
+    ),
+  )
+
+  const isDeletedList = (listEvent: TrustedEvent) => {
+    const d = getTagValue("d", listEvent.tags) || ""
+    const address = `${listEvent.kind}:${listEvent.pubkey}:${d}`
+
+    return userDeletes.some(deleteEvent => {
+      if (deleteEvent.created_at < listEvent.created_at) {
+        return false
+      }
+
+      return (
+        getTagValues("e", deleteEvent.tags).includes(listEvent.id) ||
+        getTagValues("a", deleteEvent.tags).includes(address)
+      )
+    })
+  }
+
+  const lists = $derived.by(() => {
+    const uniqueEvents = uniqBy(getListKey, userLists).filter(
+      listEvent => !isDeletedList(listEvent),
+    )
+
+    const mapped = uniqueEvents.map(
+      (listEvent): BookmarkList => ({
+        key: getListKey(listEvent),
+        label: getListLabel(listEvent),
+        count: getTagValues(["e", "a", "p", "r"], listEvent.tags).length,
+      }),
+    )
+
+    const savedItems = first(mapped.filter(list => list.key === "10003:")) || {
+      key: "10003:",
+      label: "Saved Items",
+      count: 0,
+    }
+
+    return [savedItems, ...mapped.filter(list => list.key !== "10003:")]
+  })
+
+  let listName = $state("")
+  let creating = $state(false)
+  let selecting = $state(false)
+  let deleting = $state(false)
+  let loadedListPubkey: string | undefined = $state()
+
+  const close = () => history.back()
+
+  const isIgnorableBookmarkListError = (error: string) =>
+    shouldIgnoreError(error) || error.includes("only accepts kind 10002 events")
+
+  const createList = async () => {
+    if (!listName.trim() || creating) {
+      return
+    }
+
+    creating = true
+
+    try {
+      const thunk = await createBookmarkList(listName)
+
+      if (!thunk) {
+        pushToast({message: "List already exists"})
+        return
+      }
+
+      const error = await waitForThunkError(thunk)
+
+      if (error) {
+        pushToast({theme: "error", message: error})
+      } else {
+        pushToast({message: "List created"})
+        listName = ""
+      }
+    } finally {
+      creating = false
+    }
+  }
+
+  const addToList = async (key: string, label: string) => {
+    if (!event || selecting) {
+      return
+    }
+
+    selecting = true
+
+    try {
+      const thunk = await addEventBookmark(event, key)
+
+      if (!thunk) {
+        pushToast({message: "Already bookmarked"})
+        return
+      }
+
+      const error = await waitForThunkError(thunk)
+
+      if (error) {
+        pushToast({theme: "error", message: error})
+      } else {
+        pushToast({message: `Saved to ${label}`})
+        close()
+      }
+    } finally {
+      selecting = false
+    }
+  }
+
+  const deleteList = async (key: string, label: string) => {
+    if (deleting || key === "10003:") {
+      return
+    }
+
+    if (!confirm(`Delete \"${label}\"? This cannot be undone.`)) {
+      return
+    }
+
+    deleting = true
+
+    try {
+      const thunk = await deleteBookmarkList(key)
+
+      if (!thunk) {
+        pushToast({theme: "error", message: "Unable to delete this list"})
+        return
+      }
+
+      const error = await waitForThunkError(thunk)
+
+      if (error && !isIgnorableBookmarkListError(error)) {
+        pushToast({theme: "error", message: error})
+      } else {
+        pushToast({message: `Deleted ${label}`})
+      }
+    } finally {
+      deleting = false
+    }
+  }
+
+  const loadBookmarkLists = async () => {
+    if (!$pubkey || loadedListPubkey === $pubkey) {
+      return
+    }
+
+    loadedListPubkey = $pubkey
+
+    await load({
+      relays: INDEXER_RELAYS,
+      filters: [{kinds: [10003, 30003, DELETE], authors: [$pubkey]}],
+    })
+  }
+
+  onMount(() => {
+    void loadBookmarkLists()
+  })
+
+  $effect(() => {
+    if ($pubkey && loadedListPubkey !== $pubkey) {
+      void loadBookmarkLists()
+    }
+  })
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>{event ? "Add to Bookmark List" : "Manage Bookmark Lists"}</ModalTitle>
+    </ModalHeader>
+
+    <div class="col-2 gap-3">
+      <Field>
+        {#snippet label()}
+          New list name
+        {/snippet}
+        {#snippet input()}
+          <div class="row-2 min-w-0 grow gap-2">
+            <label class="input input-bordered flex grow items-center gap-2">
+              <Icon icon={Folder} />
+              <input bind:value={listName} class="grow" type="text" placeholder="e.g. AI threads" />
+            </label>
+            <Button
+              class="btn btn-neutral"
+              onclick={createList}
+              disabled={creating || !listName.trim()}>
+              <Icon icon={Add} />
+              Create
+            </Button>
+          </div>
+        {/snippet}
+      </Field>
+
+      <div class="col-2 gap-2">
+        {#each lists as list (list.key)}
+          {#if event}
+            <Button
+              class="card2 card2-sm bg-alt flex items-center justify-between"
+              onclick={() => addToList(list.key, list.label)}
+              disabled={selecting}>
+              <span class="inline-flex items-center gap-2">
+                <Icon size={4} icon={list.key === "10003:" ? Bookmark : Folder} />
+                {list.label}
+              </span>
+              <span class="badge badge-sm badge-neutral">{list.count}</span>
+            </Button>
+          {:else}
+            <div class="card2 card2-sm bg-alt flex items-center justify-between gap-2">
+              <span class="min-w-0 truncate inline-flex items-center gap-2">
+                <Icon size={4} icon={list.key === "10003:" ? Bookmark : Folder} />
+                {list.label}
+              </span>
+              <div class="flex items-center gap-2">
+                <span class="badge badge-sm badge-neutral">{list.count}</span>
+                {#if list.key !== "10003:"}
+                  <Button
+                    class="btn btn-ghost btn-xs btn-square text-error"
+                    onclick={() => deleteList(list.key, list.label)}
+                    disabled={deleting}>
+                    <Icon size={4} icon={TrashBinMinimalistic} />
+                  </Button>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  </ModalBody>
+
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={close}>Close</Button>
+  </ModalFooter>
+</Modal>
diff --git a/src/app/components/Chat.svelte b/src/app/components/Chat.svelte
index be5f02a9..e330d1b5 100644
--- a/src/app/components/Chat.svelte
+++ b/src/app/components/Chat.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {onMount} from "svelte"
+  import {onMount, tick} from "svelte"
+  import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import {
     ago,
@@ -198,6 +199,71 @@
   let compose: ChatCompose | undefined = $state()
   let parent: TrustedEvent | undefined = $state()
   let eventToEdit: TrustedEvent | undefined = $state()
+  let userHasScrolled = $state(false)
+  let isProgrammaticScroll = $state(false)
+  let programmaticScrollTimeout: ReturnType<typeof setTimeout>
+
+  const at = $derived(parseInt($page.url.searchParams.get("at")!))
+  const targetId = $derived($page.url.searchParams.get("e"))
+
+  $effect(() => {
+    void at
+    void targetId
+    userHasScrolled = false
+  })
+
+  const manageScrollPosition = () => {
+    if (!userHasScrolled && (!isNaN(at) || targetId)) {
+      const targetEvent = targetId
+        ? ($chat?.messages || []).find(event => event.id === targetId)
+        : sortBy(e => -e.created_at, $chat?.messages || []).find(event => event.created_at <= at)
+
+      if (targetEvent) {
+        const target = document.querySelector(`[data-event="${targetEvent.id}"]`)
+
+        if (target instanceof HTMLElement) {
+          isProgrammaticScroll = true
+          clearTimeout(programmaticScrollTimeout)
+          programmaticScrollTimeout = setTimeout(() => {
+            isProgrammaticScroll = false
+          }, 300)
+
+          target.scrollIntoView({block: "center"})
+
+          if (target.dataset.highlighted !== "true") {
+            target.dataset.highlighted = "true"
+            target.style.filter = "brightness(1.5)"
+            target.style.transitionProperty = "all"
+            target.style.transitionDuration = "400ms"
+
+            setTimeout(() => {
+              target.style.transitionDuration = "300ms"
+              target.style.filter = ""
+            }, 800)
+          }
+        }
+      }
+    }
+  }
+
+  let isInteracting = false
+  let interactionTimeout: ReturnType<typeof setTimeout>
+  const markInteraction = () => {
+    isInteracting = true
+    clearTimeout(interactionTimeout)
+    interactionTimeout = setTimeout(() => {
+      isInteracting = false
+    }, 500)
+  }
+
+  const onScroll = () => {
+    if (!isProgrammaticScroll) {
+      if (isInteracting) {
+        userHasScrolled = true
+      }
+      manageScrollPosition()
+    }
+  }
 
   const elements = $derived.by(() => {
     const elements = []
@@ -229,6 +295,11 @@
     return elements.reverse()
   })
 
+  $effect(() => {
+    void elements
+    tick().then(manageScrollPosition)
+  })
+
   onMount(() => {
     for (const pubkey of others) {
       loadMessagingRelayList(pubkey)
@@ -279,7 +350,20 @@
   </div>
 </PageBar>
 
-<PageContent class="flex flex-col-reverse gap-2 py-4">
+<PageContent
+  onscroll={onScroll}
+  onwheel={markInteraction}
+  ontouchmove={markInteraction}
+  onpointerdown={markInteraction}
+  onpointermove={(e: PointerEvent) => {
+    if (e.buttons > 0) markInteraction()
+  }}
+  onkeydown={(e: KeyboardEvent) => {
+    if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(e.key)) {
+      markInteraction()
+    }
+  }}
+  class="flex flex-col-reverse gap-2 pt-4">
   {#if missingRelayLists.length > 0}
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">
diff --git a/src/app/components/ChatMessageMenu.svelte b/src/app/components/ChatMessageMenu.svelte
index 60691daa..cbe948af 100644
--- a/src/app/components/ChatMessageMenu.svelte
+++ b/src/app/components/ChatMessageMenu.svelte
@@ -2,8 +2,10 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
+  import BookmarkListPicker from "@app/components/BookmarkListPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {pushModal} from "@app/util/modal"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import Pen from "@assets/icons/pen.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
@@ -17,6 +19,11 @@
     popover.hide()
     pushModal(EventInfo, {event})
   }
+
+  const bookmark = () => {
+    popover.hide()
+    pushModal(BookmarkListPicker, {event})
+  }
 </script>
 
 <div class="join border border-solid border-neutral text-xs">
@@ -31,6 +38,9 @@
       <Icon size={4} icon={Pen} />
     </Button>
   {/if}
+  <Button class="btn join-item btn-xs" onclick={bookmark}>
+    <Icon size={4} icon={Bookmark} />
+  </Button>
   <Button class="btn join-item btn-xs" onclick={showInfo}>
     <Icon size={4} icon={Code2} />
   </Button>
diff --git a/src/app/components/ChatMessageMenuMobile.svelte b/src/app/components/ChatMessageMenuMobile.svelte
index 279a8d8a..3b65552f 100644
--- a/src/app/components/ChatMessageMenuMobile.svelte
+++ b/src/app/components/ChatMessageMenuMobile.svelte
@@ -12,10 +12,12 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
+  import BookmarkListPicker from "@app/components/BookmarkListPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {makeReaction} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {clip} from "@app/util/toast"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
 
   type Props = {
     pubkeys: string[]
@@ -52,6 +54,11 @@
     clip(event.content)
   }
 
+  const bookmarkMessage = () => {
+    history.back()
+    pushModal(BookmarkListPicker, {event}, {replaceState: true})
+  }
+
   const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
 </script>
 
@@ -66,6 +73,10 @@
         <Icon size={4} icon={Copy} />
         Copy Text
       </Button>
+      <Button class="btn btn-neutral w-full" onclick={bookmarkMessage}>
+        <Icon size={4} icon={Bookmark} />
+        Bookmark Message
+      </Button>
       <Button class="btn btn-neutral w-full" onclick={sendReply}>
         <Icon size={4} icon={Reply} />
         Send Reply
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 96208aee..0dab1210 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -2,6 +2,7 @@
   import type {Snippet} from "svelte"
   import {userProfile} from "@welshman/app"
   import Letter from "@assets/icons/letter.svg?dataurl"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Widget from "@assets/icons/widget-4.svg?dataurl"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
@@ -39,6 +40,9 @@
       <Divider />
     {/if}
     <div class="flex flex-col">
+      <PrimaryNavItem title="Bookmarks" href="/bookmarks" prefix="/bookmarks">
+        <ImageIcon alt="Bookmarks" src={Bookmark} size={8} />
+      </PrimaryNavItem>
       <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings">
         {#if $userProfile?.picture}
           <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
@@ -78,6 +82,9 @@
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Bookmarks" href="/bookmarks" prefix="/bookmarks">
+        <ImageIcon alt="Bookmarks" src={Bookmark} size={8} />
+      </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
           <ImageIcon alt="Spaces" src={Widget} size={8} />
diff --git a/src/app/components/RoomItemMenu.svelte b/src/app/components/RoomItemMenu.svelte
index e03e47c8..7ba16bb7 100644
--- a/src/app/components/RoomItemMenu.svelte
+++ b/src/app/components/RoomItemMenu.svelte
@@ -3,14 +3,16 @@
   import {ManagementMethod} from "@welshman/util"
   import {pubkey, manageRelay, repository} from "@welshman/app"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Danger from "@assets/icons/danger.svg?dataurl"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
+  import BookmarkListPicker from "@app/components/BookmarkListPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
-  import Report from "@app/components/Report.svelte"
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
+  import Report from "@app/components/Report.svelte"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
   import {deriveUserIsSpaceAdmin} from "@app/core/state"
@@ -40,6 +42,11 @@
     pushModal(EventDeleteConfirm, {url, event})
   }
 
+  const bookmarkMessage = () => {
+    onClick()
+    pushModal(BookmarkListPicker, {event})
+  }
+
   const showAdminDelete = () =>
     pushModal(Confirm, {
       title: `Delete Message`,
@@ -68,6 +75,12 @@
       Show JSON
     </Button>
   </li>
+  <li>
+    <Button onclick={bookmarkMessage}>
+      <Icon size={4} icon={Bookmark} />
+      Bookmark Message
+    </Button>
+  </li>
   {#if event.pubkey === $pubkey}
     <li>
       <Button onclick={showDelete} class="text-error">
diff --git a/src/app/components/RoomItemMenuMobile.svelte b/src/app/components/RoomItemMenuMobile.svelte
index b15d47cf..c99c351c 100644
--- a/src/app/components/RoomItemMenuMobile.svelte
+++ b/src/app/components/RoomItemMenuMobile.svelte
@@ -5,6 +5,7 @@
   import Bolt from "@assets/icons/bolt.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
@@ -14,13 +15,14 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
-  import ZapButton from "@app/components/ZapButton.svelte"
-  import EventInfo from "@app/components/EventInfo.svelte"
+  import BookmarkListPicker from "@app/components/BookmarkListPicker.svelte"
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
+  import ZapButton from "@app/components/ZapButton.svelte"
   import {ENABLE_ZAPS} from "@app/core/state"
-  import {publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {getRoomItemPath} from "@app/util/routes"
+  import {canEnforceNip70, publishReaction} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
+  import {getRoomItemPath} from "@app/util/routes"
 
   type Props = {
     url: string
@@ -54,6 +56,11 @@
   const showInfo = () => pushModal(EventInfo, {url, event}, {replaceState: true})
 
   const showDelete = () => pushModal(EventDeleteConfirm, {url, event})
+
+  const bookmarkMessage = () => {
+    history.back()
+    pushModal(BookmarkListPicker, {event}, {replaceState: true})
+  }
 </script>
 
 <Modal>
@@ -69,6 +76,10 @@
         <Icon size={4} icon={Code2} />
         Message Info
       </Button>
+      <Button class="btn btn-neutral w-full" onclick={bookmarkMessage}>
+        <Icon size={4} icon={Bookmark} />
+        Bookmark Message
+      </Button>
       {#if path}
         <Link class="btn btn-neutral" href={path}>
           <Icon size={4} icon={MenuDots} />
diff --git a/src/app/core/commands.ts b/src/app/core/commands.ts
index 9f99c659..2de878ff 100644
--- a/src/app/core/commands.ts
+++ b/src/app/core/commands.ts
@@ -33,6 +33,7 @@ import {
   ROOMS,
   COMMENT,
   APP_DATA,
+  asDecryptedEvent,
   isSignedEvent,
   makeEvent,
   normalizeRelayUrl,
@@ -41,11 +42,14 @@ import {
   removeFromListByPredicate,
   updateList,
   getTag,
+  getTagValue,
   getListTags,
   getRelayTagValues,
+  getEventTagValues,
   toNostrURI,
   RelayMode,
   getTagValues,
+  readList,
   uploadBlob,
   canUploadBlob,
   encryptFile,
@@ -167,6 +171,153 @@ export const broadcastUserData = async (relays: string[]) => {
 
 // List updates
 
+const BOOKMARKS = 10003
+const BOOKMARK_LISTS = 30003
+
+const parseListKey = (key: string) => {
+  const [kind, ...rest] = key.split(":")
+  return {
+    kind: parseInt(kind),
+    d: rest.join(":"),
+  }
+}
+
+const getUserBookmarkList = (key = `${BOOKMARKS}:`) => {
+  const author = pubkey.get()
+  const {kind, d} = parseListKey(key)
+
+  if (!author) {
+    return makeList({kind})
+  }
+
+  const latest = first(
+    repository
+      .query([{kinds: [kind], authors: [author]}])
+      .filter(event => getTagValue("d", event.tags) === d),
+  )
+
+  return latest ? readList(asDecryptedEvent(latest)) : makeList({kind})
+}
+
+export const createBookmarkList = async (title: string) => {
+  const d = title.trim()
+
+  if (!d) {
+    return
+  }
+
+  const existing = getUserBookmarkList(`${BOOKMARK_LISTS}:${d}`)
+
+  if (existing.event?.id) {
+    return
+  }
+
+  const list = makeList({kind: BOOKMARK_LISTS})
+  const event = await updateList(list, {publicTags: [["d", d]]}).reconcile(nip44EncryptToSelf)
+  const relays = uniq([...Router.get().FromUser().getUrls(), ...getRelayTagValues(event.tags)])
+
+  return publishThunk({event, relays})
+}
+
+export const addEventBookmark = async (target: TrustedEvent, key = `${BOOKMARKS}:`) => {
+  const list = getUserBookmarkList(key)
+  const {d} = parseListKey(key)
+
+  if (d && !list.event?.id) {
+    return
+  }
+
+  const existing = new Set(getEventTagValues(getListTags(list)))
+
+  if (existing.has(target.id)) {
+    return
+  }
+
+  const event = await addToListPublicly(list, ["e", target.id]).reconcile(nip44EncryptToSelf)
+  const relays = uniq([
+    ...Router.get().FromUser().getUrls(),
+    ...Router.get().Event(target).limit(3).getUrls(),
+    ...getRelayTagValues(event.tags),
+  ])
+
+  return publishThunk({event, relays})
+}
+
+export const removeEventBookmark = async (target: TrustedEvent, key = `${BOOKMARKS}:`) => {
+  const list = getUserBookmarkList(key)
+  const {d} = parseListKey(key)
+
+  if (d && !list.event?.id) {
+    return
+  }
+
+  const targetD = getTagValue("d", target.tags)
+  const targetAddress = targetD ? `${target.kind}:${target.pubkey}:${targetD}` : undefined
+  const hasMatch = getListTags(list).some(
+    tag =>
+      (tag[0] === "e" && tag[1] === target.id) ||
+      (targetAddress !== undefined && tag[0] === "a" && tag[1] === targetAddress),
+  )
+
+  if (!hasMatch) {
+    return
+  }
+
+  const event = await removeFromListByPredicate(
+    list,
+    tag =>
+      (tag[0] === "e" && tag[1] === target.id) ||
+      (targetAddress !== undefined && tag[0] === "a" && tag[1] === targetAddress),
+  ).reconcile(nip44EncryptToSelf)
+  const relays = uniq([
+    ...INDEXER_RELAYS,
+    ...getRelayTagValues(event.tags),
+    ...Router.get().Event(target).limit(3).getUrls(),
+  ])
+
+  return publishThunk({event, relays})
+}
+
+export const deleteBookmarkList = async (key: string) => {
+  const list = getUserBookmarkList(key)
+  const {kind, d} = parseListKey(key)
+
+  if (kind !== BOOKMARK_LISTS || !d || !list.event) {
+    return
+  }
+
+  const relays = uniq([...INDEXER_RELAYS, ...getRelayTagValues(list.event.tags)])
+  const address = `${kind}:${list.event.pubkey}:${d}`
+
+  return publishDelete({protect: false, event: list.event, tags: [["a", address]], relays})
+}
+
+export const renameBookmarkList = async (key: string, title: string) => {
+  const list = getUserBookmarkList(key)
+  const {kind, d} = parseListKey(key)
+  const nextD = title.trim()
+
+  if (kind !== BOOKMARK_LISTS || !d || !nextD || !list.event) {
+    return
+  }
+
+  if (nextD === d) {
+    return
+  }
+
+  const existing = getUserBookmarkList(`${BOOKMARK_LISTS}:${nextD}`)
+
+  if (existing.event?.id && existing.event.id !== list.event.id) {
+    return
+  }
+
+  const publicTags = [["d", nextD], ...list.publicTags.filter(tag => tag[0] !== "d")]
+  const event = await updateList(list, {publicTags}).reconcile(nip44EncryptToSelf)
+  const relays = uniq([...INDEXER_RELAYS, ...getRelayTagValues(list.event.tags)])
+
+  return publishThunk({event, relays})
+}
+
 export const addSpaceMembership = async (url: string) => {
   const list = get(userGroupList) || makeList({kind: ROOMS})
   const event = await addToListPublicly(list, ["r", url]).reconcile(nip44EncryptToSelf)
diff --git a/src/app/core/state.ts b/src/app/core/state.ts
index 767b16a9..927495cd 100644
--- a/src/app/core/state.ts
+++ b/src/app/core/state.ts
@@ -159,6 +159,8 @@ export const ROOM = "h"
 
 export const PROTECTED = ["-"]
 
+export const MESSAGE_KINDS = [MESSAGE]
+
 export const IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"]
 
 export const VIDEO_CONTENT_TYPES = ["video/quicktime", "video/webm", "video/mp4"]
diff --git a/src/app/util/routes.ts b/src/app/util/routes.ts
index 1a5371ae..b6552f99 100644
--- a/src/app/util/routes.ts
+++ b/src/app/util/routes.ts
@@ -26,7 +26,16 @@ import ChatEnable from "@app/components/ChatEnable.svelte"
 
 // Chat
 
-export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}`
+export const makeChatPath = (pubkeys: string[], event?: TrustedEvent) => {
+  let path = `/chat/${makeChatId(pubkeys)}`
+
+  if (event) {
+    const qp = new URLSearchParams({at: String(event.created_at), e: event.id})
+    path += "?" + qp.toString()
+  }
+
+  return path
+}
 
 export const makeRoomPath = (url: string, h: string) => `/spaces/${encodeRelay(url)}/${h}`
 
@@ -63,11 +72,11 @@ export const goToSpace = async (url: string) => {
   const prevPath = lastPageBySpaceUrl.get(encodeRelay(url))
 
   if (prevPath && prevPath !== makeSpacePath(url)) {
-    goto(prevPath, {replaceState: true})
+    goto(prevPath)
   } else if (window.matchMedia(`(min-width: ${theme.screens.md})`).matches) {
-    goto(makeSpacePath(url, "recent"), {replaceState: true})
+    goto(makeSpacePath(url, "recent"))
   } else {
-    goto(makeSpacePath(url), {replaceState: true})
+    goto(makeSpacePath(url))
   }
 }
 
@@ -76,7 +85,7 @@ export const goToSpace = async (url: string) => {
 export const makeMessagePath = (url: string, event: TrustedEvent) => {
   const h = getTagValue(ROOM, event.tags)
   const path = h ? makeRoomPath(url, h) : makeSpaceChatPath(url)
-  const qp = new URLSearchParams({at: String(event.created_at)})
+  const qp = new URLSearchParams({at: String(event.created_at), e: event.id})
 
   return path + "?" + qp.toString()
 }
@@ -127,7 +136,7 @@ export const goToEvent = (event: TrustedEvent, options: Record<string, any> = {}
 
 export const getEventPath = (event: TrustedEvent, urls: string[]) => {
   if (DM_KINDS.includes(event.kind)) {
-    return makeChatPath([event.pubkey, ...getPubkeyTagValues(event.tags)])
+    return makeChatPath([event.pubkey, ...getPubkeyTagValues(event.tags)], event)
   }
 
   if (urls.length > 0) {
diff --git a/src/app/util/title.ts b/src/app/util/title.ts
index ac60ac26..9dbf27d7 100644
--- a/src/app/util/title.ts
+++ b/src/app/util/title.ts
@@ -19,6 +19,7 @@ const staticTitles = new Map<string, string>([
   ["/spaces/[relay]/goals", "Goals"],
   ["/spaces/[relay]/polls", "Polls"],
   ["/chat", "Messages"],
+  ["/bookmarks", "Bookmarks"],
   ["/join", "Join Space"],
   ["/people", "Find People"],
   ["/settings/about", "About"],
diff --git a/src/routes/bookmarks/+page.svelte b/src/routes/bookmarks/+page.svelte
new file mode 100644
index 00000000..0ec98f90
--- /dev/null
+++ b/src/routes/bookmarks/+page.svelte
@@ -0,0 +1,902 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {onMount} from "svelte"
+  import {goto} from "$app/navigation"
+  import {page} from "$app/stores"
+  import {first, formatTimestamp, uniqBy} from "@welshman/lib"
+  import {load} from "@welshman/net"
+  import {
+    DELETE,
+    displayPubkey,
+    getIdFilters,
+    getTags,
+    getTagValue,
+    getTagValues,
+    sortEventsDesc,
+    tagsFromIMeta,
+  } from "@welshman/util"
+  import type {TrustedEvent} from "@welshman/util"
+  import {
+    displayProfileByPubkey,
+    loadProfile,
+    pubkey,
+    repository,
+    tracker,
+    waitForThunkError,
+  } from "@welshman/app"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
+  import Folder from "@assets/icons/folder.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import SliderMinimalisticHorizontal from "@assets/icons/slider-minimalistic-horizontal.svg?dataurl"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import BookmarkListPicker from "@app/components/BookmarkListPicker.svelte"
+  import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import {
+    addEventBookmark,
+    deleteBookmarkList,
+    removeEventBookmark,
+    renameBookmarkList,
+  } from "@app/core/commands"
+  import {
+    deriveEvents,
+    IMAGE_CONTENT_TYPES,
+    INDEXER_RELAYS,
+    shouldIgnoreError,
+    VIDEO_CONTENT_TYPES,
+  } from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {getEventPath} from "@app/util/routes"
+  import {pushToast} from "@app/util/toast"
+
+  type ContentType = "all" | "image" | "video" | "text"
+
+  type SidebarList = {
+    key: string
+    label: string
+    count: number
+    event: TrustedEvent | undefined
+  }
+
+  type BookmarkItem = {
+    key: string
+    event: TrustedEvent
+    href: string
+    external: boolean
+    image: string | undefined
+    video: string | undefined
+    contentType: Exclude<ContentType, "all">
+    preview: string
+    pollOptions: string[]
+    searchable: string
+  }
+
+  const BOOKMARKS = 10003
+  const CUSTOM_BOOKMARKS = 30003
+  const MANAGED_LIST_KINDS = [BOOKMARKS, CUSTOM_BOOKMARKS]
+
+  const listEvents = deriveEvents([{kinds: [...MANAGED_LIST_KINDS, DELETE]}])
+
+  const isImageUrl = (url: string) => /\.(png|jpe?g|gif|webp|avif|svg)(\?|#|$)/i.test(url)
+
+  const isVideoUrl = (url: string) => /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url)
+
+  const findUrls = (content: string) => content.match(/https?:\/\/\S+/g) || []
+
+  const findFirstImageUrl = (content: string) => findUrls(content).find(isImageUrl)
+
+  const findFirstVideoUrl = (content: string) => findUrls(content).find(isVideoUrl)
+
+  const isImageMime = (mime: string | undefined) =>
+    !!mime && (IMAGE_CONTENT_TYPES.includes(mime) || mime.startsWith("image/"))
+
+  const isVideoMime = (mime: string | undefined) =>
+    !!mime && (VIDEO_CONTENT_TYPES.includes(mime) || mime.startsWith("video/"))
+
+  const getMediaPreview = (event: TrustedEvent) => {
+    const imageFromContent = findFirstImageUrl(event.content || "")
+    const videoFromContent = findFirstVideoUrl(event.content || "")
+    const imetas = getTags("imeta", event.tags).map(tagsFromIMeta)
+
+    const imageFromImeta = imetas.find(meta => {
+      const url = getTagValue("url", meta)
+      const mime = getTagValue("m", meta)
+
+      return !!url && (isImageMime(mime) || isImageUrl(url))
+    })
+
+    const videoFromImeta = imetas.find(meta => {
+      const url = getTagValue("url", meta)
+      const mime = getTagValue("m", meta)
+
+      return !!url && (isVideoMime(mime) || isVideoUrl(url))
+    })
+
+    const imageFromTags = getTagValues(["image", "thumb"], event.tags).find(isImageUrl)
+    const videoFromTags = getTagValues(["video"], event.tags).find(isVideoUrl)
+
+    return {
+      image: imageFromContent || getTagValue("url", imageFromImeta || []) || imageFromTags,
+      video: videoFromContent || getTagValue("url", videoFromImeta || []) || videoFromTags,
+    }
+  }
+
+  const asLinkValue = (url: string) => {
+    try {
+      return {url: new URL(url)}
+    } catch {
+      return undefined
+    }
+  }
+
+  const getPollQuestion = (event: TrustedEvent) => {
+    const lines = (event.content || "")
+      .split("\n")
+      .map(line => line.trim())
+      .filter(Boolean)
+
+    return lines[0] || "Untitled poll"
+  }
+
+  const getPreviewText = (event: TrustedEvent, pollOptions: string[]) => {
+    if (pollOptions.length > 0) {
+      return getPollQuestion(event)
+    }
+
+    const clean = (event.content || "")
+      .replace(/https?:\/\/\S+/g, "")
+      .replace(/\s+/g, " ")
+      .trim()
+
+    if (!clean) {
+      return "(no text content)"
+    }
+
+    return clean.length > 140 ? `${clean.slice(0, 140).trim()}...` : clean
+  }
+
+  const detectContentType = (event: TrustedEvent): Exclude<ContentType, "all"> => {
+    const media = getMediaPreview(event)
+
+    if (media.image) {
+      return "image"
+    }
+
+    if (media.video) {
+      return "video"
+    }
+
+    return "text"
+  }
+
+  const getListKey = (event: TrustedEvent) => `${event.kind}:${getTagValue("d", event.tags) || ""}`
+
+  const getListLabel = (event: TrustedEvent) =>
+    getTagValue("d", event.tags) || (event.kind === BOOKMARKS ? "Saved Items" : "Untitled List")
+
+  const userListEvents = $derived(
+    sortEventsDesc($listEvents).filter(event => event.pubkey === $pubkey && event.kind !== DELETE),
+  )
+
+  const userDeleteEvents = $derived(
+    sortEventsDesc($listEvents).filter(event => event.pubkey === $pubkey && event.kind === DELETE),
+  )
+
+  const isDeletedList = (event: TrustedEvent) => {
+    const d = getTagValue("d", event.tags) || ""
+    const address = `${event.kind}:${event.pubkey}:${d}`
+
+    return userDeleteEvents.some(deleteEvent => {
+      if (deleteEvent.created_at < event.created_at) {
+        return false
+      }
+
+      return (
+        getTagValues("e", deleteEvent.tags).includes(event.id) ||
+        getTagValues("a", deleteEvent.tags).includes(address)
+      )
+    })
+  }
+
+  const sidebarLists = $derived.by(() => {
+    const mapped = uniqBy(getListKey, userListEvents)
+      .map(
+        (event): SidebarList => ({
+          key: getListKey(event),
+          label: getListLabel(event),
+          count: getTagValues(["e", "a"], event.tags).length,
+          event,
+        }),
+      )
+      .filter(list => (list.event ? !isDeletedList(list.event) : true))
+
+    const savedItems = first(mapped.filter(list => list.key === "10003:")) || {
+      key: "10003:",
+      label: "Saved Items",
+      count: 0,
+      event: undefined,
+    }
+
+    return [savedItems, ...mapped.filter(list => list.key !== "10003:")]
+  })
+
+  const defaultListKey = $derived(sidebarLists[0]?.key || "")
+  const selectedKey = $derived($page.url.searchParams.get("list") || defaultListKey)
+  const selectedList = $derived(sidebarLists.find(item => item.key === selectedKey))
+
+  const selectedListTags = $derived(selectedList?.event?.tags || [])
+
+  const selectedEventIds = $derived(getTagValues("e", selectedListTags))
+  const selectedAddresses = $derived(getTagValues("a", selectedListTags))
+  const totalListCount = $derived(sidebarLists.length)
+
+  let selectedEvents = $state<TrustedEvent[]>([])
+
+  let searchTerm = $state("")
+  let showSearch = $state(false)
+  let contentType = $state<ContentType>("all")
+  let loadedListPubkey: string | undefined = $state()
+  let loadedSelectionKey: string | undefined = $state()
+  let menuOpen = $state(false)
+  let menuX = $state(0)
+  let menuY = $state(0)
+  let menuListKey = $state("")
+  let menuListLabel = $state("")
+  let openBookmarkMenuKey: string | undefined = $state()
+  let listDialogMode: "rename" | "delete" | undefined = $state()
+  let dialogListKey = $state("")
+  let dialogListLabel = $state("")
+  let nextListLabel = $state("")
+  let listDialogPending = $state(false)
+
+  const closeListContextMenu = () => {
+    menuOpen = false
+  }
+
+  const closeBookmarkMenu = () => {
+    openBookmarkMenuKey = undefined
+  }
+
+  const toggleBookmarkMenu = (key: string) => {
+    openBookmarkMenuKey = openBookmarkMenuKey === key ? undefined : key
+  }
+
+  const openListDialog = (mode: "rename" | "delete", key: string, label: string) => {
+    listDialogMode = mode
+    dialogListKey = key
+    dialogListLabel = label
+    nextListLabel = label
+  }
+
+  const closeListDialog = (force = false) => {
+    if (!force && listDialogPending) {
+      return
+    }
+
+    listDialogMode = undefined
+    dialogListKey = ""
+    dialogListLabel = ""
+    nextListLabel = ""
+  }
+
+  const setFilterAll = () => {
+    contentType = "all"
+  }
+
+  const setFilterImage = () => {
+    contentType = "image"
+  }
+
+  const setFilterVideo = () => {
+    contentType = "video"
+  }
+
+  const setFilterText = () => {
+    contentType = "text"
+  }
+
+  const toggleSearch = () => {
+    showSearch = !showSearch
+  }
+
+  const openListManager = () => {
+    pushModal(BookmarkListPicker)
+  }
+
+  const isIgnorableBookmarkListError = (error: string) =>
+    shouldIgnoreError(error) || error.includes("only accepts kind 10002 events")
+
+  const openBookmarkFromMenu = async (item: BookmarkItem) => {
+    closeBookmarkMenu()
+
+    if (item.external) {
+      window.open(item.href, "_blank", "noopener,noreferrer")
+      return
+    }
+
+    await goto(item.href, {noScroll: true})
+  }
+
+  const copyBookmarkLinkFromMenu = async (item: BookmarkItem) => {
+    closeBookmarkMenu()
+
+    try {
+      await navigator.clipboard.writeText(item.href)
+      pushToast({message: "Link copied"})
+    } catch {
+      pushToast({theme: "error", message: "Unable to copy link"})
+    }
+  }
+
+  const addBookmarkToSavedItems = async (item: BookmarkItem) => {
+    closeBookmarkMenu()
+
+    const thunk = await addEventBookmark(item.event, "10003:")
+
+    if (!thunk) {
+      pushToast({message: "Already in Saved Items"})
+      return
+    }
+
+    const error = await waitForThunkError(thunk)
+
+    if (error && !isIgnorableBookmarkListError(error)) {
+      pushToast({theme: "error", message: error})
+      return
+    }
+
+    pushToast({message: "Added to Saved Items"})
+  }
+
+  const removeBookmarkFromCurrentList = async (item: BookmarkItem) => {
+    closeBookmarkMenu()
+
+    if (!selectedKey) {
+      return
+    }
+
+    const thunk = await removeEventBookmark(item.event, selectedKey)
+
+    if (!thunk) {
+      selectedEvents = selectedEvents.filter(event => event.id !== item.event.id)
+      pushToast({message: "Bookmark already removed"})
+      return
+    }
+
+    const error = await waitForThunkError(thunk)
+
+    if (error && !isIgnorableBookmarkListError(error)) {
+      pushToast({theme: "error", message: error})
+      return
+    }
+
+    selectedEvents = selectedEvents.filter(event => event.id !== item.event.id)
+    pushToast({message: "Removed from this list"})
+  }
+
+  const deleteListFromSidebar = async (key: string, label: string) => {
+    if (key === "10003:") {
+      return
+    }
+
+    const thunk = await deleteBookmarkList(key)
+
+    if (!thunk) {
+      pushToast({theme: "error", message: "Unable to delete this list"})
+      return
+    }
+
+    const error = await waitForThunkError(thunk)
+
+    if (error && !isIgnorableBookmarkListError(error)) {
+      pushToast({theme: "error", message: error})
+      return
+    }
+
+    pushToast({message: `Deleted ${label}`})
+
+    if (selectedKey === key) {
+      await goto(selectedListHref("10003:"), {replaceState: true, noScroll: true})
+    }
+  }
+
+  const renameListFromSidebar = async (key: string, label: string, nextLabel: string) => {
+    if (key === "10003:") {
+      return
+    }
+
+    const normalized = nextLabel.trim()
+
+    if (!normalized || normalized === label) {
+      return
+    }
+
+    const thunk = await renameBookmarkList(key, normalized)
+
+    if (!thunk) {
+      pushToast({theme: "error", message: "Unable to rename list"})
+      return
+    }
+
+    const error = await waitForThunkError(thunk)
+
+    if (error && !isIgnorableBookmarkListError(error)) {
+      pushToast({theme: "error", message: error})
+      return
+    }
+
+    const deleteOldThunk = await deleteBookmarkList(key)
+
+    if (deleteOldThunk) {
+      const deleteOldError = await waitForThunkError(deleteOldThunk)
+
+      if (deleteOldError && !isIgnorableBookmarkListError(deleteOldError)) {
+        pushToast({theme: "error", message: deleteOldError})
+        return
+      }
+    }
+
+    pushToast({message: `Renamed to ${normalized}`})
+
+    if (selectedKey === key) {
+      await goto(selectedListHref(`${CUSTOM_BOOKMARKS}:${normalized}`), {
+        replaceState: true,
+        noScroll: true,
+      })
+    }
+  }
+
+  const onListContextMenu = async (event: MouseEvent, key: string, label: string) => {
+    event.preventDefault()
+    menuOpen = true
+    menuX = event.clientX
+    menuY = event.clientY
+    menuListKey = key
+    menuListLabel = label
+  }
+
+  const openListFromMenu = async () => {
+    closeListContextMenu()
+    await goto(selectedListHref(menuListKey), {replaceState: true, noScroll: true})
+  }
+
+  const renameListFromMenu = async () => {
+    closeListContextMenu()
+    openListDialog("rename", menuListKey, menuListLabel)
+  }
+
+  const deleteListFromMenu = async () => {
+    closeListContextMenu()
+    openListDialog("delete", menuListKey, menuListLabel)
+  }
+
+  const submitRenameDialog = async () => {
+    if (listDialogMode !== "rename") {
+      return
+    }
+
+    listDialogPending = true
+
+    try {
+      await renameListFromSidebar(dialogListKey, dialogListLabel, nextListLabel)
+      closeListDialog(true)
+    } finally {
+      listDialogPending = false
+    }
+  }
+
+  const submitDeleteDialog = async () => {
+    if (listDialogMode !== "delete") {
+      return
+    }
+
+    listDialogPending = true
+
+    try {
+      await deleteListFromSidebar(dialogListKey, dialogListLabel)
+      closeListDialog(true)
+    } finally {
+      listDialogPending = false
+    }
+  }
+
+  const handleListDialogBackdropClick = () => {
+    closeListDialog()
+  }
+
+  const cancelListDialog = () => {
+    closeListDialog()
+  }
+
+  const handleWindowKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      closeListContextMenu()
+      closeBookmarkMenu()
+      closeListDialog()
+    }
+  }
+
+  const normalizedTerm = $derived(searchTerm.trim().toLowerCase())
+
+  const items = $derived.by(() =>
+    selectedEvents.map((event): BookmarkItem => {
+      const href = getEventPath(event, Array.from(tracker.getRelays(event.id)))
+      const pollOptions = getTagValues(["option", "poll_option"], event.tags)
+      const media = getMediaPreview(event)
+
+      return {
+        key: event.id,
+        event,
+        href,
+        external: href.includes("://"),
+        image: media.image,
+        video: media.video,
+        contentType: detectContentType(event),
+        preview: getPreviewText(event, pollOptions),
+        pollOptions,
+        searchable: `${event.content || ""} ${pollOptions.join(" ")}`.toLowerCase(),
+      }
+    }),
+  )
+
+  const filteredItems = $derived(
+    items.filter(item => {
+      const matchesFilter = contentType === "all" || item.contentType === contentType
+      const matchesTerm = !normalizedTerm || item.searchable.includes(normalizedTerm)
+
+      return matchesFilter && matchesTerm
+    }),
+  )
+
+  const sidebarListsWithDisplayCount = $derived(
+    sidebarLists.map(list => ({
+      ...list,
+      displayCount: list.key === selectedKey ? items.length : list.count,
+    })),
+  )
+
+  const selectedListHref = (key: string) => `/bookmarks?list=${encodeURIComponent(key)}`
+
+  const listClass = (active: boolean) =>
+    cx("card2 card2-sm bg-alt col-2 gap-1 transition-colors hover:bg-base-100", {
+      "bg-base-100": active,
+    })
+
+  const loadBookmarkLists = async () => {
+    if (!$pubkey || loadedListPubkey === $pubkey) {
+      return
+    }
+
+    loadedListPubkey = $pubkey
+
+    await load({
+      relays: INDEXER_RELAYS,
+      filters: [{kinds: [...MANAGED_LIST_KINDS, DELETE], authors: [$pubkey]}],
+    })
+
+    // Ensure selected-list references are reloaded once list metadata arrives.
+    loadedSelectionKey = undefined
+  }
+
+  const loadSelectedReferences = async () => {
+    if (!selectedList) {
+      selectedEvents = []
+      return
+    }
+
+    const references = [...selectedEventIds, ...selectedAddresses]
+    const referenceKey = `${selectedList.key}:${references.slice().sort().join("|")}`
+
+    selectedEvents = sortEventsDesc(
+      uniqBy(
+        event => event.id,
+        references
+          .map(id => repository.getEvent(id))
+          .filter((event): event is TrustedEvent => Boolean(event)),
+      ),
+    )
+
+    if (loadedSelectionKey === referenceKey) {
+      return
+    }
+
+    if (references.length > 0) {
+      await load({
+        relays: INDEXER_RELAYS,
+        filters: getIdFilters(references),
+      })
+
+      selectedEvents = sortEventsDesc(
+        uniqBy(
+          event => event.id,
+          references
+            .map(id => repository.getEvent(id))
+            .filter((event): event is TrustedEvent => Boolean(event)),
+        ),
+      )
+    }
+
+    loadedSelectionKey = referenceKey
+
+    for (const event of selectedEvents) {
+      loadProfile(event.pubkey)
+    }
+  }
+
+  onMount(() => {
+    void loadBookmarkLists()
+  })
+
+  $effect(() => {
+    if ($pubkey && loadedListPubkey !== $pubkey) {
+      void loadBookmarkLists()
+    }
+  })
+
+  $effect(() => {
+    if (selectedList) {
+      void loadSelectedReferences()
+    }
+  })
+</script>
+
+<svelte:window
+  onclick={() => {
+    closeListContextMenu()
+    closeBookmarkMenu()
+  }}
+  onkeydown={handleWindowKeydown} />
+
+<SecondaryNav class="relative">
+  <SecondaryNavSection>
+    <SecondaryNavHeader>
+      <span class="flex items-center gap-2 uppercase tracking-wide">
+        <Icon icon={Bookmark} />
+        Bookmarks
+      </span>
+      <span class="badge badge-sm badge-neutral">{totalListCount}</span>
+    </SecondaryNavHeader>
+    <div
+      class="flex items-center justify-between px-1 pt-1 text-xs uppercase tracking-wide opacity-70">
+      <span>My Lists</span>
+      <Button class="btn btn-ghost btn-xs btn-square" onclick={openListManager}>
+        <Icon size={3.5} icon={Add} />
+      </Button>
+    </div>
+  </SecondaryNavSection>
+  <div class="col-2 overflow-y-auto px-2 pb-2">
+    {#each sidebarListsWithDisplayCount as list (list.key)}
+      <div
+        role="button"
+        tabindex="-1"
+        oncontextmenu={event => onListContextMenu(event, list.key, list.label)}>
+        <Link href={selectedListHref(list.key)} class={listClass(selectedKey === list.key)}>
+          <div class="flex items-center justify-between gap-2">
+            <p class="truncate font-medium">
+              <span class="inline-flex items-center gap-2">
+                <Icon size={4} icon={list.key === "10003:" ? Bookmark : Folder} />
+                {list.label}
+              </span>
+            </p>
+            <span class="badge badge-sm badge-neutral">{list.displayCount}</span>
+          </div>
+        </Link>
+      </div>
+    {:else}
+      <div class="card2 card2-sm bg-alt text-sm opacity-70">No lists found yet.</div>
+    {/each}
+  </div>
+
+  {#if menuOpen}
+    <div class="fixed inset-0 z-popover" role="presentation">
+      <div
+        class="menu rounded-box bg-base-100 shadow-xl"
+        role="menu"
+        style={`position: fixed; left: ${menuX}px; top: ${menuY}px; min-width: 11rem;`}>
+        <li>
+          <Button class="justify-start" onclick={openListFromMenu}>Open List</Button>
+        </li>
+        {#if menuListKey !== "10003:"}
+          <li>
+            <Button class="justify-start" onclick={renameListFromMenu}>Rename List</Button>
+          </li>
+          <li>
+            <Button class="justify-start text-error" onclick={deleteListFromMenu}
+              >Delete List</Button>
+          </li>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  {#if listDialogMode}
+    <div class="fixed inset-0 z-modal bg-black/45 p-4 md:p-6">
+      <button
+        type="button"
+        class="absolute inset-0"
+        aria-label="Close dialog"
+        onclick={handleListDialogBackdropClick}></button>
+      <div class="center relative h-full w-full">
+        <div
+          class="card2 bg-base-100 w-full max-w-md gap-4 p-5 shadow-2xl"
+          role="dialog"
+          aria-modal="true"
+          tabindex="-1">
+          {#if listDialogMode === "rename"}
+            <div class="col-2 gap-1">
+              <h3 class="text-lg font-semibold">Rename List</h3>
+              <p class="text-sm opacity-70">Choose a new name for "{dialogListLabel}".</p>
+            </div>
+
+            <label class="input input-bordered flex items-center gap-2">
+              <Icon icon={Folder} />
+              <input bind:value={nextListLabel} class="grow" type="text" placeholder="List name" />
+            </label>
+
+            <div class="flex items-center justify-end gap-2">
+              <Button class="btn btn-ghost" onclick={cancelListDialog} disabled={listDialogPending}
+                >Cancel</Button>
+              <Button
+                class="btn btn-neutral"
+                onclick={submitRenameDialog}
+                disabled={listDialogPending || !nextListLabel.trim()}>
+                Save
+              </Button>
+            </div>
+          {:else}
+            <div class="col-2 gap-1">
+              <h3 class="text-lg font-semibold">Delete List?</h3>
+              <p class="text-sm opacity-70">
+                This will remove "{dialogListLabel}" and cannot be undone.
+              </p>
+            </div>
+
+            <div class="flex items-center justify-end gap-2">
+              <Button class="btn btn-ghost" onclick={cancelListDialog} disabled={listDialogPending}
+                >Cancel</Button>
+              <Button
+                class="btn btn-error"
+                onclick={submitDeleteDialog}
+                disabled={listDialogPending}>
+                Delete
+              </Button>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/if}
+</SecondaryNav>
+
+<Page class="overflow-hidden">
+  <div class="col-3 gap-3 p-3 md:p-4">
+    <div class="card2 card2-sm bg-alt flex items-center justify-between gap-2 p-2">
+      <div class="flex min-w-0 items-center gap-2">
+        <Icon size={4} icon={Bookmark} />
+        <p class="truncate text-sm font-medium">{selectedList?.label || "Saved Items"}</p>
+        <span class="badge badge-sm badge-neutral">{filteredItems.length}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <Button class="btn btn-neutral btn-sm btn-square" onclick={toggleSearch}>
+          <Icon size={4} icon={Magnifier} />
+        </Button>
+        <details class="dropdown dropdown-end">
+          <summary class="btn btn-neutral btn-sm btn-square" aria-label="Filter">
+            <Icon size={4} icon={SliderMinimalisticHorizontal} />
+          </summary>
+          <ul class="menu dropdown-content z-popover mt-2 w-44 rounded-box bg-base-100 p-2 shadow">
+            <li>
+              <Button class="justify-start" onclick={setFilterAll}>All</Button>
+            </li>
+            <li>
+              <Button class="justify-start" onclick={setFilterImage}>Image</Button>
+            </li>
+            <li>
+              <Button class="justify-start" onclick={setFilterVideo}>Video</Button>
+            </li>
+            <li>
+              <Button class="justify-start" onclick={setFilterText}>Text</Button>
+            </li>
+          </ul>
+        </details>
+      </div>
+    </div>
+
+    {#if showSearch}
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon={Magnifier} />
+        <input bind:value={searchTerm} class="grow" type="text" placeholder="Search this list..." />
+      </label>
+    {/if}
+
+    <div class="flex w-full flex-wrap content-start items-stretch gap-3">
+      {#each filteredItems as item (item.key)}
+        <Link
+          href={item.href}
+          external={item.external}
+          class="card2 bg-alt col-2 w-full gap-3 p-3 transition-colors hover:bg-base-100 md:w-[calc(50%-0.375rem)] xl:w-[calc(33.333%-0.5rem)]">
+          <div class="flex items-start justify-between gap-2">
+            <div class="flex min-w-0 items-center gap-2">
+              <ProfileCircle pubkey={item.event.pubkey} size={5} />
+              <div class="min-w-0">
+                <p class="truncate text-sm font-semibold text-primary">
+                  {displayProfileByPubkey(item.event.pubkey)}
+                </p>
+                <p class="truncate text-[11px] opacity-60">
+                  {displayPubkey(item.event.pubkey)} · {formatTimestamp(item.event.created_at)}
+                </p>
+              </div>
+            </div>
+            <div class="relative" role="presentation">
+              <Button
+                class="btn btn-ghost btn-xs btn-square"
+                onclick={() => toggleBookmarkMenu(item.key)}>
+                <Icon size={4} icon={MenuDots} />
+              </Button>
+              {#if openBookmarkMenuKey === item.key}
+                <ul
+                  class="menu absolute right-0 top-7 z-popover w-44 rounded-box bg-base-100 p-2 shadow-xl"
+                  role="menu">
+                  <li>
+                    <Button class="justify-start" onclick={() => openBookmarkFromMenu(item)}>
+                      Open bookmark
+                    </Button>
+                  </li>
+                  <li>
+                    <Button class="justify-start" onclick={() => copyBookmarkLinkFromMenu(item)}>
+                      Copy link
+                    </Button>
+                  </li>
+                  {#if selectedKey !== "10003:"}
+                    <li>
+                      <Button class="justify-start" onclick={() => addBookmarkToSavedItems(item)}>
+                        Add to Saved Items
+                      </Button>
+                    </li>
+                  {/if}
+                  <li>
+                    <Button
+                      class="justify-start text-error"
+                      onclick={() => removeBookmarkFromCurrentList(item)}>
+                      Remove from this list
+                    </Button>
+                  </li>
+                </ul>
+              {/if}
+            </div>
+          </div>
+
+          {#if item.image}
+            {#if asLinkValue(item.image)}
+              <ContentLinkBlockImage
+                value={asLinkValue(item.image)}
+                event={item.event}
+                class="max-h-[28rem] w-full rounded-lg object-contain" />
+            {/if}
+          {:else if item.video}
+            <video
+              src={item.video}
+              class="max-h-[28rem] w-full rounded-lg object-contain"
+              muted
+              playsinline
+              preload="metadata"></video>
+          {/if}
+
+          <p class="break-words min-w-0 text-base leading-relaxed opacity-90">{item.preview}</p>
+        </Link>
+      {:else}
+        <div class="card2 bg-alt col-2 max-w-lg p-5 text-sm opacity-80">
+          No items match your current filters.
+        </div>
+      {/each}
+    </div>
+  </div>
+</Page>
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index bde74a9a..5866dd6d 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount} from "svelte"
+  import {onMount, tick} from "svelte"
   import {readable} from "svelte/store"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
@@ -37,6 +37,7 @@
     deriveRoom,
     deriveUserRoomMembershipStatus,
     getRoomType,
+    MESSAGE_KINDS,
     MembershipStatus,
     PROTECTED,
     RoomType,
@@ -104,7 +105,13 @@
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
-  const shouldVirtualize = $derived(isNaN(at))
+  const targetId = $derived($page.url.searchParams.get("e"))
+
+  $effect(() => {
+    void at
+    void targetId
+    userHasScrolled = false
+  })
 
   const showRoomDetail = () => pushModal(RoomDetail, {url, h})
 
@@ -228,27 +235,56 @@
       }
     }
 
-    if (!userHasScrolled && !isNaN(at)) {
-      const targetEvent = $events.find(event => event.created_at >= at)
+    if (!userHasScrolled && (!isNaN(at) || targetId)) {
+      const targetEvent = targetId
+        ? $events.find(event => event.id === targetId)
+        : $events.find(event => event.created_at <= at)
 
       if (targetEvent) {
         const target = element?.querySelector(`[data-event="${targetEvent.id}"]`)
 
         if (target instanceof HTMLElement) {
           isProgrammaticScroll = true
+          clearTimeout(programmaticScrollTimeout)
+          programmaticScrollTimeout = setTimeout(() => {
+            isProgrammaticScroll = false
+          }, 300)
+
           target.scrollIntoView({block: "center"})
+
+          if (target.dataset.highlighted !== "true") {
+            target.dataset.highlighted = "true"
+            target.style.filter = "brightness(1.5)"
+            target.style.transitionProperty = "all"
+            target.style.transitionDuration = "400ms"
+
+            setTimeout(() => {
+              target.style.transitionDuration = "300ms"
+              target.style.filter = ""
+            }, 800)
+          }
         }
       }
     }
   }
 
+  let isInteracting = false
+  let interactionTimeout: ReturnType<typeof setTimeout>
+  const markInteraction = () => {
+    isInteracting = true
+    clearTimeout(interactionTimeout)
+    interactionTimeout = setTimeout(() => {
+      isInteracting = false
+    }, 500)
+  }
+
   const onScroll = () => {
     if (!isProgrammaticScroll) {
-      userHasScrolled = true
+      if (isInteracting) {
+        userHasScrolled = true
+      }
       manageScrollPosition()
     }
-
-    isProgrammaticScroll = false
   }
 
   const scrollToNewMessages = () =>
@@ -266,6 +302,7 @@
   let leaving = $state(false)
   let userHasScrolled = $state(false)
   let isProgrammaticScroll = $state(false)
+  let programmaticScrollTimeout: ReturnType<typeof setTimeout>
   let loadingBackward = $state(true)
   let loadingForward = $state(true)
   let share = $state(popKey<TrustedEvent | undefined>("share"))
@@ -352,9 +389,8 @@
   })
 
   $effect(() => {
-    if (elements.length > 0) {
-      requestAnimationFrame(manageScrollPosition)
-    }
+    void elements
+    tick().then(manageScrollPosition)
   })
 
   const start = () => {
@@ -364,7 +400,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [MESSAGE, ROOM_ADD_MEMBER], "#h": [h]}],
+      filters: [{kinds: [...MESSAGE_KINDS, ROOM_ADD_MEMBER], "#h": [h]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -439,6 +475,17 @@
     <PageContent
       bind:element
       onscroll={onScroll}
+      onwheel={markInteraction}
+      ontouchmove={markInteraction}
+      onpointerdown={markInteraction}
+      onpointermove={(e: PointerEvent) => {
+        if (e.buttons > 0) markInteraction()
+      }}
+      onkeydown={(e: KeyboardEvent) => {
+        if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(e.key)) {
+          markInteraction()
+        }
+      }}
       class={cx(
         showMobileVideoPanel
           ? "hidden flex-col-reverse pt-4 md:flex md:flex-col-reverse"
@@ -472,7 +519,7 @@
             <Spinner loading={loadingForward}>Looking for messages...</Spinner>
           </p>
         {/if}
-        {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
+        {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
           {#if type === "new-messages"}
             <div
               {id}
@@ -484,24 +531,8 @@
             </div>
           {:else if type === "date"}
             <Divider>{value}</Divider>
-          {:else if shouldVirtualize}
-            {@const event = value as TrustedEvent}
-            {#if event.kind === ROOM_ADD_MEMBER}
-              <RoomItemAddMember {url} {event} />
-            {:else}
-              <div class="cv">
-                <RoomItem
-                  {url}
-                  {event}
-                  {replyTo}
-                  {showPubkey}
-                  {addSpaceBelow}
-                  canEdit={canEditEvent}
-                  onEdit={onEditEvent} />
-              </div>
-            {/if}
           {:else}
-            {@const event = value as TrustedEvent}
+            {@const event = $state.snapshot(value as TrustedEvent)}
             {#if event.kind === ROOM_ADD_MEMBER}
               <RoomItemAddMember {url} {event} />
             {:else}
diff --git a/src/routes/spaces/[relay]/chat/+page.svelte b/src/routes/spaces/[relay]/chat/+page.svelte
index f5156f37..5040e0ea 100644
--- a/src/routes/spaces/[relay]/chat/+page.svelte
+++ b/src/routes/spaces/[relay]/chat/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount} from "svelte"
+  import {onMount, tick} from "svelte"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import type {Readable} from "svelte/store"
@@ -25,7 +25,7 @@
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
-  import {userSettingsValues, decodeRelay, PROTECTED} from "@app/core/state"
+  import {userSettingsValues, decodeRelay, PROTECTED, MESSAGE_KINDS} from "@app/core/state"
   import {prependParent, canEnforceNip70, publishDelete} from "@app/core/commands"
   import {checked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -37,7 +37,13 @@
   const url = decodeRelay($page.params.relay!)
   const shouldProtect = canEnforceNip70(url)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
-  const shouldVirtualize = $derived(isNaN(at))
+  const targetId = $derived($page.url.searchParams.get("e"))
+
+  $effect(() => {
+    void at
+    void targetId
+    userHasScrolled = false
+  })
 
   const replyTo = (event: TrustedEvent) => {
     parent = event
@@ -123,27 +129,56 @@
       }
     }
 
-    if (!userHasScrolled && !isNaN(at)) {
-      const targetEvent = $events.find(event => event.created_at >= at)
+    if (!userHasScrolled && (!isNaN(at) || targetId)) {
+      const targetEvent = targetId
+        ? $events.find(event => event.id === targetId)
+        : $events.find(event => event.created_at <= at)
 
       if (targetEvent) {
         const target = element?.querySelector(`[data-event="${targetEvent.id}"]`)
 
         if (target instanceof HTMLElement) {
           isProgrammaticScroll = true
+          clearTimeout(programmaticScrollTimeout)
+          programmaticScrollTimeout = setTimeout(() => {
+            isProgrammaticScroll = false
+          }, 300)
+
           target.scrollIntoView({block: "center"})
+
+          if (target.dataset.highlighted !== "true") {
+            target.dataset.highlighted = "true"
+            target.style.filter = "brightness(1.5)"
+            target.style.transitionProperty = "all"
+            target.style.transitionDuration = "400ms"
+
+            setTimeout(() => {
+              target.style.transitionDuration = "300ms"
+              target.style.filter = ""
+            }, 800)
+          }
         }
       }
     }
   }
 
+  let isInteracting = false
+  let interactionTimeout: ReturnType<typeof setTimeout>
+  const markInteraction = () => {
+    isInteracting = true
+    clearTimeout(interactionTimeout)
+    interactionTimeout = setTimeout(() => {
+      isInteracting = false
+    }, 500)
+  }
+
   const onScroll = () => {
     if (!isProgrammaticScroll) {
-      userHasScrolled = true
+      if (isInteracting) {
+        userHasScrolled = true
+      }
       manageScrollPosition()
     }
-
-    isProgrammaticScroll = false
   }
 
   const scrollToNewMessages = () =>
@@ -161,6 +196,7 @@
   let loadingForward = $state(true)
   let userHasScrolled = $state(false)
   let isProgrammaticScroll = $state(false)
+  let programmaticScrollTimeout: ReturnType<typeof setTimeout>
   let share = $state(popKey<TrustedEvent | undefined>("share"))
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
@@ -245,9 +281,8 @@
   })
 
   $effect(() => {
-    if (elements.length > 0) {
-      requestAnimationFrame(manageScrollPosition)
-    }
+    void elements
+    tick().then(manageScrollPosition)
   })
 
   const start = () => {
@@ -257,7 +292,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [MESSAGE, RELAY_ADD_MEMBER]}],
+      filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -304,13 +339,27 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4 mb-14 md:mb-0">
+<PageContent
+  bind:element
+  onscroll={onScroll}
+  onwheel={markInteraction}
+  ontouchmove={markInteraction}
+  onpointerdown={markInteraction}
+  onpointermove={(e: PointerEvent) => {
+    if (e.buttons > 0) markInteraction()
+  }}
+  onkeydown={(e: KeyboardEvent) => {
+    if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(e.key)) {
+      markInteraction()
+    }
+  }}
+  class="flex flex-col-reverse pt-4 mb-14 md:mb-0">
   {#if loadingForward}
     <p class="py-20 flex justify-center">
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>
     </p>
   {/if}
-  {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
+  {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
     {#if type === "new-messages"}
       <div
         {id}
@@ -322,24 +371,8 @@
       </div>
     {:else if type === "date"}
       <Divider>{value}</Divider>
-    {:else if shouldVirtualize}
-      {@const event = value as TrustedEvent}
-      {#if event.kind === RELAY_ADD_MEMBER}
-        <RoomItemAddMember {url} {event} />
-      {:else}
-        <div>
-          <RoomItem
-            {url}
-            {event}
-            {replyTo}
-            {showPubkey}
-            canEdit={canEditEvent}
-            onEdit={onEditEvent}
-            {addSpaceBelow} />
-        </div>
-      {/if}
     {:else}
-      {@const event = value as TrustedEvent}
+      {@const event = $state.snapshot(value as TrustedEvent)}
       {#if event.kind === RELAY_ADD_MEMBER}
         <RoomItemAddMember {url} {event} />
       {:else}
-- 
2.52.0


From 0db751bd45851616ac8f30c4937d1792c3253096 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Tue, 14 Apr 2026 19:26:43 +0530
Subject: [PATCH 2/2] fix: stabilize list loading and show correct list count

---
 src/app/components/BookmarkCard.svelte        | 142 +++++
 .../components/BookmarkEventMenuItem.svelte   |  23 +
 src/app/components/BookmarkGrid.svelte        |  38 ++
 src/app/components/BookmarkListPicker.svelte  |  48 +-
 src/app/components/BookmarkSidebar.svelte     | 247 +++++++++
 .../components/CalendarEventActions.svelte    |   2 +
 src/app/components/ClassifiedActions.svelte   |   2 +
 src/app/components/CommentActions.svelte      |   7 +-
 src/app/components/PrimaryNav.svelte          | 112 +++-
 src/app/components/ThreadActions.svelte       |   7 +-
 src/app/core/commands.ts                      | 124 ++---
 src/app/core/state.ts                         |  48 ++
 src/routes/bookmarks/+page.svelte             | 483 +++---------------
 13 files changed, 792 insertions(+), 491 deletions(-)
 create mode 100644 src/app/components/BookmarkCard.svelte
 create mode 100644 src/app/components/BookmarkEventMenuItem.svelte
 create mode 100644 src/app/components/BookmarkGrid.svelte
 create mode 100644 src/app/components/BookmarkSidebar.svelte

diff --git a/src/app/components/BookmarkCard.svelte b/src/app/components/BookmarkCard.svelte
new file mode 100644
index 00000000..7f942843
--- /dev/null
+++ b/src/app/components/BookmarkCard.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import {displayPubkey} from "@welshman/util"
+  import {formatTimestamp} from "@welshman/lib"
+  import {displayProfileByPubkey} from "@welshman/app"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
+  import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+
+  type BookmarkItem = {
+    key: string
+    event: TrustedEvent
+    href: string
+    external: boolean
+    image: string | undefined
+    video: string | undefined
+    contentType: "image" | "video" | "text"
+    preview: string
+    pollOptions: string[]
+    searchable: string
+  }
+
+  type Props = {
+    item: BookmarkItem
+    showAddToSaved: boolean
+    onOpen: (item: BookmarkItem) => Promise<void> | void
+    onCopyLink: (item: BookmarkItem) => Promise<void> | void
+    onAddToSaved: (item: BookmarkItem) => Promise<void> | void
+    onRemove: (item: BookmarkItem) => Promise<void> | void
+  }
+
+  const {item, showAddToSaved, onOpen, onCopyLink, onAddToSaved, onRemove}: Props = $props()
+
+  let openMenu = $state(false)
+
+  const closeMenu = () => {
+    openMenu = false
+  }
+
+  const toggleMenu = (event: Event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    openMenu = !openMenu
+  }
+
+  const openItem = async (event: Event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    closeMenu()
+    await onOpen(item)
+  }
+
+  const copyLink = async (event: Event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    closeMenu()
+    await onCopyLink(item)
+  }
+
+  const addToSaved = async (event: Event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    closeMenu()
+    await onAddToSaved(item)
+  }
+
+  const removeFromList = async (event: Event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    closeMenu()
+    await onRemove(item)
+  }
+</script>
+
+<svelte:window onclick={closeMenu} />
+
+<Link
+  href={item.href}
+  external={item.external}
+  class="card2 bg-alt col-2 w-full gap-3 p-3 transition-colors hover:bg-base-100 md:w-[calc(50%-0.375rem)] xl:w-[calc(33.333%-0.5rem)]">
+  <div class="flex items-start justify-between gap-2">
+    <div class="flex min-w-0 items-center gap-2">
+      <ProfileCircle pubkey={item.event.pubkey} size={5} />
+      <div class="min-w-0">
+        <p class="truncate text-sm font-semibold text-primary">
+          {displayProfileByPubkey(item.event.pubkey)}
+        </p>
+        <p class="truncate text-[11px] opacity-60">
+          {displayPubkey(item.event.pubkey)} · {formatTimestamp(item.event.created_at)}
+        </p>
+      </div>
+    </div>
+
+    <div class="relative" role="presentation">
+      <Button class="btn btn-ghost btn-xs btn-square" onclick={toggleMenu}>
+        <Icon size={4} icon={MenuDots} />
+      </Button>
+
+      {#if openMenu}
+        <ul
+          class="menu absolute right-0 top-7 z-popover w-44 rounded-box bg-base-100 p-2 shadow-xl"
+          role="menu">
+          <li>
+            <Button class="justify-start" onclick={openItem}>Open bookmark</Button>
+          </li>
+          <li>
+            <Button class="justify-start" onclick={copyLink}>Copy link</Button>
+          </li>
+          {#if showAddToSaved}
+            <li>
+              <Button class="justify-start" onclick={addToSaved}>Add to Saved Items</Button>
+            </li>
+          {/if}
+          <li>
+            <Button class="justify-start text-error" onclick={removeFromList}
+              >Remove from this list</Button>
+          </li>
+        </ul>
+      {/if}
+    </div>
+  </div>
+
+  {#if item.image}
+    <ContentLinkBlockImage
+      value={{url: item.image}}
+      event={item.event}
+      class="max-h-[28rem] w-full rounded-lg object-contain" />
+  {:else if item.video}
+    <video
+      src={item.video}
+      class="max-h-[28rem] w-full rounded-lg object-contain"
+      muted
+      playsinline
+      preload="metadata"></video>
+  {/if}
+
+  <NoteContentMinimal event={item.event} />
+</Link>
diff --git a/src/app/components/BookmarkEventMenuItem.svelte b/src/app/components/BookmarkEventMenuItem.svelte
new file mode 100644
index 00000000..ae0cb4b3
--- /dev/null
+++ b/src/app/components/BookmarkEventMenuItem.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
+  import BookmarkListPicker from "@app/components/BookmarkListPicker.svelte"
+  import {pushModal} from "@app/util/modal"
+
+  type Props = {
+    event: TrustedEvent
+  }
+
+  const {event}: Props = $props()
+
+  const bookmark = () => pushModal(BookmarkListPicker, {event})
+</script>
+
+<li>
+  <Button onclick={bookmark}>
+    <Icon size={4} icon={Bookmark} />
+    Bookmark
+  </Button>
+</li>
diff --git a/src/app/components/BookmarkGrid.svelte b/src/app/components/BookmarkGrid.svelte
new file mode 100644
index 00000000..c9fc5ad9
--- /dev/null
+++ b/src/app/components/BookmarkGrid.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import BookmarkCard from "@app/components/BookmarkCard.svelte"
+
+  type BookmarkItem = {
+    key: string
+    event: TrustedEvent
+    href: string
+    external: boolean
+    image: string | undefined
+    video: string | undefined
+    contentType: "image" | "video" | "text"
+    preview: string
+    pollOptions: string[]
+    searchable: string
+  }
+
+  type Props = {
+    items: BookmarkItem[]
+    showAddToSaved: boolean
+    onOpen: (item: BookmarkItem) => Promise<void> | void
+    onCopyLink: (item: BookmarkItem) => Promise<void> | void
+    onAddToSaved: (item: BookmarkItem) => Promise<void> | void
+    onRemove: (item: BookmarkItem) => Promise<void> | void
+  }
+
+  const {items, showAddToSaved, onOpen, onCopyLink, onAddToSaved, onRemove}: Props = $props()
+</script>
+
+<div class="flex w-full flex-wrap content-start items-stretch gap-3">
+  {#each items as item (item.key)}
+    <BookmarkCard {item} {showAddToSaved} {onOpen} {onCopyLink} {onAddToSaved} {onRemove} />
+  {:else}
+    <div class="card2 bg-alt col-2 max-w-lg p-5 text-sm opacity-80">
+      No items match your current filters.
+    </div>
+  {/each}
+</div>
diff --git a/src/app/components/BookmarkListPicker.svelte b/src/app/components/BookmarkListPicker.svelte
index 039a0c24..f649564b 100644
--- a/src/app/components/BookmarkListPicker.svelte
+++ b/src/app/components/BookmarkListPicker.svelte
@@ -2,7 +2,14 @@
   import {onMount} from "svelte"
   import {first, uniqBy} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {DELETE, getTagValue, getTagValues, sortEventsDesc} from "@welshman/util"
+  import {
+    Address,
+    DELETE,
+    getAddress,
+    getTagValue,
+    getTagValues,
+    sortEventsDesc,
+  } from "@welshman/util"
   import {load} from "@welshman/net"
   import {pubkey, waitForThunkError} from "@welshman/app"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
@@ -18,7 +25,13 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {createBookmarkList, addEventBookmark, deleteBookmarkList} from "@app/core/commands"
-  import {deriveEvents, INDEXER_RELAYS, shouldIgnoreError} from "@app/core/state"
+  import {
+    BOOKMARKS,
+    BOOKMARK_LISTS,
+    deriveEvents,
+    INDEXER_RELAYS,
+    shouldIgnoreError,
+  } from "@app/core/state"
   import {pushToast} from "@app/util/toast"
 
   type Props = {
@@ -36,10 +49,14 @@
   const listEvents = deriveEvents([{kinds: [10003, 30003, DELETE]}])
 
   const getListKey = (listEvent: TrustedEvent) =>
-    `${listEvent.kind}:${getTagValue("d", listEvent.tags) || ""}`
+    listEvent.kind === BOOKMARKS
+      ? new Address(BOOKMARKS, listEvent.pubkey, "").toString()
+      : getAddress(listEvent)
 
   const getListLabel = (listEvent: TrustedEvent) =>
-    getTagValue("d", listEvent.tags) || (listEvent.kind === 10003 ? "Saved Items" : "Untitled List")
+    getTagValue("title", listEvent.tags) ||
+    getTagValue("d", listEvent.tags) ||
+    (listEvent.kind === BOOKMARKS ? "Saved Items" : "Untitled List")
 
   const userLists = $derived(
     sortEventsDesc($listEvents).filter(
@@ -54,8 +71,7 @@
   )
 
   const isDeletedList = (listEvent: TrustedEvent) => {
-    const d = getTagValue("d", listEvent.tags) || ""
-    const address = `${listEvent.kind}:${listEvent.pubkey}:${d}`
+    const address = getListKey(listEvent)
 
     return userDeletes.some(deleteEvent => {
       if (deleteEvent.created_at < listEvent.created_at) {
@@ -82,13 +98,13 @@
       }),
     )
 
-    const savedItems = first(mapped.filter(list => list.key === "10003:")) || {
-      key: "10003:",
+    const savedItems = first(mapped.filter(list => Address.from(list.key).kind === BOOKMARKS)) || {
+      key: $pubkey ? new Address(BOOKMARKS, $pubkey, "").toString() : "10003:",
       label: "Saved Items",
       count: 0,
     }
 
-    return [savedItems, ...mapped.filter(list => list.key !== "10003:")]
+    return [savedItems, ...mapped.filter(list => Address.from(list.key).kind !== BOOKMARKS)]
   })
 
   let listName = $state("")
@@ -159,7 +175,7 @@
   }
 
   const deleteList = async (key: string, label: string) => {
-    if (deleting || key === "10003:") {
+    if (deleting || Address.from(key).kind === BOOKMARKS) {
       return
     }
 
@@ -198,7 +214,7 @@
 
     await load({
       relays: INDEXER_RELAYS,
-      filters: [{kinds: [10003, 30003, DELETE], authors: [$pubkey]}],
+      filters: [{kinds: [BOOKMARKS, BOOKMARK_LISTS, DELETE], authors: [$pubkey]}],
     })
   }
 
@@ -249,7 +265,9 @@
               onclick={() => addToList(list.key, list.label)}
               disabled={selecting}>
               <span class="inline-flex items-center gap-2">
-                <Icon size={4} icon={list.key === "10003:" ? Bookmark : Folder} />
+                <Icon
+                  size={4}
+                  icon={Address.from(list.key).kind === BOOKMARKS ? Bookmark : Folder} />
                 {list.label}
               </span>
               <span class="badge badge-sm badge-neutral">{list.count}</span>
@@ -257,12 +275,14 @@
           {:else}
             <div class="card2 card2-sm bg-alt flex items-center justify-between gap-2">
               <span class="min-w-0 truncate inline-flex items-center gap-2">
-                <Icon size={4} icon={list.key === "10003:" ? Bookmark : Folder} />
+                <Icon
+                  size={4}
+                  icon={Address.from(list.key).kind === BOOKMARKS ? Bookmark : Folder} />
                 {list.label}
               </span>
               <div class="flex items-center gap-2">
                 <span class="badge badge-sm badge-neutral">{list.count}</span>
-                {#if list.key !== "10003:"}
+                {#if Address.from(list.key).kind !== BOOKMARKS}
                   <Button
                     class="btn btn-ghost btn-xs btn-square text-error"
                     onclick={() => deleteList(list.key, list.label)}
diff --git a/src/app/components/BookmarkSidebar.svelte b/src/app/components/BookmarkSidebar.svelte
new file mode 100644
index 00000000..5f4cbce9
--- /dev/null
+++ b/src/app/components/BookmarkSidebar.svelte
@@ -0,0 +1,247 @@
+<script lang="ts">
+  import {type TrustedEvent} from "@welshman/util"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
+  import Folder from "@assets/icons/folder.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
+
+  type BookmarkList = {
+    key: string
+    label: string
+    count: number
+    event?: TrustedEvent
+  }
+
+  type Props = {
+    lists: BookmarkList[]
+    selectedKey: string
+    totalCount: number
+    onOpenManager: () => void
+    onSelect: (key: string) => void
+    onRename: (key: string, label: string, nextLabel: string) => Promise<void>
+    onDelete: (key: string, label: string) => Promise<void>
+  }
+
+  const {lists, selectedKey, totalCount, onOpenManager, onSelect, onRename, onDelete}: Props =
+    $props()
+
+  let menuOpen = $state(false)
+  let menuX = $state(0)
+  let menuY = $state(0)
+  let menuListKey = $state("")
+  let menuListLabel = $state("")
+  let listDialogMode: "rename" | "delete" | undefined = $state()
+  let dialogListKey = $state("")
+  let dialogListLabel = $state("")
+  let nextListLabel = $state("")
+  let dialogPending = $state(false)
+
+  const closeMenu = () => {
+    menuOpen = false
+  }
+
+  const openListMenu = (event: MouseEvent, key: string, label: string) => {
+    event.preventDefault()
+    menuOpen = true
+    menuX = event.clientX
+    menuY = event.clientY
+    menuListKey = key
+    menuListLabel = label
+  }
+
+  const openMenuList = () => {
+    closeMenu()
+    onSelect(menuListKey)
+  }
+
+  const openRenameDialog = () => {
+    closeMenu()
+    listDialogMode = "rename"
+    dialogListKey = menuListKey
+    dialogListLabel = menuListLabel
+    nextListLabel = menuListLabel
+  }
+
+  const openDeleteDialog = () => {
+    closeMenu()
+    listDialogMode = "delete"
+    dialogListKey = menuListKey
+    dialogListLabel = menuListLabel
+    nextListLabel = menuListLabel
+  }
+
+  const closeDialog = (force = false) => {
+    if (!force && dialogPending) {
+      return
+    }
+
+    listDialogMode = undefined
+    dialogListKey = ""
+    dialogListLabel = ""
+    nextListLabel = ""
+  }
+
+  const submitRename = async () => {
+    if (listDialogMode !== "rename") {
+      return
+    }
+
+    dialogPending = true
+
+    try {
+      await onRename(dialogListKey, dialogListLabel, nextListLabel)
+      closeDialog(true)
+    } finally {
+      dialogPending = false
+    }
+  }
+
+  const submitDelete = async () => {
+    if (listDialogMode !== "delete") {
+      return
+    }
+
+    dialogPending = true
+
+    try {
+      await onDelete(dialogListKey, dialogListLabel)
+      closeDialog(true)
+    } finally {
+      dialogPending = false
+    }
+  }
+
+  const handleWindowKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      closeMenu()
+      closeDialog()
+    }
+  }
+</script>
+
+<svelte:window onclick={closeMenu} onkeydown={handleWindowKeydown} />
+
+<SecondaryNav class="relative">
+  <SecondaryNavSection>
+    <SecondaryNavHeader>
+      <span class="flex items-center gap-2 uppercase tracking-wide">
+        <Icon icon={Bookmark} />
+        Bookmarks
+      </span>
+      <span class="badge badge-sm badge-neutral">{totalCount}</span>
+    </SecondaryNavHeader>
+    <div
+      class="flex items-center justify-between px-1 pt-1 text-xs uppercase tracking-wide opacity-70">
+      <span>My Lists</span>
+      <Button class="btn btn-ghost btn-xs btn-square" onclick={onOpenManager}>
+        <Icon size={3.5} icon={Add} />
+      </Button>
+    </div>
+  </SecondaryNavSection>
+
+  <div class="col-2 gap-2 overflow-y-auto px-2 pb-2">
+    {#each lists as list (list.key)}
+      <div
+        role="button"
+        tabindex="-1"
+        oncontextmenu={event => openListMenu(event, list.key, list.label)}>
+        <Link href={`/bookmarks?list=${encodeURIComponent(list.key)}`}>
+          <div
+            class={`card2 card2-sm bg-alt col-2 gap-1 transition-colors hover:bg-base-100 ${selectedKey === list.key ? "bg-base-100" : ""}`}>
+            <div class="flex items-center justify-between gap-2">
+              <p class="truncate font-medium">
+                <span class="inline-flex items-center gap-2">
+                  <Icon size={4} icon={list.key.startsWith("10003:") ? Bookmark : Folder} />
+                  {list.label}
+                </span>
+              </p>
+              <span class="badge badge-sm badge-neutral">{list.count}</span>
+            </div>
+          </div>
+        </Link>
+      </div>
+    {:else}
+      <div class="card2 card2-sm bg-alt text-sm opacity-70">No lists found yet.</div>
+    {/each}
+  </div>
+
+  {#if menuOpen}
+    <div class="fixed inset-0 z-popover" role="presentation">
+      <div
+        class="menu rounded-box bg-base-100 shadow-xl"
+        role="menu"
+        style={`position: fixed; left: ${menuX}px; top: ${menuY}px; min-width: 11rem;`}>
+        <li>
+          <Button class="justify-start" onclick={openMenuList}>Open List</Button>
+        </li>
+        {#if menuListKey !== selectedKey}
+          <li>
+            <Button class="justify-start" onclick={openRenameDialog}>Rename List</Button>
+          </li>
+          <li>
+            <Button class="justify-start text-error" onclick={openDeleteDialog}>Delete List</Button>
+          </li>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  {#if listDialogMode}
+    <div class="fixed inset-0 z-modal bg-black/45 p-4 md:p-6">
+      <button
+        type="button"
+        class="absolute inset-0"
+        aria-label="Close dialog"
+        onclick={() => closeDialog()}></button>
+      <div class="center relative h-full w-full">
+        <div
+          class="card2 bg-base-100 w-full max-w-md gap-4 p-5 shadow-2xl"
+          role="dialog"
+          aria-modal="true"
+          tabindex="-1">
+          {#if listDialogMode === "rename"}
+            <div class="col-2 gap-1">
+              <h3 class="text-lg font-semibold">Rename List</h3>
+              <p class="text-sm opacity-70">Choose a new name for "{dialogListLabel}".</p>
+            </div>
+
+            <label class="input input-bordered flex items-center gap-2">
+              <Icon icon={Folder} />
+              <input bind:value={nextListLabel} class="grow" type="text" placeholder="List name" />
+            </label>
+
+            <div class="flex items-center justify-end gap-2">
+              <Button class="btn btn-ghost" onclick={() => closeDialog()} disabled={dialogPending}
+                >Cancel</Button>
+              <Button
+                class="btn btn-neutral"
+                onclick={submitRename}
+                disabled={dialogPending || !nextListLabel.trim()}>
+                Save
+              </Button>
+            </div>
+          {:else}
+            <div class="col-2 gap-1">
+              <h3 class="text-lg font-semibold">Delete List?</h3>
+              <p class="text-sm opacity-70">
+                This will remove "{dialogListLabel}" and cannot be undone.
+              </p>
+            </div>
+
+            <div class="flex items-center justify-end gap-2">
+              <Button class="btn btn-ghost" onclick={() => closeDialog()} disabled={dialogPending}
+                >Cancel</Button>
+              <Button class="btn btn-error" onclick={submitDelete} disabled={dialogPending}
+                >Delete</Button>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/if}
+</SecondaryNav>
diff --git a/src/app/components/CalendarEventActions.svelte b/src/app/components/CalendarEventActions.svelte
index 864fe35f..676e189c 100644
--- a/src/app/components/CalendarEventActions.svelte
+++ b/src/app/components/CalendarEventActions.svelte
@@ -12,6 +12,7 @@
   import EventActivity from "@app/components/EventActivity.svelte"
   import EventActions from "@app/components/EventActions.svelte"
   import CalendarEventEdit from "@app/components/CalendarEventEdit.svelte"
+  import BookmarkEventMenuItem from "@app/components/BookmarkEventMenuItem.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {makeCalendarPath, makeSpacePath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
@@ -51,6 +52,7 @@
   {/if}
   <EventActions {url} {event} noun="Event">
     {#snippet customActions()}
+      <BookmarkEventMenuItem {event} />
       {#if event.pubkey === $pubkey}
         <li>
           <Button onclick={editEvent}>
diff --git a/src/app/components/ClassifiedActions.svelte b/src/app/components/ClassifiedActions.svelte
index dcd46dfc..07510efc 100644
--- a/src/app/components/ClassifiedActions.svelte
+++ b/src/app/components/ClassifiedActions.svelte
@@ -15,6 +15,7 @@
   import EventActivity from "@app/components/EventActivity.svelte"
   import EventActions from "@app/components/EventActions.svelte"
   import ClassifiedEdit from "@app/components/ClassifiedEdit.svelte"
+  import BookmarkEventMenuItem from "@app/components/BookmarkEventMenuItem.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {makeClassifiedPath, makeSpacePath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
@@ -64,6 +65,7 @@
   {/if}
   <EventActions {url} {event} noun="Listing">
     {#snippet customActions()}
+      <BookmarkEventMenuItem {event} />
       {#if event.pubkey === $pubkey}
         <li>
           <Button onclick={editClassified}>
diff --git a/src/app/components/CommentActions.svelte b/src/app/components/CommentActions.svelte
index 348f36b0..dec52261 100644
--- a/src/app/components/CommentActions.svelte
+++ b/src/app/components/CommentActions.svelte
@@ -4,6 +4,7 @@
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import EventActivity from "@app/components/EventActivity.svelte"
   import EventActions from "@app/components/EventActions.svelte"
+  import BookmarkEventMenuItem from "@app/components/BookmarkEventMenuItem.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {makeSpacePath} from "@app/util/routes"
 
@@ -34,6 +35,10 @@
     {#if showActivity}
       <EventActivity {url} {path} {event} />
     {/if}
-    <EventActions {url} {event} noun="Comment" />
+    <EventActions {url} {event} noun="Comment">
+      {#snippet customActions()}
+        <BookmarkEventMenuItem {event} />
+      {/snippet}
+    </EventActions>
   </div>
 </div>
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 0dab1210..f8d25136 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {userProfile} from "@welshman/app"
+  import {onMount} from "svelte"
+  import {uniqBy} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {
+    Address,
+    DELETE,
+    getAddress,
+    getTagValue,
+    getTagValues,
+    sortEventsDesc,
+  } from "@welshman/util"
+  import {load} from "@welshman/net"
+  import {pubkey, userProfile} from "@welshman/app"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
@@ -8,11 +20,19 @@
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
-  import Divider from "@lib/components/Divider.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import PrimaryNavSpaces from "@app/components/PrimaryNavSpaces.svelte"
-  import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
+  import {
+    BOOKMARKS,
+    BOOKMARK_LISTS,
+    deriveEvents,
+    INDEXER_RELAYS,
+    loadUserBookmarkCollections,
+    loadUserBookmarkList,
+    userSpaceUrls,
+    PLATFORM_RELAYS,
+  } from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {notifications} from "@app/util/notifications"
   import {goToChat, makeSpacePath} from "@app/util/routes"
@@ -30,18 +50,90 @@
   const anySpaceNotifications = $derived(
     $userSpaceUrls.some(p => $notifications.has(makeSpacePath(p))),
   )
+
+  const bookmarkListEvents = deriveEvents([{kinds: [BOOKMARKS, BOOKMARK_LISTS, DELETE]}])
+  let loadedBookmarkCountPubkey: string | undefined = $state()
+
+  const getListKey = (event: TrustedEvent) =>
+    event.kind === BOOKMARKS
+      ? new Address(BOOKMARKS, event.pubkey, "").toString()
+      : getAddress(event)
+
+  const isDeletedList = (event: TrustedEvent, deleteEvents: TrustedEvent[]) => {
+    const address =
+      event.kind === BOOKMARKS
+        ? new Address(BOOKMARKS, event.pubkey, "").toString()
+        : `${event.kind}:${event.pubkey}:${getTagValue("d", event.tags) || ""}`
+
+    return deleteEvents.some(deleteEvent => {
+      if (deleteEvent.created_at < event.created_at) {
+        return false
+      }
+
+      return (
+        getTagValues("e", deleteEvent.tags).includes(event.id) ||
+        getTagValues("a", deleteEvent.tags).includes(address)
+      )
+    })
+  }
+
+  const bookmarkListCount = $derived.by(() => {
+    if (!$pubkey) {
+      return 0
+    }
+
+    const ownEvents = sortEventsDesc($bookmarkListEvents).filter(event => event.pubkey === $pubkey)
+    const deleteEvents = ownEvents.filter(event => event.kind === DELETE)
+    const listEvents = ownEvents.filter(
+      event => event.kind === BOOKMARKS || event.kind === BOOKMARK_LISTS,
+    )
+    const visibleLists = uniqBy(getListKey, listEvents).filter(
+      event => !isDeletedList(event, deleteEvents),
+    )
+    const hasSavedItems = visibleLists.some(event => event.kind === BOOKMARKS)
+
+    return visibleLists.length + (hasSavedItems ? 0 : 1)
+  })
+
+  const loadBookmarkCountData = async () => {
+    if (!$pubkey || loadedBookmarkCountPubkey === $pubkey) {
+      return
+    }
+
+    loadedBookmarkCountPubkey = $pubkey
+
+    await Promise.all([
+      loadUserBookmarkList(),
+      loadUserBookmarkCollections(),
+      load({
+        relays: INDEXER_RELAYS,
+        filters: [{kinds: [DELETE], authors: [$pubkey]}],
+      }),
+    ])
+  }
+
+  onMount(() => {
+    void loadBookmarkCountData()
+  })
+
+  $effect(() => {
+    if ($pubkey && loadedBookmarkCountPubkey !== $pubkey) {
+      void loadBookmarkCountData()
+    }
+  })
 </script>
 
 <div
   class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 shrink-0 bg-base-200 pt-2 md:block">
   <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
     <PrimaryNavSpaces />
-    {#if PLATFORM_RELAYS.length > 0}
-      <Divider />
-    {/if}
     <div class="flex flex-col">
       <PrimaryNavItem title="Bookmarks" href="/bookmarks" prefix="/bookmarks">
-        <ImageIcon alt="Bookmarks" src={Bookmark} size={8} />
+        <div class="relative">
+          <ImageIcon alt="Bookmarks" src={Bookmark} size={8} />
+          <span class="badge badge-xs badge-neutral absolute -right-2 -top-2"
+            >{bookmarkListCount}</span>
+        </div>
       </PrimaryNavItem>
       <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings">
         {#if $userProfile?.picture}
@@ -83,7 +175,11 @@
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
       <PrimaryNavItem title="Bookmarks" href="/bookmarks" prefix="/bookmarks">
-        <ImageIcon alt="Bookmarks" src={Bookmark} size={8} />
+        <div class="relative">
+          <ImageIcon alt="Bookmarks" src={Bookmark} size={8} />
+          <span class="badge badge-xs badge-neutral absolute -right-2 -top-2"
+            >{bookmarkListCount}</span>
+        </div>
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index d34dedea..2752e16c 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/src/app/components/ThreadActions.svelte
@@ -7,6 +7,7 @@
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import EventActivity from "@app/components/EventActivity.svelte"
   import EventActions from "@app/components/EventActions.svelte"
+  import BookmarkEventMenuItem from "@app/components/BookmarkEventMenuItem.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {makeThreadPath, makeSpacePath} from "@app/util/routes"
 
@@ -41,5 +42,9 @@
   {#if showActivity}
     <EventActivity {url} {path} {event} />
   {/if}
-  <EventActions {url} {event} noun="Thread" />
+  <EventActions {url} {event} noun="Thread">
+    {#snippet customActions()}
+      <BookmarkEventMenuItem {event} />
+    {/snippet}
+  </EventActions>
 </div>
diff --git a/src/app/core/commands.ts b/src/app/core/commands.ts
index 7d3015e7..5daa2fd3 100644
--- a/src/app/core/commands.ts
+++ b/src/app/core/commands.ts
@@ -14,6 +14,7 @@ import {
   simpleCache,
   normalizeUrl,
   nthNe,
+  randomId,
 } from "@welshman/lib"
 import {Nip01Signer} from "@welshman/signer"
 import type {UploadTask} from "@welshman/editor"
@@ -33,11 +34,11 @@ import {
   ROOMS,
   COMMENT,
   APP_DATA,
-  asDecryptedEvent,
   isSignedEvent,
   makeEvent,
   normalizeRelayUrl,
   makeList,
+  Address,
   addToListPublicly,
   removeFromListByPredicate,
   updateList,
@@ -49,7 +50,6 @@ import {
   toNostrURI,
   RelayMode,
   getTagValues,
-  readList,
   uploadBlob,
   canUploadBlob,
   encryptFile,
@@ -86,10 +86,14 @@ import {
 import {compressFile} from "@lib/html"
 import type {SettingsValues, SpaceNotificationSettings} from "@app/core/state"
 import {
+  BOOKMARKS,
+  BOOKMARK_LISTS,
   SETTINGS,
   PROTECTED,
   INDEXER_RELAYS,
   DEFAULT_BLOSSOM_SERVERS,
+  getBookmarkList,
+  getBookmarkCollection,
   userSpaceUrls,
   userSettingsValues,
   getSetting,
@@ -171,59 +175,51 @@ export const broadcastUserData = async (relays: string[]) => {
 
 // List updates
 
-const BOOKMARKS = 10003
-const BOOKMARK_LISTS = 30003
-
-const parseListKey = (key: string) => {
-  const [kind, ...rest] = key.split(":")
-  return {
-    kind: parseInt(kind),
-    d: rest.join(":"),
+const getSavedItemsList = (owner = pubkey.get() || "") => {
+  if (!owner) {
+    return makeList({kind: BOOKMARKS})
   }
+
+  return getBookmarkList().get(owner) || makeList({kind: BOOKMARKS})
 }
 
-const getUserBookmarkList = (key = `${BOOKMARKS}:`) => {
-  const author = pubkey.get()
-  const {kind, d} = parseListKey(key)
+const getBookmarkListFromAddress = (address: string) => {
+  const parsed = Address.from(address)
 
-  if (!author) {
-    return makeList({kind})
+  if (parsed.kind === BOOKMARKS) {
+    return getSavedItemsList(parsed.pubkey)
   }
 
-  const latest = first(
-    repository
-      .query([{kinds: [kind], authors: [author]}])
-      .filter(event => getTagValue("d", event.tags) === d),
-  )
+  if (parsed.kind === BOOKMARK_LISTS) {
+    return getBookmarkCollection().get(address)
+  }
 
-  return latest ? readList(asDecryptedEvent(latest)) : makeList({kind})
+  return undefined
 }
 
 export const createBookmarkList = async (title: string) => {
-  const d = title.trim()
+  const label = title.trim()
 
-  if (!d) {
-    return
-  }
-
-  const existing = getUserBookmarkList(`${BOOKMARK_LISTS}:${d}`)
-
-  if (existing.event?.id) {
+  if (!label) {
     return
   }
 
   const list = makeList({kind: BOOKMARK_LISTS})
-  const event = await updateList(list, {publicTags: [["d", d]]}).reconcile(nip44EncryptToSelf)
-  const relays = uniq([...Router.get().FromUser().getUrls(), ...getRelayTagValues(event.tags)])
+  const event = await updateList(list, {
+    publicTags: [
+      ["d", randomId()],
+      ["title", label],
+    ],
+  }).reconcile(nip44EncryptToSelf)
+  const relays = Router.get().FromUser().getUrls()
 
   return publishThunk({event, relays})
 }
 
-export const addEventBookmark = async (target: TrustedEvent, key = `${BOOKMARKS}:`) => {
-  const list = getUserBookmarkList(key)
-  const {d} = parseListKey(key)
+export const addEventBookmark = async (target: TrustedEvent, address?: string) => {
+  const list = address ? getBookmarkListFromAddress(address) : getSavedItemsList()
 
-  if (d && !list.event?.id) {
+  if (!list) {
     return
   }
 
@@ -234,20 +230,15 @@ export const addEventBookmark = async (target: TrustedEvent, key = `${BOOKMARKS}
   }
 
   const event = await addToListPublicly(list, ["e", target.id]).reconcile(nip44EncryptToSelf)
-  const relays = uniq([
-    ...Router.get().FromUser().getUrls(),
-    ...Router.get().Event(target).limit(3).getUrls(),
-    ...getRelayTagValues(event.tags),
-  ])
+  const relays = Router.get().FromUser().getUrls()
 
   return publishThunk({event, relays})
 }
 
-export const removeEventBookmark = async (target: TrustedEvent, key = `${BOOKMARKS}:`) => {
-  const list = getUserBookmarkList(key)
-  const {d} = parseListKey(key)
+export const removeEventBookmark = async (target: TrustedEvent, address?: string) => {
+  const list = address ? getBookmarkListFromAddress(address) : getSavedItemsList()
 
-  if (d && !list.event?.id) {
+  if (!list) {
     return
   }
 
@@ -269,51 +260,46 @@ export const removeEventBookmark = async (target: TrustedEvent, key = `${BOOKMAR
       (tag[0] === "e" && tag[1] === target.id) ||
       (targetAddress !== undefined && tag[0] === "a" && tag[1] === targetAddress),
   ).reconcile(nip44EncryptToSelf)
-  const relays = uniq([
-    ...INDEXER_RELAYS,
-    ...getRelayTagValues(event.tags),
-    ...Router.get().Event(target).limit(3).getUrls(),
-  ])
+  const relays = Router.get().FromUser().getUrls()
 
   return publishThunk({event, relays})
 }
 
-export const deleteBookmarkList = async (key: string) => {
-  const list = getUserBookmarkList(key)
-  const {kind, d} = parseListKey(key)
+export const deleteBookmarkList = async (address: string) => {
+  const list = getBookmarkCollection().get(address)
+  const {kind} = Address.from(address)
 
-  if (kind !== BOOKMARK_LISTS || !d || !list.event) {
+  if (kind !== BOOKMARK_LISTS || !list?.event) {
     return
   }
 
-  const relays = uniq([...INDEXER_RELAYS, ...getRelayTagValues(list.event.tags)])
-  const address = `${kind}:${list.event.pubkey}:${d}`
+  const relays = Router.get().FromUser().getUrls()
 
   return publishDelete({protect: false, event: list.event, tags: [["a", address]], relays})
 }
 
-export const renameBookmarkList = async (key: string, title: string) => {
-  const list = getUserBookmarkList(key)
-  const {kind, d} = parseListKey(key)
-  const nextD = title.trim()
+export const renameBookmarkList = async (address: string, title: string) => {
+  const list = getBookmarkCollection().get(address)
+  const {kind} = Address.from(address)
+  const nextTitle = title.trim()
 
-  if (kind !== BOOKMARK_LISTS || !d || !nextD || !list.event) {
+  if (kind !== BOOKMARK_LISTS || !nextTitle || !list?.event) {
     return
   }
 
-  if (nextD === d) {
+  const currentTitle =
+    getTagValue("title", list.event.tags) || getTagValue("d", list.event.tags) || ""
+
+  if (nextTitle === currentTitle) {
     return
   }
 
-  const existing = getUserBookmarkList(`${BOOKMARK_LISTS}:${nextD}`)
-
-  if (existing.event?.id && existing.event.id !== list.event.id) {
-    return
-  }
-
-  const publicTags = [["d", nextD], ...list.publicTags.filter(tag => tag[0] !== "d")]
+  const publicTags = [
+    ["d", getTagValue("d", list.event.tags) || randomId()],
+    ["title", nextTitle],
+  ]
   const event = await updateList(list, {publicTags}).reconcile(nip44EncryptToSelf)
-  const relays = uniq([...INDEXER_RELAYS, ...getRelayTagValues(list.event.tags)])
+  const relays = Router.get().FromUser().getUrls()
 
   return publishThunk({event, relays})
 }
diff --git a/src/app/core/state.ts b/src/app/core/state.ts
index 6d2ad6fb..4ddef3d3 100644
--- a/src/app/core/state.ts
+++ b/src/app/core/state.ts
@@ -161,6 +161,10 @@ export const PROTECTED = ["-"]
 
 export const MESSAGE_KINDS = [MESSAGE]
 
+export const BOOKMARKS = 10003
+
+export const BOOKMARK_LISTS = 30003
+
 export const IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"]
 
 export const VIDEO_CONTENT_TYPES = ["video/quicktime", "video/webm", "video/mp4"]
@@ -706,6 +710,50 @@ export const deriveOtherVoiceRooms = (url: string) =>
 
 // User space/room lists
 
+export const bookmarkListsByPubkey = deriveItemsByKey({
+  repository,
+  filters: [{kinds: [BOOKMARKS]}],
+  getKey: list => list.event.pubkey,
+  eventToItem: (event: TrustedEvent) => readList(asDecryptedEvent(event)),
+})
+
+export const getBookmarkList = getter(bookmarkListsByPubkey)
+
+export const loadBookmarkList = makeLoadItem(makeOutboxLoader(BOOKMARKS), getBookmarkList)
+
+export const userBookmarkList = makeUserData(bookmarkListsByPubkey, loadBookmarkList)
+
+export const loadUserBookmarkList = makeUserLoader(loadBookmarkList)
+
+export const bookmarkCollectionsByAddress = deriveItemsByKey({
+  repository,
+  filters: [{kinds: [BOOKMARK_LISTS]}],
+  getKey: list => getAddress(list.event),
+  eventToItem: (event: TrustedEvent) => readList(asDecryptedEvent(event)),
+})
+
+export const getBookmarkCollection = getter(bookmarkCollectionsByAddress)
+
+export const bookmarkCollections = deriveItems(bookmarkCollectionsByAddress)
+
+export const bookmarkCollectionsByPubkey = derived(bookmarkCollections, $lists =>
+  groupBy(list => list.event.pubkey, $lists),
+)
+
+export const getBookmarkCollections = getter(bookmarkCollectionsByPubkey)
+
+export const loadBookmarkCollections = makeLoadItem(
+  makeOutboxLoader(BOOKMARK_LISTS),
+  getBookmarkCollections,
+)
+
+export const userBookmarkCollections = makeUserData(
+  bookmarkCollectionsByPubkey,
+  loadBookmarkCollections,
+)
+
+export const loadUserBookmarkCollections = makeUserLoader(loadBookmarkCollections)
+
 export const groupListsByPubkey = deriveItemsByKey({
   repository,
   filters: [{kinds: [ROOMS]}],
diff --git a/src/routes/bookmarks/+page.svelte b/src/routes/bookmarks/+page.svelte
index 0ec98f90..c630dfa6 100644
--- a/src/routes/bookmarks/+page.svelte
+++ b/src/routes/bookmarks/+page.svelte
@@ -1,45 +1,31 @@
 <script lang="ts">
-  import cx from "classnames"
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
-  import {first, formatTimestamp, uniqBy} from "@welshman/lib"
+  import {first, uniqBy} from "@welshman/lib"
   import {load} from "@welshman/net"
   import {
     DELETE,
-    displayPubkey,
     getIdFilters,
     getTags,
     getTagValue,
     getTagValues,
     sortEventsDesc,
     tagsFromIMeta,
+    Address,
+    getAddress,
   } from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
-  import {
-    displayProfileByPubkey,
-    loadProfile,
-    pubkey,
-    repository,
-    tracker,
-    waitForThunkError,
-  } from "@welshman/app"
+  import {loadProfile, pubkey, repository, tracker, waitForThunkError} from "@welshman/app"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
-  import Folder from "@assets/icons/folder.svg?dataurl"
-  import Add from "@assets/icons/add.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import SliderMinimalisticHorizontal from "@assets/icons/slider-minimalistic-horizontal.svg?dataurl"
-  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import Page from "@lib/components/Page.svelte"
-  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
-  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
-  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
   import BookmarkListPicker from "@app/components/BookmarkListPicker.svelte"
-  import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
-  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import BookmarkGrid from "@app/components/BookmarkGrid.svelte"
+  import BookmarkSidebar from "@app/components/BookmarkSidebar.svelte"
   import {
     addEventBookmark,
     deleteBookmarkList,
@@ -47,9 +33,13 @@
     renameBookmarkList,
   } from "@app/core/commands"
   import {
+    BOOKMARKS,
+    BOOKMARK_LISTS,
     deriveEvents,
     IMAGE_CONTENT_TYPES,
     INDEXER_RELAYS,
+    loadUserBookmarkCollections,
+    loadUserBookmarkList,
     shouldIgnoreError,
     VIDEO_CONTENT_TYPES,
   } from "@app/core/state"
@@ -73,17 +63,15 @@
     external: boolean
     image: string | undefined
     video: string | undefined
-    contentType: Exclude<ContentType, "all">
+    contentType: "image" | "video" | "text"
     preview: string
     pollOptions: string[]
     searchable: string
   }
 
-  const BOOKMARKS = 10003
-  const CUSTOM_BOOKMARKS = 30003
-  const MANAGED_LIST_KINDS = [BOOKMARKS, CUSTOM_BOOKMARKS]
+  const savedItemsKey = $derived($pubkey ? new Address(BOOKMARKS, $pubkey, "").toString() : "")
 
-  const listEvents = deriveEvents([{kinds: [...MANAGED_LIST_KINDS, DELETE]}])
+  const listEvents = deriveEvents([{kinds: [BOOKMARKS, BOOKMARK_LISTS, DELETE]}])
 
   const isImageUrl = (url: string) => /\.(png|jpe?g|gif|webp|avif|svg)(\?|#|$)/i.test(url)
 
@@ -129,14 +117,6 @@
     }
   }
 
-  const asLinkValue = (url: string) => {
-    try {
-      return {url: new URL(url)}
-    } catch {
-      return undefined
-    }
-  }
-
   const getPollQuestion = (event: TrustedEvent) => {
     const lines = (event.content || "")
       .split("\n")
@@ -163,7 +143,7 @@
     return clean.length > 140 ? `${clean.slice(0, 140).trim()}...` : clean
   }
 
-  const detectContentType = (event: TrustedEvent): Exclude<ContentType, "all"> => {
+  const detectContentType = (event: TrustedEvent): "image" | "video" | "text" => {
     const media = getMediaPreview(event)
 
     if (media.image) {
@@ -177,10 +157,15 @@
     return "text"
   }
 
-  const getListKey = (event: TrustedEvent) => `${event.kind}:${getTagValue("d", event.tags) || ""}`
+  const getListKey = (event: TrustedEvent) =>
+    event.kind === BOOKMARKS
+      ? new Address(BOOKMARKS, event.pubkey, "").toString()
+      : getAddress(event)
 
   const getListLabel = (event: TrustedEvent) =>
-    getTagValue("d", event.tags) || (event.kind === BOOKMARKS ? "Saved Items" : "Untitled List")
+    getTagValue("title", event.tags) ||
+    getTagValue("d", event.tags) ||
+    (event.kind === BOOKMARKS ? "Saved Items" : "Untitled List")
 
   const userListEvents = $derived(
     sortEventsDesc($listEvents).filter(event => event.pubkey === $pubkey && event.kind !== DELETE),
@@ -218,14 +203,14 @@
       )
       .filter(list => (list.event ? !isDeletedList(list.event) : true))
 
-    const savedItems = first(mapped.filter(list => list.key === "10003:")) || {
-      key: "10003:",
+    const savedItems = first(mapped.filter(list => list.key === savedItemsKey)) || {
+      key: savedItemsKey,
       label: "Saved Items",
       count: 0,
       event: undefined,
     }
 
-    return [savedItems, ...mapped.filter(list => list.key !== "10003:")]
+    return [savedItems, ...mapped.filter(list => Address.from(list.key).kind !== BOOKMARKS)]
   })
 
   const defaultListKey = $derived(sidebarLists[0]?.key || "")
@@ -243,49 +228,9 @@
   let searchTerm = $state("")
   let showSearch = $state(false)
   let contentType = $state<ContentType>("all")
+  let listsReady = $state(false)
   let loadedListPubkey: string | undefined = $state()
   let loadedSelectionKey: string | undefined = $state()
-  let menuOpen = $state(false)
-  let menuX = $state(0)
-  let menuY = $state(0)
-  let menuListKey = $state("")
-  let menuListLabel = $state("")
-  let openBookmarkMenuKey: string | undefined = $state()
-  let listDialogMode: "rename" | "delete" | undefined = $state()
-  let dialogListKey = $state("")
-  let dialogListLabel = $state("")
-  let nextListLabel = $state("")
-  let listDialogPending = $state(false)
-
-  const closeListContextMenu = () => {
-    menuOpen = false
-  }
-
-  const closeBookmarkMenu = () => {
-    openBookmarkMenuKey = undefined
-  }
-
-  const toggleBookmarkMenu = (key: string) => {
-    openBookmarkMenuKey = openBookmarkMenuKey === key ? undefined : key
-  }
-
-  const openListDialog = (mode: "rename" | "delete", key: string, label: string) => {
-    listDialogMode = mode
-    dialogListKey = key
-    dialogListLabel = label
-    nextListLabel = label
-  }
-
-  const closeListDialog = (force = false) => {
-    if (!force && listDialogPending) {
-      return
-    }
-
-    listDialogMode = undefined
-    dialogListKey = ""
-    dialogListLabel = ""
-    nextListLabel = ""
-  }
 
   const setFilterAll = () => {
     contentType = "all"
@@ -315,8 +260,6 @@
     shouldIgnoreError(error) || error.includes("only accepts kind 10002 events")
 
   const openBookmarkFromMenu = async (item: BookmarkItem) => {
-    closeBookmarkMenu()
-
     if (item.external) {
       window.open(item.href, "_blank", "noopener,noreferrer")
       return
@@ -326,8 +269,6 @@
   }
 
   const copyBookmarkLinkFromMenu = async (item: BookmarkItem) => {
-    closeBookmarkMenu()
-
     try {
       await navigator.clipboard.writeText(item.href)
       pushToast({message: "Link copied"})
@@ -337,9 +278,11 @@
   }
 
   const addBookmarkToSavedItems = async (item: BookmarkItem) => {
-    closeBookmarkMenu()
+    if (!savedItemsKey) {
+      return
+    }
 
-    const thunk = await addEventBookmark(item.event, "10003:")
+    const thunk = await addEventBookmark(item.event, savedItemsKey)
 
     if (!thunk) {
       pushToast({message: "Already in Saved Items"})
@@ -357,8 +300,6 @@
   }
 
   const removeBookmarkFromCurrentList = async (item: BookmarkItem) => {
-    closeBookmarkMenu()
-
     if (!selectedKey) {
       return
     }
@@ -383,7 +324,7 @@
   }
 
   const deleteListFromSidebar = async (key: string, label: string) => {
-    if (key === "10003:") {
+    if (key.startsWith(`${BOOKMARKS}:`)) {
       return
     }
 
@@ -404,12 +345,12 @@
     pushToast({message: `Deleted ${label}`})
 
     if (selectedKey === key) {
-      await goto(selectedListHref("10003:"), {replaceState: true, noScroll: true})
+      await goto(selectedListHref(savedItemsKey), {replaceState: true, noScroll: true})
     }
   }
 
   const renameListFromSidebar = async (key: string, label: string, nextLabel: string) => {
-    if (key === "10003:") {
+    if (key.startsWith(`${BOOKMARKS}:`)) {
       return
     }
 
@@ -433,95 +374,7 @@
       return
     }
 
-    const deleteOldThunk = await deleteBookmarkList(key)
-
-    if (deleteOldThunk) {
-      const deleteOldError = await waitForThunkError(deleteOldThunk)
-
-      if (deleteOldError && !isIgnorableBookmarkListError(deleteOldError)) {
-        pushToast({theme: "error", message: deleteOldError})
-        return
-      }
-    }
-
     pushToast({message: `Renamed to ${normalized}`})
-
-    if (selectedKey === key) {
-      await goto(selectedListHref(`${CUSTOM_BOOKMARKS}:${normalized}`), {
-        replaceState: true,
-        noScroll: true,
-      })
-    }
-  }
-
-  const onListContextMenu = async (event: MouseEvent, key: string, label: string) => {
-    event.preventDefault()
-    menuOpen = true
-    menuX = event.clientX
-    menuY = event.clientY
-    menuListKey = key
-    menuListLabel = label
-  }
-
-  const openListFromMenu = async () => {
-    closeListContextMenu()
-    await goto(selectedListHref(menuListKey), {replaceState: true, noScroll: true})
-  }
-
-  const renameListFromMenu = async () => {
-    closeListContextMenu()
-    openListDialog("rename", menuListKey, menuListLabel)
-  }
-
-  const deleteListFromMenu = async () => {
-    closeListContextMenu()
-    openListDialog("delete", menuListKey, menuListLabel)
-  }
-
-  const submitRenameDialog = async () => {
-    if (listDialogMode !== "rename") {
-      return
-    }
-
-    listDialogPending = true
-
-    try {
-      await renameListFromSidebar(dialogListKey, dialogListLabel, nextListLabel)
-      closeListDialog(true)
-    } finally {
-      listDialogPending = false
-    }
-  }
-
-  const submitDeleteDialog = async () => {
-    if (listDialogMode !== "delete") {
-      return
-    }
-
-    listDialogPending = true
-
-    try {
-      await deleteListFromSidebar(dialogListKey, dialogListLabel)
-      closeListDialog(true)
-    } finally {
-      listDialogPending = false
-    }
-  }
-
-  const handleListDialogBackdropClick = () => {
-    closeListDialog()
-  }
-
-  const cancelListDialog = () => {
-    closeListDialog()
-  }
-
-  const handleWindowKeydown = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      closeListContextMenu()
-      closeBookmarkMenu()
-      closeListDialog()
-    }
   }
 
   const normalizedTerm = $derived(searchTerm.trim().toLowerCase())
@@ -565,22 +418,31 @@
 
   const selectedListHref = (key: string) => `/bookmarks?list=${encodeURIComponent(key)}`
 
-  const listClass = (active: boolean) =>
-    cx("card2 card2-sm bg-alt col-2 gap-1 transition-colors hover:bg-base-100", {
-      "bg-base-100": active,
-    })
-
   const loadBookmarkLists = async () => {
-    if (!$pubkey || loadedListPubkey === $pubkey) {
+    if (!$pubkey) {
+      listsReady = false
+      return
+    }
+
+    if (loadedListPubkey === $pubkey && listsReady) {
       return
     }
 
     loadedListPubkey = $pubkey
+    listsReady = false
 
-    await load({
-      relays: INDEXER_RELAYS,
-      filters: [{kinds: [...MANAGED_LIST_KINDS, DELETE], authors: [$pubkey]}],
-    })
+    try {
+      await Promise.all([
+        loadUserBookmarkList(),
+        loadUserBookmarkCollections(),
+        load({
+          relays: INDEXER_RELAYS,
+          filters: [{kinds: [DELETE], authors: [$pubkey]}],
+        }),
+      ])
+    } finally {
+      listsReady = true
+    }
 
     // Ensure selected-list references are reloaded once list metadata arrives.
     loadedSelectionKey = undefined
@@ -644,144 +506,33 @@
   $effect(() => {
     if (selectedList) {
       void loadSelectedReferences()
+    } else {
+      selectedEvents = []
     }
   })
 </script>
 
-<svelte:window
-  onclick={() => {
-    closeListContextMenu()
-    closeBookmarkMenu()
-  }}
-  onkeydown={handleWindowKeydown} />
-
-<SecondaryNav class="relative">
-  <SecondaryNavSection>
-    <SecondaryNavHeader>
-      <span class="flex items-center gap-2 uppercase tracking-wide">
-        <Icon icon={Bookmark} />
-        Bookmarks
-      </span>
-      <span class="badge badge-sm badge-neutral">{totalListCount}</span>
-    </SecondaryNavHeader>
-    <div
-      class="flex items-center justify-between px-1 pt-1 text-xs uppercase tracking-wide opacity-70">
-      <span>My Lists</span>
-      <Button class="btn btn-ghost btn-xs btn-square" onclick={openListManager}>
-        <Icon size={3.5} icon={Add} />
-      </Button>
-    </div>
-  </SecondaryNavSection>
-  <div class="col-2 overflow-y-auto px-2 pb-2">
-    {#each sidebarListsWithDisplayCount as list (list.key)}
-      <div
-        role="button"
-        tabindex="-1"
-        oncontextmenu={event => onListContextMenu(event, list.key, list.label)}>
-        <Link href={selectedListHref(list.key)} class={listClass(selectedKey === list.key)}>
-          <div class="flex items-center justify-between gap-2">
-            <p class="truncate font-medium">
-              <span class="inline-flex items-center gap-2">
-                <Icon size={4} icon={list.key === "10003:" ? Bookmark : Folder} />
-                {list.label}
-              </span>
-            </p>
-            <span class="badge badge-sm badge-neutral">{list.displayCount}</span>
-          </div>
-        </Link>
-      </div>
-    {:else}
-      <div class="card2 card2-sm bg-alt text-sm opacity-70">No lists found yet.</div>
-    {/each}
-  </div>
-
-  {#if menuOpen}
-    <div class="fixed inset-0 z-popover" role="presentation">
-      <div
-        class="menu rounded-box bg-base-100 shadow-xl"
-        role="menu"
-        style={`position: fixed; left: ${menuX}px; top: ${menuY}px; min-width: 11rem;`}>
-        <li>
-          <Button class="justify-start" onclick={openListFromMenu}>Open List</Button>
-        </li>
-        {#if menuListKey !== "10003:"}
-          <li>
-            <Button class="justify-start" onclick={renameListFromMenu}>Rename List</Button>
-          </li>
-          <li>
-            <Button class="justify-start text-error" onclick={deleteListFromMenu}
-              >Delete List</Button>
-          </li>
-        {/if}
-      </div>
-    </div>
-  {/if}
-
-  {#if listDialogMode}
-    <div class="fixed inset-0 z-modal bg-black/45 p-4 md:p-6">
-      <button
-        type="button"
-        class="absolute inset-0"
-        aria-label="Close dialog"
-        onclick={handleListDialogBackdropClick}></button>
-      <div class="center relative h-full w-full">
-        <div
-          class="card2 bg-base-100 w-full max-w-md gap-4 p-5 shadow-2xl"
-          role="dialog"
-          aria-modal="true"
-          tabindex="-1">
-          {#if listDialogMode === "rename"}
-            <div class="col-2 gap-1">
-              <h3 class="text-lg font-semibold">Rename List</h3>
-              <p class="text-sm opacity-70">Choose a new name for "{dialogListLabel}".</p>
-            </div>
-
-            <label class="input input-bordered flex items-center gap-2">
-              <Icon icon={Folder} />
-              <input bind:value={nextListLabel} class="grow" type="text" placeholder="List name" />
-            </label>
-
-            <div class="flex items-center justify-end gap-2">
-              <Button class="btn btn-ghost" onclick={cancelListDialog} disabled={listDialogPending}
-                >Cancel</Button>
-              <Button
-                class="btn btn-neutral"
-                onclick={submitRenameDialog}
-                disabled={listDialogPending || !nextListLabel.trim()}>
-                Save
-              </Button>
-            </div>
-          {:else}
-            <div class="col-2 gap-1">
-              <h3 class="text-lg font-semibold">Delete List?</h3>
-              <p class="text-sm opacity-70">
-                This will remove "{dialogListLabel}" and cannot be undone.
-              </p>
-            </div>
-
-            <div class="flex items-center justify-end gap-2">
-              <Button class="btn btn-ghost" onclick={cancelListDialog} disabled={listDialogPending}
-                >Cancel</Button>
-              <Button
-                class="btn btn-error"
-                onclick={submitDeleteDialog}
-                disabled={listDialogPending}>
-                Delete
-              </Button>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  {/if}
-</SecondaryNav>
+<BookmarkSidebar
+  lists={listsReady ? sidebarListsWithDisplayCount : []}
+  {selectedKey}
+  totalCount={listsReady ? totalListCount : 0}
+  onOpenManager={openListManager}
+  onSelect={key => goto(selectedListHref(key), {replaceState: true, noScroll: true})}
+  onRename={renameListFromSidebar}
+  onDelete={deleteListFromSidebar} />
 
 <Page class="overflow-hidden">
   <div class="col-3 gap-3 p-3 md:p-4">
     <div class="card2 card2-sm bg-alt flex items-center justify-between gap-2 p-2">
       <div class="flex min-w-0 items-center gap-2">
         <Icon size={4} icon={Bookmark} />
-        <p class="truncate text-sm font-medium">{selectedList?.label || "Saved Items"}</p>
+        <p class="truncate text-sm font-medium">
+          {#if listsReady}
+            {selectedList?.label || "Saved Items"}
+          {:else}
+            Loading bookmarks...
+          {/if}
+        </p>
         <span class="badge badge-sm badge-neutral">{filteredItems.length}</span>
       </div>
       <div class="flex items-center gap-2">
@@ -810,6 +561,12 @@
       </div>
     </div>
 
+    <div class="flex w-full flex-wrap gap-2 px-1 text-[11px] uppercase tracking-wide opacity-70">
+      <span>{filteredItems.length} items</span>
+      <span>•</span>
+      <span>{listsReady ? selectedList?.label || "Saved Items" : "Loading"}</span>
+    </div>
+
     {#if showSearch}
       <label class="input input-bordered flex w-full items-center gap-2">
         <Icon icon={Magnifier} />
@@ -817,86 +574,16 @@
       </label>
     {/if}
 
-    <div class="flex w-full flex-wrap content-start items-stretch gap-3">
-      {#each filteredItems as item (item.key)}
-        <Link
-          href={item.href}
-          external={item.external}
-          class="card2 bg-alt col-2 w-full gap-3 p-3 transition-colors hover:bg-base-100 md:w-[calc(50%-0.375rem)] xl:w-[calc(33.333%-0.5rem)]">
-          <div class="flex items-start justify-between gap-2">
-            <div class="flex min-w-0 items-center gap-2">
-              <ProfileCircle pubkey={item.event.pubkey} size={5} />
-              <div class="min-w-0">
-                <p class="truncate text-sm font-semibold text-primary">
-                  {displayProfileByPubkey(item.event.pubkey)}
-                </p>
-                <p class="truncate text-[11px] opacity-60">
-                  {displayPubkey(item.event.pubkey)} · {formatTimestamp(item.event.created_at)}
-                </p>
-              </div>
-            </div>
-            <div class="relative" role="presentation">
-              <Button
-                class="btn btn-ghost btn-xs btn-square"
-                onclick={() => toggleBookmarkMenu(item.key)}>
-                <Icon size={4} icon={MenuDots} />
-              </Button>
-              {#if openBookmarkMenuKey === item.key}
-                <ul
-                  class="menu absolute right-0 top-7 z-popover w-44 rounded-box bg-base-100 p-2 shadow-xl"
-                  role="menu">
-                  <li>
-                    <Button class="justify-start" onclick={() => openBookmarkFromMenu(item)}>
-                      Open bookmark
-                    </Button>
-                  </li>
-                  <li>
-                    <Button class="justify-start" onclick={() => copyBookmarkLinkFromMenu(item)}>
-                      Copy link
-                    </Button>
-                  </li>
-                  {#if selectedKey !== "10003:"}
-                    <li>
-                      <Button class="justify-start" onclick={() => addBookmarkToSavedItems(item)}>
-                        Add to Saved Items
-                      </Button>
-                    </li>
-                  {/if}
-                  <li>
-                    <Button
-                      class="justify-start text-error"
-                      onclick={() => removeBookmarkFromCurrentList(item)}>
-                      Remove from this list
-                    </Button>
-                  </li>
-                </ul>
-              {/if}
-            </div>
-          </div>
-
-          {#if item.image}
-            {#if asLinkValue(item.image)}
-              <ContentLinkBlockImage
-                value={asLinkValue(item.image)}
-                event={item.event}
-                class="max-h-[28rem] w-full rounded-lg object-contain" />
-            {/if}
-          {:else if item.video}
-            <video
-              src={item.video}
-              class="max-h-[28rem] w-full rounded-lg object-contain"
-              muted
-              playsinline
-              preload="metadata"></video>
-          {/if}
-
-          <p class="break-words min-w-0 text-base leading-relaxed opacity-90">{item.preview}</p>
-        </Link>
-      {:else}
-        <div class="card2 bg-alt col-2 max-w-lg p-5 text-sm opacity-80">
-          No items match your current filters.
-        </div>
-      {/each}
-    </div>
+    {#if listsReady}
+      <BookmarkGrid
+        items={filteredItems}
+        showAddToSaved={selectedKey !== savedItemsKey}
+        onOpen={openBookmarkFromMenu}
+        onCopyLink={copyBookmarkLinkFromMenu}
+        onAddToSaved={addBookmarkToSavedItems}
+        onRemove={removeBookmarkFromCurrentList} />
+    {:else}
+      <div class="card2 card2-sm bg-alt text-sm opacity-70">Loading bookmark lists...</div>
+    {/if}
   </div>
 </Page>
-- 
2.52.0