Add WebSocket support (#12)

frontend/obsidian-plugin/src/views/history/history-view.scss

@@ -0,0 +1,53 @@
+.history-card {
+	padding: var(--size-4-4);
+	margin: var(--size-4-2);
+	background-color: var(--color-base-00);
+	border-radius: var(--radius-l);
+	container-type: inline-size;
+
+	&.clickable {
+		cursor: pointer;
+	}
+
+	&.success {
+		background-color: rgba(var(--color-green-rgb), 0.2);
+	}
+
+	&.error {
+		background-color: rgba(var(--color-red-rgb), 0.2);
+	}
+
+	.history-card-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--size-4-2);
+		gap: var(--size-4-2);
+
+		@container (max-width: 300px) {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.history-card-title {
+			font: var(--font-monospace);
+			display: flex;
+			align-items: center;
+			gap: var(--size-4-2);
+			word-break: break-all;
+			margin: 0;
+		}
+
+		.history-card-timestamp {
+			font-size: var(--font-ui-small);
+			font-style: italic;
+			color: var(--italic-color);
+		}
+	}
+
+	.history-card-message {
+		font-size: var(--font-ui-medium);
+		color: var(--color-base-70);
+		margin: 0;
+	}
+}

frontend/obsidian-plugin/src/views/history/history-view.ts

@@ -0,0 +1,198 @@
+import "./history-view.scss";
+
+import type { IconName, WorkspaceLeaf } from "obsidian";
+import { ItemView, setIcon } from "obsidian";
+import { intlFormatDistance } from "date-fns";
+import type { HistoryEntry, SyncClient } from "sync-client";
+import { SyncType } from "sync-client";
+
+export class HistoryView extends ItemView {
+	public static readonly TYPE = "history-view";
+	public static readonly ICON = "square-stack";
+	private timer: NodeJS.Timeout | null = null;
+
+	private historyContainer: HTMLElement | undefined;
+	private readonly historyEntryToElement = new Map<
+		HistoryEntry,
+		HTMLElement
+	>();
+
+	public constructor(
+		leaf: WorkspaceLeaf,
+		private readonly client: SyncClient
+	) {
+		super(leaf);
+		this.icon = HistoryView.ICON;
+
+		this.client.addSyncHistoryUpdateListener(
+			() =>
+				void this.updateView().catch((error: unknown) => {
+					this.client.logger.error(
+						`Failed to update history view: ${error}`
+					);
+				})
+		);
+	}
+
+	private static getSyncTypeIcon(type: SyncType | undefined): IconName {
+		switch (type) {
+			case SyncType.CREATE:
+				return "file-plus";
+			case SyncType.DELETE:
+				return "trash-2";
+			case SyncType.UPDATE:
+				return "file-pen-line";
+			case undefined:
+			default:
+				return "";
+		}
+	}
+
+	private static renderSyncItemTitle(
+		element: HTMLElement,
+		entry: HistoryEntry
+	): void {
+		const syncTypeIcon = HistoryView.getSyncTypeIcon(entry.type);
+		if (syncTypeIcon) {
+			setIcon(element.createDiv(), syncTypeIcon);
+		}
+
+		element.createEl("span", {
+			text: entry.relativePath.split("/").pop()
+		});
+	}
+
+	private static updateTimeSince(
+		element: HTMLElement,
+		entry: HistoryEntry
+	): void {
+		const timestampElement = element.querySelector(
+			".history-card-timestamp"
+		);
+		if (timestampElement != null) {
+			timestampElement.textContent = intlFormatDistance(
+				entry.timestamp,
+				new Date()
+			);
+		}
+	}
+
+	public getViewType(): string {
+		return HistoryView.TYPE;
+	}
+
+	public getDisplayText(): string {
+		return "VaultLink history";
+	}
+
+	public async onOpen(): Promise<void> {
+		const container = this.containerEl.children[1];
+		container.createEl("h4", { text: "VaultLink history" });
+
+		this.historyContainer = container.createDiv({ cls: "logs-container" });
+
+		await this.updateView();
+		this.timer = setInterval(() => void this.updateView(), 1000);
+	}
+
+	public async onClose(): Promise<void> {
+		if (this.timer) {
+			clearInterval(this.timer);
+		}
+	}
+
+	private async updateView(): Promise<void> {
+		const container = this.historyContainer;
+		if (container === undefined) {
+			return;
+		}
+
+		const entries = this.client.getHistoryEntries();
+
+		if (this.historyEntryToElement.size === 0 && entries.length > 0) {
+			// Clear the "No update has happened yet" message
+			container.empty();
+		}
+
+		entries.forEach((entry) => {
+			const element = this.historyEntryToElement.get(entry);
+			if (element !== undefined) {
+				HistoryView.updateTimeSince(element, entry);
+				return;
+			}
+
+			const newElement = this.createHistoryCard(container, entry);
+			container.prepend(newElement);
+			this.historyEntryToElement.set(entry, newElement);
+		});
+
+		const newEntries = new Set(entries);
+		for (const [entry, element] of this.historyEntryToElement) {
+			if (!newEntries.has(entry)) {
+				element.remove();
+				this.historyEntryToElement.delete(entry);
+			}
+		}
+
+		if (entries.length === 0) {
+			container.empty();
+			container.createEl("p", {
+				text: "No update has happened yet."
+			});
+		}
+	}
+
+	private createHistoryCard(
+		container: HTMLElement,
+		entry: HistoryEntry
+	): HTMLElement {
+		return container.createDiv(
+			{
+				cls: ["history-card", entry.status.toLocaleLowerCase()]
+			},
+			(card) => {
+				if (this.app.vault.getFileByPath(entry.relativePath) !== null) {
+					card.addEventListener("click", () => {
+						void this.app.workspace.openLinkText(
+							entry.relativePath,
+							entry.relativePath,
+							false
+						);
+					});
+
+					card.addClass("clickable");
+				}
+
+				card.createDiv(
+					{
+						cls: "history-card-header"
+					},
+					(header) => {
+						header.createEl(
+							"h5",
+							{
+								cls: "history-card-title"
+							},
+							(title) => {
+								HistoryView.renderSyncItemTitle(title, entry);
+							}
+						);
+
+						header.createSpan({
+							text: intlFormatDistance(
+								entry.timestamp,
+								new Date()
+							),
+							cls: "history-card-timestamp"
+						});
+					}
+				);
+
+				card.createEl("p", {
+					text: `${entry.message}.`,
+					cls: "history-card-message"
+				});
+			}
+		);
+	}
+}