refactor frontend

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>