feat(ui): show sort badge when user explicitly sets sort option

[iomz]

Fixes #36

Display the sort-filter badge whenever the user explicitly sets a sort option, even if it's the default (name, ascending). Previously, the badge was hidden for the default sort, which was confusing for users.

Changes

• Add sortExplicitlySetAtom to track when user explicitly sets a sort option
• Show badge only after user explicitly sets sort option (via modal)
• Hide badge when user removes sort
• Reset flag on state reset

Behavior

• Badge does not show initially (when sort is at default)
• Badge appears after user explicitly sets a sort option (even if it's the default)
• Badge disappears when user removes the sort badge
• Badge appears again if user sets a sort option again

Summary by CodeRabbit

• Bug Fixes
  • Improved sort interface behavior: the sort indicator badge now only displays when you explicitly set a sort preference, providing clearer visibility into intentional sorting choices rather than showing default sorting state.

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

[coderabbitai]

Walkthrough

A new boolean atom sortExplicitlySetAtom tracks whether users explicitly set a sort option. The sort badge now displays only when users explicitly select a sort, distinguishing explicit user choices from default system behavior.

Changes

Cohort / File(s)	Summary
State Management src/state.ts	Added sortExplicitlySetAtom boolean atom with default false to track explicit user sort selection; integrated reset logic into resetStateAtom.
Sort Filter Component src/components/ImageGridSortFilter.tsx	Integrated sortExplicitlySetAtom via useAtomValue and useSetAtom; updated sort badge visibility condition from global sort option/direction check to explicit flag; set flag to true when saving sort, false when removing sort.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Straightforward boolean flag addition with clear state mutation points
• Logic isolated to component event handlers (sort save/remove)
• Single new atom with minimal interaction surface

Poem

🐰 A badge that hides when left alone,
Now shines when choices are made known!
Sort by name? The flag it cheers—
No more confusion, no more fears! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: introducing explicit sort tracking to display the sort badge when users explicitly set sort options.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #36 by tracking explicit sort selections and displaying the badge even for default sort selections.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the explicit sort tracking feature defined in issue #36 with no unrelated modifications.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/show-sort-badge-when-explicitly-set

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 942719e and 15df837.

📒 Files selected for processing (2)

• src/components/ImageGridSortFilter.tsx (5 hunks)
• src/state.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use soft tabs (spaces) for indentation, never hard tabs, following the existing codebase style of typically 2 spaces for TypeScript/React files

Files:

• src/state.ts
• src/components/ImageGridSortFilter.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

When calling Tauri commands from TypeScript, use camelCase for parameters (e.g., dataFilePath: value). Do not use snake_case in TypeScript

Files:

• src/state.ts
• src/components/ImageGridSortFilter.tsx

🧬 Code graph analysis (1)

src/components/ImageGridSortFilter.tsx (1)

src/state.ts (3)

• sortExplicitlySetAtom (28-28)
• sortOptionAtom (26-26)
• sortDirectionAtom (27-27)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: codecov

🔇 Additional comments (3)

src/state.ts (1)

26-28: Explicit-sort tracking atom is cleanly integrated into global state reset

The new sortExplicitlySetAtom default and its reset in resetStateAtom correctly ensure the explicit-sort flag starts false and is cleared on global reset, matching the described behavior without impacting other atoms.

Also applies to: 85-87

src/components/ImageGridSortFilter.tsx (2)

3-4: Jotai atom usage for explicit-sort state is consistent and idiomatic

Importing sortExplicitlySetAtom and wiring it via useAtomValue/useSetAtom alongside the existing sort and filter atoms keeps the state shape cohesive and matches existing naming patterns (setSortOptionAtom, setFilterOptionsAtom), which should make the new behavior straightforward to maintain.

Also applies to: 236-247

---

344-365: No issues found—sort atom consistency verified

The verification confirms the flagging behavior is correct. All production code paths that mutate sortOptionAtom and sortDirectionAtom are properly paired with sortExplicitlySetAtom updates:

• handleRemoveSort (lines 345–346): sets atoms to defaults and flag to false
• handleModalSave (lines 362–363): sets atoms from config and flag to true (when type === "sort")
• resetStateAtom in state.ts: sets all three atoms together

No secondary mutations bypass the flag, so badge visibility remains consistent with actual sort state.

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.31%. Comparing base (942719e) to head (15df837).
⚠️ Report is 1 commits behind head on dev.

Additional details and impacted files

@@           Coverage Diff           @@
##              dev      #37   +/-   ##
=======================================
  Coverage   94.31%   94.31%           
=======================================
  Files          19       19           
  Lines        3043     3045    +2     
  Branches      441      441           
=======================================
+ Hits         2870     2872    +2     
  Misses        173      173           

Flag	Coverage Δ
rust	94.31% <100.00%> (+<0.01%)	⬆️
unittests	94.31% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.