wip: progress sorting

src/components/TeamDropdown/TeamDropdown.tsx

@@ -76,13 +76,13 @@ export function TeamDropdown() {
     .filter((team) => team.status === 'invited')
     .map((team) => team._id);
 
-  if (
+  // if (
-    !user?.email.endsWith('@insightpartners.com') &&
+  //   !user?.email.endsWith('@insightpartners.com') &&
-    !user?.email.endsWith('@roadmap.sh') &&
+  //   !user?.email.endsWith('@roadmap.sh') &&
-    !['arikchangma@gmail.com', 'kamranahmed.se@gmail.com', 'stephen.chetcuti@gmail.com'].includes(user?.email!)
+  //   !['arikchangma@gmail.com', 'kamranahmed.se@gmail.com', 'stephen.chetcuti@gmail.com'].includes(user?.email!)
-  ) {
+  // ) {
-    return null;
+  //   return null;
-  }
+  // }
 
   return (
     <div className="relative mr-2">
@@ -101,9 +101,8 @@ export function TeamDropdown() {
             <img
               src={
                 selectedAvatar
-                  ? `${
+                  ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL
-                      import.meta.env.PUBLIC_AVATAR_BASE_URL
+                  }/${selectedAvatar}`
-                    }/${selectedAvatar}`
                   : '/images/default-avatar.png'
               }
               alt=""

src/components/TeamProgress/MemberProgressItem.tsx

@@ -1,6 +1,7 @@
 import type { TeamMember } from './TeamProgressPage';
 import { useState } from 'preact/hooks';
 import { MemberProgressModal } from './MemberProgressModal';
+import { useAuth } from '../../hooks/use-auth';
 
 type MemberProgressItemProps = {
   teamId: string;
@@ -8,6 +9,8 @@ type MemberProgressItemProps = {
 };
 export function MemberProgressItem(props: MemberProgressItemProps) {
   const { member, teamId } = props;
+  const user = useAuth();
+  const isCurrentUser = user?.email === member.email;
 
   const memberProgress = member?.progress?.sort((a, b) => {
     return b.done - a.done;
@@ -31,7 +34,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
       )}
 
       <div
-        className="flex h-full min-h-[270px] flex-col rounded-md border"
+        className={`flex h-full min-h-[270px] flex-col rounded-md border ${isCurrentUser && 'border-yellow-500'}`}
         key={member._id}
       >
         <div className="flex items-center gap-3 border-b p-3">
@@ -60,7 +63,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                 >
                   <span className="relative z-10 flex items-center justify-between text-sm">
                     <span className="inline-grid">
-                    <span className={'truncate'}>{progress.resourceTitle}</span>
+                      <span className={'truncate'}>{progress.resourceTitle}</span>
                     </span>
                     <span className="text-xs text-gray-400 shrink-0 ml-1.5">
                       {progress.done} / {progress.total}

src/components/TeamProgress/TeamProgressPage.tsx

@@ -10,6 +10,7 @@ import { GroupRoadmapItem } from './GroupRoadmapItem';
 import { setUrlParams } from '../../lib/browser';
 import { getUrlParams } from '../../lib/browser';
 import { $toastMessage } from '../../stores/toast';
+import { useAuth } from '../../hooks/use-auth';
 
 export type UserProgress = {
   resourceTitle: string;
@@ -55,6 +56,7 @@ export function TeamProgressPage() {
   const [isLoading, setIsLoading] = useState(true);
   const toast = useToast();
   const currentTeam = useStore($currentTeam);
+  const user = useAuth();
 
   const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
   const [selectedGrouping, setSelectedGrouping] = useState<
@@ -69,6 +71,12 @@ export function TeamProgressPage() {
       toast.error(error?.message || 'Failed to get team progress');
       return;
     }
+    const userProgress = response.find((member) => member.email === user?.email);
+    if (userProgress) {
+      const index = response.indexOf(userProgress);
+      response.splice(index, 1);
+      response.unshift(userProgress);
+    }
 
     setTeamMembers(response);
   }
@@ -134,11 +142,10 @@ export function TeamProgressPage() {
       <div className="flex items-center gap-2">
         {groupingTypes.map((grouping) => (
           <button
-            className={`rounded-md border p-1 px-2 text-sm ${
+            className={`rounded-md border p-1 px-2 text-sm ${selectedGrouping === grouping.value
-              selectedGrouping === grouping.value
+              ? ' border-gray-400 bg-gray-200 '
-                ? ' border-gray-400 bg-gray-200 '
+              : ''
-                : ''
+              }`}
-            }`}
             onClick={() => setSelectedGrouping(grouping.value)}
           >
             {grouping.label}