Remove "forced languages" from "LangSelect"

src/modules/core/components/inputs/LangSelect.tsx

@@ -23,30 +23,18 @@ import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { cloneObject } from '@/util/cloneObject.tsx';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 
-function removeAll(firstList: any[], secondList: any[]) {
-    secondList.forEach((item) => {
-        const index = firstList.indexOf(item);
-        if (index !== -1) {
-            firstList.splice(index, 1);
-        }
-    });
-
-    return firstList;
-}
-
 interface IProps {
     shownLangs: string[];
     setShownLangs: (arg0: string[]) => void;
     allLangs: string[];
-    forcedLangs?: string[];
 }
 
 export function LangSelect(props: IProps) {
     const { t } = useTranslation();
 
-    const { shownLangs, setShownLangs, allLangs, forcedLangs = [] } = props;
+    const { shownLangs, setShownLangs, allLangs } = props;
     // hold a copy and only sate state on parent when OK pressed, improves performance
-    const [mShownLangs, setMShownLangs] = useState(removeAll(cloneObject(shownLangs), forcedLangs));
+    const [mShownLangs, setMShownLangs] = useState(cloneObject(shownLangs));
     const [open, setOpen] = useState<boolean>(false);
 
     const handleCancel = () => {

src/modules/global-search/screens/SearchAll.tsx

@@ -252,7 +252,6 @@ export const SearchAll: React.FC = () => {
                     shownLangs={shownLangs}
                     setShownLangs={setShownLangs}
                     allLangs={sourceToLangList(sources)}
-                    forcedLangs={sourceForcedDefaultLangs()}
                 />
             </>,
         );

src/modules/source/screens/Sources.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Fragment, useEffect, useLayoutEffect, useMemo } from 'react';
+import { Fragment, useLayoutEffect, useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
@@ -67,7 +67,11 @@ export function Sources() {
     const { t } = useTranslation();
     const { setAction } = useNavBarContext();
 
-    const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());
+    const [savedShownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());
+    const shownLangs = useMemo(
+        () => [...new Set([...savedShownLangs, ...sourceDefualtLangs(), ...sourceForcedDefaultLangs()])],
+        [savedShownLangs],
+    );
     const [showNsfw] = useLocalStorage<boolean>('showNsfw', true);
 
     const {
@@ -89,22 +93,6 @@ export function Sources() {
 
     const navigate = useNavigate();
 
-    useEffect(() => {
-        // make sure all of forcedDefaultLangs() exists in shownLangs
-        sourceForcedDefaultLangs().forEach((forcedLang) => {
-            let hasLang = false;
-            shownLangs.forEach((lang) => {
-                if (lang === forcedLang) hasLang = true;
-            });
-            if (!hasLang) {
-                setShownLangs((shownLangsCopy) => {
-                    shownLangsCopy.push(forcedLang);
-                    return shownLangsCopy;
-                });
-            }
-        });
-    }, []);
-
     useLayoutEffect(() => {
         setAction(
             <>
@@ -117,7 +105,6 @@ export function Sources() {
                     shownLangs={shownLangs}
                     setShownLangs={setShownLangs}
                     allLangs={sourceToLangList(sources ?? [])}
-                    forcedLangs={sourceForcedDefaultLangs()}
                 />
             </>,
         );