Tweak how the library page renders

src/app/components/BoardMenu.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {PinboardReader} from "@welshman/domain"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Pen from "@assets/icons/pen.svg?dataurl"
+  import TrashBin from "@assets/icons/trash-bin-2.svg?dataurl"
   import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
+  import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
+  import PinAdd from "@app/components/PinAdd.svelte"
+  import PinboardEdit from "@app/components/PinboardEdit.svelte"
+  import {deletes} from "@app/core"
+  import {deriveUserIsSpaceAdmin} from "@app/management"
   import {shareEvent} from "@app/share"
   import {pushModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
 
   type Props = {
     url: string
@@ -17,10 +27,39 @@
 
   const {url, board, onClick}: Props = $props()
 
+  const canManage = deriveUserIsSpaceAdmin(url)
+
   const showInfo = () => pushModal(EventInfo, {url, event: board.event})
 
   const share = () => shareEvent(url, "Shelf", board.event)
 
+  const addLink = () => pushModal(PinAdd, {url, address: board.address()})
+
+  const edit = () => pushModal(PinboardEdit, {url, board})
+
+  const deleteBoard = async () => {
+    try {
+      const command = await $deletes.deleteEvent(board.event)
+      const error = await command.publishAsRelay(url).then(thunk => thunk.waitForError())
+
+      if (error) {
+        pushToast({theme: "error", message: error})
+      } else {
+        pushToast({message: "Shelf deleted!"})
+      }
+    } catch (e) {
+      console.error(e)
+      pushToast({theme: "error", message: errorMessage(e)})
+    }
+  }
+
+  const confirmDelete = () =>
+    pushModal(Confirm, {
+      title: "Delete Shelf",
+      message: `Delete "${board.title() || "this shelf"}"?`,
+      confirm: deleteBoard,
+    })
+
   let ul: Element
 
   onMount(() => {
@@ -41,4 +80,24 @@
       Share to chat
     </Button>
   </li>
+  {#if $canManage}
+    <li>
+      <Button onclick={addLink}>
+        <Icon icon={AddCircle} />
+        Add link
+      </Button>
+    </li>
+    <li>
+      <Button onclick={edit}>
+        <Icon icon={Pen} />
+        Edit shelf
+      </Button>
+    </li>
+    <li>
+      <Button class="text-error" onclick={confirmDelete}>
+        <Icon icon={TrashBin} />
+        Delete shelf
+      </Button>
+    </li>
+  {/if}
 </ul>

src/app/components/PinboardItem.svelte

@@ -1,27 +1,32 @@
 <script lang="ts">
-  import {Pins} from "@welshman/app"
+  import cx from "classnames"
   import type {PinboardReader} from "@welshman/domain"
-  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import MenuButton from "@lib/components/MenuButton.svelte"
-  import PinItem from "@app/components/PinItem.svelte"
   import BoardMenu from "@app/components/BoardMenu.svelte"
-  import {app} from "@app/core"
-  import {makeLibraryPath} from "@app/routes"
 
   type Props = {
     url: string
     board: PinboardReader
+    selected: boolean
+    onclick: () => void
   }
 
-  const {url, board}: Props = $props()
+  const {url, board, selected, onclick}: Props = $props()
-
-  const pins = $app.use(Pins).forBoard(board.address()).$
-  const detailPath = makeLibraryPath(url, board.address())
 </script>
 
-<div class="card relative flex flex-col gap-2">
+<div class="relative w-56 shrink-0">
+  <Button
+    {onclick}
+    aria-pressed={selected}
+    class={cx("card card-sm card-interactive flex h-full w-full flex-col items-start gap-1 pr-10", {
+      "card-primary": selected,
+    })}>
+    <strong class="truncate w-full text-left">{board.title() || "Untitled shelf"}</strong>
+    {#if board.description()}
+      <span class="line-clamp-2 text-left text-sm opacity-70">{board.description()}</span>
+    {/if}
+  </Button>
   <div class="absolute right-2 top-2 z-feature">
     <MenuButton
       class="button button-neutral button-sm button-square"
@@ -30,17 +35,4 @@
       component={BoardMenu}
       componentProps={{url, board}} />
   </div>
-  <div class="flex flex-col pr-8">
-    <strong class="text-lg">{board.title() || "Untitled shelf"}</strong>
-    {#if board.description()}
-      <span class="text-sm opacity-70">{board.description()}</span>
-    {/if}
-  </div>
-  {#each $pins.slice(0, 1) as pin (pin.id())}
-    <PinItem minimal {url} {pin} />
-  {/each}
-  <Link href={detailPath} class="button button-primary">
-    <Icon icon={AltArrowRight} />
-    <strong>View all content</strong>
-  </Link>
 </div>

src/app/routes.ts

@@ -135,8 +135,17 @@ export const makeCalendarPath = (url: string, address?: string) =>
 
 export const makePollPath = (url: string, id?: string) => makeSpacePath(url, "polls", id)
 
-export const makeLibraryPath = (url: string, address?: string) =>
+// Shelves are selected in place on the library page rather than having their own
-  makeSpacePath(url, "library", address)
+// route, so the address goes in a query param.
+export const makeLibraryPath = (url: string, address?: string) => {
+  const path = makeSpacePath(url, "library")
+
+  if (address) {
+    return path + "?" + new URLSearchParams({board: address}).toString()
+  }
+
+  return path
+}
 
 export const makeContentPath = (url: string, kind: number, idOrAddress?: string) => {
   switch (kind) {

src/routes/spaces/[relay]/library/+page.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import {goto} from "$app/navigation"
   import {page} from "$app/stores"
   import {PIN, PINBOARD} from "@welshman/util"
-  import {Pinboards} from "@welshman/app"
+  import {Pinboards, Pins} from "@welshman/app"
+  import type {PinboardReader} from "@welshman/domain"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import GalleryWide from "@assets/icons/gallery-wide.svg?dataurl"
   import Add from "@assets/icons/add.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Masonry from "@lib/components/Masonry.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import SpaceBar from "@app/components/SpaceBar.svelte"
+  import PinItem from "@app/components/PinItem.svelte"
+  import PinAdd from "@app/components/PinAdd.svelte"
   import PinboardItem from "@app/components/PinboardItem.svelte"
   import PinboardEdit from "@app/components/PinboardEdit.svelte"
   import {app, network, relays} from "@app/core"
   import {decodeRelay} from "@app/relays"
   import {deriveUserIsSpaceAdmin} from "@app/management"
+  import {makeLibraryPath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   const url = decodeRelay($page.params.relay!)
@@ -25,8 +31,6 @@
 
   const canManage = deriveUserIsSpaceAdmin(url)
 
-  const createBoard = () => pushModal(PinboardEdit, {url})
-
   let term = $state("")
   let loading = $state(true)
 
@@ -34,6 +38,12 @@
   // to this space.
   const boards = $derived($app.use(Pinboards).forAuthor($relay?.self ?? "").$)
 
+  const address = $derived($page.url.searchParams.get("board") ?? "")
+
+  const selected = $derived($boards.find(board => board.address() === address))
+
+  const pins = $derived($app.use(Pins).forBoard(address).$)
+
   const filtered = $derived.by(() => {
     const value = term.trim().toLowerCase()
 
@@ -48,6 +58,13 @@
     return $boards
   })
 
+  const createBoard = () => pushModal(PinboardEdit, {url})
+
+  const addLink = () => pushModal(PinAdd, {url, address})
+
+  const selectBoard = (board: PinboardReader) =>
+    goto(makeLibraryPath(url, board.address()), {replaceState: true, noScroll: true})
+
   onMount(() => {
     const controller = new AbortController()
 
@@ -83,16 +100,43 @@
     <Icon size={4} icon={Magnifier} />
     <input bind:value={term} class="min-w-0 grow" type="text" placeholder="Search library..." />
   </label>
-  <Masonry items={filtered} getKey={board => board.address()} columnWidth={80} gap={4}>
-    {#snippet child(board)}
-      <PinboardItem {url} {board} />
-    {/snippet}
-  </Masonry>
   {#if loading}
     <p class="flex items-center justify-center py-20">
       <Spinner loading>Loading library...</Spinner>
     </p>
-  {:else if filtered.length === 0}
+  {:else}
-    <p class="flex flex-col items-center py-20 text-center">No shelves found.</p>
+    {#if filtered.length > 0}
+      <div class="scroll-container flex shrink-0 gap-3 overflow-x-auto pb-2">
+        {#each filtered as board (board.address())}
+          <PinboardItem
+            {url}
+            {board}
+            selected={board.address() === address}
+            onclick={() => selectBoard(board)} />
+        {/each}
+      </div>
+    {:else}
+      <p class="py-8 text-center opacity-70">No shelves found.</p>
+    {/if}
+    <div class="divider shrink-0"></div>
+    {#if selected && $pins.length > 0}
+      <Masonry items={$pins} getKey={pin => pin.id()} columnWidth={60} gap={3}>
+        {#snippet child(pin)}
+          <PinItem {url} {pin} />
+        {/snippet}
+      </Masonry>
+    {:else if selected}
+      <div class="flex flex-col items-center gap-4 py-20 text-center">
+        <p class="opacity-70">This shelf doesn't have any links yet.</p>
+        {#if $canManage}
+          <Button class="button button-primary" onclick={addLink}>
+            <Icon icon={AddCircle} />
+            Add a link
+          </Button>
+        {/if}
+      </div>
+    {:else}
+      <p class="py-20 text-center opacity-70">Select a shelf to see what's on it.</p>
+    {/if}
   {/if}
 </PageContent>

src/routes/spaces/[relay]/library/[address]/+page.svelte

@@ -1,229 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {page} from "$app/stores"
-  import {sleep} from "@welshman/lib"
-  import type {MakeNonOptional} from "@welshman/lib"
-  import {PIN, getIdFilters} from "@welshman/util"
-  import {Pinboards, Pins} from "@welshman/app"
-  import {errorMessage} from "@lib/util"
-  import {fly} from "@lib/transition"
-  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
-  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import Pen from "@assets/icons/pen.svg?dataurl"
-  import TrashBin from "@assets/icons/trash-bin-2.svg?dataurl"
-  import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
-  import Code2 from "@assets/icons/code-2.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Popover from "@lib/components/Popover.svelte"
-  import Confirm from "@lib/components/Confirm.svelte"
-  import PageContent from "@lib/components/PageContent.svelte"
-  import Masonry from "@lib/components/Masonry.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import SpaceBar from "@app/components/SpaceBar.svelte"
-  import PinItem from "@app/components/PinItem.svelte"
-  import EventInfo from "@app/components/EventInfo.svelte"
-  import PinboardEdit from "@app/components/PinboardEdit.svelte"
-  import PinAdd from "@app/components/PinAdd.svelte"
-  import {app, deletes, network} from "@app/core"
-  import {deriveUserIsSpaceAdmin} from "@app/management"
-  import {decodeRelay} from "@app/relays"
-  import {shareEvent} from "@app/share"
-  import {pushModal} from "@app/modal"
-  import {pushToast} from "@app/toast"
-
-  const {relay, address} = $page.params as MakeNonOptional<typeof $page.params>
-  const url = decodeRelay(relay)
-
-  const board = $app.use(Pinboards).one(address)
-  const pins = $app.use(Pins).forBoard(address).$
-  const canManage = deriveUserIsSpaceAdmin(url)
-
-  let term = $state("")
-  let menuOpen = $state(false)
-
-  const filtered = $derived.by(() => {
-    const value = term.trim().toLowerCase()
-
-    if (!value) return $pins
-
-    return $pins.filter(pin => {
-      const reference = pin.reference()
-      const external = reference?.type === "external" ? reference.id : ""
-
-      return [pin.title(), pin.content(), external, ...pin.topics()].some(field =>
-        field?.toLowerCase().includes(value),
-      )
-    })
-  })
-
-  const back = () => history.back()
-
-  const toggleMenu = () => {
-    menuOpen = !menuOpen
-  }
-
-  const closeMenu = () => {
-    menuOpen = false
-  }
-
-  const showInfo = () => {
-    menuOpen = false
-
-    if ($board) {
-      pushModal(EventInfo, {url, event: $board.event})
-    }
-  }
-
-  const share = () => {
-    menuOpen = false
-
-    if ($board) {
-      shareEvent(url, "Shelf", $board.event)
-    }
-  }
-
-  const addLink = () => {
-    menuOpen = false
-    pushModal(PinAdd, {url, address})
-  }
-
-  const edit = () => {
-    menuOpen = false
-    pushModal(PinboardEdit, {url, board: $board})
-  }
-
-  const deleteBoard = async () => {
-    try {
-      const command = await $deletes.deleteEvent($board!.event)
-      const thunk = await command.publishAsRelay(url)
-      const error = await thunk.waitForError()
-
-      if (error) {
-        return pushToast({theme: "error", message: error})
-      }
-
-      pushToast({message: "Shelf deleted!"})
-      back()
-    } catch (e) {
-      console.error(e)
-      pushToast({theme: "error", message: errorMessage(e)})
-    }
-  }
-
-  const confirmDelete = () => {
-    menuOpen = false
-    pushModal(Confirm, {
-      title: "Delete Shelf",
-      message: `Delete "${$board?.title() || "this shelf"}"?`,
-      confirm: deleteBoard,
-    })
-  }
-
-  onMount(() => {
-    const controller = new AbortController()
-
-    $network.request({
-      relays: [url],
-      filters: [...getIdFilters([address]), {kinds: [PIN], "#A": [address]}],
-      signal: controller.signal,
-    })
-
-    return () => controller.abort()
-  })
-</script>
-
-<SpaceBar {back}>
-  {#snippet title()}
-    <h1 class="truncate text-xl">{$board?.title() || "Shelf"}</h1>
-  {/snippet}
-  {#snippet action()}
-    <div class="relative">
-      <Button
-        class="button button-neutral button-sm button-square"
-        aria-label="More options"
-        onclick={toggleMenu}>
-        <Icon size={4} icon={MenuDots} />
-      </Button>
-      {#if menuOpen}
-        <Popover hideOnClick onClose={closeMenu}>
-          <ul
-            transition:fly
-            class="menu bg-surface absolute right-0 z-popover mt-2 w-48 gap-1 rounded-2xl p-2">
-            <li>
-              <Button onclick={showInfo}>
-                <Icon icon={Code2} />
-                Event details
-              </Button>
-            </li>
-            <li>
-              <Button onclick={share}>
-                <Icon icon={ShareCircle} />
-                Share to chat
-              </Button>
-            </li>
-            {#if $canManage}
-              <li>
-                <Button onclick={addLink}>
-                  <Icon icon={AddCircle} />
-                  Add link
-                </Button>
-              </li>
-              <li>
-                <Button onclick={edit}>
-                  <Icon icon={Pen} />
-                  Edit shelf
-                </Button>
-              </li>
-              <li>
-                <Button class="text-error" onclick={confirmDelete}>
-                  <Icon icon={TrashBin} />
-                  Delete shelf
-                </Button>
-              </li>
-            {/if}
-          </ul>
-        </Popover>
-      {/if}
-    </div>
-  {/snippet}
-</SpaceBar>
-
-<PageContent class="flex flex-col gap-2 p-2 sm:gap-4 sm:p-4">
-  {#if $board}
-    {#if $pins.length === 0}
-      <div class="flex flex-col items-center gap-4 py-20 text-center">
-        <p class="opacity-70">This shelf doesn't have any links yet.</p>
-        {#if $canManage}
-          <Button class="button button-primary" onclick={addLink}>
-            <Icon icon={AddCircle} />
-            Add a link
-          </Button>
-        {/if}
-      </div>
-    {:else}
-      <label class="input input-sm input-group flex w-full items-center gap-2">
-        <Icon size={4} icon={Magnifier} />
-        <input bind:value={term} class="min-w-0 grow" type="text" placeholder="Search links..." />
-      </label>
-      {#if filtered.length === 0}
-        <p class="py-20 text-center opacity-70">No links found.</p>
-      {:else}
-        <Masonry items={filtered} getKey={pin => pin.id()} columnWidth={60} gap={3}>
-          {#snippet child(pin)}
-            <PinItem {url} {pin} />
-          {/snippet}
-        </Masonry>
-      {/if}
-    {/if}
-  {:else}
-    <div class="flex justify-center py-20">
-      {#await sleep(5000)}
-        <Spinner loading>Loading shelf...</Spinner>
-      {:then}
-        <p>Failed to load shelf.</p>
-      {/await}
-    </div>
-  {/if}
-</PageContent>