@kernhq/module-quire 0.10.8 → 0.11.0

package/src/client/mock.ts

@@ -5,18 +5,24 @@ import type {
   Database,
   DatabaseRef,
   Row as DatabaseRow,
+  FavoriteEntry,
+  Label,
+  LabelColour,
   Page,
   PageNode,
   PageVersion,
   Property,
   PropertyConfig,
   PropertyType,
+  RecentEntry,
   RowRef,
   Space,
   View,
   ViewConfig,
   ViewKind,
+  WatchState,
 } from '../contract/index.js'
+import { rankBetween, rankSequence } from './rank.js'
 
 /**
  * The in-memory quire API.
@@ -150,6 +156,16 @@ export function createMockQuireApi() {
     page(103, uid(1), 'Your first week', 'ba', 102),
     page(104, uid(1), 'Time off', 'bb', 102),
     page(105, uid(1), 'Expenses', 'c', null, { kind: 'live' }),
+    /*
+     * A subtree in the trash, because that is the case the trash screen exists for.
+     *
+     * Deleting a page takes everything under it, and the flat listing the server answers with has
+     * one row per page — so a demo whose trash holds a single orphan never exercises the grouping,
+     * which is the whole difference between "one page was deleted" and "three were". These two are
+     * a parent and its child, deleted together.
+     */
+    page(106, uid(1), 'Old expenses policy', 'ca', null, { deletedAt: iso(1728e5) }),
+    page(107, uid(1), 'Receipts', 'caa', 106, { deletedAt: iso(1728e5) }),
     page(110, uid(1), 'Onboarding tasks', 'd', null, { kind: 'database' }),
     page(201, uid(2), 'Architecture', 'a'),
     page(202, uid(2), 'Runbooks', 'b'),
@@ -391,6 +407,70 @@ export function createMockQuireApi() {
     comment(161, uid(101), uid(160), uid(160), ME, 'Good point — I will link to it from here.', 36e5),
   ]
 
+  /**
+   * How a space is organised, and what one person has made of it.
+   *
+   * Seeded rather than left empty for the same reason the versions and comments above are: a screen
+   * with no data in the demo is a screen the end-to-end sweep cannot see, so an empty favourites
+   * group and an empty label picker would ship without anything ever rendering the populated case.
+   *
+   * Two spaces on purpose. Labels belong to a space — two teams both wanting "Draft" should not
+   * have to agree on what it means — and a seed with one space's vocabulary would let a bug that
+   * leaks labels across the boundary pass unnoticed.
+   */
+  const label = (n: number, spaceId: string, name: string, colour: LabelColour, msAgo: number): Label => ({
+    id: uid(n),
+    workspaceId: '' as Label['workspaceId'],
+    spaceId,
+    name,
+    colour,
+    createdAt: iso(msAgo),
+  })
+
+  const labels: Label[] = [
+    label(300, uid(1), 'Draft', 'warning', 8e7),
+    label(301, uid(1), 'Needs review', 'info', 79e6),
+    label(302, uid(1), 'Reference', 'purple', 78e6),
+    label(303, uid(2), 'ADR', 'slate', 77e6),
+  ]
+
+  /** page id → label ids. A page wears a set, and `pages.setLabels` replaces the whole of it. */
+  const pageLabels = new Map<string, string[]>([
+    [uid(101), [uid(302)]],
+    [uid(102), [uid(300), uid(301)]],
+    [uid(103), [uid(300)]],
+    [uid(201), [uid(303)]],
+  ])
+
+  /**
+   * One person's shortcuts, in the order they arranged them.
+   *
+   * Ranks come from the real `rankBetween` rather than from the plain sortable strings the rest of
+   * this file uses. Reordering favourites is a drag, so the mock is the only thing the interaction
+   * is ever tested against — and a second implementation of fractional indexing is a second place
+   * for it to be wrong. Three of them, across two spaces, because a favourite is a workspace list
+   * and a demo confined to one space would never show that.
+   */
+  const favouriteSeed = rankSequence(3)
+  const favorites: { pageId: string; position: string; createdAt: string }[] = [
+    { pageId: uid(101), position: favouriteSeed[0] as string, createdAt: iso(72e5) },
+    { pageId: uid(105), position: favouriteSeed[1] as string, createdAt: iso(54e5) },
+    { pageId: uid(202), position: favouriteSeed[2] as string, createdAt: iso(36e5) },
+  ]
+
+  /** page id → the people watching it. Deliberately not the same list as the favourites above. */
+  const watchers = new Map<string, string[]>([
+    [uid(101), [ME, COLLEAGUE]],
+    [uid(102), [COLLEAGUE]],
+  ])
+
+  /** One row per page, bumped in place — never a visit log. */
+  const recents: { pageId: string; viewedAt: string }[] = [
+    { pageId: uid(102), viewedAt: iso(6e5) },
+    { pageId: uid(110), viewedAt: iso(18e5) },
+    { pageId: uid(201), viewedAt: iso(9e6) },
+  ]
+
   let seq = 900
   const nextId = () => uid(++seq)
   const strip = ({ _order, ...p }: Row): Page => p
@@ -472,6 +552,73 @@ export function createMockQuireApi() {
     throw notFound('View')
   }
 
+  const theLabel = (id: string): Label => {
+    const found = labels.find((l) => l.id === id)
+    if (!found) throw notFound('Label')
+    return found
+  }
+
+  /**
+   * The page fields a shortcut row draws — or nothing, when the page has been trashed or purged.
+   *
+   * The server composes these with a join to `pages`, which is why a favourite whose page is gone
+   * simply stops being drawn: the row survives (nothing cascades from a purge), and every read
+   * joins. Reproducing that here is the difference between a demo where trashing a favourited page
+   * quietly removes it from the sidebar and one where the sidebar keeps a shortcut to nothing.
+   */
+  const pageBitsOf = (pageId: string) => {
+    const row = pages.find((p) => p.id === pageId && !p.deletedAt)
+    return row ? { spaceId: row.spaceId, title: row.title, icon: row.icon, kind: row.kind } : null
+  }
+
+  const byPosition = (a: { position: string }, b: { position: string }) =>
+    a.position < b.position ? -1 : a.position > b.position ? 1 : 0
+
+  const favoriteList = (): FavoriteEntry[] =>
+    [...favorites].sort(byPosition).flatMap((f) => {
+      const bits = pageBitsOf(f.pageId)
+      if (!bits) return []
+      return [
+        {
+          workspaceId: '' as FavoriteEntry['workspaceId'],
+          userId: ME as FavoriteEntry['userId'],
+          pageId: f.pageId,
+          position: f.position,
+          createdAt: f.createdAt,
+          ...bits,
+        },
+      ]
+    })
+
+  const recentList = (limit: number): RecentEntry[] =>
+    [...recents]
+      .sort((a, b) => (a.viewedAt < b.viewedAt ? 1 : -1))
+      .flatMap((r) => {
+        const bits = pageBitsOf(r.pageId)
+        if (!bits) return []
+        return [
+          {
+            workspaceId: '' as RecentEntry['workspaceId'],
+            userId: ME as RecentEntry['userId'],
+            pageId: r.pageId,
+            viewedAt: r.viewedAt,
+            ...bits,
+          },
+        ]
+      })
+      .slice(0, limit)
+
+  const watchStateOf = (pageId: string): WatchState => {
+    const list = watchers.get(pageId) ?? []
+    return { watching: list.includes(ME), watchers: list as WatchState['watchers'] }
+  }
+
+  const labelsOn = (pageId: string): Label[] =>
+    (pageLabels.get(pageId) ?? []).flatMap((id) => {
+      const found = labels.find((l) => l.id === id)
+      return found ? [found] : []
+    })
+
   /**
    * A copy on the way out, because a real API answers with fresh JSON every time.
    *
@@ -750,8 +897,167 @@ export function createMockQuireApi() {
       purge: async ({ pageId }: { pageId: string }) => {
         const ids = new Set(subtree(pageId).map((r) => r.id))
         for (let i = pages.length - 1; i >= 0; i--) if (ids.has(pages[i]!.id)) pages.splice(i, 1)
+        /*
+         * The favourites, watches and labels of a purged page are deliberately left behind, because
+         * that is what the server does: there is no foreign key, so the rows survive and every read
+         * joins to `pages` — which is why they are invisible rather than broken. Cleaning them up
+         * here would hide the one thing worth noticing about that decision.
+         */
         return { ok: true as const, count: ids.size }
       },
+
+      setLabels: async ({ pageId, labelIds }: { pageId: string; labelIds: string[] }) => {
+        const row = found(pageId)
+        for (const id of labelIds) {
+          const label = theLabel(id)
+          // A label belongs to a space; putting another space's on a page would leak its vocabulary.
+          if (label.spaceId !== row.spaceId)
+            throw Object.assign(new Error('Every label has to be one this space declares'), {
+              code: 'BAD_REQUEST',
+            })
+        }
+        pageLabels.set(pageId, [...labelIds])
+        return labelsOn(pageId).map((l) => ({ ...l }))
+      },
+    },
+
+    /**
+     * The space's vocabulary. Names clash case-insensitively, as they do in the database — "Draft"
+     * beside "draft" in one picker is broken data rather than two labels — and the capitalisation
+     * somebody typed is what is kept.
+     */
+    labels: {
+      list: async ({ spaceId }: { spaceId: string }) =>
+        labels.filter((l) => l.spaceId === spaceId).map((l) => ({ ...l })),
+
+      forPage: async ({ pageId }: { pageId: string }) => labelsOn(pageId).map((l) => ({ ...l })),
+
+      create: async (input: { spaceId: string; name: string; colour?: LabelColour }) => {
+        const name = input.name.trim()
+        if (!name) throw Object.assign(new Error('A label needs a name'), { code: 'BAD_REQUEST' })
+        if (labels.some((l) => l.spaceId === input.spaceId && l.name.toLowerCase() === name.toLowerCase()))
+          throw Object.assign(new Error(`This space already has a label called "${name}"`), {
+            code: 'CONFLICT',
+          })
+        const made: Label = {
+          id: nextId(),
+          workspaceId: '' as Label['workspaceId'],
+          spaceId: input.spaceId,
+          name,
+          colour: input.colour ?? 'grey',
+          createdAt: new Date().toISOString(),
+        }
+        labels.push(made)
+        return { ...made }
+      },
+
+      update: async (input: { labelId: string; name?: string; colour?: LabelColour }) => {
+        const label = theLabel(input.labelId)
+        if (input.name !== undefined) {
+          const name = input.name.trim()
+          if (!name) throw Object.assign(new Error('A label needs a name'), { code: 'BAD_REQUEST' })
+          if (
+            labels.some(
+              (l) =>
+                l.id !== label.id &&
+                l.spaceId === label.spaceId &&
+                l.name.toLowerCase() === name.toLowerCase(),
+            )
+          )
+            throw Object.assign(new Error(`This space already has a label called "${name}"`), {
+              code: 'CONFLICT',
+            })
+          label.name = name
+        }
+        if (input.colour !== undefined) label.colour = input.colour
+        return { ...label }
+      },
+
+      remove: async ({ labelId }: { labelId: string }) => {
+        const label = theLabel(labelId)
+        labels.splice(labels.indexOf(label), 1)
+        // Off every page that wore it — a label nothing can name is not one anybody can remove.
+        for (const [pageId, ids] of pageLabels)
+          if (ids.includes(labelId))
+            pageLabels.set(
+              pageId,
+              ids.filter((id) => id !== labelId),
+            )
+        return { ok: true as const }
+      },
+    },
+
+    /**
+     * One person's own shortcuts. Every mutation answers with the whole ordered list, because a
+     * fractional-index reorder is only meaningful as an ordering — and because it saves the sidebar
+     * a refetch to redraw itself.
+     */
+    favorites: {
+      list: async () => favoriteList(),
+
+      add: async ({ pageId }: { pageId: string }) => {
+        found(pageId)
+        // Starring the same page twice is the same star, not an error.
+        if (!favorites.some((f) => f.pageId === pageId)) {
+          const last = [...favorites].sort(byPosition).at(-1)?.position ?? null
+          favorites.push({
+            pageId,
+            position: rankBetween(last, null),
+            createdAt: new Date().toISOString(),
+          })
+        }
+        return favoriteList()
+      },
+
+      remove: async ({ pageId }: { pageId: string }) => {
+        const at = favorites.findIndex((f) => f.pageId === pageId)
+        if (at >= 0) favorites.splice(at, 1)
+        return favoriteList()
+      },
+
+      reorder: async ({ pageId, afterId = null }: { pageId: string; afterId?: string | null }) => {
+        const moving = favorites.find((f) => f.pageId === pageId)
+        if (!moving) throw notFound('Favourite')
+        const rest = [...favorites].filter((f) => f.pageId !== pageId).sort(byPosition)
+        const at = afterId ? rest.findIndex((f) => f.pageId === afterId) : -1
+        if (afterId && at < 0)
+          throw Object.assign(new Error('afterId is not one of your favourites'), {
+            code: 'BAD_REQUEST',
+          })
+        moving.position = rankBetween(
+          at >= 0 ? (rest[at]?.position ?? null) : null,
+          rest[at + 1]?.position ?? null,
+        )
+        return favoriteList()
+      },
+    },
+
+    watchers: {
+      get: async ({ pageId }: { pageId: string }) => {
+        found(pageId)
+        return watchStateOf(pageId)
+      },
+
+      set: async ({ pageId, watching = true }: { pageId: string; watching?: boolean }) => {
+        found(pageId)
+        const list = watchers.get(pageId) ?? []
+        const next = watching ? (list.includes(ME) ? list : [...list, ME]) : list.filter((id) => id !== ME)
+        watchers.set(pageId, next)
+        return watchStateOf(pageId)
+      },
+    },
+
+    recents: {
+      list: async ({ limit = 10 }: { limit?: number } = {}) => recentList(limit),
+
+      record: async ({ pageId }: { pageId: string }) => {
+        found(pageId)
+        const existing = recents.find((r) => r.pageId === pageId)
+        // Bumped in place, never appended: this is one row per page, not a visit log.
+        if (existing) existing.viewedAt = new Date().toISOString()
+        else recents.push({ pageId, viewedAt: new Date().toISOString() })
+        return { ok: true as const }
+      },
     },
 
     versions: {

package/src/client/module.ts

@@ -49,6 +49,24 @@ export const quireClientModule = defineClientModule({
       component: () => import('./pages/SpacePage.svelte'),
       permission: QUIRE_PERMISSIONS.spaceView,
     },
+    /**
+     * Declared before `/quire/:space/:page` for a reader's benefit only — the shell resolves by
+     * specificity, not by order, so the two literal segments here beat the one in the page route
+     * whatever sequence they are written in. A page whose id happened to be "trash" could not
+     * shadow this, and a space could not shadow the spaces index either.
+     *
+     * `page.edit`, matching what `pages.trash` asks on the server: the trash is where an edit is
+     * undone, so anybody who may edit a page in this space may see what has been taken out of it.
+     * Purging is `page.delete` and is gated on the row.
+     */
+    {
+      path: '/quire/:space/trash',
+      component: () => import('./pages/TrashPage.svelte'),
+      get title() {
+        return t('trash')
+      },
+      permission: QUIRE_PERMISSIONS.pageEdit,
+    },
     {
       path: '/quire/:space/:page',
       component: () => import('./pages/PageView.svelte'),

package/src/client/pages/PageView.svelte

@@ -14,11 +14,15 @@ import {
   relativeTime,
   Skeleton,
   session,
+  toast,
 } from '@kernhq/ui'
 import { createQuery, useQueryClient } from '@tanstack/svelte-query'
 import { getQuireApi } from '../api-instance.js'
 import CommentsPanel from '../components/CommentsPanel.svelte'
+import ConfirmDialog from '../components/ConfirmDialog.svelte'
+import FavoriteStar from '../components/FavoriteStar.svelte'
 import PageEditor from '../components/PageEditor.svelte'
+import PageLabels from '../components/PageLabels.svelte'
 import VersionHistory from '../components/VersionHistory.svelte'
 import { type CoreApi, toPerson } from '../core-api.js'
 import DatabaseView from '../database/DatabaseView.svelte'
@@ -191,12 +195,175 @@ async function revert() {
   }
 }
 
+// -----------------------------------------------------------------------------------------------
+// Watching, recording, and the way this page is deleted
+// -----------------------------------------------------------------------------------------------
+
+/**
+ * Whether you are watching, and how many others are.
+ *
+ * One request, because the control has to draw both — its own pressed state and the number beside
+ * it — and asking twice within a keystroke of each other is two requests for one button. The reply
+ * to `set` is the same shape, so it goes straight into the cache and nothing refetches.
+ */
+const watchQuery = createQuery(() => ({
+  queryKey: quireKeys.watchers(workspaceId, pageId),
+  enabled: Boolean(workspaceId && pageId),
+  queryFn: () => api.watchers.get({ workspaceId, pageId }),
+}))
+const watching = $derived(watchQuery.data?.watching ?? false)
+const watcherCount = $derived(watchQuery.data?.watchers.length ?? 0)
+let watchBusy = $state(false)
+
+async function toggleWatch() {
+  if (watchBusy) return
+  watchBusy = true
+  try {
+    const next = await api.watchers.set({ workspaceId, pageId, watching: !watching })
+    client.setQueryData(quireKeys.watchers(workspaceId, pageId), next)
+    toast.success(next.watching ? t('watch_on') : t('watch_off'))
+  } finally {
+    watchBusy = false
+  }
+}
+
+/**
+ * Opening a page is what puts it in "Recent".
+ *
+ * A bump, not a log: one row per person per page, so the table is bounded by pages times people
+ * rather than growing for ever to answer a question that only ever wants the most recent handful.
+ * Failure is swallowed on purpose — a page you cannot record having read is still a page you are
+ * reading, and an error toast about a sidebar list would be noise over the thing you came for.
+ */
+$effect(() => {
+  const ws = workspaceId
+  const id = pageId
+  if (!ws || !id) return
+  void api.recents
+    .record({ workspaceId: ws, pageId: id })
+    .then(() => client.invalidateQueries({ queryKey: quireKeys.recents(ws) }))
+    .catch(() => {})
+})
+
+/**
+ * How many pages "Move to trash" is about to take.
+ *
+ * It takes the whole subtree, and it used to fire with no confirmation and no way back: deleting
+ * "Working here" silently took "Your first week" and "Time off" with it. So the count is worked out
+ * *before* the dialog says anything, from the space's tree — loaded only when the dialog opens,
+ * because a page nobody is deleting should not pay for a second copy of the tree.
+ *
+ * `includeArchived: true`, under a key of its own: the sidebar holds the same call with archived
+ * pages left out, and reusing that key would either hand this the wrong list or replace the
+ * sidebar's. Archived descendants go to the trash like any other, so a count that skipped them
+ * would be the same lie in a smaller size.
+ *
+ * A database page's rows are not counted. They are pages, and `trashPage` takes them — but they are
+ * rows to the person reading, and "and 340 pages inside it" for a table of 340 rows would read as a
+ * different disaster from the one about to happen. The toast afterwards reports the number the
+ * server actually took.
+ */
+let trashConfirm = $state(false)
+
+const subtreeQuery = createQuery(() => ({
+  queryKey: [...quireKeys.tree(workspaceId, doc?.spaceId ?? ''), 'with-archived'],
+  enabled: trashConfirm && Boolean(workspaceId && doc?.spaceId),
+  queryFn: () => api.pages.tree({ workspaceId, spaceId: doc?.spaceId ?? '', includeArchived: true }),
+}))
+
+/**
+ * `isFetching`, not just `data`, because a cached tree is not a current one.
+ *
+ * TanStack hands a query its cached value the instant it is enabled and refetches behind it, so
+ * `data === undefined` only catches the *first* open. Every later one renders whatever the last
+ * fetch left, and the last fetch is routinely wrong: `refreshAfterMoving` runs while the dialog is
+ * still open, so it reloads the tree with the subtree already in the trash and caches a tree
+ * without it. Trash a page, press **Undo**, reach for **Move to trash** again, and the dialog said
+ * "It goes to the trash, and you can put it back from there" — the singular sentence, for a page
+ * that takes two others with it. Measured; the whole point of this dialog is that number, so a
+ * stale one is worse than none.
+ */
+const trashCount = $derived.by((): number | null => {
+  const nodes = subtreeQuery.data
+  if (!nodes || subtreeQuery.isFetching) return null
+  const children = new Map<string, string[]>()
+  for (const node of nodes)
+    if (node.parentId) children.set(node.parentId, [...(children.get(node.parentId) ?? []), node.id])
+  let total = 1
+  let guard = 0
+  const stack = [pageId]
+  while (stack.length > 0 && guard++ < 5000) {
+    const id = stack.pop() as string
+    for (const child of children.get(id) ?? []) {
+      total++
+      stack.push(child)
+    }
+  }
+  return total
+})
+
+/**
+ * Move it, then offer to take it back.
+ *
+ * The undo is the point. A confirmation stops the deletion you did not mean to start; it does
+ * nothing for the one you meant and regretted, and `pages.restore` puts the whole subtree back —
+ * so the toast carries the action rather than leaving the trash screen as the only way home. It
+ * outlives this component: the shell owns the toaster, so navigating away does not cancel it.
+ */
+/**
+ * Everything a page leaving or rejoining the space changes.
+ *
+ * The favourites and recents lists are the ones easy to forget, and forgetting them is visible:
+ * both are composed by joining to `pages`, so a trashed page silently drops out of them — and a
+ * sidebar still offering a shortcut to a page that is in the trash is exactly the kind of thing
+ * that makes somebody distrust the sidebar. Nothing else will do it either, because a `page`
+ * change invalidates the `page` prefix and these two live under their own.
+ */
+async function refreshAfterMoving(spaceId: string) {
+  await client.invalidateQueries({ queryKey: quireKeys.tree(workspaceId, spaceId) })
+  await client.invalidateQueries({ queryKey: quireKeys.trash(workspaceId, spaceId) })
+  await client.invalidateQueries({ queryKey: quireKeys.favorites(workspaceId) })
+  await client.invalidateQueries({ queryKey: quireKeys.recents(workspaceId) })
+}
+
 async function trash() {
-  if (!doc) return
-  await api.pages.trashPage({ workspaceId, pageId })
-  await client.invalidateQueries({ queryKey: quireKeys.tree(workspaceId, doc.spaceId) })
+  const page = doc
+  if (!page) return
+  const spaceId = page.spaceId
+  const title = page.title.trim() || t('untitled')
+  const answer = await api.pages.trashPage({ workspaceId, pageId })
+  await refreshAfterMoving(spaceId)
+  toast(t('trash_moved', { count: answer.count }), {
+    // Long enough to read the sentence, notice the number and decide — the default 2.2s is a
+    // confirmation, and this is an offer.
+    duration: 9000,
+    action: {
+      label: t('undo'),
+      onClick: () => void undoTrash(workspaceId, pageId, spaceId, title),
+    },
+  })
   void navigation.go(`/${workspaceSlug}/quire/${encodeURIComponent(spaceKey)}`)
 }
+
+/**
+ * `workspace` is passed in rather than read from the closure.
+ *
+ * This runs from a toast that outlives the component — the screen has already navigated away by
+ * the time anybody presses **Undo** — so every value it needs is a plain argument. Reaching for
+ * `workspaceId` here would be reading a `$derived` belonging to a component that no longer exists.
+ */
+async function undoTrash(workspace: string, id: string, spaceId: string, title: string) {
+  try {
+    await api.pages.restore({ workspaceId: workspace, pageId: id })
+    await client.invalidateQueries({ queryKey: quireKeys.tree(workspace, spaceId) })
+    await client.invalidateQueries({ queryKey: quireKeys.trash(workspace, spaceId) })
+    await client.invalidateQueries({ queryKey: quireKeys.favorites(workspace) })
+    await client.invalidateQueries({ queryKey: quireKeys.recents(workspace) })
+    toast.success(t('trash_restore_done', { title }))
+  } catch {
+    toast.error(t('trash_undo_failed'))
+  }
+}
 </script>
 
 <div class="with-margin" class:open={showComments}>
@@ -249,6 +416,13 @@ async function trash() {
         {/if}
       </h1>
 
+      <!--
+        The star sits beside the title rather than in the menu: "keep this to hand" is a thing
+        people do while reading, and a two-state control buried behind an ellipsis cannot show its
+        state at all.
+      -->
+      <FavoriteStar {workspaceId} pageId={doc.id} />
+
       <DropdownMenu
         items={[
           {
@@ -277,6 +451,13 @@ async function trash() {
                 },
               ]
             : []),
+          {
+            id: 'watch',
+            label: watching ? t('watch_stop') : t('watch'),
+            icon: watching ? 'bell-off' : 'bell',
+            hint: watcherCount > 0 ? t('watchers', { count: watcherCount }) : undefined,
+            onSelect: () => void toggleWatch(),
+          },
           {
             id: 'archive',
             label: doc.archivedAt ? t('unarchive') : t('archive'),
@@ -284,13 +465,25 @@ async function trash() {
             disabled: !editable,
             onSelect: () => void archive(!doc.archivedAt),
           },
+          { type: 'separator' },
           {
             id: 'trash',
             label: t('move_to_trash'),
             icon: 'trash-2',
             danger: true,
             disabled: !editable,
-            onSelect: () => void trash(),
+            // Asks first, and says how many pages it is about to take with it.
+            onSelect: () => (trashConfirm = true),
+          },
+          {
+            id: 'open-trash',
+            label: t('trash_open'),
+            icon: 'rotate-ccw',
+            disabled: !editable,
+            onSelect: () =>
+              void navigation.go(
+                `/${workspaceSlug}/quire/${encodeURIComponent(spaceKey)}/trash`,
+              ),
           },
         ]}
       >
@@ -327,8 +520,23 @@ async function trash() {
       {#if peers.length > 0}
         <span class="chip">{t('people_here', { count: peers.length })}</span>
       {/if}
+      {#if watching}
+        <span class="chip"><Icon name="bell" size={12} /> {t('watchers', { count: watcherCount })}</span>
+      {/if}
     </div>
 
+    <!--
+      Under the byline, above the prose: a label is about the page as a whole, so it belongs with
+      the things that say what this page *is* rather than inside what it says.
+    -->
+    <PageLabels
+      {workspaceId}
+      spaceId={doc.spaceId}
+      pageId={doc.id}
+      canEdit={editable}
+      canManage={canQuire('spaceManage')}
+    />
+
     {#if doc.kind === 'page' && doc.hasUnpublishedChanges}
       <div class="banner" role="status">
         <Icon name="circle-alert" size={15} />
@@ -381,6 +589,21 @@ async function trash() {
     {pageId}
     publishedVersionId={doc.publishedVersionId}
   />
+
+  <!--
+    The body says nothing about numbers until it knows them. Naming a count before the tree has
+    loaded would be the same silent lie in a smaller size — "it goes to the trash" for a page that
+    is about to take two others with it.
+  -->
+  <ConfirmDialog
+    bind:open={trashConfirm}
+    title={t('trash_confirm_title', { title: doc.title.trim() || t('untitled') })}
+    body={trashCount === null ? t('loading') : t('trash_confirm_body', { count: trashCount })}
+    confirmLabel={t('move_to_trash')}
+    danger
+    pending={trashCount === null}
+    onConfirm={trash}
+  />
 {/if}
 
 <style>
@@ -412,8 +635,15 @@ async function trash() {
   background: none;
   padding: 0;
 }
-.title-field:focus {
+/*
+ * The title is the page's heading, not a form field, so it carries no ring — the caret says where
+ * you are. `outline: none` is not enough on its own: the global `:focus-visible` rule draws a
+ * `box-shadow`, which drew a box around the title on every click.
+ */
+.title-field:focus,
+.title-field:focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .byline {
   display: flex;