# Page Shared UI and Layout System

The application has a consistent structure across all pages:

* Header (navigation, theme toggle, etc.)
* Main content area (where tools render)
* Footer (links, info)

These are in [`app/components/layout/`](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html) and applied globally through `app/layout.tsx`.

**Reusable UI components**

Common UI elements live in [`app/components/ui/`](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html). Use these when building tools:

* Buttons, inputs, text areas
* Copy-to-clipboard components
* Error and success messages
* Loaders and spinners

Look at existing tools to see which components are available before creating new ones.

**Component patterns**

When building a tool component, you can follow this pattern if needed:

> <pre data-full-width="true"><code><strong>Input area → Process → Output area
> </strong></code></pre>

For example:

* Text converter: input text → convert → show result
* JSON formatter: paste JSON → format → display nicely
* Code minifier: select file/text → minify → download/copy

Reuse existing patterns. Don't reinvent UI elements.

**Consistency first**

Check how similar tools handle:

* Error states (what happens if input is invalid?)
* Copy functionality (do they have copy buttons?)
* File upload or text input? (be consistent with similar tools)
* Output display (show result inline, in modal, or download?)

Ask in the issue if you're unsure which pattern to follow.