feat(admin): focus scope + keyboard navigation for content lists

- FocusScope primitive (refcounted) tracks the active interaction area via
  global pointerdown/focusin; sidebar + each list view declare their scope.
- useListSelection / useListShortcuts: single-source row selection (single /
  toggle / range) and Backspace/Enter/$mod+Enter actions gated on scope.
- useScopeArrowNav: J/K + Arrow + Home/End move focus through visible items
  in the active scope, with checkVisibility-aware filtering for sidebar
  collapse. onItemFocus callback mirrors cursor into selection state.
- Posts/notes row actions extracted into a ListAction registry so the
  right-click menu and shortcut bindings share a single source.
- Row visuals: Vercel-style neutral selection palette, no transition-colors,
  data-id + tabIndex on the article so the cursor focus and cmd/shift
  modifier clicks behave consistently.

Author: Innei

apps/admin/package.json

@@ -99,6 +99,7 @@
     "shiki": "3.21.0",
     "socket.io-client": "4.8.3",
     "sonner": "2.0.7",
+    "tinykeys": "4.0.0",
     "validator": "13.15.26",
     "xss": "1.0.15",
     "zod": "4.3.6"

apps/admin/src/features/_shared/components/content-list-item.tsx

@@ -13,15 +13,22 @@ import { ContextMenuTrigger, showContextMenu } from '~/ui/overlay/context-menu'
 import { Checkbox } from '~/ui/primitives/checkbox'
 import { cn } from '~/utils/cn'
 
+export type ContentEntrySelectMode = 'single' | 'toggle' | 'range'
+
 export interface ContentEntryListItemProps {
   checkboxLabel?: string
   className?: string
+  /** Stable id of the underlying entity. Exposed on the row as `data-id`. */
+  dataId?: string
   editTitle: string
   editTo: string
   externalHref: string
   leading?: ReactNode
   menuItems: ContextMenuItem[] | (() => ContextMenuItem[])
   meta?: ReactNode
+  /** Called when the row body is clicked (away from links / buttons / checkbox). */
+  onSelect?: (mode: ContentEntrySelectMode) => void
+  /** Called when the checkbox itself is toggled. */
   onSelectedChange?: (checked: boolean) => void
   openTitle: string
   selected?: boolean
@@ -30,15 +37,21 @@ export interface ContentEntryListItemProps {
   titleTo: string
 }
 
+const INTERACTIVE_SELECTOR =
+  'a[href], button, input, [role="menuitem"], [role="checkbox"]'
+
 /**
  * Two-line list item shared by `/posts` and `/notes`.
  *
  *   ☐  [leading]  Title text                 [status]   ✎  ↗  ⋯
  *       category · tags · 👁 N · ♡ N                       relative time
  *
- * The whole row is wrapped in `<ContextMenuTrigger>` (lobe-ui style): right-clicking
- * anywhere on the row opens the menu; while the menu is open, the row receives
- * `data-popup-open=""` so it can highlight via the `data-[popup-open]:` variant.
+ * The whole row is wrapped in `<ContextMenuTrigger>`; right-clicking
+ * anywhere on the row opens the menu and the row receives
+ * `data-popup-open=""` so it can highlight via the `data-[popup-open]:`
+ * variant. Left-clicking the row body (outside links, buttons, checkbox)
+ * fires `onSelect` with a modifier-aware mode so consumers can do
+ * single / toggle (`$mod`+click) / range (`Shift`+click) selection.
  */
 export function ContentEntryListItem(props: ContentEntryListItemProps) {
   const selectable = Boolean(props.checkboxLabel && props.onSelectedChange)
@@ -53,17 +66,47 @@ export function ContentEntryListItem(props: ContentEntryListItemProps) {
     showContextMenu(resolved)
   }
 
+  const onRowClick = (event: ReactMouseEvent<HTMLElement>) => {
+    if (event.defaultPrevented) return
+    if (!props.onSelect) return
+    const target = event.target as Element | null
+    // Skip clicks on links, buttons, inputs, the checkbox — those interactive
+    // descendants do their own thing.
+    if (target?.closest(INTERACTIVE_SELECTOR)) return
+    const mode: ContentEntrySelectMode = event.shiftKey
+      ? 'range'
+      : event.metaKey || event.ctrlKey
+        ? 'toggle'
+        : 'single'
+    props.onSelect(mode)
+  }
+
   return (
     <ContextMenuTrigger items={props.menuItems}>
       <article
         className={cn(
-          'group grid gap-x-3 gap-y-1.5 px-4 py-3 transition-colors',
+          'group grid cursor-default gap-x-3 gap-y-1.5 px-4 py-3',
           selectable
             ? 'grid-cols-[auto_minmax(0,1fr)_auto]'
             : 'grid-cols-[minmax(0,1fr)_auto]',
-          'hover:bg-neutral-50 data-[popup-open]:bg-neutral-100 dark:hover:bg-neutral-900/50 dark:data-[popup-open]:bg-neutral-800/60',
+          // Vercel/Geist convention: selection lives on the neutral scale,
+          // brand color stays out of row backgrounds. Hover < popup-open ≈
+          // selected < selected+hover < selected+popup-open.
+          'hover:bg-neutral-50 dark:hover:bg-neutral-900/50',
+          'data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800/60',
+          'data-selected:bg-neutral-100 dark:data-selected:bg-neutral-800/60',
+          'data-selected:hover:bg-neutral-200/60 dark:data-selected:hover:bg-neutral-800/80',
+          'data-selected:data-popup-open:bg-neutral-200 dark:data-selected:data-popup-open:bg-neutral-800',
+          // Keyboard cursor (J/K/Arrow). `:focus-visible` only fires on
+          // keyboard focus, so mouse clicks don't draw the ring.
+          'outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-400 dark:focus-visible:outline-neutral-500',
           props.className,
         )}
+        data-id={props.dataId}
+        data-scope-item="row"
+        data-selected={props.selected ? '' : undefined}
+        onClick={onRowClick}
+        tabIndex={-1}
       >
         {selectable ? (
           <Checkbox
@@ -78,7 +121,7 @@ export function ContentEntryListItem(props: ContentEntryListItemProps) {
           <div className="flex min-w-0 items-center gap-2">
             {props.leading}
             <Link
-              className="outline-hidden min-w-0 truncate text-sm font-medium text-neutral-950 transition-colors hover:text-neutral-600 focus-visible:ring-2 focus-visible:ring-[var(--color-primary-shallow)] dark:text-neutral-50 dark:hover:text-neutral-300"
+              className="outline-hidden min-w-0 truncate text-sm font-medium text-neutral-950 hover:text-neutral-600 focus-visible:ring-2 focus-visible:ring-[var(--color-primary-shallow)] dark:text-neutral-50 dark:hover:text-neutral-300"
               to={props.titleTo}
             >
               {props.title}
@@ -94,9 +137,9 @@ export function ContentEntryListItem(props: ContentEntryListItemProps) {
 
         <div
           className={cn(
-            'row-start-1 flex shrink-0 items-center gap-0.5 self-start text-neutral-300 transition-colors',
-            'group-hover:text-neutral-600 group-data-[popup-open]:text-neutral-600',
-            'dark:text-neutral-700 dark:group-hover:text-neutral-300 dark:group-data-[popup-open]:text-neutral-300',
+            'row-start-1 flex shrink-0 items-center gap-0.5 self-start text-neutral-300',
+            'group-hover:text-neutral-600 group-data-[popup-open]:text-neutral-600 group-data-[selected]:text-neutral-600',
+            'dark:text-neutral-700 dark:group-hover:text-neutral-300 dark:group-data-[popup-open]:text-neutral-300 dark:group-data-[selected]:text-neutral-300',
             selectable ? 'col-start-3' : 'col-start-2',
           )}
         >
@@ -121,7 +164,7 @@ export function ContentEntryListItem(props: ContentEntryListItemProps) {
 }
 
 const actionSlotClassName =
-  'outline-hidden inline-flex h-7 w-7 items-center justify-center rounded transition-colors hover:bg-neutral-100 hover:text-neutral-950 focus-visible:ring-2 focus-visible:ring-[var(--color-primary-shallow)] dark:hover:bg-neutral-800 dark:hover:text-neutral-50'
+  'outline-hidden inline-flex h-7 w-7 items-center justify-center rounded text-current no-underline hover:bg-neutral-100 hover:text-neutral-950 focus-visible:ring-2 focus-visible:ring-[var(--color-primary-shallow)] dark:hover:bg-neutral-800 dark:hover:text-neutral-50'
 
 type ActionLinkProps =
   | ({ href: string; to?: never } & Omit<

apps/admin/src/features/notes/components/NoteRow.tsx

@@ -1,5 +1,6 @@
 import { Bookmark, BookOpen, EyeOff, Heart, MapPin } from 'lucide-react'
 import type { NoteModel } from '~/models/note'
+import type { ListAction } from '~/ui/list-actions'
 import type { NoteMetadataUpdate } from '../types/notes'
 
 import { WEB_URL } from '~/constants/env'
@@ -13,10 +14,11 @@ import { buildNotePublicPath, formatCompactNumber } from '../utils/format'
 import { buildNoteMenuItems } from './buildNoteMenuItems'
 
 export function NoteRow(props: {
+  actions: ReadonlyArray<ListAction<NoteModel>>
   note: NoteModel
-  onDelete: (id: string) => void
   onMetadataChange: (id: string, data: NoteMetadataUpdate) => void
   onPublishChange: (id: string, isPublished: boolean) => void
+  onSelect: (id: string, mode: 'single' | 'toggle' | 'range') => void
   onSelectedChange: (checked: boolean) => void
   selected: boolean
 }) {
@@ -28,13 +30,10 @@ export function NoteRow(props: {
 
   const menuItems = () =>
     buildNoteMenuItems(note, {
+      actions: props.actions,
       externalHref: publicHref,
       onBookmarkToggle: (next) =>
         props.onMetadataChange(note.id, { bookmark: next }),
-      onDelete: () => props.onDelete(note.id),
-      onEdit: () => {
-        window.location.hash = `#${editPath}`
-      },
       onMoodChange: (next) => props.onMetadataChange(note.id, { mood: next }),
       onPublishToggle: (next) => props.onPublishChange(note.id, next),
       onWeatherChange: (next) =>
@@ -44,6 +43,7 @@ export function NoteRow(props: {
   return (
     <ContentEntryListItem
       checkboxLabel={`选择手记「${title}」`}
+      dataId={note.id}
       editTitle="编辑手记"
       editTo={editPath}
       externalHref={publicHref}
@@ -94,6 +94,7 @@ export function NoteRow(props: {
           </time>
         </>
       }
+      onSelect={(mode) => props.onSelect(note.id, mode)}
       onSelectedChange={props.onSelectedChange}
       openTitle="打开手记"
       selected={props.selected}