valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Sebastian Krüger
2026-02-23 00:40:45 +01:00
parent 2000623c67
commit 09838a203c
17 changed files with 71 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/layout/AppShell.tsx
View File

@@ -13,7 +13,7 @@ interface AppShellProps {
export function AppShell({ children }: AppShellProps) {
return (
<SidebarProvider>
<div className="flex min-h-screen bg-background text-foreground relative">
<div className="flex h-screen overflow-hidden bg-background text-foreground relative">
<AnimatedBackground />
<AppSidebar />
<div className="flex-1 flex flex-col min-w-0 relative z-10">

2
components/layout/AppSidebar.tsx
View File

@@ -103,7 +103,7 @@ export function AppSidebar() {
)}
<aside className={cn(
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-white/5 bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative",
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-white/5 bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
isCollapsed ? "lg:w-20" : "w-64"
)}>

13
components/providers/ThemeProvider.tsx
View File

@@ -15,16 +15,21 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>('dark');
const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('dark');
const [mounted, setMounted] = useState(false);
// Load theme from localStorage on mount
useEffect(() => {
// Load theme from localStorage
const stored = localStorage.getItem('theme') as Theme | null;
if (stored) {
setTheme(stored);
}
setMounted(true);
}, []);
// Apply theme to document element and save to localStorage
useEffect(() => {
if (!mounted) return;
const root = window.document.documentElement;
// Remove previous theme classes
@@ -43,10 +48,12 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
// Save to localStorage
localStorage.setItem('theme', theme);
}, [theme]);
}, [theme, mounted]);
// Listen for system theme changes
useEffect(() => {
if (!mounted) return;
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleChange = () => {
@@ -60,7 +67,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
mediaQuery.addEventListener('change', handleChange);
return () => mediaQuery.removeEventListener('change', handleChange);
}, [theme]);
}, [theme, mounted]);
return (
<ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>

102
components/ui/KeyboardShortcutsHelp.tsx
View File

@@ -1,102 +0,0 @@
'use client';
import * as React from 'react';
import { Card } from './Card';
import { Button } from './Button';
import { X, Keyboard } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
export interface Shortcut {
key: string;
description: string;
modifier?: 'ctrl' | 'shift';
}
const shortcuts: Shortcut[] = [
{ key: '/', description: 'Focus font search' },
{ key: 'Esc', description: 'Clear search / Close dialog' },
{ key: 'D', description: 'Toggle dark/light mode', modifier: 'ctrl' },
{ key: '?', description: 'Show this help dialog', modifier: 'shift' },
];
export function KeyboardShortcutsHelp() {
const [isOpen, setIsOpen] = React.useState(false);
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === '?' && e.shiftKey) {
e.preventDefault();
setIsOpen(true);
}
if (e.key === 'Escape' && isOpen) {
setIsOpen(false);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [isOpen]);
if (!isOpen) {
return (
<Button
variant="ghost"
size="icon"
onClick={() => setIsOpen(true)}
title="Keyboard shortcuts (Shift + ?)"
className="fixed bottom-4 right-4"
>
<Keyboard className="h-4 w-4" />
</Button>
);
}
return (
<div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<Card className="max-w-md w-full">
<div className="p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold flex items-center gap-2">
<Keyboard className="h-5 w-5" />
Keyboard Shortcuts
</h2>
<Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
<X className="h-4 w-4" />
</Button>
</div>
<div className="space-y-3">
<div>
<h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Navigation</h3>
{shortcuts.map((shortcut, i) => (
<div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
<span className="text-sm text-muted-foreground">{shortcut.description}</span>
<div className="flex gap-1">
{shortcut.modifier && (
<kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
{shortcut.modifier === 'ctrl' ? '⌘/Ctrl' : 'Shift'}
</kbd>
)}
<kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
{shortcut.key}
</kbd>
</div>
</div>
))}
</div>
<div>
<h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Tips</h3>
<ul className="text-xs text-muted-foreground space-y-1">
<li>• Click the Shuffle button for random fonts</li>
<li>• Use the heart icon to favorite fonts</li>
<li>• Filter by All, Favorites, or Recent</li>
<li>• Text alignment and size controls in Preview</li>
</ul>
</div>
</div>
</div>
</Card>
</div>
);
}

32
components/ui/Separator.tsx
View File

@@ -1,32 +0,0 @@
'use client';
import * as React from 'react';
import { cn } from '@/lib/utils/cn';
const Separator = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & {
orientation?: 'horizontal' | 'vertical';
decorative?: boolean;
}
>(
(
{ className, orientation = 'horizontal', decorative = true, ...props },
ref
) => (
<div
ref={ref}
role={decorative ? undefined : 'separator'}
aria-orientation={decorative ? undefined : orientation}
className={cn(
'shrink-0 bg-border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className
)}
{...props}
/>
)
);
Separator.displayName = 'Separator';
export { Separator };

2
components/units/converter/ConversionHistory.tsx
View File

@@ -9,7 +9,7 @@ import {
clearHistory,
type ConversionRecord,
} from '@/lib/units/storage';
import { getRelativeTime, formatNumber } from '@/lib/units/utils';
import { getRelativeTime, formatNumber } from '@/lib/utils';
import { formatMeasureName } from '@/lib/units/units';
interface ConversionHistoryProps {

4
components/units/converter/MainConverter.tsx
View File

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/Button';
import SearchUnits from './SearchUnits';
import ConversionHistory from './ConversionHistory';
import VisualComparison from './VisualComparison';
import CommandPalette from '@/components/ui/CommandPalette';
import CommandPalette from '@/components/units/ui/CommandPalette';
import {
getAllMeasures,
getUnitsForMeasure,
@@ -20,7 +20,7 @@ import {
type Measure,
type ConversionResult,
} from '@/lib/units/units';
import { parseNumberInput, formatNumber, cn } from '@/lib/units/utils';
import { parseNumberInput, formatNumber, cn } from '@/lib/utils';
import { saveToHistory, getFavorites, toggleFavorite } from '@/lib/units/storage';
export default function MainConverter() {

2
components/units/converter/SearchUnits.tsx
View File

@@ -15,7 +15,7 @@ import {
type Measure,
type UnitInfo,
} from '@/lib/units/units';
import { cn } from '@/lib/units/utils';
import { cn } from '@/lib/utils';
interface SearchResult {
unitInfo: UnitInfo;

2
components/units/converter/VisualComparison.tsx
View File

@@ -2,7 +2,7 @@
import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
import { type ConversionResult } from '@/lib/units/units';
import { formatNumber, cn } from '@/lib/units/utils';
import { formatNumber, cn } from '@/lib/utils';
interface VisualComparisonProps {
conversions: ConversionResult[];

2
components/ui/CommandPalette.tsx → components/units/ui/CommandPalette.tsx
View File

@@ -11,7 +11,7 @@ import {
type Measure,
} from '@/lib/units/units';
import { getHistory, getFavorites } from '@/lib/units/storage';
import { cn } from '@/lib/units/utils';
import { cn } from '@/lib/utils';
interface CommandPaletteProps {
onSelectMeasure: (measure: Measure) => void;