Add vertical scroll and position saving

Author: sleroq

src/kanban-view.ts

@@ -18,6 +18,7 @@ import {
   BACKGROUND_BRIGHTNESS_OPTION_KEY,
   BACKGROUND_IMAGE_OPTION_KEY,
   BOARD_SCROLL_POSITION_KEY,
+  BOARD_SCROLL_TOP_POSITION_KEY,
   COLUMN_ORDER_OPTION_KEY,
   COLUMN_TRANSPARENCY_OPTION_KEY,
   LOCAL_CARD_ORDER_OPTION_KEY,
@@ -207,11 +208,11 @@ export class KanbanView extends BasesView {
 
     this.refreshElementIndexes();
 
-    const scrollLeftToRestore =
-      previousBoardScrollLeft > 0
-        ? previousBoardScrollLeft
-        : this.loadBoardScrollPosition();
-    this.restoreBoardScrollLeft(scrollLeftToRestore);
+    const { scrollLeft: scrollLeftToRestore, scrollTop: scrollTopToRestore } =
+      this.loadBoardScrollPosition();
+    const finalScrollLeft =
+      previousBoardScrollLeft > 0 ? previousBoardScrollLeft : scrollLeftToRestore;
+    this.restoreBoardScrollPosition(finalScrollLeft, scrollTopToRestore);
   }
 
   private getBoardScrollLeft(): number {
@@ -225,53 +226,82 @@ export class KanbanView extends BasesView {
     return boardEl.scrollLeft;
   }
 
-  private restoreBoardScrollLeft(scrollLeft: number): void {
-    if (scrollLeft <= 0) {
-      return;
-    }
-
+  private restoreBoardScrollPosition(scrollLeft: number, scrollTop: number): void {
     const boardEl = this.rootEl.querySelector<HTMLElement>(
       ".bases-kanban-board",
     );
     if (boardEl === null) {
       return;
     }
 
-    boardEl.scrollLeft = scrollLeft;
+    if (scrollLeft > 0) {
+      boardEl.scrollLeft = scrollLeft;
+    }
+    if (scrollTop > 0) {
+      boardEl.scrollTop = scrollTop;
+    }
+
     window.requestAnimationFrame(() => {
       if (this.rootEl.contains(boardEl)) {
-        boardEl.scrollLeft = scrollLeft;
+        if (scrollLeft > 0) {
+          boardEl.scrollLeft = scrollLeft;
+        }
+        if (scrollTop > 0) {
+          boardEl.scrollTop = scrollTop;
+        }
       }
     });
   }
 
   private setupBoardScrollListener(boardEl: HTMLElement): void {
     boardEl.addEventListener("scroll", () => {
-      this.debouncedSaveBoardScrollPosition(boardEl.scrollLeft);
+      this.debouncedSaveBoardScrollPosition(
+        boardEl.scrollLeft,
+        boardEl.scrollTop,
+      );
     });
   }
 
-  private debouncedSaveBoardScrollPosition(scrollLeft: number): void {
+  private debouncedSaveBoardScrollPosition(
+    scrollLeft: number,
+    scrollTop: number,
+  ): void {
     if (this.scrollSaveTimeout !== null) {
       window.clearTimeout(this.scrollSaveTimeout);
     }
     this.scrollSaveTimeout = window.setTimeout(() => {
-      this.saveBoardScrollPosition(scrollLeft);
+      this.saveBoardScrollPosition(scrollLeft, scrollTop);
       this.scrollSaveTimeout = null;
     }, this.plugin.settings.scrollDebounceMs);
   }
 
-  private saveBoardScrollPosition(scrollLeft: number): void {
+  private saveBoardScrollPosition(scrollLeft: number, scrollTop: number): void {
     this.config?.set(BOARD_SCROLL_POSITION_KEY, String(scrollLeft));
+    this.config?.set(BOARD_SCROLL_TOP_POSITION_KEY, String(scrollTop));
   }
 
-  private loadBoardScrollPosition(): number {
-    const configValue = this.config?.get(BOARD_SCROLL_POSITION_KEY);
-    if (typeof configValue !== "string" || configValue.length === 0) {
-      return 0;
+  private loadBoardScrollPosition(): { scrollLeft: number; scrollTop: number } {
+    const scrollLeftValue = this.config?.get(BOARD_SCROLL_POSITION_KEY);
+    const scrollTopValue = this.config?.get(BOARD_SCROLL_TOP_POSITION_KEY);
+
+    let scrollLeft = 0;
+    let scrollTop = 0;
+
+    if (typeof scrollLeftValue === "string" && scrollLeftValue.length > 0) {
+      const parsedLeft = Number.parseInt(scrollLeftValue, 10);
+      if (!Number.isNaN(parsedLeft)) {
+        scrollLeft = parsedLeft;
+      }
     }
-    const parsed = Number.parseInt(configValue, 10);
-    return Number.isNaN(parsed) ? 0 : parsed;
+
+    if (typeof scrollTopValue === "string" && scrollTopValue.length > 0) {
+      const parsedTop = Number.parseInt(scrollTopValue, 10);
+      if (!Number.isNaN(parsedTop)) {
+        scrollTop = parsedTop;
+      }
+    }
+
+    return { scrollLeft, scrollTop };
   }
 
   private renderPlaceholder(): void {

src/kanban-view/constants.ts

@@ -3,6 +3,7 @@ export const NO_VALUE_COLUMN_KEY = "__bases_kanban_no_value__";
 export const COLUMN_ORDER_OPTION_KEY = "columnOrder";
 export const LOCAL_CARD_ORDER_OPTION_KEY = "localCardOrder";
 export const BOARD_SCROLL_POSITION_KEY = "boardScrollPosition";
+export const BOARD_SCROLL_TOP_POSITION_KEY = "boardScrollTopPosition";
 export const BACKGROUND_IMAGE_OPTION_KEY = "backgroundImage";
 export const BACKGROUND_BRIGHTNESS_OPTION_KEY = "backgroundBrightness";
 export const BACKGROUND_BLUR_OPTION_KEY = "backgroundBlur";

styles.css

@@ -1,34 +1,54 @@
 .bases-kanban-container {
 	width: 100%;
-	height: auto;
+	height: 100%;
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
 	overflow: hidden;
 	padding: var(--size-4-3);
 	position: relative;
+	box-sizing: border-box;
 }
 
 /* Background layer with image, blur and brightness */
 .bases-kanban-background {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
+	position: fixed;
+	inset: 0;
+	width: 100vw;
+	height: 100vh;
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
 	z-index: 0;
 	pointer-events: none;
 }
 
+/* Dark scrim overlay for readability */
+.bases-kanban-background::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: radial-gradient(
+		ellipse at center,
+		transparent 0%,
+		rgba(0, 0, 0, 0.1) 50%,
+		rgba(0, 0, 0, 0.3) 100%
+	);
+	pointer-events: none;
+}
+
 /* Column with transparency support */
 .bases-kanban-column {
 	flex: 0 0 var(--bases-kanban-column-width, 280px);
 	background: color-mix(in srgb, var(--background-secondary), transparent calc(100% - var(--bases-kanban-column-transparency, 1) * 100%));
 	border-radius: var(--radius-m);
 	display: flex;
 	flex-direction: column;
-	overflow: hidden;
+	overflow: visible;
 	position: relative;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+	backdrop-filter: blur(8px);
+	border: 1px solid var(--background-modifier-border);
 }
 
 .bases-kanban-placeholder {
@@ -42,12 +62,14 @@
 .bases-kanban-board {
 	display: flex;
 	gap: var(--size-4-3);
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 	overflow-x: auto;
-	overflow-y: hidden;
+	overflow-y: auto;
 	outline: none;
 	position: relative;
 	z-index: 1;
+	align-items: flex-start;
 }
 
 .bases-kanban-column-header {
@@ -117,18 +139,25 @@
 }
 
 .bases-kanban-cards {
-	overflow-y: auto;
 	padding: var(--size-4-2);
 	display: flex;
 	flex-direction: column;
 	gap: var(--size-4-2);
+	flex: 1;
 }
 
 .bases-kanban-card {
 	background: var(--background-primary);
 	border: 1px solid var(--background-modifier-border);
 	border-radius: var(--radius-s);
 	padding: var(--size-4-2) var(--size-4-3);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+	transition: box-shadow 0.15s ease, transform 0.1s ease;
+}
+
+.bases-kanban-card:hover {
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+	transform: translateY(-1px);
 }
 
 .bases-kanban-card.bases-kanban-card-selected {