fix(ui): apply corner style to remaining controls

apps/desktop/src/lib/__tests__/app/appTheme.spec.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { normalizeAppCornerStyle } from "@/lib/app/appTheme";
+
+describe("app corner style", () => {
+  it.each([
+    [null, "small"],
+    ["", "small"],
+    ["invalid", "small"],
+    ["none", "none"],
+    ["small", "small"],
+    ["large", "large"],
+  ])("normalizes %s to %s", (value, expected) => {
+    expect(normalizeAppCornerStyle(value)).toBe(expected);
+  });
+});

apps/desktop/src/lib/__tests__/app/startupTheme.spec.ts

@@ -9,17 +9,18 @@ if (!startupScript) throw new Error("Startup theme script not found");
 
 type StartupThemeOptions = {
   mode?: string | null;
+  cornerStyle?: string | null;
   prefersDark?: boolean;
   storageError?: boolean;
 };
 
-function runStartupTheme({ mode = null, prefersDark = false, storageError = false }: StartupThemeOptions = {}) {
+function runStartupTheme({ mode = null, cornerStyle = null, prefersDark = false, storageError = false }: StartupThemeOptions = {}) {
   const toggle = vi.fn();
-  const root = { classList: { toggle }, style: { colorScheme: "" } };
+  const root = { classList: { toggle }, dataset: { cornerStyle: "" }, style: { colorScheme: "" } };
   const localStorage = {
-    getItem: vi.fn(() => {
+    getItem: vi.fn((key: string) => {
       if (storageError) throw new DOMException("Storage unavailable", "SecurityError");
-      return mode;
+      return key === "dbx-corner-style" ? cornerStyle : mode;
     }),
   };
   const matchMedia = vi.fn(() => ({ matches: prefersDark }));
@@ -64,6 +65,18 @@ describe("startup theme", () => {
     expect(root.style.colorScheme).toBe("light");
   });
 
+  it.each([
+    [null, "small"],
+    ["invalid", "small"],
+    ["none", "none"],
+    ["small", "small"],
+    ["large", "large"],
+  ])("normalizes the startup corner style %s to %s", (cornerStyle, expected) => {
+    const { root } = runStartupTheme({ cornerStyle });
+
+    expect(root.dataset.cornerStyle).toBe(expected);
+  });
+
   it("falls back to light when localStorage is unavailable", () => {
     const { root, toggle } = runStartupTheme({ storageError: true, prefersDark: true });
 
@@ -80,7 +93,7 @@ describe("startup theme", () => {
 
   it("falls back to light when system appearance detection is unavailable", () => {
     const toggle = vi.fn();
-    const root = { classList: { toggle }, style: { colorScheme: "" } };
+    const root = { classList: { toggle }, dataset: { cornerStyle: "" }, style: { colorScheme: "" } };
 
     Function("document", "localStorage", "window", startupScript)({ documentElement: root }, { getItem: () => "system" }, {});
 

apps/desktop/src/lib/__tests__/editorThemes.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { resolveEditorTheme } from "@/lib/editor/editorThemes";
+import { buildSqlCompletionThemeRules, resolveEditorTheme } from "@/lib/editor/editorThemes";
 import type { AppThemePalette } from "@/lib/app/appTheme";
 import type { EditorTheme } from "@/stores/settingsStore";
 
@@ -43,3 +43,11 @@ describe("resolveEditorTheme", () => {
     }
   });
 });
+
+describe("SQL completion theme", () => {
+  it("uses the configurable large radius for the popup container", () => {
+    const rules = buildSqlCompletionThemeRules();
+
+    expect(rules[".cm-tooltip.cm-tooltip-autocomplete"]).toMatchObject({ borderRadius: "var(--dbx-radius-lg)" });
+  });
+});

apps/desktop/src/lib/app/appTheme.ts

@@ -2,10 +2,12 @@ import type { Theme } from "@tauri-apps/api/window";
 
 export const APP_THEME_STORAGE_KEY = "dbx-theme";
 export const APP_THEME_PALETTE_STORAGE_KEY = "dbx-theme-palette";
+export const APP_CORNER_STYLE_STORAGE_KEY = "dbx-corner-style";
 
 export type AppThemeMode = "light" | "dark" | "system";
 export type AppThemeAppearance = "light" | "dark";
 export type AppThemePalette = "pearl" | "mist" | "graphite" | "cobalt" | "sage" | "amber" | "blush" | "vscode" | "idea" | "xcode" | "jetbrains" | "cursor" | "claude";
+export type AppCornerStyle = "none" | "small" | "large";
 
 export type AppThemePaletteOption = {
   value: AppThemePalette;
@@ -45,6 +47,11 @@ export function normalizeAppThemePalette(value: string | null): AppThemePalette
   return "pearl";
 }
 
+export function normalizeAppCornerStyle(value: string | null): AppCornerStyle {
+  if (value === "none" || value === "large") return value;
+  return "small";
+}
+
 export function getAppThemePaletteClass(palette: AppThemePalette): string | null {
   return APP_THEME_PALETTES.find((option) => option.value === palette)?.className ?? null;
 }

apps/desktop/src/lib/editor/editorThemes.ts

@@ -780,7 +780,7 @@ export function buildEditorFontThemeRules(opts?: { fixedHeight?: boolean; scroll
       alignItems: "center",
       background: "transparent",
       border: "1px solid transparent",
-      borderRadius: "6px",
+      borderRadius: "var(--dbx-radius-fixed-6)",
       boxSizing: "border-box",
       color: "transparent",
       display: "inline-flex",
@@ -869,7 +869,7 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
       background: "var(--popover)",
       backgroundClip: "padding-box",
       border: colorMixValue("1px solid var(--border)", "1px solid color-mix(in oklch, var(--border) 82%, var(--foreground) 18%)"),
-      borderRadius: "8px",
+      borderRadius: "var(--dbx-radius-lg)",
       boxShadow: "0 8px 18px rgb(0 0 0 / 0.14)",
       color: "var(--popover-foreground)",
       fontFamily: `var(${EDITOR_FONT_FAMILY_CSS_VAR}, var(--font-mono, monospace))`,
@@ -898,7 +898,7 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
     },
     ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
       alignItems: "center",
-      borderRadius: "6px",
+      borderRadius: "var(--dbx-radius-fixed-6)",
       color: "var(--popover-foreground)",
       display: "flex",
       fontSize: `clamp(12px, var(${EDITOR_FONT_SIZE_CSS_VAR}, 13px), 14px)`,