@kernhq/module-tracker 0.10.1 → 0.11.0

package/src/client/components/IssueTime.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+import { Button, Icon, IconButton, Input, relativeTime, session, toast } from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { getTrackerCatalogue } from '../context.svelte.js'
+import { t } from '../i18n.js'
+import { formatDuration, type Timer, type Worklog } from '../index.js'
+import { canTracker } from '../permissions.js'
+import { trackerKeys } from '../query.js'
+import { parseDuration } from '../time.js'
+
+/**
+ * Time spent on an issue: a running timer, and the work already logged.
+ *
+ * The server has had both since the module existed and nothing offered either, so `timeSpentSec`
+ * on an issue could only ever be zero. A timer belongs to a person rather than to an issue —
+ * starting one anywhere stops the one you had running — so the control says which issue it is on.
+ */
+interface Props {
+  workspaceId: string
+  issueId: string
+  canLog: boolean
+}
+let { workspaceId, issueId, canLog }: Props = $props()
+
+const api = getTrackerApi()
+const cat = getTrackerCatalogue()
+const queryClient = useQueryClient()
+
+let manual = $state('')
+let adding = $state(false)
+
+const worklogsQuery = createQuery(() => ({
+  queryKey: trackerKeys.worklogs(workspaceId, issueId),
+  queryFn: () => api.worklogs.list({ workspaceId, issueId }),
+}))
+const timerQuery = createQuery(() => ({
+  queryKey: trackerKeys.timer(workspaceId),
+  queryFn: () => api.worklogs.timers.current({ workspaceId }),
+  // A timer runs while nobody is looking, so its elapsed time has to be refreshed rather than read
+  // once and left to drift.
+  refetchInterval: 30_000,
+}))
+
+const worklogs = $derived(worklogsQuery.data ?? [])
+const timer = $derived((timerQuery.data ?? null) as Timer | null)
+const onThisIssue = $derived(timer?.issueId === issueId)
+const total = $derived(worklogs.reduce((sum, w) => sum + w.durationSec, 0))
+
+const refresh = () => {
+  void queryClient.invalidateQueries({ queryKey: trackerKeys.worklogs(workspaceId, issueId) })
+  void queryClient.invalidateQueries({ queryKey: trackerKeys.timer(workspaceId) })
+  void queryClient.invalidateQueries({ queryKey: trackerKeys.issue(workspaceId, issueId) })
+}
+const fail = (error: Error) => toast.error(error.message)
+
+const start = createMutation(() => ({
+  mutationFn: () => api.worklogs.timers.start({ workspaceId, issueId }),
+  onSuccess: refresh,
+  onError: fail,
+}))
+const stop = createMutation(() => ({
+  mutationFn: (discard: boolean) => api.worklogs.timers.stop({ workspaceId, discard }),
+  onSuccess: refresh,
+  onError: fail,
+}))
+const log = createMutation(() => ({
+  mutationFn: (durationSec: number) =>
+    api.worklogs.create({ workspaceId, issueId, durationSec, adjustRemaining: 'auto' }),
+  onSuccess: () => {
+    manual = ''
+    adding = false
+    refresh()
+  },
+  onError: fail,
+}))
+const remove = createMutation(() => ({
+  mutationFn: (id: string) => api.worklogs.delete({ workspaceId, id }),
+  onSuccess: refresh,
+  onError: fail,
+}))
+
+/**
+ * Correcting an entry.
+ *
+ * `worklogs.update` existed from the start and nothing called it, so "2h" typed where "20m" was
+ * meant could only be deleted and logged again — which moves the entry to now and loses the day it
+ * was worked.
+ */
+const edit = createMutation(() => ({
+  mutationFn: (input: { id: string; durationSec: number }) =>
+    api.worklogs.update({ workspaceId, id: input.id, patch: { durationSec: input.durationSec } }),
+  onSuccess: () => {
+    editingId = null
+    refresh()
+  },
+  onError: fail,
+}))
+
+let editingId = $state<string | null>(null)
+let editDraft = $state('')
+const editParsed = $derived(parseDuration(editDraft))
+
+const startEdit = (entry: { id: string; durationSec: number }) => {
+  editingId = entry.id
+  editDraft = formatDuration(entry.durationSec)
+}
+const commitEdit = () => {
+  const id = editingId
+  if (!id || editParsed === null) return
+  edit.mutate({ id, durationSec: editParsed })
+}
+
+const parsed = $derived(parseDuration(manual))
+const elapsed = $derived(
+  timer ? Math.max(0, Math.floor((Date.now() - Date.parse(timer.startedAt)) / 1000)) : 0,
+)
+const who = (userId: string) =>
+  userId === session.user?.id ? t('time_you') : (cat.person(userId)?.name ?? '')
+</script>
+
+<section class="time" data-testid="issue-time">
+  <div class="thead">
+    <span class="kern-sublabel">{t('time_title')}</span>
+    {#if total > 0}<span class="total">{formatDuration(total)}</span>{/if}
+  </div>
+
+  {#if canLog}
+    <div class="row">
+      {#if onThisIssue}
+        <Button size="sm" onclick={() => stop.mutate(false)} data-testid="timer-stop">
+          <Icon name="clock" size={13} strokeWidth={1.9} />
+          {t('time_stop', { elapsed: formatDuration(elapsed) })}
+        </Button>
+        <Button size="sm" variant="ghost" onclick={() => stop.mutate(true)}>
+          {t('time_discard')}
+        </Button>
+      {:else}
+        <Button size="sm" variant="secondary" onclick={() => start.mutate()} data-testid="timer-start">
+          <Icon name="clock" size={13} strokeWidth={1.9} />
+          {t('time_start')}
+        </Button>
+        {#if timer}
+          <!-- A timer belongs to a person, so starting one here stops the one running elsewhere. -->
+          <span class="elsewhere">{t('time_running_elsewhere')}</span>
+        {/if}
+      {/if}
+
+      {#if adding}
+        <Input
+          bind:value={manual}
+          placeholder={t('time_placeholder')}
+          data-testid="time-amount"
+          onkeydown={(e: KeyboardEvent) => {
+            if (e.key === 'Enter' && parsed) log.mutate(parsed)
+            if (e.key === 'Escape') adding = false
+          }}
+        />
+        <Button size="sm" disabled={!parsed} onclick={() => parsed && log.mutate(parsed)} data-testid="time-log">
+          {t('time_log')}
+        </Button>
+      {:else}
+        <button type="button" class="manual" onclick={() => (adding = true)}>
+          {t('time_log_manually')}
+        </button>
+      {/if}
+    </div>
+  {/if}
+
+  {#if worklogs.length}
+    <ul class="logs">
+      {#each worklogs as entry (entry.id)}
+        <li>
+          {#if editingId === entry.id}
+            <input
+              class="edur"
+              value={editDraft}
+              aria-label={t('time_edit')}
+              data-testid="worklog-edit"
+              oninput={(e) => (editDraft = e.currentTarget.value)}
+              onblur={commitEdit}
+              onkeydown={(e) => {
+                if (e.key === 'Enter') commitEdit()
+                if (e.key === 'Escape') editingId = null
+              }}
+            />
+          {:else if canLog && entry.userId === session.user?.id}
+            <button
+              type="button"
+              class="dur edit"
+              title={t('time_edit')}
+              onclick={() => startEdit(entry)}
+              data-testid="worklog-duration"
+            >
+              {formatDuration(entry.durationSec)}
+            </button>
+          {:else}
+            <span class="dur">{formatDuration(entry.durationSec)}</span>
+          {/if}
+          <span class="by">{who(entry.userId)}</span>
+          <time datetime={entry.startedAt}>{relativeTime(entry.startedAt)}</time>
+          {#if entry.note}<span class="note">{entry.note}</span>{/if}
+          {#if canLog && entry.userId === session.user?.id}
+            <IconButton
+              icon="x"
+              size={22}
+              label={t('time_remove')}
+              onclick={() => remove.mutate(entry.id)}
+            />
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {:else if !canLog}
+    <p class="empty">{t('time_empty')}</p>
+  {/if}
+</section>
+
+<style>
+.time {
+  margin-top: 16px;
+}
+.thead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.edit {
+  padding: 1px 4px;
+  margin-inline-start: -4px;
+  border: 0;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.edit:hover {
+  background: var(--kern-surface-hover);
+}
+.edur {
+  width: 72px;
+  padding: 1px 4px;
+  border: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-sm);
+  background: var(--kern-surface);
+  color: inherit;
+  font: inherit;
+}
+.total {
+  font-size: 13px;
+  font-weight: 600;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  flex-wrap: wrap;
+}
+.manual,
+.elsewhere {
+  border: 0;
+  background: none;
+  color: var(--kern-ink-350);
+  font: inherit;
+  font-size: 12px;
+  padding: 2px 4px;
+}
+.manual {
+  cursor: pointer;
+}
+.manual:hover {
+  color: var(--kern-ink-900);
+}
+.logs {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.logs li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+}
+.dur {
+  font-weight: 600;
+  min-width: 42px;
+}
+.by {
+  color: var(--kern-ink-550);
+}
+.note,
+time {
+  color: var(--kern-ink-350);
+}
+.empty {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--kern-ink-350);
+}
+</style>

package/src/client/components/KqlInput.svelte

@@ -0,0 +1,295 @@
+<script lang="ts">
+import { Icon } from '@kernhq/ui'
+import { t } from '../i18n.js'
+import type { KqlField, KqlSuggestion } from '../index.js'
+import { parseKql } from '../index.js'
+
+/**
+ * The KQL box in the toolbar.
+ *
+ * It validates as you type with the same reader the server uses, so a mistake is reported next to
+ * the caret instead of after a round trip, and it offers the next token: a field, then an operator,
+ * then the values that field actually has. Enter applies the query; a query that does not parse is
+ * never applied, so the list cannot silently show the wrong thing.
+ */
+interface Props {
+  /** the applied query; only updated on submit or clear */
+  value: string
+  fields: KqlField[]
+  onapply: (kql: string) => void
+}
+let { value, fields, onapply }: Props = $props()
+
+let draft = $state('')
+let cursor = $state(0)
+let focused = $state(false)
+let highlighted = $state(0)
+let input = $state<HTMLInputElement | null>(null)
+let box = $state<HTMLDivElement | null>(null)
+/**
+ * The toolbar clips its own overflow, so the error and the suggestions are positioned against the
+ * viewport and measured from the field rather than being laid out inside it.
+ */
+let anchor = $state({ top: 0, left: 0, width: 0 })
+function measure() {
+  const r = box?.getBoundingClientRect()
+  if (r) anchor = { top: r.bottom + 6, left: r.left, width: r.width }
+}
+
+// adopt the applied query when it changes from elsewhere (a preset tab, a cleared filter)
+$effect(() => {
+  draft = value
+})
+
+const parsed = $derived(parseKql(draft, { fields, cursor }))
+const suggestions = $derived(focused ? parsed.suggestions.slice(0, 8) : [])
+const problem = $derived(draft.trim() && !parsed.ok ? (parsed.errors[0] ?? null) : null)
+/**
+ * A half-typed query is not a mistake. While there is something useful to offer, the box guides;
+ * only when nothing fits does it say what is wrong. Enter refuses either way until it parses.
+ */
+const error = $derived(problem && suggestions.length === 0 ? problem : null)
+
+$effect(() => {
+  if (highlighted > suggestions.length - 1) highlighted = 0
+})
+
+function accept(suggestion: KqlSuggestion) {
+  // replace the partial token under the caret rather than appending to it
+  const before = draft.slice(0, cursor)
+  const tokenStart = before.search(/[\w.]+$/)
+  const head = tokenStart >= 0 ? before.slice(0, tokenStart) : before
+  draft = head + suggestion.insertText + draft.slice(cursor)
+  const next = (head + suggestion.insertText).length
+  queueMicrotask(() => {
+    input?.setSelectionRange(next, next)
+    input?.focus()
+    cursor = next
+  })
+}
+
+function onkeydown(event: KeyboardEvent) {
+  if (suggestions.length && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+    event.preventDefault()
+    const delta = event.key === 'ArrowDown' ? 1 : -1
+    highlighted = (highlighted + delta + suggestions.length) % suggestions.length
+    return
+  }
+  if (event.key === 'Tab' && suggestions.length) {
+    event.preventDefault()
+    const picked = suggestions[highlighted]
+    if (picked) accept(picked)
+    return
+  }
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    if (suggestions.length && highlighted > 0) {
+      const picked = suggestions[highlighted]
+      if (picked) accept(picked)
+      return
+    }
+    if (parsed.ok) {
+      onapply(draft.trim())
+      input?.blur()
+    }
+    return
+  }
+  if (event.key === 'Escape') {
+    if (focused) {
+      event.stopPropagation()
+      draft = value
+      input?.blur()
+    }
+  }
+}
+
+function track(event: Event) {
+  cursor = (event.currentTarget as HTMLInputElement).selectionStart ?? draft.length
+  measure()
+}
+</script>
+
+<svelte:window onresize={() => focused && measure()} />
+
+<div class="kkql" class:invalid={Boolean(error)} bind:this={box}>
+  <Icon name="search" size={14} strokeWidth={1.7} />
+  <input
+    bind:this={input}
+    bind:value={draft}
+    type="text"
+    spellcheck="false"
+    autocomplete="off"
+    data-testid="kql-input"
+    placeholder={t('kql_placeholder')}
+    aria-label={t('kql_label')}
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={error ? 'kql-error' : undefined}
+    onfocus={() => {
+      focused = true
+      measure()
+    }}
+    onblur={() => setTimeout(() => (focused = false), 120)}
+    oninput={track}
+    onclick={track}
+    onkeyup={track}
+    {onkeydown}
+  />
+  {#if draft}
+    <button
+      type="button"
+      class="clear"
+      aria-label={t('kql_clear')}
+      onclick={() => {
+        draft = ''
+        onapply('')
+      }}
+    >
+      <Icon name="x" size={12} strokeWidth={2} />
+    </button>
+  {/if}
+
+  {#if focused && suggestions.length}
+    <ul class="sug" style:top="{anchor.top}px" style:left="{anchor.left}px" style:width="{anchor.width}px">
+      {#each suggestions as suggestion, i (suggestion.kind + suggestion.label)}
+        <li>
+          <button
+            type="button"
+            class:on={i === highlighted}
+            onmousedown={(e) => {
+              e.preventDefault()
+              accept(suggestion)
+            }}
+          >
+            <span class="kind">{suggestion.kind}</span>
+            <span class="lbl">{suggestion.label}</span>
+            {#if suggestion.detail}<span class="det">{suggestion.detail}</span>{/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {:else if error}
+    <p
+      class="err"
+      id="kql-error"
+      role="status"
+      style:top="{anchor.top}px"
+      style:left="{anchor.left}px"
+      style:width="{anchor.width}px"
+    >
+      {error.message}
+    </p>
+  {/if}
+</div>
+
+<style>
+  .kkql {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 30px;
+    min-width: 180px;
+    flex: 1 1 240px;
+    max-width: 460px;
+    padding: 0 10px;
+    border: 1px solid var(--kern-border);
+    border-radius: var(--kern-r-lg);
+    background: var(--kern-surface-input);
+    color: var(--kern-ink-250);
+  }
+  .kkql:focus-within {
+    border-color: var(--kern-accent);
+    box-shadow: 0 0 0 3px var(--kern-ring);
+  }
+  .kkql.invalid {
+    border-color: var(--kern-danger);
+  }
+  input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    font-family: var(--kern-font-mono);
+    font-size: 12.5px;
+    letter-spacing: -0.01em;
+    color: var(--kern-ink-800);
+  }
+  input:focus-visible {
+    box-shadow: none;
+  }
+  .clear {
+    display: grid;
+    place-items: center;
+    color: var(--kern-ink-350);
+  }
+  .clear:hover {
+    color: var(--kern-ink-900);
+  }
+  .err,
+  .sug {
+    position: fixed;
+    z-index: 30;
+    margin: 0;
+    background: var(--kern-surface-raised);
+    border-radius: var(--kern-r-2xl);
+    box-shadow: var(--kern-shadow-popover);
+    animation: kfade 0.12s ease-out;
+  }
+  .err {
+    padding: 8px 12px;
+    font-size: 12.5px;
+    color: var(--kern-danger);
+  }
+  .sug {
+    list-style: none;
+    padding: 4px;
+    /* the field is narrow; the list is not bound by it */
+    min-width: 340px;
+    max-width: min(520px, 90vw);
+    max-height: 260px;
+    overflow-y: auto;
+  }
+  .sug button {
+    display: flex;
+    align-items: baseline;
+    gap: 9px;
+    width: 100%;
+    padding: 6px 9px;
+    border-radius: var(--kern-r-md);
+    text-align: start;
+  }
+  .sug button:hover,
+  .sug button.on {
+    background: var(--kern-surface-popover-hover);
+  }
+  .kind {
+    font-family: var(--kern-font-mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--kern-ink-250);
+    width: 58px;
+    flex: none;
+  }
+  .lbl {
+    font-family: var(--kern-font-mono);
+    font-size: 12.5px;
+    color: var(--kern-ink-800);
+    white-space: nowrap;
+  }
+  .det {
+    font-size: 12px;
+    color: var(--kern-ink-350);
+    margin-inline-start: auto;
+    padding-inline-start: 12px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @media (max-width: 900px) {
+    .kkql {
+      display: none;
+    }
+  }
+</style>