@lapis-notes/history 0.1.4 → 0.2.2

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>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    message: string;
+    onSelect?(): void;
+    copyText(value: string): Promise<void>;
+    onCopyError?(error: unknown): void;
+    textHover?: boolean;
+};
+declare const RepositoryOperationMessage: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationMessage = ReturnType<typeof RepositoryOperationMessage>;
+export default RepositoryOperationMessage;

package/dist/repository/components/RepositoryOperationOption.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+  import RepositoryParentSummary from "./RepositoryParentSummary.svelte";
+  import RepositoryComparisonTime from "./RepositoryComparisonTime.svelte";
+  let {
+    target,
+    operation,
+    fallbackDescription,
+    copyText,
+  }: {
+    target: string;
+    operation?: LocalGraphOperationNode;
+    fallbackDescription?: string;
+    copyText(value: string): Promise<void>;
+  } = $props();
+  let feedback = $state<"" | "copied" | "failed">("");
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let request = 0,
+    destroyed = false;
+  function reset() {
+    clearTimeout(timer);
+    request++;
+    feedback = "";
+  }
+  $effect(() => {
+    void target;
+    reset();
+  });
+  onDestroy(() => {
+    destroyed = true;
+    reset();
+  });
+  async function copy() {
+    const current = ++request;
+    clearTimeout(timer);
+    let result: "copied" | "failed";
+    try {
+      await copyText(target);
+      result = "copied";
+    } catch {
+      result = "failed";
+    }
+    if (destroyed || current !== request) return;
+    feedback = result;
+    timer = setTimeout(() => (feedback = ""), 1_500);
+  }
+</script>
+
+<div
+  role="gridcell"
+  class="repository-review-operation-option"
+  title={[
+    operation?.workspace ? `Workspace ${operation.workspace}` : "",
+    operation?.is_snapshot ? "Snapshot" : "",
+    operation ? `${operation.user}@${operation.host}` : "",
+  ]
+    .filter(Boolean)
+    .join(" · ")}
+>
+  <RepositoryParentSummary
+    {target}
+    author={operation?.user}
+    handle={operation ? `${operation.user}@${operation.host}` : undefined}
+    description={operation?.description ?? fallbackDescription}
+  />
+  <button
+    type="button"
+    class="repository-review-operation-id"
+    data-copy-feedback={feedback || undefined}
+    aria-label={`${feedback === "copied" ? "Copied" : feedback === "failed" ? "Retry copying" : "Copy"} operation ID ${target}; OP ${feedback ? (feedback === "copied" ? "Copied" : "Retry") : `${target.slice(0, 8)}…${target.slice(-4)}`}`}
+    title={target}
+    onpointerdown={(event) => event.stopPropagation()}
+    onkeydown={(event) => {
+      if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+    }}
+    onclick={(event) => {
+      event.stopPropagation();
+      void copy();
+    }}
+  >
+    <span class="repository-id-chip" aria-hidden="true">OP</span>
+    {#if feedback === "copied"}<CheckIcon aria-hidden="true" />
+    {:else if feedback === "failed"}<TriangleAlertIcon
+        aria-hidden="true"
+      />{/if}
+    <code
+      >{feedback
+        ? feedback === "copied"
+          ? "Copied"
+          : "Retry"
+        : `${target.slice(0, 8)}…${target.slice(-4)}`}</code
+    >
+  </button>
+  <span class="copy-status" role="status" aria-live="polite">
+    {feedback === "copied"
+      ? "Copied operation ID."
+      : feedback === "failed"
+        ? "Could not copy operation ID."
+        : ""}
+  </span>
+  <RepositoryComparisonTime
+    timestamp={operation ? Number(operation.end.millis) : undefined}
+  />
+</div>
+
+<style>
+  .repository-review-operation-option {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    flex: 1 1 0;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+  }
+  .repository-review-operation-id {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    height: 1.575rem;
+    gap: 0.25rem;
+    padding: 0 0.3125rem;
+    border: 1px solid var(--border);
+    border-radius: 0.45rem;
+    color: var(--foreground);
+    background: color-mix(in srgb, currentcolor 4%, var(--background));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.5625rem;
+    font-weight: 500;
+    line-height: 1rem;
+    cursor: pointer;
+  }
+  .repository-review-operation-id code {
+    height: 1rem;
+    font-family: inherit;
+    font-size: 0.6875rem;
+    line-height: 1rem;
+  }
+  .repository-review-operation-id .repository-id-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1rem;
+    padding: 0 0.25em;
+    border: 0;
+    border-radius: 0.28rem;
+    background: color-mix(in srgb, currentcolor 7%, transparent);
+    font-family: inherit;
+    font-size: 0.5625rem;
+    font-weight: 600;
+    line-height: 1rem;
+  }
+  .repository-review-operation-id :global(svg) {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+  .repository-review-operation-id:hover {
+    background: color-mix(in srgb, var(--foreground) 9%, var(--background));
+  }
+  .repository-review-operation-id:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+  .repository-review-operation-id[data-copy-feedback="copied"] {
+    color: color-mix(in srgb, #16a34a 70%, var(--foreground));
+    background: color-mix(in srgb, #16a34a 14%, var(--background));
+  }
+  .repository-review-operation-id[data-copy-feedback="failed"] {
+    color: var(--destructive);
+  }
+  .copy-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+type $$ComponentProps = {
+    target: string;
+    operation?: LocalGraphOperationNode;
+    fallbackDescription?: string;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryOperationOption: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationOption = ReturnType<typeof RepositoryOperationOption>;
+export default RepositoryOperationOption;