Redesign sidebar (#1455)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hayden Bleasel 2026-03-13 20:30:52 -07:00 committed by GitHub
parent 66762d023d
commit 3651670fb9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 522 additions and 538 deletions

View file

@ -101,22 +101,22 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
<div
className={cn(
"fixed bottom-0 z-40 flex w-full flex-col overflow-x-hidden overflow-y-scroll border-zinc-200 border-t bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900",
"fixed bottom-0 z-40 flex w-full flex-col overflow-x-hidden overflow-y-scroll border-neutral-200 border-t bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900",
{
"select-none": isResizing,
}
)}
style={{ height }}
>
<div className="sticky top-0 z-50 flex h-fit w-full flex-row items-center justify-between border-zinc-200 border-b bg-muted px-2 py-1 dark:border-zinc-700">
<div className="flex flex-row items-center gap-3 pl-2 text-sm text-zinc-800 dark:text-zinc-50">
<div className="sticky top-0 z-50 flex h-fit w-full flex-row items-center justify-between border-neutral-200 border-b bg-muted px-2 py-1 dark:border-neutral-700">
<div className="flex flex-row items-center gap-3 pl-2 text-sm text-neutral-800 dark:text-neutral-50">
<div className="text-muted-foreground">
<TerminalWindowIcon />
</div>
<div>Console</div>
</div>
<Button
className="size-fit p-1 hover:bg-zinc-200 dark:hover:bg-zinc-700"
className="size-fit p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700"
onClick={() => setConsoleOutputs([])}
size="icon"
variant="ghost"
@ -128,7 +128,7 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
<div>
{consoleOutputs.map((consoleOutput, index) => (
<div
className="flex flex-row border-zinc-200 border-b bg-zinc-50 px-4 py-2 font-mono text-sm dark:border-zinc-700 dark:bg-zinc-900"
className="flex flex-row border-neutral-200 border-b bg-neutral-50 px-4 py-2 font-mono text-sm dark:border-neutral-700 dark:bg-neutral-900"
key={consoleOutput.id}
>
<div
@ -161,7 +161,7 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
</div>
</div>
) : (
<div className="flex w-full flex-col gap-2 overflow-x-scroll text-zinc-900 dark:text-zinc-50">
<div className="flex w-full flex-col gap-2 overflow-x-scroll text-neutral-900 dark:text-neutral-50">
{consoleOutput.contents.map((content) =>
content.type === "image" ? (
<picture key={`${consoleOutput.id}-${content.value}`}>