syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(view): overlay compact top bar

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 10:02:22 +02:00
parent b4f1a149c6
commit ac2a156a1f
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
view/App.tsx
View File

@@ -12,16 +12,14 @@ export function App({ app }: AppProps) {
const zoomPercent = Math.round(state.editor.viewport.zoom * 100); const zoomPercent = Math.round(state.editor.viewport.zoom * 100);
return ( return (
<main className="flex h-full flex-col bg-background text-foreground"> <main className="relative h-full bg-background text-foreground">
<header className="flex h-12 items-center justify-between border-b px-4"> <header className="pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between px-3 text-white">
<h1 className="font-semibold">Image Studio</h1> <h1 className="text-sm font-medium">Image Studio</h1>
<div className="text-sm text-muted-foreground"> <div className="text-xs">
{state.document.name} · {zoomPercent}% · {state.editor.viewport.size.w}×{state.editor.viewport.size.h} {state.document.name} · {zoomPercent}% · {state.editor.viewport.size.w}×{state.editor.viewport.size.h}
</div> </div>
</header> </header>
<section className="min-h-0 flex-1 bg-muted"> <CanvasViewport store={app.store} />
<CanvasViewport store={app.store} />
</section>
</main> </main>
); );
} }