@lapis-notes/history 0.1.0

package/dist/history-panel.css

@@ -0,0 +1,200 @@
+.history-panel {
+  --history-marker-col: 1.25rem;
+  --history-row-gap: 0.375rem;
+  --history-row-pad-y: 0.35rem;
+  --history-row-pad-x: 0.45rem;
+  --history-timeline-pad-x: 0.75rem;
+  --history-timeline-pad-top: 0.5rem;
+  --history-timeline-pad-bottom: 0.75rem;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--ui-workspace-view-foreground, inherit);
+  background: var(--ui-workspace-view-background, transparent);
+  font: inherit;
+}
+
+.history-panel__chrome {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border-bottom: 1px solid
+    var(--ui-workspace-border, color-mix(in srgb, currentColor 14%, transparent));
+  background: var(--ui-workspace-view-background, transparent);
+}
+
+.history-panel__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.history-panel__toolbar
+  button[data-ui-component="button"].history-panel__toolbar-action {
+  color: inherit;
+  background: transparent;
+}
+
+.history-panel__toolbar
+  button[data-ui-component="button"].history-panel__toolbar-action:hover,
+.history-panel__toolbar
+  button[data-ui-component="button"].history-panel__toolbar-action:focus-visible {
+  color: var(
+    --ui-workspace-panel-action-hover-foreground,
+    var(--sidebar-accent-foreground, inherit)
+  );
+  background: var(
+    --ui-workspace-panel-action-hover-background,
+    var(--sidebar-accent, #e3e3e3)
+  );
+  outline: none;
+}
+
+.history-panel__toolbar
+  button[data-ui-component="button"].history-panel__toolbar-action[aria-pressed="true"],
+.history-panel__toolbar
+  button[data-ui-component="button"].history-panel__toolbar-action[aria-pressed="true"]:hover {
+  color: var(--ui-workspace-accent, #7c3aed);
+  background: var(
+    --ui-workspace-selection,
+    color-mix(in srgb, var(--ui-workspace-accent, #7c3aed) 14%, transparent)
+  );
+}
+
+.history-panel__empty {
+  margin: 0;
+  padding: 0.75rem;
+  color: var(--ui-workspace-muted-foreground, var(--muted-foreground));
+  font-size: 0.8125rem;
+}
+
+.history-panel__scroll {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.history-panel__timeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-row-gap);
+  margin: 0;
+  padding: var(--history-timeline-pad-top) var(--history-timeline-pad-x)
+    var(--history-timeline-pad-bottom);
+  list-style: none;
+}
+
+.history-panel__timeline::before {
+  position: absolute;
+  top: calc(
+    var(--history-timeline-pad-top) + var(--history-row-pad-y) +
+      var(--history-marker-col) / 2
+  );
+  bottom: calc(
+    var(--history-timeline-pad-bottom) + var(--history-row-pad-y) +
+      var(--history-marker-col) / 2
+  );
+  left: calc(
+    var(--history-timeline-pad-x) + var(--history-row-pad-x) +
+      var(--history-marker-col) / 2
+  );
+  width: 1px;
+  background: var(
+    --ui-workspace-border,
+    color-mix(in srgb, currentColor 14%, transparent)
+  );
+  transform: translateX(-50%);
+  content: "";
+}
+
+.history-panel__row {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.65rem;
+  padding: var(--history-row-pad-y) var(--history-row-pad-x);
+  border: 0;
+  border-radius: 0.4rem;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.history-panel__row:hover,
+.history-panel__row:focus-visible {
+  background: var(
+    --ui-workspace-selection,
+    color-mix(in srgb, var(--ui-workspace-accent, #7c3aed) 14%, transparent)
+  );
+  outline: none;
+}
+
+.history-panel__row[aria-current="true"] {
+  background: var(
+    --ui-workspace-selection,
+    color-mix(in srgb, var(--ui-workspace-accent, #7c3aed) 18%, transparent)
+  );
+}
+
+.history-panel__row[data-compare-anchor="true"] {
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--ui-workspace-accent, #7c3aed) 45%, transparent);
+}
+
+.history-panel__marker {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 var(--history-marker-col);
+  width: var(--history-marker-col);
+  height: var(--history-marker-col);
+  color: var(--ui-workspace-muted-foreground, currentColor);
+}
+
+.history-panel__marker path {
+  opacity: 0;
+}
+
+.history-panel__row[aria-current="true"] .history-panel__marker,
+.history-panel__row[data-compare-anchor="true"] .history-panel__marker {
+  color: var(--ui-workspace-accent, #7c3aed);
+}
+
+.history-panel__row[aria-current="true"] .history-panel__marker circle {
+  fill: currentColor;
+}
+
+.history-panel__meta {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.history-panel__event {
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.history-panel__time {
+  color: var(--ui-workspace-muted-foreground, var(--muted-foreground));
+  font-size: 0.75rem;
+}
+
+.history-panel__pin {
+  flex: 0 0 auto;
+  width: 0.9rem;
+  height: 0.9rem;
+  color: var(--ui-workspace-accent, #7c3aed);
+}

package/dist/history-panel.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+  import "./history-panel.css";
+  import { Menu, type App } from "@lapis-notes/api";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import ArchiveRestore from "@lucide/svelte/icons/archive-restore";
+  import GitCommitVertical from "@lucide/svelte/icons/git-commit-vertical";
+  import GitCompare from "@lucide/svelte/icons/git-compare";
+  import GitCompareArrows from "@lucide/svelte/icons/git-compare-arrows";
+  import { onMount, untrack } from "svelte";
+  import {
+    formatHistoryEvent,
+    formatHistoryTimestamp,
+  } from "./history-format";
+  import type {
+    HistoryCompareAnchor,
+    HistoryCompareViewState,
+    HistoryRevision,
+    HistoryViewModel,
+  } from "./history-plugin";
+  import { HistoryCompareViewType } from "./history-view-type";
+
+  type HistoryPanelPlugin = {
+    getHistoryViewModel(): Promise<HistoryViewModel>;
+    getCompareAnchor(): HistoryCompareAnchor | null;
+    toggleCompareAnchor(filePath: string, revisionId: string): void;
+    openHistoryCompareView(state: HistoryCompareViewState): Promise<void>;
+    restoreRevision(filePath: string, revision: HistoryRevision): Promise<void>;
+    onHistoryChanged(listener: () => void): () => void;
+  };
+
+  let { app }: { app: App } = $props();
+
+  const plugin = untrack(() => {
+    const registered = app.plugins.plugins.get("history") as
+      | HistoryPanelPlugin
+      | undefined;
+    if (!registered) throw new Error("History plugin is not registered");
+    return registered;
+  });
+
+  let model = $state<HistoryViewModel>({
+    filePath: null,
+    history: null,
+    currentContent: "",
+    fileExists: false,
+  });
+  let anchor = $state<HistoryCompareAnchor | null>(null);
+  let openRevisionId = $state<string | null>(null);
+  let openCompareMode = $state<HistoryCompareViewState["compareMode"] | null>(
+    null,
+  );
+  let selectedRevisionId = $state<string | null>(null);
+
+  const selectedRevision = $derived(
+    model.history?.revisions.find(
+      (revision) => revision.revisionId === selectedRevisionId,
+    ) ?? null,
+  );
+  const previousRevision = $derived.by(() => {
+    if (!selectedRevision || !model.history) return undefined;
+    const index = model.history.revisions.findIndex(
+      (entry) => entry.revisionId === selectedRevision.revisionId,
+    );
+    return index >= 0 ? model.history.revisions[index + 1] : undefined;
+  });
+
+  async function refresh(): Promise<void> {
+    model = await plugin.getHistoryViewModel();
+    anchor = plugin.getCompareAnchor();
+    const leaf = app.workspace.getLeavesOfType(HistoryCompareViewType)[0];
+    const state = leaf?.view.getState() ?? {};
+    openRevisionId =
+      typeof state["revisionId"] === "string" ? state["revisionId"] : null;
+    const mode = state["compareMode"];
+    openCompareMode =
+      mode === "current" || mode === "previous" || mode === "selected"
+        ? mode
+        : null;
+    const revisionIds = new Set(
+      model.history?.revisions.map((revision) => revision.revisionId) ?? [],
+    );
+    if (openRevisionId && revisionIds.has(openRevisionId)) {
+      selectedRevisionId = openRevisionId;
+    } else if (!selectedRevisionId || !revisionIds.has(selectedRevisionId)) {
+      selectedRevisionId = model.history?.revisions[0]?.revisionId ?? null;
+    }
+  }
+
+  function openCompare(
+    revision: HistoryRevision,
+    compareMode: "current" | "previous" | "selected",
+    otherRevisionId?: string,
+  ): void {
+    if (!model.filePath) return;
+    selectedRevisionId = revision.revisionId;
+    void plugin.openHistoryCompareView({
+      filePath: model.filePath,
+      revisionId: revision.revisionId,
+      compareMode,
+      otherRevisionId,
+      sourceLeafId: app.workspace.activeLeaf?.id,
+    });
+  }
+
+  function showRevisionMenu(event: MouseEvent, revision: HistoryRevision): void {
+    event.preventDefault();
+    const previous = model.history?.revisions[
+      model.history.revisions.findIndex(
+        (entry) => entry.revisionId === revision.revisionId,
+      ) + 1
+    ];
+    const canCompareSelected = Boolean(
+      anchor &&
+        anchor.filePath === model.filePath &&
+        anchor.revisionId !== revision.revisionId,
+    );
+    new Menu()
+      .addItem((item) =>
+        item.setTitle("Compare with current").onClick(() => {
+          openCompare(revision, "current");
+        }),
+      )
+      .addItem((item) =>
+        item
+          .setTitle("Compare with previous")
+          .setDisabled(!previous)
+          .onClick(() => {
+            if (previous) openCompare(revision, "previous");
+          }),
+      )
+      .addSeparator()
+      .addItem((item) =>
+        item.setTitle("Select for compare").onClick(() => {
+          if (!model.filePath) return;
+          plugin.toggleCompareAnchor(model.filePath, revision.revisionId);
+        }),
+      )
+      .addItem((item) =>
+        item
+          .setTitle("Compare with selected")
+          .setDisabled(!canCompareSelected)
+          .onClick(() => {
+            if (!anchor) return;
+            openCompare(revision, "selected", anchor.revisionId);
+          }),
+      )
+      .addSeparator()
+      .addItem((item) =>
+        item.setTitle("Restore this revision").onClick(() => {
+          if (!model.filePath) return;
+          void plugin.restoreRevision(model.filePath, revision);
+        }),
+      )
+      .showAtMouseEvent(event);
+  }
+
+  onMount(() => {
+    const unsubscribe = plugin.onHistoryChanged(() => void refresh());
+    const leafChange = app.workspace.on("active-leaf-change", () => {
+      void refresh();
+    });
+    const layoutChange = app.workspace.on("layout-change", () => {
+      void refresh();
+    });
+    void refresh();
+    return () => {
+      unsubscribe();
+      app.workspace.offref(leafChange);
+      app.workspace.offref(layoutChange);
+    };
+  });
+</script>
+
+<div
+  class="history-panel"
+  data-ui-component="history-panel"
+  data-testid="history-panel"
+>
+  <div class="history-panel__chrome" data-ui-part="chrome">
+    <Tooltip.Provider delayDuration={0}>
+      <div class="history-panel__toolbar" data-ui-part="toolbar">
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon-sm"
+                class="history-panel__toolbar-action"
+                aria-label="Compare with current"
+                aria-pressed={openCompareMode === "current"}
+                disabled={!selectedRevision}
+                onclick={() => {
+                  if (selectedRevision) openCompare(selectedRevision, "current");
+                }}
+              >
+                <GitCompare aria-hidden="true" />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">Compare with current</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon-sm"
+                class="history-panel__toolbar-action"
+                aria-label="Compare with previous"
+                aria-pressed={openCompareMode === "previous"}
+                disabled={!previousRevision}
+                onclick={() => {
+                  if (selectedRevision && previousRevision) {
+                    openCompare(selectedRevision, "previous");
+                  }
+                }}
+              >
+                <GitCompareArrows aria-hidden="true" />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">Compare with previous</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon-sm"
+                class="history-panel__toolbar-action"
+                aria-label="Restore this revision"
+                disabled={!selectedRevision || !model.filePath}
+                onclick={() => {
+                  if (!model.filePath || !selectedRevision) return;
+                  void plugin.restoreRevision(model.filePath, selectedRevision);
+                }}
+              >
+                <ArchiveRestore aria-hidden="true" />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">Restore this revision</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    </Tooltip.Provider>
+  </div>
+  {#if !model.filePath}
+    <p class="history-panel__empty">Open a file to see its history.</p>
+  {:else if !model.history?.revisions.length}
+    <p class="history-panel__empty">No revisions stored for this file yet.</p>
+  {:else}
+    <ScrollArea class="history-panel__scroll">
+      <ol class="history-panel__timeline" aria-label="File history">
+        {#each model.history.revisions as revision (revision.revisionId)}
+          <li>
+            <button
+              type="button"
+              class="history-panel__row"
+              data-revision-id={revision.revisionId}
+              data-compare-anchor={anchor?.revisionId === revision.revisionId
+                ? "true"
+                : undefined}
+              aria-current={selectedRevisionId === revision.revisionId
+                ? "true"
+                : undefined}
+              aria-label={`${formatHistoryEvent(revision.eventType)} ${formatHistoryTimestamp(revision.createdAt)}`}
+              onclick={() => openCompare(revision, "current")}
+              oncontextmenu={(event) => showRevisionMenu(event, revision)}
+            >
+              <GitCommitVertical
+                class="history-panel__marker"
+                aria-hidden="true"
+              />
+              <span class="history-panel__meta">
+                <span class="history-panel__event"
+                  >{formatHistoryEvent(revision.eventType)}</span
+                >
+                <time
+                  class="history-panel__time"
+                  datetime={new Date(revision.createdAt).toISOString()}
+                  >{formatHistoryTimestamp(revision.createdAt)}</time
+                >
+              </span>
+              {#if anchor?.revisionId === revision.revisionId}
+                <GitCompare
+                  class="history-panel__pin"
+                  data-testid="history-compare-anchor"
+                  aria-hidden="true"
+                />
+              {/if}
+            </button>
+          </li>
+        {/each}
+      </ol>
+    </ScrollArea>
+  {/if}
+</div>

package/dist/history-panel.svelte.d.ts

@@ -0,0 +1,8 @@
+import "./history-panel.css";
+import { type App } from "@lapis-notes/api";
+type $$ComponentProps = {
+    app: App;
+};
+declare const HistoryPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type HistoryPanel = ReturnType<typeof HistoryPanel>;
+export default HistoryPanel;

package/dist/history-plugin.d.ts

@@ -0,0 +1,88 @@
+import { Plugin, TFile, type App, type PluginManifest } from "@lapis-notes/api";
+import { type HistoryPluginSettings, type HistoryPluginSettingsPatch } from "./history-settings";
+export declare const HISTORY_PLUGIN_ID = "history";
+export type HistoryCaptureEventType = "baseline" | "create" | "modify" | "rename" | "delete" | "restore";
+export type HistoryCompareMode = "current" | "previous" | "selected";
+export interface HistoryRevision {
+    revisionId: string;
+    path: string;
+    previousPath?: string;
+    eventType: HistoryCaptureEventType;
+    createdAt: number;
+    sourceMtime?: number;
+    sourceSize?: number;
+    contentHash: string;
+    content: string;
+}
+export interface HistoryFileHistory {
+    file: {
+        id: string;
+        path: string;
+        deleted: boolean;
+    };
+    revisions: HistoryRevision[];
+}
+export interface HistoryViewModel {
+    filePath: string | null;
+    history: HistoryFileHistory | null;
+    currentContent: string;
+    fileExists: boolean;
+}
+export interface HistoryCompareViewState {
+    filePath: string;
+    revisionId: string;
+    compareMode: HistoryCompareMode;
+    otherRevisionId?: string;
+    sourceLeafId?: string;
+}
+export interface HistoryComparisonModel {
+    filePath: string;
+    history: HistoryFileHistory;
+    currentContent: string;
+    fileExists: boolean;
+    compareMode: HistoryCompareMode;
+    selectedRevision: HistoryRevision;
+    previousRevision: HistoryRevision | null;
+    otherRevision: HistoryRevision | null;
+    compareBaseText: string;
+    compareNewText: string;
+    beforeLabel: string;
+    afterLabel: string;
+}
+export interface HistoryCompareAnchor {
+    filePath: string;
+    revisionId: string;
+}
+export declare class HistoryPlugin extends Plugin {
+    private settings;
+    private currentFilePath;
+    private compareAnchor;
+    private readonly pendingCaptures;
+    private readonly lastModifyStoredAt;
+    private readonly suppressedHashes;
+    private readonly listeners;
+    constructor(app: App, manifest?: PluginManifest);
+    onload(): Promise<void>;
+    getSettings(): HistoryPluginSettings;
+    updateSettings(patch: HistoryPluginSettingsPatch): Promise<void>;
+    onHistoryChanged(listener: () => void): () => void;
+    getCompareAnchor(): HistoryCompareAnchor | null;
+    setCompareAnchor(anchor: HistoryCompareAnchor | null): void;
+    toggleCompareAnchor(filePath: string, revisionId: string): void;
+    openHistoryView(filePath?: string): Promise<void>;
+    openHistoryCompareView(state: HistoryCompareViewState): Promise<void>;
+    closeHistoryCompareView(sourceLeafId?: string): void;
+    getHistoryViewModel(): Promise<HistoryViewModel>;
+    getHistoryComparisonModel(state: HistoryCompareViewState): Promise<HistoryComparisonModel>;
+    restoreRevision(filePath: string, revision: HistoryRevision): Promise<void>;
+    saveCurrentFileContent(filePath: string, content: string): Promise<void>;
+    getFocusedFile(): TFile | null;
+    private setCurrentFilePath;
+    private scheduleCapture;
+    private ensureBaselineForFile;
+    private captureSnapshot;
+    private captureRename;
+    private captureDelete;
+    private notify;
+}
+export default HistoryPlugin;