@lapis-notes/history 0.1.2 → 0.2.0

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;

package/dist/repository/components/RepositoryOperationParentPicker.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import RepositoryPickerSearch from "./RepositoryPickerSearch.svelte";
+  import RepositoryOperationOption from "./RepositoryOperationOption.svelte";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  import RepositoryComparisonBar from "./RepositoryComparisonBar.svelte";
+  import RepositoryParentSummary from "./RepositoryParentSummary.svelte";
+  import RepositoryComparisonTime from "./RepositoryComparisonTime.svelte";
+  import "./repository-commit-picker.css";
+  let {
+    parents,
+    nodes,
+    target,
+    loading = false,
+    onOpen,
+    onSelect,
+    copyText,
+  }: {
+    parents: readonly string[];
+    nodes: readonly LocalGraphOperationNode[];
+    target?: string;
+    loading?: boolean;
+    onOpen(): void;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+  } = $props();
+  const id = $props.id();
+  let open = $state(false),
+    query = $state(""),
+    highlighted = $state("");
+  let searchInput = $state<HTMLInputElement | null>(null);
+  const options = $derived(
+    parents.map((id) => {
+      const operation = nodes.find((node) => node.id === id);
+      return {
+        id,
+        operation,
+        search: [
+          id,
+          operation?.description,
+          operation?.user,
+          operation?.host,
+          operation?.workspace,
+          operation?.is_snapshot ? "snapshot" : "",
+        ]
+          .join(" ")
+          .toLocaleLowerCase(),
+      };
+    }),
+  );
+  const selected = $derived(options.find((option) => option.id === target));
+  const visible = $derived(
+    options.filter((option) =>
+      option.search.includes(query.trim().toLocaleLowerCase()),
+    ),
+  );
+  const missing = $derived(options.some((option) => !option.operation));
+  function handleOpen(next: boolean) {
+    open = next;
+    if (next) {
+      query = "";
+      highlighted = target ?? parents[0] ?? "";
+      onOpen();
+    }
+  }
+</script>
+
+<Popover.Root {open} onOpenChange={handleOpen}>
+  <RepositoryComparisonBar>
+    <div class="repository-review-parent-selector">
+      <Popover.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="outline"
+            size="xs"
+            class="repository-review-parent-trigger"
+            role="combobox"
+            aria-label="Compare operation with parent"
+            aria-describedby={`${id}-value`}
+            value={target ?? ""}
+            data-parent={target}
+          >
+            <ChevronDownIcon data-icon="inline-end" aria-hidden="true" />
+          </Button>
+        {/snippet}
+      </Popover.Trigger>
+      <div class="repository-review-parent-value" id={`${id}-value`}>
+        <RepositoryParentSummary
+          {target}
+          author={selected?.operation?.user}
+          handle={selected?.operation
+            ? `${selected?.operation.user}@${selected?.operation.host}`
+            : undefined}
+          description={selected?.operation?.description}
+        />
+        <span class="repository-review-parent-identifiers">
+          <RepositoryIdentifiers
+            {copyText}
+            commitId={target ?? ""}
+            commitLabel="operation ID"
+            placement="inline"
+          />
+        </span>
+        <RepositoryComparisonTime
+          timestamp={selected?.operation
+            ? Number(selected.operation.end.millis)
+            : undefined}
+        />
+      </div>
+    </div>
+  </RepositoryComparisonBar>
+  <Popover.Content
+    align="start"
+    sideOffset={6}
+    class="repository-commit-picker repository-review-identifier-surface"
+    role="dialog"
+    aria-label="Choose operation parent"
+    onOpenAutoFocus={(event) => {
+      event.preventDefault();
+      searchInput?.focus();
+    }}
+    style="--ui-popover-width:min(42rem,calc(100vw - 2rem));--ui-popover-padding:0;--ui-popover-gap:0"
+  >
+    <CommandView.Root
+      class="repository-review-picker-options"
+      bind:value={highlighted}
+      label="Select operation parent"
+      shouldFilter={false}
+    >
+      <RepositoryPickerSearch
+        bind:inputRef={searchInput}
+        bind:query
+        placeholder="Find operation, author or ID"
+        label="Find operation"
+        closeLabel="Close operation selector"
+      />
+      <CommandView.List role="grid" aria-label="Recorded operation parents">
+        {#if !visible.length}<CommandView.Empty role="row"
+            ><span role="gridcell">No matching operations</span
+            ></CommandView.Empty
+          >
+        {:else}<CommandView.Group role="rowgroup">
+            {#each visible as option (option.id)}
+              <CommandView.Item
+                role="row"
+                value={option.id}
+                keywords={[option.search]}
+                aria-label={`Select operation parent ${option.operation?.description.split("\n")[0] || "Unknown parent"} (${option.id})`}
+                data-operation={option.id}
+                class="repository-commit-picker-option"
+                data-current={option.id === target || undefined}
+                onSelect={() => {
+                  open = false;
+                  onSelect(option.id);
+                }}
+              >
+                <span role="gridcell" class="repository-commit-picker-selection"
+                  >{#if option.id === target}<CircleCheckIcon
+                      fill="var(--foreground)"
+                      stroke="var(--background)"
+                      aria-hidden="true"
+                    />{/if}</span
+                >
+                <RepositoryOperationOption
+                  target={option.id}
+                  operation={option.operation}
+                  {copyText}
+                />
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+      {#if missing}<CommandView.Footer>
+          <Button variant="ghost" size="sm" disabled={loading} onclick={onOpen}
+            >{loading
+              ? "Loading parent details…"
+              : "Retry parent details"}</Button
+          >
+        </CommandView.Footer>{/if}
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,14 @@
+import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+import "./repository-commit-picker.css";
+type $$ComponentProps = {
+    parents: readonly string[];
+    nodes: readonly LocalGraphOperationNode[];
+    target?: string;
+    loading?: boolean;
+    onOpen(): void;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryOperationParentPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationParentPicker = ReturnType<typeof RepositoryOperationParentPicker>;
+export default RepositoryOperationParentPicker;

package/dist/repository/components/RepositoryOperationPinPicker.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import HistoryIcon from "@lucide/svelte/icons/history";
+  import RepositoryPickerSearch from "./RepositoryPickerSearch.svelte";
+  import RepositoryOperationOption from "./RepositoryOperationOption.svelte";
+  import "./repository-commit-picker.css";
+  let {
+    operations,
+    operation,
+    nodes = [],
+    label,
+    onSelect,
+    copyText,
+  }: {
+    operations: readonly string[];
+    operation?: string;
+    nodes?: readonly LocalGraphOperationNode[];
+    label: string;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+  } = $props();
+  let open = $state(false),
+    query = $state(""),
+    highlighted = $state("");
+  let searchInput = $state<HTMLInputElement | null>(null);
+  const options = $derived(
+    operations.map((id) => {
+      const node = nodes.find((node) => node.id === id);
+      return {
+        id,
+        node,
+        search: [id, node?.description, node?.user, node?.host, node?.workspace]
+          .join(" ")
+          .toLocaleLowerCase(),
+      };
+    }),
+  );
+  const visible = $derived(
+    options.filter((option) =>
+      option.search.includes(query.trim().toLocaleLowerCase()),
+    ),
+  );
+  const short = (id: string) => `${id.slice(0, 8)}…${id.slice(-4)}`;
+</script>
+
+<Popover.Root
+  {open}
+  onOpenChange={(next) => {
+    open = next;
+    if (next) {
+      query = "";
+      highlighted = operation ?? operations[0] ?? "";
+    }
+  }}
+>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        variant="outline"
+        size="sm"
+        class="repository-review-operation-pin-trigger"
+        role="combobox"
+        aria-label={label}
+        title={operation
+          ? `Pinned operation ${operation}`
+          : "Select an operation"}
+        value={operation ?? ""}
+        disabled={!operations.length}
+      >
+        <HistoryIcon aria-hidden="true" /><span
+          >{operation ? short(operation) : "Operation"}</span
+        >
+        <ChevronDownIcon aria-hidden="true" />
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content
+    align="end"
+    class="repository-commit-picker repository-review-identifier-surface"
+    role="dialog"
+    aria-label="Select operation snapshot"
+    onOpenAutoFocus={(event) => {
+      event.preventDefault();
+      searchInput?.focus();
+    }}
+    style="--ui-popover-width:min(42rem,calc(100vw - 2rem));--ui-popover-padding:0;--ui-popover-gap:0"
+  >
+    <CommandView.Root
+      class="repository-review-picker-options"
+      bind:value={highlighted}
+      label="Select operation snapshot"
+      shouldFilter={false}
+      loop
+    >
+      <RepositoryPickerSearch
+        bind:inputRef={searchInput}
+        bind:query
+        placeholder="Find operation, author or ID"
+        label="Find operation"
+        closeLabel="Close operation picker"
+      />
+      <CommandView.List role="grid" aria-label="Repository operations">
+        {#if !visible.length}<CommandView.Empty role="row"
+            ><span role="gridcell">No matching operations</span
+            ></CommandView.Empty
+          >
+        {:else}<CommandView.Group role="rowgroup">
+            {#each visible as option (option.id)}
+              <CommandView.Item
+                role="row"
+                value={option.id}
+                aria-label={`Select operation ${option.id}`}
+                data-current={option.id === operation || undefined}
+                class="repository-commit-picker-option"
+                onSelect={() => {
+                  open = false;
+                  onSelect(option.id);
+                }}
+              >
+                <span
+                  role="gridcell"
+                  class="repository-commit-picker-selection"
+                >
+                  {#if option.id === operation}<CircleCheckIcon
+                      fill="var(--foreground)"
+                      stroke="var(--background)"
+                      aria-hidden="true"
+                    />{/if}
+                </span>
+                <RepositoryOperationOption
+                  target={option.id}
+                  operation={option.node}
+                  fallbackDescription={option.id === operation
+                    ? "Pinned operation"
+                    : "Repository operation"}
+                  {copyText}
+                />
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>
+
+<style>
+  :global(
+      .repository-review-operation-pin-trigger[data-ui-component="button"]
+    ) {
+    min-width: 0;
+    max-width: 10.5rem;
+    flex: 0 1 auto;
+    height: 1.75rem;
+    padding-inline: 0.45rem;
+    font-size: 0.75rem;
+    --ui-button-radius: var(--radius);
+  }
+  :global(.repository-review-operation-pin-trigger > span) {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+import "./repository-commit-picker.css";
+type $$ComponentProps = {
+    operations: readonly string[];
+    operation?: string;
+    nodes?: readonly LocalGraphOperationNode[];
+    label: string;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryOperationPinPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationPinPicker = ReturnType<typeof RepositoryOperationPinPicker>;
+export default RepositoryOperationPinPicker;