78 lines
2.4 KiB
Vue
78 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { browserIconSrc, configurationIconSrc } from "../../utils/icons";
|
|
import type { AppPage, BrowserView } from "../../types/browser";
|
|
|
|
defineProps<{
|
|
browsers: BrowserView[];
|
|
currentBrowserId: string | null;
|
|
page: AppPage;
|
|
loading: boolean;
|
|
configsLoading: boolean;
|
|
browserMonogram: (browserId: string) => string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
selectBrowser: [browserId: string];
|
|
selectConfiguration: [];
|
|
refresh: [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="sidebar">
|
|
<div class="sidebar-toolbar">
|
|
<div class="sidebar-title-group">
|
|
<h1>Browser Assistant</h1>
|
|
<p>Local Chromium profile manager</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="browsers.length" class="browser-nav">
|
|
<button
|
|
v-for="browser in browsers"
|
|
:key="browser.browserId"
|
|
class="browser-nav-item"
|
|
:class="[browser.browserFamilyId ?? browser.browserId, { active: browser.browserId === currentBrowserId && page === 'browserData' }]"
|
|
type="button"
|
|
@click="emit('selectBrowser', browser.browserId)"
|
|
>
|
|
<div class="browser-nav-icon">
|
|
<img
|
|
v-if="browserIconSrc(browser.iconKey ?? browser.browserFamilyId)"
|
|
:src="browserIconSrc(browser.iconKey ?? browser.browserFamilyId) ?? undefined"
|
|
:alt="`${browser.browserName} icon`"
|
|
/>
|
|
<span v-else>{{ browserMonogram(browser.browserId) }}</span>
|
|
</div>
|
|
<div class="browser-nav-body">
|
|
<strong>{{ browser.browserName }}</strong>
|
|
<span>{{ browser.dataRoot }}</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else class="sidebar-empty">
|
|
<p>No supported Chromium browser data was found yet.</p>
|
|
</div>
|
|
|
|
<button
|
|
class="browser-nav-item utility sidebar-utility-nav"
|
|
:class="{ active: page === 'configuration' }"
|
|
type="button"
|
|
@click="emit('selectConfiguration')"
|
|
>
|
|
<div class="browser-nav-icon config-nav-icon">
|
|
<img :src="configurationIconSrc" alt="Configuration icon" />
|
|
</div>
|
|
<div class="browser-nav-body">
|
|
<strong>Configuration</strong>
|
|
<span>Manage custom scan sources and paths</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="refresh-button sidebar-refresh" type="button" @click="emit('refresh')">
|
|
{{ loading || configsLoading ? "Refreshing..." : "Refresh" }}
|
|
</button>
|
|
</aside>
|
|
</template>
|