feat: add cache refresh when load user popover

client/web/src/components/Panel/group/MembersPanel.tsx

@@ -14,6 +14,7 @@ import {
 } from 'tailchat-shared';
 import { Problem } from '@/components/Problem';
 import { useGroupMemberAction } from '@/hooks/useGroupMemberAction';
+import { UserPopover } from '@/components/popover/UserPopover';
 
 interface MembersPanelProps {
   groupId: string;
@@ -78,9 +79,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
           <div>
             <UserListItem
               userId={member._id}
-              popover={
-                <GroupUserPopover userInfo={member} groupInfo={groupInfo} />
-              }
+              popover={<UserPopover userInfo={member} />}
               hideDiscriminator={hideGroupMemberDiscriminator}
             />
           </div>
@@ -91,7 +90,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
         <UserListItem
           key={member._id}
           userId={member._id}
-          popover={<GroupUserPopover userInfo={member} groupInfo={groupInfo} />}
+          popover={<UserPopover userInfo={member} />}
           hideDiscriminator={hideGroupMemberDiscriminator}
         />
       );

client/web/src/components/popover/UserPopover/index.tsx

@@ -1,6 +1,6 @@
 import { useGroupIdContext } from '@/context/GroupIdContext';
 import React from 'react';
-import { useGroupInfo, UserBaseInfo } from 'tailchat-shared';
+import { useCachedUserInfo, useGroupInfo, UserBaseInfo } from 'tailchat-shared';
 import { GroupUserPopover } from './GroupUserPopover';
 import { PersonalUserPopover } from './PersonalUserPopover';
 
@@ -13,11 +13,13 @@ export const UserPopover: React.FC<{
   const groupId = useGroupIdContext();
   const groupInfo = useGroupInfo(groupId);
 
+  // refetch user cache
+  useCachedUserInfo(props.userInfo._id, true);
+
   if (groupInfo) {
     return <GroupUserPopover userInfo={props.userInfo} groupInfo={groupInfo} />;
   }
 
-  // TODO
   return <PersonalUserPopover userInfo={props.userInfo} />;
 });
 UserPopover.displayName = 'UserPopover';