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 01:24:07 +01:00
parent e1ce3bffd1
commit edc4cd7f21
64 changed files with 1113 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
apps/website/components/shared/CountrySelect.tsx
View File

@@ -4,6 +4,12 @@
import { Check, ChevronDown, Globe, Search } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { CountryFlag } from '@/ui/CountryFlag';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
export interface Country {
code: string;
@@ -107,38 +113,62 @@ export function CountrySelect({
};
return (
<div ref={containerRef} className="relative">
<Box ref={containerRef} position="relative">
{/* Trigger Button */}
<button
type="button"
onClick={() => !disabled && setIsOpen(!isOpen)}
disabled={disabled}
className={`flex items-center justify-between w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset transition-all duration-150 sm:text-sm ${
error
? 'ring-warning-amber focus:ring-warning-amber'
: 'ring-charcoal-outline focus:ring-primary-blue'
} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:ring-gray-500'}`}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
borderRadius: 'var(--ui-radius-md)',
border: 'none',
padding: '0.75rem 1rem',
backgroundColor: 'var(--ui-color-bg-surface-muted)',
color: 'white',
boxShadow: 'var(--ui-shadow-sm)',
transition: 'all 150ms',
cursor: disabled ? 'not-allowed' : 'pointer',
opacity: disabled ? 0.5 : 1,
outline: 'none',
ring: '1px inset',
borderColor: error ? 'var(--ui-color-intent-critical)' : 'var(--ui-color-border-default)'
} as any}
className={error ? 'ring-warning-amber' : 'ring-charcoal-outline focus:ring-primary-blue'}
>
<div className="flex items-center gap-3">
<Group gap={3}>
<Globe className="w-4 h-4 text-gray-500" />
{selectedCountry ? (
<span className="flex items-center gap-2">
<CountryFlag countryCode={selectedCountry.code} size="md" showTooltip={false} />
<span>{selectedCountry.name}</span>
</span>
<Group gap={2}>
<CountryFlag countryCode={selectedCountry.code} size="md" />
<Text as="span">{selectedCountry.name}</Text>
</Group>
) : (
<span className="text-gray-500">{placeholder}</span>
<Text variant="low">{placeholder}</Text>
)}
</div>
</Group>
<ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
{/* Dropdown */}
{isOpen && (
<div className="absolute z-50 mt-2 w-full rounded-lg bg-iron-gray border border-charcoal-outline shadow-xl max-h-80 overflow-hidden">
<Surface
position="absolute"
zIndex={50}
marginTop={2}
width="100%"
rounded="lg"
variant="dark"
border
shadow="xl"
overflow="hidden"
>
{/* Search Input */}
<div className="p-2 border-b border-charcoal-outline">
<div className="relative">
<Box padding={2} borderBottom="1px solid var(--ui-color-border-muted)">
<Box position="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
<input
ref={inputRef}
@@ -146,47 +176,67 @@ export function CountrySelect({
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search countries..."
className="w-full rounded-md border-0 px-4 py-2 pl-9 bg-deep-graphite text-white text-sm placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-primary-blue"
style={{
width: '100%',
borderRadius: 'var(--ui-radius-md)',
border: 'none',
padding: '0.5rem 1rem 0.5rem 2.25rem',
backgroundColor: 'var(--ui-color-bg-base)',
color: 'white',
fontSize: '0.875rem',
outline: 'none'
}}
/>
</div>
</div>
</Box>
</Box>
{/* Country List */}
<div className="overflow-y-auto max-h-60">
<Box overflowY="auto" maxHeight="15rem">
{filteredCountries.length > 0 ? (
filteredCountries.map((country) => (
<button
key={country.code}
type="button"
onClick={() => handleSelect(country.code)}
className={`flex items-center justify-between w-full px-4 py-2.5 text-left text-sm transition-colors ${
value === country.code
? 'bg-primary-blue/20 text-white'
: 'text-gray-300 hover:bg-deep-graphite'
}`}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
padding: '0.625rem 1rem',
textAlign: 'left',
fontSize: '0.875rem',
transition: 'colors 150ms',
border: 'none',
backgroundColor: value === country.code ? 'rgba(25, 140, 255, 0.2)' : 'transparent',
color: value === country.code ? 'white' : 'var(--ui-color-text-med)',
cursor: 'pointer'
}}
>
<span className="flex items-center gap-3">
<CountryFlag countryCode={country.code} size="md" showTooltip={false} />
<span>{country.name}</span>
</span>
<Group gap={3}>
<CountryFlag countryCode={country.code} size="md" />
<Text as="span">{country.name}</Text>
</Group>
{value === country.code && (
<Check className="w-4 h-4 text-primary-blue" />
)}
</button>
))
) : (
<div className="px-4 py-6 text-center text-gray-500 text-sm">
No countries found
</div>
<Box paddingX={4} paddingY={6} textAlign="center">
<Text size="sm" variant="low">No countries found</Text>
</Box>
)}
</div>
</div>
</Box>
</Surface>
)}
{/* Error Message */}
{error && errorMessage && (
<p className="mt-2 text-sm text-warning-amber">{errorMessage}</p>
<Box marginTop={2}>
<Text size="sm" variant="critical">{errorMessage}</Text>
</Box>
)}
</div>
</Box>
);
}

258
apps/website/components/shared/RangeField.tsx
View File

@@ -1,8 +1,10 @@
/* eslint-disable gridpilot-rules/no-raw-html-in-app */
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
interface RangeFieldProps {
label: string;
value: number;
@@ -20,7 +22,7 @@ interface RangeFieldProps {
/** Compact mode - single line */
compact?: boolean;
}
export function RangeField({
label,
value,
@@ -40,23 +42,23 @@ export function RangeField({
const [isDragging, setIsDragging] = useState(false);
const sliderRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
// Sync local value with prop when not dragging
useEffect(() => {
if (!isDragging) {
setLocalValue(value);
}
}, [value, isDragging]);
const clampedValue = Number.isFinite(localValue)
? Math.min(Math.max(localValue, min), max)
: min;
const rangePercent = ((clampedValue - min) / Math.max(max - min, 1)) * 100;
const effectiveRangeHint =
rangeHint ?? (min === 0 ? `Up to ${max} ${unitLabel}` : `${min}–${max} ${unitLabel}`);
const calculateValueFromPosition = useCallback(
(clientX: number) => {
if (!sliderRef.current) return clampedValue;
@@ -68,7 +70,7 @@ export function RangeField({
},
[min, max, step, clampedValue]
);
const handlePointerDown = useCallback(
(e: React.PointerEvent) => {
if (disabled) return;
@@ -81,7 +83,7 @@ export function RangeField({
},
[disabled, calculateValueFromPosition, onChange]
);
const handlePointerMove = useCallback(
(e: React.PointerEvent) => {
if (!isDragging || disabled) return;
@@ -91,11 +93,11 @@ export function RangeField({
},
[isDragging, disabled, calculateValueFromPosition, onChange]
);
const handlePointerUp = useCallback(() => {
setIsDragging(false);
}, []);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const raw = e.target.value;
if (raw === '') {
@@ -109,120 +111,165 @@ export function RangeField({
onChange(clamped);
}
};
const handleInputBlur = () => {
// Ensure value is synced on blur
onChange(clampedValue);
};
// Quick preset buttons for common values
const quickPresets = [
Math.round(min + (max - min) * 0.25),
Math.round(min + (max - min) * 0.5),
Math.round(min + (max - min) * 0.75),
].filter((v, i, arr) => arr.indexOf(v) === i && v !== clampedValue);
if (compact) {
return (
<div className="space-y-1.5">
<div className="flex items-center justify-between gap-3">
<label className="text-xs font-medium text-gray-400 shrink-0">{label}</label>
<div className="flex items-center gap-2 flex-1 max-w-[200px]">
<Stack gap={1.5}>
<Group justify="between" gap={3}>
<Text as="label" size="xs" weight="medium" variant="low">{label}</Text>
<Box display="flex" alignItems="center" gap={2} flex={1} maxWidth="200px">
<div
ref={sliderRef}
className={`relative flex-1 h-6 cursor-pointer touch-none ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
style={{
position: 'relative',
flex: 1,
height: '1.5rem',
cursor: disabled ? 'not-allowed' : 'pointer',
touchAction: 'none',
opacity: disabled ? 0.5 : 1
}}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
>
{/* Track background */}
<div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1.5 rounded-full bg-charcoal-outline" />
<Box position="absolute" top="50%" left={0} right={0} height="0.375rem" rounded="full" bg="var(--ui-color-border-muted)" style={{ transform: 'translateY(-50%)' }} />
{/* Track fill */}
<div
className="absolute top-1/2 -translate-y-1/2 left-0 h-1.5 rounded-full bg-primary-blue transition-all duration-75"
style={{ width: `${rangePercent}%` }}
<Box
position="absolute"
top="50%"
left={0}
height="0.375rem"
rounded="full"
bg="var(--ui-color-intent-primary)"
style={{ width: `${rangePercent}%`, transform: 'translateY(-50%)', transition: 'width 75ms' }}
/>
{/* Thumb */}
<div
className={`
absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-full
bg-white border-2 border-primary-blue shadow-md
transition-transform duration-75
${isDragging ? 'scale-125 shadow-[0_0_12px_rgba(25,140,255,0.5)]' : ''}
`}
style={{ left: `${rangePercent}%` }}
<Box
position="absolute"
top="50%"
width="1rem"
height="1rem"
rounded="full"
bg="white"
border="2px solid var(--ui-color-intent-primary)"
shadow="md"
style={{
left: `${rangePercent}%`,
transform: `translate(-50%, -50%) ${isDragging ? 'scale(1.25)' : ''}`,
transition: 'transform 75ms, left 75ms',
boxShadow: isDragging ? '0 0 12px rgba(25, 140, 255, 0.5)' : undefined
}}
/>
</div>
<div className="flex items-center gap-1 shrink-0">
<span className="text-sm font-semibold text-white w-8 text-right">{clampedValue}</span>
<span className="text-[10px] text-gray-500">{unitLabel}</span>
</div>
</div>
</div>
{error && <p className="text-[10px] text-warning-amber">{error}</p>}
</div>
<Box flexShrink={0}>
<Group gap={1}>
<Text size="sm" weight="semibold" variant="high" textAlign="right" width="2rem">{clampedValue}</Text>
<Text size="xs" variant="low" style={{ fontSize: '10px' }}>{unitLabel}</Text>
</Group>
</Box>
</Box>
</Group>
{error && <Text size="xs" variant="critical" style={{ fontSize: '10px' }}>{error}</Text>}
</Stack>
);
}
return (
<div className="space-y-3">
<div className="flex items-baseline justify-between gap-2">
<label className="block text-sm font-medium text-gray-300">{label}</label>
<span className="text-[10px] text-gray-500">{effectiveRangeHint}</span>
</div>
<Stack gap={3}>
<Group justify="between" align="baseline" gap={2}>
<Text as="label" size="sm" weight="medium" variant="med">{label}</Text>
<Text size="xs" variant="low" style={{ fontSize: '10px' }}>{effectiveRangeHint}</Text>
</Group>
{showLargeValue && (
<div className="flex items-baseline gap-1">
<span className="text-3xl font-bold text-white tabular-nums">{clampedValue}</span>
<span className="text-sm text-gray-400">{unitLabel}</span>
</div>
<Group align="baseline" gap={1}>
<Text size="3xl" weight="bold" variant="high" font="mono">{clampedValue}</Text>
<Text size="sm" variant="low">{unitLabel}</Text>
</Group>
)}
{/* Custom slider */}
<div
ref={sliderRef}
className={`relative h-8 cursor-pointer touch-none select-none ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
style={{
position: 'relative',
height: '2rem',
cursor: disabled ? 'not-allowed' : 'pointer',
touchAction: 'none',
userSelect: 'none',
opacity: disabled ? 0.5 : 1
}}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
>
{/* Track background */}
<div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-2 rounded-full bg-charcoal-outline/80" />
<Box position="absolute" top="50%" left={0} right={0} height="0.5rem" rounded="full" bg="var(--ui-color-border-muted)" style={{ transform: 'translateY(-50%)', opacity: 0.8 }} />
{/* Track fill with gradient */}
<div
className="absolute top-1/2 -translate-y-1/2 left-0 h-2 rounded-full bg-gradient-to-r from-primary-blue to-neon-aqua transition-all duration-75"
style={{ width: `${rangePercent}%` }}
<Box
position="absolute"
top="50%"
left={0}
height="0.5rem"
rounded="full"
style={{
width: `${rangePercent}%`,
transform: 'translateY(-50%)',
transition: 'width 75ms',
background: 'linear-gradient(to right, var(--ui-color-intent-primary), #00f2ff)'
}}
/>
{/* Tick marks */}
<div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex justify-between px-1">
<Box position="absolute" top="50%" left={0} right={0} display="flex" justifyContent="between" paddingX={1} style={{ transform: 'translateY(-50%)' }}>
{[0, 25, 50, 75, 100].map((tick) => (
<div
<Box
key={tick}
className={`w-0.5 h-1 rounded-full transition-colors ${
rangePercent >= tick ? 'bg-white/40' : 'bg-charcoal-outline'
}`}
width="0.125rem"
height="0.25rem"
rounded="full"
bg={rangePercent >= tick ? 'rgba(255, 255, 255, 0.4)' : 'var(--ui-color-border-muted)'}
style={{ transition: 'background-color 75ms' }}
/>
))}
</div>
</Box>
{/* Thumb */}
<div
className={`
absolute top-1/2 -translate-y-1/2 -translate-x-1/2
w-5 h-5 rounded-full bg-white border-2 border-primary-blue
shadow-[0_2px_8px_rgba(0,0,0,0.3)]
transition-all duration-75
${isDragging ? 'scale-125 shadow-[0_0_16px_rgba(25,140,255,0.6)]' : 'hover:scale-110'}
`}
style={{ left: `${rangePercent}%` }}
<Box
position="absolute"
top="50%"
width="1.25rem"
height="1.25rem"
rounded="full"
bg="white"
border="2px solid var(--ui-color-intent-primary)"
shadow="lg"
style={{
left: `${rangePercent}%`,
transform: `translate(-50%, -50%) ${isDragging ? 'scale(1.25)' : ''}`,
transition: 'transform 75ms, left 75ms',
boxShadow: isDragging ? '0 0 16px rgba(25, 140, 255, 0.6)' : '0 2px 8px rgba(0,0,0,0.3)'
}}
/>
</div>
{/* Value input and quick presets */}
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Group justify="between" align="center" gap={3}>
<Group gap={2}>
<input
ref={inputRef}
type="number"
@@ -233,20 +280,26 @@ export function RangeField({
onChange={handleInputChange}
onBlur={handleInputBlur}
disabled={disabled}
className={`
w-16 px-2 py-1.5 text-sm font-medium text-center rounded-lg
bg-iron-gray border border-charcoal-outline text-white
focus:border-primary-blue focus:ring-1 focus:ring-primary-blue focus:outline-none
transition-colors
${error ? 'border-warning-amber' : ''}
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
`}
style={{
width: '4rem',
padding: '0.375rem 0.5rem',
fontSize: '0.875rem',
fontWeight: 500,
textAlign: 'center',
borderRadius: 'var(--ui-radius-lg)',
backgroundColor: 'var(--ui-color-bg-surface-muted)',
border: `1px solid ${error ? 'var(--ui-color-intent-critical)' : 'var(--ui-color-border-default)'}`,
color: 'white',
outline: 'none',
opacity: disabled ? 0.5 : 1,
cursor: disabled ? 'not-allowed' : 'text'
}}
/>
<span className="text-xs text-gray-400">{unitLabel}</span>
</div>
<Text size="xs" variant="low">{unitLabel}</Text>
</Group>
{quickPresets.length > 0 && (
<div className="flex gap-1">
<Group gap={1}>
{quickPresets.slice(0, 3).map((preset) => (
<button
key={preset}
@@ -256,17 +309,26 @@ export function RangeField({
onChange(preset);
}}
disabled={disabled}
className="px-2 py-1 text-[10px] rounded bg-charcoal-outline/50 text-gray-400 hover:bg-charcoal-outline hover:text-white transition-colors"
style={{
padding: '0.25rem 0.5rem',
fontSize: '10px',
borderRadius: 'var(--ui-radius-sm)',
backgroundColor: 'rgba(255, 255, 255, 0.05)',
color: 'var(--ui-color-text-low)',
border: 'none',
cursor: disabled ? 'not-allowed' : 'pointer',
transition: 'all 150ms'
}}
>
{preset}
</button>
))}
</div>
</Group>
)}
</div>
{helperText && <p className="text-xs text-gray-500">{helperText}</p>}
{error && <p className="text-xs text-warning-amber">{error}</p>}
</div>
</Group>
{helperText && <Text size="xs" variant="low">{helperText}</Text>}
{error && <Text size="xs" variant="critical">{error}</Text>}
</Stack>
);
}

19
apps/website/components/shared/ux/Toast.tsx
View File

@@ -3,6 +3,8 @@
import { Toast as UIToast } from '@/ui/Toast';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { AlertCircle, CheckCircle, Info } from 'lucide-react';
import React, { createContext, useContext, useState } from 'react';
@@ -32,16 +34,25 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
return (
<ToastContext.Provider value={{ showToast }}>
{children}
<div style={{ position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 100, display: 'flex', flexDirection: 'column', gap: '0.75rem', pointerEvents: 'none' }}>
<Box
position="fixed"
bottom={6}
right={6}
zIndex={100}
display="flex"
flexDirection="col"
gap={3}
style={{ pointerEvents: 'none' }}
>
{toasts.map((toast) => (
<div key={toast.id} style={{ pointerEvents: 'auto' }}>
<Box key={toast.id} style={{ pointerEvents: 'auto' }}>
<ToastItem
toast={toast}
onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
/>
</div>
</Box>
))}
</div>
</Box>
</ToastContext.Provider>
);
}