Sort alphabetically utility

src/lib/components/bottom-nav-namespaces.svelte

@@ -2,17 +2,19 @@
   import Input from '$lib/holocene/input/input.svelte';
   import { lastUsedNamespace } from '$lib/stores/namespaces';
   import type { NamespaceListItem } from '$lib/types/global';
+  import { sortAlphabetically } from '$lib/utilities/sort-alphabetically';
 
   export let open = false;
   export let namespaceList: NamespaceListItem[] = [];
 
   let search = '';
 
-  $: namespaces = (
+  $: namespaces = sortAlphabetically(
     search
       ? namespaceList.filter(({ namespace }) => namespace.includes(search))
-      : namespaceList
-  ).sort((a, b) => a.namespace.localeCompare(b.namespace));
+      : namespaceList,
+    (ns) => ns.namespace,
+  );
 </script>
 
 {#if open}

src/lib/components/namespace-picker.svelte

@@ -6,7 +6,7 @@
   import { lastUsedNamespace } from '$lib/stores/namespaces';
   import type { NamespaceListItem } from '$lib/types/global';
   import { routeForNamespace } from '$lib/utilities/route-for';
-  import { sortNamespaces } from '$lib/utilities/sort-namespaces';
+  import { sortAlphabetically } from '$lib/utilities/sort-alphabetically';
 
   interface Props {
     namespaceList?: NamespaceListItem[];
@@ -37,7 +37,9 @@
     namespaceListItem?.onClick(namespaceListItem.namespace);
   };
 
-  let sortedNamespaceList = $derived(sortNamespaces(namespaceList));
+  let sortedNamespaceList = $derived(
+    sortAlphabetically(namespaceList, (ns) => ns.namespace),
+  );
 </script>
 
 <Combobox

src/lib/components/standalone-activities/saved-views.svelte

@@ -27,6 +27,7 @@
   import { activityExecutionSearchAttributes } from '$lib/stores/search-attributes';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
   import { toListWorkflowFilters } from '$lib/utilities/query/to-list-workflow-filters';
+  import { sortAlphabetically } from '$lib/utilities/sort-alphabetically';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
   let activeQueryView: SavedQuery | undefined = $state();
@@ -43,9 +44,7 @@
   );
 
   const namespaceSavedQueries = $derived(
-    $savedActivityQueries?.[namespace]?.sort((a, b) =>
-      a.name.localeCompare(b.name),
-    ) || [],
+    sortAlphabetically($savedActivityQueries?.[namespace] || [], (q) => q.name),
   );
   const systemQueryView = $derived(
     (query && systemActivityViews.find((q) => q.query === query)) ||

src/lib/pages/saved-query-views.svelte

@@ -28,6 +28,7 @@
   import { taskFailuresCount } from '$lib/stores/workflows';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
   import { toListWorkflowFilters } from '$lib/utilities/query/to-list-workflow-filters';
+  import { sortAlphabetically } from '$lib/utilities/sort-alphabetically';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
   let activeQueryView: SavedQuery | undefined = $state();
@@ -48,9 +49,7 @@
   );
 
   const namespaceSavedQueries = $derived(
-    $savedWorkflowQueries?.[namespace]?.sort((a, b) =>
-      a.name.localeCompare(b.name),
-    ) || [],
+    sortAlphabetically($savedWorkflowQueries?.[namespace] || [], (q) => q.name),
   );
   const systemQueryView = $derived(
     (query && systemWorkflowViews.find((q) => q.query === query)) ||

src/lib/utilities/sort-alphabetically.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+
+import { sortAlphabetically } from './sort-alphabetically';
+
+describe('sortAlphabetically', () => {
+  it('sorts objects alphabetically by key', () => {
+    const result = sortAlphabetically(
+      [{ name: 'zebra' }, { name: 'apple' }, { name: 'mango' }],
+      (item) => item.name,
+    );
+    expect(result.map((n) => n.name)).toEqual(['apple', 'mango', 'zebra']);
+  });
+
+  it('does not mutate the input', () => {
+    const input = [{ name: 'b' }, { name: 'a' }];
+    sortAlphabetically(input, (item) => item.name);
+    expect(input.map((n) => n.name)).toEqual(['b', 'a']);
+  });
+
+  it('sorts case-insensitively via localeCompare', () => {
+    const result = sortAlphabetically(
+      [{ name: 'Banana' }, { name: 'apple' }],
+      (item) => item.name,
+    );
+    expect(result[0].name).toBe('apple');
+  });
+
+  it('returns an empty array when given an empty list', () => {
+    expect(sortAlphabetically([])).toEqual([]);
+  });
+
+  it('sorts plain strings with default key', () => {
+    const result = sortAlphabetically(['cherry', 'apple', 'banana']);
+    expect(result).toEqual(['apple', 'banana', 'cherry']);
+  });
+});

src/lib/utilities/sort-alphabetically.ts

@@ -0,0 +1,4 @@
+export const sortAlphabetically = <T = string>(
+  list: T[],
+  key: (item: T) => string = (item) => item as unknown as string,
+): T[] => [...list].sort((a, b) => key(a).localeCompare(key(b)));