@adea-ai/ui 0.144.0 → 0.145.0

package/src/components/composites/workspace-switcher/workspace-reorder-dialog.tsx

@@ -0,0 +1,204 @@
+import { ArrowDown, ArrowUp } from 'lucide-solid'
+import { For, Show, createEffect, createSignal, on, onCleanup, type Accessor } from 'solid-js'
+import { Button } from '../../ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/dialog'
+import { createDialogFocusRestoration } from '../../ui/dialog/dialog'
+import { ActionButton } from '../action-button'
+import { moveTarget, moveWorkspace, type WorkspaceMoveDirection } from './workspace-order'
+
+export type WorkspaceReorderItem = {
+  id: string
+  name: string
+  fixed?: boolean
+}
+
+export type WorkspaceReorderDialogProps = {
+  open: boolean
+  onOpenChange(open: boolean): void
+  workspaces: readonly WorkspaceReorderItem[]
+  /** Receives the full id order after one move. May be async; a rejection shows an error. */
+  onReorder(ids: readonly string[]): void | Promise<void>
+  title?: string
+  /** Where focus returns on close; the menu item that opened the dialog is gone by then. */
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+}
+
+/**
+ * WorkspaceReorderDialog.
+ *
+ * Ordering by buttons, not by dragging, so it works from the keyboard and with
+ * a screen reader: every row has a labelled Move up and Move down. Each move is
+ * reported to the host straight away (there is no Save), the moved row keeps
+ * focus on the control that was used, and the new position is announced.
+ *
+ * One save runs at a time, even across a close and reopen: the moves stay
+ * disabled until the host's promise settles. A save that finishes after the
+ * dialog has closed reports nothing here (the host owns any failure it wants
+ * to surface) and never moves focus.
+ */
+export function WorkspaceReorderDialog(props: WorkspaceReorderDialogProps) {
+  const [status, setStatus] = createSignal('')
+  const [error, setError] = createSignal('')
+  const [pending, setPending] = createSignal(false)
+  let list: HTMLOListElement | undefined
+  // Each open and each close starts a new session. A save belongs to the session
+  // it began in; once the dialog has closed (or closed and reopened) its result
+  // no longer speaks for what is on screen, so it must not touch the status
+  // line or focus. `pending` is deliberately not reset with the session: the
+  // host's save is still running, so the next move waits for it instead of
+  // running a second save beside it.
+  let session = 0
+  let disposed = false
+  let frame: number | undefined
+
+  createEffect(
+    on(
+      () => props.open,
+      () => {
+        session += 1
+        if (frame !== undefined) cancelAnimationFrame(frame)
+        frame = undefined
+        setStatus('')
+        setError('')
+      },
+      { defer: true }
+    )
+  )
+  onCleanup(() => {
+    disposed = true
+    session += 1
+    if (frame !== undefined) cancelAnimationFrame(frame)
+  })
+
+  const focus = createDialogFocusRestoration({
+    open: () => props.open,
+    restoreFocusRef: props.restoreFocusRef,
+  })
+
+  const focusMove = (owner: number, id: string, direction: WorkspaceMoveDirection) => {
+    // The host re-renders the rows with the new order; focus the same control
+    // once it exists, or its sibling when the move reached an edge.
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      if (disposed || owner !== session || !props.open) return
+      const row = list?.querySelector<HTMLElement>(`[data-reorder-id="${CSS.escape(id)}"]`)
+      const wanted = row?.querySelector<HTMLElement>(`[data-move="${direction}"]`)
+      const other = row?.querySelector<HTMLElement>(
+        `[data-move="${direction === 'up' ? 'down' : 'up'}"]`
+      )
+      const target = wanted?.getAttribute('aria-disabled') === 'true' ? other : wanted
+      target?.focus({ preventScroll: true })
+    })
+  }
+
+  const move = async (item: WorkspaceReorderItem, direction: WorkspaceMoveDirection) => {
+    if (pending()) return
+    const next = moveWorkspace(props.workspaces, item.id, direction)
+    if (!next) return
+    const owner = session
+    const current = () => !disposed && owner === session && props.open
+    setError('')
+    setPending(true)
+    try {
+      await props.onReorder(next)
+      if (current())
+        setStatus(`Moved ${item.name} to position ${next.indexOf(item.id) + 1} of ${next.length}.`)
+    } catch {
+      if (current()) {
+        setStatus('')
+        setError('Could not save the order. Try again.')
+      }
+    } finally {
+      if (!disposed) setPending(false)
+      if (current()) focusMove(owner, item.id, direction)
+    }
+  }
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent
+        class="w-full max-w-sm"
+        onKeyDown={(event: KeyboardEvent) => {
+          // Tooltip help on a focused move control would otherwise take the first Escape.
+          if (event.key === 'Escape' && !event.defaultPrevented) {
+            event.preventDefault()
+            props.onOpenChange(false)
+          }
+        }}
+        onOpenAutoFocus={focus.onOpenAutoFocus}
+        onCloseAutoFocus={focus.onCloseAutoFocus}
+      >
+        <DialogHeader>
+          <DialogTitle>{props.title ?? 'Reorder workspaces'}</DialogTitle>
+          <DialogDescription>
+            Move a workspace up or down. The order is saved as you go.
+          </DialogDescription>
+        </DialogHeader>
+        <ol
+          ref={(el) => (list = el)}
+          class="flex flex-col gap-1"
+          aria-label="Workspace order"
+          aria-busy={pending()}
+        >
+          <For each={props.workspaces}>
+            {(item) => (
+              <li
+                data-reorder-id={item.id}
+                class="flex items-center gap-2 rounded-md border border-border px-3 py-1.5"
+              >
+                <span class="min-w-0 flex-1 truncate text-sm">{item.name}</span>
+                <Show
+                  when={!item.fixed}
+                  fallback={<span class="text-xs text-muted-foreground">Always first</span>}
+                >
+                  <For each={['up', 'down'] as const}>
+                    {(direction) => (
+                      <ActionButton
+                        variant="ghost"
+                        size="icon-sm"
+                        data-move={direction}
+                        aria-label={`Move ${item.name} ${direction}`}
+                        tooltip={`Move ${direction}`}
+                        disabled={
+                          pending() ||
+                          moveTarget(props.workspaces, item.id, direction) === undefined
+                        }
+                        onClick={() => void move(item, direction)}
+                      >
+                        <Show when={direction === 'up'} fallback={<ArrowDown aria-hidden="true" />}>
+                          <ArrowUp aria-hidden="true" />
+                        </Show>
+                      </ActionButton>
+                    )}
+                  </For>
+                </Show>
+              </li>
+            )}
+          </For>
+        </ol>
+        <p role="status" aria-live="polite" class="min-h-5 text-xs text-muted-foreground">
+          {status()}
+        </p>
+        <Show when={error()}>
+          <p role="alert" class="text-xs text-destructive">
+            {error()}
+          </p>
+        </Show>
+        <DialogFooter>
+          <DialogClose as={Button} variant="outline" size="sm">
+            Done
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/composites/workspace-switcher/workspace-switcher.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Plus, Settings } from 'lucide-solid'
+import { ArrowDownUp, ChevronDown, Plus, Settings } from 'lucide-solid'
 import type { JSX } from 'solid-js'
 import { For, Show, createSignal } from 'solid-js'
 import { cn } from '#lib/utils'
@@ -14,6 +14,7 @@ import {
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu'
 import { ActionButton } from '../action-button'
+import { WorkspaceReorderDialog } from './workspace-reorder-dialog'
 
 /**
  * WorkspaceSwitcher.
@@ -37,6 +38,8 @@ export type WorkspaceSwitcherItem = {
   mark: JSX.Element
   /** A quiet trailing readout in the row, e.g. an unread count. Optional. */
   detail?: JSX.Element
+  /** Pinned to the top of the order, e.g. Home: it cannot be moved and nothing moves above it. */
+  fixed?: boolean
 }
 
 export type WorkspaceSwitcherProps = {
@@ -50,6 +53,13 @@ export type WorkspaceSwitcherProps = {
   /** Offered beside the create action when present: open the current workspace's settings. */
   onManage?(): void
   manageLabel?: string
+  /**
+   * Offered when present and at least two workspaces can move: opens a dialog
+   * with Move up and Move down on each row. Receives the full id order after
+   * each move; the host saves it and passes the workspaces back in that order.
+   */
+  onReorder?(ids: readonly string[]): void | Promise<void>
+  reorderLabel?: string
   /** The menu's heading; also the trigger's accessible-name prefix. */
   label?: string
   /** Shown while no workspace is current. */
@@ -60,69 +70,93 @@ export type WorkspaceSwitcherProps = {
 
 export function WorkspaceSwitcher(props: WorkspaceSwitcherProps) {
   const [open, setOpen] = createSignal(false)
+  const [reordering, setReordering] = createSignal(false)
+  let trigger: HTMLElement | undefined
   const current = () => props.workspaces.find((item) => item.id === props.value)
   const label = () => props.label ?? 'Workspaces'
+  const canReorder = () =>
+    props.onReorder !== undefined && props.workspaces.filter((item) => !item.fixed).length > 1
 
   return (
-    <DropdownMenu modal={false} open={open()} onOpenChange={setOpen}>
-      <DropdownMenuTrigger
-        as={ActionButton}
-        variant="ghost"
-        size="sm"
-        disabled={props.disabled}
-        data-slot="workspace-switcher"
-        tooltip={`Workspace: ${current()?.name ?? props.placeholder ?? 'Choose workspace'}`}
-        aria-label={`Switch workspace, current: ${current()?.name ?? 'none'}`}
-        class={cn('max-w-full min-w-0 shrink', props.class)}
-      >
-        <span aria-hidden="true" class="flex shrink-0">
-          {current()?.mark}
-        </span>
-        <span class="min-w-0 max-w-40 truncate">
-          {current()?.name ?? props.placeholder ?? 'Choose workspace'}
-        </span>
-        <ChevronDown aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" sideOffset={6} class="min-w-56">
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>{label()}</DropdownMenuLabel>
-          <DropdownMenuRadioGroup
-            value={props.value}
-            onChange={(value) => {
-              setOpen(false)
-              const id = String(value)
-              if (id !== props.value) props.onValueChange(id)
-            }}
-          >
-            <For each={props.workspaces}>
-              {(item) => (
-                <DropdownMenuRadioItem value={item.id} closeOnSelect data-workspace-id={item.id}>
-                  <span aria-hidden="true" class="flex shrink-0">
-                    {item.mark}
-                  </span>
-                  <span class="min-w-0 flex-1 truncate">{item.name}</span>
-                  <Show when={item.detail}>{item.detail}</Show>
-                </DropdownMenuRadioItem>
-              )}
-            </For>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuGroup>
-        <Show when={props.onCreate || props.onManage}>
-          <DropdownMenuSeparator />
-          <Show when={props.onCreate}>
-            <DropdownMenuItem onSelect={() => props.onCreate?.()}>
-              <Plus aria-hidden="true" />
-              {props.createLabel ?? 'New workspace'}
-            </DropdownMenuItem>
+    <>
+      <DropdownMenu modal={false} open={open()} onOpenChange={setOpen}>
+        <DropdownMenuTrigger
+          as={ActionButton}
+          variant="ghost"
+          size="sm"
+          disabled={props.disabled}
+          ref={(el: HTMLElement) => (trigger = el)}
+          data-slot="workspace-switcher"
+          tooltip={`Workspace: ${current()?.name ?? props.placeholder ?? 'Choose workspace'}`}
+          aria-label={`Switch workspace, current: ${current()?.name ?? 'none'}`}
+          class={cn('max-w-full min-w-0 shrink', props.class)}
+        >
+          <span aria-hidden="true" class="flex shrink-0">
+            {current()?.mark}
+          </span>
+          <span class="min-w-0 max-w-40 truncate">
+            {current()?.name ?? props.placeholder ?? 'Choose workspace'}
+          </span>
+          <ChevronDown aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" sideOffset={6} class="min-w-56">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>{label()}</DropdownMenuLabel>
+            <DropdownMenuRadioGroup
+              value={props.value}
+              onChange={(value) => {
+                setOpen(false)
+                const id = String(value)
+                if (id !== props.value) props.onValueChange(id)
+              }}
+            >
+              <For each={props.workspaces}>
+                {(item) => (
+                  <DropdownMenuRadioItem value={item.id} closeOnSelect data-workspace-id={item.id}>
+                    <span aria-hidden="true" class="flex shrink-0">
+                      {item.mark}
+                    </span>
+                    <span class="min-w-0 flex-1 truncate">{item.name}</span>
+                    <Show when={item.detail}>{item.detail}</Show>
+                  </DropdownMenuRadioItem>
+                )}
+              </For>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuGroup>
+          <Show when={props.onCreate || props.onManage || canReorder()}>
+            <DropdownMenuSeparator />
+            <Show when={props.onCreate}>
+              <DropdownMenuItem onSelect={() => props.onCreate?.()}>
+                <Plus aria-hidden="true" />
+                {props.createLabel ?? 'New workspace'}
+              </DropdownMenuItem>
+            </Show>
+            <Show when={canReorder()}>
+              <DropdownMenuItem onSelect={() => setReordering(true)}>
+                <ArrowDownUp aria-hidden="true" />
+                {props.reorderLabel ?? 'Reorder workspaces…'}
+              </DropdownMenuItem>
+            </Show>
+            <Show when={props.onManage}>
+              <DropdownMenuItem onSelect={() => props.onManage?.()}>
+                <Settings aria-hidden="true" />
+                {props.manageLabel ?? 'Workspace settings…'}
+              </DropdownMenuItem>
+            </Show>
           </Show>
-          <Show when={props.onManage}>
-            <DropdownMenuItem onSelect={() => props.onManage?.()}>
-              <Settings aria-hidden="true" />
-              {props.manageLabel ?? 'Workspace settings…'}
-            </DropdownMenuItem>
-          </Show>
-        </Show>
-      </DropdownMenuContent>
-    </DropdownMenu>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Show when={props.onReorder}>
+        {(onReorder) => (
+          <WorkspaceReorderDialog
+            open={reordering()}
+            onOpenChange={setReordering}
+            workspaces={props.workspaces}
+            onReorder={onReorder()}
+            restoreFocusRef={() => trigger}
+          />
+        )}
+      </Show>
+    </>
   )
 }