feat: connect application input and output boundaries

src/presentation/providers/theme-provider.jsx

@@ -11,6 +11,7 @@ import {
   normalizeColorSchemePreference,
   resolveColorScheme,
 } from "../../application/policies/color-scheme.js";
+import { useApplication } from "./application-provider.js";
 
 /**
  * @typedef {{
@@ -30,18 +31,13 @@ function systemPrefersDark() {
 }
 
 /**
- * @param {{
- *   storage?: import("../../application/ports/storage-port.js").StoragePort,
- *   children: React.ReactNode
- * }} props
+ * @param {{ children: React.ReactNode }} props
  */
-export function ThemeProvider({ storage, children }) {
-  const [preference, updatePreference] = useState(() => {
-    const result = storage?.read("COLOR_SCHEME");
-    return normalizeColorSchemePreference(
-      result?.ok ? result.value : undefined,
-    );
-  });
+export function ThemeProvider({ children }) {
+  const { preferences } = useApplication();
+  const [preference, updatePreference] = useState(
+    preferences.getColorScheme,
+  );
   const [darkSystemTheme, setDarkSystemTheme] = useState(systemPrefersDark);
   const resolvedTheme = resolveColorScheme(preference, darkSystemTheme);
 
@@ -70,10 +66,10 @@ export function ThemeProvider({ storage, children }) {
         setPreference(next) {
           const normalized = normalizeColorSchemePreference(next);
           updatePreference(normalized);
-          storage?.write("COLOR_SCHEME", normalized);
+          preferences.setColorScheme(normalized);
         },
       }),
-    [preference, resolvedTheme, storage],
+    [preference, preferences, resolvedTheme],
   );
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;