Updates to settings to allow sorting

src/pages/settings/components/Theming/Themes/Themes.tsx

@@ -28,11 +28,33 @@ export function Themes() {
 	const { data: allThemeData, isFetching: allThemeDataIsFetching } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
+	const [sortBy, setSortBy] = useState('Oldest');
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
-	const allThemes: Theme[] = allThemeData?.filter((a: Theme) =>
-		a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
-	);
+	const allThemes: Theme[] = allThemeData
+		?.filter((a: Theme) =>
+			a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
+		)
+		.sort((a: Theme, b: Theme) => {
+			switch (sortBy) {
+				case 'A>Z':
+					return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
+				case 'Z>A':
+					return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
+				case 'Newest':
+					if (a.id && b.id) {
+						return a.id < b.id ? 1 : -1;
+					}
+					return -1;
+				case 'Oldest':
+					if (a.id && b.id) {
+						return a.id > b.id ? 1 : -1;
+					}
+					return -1;
+				default:
+					return 0;
+			}
+		});
 	const { data: backgroundData, isFetching: backgroundDataIsFetching } = useQueryAPI({
 		endpoint: backgroundsEndpoint,
 	});
@@ -139,6 +161,9 @@ export function Themes() {
 				searchPlaceholder={'Search Themes...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={sortBy}
+				setSortBy={setSortBy}
+				customSearchEnabled={false}
 			/>
 			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
 				<LoadingOverlay
@@ -296,7 +321,9 @@ export function Themes() {
 						<Button
 							onClick={() => {
 								if (currentThemePlaylist === 'All') {
-									navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
+									void navigate(
+										`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`,
+									);
 								} else {
 									setCurrentThemePlaylist('All');
 									setCurrentTheme(theme.name);