@lapis-notes/history 0.1.4 → 0.2.2

package/dist/repository/components/RepositoryRevisionActions.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import HistoryIcon from "@lucide/svelte/icons/history";
+  import GitMergeIcon from "@lucide/svelte/icons/git-merge";
+  import RotateCcwIcon from "@lucide/svelte/icons/rotate-ccw";
+  let {
+    expanded = false,
+    onEvolution,
+    onResolve,
+    onRestore,
+  }: {
+    expanded?: boolean;
+    onEvolution?(): void;
+    onResolve?(): void;
+    onRestore?(): void;
+  } = $props();
+</script>
+
+<div
+  class="repository-review-revision-actions"
+  role="toolbar"
+  aria-label="Selected revision actions"
+>
+  {#if onEvolution}<Button
+      size="xs"
+      variant="outline"
+      aria-label="Open Evo Log"
+      aria-expanded={expanded}
+      title="Show this commit's evolution history"
+      onclick={onEvolution}
+    >
+      <HistoryIcon data-icon="inline-start" aria-hidden="true" />Evo Log
+    </Button>{/if}
+  {#if onResolve}<Button size="xs" variant="outline" onclick={onResolve}>
+      <GitMergeIcon data-icon="inline-start" aria-hidden="true" />Resolve
+      conflicts
+    </Button>{/if}
+  {#if onRestore}<Button size="xs" variant="outline" onclick={onRestore}
+      ><RotateCcwIcon data-icon="inline-start" />Restore vault…</Button
+    >{/if}
+</div>
+
+<style>
+  .repository-review-revision-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    margin-block-start: -0.5rem;
+    border-bottom: 1px solid var(--border);
+    background: color-mix(in srgb, var(--foreground) 4%, var(--background));
+  }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    expanded?: boolean;
+    onEvolution?(): void;
+    onResolve?(): void;
+    onRestore?(): void;
+};
+declare const RepositoryRevisionActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryRevisionActions = ReturnType<typeof RepositoryRevisionActions>;
+export default RepositoryRevisionActions;

package/dist/repository/components/RepositoryRevisionFiles.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import RepositoryCommitPicker from "./RepositoryCommitPicker.svelte";
+  import { FileChangeStats } from "@lapismd/design-core/diff";
+  import { changeStats } from "../controllers/history-files.js";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { HistoryController } from "../controllers/history-controller.js";
+  import type { HistoryState } from "../controllers/history-state.js";
+  import { listingFiles } from "../controllers/history-files.js";
+  import RepositoryChangedFiles from "./RepositoryChangedFiles.svelte";
+  let {
+    state,
+    controller,
+    onOpenDiff,
+    copyText,
+    comparisonTargets,
+    comparisonLabel,
+    separateActions = false,
+  }: {
+    state: HistoryState;
+    controller: Pick<
+      HistoryController,
+      "loadParents" | "selectBase" | "selectPath" | "morePaths"
+    >;
+    onOpenDiff(): void;
+    copyText(value: string): Promise<void>;
+    comparisonTargets?: readonly string[];
+    comparisonLabel?: string;
+    separateActions?: boolean;
+  } = $props();
+  const files = $derived(listingFiles(state.paths, state.diff));
+  const targets = $derived(comparisonTargets ?? state.revision?.parents ?? []);
+</script>
+
+{#if targets.length}
+  <div class="revision-files" data-after-actions={separateActions || undefined}>
+    <RepositoryCommitPicker
+      {copyText}
+      parents={targets}
+      {comparisonLabel}
+      revisions={[...state.commits, ...state.parentCommits]}
+      target={state.base}
+      loading={state.busy}
+      onOpen={() => void controller.loadParents()}
+      onSelect={(id) => void controller.selectBase(id)}
+    >
+      {#snippet statistics()}
+        <div
+          class="comparison-statistics"
+          aria-label="Selected comparison statistics"
+        >
+          {#if state.base && state.pathsReady}<span
+              >{state.paths.length}{state.nextPath ? "+" : ""}
+              {state.paths.length === 1 && !state.nextPath ? "file" : "files"} in
+              selected comparison</span
+            >{/if}
+          {#if state.path && changeStats(state.diff)}<span
+              >Selected file: {state.path}
+              <FileChangeStats {...changeStats(state.diff)} /></span
+            >{/if}
+        </div>
+      {/snippet}
+    </RepositoryCommitPicker>
+    {#if state.base}
+      {#if state.pathsReady || state.busy}<RepositoryChangedFiles
+          {files}
+          selectedPath={state.path}
+          initialLoading={!state.pathsReady && state.busy}
+          loading={state.busy}
+          hasMore={!!state.nextPath}
+          onSelect={(path) => {
+            onOpenDiff();
+            void controller.selectPath(path);
+          }}
+          onMore={() => void controller.morePaths()}
+        />{/if}
+      {#if !state.pathsReady && !state.busy}<p role="status">
+          File changes are unavailable.
+        </p>
+        <Button size="sm" onclick={() => controller.selectBase(state.base!)}
+          >Retry comparison</Button
+        >
+      {:else if state.pathsReady && !state.paths.length && !state.busy}<p>
+          No changed files in this comparison.
+        </p>{/if}
+      {#if state.paths.length === 500}<p>
+          Showing the first 500 changed files.
+        </p>{/if}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .revision-files {
+    padding: 0 0.5rem 0.5rem;
+    font-size: 0.8125rem;
+  }
+  .revision-files[data-after-actions] {
+    padding-block-start: 0.5rem;
+  }
+  .comparison-statistics {
+    display: grid;
+    gap: 0.25rem;
+  }
+  .comparison-statistics > span {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { HistoryController } from "../controllers/history-controller.js";
+import type { HistoryState } from "../controllers/history-state.js";
+type $$ComponentProps = {
+    state: HistoryState;
+    controller: Pick<HistoryController, "loadParents" | "selectBase" | "selectPath" | "morePaths">;
+    onOpenDiff(): void;
+    copyText(value: string): Promise<void>;
+    comparisonTargets?: readonly string[];
+    comparisonLabel?: string;
+    separateActions?: boolean;
+};
+declare const RepositoryRevisionFiles: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryRevisionFiles = ReturnType<typeof RepositoryRevisionFiles>;
+export default RepositoryRevisionFiles;

package/dist/repository/components/RepositoryRevisionOption.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { LocalGraphCommit } from "@lapismd/jj-history";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../controllers/graph/repository-log-graph.js";
+  import RepositoryParentSummary from "./RepositoryParentSummary.svelte";
+  import RepositoryComparisonTime from "./RepositoryComparisonTime.svelte";
+  let {
+    target,
+    commit,
+    copyText,
+  }: {
+    target: string;
+    commit?: LocalGraphCommit;
+    copyText(value: string): Promise<void>;
+  } = $props();
+</script>
+
+<div role="gridcell" class="repository-review-revision-option">
+  <RepositoryParentSummary
+    {target}
+    author={commit?.author.name}
+    email={commit?.author.email}
+    description={commit?.description}
+  />
+  <span
+    class="repository-review-revision-ids"
+    role="presentation"
+    onpointerdown={(event) => event.stopPropagation()}
+    onkeydown={(event) => {
+      if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+    }}
+  >
+    <RepositoryIdentifiers
+      {copyText}
+      commitId={target}
+      changeId={commit ? encodeJjChangeId(commit.change_id) : ""}
+      placement="inline"
+    />
+  </span>
+  <RepositoryComparisonTime
+    timestamp={commit ? Number(commit.author.timestamp.millis) : undefined}
+  />
+</div>
+
+<style>
+  .repository-review-revision-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-revision-ids {
+    display: inline-flex;
+    flex: none;
+  }
+</style>

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

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

package/dist/repository/components/RepositoryRevisionPicker.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import type {
+    LocalGraphCommit,
+    LocalOperationChangesGroup,
+  } 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 GitBranchIcon from "@lucide/svelte/icons/git-branch";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import RepositoryPickerSearch from "./RepositoryPickerSearch.svelte";
+  import RepositoryRevisionOption from "./RepositoryRevisionOption.svelte";
+  import {
+    repositoryCommitSearch,
+    repositoryCommitTags,
+  } from "../controllers/tags.js";
+  import "./repository-commit-picker.css";
+  let {
+    groups,
+    selected,
+    commits,
+    disabled = false,
+    onSelect,
+    copyText,
+    onOpen,
+  }: {
+    groups: LocalOperationChangesGroup[];
+    selected?: string;
+    commits: LocalGraphCommit[];
+    disabled?: boolean;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+    onOpen?(): void;
+  } = $props();
+  let open = $state(false),
+    query = $state(""),
+    highlighted = $state("");
+  let searchInput = $state<HTMLInputElement | null>(null);
+  const options = $derived(
+    groups.map((group) => {
+      const commit = commits.find((commit) =>
+        [...group.after, ...group.before].includes(commit.id),
+      );
+      return {
+        group,
+        commit,
+        target: commit?.id ?? group.after[0] ?? group.before[0] ?? "",
+      };
+    }),
+  );
+  const visible = $derived(
+    options.filter((option) =>
+      `${option.group.change} ${repositoryCommitSearch(option.target, option.commit)}`
+        .toLocaleLowerCase()
+        .includes(query.trim().toLocaleLowerCase()),
+    ),
+  );
+  const preview = $derived(
+    options.find((option) => option.group.change === highlighted) ??
+      options.find((option) => option.group.change === selected),
+  );
+</script>
+
+<Popover.Root
+  {open}
+  onOpenChange={(next) => {
+    open = next;
+    if (next) {
+      onOpen?.();
+      query = "";
+      highlighted = selected ?? groups[0]?.change ?? "";
+    }
+  }}
+>
+  <Popover.Trigger
+    >{#snippet child({ props })}
+      <Button
+        {...props}
+        size="xs"
+        variant="outline"
+        aria-label="Choose changed revisions"
+        title="Changed revision"
+        {disabled}
+        ><GitBranchIcon
+          data-icon="inline-start"
+          aria-hidden="true"
+        />Revisions</Button
+      >
+    {/snippet}</Popover.Trigger
+  >
+  <Popover.Content
+    align="end"
+    class="repository-commit-picker repository-review-identifier-surface"
+    role="dialog"
+    aria-label="Choose changed revisions"
+    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 changed revision"
+      shouldFilter={false}
+    >
+      <RepositoryPickerSearch
+        bind:inputRef={searchInput}
+        bind:query
+        placeholder="Find revision, author or ID"
+        label="Find changed revision"
+        closeLabel="Close revision picker"
+      />
+      <CommandView.List
+        role="grid"
+        aria-label="Revisions in selected operation"
+      >
+        {#if !visible.length}<CommandView.Empty role="row"
+            ><span role="gridcell">No matching revisions</span
+            ></CommandView.Empty
+          >
+        {:else}<CommandView.Group role="rowgroup">
+            {#each visible as option (option.group.change)}
+              <CommandView.Item
+                role="row"
+                value={option.group.change}
+                data-change={option.group.change}
+                aria-label={`Choose ${option.commit?.description.split("\n")[0] ?? option.group.change} (${option.group.change})`}
+                class="repository-commit-picker-option"
+                onSelect={() => {
+                  open = false;
+                  onSelect(option.group.change);
+                }}
+              >
+                <span role="gridcell" class="repository-commit-picker-selection"
+                  >{#if option.group.change === selected}<CircleCheckIcon
+                      fill="var(--foreground)"
+                      stroke="var(--background)"
+                      aria-hidden="true"
+                    />{/if}</span
+                >
+                <RepositoryRevisionOption
+                  target={option.target}
+                  commit={option.commit}
+                  {copyText}
+                />
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+      <CommandView.Footer>
+        <TagList
+          tags={repositoryCommitTags(preview?.commit)}
+          label="Preview revision tags"
+        />
+        {#if preview}<span
+            >{preview.group.before.length} before · {preview.group.after.length}
+            after</span
+          >{/if}
+      </CommandView.Footer>
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,14 @@
+import type { LocalGraphCommit, LocalOperationChangesGroup } from "@lapismd/jj-history";
+import "./repository-commit-picker.css";
+type $$ComponentProps = {
+    groups: LocalOperationChangesGroup[];
+    selected?: string;
+    commits: LocalGraphCommit[];
+    disabled?: boolean;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+    onOpen?(): void;
+};
+declare const RepositoryRevisionPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryRevisionPicker = ReturnType<typeof RepositoryRevisionPicker>;
+export default RepositoryRevisionPicker;

package/dist/repository/components/RepositoryRevisions.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { HistoryController } from "../controllers/history-controller.js";
+  import { type HistoryState } from "../controllers/history-state.js";
+  let {
+    state,
+    controller,
+    copyText,
+    onOpenDiff,
+    onOpenEvolution,
+    onResolveConflicts,
+    onRestoreVault,
+    evolutionOpen = false,
+    graphRevisions,
+    graphLabel = "Revision graph",
+    comparisonTargets,
+    comparisonLabel,
+    comparisonUnavailable,
+  }: {
+    state: HistoryState;
+    controller: Pick<
+      HistoryController,
+      | "clearRevision"
+      | "selectRevision"
+      | "moreCommits"
+      | "loadParents"
+      | "selectBase"
+      | "selectPath"
+      | "morePaths"
+    >;
+    onOpenDiff(): void;
+    onOpenEvolution?(): void;
+    onResolveConflicts?(): void;
+    onRestoreVault?(): void;
+    evolutionOpen?: boolean;
+    graphRevisions?: import("../controllers/graph/model.js").RepositoryLogRevision[];
+    graphLabel?: string;
+    comparisonTargets?: readonly string[];
+    comparisonLabel?: string;
+    comparisonUnavailable?: string;
+    copyText(value: string): Promise<void>;
+  } = $props();
+  import RepositoryRevisionFiles from "./RepositoryRevisionFiles.svelte";
+  import RepositoryCommitMessage from "./RepositoryCommitMessage.svelte";
+  import RepositoryRevisionActions from "./RepositoryRevisionActions.svelte";
+  import RepositoryGraph from "./RepositoryGraph.svelte";
+  import { commitRows } from "../controllers/graph/model.js";
+  const hasMessageBody = $derived(
+    Boolean(state.revision?.description.split("\n").slice(1).join("\n").trim()),
+  );
+  const revisions = $derived(graphRevisions ?? commitRows(state.commits));
+</script>
+
+<div class="repository-revisions">
+  {#if !state.commitsReady && !state.busy}<p role="status">
+      Revisions are unavailable. Refresh to try again.
+    </p>
+  {:else if state.commitsReady && !state.commits.length && !state.busy}<p>
+      No revisions in this operation.
+    </p>{/if}
+  <RepositoryGraph
+    commits={state.commits}
+    {revisions}
+    {copyText}
+    selectedId={state.revision?.id}
+    label={graphLabel}
+    onSelect={(id) => {
+      const commit = state.commits.find((item) => item.id === id);
+      if (state.revision?.id === id) void controller.clearRevision();
+      else if (commit) void controller.selectRevision(commit);
+    }}
+  >
+    {#snippet selectedFiles()}
+      {#if onOpenEvolution || onRestoreVault || (state.revision?.conflicted && onResolveConflicts)}<RepositoryRevisionActions
+          expanded={evolutionOpen}
+          onEvolution={onOpenEvolution}
+          onResolve={state.revision?.conflicted
+            ? onResolveConflicts
+            : undefined}
+          onRestore={onRestoreVault}
+        />{/if}
+      <RepositoryCommitMessage
+        description={state.revision?.description ?? ""}
+      />
+      {#if !comparisonUnavailable}<RepositoryRevisionFiles
+          {copyText}
+          {state}
+          {controller}
+          {onOpenDiff}
+          {comparisonTargets}
+          {comparisonLabel}
+          separateActions={!hasMessageBody &&
+            Boolean(
+              onOpenEvolution ||
+                onRestoreVault ||
+                (state.revision?.conflicted && onResolveConflicts),
+            )}
+        />{/if}{/snippet}
+  </RepositoryGraph>
+  {#if state.next}<Button
+      size="sm"
+      disabled={state.busy}
+      onclick={() => controller.moreCommits()}>More revisions</Button
+    >{/if}
+  {#if state.commits.length === 200}<p>Showing the first 200 revisions.</p>{/if}
+</div>
+
+<style>
+  .repository-revisions {
+    min-width: 0;
+  }
+  p {
+    padding: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import type { HistoryController } from "../controllers/history-controller.js";
+import { type HistoryState } from "../controllers/history-state.js";
+type $$ComponentProps = {
+    state: HistoryState;
+    controller: Pick<HistoryController, "clearRevision" | "selectRevision" | "moreCommits" | "loadParents" | "selectBase" | "selectPath" | "morePaths">;
+    onOpenDiff(): void;
+    onOpenEvolution?(): void;
+    onResolveConflicts?(): void;
+    onRestoreVault?(): void;
+    evolutionOpen?: boolean;
+    graphRevisions?: import("../controllers/graph/model.js").RepositoryLogRevision[];
+    graphLabel?: string;
+    comparisonTargets?: readonly string[];
+    comparisonLabel?: string;
+    comparisonUnavailable?: string;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryRevisions: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryRevisions = ReturnType<typeof RepositoryRevisions>;
+export default RepositoryRevisions;

package/dist/repository/components/RepositoryShell.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import "./repository-column-chrome.css";
+  import "./repository-review-identifiers.css";
+  import "./repository-picker-options.css";
+  import { onDestroy, type Snippet } from "svelte";
+  import { AppShell, AppShellController } from "@lapismd/design-core/shell";
+  let { children, surface }: { children: Snippet; surface?: Snippet } =
+    $props();
+  const shell = new AppShellController();
+  onDestroy(() => void shell.dispose());
+</script>
+
+<div class="repository-shell">
+  <AppShell.Root
+    controller={shell}
+    displayMode="desktop"
+    desktopMinMainWidth={0}
+  >
+    <AppShell.Main>
+      <AppShell.Body layout="regions" element="div">
+        <div class="repository-body-frame">{@render children()}</div>
+      </AppShell.Body>
+    </AppShell.Main>
+    {@render surface?.()}
+  </AppShell.Root>
+</div>
+
+<style>
+  .repository-shell {
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    --ui-shell-height: 100%;
+  }
+  .repository-body-frame {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import "./repository-column-chrome.css";
+import "./repository-review-identifiers.css";
+import "./repository-picker-options.css";
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    surface?: Snippet;
+};
+declare const RepositoryShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryShell = ReturnType<typeof RepositoryShell>;
+export default RepositoryShell;