Make logs view prettier

plugin/src/views/logs-view.ts

@@ -1,17 +1,29 @@
 import type { WorkspaceLeaf } from "obsidian";
 import { ItemView } from "obsidian";
+import type VaultLinkPlugin from "src/vault-link-plugin";
 import { LogLevel, Logger } from "src/tracing/logger";
+import { Database } from "src/database/database";
 
 export class LogsView extends ItemView {
 	public static readonly TYPE = "logs-view";
 	public static readonly ICON = "logs";
 
-	public constructor(leaf: WorkspaceLeaf) {
+	public constructor(
+		private readonly plugin: VaultLinkPlugin,
+		private readonly database: Database,
+		leaf: WorkspaceLeaf
+	) {
 		super(leaf);
 		this.icon = LogsView.ICON;
 		Logger.getInstance().addOnMessageListener(() => {
 			this.updateView();
 		});
+
+		database.addOnSettingsChangeHandlers((newSettings, oldSettings) => {
+			if (newSettings.minimumLogLevel !== oldSettings.minimumLogLevel) {
+				this.updateView();
+			}
+		});
 	}
 
 	private static formatTimestamp(timestamp: Date): string {
@@ -28,6 +40,16 @@ export class LogsView extends ItemView {
 
 	public async onOpen(): Promise<void> {
 		this.updateView();
+
+		const container = this.containerEl.children[1];
+		container.addClass("logs-view");
+
+		const logsContainer = container
+			.getElementsByClassName("logs-container")
+			.item(0);
+		if (logsContainer) {
+			logsContainer.scrollTop = logsContainer.scrollHeight;
+		}
 	}
 
 	private updateView(): void {
@@ -35,19 +57,54 @@ export class LogsView extends ItemView {
 		container.empty();
 
 		container.createEl("h4", { text: "VaultLink logs" });
+		container.createEl(
+			"p",
+			{
+				text: "This view displays logs generated by VaultLink. You can set the log level in the ",
+			},
+			(p) => {
+				p.createEl(
+					"a",
+					{
+						text: "settings",
+					},
+					(button) => {
+						button.addEventListener("click", () => {
+							this.plugin.openSettings();
+						});
+					}
+				);
 
-		Logger.getInstance()
-			.getMessages(LogLevel.DEBUG)
-			.forEach((message) => {
-				const messageContainer = container.createDiv({
-					cls: ["log-message", message.level],
-				});
-				messageContainer.createEl("span", {
-					text: ` | ${LogsView.formatTimestamp(
-						message.timestamp
-					)} | `,
-				});
-				messageContainer.createEl("span", { text: message.message });
-			});
+				p.createSpan({ text: "." });
+			}
+		);
+
+		const logs = Logger.getInstance().getMessages(
+			this.database.getSettings().minimumLogLevel
+		);
+
+		if (logs.length === 0) {
+			container.createEl("p", { text: "No logs available yet." });
+			return;
+		}
+
+		container.createDiv({ cls: "logs-container" }, (logsContainer) => {
+			logs.forEach((message) =>
+				logsContainer.createDiv(
+					{
+						cls: ["log-message", message.level],
+					},
+					(messageContainer) => {
+						messageContainer.createEl("span", {
+							text: LogsView.formatTimestamp(message.timestamp),
+							cls: "timestamp",
+						});
+						messageContainer.createEl("span", {
+							text: message.message,
+						});
+					}
+				)
+			);
+		});
 	}
 }