Skip to content

**Highlight favorite profiles in ProfileList** #481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

**Highlight favorite profiles in ProfileList** #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e21268b
**Highlight favorite profiles in ProfileList**
Sartoric Nov 5, 2025
0e7a605
**Refactor Card component to support dynamic background classes**
Sartoric Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion web/src/components/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default function Card({
className = '',
role,
fullHeight = false,
bgColorClass = 'bg-base-100',
}) {
const getGridClasses = () => {
const breakpoints = [
Expand All @@ -29,7 +30,7 @@ export default function Card({

return (
<div
className={`card bg-base-100 shadow-xl ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
className={`card ${bgColorClass} shadow-xl ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
role={role}
>
{title && (
Expand Down
5 changes: 4 additions & 1 deletion web/src/pages/ProfileList/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ function ProfileCard({
const chevronRotation = detailsCollapsed ? '' : 'rotate-90';
const detailsSectionId = `profile-${data.id}-summary`;

// Favorite/Unfavorite profile background color
const bgProfileFavorite = data.favorite ? 'bg-primary/10' : 'bg-base-200';

Comment on lines +100 to +102
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Tailwind background class conflict with Card component.

The Card component hardcodes bg-base-100 in its className (see web/src/components/Card.jsx line 31). When you pass additional bg-* classes via the className prop, Tailwind cannot reliably determine which background should apply, leading to unpredictable rendering behavior.

Consider one of these solutions:

Solution 1 (Recommended): Wrap the Card in a container div

-  const bgProfileFavorite = data.favorite ? 'bg-primary/10' : 'bg-base-200';
-
  return (
-    <Card sm={12} role='listitem' className={`${bgProfileFavorite}`}>
+    <div className={data.favorite ? 'bg-primary/10' : 'bg-base-200'}>
+      <Card sm={12} role='listitem' className="bg-transparent">

Then update Card.jsx to accept transparent backgrounds when needed.

Solution 2: Make Card's background configurable

In web/src/components/Card.jsx, update to accept a bgColor prop:

export default function Card({ bgColor = 'bg-base-100', ...otherProps }) {
  return (
    <div className={`card ${bgColor} shadow-xl ...`}>

Then use it as:

-  const bgProfileFavorite = data.favorite ? 'bg-primary/10' : 'bg-base-200';
-
  return (
-    <Card sm={12} role='listitem' className={`${bgProfileFavorite}`}>
+    <Card sm={12} role='listitem' bgColor={data.favorite ? 'bg-primary/10' : 'bg-base-200'}>
🤖 Prompt for AI Agents 
In web/src/pages/ProfileList/index.jsx around lines 100-102, the Tailwind
background class passed into the Card via className conflicts with Card.jsx's
hardcoded bg-base-100 causing unpredictable styling; fix by wrapping the Card
component with a parent/container div that receives the dynamic
bgProfileFavorite class (so Card keeps its internal background untouched), and
update web/src/components/Card.jsx to allow a transparent/backgroundless variant
(e.g., accept a prop or honor bg-transparent from className) so the wrapper
background displays correctly without Tailwind class conflicts.

// Sum total duration from phases (in seconds)
const totalDurationSeconds = Array.isArray(data?.phases)
? data.phases.reduce((sum, p) => sum + (Number.isFinite(p?.duration) ? p.duration : 0), 0)
Expand Down Expand Up @@ -193,7 +196,7 @@ function ProfileCard({
}, [positionPopover]);

return (
<Card sm={12} role='listitem'>
<Card sm={12} role='listitem' bgColorClass={bgProfileFavorite}>
<div
className='flex flex-row items-center'
role='group'
Expand Down
Loading