@kernhq/module-tracker 0.10.1 → 0.11.0

package/src/client/components/CustomField.svelte

@@ -0,0 +1,333 @@
+<script lang="ts">
+import { Checkbox, DropdownMenu, IconButton, type MenuItem } from '@kernhq/ui'
+import { getTrackerCatalogue } from '../context.svelte.js'
+import { t } from '../i18n.js'
+import type { FieldDef } from '../index.js'
+import IssueInline from './IssueInline.svelte'
+import IssuePicker from './IssuePicker.svelte'
+
+/**
+ * One custom field, rendered and edited according to its type.
+ *
+ * Every field type the server accepts has a branch here. A type with no editor yet renders its
+ * value read-only and says why, rather than showing a control that silently does nothing.
+ *
+ * The value is committed on blur or on selection, never on every keystroke: each edit is its own
+ * mutation, and a request per character would be both slow and impossible to reason about when one
+ * of them fails.
+ */
+interface Props {
+  field: FieldDef
+  value: unknown
+  editable: boolean
+  required?: boolean
+  /** needed by the relation picker, which searches the workspace's issues */
+  workspaceId: string
+  /** the issue being edited, so a relation never offers to link it to itself */
+  issueId?: string | null
+  onchange: (value: unknown) => void
+}
+let { field, value, editable, required = false, workspaceId, issueId = null, onchange }: Props = $props()
+
+/** Open only while somebody is choosing, so the row stays a row the rest of the time. */
+let picking = $state(false)
+
+const cat = getTrackerCatalogue()
+
+const asText = $derived(typeof value === 'string' ? value : value == null ? '' : String(value))
+const asArray = $derived(Array.isArray(value) ? (value as string[]) : value == null ? [] : [String(value)])
+
+const options = $derived(field.options.filter((o) => !o.archived))
+const optionLabel = (id: string) => options.find((o) => o.id === id)?.label ?? id
+const personName = (id: string) => cat.people.find((p) => p.id === id)?.name ?? id
+
+/** Empty string means "no value", which is a deletion — `null` is how the API says that. */
+const commit = (next: unknown) => {
+  if (next === '' || (Array.isArray(next) && next.length === 0)) onchange(null)
+  else onchange(next)
+}
+
+const toggle = (list: string[], id: string, on: boolean) =>
+  on ? [...list.filter((v) => v !== id), id] : list.filter((v) => v !== id)
+
+const selectMenu = $derived<MenuItem[]>([
+  ...options.map((o) => ({
+    type: 'checkbox' as const,
+    id: o.id,
+    label: o.label,
+    checked: asText === o.id,
+    onCheckedChange: (on: boolean) => commit(on ? o.id : null),
+  })),
+])
+
+const multiSelectMenu = $derived<MenuItem[]>(
+  options.map((o) => ({
+    type: 'checkbox' as const,
+    id: o.id,
+    label: o.label,
+    checked: asArray.includes(o.id),
+    onCheckedChange: (on: boolean) => commit(toggle(asArray, o.id, on)),
+  })),
+)
+
+const userMenu = $derived<MenuItem[]>(
+  cat.people.map((person) => ({
+    type: 'checkbox' as const,
+    id: person.id,
+    label: person.name,
+    avatar: { id: person.id, name: person.name, src: person.avatarUrl },
+    checked: field.type === 'user' ? asText === person.id : asArray.includes(person.id),
+    onCheckedChange: (on: boolean) =>
+      field.type === 'user' ? commit(on ? person.id : null) : commit(toggle(asArray, person.id, on)),
+  })),
+)
+
+const dateValue = $derived(field.type === 'datetime' && asText ? asText.slice(0, 16) : asText.slice(0, 10))
+</script>
+
+{#if field.type === 'textarea'}
+  <!-- Bare rather than the boxed `Textarea`: a property row shows its value inline and only looks
+       like a control while you are in it (DESIGN.md 3.13). -->
+  <textarea
+    class="val-input"
+    value={asText}
+    rows="2"
+    disabled={!editable}
+    {required}
+    placeholder={editable ? t('field_empty') : ''}
+    aria-label={field.name}
+    onblur={(e) => commit(e.currentTarget.value)}
+  ></textarea>
+{:else if field.type === 'number' || field.type === 'text' || field.type === 'url'}
+  <input
+    class="val-input"
+    value={asText}
+    type={field.type === 'number' ? 'number' : field.type === 'url' ? 'url' : 'text'}
+    disabled={!editable}
+    {required}
+    min={field.config.min}
+    max={field.config.max}
+    maxlength={field.config.maxLength}
+    placeholder={editable ? (field.type === 'url' ? 'https://' : t('field_empty')) : ''}
+    aria-label={field.name}
+    onblur={(e) => {
+      const raw = e.currentTarget.value
+      commit(field.type === 'number' ? (raw === '' ? null : Number(raw)) : raw)
+    }}
+  />
+{:else if field.type === 'checkbox'}
+  <Checkbox
+    checked={value === true}
+    disabled={!editable}
+    ariaLabel={field.name}
+    onCheckedChange={(on: boolean) => onchange(on)}
+  />
+{:else if field.type === 'date' || field.type === 'datetime'}
+  <input
+    class="date"
+    type={field.type === 'datetime' ? 'datetime-local' : 'date'}
+    value={dateValue}
+    disabled={!editable}
+    {required}
+    aria-label={field.name}
+    onchange={(e) => commit(e.currentTarget.value ? new Date(e.currentTarget.value).toISOString() : null)}
+  />
+{:else if field.type === 'select' || field.type === 'multiselect' || field.type === 'label'}
+  {@const many = field.type !== 'select'}
+  <DropdownMenu items={editable ? (many ? multiSelectMenu : selectMenu) : []} align="start">
+    {#snippet trigger(props)}
+      <button
+        {...props}
+        type="button"
+        class="val wrap"
+        class:static={!editable}
+        disabled={!editable}
+        title={editable ? undefined : t('no_permission')}>
+        {#if many ? asArray.length === 0 : !asText}
+          <span class="muted">{t('field_empty')}</span>
+        {:else if many}
+          {#each asArray as id (id)}
+            <span class="chip">{optionLabel(id)}</span>
+          {/each}
+        {:else}
+          {optionLabel(asText)}
+        {/if}
+      </button>
+    {/snippet}
+  </DropdownMenu>
+{:else if field.type === 'user' || field.type === 'multiuser'}
+  {@const many = field.type === 'multiuser'}
+  <DropdownMenu items={editable ? userMenu : []} align="start">
+    {#snippet trigger(props)}
+      <button
+        {...props}
+        type="button"
+        class="val wrap"
+        class:static={!editable}
+        disabled={!editable}
+        title={editable ? undefined : t('no_permission')}>
+        {#if many ? asArray.length === 0 : !asText}
+          <span class="muted">{t('field_empty')}</span>
+        {:else if many}
+          {#each asArray as id (id)}
+            <span class="chip">{personName(id)}</span>
+          {/each}
+        {:else}
+          {personName(asText)}
+        {/if}
+      </button>
+    {/snippet}
+  </DropdownMenu>
+{:else if field.type === 'formula'}
+  <span class="val static" title={t('field_formula_hint')}>
+    {#if value === null || value === undefined}
+      <span class="muted">{t('field_empty')}</span>
+    {:else}
+      {String(value)}
+    {/if}
+  </span>
+{:else if field.type === 'relation'}
+  <div class="rel">
+    {#if asArray.length}
+      <ul class="links">
+        {#each asArray as id (id)}
+          <li>
+            <IssueInline {id} />
+            {#if editable}
+              <IconButton
+                icon="x"
+                size={22}
+                label={t('relation_unlink')}
+                onclick={() => commit(asArray.filter((v) => v !== id))}
+              />
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if editable}
+      {#if picking}
+        <IssuePicker
+          {workspaceId}
+          exclude={[...asArray, ...(issueId ? [issueId] : [])]}
+          placeholder={t('relation_link')}
+          onpick={(issue) => {
+            // `relationMultiple: false` means one link, so a new pick replaces rather than appends.
+            commit(field.config.relationMultiple === false ? [issue.id] : [...asArray, issue.id])
+            picking = false
+          }}
+          oncancel={() => (picking = false)}
+        />
+      {:else if field.config.relationMultiple !== false || asArray.length === 0}
+        <button type="button" class="link-btn" onclick={() => (picking = true)}>
+          {t('relation_link')}
+        </button>
+      {/if}
+    {:else if !asArray.length}
+      <span class="muted">{t('field_empty')}</span>
+    {/if}
+  </div>
+{/if}
+<style>
+.val-input,
+.date {
+  width: 100%;
+  min-height: 24px;
+  padding: 2px 6px;
+  margin-inline-start: -6px;
+  border: 1px solid transparent;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  resize: vertical;
+}
+.val-input:hover:not(:disabled),
+.date:hover:not(:disabled) {
+  background: var(--kern-surface-active);
+}
+.val-input:focus,
+.date:focus {
+  border-color: var(--kern-border);
+  background: var(--kern-surface);
+  outline: none;
+}
+.val-input:disabled,
+.date:disabled {
+  cursor: default;
+}
+.val-input::placeholder {
+  color: var(--kern-ink-350);
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--kern-surface-active);
+  font-size: 12px;
+}
+.muted {
+  color: var(--kern-ink-350);
+}
+.rel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.links li {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.link-btn {
+  align-self: flex-start;
+  padding: 2px 6px;
+  margin-inline-start: -6px;
+  border: 0;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: var(--kern-ink-350);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.link-btn:hover {
+  background: var(--kern-surface-active);
+  color: var(--kern-ink-900);
+}
+.val {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 2px 6px;
+  margin-inline-start: -6px;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: start;
+  cursor: pointer;
+}
+.val.wrap {
+  flex-wrap: wrap;
+}
+.val:hover:not(.static) {
+  background: var(--kern-surface-active);
+}
+.val.static {
+  cursor: default;
+}
+</style>

package/src/client/components/DueDate.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { messageLocale } from '@kernhq/ui'
+import { t } from '../i18n.js'
+import { daysUntil, dueTone } from '../index.js'
+
+/**
+ * A due date as the list and the board show it (DESIGN.md 3.0): anything due today, tomorrow or
+ * already late is drawn in danger red, everything else stays quiet.
+ */
+interface Props {
+  date: string
+  class?: string
+}
+let { date, class: className = '' }: Props = $props()
+
+const days = $derived(daysUntil(date))
+const tone = $derived(dueTone(date))
+const text = $derived.by(() => {
+  if (days === 0) return t('due_today')
+  if (days === 1) return t('due_tomorrow')
+  const [y, mo, d] = date.split('-').map(Number)
+  const local = new Date(y ?? 1970, (mo ?? 1) - 1, d ?? 1)
+  const opts: Intl.DateTimeFormatOptions =
+    local.getFullYear() === new Date().getFullYear()
+      ? { day: 'numeric', month: 'short' }
+      : { day: 'numeric', month: 'short', year: 'numeric' }
+  return new Intl.DateTimeFormat(messageLocale(), opts).format(local)
+})
+</script>
+
+<time datetime={date} class="kdue {tone} {className}" title={days < 0 ? t('due_overdue') : undefined}>
+  {text}
+</time>
+
+<style>
+  .kdue {
+    font-size: 12.5px;
+    white-space: nowrap;
+    color: var(--kern-ink-350);
+  }
+  .kdue.hot {
+    color: var(--kern-danger);
+  }
+</style>

package/src/client/components/FilterMenu.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { DropdownMenu, type MenuItem, ToolbarButton } from '@kernhq/ui'
+import { getTrackerCatalogue } from '../context.svelte.js'
+import type { TrackerFilters } from '../filters.js'
+import { t } from '../i18n.js'
+import { PRIORITY_GROUP_ORDER, type Priority } from '../index.js'
+import { priorityLabel } from '../labels.js'
+
+/**
+ * The toolbar's Filter menu (DESIGN.md 2.5).
+ *
+ * Each section is a set of checkboxes over the workspace's own data, and the result is turned into
+ * KQL by `filters.ts`, so what the menu builds and what someone types in the query box are the same
+ * language and can be read side by side.
+ */
+interface Props {
+  filters: TrackerFilters
+  onchange: (next: TrackerFilters) => void
+}
+let { filters, onchange }: Props = $props()
+
+const cat = getTrackerCatalogue()
+
+function toggle<K extends keyof TrackerFilters>(key: K, value: string) {
+  const current = filters[key] as string[]
+  const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value]
+  onchange({ ...filters, [key]: next })
+}
+
+const items = $derived<MenuItem[]>([
+  { type: 'label' as const, label: t('group_project') },
+  ...cat.projects.map((p) => ({
+    type: 'checkbox' as const,
+    id: `p-${p.id}`,
+    label: p.name,
+    checked: filters.projectIds.includes(p.id),
+    onCheckedChange: () => toggle('projectIds', p.id),
+  })),
+  { type: 'separator' as const },
+  { type: 'label' as const, label: t('group_status') },
+  ...cat.statuses.map((s) => ({
+    type: 'checkbox' as const,
+    id: `s-${s.id}`,
+    label: s.name,
+    checked: filters.statusIds.includes(s.id),
+    onCheckedChange: () => toggle('statusIds', s.id),
+  })),
+  { type: 'separator' as const },
+  { type: 'label' as const, label: t('group_priority') },
+  ...PRIORITY_GROUP_ORDER.map((p: Priority) => ({
+    type: 'checkbox' as const,
+    id: `pr-${p}`,
+    label: priorityLabel(p),
+    checked: filters.priorities.includes(p),
+    onCheckedChange: () => toggle('priorities', p),
+  })),
+  { type: 'separator' as const },
+  { type: 'label' as const, label: t('group_assignee') },
+  ...cat.people.map((person) => ({
+    type: 'checkbox' as const,
+    id: `a-${person.id}`,
+    label: person.name,
+    avatar: { id: person.id, name: person.name, src: person.avatarUrl },
+    checked: filters.assigneeIds.includes(person.id),
+    onCheckedChange: () => toggle('assigneeIds', person.id),
+  })),
+  { type: 'separator' as const },
+  { type: 'label' as const, label: t('group_label') },
+  ...cat.labels.map((label) => ({
+    type: 'checkbox' as const,
+    id: `l-${label.id}`,
+    label: label.name,
+    checked: filters.labelIds.includes(label.id),
+    onCheckedChange: () => toggle('labelIds', label.id),
+  })),
+])
+</script>
+
+<DropdownMenu {items} align="start" class="kfilter-menu">
+  {#snippet trigger(props)}
+    <!-- the count belongs to the active-filter chip next to this button, not on the button itself -->
+    <ToolbarButton {...props} icon="filter" data-testid="filter-button">{t('filter')}</ToolbarButton>
+  {/snippet}
+</DropdownMenu>
+
+<style>
+  :global(.kfilter-menu) {
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+</style>

package/src/client/components/GroupHeader.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+import { Avatar, Icon } from '@kernhq/ui'
+import { getTrackerCatalogue } from '../context.svelte.js'
+import { t } from '../i18n.js'
+import type { StatusCategory } from '../index.js'
+import type { GroupBadge } from '../labels.js'
+import { estimateLabel } from '../labels.js'
+import PriorityGlyph from './PriorityGlyph.svelte'
+import StatusIcon from './StatusIcon.svelte'
+
+/**
+ * The heading above each group of issues (DESIGN.md 3.2).
+ *
+ * The caret is a filled triangle that points right when the group is closed and down when it is
+ * open; the badge to its left is whatever the list is grouped by, so grouping by status shows the
+ * status glyph and grouping by assignee shows a face.
+ */
+interface Props {
+  label: string
+  count: number
+  estimate?: number | null
+  open?: boolean
+  badge?: GroupBadge
+  onToggle: () => void
+  onAdd?: () => void
+}
+let { label, count, estimate = null, open = true, badge, onToggle, onAdd }: Props = $props()
+
+/** The unit a sum of estimates is said in, which belongs to the projects in view. */
+const cat = getTrackerCatalogue()
+</script>
+
+<div class="kgh">
+  <button type="button" class="head" aria-expanded={open} onclick={onToggle}>
+    <svg class="caret" class:open width="9" height="9" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M8 5l9 7-9 7z" fill="currentColor" />
+    </svg>
+    {#if badge?.kind === 'status'}
+      <StatusIcon category={badge.category as StatusCategory} statusId={badge.id} name={label} size={16} />
+    {:else if badge?.kind === 'priority'}
+      <PriorityGlyph priority={badge.priority} size={16} />
+    {:else if badge?.kind === 'person'}
+      <Avatar name={badge.name} src={badge.avatarUrl} id={badge.id} size={16} />
+    {:else if badge?.kind === 'colour'}
+      <span class="swatch" style:background={badge.color ?? 'var(--kern-ink-330)'}></span>
+    {/if}
+    <span class="name">{label}</span>
+    <span class="count">{count}</span>
+  </button>
+  <span class="sp"></span>
+  {#if estimate !== null && estimate > 0}
+    <span class="count">{estimateLabel(estimate, cat.estimateUnit)}</span>
+  {/if}
+  {#if onAdd}
+    <button type="button" class="add" aria-label={t('new_issue')} onclick={onAdd}>
+      <Icon name="plus" size={13} strokeWidth={1.9} />
+    </button>
+  {/if}
+</div>
+
+<style>
+  .kgh {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 42px;
+    padding: 0 28px;
+    border-bottom: 1px solid var(--kern-border);
+    background: var(--kern-surface-header);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+  .head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    text-align: start;
+  }
+  .caret {
+    color: var(--kern-ink-350);
+    flex: none;
+    transition: transform 0.14s;
+  }
+  .caret.open {
+    transform: rotate(90deg);
+  }
+  :global([dir='rtl']) .caret {
+    transform: rotate(180deg);
+  }
+  :global([dir='rtl']) .caret.open {
+    transform: rotate(90deg);
+  }
+  .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: var(--kern-r-xs);
+    flex: none;
+  }
+  .name {
+    font-size: 13.5px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--kern-ink-900);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .count {
+    font-family: var(--kern-font-mono);
+    font-size: 11.5px;
+    letter-spacing: -0.01em;
+    color: var(--kern-ink-250);
+    white-space: nowrap;
+  }
+  .sp {
+    flex: 1;
+  }
+  .add {
+    width: 22px;
+    height: 22px;
+    border-radius: var(--kern-r-sm);
+    display: grid;
+    place-items: center;
+    color: var(--kern-ink-400);
+    flex: none;
+  }
+  .add:hover {
+    background: var(--kern-ghost-hover-dark);
+  }
+  @media (max-width: 768px) {
+    .kgh {
+      padding: 0 16px;
+    }
+  }
+</style>

package/src/client/components/HomeLinks.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { navigation, SidebarGroup, SidebarItem } from '@kernhq/ui'
+import { t } from '../i18n.js'
+import { trackerHref } from '../nav.js'
+
+/**
+ * What the tracker puts on the home sidebar.
+ *
+ * These three rows lived in the application layout, which meant a workspace with the tracker
+ * switched off still saw them and still linked into it. They are the tracker's presets — real
+ * queries the issues screen reads out of the URL — so they belong to the tracker, and appear only
+ * when it is enabled and the reader may see issues.
+ */
+interface Props {
+  workspaceSlug: string
+}
+let { workspaceSlug }: Props = $props()
+
+const params = $derived(new URLSearchParams(navigation.search))
+const inTracker = $derived(navigation.pathname === `/${workspaceSlug}/tracker`)
+
+const rows = [
+  { preset: 'assigned', icon: 'circle-user', label: () => t('preset_assigned') },
+  { preset: 'created', icon: 'square-pen', label: () => t('preset_created') },
+  { preset: 'subscribed', icon: 'eye', label: () => t('preset_subscribed') },
+] as const
+</script>
+
+<SidebarGroup title={t('title')}>
+  {#each rows as row (row.preset)}
+    <SidebarItem
+      label={row.label()}
+      icon={row.icon}
+      href={trackerHref(workspaceSlug, { preset: row.preset })}
+      active={inTracker && params.get('preset') === row.preset}
+    />
+  {/each}
+</SidebarGroup>