Friend progress tracking

src/components/Friends/FriendProgressItem.tsx

@@ -221,7 +221,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
                 'flex w-full flex-grow flex-col items-center justify-center px-4'
               }
             >
-              <AddUserIcon additionalClasses="mr-2 h-10 w-10 mb-1 text-green-500" />
+              <AddUserIcon additionalClasses="mr-2 h-8 w-8 mb-1 text-green-500" />
               <span className="mb-3 text-green-600">Request Received</span>
 
               <button

src/components/Friends/FriendsPage.tsx

@@ -8,6 +8,7 @@ import { useToast } from '../../hooks/use-toast';
 import { EmptyFriends } from './EmptyFriends';
 import { FriendProgressItem } from './FriendProgressItem';
 import UserIcon from '../../icons/user.svg';
+import { UserProgressModal } from '../UserProgress/UserProgressModal';
 
 type FriendResourceProgress = {
   updatedAt: string;
@@ -45,6 +46,11 @@ const groupingTypes: GroupingType[] = [
 export function FriendsPage() {
   const toast = useToast();
 
+  const [showFriendProgress, setShowFriendProgress] = useState<{
+    resourceId: string;
+    friend: ListFriendsResponse[0];
+  }>();
+
   const [isLoading, setIsLoading] = useState(true);
   const [friends, setFriends] = useState<ListFriendsResponse>([]);
   const [selectedGrouping, setSelectedGrouping] =
@@ -102,6 +108,15 @@ export function FriendsPage() {
 
   return (
     <div>
+      {showFriendProgress && (
+        <UserProgressModal
+          userId={showFriendProgress.friend.userId}
+          resourceId={showFriendProgress.resourceId}
+          resourceType={'roadmap'}
+          onClose={() => setShowFriendProgress(undefined)}
+        />
+      )}
+
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
           {groupingTypes.map((grouping) => {
@@ -140,7 +155,12 @@ export function FriendsPage() {
           {filteredFriends.map((friend) => (
             <FriendProgressItem
               friend={friend}
-              onShowResourceProgress={(resourceId) => {}}
+              onShowResourceProgress={(resourceId) => {
+                setShowFriendProgress({
+                  resourceId,
+                  friend,
+                });
+              }}
               key={friend.userId}
               onReload={() => {
                 pageProgressMessage.set('Reloading friends ..');

src/components/UserProgress/UserProgressModal.tsx

@@ -13,8 +13,10 @@ import { Spinner } from '../ReactIcons/Spinner';
 import { ErrorIcon } from '../ReactIcons/ErrorIcon';
 
 export type ProgressMapProps = {
+  userId?: string;
   resourceId: string;
   resourceType: ResourceType;
+  onClose?: () => void;
 };
 
 type UserProgressResponse = {
@@ -31,8 +33,13 @@ type UserProgressResponse = {
 };
 
 export function UserProgressModal(props: ProgressMapProps) {
-  const { s: userId } = getUrlParams();
+  const {
-  const { resourceId, resourceType } = props;
+    resourceId,
+    resourceType,
+    userId: propUserId,
+    onClose: onModalClose,
+  } = props;
+  const { s: userId = propUserId } = getUrlParams();
 
   const resourceSvgEl = useRef<HTMLDivElement>(null);
   const popupBodyEl = useRef<HTMLDivElement>(null);
@@ -95,6 +102,7 @@ export function UserProgressModal(props: ProgressMapProps) {
     deleteUrlParam('s');
     setError('');
     setShowModal(false);
+    onModalClose?.();
   }
 
   useKeydown('Escape', () => {

src/pages/account/friends.astro

@@ -10,6 +10,6 @@ import { FriendsPage } from '../../components/Friends/FriendsPage';
   initialLoadingMessage='Loading friends'
 >
   <AccountSidebar activePageId='friends' activePageTitle='Friends'>
-    <FriendsPage client:load />
+    <FriendsPage client:only />
   </AccountSidebar>
 </AccountLayout>