Refactor settings management and add mutation error handling

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -14,26 +14,18 @@ function SettingsCard({
 	categories,
 	sectionTitle,
 	filter,
-	setFilter,
 	sort,
-	setSort,
 	density,
-	setDensity,
 	scale,
-	setScale,
 }: {
 	categories: ComboboxItem[];
 	sectionTitle: string;
 	filter: any;
-	setFilter: any;
 	sort: any;
-	setSort: any;
 	density: any;
-	setDensity: any;
 	scale: any;
-	setScale: any;
 }) {
-	const { theme } = useCommonHooks();
+	const { theme, updateSetting } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
@@ -70,11 +62,23 @@ function SettingsCard({
 						className={sliderClasses.default}
 						classNames={sliderClasses}
 						value={density}
-						onChange={(value) => setDensity(value)}
+						onChange={(value) => {
+							if (sectionTitle === 'Applications') {
+								updateSetting('appDensity', value);
+							} else if (sectionTitle === 'Bookmarks') {
+								updateSetting('bookmarkDensity', value);
+							}
+						}}
 						min={1}
 						max={16}
 						marks={[{ value: 6, label: 'Default' }]}
-						onDoubleClick={() => setDensity(6)}
+						onDoubleClick={() => {
+							if (sectionTitle === 'Applications') {
+								updateSetting('appDensity', 6);
+							} else if (sectionTitle === 'Bookmarks') {
+								updateSetting('bookmarkDensity', 6);
+							}
+						}}
 					/>
 				</Stack>
 				{scale !== undefined && (
@@ -86,12 +90,24 @@ function SettingsCard({
 							className={sliderClasses.default}
 							classNames={sliderClasses}
 							value={scale}
-							onChange={(value) => setScale(value)}
+							onChange={(value) => {
+								if (sectionTitle === 'Applications') {
+									updateSetting('appScale', value);
+								} else if (sectionTitle === 'Bookmarks') {
+									updateSetting('bookmarkScale', value);
+								}
+							}}
 							step={0.1}
 							min={0.2}
 							max={3}
 							marks={[{ value: 1, label: 'Default' }]}
-							onDoubleClick={() => setScale(1)}
+							onDoubleClick={() => {
+								if (sectionTitle === 'Applications') {
+									updateSetting('appScale', 1);
+								} else if (sectionTitle === 'Bookmarks') {
+									updateSetting('bookmarkScale', 1);
+								}
+							}}
 						/>
 					</Stack>
 				)}
@@ -113,7 +129,11 @@ function SettingsCard({
 					}
 					defaultValue={filter}
 					onChange={(data: string[]) => {
-						setFilter(data);
+						if (sectionTitle === 'Applications') {
+							updateSetting('appFilter', data);
+						} else if (sectionTitle === 'Bookmarks') {
+							updateSetting('bookmarkFilter', data);
+						}
 					}}
 					classNames={multiSelectClasses}
 					comboboxProps={{
@@ -147,7 +167,11 @@ function SettingsCard({
 						position: 'top',
 					}}
 					onChange={(_value, option: ComboboxItem) => {
-						setSort(option.value);
+						if (sectionTitle === 'Applications') {
+							updateSetting('appSort', option.value);
+						} else if (sectionTitle === 'Bookmarks') {
+							updateSetting('bookmarkSort', option.value);
+						}
 					}}
 					labelProps={{ top: 8 }}
 					styles={