DiogoVieira14/litoral-central-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui update removing topbar, responsiveness work, console behavior, custom titlebar

Browse Source
This commit is contained in:
litoral05
2026-06-02 16:32:43 +01:00
parent bd8eef7f04
commit d6daac97c7
17 changed files with 1066 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/AppShell.tsx
+26 -19
View File
@@ -1,8 +1,6 @@
import { type ReactNode, useEffect, useState } from "react";
import { Sidebar } from "../navigation/Sidebar";
import { TopBar } from "../layout/TopBar";
import { useTelemetryStream } from "../../features/telemetry/hooks/useTelemetryStream";
import { useNotifications } from "../../features/notifications/hooks/useNotifications";
import { useCurrentUser } from "../../features/auth/hooks/useCurrentUser";
import type { TelemetrySnapshot } from "../../types/telemetry";
import type { AppPage } from "../../app/App";
@@ -24,10 +22,11 @@ const THEME_STORAGE_KEY = "app-theme";
export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
const telemetry = useTelemetryStream();
const notifications = useNotifications();
const currentUser = useCurrentUser();
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [autoCompact, setAutoCompact] = useState(false);
const [theme, setTheme] = useState<Theme>(() => {
const stored = localStorage.getItem(THEME_STORAGE_KEY);
return stored === "light" || stored === "dark" ? stored : "dark";
@@ -44,12 +43,28 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
setTheme((current) => (current === "dark" ? "light" : "dark"));
};
useEffect(() => {
const update = () => {
const compact = window.innerWidth <= 1366 || window.innerHeight <= 760;
setAutoCompact(compact);
if (compact) {
setSidebarCollapsed(true);
}
};
update();
window.addEventListener("resize", update);
return () => window.removeEventListener("resize", update);
}, []);
return (
<div
className={
isDark
? "fixed inset-0 overflow-hidden bg-[#07101B] text-slate-100"
: "fixed inset-0 overflow-hidden bg-white text-slate-950"
? "relative h-full overflow-hidden bg-[#07101B] text-slate-100"
: "relative h-full overflow-hidden bg-white text-slate-950"
}
>
<style>{`
@@ -89,8 +104,10 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
theme={theme}
activePage={activePage}
collapsed={sidebarCollapsed}
userInitials={currentUser.initials}
onNavigate={onNavigate}
onToggleCollapsed={() => setSidebarCollapsed((current) => !current)}
onToggleTheme={toggleTheme}
/>
<div
@@ -103,26 +120,16 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
</aside>
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
<TopBar
connected={telemetry.connected}
lastTimestamp={telemetry.lastTimestamp}
notificationCount={notifications.unreadCount}
userInitials={currentUser.initials}
theme={theme}
activePage={activePage}
onToggleTheme={toggleTheme}
/>
<main
className={
isDark
? `app-scrollbar min-h-0 flex-1 border-t border-white/10 ${isDashboard
? `app-scrollbar min-h-0 flex-1 ${isDashboard
? "overflow-y-auto bg-[#07101B] p-0"
: "overflow-y-auto bg-[#0b1220] p-4"
: `${autoCompact ? "p-3" : "p-4"} overflow-y-auto bg-[#0b1220]`
}`
: `app-scrollbar min-h-0 flex-1 border-t border-slate-200 ${isDashboard
: `app-scrollbar min-h-0 flex-1 ${isDashboard
? "overflow-y-auto bg-white p-0"
: "overflow-y-auto bg-slate-100 p-4"
: `${autoCompact ? "p-3" : "p-4"} overflow-y-auto bg-slate-100`
}`
}
>