detailed profiles info

src/composables/useBrowserManager.ts

@@ -6,6 +6,8 @@ import { sortBookmarks, sortExtensions, sortProfiles } from "../utils/sort";
 import type {
   ActiveSection,
   AppPage,
+  AssociatedProfileSummary,
+  BookmarkAssociatedProfileSummary,
   BookmarkSortKey,
   BrowserConfigEntry,
   BrowserConfigListResponse,
@@ -36,8 +38,12 @@ export function useBrowserManager() {
   });
   const selectedBrowserId = ref("");
   const activeSection = ref<ActiveSection>("profiles");
-  const expandedExtensionIds = ref<string[]>([]);
-  const expandedBookmarkUrls = ref<string[]>([]);
+  const associatedProfilesModal = ref<{
+    title: string;
+    browserId: string;
+    profiles: (AssociatedProfileSummary | BookmarkAssociatedProfileSummary)[];
+    isBookmark: boolean;
+  } | null>(null);
   const profileSortKey = ref<ProfileSortKey>("name");
   const extensionSortKey = ref<ExtensionSortKey>("name");
   const bookmarkSortKey = ref<BookmarkSortKey>("title");
@@ -80,9 +86,8 @@ export function useBrowserManager() {
   );
 
   watch(selectedBrowserId, () => {
-    expandedExtensionIds.value = [];
-    expandedBookmarkUrls.value = [];
     openProfileError.value = "";
+    associatedProfilesModal.value = null;
   });
 
   async function loadBrowserConfigs() {
@@ -272,24 +277,30 @@ export function useBrowserManager() {
     return currentBrowser.value.bookmarks.length;
   }
 
-  function toggleExtensionProfiles(extensionId: string) {
-    expandedExtensionIds.value = expandedExtensionIds.value.includes(extensionId)
-      ? expandedExtensionIds.value.filter((id) => id !== extensionId)
-      : [...expandedExtensionIds.value, extensionId];
+  function showExtensionProfilesModal(extensionId: string) {
+    const extension = currentBrowser.value?.extensions.find((item) => item.id === extensionId);
+    if (!extension || !currentBrowser.value) return;
+    associatedProfilesModal.value = {
+      title: `${extension.name} Profiles`,
+      browserId: currentBrowser.value.browserId,
+      profiles: extension.profiles,
+      isBookmark: false,
+    };
   }
 
-  function toggleBookmarkProfiles(url: string) {
-    expandedBookmarkUrls.value = expandedBookmarkUrls.value.includes(url)
-      ? expandedBookmarkUrls.value.filter((value) => value !== url)
-      : [...expandedBookmarkUrls.value, url];
+  function showBookmarkProfilesModal(url: string) {
+    const bookmark = currentBrowser.value?.bookmarks.find((item) => item.url === url);
+    if (!bookmark || !currentBrowser.value) return;
+    associatedProfilesModal.value = {
+      title: `${bookmark.title} Profiles`,
+      browserId: currentBrowser.value.browserId,
+      profiles: bookmark.profiles,
+      isBookmark: true,
+    };
   }
 
-  function extensionProfilesExpanded(extensionId: string) {
-    return expandedExtensionIds.value.includes(extensionId);
-  }
-
-  function bookmarkProfilesExpanded(url: string) {
-    return expandedBookmarkUrls.value.includes(url);
+  function closeAssociatedProfilesModal() {
+    associatedProfilesModal.value = null;
   }
 
   onMounted(() => {
@@ -298,7 +309,7 @@ export function useBrowserManager() {
 
   return {
     activeSection,
-    bookmarkProfilesExpanded,
+    associatedProfilesModal,
     bookmarkSortKey,
     browserConfigs,
     browserMonogram,
@@ -313,7 +324,6 @@ export function useBrowserManager() {
     domainFromUrl,
     error,
     extensionMonogram,
-    extensionProfilesExpanded,
     extensionSortKey,
     isDeletingConfig,
     isOpeningProfile,
@@ -328,10 +338,11 @@ export function useBrowserManager() {
     savingConfig,
     sectionCount,
     selectedBrowserId,
+    showBookmarkProfilesModal,
+    showExtensionProfilesModal,
     sortedBookmarks,
     sortedExtensions,
     sortedProfiles,
-    toggleBookmarkProfiles,
-    toggleExtensionProfiles,
+    closeAssociatedProfilesModal,
   };
 }