Component: TopBar
Relevant source files
The following files were used as context for generating this wiki page:The TopBar component is a custom, draggable window title bar for the Scripty application. It replaces the native window decorations, which are disabled in the application's configuration. This component provides essential window management controls—close, minimize, and maximize—and displays the application's title, "(S)cripty".
The component is rendered at the top of the main application view. Its entire area is designated as a draggable region, allowing the user to move the application window. The styling, including a semi-transparent background and a blur effect, is applied via Tailwind CSS classes.
Sources: src/components/TopBar.jsx, src/App.jsx:43, src-tauri/tauri.conf.json:20
Architecture and Functionality
The TopBar is a stateless React component that directly interacts with the Tauri window management API to control the application window's state.
Sources: src/components/TopBar.jsx
Window Controls
The component features three buttons that replicate standard window controls. These controls are necessary because the native window frame is disabled via the "decorations": false setting in the Tauri configuration. The functionality of these buttons is enabled by specific permissions granted in the capabilities configuration.
| Control | Function | Description | Permissions Required |
|---|---|---|---|
| Close | handleClose | Closes the application window using win.close(). | core:window:allow-close |
| Min. | handleMin | Minimizes the application window using win.minimize(). | core:window:allow-minimize |
| Max. | handleMax | Toggles the window between maximized and unmaximized states using win.maximize() and win.unmaximize(). | core:window:allow-maximize, core:window:allow-unmaximize |
Sources: src/components/TopBar.jsx:7-21, src-tauri/tauri.conf.json:20, src-tauri/capabilities/default.json:12-15
The following diagram illustrates the user interaction flow for the window controls.
This diagram shows how user clicks on the control buttons trigger corresponding functions that call the Tauri Window API.
Sources: src/components/TopBar.jsx:7-21
Draggable Region
The entire TopBar div element is configured as a draggable region for the window. This is achieved by setting the data-tauri-drag-region attribute on the main container. This allows the user to click and drag anywhere on the top bar to move the application window. This feature requires the core:window:allow-start-dragging permission.
<div
className=" fixed z-50 w-full h-10 px-3 flex items-center justify-between bg-main/25 backdrop-blur-2xl"
data-tauri-drag-region
>
{/* ... content ... */}
</div>
Sources: src/components/TopBar.jsx:31-34, src-tauri/capabilities/default.json:11
Application Title and Styling
The TopBar displays the static application title, "(S)cripty", centered horizontally. The component's visual appearance is defined by Tailwind CSS classes, which apply a fixed position, a specific height, a semi-transparent background (bg-main/25), and a backdrop blur effect (backdrop-blur-2xl).
- Application Title: The name "(S)cripty" is hardcoded in the component and matches the
productNamein the Tauri configuration. - Styling: The background color variable
--color-mainis defined in the application's stylesheet.
Sources: src/components/TopBar.jsx:42-44, src-tauri/tauri.conf.json:3, src/App.css:12, 21
Component Integration
The TopBar is integrated into the main App component, ensuring it is rendered on every view of the application. It is placed outside the main content area to remain fixed at the top of the viewport.
// src/App.jsx
function App() {
// ... state and hooks
return (
<>
<TopBar />
<main className="flex w-full h-full bg-background">
{/* ... rest of the application */}
</main>
</>
);
}
Sources: src/App.jsx:9, 42-44
The following sequence diagram shows the interaction between the user, the TopBar component, and the Tauri API.
This diagram demonstrates the logic flow when a user interacts with the maximize button, toggling the window state.
Sources: src/components/TopBar.jsx:15-18
Summary
The TopBar component is a fundamental piece of the application's user interface, providing essential window management in a custom, styled package. It leverages Tauri's APIs for window control and its attribute system for creating a draggable region, which is necessary due to the disabled native window decorations. Its seamless integration into the App component ensures a consistent look and feel across the application.