Skip to content

Commit 8f4b756

Browse files
PranjaliBhardwajrohan-pandeyy
PranjaliBhardwaj
and
rohan-pandeyy
authored
Fix broken docs links (#1075)
* fix broken docs Signed-off-by: Pranjali Bhardwaj <pranjalisharma6543@gmail.com> * Add slider to shadcn ui table --------- Signed-off-by: Pranjali Bhardwaj <pranjalisharma6543@gmail.com> Co-authored-by: ROHAN PANDEY <95585299+rohan-pandeyy@users.noreply.github.com>
1 parent 67cc6a6 commit 8f4b756

3 files changed

Lines changed: 126 additions & 0 deletions

File tree

‎docs/frontend/gallery-view.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Gallery View
2+
3+
The gallery view is the main way users browse and interact with their photos in PictoPy. It presents media in a responsive grid, organized by date, with filtering and AI-backed organization.
4+
5+
## Overview
6+
7+
The main gallery shows photos and videos in a grid layout. Images are grouped by date, and users can filter by tags, favourites, and other criteria. The gallery connects to the [state management](state-management.md) layer for images and folders, and uses shared [UI components](ui-components.md) for layout and controls.
8+
9+
## Layout and Behavior
10+
11+
- **Grid layout** – Media is displayed in a responsive grid that adapts to window size.
12+
- **Date grouping** – Items are organized chronologically (by capture or file date) for quick scanning.
13+
- **Filtering** – Users can filter by tagged status, favourites, and other attributes exposed in the UI.
14+
- **Thumbnails** – Each item is shown as a thumbnail with optional overlays (e.g. favourite icon, AI tags).
15+
16+
## Key Components
17+
18+
The gallery experience is built from several frontend components:
19+
20+
- **ChronologicalGallery** – Renders the date-grouped grid of media.
21+
- **ImageCard** – Renders a single thumbnail, metadata hints, and interaction targets (e.g. select, favourite).
22+
- **MediaView** / **ImageViewer** – Full-size view and navigation when a photo or video is opened.
23+
- **MediaThumbnails** – Thumbnail strip or grid used in the lightbox/viewer.
24+
- **MediaInfoPanel** – Shows metadata, tags, and location for the currently viewed item.
25+
- **MediaViewControls**, **ZoomControls**, **NavigationButtons** – Control zoom, next/previous, and other viewer actions.
26+
27+
## Screenshots
28+
29+
For visual examples of the main gallery, AI tagging, and related screens, see [Screenshots](screenshots.md).
30+
31+
## Related Documentation
32+
33+
- [State Management](state-management.md) – How images and folders are stored and updated in the Redux store.
34+
- [Screenshots](screenshots.md) – Screenshots of the main gallery and other views.
35+
- [UI Components](ui-components.md) – Shared components used in the gallery and across the app.

‎docs/frontend/ui-components.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# UI Components
2+
3+
PictoPy’s frontend uses a mix of shared primitives (based on ShadCN) and app-specific components. This page gives an overview of both so you can find and reuse the right parts when building or changing the UI.
4+
5+
## Overview
6+
7+
- **Primitives** live under `components/ui/` and provide buttons, inputs, dialogs, and other low-level building blocks.
8+
- **Feature components** implement gallery, onboarding, navigation, and media behaviour and often use these primitives.
9+
10+
## ShadCN-style primitives (`components/ui/`)
11+
12+
These are the base components used across the app:
13+
14+
| Component | Role |
15+
|----------------|--------------------------------------------------|
16+
| `button` | Buttons with variants (default, outline, ghost) |
17+
| `card` | Card container with header, content, footer |
18+
| `dialog` | Modal dialogs |
19+
| `input` | Text inputs |
20+
| `label` | Form labels |
21+
| `textarea` | Multi-line text input |
22+
| `badge` | Tags and status badges |
23+
| `alert` | Inline alerts and messages |
24+
| `avatar` | User or entity avatars |
25+
| `dropdown-menu`| Dropdown menus |
26+
| `scroll-area` | Custom scrollable areas |
27+
| `sidebar` | App sidebar layout |
28+
| `sheet` | Slide-out panels |
29+
| `separator` | Visual dividers |
30+
| `slider` | Slider for volume, video-duration, etc. |
31+
| `switch` | Toggle switches |
32+
| `radio-group` | Radio button groups |
33+
| `pagination` | Pagination controls |
34+
| `progress` | Progress bars |
35+
| `skeleton` | Loading skeletons |
36+
| `tooltip` | Hover tooltips |
37+
| `aspect-ratio` | Fixed aspect-ratio wrapper |
38+
39+
App-specific UI pieces in the same area:
40+
41+
- **404** – Not-found page layout
42+
- **ErrorPage** – Full-page error view
43+
- **LoadingScreen** – App loading screen
44+
- **Icons** – Shared icon set
45+
- **PaginationControls** – Pagination tuned for the gallery
46+
47+
## Feature components
48+
49+
These implement specific features and often use the primitives above:
50+
51+
### Media and gallery
52+
53+
- **Media/** – `ChronologicalGallery`, `ImageCard`, `ImageViewer`, `MediaView`, `MediaThumbnails`, `MediaInfoPanel`, `MediaViewControls`, `ZoomControls`, `NavigationButtons`, `ImageTags`
54+
- **FaceCollections** – Face clusters and naming UI
55+
56+
### Navigation and layout
57+
58+
- **Navigation/Navbar** – Top app bar
59+
- **Navigation/Sidebar** – App sidebar (e.g. `AppSidebar`)
60+
61+
### Onboarding and settings
62+
63+
- **OnboardingSteps/** – Steps, folder setup, avatar choice, theme selection, server check, etc.
64+
- **account-settings** – User account and preference UI
65+
66+
### Dialogs and feedback
67+
68+
- **Dialog/** – `InfoDialog`, `FaceSearchDialog`
69+
- **Loader/** – `GlobalLoader`
70+
- **EmptyStates/** – `EmptyGalleryState`, `EmptyAITaggingState`
71+
72+
### Other
73+
74+
- **FolderPicker/** – Folder selection and related dialogs (e.g. `DeleteImageDialog`)
75+
- **ThemeToggle** – Light/dark theme switch
76+
- **Timeline/** – `TimelineScrollbar`
77+
- **Updater/** – `UpdateDialog`
78+
- **VideoPlayer/** – `NetflixStylePlayer`
79+
- **WebCam/** – `WebCamComponent`
80+
81+
## Styling
82+
83+
UI components are styled with **Tailwind CSS**. Shared look and behaviour (including themes) are kept consistent via Tailwind classes and the design tokens used by the ShadCN-based components.
84+
85+
## Related documentation
86+
87+
- [Gallery View](gallery-view.md) – How the main gallery is built from these components
88+
- [State Management](state-management.md) – How components connect to Redux
89+
- [Screenshots](screenshots.md) – Screenshots of the app using these components

‎mkdocs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ nav:
7777
- Rust Backend API: backend/backend_rust/api.md
7878

7979
- Frontend:
80+
- Gallery View: frontend/gallery-view.md
81+
- UI Components: frontend/ui-components.md
8082
- State Management: frontend/state-management.md
8183
- Memories: frontend/memories.md
8284
- Screenshots: frontend/screenshots.md

0 commit comments

Comments
 (0)