refactor frontend

src/components/sidebar/AppSidebar.vue

@@ -0,0 +1,77 @@
+<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>