fix: dark/light toggle, encrypted note display, overflow

frontend/package.json

@@ -31,6 +31,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
+    "rosewood-ui": "github:voidreamer/rosewood-ui",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -13,7 +13,7 @@ import HouseholdPage from './pages/HouseholdPage';
 import ListPage from './pages/ListPage';
 import InvitePage from './pages/InvitePage';
 import SettingsPage from './pages/SettingsPage';
-import ThemeShowcase from './pages/ThemeShowcase';
+// import ThemeShowcase from './pages/ThemeShowcase';
 import InfraLearn from './pages/InfraLearn';
 
 // Components
@@ -82,7 +82,7 @@ function App() {
         <Route path="/login" element={<LoginPage />} />
         <Route path="/callback" element={<CallbackPage />} />
         <Route path="/invite/:inviteId" element={<InvitePage />} />
-        <Route path="/themes" element={<ThemeShowcase />} />
+        {/* <Route path="/themes" element={<ThemeShowcase />} /> */}
         <Route path="/learn" element={<InfraLearn />} />
 
         {/* Protected routes */}

frontend/src/components/AttachmentList.module.css

@@ -31,15 +31,6 @@
   border-color: var(--color-primary);
 }
 
-[data-theme="brutalist"] .card {
-  box-shadow: 3px 3px 0 var(--color-shadow);
-}
-
-[data-theme="brutalist"] .card:hover {
-  transform: translate(1px, 1px);
-  box-shadow: 2px 2px 0 var(--color-shadow);
-}
-
 .preview {
   display: flex;
   align-items: center;
@@ -139,15 +130,6 @@
   background: color-mix(in srgb, var(--color-error) 80%, black);
 }
 
-[data-theme="brutalist"] .actionButton {
-  box-shadow: 2px 2px 0 var(--color-shadow);
-}
-
-[data-theme="brutalist"] .actionButton:hover:not(:disabled) {
-  transform: translate(1px, 1px);
-  box-shadow: 1px 1px 0 var(--color-shadow);
-}
-
 /* Empty state */
 .empty {
   display: flex;

frontend/src/components/AttachmentUploader.module.css

@@ -135,20 +135,6 @@
   color: var(--color-error);
 }
 
-[data-theme="brutalist"] .dropzone {
-  border-style: solid;
-  border-width: 3px;
-  box-shadow: 4px 4px 0 var(--color-shadow);
-}
-
-[data-theme="brutalist"] .dropzone:hover:not(.disabled) {
-  transform: translate(1px, 1px);
-  box-shadow: 3px 3px 0 var(--color-shadow);
-}
-
-[data-theme="brutalist"] .uploadItem {
-  box-shadow: 2px 2px 0 var(--color-shadow);
-}
 
 @media (max-width: 768px) {
   .dropzone {

frontend/src/components/ChecklistView.module.css

@@ -65,11 +65,6 @@
   border-radius: var(--border-radius);
   outline: none;
 }
-
-[data-theme="brutalist"] .addInput {
-  box-shadow: 3px 3px 0 var(--color-shadow);
-}
-
 .addInput:focus {
   border-color: var(--color-primary);
 }
@@ -92,15 +87,6 @@
   transition: all var(--transition-fast);
 }
 
-[data-theme="brutalist"] .addButton {
-  box-shadow: 4px 4px 0 var(--color-shadow);
-}
-
-[data-theme="brutalist"] .addButton:hover {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0 var(--color-shadow);
-}
-
 .addButton:hover {
   opacity: 0.9;
 }
@@ -169,14 +155,6 @@
   background: var(--color-surface-hover);
 }
 
-[data-theme="brutalist"] .item:global(.dragOver) {
-  box-shadow: 0 0 0 2px var(--color-primary);
-}
-
-[data-theme="brutalist"] .item {
-  box-shadow: 3px 3px 0 var(--color-shadow);
-}
-
 .item:hover {
   background: var(--color-surface-hover);
 }
@@ -354,14 +332,23 @@
   border: var(--border-width) dashed var(--color-border);
   border-radius: var(--border-radius);
 }
-
-[data-theme="brutalist"] .emptyState {
-  box-shadow: 4px 4px 0 var(--color-shadow);
-}
-
 /* Responsive */
 @media (max-width: 768px) {
   .itemActions {
     opacity: 1;
   }
 }
+
+/* ── Rosewood Glass Theme ── */
+:global([data-theme="rosewood"]) .item {
+  background: rgba(32, 28, 26, 0.5);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-color: rgba(232, 168, 192, 0.06);
+  border-radius: 14px;
+}
+
+:global([data-theme="rosewood"]) .item:hover {
+  background: rgba(53, 47, 43, 0.6);
+  border-color: rgba(232, 168, 192, 0.12);
+}

frontend/src/components/EncryptionSetup.module.css

@@ -324,3 +324,20 @@
     transform: rotate(360deg);
   }
 }
+
+/* ── Rosewood Glass Theme ── */
+:global([data-theme="rosewood"]) .container {
+  background: rgba(32, 28, 26, 0.92);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(232, 168, 192, 0.1);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+:global([data-theme="rosewood"]) .setupButton {
+  background: linear-gradient(135deg, #e8a8c0, #b898d0);
+  color: #1a1614;
+  border: none;
+  border-radius: 12px;
+}

frontend/src/components/KeyboardShortcutsModal.module.css

@@ -34,13 +34,6 @@
     transform: translateY(0);
   }
 }
-
-[data-theme="brutalist"] .modal,
-[data-theme="sketchy"] .modal,
-[data-theme="sketchyDark"] .modal {
-  box-shadow: 6px 6px 0 var(--color-shadow);
-}
-
 .header {
   display: flex;
   align-items: center;

frontend/src/components/Layout.module.css

@@ -254,3 +254,62 @@
   background: var(--bg-primary);
   overflow-y: auto;
 }
+
+/* ── Rosewood Glass Theme ── */
+:global([data-theme="rosewood"]) .sidebar,
+:global([data-theme="rosewood-light"]) .sidebar {
+  background: rgba(32, 28, 26, 0.65);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  border-right-color: rgba(232, 168, 192, 0.08);
+}
+
+:global([data-theme="rosewood-light"]) .sidebar {
+  background: rgba(255, 255, 255, 0.72);
+  border-right-color: rgba(0, 0, 0, 0.06);
+}
+
+:global([data-theme="rosewood"]) .mobileHeader,
+:global([data-theme="rosewood-light"]) .mobileHeader {
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+:global([data-theme="rosewood"]) .mobileHeader {
+  background: rgba(26, 22, 20, 0.8);
+  border-bottom-color: rgba(232, 168, 192, 0.08);
+}
+
+:global([data-theme="rosewood-light"]) .mobileHeader {
+  background: rgba(255, 255, 255, 0.8);
+  border-bottom-color: rgba(0, 0, 0, 0.06);
+}
+
+:global([data-theme="rosewood"]) .sidebarLogo {
+  background: linear-gradient(135deg, #e8a8c0, #b898d0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+:global([data-theme="rosewood-light"]) .sidebarLogo {
+  background: linear-gradient(135deg, #d4849c, #9878b8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+:global([data-theme="rosewood"]) .navItem:hover,
+:global([data-theme="rosewood-light"]) .navItem:hover {
+  background: rgba(232, 168, 192, 0.08);
+}
+
+:global([data-theme="rosewood"]) .navItemActive {
+  background: rgba(232, 168, 192, 0.12);
+  border-color: rgba(232, 168, 192, 0.2);
+}
+
+:global([data-theme="rosewood-light"]) .navItemActive {
+  background: rgba(212, 132, 156, 0.08);
+  border-color: rgba(212, 132, 156, 0.15);
+}

frontend/src/components/Layout.tsx

@@ -36,7 +36,7 @@ export default function Layout({ children }: LayoutProps) {
     } else {
       // Save current light theme and switch to dark
       setPreviousLightTheme(theme);
-      setTheme('dark');
+      setTheme('rosewood');
     }
   };
 

frontend/src/components/NoteEditor.module.css

@@ -43,20 +43,9 @@
   cursor: pointer;
   transition: all var(--transition-fast);
 }
-
-[data-theme="brutalist"] .saveButton {
-  box-shadow: 3px 3px 0 var(--color-shadow);
-}
-
 .saveButton:hover:not(:disabled) {
   opacity: 0.9;
 }
-
-[data-theme="brutalist"] .saveButton:hover:not(:disabled) {
-  transform: translate(1px, 1px);
-  box-shadow: 2px 2px 0 var(--color-shadow);
-}
-
 .saveButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -78,11 +67,6 @@
   outline: none;
   transition: border-color var(--transition-fast);
 }
-
-[data-theme="brutalist"] .textarea {
-  box-shadow: 4px 4px 0 var(--color-shadow);
-}
-
 .textarea:focus {
   border-color: var(--color-primary);
 }

frontend/src/components/ShoppingListView.module.css

@@ -61,11 +61,6 @@
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--border-radius);
 }
-
-[data-theme="brutalist"] .addForm {
-  box-shadow: 4px 4px 0 var(--color-shadow);
-}
-
 .addFormRow {
   display: flex;
   gap: var(--spacing-sm);
@@ -190,11 +185,6 @@
   transition: all var(--transition-fast);
   font-family: var(--font-body);
 }
-
-[data-theme="brutalist"] .submitButton {
-  box-shadow: 3px 3px 0 var(--color-shadow);
-}
-
 .submitButton:hover:not(:disabled) {
   opacity: 0.9;
 }
@@ -267,14 +257,6 @@
   background: var(--color-surface-hover);
 }
 
-[data-theme="brutalist"] .item:global(.dragOver) {
-  box-shadow: 0 0 0 2px var(--color-primary);
-}
-
-[data-theme="brutalist"] .item {
-  box-shadow: 3px 3px 0 var(--color-shadow);
-}
-
 .item:hover {
   background: var(--color-surface-hover);
 }
@@ -504,11 +486,6 @@
   border: var(--border-width) dashed var(--color-border);
   border-radius: var(--border-radius);
 }
-
-[data-theme="brutalist"] .emptyState {
-  box-shadow: 4px 4px 0 var(--color-shadow);
-}
-
 .emptyState p {
   font-weight: 600;
   color: var(--color-text);
@@ -537,3 +514,17 @@
     flex-direction: column;
   }
 }
+
+/* ── Rosewood Glass Theme ── */
+:global([data-theme="rosewood"]) .item {
+  background: rgba(32, 28, 26, 0.5);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-color: rgba(232, 168, 192, 0.06);
+  border-radius: 14px;
+}
+
+:global([data-theme="rosewood"]) .item:hover {
+  background: rgba(53, 47, 43, 0.6);
+  border-color: rgba(232, 168, 192, 0.12);
+}