Add history view

plugin/src/views/history-view.ts

@@ -0,0 +1,89 @@
+import type { WorkspaceLeaf } from "obsidian";
+import { ItemView } from "obsidian";
+import type { SyncHistory } from "src/tracing/sync-history";
+import { SyncSource } from "src/tracing/sync-history";
+import { intlFormatDistance } from "date-fns";
+
+export class HistoryView extends ItemView {
+	public static readonly TYPE = "example-view";
+	public static readonly ICON = "square-stack";
+	private timer: NodeJS.Timer | null = null;
+
+	public constructor(
+		leaf: WorkspaceLeaf,
+		private readonly history: SyncHistory
+	) {
+		super(leaf);
+		this.icon = HistoryView.ICON;
+
+		// eslint-disable-next-line @typescript-eslint/no-misused-promises
+		history.addSyncHistoryUpdateListener(async () => {
+			await this.updateView();
+		});
+	}
+
+	private static formatSource(source: SyncSource | undefined): string {
+		switch (source) {
+			case SyncSource.PUSH:
+				return " ⤴️";
+			case SyncSource.PULL:
+				return " ⤵️";
+			default:
+				return "";
+		}
+	}
+
+	private static formatTime(timestamp: Date): string {
+		return intlFormatDistance(timestamp, new Date());
+	}
+
+	public getViewType(): string {
+		return HistoryView.TYPE;
+	}
+
+	public getDisplayText(): string {
+		return "Example view";
+	}
+
+	public async onOpen(): Promise<void> {
+		await this.updateView();
+		// eslint-disable-next-line @typescript-eslint/no-misused-promises
+		this.timer = setInterval(async () => this.updateView(), 500);
+	}
+
+	public async onClose(): Promise<void> {
+		if (this.timer) {
+			clearInterval(this.timer);
+		}
+	}
+
+	private async updateView(): Promise<void> {
+		const container = this.containerEl.children[1];
+		container.empty();
+		container.createEl("h4", { text: "VaultLink History" });
+
+		this.history
+			.getEntries()
+			.reverse()
+			.forEach((entry) => {
+				const card = container.createDiv({
+					cls: ["history-card", entry.status.toLocaleLowerCase()],
+				});
+				const header = card.createDiv({ cls: "history-card-header" });
+				header.createEl("h5", {
+					text:
+						entry.relativePath +
+						HistoryView.formatSource(entry.source),
+					cls: "history-card-title",
+				});
+				header.createSpan({
+					text: HistoryView.formatTime(entry.timestamp),
+					cls: "history-card-timestamp",
+				});
+				card.createEl("p", {
+					text: entry.message,
+					cls: "history-card-message",
+				});
+			});
+	}
+}

plugin/src/views/status-bar.ts

@@ -6,9 +6,9 @@ export class StatusBar {
 
 	public constructor(plugin: Plugin, history: SyncHistory) {
 		this.statusBarItem = plugin.addStatusBarItem();
-		history.addSyncHistoryStatsChangeListener((status) =>
-			{ this.updateStatus(status); }
-		);
+		history.addSyncHistoryUpdateListener((status) => {
+			this.updateStatus(status);
+		});
 	}
 
 	private updateStatus({ success, error }: HistoryStats): void {

plugin/src/views/sync-view.ts

@@ -1,40 +0,0 @@
-import type { WorkspaceLeaf } from "obsidian";
-import { ItemView } from "obsidian";
-import { LogLevel, Logger } from "src/tracing/logger";
-
-export class SyncView extends ItemView {
-	public static readonly TYPE = "example-view";
-
-	public constructor(leaf: WorkspaceLeaf) {
-		super(leaf);
-	}
-
-	public getViewType(): string {
-		return SyncView.TYPE;
-	}
-
-	public getDisplayText(): string {
-		return "Example view";
-	}
-
-	public async onOpen(): Promise<void> {
-		const container = this.containerEl.children[1];
-		container.empty();
-		container.createEl("h4", { text: "Example view" });
-
-		// eslint-disable-next-line @typescript-eslint/no-misused-promises
-		setInterval(async () => this.updateView(), 1000);
-	}
-
-	public async updateView(): Promise<void> {
-		const container = this.containerEl.children[1];
-		container.empty();
-
-		const messages = Logger.getInstance()
-			.getMessages(LogLevel.DEBUG)
-			.map((message) => message.toString())
-			.join("\n");
-
-		container.createEl("pre", { text: messages });
-	}
-}