@lapis-notes/history 0.1.4 → 0.2.2

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;

package/dist/repository/components/RepositoryOperationRail.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import CornerLeftUpIcon from "@lucide/svelte/icons/corner-left-up";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  let {
+    operation,
+    onSelect,
+    copyText,
+  }: {
+    operation: LocalGraphOperationNode;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+  } = $props();
+</script>
+
+<section class="operation-rail" aria-label="Selected operation metadata">
+  <div class="operation-meta">
+    <span>Author:</span>
+    <RepositoryAuthorAvatar
+      name={operation.user}
+      handle={`${operation.user}@${operation.host}`}
+      size="md"
+    />
+    <span title={`${operation.user}@${operation.host}`}>{operation.user}</span>
+    <span aria-hidden="true">•</span>
+    <RelativeTime timestamp={Number(operation.end.millis)} />
+    <span aria-hidden="true">•</span>
+    <RepositoryIdentifiers
+      commitId={operation.id}
+      commitLabel="operation ID"
+      placement="inline"
+      {copyText}
+    />
+  </div>
+  <nav class="operation-parents" aria-label="Operation parents">
+    <Tooltip.Provider delayDuration={0}>
+      {#each operation.parents as parent (parent)}
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <button
+                {...props}
+                type="button"
+                class="parent-pill"
+                aria-label={`Inspect parent operation ${parent.slice(0, 8)}…${parent.slice(-4)} (${parent})`}
+                onclick={() => onSelect(parent)}
+              >
+                <CornerLeftUpIcon aria-hidden="true" />
+                <code>{parent.slice(0, 8)}…{parent.slice(-4)}</code>
+              </button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="top" sideOffset={6}
+            >Parent operation</Tooltip.Content
+          >
+        </Tooltip.Root>
+      {:else}<p>Root operation</p>{/each}
+    </Tooltip.Provider>
+  </nav>
+</section>
+
+<style>
+  .operation-rail {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    background: var(--background);
+  }
+  .operation-meta {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+  }
+  .operation-parents {
+    display: flex;
+    flex: none;
+    min-width: 0;
+    max-width: 50%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.35rem;
+    margin-inline-start: auto;
+  }
+  .parent-pill {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+    min-height: 1.65rem;
+    gap: 0.35rem;
+    padding: 0 0.45rem;
+    border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+    border-radius: 0.4rem;
+    color: var(--muted-foreground);
+    background: color-mix(in srgb, var(--foreground) 7%, transparent);
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  .parent-pill:hover,
+  .parent-pill:focus-visible {
+    border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
+    background: color-mix(in srgb, var(--foreground) 11%, transparent);
+    color: var(--foreground);
+  }
+  .parent-pill :global(svg) {
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+  }
+  .parent-pill code {
+    min-width: 0;
+    overflow: hidden;
+    font-family: var(--font-mono, monospace);
+    font-size: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  p {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--muted-foreground);
+  }
+</style>

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

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

package/dist/repository/components/RepositoryOperationTarget.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import { formatRelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  let {
+    target,
+    operation,
+  }: { target: string; operation?: LocalGraphOperationNode } = $props();
+  let now = $state(Date.now());
+  onMount(() => {
+    const timer = setInterval(() => {
+      now = Date.now();
+    }, 30_000);
+    return () => clearInterval(timer);
+  });
+  const time = $derived(
+    operation
+      ? formatRelativeTime(Number(operation.end.millis), { now })
+      : undefined,
+  );
+</script>
+
+<div class="operation-target">
+  <RepositoryAuthorAvatar name={operation?.user ?? "Unknown author"} />
+  <div class="operation-target-body">
+    <span class="operation-target-description" title={operation?.description}>
+      {operation?.description.split("\n")[0] ||
+        (target ? "Parent details unavailable" : "Choose a parent")}
+    </span>
+    <div class="operation-target-metadata">
+      {#if operation}<span title={`${operation.user}@${operation.host}`}
+          >{operation.user}@{operation.host}</span
+        >{/if}
+      {#if time}<time datetime={time.datetime} title={time.full}
+          >{time.text}</time
+        >{/if}
+      {#if operation?.workspace}<Badge variant="secondary"
+          >{operation.workspace}</Badge
+        >{/if}
+      {#if operation?.is_snapshot}<Badge variant="secondary">Snapshot</Badge
+        >{/if}
+    </div>
+    {#if target}<span
+        class="operation-target-id"
+        title={`Operation ID ${target}`}
+      >
+        <Badge variant="secondary">OP</Badge><code
+          >{target.slice(0, 12)}…{target.slice(-4)}</code
+        >
+      </span>{/if}
+  </div>
+</div>
+
+<style>
+  .operation-target {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    gap: 0.5rem;
+    text-align: start;
+    color: inherit;
+  }
+  .operation-target-body {
+    display: grid;
+    min-width: 0;
+    gap: 0.15rem;
+  }
+  .operation-target-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    font-weight: 550;
+  }
+  .operation-target-metadata {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+  }
+  .operation-target-metadata > span {
+    overflow-wrap: anywhere;
+  }
+  .operation-target-id {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.75rem;
+  }
+  time {
+    white-space: nowrap;
+  }
+</style>

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

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