@kernhq/module-tracker 0.10.1 → 0.11.0

package/src/client/settings/ImportSettings.svelte

@@ -0,0 +1,410 @@
+<script lang="ts">
+import {
+  Badge,
+  Button,
+  messageLocale,
+  navigation,
+  ProgressBar,
+  Select,
+  SettingsPage,
+  SettingsSection,
+  Spinner,
+  session,
+  toast,
+  uploadFile,
+} from '@kernhq/ui'
+import { createMutation, createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { previewCsv } from '../csv.js'
+import { t } from '../i18n.js'
+import type { ImportJob } from '../index.js'
+import { canTracker } from '../permissions.js'
+import { trackerKeys } from '../query.js'
+
+/**
+ * Bringing work in from somewhere else.
+ *
+ * The columns are read in the browser before anything is uploaded, so the mapping screen offers the
+ * file's real names and a row of its real values. Asking somebody to map "column 3" turns a
+ * five-minute import into a spreadsheet-counting exercise.
+ *
+ * Nothing is imported until the mapping is confirmed. An import that guesses is an import somebody
+ * has to undo, and there is no undo.
+ */
+const api = getTrackerApi()
+
+const slug = $derived(navigation.workspaceSlug)
+const workspaceId = $derived(session.workspaces.find((w) => w.slug === slug)?.id ?? '')
+const canManage = $derived(canTracker('projectManage'))
+
+/** `''` means "do not import this column", which is the safe default for every one of them. */
+const DESTINATIONS = [
+  { value: '', label: () => t('import_skip') },
+  { value: 'title', label: () => t('import_field_title') },
+  { value: 'description', label: () => t('import_field_description') },
+  { value: 'status', label: () => t('import_field_status') },
+  { value: 'priority', label: () => t('import_field_priority') },
+  { value: 'assignee', label: () => t('import_field_assignee') },
+  { value: 'labels', label: () => t('import_field_labels') },
+  { value: 'due', label: () => t('import_field_due') },
+  { value: 'estimate', label: () => t('import_field_estimate') },
+  { value: 'key', label: () => t('import_field_key') },
+]
+
+let selectedProject = $state<string | null>(null)
+let file = $state<File | null>(null)
+let preview = $state<{ columns: string[]; rows: string[][] }>({ columns: [], rows: [] })
+let mapping = $state<Record<string, string>>({})
+let hasHeader = $state(true)
+let jobId = $state<string | null>(null)
+
+const projectsQuery = createQuery(() => ({
+  queryKey: trackerKeys.projects(workspaceId),
+  queryFn: () => api.projects.list({ workspaceId }),
+  enabled: Boolean(workspaceId),
+}))
+const projects = $derived(projectsQuery.data ?? [])
+const projectId = $derived(selectedProject ?? projects[0]?.id ?? '')
+
+const fieldsQuery = createQuery(() => ({
+  queryKey: trackerKeys.fields(workspaceId),
+  queryFn: () => api.fields.list({ workspaceId, includeArchived: false }),
+  enabled: Boolean(workspaceId),
+}))
+
+/** A column can go to a built-in field or to any custom field, by the same `cf.<key>` name KQL uses. */
+const destinations = $derived([
+  ...DESTINATIONS.map((d) => ({ value: d.value, label: d.label() })),
+  ...(fieldsQuery.data ?? []).map((f) => ({ value: `cf.${f.key}`, label: f.name })),
+])
+
+/** Polls only while something is running: a finished import has nothing more to say. */
+const jobQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'import', jobId ?? ''],
+  queryFn: () => api.imports.get({ workspaceId, id: jobId as string }),
+  enabled: Boolean(jobId),
+  refetchInterval: (query: { state: { data?: ImportJob } }) =>
+    query.state.data && ['completed', 'failed', 'cancelled'].includes(query.state.data.status) ? false : 1500,
+}))
+const job = $derived((jobQuery.data ?? null) as ImportJob | null)
+const running = $derived(job ? ['pending', 'running'].includes(job.status) : false)
+
+async function chooseFile(list: FileList | null) {
+  const chosen = list?.[0]
+  if (!chosen) return
+  file = chosen
+  jobId = null
+  const text = await chosen.text()
+  preview = previewCsv(text, { hasHeader })
+  // Nothing is mapped to begin with. A guess that lands a "Notes" column in the title is worse
+  // than an empty form, because nobody re-reads a field that already looks filled in.
+  mapping = {}
+}
+
+const start = createMutation(() => ({
+  mutationFn: async () => {
+    const uploaded = await uploadFile({
+      workspaceId,
+      file: file as File,
+      name: (file as File).name,
+      mimeType: 'text/csv',
+    })
+    const columns: Record<string, string> = {}
+    for (const [column, destination] of Object.entries(mapping))
+      if (destination) columns[column] = destination
+    return api.imports.start({
+      workspaceId,
+      projectId,
+      source: 'csv',
+      fileId: uploaded.id,
+      mapping: { columns, hasHeader, delimiter: ',' },
+    } as never)
+  },
+  onSuccess: (created: ImportJob) => {
+    jobId = created.id
+  },
+  onError: (error: Error) => toast.error(error.message),
+}))
+
+const cancel = createMutation(() => ({
+  mutationFn: () => api.imports.cancel({ workspaceId, id: jobId as string }),
+  onError: (error: Error) => toast.error(error.message),
+}))
+
+/**
+ * What was imported before.
+ *
+ * An import is the one thing here that happens to a project rather than in front of you: it runs,
+ * you navigate away, and afterwards the only question is what it did. `imports.list` answered that
+ * from the start and nothing asked it, so leaving the page lost the outcome for good.
+ */
+const historyQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'imports', projectId],
+  queryFn: () => api.imports.list({ workspaceId, projectId }),
+  enabled: Boolean(projectId),
+}))
+/** Newest first: the one somebody is looking for is almost always the last one. */
+const history = $derived(
+  [...(historyQuery.data ?? [])].sort((a, b) => b.createdAt.localeCompare(a.createdAt)),
+)
+
+const STATUS_LABELS: Record<string, () => string> = {
+  pending: () => t('import_pending'),
+  running: () => t('import_running'),
+  completed: () => t('import_completed'),
+  failed: () => t('import_failed'),
+  cancelled: () => t('import_cancelled'),
+}
+const statusLabel = (status: string) => STATUS_LABELS[status]?.() ?? status
+const when = new Intl.DateTimeFormat(messageLocale(), { dateStyle: 'medium', timeStyle: 'short' })
+
+/** A title is the one thing an issue cannot be created without. */
+const mappedTitle = $derived(Object.values(mapping).includes('title'))
+const canStart = $derived(Boolean(file) && mappedTitle && canManage && !running)
+</script>
+
+<SettingsPage title={t('settings_import')} description={t('settings_import_hint')}>
+  {#if projectsQuery.isPending}
+    <SettingsSection><div class="state"><Spinner /></div></SettingsSection>
+  {:else if !projects.length}
+    <SettingsSection><p class="state">{t('settings_planning_no_projects')}</p></SettingsSection>
+  {:else}
+    <SettingsSection title={t('settings_planning_project')}>
+      <Select
+        value={projectId}
+        options={projects.map((p) => ({ value: p.id, label: `${p.key} · ${p.name}` }))}
+        onValueChange={(v: string) => (selectedProject = v)}
+      />
+    </SettingsSection>
+
+    <SettingsSection title={t('import_file')} description={t('import_file_hint')}>
+      <input
+        type="file"
+        accept=".csv,text/csv"
+        aria-label={t('import_file')}
+        data-testid="import-file"
+        onchange={(e) => {
+          void chooseFile(e.currentTarget.files)
+        }}
+      />
+      <label class="check">
+        <input
+          type="checkbox"
+          checked={hasHeader}
+          onchange={async (e) => {
+            hasHeader = e.currentTarget.checked
+            if (file) preview = previewCsv(await file.text(), { hasHeader })
+          }}
+        />
+        {t('import_has_header')}
+      </label>
+    </SettingsSection>
+
+    {#if preview.columns.length}
+      <SettingsSection title={t('import_mapping')} description={t('import_mapping_hint')}>
+        <table class="map" data-testid="import-mapping">
+          <thead>
+            <tr>
+              <th scope="col">{t('import_column')}</th>
+              <th scope="col">{t('import_example')}</th>
+              <th scope="col">{t('import_goes_to')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each preview.columns as column, i (column + i)}
+              <tr>
+                <th scope="row">{column}</th>
+                <td class="example">{preview.rows[0]?.[i] ?? ''}</td>
+                <td>
+                  <Select
+                    value={mapping[column] ?? ''}
+                    options={destinations}
+                    onValueChange={(v: string) => (mapping = { ...mapping, [column]: v })}
+                  />
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+
+        {#if !mappedTitle}
+          <p class="warn" data-testid="needs-title">{t('import_needs_title')}</p>
+        {/if}
+
+        {#snippet footer()}
+          <Button
+            size="sm"
+            disabled={!canStart}
+            loading={start.isPending}
+            onclick={() => start.mutate()}
+            data-testid="import-start"
+          >
+            {t('import_start')}
+          </Button>
+        {/snippet}
+      </SettingsSection>
+    {/if}
+
+    {#if job}
+      <SettingsSection title={t('import_progress')}>
+        <div class="jrow" data-testid="import-job">
+          <Badge tone={job.status === 'failed' ? 'danger' : undefined}>{statusLabel(job.status)}</Badge>
+          <span class="counts">
+            {t('import_counts', {
+              created: job.progress.created,
+              processed: job.progress.processed,
+              total: job.progress.total,
+              failed: job.progress.failed,
+            })}
+          </span>
+          {#if running}
+            <Button size="sm" variant="ghost" onclick={() => cancel.mutate()}>{t('common.cancel')}</Button>
+          {/if}
+        </div>
+        <ProgressBar
+          value={job.progress.total ? (job.progress.processed / job.progress.total) * 100 : 0}
+        />
+        {#if job.errors.length}
+          <ul class="errors">
+            {#each job.errors.slice(0, 20) as problem, i (problem.message + i)}
+              <li>
+                {#if problem.row !== null}<span class="row">{t('import_row', { row: problem.row })}</span>{/if}
+                {problem.message}
+              </li>
+            {/each}
+          </ul>
+          {#if job.errors.length > 20}
+            <p class="note">{t('import_more_errors', { count: job.errors.length - 20 })}</p>
+          {/if}
+        {/if}
+      </SettingsSection>
+    {/if}
+
+    {#if history.length}
+      <SettingsSection title={t('import_history')} description={t('import_history_hint')}>
+        <ul class="history" data-testid="import-history">
+          {#each history as past (past.id)}
+            <li>
+              <button type="button" onclick={() => (jobId = past.id)} data-testid="import-history-row">
+                <Badge tone={past.status === 'failed' ? 'danger' : undefined}>
+                  {statusLabel(past.status)}
+                </Badge>
+                <span class="hwhen">{when.format(new Date(past.createdAt))}</span>
+                <span class="counts">
+                  {t('import_counts', {
+                    created: past.progress.created,
+                    processed: past.progress.processed,
+                    total: past.progress.total,
+                    failed: past.progress.failed,
+                  })}
+                </span>
+              </button>
+            </li>
+          {/each}
+        </ul>
+      </SettingsSection>
+    {/if}
+  {/if}
+</SettingsPage>
+
+<style>
+.history {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.history button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 6px 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.history button:hover .hwhen {
+  color: var(--kern-ink-700);
+}
+.hwhen {
+  flex: 1;
+  font-size: 12.5px;
+  color: var(--kern-ink-550);
+}
+.state {
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  font-size: 13px;
+}
+.check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+  font-size: 13px;
+}
+.map {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.map th,
+.map td {
+  padding: 6px 8px 6px 0;
+  border-bottom: 1px solid var(--kern-border-hairline);
+  text-align: start;
+  vertical-align: middle;
+}
+.map thead th {
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--kern-ink-400);
+}
+.example {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--kern-ink-450, var(--kern-ink-400));
+}
+.warn {
+  margin: 10px 0 0;
+  font-size: 13px;
+  color: var(--kern-warning);
+}
+.jrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+.counts {
+  flex: 1;
+  font-size: 13px;
+}
+.errors {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12.5px;
+  color: var(--kern-danger);
+}
+.errors .row {
+  font-family: var(--kern-font-mono);
+  font-size: 11.5px;
+  margin-inline-end: 6px;
+}
+.note {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--kern-ink-400);
+}
+</style>

package/src/client/settings/LayoutEditor.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+import { DropdownMenu, Icon, IconButton, type MenuItem } from '@kernhq/ui'
+import { untrack } from 'svelte'
+import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action'
+import { t } from '../i18n.js'
+import type { FieldLayoutItem, ResolvedField, ResolvedLayout } from '../index.js'
+
+/**
+ * Where each field sits on a work item type: the main column, the sidebar, or hidden.
+ *
+ * Three drop zones over `svelte-dnd-action`, with both lessons the board taught: `$state.raw`,
+ * because a deep-reactive proxy hands the drag library a different object on every read and it
+ * reads that as an endless stream of changes; and a `dragging` guard, so a refetch cannot yank the
+ * lists out from under a drag in progress.
+ *
+ * Pinned fields render locked. An issue without a title, a status or a type is not an issue.
+ */
+interface Props {
+  layout: ResolvedLayout
+  disabled?: boolean
+  onchange: (items: FieldLayoutItem[]) => void
+}
+let { layout, disabled = false, onchange }: Props = $props()
+
+type Zone = 'main' | 'sidebar' | 'hidden'
+/**
+ * `svelte-dnd-action` tracks items by an `id` property and nothing else. A `ResolvedField` is keyed
+ * by `fieldId`, so without this the zones look populated and refuse to move anything at all —
+ * silently, by mouse and by keyboard alike.
+ */
+type Draggable = ResolvedField & { id: string }
+const draggable = (field: ResolvedField): Draggable => ({ ...field, id: field.fieldId })
+const ZONES: Array<{ id: Zone; label: () => string; hint: () => string }> = [
+  { id: 'main', label: () => t('layout_main'), hint: () => t('layout_main_hint') },
+  { id: 'sidebar', label: () => t('layout_sidebar'), hint: () => t('layout_sidebar_hint') },
+  { id: 'hidden', label: () => t('layout_hidden'), hint: () => t('layout_hidden_hint') },
+]
+
+let columns = $state.raw<Record<Zone, Draggable[]>>({ main: [], sidebar: [], hidden: [] })
+let dragging = $state(false)
+
+/**
+ * Seed the zones from the resolved layout, and *only* from it.
+ *
+ * `dragging` is read through `untrack` on purpose: reading it normally makes it a dependency, so
+ * clearing it at the end of a drop re-runs this effect, which re-seeds the zones from the server's
+ * layout and undoes the move on screen — while the change that was already emitted is still
+ * pending. The screen and the unsaved change would disagree.
+ */
+$effect(() => {
+  const next = layout
+  untrack(() => {
+    if (dragging) return
+    columns = {
+      main: next.main.map(draggable),
+      sidebar: next.sidebar.map(draggable),
+      hidden: next.hidden.map(draggable),
+    }
+  })
+})
+
+const isShadow = (field: Draggable) =>
+  (field as unknown as Record<string, unknown>)[SHADOW_ITEM_MARKER_PROPERTY_NAME] === true
+
+/** The whole arrangement as the contract stores it: one entry per field, in the order shown. */
+function emit(next: Record<Zone, Draggable[]>) {
+  const items: FieldLayoutItem[] = []
+  for (const zone of ['main', 'sidebar', 'hidden'] as Zone[])
+    for (const [index, field] of next[zone].entries()) {
+      if (isShadow(field)) continue
+      items.push({
+        fieldId: field.fieldId,
+        section: zone,
+        order: index,
+        required: field.required && !field.pinned,
+        hidden: zone === 'hidden',
+      })
+    }
+  onchange(items)
+}
+
+/**
+ * Move a field without dragging.
+ *
+ * A drag is a fine gesture and a poor requirement: it is unreachable by keyboard and by anyone who
+ * cannot hold a pointer steady. Every arrangement possible by dragging is possible here too.
+ */
+function moveTo(field: Draggable, to: Zone) {
+  const next: Record<Zone, Draggable[]> = {
+    main: columns.main.filter((f) => f.id !== field.id),
+    sidebar: columns.sidebar.filter((f) => f.id !== field.id),
+    hidden: columns.hidden.filter((f) => f.id !== field.id),
+  }
+  // A pinned field is never hidden, whatever route asked for it.
+  const target = to === 'hidden' && field.pinned ? 'sidebar' : to
+  next[target] = [...next[target], field]
+  columns = next
+  emit(next)
+}
+
+const moveMenu = (field: Draggable, from: Zone): MenuItem[] =>
+  ZONES.filter((z) => z.id !== from && !(z.id === 'hidden' && field.pinned)).map((z) => ({
+    type: 'item' as const,
+    id: z.id,
+    label: t('layout_move_to', { zone: z.label() }),
+    onSelect: () => moveTo(field, z.id),
+  }))
+
+function consider(zone: Zone, event: CustomEvent<{ items: Draggable[] }>) {
+  dragging = true
+  columns = { ...columns, [zone]: event.detail.items }
+}
+
+function finalize(zone: Zone, event: CustomEvent<{ items: Draggable[] }>) {
+  let next = { ...columns, [zone]: event.detail.items }
+  // A pinned field that somehow reached `hidden` goes back to the sidebar. Enforcing it here rather
+  // than refusing the drop covers every route in — drag, keyboard, a stored layout written by hand.
+  if (zone === 'hidden') {
+    const stowaways = next.hidden.filter((f) => f.pinned)
+    if (stowaways.length)
+      next = {
+        ...next,
+        hidden: next.hidden.filter((f) => !f.pinned),
+        sidebar: [...next.sidebar, ...stowaways],
+      }
+  }
+  columns = next
+  dragging = false
+  emit(next)
+}
+</script>
+
+<div class="zones">
+  {#each ZONES as zone (zone.id)}
+    <section class="zone">
+      <header>
+        <span class="kern-sublabel">{zone.label()}</span>
+        <span class="hint">{zone.hint()}</span>
+      </header>
+      <ul
+        class="drop"
+        class:empty={columns[zone.id].length === 0}
+        data-testid="zone-{zone.id}"
+        use:dndzone={{
+          items: columns[zone.id],
+          dragDisabled: disabled,
+          dropFromOthersDisabled: disabled,
+          flipDurationMs: 120,
+          dropTargetStyle: {},
+        }}
+        onconsider={(e) => consider(zone.id, e)}
+        onfinalize={(e) => finalize(zone.id, e)}
+      >
+        {#each columns[zone.id] as field (field.id)}
+          <li class:pinned={field.pinned} data-field-id={field.fieldId}>
+            <Icon name={field.pinned ? 'lock' : 'menu'} size={13} strokeWidth={1.8} />
+            <span class="label">{field.label}</span>
+            {#if field.kind === 'custom'}
+              <span class="key">cf.{field.field?.key}</span>
+            {/if}
+            {#if field.required}
+              <span class="req" title={t('field_required')}>*</span>
+            {/if}
+            {#if !disabled}
+              <DropdownMenu items={moveMenu(field, zone.id)} align="end">
+                {#snippet trigger(props)}
+                  <IconButton
+                    {...props}
+                    icon="ellipsis"
+                    size={22}
+                    label={t('layout_move', { field: field.label })}
+                  />
+                {/snippet}
+              </DropdownMenu>
+            {/if}
+          </li>
+        {/each}
+        {#if columns[zone.id].length === 0}
+          <li class="placeholder">{t('layout_drop_here')}</li>
+        {/if}
+      </ul>
+    </section>
+  {/each}
+</div>
+
+<style>
+.zones {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+@media (max-width: 720px) {
+  .zones {
+    grid-template-columns: 1fr;
+  }
+}
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-bottom: 6px;
+}
+.hint {
+  font-size: 11.5px;
+  color: var(--kern-ink-400);
+}
+.drop {
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  /* an empty zone still has to be a target, so it keeps a height of its own */
+  min-height: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border: 1px dashed var(--kern-border);
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-shell);
+}
+.drop li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-surface);
+  font-size: 13px;
+  cursor: grab;
+}
+.drop li.pinned {
+  cursor: default;
+  /*
+   * Muted by colour, not by `opacity`. A row at 0.75 fades its text against the page it sits on —
+   * the required marker inside it dropped to 3.2:1, which is a readability failure rather than a
+   * visual hint — and opacity fades everything by the same amount whatever its starting contrast.
+   */
+  color: var(--kern-ink-450);
+}
+.drop li.placeholder {
+  justify-content: center;
+  border-style: dashed;
+  border-color: transparent;
+  background: none;
+  color: var(--kern-ink-400);
+  font-size: 12px;
+  cursor: default;
+}
+.label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.key {
+  font-family: var(--kern-font-mono);
+  font-size: 11px;
+  color: var(--kern-ink-400);
+}
+.req {
+  color: var(--kern-warning);
+}
+</style>