Make logs view prettier

plugin/src/styles.scss

@@ -1,12 +1,7 @@
-.status-description {
+@mixin number-card {
-	margin: var(--p-spacing) 0;
-
-	.number {
 	padding: var(--size-2-1) var(--size-4-1);
 	border-radius: var(--radius-s);
 	background-color: var(--color-base-30);
-		font-family: var(--font-monospace);
-		font-weight: var(--bold-weight);
 	font-size: var(--font-ui-small);
 
 	&.good {
@@ -16,6 +11,15 @@
 	&.bad {
 		background-color: rgba(var(--color-red-rgb), 0.35);
 	}
+}
+
+.status-description {
+	margin: var(--p-spacing) 0;
+
+	.number {
+		@include number-card;
+		font-family: var(--font-monospace);
+		font-weight: var(--bold-weight);
 	}
 
 	.error {
@@ -34,14 +38,11 @@
 		font-size: var(--h2-size);
 
 		.version {
-			display: block;
+			@include number-card;
-			font-size: var(--font-ui-smaller);
+			margin: var(--size-2-2) 0 0 var(--size-4-2);
-			margin-top: var(--size-2-2);
-			margin-left: var(--size-4-2);
-			padding: var(--size-2-1) var(--size-4-1);
 			background-color: var(--color-base-30);
 			color: var(--color-base-70);
-			border-radius: var(--radius-s);
+			font-size: var(--font-ui-smaller);
 		}
 	}
 
@@ -84,8 +85,24 @@
 	}
 }
 
-.log-message {
+.logs-view {
+	.logs-container {
+		max-height: 100%;
+		max-width: 100%;
+		overflow-y: auto;
+
+		.log-message {
 			font: var(--font-monospace);
+			margin-bottom: var(--size-2-1);
+			overflow-wrap: break-word;
+			white-space: pre-wrap;
+
+			.timestamp {
+				@include number-card;
+				font-family: var(--font-monospace);
+				font-weight: var(--bold-weight);
+				margin-right: var(--size-4-1);
+			}
 
 			&.DEBUG {
 				color: var(--color-base-50);
@@ -102,6 +119,8 @@
 			&.ERROR {
 				color: var(--color-red-rgb);
 			}
+		}
+	}
 }
 
 .history-card {

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()
+				p.createSpan({ text: "." });
-			.getMessages(LogLevel.DEBUG)
+			}
-			.forEach((message) => {
+		);
-				const messageContainer = container.createDiv({
+
+		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: ` | ${LogsView.formatTimestamp(
+							text: message.message,
-						message.timestamp
-					)} | `,
 						});
-				messageContainer.createEl("span", { text: message.message });
+					}
+				)
+			);
 		});
 	}
 }