feat: visual hierarchy for categories in the transaction filter sidebar

[dgilperez]

Summary

Adds a family_categories_with_hierarchy view helper (parents first, each followed by its subcategories) and renders the transaction filter checkbox list with a hanging indent plus a corner-down-right glyph on children. Users can now see the parent→subcategory relationship in the filter UI itself without having to trace the category badges.

No filter semantics change. The server still auto-includes subcategories when a parent is selected (current main behavior). This PR closes only the transparency gap.

Why this scope

This PR originally bundled three concerns:

1. Visual hierarchy in the sidebar (this scope) ✅
2. A cascading-checkbox Stimulus controller ❌ dropped
3. A backend change to apply_category_filter that stops auto-including subcategories when a parent is checked ❌ dropped

Concerns 2 and 3 were coupled to @alessiocappa's approved-but-stalled #829 ("Exclude subcategories from transactions filter"). Without #829 merged, the cascading UI is redundant with main's current auto-inclusion behavior — checking "Food" already shows Food + Restaurants transactions server-side; auto-checking the child boxes in JS would be decorative, not functional.

Keeping just the hierarchy-visibility piece, which:

• Is useful regardless of the semantic question fix: Exclude subcategories from transactions filter #829 is raising
• Is reviewable on its own
• Doesn't commit the project to a semantic filter-behavior change
• Lets a future PR (resurrecting fix: Exclude subcategories from transactions filter #829 or not) layer the cascading UX on top

Changes

• app/helpers/categories_helper.rb — new family_categories_with_hierarchy helper.
• app/views/transactions/searches/filters/_category_filter.html.erb — use the new helper, add ml-4 and a corner-down-right icon for subcategories.
• test/helpers/categories_helper_test.rb — cover both helpers (alphabetical ordering + parent-before-child invariant).

Tests

• Full suite: 3232 runs, 0 failures
• bin/rubocop + bin/brakeman clean

Summary by CodeRabbit

• New Features
  • Category filters now display in hierarchical structure with parent categories followed by subcategories
  • Subcategories are visually indented for improved clarity
  • Added cascading selection behavior for category filtering

[dosubot]

Related Documentation

No published documentation to review for changes on this repository.

Write your first living document

^{How did I do? Any feedback?}  

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b64cdf73-b9d0-4c08-b11e-da6731478022

📥 Commits

Reviewing files that changed from the base of the PR and between a2f5947 and 4222e78.

📒 Files selected for processing (1)

• app/helpers/categories_helper.rb

🚧 Files skipped from review as they are similar to previous changes (1)

• app/helpers/categories_helper.rb

---

📝 Walkthrough

Walkthrough

Introduces a new helper method family_categories_with_hierarchy that orders categories by parent-child hierarchy instead of alphabetically, and updates the category filter template to use this method with cascading filter behavior and visual indentation for subcategories.

Changes

Cohort / File(s)	Summary
Helper Method Addition app/helpers/categories_helper.rb	Adds family_categories_with_hierarchy method that returns uncategorized category followed by categories ordered by hierarchical relationships (parents before children) rather than alphabetical order.
Category Filter Template Update app/views/transactions/searches/filters/_category_filter.html.erb	Integrates cascading-category-filter controller, switches iteration to family_categories_with_hierarchy, adds conditional indentation (ml-4) for subcategories, attaches data attributes for cascading behavior (cascading_category_filter_target, category_id, parent_id, toggle action), and includes corner-down-right icon for subcategories.
Helper Tests test/helpers/categories_helper_test.rb	Adds unit tests verifying family_categories returns uncategorized first and alphabetically sorted items, and family_categories_with_hierarchy returns uncategorized first with parents preceding their subcategories in the list.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested reviewers

• jjmata

Poem

🐰 A hierarchy blooms where chaos once grew,
Cascading categories, now sorted anew,
Parent then child, in order so neat,
The filter tree dances—a rabbit's sweet treat! 🌿

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat: visual hierarchy for categories in the transaction filter sidebar' clearly describes the primary change—adding visual hierarchy to categories in the filter UI. It aligns well with the main objectives of improving the visual presentation of categories through hierarchical ordering, indentation, and icons.

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

✨ 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 and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4efb10fe4a

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[chatgpt-codex-connector]

Cascade initial checked parents on load

The controller only cascades when a checkbox changes, so if the page loads with a parent category already checked (e.g., from a saved search or URL params), its subcategories remain unchecked and won’t be submitted. Because the backend change now filters only explicitly selected categories, those preselected parent-only filters will silently stop including subcategory transactions. Consider applying the cascade once on connect for any already-checked parents so initial state matches the intended “parent implies children” behavior.

Useful? React with 👍 / 👎.

[dgilperez]

Good catch! Fixed in 8675ad5 — added applyInitialCascade() that runs on connect to check children of any pre-selected parents. 👍

[dgilperez]

Reshaped after a long pause, sorry for the silence 🙏

• Dropped the cascading-checkbox controller and the apply_category_filter backend change. Both only make sense paired with @alessiocappa's fix: Exclude subcategories from transactions filter #829, which is approved but stalled. Without it, cascading the checkboxes in JS is just decoration over main's existing auto-inclusion behavior.
• Kept only the visible hierarchy: indented subcategories + corner-down-right glyph in the filter sidebar, matching the pattern Add visual hierarchy for subcategories in category selects #633 uses for category selectors. Useful on its own; if fix: Exclude subcategories from transactions filter #829 ever ships, layering cascading on top is trivial.

what do you think @jjmata ? still relevant?

[alessiocappa]

I like the hierarchical visual of the filter, definitely easier to understand and to find the right category. However, I agree that the behavior might be misleading without the back-end change on how the filters are applied.

Let's wait for @jjmata’s feedback on this 😉

[jjmata]

Happy to move forward with both changes, but it all depends on your ability to finish the other draft PR @alessiocappa!

[alessiocappa]

Happy to move forward with both changes, but it all depends on your ability to finish the other draft PR @alessiocappa!

I believe this was marked as draft while waiting for a final decision on the implementation, and to have it ready in advance. It should already be good to merge, but please let me know if anything else is needed.