@lapis-notes/history 0.1.4 → 0.2.0

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>

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;