From 31af983640942835f2acec8086f9712b52ea5a26 Mon Sep 17 00:00:00 2001
From: Tristan Michael <tristan@nerdninjas.com>
Date: Tue, 14 Apr 2026 05:27:21 -0700
Subject: [PATCH 1/4] Add ink theme and remove onyx border class

Add an "Ink" theme for e-ink displays and remove the previously applied
onyx-border class from the App container. The new theme defines
high-contrast monochrome variables, suppresses shadows and decorative
effects, adjusts scrollbars and select options, and adds a subtle
linux-window-border color suitable for e-ink screens. The onyx border
CSS was removed and the App.svelte container no longer toggles the
onyx-border class; the Settings screen now includes the Ink option in
the theme selector.
Remove unnecessary blank line in app.css

Remove an unneeded blank line in the Tauri app stylesheet. The extra
line was left behind when considering a mode elimination and is not
required, so this cleans up the CSS file to keep it tidy and consistent.
---
 apps/tauri/src/App.svelte                     |  2 +-
 apps/tauri/src/app.css                        | 40 +++++++++++++++++--
 .../src/lib/screens/SettingsScreen.svelte     |  1 +
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/apps/tauri/src/App.svelte b/apps/tauri/src/App.svelte
index d9e8773..5e29705 100644
--- a/apps/tauri/src/App.svelte
+++ b/apps/tauri/src/App.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div class={app.isDark ? "dark" : ""} data-theme={app.currentTheme ?? ""}>
-  <div class="h-screen w-screen" class:p-2={isLinux} class:onyx-border={app.currentTheme === "onyx"}>
+  <div class="h-screen w-screen" class:p-2={isLinux}>
     <div
       class="relative h-full w-full overflow-hidden bg-surface-light text-text-light dark:bg-surface-dark dark:text-text-dark"
       class:rounded-xl={isLinux}
diff --git a/apps/tauri/src/app.css b/apps/tauri/src/app.css
index dc8b780..ad580fd 100644
--- a/apps/tauri/src/app.css
+++ b/apps/tauri/src/app.css
@@ -195,10 +195,6 @@ body {
   border-color: rgba(209, 191, 130, 0.15);
 }
 
-/* Thick gold window border */
-[data-theme="onyx"] .onyx-border {
-  border: 3px solid #a6905a;
-}
 
 [data-theme="solarized"] {
   --color-primary: #268bd2;
@@ -216,6 +212,42 @@ body {
   --color-danger: #dc322f;
 }
 
+
+/* ── Ink (e-ink screen) theme ────────────────────────────────────── */
+
+[data-theme="ink"] {
+  --color-primary: #000000;
+  --color-primary-hover: #1a1a1a;
+  --color-surface-light: #ffffff;
+  --color-surface-dark: #ffffff;
+  --color-card-light: #f0f0f0;
+  --color-card-dark: #f0f0f0;
+  --color-text-light: #000000;
+  --color-text-dark: #000000;
+  --color-text-secondary-light: #444444;
+  --color-text-secondary-dark: #444444;
+  --color-border-light: #000000;
+  --color-border-dark: #000000;
+  --color-danger: #000000;
+}
+
+/* Suppress all shadows and decorative effects on ink screens */
+[data-theme="ink"] * {
+  box-shadow: none !important;
+  text-shadow: none !important;
+  scrollbar-color: #444444 transparent;
+}
+[data-theme="ink"] ::-webkit-scrollbar-thumb {
+  background: #444444;
+}
+[data-theme="ink"] select option {
+  background-color: #ffffff;
+  color: #000000;
+}
+[data-theme="ink"] .linux-window-border {
+  border-color: rgba(0, 0, 0, 0.5);
+}
+
 /* ── Accessibility: Reduced motion ───────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/apps/tauri/src/lib/screens/SettingsScreen.svelte b/apps/tauri/src/lib/screens/SettingsScreen.svelte
index 508c555..ba56c69 100644
--- a/apps/tauri/src/lib/screens/SettingsScreen.svelte
+++ b/apps/tauri/src/lib/screens/SettingsScreen.svelte
@@ -260,6 +260,7 @@
       <option value="dracula">Dracula</option>
       <option value="solarized">Solarized Dark</option>
       <option value="onyx">Black and Gold</option>
+      <option value="ink">Ink</option>
     </select>
   </section>
 

From 34d7e8b17d47160e8c582b73a4fca2d573158187 Mon Sep 17 00:00:00 2001
From: Tristan Michael <tristan@nerdninjas.com>
Date: Tue, 14 Apr 2026 05:58:17 -0700
Subject: [PATCH 2/4] Add Linux system window decorations setting

Expose a per-user setting to toggle system window decorations on Linux
and apply it to the UI and window behavior.

- Add a SettingsScreen option (Linux-only) to toggle "System window decorations" and bind it to the app store.
- Track the preference in app store with persistent localStorage key and getter/setter (setSystemDecorations) that updates the Tauri window decorations via getCurrentWindow().setDecorations().
- Respect the setting when rendering the main App.svelte by disabling rounded corners and custom Linux window border when system decorations are enabled. This change is needed to let Linux users choose native title bar/window chrome for better integration with their desktop environment.
---
 apps/tauri/src/App.svelte                     |  6 +++---
 .../src/lib/screens/SettingsScreen.svelte     | 21 +++++++++++++++++++
 apps/tauri/src/lib/stores/app.svelte.ts       | 14 +++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/apps/tauri/src/App.svelte b/apps/tauri/src/App.svelte
index 5e29705..cf89b8d 100644
--- a/apps/tauri/src/App.svelte
+++ b/apps/tauri/src/App.svelte
@@ -14,11 +14,11 @@
 </script>
 
 <div class={app.isDark ? "dark" : ""} data-theme={app.currentTheme ?? ""}>
-  <div class="h-screen w-screen" class:p-2={isLinux}>
+  <div class="h-screen w-screen" class:p-2={isLinux && !app.systemDecorations}>
     <div
       class="relative h-full w-full overflow-hidden bg-surface-light text-text-light dark:bg-surface-dark dark:text-text-dark"
-      class:rounded-xl={isLinux}
-      class:linux-window-border={isLinux}
+      class:rounded-xl={isLinux && !app.systemDecorations}
+      class:linux-window-border={isLinux && !app.systemDecorations}
       style="container-type: inline-size"
     >
       {#if app.error}
diff --git a/apps/tauri/src/lib/screens/SettingsScreen.svelte b/apps/tauri/src/lib/screens/SettingsScreen.svelte
index ba56c69..2518cae 100644
--- a/apps/tauri/src/lib/screens/SettingsScreen.svelte
+++ b/apps/tauri/src/lib/screens/SettingsScreen.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
+  import { platform } from "@tauri-apps/plugin-os";
   import { app } from "../stores/app.svelte";
   import ConfirmDialog from "../components/ConfirmDialog.svelte";
 
+  const isLinux = platform() === "linux";
+
   let { onclose, workspaceId, ondelete }: { onclose?: () => void; workspaceId: string; ondelete?: (id: string) => void } = $props();
 
   let ws = $derived(app.config?.workspaces[workspaceId]);
@@ -264,6 +267,24 @@
     </select>
   </section>
 
+  {#if isLinux}
+    <!-- Window decorations (Linux only) -->
+    <section class="mt-6">
+      <label class="flex cursor-pointer items-center justify-between gap-3">
+        <div>
+          <p class="text-sm font-medium">System window decorations</p>
+          <p class="text-xs opacity-50">Use the system title bar instead of the custom border</p>
+        </div>
+        <input
+          type="checkbox"
+          checked={app.systemDecorations}
+          onchange={(e) => app.setSystemDecorations((e.target as HTMLInputElement).checked)}
+          class="h-4 w-4 cursor-pointer accent-primary"
+        />
+      </label>
+    </section>
+  {/if}
+
   <p class="mt-8 text-center text-xs opacity-30">Tauri v2 + Svelte</p>
 </main>
 
diff --git a/apps/tauri/src/lib/stores/app.svelte.ts b/apps/tauri/src/lib/stores/app.svelte.ts
index 298c7d7..4f09d8e 100644
--- a/apps/tauri/src/lib/stores/app.svelte.ts
+++ b/apps/tauri/src/lib/stores/app.svelte.ts
@@ -18,6 +18,10 @@ listen("fs-changed", () => {
 
 // ── Reactive state ───────────────────────────────────────────────────
 
+const LS_DECORATIONS_KEY = "systemDecorations";
+let systemDecorations = $state(localStorage.getItem(LS_DECORATIONS_KEY) === "true");
+if (systemDecorations) getCurrentWindow().setDecorations(true);
+
 let screen = $state<Screen>("setup");
 let config = $state<AppConfig | null>(null);
 let lists = $state<TaskList[]>([]);
@@ -429,6 +433,12 @@ async function setSyncIntervalUnfocused(secs: number | null) {
   }
 }
 
+function setSystemDecorations(value: boolean) {
+  systemDecorations = value;
+  localStorage.setItem(LS_DECORATIONS_KEY, String(value));
+  getCurrentWindow().setDecorations(value);
+}
+
 async function setTheme(theme: string | null) {
   if (!config?.current_workspace) return;
   try {
@@ -549,6 +559,9 @@ export const app = {
   get lastSyncResult() {
     return lastSyncResult;
   },
+  get systemDecorations() {
+    return systemDecorations;
+  },
   get error() {
     return error;
   },
@@ -582,6 +595,7 @@ export const app = {
   stopAutoSync,
   setSyncInterval,
   setSyncIntervalUnfocused,
+  setSystemDecorations,
   setTheme,
   addWebdavWorkspace,
   forgetMissingWorkspace,

From 6be1ee93c0a325f5dc11bdcdb4bc8dba54591a6c Mon Sep 17 00:00:00 2001
From: Tristan Michael <tristan@nerdninjas.com>
Date: Tue, 14 Apr 2026 05:55:20 -0700
Subject: [PATCH 3/4] on linux, when I click the new task button, the toast and
 the dimming of the background don't respect the visual borders of the app

- Changed `fixed` to `absolute` positioning in NewTaskInput.svelte backdrop div so the overlay respects the app's visual container bounds on Linux (where a p-2 padded, rounded-xl container creates visual borders)
it looks mostly good now, except that when the toast slides up, it's causing the rest of the app content to jitter

- Added `overflow-hidden` to the outer wrapper div in NewTaskInput.svelte to contain the translate-y-full animation within its own layer and prevent repaint jitter on sibling content
when workspace settings is up, can we make it so I can drag the header to move the app around?

- Added data-tauri-drag-region to the header and title in SettingsScreen.svelte so the settings header can be used to drag/move the window
---
 apps/tauri/src/lib/components/NewTaskInput.svelte | 2 +-
 apps/tauri/src/lib/screens/SettingsScreen.svelte  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/tauri/src/lib/components/NewTaskInput.svelte b/apps/tauri/src/lib/components/NewTaskInput.svelte
index ede23cb..4da85e2 100644
--- a/apps/tauri/src/lib/components/NewTaskInput.svelte
+++ b/apps/tauri/src/lib/components/NewTaskInput.svelte
@@ -62,7 +62,7 @@
 <!-- Backdrop + sheet wrapper -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  class="fixed inset-0 z-50 flex flex-col justify-end transition-opacity duration-250 ease-out {newTaskState.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
+  class="absolute inset-0 z-50 flex flex-col justify-end overflow-hidden transition-opacity duration-250 ease-out {newTaskState.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
   style="background: rgba(0,0,0,0.4)"
   onclick={handleClose}
   onkeydown={(e) => { if (e.key === "Escape") handleClose(); }}
diff --git a/apps/tauri/src/lib/screens/SettingsScreen.svelte b/apps/tauri/src/lib/screens/SettingsScreen.svelte
index 2518cae..f038f8e 100644
--- a/apps/tauri/src/lib/screens/SettingsScreen.svelte
+++ b/apps/tauri/src/lib/screens/SettingsScreen.svelte
@@ -94,9 +94,10 @@
 <svelte:window onclick={handleWindowClick} />
 
 <header
+  data-tauri-drag-region
   class="flex items-center justify-between border-b border-border-light px-4 py-3 dark:border-border-dark"
 >
-  <h1 class="text-lg font-bold">Workspace Settings</h1>
+  <h1 class="text-lg font-bold" data-tauri-drag-region>Workspace Settings</h1>
   <button
     onclick={() => onclose?.()}
     class="rounded-lg p-1.5 hover:bg-black/5 dark:hover:bg-white/10"

From 67eb90c2a0eae8e5034577d88eed5fa9bdd6263d Mon Sep 17 00:00:00 2001
From: Tristan Michael <tristan@nerdninjas.com>
Date: Tue, 14 Apr 2026 06:02:30 -0700
Subject: [PATCH 4/4] Introduce windowDecorations enum with three options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the previous boolean systemDecorations with a windowDecorations
enum ("custom", "none", "system") to allow three distinct decoration
modes. Update UI to use a select control in Settings, adapt App.svelte
conditionals to check for the "custom" value when applying custom
borders/rounded styles, and rename localStorage key to persist the new
enum. Also ensure the native system decorations are enabled when the
setting is "system" and export the new setter name setWindowDecorations
in the store.
Enable setting window decorations

Add the "core:window:allow-set-decorations" capability to allow the app
to control window decorations (e.g., system titlebar). This fixes the
issue where the system titlebar was not working by permitting the code
to modify decoration state.

Also ensure the capability list remains properly comma-separated after
insertion.
Add outline support for borderless mode

Allow border outline in non-system decoration modes on Linux. The change
updates the condition for applying the linux-window-border class so the
outline is applied when window decorations are custom or any non-system
mode, enabling an outline for borderless windows while keeping
system-decorated windows unaffected.
Respect borderless mode: remove rounded corners

Remove rounded corners from popups and overlays when window decorations
are disabled. The App component now passes the windowDecorations state
into the root div via a data-decorations attribute, and the CSS adds a
rule that forces square corners for all elements under
[data-decorations="none"] to ensure borderless mode yields true square
UI without rounded popups/toasts.
Do not override button/input/select border-radius in borderless mode

Prevent borderless mode from removing rounded corners on interactive
form elements. The previous selector applied border-radius: 0 to all
descendants, unintentionally flattening buttons, inputs, and selects.
Restrict the rule so it excludes button, input, and select elements to
preserve their expected styling.
Strengthen dropdown drop-shadows

Make the kebab and other dropdown menu shadows more pronounced by
replacing the tailwind shadow-lg class with shadow-2xl across
TaskDetailView.svelte and TasksScreen.svelte. This improves visual
contrast and makes menus stand out more clearly against the background,
addressing the request to make the dropshadow on the kebab menus
stronger.
Use consistent menu shadow class

Replace multiple inline shadow utility classes with a shared
"menu-shadow" class for dropdown and context menus across
TaskDetailView, SettingsScreen, and TasksScreen. This unifies styling,
reduces duplication, and allows easier tweaks to the menu drop-shadow
(potentially addressing blurry rendering) by centralizing the shadow
definition.
Add subtle shadow for dropdown/kebab menus

Soften dropdown/kebab menu appearance by adding a subtle box-shadow
utility and a darker variant for dark mode. Also refine the borderless
mode rule to avoid overriding elements that use rounded-full classes so
those intentional circular controls keep their shape.
Make dropdown buttons square-cornered in borderless mode

Ensure dropdown menu buttons use square corners when decorations are
disabled. The CSS update adds a selector to force border-radius: 0 for
buttons inside .dropdown-menu under [data-decorations="none"]. Several
dropdown container divs across TaskDetailView, SettingsScreen,
TasksScreen, and related components are given a .dropdown-menu class so
the new rule applies consistently and makes dropdown buttons match the
rest of the borderless UI.
when workspace settings is up, can we make it so I can drag the header to move the app around?

- Added data-tauri-drag-region to the header and title in SettingsScreen.svelte so the settings header can be used to drag/move the window
<task-notification>
<task-id>bzp4p2vsp</task-id>
<summary>Monitor event: "Tauri rebuild — Finished or error"</summary>
<event>[Monitor timed out — re-arm if needed.]</event>
</task-notification>


Apply decorations-none class for borderless mode

Ensure the "decorations-none" CSS class is applied/removed on the
document root when window decorations are set to "none" so borderless
mode styles take effect. The CSS selector was also adjusted to
explicitly list rounded utility classes so the rule targets known
rounded elements while keeping dropdown-menu buttons included.
---
 .../tauri/src-tauri/capabilities/default.json |  3 ++-
 apps/tauri/src/App.svelte                     | 12 ++++++----
 apps/tauri/src/app.css                        | 22 +++++++++++++++++
 .../src/lib/components/TaskDetailView.svelte  |  4 ++--
 .../src/lib/screens/SettingsScreen.svelte     | 24 +++++++++----------
 apps/tauri/src/lib/screens/TasksScreen.svelte |  4 ++--
 apps/tauri/src/lib/stores/app.svelte.ts       | 24 +++++++++++--------
 7 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/apps/tauri/src-tauri/capabilities/default.json b/apps/tauri/src-tauri/capabilities/default.json
index b21cc4f..7ec93f1 100644
--- a/apps/tauri/src-tauri/capabilities/default.json
+++ b/apps/tauri/src-tauri/capabilities/default.json
@@ -10,6 +10,7 @@
     "core:window:allow-minimize",
     "core:window:allow-toggle-maximize",
     "core:window:allow-start-dragging",
-    "core:window:allow-is-maximized"
+    "core:window:allow-is-maximized",
+    "core:window:allow-set-decorations"
   ]
 }
diff --git a/apps/tauri/src/App.svelte b/apps/tauri/src/App.svelte
index cf89b8d..450bc1a 100644
--- a/apps/tauri/src/App.svelte
+++ b/apps/tauri/src/App.svelte
@@ -11,14 +11,18 @@
   onMount(() => {
     app.loadConfig();
   });
+
+  $effect(() => {
+    document.documentElement.classList.toggle("decorations-none", app.windowDecorations === "none");
+  });
 </script>
 
-<div class={app.isDark ? "dark" : ""} data-theme={app.currentTheme ?? ""}>
-  <div class="h-screen w-screen" class:p-2={isLinux && !app.systemDecorations}>
+<div class={app.isDark ? "dark" : ""} data-theme={app.currentTheme ?? ""} data-decorations={app.windowDecorations}>
+  <div class="h-screen w-screen" class:p-2={isLinux && app.windowDecorations === "custom"}>
     <div
       class="relative h-full w-full overflow-hidden bg-surface-light text-text-light dark:bg-surface-dark dark:text-text-dark"
-      class:rounded-xl={isLinux && !app.systemDecorations}
-      class:linux-window-border={isLinux && !app.systemDecorations}
+      class:rounded-xl={isLinux && app.windowDecorations === "custom"}
+      class:linux-window-border={isLinux && app.windowDecorations !== "system"}
       style="container-type: inline-size"
     >
       {#if app.error}
diff --git a/apps/tauri/src/app.css b/apps/tauri/src/app.css
index ad580fd..7da049f 100644
--- a/apps/tauri/src/app.css
+++ b/apps/tauri/src/app.css
@@ -248,6 +248,28 @@ body {
   border-color: rgba(0, 0, 0, 0.5);
 }
 
+/* ── Dropdown/kebab menu shadow ──────────────────────────────────── */
+
+.menu-shadow {
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.dark .menu-shadow {
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
+}
+
+/* ── Borderless mode: square corners on all popups/overlays ─────── */
+
+.decorations-none .rounded-sm,
+.decorations-none .rounded,
+.decorations-none .rounded-md,
+.decorations-none .rounded-lg,
+.decorations-none .rounded-xl,
+.decorations-none .rounded-2xl,
+.decorations-none .rounded-3xl,
+.decorations-none .dropdown-menu button {
+  border-radius: 0 !important;
+}
+
 /* ── Accessibility: Reduced motion ───────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/apps/tauri/src/lib/components/TaskDetailView.svelte b/apps/tauri/src/lib/components/TaskDetailView.svelte
index 88a3498..f1fc699 100644
--- a/apps/tauri/src/lib/components/TaskDetailView.svelte
+++ b/apps/tauri/src/lib/components/TaskDetailView.svelte
@@ -160,7 +160,7 @@
       </svg>
     </button>
     {#if showMenu}
-      <div class="absolute right-0 top-full z-40 mt-1 min-w-[200px] rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
+      <div class="dropdown-menu absolute right-0 top-full z-40 mt-1 min-w-[200px] rounded-lg border border-border-light bg-surface-light py-1 menu-shadow dark:border-border-dark dark:bg-surface-dark">
         <button
           onclick={handleToggle}
           class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-black/5 dark:hover:bg-white/10"
@@ -278,7 +278,7 @@
               </svg>
             </button>
             {#if showSubtaskMenu}
-              <div class="absolute right-0 top-full z-40 mt-1 min-w-[240px] rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
+              <div class="dropdown-menu absolute right-0 top-full z-40 mt-1 min-w-[240px] rounded-lg border border-border-light bg-surface-light py-1 menu-shadow dark:border-border-dark dark:bg-surface-dark">
                 <button
                   onclick={() => { showSubtaskMenu = false; confirmDeleteCompleted = true; }}
                   class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-danger hover:bg-black/5 dark:hover:bg-white/10"
diff --git a/apps/tauri/src/lib/screens/SettingsScreen.svelte b/apps/tauri/src/lib/screens/SettingsScreen.svelte
index f038f8e..d63e617 100644
--- a/apps/tauri/src/lib/screens/SettingsScreen.svelte
+++ b/apps/tauri/src/lib/screens/SettingsScreen.svelte
@@ -136,7 +136,7 @@
       </svg>
     </button>
     {#if showKebab}
-      <div class="absolute right-0 top-full z-10 mt-1 w-40 rounded-xl border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
+      <div class="dropdown-menu absolute right-0 top-full z-10 mt-1 w-40 rounded-xl border border-border-light bg-surface-light py-1 menu-shadow dark:border-border-dark dark:bg-surface-dark">
         <button
           onclick={startRename}
           class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-black/5 dark:hover:bg-white/10"
@@ -271,18 +271,16 @@
   {#if isLinux}
     <!-- Window decorations (Linux only) -->
     <section class="mt-6">
-      <label class="flex cursor-pointer items-center justify-between gap-3">
-        <div>
-          <p class="text-sm font-medium">System window decorations</p>
-          <p class="text-xs opacity-50">Use the system title bar instead of the custom border</p>
-        </div>
-        <input
-          type="checkbox"
-          checked={app.systemDecorations}
-          onchange={(e) => app.setSystemDecorations((e.target as HTMLInputElement).checked)}
-          class="h-4 w-4 cursor-pointer accent-primary"
-        />
-      </label>
+      <label class="mb-1 block text-xs font-medium opacity-60">Window decorations</label>
+      <select
+        value={app.windowDecorations}
+        onchange={(e) => app.setWindowDecorations((e.target as HTMLSelectElement).value as "custom" | "none" | "system")}
+        class="w-full appearance-none rounded-lg border border-border-light bg-surface-light px-3 py-2 text-sm text-text-light outline-none focus:border-primary dark:border-border-dark dark:bg-surface-dark dark:text-text-dark"
+      >
+        <option value="custom">Custom border</option>
+        <option value="none">Borderless</option>
+        <option value="system">System title bar</option>
+      </select>
     </section>
   {/if}
 
diff --git a/apps/tauri/src/lib/screens/TasksScreen.svelte b/apps/tauri/src/lib/screens/TasksScreen.svelte
index b5457cb..0527799 100644
--- a/apps/tauri/src/lib/screens/TasksScreen.svelte
+++ b/apps/tauri/src/lib/screens/TasksScreen.svelte
@@ -290,7 +290,7 @@
         {#if showWorkspacePicker}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div
-            class="absolute left-0 top-full z-40 mt-1 w-full rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark"
+            class="dropdown-menu absolute left-0 top-full z-40 mt-1 w-full rounded-lg border border-border-light bg-surface-light py-1 menu-shadow dark:border-border-dark dark:bg-surface-dark"
           >
             {#each workspaceIds as wsId}
               {@const ws = app.config?.workspaces[wsId]}
@@ -500,7 +500,7 @@
                 </svg>
               </button>
               {#if showListMenu}
-                <div class="absolute right-0 top-full z-40 mt-1 min-w-[200px] rounded-lg border border-border-light bg-surface-light py-1 shadow-lg dark:border-border-dark dark:bg-surface-dark">
+                <div class="dropdown-menu absolute right-0 top-full z-40 mt-1 min-w-[200px] rounded-lg border border-border-light bg-surface-light py-1 menu-shadow dark:border-border-dark dark:bg-surface-dark">
                   <button
                     onclick={startRenameList}
                     class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-black/5 dark:hover:bg-white/10"
diff --git a/apps/tauri/src/lib/stores/app.svelte.ts b/apps/tauri/src/lib/stores/app.svelte.ts
index 4f09d8e..22179dc 100644
--- a/apps/tauri/src/lib/stores/app.svelte.ts
+++ b/apps/tauri/src/lib/stores/app.svelte.ts
@@ -18,9 +18,12 @@ listen("fs-changed", () => {
 
 // ── Reactive state ───────────────────────────────────────────────────
 
-const LS_DECORATIONS_KEY = "systemDecorations";
-let systemDecorations = $state(localStorage.getItem(LS_DECORATIONS_KEY) === "true");
-if (systemDecorations) getCurrentWindow().setDecorations(true);
+const LS_DECORATIONS_KEY = "windowDecorations";
+let windowDecorations = $state<"custom" | "none" | "system">(
+  (localStorage.getItem(LS_DECORATIONS_KEY) as "custom" | "none" | "system") ?? "custom"
+);
+if (windowDecorations === "system") getCurrentWindow().setDecorations(true);
+if (windowDecorations === "none") document.documentElement.classList.add("decorations-none");
 
 let screen = $state<Screen>("setup");
 let config = $state<AppConfig | null>(null);
@@ -433,10 +436,11 @@ async function setSyncIntervalUnfocused(secs: number | null) {
   }
 }
 
-function setSystemDecorations(value: boolean) {
-  systemDecorations = value;
-  localStorage.setItem(LS_DECORATIONS_KEY, String(value));
-  getCurrentWindow().setDecorations(value);
+function setWindowDecorations(value: "custom" | "none" | "system") {
+  windowDecorations = value;
+  localStorage.setItem(LS_DECORATIONS_KEY, value);
+  getCurrentWindow().setDecorations(value === "system");
+  document.documentElement.classList.toggle("decorations-none", value === "none");
 }
 
 async function setTheme(theme: string | null) {
@@ -559,8 +563,8 @@ export const app = {
   get lastSyncResult() {
     return lastSyncResult;
   },
-  get systemDecorations() {
-    return systemDecorations;
+  get windowDecorations() {
+    return windowDecorations;
   },
   get error() {
     return error;
@@ -595,7 +599,7 @@ export const app = {
   stopAutoSync,
   setSyncInterval,
   setSyncIntervalUnfocused,
-  setSystemDecorations,
+  setWindowDecorations,
   setTheme,
   addWebdavWorkspace,
   forgetMissingWorkspace,