Core Layout Components
Relevant source files
The following files were used as context for generating this wiki page:The core layout components form the fundamental structure of the PIXONA application's user interface. They provide a consistent and responsive framework for navigation and content presentation, inspired by modern applications like Apple Photos. The main layout is defined in App.tsx and consists of a persistent sidebar for navigation and a main content area where different pages or "views" are rendered.
This system is built using React components, with key elements including a collapsible Sidebar, a ViewHeader for contextual titles, and a StatusBar for displaying application-wide information. Together, these components create a cohesive shell that houses all other features of the application.
Overall Layout Architecture
The primary application layout is established in App.tsx. It uses a top-level flex container to arrange the Sidebar and the main content area, which is managed by react-router-dom, side-by-side. This ensures the sidebar is always present while the content to its right changes based on the current route.
The following diagram illustrates this high-level structure.
This diagram shows how App.tsx orchestrates the main layout, with the Sidebar and Routes as direct children. A selected page then uses ViewHeader and StatusBar to frame its specific content.
Sources: src/App.tsx:19-23, src/pages/SettingsPage.tsx:120-124, 301
Sidebar
The Sidebar is the primary navigation component in the application. It is a highly configurable and responsive component built upon a generic ui/sidebar.tsx implementation. It provides links to all major sections of the application and includes features for collapsing, expanding, and handling mobile views.
Sources: src/components/Sidebar.tsx, src/components/ui/sidebar.tsx
Sidebar Structure and State Management
The sidebar's functionality is managed by the SidebarProvider and the useSidebar hook. The provider wraps the application's layout and establishes a React context (SidebarContext) to share state and functions.
Key aspects of its architecture include:
- State Management: The
SidebarContextmanages the sidebar'sstate("expanded" or "collapsed"), its visibility on mobile (openMobile), and provides atoggleSidebarfunction. - State Persistence: The sidebar's open/closed state on desktop is persisted across sessions using a browser cookie named
sidebar:state. - Responsiveness: It uses a
useIsMobilehook to render a full, collapsible sidebar on desktop and a slide-inSheetcomponent on mobile devices. - Keyboard Shortcut: The sidebar can be toggled using the
Ctrl/Cmd + Bkeyboard shortcut.
Sources: src/components/ui/sidebar.tsx:32-113
The following diagram shows the state transitions of the sidebar.
Sidebar Components
The sidebar is composed of several granular components defined in src/components/ui/sidebar.tsx. The main application Sidebar in src/components/Sidebar.tsx assembles these to create the final navigation panel.
| Component | Description | Source File |
|---|---|---|
SidebarProvider | Wraps the layout and provides the context for sidebar state. | src/components/ui/sidebar.tsx:50 |
Sidebar | The main container for the sidebar content. Adapts to mobile/desktop. | src/components/ui/sidebar.tsx:136 |
SidebarMenu | An unordered list (<ul>) that holds navigation items. | src/components/ui/sidebar.tsx:406 |
SidebarMenuItem | A list item (<li>) that wraps a navigation button. | src/components/ui/sidebar.tsx:411 |
SidebarMenuButton | The actual clickable button or link for navigation. Uses NavLink from react-router-dom. | src/components/ui/sidebar.tsx:444 |
SidebarTrigger | A button (hamburger icon) to toggle the sidebar, primarily for mobile. | src/components/ui/sidebar.tsx:241 |
The Sidebar.tsx component uses these to build the navigation structure with icons and labels for each application section.
// src/components/Sidebar.tsx:16-25
<SidebarMenu>
<SidebarMenuItem>
<NavLink to="/" className={({ isActive }) => getLinkClassName(isActive)}>
<Library size={18} />
<span>Library</span>
</NavLink>
</SidebarMenuItem>
<SidebarMenuItem>
<NavLink to="/calendar" className={({ isActive }) => getLinkClassName(isActive)}>
<Calendar size={18} />
<span>Calendar</span>
</NavLink>
</SidebarMenuItem>
Sources: src/components/Sidebar.tsx:16-25, src/components/ui/sidebar.tsx
ViewHeader
The ViewHeader is a simple, reusable component responsible for displaying a title and an optional subtitle at the top of a content view. It provides a consistent heading style across different pages.
It accepts two string props:
title: The main heading for the view.subtitle: A smaller, secondary line of text below the title.
// src/components/ViewHeader.tsx:3-12
export const ViewHeader = ({ title, subtitle }: ViewHeaderProps) => {
return (
<div className="flex-shrink-0 px-6 py-4 border-b border-app-border bg-app-surface">
<h1 className="text-xl font-semibold text-app-text">{title}</h1>
{subtitle && (
<p className="text-sm text-app-text-muted mt-1">{subtitle}</p>
)}
</div>
);
};
This component is used in pages like SettingsPage to introduce the content.
Sources: src/components/ViewHeader.tsx:1-14, src/pages/SettingsPage.tsx:121-124
StatusBar
The StatusBar is a persistent bar at the bottom of the content view that displays summary information and application status. It is designed to show library statistics and the progress of background tasks like photo scanning.
Features
- Library Statistics: Displays the total number of photos and videos, and the disk space used.
- Progress Indication: Contains a
Progressbar to show the status of ongoing operations. - Version Display: Shows the current application version by fetching it via IPC call
window.electron.getAppVersion().
The component currently uses mock data for statistics but is designed to be updated with real-time data from the application's backend services.
The following diagram shows the flow of how the status bar gets the app version.
Structure
The StatusBar is a div styled to be fixed at the bottom of its container. It uses flexbox to align its child elements, which include text labels for stats and the progress bar.
// src/components/StatusBar.tsx:20-33
<div className="flex-shrink-0 flex items-center justify-between px-4 py-1.5 border-t border-app-border bg-app-surface text-xs text-app-text-muted">
{/* Left side: Stats */}
<div className="flex items-center gap-4">
<span>{status.totalPhotos.toLocaleString()} Photos</span>
<span>{status.totalVideos.toLocaleString()} Videos</span>
<span>{status.diskSpace}</span>
</div>
{/* Center: Progress */}
<div className="w-1/4">
<Progress value={33} className="h-1.5" />
</div>
{/* Right side: Version */}
<div>Version {version}</div>
</div>
Sources: src/components/StatusBar.tsx:20-33
Conclusion
The core layout components—Sidebar, ViewHeader, and StatusBar—provide the essential UI scaffolding for the PIXONA application. Managed within App.tsx, they create a robust and familiar user experience. The Sidebar offers powerful, responsive navigation with persistent state, while ViewHeader and StatusBar frame the content area with contextual information and system status. This modular architecture allows developers to easily build new pages that fit seamlessly into the established application structure.