Add a square corners toggle for a border-radius-free interface

src/stores/uiStore.ts

@@ -8,14 +8,18 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 type Theme = 'light' | 'dark';
+type Radius = 'rounded' | 'square';
 
 interface UIState {
   theme: Theme;
+  radius: Radius;
   sidebarOpen: boolean;
   activeSection: string;
 
   toggleTheme: () => void;
   setTheme: (theme: Theme) => void;
+  toggleRadius: () => void;
+  setRadius: (radius: Radius) => void;
   toggleSidebar: () => void;
   setSidebarOpen: (open: boolean) => void;
   setActiveSection: (section: string) => void;
@@ -29,11 +33,16 @@ function applyThemeClass(theme: Theme) {
   }
 }
 
+function applyRadiusAttribute(radius: Radius) {
+  document.documentElement.dataset.radius = radius;
+}
+
 export const useUIStore = create<UIState>()(
   persist(
     (set, get) => ({
       theme:
         typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+      radius: 'rounded',
       sidebarOpen: typeof window !== 'undefined' ? (window.matchMedia?.('(min-width: 768px)').matches ?? true) : true,
       activeSection: '',
 
@@ -48,6 +57,17 @@ export const useUIStore = create<UIState>()(
         set({ theme });
       },
 
+      toggleRadius: () => {
+        const next = get().radius === 'rounded' ? 'square' : 'rounded';
+        applyRadiusAttribute(next);
+        set({ radius: next });
+      },
+
+      setRadius: (radius) => {
+        applyRadiusAttribute(radius);
+        set({ radius });
+      },
+
       toggleSidebar: () => {
         set({ sidebarOpen: !get().sidebarOpen });
       },
@@ -64,11 +84,13 @@ export const useUIStore = create<UIState>()(
       name: 'stalwart-ui',
       partialize: (state) => ({
         theme: state.theme,
+        radius: state.radius,
       }),
       onRehydrateStorage: () => {
         return (state) => {
           if (state) {
             applyThemeClass(state.theme);
+            applyRadiusAttribute(state.radius ?? 'rounded');
           }
         };
       },