Fix setting invalid value for reader settings

When changing a setting from DEFAULT to another value, the value was incorrectly wrapped in an array which lead to an invalid value to get set.
This then caused an error to be thrown, making the reader unusable

fixes #1099

src/base/components/buttons/ButtonSelect.tsx

@@ -38,7 +38,7 @@ export const ButtonSelect = <Value extends string | number, MultiValue extends V
 
                 const newValue = (() => {
                     if (value === undefined) {
-                        return [displayValue];
+                        return isMultiSelect ? [displayValue] : displayValue;
                     }
 
                     if (isMultiSelect) {

src/features/metadata/Metadata.constants.ts

@@ -31,6 +31,9 @@ import { detectLocale, getISOLanguage } from '@/lib/ISOLanguageUtil.ts';
 import type { I18nResourceCode } from '@/i18n';
 import { i18nResources } from '@/i18n';
 import { toUniqueLanguageCodes } from '@/base/utils/Languages.ts';
+import { assertIsDefined } from '@/base/Asserts.ts';
+
+const MATCH_ARRAY_NUMBERS = /^\[\d+(?:,\d+)*]$/g;
 
 export const APP_METADATA_KEY_PREFIX = 'webUI';
 
@@ -701,6 +704,22 @@ export const METADATA_MIGRATIONS: IMetadataMigration[] = [
         keys: [{ oldKey: 'sourceLanguages', newKey: 'browseLanguages' }],
         deleteKeys: ['sourceLanguages', 'extensionLanguages'],
     },
+    {
+        values: [
+            ...(() =>
+                ['pageScaleMode', 'readingDirection', 'readingMode', 'tapZoneLayout'].map((key) => ({
+                    key,
+                    oldValue: MATCH_ARRAY_NUMBERS,
+                    newValue: (value) => {
+                        const array = jsonSaveParse<number[]>(value);
+
+                        assertIsDefined(array);
+
+                        return JSON.stringify(array[0]);
+                    },
+                })) satisfies IMetadataMigration['values'])(),
+        ],
+    },
 ];
 
 export const ALL_APP_METADATA_KEY_PREFIXES: string[] = [