Personal progress indicator in teams

src/components/TeamProgress/GroupRoadmapItem.tsx

@@ -3,6 +3,7 @@ import type { GroupByRoadmap, TeamMember } from './TeamProgressPage';
 import { MemberProgressModal } from './MemberProgressModal';
 import { getUrlParams } from '../../lib/browser';
 import ExternalLinkIcon from '../../icons/external-link.svg';
+import { useAuth } from '../../hooks/use-auth';
 
 type GroupRoadmapItemProps = {
   roadmap: GroupByRoadmap;
@@ -11,6 +12,7 @@ type GroupRoadmapItemProps = {
 export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
   const { members, resourceTitle, resourceId } = props.roadmap;
   const { t: teamId } = getUrlParams();
+  const user = useAuth();
 
   const [showAll, setShowAll] = useState(false);
   const [detailResourceId, setDetailResourceId] = useState<string | null>(null);
@@ -49,10 +51,15 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
         </div>
         <div className="relative flex grow flex-col space-y-2 p-3">
           {(showAll ? members : members.slice(0, 4)).map((member) => {
-            if (!member.progress) return null;
+            const isMyProgress = user?.email === member?.member?.email;
+
+            if (!member.progress) {
+              return null;
+            }
+
             return (
               <button
-                className="group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none"
+                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none`}
                 key={member?.member._id}
                 onClick={() => {
                   setDetailResourceId(member?.progress?.resourceId!);
@@ -60,7 +67,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                 }}
               >
                 <span className="relative z-10 flex items-center justify-between gap-1 text-sm">
-                  <span className="inline-grid grid-cols-[20px_auto] gap-2">
+                  <span className="inline-grid grid-cols-[20px_auto] gap-3">
                     <img
                       src={
                         member.member.avatar
@@ -72,7 +79,14 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                       alt={member.member.name || ''}
                       className="h-5 w-5 shrink-0 rounded-full"
                     />
-                    <span className="truncate">{member?.member?.name}</span>
+                    <span className="inline-grid grid-cols-[auto,32px] items-center">
+                      <span className="truncate mr-[5px]">{member?.member?.name}</span>
+                      {isMyProgress && (
+                        <span className="rounded-md bg-red-500 py-0.25 text-center text-[11px] text-white mr-[5px]">
+                          You
+                        </span>
+                      )}
+                    </span>
                   </span>
                   <span className="shrink-0 text-xs text-gray-400">
                     {member?.progress?.done} / {member?.progress?.total}