# 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/`](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/`](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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.betterbugs.io/contributing-to-betterbugs/design-of-our-code/page-shared-ui-and-layout-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.