refactor: consolidate utilities, clean up components, and improve theme persistence

- Consolidate common utilities (cn, format, time) into lib/utils
- Remove redundant utility files from pastel and units directories
- Clean up unused components (Separator, KeyboardShortcutsHelp)
- Relocate CommandPalette to components/units/ui/
- Force dark mode on landing page and improve theme persistence logic
- Add FOUC prevention script to RootLayout
- Fix sidebar height constraint in AppShell
This commit is contained in:
2026-02-23 00:40:45 +01:00
parent 2000623c67
commit 09838a203c
17 changed files with 71 additions and 206 deletions

View File

@@ -109,7 +109,7 @@
}
}
:root {
:root, .dark {
/* CORPORATE DARK THEME (The Standard) */
--background: #0a0a0f;
--foreground: #ffffff;

View File

@@ -51,10 +51,32 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" className="dark">
<html lang="en" className="dark" suppressHydrationWarning>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://kit.pivoine.art" />
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
var theme = localStorage.getItem('theme');
var isLanding = window.location.pathname === '/';
if (isLanding) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else if (theme === 'light' || (!theme && window.matchMedia('(prefers-color-scheme: light)').matches)) {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
}
} catch (e) {}
})();
`,
}}
/>
</head>
<body className="antialiased">
{children}

View File

@@ -1,3 +1,6 @@
'use client';
import { useEffect } from 'react';
import AnimatedBackground from '@/components/AnimatedBackground';
import Hero from '@/components/Hero';
import Stats from '@/components/Stats';
@@ -6,8 +9,14 @@ import Footer from '@/components/Footer';
import BackToTop from '@/components/BackToTop';
export default function Home() {
useEffect(() => {
// Force dark mode on html element for the landing page
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}, []);
return (
<main className="relative min-h-screen">
<main className="relative min-h-screen dark text-foreground">
<AnimatedBackground />
<BackToTop />
<Hero />