106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<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>
|