Refactor settings management and add mutation error handling

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

@@ -84,15 +84,7 @@ export function Themes() {
 		),
 	] as string[];
 
-	const {
-		currentTheme,
-		currentUser,
-		setCurrentTheme,
-		theme,
-		isMobile,
-		currentThemePlaylist,
-		setCurrentThemePlaylist,
-	} = useCommonHooks();
+	const { settings, updateSetting, theme, isMobile } = useCommonHooks();
 
 	const [selectedTheme, setSelectedTheme] = useState<Theme>({
 		id: undefined,
@@ -106,7 +98,7 @@ export function Themes() {
 		randomEnabled: 1,
 		textShadowsEnabled: 0,
 		appShadowsEnabled: 0,
-		themeFont: currentUser.defaultFont,
+		themeFont: settings.defaultFont,
 	});
 	const [isLoading, setIsLoading] = useState(false);
 	const [isNew, setIsNew] = useState(false);
@@ -184,7 +176,7 @@ export function Themes() {
 				>
 					<Overlay
 						display={
-							currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
+							settings.theme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
 						}
 						blur={5}
 						style={{
@@ -199,7 +191,7 @@ export function Themes() {
 					{allThemes?.length > 0 ? (
 						allThemes.map((cardTheme: Theme) => (
 							<Group key={cardTheme.name} pos={'relative'}>
-								{cardTheme.name === currentTheme && (
+								{cardTheme.name === settings.theme && (
 									<FiChevronRight
 										style={{
 											position: 'absolute',
@@ -219,11 +211,12 @@ export function Themes() {
 								<Box
 									style={{
 										zIndex:
-											currentTheme === 'random' &&
+											settings.theme === 'random' &&
 											(themePlaylists
 												.find(
 													(t: ThemePlaylist) =>
-														t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
+														t.name.toLowerCase() ===
+														settings.currentThemePlaylist.toLowerCase(),
 												)
 												?.themeList.includes(`${cardTheme.id}`) ||
 												cardTheme.name === theme.name)
@@ -310,7 +303,9 @@ export function Themes() {
 									fontSize: isMobile ? '.8rem' : '1.2rem',
 								}}
 							>
-								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
+								{settings.currentThemePlaylist === 'All'
+									? 'All'
+									: settings.currentThemePlaylist}
 							</Text>
 						</Group>
 						<Divider
@@ -320,13 +315,13 @@ export function Themes() {
 						/>
 						<Button
 							onClick={() => {
-								if (currentThemePlaylist === 'All') {
+								if (settings.currentThemePlaylist === 'All') {
 									void navigate(
 										`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`,
 									);
 								} else {
-									setCurrentThemePlaylist('All');
-									setCurrentTheme(theme.name);
+									updateSetting('currentThemePlaylist', 'All');
+									updateSetting('theme', theme.name);
 								}
 							}}
 							style={{
@@ -334,7 +329,7 @@ export function Themes() {
 								padding: isMobile ? 0 : undefined,
 							}}
 						>
-							{currentThemePlaylist === 'All' ? (
+							{settings.currentThemePlaylist === 'All' ? (
 								isMobile ? (
 									<FiMousePointer />
 								) : (
@@ -350,11 +345,11 @@ export function Themes() {
 							className={toolTipClasses.default}
 							classNames={toolTipClasses}
 							label='Shuffle is always on when a playlist is active.'
-							disabled={currentThemePlaylist === 'All'}
+							disabled={settings.currentThemePlaylist === 'All'}
 						>
 							<Group>
 								<Switch
-									disabled={currentThemePlaylist !== 'All'}
+									disabled={settings.currentThemePlaylist !== 'All'}
 									label={
 										isMobile ? (
 											<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
@@ -363,10 +358,10 @@ export function Themes() {
 										)
 									}
 									labelPosition='left'
-									checked={currentTheme === 'random'}
+									checked={settings.theme === 'random'}
 									onChange={(e) => {
-										setCurrentTheme(e.target.checked ? 'random' : theme.name);
-										setCurrentThemePlaylist('All');
+										updateSetting('theme', e.target.checked ? 'random' : theme.name);
+										updateSetting('currentThemePlaylist', 'All');
 									}}
 									className={switchClasses.default}
 									classNames={switchClasses}