Add toggle for column blur setting

Fixes #3

Author: sleroq

data.json

@@ -27,6 +27,7 @@
   "backgroundBlur": 0,
   "columnTransparency": 100,
   "columnBlur": 8,
+  "enableColumnBlur": false,
   "migrationGroupProperty": "status",
   "migrationQueryProperty": "legacyKanbanSource",
   "columnNameMaxLength": 40

src/kanban-view.ts

@@ -887,6 +887,7 @@ export class KanbanView extends BasesView {
   }
 
   private applyBackgroundStyles(): void {
+    const columnBlurEnabled = this.plugin.settings.enableColumnBlur;
     const config = {
       imageInput: this.config?.get(BACKGROUND_IMAGE_OPTION_KEY),
       brightness:
@@ -900,12 +901,15 @@ export class KanbanView extends BasesView {
         (this.config?.get(COLUMN_TRANSPARENCY_OPTION_KEY) as
           | number
           | undefined) ?? this.plugin.settings.columnTransparency,
-      columnBlur:
+      columnBlur: columnBlurEnabled
+        ?
         (this.config?.get(COLUMN_BLUR_OPTION_KEY) as number | undefined) ??
-        this.plugin.settings.columnBlur,
+          this.plugin.settings.columnBlur
+        : 0,
     };
 
     const styles = resolveBackgroundStyles(this.app as App, config);
+    this.rootEl.classList.toggle("bases-kanban-column-blur-enabled", columnBlurEnabled);
 
     this.rootEl.style.setProperty(
       "--bases-kanban-column-transparency",
@@ -2292,7 +2296,7 @@ export class KanbanView extends BasesView {
     this.plugin.unregisterKanbanView(this);
   }
 
-  static getViewOptions() {
-    return getKanbanViewOptions();
+  static getViewOptions(columnBlurEnabled: boolean) {
+    return getKanbanViewOptions(columnBlurEnabled);
   }
 }

src/kanban-view/options.ts

@@ -11,7 +11,11 @@ import {
   PINNED_COLUMNS_OPTION_KEY,
 } from "./constants";
 
-export function getKanbanViewOptions() {
+export function getKanbanViewOptions(columnBlurEnabled: boolean) {
+  const columnBlurDisplayName = columnBlurEnabled
+    ? "Column blur"
+    : "Column blur (enable in the settings)";
+
   return [
     {
       key: COLUMN_ORDER_OPTION_KEY,
@@ -81,11 +85,11 @@ export function getKanbanViewOptions() {
     },
     {
       key: COLUMN_BLUR_OPTION_KEY,
-      displayName: "Column blur",
+      displayName: columnBlurDisplayName,
       type: "slider" as const,
-      default: 8,
+      default: columnBlurEnabled ? 8 : 0,
       min: 0,
-      max: 20,
+      max: columnBlurEnabled ? 20 : 0,
       step: 1,
     },
     {

src/main.ts

@@ -84,7 +84,7 @@ export default class BasesKanbanPlugin extends Plugin {
       icon: "lucide-kanban",
       factory: (controller, containerEl) =>
         new KanbanView(controller, containerEl, this),
-      options: () => KanbanView.getViewOptions(),
+      options: () => KanbanView.getViewOptions(this.settings.enableColumnBlur),
     });
   }
 

src/settings.ts

@@ -43,6 +43,7 @@ export interface BasesKanbanSettings {
   backgroundBlur: number;
   columnTransparency: number;
   columnBlur: number;
+  enableColumnBlur: boolean;
 
   // Migration
   migrationGroupProperty: string;
@@ -91,6 +92,7 @@ export const DEFAULT_SETTINGS: BasesKanbanSettings = {
   backgroundBlur: 0,
   columnTransparency: 100,
   columnBlur: 8,
+  enableColumnBlur: false,
 
   // Migration
   migrationGroupProperty: "status",
@@ -583,19 +585,45 @@ export class KanbanSettingTab extends PluginSettingTab {
       );
 
     new Setting(containerEl)
+      .setName("Enable column blur")
+      .setDesc(
+        "Turns on column backdrop blur globally. This can cause rendering artifacts on macOS when Obsidian translucent window is enabled.",
+      )
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.enableColumnBlur)
+          .onChange(async (value) => {
+            this.plugin.settings.enableColumnBlur = value;
+            await this.plugin.saveSettings();
+            this.display();
+          }),
+      );
+
+    const isColumnBlurEnabled = this.plugin.settings.enableColumnBlur;
+    const disabledReason = "Enable column blur to adjust this slider.";
+    const columnBlurDescription = isColumnBlurEnabled
+      ? "Blur amount for column backgrounds (0-20px)"
+      : "Blur amount for column backgrounds (0-20px). Enable column blur first.";
+
+    const columnBlurSetting = new Setting(containerEl)
       .setName("Column blur")
-      .setDesc("Blur amount for column backgrounds (0-20px)")
+      .setDesc(columnBlurDescription)
       .addSlider((slider) =>
         slider
           .setLimits(0, 20, 1)
           .setValue(this.plugin.settings.columnBlur)
           .setDynamicTooltip()
+          .setDisabled(!isColumnBlurEnabled)
           .onChange(async (value) => {
             this.plugin.settings.columnBlur = value;
             await this.plugin.saveSettings();
           }),
       );
 
+    if (!isColumnBlurEnabled) {
+      columnBlurSetting.settingEl.title = disabledReason;
+    }
+
     new Setting(containerEl).setName("Migration").setHeading();
 
     new Setting(containerEl)

styles.css

@@ -53,10 +53,14 @@
 	overflow: hidden;
 	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(var(--bases-kanban-column-blur, 8px));
+	backdrop-filter: none;
 	border: 1px solid var(--background-modifier-border);
 }
 
+.bases-kanban-container.bases-kanban-column-blur-enabled .bases-kanban-column {
+	backdrop-filter: blur(var(--bases-kanban-column-blur, 8px));
+}
+
 .bases-kanban-placeholder {
 	color: var(--text-muted);
 	text-align: center;