Save selected source languages on the server

src/modules/source/screens/Sources.tsx

@@ -14,8 +14,7 @@ import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
-import { DefaultLanguage, getDefaultLanguages } from '@/modules/core/utils/Languages.ts';
+import { DefaultLanguage } from '@/modules/core/utils/Languages.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
 import { SourceCard } from '@/modules/source/components/SourceCard.tsx';
 import { LanguageSelect } from '@/modules/core/components/inputs/LanguageSelect.tsx';
@@ -35,7 +34,7 @@ import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/Style
 export function Sources({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const { t } = useTranslation();
 
-    const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', getDefaultLanguages());
+    const { languages: shownLangs, setLanguages: setShownLangs } = SourceService.useLanguages();
     const {
         settings: { showNsfw, lastUsedSourceId },
     } = useMetadataServerSettings();

src/modules/source/services/Sources.ts

@@ -6,6 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+import { useTranslation } from 'react-i18next';
+import { useCallback } from 'react';
 import {
     SourceDisplayNameInfo,
     SourceIdInfo,
@@ -22,6 +24,12 @@ import {
     toUniqueLanguageCodes,
 } from '@/modules/core/utils/Languages.ts';
 import { getSourceMetadata } from '@/modules/source/services/SourceMetadata.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/modules/settings/services/ServerSettingsMetadata.ts';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 
 export class Sources {
     static readonly LOCAL_SOURCE_ID = '0';
@@ -138,4 +146,24 @@ export class Sources {
     ): Source | undefined {
         return sources.find((source) => source.id === lastUsedSourceId);
     }
+
+    static useLanguages(): {
+        languages: string[];
+        setLanguages: (languages: string[]) => void;
+    } {
+        const { t } = useTranslation();
+        const {
+            settings: { sourceLanguages },
+        } = useMetadataServerSettings();
+
+        const updateSetting = createUpdateMetadataServerSettings<'sourceLanguages'>((e) =>
+            makeToast(t('global.error.label.failed_to_save_changes', getErrorMessage(e)), 'error'),
+        );
+        const setLanguages = useCallback((languages: string[]) => updateSetting('sourceLanguages', languages), []);
+
+        return {
+            languages: sourceLanguages,
+            setLanguages,
+        };
+    }
 }