Sort suggestions alphabetically in UI

wwwroot/js/ui.js

@@ -5,6 +5,11 @@ import { $, toast } from "./dom.js";
 import { setupCardVisualHover, triggerCelebration } from "./effects.js";
 import { adminApi } from "./api.js";
 
+const sortByName = (items) =>
+    (items ?? [])
+        .slice()
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
+
 export function setAuthUI(isAuthed) {
     const main = document.querySelector("main");
     const statusBar = document.querySelector(".status-bar");
@@ -108,7 +113,7 @@ export function renderMySuggestions() {
     const allowEdit = true; // own suggestions can always adjust optional data
     const lockTitle = state.phase !== "Suggest" && !state.me?.isAdmin;
     const allowDelete = state.phase === "Suggest" || state.me?.isAdmin;
-    state.mySuggestions.forEach((s) =>
+    sortByName(state.mySuggestions).forEach((s) =>
         wrap.appendChild(
             buildCard(s, { showAuthor: false, allowDelete, allowEdit, lockTitle }),
         ),
@@ -122,7 +127,7 @@ export function renderAllSuggestions() {
     list.innerHTML = "";
     const allowEdit = true; // allow own edits (optional fields) in vote
     const allowDelete = !!state.me?.isAdmin;
-    state.allSuggestions.forEach((s) =>
+    sortByName(state.allSuggestions).forEach((s) =>
         list.appendChild(
             buildCard(s, { showAuthor: true, allowEdit, allowDelete }),
         ),
@@ -137,7 +142,7 @@ export function renderVotes() {
     const votesMap = Object.fromEntries(
         state.myVotes.map((v) => [v.suggestionId, v.score]),
     );
-    state.allSuggestions.forEach((s) => {
+    sortByName(state.allSuggestions).forEach((s) => {
         const canEdit = !!state.me?.isAdmin || s.playerId === state.me?.id;
         const lockTitle = state.phase !== "Suggest" && !state.me?.isAdmin;
         const li = buildCard(s, {