sort detailed profiles

src/components/browser-data/AssociatedProfilesModal.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
+import SortDropdown from "../SortDropdown.vue";
 import type {
+  AssociatedProfileSortKey,
   AssociatedProfileSummary,
   BookmarkAssociatedProfileSummary,
 } from "../../types/browser";
+import { sortAssociatedProfiles } from "../../utils/sort";
 
 type ModalProfile = AssociatedProfileSummary | BookmarkAssociatedProfileSummary;
 
-defineProps<{
+const props = defineProps<{
   title: string;
   profiles: ModalProfile[];
   browserId: string;
@@ -19,6 +23,10 @@ const emit = defineEmits<{
   openProfile: [browserId: string, profileId: string];
 }>();
 
+const sortKey = ref<AssociatedProfileSortKey>("id");
+
+const sortedProfiles = computed(() => sortAssociatedProfiles(props.profiles, sortKey.value));
+
 function hasBookmarkPath(
   profile: ModalProfile,
 ): profile is BookmarkAssociatedProfileSummary {
@@ -36,8 +44,19 @@ function hasBookmarkPath(
         </button>
       </div>
 
+      <div class="modal-toolbar">
+        <SortDropdown
+          v-model="sortKey"
+          label="Sort by"
+          :options="[
+            { label: 'Profile ID', value: 'id' },
+            { label: 'Name', value: 'name' },
+          ]"
+        />
+      </div>
+
       <div class="modal-list">
-        <article v-for="profile in profiles" :key="profile.id" class="modal-profile-card">
+        <article v-for="profile in sortedProfiles" :key="profile.id" class="modal-profile-card">
           <div class="modal-profile-avatar">
             <img
               v-if="profile.avatarDataUrl"
@@ -120,6 +139,11 @@ function hasBookmarkPath(
   padding-right: 4px;
 }
 
+.modal-toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .modal-profile-card {
   display: flex;
   gap: 12px;