From 67eb90c2a0eae8e5034577d88eed5fa9bdd6263d Mon Sep 17 00:00:00 2001 From: Tristan Michael Date: Tue, 14 Apr 2026 06:02:30 -0700 Subject: [PATCH] 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 bzp4p2vsp Monitor event: "Tauri rebuild — Finished or error" [Monitor timed out — re-arm if needed.] 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"); + }); -
-
+
+
{#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 @@ {#if showMenu} -
+
{#if showSubtaskMenu} -
+
{#if showKebab} -
+
{#if showListMenu} -
+