refactor frontend

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>