@lapis-notes/history 0.1.4 → 0.2.2

package/dist/repository/components/RepositorySkeleton.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  let {
+    kind = "log",
+    label = "Loading repository history",
+  }: {
+    kind?:
+      | "log"
+      | "file-history"
+      | "files"
+      | "diff"
+      | "operation"
+      | "blame"
+      | "conflicts";
+    label?: string;
+  } = $props();
+  const widths = ["72%", "54%", "86%", "61%", "78%", "48%"];
+</script>
+
+<div
+  class="repository-skeleton"
+  data-skeleton={kind}
+  role="status"
+  aria-label={label}
+>
+  <span class="loading-label">{label}</span>
+  <div aria-hidden="true">
+    {#if kind === "operation"}
+      <div class="metadata">
+        <Skeleton style="width:75%;height:1.1rem" /><Skeleton
+          style="width:45%;height:0.75rem"
+        />
+      </div>
+    {/if}
+    {#if kind === "blame" || kind === "diff" || kind === "conflicts"}
+      <div
+        class="source-columns"
+        class:blame={kind === "blame"}
+        class:conflicts={kind === "conflicts"}
+      >
+        {#each Array(kind === "conflicts" ? 3 : 2) as _, column (column)}
+          <div class="source-pane">
+            {#each Array(12) as _, row (row)}
+              <div class="source-line">
+                <Skeleton style="width:1.25rem;height:0.625rem" />
+                <Skeleton
+                  style={`width:${widths[(row + column) % widths.length]};height:0.625rem`}
+                />
+              </div>
+            {/each}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      {#each Array(kind === "files" || kind === "operation" ? 4 : 6) as _, row (row)}
+        <div
+          class="skeleton-row"
+          class:compact={kind === "files" || kind === "operation"}
+        >
+          {#if kind === "log"}<Skeleton
+              style="width:1.75rem;height:1.75rem;border-radius:999px"
+            />
+          {:else}<Skeleton style="width:0.75rem;height:0.75rem" />{/if}
+          <div class="skeleton-content">
+            <Skeleton
+              style={`width:${widths[row % widths.length]};height:0.75rem`}
+            />
+            {#if kind !== "files"}<Skeleton
+                style="width:38%;height:0.625rem"
+              />{/if}
+          </div>
+          {#if kind === "log" || kind === "file-history"}<Skeleton
+              style="width:4.5rem;height:1.25rem"
+            />{/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .repository-skeleton {
+    padding: 0.75rem;
+    min-width: 0;
+  }
+  .loading-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .skeleton-row {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    min-height: 4.5rem;
+  }
+  .skeleton-row.compact {
+    min-height: 2rem;
+  }
+  .skeleton-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .source-columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+  }
+  .source-columns.blame {
+    grid-template-columns: min(22rem, 45%) minmax(0, 1fr);
+    gap: 0;
+  }
+  .source-columns.conflicts {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .source-pane + .source-pane {
+    border-left: 1px solid var(--border);
+    padding-left: 0.75rem;
+  }
+  .source-line {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    height: 28px;
+  }
+  .metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-block: 0.5rem 1rem;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    kind?: "log" | "file-history" | "files" | "diff" | "operation" | "blame" | "conflicts";
+    label?: string;
+};
+declare const RepositorySkeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositorySkeleton = ReturnType<typeof RepositorySkeleton>;
+export default RepositorySkeleton;

package/dist/repository/components/RepositorySourcePicker.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import GitBranch from "@lucide/svelte/icons/git-branch";
+  import History from "@lucide/svelte/icons/history";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import type {
+    HistorySourcePicker,
+    HistorySource,
+  } from "../controllers/history-source.js";
+  let { picker }: { picker: HistorySourcePicker } = $props();
+  let open = $state(false),
+    loading = $state(false),
+    original = $state(false);
+  const options = [
+    {
+      source: "backup" as HistorySource,
+      label: "Automatic vault history",
+      description: "Saved-file checkpoints managed by this plugin",
+    },
+    {
+      source: "original" as HistorySource,
+      label: "Original repository",
+      description: "Read existing JJ history without changing it",
+    },
+  ];
+  async function load() {
+    loading = true;
+    try {
+      original = (await picker.load()).original;
+    } catch (error) {
+      picker.report(error);
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<Popover.Root
+  bind:open
+  onOpenChange={(next) => {
+    if (next) void load();
+  }}
+>
+  <Popover.Trigger>
+    {#snippet child({ props })}<Button
+        {...props}
+        variant="ghost"
+        size="sm"
+        aria-label={`History source: ${picker.selected === "backup" ? "Backup" : "Original"}`}
+        title="Select history source"
+      >
+        {#if picker.selected === "backup"}<History
+            aria-hidden="true"
+          />{:else}<GitBranch aria-hidden="true" />{/if}
+        {picker.selected === "backup" ? "Backup" : "Original"}
+      </Button>{/snippet}
+  </Popover.Trigger>
+  <Popover.Content
+    align="end"
+    aria-label="Select history source"
+    style="--ui-popover-width:min(24rem,calc(100vw - 2rem));--ui-popover-padding:0"
+  >
+    <CommandView.Root label="Select history source" shouldFilter={false}>
+      <CommandView.List aria-label="History sources">
+        {#if loading}<div
+            class="loading"
+            role="status"
+            aria-label="Loading history sources"
+          >
+            <Skeleton style="height:2rem" /><Skeleton style="height:2rem" />
+          </div>
+        {:else}<CommandView.Group>
+            {#each options.filter((item) => item.source === "backup" || original || picker.selected === "original") as option (option.source)}
+              <CommandView.Item
+                value={option.source}
+                onSelect={() => {
+                  open = false;
+                  if (option.source !== picker.selected)
+                    picker.select(option.source);
+                }}
+              >
+                <CommandView.ItemIcon
+                  >{#if option.source === picker.selected}<CircleCheckIcon
+                      fill="var(--foreground)"
+                      stroke="var(--background)"
+                      aria-hidden="true"
+                    />{:else if option.source === "original"}<GitBranch
+                      aria-hidden="true"
+                    />{:else}<History
+                      aria-hidden="true"
+                    />{/if}</CommandView.ItemIcon
+                >
+                <CommandView.ItemLabel>{option.label}</CommandView.ItemLabel>
+                <CommandView.ItemDescription
+                  >{option.description}</CommandView.ItemDescription
+                >
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>
+
+<style>
+  .loading {
+    display: grid;
+    gap: 0.5rem;
+    padding: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { HistorySourcePicker } from "../controllers/history-source.js";
+type $$ComponentProps = {
+    picker: HistorySourcePicker;
+};
+declare const RepositorySourcePicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositorySourcePicker = ReturnType<typeof RepositorySourcePicker>;
+export default RepositorySourcePicker;

package/dist/repository/components/RepositoryUpstreamActions.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import CircleArrowDown from "@lucide/svelte/icons/circle-arrow-down";
+  import ArrowDown from "@lucide/svelte/icons/arrow-down";
+  import ArrowUp from "@lucide/svelte/icons/arrow-up";
+  import type { SyncController } from "../controllers/sync-controller.js";
+  import type { SyncState } from "../controllers/sync.js";
+  let {
+    controller,
+    unavailable = false,
+  }: { controller?: SyncController; unavailable?: boolean } = $props();
+  let state: SyncState = $state({
+    busy: false,
+    phase: "ready",
+    enabled: true,
+    recovery: false,
+  });
+  onMount(() => {
+    const stop = controller?.subscribe((next) => (state = next));
+    void controller?.run("status");
+    return stop;
+  });
+  const actions = [
+    { action: "fetch", label: "Fetch from upstream", Icon: CircleArrowDown },
+    { action: "pull", label: "Pull from upstream", Icon: ArrowDown },
+    { action: "push", label: "Push to upstream", Icon: ArrowUp },
+  ] as const;
+  const counts = $derived(state.upstream?.divergence);
+</script>
+
+<div
+  class="upstream-actions"
+  role="group"
+  aria-label="Upstream actions"
+  aria-busy={state.busy}
+>
+  <Tooltip.Provider>
+    {#each actions as action (action.action)}
+      {@const blocked =
+        unavailable ||
+        !controller ||
+        state.busy ||
+        !state.upstream?.configuration ||
+        (action.action !== "fetch" &&
+          (state.recovery || Boolean(state.proposal?.conflicts.length))) ||
+        (action.action === "push" && !state.upstream?.configuration?.canPush)}
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <span {...blocked ? props : {}} class="action-trigger">
+              <Button
+                {...!blocked ? props : {}}
+                variant="ghost"
+                size="sm"
+                class="upstream-action"
+                disabled={blocked}
+                onclick={(event) => {
+                  if (typeof props.onclick === "function") props.onclick(event);
+                  void controller?.run(action.action);
+                }}
+              >
+                <action.Icon data-icon="inline-start" aria-hidden="true" />
+                <span class="sr-label">{action.label}</span>
+                {#if action.action !== "fetch"}<span class="count"
+                    >{counts?.[
+                      action.action === "pull" ? "incoming" : "outgoing"
+                    ] ?? "—"}</span
+                  >{/if}
+              </Button>
+            </span>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content role="tooltip">
+          <strong>{action.label}</strong>
+          {#if action.action !== "fetch"}<span class="count-description"
+              >{counts
+                ? `${counts[action.action === "pull" ? "incoming" : "outgoing"]} ${action.action === "pull" ? "incoming" : "outgoing"} commits since the last fetch`
+                : "Commit count unavailable until upstream history is fetched"}</span
+            >{/if}
+        </Tooltip.Content>
+      </Tooltip.Root>
+    {/each}
+  </Tooltip.Provider>
+</div>
+
+<style>
+  .upstream-actions {
+    display: flex;
+    align-items: center;
+    margin-inline-start: auto;
+    gap: 0.125rem;
+    flex: none;
+  }
+  .action-trigger {
+    display: inline-flex;
+  }
+  .sr-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .upstream-actions :global(.upstream-action) {
+    height: 1.75rem;
+    padding: 0 0.35rem;
+    gap: 0.3rem;
+  }
+  .upstream-actions :global(.upstream-action svg) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .count {
+    font-variant-numeric: tabular-nums;
+    font-size: 0.75rem;
+  }
+  .count-description {
+    display: block;
+    font-size: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { SyncController } from "../controllers/sync-controller.js";
+type $$ComponentProps = {
+    controller?: SyncController;
+    unavailable?: boolean;
+};
+declare const RepositoryUpstreamActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryUpstreamActions = ReturnType<typeof RepositoryUpstreamActions>;
+export default RepositoryUpstreamActions;

package/dist/repository/components/RepositoryWorkingCopyStatus.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import RepositoryUpstreamActions from "./RepositoryUpstreamActions.svelte";
+  import type { SyncController } from "../controllers/sync-controller.js";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import { FileChangeStats } from "@lapismd/design-core/diff";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import GitCommitHorizontal from "@lucide/svelte/icons/git-commit-horizontal";
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../controllers/graph/repository-log-graph.js";
+  import type {
+    WorkingCopyController,
+    WorkingCopyState,
+  } from "../controllers/working-copy-controller.js";
+  let {
+    controller,
+    openRevision,
+    copyText,
+    upstream,
+  }: {
+    controller: WorkingCopyController;
+    openRevision(operation: string, revision: string): Promise<void>;
+    copyText(value: string): Promise<void>;
+    upstream?: SyncController;
+  } = $props();
+  let statusState: WorkingCopyState = $state({ busy: true, status: "loading" });
+  let open = $state(false);
+  onMount(() =>
+    controller.subscribe((next) => {
+      statusState = next;
+    }),
+  );
+  const value = $derived(statusState.value);
+  const summaryLabel = $derived(
+    value
+      ? `${value.files} ${value.files === 1 ? "file" : "files"} ${value.lines ? `+${value.lines.additions} -${value.lines.deletions}` : "line counts unavailable"}`
+      : statusState.status === "loading"
+        ? "Loading working copy"
+        : "Working copy unavailable",
+  );
+  async function inspect() {
+    if (!value) return;
+    open = false;
+    await openRevision(value.operation, value.revision);
+  }
+</script>
+
+<div
+  class="repository-working-status"
+  aria-label="Repository working copy"
+  aria-busy={statusState.busy}
+>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          type="button"
+          class="summary"
+          aria-label={`Working copy details: ${summaryLabel}`}
+        >
+          <GitCommitHorizontal aria-hidden="true" />
+          {#if value}
+            <span>{value.files} {value.files === 1 ? "file" : "files"}</span>
+            {#if value.lines}<FileChangeStats
+                additions={value.lines.additions}
+                deletions={value.lines.deletions}
+              />{:else}<span>line counts unavailable</span>{/if}
+          {:else if statusState.status === "loading"}
+            <Skeleton style="height:.75rem;width:5.5rem" />
+          {:else}<span>Working copy unavailable</span>{/if}
+        </button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Content
+      side="top"
+      align="end"
+      collisionPadding={8}
+      sideOffset={6}
+      style="width:min(26rem,calc(100vw - 1rem));padding:0"
+    >
+      <section class="working-card" aria-label="Working copy details">
+        <header>
+          <GitCommitHorizontal aria-hidden="true" /><strong>Working copy</strong
+          >{#if value}<span class="workspace">{value.workspace}</span>{/if}
+          <RepositoryUpstreamActions
+            controller={upstream}
+            unavailable={statusState.busy}
+          />
+        </header>
+        {#if value}
+          <button type="button" class="subject" onclick={inspect}
+            >{value.description.split(/\r?\n/u)[0] ||
+              "(no description)"}</button
+          >
+          <div class="identifiers">
+            <RepositoryIdentifiers
+              {copyText}
+              placement="inline"
+              commitId={value.revision}
+              changeId={encodeJjChangeId(value.changeId)}
+            />
+          </div>
+          <div class="author">
+            <RepositoryAuthorAvatar
+              name={value.author.name}
+              email={value.author.email}
+              size="xs"
+            /><span>{value.author.name}</span><RelativeTime
+              timestamp={Number(value.author.timestamp.millis)}
+            />
+          </div>
+          <div class="totals">
+            <span
+              >{value.files} changed {value.files === 1
+                ? "file"
+                : "files"}</span
+            >{#if value.lines}<FileChangeStats
+                additions={value.lines.additions}
+                deletions={value.lines.deletions}
+              />{:else}<span
+                >Line totals unavailable for {value.uncounted}
+                {value.uncounted === 1 ? "file" : "files"}.</span
+              >{/if}
+          </div>
+          <p>
+            Includes unsnapshotted files and saved editor changes compared with
+            the working-copy parent. Editor changes appear after saving.
+          </p>
+          <button type="button" class="open-log" onclick={inspect}
+            >Open in JJ Log</button
+          >
+        {:else if statusState.status === "loading"}
+          <div class="loading" role="status" aria-label="Reading working copy">
+            <Skeleton style="height:1rem;width:90%" /><Skeleton
+              style="height:1rem;width:65%"
+            /><Skeleton style="height:1rem;width:80%" />
+          </div>
+        {:else}<p>
+            Status is unavailable. Refresh to read the current working copy.
+          </p>{/if}
+      </section>
+    </Popover.Content>
+  </Popover.Root>
+  <button
+    type="button"
+    class="refresh"
+    aria-label="Refresh working copy status"
+    title="Refresh working copy status"
+    disabled={statusState.busy}
+    onclick={() => controller.refresh()}
+    ><RefreshCw aria-hidden="true" /></button
+  >
+</div>
+
+<style>
+  .repository-working-status {
+    display: inline-flex;
+    min-height: 1.25rem;
+    align-items: stretch;
+    gap: 0;
+    border: 0;
+    background: color-mix(
+      in oklab,
+      var(--ui-workspace-muted-foreground) 6%,
+      var(--ui-workspace-panel)
+    );
+    border-radius: var(--radius);
+    font: inherit;
+    color: inherit;
+  }
+  button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  button:hover {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+  button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 1px;
+  }
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0 0.4rem;
+    border-radius: var(--radius) 0 0 var(--radius);
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .summary :global(svg),
+  .refresh :global(svg),
+  header :global(svg) {
+    width: 0.8rem;
+    height: 0.8rem;
+    flex: none;
+  }
+  .refresh {
+    display: flex;
+    align-items: center;
+    padding: 0 0.35rem;
+    background: color-mix(
+      in oklab,
+      var(--ui-workspace-muted-foreground) 12%,
+      var(--ui-workspace-panel)
+    );
+    border-radius: 0 var(--radius) var(--radius) 0;
+  }
+  .refresh:hover:not(:disabled) {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+  .working-card {
+    font-family: var(--font-sans, sans-serif);
+    font-size: 0.8125rem;
+    color: var(--foreground);
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .workspace {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+  }
+  .subject {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    text-align: left;
+    font-weight: 600;
+    margin: 0.75rem 1rem;
+    padding: 0;
+  }
+  .subject:hover {
+    color: var(--primary);
+    background: transparent;
+    text-decoration: underline;
+  }
+  .identifiers,
+  .author,
+  .totals {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0.75rem 1rem;
+    flex-wrap: wrap;
+  }
+  .author {
+    color: var(--muted-foreground);
+  }
+  p {
+    margin: 0.75rem 1rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1.5;
+  }
+  .open-log {
+    border-top: 1px solid var(--border);
+    padding: 0.65rem 1rem;
+    width: 100%;
+    text-align: left;
+  }
+  .loading {
+    display: grid;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+</style>