feat: refactor layout structure and add error boundary for Navidrome integration

app/components/RootLayoutClient.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+import { AudioPlayerProvider } from "../components/AudioPlayerContext";
+import { NavidromeProvider, useNavidrome } from "../components/NavidromeContext";
+import { NavidromeConfigProvider } from "../components/NavidromeConfigContext";
+import { ThemeProvider } from "../components/ThemeProvider";
+import { PostHogProvider } from "../components/PostHogProvider";
+import Ihateserverside from "./ihateserverside";
+import DynamicViewportTheme from "./DynamicViewportTheme";
+import { LoginForm } from "./start-screen";
+
+function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
+  const { error } = useNavidrome();
+  if (error) {
+    return (
+      <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+        {/* top right add the logo located in /icon-192.png here and the word mice */}
+        <div className="absolute top-4 left-4 flex items-center space-x-2">
+          <img src="/icon-192.png" alt="Logo" className="h-8 w-8" />
+          <span className="text-xl font-semibold">mice | navidrome client</span>
+        </div>
+
+        <div className="w-full max-w-sm">
+        <LoginForm />
+        </div>      
+    </div>
+    );
+  }
+  return <>{children}</>;
+}
+
+export default function RootLayoutClient({ children }: { children: React.ReactNode }) {
+  return (
+    <PostHogProvider>
+      <ThemeProvider>
+        <DynamicViewportTheme />
+        <NavidromeConfigProvider>
+          <NavidromeProvider>
+            <NavidromeErrorBoundary>
+              <AudioPlayerProvider>
+                <Ihateserverside>
+                  {children}
+                </Ihateserverside>
+              </AudioPlayerProvider>
+            </NavidromeErrorBoundary>
+          </NavidromeProvider>
+        </NavidromeConfigProvider>
+      </ThemeProvider>
+    </PostHogProvider>
+  );
+}

app/components/start-screen.tsx

@@ -126,7 +126,6 @@ export function LoginForm({
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
-              <FaPalette className="w-5 h-5" />
               Customize Your Experience
             </CardTitle>
             <CardDescription>
@@ -137,7 +136,10 @@ export function LoginForm({
             <div className="flex flex-col gap-6">
               {/* Theme Selection */}
               <div className="grid gap-3">
-                <Label htmlFor="theme">Theme</Label>
+                <span>
+                  <FaPalette className="w-5 h-5" />
+                  <Label htmlFor="theme">Theme</Label>
+                </span>
                 <Select value={theme} onValueChange={setTheme}>
                   <SelectTrigger>
                     <SelectValue placeholder="Select a theme" />
@@ -204,7 +206,6 @@ export function LoginForm({
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            <FaServer className="w-5 h-5" />
             Connect to Navidrome
           </CardTitle>
           <CardDescription>

app/layout.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import localFont from "next/font/local";
 import "./globals.css";
-import { AudioPlayerProvider } from "./components/AudioPlayerContext";
-import { NavidromeProvider } from "./components/NavidromeContext";
-import { NavidromeConfigProvider } from "./components/NavidromeConfigContext";
-import { ThemeProvider } from "./components/ThemeProvider";
-import { PostHogProvider } from "./components/PostHogProvider";
-import { Metadata } from "next";
-import Ihateserverside from './components/ihateserverside';
-import DynamicViewportTheme from './components/DynamicViewportTheme';
+import RootLayoutClient from "./components/RootLayoutClient";
 
-export const metadata: Metadata = {
+export const metadata = {
   title: {
     template: 'mice | %s',
     default: 'mice',
@@ -47,8 +40,6 @@ interface LayoutProps {
 }
 
 export default function Layout({ children }: LayoutProps) {
-  
-
   return (
     <html lang="en">
       <head>
@@ -58,16 +49,10 @@ export default function Layout({ children }: LayoutProps) {
               (function() {
                 const savedTheme = localStorage.getItem('theme');
                 const theme = (savedTheme === 'blue' || savedTheme === 'violet' || savedTheme === 'red' || savedTheme === 'rose' || savedTheme === 'orange' || savedTheme === 'green' || savedTheme === 'yellow') ? savedTheme : 'blue';
-                
-                // Apply theme class
                 document.documentElement.classList.add('theme-' + theme);
-                
-                // Apply dark mode based on system preference
                 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                   document.documentElement.classList.add('dark');
                 }
-                
-                // Set initial theme color based on theme
                 const themeColors = {
                   blue: '#09090b',
                   violet: '#030712',
@@ -77,7 +62,6 @@ export default function Layout({ children }: LayoutProps) {
                   green: '#0c0a09',
                   yellow: '#0c0a09'
                 };
-                
                 const metaThemeColor = document.createElement('meta');
                 metaThemeColor.name = 'theme-color';
                 metaThemeColor.content = themeColors[theme];
@@ -88,20 +72,7 @@ export default function Layout({ children }: LayoutProps) {
         />
       </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background`}>
-        <PostHogProvider>
-          <ThemeProvider>
-            <DynamicViewportTheme />
-            <NavidromeConfigProvider>
-              <NavidromeProvider>
-                <AudioPlayerProvider>
-                  <Ihateserverside>
-                    {children}
-                  </Ihateserverside>
-                </AudioPlayerProvider>
-              </NavidromeProvider>
-            </NavidromeConfigProvider>
-          </ThemeProvider>
-        </PostHogProvider>
+        <RootLayoutClient>{children}</RootLayoutClient>
       </body>
     </html>
   );

app/page.tsx

@@ -10,7 +10,7 @@ import { Album } from '@/lib/navidrome';
 import { LoginForm } from '@/app/components/start-screen';
 
 export default function MusicPage() {
-  const { albums, isLoading, error } = useNavidrome();
+  const { albums, isLoading} = useNavidrome();
   const [recentAlbums, setRecentAlbums] = useState<Album[]>([]);
   const [newestAlbums, setNewestAlbums] = useState<Album[]>([]);
 
@@ -24,28 +24,7 @@ export default function MusicPage() {
     }
   }, [albums]);
 
-  if (error) {
-    return (
-      // <div className="h-full px-4 py-6 lg:px-8 pb-24">
-      //   <div className="text-center">
-      //     <p className="text-xl font-semibold text-red/50 mb-2">Connection Error</p>
-      //     <p className="text-muted-foreground">{error}</p>
-      //     <p className="text-sm text-muted-foreground mt-2">
-      //     If you need to change your settings, please go to the{' '}
-      //       <a
-      //         href="/settings"
-      //         className="text-sm text-blue-500 hover:underline"
-      //       >
-      //         Settings
-      //       </a>
-      //     </p>
-      //   </div>
-      // </div>
-      <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
-        <LoginForm className="max-w-md mx-auto" />
-      </div>
-    );
-  }
+
 
   return (
     <div className="h-full px-4 py-6 lg:px-8 pb-24">