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;

src/types/browser.ts

@@ -47,6 +47,7 @@ export type BookmarkAssociatedProfileSummary = {
 export type ProfileSortKey = "name" | "email" | "id";
 export type ExtensionSortKey = "name" | "id";
 export type BookmarkSortKey = "title" | "url";
+export type AssociatedProfileSortKey = "id" | "name";
 export type ActiveSection = "profiles" | "extensions" | "bookmarks";
 export type AppPage = "browserData" | "configuration";
 export type BrowserConfigSource = "default" | "custom";

src/utils/sort.ts

@@ -3,6 +3,9 @@ import type {
   BookmarkSummary,
   ExtensionSortKey,
   ExtensionSummary,
+  AssociatedProfileSortKey,
+  AssociatedProfileSummary,
+  BookmarkAssociatedProfileSummary,
   ProfileSortKey,
   ProfileSummary,
 } from "../types/browser";
@@ -73,6 +76,19 @@ export function sortBookmarks(items: BookmarkSummary[], sortKey: BookmarkSortKey
   });
 }
 
+export function sortAssociatedProfiles(
+  items: (AssociatedProfileSummary | BookmarkAssociatedProfileSummary)[],
+  sortKey: AssociatedProfileSortKey,
+) {
+  const profiles = [...items];
+  return profiles.sort((left, right) => {
+    if (sortKey === "name") {
+      return compareText(left.name, right.name) || compareProfileId(left.id, right.id);
+    }
+    return compareProfileId(left.id, right.id) || compareText(left.name, right.name);
+  });
+}
+
 function profileSortKeyValue(profileId: string) {
   if (profileId === "Default") {
     return { group: 0, number: 0, text: profileId };