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>