feat: add ability to change icons for email categories

[retrogtx]

implements a dropdown for selecting custom icons for categories through settings/categories

Google.Chrome.mp4

Summary by CodeRabbit

• New Features

  • Added the ability to select and display custom icons for mail categories in the settings page.
  • Icons for categories are now shown dynamically throughout the app based on user selection.

• Enhancements

  • Improved layout of the categories settings page to accommodate the new icon selector.

• Bug Fixes

  • Refined value handling in category settings to improve type safety.

• Other

  • Updated default mail categories to include icon assignments.

[coderabbitai]

Walkthrough

This update introduces dynamic icon selection and rendering for mail categories. The settings page now allows users to choose an icon for each category, which is then displayed throughout the app. The schema, interface, and default data are updated to support this new icon property, and related UI components are adjusted accordingly.

Changes

Files/Groups	Change Summary
apps/mail/app/(routes)/settings/categories/page.tsx	Added icon selection dropdown to category settings; adjusted layout and type annotations.
apps/mail/components/mail/mail.tsx	Enabled dynamic icon rendering in Categories component using icon property from settings.
apps/mail/hooks/use-categories.ts	Updated CategorySetting interface: made isDefault required, added optional icon property.
apps/server/src/lib/schemas.ts	Extended mailCategorySchema and defaultMailCategories to include optional icon property.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SettingsPage
    participant Schema
    participant CategoriesComponent

    User->>SettingsPage: Selects icon for a category
    SettingsPage->>Schema: Updates category with selected icon
    Schema-->>SettingsPage: Confirms update
    SettingsPage->>CategoriesComponent: Passes category data with icon
    CategoriesComponent->>CategoriesComponent: Dynamically renders selected icon
    CategoriesComponent-->>User: Displays category with chosen icon

Loading

Possibly related PRs

• feat: ability to customize categories #1328: Extended category customization features, which this PR builds upon by adding icon selection and rendering.
• Refactor icon rendering in Categories component for cleaner code #845: Refactored icon rendering in the Categories component, related as this PR introduces dynamic icon support in the same area.

Suggested labels

design

Suggested reviewers

• MrgSub

Poem

In the garden of mail, where categories bloom,
Now icons can sparkle, dispelling the gloom!
With a click and a hop, pick a symbol with glee,
Your inbox grows lively—what fun it will be!
🐰✨📬

---

📜 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 6560558 and a359972.

📒 Files selected for processing (4)

• apps/mail/app/(routes)/settings/categories/page.tsx (5 hunks)
• apps/mail/components/mail/mail.tsx (2 hunks)
• apps/mail/hooks/use-categories.ts (1 hunks)
• apps/server/src/lib/schemas.ts (2 hunks)

🔇 Additional comments (11)

apps/server/src/lib/schemas.ts (2)

44-44: LGTM! Clean schema extension.

The optional icon property addition is well-structured and maintains backward compatibility.

---

56-97: ```shell
#!/bin/bash

Locate icon module files (TypeScript)

echo "Searching for icon module files (.ts, .tsx):"
fd 'icons.(ts|tsx)$' || echo "No icons.ts/tsx files found"

echo -e "\nVerifying exports of Lightning, Mail, User, Tag, Bell, ScanEye:"
for file in $(fd 'icons.(ts|tsx)$'); do
echo -e "\n--- $file ---"
grep -E "export.*\b(Lightning|Mail|User|Tag|Bell|ScanEye)\b" "$file" || echo "No matching exports in $file"
done

</details>
<details>
<summary>apps/mail/hooks/use-categories.ts (2)</summary>

`11-11`: **LGTM! Appropriate addition for icon support.**

The optional `icon` property aligns well with the schema changes and UI requirements.

---

`12-12`: **Verify the breaking change impact.**

Changing `isDefault` from optional to mandatory could break existing code that doesn't explicitly set this property. Ensure all usage sites have been updated.


```shell
#!/bin/bash
# Description: Check for potential breaking changes where isDefault might not be set

echo "Searching for CategorySetting usage that might not set isDefault..."
rg -A 5 -B 5 "CategorySetting" --type ts

echo -e "\nChecking for object literals that might be missing isDefault..."
ast-grep --pattern 'const $_ : CategorySetting = {
  $$$
}'

apps/mail/components/mail/mail.tsx (2)

68-69: LGTM! Well-organized imports for icon functionality.

The namespace import for icons and category hooks import are appropriately added for the new dynamic icon feature.

---

840-853: Excellent dynamic icon implementation with proper fallback.

The logic correctly:

• Checks if the icon exists in the CustomIcons collection
• Uses type-safe casting with keyof typeof CustomIcons
• Applies consistent styling with the cn utility
• Maintains the same visual structure as the static icons

The approach ensures runtime safety while enabling flexible icon selection.

apps/mail/app/(routes)/settings/categories/page.tsx (5)

13-21: LGTM! Proper imports for icon selection functionality.

The namespace import for icons and Select component imports are correctly added to support the new icon selector feature.

---

58-58: Good type safety improvement.

Replacing any with specific union types (string | number | boolean) improves type safety and code clarity.

---

81-81: Good cleanup of explicit any type.

Removing the explicit any type annotation allows TypeScript to infer the correct type, improving type safety.

---

154-188: Excellent icon selector implementation.

The implementation demonstrates several best practices:

• Proper filtering of non-function exports with typeof IconComp !== 'function'
• Visual consistency showing both icon and name in selector and trigger
• Defensive programming with null checks
• Good responsive design integration
• Proper placeholder handling for empty selections

The UI provides a user-friendly way to select icons with visual feedback.

---

145-145: Well-balanced grid layout adjustment.

The column span changes (Display Name: 5→4, Icon: new 2-span column) maintain good visual balance while accommodating the new icon selector without overcrowding the interface.

Also applies to: 190-190

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.