mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-24 13:38:43 +02:00
David KayaandCopilot
f8b4c3cf4f
Complete visual overhaul of the Aryx application with the Luminous Depth design language — blue-tinted dark surfaces, brand gradient accents, glass-morphism effects, and refined typography. Design Foundation: - New color system with CSS custom properties for all surfaces, borders, text, accents, and status colors - Typography: Outfit (display), DM Sans (body), JetBrains Mono (code) - Animations: accent-flow, thinking-wave, ambient-glow - Utility classes: glass-surface, glow-border, brand-gradient-bg/text - Light theme with cool-tinted whites and blue-tinted shadows Components Updated: - UI primitives (TextInput, SelectInput, ToggleSwitch, FormField, etc.) - AppShell with ambient glow background - Sidebar with brand gradient selection and accent-flow running bars - ChatPane with semantic phase tinting and gradient user avatars - WelcomePane with nebula background and motion entrance animations - All chat banners (Approval, UserInput, PlanReview, MCP Auth, etc.) - ActivityPanel and RunTimeline with glass-surface cards - Settings panels, modals, and editor shells - TerminalPanel with harmonized ANSI palette - PatternGraph nodes with glass-surface styling - MarkdownComposer toolbar Zero hardcoded zinc/indigo color classes remain in renderer components. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { AlertCircle, ChevronLeft, Trash } from 'lucide-react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
export function ToolingEditorShell({
|
|
title,
|
|
subtitle,
|
|
error,
|
|
disableSave,
|
|
onBack,
|
|
onSave,
|
|
onDelete,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
subtitle: string;
|
|
error?: string;
|
|
disableSave: boolean;
|
|
onBack: () => void;
|
|
onSave: () => Promise<void>;
|
|
onDelete?: () => Promise<void>;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
className="no-drag flex size-8 items-center justify-center rounded-lg text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
|
|
onClick={onBack}
|
|
type="button"
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
</button>
|
|
<div>
|
|
<h2 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">{title}</h2>
|
|
<p className="text-[12px] text-[var(--color-text-muted)]">{subtitle}</p>
|
|
</div>
|
|
</div>
|
|
<div className="no-drag flex items-center gap-2">
|
|
{onDelete && (
|
|
<button
|
|
className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-[var(--color-status-error)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10"
|
|
onClick={() => void onDelete()}
|
|
type="button"
|
|
>
|
|
<Trash className="size-3.5" />
|
|
Delete
|
|
</button>
|
|
)}
|
|
<button
|
|
className="rounded-lg bg-[var(--color-accent)] px-4 py-1.5 text-[13px] font-medium text-white transition-all duration-200 hover:bg-[var(--color-accent-sky)] disabled:cursor-not-allowed disabled:opacity-40"
|
|
disabled={disableSave}
|
|
onClick={() => void onSave()}
|
|
type="button"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto px-6 py-5">
|
|
<div className="mx-auto max-w-2xl space-y-8">
|
|
{error && (
|
|
<div className="flex items-start gap-2 rounded-lg bg-[var(--color-status-warning)]/10 px-3 py-2 text-[13px] text-[var(--color-status-warning)]">
|
|
<AlertCircle className="mt-0.5 size-3.5 shrink-0" />
|
|
{error}
|
|
</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|