feat: language selector (#484)

* feat: language selector

* refactor: move user general page

* feat: language selector

* refactor: move user general page

* feat: add language combobox in user general

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-language-change.tsx

@@ -0,0 +1,12 @@
+import { Stack, Title } from "@mantine/core";
+
+import { LanguageCombobox } from "~/components/language/language-combobox";
+
+export const ProfileLanguageChange = () => {
+  return (
+    <Stack mb="lg">
+      <Title order={2}>Language & Region</Title>
+      <LanguageCombobox />
+    </Stack>
+  );
+};

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -10,10 +10,11 @@ import {
   DangerZoneRoot,
 } from "~/components/manage/danger-zone";
 import { catchTrpcNotFound } from "~/errors/trpc-not-found";
-import { DeleteUserButton } from "./_delete-user-button";
-import { UserProfileAvatarForm } from "./_profile-avatar-form";
-import { UserProfileForm } from "./_profile-form";
-import { canAccessUserEditPage } from "./access";
+import { canAccessUserEditPage } from "../access";
+import { DeleteUserButton } from "./_components/_delete-user-button";
+import { UserProfileAvatarForm } from "./_components/_profile-avatar-form";
+import { UserProfileForm } from "./_components/_profile-form";
+import { ProfileLanguageChange } from "./_components/_profile-language-change";
 
 interface Props {
   params: {
@@ -67,6 +68,8 @@ export default async function EditUserPage({ params }: Props) {
         </Box>
       </Group>
 
+      <ProfileLanguageChange />
+
       <DangerZoneRoot>
         <DangerZoneItem
           label={t("user.action.delete.label")}

apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx

@@ -69,7 +69,7 @@ export default async function Layout({
           <Stack>
             <Stack gap={0}>
               <NavigationLink
-                href={`/manage/users/${params.userId}`}
+                href={`/manage/users/${params.userId}/general`}
                 label={tUser("setting.general.title")}
                 icon={<IconSettings size="1rem" stroke={1.5} />}
               />

apps/nextjs/src/app/[locale]/manage/users/[userId]/security/page.tsx

@@ -7,7 +7,7 @@ import { getScopedI18n } from "@homarr/translation/server";
 
 import { catchTrpcNotFound } from "~/errors/trpc-not-found";
 import { canAccessUserEditPage } from "../access";
-import { ChangePasswordForm } from "./_change-password-form";
+import { ChangePasswordForm } from "./_components/_change-password-form";
 
 interface Props {
   params: {

apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx

@@ -33,7 +33,7 @@ export const UserListComponent = ({
         header: t("user.field.username.label"),
         grow: 100,
         Cell: ({ renderedCellValue, row }) => (
-          <Link href={`/manage/users/${row.original.id}`}>
+          <Link href={`/manage/users/${row.original.id}/general`}>
             <Group>
               <Avatar size="sm"></Avatar>
               {renderedCellValue}