support internal icon

src/components/browser-data/AssociatedProfilesModal.vue

@@ -5,6 +5,7 @@ import type {
   AssociatedProfileSummary,
   BookmarkAssociatedProfileSummary,
 } from "../../types/browser";
+import { profileAvatarSrc } from "../../utils/icons";
 import { sortAssociatedProfiles } from "../../utils/sort";
 
 type ModalProfile = AssociatedProfileSummary | BookmarkAssociatedProfileSummary;
@@ -13,6 +14,7 @@ const props = defineProps<{
   title: string;
   profiles: ModalProfile[];
   browserId: string;
+  browserFamilyId: string | null;
   isBookmark: boolean;
   isOpeningProfile: (browserId: string, profileId: string) => boolean;
 }>();
@@ -57,7 +59,11 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
             :class="{ bookmark: isBookmark }"
           >
             <div class="modal-profile-avatar">
-              <img v-if="profile.avatarDataUrl" :src="profile.avatarDataUrl" :alt="`${profile.name} avatar`" />
+              <img
+                v-if="profileAvatarSrc(profile, browserFamilyId)"
+                :src="profileAvatarSrc(profile, browserFamilyId) ?? undefined"
+                :alt="`${profile.name} avatar`"
+              />
               <span v-else>{{ profile.avatarLabel }}</span>
             </div>
             <div class="row-cell primary-cell">
@@ -200,7 +206,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
   flex-shrink: 0;
   width: 36px;
   height: 36px;
-  border-radius: 12px;
+  border-radius: 999px;
   background: linear-gradient(135deg, #dbeafe, #eff6ff);
   color: #1d4ed8;
   font-size: 0.96rem;