@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/RepositoryGraph.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { LocalGraphCommit } from "@lapismd/jj-history";
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  import RepositoryOperationMessage from "./RepositoryOperationMessage.svelte";
+  import { TagList } from "@lapismd/design-core/shadcn/tag-list";
+  import { repositoryGraphTags } from "../controllers/tags.js";
+  import type { RepositoryLogRevision } from "../controllers/graph/model.js";
+  import {
+    buildRepositoryLogGraph,
+    repositoryLogSvgWidth,
+  } from "../controllers/graph/repository-log-graph.js";
+  import { timestampLabel } from "../controllers/history-state.js";
+  import RepositoryGraphSvg from "./RepositoryGraphSvg.svelte";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  let {
+    revisions,
+    commits = [],
+    selectedId,
+    label = "Revision graph",
+    commitLabel = "commit ID",
+    onSelect,
+    copyText,
+    selectedFiles,
+    operationTitles = false,
+    onCopyError,
+    showAuthor = true,
+  }: {
+    revisions: RepositoryLogRevision[];
+    commits?: readonly LocalGraphCommit[];
+    selectedId?: string;
+    label?: string;
+    commitLabel?: string;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+    selectedFiles?: Snippet;
+    operationTitles?: boolean;
+    onCopyError?(error: unknown): void;
+    showAuthor?: boolean;
+  } = $props();
+  const id = $props.id();
+  const rows = $derived(buildRepositoryLogGraph(revisions));
+  const width = $derived(repositoryLogSvgWidth(rows));
+  let heights = $state<Record<string, number>>({});
+  function measure(node: HTMLElement, id: string) {
+    const observer = new ResizeObserver(() => {
+      const height = node.getBoundingClientRect().height;
+      if (heights[id] !== height) heights[id] = height;
+    });
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+  }
+  function selectRow(event: MouseEvent, id: string) {
+    const target = event.target;
+    if (
+      event.defaultPrevented ||
+      !(target instanceof Element) ||
+      target.closest(
+        'button, a, input, select, textarea, [role="button"], [role="combobox"], [contenteditable="true"]',
+      )
+    )
+      return;
+    onSelect(id);
+  }
+</script>
+
+<ol class="repository-graph" aria-label={label}>
+  {#each rows as row (row.revision.eventId)}
+    {@const commit = commits.find(
+      (commit) => commit.id === row.revision.eventId,
+    )}
+    {@const tags = repositoryGraphTags(row.revision, commit)}
+    {@const tagsId = `${id}-tags-${row.revision.eventId}`}
+    <li
+      class:selected={selectedId === row.revision.eventId}
+      use:measure={`graph:${row.revision.eventId}`}
+    >
+      <!-- Existing selection button owns keyboard input; extend only its pointer hit area. -->
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+      <div
+        class="repository-graph-row"
+        style:padding-left={`${width}px`}
+        use:measure={`row:${row.revision.eventId}`}
+        onclick={(event) => selectRow(event, row.revision.eventId)}
+      >
+        <RepositoryGraphSvg
+          {row}
+          {width}
+          rowHeight={heights[`row:${row.revision.eventId}`] ?? 76}
+          graphHeight={heights[`graph:${row.revision.eventId}`] ?? 76}
+        />
+        {#if showAuthor}<RepositoryAuthorAvatar
+            name={row.revision.author}
+            email={commit?.author.email}
+            handle={row.revision.host
+              ? `${row.revision.author}@${row.revision.host}`
+              : undefined}
+            size="md"
+          />{/if}
+        <div class="repository-graph-copy">
+          {#if operationTitles}<RepositoryOperationMessage
+              message={row.revision.message}
+              {copyText}
+              {onCopyError}
+              onSelect={() => onSelect(row.revision.eventId)}
+            />{/if}
+          <button
+            class="repository-graph-select"
+            aria-label={operationTitles
+              ? `${row.revision.message}; ${row.revision.author}${row.revision.host ? `@${row.revision.host}` : ""} · ${timestampLabel(row.revision.millis)}`
+              : undefined}
+            aria-pressed={selectedId === row.revision.eventId}
+            aria-describedby={tags.length ? tagsId : undefined}
+            aria-expanded={selectedFiles
+              ? selectedId === row.revision.eventId
+              : undefined}
+            onclick={() => onSelect(row.revision.eventId)}
+          >
+            {#if !operationTitles}<strong>{row.revision.message}</strong>{/if}
+            <span class="repository-graph-meta">
+              {#if showAuthor}{row.revision.author}{row.revision.host
+                  ? `@${row.revision.host}`
+                  : ""} ·
+              {/if}{timestampLabel(row.revision.millis)}
+            </span>
+          </button>
+          <TagList
+            {tags}
+            id={tagsId}
+            label={commit ? "Revision tags" : "Operation tags"}
+          />
+        </div>
+        <RepositoryIdentifiers
+          {copyText}
+          changeId={row.changeIdEncoded}
+          commitId={row.revision.eventId}
+          {commitLabel}
+          placement="inline"
+        />
+      </div>
+      {#if selectedId === row.revision.eventId && selectedFiles}<div
+          class="repository-inline-files"
+        >
+          {@render selectedFiles()}
+        </div>{/if}
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .repository-graph {
+    background: var(--background);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+  }
+  .repository-graph-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    min-height: 76px;
+    width: 100%;
+    border-bottom: 1px solid var(--border);
+    padding: 0.5rem;
+    cursor: pointer;
+  }
+  .repository-graph-row:hover {
+    background: color-mix(in srgb, var(--foreground) 7%, var(--background));
+  }
+  .selected {
+    background: color-mix(in srgb, var(--foreground) 12%, var(--background));
+  }
+  .repository-graph-select {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.25rem;
+    width: 100%;
+    padding: 0;
+    min-width: 0;
+    border: 0;
+    text-align: left;
+    font: inherit;
+    color: inherit;
+    background: transparent;
+    cursor: pointer;
+  }
+  .repository-graph-select:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+  .repository-graph-copy {
+    display: flex;
+    flex: 1 1 12rem;
+    flex-direction: column;
+    min-width: 0;
+    gap: 0.25rem;
+  }
+  strong {
+    font-size: 0.875rem;
+    font-weight: 500;
+    overflow-wrap: anywhere;
+  }
+  .repository-graph-meta {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    overflow-wrap: anywhere;
+  }
+  .repository-inline-files {
+    padding-top: 0.5rem;
+  }
+</style>

package/dist/repository/components/RepositoryGraph.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { LocalGraphCommit } from "@lapismd/jj-history";
+import type { RepositoryLogRevision } from "../controllers/graph/model.js";
+type $$ComponentProps = {
+    revisions: RepositoryLogRevision[];
+    commits?: readonly LocalGraphCommit[];
+    selectedId?: string;
+    label?: string;
+    commitLabel?: string;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+    selectedFiles?: Snippet;
+    operationTitles?: boolean;
+    onCopyError?(error: unknown): void;
+    showAuthor?: boolean;
+};
+declare const RepositoryGraph: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryGraph = ReturnType<typeof RepositoryGraph>;
+export default RepositoryGraph;

package/dist/repository/components/RepositoryGraphSvg.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import {
+    REPOSITORY_LOG_NODE_RADIUS,
+    REPOSITORY_LOG_STROKE_WIDTH,
+    repositoryLogLaneStem,
+    repositoryLogLaneX,
+    repositoryLogMergePath,
+    repositoryLogSplitPath,
+    repositoryLogConvergePath,
+    type RepositoryLogGraphRow,
+  } from "../controllers/graph/repository-log-graph.js";
+  let {
+    row,
+    width,
+    rowHeight,
+    graphHeight,
+    continuous = false,
+  }: {
+    row: RepositoryLogGraphRow;
+    width: number;
+    rowHeight: number;
+    graphHeight: number;
+    continuous?: boolean;
+  } = $props();
+  const radius = REPOSITORY_LOG_NODE_RADIUS;
+  const commitX = $derived(repositoryLogLaneX(row.commitLane));
+  const centerY = $derived(rowHeight / 2);
+  function laneColor(row: RepositoryLogGraphRow, lane: number): string {
+    return row.lanes[lane]?.color ?? "var(--primary)";
+  }
+</script>
+
+<svg
+  class="repository-revision-graph__svg"
+  {width}
+  height={graphHeight}
+  aria-hidden="true"
+>
+  {#each row.lanes as lane, index (index)}
+    {@const x = repositoryLogLaneX(index)}
+    {@const stem = repositoryLogLaneStem(row, index, rowHeight)}
+    {#if stem.y1 !== stem.y2}
+      <line
+        x1={x}
+        y1={continuous && stem.y1 === centerY ? 0 : stem.y1}
+        x2={x}
+        y2={continuous && stem.y2 === rowHeight ? graphHeight : stem.y2}
+        stroke={lane.color}
+        stroke-width={REPOSITORY_LOG_STROKE_WIDTH}
+      />
+    {/if}
+  {/each}
+  {#if row.splitFromLane != null}
+    <path
+      class="repository-revision-graph__edge"
+      d={repositoryLogSplitPath(
+        repositoryLogLaneX(row.splitFromLane),
+        commitX,
+        rowHeight,
+      )}
+      stroke={laneColor(row, row.splitFromLane)}
+      stroke-width={REPOSITORY_LOG_STROKE_WIDTH}
+    />
+  {/if}
+  {#each row.mergeFromLanes as mergeLane (mergeLane)}
+    <path
+      class="repository-revision-graph__edge"
+      d={repositoryLogMergePath(
+        commitX,
+        repositoryLogLaneX(mergeLane),
+        rowHeight,
+      )}
+      stroke={laneColor(row, mergeLane)}
+      stroke-width={REPOSITORY_LOG_STROKE_WIDTH}
+    />
+  {/each}
+  {#each row.convergingLanes as convergeLane (convergeLane)}
+    <path
+      class="repository-revision-graph__edge"
+      d={repositoryLogConvergePath(
+        repositoryLogLaneX(convergeLane),
+        commitX,
+        rowHeight,
+      )}
+      stroke={laneColor(row, convergeLane)}
+      stroke-width={REPOSITORY_LOG_STROKE_WIDTH}
+    />
+  {/each}
+  <circle
+    class="repository-revision-graph__node"
+    cx={commitX}
+    cy={centerY}
+    r={row.isTip ? radius + 1 : radius}
+    fill={laneColor(row, row.commitLane)}
+  />
+</svg>
+
+<style>
+  .repository-revision-graph__svg {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    overflow: visible;
+    pointer-events: none;
+  }
+  .repository-revision-graph__edge {
+    fill: none;
+  }
+</style>

package/dist/repository/components/RepositoryGraphSvg.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type RepositoryLogGraphRow } from "../controllers/graph/repository-log-graph.js";
+type $$ComponentProps = {
+    row: RepositoryLogGraphRow;
+    width: number;
+    rowHeight: number;
+    graphHeight: number;
+    continuous?: boolean;
+};
+declare const RepositoryGraphSvg: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryGraphSvg = ReturnType<typeof RepositoryGraphSvg>;
+export default RepositoryGraphSvg;

package/dist/repository/components/RepositoryIdentifiers.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import Check from "@lucide/svelte/icons/check";
+  import Copy from "@lucide/svelte/icons/copy";
+  import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
+  import {
+    abbreviateRevisionId,
+    revisionLeadingChars,
+  } from "../controllers/graph/revision-id.js";
+  import "./repository-identifiers.css";
+
+  let {
+    copyText,
+    changeId = "",
+    commitId = "",
+    commitLabel = "commit ID",
+    compactLeadingChars = 4,
+    expandedLeadingChars = 5,
+    placement = "overlay",
+  }: {
+    copyText(value: string): Promise<void>;
+    changeId?: string | undefined;
+    commitId?: string | undefined;
+    commitLabel?: string | undefined;
+    /** Leading characters shown at rest, without dots or suffix. */
+    compactLeadingChars?: number;
+    /** Leading characters shown by the hovered or keyboard-focused half. */
+    expandedLeadingChars?: number;
+    placement?: "overlay" | "inline" | undefined;
+  } = $props();
+
+  type Side = "commit" | "change";
+  type Feedback = "" | "copied" | "failed";
+  let feedback = $state<Record<Side, Feedback>>({ commit: "", change: "" });
+  const timers: Partial<Record<Side, ReturnType<typeof setTimeout>>> = {};
+  const requests = { commit: 0, change: 0 };
+  let destroyed = false;
+  const compact = $derived(revisionLeadingChars(compactLeadingChars, 4));
+  const single = $derived(!commitId || !changeId);
+  const expanded = $derived(
+    Math.max(compact, revisionLeadingChars(expandedLeadingChars, 5)),
+  );
+  let hovered = $state<Side | null>(null);
+  let focused = $state<Side | null>(null);
+  let feedbackSide = $state<Side>("commit");
+  const active = $derived(
+    focused ?? hovered ?? (feedback[feedbackSide] ? feedbackSide : null),
+  );
+
+  function reset() {
+    for (const side of ["commit", "change"] as const) {
+      clearTimeout(timers[side]);
+      requests[side]++;
+      feedback[side] = "";
+    }
+  }
+  $effect(() => {
+    // Reused file/snapshot surfaces must not show feedback for the previous ID.
+    void commitId;
+    void changeId;
+    reset();
+  });
+  onDestroy(() => {
+    destroyed = true;
+    reset();
+  });
+
+  async function copy(side: Side, value: string): Promise<void> {
+    const request = ++requests[side];
+    clearTimeout(timers[side]);
+    feedback[side] = "";
+    let result: Feedback;
+    try {
+      await copyText(value);
+      result = "copied";
+    } catch {
+      result = "failed";
+    }
+    if (destroyed || requests[side] !== request) return;
+    feedback[side] = result;
+    feedbackSide = side;
+    timers[side] = setTimeout(() => {
+      feedback[side] = "";
+    }, 1_500);
+  }
+</script>
+
+{#snippet splitButton(label: string, value: string, side: Side, chip: string)}
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          type="button"
+          class="repository-identifiers__split-button"
+          data-side={side}
+          data-active={active === side || undefined}
+          onpointerenter={(event) => {
+            if (
+              event.pointerType !== "touch" &&
+              matchMedia("(hover: hover)").matches
+            )
+              hovered = side;
+          }}
+          onpointerleave={() => {
+            hovered = null;
+          }}
+          onfocus={(event) => {
+            focused = event.currentTarget.matches(":focus-visible")
+              ? side
+              : null;
+          }}
+          onblur={() => {
+            focused = null;
+          }}
+          aria-label={`${chip} ${feedback[side] ? (feedback[side] === "copied" ? "Copied" : "Retry") : active === side || single ? abbreviateRevisionId(value, expanded) : value.slice(0, compact)} · Copy ${label} ${value}`}
+          data-copied={feedback[side] === "copied" || undefined}
+          data-copy-failed={feedback[side] === "failed" || undefined}
+          onclick={(event) => {
+            event.stopPropagation();
+            void copy(side, value);
+          }}
+        >
+          <span class="repository-id-chip" aria-hidden="true">{chip}</span>
+          {#if feedback[side] && active === side}
+            <span
+              class="id-feedback"
+              data-copy-feedback={feedback[side]}
+              aria-hidden="true"
+            >
+              {#if feedback[side] === "copied"}<Check />{:else}<TriangleAlert
+                />{/if}
+              {feedback[side] === "copied" ? "Copied" : "Retry"}
+            </span>
+          {:else}
+            <code class="id-compact">{value.slice(0, compact)}</code>
+            <code class="id-expanded"
+              >{abbreviateRevisionId(value, expanded)}</code
+            >
+          {/if}
+        </button>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content side="top" sideOffset={6}>{value}</Tooltip.Content>
+  </Tooltip.Root>
+{/snippet}
+
+{#if commitId || changeId}
+  <div class="repository-identifiers" data-placement={placement}>
+    {#if commitLabel === "commit ID"}
+      <div
+        class="repository-identifiers__split"
+        data-active={active ?? undefined}
+        data-single={!commitId || !changeId || undefined}
+        style:--id-compact={compact}
+        style:--id-expanded={expanded + 4}
+        role="group"
+        aria-label="Native revision identifiers"
+      >
+        <Tooltip.Provider delayDuration={0}>
+          {#if commitId}{@render splitButton(
+              "Git commit SHA",
+              commitId,
+              "commit",
+              "GIT",
+            )}{/if}
+          {#if changeId}{@render splitButton(
+              "JJ Change ID",
+              changeId,
+              "change",
+              "JJ",
+            )}{/if}
+        </Tooltip.Provider>
+      </div>
+    {:else if commitId}
+      <button
+        type="button"
+        class="repository-identifiers__button"
+        aria-label={`${commitId.length <= 13 ? commitId : `${commitId.slice(0, 8)}…${commitId.slice(-4)}`} · Copy full ${commitLabel}: ${commitId}`}
+        title="Copy full {commitLabel}"
+        data-copied={feedback.commit === "copied" || undefined}
+        data-copy-failed={feedback.commit === "failed" || undefined}
+        onclick={(event) => {
+          event.stopPropagation();
+          void copy("commit", commitId);
+        }}
+      >
+        <code
+          >{commitId.length <= 13
+            ? commitId
+            : `${commitId.slice(0, 8)}…${commitId.slice(-4)}`}</code
+        >
+        {#if feedback.commit === "copied"}<Check aria-hidden="true" />
+        {:else if feedback.commit === "failed"}<TriangleAlert
+            aria-hidden="true"
+          />
+        {:else}<Copy aria-hidden="true" />{/if}
+      </button>
+    {/if}
+    {#if commitLabel === "commit ID"}
+      <span
+        class="clipboard-status"
+        role="status"
+        aria-label="Clipboard feedback"
+        aria-atomic="true"
+      >
+        {#each ["commit", "change"] as const as side}
+          {#if feedback[side]}
+            {feedback[side] === "copied" ? "Copied" : "Could not copy"}
+            {side === "change"
+              ? "JJ Change ID"
+              : commitLabel === "commit ID"
+                ? "Git commit SHA"
+                : commitLabel}.
+          {/if}
+        {/each}
+      </span>
+    {/if}
+  </div>
+{/if}

package/dist/repository/components/RepositoryIdentifiers.svelte.d.ts

@@ -0,0 +1,15 @@
+import "./repository-identifiers.css";
+type $$ComponentProps = {
+    copyText(value: string): Promise<void>;
+    changeId?: string | undefined;
+    commitId?: string | undefined;
+    commitLabel?: string | undefined;
+    /** Leading characters shown at rest, without dots or suffix. */
+    compactLeadingChars?: number;
+    /** Leading characters shown by the hovered or keyboard-focused half. */
+    expandedLeadingChars?: number;
+    placement?: "overlay" | "inline" | undefined;
+};
+declare const RepositoryIdentifiers: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryIdentifiers = ReturnType<typeof RepositoryIdentifiers>;
+export default RepositoryIdentifiers;

package/dist/repository/components/RepositoryLogHeader.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import RepositorySourcePicker from "./RepositorySourcePicker.svelte";
+  import type { HistorySourcePicker } from "../controllers/history-source.js";
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import RepositoryOperationPinPicker from "./RepositoryOperationPinPicker.svelte";
+  import RepositoryWorkspacePicker from "./RepositoryWorkspacePicker.svelte";
+  import type { RepositoryWorkspace } from "../controllers/workspaces.js";
+  import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
+  let {
+    title,
+    sources,
+    count,
+    operations,
+    operation,
+    nodes = [],
+    selectionLabel = "Operation",
+    busy,
+    onSelect,
+    onRefresh,
+    copyText,
+    workspaces,
+    workspace,
+    onWorkspaceSelect,
+    onWorkspaceOpen,
+  }: {
+    sources?: HistorySourcePicker;
+    title: string;
+    count: number;
+    operations: string[];
+    operation: string | undefined;
+    nodes?: readonly LocalGraphOperationNode[];
+    selectionLabel?: string;
+    busy: boolean;
+    onSelect(operation: string): void;
+    onRefresh(): void;
+    copyText(value: string): Promise<void>;
+    workspaces: readonly RepositoryWorkspace[];
+    workspace: string | null;
+    onWorkspaceSelect(workspace: string | null): void;
+    onWorkspaceOpen?(): void;
+  } = $props();
+</script>
+
+<ColumnCanvas.Header role="group" aria-label={`${title} header`}>
+  <div data-ui-component="column-canvas" data-ui-part="column-header-main">
+    <ColumnCanvas.Title>{title}</ColumnCanvas.Title>
+    <ColumnCanvas.Count>{count}</ColumnCanvas.Count>
+  </div>
+  <div class="repository-log-actions">
+    {#if sources}<RepositorySourcePicker picker={sources} />{/if}
+    <RepositoryWorkspacePicker
+      {workspaces}
+      selected={workspace}
+      disabled={!operation}
+      onSelect={onWorkspaceSelect}
+      onOpen={onWorkspaceOpen}
+    />
+    <RepositoryOperationPinPicker
+      {operations}
+      {operation}
+      {nodes}
+      label={selectionLabel}
+      {onSelect}
+      {copyText}
+    />
+    <Button
+      variant="ghost"
+      size="icon-xs"
+      aria-label="Refresh"
+      title="Refresh"
+      disabled={busy}
+      onclick={onRefresh}><RefreshIcon aria-hidden="true" /></Button
+    >
+    <ColumnCanvas.Toggle columnTitle={title} />
+  </div>
+</ColumnCanvas.Header>
+
+<style>
+  .repository-log-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+    flex: 0 1 auto;
+    justify-content: flex-end;
+    --ui-button-radius: 999px;
+  }
+</style>