Add sync status inside editor

frontend/obsidian-plugin/src/views/editor-sync-line/editor-sync-line.scss

@@ -0,0 +1,43 @@
+.vault-link-sync-status {
+	position: absolute;
+	right: var(--size-4-4);
+	top: var(--size-4-2);
+	opacity: 0.7;
+	cursor: pointer;
+
+	> span {
+		opacity: 0;
+		position: absolute;
+		min-width: 200px;
+		text-align: right;
+		padding-right: var(--size-2-2);
+
+		top: 50%;
+		left: 0;
+		transform: translateY(-50%) translateX(-100%) translateY(-2px);
+		transition: opacity 200ms;
+	}
+
+	&:hover {
+		> span {
+			opacity: 1;
+		}
+	}
+
+	> .icon {
+		line-height: 0;
+	}
+
+	&.loading > .icon {
+		animation: spin 2s linear infinite;
+
+		@keyframes spin {
+			0% {
+				transform: rotate(0deg);
+			}
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	}
+}

frontend/obsidian-plugin/src/views/editor-sync-line/editor-sync-line.ts

@@ -0,0 +1,55 @@
+import type { Workspace } from "obsidian";
+import { FileView, setIcon } from "obsidian";
+import type { SyncClient } from "sync-client";
+import { DocumentUpdateStatus } from "sync-client";
+import "./editor-sync-line.scss";
+
+export function updateEditorStatusDisplay(
+	workspace: Workspace,
+	client: SyncClient
+): void {
+	workspace.iterateAllLeaves((leaf) => {
+		if (leaf.view instanceof FileView) {
+			const filePath = leaf.view.file?.path;
+			if (filePath == null) {
+				return;
+			}
+			const parent = leaf.view.contentEl.querySelector(".cm-editor");
+			if (parent == null) {
+				return;
+			}
+
+			const element =
+				parent.querySelector(".vault-link-sync-status") ??
+				parent.createDiv(
+					{
+						cls: "vault-link-sync-status"
+					},
+					(el) => {
+						el.createSpan({ text: "VaultLink sync state" });
+						el.createDiv({
+							cls: "icon"
+						});
+					}
+				);
+
+			const isLoading =
+				client.getDocumentSyncingStatus(filePath) ==
+				DocumentUpdateStatus.SYNCING;
+
+			if (isLoading) {
+				element.classList.add("loading");
+			} else {
+				element.classList.remove("loading");
+			}
+
+			const iconContainer = element.querySelector(".icon");
+			if (iconContainer != null) {
+				setIcon(
+					iconContainer as HTMLElement, // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
+					isLoading ? "loader" : "circle-check"
+				);
+			}
+		}
+	});
+}