julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

change ui

Browse Source
This commit is contained in:
Julian Freeman
2026-04-16 13:00:10 -04:00
parent 6eb0b9bdf6
commit c8a3d92be4
2 changed files with 85 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/App.vue
View File

@@ -49,6 +49,7 @@ const loading = ref(true);
const error = ref("");
const response = ref<ScanResponse>({ browsers: [] });
const selectedBrowserId = ref("");
const activeSection = ref<"profiles" | "extensions" | "bookmarks">("profiles");
const browsers = computed(() => response.value.browsers);
const currentBrowser = computed(() =>
@@ -109,6 +110,13 @@ function domainFromUrl(url: string) {
}
}
function sectionCount(section: "profiles" | "extensions" | "bookmarks") {
if (!currentBrowser.value) return 0;
if (section === "profiles") return currentBrowser.value.profiles.length;
if (section === "extensions") return currentBrowser.value.extensions.length;
return currentBrowser.value.bookmarks.length;
}
onMounted(() => {
void scanBrowsers();
});
@@ -193,7 +201,37 @@ onMounted(() => {
</div>
</header>
<section class="content-section">
<section class="section-tabs">
<button
class="section-tab"
:class="{ active: activeSection === 'profiles' }"
type="button"
@click="activeSection = 'profiles'"
>
<span>Profiles</span>
<span class="count-pill">{{ sectionCount("profiles") }}</span>
</button>
<button
class="section-tab"
:class="{ active: activeSection === 'extensions' }"
type="button"
@click="activeSection = 'extensions'"
>
<span>Extensions</span>
<span class="count-pill">{{ sectionCount("extensions") }}</span>
</button>
<button
class="section-tab"
:class="{ active: activeSection === 'bookmarks' }"
type="button"
@click="activeSection = 'bookmarks'"
>
<span>Bookmarks</span>
<span class="count-pill">{{ sectionCount("bookmarks") }}</span>
</button>
</section>
<section v-if="activeSection === 'profiles'" class="content-section">
<div class="section-heading">
<div>
<p class="eyebrow">Profiles</p>
@@ -202,7 +240,7 @@ onMounted(() => {
<span class="count-pill">{{ currentBrowser.profiles.length }}</span>
</div>
<div v-if="currentBrowser.profiles.length" class="profile-grid">
<div v-if="currentBrowser.profiles.length" class="stack-list">
<article
v-for="profile in currentBrowser.profiles"
:key="profile.id"
@@ -231,7 +269,7 @@ onMounted(() => {
</div>
</section>
<section class="content-section">
<section v-else-if="activeSection === 'extensions'" class="content-section">
<div class="section-heading">
<div>
<p class="eyebrow">Extensions</p>
@@ -240,7 +278,7 @@ onMounted(() => {
<span class="count-pill">{{ currentBrowser.extensions.length }}</span>
</div>
<div v-if="currentBrowser.extensions.length" class="extension-grid">
<div v-if="currentBrowser.extensions.length" class="stack-list">
<article
v-for="extension in currentBrowser.extensions"
:key="extension.id"
@@ -279,7 +317,7 @@ onMounted(() => {
</div>
</section>
<section class="content-section">
<section v-else class="content-section">
<div class="section-heading">
<div>
<p class="eyebrow">Bookmarks</p>