detailed profiles info

src/App.vue

@@ -6,7 +6,7 @@ import { useBrowserManager } from "./composables/useBrowserManager";
 
 const {
   activeSection,
-  bookmarkProfilesExpanded,
+  associatedProfilesModal,
   bookmarkSortKey,
   browserConfigs,
   browserMonogram,
@@ -21,7 +21,6 @@ const {
   domainFromUrl,
   error,
   extensionMonogram,
-  extensionProfilesExpanded,
   extensionSortKey,
   isDeletingConfig,
   isOpeningProfile,
@@ -36,11 +35,12 @@ const {
   savingConfig,
   sectionCount,
   selectedBrowserId,
+  showBookmarkProfilesModal,
+  showExtensionProfilesModal,
   sortedBookmarks,
   sortedExtensions,
   sortedProfiles,
-  toggleBookmarkProfiles,
-  toggleExtensionProfiles,
+  closeAssociatedProfilesModal,
 } = useBrowserManager();
 </script>
 
@@ -109,16 +109,16 @@ const {
         :section-count="sectionCount"
         :is-opening-profile="isOpeningProfile"
         :extension-monogram="extensionMonogram"
-        :extension-profiles-expanded="extensionProfilesExpanded"
-        :bookmark-profiles-expanded="bookmarkProfilesExpanded"
         :domain-from-url="domainFromUrl"
+        :associated-profiles-modal="associatedProfilesModal"
         @update:active-section="activeSection = $event"
         @update:profile-sort-key="profileSortKey = $event"
         @update:extension-sort-key="extensionSortKey = $event"
         @update:bookmark-sort-key="bookmarkSortKey = $event"
         @open-profile="(browserId, profileId) => openBrowserProfile(browserId, profileId)"
-        @toggle-extension-profiles="toggleExtensionProfiles"
-        @toggle-bookmark-profiles="toggleBookmarkProfiles"
+        @show-extension-profiles="showExtensionProfilesModal"
+        @show-bookmark-profiles="showBookmarkProfilesModal"
+        @close-associated-profiles="closeAssociatedProfilesModal"
       />
 
       <template v-else>