@kernhq/module-tracker 0.10.1 → 0.11.0

package/src/client/components/IssueInline.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { navigation, Skeleton, session } from '@kernhq/ui'
+import { createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { statusStyle } from '../index.js'
+import { trackerKeys } from '../query.js'
+import StatusIcon from './StatusIcon.svelte'
+
+/**
+ * How an issue appears when another module refers to one: a chat message that mentions KRN-12, a
+ * document that embeds it, a search result. Registered as the tracker's object presenter, so those
+ * surfaces do not need to know anything about issues beyond the id.
+ */
+interface Props {
+  /** issue id or key */
+  id: string
+  workspaceId?: string
+}
+let { id, workspaceId }: Props = $props()
+
+const api = getTrackerApi()
+const slug = $derived(navigation.workspaceSlug)
+const wsId = $derived(workspaceId ?? session.workspaces.find((w) => w.slug === slug)?.id ?? '')
+const isKey = $derived(/^[A-Z][A-Z0-9]{1,9}-\d+$/.test(id))
+
+const issueQuery = createQuery(() => ({
+  queryKey: trackerKeys.issue(wsId, id),
+  queryFn: () =>
+    isKey
+      ? api.issues.getByKey({ workspaceId: wsId, key: id })
+      : api.issues.get({ workspaceId: wsId, issueId: id }),
+  enabled: Boolean(wsId),
+}))
+const issue = $derived(issueQuery.data ?? null)
+</script>
+
+{#if !issue}
+  <span class="kinline loading"><Skeleton class="h-[14px] w-[140px]" /></span>
+{:else}
+  <a class="kinline" href="/{slug}/tracker?issue={issue.key}" style:--tint={statusStyle(issue.statusCategory, issue.statusId).tint}>
+    <StatusIcon category={issue.statusCategory} statusId={issue.statusId} size={14} />
+    <span class="key">{issue.key}</span>
+    <span class="title">{issue.title}</span>
+  </a>
+{/if}
+
+<style>
+  .kinline {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 2px 7px;
+    border-radius: var(--kern-r-md);
+    background: var(--tint, var(--kern-surface-chip));
+    font-size: 12.5px;
+    color: var(--kern-ink-800);
+    vertical-align: baseline;
+  }
+  .kinline:hover {
+    color: var(--kern-ink-900);
+  }
+  .key {
+    font-family: var(--kern-font-mono);
+    font-size: 11.5px;
+    letter-spacing: -0.01em;
+    color: var(--kern-ink-350);
+  }
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 28ch;
+  }
+</style>

package/src/client/components/IssueListView.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+import { EmptyState } from '@kernhq/ui'
+import { getTrackerCatalogue } from '../context.svelte.js'
+import { t } from '../i18n.js'
+import { type GroupBy, type GroupKey, groupIssues, type Issue } from '../index.js'
+import { describeGroup } from '../labels.js'
+import GroupHeader from './GroupHeader.svelte'
+import IssueRow from './IssueRow.svelte'
+
+/**
+ * The issues list (DESIGN.md 3.2).
+ *
+ * Group headings sit flush under the toolbar and stick while you scroll; empty groups are hidden.
+ * Rows are real buttons, so tabbing and screen readers work without any extra wiring, and the page
+ * forwards j/k/x/Enter here through `handleKey` so the keyboard works before anything has focus.
+ */
+interface Props {
+  issues: Issue[]
+  /** a built-in group key or `cf.<key>` */
+  groupBy: string
+  selection: Set<string>
+  loading?: boolean
+  onopen: (issue: Issue) => void
+  onselect: (issue: Issue) => void
+  oncreate?: (groupKey: GroupKey) => void
+}
+let { issues, groupBy, selection, loading = false, onopen, onselect, oncreate }: Props = $props()
+
+const cat = getTrackerCatalogue()
+
+let collapsed = $state<string[]>([])
+let cursor = $state(0)
+let listEl = $state<HTMLDivElement | null>(null)
+
+const groups = $derived(
+  groupIssues(issues, groupBy, {
+    statusOrder: cat.statusOrder,
+    statusCategory: cat.statusCategory,
+    order: (_by, key) => {
+      const i = cat.projects.findIndex((p) => p.id === key)
+      return i < 0 ? 500 : i
+    },
+  }),
+)
+
+const keyId = (key: GroupKey) => key ?? '__none__'
+const isCollapsed = (key: GroupKey) => collapsed.includes(keyId(key))
+
+/** Rows in visual order, so the cursor moves the way the eye does. */
+const visible = $derived(groups.filter((g) => !isCollapsed(g.key)).flatMap((g) => g.items))
+const indexOf = $derived(new Map(visible.map((issue, i) => [issue.id, i])))
+
+function toggleGroup(key: GroupKey) {
+  const id = keyId(key)
+  collapsed = collapsed.includes(id) ? collapsed.filter((c) => c !== id) : [...collapsed, id]
+}
+
+function move(delta: number) {
+  if (visible.length === 0) return
+  cursor = Math.max(0, Math.min(visible.length - 1, cursor + delta))
+  const key = visible[cursor]?.key
+  // rows are looked up by key rather than held in an array of refs: groups collapse and the query
+  // changes underneath the cursor, and a stale ref would focus a row that is no longer there
+  if (key) listEl?.querySelector<HTMLButtonElement>(`[data-issue-key="${CSS.escape(key)}"]`)?.focus()
+}
+
+/**
+ * Page-level keys for the list. Returns true when the event was consumed, so the page can leave
+ * everything else alone.
+ */
+export function handleKey(event: KeyboardEvent): boolean {
+  const current = visible[cursor]
+  switch (event.key) {
+    case 'j':
+    case 'ArrowDown':
+      move(1)
+      return true
+    case 'k':
+    case 'ArrowUp':
+      move(-1)
+      return true
+    case 'x':
+      if (!current) return false
+      onselect(current)
+      return true
+    case 'Enter':
+      if (!current) return false
+      onopen(current)
+      return true
+    default:
+      return false
+  }
+}
+
+// keep the cursor inside the list when filtering or grouping changes the rows underneath it
+$effect(() => {
+  if (cursor > visible.length - 1) cursor = Math.max(0, visible.length - 1)
+})
+</script>
+
+<div class="klist" bind:this={listEl}>
+  {#if groups.length === 0}
+    <div class="empty">
+      <EmptyState
+        icon="square-check-big"
+        title={loading ? t('common.loading') : t('empty_title')}
+        description={loading ? undefined : t('empty_body')}
+      />
+    </div>
+  {:else}
+    {#each groups as group (keyId(group.key))}
+      {@const described = describeGroup(group.key, groupBy, cat)}
+      <section>
+        <GroupHeader
+          label={described.label}
+          badge={described.badge}
+          count={group.items.length}
+          estimate={group.estimate}
+          open={!isCollapsed(group.key)}
+          onToggle={() => toggleGroup(group.key)}
+          onAdd={oncreate ? () => oncreate(group.key) : undefined}
+        />
+        {#if !isCollapsed(group.key)}
+          {#each group.items as issue (issue.id)}
+            {@const index = indexOf.get(issue.id) ?? 0}
+            <IssueRow
+              {issue}
+              selected={selection.has(issue.id)}
+              active={index === cursor}
+              onopen={(i) => {
+                cursor = index
+                onopen(i)
+              }}
+              ontoggle={(i) => {
+                cursor = index
+                onselect(i)
+              }}
+            />
+          {/each}
+        {/if}
+      </section>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .klist {
+    padding-bottom: 40px;
+  }
+  .empty {
+    padding: 40px 28px;
+  }
+</style>

package/src/client/components/IssuePicker.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+import { Spinner } from '@kernhq/ui'
+import { createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import type { Issue } from '../index.js'
+import { trackerKeys } from '../query.js'
+import StatusIcon from './StatusIcon.svelte'
+
+/**
+ * Find an issue by key or title.
+ *
+ * Searching goes through KQL (`text ~ "…"`), the same reader the query box uses, so what is
+ * matchable here is exactly what is matchable there — one search behaviour, not two.
+ */
+interface Props {
+  workspaceId: string
+  projectId?: string | null
+  /** never offer these — an issue cannot block or parent itself */
+  exclude?: string[]
+  placeholder?: string
+  onpick: (issue: Issue) => void
+  oncancel?: () => void
+}
+let { workspaceId, projectId = null, exclude = [], placeholder, onpick, oncancel }: Props = $props()
+
+let term = $state('')
+let active = $state(0)
+let box = $state<HTMLInputElement | null>(null)
+
+/** Quote for KQL: a title with a `"` in it must not end the string early. */
+const quoted = $derived(term.trim().replace(/["\\]/g, '\\$&'))
+
+const results = createQuery(() => ({
+  queryKey: trackerKeys.issues(workspaceId, `picker:${projectId ?? 'all'}:${quoted}`),
+  queryFn: () =>
+    api.issues.query({
+      workspaceId,
+      kql: `text ~ "${quoted}"`,
+      ...(projectId ? { projectIds: [projectId] } : {}),
+      limit: 8,
+      includeArchived: false,
+      include: { total: false, groupCounts: false, full: false },
+    }),
+  enabled: quoted.length >= 2,
+}))
+
+const api = getTrackerApi()
+const excluded = $derived(new Set(exclude))
+const items = $derived((results.data?.items ?? []).filter((i) => !excluded.has(i.id)))
+
+function onkeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    active = items.length ? (active + 1) % items.length : 0
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    active = items.length ? (active - 1 + items.length) % items.length : 0
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    const chosen = items[active]
+    if (chosen) onpick(chosen)
+  } else if (event.key === 'Escape') {
+    event.preventDefault()
+    oncancel?.()
+  }
+}
+
+$effect(() => {
+  box?.focus()
+})
+</script>
+
+<div class="picker">
+  <input
+    bind:this={box}
+    bind:value={term}
+    type="search"
+    placeholder={placeholder ?? t('pick_issue')}
+    aria-label={placeholder ?? t('pick_issue')}
+    data-testid="issue-picker"
+    {onkeydown}
+    oninput={() => (active = 0)}
+  />
+  {#if quoted.length >= 2}
+    <ul class="results" role="listbox">
+      {#if results.isPending}
+        <li class="state"><Spinner size={14} /></li>
+      {:else if !items.length}
+        <li class="state">{t('pick_issue_none')}</li>
+      {:else}
+        {#each items as issue, i (issue.id)}
+          <li>
+            <button
+              type="button"
+              role="option"
+              aria-selected={i === active}
+              class:active={i === active}
+              onclick={() => onpick(issue)}
+              onmouseenter={() => (active = i)}
+            >
+              <StatusIcon category={issue.statusCategory} statusId={issue.statusId} size={13} />
+              <span class="ikey">{issue.key}</span>
+              <span class="ititle">{issue.title}</span>
+            </button>
+          </li>
+        {/each}
+      {/if}
+    </ul>
+  {/if}
+</div>
+
+<style>
+.picker {
+  position: relative;
+}
+input {
+  width: 100%;
+  padding: 5px 8px;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+}
+input:focus-visible {
+  outline: none;
+  border-color: var(--kern-accent);
+  box-shadow: none;
+}
+.results {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + 4px);
+  z-index: 20;
+  max-height: 220px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-surface);
+  box-shadow: var(--kern-shadow-popover);
+}
+.results button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: start;
+  cursor: pointer;
+}
+.results button.active {
+  background: var(--kern-surface-active);
+}
+.ikey {
+  font-family: var(--kern-font-mono);
+  font-size: 12px;
+  color: var(--kern-ink-350);
+}
+.ititle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.state {
+  padding: 6px;
+  font-size: 12px;
+  color: var(--kern-ink-350);
+}
+</style>

package/src/client/components/IssueRow.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+import { Avatar, AvatarStack, Icon } from '@kernhq/ui'
+import { getTrackerCatalogue } from '../context.svelte.js'
+import { t } from '../i18n.js'
+import type { Issue } from '../index.js'
+import { estimateLabel } from '../labels.js'
+import DueDate from './DueDate.svelte'
+import PriorityGlyph from './PriorityGlyph.svelte'
+import StatusIcon from './StatusIcon.svelte'
+
+/**
+ * One row of the issues list (DESIGN.md 3.2).
+ *
+ * The grid is fixed so every row lines up down the page: priority, key, status, title, project,
+ * estimate, due date, assignee. Selecting swaps the priority cell for a tick, which keeps the
+ * columns from shifting when you multi-select.
+ */
+interface Props {
+  issue: Issue
+  selected?: boolean
+  active?: boolean
+  onopen: (issue: Issue) => void
+  ontoggle: (issue: Issue, event: MouseEvent | KeyboardEvent) => void
+}
+let { issue, selected = false, active = false, onopen, ontoggle }: Props = $props()
+
+const cat = getTrackerCatalogue()
+const project = $derived(cat.project(issue.projectId))
+const status = $derived(cat.status(issue.statusId))
+const assignees = $derived(issue.assigneeIds.map((id) => cat.person(id)).filter((p) => p !== undefined))
+</script>
+
+<button
+  type="button"
+  class="krow"
+  class:selected
+  class:active
+  data-testid="issue-row"
+  data-issue-key={issue.key}
+  aria-current={active ? 'true' : undefined}
+  onclick={(e) => (e.metaKey || e.ctrlKey || e.shiftKey ? ontoggle(issue, e) : onopen(issue))}
+>
+  <span class="cell mark">
+    {#if selected}
+      <Icon name="check" size={14} strokeWidth={2} />
+    {:else}
+      <PriorityGlyph priority={issue.priority} size={15} />
+    {/if}
+  </span>
+
+  <span class="cell key">{issue.key}</span>
+
+  <span class="cell st">
+    <StatusIcon
+      category={issue.statusCategory}
+      statusId={issue.statusId}
+      name={status?.name}
+      size={15}
+      label={status?.name}
+    />
+  </span>
+
+  <span class="cell title">{issue.title}</span>
+
+  {#if project}
+    <span class="cell chip">{project.name}</span>
+  {:else}
+    <span class="cell"></span>
+  {/if}
+
+  <span class="cell est">
+    {#if issue.estimate !== null}{estimateLabel(issue.estimate, issue.estimateUnit)}{/if}
+  </span>
+
+  <span class="cell due">
+    {#if issue.dueDate}<DueDate date={issue.dueDate} />{/if}
+  </span>
+
+  <span class="cell people">
+    {#if assignees.length === 1}
+      <Avatar name={assignees[0]?.name} src={assignees[0]?.avatarUrl} id={assignees[0]?.id} size={22} />
+    {:else if assignees.length > 1}
+      <AvatarStack people={assignees} size={22} max={2} />
+    {/if}
+  </span>
+</button>
+
+<style>
+  .krow {
+    display: grid;
+    /* the last column is 24px for one avatar and grows for a stack, rather than overlapping the due date */
+    grid-template-columns: 18px 62px 18px minmax(0, 1fr) auto auto auto minmax(24px, auto);
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    height: 40px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--kern-border-hairline);
+    text-align: start;
+    transition: background-color 80ms;
+  }
+  .krow:hover {
+    background: var(--kern-surface-raised);
+  }
+  /* the keyboard cursor is only drawn while the list has focus, so the list has no extra resting state */
+  .krow:focus-visible {
+    outline: none;
+    background: var(--kern-surface-raised);
+    box-shadow: inset 2px 0 0 var(--kern-accent);
+  }
+  :global([dir='rtl']) .krow:focus-visible {
+    box-shadow: inset -2px 0 0 var(--kern-accent);
+  }
+  .krow.selected {
+    background: var(--kern-accent-tint);
+  }
+  .cell {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+  .mark {
+    justify-content: center;
+    color: var(--kern-accent-deep);
+  }
+  .key {
+    font-family: var(--kern-font-mono);
+    letter-spacing: -0.01em;
+    font-size: 13px;
+    color: var(--kern-ink-350);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .title {
+    font-size: 14px;
+    color: var(--kern-ink-800);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+  .chip {
+    font-size: 12px;
+    padding: 3px 9px;
+    border-radius: var(--kern-r-md);
+    background: var(--kern-surface-chip);
+    color: var(--kern-ink-520);
+    white-space: nowrap;
+  }
+  .est,
+  .due {
+    font-size: 12.5px;
+    color: var(--kern-ink-350);
+    white-space: nowrap;
+  }
+  .people {
+    justify-content: flex-end;
+  }
+  @media (max-width: 768px) {
+    .krow {
+      grid-template-columns: 18px 58px minmax(0, 1fr) auto minmax(24px, auto);
+      padding: 0 12px;
+    }
+    .st,
+    .chip,
+    .est {
+      display: none;
+    }
+  }
+</style>