@leavepulse/ui 0.71.2 → 0.72.1

package/src/components/LpSidebar.vue

@@ -13,11 +13,14 @@
  * auto-closes the drawer. With `responsive` off the component renders exactly
  * the static <nav> it always has — existing call sites are unaffected.
  */
-import { computed, ref, useId } from "vue"
+import { computed, nextTick, ref, useId } from "vue"
+import { parseCombo, useHotkeys } from "../composables/useHotkeys"
 import { usePersisted } from "../composables/usePersisted"
 import { useLabels } from "../composables/useLpConfig"
 import LpDrawer from "./LpDrawer.vue"
+import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
+import LpTooltip from "./LpTooltip.vue"
 import LpSidebarNav from "./LpSidebarNav.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
 
@@ -50,7 +53,17 @@ const props = withDefaults(
     /** Placeholder for that field (defaults to the `search` label). */
     searchPlaceholder?: string
     /** Text overrides: `nav` names the landmark, `search` the filter field. */
-    labels?: Partial<{ nav: string; search: string }>
+    labels?: Partial<{
+      nav: string
+      search: string
+      pinned: string
+      pin: string
+      unpin: string
+      expand: string
+      compact: string
+      expandRail: string
+      resize: string
+    }>
     /** The query, when the app wants to own it (v-model:search). */
     search?: string
     /** Show a skeleton placeholder instead of the items. */
@@ -126,6 +139,44 @@ const props = withDefaults(
      * see LpSidebarNav for why a tall nav keeps it pinned.
      */
     hoverFollow?: boolean
+    /**
+     * Icons only (v-model:compact): each row's name, count and the pages under
+     * it move into a card beside the icon. With `resizable` the person decides,
+     * and the choice is remembered under `persist`.
+     */
+    compact?: boolean
+    /**
+     * The person sizes the rail: drag its edge (double-click resets), drag it
+     * narrow enough and it folds to icons, and a button and Ctrl+B fold it
+     * outright. One mechanism, not two: a narrow rail that only truncates its
+     * labels is the worst of both, so below a point it becomes the icon rail.
+     */
+    resizable?: boolean
+    /** Rail width bounds while resizing, in px. */
+    minWidth?: number
+    maxWidth?: number
+    /** The key that folds the rail when `resizable`. False turns it off. */
+    compactHotkey?: string | false
+    /**
+     * Rows offer "Pin to top" in their menu, and pinned pages lead the nav
+     * (v-model:pinned, ids; remembered under `persist` when unbound).
+     */
+    pinnable?: boolean
+    pinned?: string[]
+    /** How long the pointer rests on a row with a `preview` before its card opens, in ms. */
+    previewDelay?: number
+    /**
+     * Mark the app as not production: a coloured band along the top of the rail
+     * with the label hanging from it ("staging", "local"). It is there so an
+     * edit on the test copy is not mistaken for one on the real thing; leave it
+     * unset in production.
+     */
+    environment?: string | { label: string; tone?: "warning" | "danger" | "action" | "brand" }
+    /**
+     * The app's hint system (createHintSystem). Rows that name a `hintPage`
+     * then mark unread news on it with a dot, with nothing for the app to wire.
+     */
+    hints?: { unreadNews: (page?: string) => readonly unknown[] }
   }>(),
   {
     skeletonRows: 6,
@@ -136,6 +187,11 @@ const props = withDefaults(
     variant: "rail",
     autoCollapseAfter: 14,
     hoverFollow: false,
+    compact: undefined,
+    minWidth: 180,
+    maxWidth: 420,
+    compactHotkey: "Ctrl+B",
+    previewDelay: 900,
   },
 )
 
@@ -145,15 +201,47 @@ const emit = defineEmits<{
   (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
   (e: "update:search", value: string): void
+  (e: "update:compact", value: boolean): void
+  (e: "update:pinned", ids: string[]): void
 }>()
 
-const text = useLabels("sidebar", { nav: "Sidebar", search: "Search" }, () => props.labels)
+defineSlots<{
+  /** The brand; `compact` says the rail is down to icons. */
+  header?: (props: { compact?: boolean }) => unknown
+  actions?: (props: { compact?: boolean }) => unknown
+  footer?: (props: { compact?: boolean }) => unknown
+  item?: (props: { item: SidebarItem; active: boolean }) => unknown
+}>()
+
+const text = useLabels(
+  "sidebar",
+  {
+    nav: "Sidebar",
+    search: "Search",
+    pinned: "Pinned",
+    pin: "Pin to top",
+    unpin: "Unpin",
+    expand: "Show the pages under it",
+    compact: "Collapse the sidebar",
+    expandRail: "Expand the sidebar",
+    resize: "Drag to resize, double-click to reset",
+  },
+  () => props.labels,
+)
 const placeholder = computed(() => props.searchPlaceholder ?? text.value.search)
 
+function withNews(item: SidebarItem): SidebarItem {
+  const children = item.children?.map(withNews)
+  const pages = item.hintPage === undefined ? [] : Array.isArray(item.hintPage) ? item.hintPage : [item.hintPage]
+  const fresh = !!props.hints && pages.some((p) => props.hints!.unreadNews(p).length > 0)
+  return fresh || children ? { ...item, children, dot: item.dot || fresh } : item
+}
+
 // Normalise both inputs to a single section list.
-const allGroups = computed<SidebarSection[]>(() =>
-  props.sections ?? (props.items ? [{ items: props.items }] : []),
-)
+const allGroups = computed<SidebarSection[]>(() => {
+  const groups = props.sections ?? (props.items ? [{ items: props.items }] : [])
+  return props.hints ? groups.map((g) => ({ ...g, items: g.items.map(withNews) })) : groups
+})
 
 /*
  * The filter query. Controlled through v-model:search when the app wants it —
@@ -179,6 +267,13 @@ function matches(item: SidebarItem, needle: string): boolean {
   return (item.keywords ?? []).some((k) => normalise(k).includes(needle))
 }
 
+/** The item if it matches, with every page under it; else only the pages under it that match. */
+function narrowed(item: SidebarItem, needle: string): SidebarItem | null {
+  if (matches(item, needle)) return item
+  const children = (item.children ?? []).filter((c) => matches(c, needle))
+  return children.length ? { ...item, children } : null
+}
+
 const groups = computed<SidebarSection[]>(() => {
   const needle = normalise(query.value.trim())
   if (!needle) return allGroups.value
@@ -186,7 +281,10 @@ const groups = computed<SidebarSection[]>(() => {
   // under it reads as a section that failed to load rather than one that
   // matched nothing.
   return allGroups.value
-    .map((section) => ({ ...section, items: section.items.filter((i) => matches(i, needle)) }))
+    .map((section) => ({
+      ...section,
+      items: section.items.map((i) => narrowed(i, needle)).filter((i): i is SidebarItem => i !== null),
+    }))
     .filter((section) => section.items.length > 0)
 })
 
@@ -226,7 +324,7 @@ const autoCollapsed = computed<string[]>(() => {
   const limit = props.autoCollapseAfter
   if (!limit || navLength.value <= limit) return []
   return groups.value
-    .filter((g) => g.collapsible && !g.items.some(itemActive))
+    .filter((g) => g.collapsible && !g.items.some((i) => itemActive(i) || !!i.children?.some(itemActive)))
     .map(keyOf)
     .filter(Boolean)
 })
@@ -246,6 +344,117 @@ function toggleSection(key: string, collapsed: boolean) {
   emit("update:collapsed", next)
 }
 
+/*
+ * Compact and width. Bound, the app owns them; unbound, the sidebar keeps them,
+ * across visits under `persist`.
+ */
+const ownCompact = usePersisted<boolean>(() => props.persist && `lp-sidebar:${props.persist}:compact`, false)
+const isCompact = computed(() => props.compact ?? ownCompact.value)
+function setCompact(value: boolean) {
+  ownCompact.value = value
+  emit("update:compact", value)
+}
+
+const ENV_TONE = {
+  warning: "bg-accent text-ink-inverse",
+  danger: "bg-danger text-white",
+  action: "bg-action text-ink-inverse",
+  brand: "bg-brand text-ink-inverse",
+} as const
+const env = computed(() => {
+  const e = props.environment
+  if (!e) return null
+  const { label, tone = "warning" } = typeof e === "string" ? { label: e } : e
+  return { label, tone: ENV_TONE[tone] }
+})
+
+const DEFAULT_WIDTH = 240
+const COMPACT_WIDTH = 64
+const ownWidth = usePersisted<number>(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH)
+const dragging = ref(false)
+
+const railWidth = computed(() => {
+  if (isCompact.value) return `${COMPACT_WIDTH}px`
+  if (props.resizable) return `${ownWidth.value}px`
+  return props.width
+})
+
+/*
+ * Dragging past the narrowest width folds the rail to icons, and dragging a
+ * folded rail out unfolds it: below a point labels only truncate to nothing
+ * useful, and the icon rail is the honest form of "narrow".
+ */
+const FOLD_AT = 132
+function startResize(event: PointerEvent) {
+  if (event.button !== 0) return
+  const handle = event.currentTarget as HTMLElement
+  handle.setPointerCapture(event.pointerId)
+  const from = event.clientX
+  const start = isCompact.value ? COMPACT_WIDTH : ownWidth.value
+  dragging.value = true
+  const move = (e: PointerEvent) => {
+    const wanted = start + (e.clientX - from)
+    if (wanted < FOLD_AT) {
+      // Folded by dragging: the width it unfolds to is the one it had, not
+      // the narrowest the drag passed through on its way down.
+      if (!isCompact.value) setCompact(true)
+      if (start !== COMPACT_WIDTH) ownWidth.value = start
+      return
+    }
+    if (isCompact.value) setCompact(false)
+    ownWidth.value = Math.round(Math.min(props.maxWidth, Math.max(props.minWidth, wanted)))
+  }
+  const stop = () => {
+    dragging.value = false
+    handle.removeEventListener("pointermove", move)
+    handle.removeEventListener("pointerup", stop)
+    handle.removeEventListener("pointercancel", stop)
+  }
+  handle.addEventListener("pointermove", move)
+  handle.addEventListener("pointerup", stop)
+  handle.addEventListener("pointercancel", stop)
+}
+const railEl = ref<HTMLElement | null>(null)
+async function searchFromCompact() {
+  setCompact(false)
+  await nextTick()
+  railEl.value?.querySelector<HTMLInputElement>("input")?.focus()
+}
+
+function resetWidth() {
+  ownWidth.value = DEFAULT_WIDTH
+  setCompact(false)
+}
+
+useHotkeys(() =>
+  props.resizable && props.compactHotkey
+    ? [
+        {
+          ...parseCombo(props.compactHotkey),
+          help: { group: text.value.nav, label: text.value.compact, combo: props.compactHotkey },
+          handler: () => setCompact(!isCompact.value),
+        },
+      ]
+    : [],
+)
+
+/* Pinned pages, by id; unbound they are kept under `persist`. */
+const ownPinned = usePersisted<string[]>(() => props.persist && `lp-sidebar:${props.persist}:pinned`, [], {
+  validate: (value): value is string[] => Array.isArray(value) && value.every((k) => typeof k === "string"),
+})
+const pinnedIds = computed(() => props.pinned ?? ownPinned.value)
+const everyItem = computed(() => allGroups.value.flatMap((g) => g.items.flatMap((i) => [i, ...(i.children ?? [])])))
+const pinnedItems = computed<SidebarItem[]>(() =>
+  props.pinnable
+    ? pinnedIds.value.map((id) => everyItem.value.find((i) => i.id === id)).filter((i): i is SidebarItem => !!i)
+    : [],
+)
+function togglePin(id: string) {
+  const next = pinnedIds.value.includes(id) ? pinnedIds.value.filter((k) => k !== id) : [...pinnedIds.value, id]
+  ownPinned.value = next
+  emit("update:pinned", next)
+}
+
 function activate(item: SidebarItem) {
   if (item.disabled) return
   emit("update:modelValue", item.id)
@@ -291,12 +500,28 @@ defineOptions({ inheritAttrs: false })
 <template>
   <!-- Desktop / always-on rail -->
   <nav
-    class="h-full flex-col gap-1 p-3"
-    :class="[railClass, chromeClass, width ? '' : 'w-60']"
-    :style="width ? { width } : undefined"
+    ref="railEl"
+    class="relative h-full shrink-0 flex-col gap-1"
+    :class="[
+      railClass,
+      chromeClass,
+      isCompact ? 'px-2 py-3' : 'p-3',
+      railWidth ? '' : 'w-60',
+      dragging ? '' : 'transition-[width] duration-(--duration-medium) ease-[var(--ease-emphasized)] motion-reduce:transition-none',
+    ]"
+    :style="railWidth ? { width: railWidth } : undefined"
+    :data-compact="isCompact || undefined"
     :aria-label="text.nav"
     v-bind="$attrs"
   >
+    <div v-if="env" class="pointer-events-none absolute inset-x-0 top-0 z-20 h-[3px]" :class="env.tone" />
+    <span
+      v-if="env && !isCompact"
+      class="pointer-events-none absolute left-1/2 top-0 z-20 -translate-x-1/2 rounded-b-small px-2 pb-0.5 text-[10px] font-semibold uppercase tracking-wide"
+      :class="env.tone"
+    >
+      {{ env.label }}
+    </span>
     <!-- Rail: edge-to-edge (negative margins cancel the p-3) and h-16 to match
          the app header, so its bottom hairline continues the header's border-b.
          Panel: kept inside the padding — bleeding to the edge would cut across
@@ -305,18 +530,33 @@ defineOptions({ inheritAttrs: false })
       v-if="$slots.header"
       class="mb-3 flex shrink-0 items-center"
       :class="[
-        variant === 'panel' ? 'pb-3' : '-mx-3 -mt-3 h-16 px-3',
+        variant === 'panel' ? 'pb-3' : isCompact ? '-mx-2 -mt-3 h-16 overflow-hidden' : '-mx-3 -mt-3 h-16 px-3',
         divider ? 'border-b border-line' : '',
       ]"
     >
-      <slot name="header" />
+      <div v-if="isCompact" class="flex w-16 shrink-0 justify-center">
+        <slot name="header" :compact="true" />
+      </div>
+      <slot v-else name="header" :compact="false" />
     </div>
 
     <!-- The filter sits between the brand and the nav: it belongs to the list,
          not to the header, and a person reaching for it is already looking at
          the items. -->
+    <!-- Folded, the filter is a button: a field forty pixels wide holds no
+         query, so the rail opens to give it room and puts the caret in it. -->
+    <LpTooltip v-if="searchable && isCompact" :content="placeholder" side="right">
+      <button
+        type="button"
+        class="mb-2 ml-1 grid size-10 shrink-0 place-items-center rounded-control text-muted outline-none transition-colors hover:bg-ink/[0.05] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+        :aria-label="placeholder"
+        @click="searchFromCompact"
+      >
+        <LpIcon name="lucide:search" :size="17" />
+      </button>
+    </LpTooltip>
     <LpInput
-      v-if="searchable"
+      v-if="searchable && !isCompact"
       v-model="query"
       size="sm"
       icon="lucide:search"
@@ -328,6 +568,11 @@ defineOptions({ inheritAttrs: false })
     <LpSidebarNav
       :groups="groups"
       :pill-id="railPillId"
+      :compact="isCompact"
+      :pinnable="pinnable"
+      :pinned="pinnedItems"
+      :preview-delay="previewDelay"
+      :labels="text"
       :item-active="itemActive"
       :loading="loading"
       :skeleton-rows="skeletonRows"
@@ -336,21 +581,57 @@ defineOptions({ inheritAttrs: false })
       :hover-follow="hoverFollow"
       @activate="activate"
       @toggle-section="toggleSection"
+      @toggle-pin="togglePin"
     >
       <template v-if="$slots.item" #item="slotProps">
         <slot name="item" v-bind="slotProps" />
       </template>
     </LpSidebarNav>
 
+    <LpTooltip v-if="resizable" :content="isCompact ? text.expandRail : text.compact" side="right">
+      <button
+        type="button"
+        class="mt-1 flex h-8 shrink-0 items-center gap-2 rounded-control px-3 text-xs text-muted outline-none transition-colors hover:bg-ink/[0.05] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+        :class="isCompact ? 'ml-1 w-10 justify-center px-0' : ''"
+        :aria-label="isCompact ? text.expandRail : text.compact"
+        :aria-pressed="isCompact"
+        @click="setCompact(!isCompact)"
+      >
+        <LpIcon :name="isCompact ? 'lucide:panel-left-open' : 'lucide:panel-left-close'" :size="16" class="shrink-0" />
+        <span v-if="!isCompact" class="truncate">{{ text.compact }}</span>
+      </button>
+    </LpTooltip>
+
     <!-- Actions (search, "new …") sit just above the footer, pinned to the
          bottom of the rail and outside the scroll region — not trailing the
          nav list. -->
-    <div v-if="$slots.actions" class="mt-2 flex shrink-0 flex-col gap-2">
-      <slot name="actions" />
+    <div v-if="$slots.actions" class="mt-2 flex shrink-0 flex-col gap-2" :class="isCompact ? 'w-12 items-center' : ''">
+      <slot name="actions" :compact="isCompact" />
     </div>
 
-    <div v-if="$slots.footer" class="mt-2 shrink-0 border-t border-line pt-3">
-      <slot name="footer" />
+    <div v-if="$slots.footer" class="mt-2 shrink-0 overflow-hidden border-t border-line pt-3">
+      <div v-if="isCompact" class="flex w-12 justify-center">
+        <slot name="footer" :compact="true" />
+      </div>
+      <slot v-else name="footer" :compact="false" />
+    </div>
+
+    <!-- The edge itself is the handle: a few pixels either side of the
+         hairline, a brand line while it is held. -->
+    <div
+      v-if="resizable && variant === 'rail'"
+      role="separator"
+      aria-orientation="vertical"
+      :aria-label="text.resize"
+      :title="text.resize"
+      class="group/resize absolute inset-y-0 -right-1.5 z-10 w-3 cursor-col-resize touch-none"
+      @pointerdown="startResize"
+      @dblclick="resetWidth"
+    >
+      <span
+        class="absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-brand opacity-0 transition-opacity duration-(--duration-fast) group-hover/resize:opacity-60"
+        :class="dragging ? '!opacity-100' : ''"
+      />
     </div>
   </nav>
 
@@ -389,6 +670,10 @@ defineOptions({ inheritAttrs: false })
       <LpSidebarNav
         :groups="groups"
         :pill-id="drawerPillId"
+        :pinnable="pinnable"
+        :pinned="pinnedItems"
+        :preview-delay="previewDelay"
+        :labels="text"
         :item-active="itemActive"
         :loading="loading"
         :skeleton-rows="skeletonRows"
@@ -397,6 +682,7 @@ defineOptions({ inheritAttrs: false })
         :hover-follow="hoverFollow"
         @activate="activate"
         @toggle-section="toggleSection"
+        @toggle-pin="togglePin"
       >
         <template v-if="$slots.item" #item="slotProps">
           <slot name="item" v-bind="slotProps" />