refactor frontend

src/components/browser-data/BookmarksList.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import SortDropdown from "../SortDropdown.vue";
+import type { BookmarkSortKey, BookmarkSummary } from "../../types/browser";
+
+defineProps<{
+  bookmarks: BookmarkSummary[];
+  sortKey: BookmarkSortKey;
+  domainFromUrl: (url: string) => string;
+  bookmarkProfilesExpanded: (url: string) => boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:sortKey": [value: BookmarkSortKey];
+  toggleProfiles: [url: string];
+}>();
+</script>
+
+<template>
+  <section class="content-section">
+    <div class="sort-bar">
+      <SortDropdown
+        :model-value="sortKey"
+        label="Sort by"
+        :options="[
+          { label: 'Name', value: 'title' },
+          { label: 'URL', value: 'url' },
+        ]"
+        @update:model-value="emit('update:sortKey', $event as BookmarkSortKey)"
+      />
+    </div>
+
+    <div v-if="bookmarks.length" class="bookmark-list">
+      <article v-for="bookmark in bookmarks" :key="bookmark.url" class="bookmark-card">
+        <div class="bookmark-body">
+          <div class="bookmark-topline">
+            <h4>{{ bookmark.title }}</h4>
+            <span class="badge neutral">{{ domainFromUrl(bookmark.url) }}</span>
+          </div>
+          <p class="bookmark-url" :title="bookmark.url">{{ bookmark.url }}</p>
+          <div class="source-disclosure">
+            <button
+              class="disclosure-button"
+              type="button"
+              @click="emit('toggleProfiles', bookmark.url)"
+            >
+              <span>Profiles</span>
+              <span class="badge neutral">{{ bookmark.profileIds.length }}</span>
+            </button>
+            <div
+              v-if="bookmarkProfilesExpanded(bookmark.url)"
+              class="disclosure-panel"
+            >
+              <span
+                v-for="profileId in bookmark.profileIds"
+                :key="`${bookmark.url}-${profileId}`"
+                class="badge"
+              >
+                {{ profileId }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+    <div v-else class="empty-card">
+      <p>No bookmarks were discovered for this browser.</p>
+    </div>
+  </section>
+</template>

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>

src/components/browser-data/ExtensionsList.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import SortDropdown from "../SortDropdown.vue";
+import type { ExtensionSortKey, ExtensionSummary } from "../../types/browser";
+
+defineProps<{
+  extensions: ExtensionSummary[];
+  sortKey: ExtensionSortKey;
+  extensionMonogram: (name: string) => string;
+  extensionProfilesExpanded: (extensionId: string) => boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:sortKey": [value: ExtensionSortKey];
+  toggleProfiles: [extensionId: string];
+}>();
+</script>
+
+<template>
+  <section class="content-section">
+    <div class="sort-bar">
+      <SortDropdown
+        :model-value="sortKey"
+        label="Sort by"
+        :options="[
+          { label: 'Name', value: 'name' },
+          { label: 'Extension ID', value: 'id' },
+        ]"
+        @update:model-value="emit('update:sortKey', $event as ExtensionSortKey)"
+      />
+    </div>
+
+    <div v-if="extensions.length" class="stack-list">
+      <article
+        v-for="extension in extensions"
+        :key="extension.id"
+        class="extension-card"
+      >
+        <div class="extension-icon">
+          <img
+            v-if="extension.iconDataUrl"
+            :src="extension.iconDataUrl"
+            :alt="`${extension.name} icon`"
+          />
+          <span v-else>{{ extensionMonogram(extension.name) }}</span>
+        </div>
+        <div class="extension-body">
+          <div class="extension-topline">
+            <h4>{{ extension.name }}</h4>
+            <span v-if="extension.version" class="badge neutral">
+              v{{ extension.version }}
+            </span>
+          </div>
+          <p class="meta-line">{{ extension.id }}</p>
+          <div class="source-disclosure">
+            <button
+              class="disclosure-button"
+              type="button"
+              @click="emit('toggleProfiles', extension.id)"
+            >
+              <span>Profiles</span>
+              <span class="badge neutral">{{ extension.profileIds.length }}</span>
+            </button>
+            <div
+              v-if="extensionProfilesExpanded(extension.id)"
+              class="disclosure-panel"
+            >
+              <span
+                v-for="profileId in extension.profileIds"
+                :key="`${extension.id}-${profileId}`"
+                class="badge"
+              >
+                {{ profileId }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+    <div v-else class="empty-card">
+      <p>No extensions were discovered for this browser.</p>
+    </div>
+  </section>
+</template>

src/components/browser-data/ProfilesList.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import SortDropdown from "../SortDropdown.vue";
+import type { ProfileSortKey, ProfileSummary } from "../../types/browser";
+
+defineProps<{
+  profiles: ProfileSummary[];
+  sortKey: ProfileSortKey;
+  openProfileError: string;
+  browserId: string;
+  isOpeningProfile: (browserId: string, profileId: string) => boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:sortKey": [value: ProfileSortKey];
+  openProfile: [browserId: string, profileId: string];
+}>();
+</script>
+
+<template>
+  <section class="content-section">
+    <div v-if="openProfileError" class="inline-error">
+      {{ openProfileError }}
+    </div>
+
+    <div class="sort-bar">
+      <SortDropdown
+        :model-value="sortKey"
+        label="Sort by"
+        :options="[
+          { label: 'Name', value: 'name' },
+          { label: 'Email', value: 'email' },
+          { label: 'Profile ID', value: 'id' },
+        ]"
+        @update:model-value="emit('update:sortKey', $event as ProfileSortKey)"
+      />
+    </div>
+
+    <div v-if="profiles.length" class="stack-list">
+      <article v-for="profile in profiles" :key="profile.id" class="profile-card">
+        <div class="profile-avatar">
+          <img
+            v-if="profile.avatarDataUrl"
+            :src="profile.avatarDataUrl"
+            :alt="`${profile.name} avatar`"
+          />
+          <span v-else>{{ profile.avatarLabel }}</span>
+        </div>
+        <div class="profile-body">
+          <div class="profile-topline">
+            <h4>{{ profile.name }}</h4>
+            <div class="profile-actions">
+              <button
+                class="card-action-button"
+                :disabled="isOpeningProfile(browserId, profile.id)"
+                type="button"
+                @click="emit('openProfile', browserId, profile.id)"
+              >
+                {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
+              </button>
+              <span class="badge neutral">{{ profile.id }}</span>
+            </div>
+          </div>
+          <p class="profile-email">{{ profile.email || "No email found" }}</p>
+        </div>
+      </article>
+    </div>
+    <div v-else class="empty-card">
+      <p>No profile directories were found for this browser.</p>
+    </div>
+  </section>
+</template>

src/components/config/ConfigurationView.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { browserIconOptions, browserIconSrc } from "../../utils/icons";
+import type { BrowserConfigEntry, CreateCustomBrowserConfigInput } from "../../types/browser";
+
+defineProps<{
+  configError: string;
+  configsLoading: boolean;
+  browserConfigs: BrowserConfigEntry[];
+  createConfigForm: CreateCustomBrowserConfigInput;
+  savingConfig: boolean;
+  configMonogram: (config: BrowserConfigEntry) => string;
+  isDeletingConfig: (configId: string) => boolean;
+}>();
+
+const emit = defineEmits<{
+  updateName: [value: string];
+  updateExecutablePath: [value: string];
+  updateUserDataPath: [value: string];
+  updateIconKey: [value: string];
+  pickExecutablePath: [];
+  pickUserDataPath: [];
+  createConfig: [];
+  deleteConfig: [configId: string];
+}>();
+</script>
+
+<template>
+  <section class="content-scroll-area">
+    <section class="content-section">
+      <div v-if="configError" class="inline-error">
+        {{ configError }}
+      </div>
+
+      <div class="config-form-card">
+        <div class="config-form-header">
+          <h3>Add Custom Browser</h3>
+          <p>Provide a name, executable path, and Chromium user data path.</p>
+        </div>
+        <div class="config-form-layout">
+          <div class="config-form-fields">
+            <label class="field-group">
+              <span>Name</span>
+              <input
+                :value="createConfigForm.name"
+                placeholder="Work Chrome"
+                @input="emit('updateName', ($event.target as HTMLInputElement).value)"
+              />
+            </label>
+            <label class="field-group">
+              <span>Executable Path</span>
+              <div class="path-input-row">
+                <input
+                  :value="createConfigForm.executablePath"
+                  placeholder="C:\Program Files\...\chrome.exe"
+                  @input="emit('updateExecutablePath', ($event.target as HTMLInputElement).value)"
+                />
+                <button class="secondary-button" type="button" @click="emit('pickExecutablePath')">
+                  Browse File
+                </button>
+              </div>
+            </label>
+            <label class="field-group">
+              <span>User Data Path</span>
+              <div class="path-input-row">
+                <input
+                  :value="createConfigForm.userDataPath"
+                  placeholder="C:\Users\...\User Data"
+                  @input="emit('updateUserDataPath', ($event.target as HTMLInputElement).value)"
+                />
+                <button class="secondary-button" type="button" @click="emit('pickUserDataPath')">
+                  Browse Folder
+                </button>
+              </div>
+            </label>
+          </div>
+          <div class="config-form-side">
+            <label class="field-group">
+              <span>Icon</span>
+              <div class="icon-option-grid">
+                <button
+                  v-for="option in browserIconOptions"
+                  :key="option.key"
+                  class="icon-option-button"
+                  :class="{ active: createConfigForm.iconKey === option.key }"
+                  type="button"
+                  @click="emit('updateIconKey', option.key)"
+                >
+                  <img :src="option.src" :alt="option.label" />
+                  <span>{{ option.label }}</span>
+                </button>
+              </div>
+            </label>
+            <div class="config-form-actions">
+              <button
+                class="primary-button"
+                type="button"
+                :disabled="savingConfig"
+                @click="emit('createConfig')"
+              >
+                {{ savingConfig ? "Saving..." : "Add Config" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="configsLoading" class="empty-card">
+        <p>Loading browser configs...</p>
+      </div>
+      <div v-else class="stack-list">
+        <article
+          v-for="config in browserConfigs"
+          :key="config.id"
+          class="config-card"
+        >
+          <div class="config-card-header">
+            <div class="config-card-lead">
+              <div class="browser-nav-icon config-icon">
+                <img
+                  v-if="browserIconSrc(config.iconKey ?? config.browserFamilyId)"
+                  :src="browserIconSrc(config.iconKey ?? config.browserFamilyId) ?? undefined"
+                  :alt="`${config.name} icon`"
+                />
+                <span v-else>{{ configMonogram(config) }}</span>
+              </div>
+              <div>
+                <div class="config-title-row">
+                  <h4>{{ config.name }}</h4>
+                </div>
+              </div>
+            </div>
+            <button
+              v-if="config.deletable"
+              class="danger-button"
+              type="button"
+              :disabled="isDeletingConfig(config.id)"
+              @click="emit('deleteConfig', config.id)"
+            >
+              {{ isDeletingConfig(config.id) ? "Deleting..." : "Delete" }}
+            </button>
+          </div>
+          <div class="config-meta">
+            <div class="config-meta-row">
+              <span class="config-label">Executable</span>
+              <p :title="config.executablePath">{{ config.executablePath || "Not resolved" }}</p>
+            </div>
+            <div class="config-meta-row">
+              <span class="config-label">User Data</span>
+              <p :title="config.userDataPath">{{ config.userDataPath }}</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+  </section>
+</template>

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>