Fix: Show "Folder is empty" message for empty folders in AI tagging #592

[codex-yv]

Description

This PR addresses an issue where enabling AI tagging on a folder with no images would display a stagnant 0% progress bar. The updated logic checks for the image count and provides a clear "Folder is empty" message instead. #592

Changes in Backend

• Backend
  backend/app/database/folders.py Updated db_get_all_folder_details to include a LEFT JOIN with the images table, allowing each folder to return its respective image_count.

• Schemas
  backend/app/schemas/folders.py Added the image_count field to the FolderDetails Pydantic model to ensure the data is passed to the frontend.

• Routes
  backend/app/routes/folders.py Updated the get_all_folders endpoint to unpack the new image_count value and include it in the API response.

Changes in Frontend

• Types
  frontend/src/types/Folder.ts Updated the FolderDetails interface to include the image_count property.

• Components
  frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx

  • Implemented a conditional check within the AI Tagging section.
  • If a folder is empty (image_count === 0), it now displays an italicized "Folder is empty" message.
  • If the folder contains images, it continues to show the AI Tagging progress bar as usual.

Final Result

Users will now see a much clearer state when attempting to enable AI tagging on empty folders. Instead of a misleading progress bar, they are explicitly informed that the folder is empty, improving the overall UX of the Folder Management section.

Summary by CodeRabbit

• New Features

  • Folders now track and display the count of contained images.
  • Empty folders display a dedicated message instead of progress indicators, improving user experience.

• Chores

  • Updated development environment with new browser compatibility dependency.
  • Cleaned up unused code references in the application.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds image count tracking to folders throughout the application stack. The database layer now counts images per folder, this count propagates through the backend API and schema definitions, and the frontend displays a "Folder is empty" message when the count is zero instead of showing progress UI.

Changes

Cohort / File(s)	Summary
Backend Database Layer backend/app/database/folders.py	Updated db_get_all_folder_details() to return an additional image_count integer field via SQL COUNT(i.id) aggregation with joined images table.
Backend API & Schema backend/app/routes/folders.py, backend/app/schemas/folders.py	Extended route handler to unpack image_count from database tuple and pass to FolderDetails schema; added image_count: int = 0 field to FolderDetails model.
Frontend Type Definitions frontend/src/types/Folder.ts	Added optional image_count?: number property to FolderDetails interface.
Frontend UI Component frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx	Added conditional rendering to display "Folder is empty" message when image_count === 0, otherwise render existing AI tagging progress UI.
API Documentation docs/backend/backend_python/openapi.json	Added image_count field to FolderDetails schema; restructured ErrorResponse references in user-preference endpoints to app__schemas__user_preferences__ErrorResponse; wrapped InputType query parameter in allOf structure; removed additionalProperties constraint from ImageInCluster metadata.
Frontend Dependencies & Cleanup frontend/package.json, frontend/src-tauri/src/main.rs	Added "baseline-browser-mapping" ^2.9.19 to devDependencies; removed unused ShellExt import.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Implement live progress tracking with 1s polling, animated progress b… #574: Modifies FolderManagementCard to display live AI tagging progress, directly overlaps with this PR's UI changes in the same component.
• feat: Refactored settings page with folder and user preferences manag… #516: Modifies folder management surface and FolderDetails type definition, which this PR extends with the image_count field.

Suggested labels

backend, frontend, UI

Suggested reviewers

• rahulharpal1603

Poem

🐰 A count of images now flows through the stack,
From database to frontend and back,
When folders sit empty, a message we show,
No progress bars when there's nothing below,
The data now tells what the UI should know! 📊✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly and clearly describes the main change: adding a 'Folder is empty' message for empty folders in the AI tagging UI, which aligns with the primary change across backend and frontend.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

frontend/package.json (1)

91-91: Unrelated dependency addition.

baseline-browser-mapping is unrelated to the empty-folder fix described in this PR. Consider removing it from this changeset and adding it in a separate PR to keep changes focused and reviewable.

docs/backend/backend_python/openapi.json (1)

1120-1127: Unrelated OpenAPI spec changes bundled in this PR.

The InputType allOf wrapping, user_preferences ErrorResponse schema addition, and reference updates are unrelated to the empty-folder fix. If these came from a full spec regeneration, consider committing only the diff relevant to this feature to keep the PR focused.

Also applies to: 1240-1240, 1280-1280, 1290-1290, 2947-2971

frontend/src/types/Folder.ts (1)

8-8: Consider making image_count required to match the backend contract.

The backend always returns image_count (Pydantic default is 0, and the SQL COUNT always produces a value). Marking it optional means undefined silently falls through to the progress-bar branch, which is a safe fallback — but making it non-optional (image_count: number) would better reflect the actual API shape and catch deserialization issues at the type level.

frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx (1)

40-42: Pre-existing: prefer folder.folder_id as the React key.

Using array index as a key can cause subtle rendering bugs if the folder list is reordered or items are removed. folder.folder_id is a stable unique identifier already available.

Suggested change

-          {folders.map((folder: FolderDetails, index: number) => (
-            <div
-              key={index}
+          {folders.map((folder: FolderDetails) => (
+            <div
+              key={folder.folder_id}

---

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.}