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>
<meta name="mobile-web-app-capable" content="yes" />
</head>
<body className="antialiased overflow-hidden h-screen">
<body className="antialiased">
<AppWrapper enabledFlags={enabledFlags}>
<RootAppShellTemplate>{children}</RootAppShellTemplate>
</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"
paddingY={6}
paddingX={6}
borderTop={true}
borderTop
backgroundColor="rgba(10, 10, 11, 0.92)"
className="backdrop-blur-xl"
style={{
@@ -24,7 +24,7 @@ export function AppFooter() {
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
© {new Date().getFullYear()} GridPilot
</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">
Session ready
</Text>
@@ -32,7 +32,7 @@ export function AppFooter() {
<Box display={{ base: 'none', sm: 'flex' }}>
<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">
System Normal
</Text>

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

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

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

@@ -18,23 +18,19 @@ export function AppSidebar() {
<Surface
as="aside"
variant="dark"
width="260px"
position="fixed"
top="56px"
bottom={0}
left={0}
zIndex={40}
width="64"
h="full"
borderRight
backgroundColor="linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)"
style={{
borderRight: '1px solid var(--ui-color-border-default)',
boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
}}
>
<DashboardRail>
<Box py={8} fullWidth>
<Box px={6} mb={10}>
<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">
DASHBOARD
</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';
import { AppShell } from '@/components/app/AppShell';
import { AppFooter } from '@/components/layout/AppFooter';
import { AppHeader } from '@/components/layout/AppHeader';
import { AppSidebar } from '@/components/layout/AppSidebar';
import { MainContent } from '@/components/layout/MainContent';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
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 React from 'react';
@@ -17,11 +16,7 @@ export interface RootAppShellViewData {
/**
* RootAppShellTemplate orchestrates the top-level semantic shells of the application.
* It follows the "Telemetry Workspace" structure:
* - AppHeader = header/control bar
* - AppSidebar = sidebar rail
* - MainContent = content area wrapper
* - AppFooter = footer
* It uses the canonical ui/Layout component to define the app frame.
*/
export function RootAppShellTemplate({ children }: RootAppShellViewData) {
const pathname = usePathname();
@@ -33,20 +28,19 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
const showSidebar = isAuthenticated && !isLandingPage;
return (
<AppShell>
<AppHeader />
{showSidebar && <AppSidebar />}
<MainContent hasSidebar={showSidebar}>
<ContentViewport
fullWidth={!showSidebar || isLandingPage}
padding={isLandingPage ? 'none' : 'md'}
>
{children}
</ContentViewport>
<AppFooter />
</MainContent>
</AppShell>
<Layout
header={<AppHeader />}
sidebar={showSidebar ? <AppSidebar /> : undefined}
footer={<AppFooter />}
fixedHeader
fixedSidebar
>
<Container
size={isLandingPage ? 'full' : 'xl'}
py={isLandingPage ? 0 : 8}
>
{children}
</Container>
</Layout>
);
}

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;
footer?: 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 = ({
children,
header,
footer,
sidebar
sidebar,
fixedSidebar = false,
fixedHeader = false
}: LayoutProps) => {
return (
<Box display="flex" flexDirection="col" minHeight="100vh" bg="var(--ui-color-bg-base)">
<Box display="flex" flexDirection="col" minHeight="100vh">
{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}
</Box>
)}
<Box display="flex" flex={1}>
<Box display="flex" flex={1} marginTop={fixedHeader ? 14 : undefined}>
{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}
</Box>
)}
<Box as="main" flex={1}>
{children}
<Box
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>
{footer && (
<Box as="footer">
{footer}
</Box>
)}
</Box>
);
};