@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/ListsPage.tsx

@@ -0,0 +1,281 @@
+import {
+  RECORD_TARGET_TYPE_LABELS,
+  RECORD_TARGET_TYPES,
+} from '@kelpie/schemas'
+import type { List, RecordTargetType } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { useNavigate } from 'react-router'
+
+import { useTimezone } from '../api/resources/account.ts'
+import { useCreateList, useLists } from '../api/resources/lists.ts'
+import { Chip } 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'
+
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'type', 'members', 'description']
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
+/**
+ * The Lists index.
+ *
+ * A list holds records of one type, chosen at creation and never changed. The
+ * "Add list" button opens a small inline form that captures name and type; on
+ * create, the user is taken straight to the list's detail page.
+ */
+export function ListsPage(): React.JSX.Element {
+  const [term, setTerm] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [sort, setSort] = useState<string | undefined>(undefined)
+  const navigate = useNavigate()
+  const hasFilter = term.trim().length > 0
+  const lists = useLists({
+    term: hasFilter ? term.trim() : undefined,
+    sort: serverSortOnly(sort, SERVER_SORT_KEYS),
+  })
+  const createList = useCreateList()
+  const timezone = useTimezone()
+
+  const columns: readonly Column<List>[] = [
+    {
+      key: 'name',
+      header: 'Name',
+      sortKey: 'name',
+      render: (list) => <span className="font-medium text-ink">{list.name}</span>,
+    },
+    {
+      key: 'type',
+      header: 'Type',
+      getSortValue: (list) => RECORD_TARGET_TYPE_LABELS[list.targetType],
+      render: (list) => <Chip>{RECORD_TARGET_TYPE_LABELS[list.targetType]}</Chip>,
+    },
+    {
+      key: 'members',
+      header: 'Members',
+      getSortValue: (list) => list.memberCount,
+      render: (list) => String(list.memberCount),
+    },
+    {
+      key: 'description',
+      header: 'Description',
+      getSortValue: (list) => list.description,
+      render: (list) => list.description ?? '—',
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (list) => formatDate(list.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (list) => formatDate(list.updatedAt, timezone),
+    },
+  ]
+
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('lists', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader
+        title="Lists"
+        onAdd={() => {
+          setCreating((current) => !current)
+        }}
+        addLabel="Add list"
+        actions={
+          <ColumnPicker
+            options={pickerOptions}
+            visibleKeys={listView.visibleKeys}
+            onChange={listView.setVisibleKeys}
+          />
+        }
+      />
+
+      {creating && (
+        <CreateListForm
+          isPending={createList.isPending}
+          error={createList.error}
+          onCancel={() => {
+            setCreating(false)
+          }}
+          onSubmit={(input) => {
+            createList
+              .runAsync(input)
+              .then((list) => {
+                setCreating(false)
+                return navigate(`/lists/${list.id}`)
+              })
+              .catch(() => undefined)
+          }}
+        />
+      )}
+
+      <FilterBar value={term} onChange={setTerm} placeholder="Filter by name…" />
+
+      {lists.error !== null ? (
+        <ErrorPanel error={lists.error} />
+      ) : lists.isLoading ? (
+        <LoadingPanel label="Loading lists…" />
+      ) : (
+        <>
+          <Paginator list={lists} placement="top" />
+          <DataTable
+            columns={columns}
+            rows={lists.records}
+            getRowId={(list) => list.id}
+            onRowClick={(list) => {
+              void navigate(`/lists/${list.id}`)
+            }}
+            emptyMessage={hasFilter ? 'No lists match this filter' : 'No lists yet'}
+            emptyDescription={
+              hasFilter ? 'Try a different search term.' : 'Add a list to group records together.'
+            }
+            emptyAction={
+              hasFilter
+                ? undefined
+                : {
+                    label: 'Add list',
+                    onClick: () => {
+                      setCreating(true)
+                    },
+                  }
+            }
+            sort={sort}
+            onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
+          />
+          <Paginator list={lists} />
+        </>
+      )}
+    </div>
+  )
+}
+
+interface CreateListFormProps {
+  readonly isPending: boolean
+  readonly error: Error | null
+  readonly onCancel: () => void
+  readonly onSubmit: (input: {
+    readonly name: string
+    readonly targetType: RecordTargetType
+    readonly description: string | null
+  }) => void
+}
+
+function CreateListForm({
+  isPending,
+  error,
+  onCancel,
+  onSubmit,
+}: CreateListFormProps): React.JSX.Element {
+  const [name, setName] = useState('')
+  const [targetType, setTargetType] = useState<RecordTargetType>('person')
+  const [description, setDescription] = useState('')
+
+  function submit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault()
+    const trimmed = name.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    onSubmit({
+      name: trimmed,
+      targetType,
+      description: description.trim().length > 0 ? description.trim() : null,
+    })
+  }
+
+  return (
+    <form
+      onSubmit={submit}
+      className="mb-4 rounded-md border border-border bg-surface-raised p-4"
+    >
+      <div className="grid gap-3 sm:grid-cols-2">
+        <label className="flex flex-col gap-1">
+          <span className="text-[11px] font-semibold tracking-wide text-ink-faint uppercase">
+            Name
+          </span>
+          <input
+            value={name}
+            onChange={(event) => {
+              setName(event.target.value)
+            }}
+            required
+            autoFocus
+            placeholder="Priority people"
+            className="rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+        </label>
+        <label className="flex flex-col gap-1">
+          <span className="text-[11px] font-semibold tracking-wide text-ink-faint uppercase">
+            Type
+          </span>
+          <select
+            value={targetType}
+            onChange={(event) => {
+              setTargetType(event.target.value as RecordTargetType)
+            }}
+            className="rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          >
+            {RECORD_TARGET_TYPES.map((type) => (
+              <option key={type} value={type}>
+                {RECORD_TARGET_TYPE_LABELS[type]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="flex flex-col gap-1 sm:col-span-2">
+          <span className="text-[11px] font-semibold tracking-wide text-ink-faint uppercase">
+            Description
+          </span>
+          <input
+            value={description}
+            onChange={(event) => {
+              setDescription(event.target.value)
+            }}
+            placeholder="Optional"
+            className="rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+        </label>
+      </div>
+
+      {error !== null && (
+        <div className="mt-3">
+          <ErrorPanel error={error} />
+        </div>
+      )}
+
+      <div className="mt-3 flex gap-2">
+        <button
+          type="submit"
+          disabled={isPending || name.trim().length === 0}
+          className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-accent-ink transition hover:bg-accent-strong disabled:opacity-50"
+        >
+          {isPending ? 'Creating…' : 'Create list'}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-md px-2.5 py-1.5 text-[12px] font-medium text-ink-muted hover:text-ink"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/pages/OpportunitiesPage.tsx

@@ -1,5 +1,4 @@
 import type { Opportunity, PipelineStage } from '@kelpie/schemas'
-import { useState } from 'react'
 import { Link, useNavigate } from 'react-router'
 
 import { useCompanies } from '../api/resources/companies.ts'
@@ -11,16 +10,21 @@ import {
 } from '../api/resources/opportunities.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
 import { MAX_PAGE_SIZE, usePlanItems } from '../api/resources/planItems.ts'
+import { useTimezone } from '../api/resources/account.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, DataTableGroup } from '../components/DataTable.tsx'
 import { KanbanBoard } from '../components/KanbanBoard.tsx'
 import { PageHeader } from '../components/PageHeader.tsx'
+import { Paginator } from '../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
 import { SegmentedControl } from '../components/SegmentedControl.tsx'
-import { formatDay } from '../lib/dates.ts'
+import { formatDate, formatDay } from '../lib/dates.ts'
+import { useListView } from '../lib/listView.ts'
 import { DUE_BUCKETS, byDateThenTitle, dueBucketFor, nextOpenByTarget } from '../lib/plan.ts'
+import { serverSortOnly } from '../lib/sort.ts'
 
 /**
  * The Opportunities pipeline: grants, accelerators, tenders, press, speaking.
@@ -32,6 +36,31 @@ type BoardView = 'list' | 'columns'
 type PipelineScope = 'open' | 'all'
 type ListGrouping = 'stage' | 'due'
 
+const SCOPES: readonly PipelineScope[] = ['open', 'all']
+const GROUPINGS: readonly ListGrouping[] = ['stage', 'due']
+
+function readScope(stored: string | undefined): PipelineScope {
+  return SCOPES.includes(stored as PipelineScope) ? (stored as PipelineScope) : 'open'
+}
+
+function readGrouping(stored: string | undefined): ListGrouping {
+  return GROUPINGS.includes(stored as ListGrouping) ? (stored as ListGrouping) : 'stage'
+}
+
+const COLUMN_KEYS: readonly string[] = [
+  'name',
+  'kind',
+  'company',
+  'stage',
+  'nextPlan',
+  'owner',
+  'close',
+  'tags',
+  'summary',
+  'createdAt',
+  'updatedAt',
+]
+
 /** Tones keyed by the seeded slugs. A renamed stage keeps its slug and its tone. */
 const STAGE_TONES: Readonly<Record<string, ChipTone>> = {
   won: 'success',
@@ -44,19 +73,33 @@ function stageTone(stage: PipelineStage): ChipTone {
   return STAGE_TONES[stage.slug] ?? 'neutral'
 }
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = [
+  'name',
+  'kind',
+  'company',
+  'nextPlan',
+  'owner',
+  'close',
+]
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
 export function OpportunitiesPage(): React.JSX.Element {
   const navigate = useNavigate()
-  const [view, setView] = useState<BoardView>('list')
-  const [scope, setScope] = useState<PipelineScope>('open')
-  const [grouping, setGrouping] = useState<ListGrouping>('stage')
-  const [sort, setSort] = useState<string | undefined>(undefined)
+
+  const listView = useListView('opportunities', COLUMN_KEYS, DEFAULT_VISIBLE_KEYS)
+  const view: BoardView = listView.mode ?? 'columns'
+  const scope = readScope(listView.scope)
+  const grouping = readGrouping(listView.grouping)
+  const sort = listView.sort
 
   const stages = usePipelineStages('opportunity')
-  const opportunities = useOpportunities({ sort })
+  const opportunities = useOpportunities({ sort: serverSortOnly(sort, SERVER_SORT_KEYS) })
   const companies = useCompanies({ limit: 200 })
   const members = useMembers()
   const createOpportunity = useCreateOpportunity()
   const updateOpportunity = useUpdateOpportunity()
+  const timezone = useTimezone()
 
   const allStages = [...stages.records].sort((a, b) => a.sortOrder - b.sortOrder)
   const visibleStages = scope === 'open' ? allStages.filter((stage) => stage.open) : allStages
@@ -79,7 +122,7 @@ export function OpportunitiesPage(): React.JSX.Element {
     { enabled: askedIds.length > 0 },
   )
   const nextPlanByOpportunity = nextOpenByTarget(planItems.records)
-  const plansTruncated = visibleOpportunities.length > MAX_PAGE_SIZE || planItems.hasMore
+  const plansTruncated = visibleOpportunities.length > MAX_PAGE_SIZE || planItems.hasNext
 
   const companyNameById = new Map(companies.records.map((company) => [company.id, company.name]))
 
@@ -89,6 +132,8 @@ export function OpportunitiesPage(): React.JSX.Element {
     await navigate(`/opportunities/${opportunity.id}`)
   }
 
+  const stageLabelById = new Map(allStages.map((stage) => [stage.id, stage.label]))
+
   const columns: readonly Column<Opportunity>[] = [
     {
       key: 'name',
@@ -99,19 +144,29 @@ export function OpportunitiesPage(): React.JSX.Element {
     {
       key: 'kind',
       header: 'Kind',
+      getSortValue: (opportunity) => opportunity.kind || null,
       render: (opportunity) => (opportunity.kind.length > 0 ? opportunity.kind : '—'),
     },
     {
       key: 'company',
       header: 'Company',
+      getSortValue: (opportunity) =>
+        opportunity.companyId === null ? null : (companyNameById.get(opportunity.companyId) ?? null),
       render: (opportunity) =>
         opportunity.companyId === null
           ? '—'
           : (companyNameById.get(opportunity.companyId) ?? '—'),
     },
+    {
+      key: 'stage',
+      header: 'Stage',
+      getSortValue: (opportunity) => stageLabelById.get(opportunity.stageId) ?? null,
+      render: (opportunity) => stageLabelById.get(opportunity.stageId) ?? '—',
+    },
     {
       key: 'nextPlan',
       header: 'Next plan',
+      getSortValue: (opportunity) => nextPlanByOpportunity.get(opportunity.id)?.date ?? null,
       render: (opportunity) => {
         const next = nextPlanByOpportunity.get(opportunity.id)
 
@@ -132,6 +187,10 @@ export function OpportunitiesPage(): React.JSX.Element {
     {
       key: 'owner',
       header: 'Owner',
+      getSortValue: (opportunity) =>
+        opportunity.ownerId === null
+          ? null
+          : (members.nameById.get(opportunity.ownerId) ?? 'Unknown'),
       render: (opportunity) =>
         opportunity.ownerId === null
           ? '—'
@@ -141,14 +200,53 @@ export function OpportunitiesPage(): React.JSX.Element {
       key: 'close',
       header: 'Close',
       className: 'w-28',
+      getSortValue: (opportunity) => opportunity.expectedClose,
       render: (opportunity) => (
         <span className="font-mono text-[12px] text-ink-muted">
           {opportunity.expectedClose === null ? '—' : formatDay(opportunity.expectedClose)}
         </span>
       ),
     },
+    {
+      key: 'tags',
+      header: 'Tags',
+      getSortValue: (opportunity) => opportunity.tags.join(', ') || null,
+      render: (opportunity) =>
+        opportunity.tags.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {opportunity.tags.map((tag) => (
+              <Chip key={tag}>
+                <span className="text-[10px]">{tag}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (opportunity) => opportunity.summary || null,
+      render: (opportunity) =>
+        opportunity.summary.length === 0 ? '—' : (
+          <span className="text-ink-muted">{opportunity.summary}</span>
+        ),
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (opportunity) => formatDate(opportunity.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (opportunity) => formatDate(opportunity.updatedAt, timezone),
+    },
   ]
 
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   const stageGroups: readonly DataTableGroup<Opportunity>[] = visibleStages.map((stage) => ({
     id: stage.id,
     label: <Chip tone={stageTone(stage)}>{stage.label}</Chip>,
@@ -219,7 +317,9 @@ export function OpportunitiesPage(): React.JSX.Element {
             <SegmentedControl
               ariaLabel="Stage scope"
               value={scope}
-              onChange={setScope}
+              onChange={(next) => {
+                listView.setScope(next)
+              }}
               options={[
                 { id: 'open', label: 'Open' },
                 { id: 'all', label: 'All' },
@@ -229,7 +329,9 @@ export function OpportunitiesPage(): React.JSX.Element {
               <SegmentedControl
                 ariaLabel="Group the list"
                 value={grouping}
-                onChange={setGrouping}
+                onChange={(next) => {
+                  listView.setGrouping(next)
+                }}
                 options={[
                   { id: 'stage', label: 'By stage' },
                   { id: 'due', label: 'By due' },
@@ -239,12 +341,21 @@ export function OpportunitiesPage(): React.JSX.Element {
             <SegmentedControl
               ariaLabel="Board or list"
               value={view}
-              onChange={setView}
+              onChange={(next) => {
+                listView.setMode(next)
+              }}
               options={[
                 { id: 'list', label: 'List' },
                 { id: 'columns', label: 'Board' },
               ]}
             />
+            {view === 'list' && (
+              <ColumnPicker
+                options={pickerOptions}
+                visibleKeys={listView.visibleKeys}
+                onChange={listView.setVisibleKeys}
+              />
+            )}
           </>
         }
       />
@@ -261,6 +372,7 @@ export function OpportunitiesPage(): React.JSX.Element {
         <LoadingPanel label="Loading opportunities…" />
       ) : (
         <>
+          {view === 'list' && <Paginator list={opportunities} placement="top" />}
           {view === 'columns' ? (
             <KanbanBoard
               stages={visibleStages.map((stage) => ({ id: stage.id, label: stage.label }))}
@@ -307,13 +419,16 @@ export function OpportunitiesPage(): React.JSX.Element {
                     ? {
                         label: 'Show all opportunities',
                         onClick: () => {
-                          setScope('all')
+                          listView.setScope('all')
                         },
                       }
                     : undefined
               }
               sort={sort}
-              onSortChange={setSort}
+              onSortChange={(next) => {
+                listView.setSort(next)
+              }}
+              visibleColumnKeys={listView.visibleKeys}
             />
           )}
           {updateOpportunity.error !== null && (
@@ -321,17 +436,8 @@ export function OpportunitiesPage(): React.JSX.Element {
               <ErrorPanel error={updateOpportunity.error} />
             </div>
           )}
-          {opportunities.hasMore && (
-            <button
-              type="button"
-              onClick={opportunities.loadMore}
-              disabled={opportunities.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"
-            >
-              {opportunities.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
-          {companies.hasMore && (
+          {view === 'list' && <Paginator list={opportunities} />}
+          {companies.hasNext && (
             <p className="mt-2 text-[11px] text-ink-faint">
               More companies exist than one page returns, so some company names may show as “—”.
             </p>