Fix/Feat: Bulk AI Tagging & Progress Tracking for Folder Management #725

[parthraninga]

Fixes#725
This pull request significantly enhances the folder management experience in the settings page by introducing bulk operations for AI tagging, improved progress tracking, and a more organized UI. The changes focus on enabling users to manage multiple folders at once, track tagging progress, and persist UI preferences for a smoother workflow.

Bulk AI Tagging and Progress Tracking Enhancements:

• Added support for bulk enabling and disabling of AI tagging on multiple folders, including new mutation hooks, UI feedback, and state tracking in the useFolderOperations hook.
• Updated the folder management UI to include bulk selection, bulk actions (enable/disable AI tagging for all or selected folders), and a progress summary, using new components like FolderBulkActions, FolderProgressSummary, and FolderSection.

UI/UX Improvements:

• Refactored the folder management card to group folders by tagging status (pending, in progress, completed), allow section collapsing with persisted preferences, and provide a clearer, more interactive management interface.
• Improved empty state messaging and ensured the folder picker remains accessible when no folders are configured.

Dependency Updates:

• Added the @radix-ui/react-checkbox dependency to support new UI controls for bulk selection.

Summary by CodeRabbit

• New Features

  • Added bulk folder AI-tagging operations to manage multiple folders simultaneously
  • Implemented folder selection interface with collapsible sections for organized management
  • Added folder progress summary to display tagging status overview
  • Enhanced landing page with interactive animations on buttons and links

• Chores

  • Added checkbox UI component library dependency

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

[coderabbitai]

Walkthrough

Frontend dependencies and folder management UI were enhanced with bulk AI-tagging operations, new selection state handling, and persisted UI preferences. The folder management card was refactored to organize folders by tagging status with aggregated controls. Landing page animations were improved with hover and tap interactions.

Changes

Cohort / File(s)	Change Summary
Dependency Addition frontend/package.json	Added @radix-ui/react-checkbox (^1.3.3) to dependencies.
Bulk AI-Tagging Operations frontend/src/hooks/useFolderOperations.tsx	Introduced bulkEnableAITaggingMutation and bulkDisableAITaggingMutation with corresponding public callbacks and pending state exports (bulkEnablePending, bulkDisablePending); added useCallback import.
Folder Management UI Refactoring frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx	Restructured folder management with bulk selection state (useBulkFolderSelection), persisted UI preferences (collapsedSections), derived folder data grouping by status, new bulk action handlers (selectAll, enableAll, disableAll, enableSelected, disableSelected), and replaced per-folder rendering with aggregated FolderProgressSummary, FolderBulkActions, and FolderSection components.
Animation Enhancements landing-page/src/Pages/Landing page/Home1.tsx	Added whileHover and whileTap props to Download button and initial/animate/transition props to GitHub link for entrance and interaction animations; minor JSX formatting adjustments.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• FolderManagementCard.tsx: Significant structural refactoring with new selection state, persistence logic, and derived state calculations—requires careful verification of bulk operation flows and component composition.
• useFolderOperations.tsx: Addition of parallel bulk mutations with callbacks—verify mutation configuration and pending state consistency across hook exports.
• Integration between hook and UI: Ensure bulk action handlers properly orchestrate mutations and UI state updates; validate persisted preferences do not conflict with in-flight operations.

Possibly related PRs

• Implement live progress tracking with 1s polling, animated progress b… #574: Overlaps in same files (useFolderOperations.tsx, FolderManagementCard.tsx) with related folder AI-tagging state and status polling features.
• feat: Refactored settings page with folder and user preferences manag… #516: Introduced original useFolderOperations hook and settings UI; this PR extends the same hook with bulk operations and refactors dependent components.
• Fix the Hover state issue (#531) #532: Modifies the same FolderManagementCard component, adjusting cursor styling on interactive elements.

Suggested labels

enhancement, frontend, UI

Suggested reviewers

• rahulharpal1603

Poem

🐰 Bulk operations bound in place,
Selection states now keep their grace,
Folders grouped, preferences stored,
Animations dance, interactions soar—
Checkboxes checked, the UI's race!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: bulk AI tagging operations and progress tracking for folder management, which align with the primary objectives across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

landing-page/src/Pages/Landing page/Home1.tsx (2)

36-46: “Download” CTA has no action; either wire it up or use a semantic link.

Right now it’s an interactive-looking button without an onClick (or form behavior). If this is intended to navigate/download, consider switching to <motion.a href="..."> (or add an onClick handler).

---

47-60: Stale comment + link animation OK.

Line 47 comment implies the GitHub navigation is pending, but Lines 49-51 already link to GitHub—suggest removing/updating that comment to avoid confusion.

🧹 Nitpick comments (3)

landing-page/src/Pages/Landing page/Home1.tsx (1)

8-16: Hero entrance animations look fine; consider honoring reduced-motion.

If you support accessibility preferences, consider disabling/softening these initial/animate transitions when prefers-reduced-motion is set (Framer Motion supports this via useReducedMotion()).

Also applies to: 17-25, 26-34

frontend/src/hooks/useFolderOperations.tsx (1)

200-219: Prefer useCallback deps on mutation.mutate (not the whole mutation object).

Depending on the entire bulkEnableAITaggingMutation / bulkDisableAITaggingMutation can cause callback identity churn if the mutation object isn’t referentially stable.

-  const bulkEnableAITagging = useCallback(
+  const bulkEnableAITagging = useCallback(
     (folderIds: string[]) => {
       if (folderIds.length > 0) {
-        bulkEnableAITaggingMutation.mutate(folderIds);
+        bulkEnableAITaggingMutation.mutate(folderIds);
       }
     },
-    [bulkEnableAITaggingMutation],
+    [bulkEnableAITaggingMutation.mutate],
   );

-  const bulkDisableAITagging = useCallback(
+  const bulkDisableAITagging = useCallback(
     (folderIds: string[]) => {
       if (folderIds.length > 0) {
-        bulkDisableAITaggingMutation.mutate(folderIds);
+        bulkDisableAITaggingMutation.mutate(folderIds);
       }
     },
-    [bulkDisableAITaggingMutation],
+    [bulkDisableAITaggingMutation.mutate],
   );

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

57-66: Persisting collapse prefs is good; consider debouncing writes (optional).

If saveFolderPreferences writes to localStorage, you may want a small debounce to avoid frequent sync writes when users rapidly toggle sections.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d07d817 and 71275e0.

📒 Files selected for processing (4)

• frontend/package.json (2 hunks)
• frontend/src/hooks/useFolderOperations.tsx (3 hunks)
• frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx (1 hunks)
• landing-page/src/Pages/Landing page/Home1.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

frontend/src/hooks/useFolderOperations.tsx (3)

frontend/src/hooks/useQueryExtension.ts (1)

• usePictoMutation (26-78)

frontend/src/api/api-functions/folders.ts (1)

• enableAITagging (44-52)

frontend/src/hooks/useMutationFeedback.tsx (1)

• useMutationFeedback (60-135)

🔇 Additional comments (7)

frontend/package.json (2)

108-108: EOF newline-only change — no action.

---

28-28: No action needed. @radix-ui/react-checkbox@1.3.3 has verified peer dependency support for React ^19.0, and your current react@19.1.0 is fully compatible.

frontend/src/hooks/useFolderOperations.tsx (2)

163-196: Bulk mutations + feedback integration looks consistent with existing single-folder flows.

---

230-240: Nice: exposing bulk pending flags enables proper UI disabling/spinners.

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

1-22: Good modularization: utilities + components make the bulk UI easier to reason about.

---

138-142: Render flow + derived isTaggingPending wiring looks solid for bulk UX.

Also applies to: 150-229

---

99-137: Backend enableAITagging is idempotent—re-triggering is safe.

The concern about unintended work is unfounded. Verification shows:

• db_enable_ai_tagging_batch() simply sets AI_Tagging = True (idempotent at DB level)
• image_util_process_untagged_images() queries only untagged images and returns early if none exist
• cluster_util_face_clusters_sync() respects a 24-hour rule and processes faces only if needed (> 100 untagged)

The "re-trigger enable" branch (lines 116–119) is safe to keep. Both handleEnableAll and handleEnableSelected work correctly regardless of prior state. No changes required.