@kernhq/module-tracker 0.10.1 → 0.11.0

package/src/client/settings/PlanningList.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+import { Badge, Button, IconButton, Input, Spinner } from '@kernhq/ui'
+import { t } from '../i18n.js'
+
+/**
+ * One list of small named things a project sorts work by: components, versions, labels.
+ *
+ * All three are the same shape — a name, something to say about it, and the ability to add, rename
+ * and remove — so they share one list rather than three that drift. What differs is what each row
+ * says beside its name, which the caller supplies.
+ */
+export interface PlanningItem {
+  id: string
+  name: string
+  /** what this row says beside its name: a count, a date, a state */
+  note?: string | null
+  badge?: string | null
+  color?: string | null
+}
+
+interface Props {
+  title: string
+  description: string
+  items: PlanningItem[]
+  loading?: boolean
+  editable: boolean
+  addLabel: string
+  emptyLabel: string
+  busy?: boolean
+  onadd: (name: string) => void
+  onrename: (id: string, name: string) => void
+  onremove: (id: string) => void
+  /** an extra action per row, when one exists (releasing a version) */
+  rowAction?: { label: (item: PlanningItem) => string; run: (item: PlanningItem) => void }
+}
+let {
+  title,
+  description,
+  items,
+  loading = false,
+  editable,
+  addLabel,
+  emptyLabel,
+  busy = false,
+  onadd,
+  onrename,
+  onremove,
+  rowAction,
+}: Props = $props()
+
+let adding = $state('')
+let editingId = $state<string | null>(null)
+let draft = $state('')
+/** Named on screen before it happens, never behind `window.confirm`. */
+let confirmingId = $state<string | null>(null)
+
+const submit = () => {
+  const name = adding.trim()
+  if (!name || busy) return
+  onadd(name)
+  adding = ''
+}
+
+const startEdit = (item: PlanningItem) => {
+  editingId = item.id
+  draft = item.name
+}
+
+const commitEdit = () => {
+  const id = editingId
+  const name = draft.trim()
+  editingId = null
+  if (id && name) onrename(id, name)
+}
+</script>
+
+<section class="plist" data-testid="planning-{title.toLowerCase().replace(/\s+/g, '-')}">
+  <header>
+    <div>
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  </header>
+
+  {#if loading}
+    <div class="state"><Spinner /></div>
+  {:else if !items.length && !editable}
+    <p class="empty">{emptyLabel}</p>
+  {:else}
+    <ul>
+      {#each items as item (item.id)}
+        <li>
+          {#if item.color}<span class="swatch" style:background={item.color}></span>{/if}
+          {#if editingId === item.id}
+            <Input
+              value={draft}
+              oninput={(e: Event) => (draft = (e.currentTarget as HTMLInputElement).value)}
+              onblur={commitEdit}
+              onkeydown={(e: KeyboardEvent) => {
+                if (e.key === 'Enter') commitEdit()
+                if (e.key === 'Escape') editingId = null
+              }}
+            />
+          {:else}
+            <button
+              type="button"
+              class="name"
+              disabled={!editable}
+              onclick={() => startEdit(item)}
+              data-item={item.name}
+            >
+              {item.name}
+            </button>
+          {/if}
+          {#if item.badge}<Badge>{item.badge}</Badge>{/if}
+          {#if item.note}<span class="note">{item.note}</span>{/if}
+          {#if editable && rowAction}
+            <Button size="sm" variant="ghost" onclick={() => rowAction.run(item)}>
+              {rowAction.label(item)}
+            </Button>
+          {/if}
+          {#if editable}
+            <IconButton
+              icon="x"
+              size={22}
+              label={t('planning_remove', { name: item.name })}
+              onclick={() => (confirmingId = item.id)}
+            />
+          {/if}
+        </li>
+        {#if confirmingId === item.id}
+          <li class="confirm" role="alertdialog">
+            <span>{t('planning_remove_body', { name: item.name })}</span>
+            <Button size="sm" variant="danger" onclick={() => { onremove(item.id); confirmingId = null }}>
+              {t('common.delete')}
+            </Button>
+            <Button size="sm" variant="ghost" onclick={() => (confirmingId = null)}>{t('common.cancel')}</Button>
+          </li>
+        {/if}
+      {:else}
+        <li class="empty-row">{emptyLabel}</li>
+      {/each}
+    </ul>
+
+    {#if editable}
+      <!-- The button carries its own handler rather than relying on the form: `Button` renders
+           `type="button"`, so a submit would depend on how its props happen to spread. -->
+      <form class="add" onsubmit={(e) => { e.preventDefault(); submit() }}>
+        <Input
+          bind:value={adding}
+          placeholder={addLabel}
+          data-testid="planning-add"
+          onkeydown={(e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              submit()
+            }
+          }}
+        />
+        <Button size="sm" disabled={!adding.trim() || busy} onclick={submit}>{t('common.add')}</Button>
+      </form>
+    {/if}
+  {/if}
+</section>
+
+<style>
+.plist {
+  padding: 14px 0;
+  border-bottom: 1px solid var(--kern-border-hairline);
+}
+.plist:last-child {
+  border-bottom: 0;
+}
+h3 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+header p {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--kern-ink-400);
+}
+ul {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+}
+li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+.swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  flex: none;
+}
+.name {
+  flex: 1;
+  min-width: 0;
+  padding: 3px 6px;
+  margin-inline-start: -6px;
+  border: 0;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: start;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.name:disabled {
+  cursor: default;
+}
+.name:not(:disabled):hover {
+  background: var(--kern-surface-hover);
+}
+.note {
+  font-size: 12px;
+  color: var(--kern-ink-400);
+}
+.confirm {
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--kern-danger);
+}
+.empty,
+.empty-row {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--kern-ink-400);
+}
+.add {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+.state {
+  display: grid;
+  place-items: center;
+  padding: 18px;
+}
+</style>

package/src/client/settings/PlanningSettings.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+import {
+  Button,
+  navigation,
+  Select,
+  SettingsPage,
+  SettingsSection,
+  Spinner,
+  session,
+  toast,
+} from '@kernhq/ui'
+import { createMutation, createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import { canTracker } from '../permissions.js'
+import PlanningSections from '../planning/PlanningSections.svelte'
+import { trackerKeys } from '../query.js'
+
+/**
+ * What a project plans and sorts its work by: cycles, milestones, components, versions and labels.
+ *
+ * All five have had a server since the module existed and no screen at all, so a project could only
+ * ever use what its template happened to seed — and cycles, which no template seeds, meant the
+ * sprint progress bar in the issue header had nothing to measure and never appeared. They are
+ * project-scoped, which is why this page starts by asking which project — the other tracker
+ * settings are workspace wide and do not.
+ *
+ * The lists themselves live in `PlanningSections`, because a project's own pages in the tracker show
+ * exactly the same ones: this screen is for setting several projects up at once, that one is for
+ * adding a component while looking at the work it is for.
+ */
+const api = getTrackerApi()
+
+const slug = $derived(navigation.workspaceSlug)
+const workspaceId = $derived(session.workspaces.find((w) => w.slug === slug)?.id ?? '')
+const canManage = $derived(canTracker('projectManage'))
+
+/**
+ * Which project the page is on, and how a link can say so.
+ *
+ * `?project=<id>` is what the sidebar's project menu links to — landing on the project you clicked
+ * rather than on whichever one happens to be first. An id for a project this workspace does not
+ * have is ignored rather than obeyed, so a stale link opens the page instead of an empty one.
+ */
+let selectedId = $state<string | null>(null)
+const asked = $derived(navigation.search.project)
+
+const projectsQuery = createQuery(() => ({
+  queryKey: trackerKeys.projects(workspaceId),
+  queryFn: () => api.projects.list({ workspaceId }),
+  enabled: Boolean(workspaceId),
+}))
+const projects = $derived(projectsQuery.data ?? [])
+const projectId = $derived(
+  selectedId ?? (asked && projects.some((p) => p.id === asked) ? asked : (projects[0]?.id ?? '')),
+)
+
+/**
+ * The intake link.
+ *
+ * `setIntake` returns the token and nothing else stores it, so the page keeps what it was handed.
+ * Turning intake off returns `null`, which is the same thing as "there is no link" — the form then
+ * says it is unavailable rather than accepting requests nobody reads.
+ */
+let intakeToken = $state<string | null>(null)
+const intakeUrl = $derived(
+  intakeToken ? `${typeof location === 'undefined' ? '' : location.origin}/request/${intakeToken}` : '',
+)
+
+const setIntake = createMutation(() => ({
+  mutationFn: (input: { enabled: boolean; rotate: boolean }) =>
+    api.projects.setIntake({ workspaceId, projectId, ...input }),
+  onSuccess: (result: { token: string | null }) => {
+    intakeToken = result.token
+    toast.success(result.token ? t('intake_opened') : t('intake_closed'))
+  },
+  onError: (error: Error) => toast.error(error.message),
+}))
+
+/** Switching project drops the link: it belonged to the project that was showing. */
+$effect(() => {
+  void projectId
+  intakeToken = null
+})
+
+const copyLink = async () => {
+  try {
+    await navigator.clipboard.writeText(intakeUrl)
+    toast.success(t('intake_copied'))
+  } catch {
+    // A denied clipboard is not a failure worth an error: the link is on screen to select.
+    toast.info(t('intake_copy_manually'))
+  }
+}
+</script>
+
+<SettingsPage title={t('settings_planning')} description={t('settings_planning_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) => (selectedId = v)}
+      />
+    </SettingsSection>
+
+    <SettingsSection title={t('intake_title')} description={t('intake_hint')}>
+      {#if intakeToken}
+        <p class="intake-link">
+          <code data-testid="intake-link">{intakeUrl}</code>
+        </p>
+        <div class="row">
+          <Button size="sm" variant="ghost" onclick={() => copyLink()} data-testid="intake-copy">
+            {t('intake_copy')}
+          </Button>
+          <Button size="sm" variant="ghost" onclick={() => setIntake.mutate({ enabled: true, rotate: true })}>
+            {t('intake_rotate')}
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            onclick={() => setIntake.mutate({ enabled: false, rotate: false })}
+            data-testid="intake-close"
+          >
+            {t('intake_close')}
+          </Button>
+        </div>
+        <p class="note">{t('intake_rotate_hint')}</p>
+      {:else}
+        <Button
+          size="sm"
+          disabled={!canManage}
+          loading={setIntake.isPending}
+          onclick={() => setIntake.mutate({ enabled: true, rotate: false })}
+          data-testid="intake-open"
+        >
+          {t('intake_open')}
+        </Button>
+      {/if}
+    </SettingsSection>
+
+    <SettingsSection>
+      <PlanningSections {workspaceId} {projectId} editable={canManage} />
+    </SettingsSection>
+  {/if}
+</SettingsPage>
+
+<style>
+.intake-link {
+  margin: 0 0 8px;
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+.intake-link code {
+  font-family: var(--kern-font-mono);
+}
+.row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.note {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--kern-ink-400);
+}
+.state {
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  font-size: 13px;
+}
+</style>