@kernhq/module-quire 0.8.0 → 0.9.1

package/src/client/database/FilterMenu.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+import { Button, Icon, Popover, ToolbarButton } from '@kernhq/ui'
+import type { Database, Filter, FilterOperator, ViewConfig } from '../../contract/index.js'
+import type { Person } from '../core-api.js'
+import { t } from '../i18n.js'
+import FilterValue from './FilterValue.svelte'
+import { operatorsFor, VALUELESS_OPERATORS } from './property-types.js'
+import { orderedProperties } from './view-config.js'
+
+/**
+ * The view's filters.
+ *
+ * A column only offers the operators it can actually answer — the contract declares fourteen and no
+ * type accepts all of them, so listing every one produces a filter that silently matches nothing.
+ * `property-types.ts` is the single place that decides which.
+ *
+ * Every write sends the **whole** `ViewConfig`, because `updateView` replaces the column.
+ */
+interface Props {
+  database: Database
+  config: ViewConfig
+  workspaceId: string
+  people: Person[]
+  canEdit: boolean
+  /** the toolbar can ask for the popover to open on a particular column */
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onchange: (patch: Partial<ViewConfig>) => void
+}
+const { database, config, workspaceId, people, canEdit, open, onOpenChange, onchange }: Props = $props()
+
+const properties = $derived(orderedProperties(database))
+const filters = $derived(config.filters)
+
+const propertyFor = (key: string) => properties.find((p) => p.key === key) ?? null
+
+const setFilters = (next: Filter[]) => onchange({ filters: next })
+
+const patchAt = (index: number, patch: Partial<Filter>) =>
+  setFilters(filters.map((f, i) => (i === index ? { ...f, ...patch } : f)))
+
+function addFilter() {
+  const first = properties[0]
+  if (!first) return
+  const operator = operatorsFor(first.type)[0] ?? 'equals'
+  setFilters([...filters, { propertyKey: first.key, operator, value: null }])
+}
+
+/**
+ * Changing the column has to re-pick the operator: a checkbox cannot answer `starts_with`, and
+ * leaving the old one behind is a filter that returns nothing for no visible reason.
+ */
+function changeProperty(index: number, key: string) {
+  const property = propertyFor(key)
+  if (!property) return
+  const current = filters[index]?.operator
+  const allowed = operatorsFor(property.type)
+  patchAt(index, {
+    propertyKey: key,
+    operator: current && allowed.includes(current) ? current : (allowed[0] ?? 'equals'),
+    value: null,
+  })
+}
+</script>
+
+<Popover {open} {onOpenChange} align="start" width="420px">
+  {#snippet trigger(props: Record<string, unknown>)}
+    <ToolbarButton
+      {...props}
+      icon="filter"
+      active={filters.length > 0}
+      onClear={filters.length > 0 && canEdit ? () => setFilters([]) : undefined}
+    >
+      {filters.length > 0 ? t('db_filters', { n: filters.length }) : t('db_filter')}
+    </ToolbarButton>
+  {/snippet}
+
+  <div class="panel">
+    {#if filters.length === 0}
+      <p class="empty">{t('db_filter_none_desc')}</p>
+    {:else}
+      <div class="mode" role="group" aria-label={t('db_filter_mode')}>
+        <button
+          type="button"
+          class:on={config.filterMode === 'and'}
+          disabled={!canEdit}
+          onclick={() => onchange({ filterMode: 'and' })}
+        >
+          {t('db_filter_mode_and')}
+        </button>
+        <button
+          type="button"
+          class:on={config.filterMode === 'or'}
+          disabled={!canEdit}
+          onclick={() => onchange({ filterMode: 'or' })}
+        >
+          {t('db_filter_mode_or')}
+        </button>
+      </div>
+
+      <ul class="rows">
+        {#each filters as filter, index (index)}
+          {@const property = propertyFor(filter.propertyKey)}
+          <li class="row">
+            <div class="line">
+              <select
+                class="control grow"
+                value={filter.propertyKey}
+                disabled={!canEdit}
+                aria-label={t('db_filter_property')}
+                onchange={(e) => changeProperty(index, e.currentTarget.value)}
+              >
+                {#each properties as option (option.key)}
+                  <option value={option.key}>{option.name}</option>
+                {/each}
+              </select>
+              <select
+                class="control grow"
+                value={filter.operator}
+                disabled={!canEdit || !property}
+                aria-label={t('db_filter_operator')}
+                onchange={(e) =>
+                  patchAt(index, {
+                    operator: e.currentTarget.value as FilterOperator,
+                    ...(VALUELESS_OPERATORS.includes(e.currentTarget.value as FilterOperator)
+                      ? { value: null }
+                      : {}),
+                  })}
+              >
+                {#each property ? operatorsFor(property.type) : [] as op (op)}
+                  <option value={op}>{t(`db_op_${op}`)}</option>
+                {/each}
+              </select>
+              <button
+                type="button"
+                class="remove"
+                disabled={!canEdit}
+                aria-label={t('db_filter_remove')}
+                onclick={() => setFilters(filters.filter((_, i) => i !== index))}
+              >
+                <Icon name="x" size={13} strokeWidth={1.9} />
+              </button>
+            </div>
+            {#if property}
+              <div class="value">
+                <FilterValue
+                  {property}
+                  operator={filter.operator}
+                  value={filter.value}
+                  {workspaceId}
+                  {people}
+                  onchange={(next) => patchAt(index, { value: next })}
+                />
+              </div>
+            {:else}
+              <p class="warn">{t('db_filter_unknown_property')}</p>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    <div class="foot">
+      <Button size="sm" variant="secondary" disabled={!canEdit || properties.length === 0} onclick={addFilter}>
+        {t('db_filter_add')}
+      </Button>
+      {#if filters.length > 0}
+        <Button size="sm" variant="secondary" disabled={!canEdit} onclick={() => setFilters([])}>
+          {t('db_filter_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);
+}
+.mode {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--kern-r-md);
+  background: var(--kern-surface-hover);
+  align-self: flex-start;
+}
+.mode button {
+  height: 26px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: var(--kern-ink-450);
+  font: inherit;
+  font-size: 12px;
+}
+.mode button.on {
+  background: var(--kern-surface-raised);
+  color: var(--kern-ink-900);
+  font-weight: 600;
+}
+.rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-block-end: 10px;
+  border-block-end: 1px solid var(--kern-border-hairline);
+}
+.rows li:last-child {
+  border-block-end: 0;
+  padding-block-end: 0;
+}
+.line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.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;
+}
+.remove {
+  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);
+}
+.remove:hover:not(:disabled) {
+  background: var(--kern-surface-hover);
+  color: var(--kern-ink-900);
+}
+.value {
+  padding-inline-start: 2px;
+}
+.warn {
+  margin: 0;
+  font-size: 12px;
+  color: var(--kern-warning);
+}
+.foot {
+  display: flex;
+  gap: 8px;
+}
+</style>

package/src/client/database/FilterValue.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+import { createQuery } from '@tanstack/svelte-query'
+import type { FilterOperator, Property } from '../../contract/index.js'
+import { getQuireApi } from '../api-instance.js'
+import type { Person } from '../core-api.js'
+import { t } from '../i18n.js'
+import { quireKeys } from '../query.js'
+import { descriptorFor, VALUELESS_OPERATORS } from './property-types.js'
+
+/**
+ * The value half of one filter.
+ *
+ * Which control appears is decided by the property's editor family and by the operator: `is_empty`
+ * takes no value at all, so nothing is drawn rather than a disabled box that looks like it wants
+ * one. `is_any_of` takes several, so the closed-set types offer checkboxes rather than a field
+ * somebody has to type comma-separated ids into.
+ */
+interface Props {
+  property: Property
+  operator: FilterOperator
+  value: unknown
+  workspaceId: string
+  people: Person[]
+  onchange: (value: unknown) => void
+}
+const { property, operator, value, workspaceId, people, onchange }: Props = $props()
+
+const api = getQuireApi()
+const editor = $derived(descriptorFor(property.type).editor)
+const many = $derived(operator === 'is_any_of' || operator === 'is_none_of')
+
+const asList = $derived(
+  value == null ? [] : (Array.isArray(value) ? value : [value]).map(String).filter((v) => v !== ''),
+)
+const asText = $derived(value == null ? '' : Array.isArray(value) ? '' : String(value))
+
+const toggle = (id: string, on: boolean) => {
+  const next = on ? [...asList.filter((v) => v !== id), id] : asList.filter((v) => v !== id)
+  onchange(many ? next : (next.at(-1) ?? null))
+}
+
+const choices = $derived(
+  (property.config.options ?? []).map((option) => ({ id: option.id, label: option.label })),
+)
+
+/** A relation filter compares page ids, so the picker has to name them. */
+const linked = createQuery(() => ({
+  queryKey: quireKeys.lookup(workspaceId, property.config.relationDatabaseId ?? '', ''),
+  enabled: editor === 'relation' && Boolean(property.config.relationDatabaseId),
+  queryFn: () =>
+    api.databases.lookup({
+      workspaceId,
+      databaseId: property.config.relationDatabaseId!,
+      query: '',
+      ids: [],
+      limit: 50,
+    }),
+}))
+
+const rows = $derived.by(() => {
+  if (editor === 'select') return choices
+  if (editor === 'person') return people.map((p) => ({ id: p.id, label: p.name }))
+  if (editor === 'relation')
+    return (linked.data ?? []).map((r) => ({ id: r.id, label: r.title.trim() || t('untitled') }))
+  return []
+})
+</script>
+
+{#if VALUELESS_OPERATORS.includes(operator)}
+  <!-- nothing to compare against -->
+{:else if editor === 'checkbox'}
+  <select
+    class="control"
+    value={value === true ? 'true' : 'false'}
+    aria-label={t('db_filter_value', { name: property.name })}
+    onchange={(e) => onchange(e.currentTarget.value === 'true')}
+  >
+    <option value="true">{t('db_checked')}</option>
+    <option value="false">{t('db_unchecked')}</option>
+  </select>
+{:else if editor === 'select' || editor === 'person' || editor === 'relation'}
+  {#if rows.length === 0}
+    <p class="hint">{t('db_filter_no_choices')}</p>
+  {:else}
+    <ul class="choices" aria-label={t('db_filter_value', { name: property.name })}>
+      {#each rows as choice (choice.id)}
+        <li>
+          <label>
+            <input
+              type="checkbox"
+              checked={asList.includes(choice.id)}
+              onchange={(e) => toggle(choice.id, e.currentTarget.checked)}
+            />
+            <span>{choice.label}</span>
+          </label>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+{:else if editor === 'date' || property.type === 'created_time' || property.type === 'edited_time'}
+  <input
+    class="control"
+    type="date"
+    value={asText ? asText.slice(0, 10) : ''}
+    aria-label={t('db_filter_value', { name: property.name })}
+    onchange={(e) =>
+      onchange(e.currentTarget.value ? new Date(e.currentTarget.value).toISOString() : null)}
+  />
+{:else if editor === 'number' || editor === 'computed'}
+  <input
+    class="control"
+    type="number"
+    inputmode="decimal"
+    value={asText}
+    aria-label={t('db_filter_value', { name: property.name })}
+    onchange={(e) => onchange(e.currentTarget.value === '' ? null : Number(e.currentTarget.value))}
+  />
+{:else}
+  <input
+    class="control"
+    type="text"
+    value={asText}
+    placeholder={t('db_filter_value_placeholder')}
+    aria-label={t('db_filter_value', { name: property.name })}
+    onchange={(e) => onchange(e.currentTarget.value === '' ? null : e.currentTarget.value)}
+  />
+{/if}
+
+<style>
+.control {
+  width: 100%;
+  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);
+}
+.choices {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 160px;
+  overflow-y: auto;
+}
+.choices label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 26px;
+  padding: 2px 4px;
+  border-radius: var(--kern-r-sm);
+  font-size: 12.5px;
+  color: var(--kern-ink-700);
+  cursor: pointer;
+}
+.choices label:hover {
+  background: var(--kern-surface-hover);
+}
+.hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--kern-ink-450);
+}
+</style>

package/src/client/database/GalleryView.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+import { DropdownMenu, Icon, IconButton, type MenuItem } from '@kernhq/ui'
+import type { Database, 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 { visiblePropertiesOf } from './view-config.js'
+
+/**
+ * Cards of a title and the columns the view shows.
+ *
+ * No picture: a cover would come from a `files` property, and Quire has no file handling at all —
+ * so the card leads with an icon band rather than pretending an image is missing. The view editor
+ * says the same thing where somebody would go looking for the setting.
+ */
+interface Props {
+  database: Database
+  view: View | null
+  rows: Row[]
+  people: Person[]
+  workspaceId: string
+  canEdit: boolean
+  onOpenRow: (row: Row) => void
+  onOpenPage: (row: Row) => void
+  onDeleteRow: (row: Row) => void
+}
+const { database, view, rows, people, workspaceId, canEdit, onOpenRow, onOpenPage, onDeleteRow }: Props =
+  $props()
+
+const size = $derived(view?.config.cardSize ?? 'medium')
+const columns = $derived(visiblePropertiesOf(database, view).slice(0, size === 'small' ? 2 : 4))
+
+const menu = (row: Row): MenuItem[] => [
+  { id: 'open', label: t('db_open_row'), icon: 'maximize-2', onSelect: () => onOpenRow(row) },
+  { id: 'page', label: t('db_open_as_page'), icon: 'file-text', onSelect: () => onOpenPage(row) },
+  { type: 'separator' },
+  {
+    id: 'delete',
+    label: t('db_delete_row'),
+    icon: 'trash-2',
+    danger: true,
+    disabled: !canEdit,
+    onSelect: () => onDeleteRow(row),
+  },
+]
+</script>
+
+<ul class="gallery" class:small={size === 'small'} class:large={size === 'large'}>
+  {#each rows as row (row.id)}
+    <li>
+      <article class="card">
+        <div class="band" aria-hidden="true"><Icon name="file-text" size={18} strokeWidth={1.5} /></div>
+        <div class="body">
+          <div class="top">
+            <h3 class="title">{row.title.trim() || t('untitled')}</h3>
+            <DropdownMenu items={menu(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>
+          {#if columns.length > 0}
+            <dl class="fields">
+              {#each columns 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}
+        </div>
+      </article>
+    </li>
+  {/each}
+</ul>
+
+<style>
+.gallery {
+  list-style: none;
+  margin: 0;
+  padding: 22px 28px 40px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  /* the cell stretches, not the card inside it, or one long title makes its neighbour short */
+  grid-auto-rows: 1fr;
+  gap: 14px;
+}
+.gallery.small {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+.gallery.large {
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+}
+.gallery > li {
+  display: grid;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-xl);
+  background: var(--kern-surface-raised);
+  overflow: hidden;
+}
+.card:hover {
+  border-color: var(--kern-border-hover);
+}
+.band {
+  height: 54px;
+  display: grid;
+  place-items: center;
+  background: var(--kern-surface-hover);
+  color: var(--kern-ink-350);
+}
+.body {
+  flex: 1;
+  padding: 11px 8px 13px 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.top {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+.title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--kern-ink-900);
+}
+.fields {
+  margin: 0 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;
+}
+@media (max-width: 768px) {
+  .gallery {
+    padding: 16px;
+  }
+}
+</style>