sschuhmann/rehearshalhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: app shell with sidebar + bug fixes

Browse Source 
UI:
- Add persistent sidebar (210px) with band switcher dropdown, Library/Player/Settings nav, user avatar row, and sign-out button
- Align design system CSS vars to CLAUDE.md spec (#0f0f12 bg, #e8a22a amber accent, rgba borders/text)
- Remove light mode toggle (no light mode in v1)
- Homepage auto-redirects to first band; shows create-band form only when no bands exist
- Strip full-page wrappers from all pages (shell owns layout)
- Remove debug console.log statements from SongPage

Bug fixes:
- nginx: trailing slash on `location ^~ /api/v1/bands/` caused 301 redirect on POST, dropping the request body — removed trailing slash
- API: _member_from_request (used by nc-scan stream) only accepted Bearer token, not httpOnly cookie — add rh_token cookie fallback
- API: internal_secret config field now has a dev default so the service starts without INTERNAL_SECRET env var set

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mistral Vibe
2026-04-01 09:43:47 +02:00
parent ae7bf96dc1
commit d9035acdff
11 changed files with 763 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
web/src/App.tsx
View File

@@ -1,8 +1,8 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import "./index.css";
import { ThemeProvider, useTheme } from "./theme";
import { isLoggedIn } from "./api/client";
import { AppShell } from "./components/AppShell";
import { LoginPage } from "./pages/LoginPage";
import { HomePage } from "./pages/HomePage";
import { BandPage } from "./pages/BandPage";
@@ -19,81 +19,63 @@ function PrivateRoute({ children }: { children: React.ReactNode }) {
return isLoggedIn() ? <>{children}</> : <Navigate to="/login" replace />;
}
function ThemeToggle() {
const { theme, toggle } = useTheme();
function ShellRoute({ children }: { children: React.ReactNode }) {
return (
<button
onClick={toggle}
title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
style={{
position: "fixed",
bottom: 20,
right: 20,
zIndex: 9999,
background: "var(--bg-subtle)",
border: "1px solid var(--border)",
borderRadius: "50%",
width: 36,
height: 36,
cursor: "pointer",
fontSize: 16,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "var(--text-muted)",
boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
}}
>
{theme === "dark" ? "☀" : "◑"}
</button>
<PrivateRoute>
<AppShell>{children}</AppShell>
</PrivateRoute>
);
}
export default function App() {
return (
<ThemeProvider>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route
path="/bands/:bandId"
element={
<PrivateRoute>
<BandPage />
</PrivateRoute>
}
/>
<Route
path="/bands/:bandId/sessions/:sessionId"
element={
<PrivateRoute>
<SessionPage />
</PrivateRoute>
}
/>
<Route
path="/bands/:bandId/songs/:songId"
element={
<PrivateRoute>
<SongPage />
</PrivateRoute>
}
/>
<Route
path="/settings"
element={
<PrivateRoute>
<SettingsPage />
</PrivateRoute>
}
/>
<Route path="/invite/:token" element={<InvitePage />} />
<Route path="/" element={<PrivateRoute><HomePage /></PrivateRoute>} />
</Routes>
<ThemeToggle />
</BrowserRouter>
</QueryClientProvider>
</ThemeProvider>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/invite/:token" element={<InvitePage />} />
<Route
path="/"
element={
<ShellRoute>
<HomePage />
</ShellRoute>
}
/>
<Route
path="/bands/:bandId"
element={
<ShellRoute>
<BandPage />
</ShellRoute>
}
/>
<Route
path="/bands/:bandId/sessions/:sessionId"
element={
<ShellRoute>
<SessionPage />
</ShellRoute>
}
/>
<Route
path="/bands/:bandId/songs/:songId"
element={
<ShellRoute>
<SongPage />
</ShellRoute>
}
/>
<Route
path="/settings"
element={
<ShellRoute>
<SettingsPage />
</ShellRoute>
}
/>
</Routes>
</BrowserRouter>
</QueryClientProvider>
);
}