@lapis-notes/history 0.1.4 → 0.2.0

package/dist/repository/components/RepositoryCommitPicker.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { LocalGraphCommit } 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 { TagList } from "@lapismd/design-core/shadcn/tag-list";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import RepositoryPickerSearch from "./RepositoryPickerSearch.svelte";
+  import RepositoryRevisionOption from "./RepositoryRevisionOption.svelte";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../controllers/graph/repository-log-graph.js";
+  import RepositoryParentSummary from "./RepositoryParentSummary.svelte";
+  import RepositoryComparisonBar from "./RepositoryComparisonBar.svelte";
+  import RepositoryComparisonTime from "./RepositoryComparisonTime.svelte";
+  import {
+    repositoryCommitSearch,
+    repositoryCommitTags,
+  } from "../controllers/tags.js";
+  import "./repository-commit-picker.css";
+  let {
+    parents,
+    revisions,
+    target,
+    loading = false,
+    onOpen,
+    onSelect,
+    statistics,
+    copyText,
+    comparisonLabel = "Comparison parent",
+  }: {
+    parents: readonly string[];
+    revisions: readonly LocalGraphCommit[];
+    target?: string;
+    loading?: boolean;
+    onOpen(): void;
+    onSelect(id: string): void;
+    statistics?: Snippet;
+    copyText(value: string): Promise<void>;
+    comparisonLabel?: string;
+  } = $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) => ({
+      id,
+      commit: revisions.find((commit) => commit.id === id),
+    })),
+  );
+  const selected = $derived(options.find((option) => option.id === target));
+  const preview = $derived(
+    options.find((option) => option.id === highlighted) ?? selected,
+  );
+  const visible = $derived(
+    options.filter((option) =>
+      repositoryCommitSearch(option.id, option.commit).includes(
+        query.trim().toLocaleLowerCase(),
+      ),
+    ),
+  );
+  const missing = $derived(options.some((option) => !option.commit));
+  function handleOpen(next: boolean) {
+    open = next;
+    if (next) {
+      query = "";
+      highlighted = target ?? parents[0] ?? "";
+      onOpen();
+    }
+  }
+  function choose(id: string) {
+    open = false;
+    onSelect(id);
+  }
+</script>
+
+<Popover.Root {open} onOpenChange={handleOpen}>
+  <RepositoryComparisonBar inset label={comparisonLabel}>
+    <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={comparisonLabel === "Previous version"
+              ? "Compare with previous version"
+              : "Compare 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?.commit?.author.name}
+          email={selected?.commit?.author.email}
+          description={selected?.commit?.description}
+        />
+        <span class="repository-review-parent-identifiers">
+          <RepositoryIdentifiers
+            {copyText}
+            commitId={target ?? ""}
+            changeId={selected?.commit
+              ? encodeJjChangeId(selected.commit.change_id)
+              : ""}
+            placement="inline"
+          />
+        </span>
+        <RepositoryComparisonTime
+          timestamp={selected?.commit
+            ? Number(selected.commit.author.timestamp.millis)
+            : undefined}
+        />
+      </div>
+    </div>
+  </RepositoryComparisonBar>
+  <Popover.Content
+    align="start"
+    sideOffset={6}
+    class="repository-commit-picker repository-review-identifier-surface"
+    role="dialog"
+    aria-label={`Choose ${comparisonLabel.toLocaleLowerCase()}`}
+    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 ${comparisonLabel.toLocaleLowerCase()}`}
+      shouldFilter={false}
+    >
+      <RepositoryPickerSearch
+        grid
+        bind:inputRef={searchInput}
+        bind:query
+        placeholder="Find commit"
+        label={`Select ${comparisonLabel.toLocaleLowerCase()}`}
+        closeLabel="Close commit selector"
+      />
+      <CommandView.List role="grid">
+        {#if !visible.length}<CommandView.Empty role="row"
+            ><span role="gridcell">No matching commits</span></CommandView.Empty
+          >
+        {:else}<CommandView.Group role="rowgroup">
+            {#each visible as option (option.id)}
+              <CommandView.Item
+                role="row"
+                value={option.id}
+                keywords={[repositoryCommitSearch(option.id, option.commit)]}
+                aria-label={`Select ${comparisonLabel.toLocaleLowerCase()} ${option.commit?.description.split("\n")[0] || "Unknown version"} (${option.id})`}
+                data-commit={option.id}
+                class="repository-commit-picker-option"
+                data-current={option.id === target || undefined}
+                onSelect={() => choose(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
+                >
+                <RepositoryRevisionOption
+                  target={option.id}
+                  commit={option.commit}
+                  {copyText}
+                />
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+      <CommandView.Footer>
+        <section aria-label="Commit tag preview" data-commit={preview?.id}>
+          <TagList
+            tags={repositoryCommitTags(preview?.commit)}
+            label="Preview commit tags"
+          />
+        </section>
+        {#if statistics}{@render statistics()}{/if}
+        {#if missing}<Button
+            variant="ghost"
+            size="sm"
+            disabled={loading}
+            onclick={onOpen}
+            >{loading
+              ? "Loading parent details…"
+              : "Retry parent details"}</Button
+          >{/if}
+      </CommandView.Footer>
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>

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

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

package/dist/repository/components/RepositoryComparisonBar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  let {
+    children,
+    inset = false,
+    label = "Comparison parent",
+  }: { children: Snippet; inset?: boolean; label?: string } = $props();
+</script>
+
+<div class="repository-review-comparison-bar" data-inset={inset || undefined}>
+  <span class="repository-review-comparison-label">{label}</span>
+  {@render children()}
+</div>
+
+<style>
+  .repository-review-comparison-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    padding: 0.25rem 0.75rem;
+    padding-inline-end: 0.5rem;
+    border-block-start: 1px solid var(--border);
+    background: color-mix(in srgb, var(--foreground) 4%, var(--background));
+    font-size: 0.75rem;
+  }
+  .repository-review-comparison-bar[data-inset] {
+    margin: -0.5rem -0.5rem 0.5rem;
+    border-block-start: 0;
+  }
+  .repository-review-comparison-label {
+    flex: none;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+  }
+  .repository-review-comparison-bar
+    :global(.repository-review-parent-selector) {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+  .repository-review-comparison-bar :global(.repository-review-parent-trigger) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: flex-end;
+    padding-inline: 0.375rem;
+  }
+  .repository-review-comparison-bar :global(.repository-review-parent-value) {
+    position: relative;
+    display: flex;
+    min-width: 0;
+    min-height: 2.25rem;
+    box-sizing: border-box;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 1.625rem 0.375rem 0.375rem;
+    pointer-events: none;
+  }
+  .repository-review-comparison-bar
+    :global(.repository-review-parent-identifiers) {
+    display: inline-flex;
+    flex: none;
+    pointer-events: auto;
+  }
+  .repository-review-comparison-bar :global(.repository-identifiers) {
+    flex: none;
+    flex-wrap: nowrap;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    inset?: boolean;
+    label?: string;
+};
+declare const RepositoryComparisonBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryComparisonBar = ReturnType<typeof RepositoryComparisonBar>;
+export default RepositoryComparisonBar;

package/dist/repository/components/RepositoryComparisonTime.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { formatRelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  let { timestamp }: { timestamp?: number } = $props();
+  let now = $state(Date.now());
+  onMount(() => {
+    const timer = setInterval(() => (now = Date.now()), 30_000);
+    return () => clearInterval(timer);
+  });
+  const time = $derived(
+    timestamp === undefined
+      ? undefined
+      : formatRelativeTime(timestamp, { now }),
+  );
+</script>
+
+{#if time}<time datetime={time.datetime} title={time.full}>{time.text}</time
+  >{/if}
+
+<style>
+  time {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    flex: none;
+    margin-inline-start: auto;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    timestamp?: number;
+};
+declare const RepositoryComparisonTime: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryComparisonTime = ReturnType<typeof RepositoryComparisonTime>;
+export default RepositoryComparisonTime;

package/dist/repository/components/RepositoryDiff.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { FileDiff, type FileDiffViewMode } from "@lapismd/design-core/diff";
+  import type { LocalFileDiffChange } from "@lapismd/jj-history";
+  import { diffText } from "../controllers/history-state.js";
+  let {
+    change,
+    viewMode = "unified",
+    wrap = false,
+    compact = false,
+  }: {
+    change: LocalFileDiffChange;
+    viewMode?: FileDiffViewMode;
+    wrap?: boolean;
+    compact?: boolean;
+  } = $props();
+  const content = $derived(diffText(change));
+</script>
+
+<section
+  class="repository-diff"
+  data-compact={compact || undefined}
+  data-view-mode={viewMode}
+  aria-label={`Changes to ${change.path}`}
+>
+  {#if "unavailable" in content}<p role="status">
+      Preview unavailable: {content.unavailable}.
+    </p>
+  {:else}<FileDiff
+      path={change.path}
+      oldText={content.oldText}
+      newText={content.newText}
+      {viewMode}
+      {wrap}
+    />{/if}
+</section>
+
+<style>
+  .repository-diff {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 16rem;
+  }
+  .repository-diff[data-view-mode="split"] {
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0;
+  }
+  .repository-diff[data-compact] {
+    min-height: 0;
+  }
+  p {
+    padding: 1rem;
+    color: var(--muted-foreground);
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import { type FileDiffViewMode } from "@lapismd/design-core/diff";
+import type { LocalFileDiffChange } from "@lapismd/jj-history";
+type $$ComponentProps = {
+    change: LocalFileDiffChange;
+    viewMode?: FileDiffViewMode;
+    wrap?: boolean;
+    compact?: boolean;
+};
+declare const RepositoryDiff: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryDiff = ReturnType<typeof RepositoryDiff>;
+export default RepositoryDiff;

package/dist/repository/components/RepositoryDiffColumn.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import RepositoryFileTitle from "./RepositoryFileTitle.svelte";
+  import {
+    FileChangeStats,
+    type FileDiffViewMode,
+  } from "@lapismd/design-core/diff";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { HistoryState } from "../controllers/history-state.js";
+
+  import { changeStats } from "../controllers/history-files.js";
+  import RepositoryDiffControls from "./RepositoryDiffControls.svelte";
+  import RepositoryDiff from "./RepositoryDiff.svelte";
+  import RotateCcwIcon from "@lucide/svelte/icons/rotate-ccw";
+  let {
+    state: snapshot,
+    controller,
+    columnId = "diff",
+    label = "Revision changes",
+    closeLabel = "Close Diff column",
+    onRestore,
+  }: {
+    state: Pick<HistoryState, "path" | "diff" | "busy">;
+    controller: { selectPath(path: string): Promise<void> };
+    columnId?: string;
+    label?: string;
+    closeLabel?: string;
+    onRestore?(): void;
+  } = $props();
+  let viewMode = $state<FileDiffViewMode>("split");
+  let wrap = $state(false);
+  const stats = $derived(changeStats(snapshot.diff));
+</script>
+
+<ColumnCanvas.Column id={columnId} columnTitle="Diff" aria-label={label}>
+  <ColumnCanvas.Header>
+    <ColumnCanvas.Title
+      ><RepositoryFileTitle path={snapshot.path} /></ColumnCanvas.Title
+    >
+    <ColumnCanvas.HeaderActions class="repository-review-column-actions">
+      {#if stats}<FileChangeStats {...stats} showZero />{/if}
+      {#if onRestore}<Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Restore this file version"
+          title="Restore this file version"
+          disabled={snapshot.busy}
+          onclick={onRestore}><RotateCcwIcon /></Button
+        >{/if}
+      <RepositoryDiffControls bind:viewMode bind:wrap />
+      <ColumnCanvas.Close aria-label={closeLabel} />
+    </ColumnCanvas.HeaderActions>
+  </ColumnCanvas.Header>
+  <ColumnCanvas.Body orientation="both">
+    {#if snapshot.diff}<RepositoryDiff
+        change={snapshot.diff}
+        {viewMode}
+        {wrap}
+      />
+    {:else if snapshot.path}{#if snapshot.busy}<RepositorySkeleton
+          kind="diff"
+          label="Loading file changes…"
+        />{:else}<p role="status">File preview is unavailable.</p>
+        <Button size="sm" onclick={() => controller.selectPath(snapshot.path!)}
+          >Retry preview</Button
+        >{/if}
+    {:else}<p role="status">Select a changed file to preview the diff.</p>{/if}
+  </ColumnCanvas.Body>
+</ColumnCanvas.Column>
+
+<style>
+  p {
+    padding: 1rem;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { HistoryState } from "../controllers/history-state.js";
+type $$ComponentProps = {
+    state: Pick<HistoryState, "path" | "diff" | "busy">;
+    controller: {
+        selectPath(path: string): Promise<void>;
+    };
+    columnId?: string;
+    label?: string;
+    closeLabel?: string;
+    onRestore?(): void;
+};
+declare const RepositoryDiffColumn: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryDiffColumn = ReturnType<typeof RepositoryDiffColumn>;
+export default RepositoryDiffColumn;

package/dist/repository/components/RepositoryDiffControls.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import type { FileDiffViewMode } from "@lapismd/design-core/diff";
+  import { Toggle } from "@lapismd/design-core/shadcn/toggle";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+  import Columns2 from "@lucide/svelte/icons/columns-2";
+  import Rows2 from "@lucide/svelte/icons/rows-2";
+  import WrapText from "@lucide/svelte/icons/wrap-text";
+  let {
+    viewMode = $bindable("unified"),
+    wrap = $bindable(false),
+  }: { viewMode?: FileDiffViewMode; wrap?: boolean } = $props();
+</script>
+
+<div class="repository-review-diff-controls">
+  <span class="repository-review-diff-chrome">
+    <ToggleGroup.Root
+      type="single"
+      value={viewMode}
+      onValueChange={(value) => {
+        if (value === "unified" || value === "split") viewMode = value;
+      }}
+      variant="outline"
+      size="sm"
+      class="repository-review-diff-group"
+      aria-label="Diff layout"
+    >
+      <ToggleGroup.Item
+        value="unified"
+        onclick={(event) => {
+          if (viewMode === "unified") event.preventDefault();
+        }}
+        class="repository-review-diff-control"
+        aria-label="Unified"
+        title="Show unified diff"
+        ><Rows2 class="repository-review-diff-icon" /></ToggleGroup.Item
+      >
+      <ToggleGroup.Item
+        value="split"
+        onclick={(event) => {
+          if (viewMode === "split") event.preventDefault();
+        }}
+        class="repository-review-diff-control"
+        aria-label="Split"
+        title="Show split diff"
+        ><Columns2 class="repository-review-diff-icon" /></ToggleGroup.Item
+      >
+    </ToggleGroup.Root>
+  </span>
+  <span class="repository-review-diff-chrome">
+    <Toggle
+      bind:pressed={wrap}
+      variant="outline"
+      size="sm"
+      class="repository-review-diff-control"
+      aria-label="Wrap text"
+      title="Wrap text"><WrapText class="repository-review-diff-icon" /></Toggle
+    >
+  </span>
+</div>
+
+<style>
+  .repository-review-diff-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .repository-review-diff-chrome {
+    display: inline-flex;
+    align-items: stretch;
+    width: fit-content;
+    height: 1.375rem;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) * 0.6);
+    background: var(--background);
+    box-shadow: none;
+  }
+  .repository-review-diff-chrome :global(.repository-review-diff-group) {
+    height: 100%;
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .repository-review-diff-chrome :global(.repository-review-diff-control) {
+    box-sizing: border-box;
+    width: 1.375rem;
+    min-width: 1.375rem;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .repository-review-diff-chrome
+    :global(.repository-review-diff-control + .repository-review-diff-control) {
+    border-left: 1px solid var(--border);
+  }
+  .repository-review-diff-controls
+    .repository-review-diff-chrome
+    :global(.repository-review-diff-control .repository-review-diff-icon) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .repository-review-diff-chrome
+    :global(.repository-review-diff-control[data-state="on"]) {
+    background: color-mix(in srgb, var(--foreground) 12%, var(--background));
+    color: inherit;
+  }
+  .repository-review-diff-chrome
+    :global(
+      .repository-review-diff-control:not(:disabled):is(:hover, :focus-visible)
+    ) {
+    background: var(--repository-review-column-action-hover);
+    color: var(--foreground);
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { FileDiffViewMode } from "@lapismd/design-core/diff";
+type $$ComponentProps = {
+    viewMode?: FileDiffViewMode;
+    wrap?: boolean;
+};
+declare const RepositoryDiffControls: import("svelte").Component<$$ComponentProps, {}, "wrap" | "viewMode">;
+type RepositoryDiffControls = ReturnType<typeof RepositoryDiffControls>;
+export default RepositoryDiffControls;