refactor frontend

src/components/browser-data/BrowserDataView.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type {
+  ActiveSection,
+  BookmarkSortKey,
+  BrowserView,
+  ExtensionSortKey,
+  ProfileSortKey,
+} from "../../types/browser";
+import BookmarksList from "./BookmarksList.vue";
+import ExtensionsList from "./ExtensionsList.vue";
+import ProfilesList from "./ProfilesList.vue";
+
+defineProps<{
+  currentBrowser: BrowserView;
+  activeSection: ActiveSection;
+  profileSortKey: ProfileSortKey;
+  extensionSortKey: ExtensionSortKey;
+  bookmarkSortKey: BookmarkSortKey;
+  sortedProfiles: BrowserView["profiles"];
+  sortedExtensions: BrowserView["extensions"];
+  sortedBookmarks: BrowserView["bookmarks"];
+  openProfileError: string;
+  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;
+}>();
+
+const emit = defineEmits<{
+  "update:activeSection": [value: ActiveSection];
+  "update:profileSortKey": [value: ProfileSortKey];
+  "update:extensionSortKey": [value: ExtensionSortKey];
+  "update:bookmarkSortKey": [value: BookmarkSortKey];
+  openProfile: [browserId: string, profileId: string];
+  toggleExtensionProfiles: [extensionId: string];
+  toggleBookmarkProfiles: [url: string];
+}>();
+</script>
+
+<template>
+  <section class="section-tabs">
+    <button
+      class="section-tab"
+      :class="{ active: activeSection === 'profiles' }"
+      type="button"
+      @click="emit('update:activeSection', 'profiles')"
+    >
+      <span>Profiles</span>
+      <span class="count-pill">{{ sectionCount("profiles") }}</span>
+    </button>
+    <button
+      class="section-tab"
+      :class="{ active: activeSection === 'extensions' }"
+      type="button"
+      @click="emit('update:activeSection', 'extensions')"
+    >
+      <span>Extensions</span>
+      <span class="count-pill">{{ sectionCount("extensions") }}</span>
+    </button>
+    <button
+      class="section-tab"
+      :class="{ active: activeSection === 'bookmarks' }"
+      type="button"
+      @click="emit('update:activeSection', 'bookmarks')"
+    >
+      <span>Bookmarks</span>
+      <span class="count-pill">{{ sectionCount("bookmarks") }}</span>
+    </button>
+  </section>
+
+  <div class="content-scroll-area">
+    <ProfilesList
+      v-if="activeSection === 'profiles'"
+      :profiles="sortedProfiles"
+      :sort-key="profileSortKey"
+      :open-profile-error="openProfileError"
+      :browser-id="currentBrowser.browserId"
+      :is-opening-profile="isOpeningProfile"
+      @update:sort-key="emit('update:profileSortKey', $event)"
+      @open-profile="(browserId, profileId) => emit('openProfile', browserId, profileId)"
+    />
+
+    <ExtensionsList
+      v-else-if="activeSection === 'extensions'"
+      :extensions="sortedExtensions"
+      :sort-key="extensionSortKey"
+      :extension-monogram="extensionMonogram"
+      :extension-profiles-expanded="extensionProfilesExpanded"
+      @update:sort-key="emit('update:extensionSortKey', $event)"
+      @toggle-profiles="emit('toggleExtensionProfiles', $event)"
+    />
+
+    <BookmarksList
+      v-else
+      :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)"
+    />
+  </div>
+</template>