detailed profiles info

src/components/browser-data/BrowserDataView.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import type {
   ActiveSection,
+  AssociatedProfileSummary,
+  BookmarkAssociatedProfileSummary,
   BookmarkSortKey,
   BrowserView,
   ExtensionSortKey,
   ProfileSortKey,
 } from "../../types/browser";
+import AssociatedProfilesModal from "./AssociatedProfilesModal.vue";
 import BookmarksList from "./BookmarksList.vue";
 import ExtensionsList from "./ExtensionsList.vue";
 import ProfilesList from "./ProfilesList.vue";
@@ -23,9 +26,13 @@ defineProps<{
   sectionCount: (section: ActiveSection) => number;
   isOpeningProfile: (browserId: string, profileId: string) => boolean;
   extensionMonogram: (name: string) => string;
-  extensionProfilesExpanded: (extensionId: string) => boolean;
-  bookmarkProfilesExpanded: (url: string) => boolean;
   domainFromUrl: (url: string) => string;
+  associatedProfilesModal: {
+    title: string;
+    browserId: string;
+    profiles: (AssociatedProfileSummary | BookmarkAssociatedProfileSummary)[];
+    isBookmark: boolean;
+  } | null;
 }>();
 
 const emit = defineEmits<{
@@ -34,8 +41,9 @@ const emit = defineEmits<{
   "update:extensionSortKey": [value: ExtensionSortKey];
   "update:bookmarkSortKey": [value: BookmarkSortKey];
   openProfile: [browserId: string, profileId: string];
-  toggleExtensionProfiles: [extensionId: string];
-  toggleBookmarkProfiles: [url: string];
+  showExtensionProfiles: [extensionId: string];
+  showBookmarkProfiles: [url: string];
+  closeAssociatedProfiles: [];
 }>();
 </script>
 
@@ -87,9 +95,8 @@ const emit = defineEmits<{
       :extensions="sortedExtensions"
       :sort-key="extensionSortKey"
       :extension-monogram="extensionMonogram"
-      :extension-profiles-expanded="extensionProfilesExpanded"
       @update:sort-key="emit('update:extensionSortKey', $event)"
-      @toggle-profiles="emit('toggleExtensionProfiles', $event)"
+      @show-profiles="emit('showExtensionProfiles', $event)"
     />
 
     <BookmarksList
@@ -97,11 +104,21 @@ const emit = defineEmits<{
       :bookmarks="sortedBookmarks"
       :sort-key="bookmarkSortKey"
       :domain-from-url="domainFromUrl"
-      :bookmark-profiles-expanded="bookmarkProfilesExpanded"
       @update:sort-key="emit('update:bookmarkSortKey', $event)"
-      @toggle-profiles="emit('toggleBookmarkProfiles', $event)"
+      @show-profiles="emit('showBookmarkProfiles', $event)"
     />
   </div>
+
+  <AssociatedProfilesModal
+    v-if="associatedProfilesModal"
+    :title="associatedProfilesModal.title"
+    :profiles="associatedProfilesModal.profiles"
+    :browser-id="associatedProfilesModal.browserId"
+    :is-bookmark="associatedProfilesModal.isBookmark"
+    :is-opening-profile="isOpeningProfile"
+    @close="emit('closeAssociatedProfiles')"
+    @open-profile="(browserId, profileId) => emit('openProfile', browserId, profileId)"
+  />
 </template>
 
 <style scoped>