From 246105bee27db8a6a41188bd5f761380b7c90b8a Mon Sep 17 00:00:00 2001
From: Andre Aledia <aaledia1128@gmail.com>
Date: Mon, 17 Aug 2026 17:31:43 -0700
Subject: [PATCH] Text centering in case of longer sort name. Also, implemented
 A-Z/Z-A sort.

---
 src/_Main/MainLocal.tsx         |  6 ++++++
 src/_Main/components/TopBar.tsx |  4 ++--
 src/utils/consts.ts             | 16 ++++++++--------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/_Main/MainLocal.tsx b/src/_Main/MainLocal.tsx
index 949bc496..3904d722 100644
--- a/src/_Main/MainLocal.tsx
+++ b/src/_Main/MainLocal.tsx
@@ -228,6 +228,12 @@ function MainLocal() {
 			newList = newList.filter((mod) => category.has(mod.parent));
 		}
 		switch (sort) {
+			case "alpha-asc":
+				newList.sort((a, b) => a.name.localeCompare(b.name));
+				break;
+			case "alpha-desc":
+				newList.sort((a, b) => b.name.localeCompare(a.name));
+				break;
 			case "fav-asc":
 				newList.sort((a, b) => {
 					const aFav = a.tags?.includes("fav") ? 1 : 0;
diff --git a/src/_Main/components/TopBar.tsx b/src/_Main/components/TopBar.tsx
index ebd8ba9c..7d8f80fb 100644
--- a/src/_Main/components/TopBar.tsx
+++ b/src/_Main/components/TopBar.tsx
@@ -135,7 +135,7 @@ function TopBar() {
 				{
 					<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
 						<PopoverTrigger asChild>
-							<div className="min-w-fit button-like zzz-border hover:brightness-150 bg-sidebar cursor-pointerx flex items-center justify-center h-full gap-1 p-2 text-xs duration-300 rounded-md select-none">
+							<div className="min-w-fit button-like zzz-border hover:brightness-150 bg-sidebar cursor-pointerx flex items-center justify-center text-center h-full gap-1 p-2 text-xs duration-300 rounded-md select-none">
 								{online ? (
 									onlinePath.startsWith("home") || onlinePath.startsWith("search") ? (
 										onlineType == "Mod" ? (
@@ -241,7 +241,7 @@ function TopBar() {
 									Object.entries(SORT_OPTIONS).map(([value, label]) => (
 										<div
 											key={value}
-											className="hover:brightness-150 button-like data-zzz:bg-button zzz-border bg-sidebar min-h-12 cursor-pointerx flex items-center justify-center w-full gap-1 p-2 text-sm duration-300 rounded-md select-none"
+											className="hover:brightness-150 button-like data-zzz:bg-button zzz-border bg-sidebar min-h-12 cursor-pointerx flex items-center justify-center text-center w-full gap-1 p-2 text-sm duration-300 rounded-md select-none"
 											onClick={() => {
 												setSort(value);
 											}}
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index 0e02aa0a..8e8a410b 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -171,14 +171,14 @@ export const SORT_OPTIONS = Object.fromEntries(
 			label: "Default",
 			value: "default",
 		},
-		// {
-		// 	label: "A-Z",
-		// 	value: "alpha-asc",
-		// },
-		// {
-		// 	label: "Z-A",
-		// 	value: "alpha-desc",
-		// },
+		{
+			label: "A - Z",
+			value: "alpha-asc",
+		},
+		{
+			label: "Z - A",
+			value: "alpha-desc",
+		},
 		{
 			label: "Favourite ↑",
 			value: "fav-asc",