Skip to content

Fix broken docs links #1075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PranjaliBhardwaj wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix broken docs links #1075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/frontend/gallery-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Gallery View

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.

## Overview

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.

## Layout and Behavior

- **Grid layout** – Media is displayed in a responsive grid that adapts to window size.
- **Date grouping** – Items are organized chronologically (by capture or file date) for quick scanning.
- **Filtering** – Users can filter by tagged status, favourites, and other attributes exposed in the UI.
- **Thumbnails** – Each item is shown as a thumbnail with optional overlays (e.g. favourite icon, AI tags).

## Key Components

The gallery experience is built from several frontend components:

- **ChronologicalGallery** – Renders the date-grouped grid of media.
- **ImageCard** – Renders a single thumbnail, metadata hints, and interaction targets (e.g. select, favourite).
- **MediaView** / **ImageViewer** – Full-size view and navigation when a photo or video is opened.
- **MediaThumbnails** – Thumbnail strip or grid used in the lightbox/viewer.
- **MediaInfoPanel** – Shows metadata, tags, and location for the currently viewed item.
- **MediaViewControls**, **ZoomControls**, **NavigationButtons** – Control zoom, next/previous, and other viewer actions.

## Screenshots

For visual examples of the main gallery, AI tagging, and related screens, see [Screenshots](screenshots.md).

## Related Documentation

- [State Management](state-management.md) – How images and folders are stored and updated in the Redux store.
- [Screenshots](screenshots.md) – Screenshots of the main gallery and other views.
- [UI Components](ui-components.md) – Shared components used in the gallery and across the app.
88 changes: 88 additions & 0 deletions docs/frontend/ui-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
# UI Components

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.

## Overview

- **Primitives** live under `components/ui/` and provide buttons, inputs, dialogs, and other low-level building blocks.
- **Feature components** implement gallery, onboarding, navigation, and media behaviour and often use these primitives.

## ShadCN-style primitives (`components/ui/`)

These are the base components used across the app:

| Component | Role |
|----------------|--------------------------------------------------|
| `button` | Buttons with variants (default, outline, ghost) |
| `card` | Card container with header, content, footer |
| `dialog` | Modal dialogs |
| `input` | Text inputs |
| `label` | Form labels |
| `textarea` | Multi-line text input |
| `badge` | Tags and status badges |
| `alert` | Inline alerts and messages |
| `avatar` | User or entity avatars |
| `dropdown-menu`| Dropdown menus |
| `scroll-area` | Custom scrollable areas |
| `sidebar` | App sidebar layout |
| `sheet` | Slide-out panels |
| `separator` | Visual dividers |
| `switch` | Toggle switches |
| `radio-group` | Radio button groups |
| `pagination` | Pagination controls |
| `progress` | Progress bars |
| `skeleton` | Loading skeletons |
| `tooltip` | Hover tooltips |
| `aspect-ratio` | Fixed aspect-ratio wrapper |

App-specific UI pieces in the same area:

- **404** – Not-found page layout
- **ErrorPage** – Full-page error view
- **LoadingScreen** – App loading screen
- **Icons** – Shared icon set
- **PaginationControls** – Pagination tuned for the gallery

## Feature components

These implement specific features and often use the primitives above:

### Media and gallery

- **Media/** – `ChronologicalGallery`, `ImageCard`, `ImageViewer`, `MediaView`, `MediaThumbnails`, `MediaInfoPanel`, `MediaViewControls`, `ZoomControls`, `NavigationButtons`, `ImageTags`
- **FaceCollections** – Face clusters and naming UI

### Navigation and layout

- **Navigation/Navbar** – Top app bar
- **Navigation/Sidebar** – App sidebar (e.g. `AppSidebar`)

### Onboarding and settings

- **OnboardingSteps/** – Steps, folder setup, avatar choice, theme selection, server check, etc.
- **account-settings** – User account and preference UI

### Dialogs and feedback

- **Dialog/** – `InfoDialog`, `FaceSearchDialog`
- **Loader/** – `GlobalLoader`
- **EmptyStates/** – `EmptyGalleryState`, `EmptyAITaggingState`

### Other

- **FolderPicker/** – Folder selection and related dialogs (e.g. `DeleteImageDialog`)
- **ThemeToggle** – Light/dark theme switch
- **Timeline/** – `TimelineScrollbar`
- **Updater/** – `UpdateDialog`
- **VideoPlayer/** – `NetflixStylePlayer`
- **WebCam/** – `WebCamComponent`

## Styling

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.

## Related documentation

- [Gallery View](gallery-view.md) – How the main gallery is built from these components
- [State Management](state-management.md) – How components connect to Redux
- [Screenshots](screenshots.md) – Screenshots of the app using these components
Comment on lines +1 to +88
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify that documented component directories exist

echo "=== Checking frontend/src/components/ui (ShadCN primitives) ==="
if [ -d "frontend/src/components/ui" ]; then
  echo "✓ Found: frontend/src/components/ui"
  echo "  Subdirectories:"
  ls -1 "frontend/src/components/ui" 2>/dev/null
else
  echo "? Path not found at frontend/src/components/ui, searching..."
  find . -type d -name "ui" | grep -i components | head -5
fi

echo ""
echo "=== Checking for feature component directories ==="
# Check for Media directory
if fd -t d "^Media$" frontend 2>/dev/null; then
  echo "✓ Found Media directory"
fi

# Check for Navigation directory
if fd -t d "^Navigation$" frontend 2>/dev/null; then
  echo "✓ Found Navigation directory"
fi

# Check for OnboardingSteps directory
if fd -t d "^OnboardingSteps$" frontend 2>/dev/null; then
  echo "✓ Found OnboardingSteps directory"
fi

# Check for Dialog directory
if fd -t d "^Dialog$" frontend 2>/dev/null; then
  echo "✓ Found Dialog directory"
fi

echo ""
echo "=== List all component directories ==="
find frontend/src/components -type d -maxdepth 1 2>/dev/null | sort

Repository: AOSSIE-Org/PictoPy

Length of output: 1276

🏁 Script executed:

#!/bin/bash
# Check if Slider is exported or used in the codebase

echo "=== Checking Slider.tsx content and exports ==="
head -20 frontend/src/components/ui/Slider.tsx

echo ""
echo "=== Checking if Slider is referenced in index/barrel exports ==="
if [ -f "frontend/src/components/ui/index.tsx" ] || [ -f "frontend/src/components/ui/index.ts" ]; then
  echo "Found index file, checking for Slider export..."
  cat frontend/src/components/ui/index.ts* 2>/dev/null || cat frontend/src/components/ui/index.tsx 2>/dev/null | grep -i slider
else
  echo "No index file found"
fi

echo ""
echo "=== Checking usage of Slider component in the codebase ==="
rg "from.*components/ui.*Slider|import.*Slider" frontend/src --max-count 5

Repository: AOSSIE-Org/PictoPy

Length of output: 911

Add missing Slider component to the primitives table.

The documentation is comprehensive and well-organized with accurate component paths and directory structure. However, the Slider primitive component exists in frontend/src/components/ui/Slider.tsx and is actively used by NetflixStylePlayer, but it's not included in the ShadCN-style primitives table. Add it to the table for complete inventory.

🤖 Prompt for AI Agents 
In `@docs/frontend/ui-components.md` around lines 1 - 88, The ShadCN-style
primitives table is missing the Slider component used by the media player; add a
new row for Slider in the primitives table (ShadCN-style primitives section)
listing `Slider` as the component and a short role like "Range slider / media
seek control" so the docs reflect the actual primitive used by
NetflixStylePlayer; ensure the name matches the Slider component symbol used in
the codebase.

2 changes: 2 additions & 0 deletions mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ nav:
- Python Backend Image Processing: backend/backend_python/image-processing.md
- Rust Backend API: backend/backend_rust/api.md
- Frontend:
- UI Components: frontend/ui-components.md
- Gallery View: frontend/gallery-view.md
- State Management: frontend/state-management.md
- Screenshots: frontend/screenshots.md

Expand Down