From b255aaeac18ac03d2a2d1d6519ed34e022c04f9f Mon Sep 17 00:00:00 2001
From: ginnoir <ginnoir@users.noreply.github.com>
Date: Mon, 1 Jun 2026 17:53:21 -0500
Subject: [PATCH] fix: refresh server components after nav style change to fix
 broken layout

---
 src/hooks/use-theme.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
index 9550650..afa877a 100644
--- a/src/hooks/use-theme.ts
+++ b/src/hooks/use-theme.ts
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import type {
   Palette,
   ThemeMode,
@@ -67,6 +68,7 @@ export function useTheme(
   const [dashLayout, setDashLayoutState] = useState<DashLayout>(initial.dashLayout ?? "classic");
   const [calView, setCalViewState] = useState<CalView>(initial.calView ?? "month");
   const [navStyle, setNavStyleState] = useState<NavStyle>(initial.navStyle ?? "rail-desktop");
+  const router = useRouter();
 
   // Re-apply data-nav whenever the viewport crosses the mobile breakpoint.
   useEffect(() => {
@@ -158,9 +160,11 @@ export function useTheme(
     (next: NavStyle) => {
       setNavStyleState(next);
       applyTheme({ palette, mode, fontPair, density, navStyle: next });
-      persist({ navStyle: next });
+      if (signedIn) {
+        void setUserTheme({ navStyle: next }).then(() => router.refresh());
+      }
     },
-    [palette, mode, fontPair, density, persist],
+    [palette, mode, fontPair, density, signedIn, router],
   );
 
   return {