@kernhq/module-tracker 0.10.1 → 0.11.1

package/src/client/components/SidebarProjects.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+import {
+  DropdownMenu,
+  formatCount,
+  IconButton,
+  type MenuItem,
+  navigation,
+  SidebarGroup,
+  SidebarItem,
+  SidebarPill,
+  Skeleton,
+  session,
+} from '@kernhq/ui'
+import { createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import type { Project } from '../index.js'
+import {
+  isTrackerTarget,
+  type ProjectSection,
+  projectColor,
+  projectSectionHref,
+  projectSettingsHref,
+  projectTargets,
+  type TrackerTarget,
+  trackerHref,
+} from '../nav.js'
+import { canTracker } from '../permissions.js'
+import { trackerKeys } from '../query.js'
+
+/**
+ * The workspace's projects, in the sidebar (DESIGN.md 2.3).
+ *
+ * A project is a heading with the ways its work is looked at underneath — its issues, and the
+ * planning it actually uses. Cycles and triage appear only for the projects that turned them on:
+ * a row that leads to an empty screen for most of a workspace is a row people learn to ignore.
+ *
+ * The rows open the project's own pages, where a component is added and a milestone marked
+ * reached. What is genuinely configuration — repeating work, the project's settings — stays in the
+ * menu, because those are places you go once and the rows above are places you go daily.
+ */
+interface Props {
+  /** the sidebar's own "new project", so the dialog opens on the page you are on */
+  oncreate?: () => void
+}
+let { oncreate }: Props = $props()
+
+const api = getTrackerApi()
+
+const slug = $derived(navigation.workspaceSlug)
+const workspaceId = $derived(session.workspaces.find((w) => w.slug === slug)?.id ?? '')
+const params = $derived(new URLSearchParams(navigation.search))
+const inTracker = $derived(navigation.pathname === `/${slug}/tracker`)
+const canManage = $derived(canTracker('projectManage'))
+
+const projectsQuery = createQuery(() => ({
+  queryKey: trackerKeys.projects(workspaceId),
+  queryFn: () => api.projects.list({ workspaceId }),
+  enabled: Boolean(workspaceId),
+}))
+const projects = $derived(projectsQuery.data ?? [])
+
+/**
+ * Which projects are folded away, kept on the device.
+ *
+ * Somebody with eight projects works in one of them; re-opening the same three headings on every
+ * visit is the sort of small tax that makes a sidebar feel like it is not listening. Collapsed
+ * rather than expanded is stored, so a project created later arrives open.
+ */
+const STORAGE_KEY = 'kern.tracker.projects.collapsed'
+let collapsed = $state<string[]>(read())
+
+function read(): string[] {
+  if (typeof localStorage === 'undefined') return []
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '[]') as unknown
+    return Array.isArray(raw) ? raw.filter((id): id is string => typeof id === 'string') : []
+  } catch {
+    return []
+  }
+}
+
+function toggle(id: string) {
+  collapsed = collapsed.includes(id) ? collapsed.filter((c) => c !== id) : [...collapsed, id]
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsed))
+  } catch {
+    // private browsing and a full quota both land here; the fold still applies to this session
+  }
+}
+
+/**
+ * The rows under one project.
+ *
+ * Two kinds, and the difference matters: a query row narrows the issue list, a section row opens
+ * the project's own page. Components, milestones and cycles are things a team makes and manages —
+ * they are pages you work on, not sortings of a list.
+ */
+type ProjectRow = { id: string; label: string; icon: string } & (
+  | { target: TrackerTarget; section?: undefined }
+  | { section: ProjectSection; target?: undefined }
+)
+
+function rowsFor(project: Project): ProjectRow[] {
+  const targets = projectTargets(project.id)
+  return [
+    { id: 'issues', label: t('nav'), icon: 'square-check-big', target: targets.issues },
+    { id: 'components', label: t('planning_components'), icon: 'puzzle', section: 'components' },
+    { id: 'milestones', label: t('planning_milestones'), icon: 'flag', section: 'milestones' },
+    ...(project.settings.cycles.enabled
+      ? [
+          {
+            id: 'cycles',
+            label: t('planning_cycles'),
+            icon: 'refresh-cw',
+            section: 'cycles' as const,
+          },
+        ]
+      : []),
+    { id: 'templates', label: t('template_title'), icon: 'copy', section: 'templates' },
+    ...(project.settings.triage.enabled
+      ? [{ id: 'triage', label: t('triage_title'), icon: 'inbox', target: targets.triage }]
+      : []),
+  ]
+}
+
+/** Where a row goes, and whether the screen is already showing it. */
+const hrefFor = (project: Project, row: ProjectRow) =>
+  row.section ? projectSectionHref(slug, project.key, row.section) : trackerHref(slug, row.target)
+
+const isCurrent = (project: Project, row: ProjectRow) =>
+  row.section
+    ? navigation.pathname === projectSectionHref(slug, project.key, row.section)
+    : inTracker && isTrackerTarget(params, row.target)
+
+const menuFor = (project: Project): MenuItem[] => [
+  ...(canTracker('create')
+    ? [
+        {
+          type: 'item' as const,
+          id: 'new-issue',
+          label: t('new_issue'),
+          icon: 'plus',
+          // the list it filters stays underneath, and the dialog opens on that project
+          href: `${trackerHref(slug, projectTargets(project.id).issues)}&new=1&project=${project.id}`,
+        },
+      ]
+    : []),
+  ...(canManage
+    ? [
+        { type: 'separator' as const },
+        {
+          type: 'item' as const,
+          id: 'repeating',
+          label: t('settings_repeating'),
+          icon: 'refresh-cw',
+          href: projectSettingsHref(slug, 'repeating', project.id),
+        },
+        {
+          type: 'item' as const,
+          id: 'settings',
+          label: t('project_settings'),
+          icon: 'settings',
+          href: projectSettingsHref(slug, 'projects', project.id),
+        },
+      ]
+    : []),
+]
+</script>
+
+<SidebarGroup title={t('projects_yours')} count={projects.length || null}>
+  {#snippet trailing()}
+    {#if canManage}
+      <IconButton
+        icon="plus"
+        label={t('project_new')}
+        size={22}
+        onclick={() => oncreate?.()}
+        data-testid="sidebar-new-project"
+      />
+    {/if}
+  {/snippet}
+
+  {#if projectsQuery.isPending}
+    <div class="loading">
+      {#each [1, 2, 3] as row (row)}<Skeleton class="h-[26px] w-full" />{/each}
+    </div>
+  {:else if !projects.length}
+    <p class="none">{t('projects_empty_hint')}</p>
+  {:else}
+    {#each projects as project (project.id)}
+      {@const open = !collapsed.includes(project.id)}
+      {@const menu = menuFor(project)}
+      <div class="prow">
+        <SidebarPill
+          label={project.name}
+          color={projectColor(project)}
+          aria-expanded={open}
+          onclick={() => toggle(project.id)}
+          title="{project.key} · {project.name}"
+          data-testid="sidebar-project"
+          data-project={project.key}
+        />
+        {#if menu.length}
+          <DropdownMenu items={menu} align="end">
+            {#snippet trigger(props)}
+              <IconButton
+                {...props}
+                icon="ellipsis"
+                size={22}
+                class="pmenu"
+                label={t('project_actions', { name: project.name })}
+              />
+            {/snippet}
+          </DropdownMenu>
+        {/if}
+      </div>
+      {#if open}
+        {#each rowsFor(project) as row (row.id)}
+          <SidebarItem
+            label={row.label}
+            icon={row.icon}
+            indent={1}
+            href={hrefFor(project, row)}
+            active={isCurrent(project, row)}
+            badge={row.id === 'issues' && project.openIssueCount ? formatCount(project.openIssueCount) : null}
+            data-testid="project-{row.id}"
+            data-project={project.key}
+          />
+        {/each}
+      {/if}
+    {/each}
+  {/if}
+</SidebarGroup>
+
+<style>
+/* The pill hugs its name (DESIGN.md 2.3) and the menu sits at the row's end regardless. */
+.prow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.prow :global(.kspill) {
+  min-width: 0;
+  max-width: calc(100% - 26px);
+}
+.prow :global(.pmenu) {
+  margin-inline-start: auto;
+}
+/* A sidebar has no room for an illustrated empty state; one quiet line says the same thing. */
+.none {
+  margin: 2px 10px 6px;
+  font-size: 12.5px;
+  color: var(--kern-ink-330);
+}
+.loading {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 2px;
+}
+</style>

package/src/client/components/SidebarViews.svelte

@@ -0,0 +1,336 @@
+<script lang="ts">
+import {
+  Button,
+  Dialog,
+  DropdownMenu,
+  Icon,
+  IconButton,
+  Input,
+  type MenuItem,
+  navigation,
+  Select,
+  SidebarGroup,
+  Skeleton,
+  session,
+  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 { View } from '../index.js'
+import { canTracker } from '../permissions.js'
+import { trackerKeys } from '../query.js'
+import { viewHref } from '../views.js'
+
+/**
+ * Saved views, in the application sidebar (DESIGN.md 2.3).
+ *
+ * A view is a query somebody named: the KQL, the layout, the grouping and the filters, kept
+ * together so "the bugs I own that are overdue" is one click rather than four. The server has had
+ * them since the module existed and nothing offered them.
+ *
+ * Pinned views come first because they are the ones somebody uses daily; the rest follow under a
+ * quieter heading rather than in a menu, because a view you cannot see is a view you forget you
+ * saved.
+ */
+interface Props {
+  /** the sidebar's "+": save what the screen is showing right now, without leaving it */
+  onsave?: () => void
+}
+let { onsave }: Props = $props()
+
+const api = getTrackerApi()
+const queryClient = useQueryClient()
+
+const slug = $derived(navigation.workspaceSlug)
+const workspaceId = $derived(session.workspaces.find((w) => w.slug === slug)?.id ?? '')
+const canManageShared = $derived(canTracker('viewManageShared'))
+/** Saving a view is saving a query, which anyone who may raise work may do. */
+const canSave = $derived(canTracker('create'))
+
+const viewsQuery = createQuery(() => ({
+  queryKey: trackerKeys.views(workspaceId),
+  queryFn: () => api.views.list({ workspaceId }),
+  enabled: Boolean(workspaceId),
+}))
+const views = $derived(viewsQuery.data ?? [])
+const pinned = $derived(views.filter((v) => v.pinned))
+const rest = $derived(views.filter((v) => !v.pinned))
+
+/** The view the page is showing, so the sidebar marks it the way the nav marks a page. */
+const activeId = $derived(navigation.search.view_id)
+
+let editing = $state<View | null>(null)
+let draftName = $state('')
+let draftVisibility = $state<View['visibility']>('private')
+/** Named on screen before it happens, never straight off a menu. */
+let confirming = $state<View | null>(null)
+
+const invalidate = () => queryClient.invalidateQueries({ queryKey: trackerKeys.views(workspaceId) })
+const fail = (error: Error) => toast.error(error.message)
+
+const pin = createMutation(() => ({
+  mutationFn: (input: { id: string; pinned: boolean }) => api.views.pin({ workspaceId, ...input }),
+  onSuccess: invalidate,
+  onError: fail,
+}))
+
+/** A view can be renamed and reshared. `views.update` existed from the start and nothing called
+ * it, so a view named in a hurry kept that name and a private one stayed private. */
+const rename = createMutation(() => ({
+  mutationFn: () =>
+    api.views.update({
+      workspaceId,
+      id: editing?.id as string,
+      patch: { name: draftName.trim(), visibility: draftVisibility },
+    } as never),
+  onSuccess: () => {
+    editing = null
+    invalidate()
+  },
+  onError: fail,
+}))
+
+const remove = createMutation(() => ({
+  mutationFn: (id: string) => api.views.delete({ workspaceId, id }),
+  onSuccess: () => {
+    confirming = null
+    invalidate()
+    // Leaving the deleted view in the URL would reopen a query that no longer exists.
+    if (activeId) void navigation.go(`/${slug}/tracker`, { replaceState: true, keepFocus: true })
+  },
+  onError: fail,
+}))
+
+/** Who may change a view: your own always, a shared one only with the permission for it. */
+const visibilityOptions = $derived([
+  { value: 'private', label: t('view_private') },
+  ...(canManageShared
+    ? [
+        { value: 'project', label: t('view_project') },
+        { value: 'workspace', label: t('view_workspace') },
+      ]
+    : []),
+])
+
+const mayEdit = (view: View) =>
+  !view.builtin && (view.visibility === 'private' ? view.ownerId === session.user?.id : canManageShared)
+
+const openEditor = (view: View) => {
+  editing = view
+  draftName = view.name
+  draftVisibility = view.visibility
+}
+
+const menuFor = (view: View): MenuItem[] => [
+  {
+    type: 'item',
+    id: 'pin',
+    label: view.pinned ? t('view_unpin') : t('view_pin'),
+    icon: 'star',
+    onSelect: () => pin.mutate({ id: view.id, pinned: !view.pinned }),
+  },
+  ...(mayEdit(view)
+    ? [
+        {
+          type: 'item' as const,
+          id: 'rename',
+          label: t('view_rename'),
+          icon: 'pencil',
+          onSelect: () => openEditor(view),
+        },
+        {
+          type: 'item' as const,
+          id: 'delete',
+          label: t('common.delete'),
+          icon: 'trash-2',
+          danger: true,
+          // Asked for, not fired from a menu — the only irreversible entry in it.
+          onSelect: () => (confirming = view),
+        },
+      ]
+    : []),
+]
+</script>
+
+{#snippet row(view: View)}
+  <li>
+    <a
+      href={viewHref(slug, view)}
+      aria-current={activeId === view.id ? 'page' : undefined}
+      class="vrow"
+      class:on={activeId === view.id}
+      data-testid="saved-view"
+      data-view-name={view.name}
+    >
+      <Icon name={view.icon ?? (view.layout === 'board' ? 'columns-3' : 'list')} size={14} strokeWidth={1.8} />
+      <span class="vname">{view.name}</span>
+    </a>
+    <DropdownMenu items={menuFor(view)} align="end">
+      {#snippet trigger(props)}
+        <IconButton {...props} icon="ellipsis" size={22} label={t('view_actions', { name: view.name })} />
+      {/snippet}
+    </DropdownMenu>
+  </li>
+{/snippet}
+
+{#if pinned.length}
+  <SidebarGroup title={t('views_pinned')} count={pinned.length}>
+    <ul>{#each pinned as view (view.id)}{@render row(view)}{/each}</ul>
+  </SidebarGroup>
+{/if}
+
+<SidebarGroup title={t('views_all')} count={rest.length || null}>
+  {#snippet trailing()}
+    {#if canSave}
+      <IconButton
+        icon="plus"
+        label={t('view_save_current')}
+        size={22}
+        onclick={() => onsave?.()}
+        data-testid="sidebar-save-view"
+      />
+    {/if}
+  {/snippet}
+
+  {#if viewsQuery.isPending}
+    <div class="loading">
+      {#each [1, 2, 3] as row (row)}<Skeleton class="h-[26px] w-full" />{/each}
+    </div>
+  {:else if !views.length}
+    <p class="none">{t('views_empty_hint')}</p>
+  {:else}
+    <ul>{#each rest as view (view.id)}{@render row(view)}{/each}</ul>
+  {/if}
+</SidebarGroup>
+
+<Dialog
+  open={editing !== null}
+  title={t('view_rename')}
+  size="sm"
+  onOpenChange={(next: boolean) => {
+    if (!next) editing = null
+  }}
+>
+  <div class="egrid">
+    <label class="erow">
+      <span class="elbl">{t('view_name')}</span>
+      <Input bind:value={draftName} data-testid="view-rename-name" />
+    </label>
+    <label class="erow">
+      <span class="elbl">{t('view_visibility')}</span>
+      <Select
+        value={draftVisibility}
+        options={visibilityOptions}
+        onValueChange={(v: string) => (draftVisibility = v as View['visibility'])}
+      />
+    </label>
+  </div>
+
+  {#snippet footer()}
+    <Button variant="ghost" size="sm" onclick={() => (editing = null)}>{t('common.cancel')}</Button>
+    <Button
+      size="sm"
+      disabled={!draftName.trim()}
+      loading={rename.isPending}
+      onclick={() => rename.mutate()}
+      data-testid="view-rename-save"
+    >
+      {t('common.save')}
+    </Button>
+  {/snippet}
+</Dialog>
+
+<Dialog
+  open={confirming !== null}
+  title={t('view_delete_title', { name: confirming?.name ?? '' })}
+  size="sm"
+  onOpenChange={(next: boolean) => {
+    if (!next) confirming = null
+  }}
+>
+  <p class="ebody">{t('view_delete_body')}</p>
+
+  {#snippet footer()}
+    <Button variant="ghost" size="sm" onclick={() => (confirming = null)}>{t('common.cancel')}</Button>
+    <Button
+      size="sm"
+      variant="danger"
+      loading={remove.isPending}
+      onclick={() => confirming && remove.mutate(confirming.id)}
+      data-testid="view-delete-confirm"
+    >
+      {t('common.delete')}
+    </Button>
+  {/snippet}
+</Dialog>
+
+<style>
+.egrid {
+  display: grid;
+  gap: 12px;
+}
+.erow {
+  display: grid;
+  gap: 4px;
+}
+.elbl {
+  font-size: 12px;
+  color: var(--kern-ink-550);
+}
+.ebody {
+  margin: 0;
+  font-size: 13px;
+}
+/* A sidebar has no room for an illustrated empty state; one quiet line says the same thing. */
+.none {
+  margin: 2px 10px 6px;
+  font-size: 12.5px;
+  color: var(--kern-ink-330);
+}
+.loading {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 2px;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+li {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.vrow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: var(--kern-r-xl);
+  color: var(--kern-ink-650);
+  font-size: 13.5px;
+  text-decoration: none;
+}
+.vrow:hover {
+  background: var(--kern-border);
+}
+.vrow.on {
+  background: var(--kern-ink-900);
+  color: var(--kern-ink-inverse);
+  font-weight: 600;
+}
+.vname {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/client/components/StatusIcon.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { type StatusCategory, statusStyle } from '../index.js'
+
+/**
+ * The status glyph (DESIGN.md 3.0): a rounded square whose ring colour comes from the workflow
+ * category and whose inner block fills as work moves along. Triage is dashed, Done is solid.
+ */
+interface Props {
+  category: StatusCategory
+  /** status id and name refine the category, so "In review" gets its own colour */
+  statusId?: string | null
+  name?: string | null
+  size?: number
+  /** set to expose the status to assistive technology; otherwise the icon is decorative */
+  label?: string | null
+}
+let { category, statusId = null, name = null, size = 16, label = null }: Props = $props()
+const style = $derived(statusStyle(category, statusId, name))
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill="none"
+  class="ksi"
+  role={label ? 'img' : 'presentation'}
+  aria-label={label ?? undefined}
+  aria-hidden={label ? undefined : 'true'}
+>
+  <rect
+    x="1.7"
+    y="1.7"
+    width="12.6"
+    height="12.6"
+    rx="4"
+    fill="none"
+    stroke={style.color}
+    stroke-width="1.5"
+    stroke-dasharray={style.dash ?? undefined}
+  />
+  {#if style.fill}<path d={style.fill} fill={style.color} />{/if}
+</svg>
+
+<style>
+  .ksi {
+    flex: none;
+    display: block;
+  }
+</style>