Added persistent sort to more locations

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

@@ -24,11 +24,11 @@ import { ThemeCard } from './ThemeCard';
 import { ThemeModal } from './ThemeModal';
 
 export function Themes() {
+	const { settings, updateSetting, theme, isMobile } = useCommonHooks();
 	const backgroundsEndpoint = 'api/backgrounds';
 	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
@@ -36,7 +36,7 @@ export function Themes() {
 			a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
 		)
 		.sort((a: Theme, b: Theme) => {
-			switch (sortBy) {
+			switch (settings.themesSettingsSort) {
 				case 'A>Z':
 					return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
 				case 'Z>A':
@@ -84,8 +84,6 @@ export function Themes() {
 		),
 	] as string[];
 
-	const { settings, updateSetting, theme, isMobile } = useCommonHooks();
-
 	const [selectedTheme, setSelectedTheme] = useState<Theme>({
 		id: undefined,
 		name: 'default',
@@ -153,8 +151,10 @@ export function Themes() {
 				searchPlaceholder={'Search Themes...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
-				sortBy={sortBy}
-				setSortBy={setSortBy}
+				sortBy={settings.themesSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('themesSettingsSort', value);
+				}}
 				customSearchEnabled={false}
 			/>
 			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>