Fix broken docs links

[PranjaliBhardwaj]

Issue: #1074

Summary of changes:

1. docs/frontend/gallery-view.md
   Describes the main gallery: grid layout, date grouping, filtering.
   Lists components (ChronologicalGallery, ImageCard, MediaView, ImageViewer, MediaThumbnails, MediaInfoPanel, etc.).
   Cross-links to Screenshots, State Management, and UI Components.
2. docs/frontend/ui-components.md
   ShadCN-style primitives: table of button, card, dialog, input, badge, avatar, sidebar, etc., and app-specific bits (404, ErrorPage, LoadingScreen, Icons, PaginationControls).
   Feature components: Media, Navigation, OnboardingSteps, Dialog, Loader, EmptyStates, FolderPicker, ThemeToggle, Timeline, Updater, VideoPlayer, WebCam.
   Short “Related documentation” section linking to Gallery View, State Management, and Screenshots.
3. mkdocs.yml
   Under Frontend, nav updated to:
   UI Components → frontend/ui-components.md
   Gallery View → frontend/gallery-view.md
   State Management → frontend/state-management.md
   Screenshots → frontend/screenshots.md
   docs/index.md already points to ./frontend/ui-components and ./frontend/gallery-view. Those targets exist now, so the links work. No change was made to docs/index.md.

Summary by CodeRabbit

• Documentation
  • Added comprehensive Gallery View feature documentation covering layout, behavior, components, and screenshots.
  • Added UI Components architecture guide detailing frontend structure, component organization, and styling approach.
  • Updated documentation navigation to include new frontend reference guides.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Three files updated to add frontend documentation: new Gallery View and UI Components documentation files created, and MkDocs navigation updated to include these entries. Total additions: 125 lines across documentation and configuration.

Changes

Cohort / File(s)	Summary
Frontend Documentation docs/frontend/gallery-view.md, docs/frontend/ui-components.md	Added comprehensive frontend documentation covering Gallery View feature architecture (responsive grid, date grouping, filtering, thumbnails) and UI Components structure (ShadCN primitives, feature components, styling with Tailwind CSS)
MkDocs Navigation mkdocs.yml	Updated navigation to surface two new frontend documentation pages under the Frontend section

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• Issue #511: refactor(rust): streamline backend to minimal API and update docs structure #515: Directly conflicts with this PR by removing the same documentation files and reverting mkdocs navigation changes.
• DOC: Remove setup instructions from docs website and create unified s… #440: Modifies mkdocs.yml and adds frontend documentation, overlapping with frontend docs and navigation structure changes.

Suggested labels

documentation, good first issue

Suggested reviewers

• rahulharpal1603

Poem

🐰 Hopping through docs with care and delight,
Gallery Views and UI Components bright,
MkDocs aligned, navigation so neat,
Frontend docs make the repo complete! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title 'Fix broken docs links' is misleading. The actual changes add new documentation files and update navigation, not fix broken links.	Revise the title to reflect the actual changes, such as 'Add frontend documentation for Gallery View and UI Components' or 'Create Gallery View and UI Components documentation'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@docs/frontend/ui-components.md`:
- Around line 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.

[coderabbitai]

⚠️ 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.