Improve library manga sorting (#1051)

* Improve library manga sorting

* Update CHANGELOG.md

* Revert unread count sort change

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Theme**) Improve automatic theme background colors
 - (**Theme**) Adjust "primary color" of dynamic color theme on manga pages
 - (**Theme**) Increase max length of custom theme names to 32 (previously 16)
+- (**Library**) Improve library manga sorting
 
 ### Fixed
 - (**Library**) Fix total library size chip color in light mode 

src/features/library/hooks/useGetVisibleLibraryMangas.ts

@@ -161,7 +161,7 @@ const filterMangas = <Manga extends TMangasFilter>(
 
 const sortByNumber = (a: number | string = 0, b: number | string = 0) => Number(a) - Number(b);
 
-const sortByString = (a: string, b: string): number => a.localeCompare(b);
+const sortByString = (a: string, b: string): number => a.localeCompare(b, undefined, { sensitivity: 'base' });
 
 type TMangaSort = Pick<MangaType, 'title' | 'inLibraryAt' | 'unreadCount'> &
     MangaChapterCountInfo & {
@@ -176,37 +176,38 @@ const sortManga = <Manga extends TMangaSort>(
 ): Manga[] => {
     const result = [...manga];
 
+    const primaryComparator = ((): ((a: Manga, b: Manga) => number) => {
         switch (sort) {
             case 'alphabetically':
-            result.sort((a, b) => sortByString(a.title, b.title));
+                return (a, b) => sortByString(a.title, b.title);
-            break;
             case 'dateAdded':
-            result.sort((a, b) => sortByNumber(a.inLibraryAt, b.inLibraryAt));
+                return (a, b) => sortByNumber(a.inLibraryAt, b.inLibraryAt);
-            break;
             case 'unreadChapters':
-            result.sort((a, b) => sortByNumber(a.unreadCount, b.unreadCount));
+                return (a, b) => sortByNumber(a.unreadCount, b.unreadCount);
-            break;
             case 'lastRead':
-            result.sort((a, b) => sortByNumber(a.lastReadChapter?.lastReadAt, b.lastReadChapter?.lastReadAt));
+                return (a, b) => sortByNumber(a.lastReadChapter?.lastReadAt, b.lastReadChapter?.lastReadAt);
-            break;
             case 'latestUploadedChapter':
-            result.sort((a, b) =>
+                return (a, b) => sortByNumber(a.latestUploadedChapter?.uploadDate, b.latestUploadedChapter?.uploadDate);
-                sortByNumber(a.latestUploadedChapter?.uploadDate, b.latestUploadedChapter?.uploadDate),
-            );
-            break;
             case 'latestFetchedChapter':
-            result.sort((a, b) => sortByNumber(a.latestFetchedChapter?.fetchedAt, b.latestFetchedChapter?.fetchedAt));
+                return (a, b) => sortByNumber(a.latestFetchedChapter?.fetchedAt, b.latestFetchedChapter?.fetchedAt);
-            break;
             case 'totalChapters':
-            result.sort((a, b) => sortByNumber(a.chapters.totalCount, b.chapters.totalCount));
+                return (a, b) => sortByNumber(a.chapters.totalCount, b.chapters.totalCount);
-            break;
             default:
-            break;
+                return () => 0;
+        }
+    })();
+
+    result.sort((a, b) => {
+        const cmp = primaryComparator(a, b);
+        if (cmp !== 0) {
+            if (desc) {
+                return -cmp;
+            }
+            return cmp;
         }
 
-    if (desc) {
+        return sortByString(a.title, b.title);
-        result.reverse();
+    });
-    }
 
     return result;
 };