feat: implement sorting functionality for skins using default windows sorting algotythm

src/lib/sort.ts

@@ -0,0 +1,22 @@
+const specialOrder = "'-!#$%&(),;@[]^_`{}~+=";
+
+const priority = Object.fromEntries([...specialOrder].map((c, i) => [c, i]));
+
+const osuSkinsCollator = new Intl.Collator(undefined, {
+  numeric: true,
+  sensitivity: 'base',
+});
+
+export const sortSkins = (skins: { name: string, author: string | undefined, modified: number}[]) =>
+  skins.sort((a, b) => {
+    const pa = priority[a.name[0]];
+    const pb = priority[b.name[0]];
+
+    if (pa !== undefined || pb !== undefined) {
+      if (pa === undefined) return 1;
+      if (pb === undefined) return -1;
+      return pa - pb;
+    }
+
+    return osuSkinsCollator.compare(a.name, b.name);
+  });

src/screens/Launch.svelte

@@ -114,6 +114,7 @@
   import { sileo } from 'sileo';
   import Check from '@lucide/svelte/icons/check';
   import ScrollContainer from '@/components/ui/scroll-container/ScrollContainer.svelte';
+  import { sortSkins } from '@/sort';
 
   let selectedView = $state('home');
   let progress = $state(-1);
@@ -1556,9 +1557,7 @@
         out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
       >
         {#if $skins.length > 0}
-          {@const skinsSorted = $skins.sort((a, b) =>
+          {@const skinsSorted = sortSkins($skins)}
-            a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
-          )}
           <ScrollContainer
             class="flex flex-col max-h-[100vh] overflow-y-auto items-center gap-4 p-16 w-full"
             topOffset={35}