@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/conflicts/RepositoryConflictSurface.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+  import {
+    conflictMenuContext,
+    type ConflictMenuState,
+  } from "../../controllers/conflict-menu.js";
+  import { AppShell } from "@lapismd/design-core/shell";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import XIcon from "@lucide/svelte/icons/x";
+  import RepositorySidebarToggleIcon from "./RepositorySidebarToggleIcon.svelte";
+  import RepositoryConflictBody from "./RepositoryConflictBody.svelte";
+  import "./repository-conflicts.css";
+  let bodyHeight = $state(0);
+  function measure(node: HTMLDivElement) {
+    const observer = new ResizeObserver(() => {
+      bodyHeight = node.clientHeight;
+    });
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+  }
+  let {
+    open,
+    label,
+    returnFocus,
+    busy,
+    dismissOnEscape = true,
+    locked,
+    browserOpen = $bindable(true),
+    compact,
+    files,
+    activePath,
+    onSelect,
+    onClose,
+    actions,
+    children,
+  }: {
+    open: boolean;
+    label: string;
+    returnFocus?: HTMLElement | null;
+    busy: boolean;
+    dismissOnEscape?: boolean;
+    locked: boolean;
+    browserOpen?: boolean;
+    compact: boolean;
+    files: readonly { path: string }[];
+    activePath: string;
+    onSelect: (path: string) => void;
+    onClose: () => void;
+    actions: Snippet;
+    children: Snippet;
+  } = $props();
+  const menus = new Set<symbol>();
+  let menuCount = $state(0);
+  setContext<ConflictMenuState>(conflictMenuContext, (id, next) => {
+    if (next) menus.add(id);
+    else menus.delete(id);
+    menuCount = menus.size;
+  });
+</script>
+
+<AppShell.SurfaceLayer
+  {open}
+  {returnFocus}
+  {label}
+  coverPanelIds={["right"]}
+  mobilePlacement="root"
+  dismissOnEscape={!busy && dismissOnEscape && menuCount === 0}
+  onDismiss={onClose}
+  class="store-conflict-editor"
+>
+  <AppShell.SurfaceLayer.Header class="store-conflict-editor__header">
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={`${browserOpen ? "Hide" : "Show"} conflict file browser`}
+      title={`${browserOpen ? "Hide" : "Show"} conflict file browser`}
+      aria-expanded={browserOpen}
+      aria-controls="conflict-file-browser"
+      onclick={() => (browserOpen = !browserOpen)}
+      ><RepositorySidebarToggleIcon expanded={browserOpen} /></Button
+    >
+    <h1 class="store-conflict-editor__title">Resolve conflicts</h1>
+    {@render actions()}
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label="Close conflict editor"
+      disabled={busy}
+      onclick={onClose}><XIcon aria-hidden="true" /></Button
+    >
+  </AppShell.SurfaceLayer.Header>
+  <div class="store-conflict-editor__body" use:measure>
+    <RepositoryConflictBody
+      {files}
+      height={bodyHeight}
+      {activePath}
+      {browserOpen}
+      {compact}
+      {locked}
+      {onSelect}>{@render children()}</RepositoryConflictBody
+    >
+  </div>
+</AppShell.SurfaceLayer>

package/dist/repository/components/conflicts/RepositoryConflictSurface.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Snippet } from "svelte";
+import "./repository-conflicts.css";
+type $$ComponentProps = {
+    open: boolean;
+    label: string;
+    returnFocus?: HTMLElement | null;
+    busy: boolean;
+    dismissOnEscape?: boolean;
+    locked: boolean;
+    browserOpen?: boolean;
+    compact: boolean;
+    files: readonly {
+        path: string;
+    }[];
+    activePath: string;
+    onSelect: (path: string) => void;
+    onClose: () => void;
+    actions: Snippet;
+    children: Snippet;
+};
+declare const RepositoryConflictSurface: import("svelte").Component<$$ComponentProps, {}, "browserOpen">;
+type RepositoryConflictSurface = ReturnType<typeof RepositoryConflictSurface>;
+export default RepositoryConflictSurface;

package/dist/repository/components/conflicts/RepositoryConflictText.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { getContext, onDestroy, type ComponentProps } from "svelte";
+  import { MergeEditor } from "@lapismd/design-core/diff";
+  import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import EllipsisVertical from "@lucide/svelte/icons/ellipsis-vertical";
+  import {
+    conflictMenuContext,
+    type ConflictMenuState,
+  } from "../../controllers/conflict-menu.js";
+  let {
+    path,
+    headerActions: hostActions,
+    ...props
+  }: ComponentProps<typeof MergeEditor> = $props();
+  let settings = $state({
+    wrap: false,
+    syncHorizontalScroll: true,
+    ignoreWhitespace: false,
+    ignoreCase: false,
+  });
+  const ignoreWhitespace = $derived(
+    props.ignoreWhitespace ?? settings.ignoreWhitespace,
+  );
+  const ignoreCase = $derived(props.ignoreCase ?? settings.ignoreCase);
+  const menuId = Symbol("merge-settings");
+  const nestedMenu = getContext<ConflictMenuState | undefined>(
+    conflictMenuContext,
+  );
+  function update(patch: Partial<typeof settings>) {
+    settings = { ...settings, ...patch };
+  }
+  function menuOpen(next: boolean) {
+    if (next) nestedMenu?.(menuId, true);
+    else queueMicrotask(() => nestedMenu?.(menuId, false));
+  }
+  onDestroy(() => nestedMenu?.(menuId, false));
+</script>
+
+<MergeEditor
+  {path}
+  language={path?.endsWith(".md") ? "markdown" : null}
+  baseLabel="Resolved"
+  editableSides={["base"]}
+  {...props}
+  wrap={props.wrap ?? settings.wrap}
+  syncHorizontalScroll={props.syncHorizontalScroll ??
+    settings.syncHorizontalScroll}
+  {ignoreWhitespace}
+  {ignoreCase}
+  onResolvedChange={(change) =>
+    props.onResolvedChange?.({
+      ...change,
+      // Comparison filters cannot certify that a native conflict was resolved.
+      resolved: change.resolved && !ignoreWhitespace && !ignoreCase,
+    })}
+>
+  {#snippet headerActions()}
+    {@render hostActions?.()}
+    <DropdownMenu.Root onOpenChange={menuOpen}>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props: triggerProps })}
+          <Button
+            {...triggerProps}
+            variant="ghost"
+            size="icon-xs"
+            aria-label="Merge editor settings"
+            title="Merge editor settings"
+          >
+            <EllipsisVertical aria-hidden="true" />
+          </Button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end" style="min-width: 14rem">
+        <DropdownMenu.Group>
+          <DropdownMenu.CheckboxItem
+            checked={props.wrap ?? settings.wrap}
+            onCheckedChange={(wrap) => update({ wrap })}
+            closeOnSelect={false}>Wrap lines</DropdownMenu.CheckboxItem
+          >
+          <DropdownMenu.CheckboxItem
+            checked={props.syncHorizontalScroll ??
+              settings.syncHorizontalScroll}
+            onCheckedChange={(syncHorizontalScroll) =>
+              update({ syncHorizontalScroll })}
+            closeOnSelect={false}
+            >Sync horizontal scroll</DropdownMenu.CheckboxItem
+          >
+          <DropdownMenu.Separator />
+          <DropdownMenu.CheckboxItem
+            checked={ignoreWhitespace}
+            onCheckedChange={(ignoreWhitespace) => update({ ignoreWhitespace })}
+            closeOnSelect={false}>Ignore whitespace</DropdownMenu.CheckboxItem
+          >
+          <DropdownMenu.CheckboxItem
+            checked={ignoreCase}
+            onCheckedChange={(ignoreCase) => update({ ignoreCase })}
+            closeOnSelect={false}>Ignore case</DropdownMenu.CheckboxItem
+          >
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {/snippet}
+</MergeEditor>

package/dist/repository/components/conflicts/RepositoryConflictText.svelte.d.ts

@@ -0,0 +1,26 @@
+declare const RepositoryConflictText: import("svelte").Component<{
+    mode?: import("@lapismd/design-core/diff").MergeEditorMode;
+    left: string;
+    right: string;
+    base?: string;
+    leftLabel?: string;
+    baseLabel?: string;
+    rightLabel?: string;
+    path?: string;
+    headerCenter?: import("svelte").Snippet;
+    headerActions?: import("svelte").Snippet;
+    language?: string | null;
+    readOnly?: boolean;
+    editable?: boolean;
+    editableSides?: readonly import("@lapismd/design-core/diff").MergeSide[];
+    ignoreWhitespace?: boolean;
+    ignoreCase?: boolean;
+    syncHorizontalScroll?: boolean;
+    wrap?: boolean;
+    onLeftChange?: (content: string) => void;
+    onBaseChange?: (content: string) => void;
+    onRightChange?: (content: string) => void;
+    onResolvedChange?: (state: import("@lapismd/design-core/diff").MergeResolvedChange) => void;
+}, {}, "">;
+type RepositoryConflictText = ReturnType<typeof RepositoryConflictText>;
+export default RepositoryConflictText;

package/dist/repository/components/conflicts/RepositorySidebarToggleIcon.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  let {
+    side = "left",
+    expanded = true,
+  }: {
+    side?: "left" | "right";
+    expanded?: boolean;
+  } = $props();
+</script>
+
+<svg
+  class="community-sidebar-toggle-icon"
+  data-ui-part="sidebar-toggle-icon"
+  data-side={side}
+  data-expanded={expanded}
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <rect x="1" y="2" width="22" height="20" rx="4"></rect>
+  <g transform={side === "right" ? "translate(24 0) scale(-1 1)" : undefined}>
+    <rect
+      class="community-sidebar-toggle-icon__indicator"
+      x="4"
+      y="5"
+      width={expanded ? 6 : 2}
+      height="14"
+      rx="2"
+      fill="currentColor"
+      data-ui-part="sidebar-toggle-indicator"
+    ></rect>
+  </g>
+</svg>
+
+<style>
+  .community-sidebar-toggle-icon__indicator {
+    width: 2px;
+    transition: width 140ms ease;
+  }
+
+  .community-sidebar-toggle-icon[data-expanded="true"]
+    .community-sidebar-toggle-icon__indicator {
+    width: 6px;
+  }
+</style>

package/dist/repository/components/conflicts/RepositorySidebarToggleIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    side?: "left" | "right";
+    expanded?: boolean;
+};
+declare const RepositorySidebarToggleIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositorySidebarToggleIcon = ReturnType<typeof RepositorySidebarToggleIcon>;
+export default RepositorySidebarToggleIcon;

package/dist/repository/components/conflicts/repository-conflict-file-tree.css

@@ -0,0 +1,73 @@
+.community-projects__file-tree {
+  --ui-diff-row-hover: color-mix(
+    in srgb,
+    var(--foreground) 7%,
+    var(--background)
+  );
+  --ui-diff-selected: color-mix(
+    in srgb,
+    var(--foreground) 12%,
+    var(--background)
+  );
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 0 0.5rem 0.5rem;
+  background: var(--background);
+}
+
+.community-projects__file-tree-actions {
+  display: flex;
+  height: var(--community-projects-file-header-height, 2.25rem);
+  box-sizing: border-box;
+  align-items: center;
+  gap: 0.45rem;
+  margin-inline: -0.5rem;
+  padding: 0.2rem 0.5rem 0.2rem 1rem;
+  padding-inline-start: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.community-projects__file-tree-title {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  color: var(--foreground);
+  font-size: var(--community-text-secondary);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.community-projects__file-tree-count {
+  display: inline-flex;
+  min-width: 1.25rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0.05rem 0.35rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--foreground) 7%, var(--background));
+  color: var(--foreground);
+  font-size: var(--community-text-secondary);
+  font-weight: 600;
+  line-height: 1rem;
+}
+
+.review-conflict-file-list {
+  flex: 1;
+  min-height: 0;
+  padding-block-start: 0.35rem;
+}
+.review-conflict-file-label {
+  flex: 1;
+  min-width: 0;
+  line-height: 1.5rem;
+  font-size: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/repository/components/conflicts/repository-conflicts.css

@@ -0,0 +1,125 @@
+/* Adapted from jj-store's conflict editor; all selectors target owned hosts. */
+.store-conflict-editor {
+  --ui-shell-surface-layer-inline-end-inset: 0px;
+}
+.store-conflict-editor__header {
+  padding-inline-start: 0.5rem;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.store-conflict-editor__title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.store-conflict-editor__body-shell {
+  --ui-shell-height: 100%;
+  --ui-shell-main-block-inset: 0px;
+  --ui-shell-main-radius: 0px;
+  --ui-shell-main-shadow: none;
+  --ui-shell-main-border: 0;
+}
+.store-conflict-editor__body {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.store-conflict-editor__file-browser {
+  height: 100%;
+}
+.store-conflict-editor__content-body {
+  display: flex;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+.store-conflict-editor__content[hidden] {
+  display: none;
+}
+.store-conflict-editor__path,
+.store-conflict-path {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.store-conflict-editor__path[hidden] {
+  display: none;
+}
+.store-conflict-path__editor {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+}
+.store-conflict-path__unsupported {
+  display: grid;
+  align-content: start;
+  gap: 0.75rem;
+  flex: 1;
+}
+.store-conflict-path__terms,
+.store-conflict-editor__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.store-conflict-editor__staged {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+.store-conflict-path__error,
+.store-conflict-editor__error {
+  margin: 0;
+  color: var(--destructive);
+  font-size: 0.8125rem;
+}
+@media (max-width: 700px) {
+  .store-conflict-editor__header {
+    padding-inline: 0.5rem;
+    gap: 0.25rem;
+  }
+  .store-conflict-editor__actions {
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+  }
+  .store-conflict-editor__action-label,
+  .store-conflict-editor__staged {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+.store-conflict-editor {
+  --community-text-secondary: 0.75rem;
+}
+.community-projects__file-tree-region {
+  background: var(--background);
+}
+.store-conflict-preview {
+  padding: 1rem;
+  font-size: 0.8125rem;
+}
+.store-conflict-preview h2 {
+  margin: 0;
+  font-size: 0.875rem;
+}
+.store-conflict-preview pre {
+  padding: 1rem;
+  overflow: auto;
+  background: var(--muted);
+}

package/dist/repository/components/file-history-view.d.ts

@@ -0,0 +1,15 @@
+import { View, type WorkspaceLeaf } from "@lapis-notes/api";
+import type { RepositoryPlugin } from "./repository-plugin.js";
+export declare class FileHistoryView extends View {
+    #private;
+    private readonly plugin;
+    constructor(leaf: WorkspaceLeaf, plugin: RepositoryPlugin);
+    getViewType(): string;
+    getDisplayText(): string;
+    getIcon(): string;
+    protected onOpen(): Promise<void>;
+    protected onClose(): Promise<void>;
+    onload(): void;
+    onunload(): void;
+}
+export declare function registerFileHistoryView(plugin: RepositoryPlugin): void;

package/dist/repository/components/file-history-view.js

@@ -0,0 +1,110 @@
+import { FileView, View } from "@lapis-notes/api";
+import { mount, unmount } from "svelte";
+import RepositoryFileHistory from "./RepositoryFileHistory.svelte";
+import { followBackup } from "../controllers/backup-follow.js";
+export class FileHistoryView extends View {
+    plugin;
+    #controller;
+    #component;
+    constructor(leaf, plugin) {
+        super(leaf);
+        this.plugin = plugin;
+    }
+    getViewType() {
+        return "repository-file-history";
+    }
+    getDisplayText() {
+        return "File history";
+    }
+    getIcon() {
+        return "file-clock";
+    }
+    async onOpen() { }
+    async onClose() { }
+    onload() {
+        const controller = (this.#controller =
+            this.plugin.createFileHistoryController());
+        this.register(followBackup(this.plugin.backup?.controller, controller));
+        const workspace = this.app.workspace;
+        const follow = (leaf = workspace.activeLeaf) => {
+            let root = false;
+            workspace.iterateRootLeaves((candidate) => {
+                if (candidate === leaf)
+                    root = true;
+            });
+            if (!leaf || root)
+                void controller.follow(leaf?.view instanceof FileView ? leaf.view.file?.path : undefined);
+        };
+        this.registerEvent(workspace.on("active-leaf-change", follow));
+        this.registerEvent(workspace.on("file-open", () => follow()));
+        this.registerEvent(this.app.vault.on("rename", (file, oldPath) => {
+            const path = controller.state.path;
+            if (path === oldPath)
+                void controller.follow(file.path);
+            else if (path?.startsWith(`${oldPath}/`))
+                void controller.follow(file.path + path.slice(oldPath.length));
+        }));
+        this.registerEvent(this.app.vault.on("delete", (file) => {
+            if (file.path === controller.state.path)
+                void controller.follow();
+        }));
+        this.#component = mount(RepositoryFileHistory, {
+            target: this.containerEl,
+            props: {
+                controller,
+                copyText: (value) => this.plugin.copyIdentifier(value),
+                onBlame: () => {
+                    const { operation, workspaceCommit: commit, path } = controller.state;
+                    if (operation && commit && path)
+                        void this.plugin
+                            .openBlame(operation, commit, path)
+                            .catch((error) => this.plugin.report(error));
+                },
+                onOpen: (revision) => void this.plugin
+                    .open(controller.state.operation, revision)
+                    .catch((error) => this.plugin.report(error)),
+            },
+        });
+        follow();
+    }
+    onunload() {
+        if (this.#component)
+            void unmount(this.#component);
+        this.#component = undefined;
+        if (this.#controller)
+            void this.plugin
+                .release(this.#controller)
+                .catch((error) => this.plugin.report(error));
+    }
+}
+export function registerFileHistoryView(plugin) {
+    let active = true;
+    plugin.register(() => {
+        active = false;
+    });
+    const ensure = async (reveal = false) => {
+        if (!active)
+            return;
+        const workspace = plugin.app.workspace;
+        let leaf = workspace.getLeavesOfType("repository-file-history")[0];
+        if (!leaf) {
+            leaf = workspace.ensureSideLeaf("repository-file-history");
+            await leaf.setViewState({ type: "repository-file-history", state: {} });
+        }
+        if (reveal && active)
+            await workspace.revealLeaf(leaf);
+    };
+    plugin.registerSidebarView("repository-file-history", (leaf) => new FileHistoryView(leaf, plugin), { side: "right", title: "File history", icon: "file-clock" }, {
+        kind: "command",
+        command: {
+            id: "open-file-history",
+            name: "Open File History",
+            callback: () => {
+                void ensure(true).catch((error) => plugin.report(error));
+            },
+        },
+    });
+    plugin.app.workspace.onLayoutReady(() => {
+        void ensure().catch((error) => plugin.report(error));
+    });
+}

package/dist/repository/components/operation-view.d.ts

@@ -0,0 +1,16 @@
+import { View, type WorkspaceLeaf } from "@lapis-notes/api";
+import type { RepositoryPlugin } from "./repository-plugin.js";
+export declare class OperationView extends View {
+    #private;
+    private readonly plugin;
+    constructor(leaf: WorkspaceLeaf, plugin: RepositoryPlugin);
+    getViewType(): string;
+    getDisplayText(): string;
+    getIcon(): string;
+    getState(): Record<string, unknown>;
+    setState(state: Record<string, unknown>): Promise<void>;
+    protected onOpen(): Promise<void>;
+    protected onClose(): Promise<void>;
+    onload(): void;
+    onunload(): void;
+}