@kelpie/ui 0.7.0 → 0.8.0

package/src/lib/listView.ts

@@ -0,0 +1,149 @@
+import type { ListViewPreference } from '@kelpie/schemas'
+import { useCallback, useMemo } from 'react'
+
+import { useAccountPreferences, useUpdateAccountPreferences } from '../api/resources/account.ts'
+
+/**
+ * The saved view state a list or board page shows the signed-in person.
+ *
+ * `defaultVisible` is the columns a person sees before they have ever
+ * customised this view. `useListView` hides no column until preferences load —
+ * a request that has not answered yet is not the same as "the person chose to
+ * hide everything," and drawing an empty table under a spinner reads as
+ * broken.
+ *
+ * `mode`, `grouping`, `scope`, and `sort` mirror the four knobs a pipeline
+ * page carries: the board-vs-list toggle, the list grouping, the pipeline
+ * scope, and the current sort. Each returns `undefined` when the person has
+ * not made a choice; the page decides its own default and passes it to the
+ * relevant control. A setter called with `undefined` clears the stored
+ * value, which is how a person returns a knob to "let the page decide".
+ *
+ * The set of column ids the page supports is the source of truth for what is
+ * saveable. A stored id the page no longer recognises is ignored, and a page
+ * column added since the last save falls back to `defaultVisible`.
+ */
+/**
+ * A partial update to the stored preference. A key set to `undefined` removes
+ * it, so a setter can return a knob to "use the page's default".
+ */
+interface ListViewPatch {
+  readonly columns?: readonly string[] | undefined
+  readonly mode?: 'list' | 'columns' | undefined
+  readonly grouping?: string | undefined
+  readonly scope?: string | undefined
+  readonly sort?: string | undefined
+}
+
+export interface ListViewController {
+  readonly visibleKeys: readonly string[]
+  readonly setVisibleKeys: (keys: readonly string[]) => void
+  readonly mode: 'list' | 'columns' | undefined
+  readonly setMode: (mode: 'list' | 'columns' | undefined) => void
+  readonly grouping: string | undefined
+  readonly setGrouping: (grouping: string | undefined) => void
+  readonly scope: string | undefined
+  readonly setScope: (scope: string | undefined) => void
+  readonly sort: string | undefined
+  readonly setSort: (sort: string | undefined) => void
+  readonly isLoading: boolean
+}
+
+export function useListView(
+  viewId: string,
+  supportedKeys: readonly string[],
+  defaultVisible: readonly string[],
+): ListViewController {
+  const { preferences, isLoading } = useAccountPreferences()
+  const update = useUpdateAccountPreferences()
+  const stored = preferences?.listViews[viewId]
+
+  const visibleKeys = useMemo(() => {
+    const cols = stored?.columns
+
+    if (cols === undefined) {
+      return defaultVisible
+    }
+
+    // A stored id the page no longer knows about is dropped, and if the filter
+    // strips the whole list the default fills in — a page that lost every
+    // recognised column to a rename should not render as empty.
+    const kept = cols.filter((key) => supportedKeys.includes(key))
+
+    return kept.length === 0 ? defaultVisible : kept
+  }, [stored, supportedKeys, defaultVisible])
+
+  const patchView = useCallback(
+    (patch: ListViewPatch): void => {
+      // Merge into the existing entry so a change to one knob does not wipe
+      // the other four. A key set to `undefined` in `patch` is removed from
+      // the stored entry, so a setter can return a knob to "use the default".
+      const merged: Record<string, unknown> = { ...(stored ?? {}) }
+
+      for (const [key, value] of Object.entries(patch)) {
+        if (value === undefined) {
+          delete merged[key]
+        } else {
+          merged[key] = value
+        }
+      }
+
+      const nextViews: Record<string, ListViewPreference> = {
+        ...(preferences?.listViews ?? {}),
+        [viewId]: merged as ListViewPreference,
+      }
+
+      update.run({ listViews: nextViews })
+    },
+    [preferences, stored, update, viewId],
+  )
+
+  const setVisibleKeys = useCallback(
+    (keys: readonly string[]) => {
+      patchView({ columns: keys })
+    },
+    [patchView],
+  )
+
+  const setMode = useCallback(
+    (mode: 'list' | 'columns' | undefined) => {
+      patchView({ mode })
+    },
+    [patchView],
+  )
+
+  const setGrouping = useCallback(
+    (grouping: string | undefined) => {
+      patchView({ grouping })
+    },
+    [patchView],
+  )
+
+  const setScope = useCallback(
+    (scope: string | undefined) => {
+      patchView({ scope })
+    },
+    [patchView],
+  )
+
+  const setSort = useCallback(
+    (sort: string | undefined) => {
+      patchView({ sort })
+    },
+    [patchView],
+  )
+
+  return {
+    visibleKeys,
+    setVisibleKeys,
+    mode: stored?.mode,
+    setMode,
+    grouping: stored?.grouping,
+    setGrouping,
+    scope: stored?.scope,
+    setScope,
+    sort: stored?.sort,
+    setSort,
+    isLoading,
+  }
+}

package/src/lib/sort.ts

@@ -0,0 +1,143 @@
+/**
+ * Comparators for the DataTable's client-side sort path.
+ *
+ * The server-side path is a keyset over an indexed column, so a page-local sort
+ * is different in kind: it only orders the records the current page holds.
+ * Anything on another page keeps the resource's own default order — which is
+ * why a "sorted on this page" hint sits under any table sorted this way.
+ */
+
+export type SortDirection = 'asc' | 'desc'
+
+/**
+ * Returns the sort string that should reach the server, dropping any that
+ * names a client-only column. A page holds the active sort as a single string;
+ * this lets it pass an unfiltered `sort` to `<DataTable>` (so the header shows
+ * an arrow either way) while only forwarding server-sortable choices to its
+ * `useX({ sort: serverSortOnly(sort, sortKeys) })` call.
+ *
+ * `sortKeys` is the set of `Column.sortKey` values on the page — the fields
+ * the resource's `_SORTS` map accepts. A `sort` naming anything else answers
+ * `undefined`, which drops back to the resource's own default order.
+ */
+export function serverSortOnly(
+  sort: string | undefined,
+  sortKeys: readonly string[],
+): string | undefined {
+  if (sort === undefined) {
+    return undefined
+  }
+
+  const bare = sort.startsWith('-') ? sort.slice(1) : sort
+
+  return sortKeys.includes(bare) ? sort : undefined
+}
+
+/**
+ * A value the sort knows how to compare. `null` (and `undefined`) always sort
+ * to the bottom, regardless of direction — a missing value is not "less than"
+ * or "greater than" anything, and pinning it to one end reads better than
+ * scattering the blanks through the middle.
+ */
+export type SortValue = string | number | Date | boolean | readonly string[] | null | undefined
+
+function typeRank(value: SortValue): number {
+  if (value === null || value === undefined) {
+    return 0
+  }
+
+  if (typeof value === 'string') {
+    return value.length === 0 ? 0 : 1
+  }
+
+  if (Array.isArray(value)) {
+    return value.length === 0 ? 0 : 1
+  }
+
+  return 1
+}
+
+/** Returns a negative number if `a` sorts before `b`, positive if after, 0 for equal. */
+export function compareValues(a: SortValue, b: SortValue): number {
+  const rankA = typeRank(a)
+  const rankB = typeRank(b)
+
+  // Missing values sink to the bottom of the ascending order and stay there
+  // when reversed. The direction reversal is the caller's job — a null being
+  // "always last" is a property of the value, not of the direction.
+  if (rankA === 0 && rankB === 0) {
+    return 0
+  }
+
+  if (rankA === 0) {
+    return 1
+  }
+
+  if (rankB === 0) {
+    return -1
+  }
+
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() - b.getTime()
+  }
+
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a - b
+  }
+
+  if (typeof a === 'boolean' && typeof b === 'boolean') {
+    return a === b ? 0 : a ? -1 : 1
+  }
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.join(', ').localeCompare(b.join(', '), undefined, { sensitivity: 'base', numeric: true })
+  }
+
+  return String(a).localeCompare(String(b), undefined, { sensitivity: 'base', numeric: true })
+}
+
+/**
+ * Stable sort by a caller-supplied accessor. `Array.prototype.sort` is not
+ * guaranteed stable across every engine JS runs on, so ties fall back to the
+ * original index — otherwise switching direction on a column with many ties
+ * would reshuffle equal rows on every click.
+ *
+ * Missing values (null, undefined, empty string, empty array) pin to the
+ * bottom in both directions. Reversing "asc null-last" as a signed compare
+ * would put nulls on top under desc, which reads as broken — the direction
+ * flip is applied only after the null pin is resolved.
+ */
+export function sortRowsBy<TRow>(
+  rows: readonly TRow[],
+  getValue: (row: TRow) => SortValue,
+  direction: SortDirection,
+): TRow[] {
+  const indexed = rows.map((row, index) => ({ row, index, value: getValue(row) }))
+
+  indexed.sort((left, right) => {
+    const leftMissing = typeRank(left.value) === 0
+    const rightMissing = typeRank(right.value) === 0
+
+    if (leftMissing && rightMissing) {
+      return left.index - right.index
+    }
+
+    if (leftMissing) {
+      return 1
+    }
+
+    if (rightMissing) {
+      return -1
+    }
+
+    const compared = compareValues(left.value, right.value)
+
+    if (compared !== 0) {
+      return direction === 'asc' ? compared : -compared
+    }
+
+    return left.index - right.index
+  })
+
+  return indexed.map((entry) => entry.row)
+}

package/src/pages/CompaniesPage.tsx

@@ -2,13 +2,19 @@ import type { Company, IcpFit } from '@kelpie/schemas'
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useCompanies, useCreateCompany } from '../api/resources/companies.ts'
 import { Chip } from '../components/Chip.tsx'
 import type { ChipTone } from '../components/Chip.tsx'
+import { ColumnPicker } from '../components/ColumnPicker.tsx'
 import { DataTable } from '../components/DataTable.tsx'
 import type { Column } from '../components/DataTable.tsx'
 import { FilterBar, PageHeader } from '../components/PageHeader.tsx'
+import { Paginator } from '../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+import { formatDate } from '../lib/dates.ts'
+import { useListView } from '../lib/listView.ts'
+import { serverSortOnly } from '../lib/sort.ts'
 import { useCompanyHeadcounts } from './positionDirectory.ts'
 
 /**
@@ -26,12 +32,20 @@ const ICP_TONES: Readonly<Record<IcpFit, ChipTone>> = {
   unknown: 'neutral',
 }
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'domain', 'hq', 'type', 'updatedAt']
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
 export function CompaniesPage(): React.JSX.Element {
   const [term, setTerm] = useState('')
   const [sort, setSort] = useState<string | undefined>(undefined)
   const navigate = useNavigate()
+  const timezone = useTimezone()
   const hasFilter = term.trim().length > 0
-  const companies = useCompanies({ term: hasFilter ? term.trim() : undefined, sort })
+  const companies = useCompanies({
+    term: hasFilter ? term.trim() : undefined,
+    sort: serverSortOnly(sort, SERVER_SORT_KEYS),
+  })
   const headcounts = useCompanyHeadcounts(companies.records.map((company) => company.id))
   const createCompany = useCreateCompany()
 
@@ -51,30 +65,130 @@ export function CompaniesPage(): React.JSX.Element {
     {
       key: 'domain',
       header: 'Domain',
+      getSortValue: (company) => company.domain,
       render: (company) => (
         <span className="font-mono text-[12px] text-ink-muted">{company.domain ?? '—'}</span>
       ),
     },
+    {
+      key: 'website',
+      header: 'Website',
+      getSortValue: (company) => company.website,
+      render: (company) => (
+        <span className="font-mono text-[12px] text-ink-muted">{company.website ?? '—'}</span>
+      ),
+    },
+    {
+      key: 'industry',
+      header: 'Industry',
+      getSortValue: (company) => company.industry,
+      render: (company) => company.industry ?? '—',
+    },
+    {
+      key: 'hq',
+      header: 'HQ',
+      getSortValue: (company) => company.hq,
+      render: (company) => company.hq ?? '—',
+    },
     {
       key: 'type',
       header: 'Type',
+      getSortValue: (company) => company.accountType,
       render: (company) => <span className="capitalize">{company.accountType}</span>,
     },
+    {
+      key: 'stage',
+      header: 'Stage',
+      getSortValue: (company) => company.stage,
+      render: (company) => <span className="capitalize">{company.stage}</span>,
+    },
+    {
+      key: 'sizeBand',
+      header: 'Size',
+      getSortValue: (company) => company.sizeBand,
+      render: (company) => company.sizeBand,
+    },
     {
       key: 'icp',
       header: 'ICP fit',
+      getSortValue: (company) => company.icpFit,
       render: (company) => <Chip tone={ICP_TONES[company.icpFit]}>{company.icpFit}</Chip>,
     },
+    {
+      key: 'techStack',
+      header: 'Tech stack',
+      getSortValue: (company) => company.techStack.join(', ') || null,
+      render: (company) =>
+        company.techStack.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {company.techStack.map((entry) => (
+              <Chip key={entry}>
+                <span className="text-[10px]">{entry}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'description',
+      header: 'Description',
+      getSortValue: (company) => company.description || null,
+      render: (company) =>
+        company.description.length === 0 ? '—' : (
+          <span className="text-ink-muted">{company.description}</span>
+        ),
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (company) => company.summary || null,
+      render: (company) =>
+        company.summary.length === 0 ? '—' : (
+          <span className="text-ink-muted">{company.summary}</span>
+        ),
+    },
+    {
+      key: 'tags',
+      header: 'Tags',
+      getSortValue: (company) => company.tags.join(', ') || null,
+      render: (company) =>
+        company.tags.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {company.tags.map((tag) => (
+              <Chip key={tag}>
+                <span className="text-[10px]">{tag}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
     {
       key: 'people',
       header: 'People',
       className: 'w-20',
+      getSortValue: (company) => headcounts.countFor(company.id),
       render: (company) => (
         <span className="font-mono text-[12px]">{headcounts.countFor(company.id)}</span>
       ),
     },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (company) => formatDate(company.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (company) => formatDate(company.updatedAt, timezone),
+    },
   ]
 
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('companies', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   return (
     <div className="animate-fade-in">
       <PageHeader
@@ -83,6 +197,13 @@ export function CompaniesPage(): React.JSX.Element {
           void addCompany()
         }}
         addLabel="Add company"
+        actions={
+          <ColumnPicker
+            options={pickerOptions}
+            visibleKeys={listView.visibleKeys}
+            onChange={listView.setVisibleKeys}
+          />
+        }
       />
       <FilterBar value={term} onChange={setTerm} placeholder="Filter by name, type, tags…" />
 
@@ -98,6 +219,7 @@ export function CompaniesPage(): React.JSX.Element {
         <LoadingPanel label="Loading companies…" />
       ) : (
         <>
+          <Paginator list={companies} placement="top" />
           <DataTable
             columns={columns}
             rows={companies.records}
@@ -119,6 +241,7 @@ export function CompaniesPage(): React.JSX.Element {
             }
             sort={sort}
             onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
           />
           {!headcounts.isComplete && !headcounts.isLoading && (
             <p className="mt-2 text-[11px] text-ink-faint">
@@ -126,16 +249,7 @@ export function CompaniesPage(): React.JSX.Element {
               a floor rather than a total.
             </p>
           )}
-          {companies.hasMore && (
-            <button
-              type="button"
-              onClick={companies.loadMore}
-              disabled={companies.isLoadingMore}
-              className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken disabled:opacity-50"
-            >
-              {companies.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
+          <Paginator list={companies} />
         </>
       )}
     </div>