mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 21:41:59 +01:00
parent a0db155427
commit 873002f228
9 changed files with 87 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/app/layout.tsx
View File

@@ -75,7 +75,7 @@ export default async function RootLayout({
<head> <head>
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
</head> </head>
<body className="antialiased overflow-hidden h-screen"> <body className="antialiased">
<AppWrapper enabledFlags={enabledFlags}> <AppWrapper enabledFlags={enabledFlags}>
<RootAppShellTemplate>{children}</RootAppShellTemplate> <RootAppShellTemplate>{children}</RootAppShellTemplate>
</AppWrapper> </AppWrapper>

30
apps/website/components/app/AppShell.tsx
View File

@@ -1,30 +0,0 @@
import React from 'react';
import { Box } from '@/ui/Box';
interface AppShellProps {
children: React.ReactNode;
}
/**
* AppShell is the root container for the entire application layout.
* Provides the base structure with cockpit-inspired design.
*/
export function AppShell({ children }: AppShellProps) {
return (
<Box
height="100vh"
bg="var(--ui-color-bg-base)"
color="var(--ui-color-text-high)"
display="flex"
flexDirection="col"
overflowY="auto"
overflowX="hidden"
style={{
fontFamily: 'var(--ui-font-sans)',
background: 'linear-gradient(180deg, #0a0a0b 0%, #0f0f10 100%)',
}}
>
{children}
</Box>
);
}

6
apps/website/components/layout/AppFooter.tsx
View File

@@ -12,7 +12,7 @@ export function AppFooter() {
variant="precision" variant="precision"
paddingY={6} paddingY={6}
paddingX={6} paddingX={6}
borderTop={true} borderTop
backgroundColor="rgba(10, 10, 11, 0.92)" backgroundColor="rgba(10, 10, 11, 0.92)"
className="backdrop-blur-xl" className="backdrop-blur-xl"
style={{ style={{
@@ -24,7 +24,7 @@ export function AppFooter() {
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em"> <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
© {new Date().getFullYear()} GridPilot © {new Date().getFullYear()} GridPilot
</Text> </Text>
<Box w="1px" h="12px" bg="var(--ui-color-border-muted)" opacity={0.6} /> <Box w="px" h="3" bg="var(--ui-color-border-muted)" opacity={0.6} />
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em"> <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
Session ready Session ready
</Text> </Text>
@@ -32,7 +32,7 @@ export function AppFooter() {
<Box display={{ base: 'none', sm: 'flex' }}> <Box display={{ base: 'none', sm: 'flex' }}>
<Stack direction="row" align="center" gap={2}> <Stack direction="row" align="center" gap={2}>
<Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" /> <Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em"> <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
System Normal System Normal
</Text> </Text>

22
apps/website/components/layout/AppHeader.tsx
View File

@@ -21,17 +21,11 @@ export function AppHeader() {
<Surface <Surface
as="header" as="header"
variant="dark" variant="dark"
position="fixed" height="14"
top={0}
left={0}
right={0}
height="56px"
zIndex={50} zIndex={50}
style={{ borderBottom
borderBottom: '1px solid var(--ui-color-border-default)', backgroundColor="rgba(13, 13, 14, 0.8)"
background: 'rgba(13, 13, 14, 0.8)', className="backdrop-blur-xl"
backdropFilter: 'blur(12px)',
}}
> >
<Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}> <Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}>
{/* Left: Brand & Context */} {/* Left: Brand & Context */}
@@ -44,9 +38,9 @@ export function AppHeader() {
alignItems="center" alignItems="center"
gap={3} gap={3}
paddingLeft={4} paddingLeft={4}
borderLeft={true} borderLeft
h="24px" h="6"
style={{ borderLeftColor: 'var(--ui-color-border-muted)' }} borderColor="var(--ui-color-border-muted)"
> >
<Text size="xs" weight="medium" variant="low" font="mono" uppercase> <Text size="xs" weight="medium" variant="low" font="mono" uppercase>
Workspace Workspace
@@ -65,7 +59,7 @@ export function AppHeader() {
{/* Right: Session Controls */} {/* Right: Session Controls */}
<Box display="flex" alignItems="center" gap={4}> <Box display="flex" alignItems="center" gap={4}>
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}> <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}>
<Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" /> <Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em"> <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
LIVE LIVE
</Text> </Text>

14
apps/website/components/layout/AppSidebar.tsx
View File

@@ -18,23 +18,19 @@ export function AppSidebar() {
<Surface <Surface
as="aside" as="aside"
variant="dark" variant="dark"
width="260px" width="64"
position="fixed" h="full"
top="56px" borderRight
bottom={0} backgroundColor="linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)"
left={0}
zIndex={40}
style={{ style={{
borderRight: '1px solid var(--ui-color-border-default)',
boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)', boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
}} }}
> >
<DashboardRail> <DashboardRail>
<Box py={8} fullWidth> <Box py={8} fullWidth>
<Box px={6} mb={10}> <Box px={6} mb={10}>
<Box display="flex" alignItems="center" gap={2} mb={2}> <Box display="flex" alignItems="center" gap={2} mb={2}>
<Box w="2px" h="12px" bg="var(--ui-color-intent-primary)" /> <Box w="0.5" h="3" bg="var(--ui-color-intent-primary)" />
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em"> <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
DASHBOARD DASHBOARD
</Text> </Text>

54
apps/website/components/layout/MainContent.tsx
View File

@@ -1,54 +0,0 @@
'use client';
import { Box } from '@/ui/Box';
import { ReactNode } from 'react';
interface MainContentProps {
children: ReactNode;
hasSidebar: boolean;
}
export function MainContent({ children, hasSidebar }: MainContentProps) {
return (
<Box
as="main"
display="flex"
flexDirection="col"
flexGrow={1}
style={{
paddingTop: '56px', // Header height
marginLeft: hasSidebar ? '260px' : '0',
transition: 'margin-left 0.2s ease-in-out',
}}
>
<Box
position="relative"
width="full"
maxWidth="full"
flexGrow={1}
display="flex"
flexDirection="col"
>
{/* Background Grid */}
<Box
position="absolute"
inset={0}
pointerEvents="none"
zIndex={0}
style={{
backgroundImage:
'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.018) 1px, transparent 0)',
backgroundSize: '32px 32px',
opacity: 0.5,
backgroundAttachment: 'fixed',
}}
/>
{/* Content */}
<Box position="relative" zIndex={1} flexGrow={1} display="flex" flexDirection="col">
{children}
</Box>
</Box>
</Box>
);
}

40
apps/website/templates/layout/RootAppShellTemplate.tsx
View File

@@ -1,13 +1,12 @@
'use client'; 'use client';
import { AppShell } from '@/components/app/AppShell';
import { AppFooter } from '@/components/layout/AppFooter'; import { AppFooter } from '@/components/layout/AppFooter';
import { AppHeader } from '@/components/layout/AppHeader'; import { AppHeader } from '@/components/layout/AppHeader';
import { AppSidebar } from '@/components/layout/AppSidebar'; import { AppSidebar } from '@/components/layout/AppSidebar';
import { MainContent } from '@/components/layout/MainContent';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession'; import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
import { routes } from '@/lib/routing/RouteConfig'; import { routes } from '@/lib/routing/RouteConfig';
import { ContentViewport } from '@/ui/ContentViewport'; import { Layout } from '@/ui/Layout';
import { Container } from '@/ui/Container';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import React from 'react'; import React from 'react';
@@ -17,11 +16,7 @@ export interface RootAppShellViewData {
/** /**
* RootAppShellTemplate orchestrates the top-level semantic shells of the application. * RootAppShellTemplate orchestrates the top-level semantic shells of the application.
* It follows the "Telemetry Workspace" structure: * It uses the canonical ui/Layout component to define the app frame.
* - AppHeader = header/control bar
* - AppSidebar = sidebar rail
* - MainContent = content area wrapper
* - AppFooter = footer
*/ */
export function RootAppShellTemplate({ children }: RootAppShellViewData) { export function RootAppShellTemplate({ children }: RootAppShellViewData) {
const pathname = usePathname(); const pathname = usePathname();
@@ -33,20 +28,19 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
const showSidebar = isAuthenticated && !isLandingPage; const showSidebar = isAuthenticated && !isLandingPage;
return ( return (
<AppShell> <Layout
<AppHeader /> header={<AppHeader />}
sidebar={showSidebar ? <AppSidebar /> : undefined}
{showSidebar && <AppSidebar />} footer={<AppFooter />}
fixedHeader
<MainContent hasSidebar={showSidebar}> fixedSidebar
<ContentViewport >
fullWidth={!showSidebar || isLandingPage} <Container
padding={isLandingPage ? 'none' : 'md'} size={isLandingPage ? 'full' : 'xl'}
> py={isLandingPage ? 0 : 8}
{children} >
</ContentViewport> {children}
<AppFooter /> </Container>
</MainContent> </Layout>
</AppShell>
); );
} }

31
apps/website/ui/ContentViewport.tsx
View File

@@ -1,31 +0,0 @@
import { ReactNode } from 'react';
import { Box, type Spacing } from './Box';
export interface ContentViewportProps {
children: ReactNode;
padding?: 'none' | 'sm' | 'md' | 'lg';
fullWidth?: boolean;
}
export const ContentViewport = ({
children,
padding = 'md',
fullWidth = false,
}: ContentViewportProps) => {
const paddingMap: Record<NonNullable<ContentViewportProps['padding']>, Spacing> = {
none: 0,
sm: 4,
md: 8,
lg: 12,
};
const maxWidth = fullWidth ? '100%' : '80rem';
return (
<Box flexGrow={1} width="full" display="flex" justifyContent="center" minWidth="0">
<Box width="full" maxWidth={maxWidth} paddingX={4} py={paddingMap[padding]} minWidth="0">
{children}
</Box>
</Box>
);
};

66
apps/website/ui/Layout.tsx
View File

@@ -6,39 +6,79 @@ export interface LayoutProps {
header?: ReactNode; header?: ReactNode;
footer?: ReactNode; footer?: ReactNode;
sidebar?: ReactNode; sidebar?: ReactNode;
/**
* Whether the sidebar should be fixed to the side.
* If true, the main content will be offset by the sidebar width.
*/
fixedSidebar?: boolean;
/**
* Whether the header should be fixed to the top.
* If true, the main content will be offset by the header height.
*/
fixedHeader?: boolean;
} }
/**
* Layout is the canonical app frame component.
* It orchestrates the high-level structure: Header, Sidebar, Main Content, and Footer.
*/
export const Layout = ({ export const Layout = ({
children, children,
header, header,
footer, footer,
sidebar sidebar,
fixedSidebar = false,
fixedHeader = false
}: LayoutProps) => { }: LayoutProps) => {
return ( return (
<Box display="flex" flexDirection="col" minHeight="100vh" bg="var(--ui-color-bg-base)"> <Box display="flex" flexDirection="col" minHeight="100vh">
{header && ( {header && (
<Box as="header" position="sticky" top="0" zIndex={50}> <Box
as="header"
position={fixedHeader ? "fixed" : "relative"}
top={fixedHeader ? 0 : undefined}
left={fixedHeader ? 0 : undefined}
right={fixedHeader ? 0 : undefined}
zIndex={50}
>
{header} {header}
</Box> </Box>
)} )}
<Box display="flex" flex={1}> <Box display="flex" flex={1} marginTop={fixedHeader ? 14 : undefined}>
{sidebar && ( {sidebar && (
<Box as="aside" width="16rem" display={{ base: 'none', lg: 'block' }}> <Box
as="aside"
width="64"
display={{ base: 'none', lg: 'block' }}
position={fixedSidebar ? "fixed" : "relative"}
top={fixedSidebar ? (fixedHeader ? 14 : 0) : undefined}
bottom={fixedSidebar ? 0 : undefined}
left={fixedSidebar ? 0 : undefined}
zIndex={40}
>
{sidebar} {sidebar}
</Box> </Box>
)} )}
<Box as="main" flex={1}> <Box
{children} as="main"
flex={1}
display="flex"
flexDirection="col"
marginLeft={fixedSidebar ? { lg: 64 } : undefined}
>
<Box flex={1}>
{children}
</Box>
{footer && (
<Box as="footer">
{footer}
</Box>
)}
</Box> </Box>
</Box> </Box>
{footer && (
<Box as="footer">
{footer}
</Box>
)}
</Box> </Box>
); );
}; };