@lapis-notes/history 0.1.4 → 0.2.0

package/dist/repository/components/RepositoryFileHistory.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import { onMount } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+  import RefreshCwIcon from "@lucide/svelte/icons/refresh-cw";
+  import GitMergeConflictIcon from "@lucide/svelte/icons/git-merge-conflict";
+  import FileClockIcon from "@lucide/svelte/icons/file-clock";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import type {
+    FileHistoryController,
+    FileHistoryState,
+  } from "../controllers/file-history-controller.js";
+  import { commitRows } from "../controllers/graph/model.js";
+  import RepositoryGraph from "./RepositoryGraph.svelte";
+  import RepositoryFileTitle from "./RepositoryFileTitle.svelte";
+  import RepositoryOperationPinPicker from "./RepositoryOperationPinPicker.svelte";
+  let {
+    controller,
+    copyText,
+    onOpen,
+    onBlame,
+  }: {
+    controller: FileHistoryController;
+    copyText(value: string): Promise<void>;
+    onOpen(revision: string): void;
+    onBlame(): void;
+  } = $props();
+  let state = $state<FileHistoryState>();
+  const rows = $derived(commitRows(state?.commits ?? []));
+  const pins = $derived([
+    ...new Set([
+      ...(state?.heads ?? []),
+      ...(state?.operation ? [state.operation] : []),
+    ]),
+  ]);
+  onMount(() =>
+    controller.subscribe((value) => {
+      state = value;
+    }),
+  );
+</script>
+
+<section
+  class="file-history"
+  aria-label="Active file history"
+  aria-busy={state?.busy ?? false}
+>
+  <header>
+    <span class="file-title"
+      >{#if state?.path}<RepositoryFileTitle path={state.path} />{:else}File
+        history{/if}</span
+    >
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label="Blame file"
+      title="Blame file"
+      disabled={!state?.path || !state.workspaceCommit || state.busy}
+      onclick={onBlame}><GitMergeConflictIcon /></Button
+    >
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label="Refresh file history"
+      disabled={!state?.path || state.busy}
+      onclick={() => controller.refresh()}><RefreshCwIcon /></Button
+    >
+  </header>
+  {#if state?.path && !state.operation && pins.length > 1}<div class="file-pin">
+      <RepositoryOperationPinPicker
+        operations={pins}
+        operation={state.operation}
+        label="File history operation"
+        onSelect={(id) => void controller.refresh(id)}
+        {copyText}
+      />
+    </div>{/if}
+  <ScrollArea.Root style="flex:1;min-height:0;min-width:0">
+    {#if !state?.path}<Empty.Root role="status">
+        <Empty.Header>
+          <Empty.Media variant="icon"><FileClockIcon /></Empty.Media>
+          <Empty.Title>No file selected</Empty.Title>
+          <Empty.Description
+            >Open a file in the editor to see its revision history.</Empty.Description
+          >
+        </Empty.Header>
+      </Empty.Root>
+    {:else}
+      <RepositoryGraph
+        revisions={rows}
+        commits={state.commits}
+        label="File revision graph"
+        {copyText}
+        showAuthor={false}
+        onSelect={onOpen}
+      />
+      {#if state.busy}<RepositorySkeleton
+          kind="file-history"
+          label="Loading file history…"
+        />
+      {:else if state.phase === "unavailable"}<p role="status">
+          File history is unavailable. Refresh to try again.
+        </p>
+      {:else if !state.operation}<p role="status">
+          {state.heads.length > 1
+            ? "Choose an operation to inspect this file."
+            : "No repository history available."}
+        </p>
+      {:else if !state.commits.length}<Empty.Root role="status">
+          <Empty.Header>
+            <Empty.Media variant="icon"><FileClockIcon /></Empty.Media>
+            <Empty.Title>No file history</Empty.Title>
+            <Empty.Description
+              >No revisions changed this file at the selected operation.</Empty.Description
+            >
+          </Empty.Header>
+        </Empty.Root>{/if}
+      {#if state.next}<Button
+          variant="outline"
+          size="sm"
+          disabled={state.busy}
+          onclick={() => controller.more()}>More revisions</Button
+        >{/if}
+      {#if state.commits.length === 200}<p role="status">
+          Showing the first 200 matching revisions.
+        </p>{/if}
+    {/if}
+  </ScrollArea.Root>
+</section>
+
+<style>
+  .file-history {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    color: var(--foreground);
+    background: var(--background);
+    font-size: 0.8125rem;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    height: var(--ui-workspace-tab-height, 40px);
+    min-height: var(--ui-workspace-tab-height, 40px);
+    flex: 0 0 var(--ui-workspace-tab-height, 40px);
+    padding: 0 0.75rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .file-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 0.875rem;
+  }
+  .file-pin {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+  }
+  p {
+    padding: 0.75rem;
+    margin: 0;
+    color: var(--muted-foreground);
+    line-height: 1.5;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { FileHistoryController } from "../controllers/file-history-controller.js";
+type $$ComponentProps = {
+    controller: FileHistoryController;
+    copyText(value: string): Promise<void>;
+    onOpen(revision: string): void;
+    onBlame(): void;
+};
+declare const RepositoryFileHistory: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryFileHistory = ReturnType<typeof RepositoryFileHistory>;
+export default RepositoryFileHistory;

package/dist/repository/components/RepositoryFileTitle.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import FileTextIcon from "@lucide/svelte/icons/file-text";
+  let { path }: { path?: string } = $props();
+</script>
+
+<span class="repository-review-file-title">
+  {#if path}<FileTextIcon aria-hidden="true" />{/if}
+  <span title={path}>{path ?? "Diff"}</span>
+</span>
+
+<style>
+  .repository-review-file-title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+  }
+  .repository-review-file-title :global(svg) {
+    flex: none;
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--muted-foreground);
+  }
+  .repository-review-file-title > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    path?: string;
+};
+declare const RepositoryFileTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryFileTitle = ReturnType<typeof RepositoryFileTitle>;
+export default RepositoryFileTitle;

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;