Simple frontend added, tests are required

2026-08-01 08:41:25 +00:00
parent b6ace3f68b
commit e87d8089bf
24 changed files with 1473 additions and 0 deletions
@@ -0,0 +1,57 @@
+import React from 'react'
+import { AppBar, Toolbar, Typography, IconButton, Box, Container, Badge } from '@mui/material'
+import { Brightness4, Brightness7, FiberManualRecord } from '@mui/icons-material'
+import { useUIStore } from '../stores/uiStore'
+
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const { theme, toggleTheme, wsConnected } = useUIStore()
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <AppBar position="static" color="default" elevation={1}>
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1, fontWeight: 600 }}>
+            🎵 Audio Splitter
+          </Typography>
+
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Badge
+              color={wsConnected ? 'success' : 'error'}
+              variant="dot"
+              sx={{ mr: 1 }}
+            >
+              <FiberManualRecord
+                sx={{
+                  fontSize: 12,
+                  color: wsConnected ? 'green' : 'red',
+                  visibility: 'hidden',
+                }}
+              />
+            </Badge>
+            <Typography variant="caption" color="text.secondary">
+              {wsConnected ? 'Connected' : 'Disconnected'}
+            </Typography>
+
+            <IconButton onClick={toggleTheme} color="inherit">
+              {theme === 'light' ? <Brightness4 /> : <Brightness7 />}
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </AppBar>
+
+      <Container maxWidth="lg" sx={{ flex: 1, py: 4 }}>
+        {children}
+      </Container>
+
+      <Box component="footer" sx={{ py: 2, textAlign: 'center', borderTop: 1, borderColor: 'divider' }}>
+        <Typography variant="body2" color="text.secondary">
+          Audio Splitter v0.1.0 • Built with ❤️
+        </Typography>
+      </Box>
+    </Box>
+  )
+}