Interactive Dialogs
Relevant source files
The following files were used as context for generating this wiki page:Interactive dialogs are a core component of the PIXONA user experience, providing focused, modal windows for key user actions. These dialogs are used for tasks such as importing media, batch editing photo metadata, and initiating face scans. They are built upon a reusable base component that ensures a consistent look, feel, and behavior across the application.
The dialog system is architected around a foundational UI component that wraps the @radix-ui/react-dialog library, providing styling and animation. Application-specific dialogs then consume this base component to implement their unique logic and user interface, often interacting with the Electron main process for filesystem operations or with the local database for data manipulation.
Base Dialog Architecture
The foundation for all dialogs in the application is provided by the components in src/components/ui/dialog.tsx. These are styled wrappers around the primitives from @radix-ui/react-dialog.
Sources: src/components/ui/dialog.tsx
Core Components
The base dialog is composed of several exported React components that can be assembled to create a complete dialog window.
| Component | Description |
|---|---|
Dialog | The root component that manages the dialog's open/closed state. |
DialogTrigger | A button or element that, when clicked, opens the dialog. |
DialogContent | The main container for the dialog's content. It includes an overlay, animations for opening/closing, and a close button. It is rendered inside a DialogPortal to be appended to the document body. |
DialogHeader | A container for the dialog's title and description, providing consistent spacing and text alignment. |
DialogFooter | A container for action buttons (e.g., Save, Cancel), with responsive flex-direction. |
DialogTitle | The main title of the dialog. |
DialogDescription | A subtitle or descriptive text providing more context. |
DialogClose | A button or element that closes the dialog. An X icon is included by default in DialogContent. |
Sources: src/components/ui/dialog.tsx:5-110
Component Composition
The following diagram illustrates how the base components are composed to create a dialog.
This diagram shows that a DialogTrigger controls the visibility of the DialogPortal, which contains the DialogOverlay and the DialogContent. The DialogContent itself is structured with a DialogHeader, a body, and a DialogFooter.
Sources: src/components/ui/dialog.tsx:38-72, src/components/ImportDialog.tsx:136-142
Application-Specific Dialogs
PIXONA implements several dialogs for specific features, each building upon the base dialog architecture.
Import Dialog
The ImportDialog allows users to import photos and videos from their local file system. It is triggered from the main sidebar.
Sources: src/components/ImportDialog.tsx, src/components/Sidebar.tsx:34-37
Features
- Multiple Import Sources: Users can choose to import from a specific folder or an entire drive.
- State-driven UI: The dialog's content changes based on the import state. Initially, it shows source options. During import, it displays a progress bar and status text.
- Asynchronous Operation: File scanning and importing are asynchronous operations that communicate with the Electron main process.
- Progress Updates: It listens for real-time progress events from the main process to update the UI.
Sources: src/components/ImportDialog.tsx:15-19, src/components/ImportDialog.tsx:145-199
Import Flow
The import process involves communication between the React front-end and the Electron back-end.
This sequence shows how the ImportDialog component initiates a folder selection via an IPC call, then starts a directory scan. During the scan, the main process sends progress updates back to the renderer, which are displayed in the UI. Once the scan is complete, the file metadata is saved to the database.
Sources: src/components/ImportDialog.tsx:21-88, electron/main.ts:114-204
Batch Edit Dialog
The BatchEditDialog enables users to modify the metadata of multiple photos simultaneously. It is activated from the Library page when photos are selected.
Sources: src/components/BatchEditDialog.tsx, src/pages/Library.tsx:17-21, src/pages/Library.tsx:81-86
Features
- Bulk Updates: Applies changes to all selected photo IDs.
- Editable Fields: Supports changing the date, location, and tags.
- Component Integration: Uses other UI components like
Popover,Calendar, andInputfor a rich editing experience.
Sources: src/components/BatchEditDialog.tsx:72-126
Save Logic
The handleSave function orchestrates the update process.
This flowchart outlines the logic within the handleSave function. It checks for selected photos and actual changes before calling the database to perform the batch update.
Sources: src/components/BatchEditDialog.tsx:29-65
Face Scan Dialog
The FaceScanDialog provides an interface to start the process of detecting and grouping faces within the photo library.
Sources: src/components/FaceScanDialog.tsx
Features
- Single-Action Initiation: A simple "Start Scan" button kicks off a complex background process.
- Library Integration: Interacts with the
faceRecognitionlibrary and the database (db). - UI Feedback: Shows a scanning state with an animated icon and progress bar.
Sources: src/components/FaceScanDialog.tsx:50-73
Scan Process
The face scan is a client-side process that leverages a dedicated library.
This diagram shows that the dialog first fetches all photos from the database. It then uses the faceRecognition library to load models, cluster faces from the photos, and generate "people" entities. Finally, these new entities are saved back to the database.
Sources: src/components/FaceScanDialog.tsx:24-48
Summary
The interactive dialogs in PIXONA are a critical part of the application's user interface. By using a composable base component, the application maintains a consistent design language. Each specific dialog encapsulates the logic for a key feature, whether it's interacting with the file system via Electron's IPC mechanism for imports, performing batch database updates for metadata editing, or running intensive client-side computations for face recognition. This modular and state-driven approach allows for complex operations to be presented to the user in a simple and understandable way.