lvl0/buckets
1
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

2 - Restyle settings panel as inline slide-out block

Browse source
This commit is contained in:
myrmidex 2026-03-22 02:59:40 +01:00
parent 7d2e373ffd
commit a9d74e3eee
2 changed files with 64 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
resources/js/components/SettingsPanel.tsx
View file

@ -1,9 +1,3 @@
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet';
import { csrfToken } from '@/lib/utils';
import { type SharedData } from '@/types';
import { router, usePage } from '@inertiajs/react';
@ -21,13 +15,13 @@ interface DistributionOption {
const distributionOptions: DistributionOption[] = [
{
value: 'even',
label: 'Even Split',
label: 'EVEN SPLIT',
description:
'Split evenly across buckets in each phase, respecting individual capacity',
},
{
value: 'priority',
label: 'Priority Order',
label: 'PRIORITY ORDER',
description: 'Fill highest-priority bucket first, then next',
},
];
@ -38,7 +32,6 @@ interface SettingsPanelProps {
}
export default function SettingsPanel({
open,
onOpenChange,
}: SettingsPanelProps) {
const { scenario } = usePage<SharedData>().props;
@ -72,71 +65,61 @@ export default function SettingsPanel({
};
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent side="top" className="px-6 pb-6">
<SheetHeader>
<SheetTitle>Settings</SheetTitle>
</SheetHeader>
<div className="mb-8 border-4 border-red-500 bg-black p-6 glow-red">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-mono font-bold tracking-wider uppercase text-red-500">
SETTINGS
</h2>
<button
onClick={() => onOpenChange(false)}
className="text-red-500/60 hover:text-red-500 font-mono text-sm transition-colors"
>
CLOSE
</button>
</div>
<div className="mx-auto max-w-2xl">
<fieldset disabled={saveStatus === 'saving'}>
<legend className="text-sm font-medium text-foreground">
Distribution Mode
{saveStatus === 'success' && (
<span className="ml-2 text-green-600">
Saved
</span>
)}
{saveStatus === 'error' && (
<span className="ml-2 text-red-600">
Failed to save
</span>
)}
</legend>
<p className="mt-1 text-sm text-muted-foreground">
How income is divided across buckets within each
phase
</p>
<div className="mt-3 space-y-2">
{distributionOptions.map((option) => (
<label
key={option.value}
className={`flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors ${
scenario.distribution_mode ===
option.value
? 'border-primary bg-primary/5'
: 'border-border hover:border-primary/50'
}`}
>
<input
type="radio"
name="distribution_mode"
value={option.value}
checked={
scenario.distribution_mode ===
option.value
}
onChange={(e) =>
handleDistributionModeChange(
e.target.value as DistributionMode,
)
}
className="mt-0.5"
/>
<div>
<div className="text-sm font-medium">
{option.label}
</div>
<div className="text-sm text-muted-foreground">
{option.description}
</div>
</div>
</label>
))}
</div>
</fieldset>
<fieldset disabled={saveStatus === 'saving'}>
<legend className="text-xs font-mono uppercase text-red-500/60">
DISTRIBUTION MODE
{saveStatus === 'success' && (
<span className="ml-2 text-green-500">SAVED</span>
)}
{saveStatus === 'error' && (
<span className="ml-2 text-red-500">FAILED</span>
)}
</legend>
<div className="mt-3 space-y-2">
{distributionOptions.map((option) => (
<label
key={option.value}
className={`flex cursor-pointer items-start gap-3 border-2 p-3 transition-colors ${
scenario.distribution_mode === option.value
? 'border-red-500 bg-red-500/10'
: 'border-red-500/30 hover:border-red-500/60'
}`}
>
<input
type="radio"
name="distribution_mode"
value={option.value}
checked={scenario.distribution_mode === option.value}
onChange={(e) =>
handleDistributionModeChange(e.target.value as DistributionMode)
}
className="mt-0.5 accent-red-500"
/>
<div>
<div className="text-sm font-mono font-bold text-red-500">
{option.label}
</div>
<div className="text-xs font-mono text-red-500/60">
{option.description}
</div>
</div>
</label>
))}
</div>
</SheetContent>
</Sheet>
</fieldset>
</div>
);
}

11
resources/js/pages/Scenarios/Show.tsx
View file

@ -166,12 +166,12 @@ export default function Show({ scenario, buckets }: Props) {
<div className="min-h-screen bg-background p-8">
<div className="mx-auto max-w-6xl">
{/* Header */}
<div className="mb-8 flex items-center justify-between">
<div className="mb-8 flex items-center justify-between border-b border-red-500/40 pb-4">
<h1 className="text-2xl font-bold font-mono uppercase tracking-wider text-red-500">
BUCKETS
</h1>
<button
onClick={() => setIsSettingsOpen(true)}
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
className="p-2 text-red-500/60 hover:text-red-500 transition-colors"
title="Settings"
>
@ -179,7 +179,12 @@ export default function Show({ scenario, buckets }: Props) {
</button>
</div>
<SettingsPanel open={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
<div
className="overflow-hidden transition-all duration-300 ease-in-out"
style={{ maxHeight: isSettingsOpen ? '500px' : '0', opacity: isSettingsOpen ? 1 : 0 }}
>
<SettingsPanel open={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
</div>
{/* Buckets */}
<div className="space-y-6">