From b779ca34a3d775d30e82b0d2241eacc224441d46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maxi=20Quo=C3=9F?= <maxi@quoss.org>
Date: Sun, 16 Mar 2025 10:57:08 +0100
Subject: [PATCH] fix: localeCompare will use $localStore and sort numeric

---
 frontend/src/lib/components/NetworkScan.svelte | 3 ++-
 frontend/src/routes/+page.svelte               | 9 +++++----
 frontend/src/routes/account/+page.svelte       | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/NetworkScan.svelte b/frontend/src/lib/components/NetworkScan.svelte
index 1c339633..9d942929 100644
--- a/frontend/src/lib/components/NetworkScan.svelte
+++ b/frontend/src/lib/components/NetworkScan.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import PageLoading from '$lib/components/PageLoading.svelte';
 	import { m } from '$lib/paraglide/messages';
+	import { localeStore } from '$lib/stores/locale';
 	import { backendUrl, pocketbase } from '$lib/stores/pocketbase';
 	import { settingsPriv } from '$lib/stores/settings';
 	import type { Device } from '$lib/types/device';
@@ -166,7 +167,7 @@
 				</div>
 			</div>
 			{#if scanResponse.devices?.length > 0}
-				{#each scanResponse.devices.sort( (a, b) => a.ip.localeCompare( b.ip, undefined, { numeric: true } ) ) as device, index}
+				{#each scanResponse.devices.sort( (a, b) => a.ip.localeCompare( b.ip, $localeStore, { numeric: true } ) ) as device, index}
 					<div class="collapse-arrow bg-base-100 collapse">
 						<input type="radio" name="scanned-devices" checked={index === 0} />
 						<div class="collapse-title font-bold">
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index de9753b7..e466aea6 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import DeviceCard from '$lib/components/DeviceCard.svelte';
 	import PageLoading from '$lib/components/PageLoading.svelte';
 	import { m } from '$lib/paraglide/messages';
+	import { localeStore } from '$lib/stores/locale';
 	import { permission, pocketbase } from '$lib/stores/pocketbase';
 	import type { Device, Group } from '$lib/types/device';
 	import {
@@ -138,16 +139,16 @@
 		<div class="space-y-6">
 			{#if devicesWithoutGroups().length > 0}
 				<div class={gridClass}>
-					{#each devicesWithoutGroups().sort( (a, b) => a[orderBy].localeCompare(b[orderBy]) ) as device}
+					{#each devicesWithoutGroups().sort( (a, b) => a[orderBy].localeCompare( b[orderBy], $localeStore, { numeric: true } ) ) as device}
 						<DeviceCard {device} />
 					{/each}
 				</div>
 			{/if}
-			{#each Object.entries(devicesWithGroup()).sort( ([a], [b]) => a.localeCompare(b) ) as [group, groupDevices]}
+			{#each Object.entries(devicesWithGroup()).sort( ([a], [b]) => a.localeCompare( b, $localeStore, { numeric: true } ) ) as [group, groupDevices]}
 				<div>
 					<h1 class="mb-3 text-2xl font-bold">{group}</h1>
 					<div class={gridClass}>
-						{#each groupDevices.sort((a, b) => a[orderBy].localeCompare(b[orderBy])) as device}
+						{#each groupDevices.sort( (a, b) => a[orderBy].localeCompare( b[orderBy], $localeStore, { numeric: true } ) ) as device}
 							<DeviceCard {device} />
 						{/each}
 					</div>
@@ -156,7 +157,7 @@
 		</div>
 	{:else}
 		<div class={gridClass}>
-			{#each filteredDevices().sort((a, b) => a[orderBy].localeCompare(b[orderBy])) as device}
+			{#each filteredDevices().sort( (a, b) => a[orderBy].localeCompare( b[orderBy], $localeStore, { numeric: true } ) ) as device}
 				<DeviceCard {device} />
 			{/each}
 		</div>
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 00075718..6bb60fae 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -179,7 +179,7 @@
 			</div>
 			<h2 class="card-title mt-4 mb-2">{m.account_language_title()}</h2>
 			<select class="select w-full max-w-xs" bind:value={selectedLang}>
-				{#each [...locales].sort( (a, b) => a.localeCompare( b, undefined, { sensitivity: 'base' } ) ) as lang}
+				{#each [...locales].sort( (a, b) => a.localeCompare( b, $localeStore, { sensitivity: 'base' } ) ) as lang}
 					<option value={lang} selected={$localeStore === lang}>
 						{languageEmojis[lang]}
 						{localeToFullName(lang)} [{lang}]