feat(teams): add team icon, recommended status and favorites features #204

qdaxb · 2025-11-28T17:47:09Z

Summary

Add icon and is_recommended fields to Team model (stored in CRD spec JSON)
Create user_team_favorites table for user-team favorite relationships with database migration
Add API endpoints for team favorites (add/remove favorites) and showcase (recommended/favorite teams)
Create icon-picker component using Lucide icons library for team icon selection
Create TeamCard and TeamShowcase components to display recommended apps and user favorites on chat page
Update TeamEdit component with icon picker and "Set as Recommended" switch
Add i18n translations for Chinese and English

Test plan

Test icon picker component in team edit page
Test "Set as Recommended" switch functionality
Test favorite/unfavorite team from TeamCard
Verify recommended teams appear in showcase section
Verify favorite teams appear in showcase section
Test clicking team card selects the team
Run database migration and verify table creation

Summary by CodeRabbit

New Features
- Added team favorites functionality—users can now add/remove teams to their personal favorites and view a dedicated favorites list.
- Introduced recommended teams showcase displaying curated team recommendations.
- Added team icon customization with an icon picker for visual team identification.
- New team card UI with icon/avatar display and favorite toggle controls.
Localization
- Added English and Chinese translations for new team favorites and recommendations features.

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

- Add icon and is_recommended fields to Team model (CRD spec) - Create user_team_favorites table for user-team favorite relationships - Add favorites API endpoints (add/remove/list favorites) - Add showcase API endpoints (recommended teams, favorite teams) - Create icon-picker component with Lucide icons - Create TeamCard and TeamShowcase components for chat page - Update TeamEdit with icon picker and recommended switch - Add i18n translations for new features - Add database migration for user_team_favorites table

coderabbitai · 2025-11-28T17:47:19Z

Warning

Rate limit exceeded

@qdaxb has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 25 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between c387c01 and dab1e23.

📒 Files selected for processing (2)

frontend/src/i18n/locales/en/common.json (1 hunks)
frontend/src/i18n/locales/zh-CN/common.json (1 hunks)

Walkthrough

This pull request introduces a team favorites feature allowing users to mark teams as favorites and browse recommended teams. It includes a database migration to store user-team favorite relationships, backend API endpoints for favorite operations, frontend components for displaying and managing favorites, UI enhancements for team icons and recommendation status, and localization strings for the new feature.

Changes

Cohort / File(s)	Summary
Database Layer `backend/alembic/versions/2a3b4c5d6e7f_add_user_team_favorites_table.py`	Creates user_team_favorites table with id, user_id, team_id, created_at columns; defines unique composite index on (user_id, team_id) and individual indexes; provides downgrade logic.
ORM Models `backend/app/models/user_team_favorite.py`, `backend/app/models/__init__.py`	Introduces UserTeamFavorite SQLAlchemy model with indexed primary key, user_id, team_id, and created_at timestamp; exports model in init.py.
Backend Services `backend/app/services/team_favorite.py`	Introduces TeamFavoriteService with methods to add/remove favorites, retrieve user's favorite team IDs, and check favorite status; includes validation for team existence.
Backend Schema Updates `backend/app/schemas/kind.py`, `backend/app/schemas/team.py`	Extends TeamSpec schema with icon and isRecommended fields; extends TeamBase, TeamUpdate, TeamInDB, and TeamDetail schemas with icon, is_recommended, and is_favorited fields.
Backend API & Services Integration `backend/app/api/endpoints/adapter/teams.py`, `backend/app/services/adapters/team_kinds.py`	Adds four new endpoints (add_team_to_favorites, remove_team_from_favorites, get_recommended_teams, get_favorite_teams) and updates team_kinds service to handle icon and is_recommended fields in Team CRD creation, updates, and conversion.
Frontend API & Types `frontend/src/apis/team.ts`, `frontend/src/types/api.ts`	Adds icon and is_recommended fields to CreateTeamRequest; introduces four API methods for favorites; extends Team interface with icon, is_recommended, and is_favorited fields.
Frontend Components `frontend/src/components/ui/icon-picker.tsx`, `frontend/src/features/tasks/components/TeamCard.tsx`, `frontend/src/features/tasks/components/TeamShowcase.tsx`, `frontend/src/features/settings/components/TeamEdit.tsx`	Introduces IconPicker component for selecting Lucide icons; introduces TeamCard component for displaying individual teams with favorite toggle; introduces TeamShowcase component for displaying recommended and favorite teams lists; extends TeamEdit to include icon picker and recommendation switch.
Frontend Localization `frontend/src/i18n/locales/en/common.json`, `frontend/src/i18n/locales/zh-CN/common.json`	Adds six new translation keys (recommended, favorites, set_recommended, add_to_favorites, remove_from_favorites, select_icon) in English and Chinese locales.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Backend service logic: TeamFavoriteService validation, error handling, and query patterns across multiple data models
Frontend state management: TeamShowcase component manages concurrent favorite toggles, list updates, and synchronization between recommended and favorite sections
Cross-layer integration: Verify consistent field passing through schemas, API endpoints, and frontend components (icon, is_recommended, is_favorited)
API endpoint implementations: Ensure correct dependency injection (current_user, db session) and response formats
Component composition: Verify proper data flow between TeamShowcase, TeamCard, IconPicker, and TeamEdit components

Possibly related PRs

UI Modernization: ChatGPT-Style Design System Foundation #116: Frontend features (IconPicker, TeamCard/Showcase) depend on UI foundation from this PR (shadcn/ui components, lucide-react, Button/Input patterns, tailwind styling)
feat: add workbench #23: Both PRs modify backend/app/services/adapters/team_kinds.py; this PR adds icon/isRecommended handling while the related PR adds TeamKindsService retrieval methods
统一设计系统：创建基础 UI 组件库 #123: Frontend components in this PR directly use UI primitives (Badge, Card, Switch, Spinner, Tooltip) introduced in that PR

Suggested reviewers

feifei325

Poem

🐰✨ New favorites bloom, stars aligned so bright,
Icons dance and teams showcase their light,
Recommended apps sparkle in every view,
A cozy corner for teams you call true! 💫

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

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

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding team icons, recommended status, and favorites features across the codebase.

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (14)

backend/app/services/adapters/team_kinds.py (1)
467-474: update_with_user: consider normalizing cleared icons to None

Updating team_crd.spec.icon and team_crd.spec.isRecommended from update_data is correct. To keep the CRD cleaner and semantics clearer when clearing an icon, you might normalize falsy values to None instead of storing empty strings:
-        if "icon" in update_data:
-            team_crd.spec.icon = update_data["icon"]
+        if "icon" in update_data:
+            # Normalize empty strings to None so CRD stays boolean/nullable, not empty text
+            team_crd.spec.icon = update_data["icon"] or None
This is optional and depends on how strictly you want to distinguish “no icon” vs. “empty string” in stored CRDs.
frontend/src/components/ui/icon-picker.tsx (1)
1-145: IconPicker implementation is solid; a few small polish opportunities

Overall behavior (dynamic icon rendering, search filter, fallback initial, disabled state) looks correct and matches the i18n keys you added.

A couple of minor improvements you may consider:
Normalize cleared value: The reset button calls onChange(''). If upstream treats undefined/omitted as “no icon”, you might prefer onChange('') → onChange('') || undefined at the call site, or here:
onClick={() => {
  onChange('');
  setOpen(false);
  setSearch('');
}}
so the local search state is also reset.
Bundle size / Lucide usage: Importing * as LucideIcons and indexing by string is convenient but may force bundling the entire icon set. If bundle size becomes a concern later, you could switch COMMON_ICONS to a map of explicitly imported icons instead of a dynamic lookup.

Icon list validity: Since you defensively skip missing LucideIcons[iconName], it would be good to double-check that all entries in COMMON_ICONS exist in your installed lucide-react version so users don’t see silent gaps.
Please verify the Lucide icon names against your installed version, for example by checking the lucide-react exports or running a quick type-check in your project.
backend/alembic/versions/2a3b4c5d6e7f_add_user_team_favorites_table.py (1)

23-46: Migration is functionally sound; consider dropping redundant PK index

The migration correctly creates user_team_favorites with the expected columns and a unique (user_id, team_id) index, and the downgrade reverses changes cleanly.

Two minor schema considerations:

Most SQL backends already index the primary key, so ix_user_team_favorites_id is typically redundant. It’s harmless but can be omitted in future migrations to reduce index clutter.

created_at is nullable with no server default; this is fine given the ORM default, but if you expect every row to have a timestamp, you might prefer nullable=False with a DB-side default (e.g., sa.func.now()).

Neither point blocks this PR; they’re just schema hygiene tips for future migrations.
backend/app/models/user_team_favorite.py (1)
5-7: Add type hints to Column definitions.

Per coding guidelines, type hints are required in all Python code. Consider adding type annotations to the class attributes.
+from typing import Optional
 from datetime import datetime
-from sqlalchemy import Column, Integer, DateTime, Index
+from sqlalchemy import Column, Integer, DateTime, Index
+from sqlalchemy.orm import Mapped, mapped_column
 from app.db.base import Base
Alternatively, if using SQLAlchemy 2.0 style, you could use Mapped annotations for better type inference.
frontend/src/features/tasks/components/TeamShowcase.tsx (2)
57-91: Consider using functional state update to avoid stale closure.

On line 78, favoriteTeams.some(...) references the favoriteTeams state directly within the callback. While the dependency array includes favoriteTeams, using the functional update pattern would be more robust and avoid potential stale closure issues.
       } else {
         await teamApis.addTeamToFavorites(team.id);
         // Update recommended list
         setRecommendedTeams(prev =>
           prev.map(t => (t.id === team.id ? { ...t, is_favorited: true } : t))
         );
         // Add to favorites if not already there
-        if (!favoriteTeams.some(t => t.id === team.id)) {
-          setFavoriteTeams(prev => [{ ...team, is_favorited: true }, ...prev].slice(0, 6));
-        }
+        setFavoriteTeams(prev => {
+          if (prev.some(t => t.id === team.id)) return prev;
+          return [{ ...team, is_favorited: true }, ...prev].slice(0, 6);
+        });
       }
This also allows removing favoriteTeams from the dependency array.

82-84: Consider providing user feedback on errors.

Currently, errors are only logged to the console. Users won't know if their favorite toggle failed. Consider adding a toast notification for failed operations.
frontend/src/features/tasks/components/TeamCard.tsx (2)
27-29: Add runtime validation for the icon name.

If team.icon contains an invalid icon name, IconComponent will be undefined (not null), and the component will still try to render it, potentially causing issues.

Consider adding explicit validation:
  const IconComponent = team.icon
-   ? (LucideIcons as Record<string, React.ComponentType<{ className?: string }>>)[team.icon]
+   ? (LucideIcons as Record<string, React.ComponentType<{ className?: string }> | undefined>)[team.icon] ?? null
    : null;
81-99: Add aria-label for better accessibility.

The button has a title attribute but lacks an aria-label. Screen readers benefit from explicit labeling on interactive elements.
        <button
          onClick={handleFavoriteClick}
          disabled={isTogglingFavorite}
          className={cn(
            'flex-shrink-0 p-1.5 rounded-md transition-colors',
            'hover:bg-primary/10',
            isTogglingFavorite && 'opacity-50 cursor-not-allowed'
          )}
          title={team.is_favorited ? 'Remove from favorites' : 'Add to favorites'}
+         aria-label={team.is_favorited ? 'Remove from favorites' : 'Add to favorites'}
        >
backend/app/schemas/team.py (1)
37-38: Consider adding validation for the icon field.

The icon field accepts any string, but it should be a valid Lucide icon name. Consider adding a validator to ensure icon names are valid or at least follow the expected format (PascalCase).

Example validator:
from pydantic import field_validator
import re

@field_validator('icon')
@classmethod
def validate_icon(cls, v: str | None) -> str | None:
    if v is not None and not re.match(r'^[A-Z][a-zA-Z0-9]*$', v):
        raise ValueError('Icon must be a valid Lucide icon name (PascalCase)')
    return v
backend/app/services/team_favorite.py (3)
19-23: Use SQLAlchemy's is_() for boolean comparison.

As flagged by Ruff (E712), comparing booleans with == can be problematic in SQLAlchemy. Use .is_(True) for explicit boolean comparison.
        team = db.query(Kind).filter(
            Kind.id == team_id,
            Kind.kind == "Team",
-           Kind.is_active == True
+           Kind.is_active.is_(True)
        ).first()
40-48: Consider handling potential database errors.

The db.add() and db.commit() sequence could fail (e.g., due to a race condition causing a unique constraint violation). While the unique index idx_user_team_favorite should prevent duplicates, a concurrent request could slip past the existence check.
        # Create favorite record
        favorite = UserTeamFavorite(
            user_id=user_id,
            team_id=team_id
        )
-       db.add(favorite)
-       db.commit()
+       try:
+           db.add(favorite)
+           db.commit()
+       except IntegrityError:
+           db.rollback()
+           return {"message": "Team already in favorites", "is_favorited": True}

        return {"message": "Team added to favorites", "is_favorited": True}
72-78: Consider using .exists() for efficiency.

For a simple existence check, using exists() is more efficient than fetching the entire record.
    def is_team_favorited(self, db: Session, *, team_id: int, user_id: int) -> bool:
        """Check if a team is in user's favorites"""
-       favorite = db.query(UserTeamFavorite).filter(
+       return db.query(
+           db.query(UserTeamFavorite).filter(
            UserTeamFavorite.user_id == user_id,
            UserTeamFavorite.team_id == team_id
-       ).first()
-       return favorite is not None
+           ).exists()
+       ).scalar()
backend/app/api/endpoints/adapter/teams.py (2)
170-173: Use SQLAlchemy's is_() for boolean comparison.

As flagged by Ruff (E712), use .is_(True) instead of == True for SQLAlchemy boolean comparisons.
    teams = db.query(Kind).filter(
        Kind.kind == "Team",
-       Kind.is_active == True
+       Kind.is_active.is_(True)
    ).all()
        team = db.query(Kind).filter(
            Kind.id == favorite.team_id,
            Kind.kind == "Team",
-           Kind.is_active == True
+           Kind.is_active.is_(True)
        ).first()
Also applies to: 206-210

190-216: N+1 query pattern in get_favorite_teams.

For each favorite, this endpoint makes a separate database query to fetch the team. Consider using a single query with IN clause.
def get_favorite_teams(...):
    """Get user's favorite teams"""
    from app.models.user_team_favorite import UserTeamFavorite

    # Get user's favorite team IDs
    favorites = db.query(UserTeamFavorite).filter(
        UserTeamFavorite.user_id == current_user.id
    ).order_by(UserTeamFavorite.created_at.desc()).limit(limit).all()

+   if not favorites:
+       return []
+
+   team_ids = [f.team_id for f in favorites]
+   teams = db.query(Kind).filter(
+       Kind.id.in_(team_ids),
+       Kind.kind == "Team",
+       Kind.is_active.is_(True)
+   ).all()
+
+   # Create lookup map and preserve order
+   team_map = {t.id: t for t in teams}
    favorite_teams = []
-   for favorite in favorites:
-       team = db.query(Kind).filter(
-           Kind.id == favorite.team_id,
-           Kind.kind == "Team",
-           Kind.is_active == True
-       ).first()
-
+   for favorite in favorites:
+       team = team_map.get(favorite.team_id)
        if team:
            team_dict = team_kinds_service._convert_to_team_dict(team, db, team.user_id)
            team_dict["is_favorited"] = True
            favorite_teams.append(team_dict)

    return favorite_teams

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2131537 and c387c01.

📒 Files selected for processing (17)

backend/alembic/versions/2a3b4c5d6e7f_add_user_team_favorites_table.py (1 hunks)
backend/app/api/endpoints/adapter/teams.py (3 hunks)
backend/app/models/__init__.py (1 hunks)
backend/app/models/user_team_favorite.py (1 hunks)
backend/app/schemas/kind.py (1 hunks)
backend/app/schemas/team.py (4 hunks)
backend/app/services/adapters/team_kinds.py (4 hunks)
backend/app/services/team_favorite.py (1 hunks)
frontend/src/apis/team.ts (2 hunks)
frontend/src/components/ui/icon-picker.tsx (1 hunks)
frontend/src/features/settings/components/TeamEdit.tsx (6 hunks)
frontend/src/features/tasks/components/ChatArea.tsx (2 hunks)
frontend/src/features/tasks/components/TeamCard.tsx (1 hunks)
frontend/src/features/tasks/components/TeamShowcase.tsx (1 hunks)
frontend/src/i18n/locales/en/common.json (1 hunks)
frontend/src/i18n/locales/zh-CN/common.json (1 hunks)
frontend/src/types/api.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

frontend/**/*.{ts,tsx}