@kernhq/module-quire 0.7.4 → 0.9.0

package/src/client/database/BoardView.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+import { DropdownMenu, EmptyState, Icon, IconButton, type MenuItem } from '@kernhq/ui'
+import { untrack } from 'svelte'
+import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action'
+import type { Database, Property, Row, View } from '../../contract/index.js'
+import type { Person } from '../core-api.js'
+import { t } from '../i18n.js'
+import Cell from './cells/Cell.svelte'
+import OptionChip from './OptionChip.svelte'
+import { descriptorFor } from './property-types.js'
+import { EMPTY_GROUP, groupsOf, type Lane, visiblePropertiesOf } from './view-config.js'
+
+/**
+ * The board (DESIGN.md §3.3), grouped by a select, status or checkbox column.
+ *
+ * Three traps in `svelte-dnd-action`, all of which have already shipped once in this project:
+ *
+ * - it tracks items by an `id` property and nothing else, so the lanes hold `Row`s and never
+ *   wrappers;
+ * - the lanes must be `$state.raw` — a deep-reactive proxy hands the library a different object on
+ *   every read, which it reads as an endless stream of changes;
+ * - the seeding effect reads its `dragging` guard through `untrack`. Clearing the flag at the end of
+ *   a drop otherwise re-runs the effect against the *old* query data and undoes the move on screen
+ *   while the mutation is still in flight.
+ *
+ * Every card carries a **Move to** menu. The drag is unreachable by keyboard, so without it half
+ * the people using this board could not move a card at all.
+ */
+interface Props {
+  database: Database
+  view: View | null
+  rows: Row[]
+  people: Person[]
+  workspaceId: string
+  canEdit: boolean
+  canCreate: boolean
+  onMove: (row: Row, laneId: string) => void
+  onOpenRow: (row: Row) => void
+  onAddRow: (laneId: string) => void
+  onConfigure: () => void
+}
+const {
+  database,
+  view,
+  rows,
+  people,
+  workspaceId,
+  canEdit,
+  canCreate,
+  onMove,
+  onOpenRow,
+  onAddRow,
+  onConfigure,
+}: Props = $props()
+
+const FLIP = 160
+
+const groupKey = $derived(view?.config.groupBy ?? null)
+const groupProperty = $derived(
+  groupKey ? (database.properties.find((p) => p.key === groupKey) ?? null) : null,
+)
+const groupable = $derived(groupProperty !== null && descriptorFor(groupProperty.type).canGroup)
+
+/** Three properties on a card, not thirty: the card is a summary, the panel is the record. */
+const cardProperties = $derived(
+  visiblePropertiesOf(database, view)
+    .filter((p) => p.key !== groupKey)
+    .slice(0, 3),
+)
+
+let lanes = $state.raw<Lane[]>([])
+let dragging = $state(false)
+
+const replaceLane = (index: number, items: Row[]) => {
+  lanes = lanes.map((lane, i) => (i === index ? { ...lane, rows: items } : lane))
+}
+
+$effect(() => {
+  const next = groupable ? groupsOf(groupProperty, rows) : []
+  if (untrack(() => dragging)) return
+  lanes = next
+})
+
+const isShadow = (row: Row) =>
+  (row as unknown as Record<string, unknown>)[SHADOW_ITEM_MARKER_PROPERTY_NAME] === true
+
+function consider(index: number, event: CustomEvent<{ items: Row[] }>) {
+  dragging = true
+  replaceLane(index, event.detail.items)
+}
+
+function finalize(index: number, event: CustomEvent<{ items: Row[]; info: { id: string } }>) {
+  dragging = false
+  const lane = lanes[index]
+  if (!lane) return
+  replaceLane(index, event.detail.items)
+  const moved = event.detail.items.find((r) => r.id === event.detail.info.id)
+  // Both the source and the target lane fire; only the target holds the card.
+  if (!moved) return
+  const already = groupProperty ? moved.props[groupProperty.key] : null
+  const current = Array.isArray(already) ? (already[0] ?? null) : (already ?? null)
+  // A drop inside the same lane re-seeds and does nothing: rows carry no order of their own, so
+  // there is nothing to persist and pretending otherwise would snap back a moment later anyway.
+  if ((current ?? EMPTY_GROUP) === lane.id) return
+  onMove(moved, lane.id)
+}
+
+const laneName = (lane: Lane) => lane.option?.label ?? t('db_board_uncategorised')
+
+const cardMenu = (row: Row, from: Lane): MenuItem[] => [
+  { id: 'open', label: t('db_open_row'), icon: 'maximize-2', onSelect: () => onOpenRow(row) },
+  { type: 'separator' },
+  { type: 'label', label: t('db_move_to') },
+  ...lanes
+    .filter((lane) => lane.id !== from.id)
+    .map((lane) => ({
+      id: `move-${lane.id}`,
+      label: laneName(lane),
+      icon: 'arrow-right',
+      disabled: !canEdit,
+      onSelect: () => onMove(row, lane.id),
+    })),
+]
+
+const laneRule = (lane: Lane) =>
+  `linear-gradient(to var(--kern-quire-lane-dir, right), ${
+    lane.option ? 'var(--kern-accent)' : 'var(--kern-ink-300)'
+  } 0 34px, var(--kern-border) 34px)`
+</script>
+
+{#if !groupable}
+  <div class="pad">
+    <EmptyState
+      icon="kanban"
+      title={t('db_board_needs_group')}
+      description={t('db_board_needs_group_desc')}
+    >
+      {#snippet actions()}
+        {#if canEdit}
+          <button type="button" class="link" onclick={onConfigure}>{t('db_edit_view')}</button>
+        {/if}
+      {/snippet}
+    </EmptyState>
+  </div>
+{:else}
+  <div class="board">
+    {#each lanes as lane, index (lane.id)}
+      <section class="col">
+        <header class="head">
+          {#if lane.option}
+            <OptionChip option={lane.option} compact />
+          {:else}
+            <span class="none">{t('db_board_uncategorised')}</span>
+          {/if}
+          <span class="count">{lane.rows.length}</span>
+          <span class="sp"></span>
+          {#if canCreate}
+            <IconButton
+              icon="plus"
+              label={t('db_new_row_in', { lane: laneName(lane) })}
+              size={26}
+              variant="ghost"
+              onclick={() => onAddRow(lane.id)}
+            />
+          {/if}
+        </header>
+        <div class="rule" style:background={laneRule(lane)}></div>
+
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="stack"
+          use:dndzone={{
+            items: lane.rows,
+            flipDurationMs: FLIP,
+            type: 'quire-rows',
+            dragDisabled: !canEdit,
+            dropTargetStyle: {},
+          }}
+          onconsider={(e) => consider(index, e)}
+          onfinalize={(e) => finalize(index, e)}
+        >
+          {#each lane.rows as row (row.id)}
+            <article class="card" class:shadow={isShadow(row)}>
+              <div class="card-top">
+                <h3 class="card-title">{row.title.trim() || t('untitled')}</h3>
+                <DropdownMenu items={cardMenu(row, lane)}>
+                  {#snippet trigger(props: Record<string, unknown>)}
+                    <IconButton
+                      {...props}
+                      icon="ellipsis"
+                      label={t('db_row_actions', { title: row.title.trim() || t('untitled') })}
+                      size={26}
+                      variant="ghost"
+                    />
+                  {/snippet}
+                </DropdownMenu>
+              </div>
+              {#if cardProperties.length > 0}
+                <dl class="fields">
+                  {#each cardProperties as property (property.id)}
+                    <div class="field">
+                      <dt>{property.name}</dt>
+                      <dd>
+                        <Cell
+                          {property}
+                          {row}
+                          {people}
+                          {workspaceId}
+                          canEdit={false}
+                          onchange={() => {}}
+                        />
+                      </dd>
+                    </div>
+                  {/each}
+                </dl>
+              {/if}
+            </article>
+          {/each}
+          {#if lane.rows.length === 0}
+            <p class="lane-empty">{t('db_lane_empty')}</p>
+          {/if}
+        </div>
+      </section>
+    {/each}
+  </div>
+{/if}
+
+<style>
+.board {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 22px 28px 30px;
+  overflow-x: auto;
+}
+:global([dir='rtl']) .board {
+  --kern-quire-lane-dir: left;
+}
+.col {
+  width: var(--kern-board-col-w);
+  flex: none;
+}
+.head {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 30px;
+}
+.none {
+  font-size: 13px;
+  color: var(--kern-ink-450);
+}
+.count {
+  font-family: var(--kern-font-mono);
+  font-size: 11.5px;
+  color: var(--kern-ink-450);
+}
+.sp {
+  flex: 1;
+}
+.rule {
+  height: 2px;
+  border-radius: 1px;
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-block-start: 14px;
+  min-height: 80px;
+  padding-block-end: 4px;
+}
+.card {
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-xl);
+  background: var(--kern-surface-raised);
+  padding: 11px 8px 12px 13px;
+}
+.card:hover {
+  border-color: var(--kern-border-hover);
+}
+.card.shadow {
+  border-style: dashed;
+  background: var(--kern-surface-hover);
+}
+.card-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+.card-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.42;
+  letter-spacing: -0.005em;
+  color: var(--kern-ink-900);
+}
+.fields {
+  margin: 10px 5px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.field {
+  display: grid;
+  grid-template-columns: 84px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+.field dt {
+  font-size: 11.5px;
+  color: var(--kern-ink-450);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.field dd {
+  margin: 0;
+  min-width: 0;
+  font-size: 12.5px;
+  color: var(--kern-ink-600);
+  overflow: hidden;
+}
+.lane-empty {
+  margin: 0;
+  padding: 14px 10px;
+  border: 1px dashed var(--kern-border);
+  border-radius: var(--kern-r-lg);
+  text-align: center;
+  font-size: 12.5px;
+  color: var(--kern-ink-450);
+}
+.pad {
+  padding: 28px;
+}
+.link {
+  border: 0;
+  background: none;
+  color: var(--kern-accent-text);
+  font: inherit;
+  font-size: 13px;
+  text-decoration: underline;
+}
+@media (max-width: 768px) {
+  .board {
+    padding: 16px;
+    gap: 14px;
+  }
+}
+</style>

package/src/client/database/CalendarView.svelte

@@ -0,0 +1,346 @@
+<script lang="ts">
+import { Button, DropdownMenu, EmptyState, IconButton, type MenuItem, messageLocale } from '@kernhq/ui'
+import type { Database, Row, View } from '../../contract/index.js'
+import { t } from '../i18n.js'
+import { descriptorFor } from './property-types.js'
+
+/**
+ * A month of rows, plotted on the view's date column.
+ *
+ * The month is component state rather than a URL parameter: which month somebody is looking at is
+ * not what the page is *about*, and putting it in the address makes every scroll through the year a
+ * history entry to walk back through.
+ *
+ * A day cell is a drop target, and every card carries **Move to a date** so the drag is never the
+ * only route — the same rule the board follows.
+ */
+interface Props {
+  database: Database
+  view: View | null
+  rows: Row[]
+  canEdit: boolean
+  onOpenRow: (row: Row) => void
+  onSetDate: (row: Row, iso: string | null) => void
+  onConfigure: () => void
+}
+const { database, view, rows, canEdit, onOpenRow, onSetDate, onConfigure }: Props = $props()
+
+const dateKey = $derived(view?.config.dateProperty ?? null)
+const dateProperty = $derived(dateKey ? (database.properties.find((p) => p.key === dateKey) ?? null) : null)
+const plottable = $derived(dateProperty !== null && descriptorFor(dateProperty.type).canDate)
+
+const today = new Date()
+let cursor = $state(new Date(today.getFullYear(), today.getMonth(), 1))
+
+const monthLabel = $derived(
+  new Intl.DateTimeFormat(messageLocale(), { month: 'long', year: 'numeric' }).format(cursor),
+)
+
+/** Weekday names for the header, starting on the locale's first day. */
+const weekdays = $derived.by(() => {
+  const format = new Intl.DateTimeFormat(messageLocale(), { weekday: 'short' })
+  // 2024-01-07 was a Sunday; the grid starts on Monday, which is what a working week means here.
+  return Array.from({ length: 7 }, (_, i) => format.format(new Date(Date.UTC(2024, 0, 8 + i))))
+})
+
+const dayKey = (at: Date) =>
+  `${at.getFullYear()}-${String(at.getMonth() + 1).padStart(2, '0')}-${String(at.getDate()).padStart(2, '0')}`
+
+/** Six weeks from the Monday on or before the first of the month — a month never needs more. */
+const days = $derived.by(() => {
+  const first = new Date(cursor.getFullYear(), cursor.getMonth(), 1)
+  const offset = (first.getDay() + 6) % 7
+  const start = new Date(first.getFullYear(), first.getMonth(), 1 - offset)
+  return Array.from(
+    { length: 42 },
+    (_, i) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + i),
+  )
+})
+
+const byDay = $derived.by(() => {
+  const map = new Map<string, Row[]>()
+  if (!dateProperty) return map
+  for (const row of rows) {
+    const raw = row.props[dateProperty.key]
+    if (typeof raw !== 'string' || raw === '') continue
+    const at = new Date(raw)
+    if (Number.isNaN(at.getTime())) continue
+    const key = dayKey(at)
+    map.set(key, [...(map.get(key) ?? []), row])
+  }
+  return map
+})
+
+const undated = $derived(
+  dateProperty
+    ? rows.filter((row) => {
+        const raw = row.props[dateProperty.key]
+        return typeof raw !== 'string' || raw === '' || Number.isNaN(new Date(raw).getTime())
+      })
+    : [],
+)
+
+const shift = (months: number) => {
+  cursor = new Date(cursor.getFullYear(), cursor.getMonth() + months, 1)
+}
+
+let dragged = $state<string | null>(null)
+
+function dropOn(at: Date) {
+  const row = rows.find((r) => r.id === dragged)
+  dragged = null
+  if (!row) return
+  onSetDate(row, new Date(at.getFullYear(), at.getMonth(), at.getDate(), 9).toISOString())
+}
+
+const cardMenu = (row: Row): MenuItem[] => [
+  { id: 'open', label: t('db_open_row'), icon: 'maximize-2', onSelect: () => onOpenRow(row) },
+  { type: 'separator' },
+  { type: 'label', label: t('db_move_to_date') },
+  ...[0, 1, 7].map((offset) => {
+    const at = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset, 9)
+    return {
+      id: `date-${offset}`,
+      label:
+        offset === 0 ? t('db_date_today') : offset === 1 ? t('db_date_tomorrow') : t('db_date_next_week'),
+      icon: 'calendar',
+      disabled: !canEdit,
+      onSelect: () => onSetDate(row, at.toISOString()),
+    }
+  }),
+  {
+    id: 'clear-date',
+    label: t('db_date_clear'),
+    icon: 'x',
+    disabled: !canEdit,
+    onSelect: () => onSetDate(row, null),
+  },
+]
+</script>
+
+{#if !plottable}
+  <div class="pad">
+    <EmptyState
+      icon="calendar-days"
+      title={t('db_calendar_needs_date')}
+      description={t('db_calendar_needs_date_desc')}
+    >
+      {#snippet actions()}
+        {#if canEdit}
+          <Button variant="secondary" onclick={onConfigure}>{t('db_edit_view')}</Button>
+        {/if}
+      {/snippet}
+    </EmptyState>
+  </div>
+{:else}
+  <div class="cal">
+    <div class="bar">
+      <IconButton icon="chevron-left" label={t('db_prev_month')} size={28} variant="ghost" onclick={() => shift(-1)} />
+      <h2 class="month">{monthLabel}</h2>
+      <IconButton icon="chevron-right" label={t('db_next_month')} size={28} variant="ghost" onclick={() => shift(1)} />
+      <Button
+        size="sm"
+        variant="secondary"
+        onclick={() => (cursor = new Date(today.getFullYear(), today.getMonth(), 1))}
+      >
+        {t('db_this_month')}
+      </Button>
+    </div>
+
+    <!--
+      A plain layout, not `role="grid"`. A real grid promises arrow-key navigation between cells,
+      and promising that without implementing it is worse for a screen-reader user than not claiming
+      it at all — the keyboard route to every action here is the card's own menu.
+    -->
+    <div class="grid" aria-label={monthLabel}>
+      {#each weekdays as weekday (weekday)}
+        <div class="dow">{weekday}</div>
+      {/each}
+      {#each days as day (day.toISOString())}
+        {@const key = dayKey(day)}
+        {@const inMonth = day.getMonth() === cursor.getMonth()}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="day"
+          class:out={!inMonth}
+          class:today={key === dayKey(today)}
+          ondragover={(e) => canEdit && e.preventDefault()}
+          ondrop={(e) => {
+            e.preventDefault()
+            if (canEdit) dropOn(day)
+          }}
+        >
+          <span class="num">{day.getDate()}</span>
+          {#each byDay.get(key) ?? [] as row (row.id)}
+            <div
+              class="event"
+              draggable={canEdit}
+              ondragstart={() => (dragged = row.id)}
+              ondragend={() => (dragged = null)}
+            >
+              <span class="ev-title">{row.title.trim() || t('untitled')}</span>
+              <DropdownMenu items={cardMenu(row)}>
+                {#snippet trigger(props: Record<string, unknown>)}
+                  <IconButton
+                    {...props}
+                    icon="ellipsis"
+                    label={t('db_row_actions', { title: row.title.trim() || t('untitled') })}
+                    size={26}
+                    variant="ghost"
+                  />
+                {/snippet}
+              </DropdownMenu>
+            </div>
+          {/each}
+        </div>
+      {/each}
+    </div>
+
+    {#if undated.length > 0}
+      <section class="undated">
+        <h3>{t('db_no_date_rows', { n: undated.length })}</h3>
+        <ul>
+          {#each undated as row (row.id)}
+            <li>
+              <span class="ev-title">{row.title.trim() || t('untitled')}</span>
+              <DropdownMenu items={cardMenu(row)}>
+                {#snippet trigger(props: Record<string, unknown>)}
+                  <IconButton
+                    {...props}
+                    icon="ellipsis"
+                    label={t('db_row_actions', { title: row.title.trim() || t('untitled') })}
+                    size={26}
+                    variant="ghost"
+                  />
+                {/snippet}
+              </DropdownMenu>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    {/if}
+  </div>
+{/if}
+
+<style>
+.cal {
+  padding: 18px 24px 40px;
+}
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-block-end: 14px;
+}
+.month {
+  margin: 0;
+  min-width: 180px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--kern-ink-900);
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-lg);
+  overflow: hidden;
+}
+.dow {
+  padding: 7px 8px;
+  background: var(--kern-surface-header);
+  border-block-end: 1px solid var(--kern-border);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--kern-ink-450);
+}
+:global([dir='rtl']) .dow {
+  letter-spacing: 0;
+  text-transform: none;
+}
+.day {
+  min-height: 96px;
+  padding: 5px 6px 8px;
+  border-block-end: 1px solid var(--kern-border-hairline);
+  border-inline-end: 1px solid var(--kern-border-hairline);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+/* Muted with a colour, never with opacity — opacity fades the text against the page. */
+.day.out .num {
+  color: var(--kern-ink-350);
+}
+.day.out {
+  background: var(--kern-surface-header);
+}
+.day.today .num {
+  background: var(--kern-ink-900);
+  color: var(--kern-ink-inverse);
+}
+.num {
+  align-self: flex-start;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: var(--kern-r-full);
+  display: inline-grid;
+  place-items: center;
+  font-size: 11.5px;
+  color: var(--kern-ink-550);
+}
+.event {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 28px;
+  padding-inline: 7px 1px;
+  padding-block: 1px;
+  border-radius: var(--kern-r-md);
+  background: var(--kern-accent-tint);
+  color: var(--kern-accent-deep);
+  font-size: 12px;
+  cursor: grab;
+}
+.ev-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.undated {
+  margin-block-start: 18px;
+}
+.undated h3 {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--kern-ink-450);
+}
+.undated ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.undated li {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 260px;
+  padding-inline: 9px 2px;
+  padding-block: 2px;
+  border-radius: var(--kern-r-md);
+  background: var(--kern-surface-chip);
+  color: var(--kern-ink-550);
+  font-size: 12.5px;
+}
+.pad {
+  padding: 28px;
+}
+</style>