Fix logs UX

plugin/src/database/database.ts

@@ -88,7 +88,7 @@ export class Database {
 		key: T,
 		value: SyncSettings[T]
 	): Promise<void> {
-		let newSettings = { ...this._settings, [key]: value };
+		const newSettings = { ...this._settings, [key]: value };
 		Logger.getInstance().debug(
 			`Setting ${key} to ${value}, new settings: ${JSON.stringify(
 				newSettings,

plugin/src/styles.scss

@@ -86,8 +86,10 @@
 }
 
 .logs-view {
+	display: flex;
+	flex-direction: column;
+
 	.logs-container {
-		max-height: 100%;
 		max-width: 100%;
 		overflow-y: auto;
 

plugin/src/views/logs-view.ts

@@ -1,8 +1,8 @@
 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 { Logger } from "src/tracing/logger";
-import { Database } from "src/database/database";
+import type { Database } from "src/database/database";
 
 export class LogsView extends ItemView {
 	public static readonly TYPE = "logs-view";
@@ -43,17 +43,18 @@ export class LogsView extends ItemView {
 
 		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 {
 		const container = this.containerEl.children[1];
+
+		let logsContainer = container
+			.getElementsByClassName("logs-container")
+			.item(0);
+		const scrollPosition = logsContainer?.scrollTop;
+
+		console.log(scrollPosition);
+
 		container.empty();
 
 		container.createEl("h4", { text: "VaultLink logs" });
@@ -88,15 +89,19 @@ export class LogsView extends ItemView {
 			return;
 		}
 
-		container.createDiv({ cls: "logs-container" }, (logsContainer) => {
+		logsContainer = container.createDiv(
-			logs.forEach((message) =>
+			{ cls: "logs-container" },
+			(logsContainer) => {
+				logs.slice(-100).forEach((message) =>
 					logsContainer.createDiv(
 						{
 							cls: ["log-message", message.level],
 						},
 						(messageContainer) => {
 							messageContainer.createEl("span", {
-							text: LogsView.formatTimestamp(message.timestamp),
+								text: LogsView.formatTimestamp(
+									message.timestamp
+								),
 								cls: "timestamp",
 							});
 							messageContainer.createEl("span", {
@@ -105,6 +110,13 @@ export class LogsView extends ItemView {
 						}
 					)
 				);
-		});
+			}
+		);
+
+		if (scrollPosition) {
+			logsContainer.scrollTop = scrollPosition;
+		} else {
+			logsContainer.scrollTop = logsContainer.scrollHeight;
+		}
 	}
 }