@kernhq/module-tracker 0.10.1 → 0.11.0

package/src/client/components/NewIssueDialog.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+import { Button, Dialog, DropdownMenu, type MenuItem, Select, toast } from '@kernhq/ui'
+import { createMutation, useQueryClient } from '@tanstack/svelte-query'
+import { untrack } from 'svelte'
+import { getTrackerApi } from '../api-instance.js'
+import { getTrackerCatalogue } from '../context.svelte.js'
+import { t } from '../i18n.js'
+import type { Issue, Priority } from '../index.js'
+import { PRIORITY_GROUP_ORDER } from '../index.js'
+import { priorityLabel } from '../labels.js'
+import { docFromText } from '../richtext.js'
+import PriorityGlyph from './PriorityGlyph.svelte'
+
+/**
+ * Creating an issue, keyboard first.
+ *
+ * `c` opens it from anywhere in the tracker, the title has focus immediately, and Cmd/Ctrl+Enter
+ * submits without reaching for the mouse. Everything except the title is optional and prefilled from
+ * wherever you pressed `c` — the project you are looking at, the column you clicked `+` on.
+ */
+interface Props {
+  open: boolean
+  workspaceId: string
+  /** prefilled from the caller: the project in view and the group the "+" belonged to */
+  defaults?: { projectId?: string; statusId?: string; priority?: Priority; assigneeIds?: string[] }
+  oncreated?: (issue: Issue) => void
+}
+let { open = $bindable(false), workspaceId, defaults = {}, oncreated }: Props = $props()
+
+const api = getTrackerApi()
+const cat = getTrackerCatalogue()
+const queryClient = useQueryClient()
+
+let title = $state('')
+let description = $state('')
+let projectId = $state('')
+let typeId = $state('')
+let priority = $state<Priority>('none')
+let titleEl = $state<HTMLInputElement | null>(null)
+
+// Reset when the dialog opens, and only then: the defaults come from queries that may still be
+// settling, and re-running this while someone is typing would wipe what they had written.
+$effect(() => {
+  if (!open) return
+  untrack(() => {
+    title = ''
+    description = ''
+    priority = defaults.priority ?? 'none'
+    projectId = defaults.projectId ?? cat.projects[0]?.id ?? ''
+    typeId = cat.types.find((type) => type.isDefault)?.id ?? cat.types[0]?.id ?? ''
+  })
+})
+
+const create = createMutation(() => ({
+  mutationFn: () =>
+    api.issues.create({
+      workspaceId,
+      projectId,
+      typeId: typeId || undefined,
+      title: title.trim(),
+      description: docFromText(description),
+      priority,
+      statusId: defaults.statusId,
+      assigneeIds: defaults.assigneeIds,
+    }),
+  onSuccess: (issue) => {
+    toast.success(t('created', { key: issue.key }))
+    void queryClient.invalidateQueries({ queryKey: ['tracker', 'issue'] })
+    open = false
+    oncreated?.(issue)
+  },
+  onError: (error: Error) => toast.error(error.message),
+}))
+
+const canSubmit = $derived(title.trim().length > 0 && projectId !== '')
+
+function submit() {
+  if (canSubmit && !create.isPending) create.mutate()
+}
+
+const priorityMenu = $derived<MenuItem[]>(
+  PRIORITY_GROUP_ORDER.map((p) => ({
+    id: p,
+    label: priorityLabel(p),
+    icon: priority === p ? 'check' : undefined,
+    onSelect: () => (priority = p),
+  })),
+)
+</script>
+
+<Dialog bind:open title={t('new_issue')} size="lg" initialFocus={() => titleEl}>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <form
+    onsubmit={(e) => {
+      e.preventDefault()
+      submit()
+    }}
+    onkeydown={(e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault()
+        submit()
+      }
+    }}
+  >
+    <input
+      bind:this={titleEl}
+      bind:value={title}
+      class="title"
+      placeholder={t('title_placeholder')}
+      aria-label={t('field_title')}
+      data-testid="new-issue-title"
+    />
+    <textarea
+      bind:value={description}
+      class="body"
+      rows="4"
+      placeholder={t('description_placeholder')}
+      aria-label={t('field_description')}
+    ></textarea>
+
+    <div class="controls">
+      <Select
+        bind:value={projectId}
+        options={cat.projects.map((p) => ({ value: p.id, label: p.name }))}
+        placeholder={t('field_project')}
+        size="sm"
+      />
+      <Select
+        bind:value={typeId}
+        options={cat.types.map((type) => ({ value: type.id, label: type.name }))}
+        placeholder={t('field_type')}
+        size="sm"
+      />
+      <DropdownMenu items={priorityMenu} align="start">
+        {#snippet trigger(props)}
+          <button {...props} type="button" class="pri">
+            <PriorityGlyph {priority} size={15} />
+            {priorityLabel(priority)}
+          </button>
+        {/snippet}
+      </DropdownMenu>
+    </div>
+  </form>
+
+  {#snippet footer()}
+    <span class="hint">{t('submit_hint')}</span>
+    <Button variant="ghost" size="sm" onclick={() => (open = false)}>{t('common.cancel')}</Button>
+    <Button size="sm" disabled={!canSubmit} loading={create.isPending} onclick={submit}>
+      {t('common.create')}
+    </Button>
+  {/snippet}
+</Dialog>
+
+<style>
+  .title {
+    width: 100%;
+    font-size: 17px;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+    color: var(--kern-ink-900);
+    background: transparent;
+    border: 0;
+    padding: 0 0 8px;
+  }
+  .title:focus-visible {
+    box-shadow: none;
+  }
+  .body {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    resize: vertical;
+    font-size: 13.5px;
+    line-height: 1.6;
+    color: var(--kern-ink-700);
+    padding: 0;
+  }
+  .body:focus-visible {
+    box-shadow: none;
+  }
+  .controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 16px;
+    padding-top: 14px;
+    border-top: 1px solid var(--kern-border-hairline);
+  }
+  .pri {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    height: 30px;
+    padding: 0 11px;
+    border: 1px solid var(--kern-border-strong);
+    border-radius: var(--kern-r-md);
+    background: var(--kern-btn-secondary-bg);
+    color: var(--kern-ink-650);
+    font-size: 13px;
+  }
+  .pri:hover {
+    background: var(--kern-btn-secondary-hover);
+  }
+  .hint {
+    margin-inline-end: auto;
+    font-family: var(--kern-font-mono);
+    font-size: 11.5px;
+    color: var(--kern-ink-250);
+  }
+</style>

package/src/client/components/NewProjectDialog.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+import { Button, Dialog, Icon, Input, Textarea, toast } from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import type { ProjectTemplate } from '../index.js'
+import { trackerKeys } from '../query.js'
+
+/**
+ * Making a project, and choosing the shape it starts in.
+ *
+ * The template is the only decision here that is hard to change later: it seeds the work item
+ * types, the fields and the layouts, and those become what everyone on the project sees. So it is
+ * the part of this dialog that gets the room, and each option says what it is for rather than what
+ * it contains.
+ */
+interface Props {
+  open: boolean
+  workspaceId: string
+  onclose: () => void
+  oncreated: (key: string) => void
+}
+let { open, workspaceId, onclose, oncreated }: Props = $props()
+
+const api = getTrackerApi()
+const queryClient = useQueryClient()
+
+let name = $state('')
+let key = $state('')
+let description = $state('')
+let templateId = $state('software')
+let keyEdited = $state(false)
+
+const templatesQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'templates'],
+  queryFn: () => api.projects.templates.list({ workspaceId }),
+  enabled: open && Boolean(workspaceId),
+}))
+const templates = $derived(templatesQuery.data ?? [])
+
+$effect(() => {
+  if (!open) return
+  name = ''
+  key = ''
+  description = ''
+  templateId = 'software'
+  keyEdited = false
+})
+
+/** `Kern Platform` → `KERN`: initials for several words, the first letters for one. */
+const suggestKey = (value: string) => {
+  const words = value.trim().split(/\s+/).filter(Boolean)
+  const raw = words.length > 1 ? words.map((w) => w[0] ?? '').join('') : (words[0] ?? '').slice(0, 4)
+  return raw
+    .toUpperCase()
+    .replace(/[^A-Z0-9]/g, '')
+    .slice(0, 10)
+}
+
+$effect(() => {
+  if (!keyEdited) key = suggestKey(name)
+})
+
+const keyValid = $derived(/^[A-Z][A-Z0-9]{1,9}$/.test(key))
+const valid = $derived(Boolean(name.trim()) && keyValid)
+
+const create = createMutation(() => ({
+  mutationFn: () => {
+    const chosen = templates.find((tpl) => tpl.id === templateId)
+    return api.projects.create({
+      workspaceId,
+      name: name.trim(),
+      key,
+      description: description.trim() || null,
+      // A built-in is named; anything the workspace saved is referenced by id.
+      ...(chosen?.builtin === false ? { templateId } : { template: templateId }),
+    } as never)
+  },
+  onSuccess: (project: { key: string }) => {
+    void queryClient.invalidateQueries({ queryKey: trackerKeys.projects(workspaceId) })
+    oncreated(project.key)
+    onclose()
+  },
+  onError: (error: Error) => toast.error(error.message),
+}))
+</script>
+
+<Dialog
+  {open}
+  title={t('project_new')}
+  size="lg"
+  onOpenChange={(next: boolean) => {
+    if (!next) onclose()
+  }}
+>
+  <div class="grid gap-3">
+    <div class="two">
+      <label class="grid gap-1">
+        <span class="lbl">{t('project_name')}</span>
+        <Input bind:value={name} placeholder="Kern Platform" data-testid="project-name" />
+      </label>
+      <label class="grid gap-1">
+        <span class="lbl">{t('project_key')}</span>
+        <Input
+          bind:value={key}
+          oninput={() => (keyEdited = true)}
+          placeholder="KERN"
+          data-testid="project-key"
+        />
+        <span class="hint" class:bad={key.length > 0 && !keyValid}>{t('project_key_hint')}</span>
+      </label>
+    </div>
+
+    <label class="grid gap-1">
+      <span class="lbl">{t('project_description')}</span>
+      <Textarea bind:value={description} rows={2} />
+    </label>
+
+    <fieldset class="grid gap-1">
+      <legend class="lbl">{t('project_template')}</legend>
+      <span class="hint">{t('project_template_hint')}</span>
+      <ul class="templates" data-testid="template-choices">
+        {#each templates as template (template.id)}
+          <li>
+            <button
+              type="button"
+              class="tpl"
+              class:on={templateId === template.id}
+              aria-pressed={templateId === template.id}
+              onclick={() => (templateId = template.id)}
+              data-template={template.key}
+            >
+              <span class="tname">
+                {template.name}
+                {#if templateId === template.id}<Icon name="check" size={13} strokeWidth={2} />{/if}
+              </span>
+              {#if template.description}<span class="tdesc">{template.description}</span>{/if}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </fieldset>
+  </div>
+
+  {#snippet footer()}
+    <Button variant="ghost" size="sm" onclick={onclose}>{t('common.cancel')}</Button>
+    <Button
+      size="sm"
+      disabled={!valid}
+      loading={create.isPending}
+      onclick={() => create.mutate()}
+      data-testid="project-create"
+    >
+      {t('project_create')}
+    </Button>
+  {/snippet}
+</Dialog>
+
+<style>
+.lbl {
+  font-size: 12px;
+  color: var(--kern-ink-550);
+}
+.hint {
+  display: block;
+  font-size: 11.5px;
+  color: var(--kern-ink-400);
+}
+.hint.bad {
+  color: var(--kern-danger);
+}
+.two {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 10px;
+}
+fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.templates {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* every card is the same size whatever its description costs in lines: `1fr` rows make each row
+     as tall as the tallest card in the grid, and the `li` stretches its button to fill the cell —
+     without it a two-line description left the card beside it visibly short. */
+  grid-auto-rows: 1fr;
+  gap: 8px;
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.templates > li {
+  display: grid;
+}
+@media (max-width: 560px) {
+  .templates {
+    grid-template-columns: 1fr;
+  }
+}
+.tpl {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-surface);
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.tpl:hover {
+  background: var(--kern-surface-hover);
+}
+.tpl.on {
+  border-color: var(--kern-accent);
+  background: var(--kern-info-tint);
+}
+.tname {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.tdesc {
+  font-size: 12px;
+  color: var(--kern-ink-450, var(--kern-ink-400));
+}
+</style>

package/src/client/components/PriorityGlyph.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { PRIORITY_BAR_GEOMETRY, type Priority, priorityBars } from '../index.js'
+
+/**
+ * The priority glyph (DESIGN.md 3.0): three rising bars, lit from the left. Urgent inverts into a
+ * filled red box so it reads at a glance in a dense list; everything else is drawn on the paper.
+ */
+interface Props {
+  priority: Priority
+  size?: number
+  label?: string | null
+}
+let { priority, size = 16, label = null }: Props = $props()
+const bars = $derived(priorityBars(priority))
+const urgent = $derived(priority === 'urgent')
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill="none"
+  class="kpg"
+  role={label ? 'img' : 'presentation'}
+  aria-label={label ?? undefined}
+  aria-hidden={label ? undefined : 'true'}
+>
+  {#if urgent}
+    <rect x="0" y="0" width="16" height="16" rx="4" fill="var(--kern-danger)" />
+  {/if}
+  {#each PRIORITY_BAR_GEOMETRY as bar, i (bar.x)}
+    <rect
+      x={bar.x}
+      y={bar.y}
+      width="3"
+      height={bar.height}
+      rx="1"
+      fill={urgent
+        ? 'var(--kern-ink-inverse)'
+        : bars[i]
+          ? 'var(--kern-ink-580)'
+          : 'var(--kern-priority-off)'}
+    />
+  {/each}
+</svg>
+
+<style>
+  .kpg {
+    flex: none;
+    display: block;
+  }
+</style>

package/src/client/components/SaveViewDialog.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+import { Button, Dialog, Input, Select, toast } from '@kernhq/ui'
+import { createMutation, useQueryClient } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import { canTracker } from '../permissions.js'
+import { trackerKeys } from '../query.js'
+
+/**
+ * Naming the query you are looking at.
+ *
+ * The view captures what the page is showing — the KQL, the layout and the grouping — because that
+ * is what somebody means by "this view". Anything they change afterwards is a different view until
+ * they save it again.
+ *
+ * When the page is already showing a saved view, saving offers to change that view as well as to
+ * make a new one. Without the first, refining a view you had saved silently produced a second copy
+ * of it, and a sidebar filled with "My bugs 2".
+ */
+interface Props {
+  open: boolean
+  workspaceId: string
+  kql: string
+  layout: 'list' | 'board'
+  groupBy: string
+  /** the saved view the page is showing, when it is showing one you may change */
+  editing?: { id: string; name: string } | null
+  onclose: () => void
+}
+let { open, workspaceId, kql, layout, groupBy, editing = null, onclose }: Props = $props()
+
+const api = getTrackerApi()
+const queryClient = useQueryClient()
+
+let name = $state('')
+let visibility = $state<'private' | 'project' | 'workspace'>('private')
+
+$effect(() => {
+  if (!open) return
+  name = ''
+  visibility = 'private'
+})
+
+/** Sharing a view with other people is a permission; keeping one for yourself is not. */
+const canShare = $derived(canTracker('viewManageShared'))
+const options = $derived([
+  { value: 'private', label: t('view_private') },
+  ...(canShare
+    ? [
+        { value: 'project', label: t('view_project') },
+        { value: 'workspace', label: t('view_workspace') },
+      ]
+    : []),
+])
+
+const done = (view: { name: string }) => {
+  void queryClient.invalidateQueries({ queryKey: trackerKeys.views(workspaceId) })
+  toast.success(t('view_saved', { name: view.name }))
+  onclose()
+}
+
+/** Changing the view that is open: the same query the page is showing, under the same name. */
+const update = createMutation(() => ({
+  mutationFn: () =>
+    api.views.update({
+      workspaceId,
+      id: editing?.id as string,
+      patch: { kql, layout, display: { groupBy } },
+    } as never),
+  onSuccess: done,
+  onError: (error: Error) => toast.error(error.message),
+}))
+
+const save = createMutation(() => ({
+  mutationFn: () =>
+    api.views.create({
+      workspaceId,
+      name: name.trim(),
+      kql,
+      layout,
+      display: { groupBy },
+      visibility,
+    } as never),
+  onSuccess: done,
+  onError: (error: Error) => toast.error(error.message),
+}))
+</script>
+
+<Dialog
+  {open}
+  title={editing ? t('view_save_changes') : t('view_save')}
+  size="sm"
+  onOpenChange={(next: boolean) => {
+    if (!next) onclose()
+  }}
+>
+  <div class="grid gap-3">
+    <label class="grid gap-1">
+      <span class="lbl">{t('view_name')}</span>
+      <Input bind:value={name} placeholder="My open bugs" data-testid="view-name" />
+    </label>
+    <label class="grid gap-1">
+      <span class="lbl">{t('view_visibility')}</span>
+      <Select
+        value={visibility}
+        {options}
+        onValueChange={(v: string) => (visibility = v as typeof visibility)}
+      />
+    </label>
+    <p class="preview" data-testid="view-preview">{kql || t('all_issues')}</p>
+  </div>
+
+  {#snippet footer()}
+    <Button variant="ghost" size="sm" onclick={onclose}>{t('common.cancel')}</Button>
+    {#if editing}
+      <Button
+        variant="ghost"
+        size="sm"
+        loading={update.isPending}
+        onclick={() => update.mutate()}
+        data-testid="view-update"
+      >
+        {t('view_update', { name: editing.name })}
+      </Button>
+    {/if}
+    <Button
+      size="sm"
+      disabled={!name.trim()}
+      loading={save.isPending}
+      onclick={() => save.mutate()}
+      data-testid="view-save"
+    >
+      {editing ? t('view_save_as_new') : t('common.save')}
+    </Button>
+  {/snippet}
+</Dialog>
+
+<style>
+.lbl {
+  font-size: 12px;
+  color: var(--kern-ink-550);
+}
+.preview {
+  margin: 0;
+  padding: 6px 8px;
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-shell);
+  font-family: var(--kern-font-mono);
+  font-size: 12px;
+  color: var(--kern-ink-450, var(--kern-ink-400));
+  overflow-wrap: anywhere;
+}
+</style>