Folder management Loading state cleanup

[Takitxt]

Addressed Issues:

Fixes #1435 : Improve folder management progress display.(Loading State)

Screenshots/Recordings:

1. When there is only AI tagging process, without Semantic Searching.

2. When Semantic Search is enabled.

3. When Semantic Searching is uninstalled.

Screen.Recording.2026-07-31.at.6.02.10.PM.mov

Additional Notes:

Files Changed : 1

File : FolderManagementCard.tsx:

Implementation of Show more UI/UX:

type TaggingStatus = RootState['folders']['taggingStatus'];

// A single labeled progress bar with a percentage.

const ProgressRow: React.FC<{ label: string; percentage: number }> = ({
  label,
  percentage,
}) => {
  const isComplete = percentage >= 100;

  return (
    <div>
      <div className="text-muted-foreground mb-1 flex items-center justify-between text-xs">
        <span>{label}</span>
        <span
          className={
            isComplete
              ? 'flex items-center gap-1 text-green-500'
              : 'text-muted-foreground'
          }
        >
          {isComplete && <Check className="h-3 w-3" />}
          {Math.round(percentage)}%
        </span>
      </div>
      <Progress
        value={percentage}
        indicatorClassName={isComplete ? 'bg-green-500' : 'bg-blue-500'}
      />
    </div>
  );
};

//Progress display for a single folder.

const FolderProgress: React.FC<{
  folder: FolderDetails;
  taggingStatus: TaggingStatus;
  semanticAvailable: boolean;
  isExpanded: boolean;
  onToggleExpanded: () => void;
}> = ({
  folder,
  taggingStatus,
  semanticAvailable,
  isExpanded,
  onToggleExpanded,
}) => {
  const taggingPercentage =
    taggingStatus[folder.folder_id]?.tagging_percentage ?? 0;

  if (!semanticAvailable) {
    return (
      <ProgressRow label="AI Tagging Progress" percentage={taggingPercentage} />
    );
  }

  const embeddingPercentage =
    taggingStatus[folder.folder_id]?.embedding_percentage ?? 0;
  const combinedPercentage = (taggingPercentage + embeddingPercentage) / 2;

  return (
    <>
      <ProgressRow label="Overall Progress" percentage={combinedPercentage} />

      <button
        type="button"
        onClick={onToggleExpanded}
        aria-expanded={isExpanded}
        className="text-muted-foreground hover:text-foreground mt-2 flex cursor-pointer items-center gap-1 text-xs transition-colors"
      >
        {isExpanded ? (
          <>
            <ChevronUp className="h-3 w-3" />
            Hide details
          </>
        ) : (
          <>
            <ChevronDown className="h-3 w-3" />
            Show details
          </>
        )}
      </button>

      {isExpanded && (
        <div className="border-border mt-3 space-y-3 border-t pt-3">
          <ProgressRow
            label="AI Tagging Progress"
            percentage={taggingPercentage}
          />
          <ProgressRow
            label="Semantic Indexing"
            percentage={embeddingPercentage}
          />
        </div>
      )}
    </>
  );
};

It elegantly handles a complex UI requirement by splitting a dual-progress tracker into a clean, collapsible accordion view.

Implementation of FolderManagementCard.tsx Refresh when Semantic Searching is deleted:

useEffect(() => {
    const handleFocus = () => {
      // Invalidating queries forces useLibraryProcessingStatus() to fetch fresh data instantly
      // so semanticAvailable becomes false immediately when coming back from minimizing/another window
      queryClient.invalidateQueries(); 
    };

    window.addEventListener('focus', handleFocus);
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') {
        handleFocus();
      }
    });

    return () => {
      window.removeEventListener('focus', handleFocus);
      document.removeEventListener('visibilitychange', handleFocus);
    };
  }, [queryClient]);

  const handleViewMore = () => {
    setVisibleFoldersCount((prevCount) => prevCount + 5);
  };

  const toggleFolderExpanded = (folderId: string) => {
    setExpandedFolders((prev) => {
      const next = new Set(prev);
      if (next.has(folderId)) {
        next.delete(folderId);
      } else {
        next.add(folderId);
      }
      return next;
    });
  };

Added a useEffect that listens for window focus and document visibilitychange events. Whenever the user returns to the app from another tab or window, it triggers queryClient.invalidateQueries(). This ensures the UI instantly fetches the latest background processing status (like semanticAvailable) without requiring a manual refresh. Using query from tanstack.

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

• This PR does not contain AI-generated code at all.
• [ x ] This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: Claude Sonnet - 5 (max), Google Gemini 3 pro.

Checklist

• [ x ] My PR addresses a single issue, fixes a single bug or makes a single improvement.
• [ x ] My code follows the project's code style and conventions
• [ x ] If applicable, I have made corresponding changes or additions to the documentation
• [ x ] If applicable, I have made corresponding changes or additions to tests
• [ x ] My changes generate no new warnings or errors
• [ x ] I have joined the Discord server and I will share a link to this PR with the project maintainers there
• [ x ] I have read the Contribution Guidelines
• [ x ] Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• [ x ] I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• New Features

  • Added clearer progress indicators for folder indexing.
  • Added expandable details for AI tagging and semantic indexing stages.
  • Added completion styling for finished indexing tasks.
  • Improved visibility into the status of each folder’s processing stages.

• Bug Fixes

  • Library processing status now refreshes when the window regains focus or visibility.

[coderabbitai]

Walkthrough

The folder management card now shows combined indexing progress by default, exposes expandable AI tagging and semantic indexing details, and refreshes processing status when the window regains focus or visibility.

Changes

Folder Progress Management

Layer / File(s)	Summary
Progress display components frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx	The card adds reusable progress components: TaggingStatus, ProgressRow, and FolderProgress. These render combined progress bars, completion indicators, semantic availability status, and expandable detail rows. The main card obtains a query client reference.
Progress expansion and refresh wiring frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx	The card tracks expanded folders with immutable state updates through a toggle function. Window focus and visibility change handlers invalidate queries to refresh processing status. The component passes expansion state and callbacks to FolderProgress for user interaction. A cleanup issue exists: the visibility listener callback is registered anonymously but cleanup attempts only to remove the focus handler.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested labels: TypeScript/JavaScript

Poem

A rabbit tends the folders near,
One bright bar makes progress clear.
Click expand—the details show,
Tagging and semantics glow.
Fresh focus keeps the state sincere. 🐰

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Focus and visibility refresh logic is additional behavior not requested by issue [#1435].	Move the refresh logic to a separate issue or document it as required scope for this pull request.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes implement the requested combined progress bar and expandable AI tagging and semantic indexing details from issue [#1435].
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the folder management loading-state cleanup, which matches the primary progress-display changes in the pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (3)

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

176-186: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Consider memoizing the toggle callback and FolderProgress to avoid unnecessary re-renders.

onToggleExpanded={() => toggleFolderExpanded(folder.folder_id)} at Lines 268-270 creates a new function identity on every render of FolderManagementCard. Since FolderProgress is not wrapped in React.memo, every parent re-render (for example, from taggingStatus updates for any folder) re-renders every visible FolderProgress instance, even folders whose data did not change. Wrap FolderProgress in React.memo and memoize toggleFolderExpanded with useCallback to limit re-renders to the folders that actually changed.

As per path instructions, "Check for proper React hook dependencies and prevent unnecessary re-renders."

Also applies to: 263-271

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx` around
lines 176 - 186, Memoize toggleFolderExpanded with useCallback using its stable
state setter dependency, and wrap FolderProgress with React.memo. Update the
FolderProgress callback usage to preserve stable function identities while
retaining the existing folderId behavior, ensuring only folders with changed
props re-render.

Source: Path instructions

---

27-186: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add test coverage for the new progress components and toggle/refresh logic.

This diff introduces ProgressRow, FolderProgress, expandedFolders state, toggleFolderExpanded, and the focus/visibility-driven query invalidation effect, but no accompanying tests are included in this review. These are user-facing behavior changes (combined vs. detailed progress display, semantic-availability fallback, refresh-on-focus) called out directly in the PR objectives, so they are good candidates for component tests (for example, verifying that FolderProgress renders only "AI Tagging Progress" when semanticAvailable is false, and that the expand/collapse toggle updates isExpanded).

As per path instructions, "Ensure that test code is automated, comprehensive, and follows testing best practices" and "Verify that all critical functionality is covered by tests."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx` around
lines 27 - 186, Add automated component tests covering ProgressRow and
FolderProgress: verify percentage rendering and completion styling, the
semanticAvailable=false fallback showing only AI Tagging Progress, combined
progress with semantic details, and expand/collapse behavior invoking
onToggleExpanded with the correct isExpanded state. Add FolderManagementCard
tests for toggleFolderExpanded state changes and focus/visibility events
invalidating queries, including cleanup behavior for registered listeners.

Source: Path instructions

---

151-151: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove the diff-style "NEW" comment.

// --- NEW: Force data refresh when window regains focus or visibility --- describes the change relative to a prior version rather than describing current behavior. This kind of comment becomes stale and confusing once merged. Rephrase it to describe what the effect does now.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx` at line
151, Remove the "NEW:" marker from the comment at line 151 in
FolderManagementCard.tsx that describes forcing data refresh on window
focus/visibility. Rephrase the comment to describe the current behavior and
effect (e.g., what happens when the window regains focus) rather than marking it
as a recent change, so the comment remains accurate and useful after the code is
merged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx`:
- Around line 159-169: Update the visibilitychange listener in the effect around
handleFocus by extracting the inline callback into a named handler, then pass
that same handler reference to both document.addEventListener and
document.removeEventListener. Preserve the existing visible-state check and
handleFocus behavior.
- Around line 35-50: Align the completion status with the displayed rounded
value in the component containing isComplete: compute a roundedPercentage once,
base isComplete on roundedPercentage >= 100, and reuse roundedPercentage for the
percentage label so the checkmark and styling match the displayed value.
- Around line 152-164: Update the handleFocus callback in FolderManagementCard
to invalidate only the relevant folder and model-status queries instead of
calling queryClient.invalidateQueries() globally. Target the existing query keys
['models', 'status'], ['folders'], and ['folders', 'tagging-status'], preserving
the focus and visibility-triggered refresh behavior.

---

Nitpick comments:
In `@frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx`:
- Around line 176-186: Memoize toggleFolderExpanded with useCallback using its
stable state setter dependency, and wrap FolderProgress with React.memo. Update
the FolderProgress callback usage to preserve stable function identities while
retaining the existing folderId behavior, ensuring only folders with changed
props re-render.
- Around line 27-186: Add automated component tests covering ProgressRow and
FolderProgress: verify percentage rendering and completion styling, the
semanticAvailable=false fallback showing only AI Tagging Progress, combined
progress with semantic details, and expand/collapse behavior invoking
onToggleExpanded with the correct isExpanded state. Add FolderManagementCard
tests for toggleFolderExpanded state changes and focus/visibility events
invalidating queries, including cleanup behavior for registered listeners.
- Line 151: Remove the "NEW:" marker from the comment at line 151 in
FolderManagementCard.tsx that describes forcing data refresh on window
focus/visibility. Rephrase the comment to describe the current behavior and
effect (e.g., what happens when the window regains focus) rather than marking it
as a recent change, so the comment remains accurate and useful after the code is
merged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9435698b-b51a-4b2f-a0d2-919885d8a121

📥 Commits

Reviewing files that changed from the base of the PR and between 663541b and 1aae7c3.

📒 Files selected for processing (1)

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