first commit

common/resources/client/i18n/locale-switcher.tsx

@@ -0,0 +1,51 @@
+import {useValueLists} from '../http/value-lists';
+import {Button} from '../ui/buttons/button';
+import {LanguageIcon} from '../icons/material/Language';
+import {KeyboardArrowDownIcon} from '../icons/material/KeyboardArrowDown';
+import {useSelectedLocale} from './selected-locale';
+import {Menu, MenuItem, MenuTrigger} from '../ui/navigation/menu/menu-trigger';
+import {useChangeLocale} from './change-locale';
+import {useSettings} from '../core/settings/use-settings';
+
+export function LocaleSwitcher() {
+  const {locale} = useSelectedLocale();
+  const changeLocale = useChangeLocale();
+  const {data} = useValueLists(['localizations']);
+  const {i18n} = useSettings();
+
+  if (!data?.localizations || !locale || !i18n.enable) return null;
+
+  return (
+    <MenuTrigger
+      floatingWidth="matchTrigger"
+      selectionMode="single"
+      selectedValue={locale.language}
+      onSelectionChange={value => {
+        const newLocale = value as string;
+        if (newLocale !== locale?.language) {
+          changeLocale.mutate({locale: newLocale});
+        }
+      }}
+    >
+      <Button
+        disabled={changeLocale.isPending}
+        className="capitalize"
+        startIcon={<LanguageIcon />}
+        endIcon={<KeyboardArrowDownIcon />}
+      >
+        {locale.name}
+      </Button>
+      <Menu>
+        {data.localizations.map(localization => (
+          <MenuItem
+            value={localization.language}
+            key={localization.language}
+            className="capitalize"
+          >
+            {localization.name}
+          </MenuItem>
+        ))}
+      </Menu>
+    </MenuTrigger>
+  );
+}