@leavepulse/ui 0.28.2 → 0.28.4

package/dist/components/LpSidebar.vue.d.ts

@@ -35,45 +35,67 @@ type __VLS_Props = {
      * flush, header-less look.
      */
     divider?: boolean;
+    /**
+     * Which collapsible groups are folded away (v-model:collapsed). Leave it
+     * unbound to let the sidebar fold long navs on its own — see
+     * `autoCollapseAfter`.
+     */
+    collapsed?: string[];
+    /**
+     * Fold collapsible groups automatically once the nav has more than this
+     * many rows, counting headings and items alike.
+     *
+     * The reason is the reader, not the pixels: a short nav is taken in at a
+     * glance, a long one has to be searched, and searching a list you did not
+     * choose to have is the part that grates. Past the threshold the groups
+     * that are not today's work fold themselves, and the one holding the
+     * current page always stays open.
+     *
+     * 0 turns it off — the app then owns the state through `collapsed`.
+     */
+    autoCollapseAfter?: number;
 };
-declare var __VLS_1: {}, __VLS_12: {
+declare var __VLS_1: {}, __VLS_13: {
     item: SidebarItem;
     active: boolean;
-}, __VLS_14: {}, __VLS_16: {}, __VLS_26: {}, __VLS_37: {
+}, __VLS_15: {}, __VLS_17: {}, __VLS_27: {}, __VLS_39: {
     item: SidebarItem;
     active: boolean;
-}, __VLS_39: {}, __VLS_41: {};
+}, __VLS_41: {}, __VLS_43: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    item?: (props: typeof __VLS_12) => any;
+    item?: (props: typeof __VLS_13) => any;
 } & {
-    actions?: (props: typeof __VLS_14) => any;
+    actions?: (props: typeof __VLS_15) => any;
 } & {
-    footer?: (props: typeof __VLS_16) => any;
+    footer?: (props: typeof __VLS_17) => any;
 } & {
-    header?: (props: typeof __VLS_26) => any;
+    header?: (props: typeof __VLS_27) => any;
 } & {
-    item?: (props: typeof __VLS_37) => any;
+    item?: (props: typeof __VLS_39) => any;
 } & {
-    actions?: (props: typeof __VLS_39) => any;
+    actions?: (props: typeof __VLS_41) => any;
 } & {
-    footer?: (props: typeof __VLS_41) => any;
+    footer?: (props: typeof __VLS_43) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (item: SidebarItem) => any;
     "update:modelValue": (id: string) => any;
     "update:open": (value: boolean) => any;
+    "update:collapsed": (keys: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((item: SidebarItem) => any) | undefined;
     "onUpdate:modelValue"?: ((id: string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:collapsed"?: ((keys: string[]) => any) | undefined;
 }>, {
     skeletonRows: number;
     skeletonHeader: boolean;
     responsive: boolean;
     mobileBreakpoint: "sm" | "md" | "lg" | "xl";
     divider: boolean;
+    autoCollapseAfter: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-7Vpy2IJc.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-CWehDCxN.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.d.ts

@@ -8,21 +8,30 @@ type __VLS_Props = {
     loading?: boolean;
     skeletonRows?: number;
     skeletonHeader?: boolean;
+    /**
+     * Keys of the groups currently folded away. The owner holds this so the
+     * choice can outlive the component (a setting, a stored preference) — the
+     * nav itself only reports the intent to change it.
+     */
+    collapsedKeys?: string[];
 };
-declare var __VLS_27: {
+declare var __VLS_63: {
     item: SidebarItem;
     active: boolean;
 };
 type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_27) => any;
+    item?: (props: typeof __VLS_63) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     activate: (item: SidebarItem) => any;
+    "toggle-section": (key: string, collapsed: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onActivate?: ((item: SidebarItem) => any) | undefined;
+    "onToggle-section"?: ((key: string, collapsed: boolean) => any) | undefined;
 }>, {
     skeletonRows: number;
     skeletonHeader: boolean;
+    collapsedKeys: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-CFX5NxGs.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-5RGNr2D3.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTextarea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTextarea-1ENb3ZAO.js";
+import { _ as _sfc_main } from "../chunks/LpTextarea-tc8N4UO_.js";
 export {
   _sfc_main as default
 };

package/dist/components/sidebar.d.ts

@@ -15,4 +15,22 @@ export interface SidebarSection {
     /** Optional heading above the group. */
     title?: string;
     items: SidebarItem[];
+    /**
+     * The heading folds the group away when clicked. Needs a `title` — there is
+     * nothing to click otherwise.
+     *
+     * A long nav is read by scanning headings, not items: past a certain length
+     * every item is equally far from the eye, and folding the groups that are
+     * not today's work restores that. Which groups start folded is the app's
+     * call (see `collapsedIds`), not this component's.
+     */
+    collapsible?: boolean;
+    /**
+     * Stable key for remembering this group's folded state. Defaults to `title`;
+     * set it when the title is translated, so the memory survives a language
+     * change.
+     */
+    key?: string;
+    /** Icon for the heading — shown when the group is collapsible. */
+    icon?: string;
 }

package/dist/index.js

@@ -1,17 +1,17 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-BTqnUXZG.js";
+import { _ as _2 } from "./chunks/LpAddressInput-BoTkszLk.js";
 import { _ as _3 } from "./chunks/LpMapPicker-CXvoTrAe.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-B5k0J3Cf.js";
+import { _ as _5 } from "./chunks/LpAppShell-CGX0DlIW.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _7 } from "./chunks/LpAvatar-CzCE5cXg.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
 import { _ as _9 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _11 } from "./chunks/LpCalendar-B7ZL0ty3.js";
-import { _ as _12 } from "./chunks/LpCard-gu11ZmSt.js";
-import { _ as _13 } from "./chunks/LpChart-tNXs1ttr.js";
+import { _ as _12 } from "./chunks/LpCard-DSefTGEH.js";
+import { _ as _13 } from "./chunks/LpChart-UiU4RhXP.js";
 import { CHART_PALETTE, axisTicks, formatTick, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-rS_6mO3D.js";
@@ -27,11 +27,11 @@ import { default as default3 } from "./components/LpDropzone.vue.js";
 import { _ as _23 } from "./chunks/LpEmptyState-BV3q7Qyi.js";
 import { _ as _24 } from "./chunks/LpFileTree-BaV7f0O7.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _25 } from "./chunks/LpFormField-CesaPWPO.js";
+import { _ as _25 } from "./chunks/LpFormField-DEaakcHe.js";
 import { _ as _26 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default4 } from "./components/LpImageEditor.vue.js";
 import { _ as _27 } from "./chunks/LpInfraNode-qIL3l7IO.js";
-import { _ as _28 } from "./chunks/LpInput-jwqXlAy0.js";
+import { _ as _28 } from "./chunks/LpInput-BXr40nqX.js";
 import { _ as _29 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _30 } from "./chunks/LpLink-BHZ1CLlF.js";
@@ -42,7 +42,7 @@ import { _ as _34 } from "./chunks/LpNumberField-NPE8Bumx.js";
 import { _ as _35 } from "./chunks/LpNumberFlow-amWYaeuA.js";
 import { _ as _36 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _37 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _38 } from "./chunks/LpPasswordInput-Bmo6q9Kd.js";
+import { _ as _38 } from "./chunks/LpPasswordInput-Bdv6o8ae.js";
 import { _ as _39 } from "./chunks/LpPie-BkjWlfSw.js";
 import { _ as _40 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
@@ -54,11 +54,11 @@ import { _ as _45 } from "./chunks/LpRollingText-CM5gkSeF.js";
 import { _ as _46 } from "./chunks/LpScrollArea-D8xyKXcF.js";
 import { _ as _47 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _48 } from "./chunks/LpSection-aM6J_u51.js";
-import { _ as _49 } from "./chunks/LpSelect-Cw8-gL5F.js";
+import { _ as _49 } from "./chunks/LpSelect-ANIVtrpM.js";
 import { _ as _50 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _51 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default5 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _52 } from "./chunks/LpSidebar-7Vpy2IJc.js";
+import { _ as _52 } from "./chunks/LpSidebar-CWehDCxN.js";
 import { _ as _53 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _54 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _55 } from "./chunks/LpSparkline-C6xQ2dwv.js";
@@ -68,7 +68,7 @@ import { _ as _58 } from "./chunks/LpSwitch-v6fnccSM.js";
 import { _ as _59 } from "./chunks/LpTable-DTj52qlg.js";
 import { _ as _60 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _61 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _62 } from "./chunks/LpTextarea-1ENb3ZAO.js";
+import { _ as _62 } from "./chunks/LpTextarea-tc8N4UO_.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
 import { D, _ as _63, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
 import { _ as _64 } from "./chunks/LpTilt-DuyKbpkA.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.28.2",
+  "version": "0.28.4",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpAppShell.vue

@@ -39,6 +39,10 @@ const props = withDefaults(
     /** Flat items, or sections for grouped nav. Forwarded to LpSidebar. */
     items?: SidebarItem[]
     sections?: SidebarSection[]
+    /** Folded nav groups (v-model:collapsed). Forwarded to LpSidebar. */
+    collapsed?: string[]
+    /** Fold long navs automatically; 0 disables. Forwarded to LpSidebar. */
+    autoCollapseAfter?: number
     /** Active item id (v-model) when not using a custom `isActive`. */
     modelValue?: string
     /**
@@ -80,6 +84,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: "update:modelValue", id: string): void
   (e: "update:open", value: boolean): void
+  (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
 }>()
 
@@ -167,9 +172,12 @@ defineExpose({ openDrawer: _openDrawer })
       :mobile-breakpoint="mobileBreakpoint"
       :divider="divider"
       :loading="loading"
+      :collapsed="collapsed"
+      :auto-collapse-after="autoCollapseAfter"
       class="shrink-0"
       @update:model-value="onModel"
       @update:open="(v) => emit('update:open', v)"
+      @update:collapsed="(v) => emit('update:collapsed', v)"
       @select="onSelect"
     >
       <template v-if="$slots.logo" #header>
@@ -188,8 +196,14 @@ defineExpose({ openDrawer: _openDrawer })
 
     <!-- Main column: header + the single scroll region. -->
     <div class="flex min-w-0 flex-1 flex-col">
+      <!-- `relative` so a consumer can centre something — section tabs, a
+           search box — against the WHOLE bar. Centring it inside the title
+           block instead makes its position depend on how wide the actions are,
+           so the tabs slide sideways every time a button appears: measured at
+           59 px off centre with two actions and 77 px with three, which reads
+           as the navigation drifting rather than the page changing. -->
       <header
-        class="flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6"
+        class="relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6"
       >
         <LpButton
           :class="burgerClass"
@@ -218,8 +232,18 @@ defineExpose({ openDrawer: _openDrawer })
              for a long one — each snapping every control to its left sideways.
              Kept mounted regardless of the slot, so a page that only teleports
              into it still gets the easing (an empty box measures zero wide and
-             costs nothing). -->
-        <LpShift axis="width" class="ml-auto flex shrink-0 items-center gap-2">
+             costs nothing).
+
+             `max-w` + horizontal scroll rather than `shrink-0`: a phone cannot
+             fit a title and three buttons on one line, and an unshrinkable box
+             resolved that by pushing its own contents past the right edge —
+             where there is nothing to scroll to and nothing to press. The
+             actions now cap at two thirds of the bar and scroll within it, so
+             the title keeps a third and every button stays reachable. -->
+        <LpShift
+          axis="width"
+          class="ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible"
+        >
           <slot name="header-actions" />
         </LpShift>
       </header>

package/src/components/LpCard.vue

@@ -19,7 +19,13 @@ const card = tv({
   // renders: two lines that look identical must not wrap differently.
   // Anything that genuinely must not break (a code block, a log line) sets its
   // own overflow and scrolls instead.
-  base: "rounded-card border bg-surface-raised break-words",
+  // min-w-0: a card is nearly always laid out by a grid or a flex row, and both
+  // give their children `min-width: auto` — meaning "never narrower than your
+  // contents". A card holding a form then refuses to shrink and pushes its own
+  // column past the viewport: measured at 490px inside a 358px grid, with the
+  // inputs ending up off-screen on a phone. The card is a container; it takes
+  // the width it is given and wraps what is inside it.
+  base: "min-w-0 rounded-card border bg-surface-raised break-words",
   variants: {
     variant: {
       // raised opts into the skin painter (.lp-skin-panel) so it follows the

package/src/components/LpChart.vue

@@ -553,6 +553,25 @@ watch(
 )
 
 const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
+
+/*
+ * The gradient id for a series, with the series NAME reduced to id-safe
+ * characters.
+ *
+ * A name is a label — "used %", "in eth0", "read sda" — and putting it verbatim
+ * into an id produced `url(#lp-chart-x-g-used %)`, which is not a valid
+ * reference: the browser fails to resolve it and falls back to painting the
+ * shape black. The gradient was there, correct, and simply never reached, so an
+ * area chart of any series whose name held a space or a percent sign rendered
+ * as a solid black block under its line — while "cpu" and "memory" on the same
+ * page kept their colour, which is what made it look like a data problem rather
+ * than an escaping one.
+ *
+ * Index-suffixed so two names that differ only in punctuation ("in eth0" and
+ * "in-eth0") cannot collapse onto one id and share a colour.
+ */
+const gradientId = (name: string, index: number) =>
+  `${clipId}-g-${index}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`
 </script>
 
 <template>
@@ -618,8 +637,8 @@ const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
         >
           <defs>
             <linearGradient
-              v-for="s in lines"
-              :id="`${clipId}-g-${s.name}`"
+              v-for="(s, i) in lines"
+              :id="gradientId(s.name, i)"
               :key="s.name"
               x1="0"
               y1="0"
@@ -728,11 +747,11 @@ const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
 
             <!-- area fills -->
             <path
-              v-for="s in lines"
+              v-for="(s, i) in lines"
               v-show="type === 'area'"
               :key="`f-${s.name}`"
               :d="s.fill"
-              :fill="`url(#${clipId}-g-${s.name})`"
+              :fill="`url(#${gradientId(s.name, i)})`"
             />
 
             <!-- lines -->

package/src/components/LpFormField.vue

@@ -23,8 +23,12 @@ const id = useId()
 </script>
 
 <template>
-  <!-- `gap` covers label→control only; the message carries its own spacing. -->
-  <div class="flex flex-col gap-1.5">
+  <!-- `gap` covers label→control only; the message carries its own spacing.
+       min-w-0 because a field is laid out by a form grid, whose children default
+       to `min-width: auto` and so refuse to go narrower than the widest label or
+       placeholder inside them — which is how a two-column form ended up wider
+       than the phone holding it. -->
+  <div class="flex min-w-0 flex-col gap-1.5">
     <Label v-if="label" :for="id" class="text-sm font-medium text-ink">
       {{ label }}
       <span v-if="required" class="text-danger">*</span>

package/src/components/LpSidebar.vue

@@ -13,7 +13,7 @@
  * auto-closes the drawer. With `responsive` off the component renders exactly
  * the static <nav> it always has — existing call sites are unaffected.
  */
-import { computed, useId } from "vue"
+import { computed, ref, useId } from "vue"
 import LpDrawer from "./LpDrawer.vue"
 import LpSidebarNav from "./LpSidebarNav.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
@@ -56,6 +56,25 @@ const props = withDefaults(
      * flush, header-less look.
      */
     divider?: boolean
+    /**
+     * Which collapsible groups are folded away (v-model:collapsed). Leave it
+     * unbound to let the sidebar fold long navs on its own — see
+     * `autoCollapseAfter`.
+     */
+    collapsed?: string[]
+    /**
+     * Fold collapsible groups automatically once the nav has more than this
+     * many rows, counting headings and items alike.
+     *
+     * The reason is the reader, not the pixels: a short nav is taken in at a
+     * glance, a long one has to be searched, and searching a list you did not
+     * choose to have is the part that grates. Past the threshold the groups
+     * that are not today's work fold themselves, and the one holding the
+     * current page always stays open.
+     *
+     * 0 turns it off — the app then owns the state through `collapsed`.
+     */
+    autoCollapseAfter?: number
   }>(),
   {
     skeletonRows: 6,
@@ -63,12 +82,14 @@ const props = withDefaults(
     responsive: false,
     mobileBreakpoint: "md",
     divider: true,
+    autoCollapseAfter: 14,
   },
 )
 
 const emit = defineEmits<{
   (e: "update:modelValue", id: string): void
   (e: "update:open", value: boolean): void
+  (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
 }>()
 
@@ -81,6 +102,47 @@ function itemActive(item: SidebarItem): boolean {
   return props.isActive ? props.isActive(item) : item.id === props.modelValue
 }
 
+function keyOf(section: SidebarSection): string {
+  return section.key ?? section.title ?? ""
+}
+
+/*
+ * Folded state. The app may own it (v-model:collapsed) — that is how a stored
+ * setting survives a reload; otherwise the sidebar keeps it for the session.
+ */
+const ownCollapsed = ref<string[] | null>(null)
+
+/** Headings + items: what the eye actually has to walk past. */
+const navLength = computed(
+  () => groups.value.reduce((n, g) => n + g.items.length + (g.title ? 1 : 0), 0),
+)
+
+/*
+ * Nothing chosen yet and the nav is long: fold the collapsible groups, except
+ * the one the reader is standing in. Once anything is toggled the choice is a
+ * decision and this stops second-guessing it.
+ */
+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))
+    .map(keyOf)
+    .filter(Boolean)
+})
+
+const collapsedKeys = computed<string[]>(
+  () => props.collapsed ?? ownCollapsed.value ?? autoCollapsed.value,
+)
+
+function toggleSection(key: string, collapsed: boolean) {
+  const next = collapsed
+    ? [...new Set([...collapsedKeys.value, key])]
+    : collapsedKeys.value.filter((k) => k !== key)
+  ownCollapsed.value = next
+  emit("update:collapsed", next)
+}
+
 function activate(item: SidebarItem) {
   if (item.disabled) return
   emit("update:modelValue", item.id)
@@ -139,7 +201,9 @@ defineOptions({ inheritAttrs: false })
       :loading="loading"
       :skeleton-rows="skeletonRows"
       :skeleton-header="skeletonHeader"
+      :collapsed-keys="collapsedKeys"
       @activate="activate"
+      @toggle-section="toggleSection"
     >
       <template v-if="$slots.item" #item="slotProps">
         <slot name="item" v-bind="slotProps" />
@@ -184,7 +248,9 @@ defineOptions({ inheritAttrs: false })
         :loading="loading"
         :skeleton-rows="skeletonRows"
         :skeleton-header="skeletonHeader"
+        :collapsed-keys="collapsedKeys"
         @activate="activate"
+        @toggle-section="toggleSection"
       >
         <template v-if="$slots.item" #item="slotProps">
           <slot name="item" v-bind="slotProps" />

package/src/components/LpSidebarNav.vue

@@ -6,6 +6,8 @@
  * without duplicating markup. Not exported on its own; an LpSidebar detail.
  */
 import { Motion } from "motion-v"
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui"
+import { computed } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpBadge from "./LpBadge.vue"
 import LpContextMenu from "./LpContextMenu.vue"
@@ -23,14 +25,46 @@ const props = withDefaults(
     loading?: boolean
     skeletonRows?: number
     skeletonHeader?: boolean
+    /**
+     * Keys of the groups currently folded away. The owner holds this so the
+     * choice can outlive the component (a setting, a stored preference) — the
+     * nav itself only reports the intent to change it.
+     */
+    collapsedKeys?: string[]
   }>(),
-  { skeletonRows: 6, skeletonHeader: true },
+  { skeletonRows: 6, skeletonHeader: true, collapsedKeys: () => [] },
 )
 
 const emit = defineEmits<{
   (e: "activate", item: SidebarItem): void
+  (e: "toggle-section", key: string, collapsed: boolean): void
 }>()
 
+/** `key` when the app set one, else the title — see SidebarSection.key. */
+function sectionKey(section: SidebarSection): string {
+  return section.key ?? section.title ?? ""
+}
+
+/*
+ * A group folds only when the app both allows it and is not the group the
+ * reader is standing in: folding away the page you are on hides your own
+ * location, which is the one row a nav must always show.
+ */
+const foldedKeys = computed(() => {
+  const holdsActive = new Set(
+    props.groups
+      .filter((g) => g.items.some((i) => props.itemActive(i)))
+      .map(sectionKey),
+  )
+  return new Set(
+    props.collapsedKeys.filter((k) => k && !holdsActive.has(k)),
+  )
+})
+
+function isOpen(section: SidebarSection): boolean {
+  return !foldedKeys.value.has(sectionKey(section))
+}
+
 const pillTransition = usePillTransition()
 </script>
 
@@ -56,14 +90,58 @@ const pillTransition = usePillTransition()
   <!-- min-h-full keeps the content as tall as the viewport so the #actions
        block's mt-auto can still pin it to the bottom. -->
   <LpScrollArea v-else class="min-h-0 flex-1" content-class="flex min-h-full flex-col gap-4">
-    <div v-for="(section, si) in groups" :key="si" class="flex flex-col gap-0.5">
+    <CollapsibleRoot
+      v-for="(section, si) in groups"
+      :key="si"
+      as="div"
+      class="flex flex-col gap-0.5"
+      :open="isOpen(section)"
+      :disabled="!section.collapsible || !section.title"
+      @update:open="(o: boolean) => emit('toggle-section', sectionKey(section), !o)"
+    >
+      <!-- A plain heading while the group is fixed; a control once it folds,
+           because a thing that reacts to a click must look like one. -->
+      <CollapsibleTrigger
+        v-if="section.title && section.collapsible"
+        class="group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      >
+        <LpIcon
+          v-if="section.icon"
+          :name="section.icon"
+          :size="14"
+          class="shrink-0"
+        />
+        <span class="min-w-0 flex-1 truncate text-left">{{ section.title }}</span>
+        <!-- The count stands in for the items while they are hidden, so a
+             folded group still says how much is inside it.
+
+             It is always rendered and merely fades, never removed: taking it
+             out of the row changes the heading's height, and a heading that
+             resizes under the cursor makes its own click feel like a misfire. -->
+        <LpBadge
+          tone="neutral"
+          class="shrink-0 transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none"
+          :class="isOpen(section) ? 'opacity-0' : 'opacity-100'"
+          :aria-hidden="isOpen(section) || undefined"
+        >
+          {{ section.items.length }}
+        </LpBadge>
+        <LpIcon
+          name="lucide:chevron-down"
+          :size="14"
+          class="shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=closed]/section:-rotate-90 motion-reduce:transition-none"
+        />
+      </CollapsibleTrigger>
       <p
-        v-if="section.title"
+        v-else-if="section.title"
         class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
       >
         {{ section.title }}
       </p>
 
+      <CollapsibleContent
+        class="flex flex-col gap-0.5 overflow-hidden data-[state=open]:animate-[collapsible-down_260ms_var(--ease-emphasized)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-emphasized)] motion-reduce:animate-none"
+      >
       <!-- Optional right-click menu per item; passthrough when item.menu is
            absent or empty, so the item keeps the native context menu. -->
       <LpContextMenu
@@ -113,6 +191,7 @@ const pillTransition = usePillTransition()
           </slot>
         </component>
       </LpContextMenu>
-    </div>
+      </CollapsibleContent>
+    </CollapsibleRoot>
   </LpScrollArea>
 </template>

package/src/components/sidebar.ts

@@ -23,4 +23,22 @@ export interface SidebarSection {
   /** Optional heading above the group. */
   title?: string
   items: SidebarItem[]
+  /**
+   * The heading folds the group away when clicked. Needs a `title` — there is
+   * nothing to click otherwise.
+   *
+   * A long nav is read by scanning headings, not items: past a certain length
+   * every item is equally far from the eye, and folding the groups that are
+   * not today's work restores that. Which groups start folded is the app's
+   * call (see `collapsedIds`), not this component's.
+   */
+  collapsible?: boolean
+  /**
+   * Stable key for remembering this group's folded state. Defaults to `title`;
+   * set it when the title is translated, so the memory survives a language
+   * change.
+   */
+  key?: string
+  /** Icon for the heading — shown when the group is collapsible. */
+  icon?: string
 }