@kernhq/module-tracker 0.10.0 → 0.11.0

package/src/client/pages/ProjectPage.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { navigation } from '@kernhq/ui'
+import { isProjectSection } from '../nav.js'
+import ComponentsPage from '../project/ComponentsPage.svelte'
+import CyclesPage from '../project/CyclesPage.svelte'
+import MilestonesPage from '../project/MilestonesPage.svelte'
+import TemplatesPage from '../project/TemplatesPage.svelte'
+
+/**
+ * One project's pages, chosen by the last segment of the URL.
+ *
+ * Each section is a screen of its own rather than a tab: `/tracker/projects/KRN/milestones` is where
+ * a release is planned, `/tracker/projects/KRN/components` is where the system is named. The sidebar
+ * is what moves between them, so the pages do not have to carry a switcher as well.
+ */
+const section = $derived(
+  isProjectSection(navigation.params.section) ? navigation.params.section : 'components',
+)
+</script>
+
+{#if section === 'milestones'}
+  <MilestonesPage />
+{:else if section === 'cycles'}
+  <CyclesPage />
+{:else if section === 'templates'}
+  <TemplatesPage />
+{:else}
+  <ComponentsPage />
+{/if}

package/src/client/pages/ReportsPage.svelte

@@ -0,0 +1,365 @@
+<script lang="ts">
+import {
+  BarChart,
+  EmptyState,
+  LineChart,
+  navigation,
+  PageHeader,
+  SegmentedControl,
+  Select,
+  Spinner,
+  StackedAreaChart,
+  session,
+} from '@kernhq/ui'
+import { createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import { formatDuration } from '../index.js'
+import { trackerKeys } from '../query.js'
+
+/**
+ * How the work is going.
+ *
+ * Five reports have had a server since the module existed and no screen, so the answer to "are we
+ * going to make it" lived in the database and nowhere a person could see it.
+ *
+ * Each one answers a different question, so each is its own tab rather than a wall of charts:
+ * burndown is about this cycle, velocity about the last several, created-versus-resolved about
+ * whether the backlog is growing, and time about where the hours went.
+ */
+const api = getTrackerApi()
+
+const slug = $derived(navigation.workspaceSlug)
+const workspace = $derived(session.workspaces.find((w) => w.slug === slug))
+const workspaceId = $derived(workspace?.id ?? '')
+
+type Tab = 'burndown' | 'velocity' | 'flow' | 'cfd' | 'time'
+let tab = $state<Tab>('burndown')
+let selectedProject = $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 ?? '')
+
+/** The last month, which is the span somebody means by "lately". */
+const today = new Date()
+const iso = (date: Date) => date.toISOString().slice(0, 10)
+const to = iso(today)
+const from = iso(new Date(today.getTime() - 30 * 86_400_000))
+
+const cyclesQuery = createQuery(() => ({
+  queryKey: trackerKeys.cycles(workspaceId, projectId),
+  queryFn: () => api.cycles.list({ workspaceId, projectId }),
+  enabled: Boolean(projectId),
+}))
+/** Burndown is about the cycle you are in; a finished one is history and has its own report. */
+const activeCycle = $derived(
+  (cyclesQuery.data ?? []).find((c) => c.status === 'active') ?? (cyclesQuery.data ?? [])[0] ?? null,
+)
+
+const cfdQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'cfd', projectId, from, to],
+  queryFn: () => api.reports.cfd({ workspaceId, projectId, from, to }),
+  enabled: tab === 'cfd' && Boolean(projectId),
+}))
+
+const burndownQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'burndown', activeCycle?.id ?? ''],
+  queryFn: () => api.reports.burndown({ workspaceId, cycleId: activeCycle?.id as string }),
+  enabled: tab === 'burndown' && Boolean(activeCycle?.id),
+}))
+const velocityQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'velocity', projectId],
+  queryFn: () => api.reports.velocity({ workspaceId, projectId, lastN: 6 }),
+  enabled: tab === 'velocity' && Boolean(projectId),
+}))
+const flowQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'flow', projectId, from, to],
+  queryFn: () => api.reports.createdVsResolved({ workspaceId, projectId, from, to }),
+  enabled: tab === 'flow' && Boolean(projectId),
+}))
+const timeQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.projects(workspaceId), 'time', projectId, from, to],
+  queryFn: () => api.reports.time({ workspaceId, projectId, from, to, billableOnly: false }),
+  enabled: tab === 'time' && Boolean(projectId),
+}))
+
+const shortDate = (date: string) => date.slice(5)
+</script>
+
+<svelte:head><title>{t('reports_title')} · Kern</title></svelte:head>
+
+<div class="reports">
+  <PageHeader
+    crumbs={[{ label: workspace?.name ?? '' }, { label: t('title'), href: `/${slug}/tracker` }]}
+    title={t('reports_title')}
+    subtitle={t('reports_subtitle')}
+  />
+
+  {#if projectsQuery.isPending}
+    <div class="state"><Spinner /></div>
+  {:else if !projects.length}
+    <EmptyState icon="diamond" title={t('reports_no_projects')} />
+  {:else}
+    <div class="controls">
+      <SegmentedControl
+        items={[
+          { value: 'burndown', label: t('report_burndown') },
+          { value: 'velocity', label: t('report_velocity') },
+          { value: 'flow', label: t('report_flow') },
+          { value: 'cfd', label: t('report_cfd') },
+          { value: 'time', label: t('report_time') },
+        ]}
+        value={tab}
+        onValueChange={(v: string) => (tab = v as Tab)}
+      />
+      <Select
+        value={projectId}
+        options={projects.map((p) => ({ value: p.id, label: `${p.key} · ${p.name}` }))}
+        onValueChange={(v: string) => (selectedProject = v)}
+      />
+    </div>
+
+    <section class="panel" data-testid="report-{tab}">
+      {#if tab === 'burndown'}
+        <h2>{t('report_burndown')}</h2>
+        <p class="what">{t('report_burndown_hint')}</p>
+        {#if !activeCycle}
+          <p class="empty">{t('report_no_cycle')}</p>
+        {:else if burndownQuery.isPending}
+          <div class="state"><Spinner /></div>
+        {:else if burndownQuery.data}
+          <LineChart
+            title={t('report_burndown')}
+            labels={burndownQuery.data.points.map((p) => shortDate(p.date))}
+            series={[
+              {
+                label: t('report_remaining'),
+                values: burndownQuery.data.points.map((p) => p.remaining),
+                tone: 1,
+              },
+              {
+                label: t('report_ideal'),
+                values: burndownQuery.data.points.map((p) => p.ideal),
+                tone: 2,
+                dashed: true,
+              },
+            ]}
+          />
+        {/if}
+      {:else if tab === 'velocity'}
+        <h2>{t('report_velocity')}</h2>
+        <p class="what">{t('report_velocity_hint')}</p>
+        {#if velocityQuery.isPending}
+          <div class="state"><Spinner /></div>
+        {:else if velocityQuery.data}
+          <BarChart
+            title={t('report_velocity')}
+            labels={velocityQuery.data.cycles.map((c) => c.cycle.name)}
+            series={[
+              {
+                label: t('report_committed'),
+                values: velocityQuery.data.cycles.map((c) => c.committed),
+                tone: 2,
+              },
+              {
+                label: t('report_completed'),
+                values: velocityQuery.data.cycles.map((c) => c.completed),
+                tone: 3,
+              },
+            ]}
+          />
+          <p class="figure">
+            {t('report_average', { value: Math.round(velocityQuery.data.average) })}
+          </p>
+        {/if}
+      {:else if tab === 'flow'}
+        <h2>{t('report_flow')}</h2>
+        <p class="what">{t('report_flow_hint')}</p>
+        {#if flowQuery.isPending}
+          <div class="state"><Spinner /></div>
+        {:else if flowQuery.data}
+          <!-- Two charts, not three lines on one: a few issues a day and a backlog of forty share
+               no useful axis, and putting them together flattens the pair that answers the
+               question into a line along the floor. -->
+          <LineChart
+            title={t('report_flow')}
+            labels={flowQuery.data.points.map((p) => shortDate(p.date))}
+            series={[
+              {
+                label: t('report_created'),
+                values: flowQuery.data.points.map((p) => p.created),
+                tone: 1,
+              },
+              {
+                label: t('report_resolved'),
+                values: flowQuery.data.points.map((p) => p.resolved),
+                tone: 3,
+              },
+            ]}
+          />
+          <h3>{t('report_still_open')}</h3>
+          <LineChart
+            title={t('report_still_open')}
+            height={110}
+            labels={flowQuery.data.points.map((p) => shortDate(p.date))}
+            series={[
+              {
+                label: t('report_still_open'),
+                values: flowQuery.data.points.map((p) => p.openTotal),
+                tone: 4,
+              },
+            ]}
+          />
+        {/if}
+      {:else if tab === 'cfd'}
+        <h2>{t('report_cfd')}</h2>
+        <p class="what">{t('report_cfd_hint')}</p>
+        {#if cfdQuery.isPending}
+          <div class="state"><Spinner /></div>
+        {:else if cfdQuery.data}
+          <StackedAreaChart
+            title={t('report_cfd')}
+            labels={cfdQuery.data.points.map((p) => shortDate(p.date))}
+            series={cfdQuery.data.statuses.map((status, i) => ({
+              label: status.name,
+              values: cfdQuery.data.points.map((p) => p.counts[status.id] ?? 0),
+              // Five chart tones and any number of statuses: they cycle rather than run out.
+              tone: ((i % 5) + 1) as 1 | 2 | 3 | 4 | 5,
+            }))}
+          />
+        {/if}
+      {:else}
+        <h2>{t('report_time')}</h2>
+        <p class="what">{t('report_time_hint')}</p>
+        {#if timeQuery.isPending}
+          <div class="state"><Spinner /></div>
+        {:else if timeQuery.data}
+          {@const report = timeQuery.data}
+          <p class="figure">
+            {t('report_time_total', {
+              total: formatDuration(report.totalSec),
+              billable: formatDuration(report.billableSec),
+            })}
+          </p>
+          {#if report.byIssue.length}
+            <table class="times">
+              <thead>
+                <tr>
+                  <th scope="col">{t('report_issue')}</th>
+                  <th scope="col" class="num">{t('report_logged')}</th>
+                  <th scope="col" class="num">{t('report_estimated')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each report.byIssue as row (row.issueId)}
+                  <tr>
+                    <td>
+                      <a href={`/${slug}/tracker?issue=${row.issueKey}`}>
+                        <span class="ikey">{row.issueKey}</span>
+                        {row.title}
+                      </a>
+                    </td>
+                    <td class="num">{formatDuration(row.durationSec)}</td>
+                    <td class="num">
+                      {row.originalEstimateSec === null
+                        ? '—'
+                        : formatDuration(row.originalEstimateSec)}
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          {:else}
+            <p class="empty">{t('common.no_data')}</p>
+          {/if}
+        {/if}
+      {/if}
+    </section>
+  {/if}
+</div>
+
+<style>
+.reports {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding-bottom: 40px;
+}
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 0 var(--kern-gutter, 24px);
+}
+.panel {
+  margin: 14px var(--kern-gutter, 24px) 0;
+  padding: 16px 18px;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-card);
+  background: var(--kern-surface);
+}
+h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+h3 {
+  margin: 16px 0 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+.what {
+  margin: 2px 0 0;
+  font-size: 12.5px;
+  color: var(--kern-ink-400);
+}
+.figure {
+  margin: 10px 0 0;
+  font-size: 13px;
+}
+.state {
+  display: grid;
+  place-items: center;
+  padding: 32px;
+}
+.empty {
+  margin: 10px 0 0;
+  font-size: 13px;
+  color: var(--kern-ink-350);
+}
+.times {
+  width: 100%;
+  margin-top: 10px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.times th,
+.times td {
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--kern-border-hairline);
+  text-align: start;
+}
+.times .num {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+.times a {
+  color: inherit;
+  text-decoration: none;
+}
+.times a:hover {
+  text-decoration: underline;
+}
+.ikey {
+  font-family: var(--kern-font-mono);
+  font-size: 11.5px;
+  color: var(--kern-ink-400);
+}
+</style>

package/src/client/permissions.ts

@@ -0,0 +1,33 @@
+import { session } from '@kernhq/ui'
+
+/**
+ * The tracker permissions the issues views gate on.
+ *
+ * These are the keys the module's contract declares (`trackerPermissions`). The server checks them
+ * again on every call — this is only so the interface does not offer something that would be
+ * refused. Anything a person may never do is hidden; anything they cannot do *right now* stays
+ * visible and disabled with a reason.
+ */
+export const TRACKER_PERMISSIONS = {
+  view: 'tracker.issue.view',
+  create: 'tracker.issue.create',
+  edit: 'tracker.issue.edit_any',
+  transition: 'tracker.issue.transition',
+  assign: 'tracker.issue.assign',
+  comment: 'tracker.issue.comment',
+  bulkEdit: 'tracker.issue.bulk_edit',
+  archive: 'tracker.issue.archive',
+  /** the settings screens: fields have their own key, types share the workflow one */
+  fieldManage: 'tracker.field.manage',
+  typeManage: 'tracker.workflow.manage',
+  workflowManage: 'tracker.workflow.manage',
+  projectManage: 'tracker.project.manage',
+  viewManageShared: 'tracker.view.manage_shared',
+  triageManage: 'tracker.triage.manage',
+} as const
+
+export type TrackerPermission = keyof typeof TRACKER_PERMISSIONS
+
+export function canTracker(permission: TrackerPermission): boolean {
+  return session.can(TRACKER_PERMISSIONS[permission])
+}

package/src/client/planning/PlanningSections.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+import { messageLocale } from '@kernhq/ui'
+import { createQuery, useQueryClient } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import { trackerKeys } from '../query.js'
+// These two are presentational and were written for the settings screen; a project's own page
+// shows the same lists, so they are imported rather than copied. They stay where they are because
+// several people have that folder open.
+import CycleList from '../settings/CycleList.svelte'
+import { listMutation } from '../settings/mutations'
+import PlanningList from '../settings/PlanningList.svelte'
+
+/**
+ * What a project plans and sorts its work by: cycles, milestones, components, versions and labels.
+ *
+ * One component rather than one per screen, because there are two places this belongs and they must
+ * not drift: a project's own pages in the tracker, where somebody adds a component while looking at
+ * the work it is for, and workspace settings, where an admin sets several projects up at once.
+ *
+ * The caller says which sections to show, so a page can be exactly one of them.
+ */
+export type PlanningSection = 'cycles' | 'milestones' | 'components' | 'versions' | 'labels'
+
+interface Props {
+  workspaceId: string
+  projectId: string
+  /** false hides every control and leaves the lists readable */
+  editable: boolean
+  /** which sections to render, in this order; all of them by default */
+  only?: PlanningSection[]
+}
+let { workspaceId, projectId, editable, only }: Props = $props()
+
+const api = getTrackerApi()
+const queryClient = useQueryClient()
+
+const shows = (section: PlanningSection) => !only || only.includes(section)
+const on = (section: PlanningSection) => Boolean(projectId) && shows(section)
+
+const cyclesQuery = createQuery(() => ({
+  queryKey: trackerKeys.cycles(workspaceId, projectId),
+  queryFn: () => api.cycles.list({ workspaceId, projectId }),
+  enabled: on('cycles'),
+}))
+const milestonesQuery = createQuery(() => ({
+  queryKey: trackerKeys.milestones(workspaceId, projectId),
+  queryFn: () => api.milestones.list({ workspaceId, projectId }),
+  enabled: on('milestones'),
+}))
+const componentsQuery = createQuery(() => ({
+  queryKey: trackerKeys.components(workspaceId, projectId),
+  queryFn: () => api.components.list({ workspaceId, projectId }),
+  enabled: on('components'),
+}))
+const versionsQuery = createQuery(() => ({
+  queryKey: trackerKeys.versions(workspaceId, projectId),
+  queryFn: () => api.versions.list({ workspaceId, projectId }),
+  enabled: on('versions'),
+}))
+const labelsQuery = createQuery(() => ({
+  queryKey: [...trackerKeys.labels(workspaceId), projectId],
+  queryFn: () => api.labels.list({ workspaceId, projectId }),
+  enabled: on('labels'),
+}))
+
+/**
+ * Everything a change here can be seen in: the lists themselves, and the issue queries that group
+ * by what was just renamed or removed.
+ */
+const refresh = () => {
+  void queryClient.invalidateQueries({ queryKey: trackerKeys.projects(workspaceId) })
+  void queryClient.invalidateQueries({ queryKey: trackerKeys.labels(workspaceId) })
+  for (const entity of ['cycle', 'milestone', 'component', 'version', 'issue'])
+    void queryClient.invalidateQueries({ queryKey: ['tracker', entity] })
+}
+
+/** A function declaration, not an arrow: an arrow's generic needs `<T,>` here, which the Svelte
+ * formatter rewrites and then disagrees with itself about. */
+function mutation<T>(fn: (input: T) => Promise<unknown>) {
+  return listMutation(fn, refresh)
+}
+
+const addCycle = mutation((input: { name: string; startAt: string; endAt: string }) =>
+  api.cycles.create({ workspaceId, projectId, ...input }),
+)
+const updateCycle = mutation((input: { id: string; name: string; startAt: string; endAt: string }) =>
+  api.cycles.update({
+    workspaceId,
+    id: input.id,
+    patch: { name: input.name, startAt: input.startAt, endAt: input.endAt },
+  }),
+)
+const startCycle = mutation((id: string) => api.cycles.start({ workspaceId, id }))
+/**
+ * `rollToCycleId` is sent even when it is null, and that is the point: the server reads an omitted
+ * key as "pick the next cycle for me" and a null as "the backlog". The screen always has an answer,
+ * so it always says which.
+ */
+const completeCycle = mutation((input: { id: string; rollToCycleId: string | null }) =>
+  api.cycles.complete({ workspaceId, ...input }),
+)
+const removeCycle = mutation((id: string) => api.cycles.delete({ workspaceId, id }))
+
+const addMilestone = mutation((name: string) => api.milestones.create({ workspaceId, projectId, name }))
+const renameMilestone = mutation((input: { id: string; name: string }) =>
+  api.milestones.update({ workspaceId, id: input.id, patch: { name: input.name } }),
+)
+const removeMilestone = mutation((id: string) => api.milestones.delete({ workspaceId, id }))
+const setMilestoneStatus = mutation((input: { id: string; status: 'open' | 'completed' }) =>
+  api.milestones.update({ workspaceId, id: input.id, patch: { status: input.status } }),
+)
+
+const addComponent = mutation((name: string) => api.components.create({ workspaceId, projectId, name }))
+const renameComponent = mutation((input: { id: string; name: string }) =>
+  api.components.update({ workspaceId, id: input.id, patch: { name: input.name } }),
+)
+const removeComponent = mutation((id: string) => api.components.delete({ workspaceId, id }))
+
+const addVersion = mutation((name: string) => api.versions.create({ workspaceId, projectId, name }))
+const renameVersion = mutation((input: { id: string; name: string }) =>
+  api.versions.update({ workspaceId, id: input.id, patch: { name: input.name } }),
+)
+const removeVersion = mutation((id: string) => api.versions.delete({ workspaceId, id }))
+const releaseVersion = mutation((input: { id: string; released: boolean }) =>
+  api.versions.release({ workspaceId, ...input }),
+)
+
+const addLabel = mutation((name: string) => api.labels.create({ workspaceId, projectId, name }))
+const renameLabel = mutation((input: { id: string; name: string }) =>
+  api.labels.update({ workspaceId, id: input.id, patch: { name: input.name } }),
+)
+const removeLabel = mutation((id: string) => api.labels.delete({ workspaceId, id }))
+
+const dateFormat = $derived(new Intl.DateTimeFormat(messageLocale(), { day: 'numeric', month: 'short' }))
+
+const milestones = $derived(
+  (milestonesQuery.data ?? []).map((ms) => ({
+    id: ms.id,
+    name: ms.name,
+    badge: ms.status === 'completed' ? t('milestone_completed') : null,
+    note: [
+      ms.targetDate ? dateFormat.format(new Date(ms.targetDate)) : null,
+      t('planning_done_of', { done: ms.stats.done, total: ms.stats.total }),
+    ]
+      .filter(Boolean)
+      .join(' · '),
+  })),
+)
+const openMilestoneIds = $derived(
+  new Set((milestonesQuery.data ?? []).filter((ms) => ms.status !== 'completed').map((ms) => ms.id)),
+)
+const components = $derived(
+  (componentsQuery.data ?? []).map((c) => ({
+    id: c.id,
+    name: c.name,
+    note: t('planning_issue_count', { count: c.issueCount }),
+  })),
+)
+const versions = $derived(
+  (versionsQuery.data ?? []).map((v) => ({
+    id: v.id,
+    name: v.name,
+    badge: v.status === 'released' ? t('version_released') : null,
+    note: t('planning_done_of', { done: v.stats.done, total: v.stats.total }),
+  })),
+)
+const labels = $derived((labelsQuery.data ?? []).map((l) => ({ id: l.id, name: l.name, color: l.color })))
+const releasedIds = $derived(
+  new Set((versionsQuery.data ?? []).filter((v) => v.status === 'released').map((v) => v.id)),
+)
+</script>
+
+{#if shows('cycles')}
+  <CycleList
+    cycles={cyclesQuery.data ?? []}
+    loading={cyclesQuery.isPending}
+    {editable}
+    oncreate={(input) => addCycle.mutate(input)}
+    onupdate={(input) => updateCycle.mutate(input)}
+    onstart={(id) => startCycle.mutate(id)}
+    oncomplete={(input) => completeCycle.mutate(input)}
+    onremove={(id) => removeCycle.mutate(id)}
+  />
+{/if}
+
+{#if shows('milestones')}
+  <PlanningList
+    title={t('planning_milestones')}
+    description={t('planning_milestones_hint')}
+    items={milestones}
+    loading={milestonesQuery.isPending}
+    {editable}
+    addLabel={t('planning_milestone_add')}
+    emptyLabel={t('planning_milestones_empty')}
+    onadd={(name) => addMilestone.mutate(name)}
+    onrename={(id, name) => renameMilestone.mutate({ id, name })}
+    onremove={(id) => removeMilestone.mutate(id)}
+    rowAction={{
+      label: (item) =>
+        openMilestoneIds.has(item.id) ? t('milestone_complete') : t('milestone_reopen'),
+      run: (item) =>
+        setMilestoneStatus.mutate({
+          id: item.id,
+          status: openMilestoneIds.has(item.id) ? 'completed' : 'open',
+        }),
+    }}
+  />
+{/if}
+
+{#if shows('components')}
+  <PlanningList
+    title={t('planning_components')}
+    description={t('planning_components_hint')}
+    items={components}
+    loading={componentsQuery.isPending}
+    {editable}
+    addLabel={t('planning_component_add')}
+    emptyLabel={t('planning_components_empty')}
+    onadd={(name) => addComponent.mutate(name)}
+    onrename={(id, name) => renameComponent.mutate({ id, name })}
+    onremove={(id) => removeComponent.mutate(id)}
+  />
+{/if}
+
+{#if shows('versions')}
+  <PlanningList
+    title={t('planning_versions')}
+    description={t('planning_versions_hint')}
+    items={versions}
+    loading={versionsQuery.isPending}
+    {editable}
+    addLabel={t('planning_version_add')}
+    emptyLabel={t('planning_versions_empty')}
+    onadd={(name) => addVersion.mutate(name)}
+    onrename={(id, name) => renameVersion.mutate({ id, name })}
+    onremove={(id) => removeVersion.mutate(id)}
+    rowAction={{
+      label: (item) =>
+        releasedIds.has(item.id) ? t('version_unrelease') : t('version_release'),
+      run: (item) => releaseVersion.mutate({ id: item.id, released: !releasedIds.has(item.id) }),
+    }}
+  />
+{/if}
+
+{#if shows('labels')}
+  <PlanningList
+    title={t('planning_labels')}
+    description={t('planning_labels_hint')}
+    items={labels}
+    loading={labelsQuery.isPending}
+    {editable}
+    addLabel={t('planning_label_add')}
+    emptyLabel={t('planning_labels_empty')}
+    onadd={(name) => addLabel.mutate(name)}
+    onrename={(id, name) => renameLabel.mutate({ id, name })}
+    onremove={(id) => removeLabel.mutate(id)}
+  />
+{/if}