Application Layout & Framing
Relevant source files
The following files were used as context for generating this wiki page:
The Application Layout and Framing of Keynobi defines the structural organization of the user interface within its native macOS window container. Built using Tauri 2.0 and SolidJS, the layout is designed to maximize vertical space for log streaming and build outputs while providing persistent access to project management and device controls through sidebars and a centralized status bar.
The framing follows a classic "IDE-lite" pattern, utilizing a multi-column flexbox approach. It includes a custom title bar for window controls and branding, a status bar for real-time health and build metrics, and a main content area that switches between primary functional tabs like "Build" and "Logcat".
Sources: README.md, src/App.tsx:238-251
Root Shell Architecture
The root of the application is defined in App.tsx, which establishes a full-viewport flex container. The framing is divided into three primary vertical sections: the TitleBar, the Main Body (containing sidebars and panels), and the StatusBar.
The diagram above illustrates the hierarchical relationship between the framing components. The Main Body uses flex-direction: row to align the sidebars and main content horizontally.
Sources: src/App.tsx:238-285
Window Framing and Custom TitleBar
The application uses an "Overlay" title bar style, configured in tauri.conf.json, which allows the web content to extend to the top of the window while maintaining native macOS window controls. The TitleBar component provides the necessary spacing and potential for custom dragging logic.
Sources: src-tauri/tauri.conf.json:18-28, src/components/layout/TitleBar.tsx
Navigation and Sidebars
Keynobi utilizes a dual-sidebar strategy to manage context and targets without cluttering the main workspace.
Project Sidebar (Left)
The Project Sidebar acts as a persistent registry of Android projects. It supports two states:
- Expanded (220px): Displays project avatars, names, shortened file paths, and build variants.
- Collapsed (48px): Shows only the avatar icons in a slim "rail" view to maximize main panel space.
It includes functionality for adding new projects via openProjectFolder() and renaming or removing existing entries.
Sources: src/components/projects/ProjectSidebar.tsx:11-20, src/components/projects/ProjectSidebar.tsx:191-204
Device Sidebar (Right)
The Device Sidebar provides management for connected ADB devices and Android Virtual Devices (AVDs). It allows users to create, delete, or wipe AVDs and select active targets for deployment.
Sources: README.md, src/App.tsx:284
Main Content Tab Management
The central column is governed by a tab-based navigation system. The state of the active tab is managed via uiState.activeTab.
| Tab ID | Label | Purpose |
|---|---|---|
build | Build | Displays streaming ANSI logs and structured Gradle error lists. |
logcat | Logcat | Shows real-time device logs with 50K ring buffer support. |
Sources: src/App.tsx:230-234, src/App.tsx:254-283
Status and Health Framing
The StatusBar component, located at the bottom of the frame, serves as the primary feedback loop for the application's internal state and the environment's health.
Real-time Indicators
The status bar is divided into functional zones:
- Left Zone: Includes the Settings gear, active project name, Health Center indicator, Build status (with progress spinner), and the MCP (Model Context Protocol) status.
- Right Zone: Displays system resource metrics including
MemoryIndicator(app memory usage) andLogSizeIndicator(log folder disk usage).
The diagram above shows the logical grouping of status indicators within the application's footer.
Health Indicator States
The Health Center indicator uses color-coded dots to represent the overall system state (Java, SDK, ADB, Gradle, and disk checks).
| State | Color | Description |
|---|---|---|
ok | #4ade80 | All environment checks passed. |
warning | #fbbf24 | Some checks need attention (e.g., missing studio command). |
error | #f87171 | Critical environment issues detected. |
loading | Alpha | Health checks are currently running. |
Sources: src/components/layout/StatusBar.tsx:32-41, src/components/health/HealthPanel.tsx:27-33
Global Overlays and Modals
Beyond the standard layout, the framing includes a "Host" layer for global overlays that do not interrupt the main flex flow. These are rendered at the end of the App component and often use Portals to ensure they appear above all other content.
- Command Palette: Triggered by
Cmd+Shift+P, provides a searchable action registry. - Settings Panel: Centralized configuration UI.
- Health Panel: Detailed view of environment check results.
- Onboarding Wizard: Multi-step setup flow for first-time users.
- Toast Container: Auto-dismissing notifications for errors and successes.
Sources: src/App.tsx:288-297, src/components/onboarding/OnboardingWizard.tsx:84-118
Layout Configuration and Styles
The application uses CSS variables for consistent framing styles.
| Property | Value / Variable |
|---|---|
| Background Primary | var(--bg-primary) |
| Sidebar Expanded Width | 220px |
| Sidebar Collapsed Width | 48px |
| Tab Bar Height | 36px |
| Status Bar Height | var(--statusbar-height) |
| Border Style | 1px solid var(--border) |
Sources: src/App.tsx:244-247, src/components/projects/ProjectSidebar.tsx:192-195, src/components/layout/StatusBar.tsx:257-272
Summary
The Application Layout & Framing of Keynobi provides a robust, native-feeling environment for Android development tasks. By utilizing a flexible three-column design with collapsible sidebars and a detailed status bar, it ensures that critical tools like build logs and device management are always accessible while maintaining a clean, focused workspace. The integration of global overlays like the Command Palette and Health Center further enhances the utility of the frame without compromising its structural simplicity.