Phase 4: Add Unraid management pages with sidebar layout

- Add UnraidLayout component with full sidebar navigation
- Add Array management page with disk tables and parity check controls
- Add Docker management page with container cards and filtering
- Add VMs management page with power controls (start/stop/pause/resume/reboot)
- Add Shares page with security levels and storage usage
- Add Users page with admin/user roles display
- Add Settings index with links to all settings pages
- Add Identification settings page with system info
- Add Notifications settings page with notification history
- Add Tools index with links to all tools
- Add Syslog page with live log viewing and filtering
- Add Diagnostics page with system health checks
- Update dashboard to use UnraidLayout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/pages/unraid/index.tsx

@@ -21,6 +21,7 @@ import { IconServer, IconAlertCircle, IconCheck } from '@tabler/icons-react';
 import { GetServerSidePropsContext } from 'next';
 
 import { SystemInfoCard, ArrayCard, DockerCard, VmsCard } from '~/components/Unraid/Dashboard';
+import { UnraidLayout } from '~/components/Unraid/Layout';
 import { getServerAuthSession } from '~/server/auth';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { checkForSessionOrAskForLogin } from '~/tools/server/loginBuilder';
@@ -219,66 +220,75 @@ export default function UnraidDashboardPage() {
     },
   });
 
+  const unreadNotifications = dashboard?.notifications?.filter((n) => !n.read).length || 0;
+
   // Loading state
   if (isLoading) {
     return (
-      <Container size="xl" py="xl">
-        <Stack align="center" spacing="md">
-          <Loader size="xl" />
-          <Text color="dimmed">Connecting to Unraid server...</Text>
-        </Stack>
-      </Container>
+      <UnraidLayout>
+        <Container size="xl" py="xl">
+          <Stack align="center" spacing="md">
+            <Loader size="xl" />
+            <Text color="dimmed">Connecting to Unraid server...</Text>
+          </Stack>
+        </Container>
+      </UnraidLayout>
     );
   }
 
   // Error state
   if (error) {
     return (
-      <Container size="xl" py="xl">
-        <Alert
-          icon={<IconAlertCircle size={16} />}
-          title="Connection Error"
-          color="red"
-          variant="filled"
-        >
-          {error.message}
-        </Alert>
-      </Container>
+      <UnraidLayout>
+        <Container size="xl" py="xl">
+          <Alert
+            icon={<IconAlertCircle size={16} />}
+            title="Connection Error"
+            color="red"
+            variant="filled"
+          >
+            {error.message}
+          </Alert>
+        </Container>
+      </UnraidLayout>
     );
   }
 
   // No data
   if (!dashboard) {
     return (
-      <Container size="xl" py="xl">
-        <Alert
-          icon={<IconAlertCircle size={16} />}
-          title="No Data"
-          color="yellow"
-        >
-          No data received from Unraid server. Please check your configuration.
-        </Alert>
-      </Container>
+      <UnraidLayout>
+        <Container size="xl" py="xl">
+          <Alert
+            icon={<IconAlertCircle size={16} />}
+            title="No Data"
+            color="yellow"
+          >
+            No data received from Unraid server. Please check your configuration.
+          </Alert>
+        </Container>
+      </UnraidLayout>
     );
   }
 
   return (
-    <Container size="xl" py="xl">
-      <Stack spacing="xl">
-        {/* Header */}
-        <Group position="apart">
-          <Group>
-            <ThemeIcon size={48} radius="md" variant="gradient" gradient={{ from: 'blue', to: 'cyan' }}>
-              <IconServer size={28} />
-            </ThemeIcon>
-            <div>
-              <Title order={1}>Unraid Dashboard</Title>
-              <Text color="dimmed" size="sm">
-                {dashboard.vars.name} - Unraid {dashboard.info.versions.unraid}
-              </Text>
-            </div>
+    <UnraidLayout notifications={unreadNotifications}>
+      <Container size="xl" py="xl">
+        <Stack spacing="xl">
+          {/* Header */}
+          <Group position="apart">
+            <Group>
+              <ThemeIcon size={48} radius="md" variant="gradient" gradient={{ from: 'blue', to: 'cyan' }}>
+                <IconServer size={28} />
+              </ThemeIcon>
+              <div>
+                <Title order={1}>Unraid Dashboard</Title>
+                <Text color="dimmed" size="sm">
+                  {dashboard.vars.name} - Unraid {dashboard.info.versions.unraid}
+                </Text>
+              </div>
+            </Group>
           </Group>
-        </Group>
 
         {/* Dashboard Grid */}
         <Grid>
@@ -326,6 +336,7 @@ export default function UnraidDashboardPage() {
         </Grid>
       </Stack>
     </Container>
+    </UnraidLayout>
   );
 }