@lapis-notes/history 0.1.2 → 0.2.0

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

@@ -0,0 +1,23 @@
+import type { HistorySourcePicker } from "../controllers/history-source.js";
+import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+import type { RepositoryWorkspace } from "../controllers/workspaces.js";
+type $$ComponentProps = {
+    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;
+};
+declare const RepositoryLogHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryLogHeader = ReturnType<typeof RepositoryLogHeader>;
+export default RepositoryLogHeader;

package/dist/repository/components/RepositoryOperationArguments.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import TerminalIcon from "@lucide/svelte/icons/terminal";
+  import { operationCommandLabel } from "../controllers/operation-command.js";
+  let { attributes }: { attributes: Readonly<Record<string, string>> } =
+    $props();
+  const command = $derived(
+    attributes.args ? operationCommandLabel(attributes.args) : undefined,
+  );
+</script>
+
+{#if command?.trim()}
+  <section
+    class="repository-review-operation-command"
+    aria-label="Recorded operation command"
+  >
+    <div class="repository-review-command-label">
+      <TerminalIcon aria-hidden="true" />Command
+    </div>
+    <pre><code>{command}</code></pre>
+  </section>
+{/if}
+
+<style>
+  .repository-review-operation-command {
+    min-width: 0;
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+  }
+  .repository-review-command-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--muted-foreground);
+  }
+  .repository-review-command-label :global(svg) {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  pre {
+    margin: 0.375rem 0 0;
+    padding: 0.5rem 0.625rem;
+    border-radius: calc(var(--radius) * 0.8);
+    background: color-mix(in srgb, var(--foreground) 5%, var(--background));
+    color: var(--foreground);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  code {
+    font-family: var(--font-mono, monospace);
+    font-size: inherit;
+  }
+</style>

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

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

package/dist/repository/components/RepositoryOperationColumn.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import RepositoryFileTitle from "./RepositoryFileTitle.svelte";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import {
+    FileChangeStats,
+    type FileDiffViewMode,
+  } from "@lapismd/design-core/diff";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import FileSearchIcon from "@lucide/svelte/icons/file-search";
+  import type { OperationState } from "../controllers/operation-state.js";
+  import type { OperationController } from "../controllers/operation-controller.js";
+  import { changeStats } from "../controllers/history-files.js";
+  import RepositoryOperationParentPicker from "./RepositoryOperationParentPicker.svelte";
+  import RepositoryOperationRail from "./RepositoryOperationRail.svelte";
+  import RepositoryOperationArguments from "./RepositoryOperationArguments.svelte";
+  import RepositoryOperationMessage from "./RepositoryOperationMessage.svelte";
+  import RepositoryDiff from "./RepositoryDiff.svelte";
+  import RepositoryDiffControls from "./RepositoryDiffControls.svelte";
+  import "./repository-operation-column.css";
+  let {
+    state: snapshot,
+    controller,
+    copyText,
+  }: {
+    state: OperationState;
+    controller: OperationController;
+    copyText(value: string): Promise<void>;
+  } = $props();
+  let expanded = $state(true);
+  let viewMode = $state<FileDiffViewMode>("unified"),
+    wrap = $state(false);
+  const stats = $derived(changeStats(snapshot.files.diff));
+  const panelId = $derived(
+    `operation-metadata-${snapshot.selected?.id ?? "none"}`,
+  );
+  const operationId = $derived(snapshot.selected?.id);
+  $effect(() => {
+    operationId;
+    expanded = true;
+  });
+</script>
+
+<ColumnCanvas.Column
+  id="diff"
+  columnTitle="Diff"
+  aria-label="Revision changes"
+  style="border:0;border-radius:0;background:transparent"
+>
+  <ColumnCanvas.Body>
+    <div class="operation-diff-stack" data-view-mode={viewMode}>
+      {#if snapshot.selected}
+        <section class="operation-card" aria-label="Selected operation">
+          <header class="operation-card-header">
+            <button
+              class="operation-toggle"
+              type="button"
+              aria-expanded={expanded}
+              aria-controls={panelId}
+              aria-label={expanded
+                ? "Collapse operation details"
+                : "Expand operation details"}
+              style="flex:none;padding:0.25rem"
+              onclick={() => (expanded = !expanded)}
+            >
+              <ChevronDownIcon aria-hidden="true" />
+            </button>
+            <RepositoryOperationMessage
+              textHover={false}
+              message={snapshot.selected.description || "No description"}
+              {copyText}
+              onSelect={() => (expanded = !expanded)}
+            />
+            <div class="operation-card-actions">
+              <ColumnCanvas.Close
+                aria-label="Close Diff column"
+                title="Close Diff"
+              />
+            </div>
+          </header>
+          {#if expanded}
+            <div id={panelId}>
+              <RepositoryOperationRail
+                operation={snapshot.selected}
+                onSelect={(id) => void controller.selectId(id)}
+                {copyText}
+              />
+              {#if snapshot.selected.parents.length > 0}
+                <RepositoryOperationParentPicker
+                  {copyText}
+                  parents={snapshot.selected.parents}
+                  nodes={[...snapshot.nodes, ...snapshot.parentNodes]}
+                  target={snapshot.parent}
+                  loading={snapshot.busy}
+                  onOpen={() => void controller.loadParents()}
+                  onSelect={(id) => void controller.selectParent(id)}
+                />
+                {#if !snapshot.parent}<p class="operation-parent-hint">
+                    Choose a parent to compare this operation.
+                  </p>{/if}
+              {/if}
+              <RepositoryOperationArguments
+                attributes={snapshot.selected.attributes}
+              />
+            </div>
+          {/if}
+        </section>
+      {/if}
+      <section class="operation-file-card" aria-label="Selected file diff">
+        {#if snapshot.files.path}
+          <header class="operation-card-header">
+            <span class="operation-file-path"
+              ><RepositoryFileTitle path={snapshot.files.path} /></span
+            >
+            <div class="operation-card-actions">
+              {#if stats}<FileChangeStats {...stats} showZero />{/if}
+              <RepositoryDiffControls bind:viewMode bind:wrap />
+            </div>
+          </header>
+          {#if snapshot.files.diff}<RepositoryDiff
+              compact
+              change={snapshot.files.diff}
+              {viewMode}
+              {wrap}
+            />
+          {:else if snapshot.busy}<RepositorySkeleton
+              kind="diff"
+              label="Loading selected operation comparison"
+            />
+          {:else}<Empty.Root class="operation-diff-empty" role="status"
+              ><Empty.Header
+                ><Empty.Media variant="icon"><FileSearchIcon /></Empty.Media
+                ><Empty.Title style="font-size:0.875rem;color:var(--foreground)"
+                  >File preview is unavailable</Empty.Title
+                ><Empty.Description style="font-size:0.75rem;max-width:28rem"
+                  >Retry the selected file comparison.</Empty.Description
+                ></Empty.Header
+              ><Button
+                size="sm"
+                onclick={() =>
+                  controller.files.selectPath(snapshot.files.path!)}
+                >Retry preview</Button
+              ></Empty.Root
+            >{/if}
+        {:else}
+          <Empty.Root class="operation-diff-empty" role="status">
+            <Empty.Header
+              ><Empty.Media variant="icon"
+                ><FileSearchIcon aria-hidden="true" /></Empty.Media
+              ><Empty.Title style="font-size:0.875rem;color:var(--foreground)"
+                >No file selected</Empty.Title
+              ><Empty.Description style="font-size:0.75rem;max-width:28rem"
+                >Select a changed file to preview the operation diff.</Empty.Description
+              ></Empty.Header
+            >
+          </Empty.Root>
+        {/if}
+      </section>
+    </div>
+  </ColumnCanvas.Body>
+</ColumnCanvas.Column>

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

@@ -0,0 +1,11 @@
+import type { OperationState } from "../controllers/operation-state.js";
+import type { OperationController } from "../controllers/operation-controller.js";
+import "./repository-operation-column.css";
+type $$ComponentProps = {
+    state: OperationState;
+    controller: OperationController;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryOperationColumn: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationColumn = ReturnType<typeof RepositoryOperationColumn>;
+export default RepositoryOperationColumn;

package/dist/repository/components/RepositoryOperationFiles.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import RepositoryRevisionPicker from "./RepositoryRevisionPicker.svelte";
+  import UndoIcon from "@lucide/svelte/icons/undo-2";
+  import InfoIcon from "@lucide/svelte/icons/info";
+  import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import * as Menu from "@lapismd/design-core/shadcn/dropdown-menu";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { OperationState } from "../controllers/operation-state.js";
+  import type { OperationController } from "../controllers/operation-controller.js";
+  import { listingFiles } from "../controllers/history-files.js";
+  import RepositoryChangedFiles from "./RepositoryChangedFiles.svelte";
+  let {
+    state: snapshot,
+    controller,
+    onOpenDiff,
+    onOpenDetails,
+    copyText,
+    commits,
+    onHistory,
+  }: {
+    state: OperationState;
+    onHistory?(): void;
+    commits: import("@lapismd/jj-history").LocalGraphCommit[];
+    controller: OperationController;
+    onOpenDiff(): void;
+    onOpenDetails(): void;
+    copyText(value: string): Promise<void>;
+  } = $props();
+  const files = $derived(snapshot.files);
+  const listing = $derived(listingFiles(files.paths, files.diff));
+  let from = $state(""),
+    to = $state("");
+  const groupId = $derived(files.group?.change);
+  $effect(() => {
+    groupId;
+    from = "";
+    to = "";
+  });
+</script>
+
+<div class="operation-files">
+  <div
+    class="repository-review-operation-actions"
+    role="toolbar"
+    aria-label="Selected operation actions"
+  >
+    <Button
+      size="xs"
+      variant="outline"
+      aria-label="Inspect operation details"
+      title="Inspect operation details"
+      onclick={onOpenDetails}
+      ><InfoIcon data-icon="inline-start" aria-hidden="true" />Inspect</Button
+    >
+    <RepositoryRevisionPicker
+      onOpen={() => void controller.loadRevisions()}
+      groups={files.groups}
+      selected={files.group?.change}
+      {commits}
+      {copyText}
+      disabled={!files.ready || !files.groups.length}
+      onSelect={(id) => controller.files.selectGroup(id)}
+    />
+    <Button
+      size="xs"
+      variant="outline"
+      disabled
+      title="Operation revert is unavailable in this read-only repository plugin"
+      ><UndoIcon data-icon="inline-start" aria-hidden="true" />Revert</Button
+    >
+    <span class="repository-review-operation-menu">
+      <Menu.Root>
+        <Menu.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              size="icon-xs"
+              aria-label="More operation actions"
+              ><EllipsisIcon aria-hidden="true" /></Button
+            >
+          {/snippet}
+        </Menu.Trigger>
+        <Menu.Content
+          align="end"
+          preventScroll={false}
+          style="min-width: 12rem"
+        >
+          <Menu.Group>
+            {#if onHistory}<Menu.Item onSelect={onHistory}
+                >Open in JJ Log</Menu.Item
+              >{/if}
+            <Menu.Item
+              onSelect={() => {
+                if (snapshot.selected)
+                  void copyText(snapshot.selected.id).catch(() => {});
+              }}><CopyIcon aria-hidden="true" />Copy operation ID</Menu.Item
+            >
+          </Menu.Group>
+        </Menu.Content>
+      </Menu.Root>
+    </span>
+  </div>
+  {#if snapshot.busy && !snapshot.detail}
+    <RepositorySkeleton kind="operation" label="Loading operation details…" />
+  {:else if snapshot.detail?.status === "difference"}
+    {#if !files.ready}
+      {#if snapshot.busy}<RepositorySkeleton
+          kind="files"
+          label="Loading operation revisions…"
+        />
+      {:else}<p role="status">Operation revisions are unavailable.</p>{/if}
+      {#if !snapshot.busy}<Button
+          size="sm"
+          onclick={() => controller.files.retry()}>Retry revisions</Button
+        >{/if}
+    {:else if !files.groups.length}<p>
+        No revision content changes in this operation.
+      </p>
+    {:else}
+      {#if files.group?.comparison.status === "select"}
+        <p>Choose both revisions for this comparison.</p>
+        <label
+          >Before revision<select aria-label="Before revision" bind:value={from}
+            ><option value="" disabled>Choose before</option
+            >{#each files.group.comparison.before as id (id)}<option value={id}
+                >{id}</option
+              >{/each}</select
+          ></label
+        >
+        <label
+          >After revision<select aria-label="After revision" bind:value={to}
+            ><option value="" disabled>Choose after</option
+            >{#each files.group.comparison.after as id (id)}<option value={id}
+                >{id}</option
+              >{/each}</select
+          ></label
+        >
+        <Button
+          size="sm"
+          disabled={!from || !to || snapshot.busy}
+          onclick={() => controller.files.compare(from, to)}
+          >Compare revisions</Button
+        >
+      {:else if files.group?.comparison.status === "unavailable"}<p
+          role="status"
+        >
+          This change has no available content comparison.
+        </p>{/if}
+      {#if files.from && files.to}
+        {#if files.pathsReady || snapshot.busy}<RepositoryChangedFiles
+            files={listing}
+            selectedPath={files.path}
+            initialLoading={!files.pathsReady && snapshot.busy}
+            loading={snapshot.busy}
+            hasMore={!!files.nextPath}
+            onSelect={(path) => {
+              onOpenDiff();
+              void controller.files.selectPath(path);
+            }}
+            onMore={() => void controller.files.morePaths()}
+          />{/if}
+        {#if !files.pathsReady && !snapshot.busy}<p role="status">
+            File changes are unavailable.
+          </p>
+          <Button size="sm" onclick={() => controller.files.retryPaths()}
+            >Retry comparison</Button
+          >
+        {:else if files.pathsReady && !files.paths.length}<p>
+            No changed files in this comparison.
+          </p>{/if}
+        {#if files.paths.length === 500}<p>
+            Showing the first 500 changed files.
+          </p>{/if}
+      {/if}
+      {#if files.next}<Button
+          size="sm"
+          disabled={snapshot.busy}
+          onclick={() => controller.files.more()}>More changed revisions</Button
+        >{/if}
+      {#if files.groups.length === 500}<p>
+          Showing the first 500 changed revisions.
+        </p>{/if}
+    {/if}
+  {:else if snapshot.selected && snapshot.selected.parents.length > 0 && !snapshot.parent}<p
+    >
+      Choose a comparison parent in the operation card.
+    </p>
+  {:else if snapshot.selected && !snapshot.detail && !snapshot.busy}
+    <p role="status">Operation changes are unavailable.</p>
+    <Button
+      size="sm"
+      onclick={() =>
+        snapshot.parent
+          ? controller.selectParent(snapshot.parent)
+          : controller.select(snapshot.selected!)}>Retry operation</Button
+    >
+  {/if}
+</div>
+
+<style>
+  .operation-files {
+    padding: 0 0.5rem 0.5rem;
+    font-size: 0.8125rem;
+  }
+  .repository-review-operation-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    padding-inline-end: 0.5rem;
+    margin: -0.5rem -0.5rem 0.5rem;
+    border-block: 1px solid var(--border);
+    background: color-mix(in srgb, var(--foreground) 4%, var(--background));
+  }
+  .repository-review-operation-menu {
+    display: inline-flex;
+    margin-inline-start: auto;
+    --accent: color-mix(in srgb, var(--foreground) 24%, var(--background));
+    --muted: var(--accent);
+    --ui-column-canvas-header-action-hover: var(--accent);
+  }
+  label {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    margin-bottom: 0.5rem;
+  }
+  select {
+    min-width: 0;
+    flex: 1;
+    width: 100%;
+    padding: 0.375rem;
+    background: var(--background);
+    color: var(--foreground);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+  }
+  p {
+    color: var(--muted-foreground);
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { OperationState } from "../controllers/operation-state.js";
+import type { OperationController } from "../controllers/operation-controller.js";
+type $$ComponentProps = {
+    state: OperationState;
+    onHistory?(): void;
+    commits: import("@lapismd/jj-history").LocalGraphCommit[];
+    controller: OperationController;
+    onOpenDiff(): void;
+    onOpenDetails(): void;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryOperationFiles: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationFiles = ReturnType<typeof RepositoryOperationFiles>;
+export default RepositoryOperationFiles;

package/dist/repository/components/RepositoryOperationMessage.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+  import { operationMessageParts } from "../controllers/operation-message.js";
+  let {
+    message,
+    onSelect,
+    copyText,
+    onCopyError,
+    textHover = true,
+  }: {
+    message: string;
+    onSelect?(): void;
+    copyText(value: string): Promise<void>;
+    onCopyError?(error: unknown): void;
+    textHover?: boolean;
+  } = $props();
+  const parts = $derived(operationMessageParts(message));
+  let feedback = $state<{ id: string; failed: boolean }>();
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let sequence = 0,
+    destroyed = false;
+  function reset() {
+    clearTimeout(timer);
+    sequence++;
+    feedback = undefined;
+  }
+  $effect(() => {
+    message;
+    reset();
+  });
+  onDestroy(() => {
+    destroyed = true;
+    reset();
+  });
+  async function copy(value: string) {
+    const request = ++sequence;
+    clearTimeout(timer);
+    feedback = undefined;
+    let failed = false,
+      failure: unknown;
+    try {
+      await copyText(value);
+    } catch (error) {
+      failed = true;
+      failure = error;
+    }
+    if (destroyed || sequence !== request) return;
+    feedback = { id: value, failed };
+    if (failed) onCopyError?.(failure);
+    timer = setTimeout(() => (feedback = undefined), 1500);
+  }
+</script>
+
+<span class="repository-review-operation-message">
+  {#each parts as part, index (index)}
+    {#if part.type === "text"}
+      {#if onSelect}<button
+          class="message-text"
+          data-quiet={!textHover || undefined}
+          type="button"
+          onclick={onSelect}>{part.value}</button
+        >
+      {:else}<span class="message-text">{part.value}</span>{/if}
+    {:else}
+      {@const label = part.type === "change" ? "change ID" : "commit ID"}
+      {@const status = feedback?.id === part.value ? feedback : undefined}
+      <button
+        type="button"
+        class="message-id"
+        data-change={part.type === "change" || undefined}
+        aria-label={`Copy full ${label}: ${part.value}; ${part.value.slice(0, 8)}…${part.value.slice(-4)}`}
+        title={`Copy full ${label}`}
+        onclick={(event) => {
+          event.stopPropagation();
+          void copy(part.value);
+        }}
+        onpointerdown={(event) => event.stopPropagation()}
+        onkeydown={(event) => {
+          if (event.key === "Enter" || event.key === " ")
+            event.stopPropagation();
+        }}
+      >
+        <code>{part.value.slice(0, 8)}…{part.value.slice(-4)}</code>
+        {#if status?.failed}<TriangleAlertIcon aria-hidden="true" />
+        {:else if status}<CheckIcon aria-hidden="true" />{:else}<CopyIcon
+            aria-hidden="true"
+          />{/if}
+      </button>
+    {/if}
+  {/each}
+  <span class="copy-status" role="status" aria-live="polite"
+    >{feedback && !feedback.failed ? "Copied full ID." : ""}</span
+  >
+</span>
+
+<style>
+  .repository-review-operation-message {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
+    overflow: hidden;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    white-space: nowrap;
+  }
+  .message-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  button.message-text {
+    border: 0;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  .message-id {
+    display: inline-flex;
+    flex: none;
+    height: 1.35rem;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0 0.3rem;
+    border: 1px solid transparent;
+    border-radius: 0.35rem;
+    color: inherit;
+    background: color-mix(in srgb, currentcolor 7%, transparent);
+    cursor: pointer;
+  }
+  .message-id[data-change] {
+    color: var(--primary);
+  }
+  .message-id code {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .message-id :global(svg) {
+    width: 0.7rem;
+    height: 0.7rem;
+    flex: none;
+  }
+  .message-id:hover,
+  button.message-text:not([data-quiet]):hover {
+    background: color-mix(in srgb, var(--foreground) 12%, var(--background));
+  }
+  button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+  .copy-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+</style>