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;

src/components/browser-data/BrowserDataView.vue

@@ -85,6 +85,7 @@ const emit = defineEmits<{
       :sort-key="profileSortKey"
       :open-profile-error="openProfileError"
       :browser-id="currentBrowser.browserId"
+      :browser-family-id="currentBrowser.browserFamilyId"
       :is-opening-profile="isOpeningProfile"
       @update:sort-key="emit('update:profileSortKey', $event)"
       @open-profile="(browserId, profileId) => emit('openProfile', browserId, profileId)"
@@ -113,6 +114,7 @@ const emit = defineEmits<{
     :title="associatedProfilesModal.title"
     :profiles="associatedProfilesModal.profiles"
     :browser-id="associatedProfilesModal.browserId"
+    :browser-family-id="currentBrowser.browserFamilyId"
     :is-bookmark="associatedProfilesModal.isBookmark"
     :is-opening-profile="isOpeningProfile"
     @close="emit('closeAssociatedProfiles')"

src/components/browser-data/ProfilesList.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { ProfileSortKey, ProfileSummary } from "../../types/browser";
+import { profileAvatarSrc } from "../../utils/icons";
 
 defineProps<{
   profiles: ProfileSummary[];
   sortKey: ProfileSortKey;
   openProfileError: string;
   browserId: string;
+  browserFamilyId: string | null;
   isOpeningProfile: (browserId: string, profileId: string) => boolean;
 }>();
 
@@ -32,7 +34,11 @@ const emit = defineEmits<{
 
       <article v-for="profile in profiles" :key="profile.id" class="data-table-row profiles-grid">
         <div class="profile-avatar table-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">
@@ -141,7 +147,7 @@ const emit = defineEmits<{
 .table-avatar {
   width: 36px;
   height: 36px;
-  border-radius: 12px;
+  border-radius: 999px;
 }
 
 .profile-avatar img {