feat: Bulk AI Tagging & Progress Tracking for Folder Management (#725)

- Add progress summary showing overall AI tagging status
- Add bulk action buttons (AI Tag All, Tag Selected, Disable All)
- Add smart sorting with collapsible sections (Completed/In Progress/Pending)
- Add multi-select functionality with checkboxes
- Add Checkbox UI component
- Add utility functions for folder grouping and stats
- Add unit tests for folder utilities

Closes #725

Author: agnik

frontend/package-lock.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",

frontend/package.json

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Sparkles, SparklesIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface FolderBulkActionsProps {
+  totalCount: number;
+  selectedCount: number;
+  pendingCount: number;
+  enabledCount: number;
+  isAllSelected: boolean;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  onEnableAll: () => void;
+  onEnableSelected: () => void;
+  onDisableAll: () => void;
+  onDisableSelected: () => void;
+  isEnabling: boolean;
+  isDisabling: boolean;
+}
+
+/**
+ * Bulk action buttons for folder management
+ */
+export const FolderBulkActions: React.FC<FolderBulkActionsProps> = ({
+  totalCount,
+  selectedCount,
+  pendingCount,
+  enabledCount,
+  isAllSelected,
+  onSelectAll,
+  onDeselectAll,
+  onEnableAll,
+  onEnableSelected,
+  onDisableAll,
+  onDisableSelected,
+  isEnabling,
+  isDisabling,
+}) => {
+  if (totalCount === 0) return null;
+
+  const isLoading = isEnabling || isDisabling;
+
+  return (
+    <div className="border-border mb-4 flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3">
+      {/* Selection Controls */}
+      <div className="flex items-center gap-3">
+        <div
+          className="flex cursor-pointer items-center gap-2"
+          onClick={isAllSelected ? onDeselectAll : onSelectAll}
+        >
+          <Checkbox
+            checked={isAllSelected}
+            onCheckedChange={isAllSelected ? onDeselectAll : onSelectAll}
+            className="cursor-pointer"
+          />
+          <span className="text-sm">
+            {isAllSelected ? 'Deselect All' : 'Select All'} ({totalCount})
+          </span>
+        </div>
+
+        {selectedCount > 0 && (
+          <span className="text-muted-foreground text-sm">
+            {selectedCount} selected
+          </span>
+        )}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-2">
+        {/* Enable Actions */}
+        {pendingCount > 0 && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onEnableAll}
+            disabled={isLoading}
+            className="gap-1.5"
+          >
+            <Sparkles className="h-3.5 w-3.5" />
+            AI Tag All ({pendingCount})
+          </Button>
+        )}
+
+        {selectedCount > 0 && (
+          <Button
+            variant="default"
+            size="sm"
+            onClick={onEnableSelected}
+            disabled={isLoading}
+            className="gap-1.5"
+          >
+            <SparklesIcon className="h-3.5 w-3.5" />
+            Tag Selected ({selectedCount})
+          </Button>
+        )}
+
+        {/* Disable Actions */}
+        {enabledCount > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onDisableAll}
+            disabled={isLoading}
+            className="text-muted-foreground hover:text-destructive gap-1.5"
+          >
+            Disable All ({enabledCount})
+          </Button>
+        )}
+
+        {selectedCount > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onDisableSelected}
+            disabled={isLoading}
+            className="text-muted-foreground hover:text-destructive gap-1.5"
+          >
+            Disable Selected
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FolderBulkActions;

frontend/src/components/FolderManagement/FolderBulkActions.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { CheckCircle2, Loader2, Clock } from 'lucide-react';
+import { Progress } from '@/components/ui/progress';
+import { FolderStats } from '@/utils/folderUtils';
+
+interface FolderProgressSummaryProps {
+  stats: FolderStats;
+}
+
+/**
+ * Displays overall AI tagging progress summary
+ */
+export const FolderProgressSummary: React.FC<FolderProgressSummaryProps> = ({
+  stats,
+}) => {
+  const { total, completed, inProgress, pending, overallPercentage } = stats;
+
+  if (total === 0) return null;
+
+  const foldersWithTagging = completed + inProgress;
+
+  return (
+    <div className="bg-muted/50 mb-4 rounded-lg p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-sm font-medium">AI Tagging Progress</h3>
+        <span className="text-muted-foreground text-sm">
+          {foldersWithTagging}/{total} folders enabled
+        </span>
+      </div>
+
+      <Progress
+        value={overallPercentage}
+        className="mb-3 h-2"
+        indicatorClassName={
+          overallPercentage >= 100 ? 'bg-green-500' : 'bg-blue-500'
+        }
+      />
+
+      <div className="flex flex-wrap gap-4 text-sm">
+        <div className="flex items-center gap-1.5">
+          <CheckCircle2 className="h-4 w-4 text-green-500" />
+          <span className="text-muted-foreground">Completed:</span>
+          <span className="font-medium">{completed}</span>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <Loader2 className="h-4 w-4 text-blue-500" />
+          <span className="text-muted-foreground">In Progress:</span>
+          <span className="font-medium">{inProgress}</span>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <Clock className="h-4 w-4 text-gray-400" />
+          <span className="text-muted-foreground">Pending:</span>
+          <span className="font-medium">{pending}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FolderProgressSummary;