@runwisp/ui 1.0.0 → 1.1.0

package/src/lib/components/DataGrid.svelte

@@ -3,8 +3,10 @@
 
 <script module lang="ts">
     import type { Snippet } from "svelte";
+    import { resolvePath } from "../utils/filter.js";
 
     export interface Column<T> {
+        /** Field shown and sorted on. Dot-paths ("user.name") read nested fields. */
         key: keyof T | string;
         label: string;
         sortable?: boolean;
@@ -20,7 +22,11 @@
         selectedRows?: T[];
         sortKey?: string;
         sortDirection?: "asc" | "desc";
+        /** Take over sorting (e.g. server-side). When set, the grid only reports
+         *  the clicked key and never reorders `data` itself. */
         onSort?: (key: string) => void;
+        /** Built-in fuzzy search box above the table. For typed filters use
+         *  `FilterBar` + `applyFilters` outside the grid instead. */
         filterable?: boolean;
         filterPlaceholder?: string;
         filterKeys?: string[];
@@ -29,6 +35,8 @@
         page?: number;
         pageSize?: number;
         pageSizeOptions?: number[];
+        /** Server mode: the full row count. `data` is then the current page as
+         *  delivered, so the grid skips its own filter, sort, and slicing. */
         total?: number;
         onPageChange?: (page: number) => void;
         onPageSizeChange?: (pageSize: number) => void;
@@ -43,9 +51,35 @@
         onRowClick?: (row: T) => void;
         loading?: boolean;
         stickyHeader?: boolean;
+        /** Hide the header row entirely — for single-column feeds (e.g. an
+         *  inbox) where a column label would be noise. */
+        showHeader?: boolean;
+        /** Rendered below the table body, inside the frame — e.g. a cursor
+         *  "Load more" button for feeds that don't use offset pagination. */
+        footer?: Snippet;
+        /** Drop the outer border/shadow/bg so the grid sits flush inside a Card
+         *  or panel that already supplies its own frame. */
+        bare?: boolean;
+        /** Extra classes per row — e.g. a left accent bar for a failing row.
+         *  Rows always carry `group`, so a `render`/`rowAction` snippet can use
+         *  `group-hover:` to reveal on-hover controls. */
+        rowClass?: (row: T) => string;
         class?: string;
         wrapperClass?: string;
     }
+
+    // Type-aware comparator. Nullish sorts last; numbers numerically; dates by
+    // epoch; everything else by locale with numeric-aware string compare.
+    // Returns 0 for non-comparable/equal, so a column whose key maps to no real
+    // field (a display-only key) leaves order untouched — sort stays inert there.
+    function compareValues(a: unknown, b: unknown): number {
+        if (a == null && b == null) return 0;
+        if (a == null) return 1;
+        if (b == null) return -1;
+        if (typeof a === "number" && typeof b === "number") return a - b;
+        if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+        return String(a).localeCompare(String(b), undefined, { numeric: true });
+    }
 </script>
 
 <script lang="ts" generics="T extends object">
@@ -53,6 +87,7 @@
     import Checkbox from "./Checkbox.svelte";
     import Input from "./Input.svelte";
     import Pagination from "./Pagination.svelte";
+    import Spinner from "./Spinner.svelte";
     import Fuse from "fuse.js";
     import { selectionState } from "./data-grid-selection.js";
 
@@ -86,6 +121,10 @@
         onRowClick,
         loading = false,
         stickyHeader = false,
+        showHeader = true,
+        footer,
+        bare = false,
+        rowClass,
         class: className = "",
         wrapperClass,
     }: DataGridProps<T> = $props();
@@ -147,7 +186,21 @@
         return fuse.search(filterQuery).map((r) => r.item);
     });
 
-    const totalItems = $derived(total ?? filteredData.length);
+    // Client-side sort. Off in server mode (`total` set) or when the parent
+    // drives sorting via `onSort`; otherwise reorder by the active key so a
+    // sortable header actually sorts. Stable + inert on display-only keys.
+    const sortedData = $derived.by(() => {
+        if (onSort || typeof total === "number" || !sortKey || !sortDirection) {
+            return filteredData;
+        }
+        const dir = sortDirection === "desc" ? -1 : 1;
+        const key = sortKey;
+        return [...filteredData].sort(
+            (a, b) => dir * compareValues(resolvePath(a, key), resolvePath(b, key)),
+        );
+    });
+
+    const totalItems = $derived(total ?? sortedData.length);
     const totalPages = $derived(Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize))));
 
     $effect(() => {
@@ -157,19 +210,25 @@
     });
 
     const pagedData = $derived.by(() => {
-        if (typeof total === "number") return filteredData;
-        if (!paginate) return filteredData;
+        if (typeof total === "number" || !paginate) return sortedData;
         const start = (page - 1) * pageSize;
-        return filteredData.slice(start, start + pageSize);
+        return sortedData.slice(start, start + pageSize);
     });
 
     const selection = $derived(selectionState(pagedData, selectedRows, rowKey));
     let allSelected = $derived(selection.allSelected);
     let someSelected = $derived(selection.someSelected);
+
+    // Cell rhythm — airy by default, tight when compact. Header + body share it.
+    const cellPad = $derived(compact ? "px-3 py-2" : "px-5 py-3.5");
+    // Hover reveals a teal accent rail on the leftmost cell (see .group on <tr>).
+    const railHover = "group-hover:shadow-[inset_3px_0_0_var(--color-primary)]";
 </script>
 
 <div
-    class="relative flex flex-col rounded-[4px] border border-outline bg-surface-raised shadow-sm {className}"
+    class="relative flex flex-col {bare
+        ? ''
+        : 'rounded-[4px] border border-outline bg-surface-raised shadow-sm'} {className}"
 >
     {#if filterable}
         <div class="border-b border-outline p-3">
@@ -198,85 +257,76 @@
                 <div
                     class="flex items-center gap-3 rounded-full border border-outline bg-surface-raised px-4 py-2 shadow-md"
                 >
-                    <svg class="h-5 w-5 animate-spin text-primary" viewBox="0 0 24 24" fill="none">
-                        <circle
-                            class="opacity-25"
-                            cx="12"
-                            cy="12"
-                            r="10"
-                            stroke="currentColor"
-                            stroke-width="4"
-                        ></circle>
-                        <path
-                            class="opacity-75"
-                            fill="currentColor"
-                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                        ></path>
-                    </svg>
+                    <Spinner size="sm" class="text-primary" />
                     <span class="font-mono text-sm text-on-surface-muted">Loading...</span>
                 </div>
             </div>
         {/if}
 
         <table class="w-full text-sm">
-            <thead
-                class={stickyHeader
-                    ? "sticky top-0 z-10 bg-surface-sunken/95 backdrop-blur-sm"
-                    : "bg-surface-sunken/50"}
-            >
-                <tr class="border-b border-outline text-left">
-                    {#if selectable}
-                        <th class="w-12 px-4 py-3">
-                            <Checkbox
-                                checked={allSelected}
-                                indeterminate={someSelected}
-                                onchange={toggleAll}
-                                size="sm"
-                            />
-                        </th>
-                    {/if}
-                    {#each columns as column (column.key)}
-                        <th
-                            class="
-							    group px-4 {compact ? 'py-2' : 'py-3'}
-							    font-mono text-xs tracking-wide text-on-surface-faint uppercase
-							    {column.align === 'center' ? 'text-center' : ''}
-							    {column.align === 'right' ? 'text-right' : ''}
-						    "
-                            style={column.width ? `width: ${column.width}` : ""}
-                        >
-                            {#if column.sortable}
-                                <button
-                                    onclick={() => handleSort(column.key as string)}
-                                    class="
-                                        inline-flex items-center gap-1 group-hover:text-on-surface
-                                        {sortKey === column.key ? 'text-on-surface' : ''}
-                                    "
-                                >
-                                    {column.label}
-                                    {#if sortKey === column.key}
-                                        {#if sortDirection === "asc"}
-                                            <ArrowUp size={14} class="text-primary" />
+            {#if showHeader}
+                <thead
+                    class={stickyHeader
+                        ? "sticky top-0 z-10 bg-surface-raised/95 backdrop-blur-sm"
+                        : ""}
+                >
+                    <tr class="border-b border-outline text-left">
+                        {#if selectable}
+                            <th class="w-12 {cellPad}">
+                                <Checkbox
+                                    checked={allSelected}
+                                    indeterminate={someSelected}
+                                    onchange={toggleAll}
+                                    size="sm"
+                                />
+                            </th>
+                        {/if}
+                        {#each columns as column (column.key)}
+                            <th
+                                class="
+                                    group {cellPad}
+                                    font-mono text-xs tracking-[0.08em] text-on-surface-faint uppercase
+                                    {column.align === 'center' ? 'text-center' : ''}
+                                    {column.align === 'right' ? 'text-right' : ''}
+                                    {sortKey === column.key
+                                    ? 'text-on-surface shadow-[inset_0_-2px_0_var(--color-primary)]'
+                                    : ''}
+                                "
+                                style={column.width ? `width: ${column.width}` : ""}
+                            >
+                                {#if column.sortable}
+                                    <button
+                                        onclick={() => handleSort(String(column.key))}
+                                        class="
+                                            inline-flex items-center gap-1 group-hover:text-on-surface
+                                            {sortKey === column.key ? 'text-on-surface' : ''}
+                                        "
+                                    >
+                                        {column.label}
+                                        {#if sortKey === column.key}
+                                            {#if sortDirection === "asc"}
+                                                <ArrowUp size={14} class="text-primary" />
+                                            {:else}
+                                                <ArrowDown size={14} class="text-primary" />
+                                            {/if}
                                         {:else}
-                                            <ArrowDown size={14} class="text-primary" />
+                                            <ArrowUpDown
+                                                size={14}
+                                                class="text-on-surface-faint opacity-0 group-hover:opacity-100"
+                                            />
                                         {/if}
-                                    {:else}
-                                        <ArrowUpDown
-                                            size={14}
-                                            class="text-on-surface-faint opacity-0 group-hover:opacity-100"
-                                        />
-                                    {/if}
-                                </button>
-                            {:else}
-                                {column.label}
-                            {/if}
-                        </th>
-                    {/each}
-                    {#if rowAction}
-                        <th class="w-16 px-4 py-3"></th>
-                    {/if}
-                </tr>
-            </thead>
+                                    </button>
+                                {:else}
+                                    {column.label}
+                                {/if}
+                            </th>
+                        {/each}
+                        {#if rowAction}
+                            <th class="w-16 {cellPad}"></th>
+                        {/if}
+                    </tr>
+                </thead>
+            {/if}
             <tbody>
                 {#if pagedData.length === 0 && !loading}
                     <tr>
@@ -295,18 +345,22 @@
                     {#each pagedData as row, idx (row[rowKey])}
                         <tr
                             class="
-							    border-b border-outline last:border-b-0
-							    {striped && idx % 2 === 1 ? 'bg-surface-sunken/30' : ''}
-							    {hoverable ? 'hover:bg-surface-sunken' : ''}
-							    {isSelected(row) ? 'bg-primary-soft/30' : ''}
-							    {onRowClick ? 'cursor-pointer' : ''}
-							    						    "
+                                group border-b border-outline-faint last:border-b-0
+                                {striped && idx % 2 === 1 ? 'bg-surface-sunken/30' : ''}
+                                {hoverable ? 'hover:bg-surface-sunken' : ''}
+                                {isSelected(row) ? 'bg-primary-soft/30' : ''}
+                                {onRowClick ? 'cursor-pointer' : ''}
+                                {rowClass ? rowClass(row) : ''}
+                            "
                             onclick={() => onRowClick?.(row)}
                         >
                             {#if selectable}
+                                <!-- stopPropagation: a selection click must never also
+                                     fire onRowClick (which usually navigates away). -->
                                 <td
-                                    class="px-4 {compact ? 'py-2' : 'py-3'} cursor-pointer"
+                                    class="{cellPad} cursor-pointer {hoverable ? railHover : ''}"
                                     onclick={(e) => {
+                                        e.stopPropagation();
                                         if (!(e.target instanceof HTMLInputElement)) toggleRow(row);
                                     }}
                                 >
@@ -317,13 +371,14 @@
                                     />
                                 </td>
                             {/if}
-                            {#each columns as column (column.key)}
+                            {#each columns as column, ci (column.key)}
                                 <td
                                     class="
-									    px-4 {compact ? 'py-2' : 'py-3'} text-on-surface-muted
-									    {column.align === 'center' ? 'text-center' : ''}
-									    {column.align === 'right' ? 'text-right' : ''}
-								    "
+                                        {cellPad} text-on-surface-muted
+                                        {column.align === 'center' ? 'text-center' : ''}
+                                        {column.align === 'right' ? 'text-right' : ''}
+                                        {ci === 0 && !selectable && hoverable ? railHover : ''}
+                                    "
                                 >
                                     {#if column.render}
                                         {@render column.render(row)}
@@ -331,13 +386,13 @@
                                         <!-- Raw field value: a token, so mono. Snippet-rendered
                                              cells choose their own voice. -->
                                         <span class="font-mono"
-                                            >{row[column.key as keyof T] ?? "-"}</span
+                                            >{resolvePath(row, String(column.key)) ?? "-"}</span
                                         >
                                     {/if}
                                 </td>
                             {/each}
                             {#if rowAction}
-                                <td class="px-4 {compact ? 'py-2' : 'py-3'} text-right">
+                                <td class="{cellPad} text-right">
                                     {@render rowAction(row)}
                                 </td>
                             {/if}
@@ -348,6 +403,12 @@
         </table>
     </div>
 
+    {#if footer}
+        <div class="border-t border-outline p-3">
+            {@render footer()}
+        </div>
+    {/if}
+
     {#if paginate}
         <div class="border-t border-outline p-3">
             <Pagination

package/src/lib/components/FilterBar.svelte

@@ -0,0 +1,156 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<!--
+  One filter bar for every table. Driven by a declarative `FilterField[]` +
+  a bound `values` object (see filter-spec.ts), the same way DataGrid is driven
+  by `Column[]`.
+
+  Progressive disclosure (Linear/Sentry-style): the row is a search box + a set
+  of filter pills + a "+ Add filter" menu + Reset. `primary` fields are always
+  shown as pills; every other field stays behind "+ Add filter" until the user
+  adds it, then lives as a pill. Each pill is self-contained (label + value +
+  clear in one element, see FilterPill) so activating a filter never adds a
+  second row — the table below never jumps. Data-mode agnostic: the parent feeds
+  `values` to applyFilters (client) or maps it to query params (server).
+-->
+
+<script lang="ts">
+    import { SvelteSet } from "svelte/reactivity";
+    import SearchInput from "./SearchInput.svelte";
+    import FilterPill from "./FilterPill.svelte";
+    import Popover from "./Popover.svelte";
+    import { Plus, RotateCcw } from "@lucide/svelte";
+    import {
+        type FilterField,
+        type FilterValues,
+        fieldKeys,
+        fieldLabel,
+        isFieldActive,
+    } from "./filter-spec.js";
+
+    let {
+        fields,
+        values = $bindable({}),
+        class: className = "",
+    }: {
+        fields: FilterField[];
+        values?: FilterValues;
+        class?: string;
+    } = $props();
+
+    const searchField = $derived(
+        fields.find((f): f is Extract<FilterField, { type: "search" }> => f.type === "search"),
+    );
+    const pillFields = $derived(fields.filter((f) => f.type !== "search"));
+    const isPrimary = (f: FilterField) => f.primary === true;
+
+    // Non-primary fields surface as pills only once active or explicitly added.
+    // `added` keeps a just-added-but-still-blank field visible while its editor
+    // is open; it's dropped again if the user closes the editor without a value.
+    const added = new SvelteSet<string>();
+    const isShown = (f: FilterField) =>
+        isPrimary(f) || isFieldActive(f, values) || added.has(f.key);
+    const shownPills = $derived(pillFields.filter(isShown));
+    const addable = $derived(pillFields.filter((f) => !isShown(f)));
+
+    const anyActive = $derived(fields.some((f) => isFieldActive(f, values)));
+
+    let justAdded = $state<string | null>(null);
+    let addOpen = $state(false);
+    let searchEl = $state<HTMLInputElement | null>(null);
+
+    function addFilter(f: FilterField) {
+        added.add(f.key);
+        justAdded = f.key;
+        addOpen = false;
+    }
+
+    function onPillClose(f: FilterField) {
+        if (justAdded === f.key) justAdded = null;
+        if (!isPrimary(f) && !isFieldActive(f, values)) added.delete(f.key);
+    }
+
+    function clearField(f: FilterField) {
+        for (const k of fieldKeys(f)) values[k] = "";
+    }
+
+    function reset() {
+        for (const f of fields) clearField(f);
+        added.clear();
+    }
+
+    // `/` focuses the search box, unless the user is already typing somewhere.
+    function onWindowKeydown(e: KeyboardEvent) {
+        if (e.key !== "/" || !searchEl) return;
+        const t = e.target;
+        if (
+            t instanceof HTMLElement &&
+            (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)
+        )
+            return;
+        e.preventDefault();
+        searchEl.focus();
+    }
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+<div class="flex flex-wrap items-center gap-2 {className}">
+    {#if searchField}
+        <SearchInput
+            bind:value={values[searchField.key]}
+            bind:element={searchEl}
+            placeholder={searchField.placeholder ?? "Search..."}
+        />
+    {/if}
+
+    {#each shownPills as field (field.key)}
+        <FilterPill
+            {field}
+            bind:values
+            autoOpen={justAdded === field.key}
+            onClose={() => onPillClose(field)}
+        />
+    {/each}
+
+    {#if addable.length > 0}
+        <Popover bind:open={addOpen} placement="bottom-start" mobileSheet>
+            {#snippet trigger()}
+                <span
+                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-[3px] border border-dashed border-outline-hover bg-transparent px-3 py-2 text-sm text-on-surface-muted hover:border-solid hover:bg-surface-raised hover:text-on-surface"
+                >
+                    <Plus size={14} />
+                    {shownPills.length > 0 ? "Filter" : "Add filter"}
+                </span>
+            {/snippet}
+            <div class="flex w-48 flex-col gap-0.5">
+                {#each addable as field (field.key)}
+                    <button
+                        type="button"
+                        class="rounded-[3px] px-2.5 py-1.5 text-left text-sm text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface"
+                        onclick={(e) => {
+                            // Stop the click reaching window: the pill we're about
+                            // to add auto-opens its editor, and this same click would
+                            // otherwise trip that fresh Popover's outside-click close.
+                            e.stopPropagation();
+                            addFilter(field);
+                        }}
+                    >
+                        {fieldLabel(field)}
+                    </button>
+                {/each}
+            </div>
+        </Popover>
+    {/if}
+
+    {#if anyActive}
+        <button
+            class="inline-flex items-center gap-1.5 rounded-[3px] px-2.5 py-2 text-sm font-medium text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface"
+            onclick={reset}
+        >
+            <RotateCcw size={14} />
+            Reset
+        </button>
+    {/if}
+</div>