@kernhq/module-quire 0.8.0 → 0.9.0

package/src/client/database/PropertyMenu.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+import { DropdownMenu, Icon, type MenuItem } from '@kernhq/ui'
+import type { Property } from '../../contract/index.js'
+import { t } from '../i18n.js'
+import { descriptorFor } from './property-types.js'
+
+/**
+ * A column header, and everything that can be done to it.
+ *
+ * This menu is also where the **keyboard route** for the two pointer gestures lives: dragging the
+ * grabber resizes and there is no drag on the header row at all, so "move earlier", "move later",
+ * "widen" and "narrow" are not conveniences — they are the only way to do those things without a
+ * mouse, which makes them part of the specification rather than an extra.
+ */
+interface Props {
+  property: Property
+  canEdit: boolean
+  first: boolean
+  last: boolean
+  sortDirection: 'asc' | 'desc' | null
+  onEdit: () => void
+  onHide: () => void
+  onMove: (direction: -1 | 1) => void
+  onResize: (delta: number) => void
+  onSort: (direction: 'asc' | 'desc' | null) => void
+  onFilter: () => void
+  onDelete: () => void
+}
+const {
+  property,
+  canEdit,
+  first,
+  last,
+  sortDirection,
+  onEdit,
+  onHide,
+  onMove,
+  onResize,
+  onSort,
+  onFilter,
+  onDelete,
+}: Props = $props()
+
+const descriptor = $derived(descriptorFor(property.type))
+
+const items = $derived<MenuItem[]>([
+  { type: 'label', label: property.name },
+  {
+    id: 'sort-asc',
+    label: t('db_sort_asc'),
+    icon: 'arrow-up',
+    disabled: sortDirection === 'asc',
+    onSelect: () => onSort('asc'),
+  },
+  {
+    id: 'sort-desc',
+    label: t('db_sort_desc'),
+    icon: 'chevron-down',
+    disabled: sortDirection === 'desc',
+    onSelect: () => onSort('desc'),
+  },
+  ...(sortDirection
+    ? [{ id: 'sort-clear', label: t('db_sort_remove'), icon: 'x', onSelect: () => onSort(null) }]
+    : []),
+  { type: 'separator' },
+  { id: 'filter', label: t('db_filter_by'), icon: 'filter', onSelect: onFilter },
+  { type: 'separator' },
+  {
+    id: 'move-earlier',
+    label: t('db_move_earlier'),
+    icon: 'chevron-left',
+    disabled: first || !canEdit,
+    onSelect: () => onMove(-1),
+  },
+  {
+    id: 'move-later',
+    label: t('db_move_later'),
+    icon: 'chevron-right',
+    disabled: last || !canEdit,
+    onSelect: () => onMove(1),
+  },
+  { id: 'widen', label: t('db_widen'), icon: 'maximize-2', onSelect: () => onResize(40) },
+  { id: 'narrow', label: t('db_narrow'), icon: 'minimize-2', onSelect: () => onResize(-40) },
+  { type: 'separator' },
+  {
+    id: 'edit',
+    label: t('db_edit_property'),
+    icon: 'pencil',
+    disabled: !canEdit,
+    onSelect: onEdit,
+  },
+  {
+    id: 'hide',
+    label: t('db_hide_property'),
+    icon: 'eye-off',
+    disabled: !canEdit,
+    onSelect: onHide,
+  },
+  {
+    id: 'delete',
+    label: t('db_delete_property'),
+    icon: 'trash-2',
+    danger: true,
+    disabled: !canEdit,
+    onSelect: onDelete,
+  },
+])
+</script>
+
+<DropdownMenu {items} align="start">
+  {#snippet trigger(props: Record<string, unknown>)}
+    <button {...props} type="button" class="head" title={property.name}>
+      <Icon name={descriptor.icon} size={12} strokeWidth={1.7} />
+      <span class="nm">{property.name}</span>
+      {#if sortDirection}
+        <Icon name={sortDirection === 'asc' ? 'arrow-up' : 'chevron-down'} size={11} strokeWidth={2} />
+      {/if}
+    </button>
+  {/snippet}
+</DropdownMenu>
+
+<style>
+/*
+ * The header cell is the trigger, so the whole 34px strip is the hit target rather than a 12px
+ * chevron beside a label.
+ */
+.head {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  width: 100%;
+  height: 26px;
+  padding: 0 6px;
+  margin-inline-start: -6px;
+  border: 0;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: var(--kern-ink-280);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  text-align: start;
+}
+/* Uppercase tracking breaks connected Arabic and Persian letters. */
+:global([dir='rtl']) .head {
+  letter-spacing: 0;
+  text-transform: none;
+}
+.head:hover {
+  background: var(--kern-surface-hover);
+  color: var(--kern-ink-900);
+}
+.nm {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/client/database/RowPanel.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+import { Button, RightPanel, relativeTime } from '@kernhq/ui'
+import type { Database, Property, Row } from '../../contract/index.js'
+import type { Person } from '../core-api.js'
+import { t } from '../i18n.js'
+import Cell from './cells/Cell.svelte'
+import { descriptorFor } from './property-types.js'
+import { orderedProperties } from './view-config.js'
+
+/**
+ * One row, with every column — hidden ones included.
+ *
+ * This is where a row is inspected, and it has to be: `Page` carries no field saying "this page is
+ * a row of that database", deliberately, so opening the row's own page shows its prose and could
+ * not show its properties without inventing a second meaning for `pages.database_id`. The panel
+ * links out to the page instead.
+ */
+interface Props {
+  database: Database
+  row: Row
+  people: Person[]
+  workspaceId: string
+  canEdit: boolean
+  onClose: () => void
+  onChange: (property: Property, value: unknown) => void
+  onTitleChange: (title: string) => void
+  onOpenPage: () => void
+}
+const { database, row, people, workspaceId, canEdit, onClose, onChange, onTitleChange, onOpenPage }: Props =
+  $props()
+
+const properties = $derived(orderedProperties(database))
+</script>
+
+<RightPanel title={t('db_row_panel')} width={420} onClose={onClose}>
+  <div class="body">
+    {#if canEdit}
+      <input
+        class="title"
+        value={row.title}
+        aria-label={t('db_title_column')}
+        placeholder={t('untitled')}
+        onblur={(e) => onTitleChange(e.currentTarget.value)}
+        onkeydown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur()
+        }}
+      />
+    {:else}
+      <h2 class="title as-heading">{row.title.trim() || t('untitled')}</h2>
+    {/if}
+
+    <p class="stamp">{t('edited_ago', { when: relativeTime(row.updatedAt) })}</p>
+
+    {#if properties.length === 0}
+      <p class="hint">{t('db_no_columns')}</p>
+    {:else}
+      <dl class="fields">
+        {#each properties as property (property.id)}
+          <div class="field">
+            <dt title={property.hidden ? t('db_hidden_here') : undefined}>
+              {property.name}
+              {#if property.hidden}<span class="tag">{t('db_hidden')}</span>{/if}
+            </dt>
+            <dd>
+              <Cell
+                {property}
+                {row}
+                {people}
+                {workspaceId}
+                canEdit={canEdit && !descriptorFor(property.type).readOnly}
+                onchange={(value) => onChange(property, value)}
+              />
+            </dd>
+          </div>
+        {/each}
+      </dl>
+    {/if}
+  </div>
+
+  {#snippet footer()}
+    <Button variant="secondary" onclick={onOpenPage}>{t('db_open_as_page')}</Button>
+  {/snippet}
+</RightPanel>
+
+<style>
+.body {
+  padding: 18px;
+}
+.title {
+  width: 100%;
+  padding: 2px 6px;
+  margin-inline-start: -6px;
+  border: 1px solid transparent;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: var(--kern-ink-900);
+  font: inherit;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+.title:hover {
+  background: var(--kern-surface-active);
+}
+.title:focus {
+  border-color: var(--kern-border);
+  background: var(--kern-surface-raised);
+  outline: none;
+}
+.title.as-heading {
+  margin: 0;
+}
+.stamp {
+  margin: 6px 0 16px;
+  font-size: 12px;
+  color: var(--kern-ink-450);
+}
+.fields {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.field {
+  display: grid;
+  grid-template-columns: 130px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+}
+.field dt {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12.5px;
+  color: var(--kern-ink-450);
+  overflow: hidden;
+}
+.field dd {
+  margin: 0;
+  min-width: 0;
+  font-size: 13px;
+  color: var(--kern-ink-700);
+}
+.tag {
+  padding: 0 5px;
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-surface-chip);
+  font-size: 10.5px;
+  color: var(--kern-ink-550);
+}
+.hint {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--kern-ink-450);
+}
+</style>

package/src/client/database/SortMenu.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+import { Button, Icon, Popover, ToolbarButton } from '@kernhq/ui'
+import type { Database, Sort, ViewConfig } from '../../contract/index.js'
+import { t } from '../i18n.js'
+import { orderedProperties } from './view-config.js'
+
+/**
+ * The view's sorting, in order.
+ *
+ * Order matters and is the whole reason this is a list rather than a single choice, so moving a
+ * rule up and down is a control rather than something you get by deleting and re-adding.
+ */
+interface Props {
+  database: Database
+  config: ViewConfig
+  canEdit: boolean
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onchange: (patch: Partial<ViewConfig>) => void
+}
+const { database, config, canEdit, open, onOpenChange, onchange }: Props = $props()
+
+const properties = $derived(orderedProperties(database))
+const sorts = $derived(config.sorts)
+
+const setSorts = (next: Sort[]) => onchange({ sorts: next })
+const patchAt = (index: number, patch: Partial<Sort>) =>
+  setSorts(sorts.map((s, i) => (i === index ? { ...s, ...patch } : s)))
+
+function addSort() {
+  const used = new Set(sorts.map((s) => s.propertyKey))
+  const next = properties.find((p) => !used.has(p.key)) ?? properties[0]
+  if (!next) return
+  setSorts([...sorts, { propertyKey: next.key, direction: 'asc' }])
+}
+
+function move(index: number, delta: -1 | 1) {
+  const to = index + delta
+  if (to < 0 || to >= sorts.length) return
+  const next = [...sorts]
+  const [moved] = next.splice(index, 1)
+  if (moved) next.splice(to, 0, moved)
+  setSorts(next)
+}
+</script>
+
+<Popover {open} {onOpenChange} align="start" width="380px">
+  {#snippet trigger(props: Record<string, unknown>)}
+    <ToolbarButton
+      {...props}
+      icon="chevrons-up-down"
+      active={sorts.length > 0}
+      onClear={sorts.length > 0 && canEdit ? () => setSorts([]) : undefined}
+    >
+      {sorts.length > 0 ? t('db_sorts', { n: sorts.length }) : t('db_sort')}
+    </ToolbarButton>
+  {/snippet}
+
+  <div class="panel">
+    {#if sorts.length === 0}
+      <p class="empty">{t('db_sort_none_desc')}</p>
+    {:else}
+      <ul class="rows">
+        {#each sorts as sort, index (index)}
+          <li class="line">
+            <select
+              class="control grow"
+              value={sort.propertyKey}
+              disabled={!canEdit}
+              aria-label={t('db_sort_property')}
+              onchange={(e) => patchAt(index, { propertyKey: e.currentTarget.value })}
+            >
+              {#each properties as option (option.key)}
+                <option value={option.key}>{option.name}</option>
+              {/each}
+            </select>
+            <select
+              class="control"
+              value={sort.direction}
+              disabled={!canEdit}
+              aria-label={t('db_sort_direction')}
+              onchange={(e) => patchAt(index, { direction: e.currentTarget.value as 'asc' | 'desc' })}
+            >
+              <option value="asc">{t('db_asc')}</option>
+              <option value="desc">{t('db_desc')}</option>
+            </select>
+            <button
+              type="button"
+              class="icon"
+              disabled={!canEdit || index === 0}
+              aria-label={t('db_move_up')}
+              onclick={() => move(index, -1)}
+            >
+              <Icon name="chevron-up" size={13} strokeWidth={1.9} />
+            </button>
+            <button
+              type="button"
+              class="icon"
+              disabled={!canEdit || index === sorts.length - 1}
+              aria-label={t('db_move_down')}
+              onclick={() => move(index, 1)}
+            >
+              <Icon name="chevron-down" size={13} strokeWidth={1.9} />
+            </button>
+            <button
+              type="button"
+              class="icon"
+              disabled={!canEdit}
+              aria-label={t('db_sort_remove')}
+              onclick={() => setSorts(sorts.filter((_, i) => i !== index))}
+            >
+              <Icon name="x" size={13} strokeWidth={1.9} />
+            </button>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    <div class="foot">
+      <Button size="sm" variant="secondary" disabled={!canEdit || properties.length === 0} onclick={addSort}>
+        {t('db_sort_add')}
+      </Button>
+      {#if sorts.length > 0}
+        <Button size="sm" variant="secondary" disabled={!canEdit} onclick={() => setSorts([])}>
+          {t('db_sort_clear')}
+        </Button>
+      {/if}
+    </div>
+  </div>
+</Popover>
+
+<style>
+.panel {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.empty {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--kern-ink-450);
+}
+.rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.control {
+  min-width: 0;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-md);
+  background: var(--kern-surface-raised);
+  color: var(--kern-ink-700);
+  font: inherit;
+  font-size: 12.5px;
+}
+.control:focus {
+  outline: none;
+  border-color: var(--kern-accent);
+  box-shadow: 0 0 0 3px var(--kern-ring);
+}
+.grow {
+  flex: 1;
+}
+.icon {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: var(--kern-ink-450);
+}
+.icon:hover:not(:disabled) {
+  background: var(--kern-surface-hover);
+  color: var(--kern-ink-900);
+}
+.icon:disabled {
+  color: var(--kern-ink-300);
+  cursor: default;
+}
+.foot {
+  display: flex;
+  gap: 8px;
+}
+</style>