Show current user progress first (#4255)

* wip: progress sorting

* chore: show current user progress first

* fix: team guard

* fix: user progress sort

src/components/TeamDropdown/TeamDropdown.tsx

@@ -101,9 +101,8 @@ export function TeamDropdown() {
             <img
               src={
                 selectedAvatar
-                  ? `${
-                      import.meta.env.PUBLIC_AVATAR_BASE_URL
-                    }/${selectedAvatar}`
+                  ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL
+                  }/${selectedAvatar}`
                   : '/images/default-avatar.png'
               }
               alt=""

src/components/TeamProgress/MemberProgressItem.tsx

@@ -60,7 +60,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<
@@ -70,7 +72,10 @@ export function TeamProgressPage() {
       return;
     }
 
-    setTeamMembers(response);
+    const currentUserProgress = response.find((member) => member.email === user?.email)
+    const otherUserProgresses = response.filter(member => member.email !== user?.email);
+    const allUserProgresses = currentUserProgress ? [currentUserProgress, ...otherUserProgresses] : otherUserProgresses;
+    setTeamMembers(allUserProgresses);
   }
 
   useEffect(() => {
@@ -134,11 +139,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 ${
-              selectedGrouping === grouping.value
-                ? ' border-gray-400 bg-gray-200 '
-                : ''
-            }`}
+            className={`rounded-md border p-1 px-2 text-sm ${selectedGrouping === grouping.value
+              ? ' border-gray-400 bg-gray-200 '
+              : ''
+              }`}
             onClick={() => setSelectedGrouping(grouping.value)}
           >
             {grouping.label}