...

src/app/(features)/memorize/FolderSelector.tsx

@@ -21,7 +21,9 @@ const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
         {(folders.length === 0 && (
           <h1 className="text-2xl text-gray-900 font-light">
             {t("noFolders")}
-            <Link className="text-blue-900 border-b" href={"/folders"}>folders</Link>
+            <Link className="text-blue-900 border-b" href={"/folders"}>
+              folders
+            </Link>
           </h1>
         )) || (
           <>
@@ -29,26 +31,28 @@ const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
               {t("selectFolder")}
             </h1>
             <div className="text-gray-900 border border-gray-200 rounded-2xl max-h-96 overflow-y-auto">
-              {folders.map((folder) => (
-                <div
-                  key={folder.id}
-                  onClick={() =>
-                    router.push(`/memorize?folder_id=${folder.id}`)
-                  }
-                  className="flex flex-row justify-center items-center group p-2 gap-2 hover:cursor-pointer hover:bg-gray-50"
-                >
-                  <Folder />
-                  <div className="flex-1 flex gap-2">
-                    <span className="group-hover:text-blue-500">
-                      {t("folderInfo", {
-                        id: folder.id,
-                        name: folder.name,
-                        count: folder.total_pairs,
-                      })}
-                    </span>
+              {folders
+                .toSorted((a, b) => a.id - b.id)
+                .map((folder) => (
+                  <div
+                    key={folder.id}
+                    onClick={() =>
+                      router.push(`/memorize?folder_id=${folder.id}`)
+                    }
+                    className="flex flex-row justify-center items-center group p-2 gap-2 hover:cursor-pointer hover:bg-gray-50"
+                  >
+                    <Folder />
+                    <div className="flex-1 flex gap-2">
+                      <span className="group-hover:text-blue-500">
+                        {t("folderInfo", {
+                          id: folder.id,
+                          name: folder.name,
+                          count: folder.total_pairs,
+                        })}
+                      </span>
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
             </div>
           </>
         )}