feat: Move service worker registration to a dedicated component for improved client-side handling

app/components/RootLayoutClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { AudioPlayerProvider } from "../components/AudioPlayerContext";
 import { OfflineNavidromeProvider, useOfflineNavidrome } from "../components/OfflineNavidromeProvider";
 import { NavidromeConfigProvider } from "../components/NavidromeConfigContext";
@@ -15,8 +15,9 @@ import { LoginForm } from "./start-screen";
 import Image from "next/image";
 import PageTransition from "./PageTransition";
 
-// Service Worker registration - moved to useEffect to ensure it only runs client-side
+// ServiceWorkerRegistration component to handle registration
-React.useEffect(() => {
+function ServiceWorkerRegistration() {
+  useEffect(() => {
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/sw.js')
         .then((registration) => {
@@ -26,7 +27,10 @@ React.useEffect(() => {
           console.error('Service Worker registration failed:', error);
         });
     }
-}, []);
+  }, []);
+  
+  return null;
+}
 
 function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
   // For now, since we're switching to offline-first, we'll handle errors differently
@@ -100,6 +104,7 @@ export default function RootLayoutClient({ children }: { children: React.ReactNo
       <ThemeProvider>
         <DynamicViewportTheme />
         <ThemeColorHandler />
+        <ServiceWorkerRegistration />
         <NavidromeConfigProvider>
           <OfflineNavidromeProvider>
             <NavidromeErrorBoundary>