Merge branch 'main' of https://github.com/formbricks/formbricks into fix/language-selector-native-names

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { TUser, TUserUpdateInput, ZUser, ZUserEmail } from "@formbricks/types/user";
 import { PasswordConfirmationModal } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal";
-import { appLanguages } from "@/lib/i18n/utils";
+import { appLanguages, sortedAppLanguages } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { Button } from "@/modules/ui/components/button";
@@ -198,41 +198,54 @@ export const EditProfileDetailsForm = ({
           <FormField
             control={form.control}
             name="locale"
-            render={({ field }) => (
-              <FormItem className="mt-4">
-                <FormLabel>{t("common.language")}</FormLabel>
-                <FormControl>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        className="h-10 w-full border border-slate-300 px-3 text-left">
-                        <div className="flex w-full items-center justify-between">
-                          {appLanguages.find((l) => l.code === field.value)?.label["en-US"] ?? "NA"}
-                          <ChevronDownIcon className="h-4 w-4 text-slate-500" />
-                        </div>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                      className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
-                      align="start">
-                      <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
-                        {appLanguages.map((lang) => (
-                          <DropdownMenuRadioItem
-                            key={lang.code}
-                            value={lang.code}
-                            className="min-h-8 cursor-pointer">
-                            {lang.label["en-US"]}
-                          </DropdownMenuRadioItem>
-                        ))}
-                      </DropdownMenuRadioGroup>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </FormControl>
-                <FormError />
-              </FormItem>
-            )}
+            render={({ field }) => {
+              const selectedLanguage = appLanguages.find((l) => l.code === field.value);
+
+              return (
+                <FormItem className="mt-4">
+                  <FormLabel>{t("common.language")}</FormLabel>
+                  <FormControl>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          className="h-10 w-full border border-slate-300 px-3 text-left">
+                          <div className="flex w-full items-center justify-between">
+                            {selectedLanguage ? (
+                              <>
+                                {selectedLanguage.label["en-US"]}
+                                {selectedLanguage.label.native !== selectedLanguage.label["en-US"] &&
+                                  ` (${selectedLanguage.label.native})`}
+                              </>
+                            ) : (
+                              t("common.select")
+                            )}
+                            <ChevronDownIcon className="h-4 w-4 text-slate-500" />
+                          </div>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
+                        align="start">
+                        <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
+                          {sortedAppLanguages.map((lang) => (
+                            <DropdownMenuRadioItem
+                              key={lang.code}
+                              value={lang.code}
+                              className="min-h-8 cursor-pointer">
+                              {lang.label["en-US"]}
+                              {lang.label.native !== lang.label["en-US"] && ` (${lang.label.native})`}
+                            </DropdownMenuRadioItem>
+                          ))}
+                        </DropdownMenuRadioGroup>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </FormControl>
+                  <FormError />
+                </FormItem>
+              );
+            }}
           />
 
           {isPasswordResetEnabled && (

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/layout.tsx

@@ -3,8 +3,8 @@ import { getServerSession } from "next-auth";
 import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
-import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getTranslate } from "@/lingodotdev/server";
+import { authOptions } from "@/modules/auth/lib/authOptions";
 
 type Props = {
   params: Promise<{ surveyId: string; environmentId: string }>;

apps/web/lib/i18n/utils.ts

@@ -130,84 +130,102 @@ export const appLanguages = [
     code: "de-DE",
     label: {
       "en-US": "German",
+      native: "Deutsch",
     },
   },
   {
     code: "en-US",
     label: {
       "en-US": "English (US)",
+      native: "English (US)",
     },
   },
   {
     code: "es-ES",
     label: {
       "en-US": "Spanish",
+      native: "Español",
     },
   },
   {
     code: "fr-FR",
     label: {
       "en-US": "French",
+      native: "Français",
     },
   },
   {
     code: "hu-HU",
     label: {
       "en-US": "Hungarian",
+      native: "Magyar",
     },
   },
   {
     code: "ja-JP",
     label: {
       "en-US": "Japanese",
+      native: "日本語",
     },
   },
   {
     code: "nl-NL",
     label: {
       "en-US": "Dutch",
+      native: "Nederlands",
     },
   },
   {
     code: "pt-BR",
     label: {
       "en-US": "Portuguese (Brazil)",
+      native: "Português (Brasil)",
     },
   },
   {
     code: "pt-PT",
     label: {
       "en-US": "Portuguese (Portugal)",
+      native: "Português (Portugal)",
     },
   },
   {
     code: "ro-RO",
     label: {
       "en-US": "Romanian",
+      native: "Română",
     },
   },
   {
     code: "ru-RU",
     label: {
       "en-US": "Russian",
+      native: "Русский",
     },
   },
   {
     code: "sv-SE",
     label: {
       "en-US": "Swedish",
+      native: "Svenska",
     },
   },
   {
     code: "zh-Hans-CN",
     label: {
       "en-US": "Chinese (Simplified)",
+      native: "简体中文",
     },
   },
   {
     code: "zh-Hant-TW",
     label: {
       "en-US": "Chinese (Traditional)",
+      native: "繁體中文",
     },
   },
 ];
+
+export const sortedAppLanguages = [...appLanguages].sort((a, b) =>
+  a.label["en-US"].localeCompare(b.label["en-US"])
+);

apps/web/modules/ee/teams/project-teams/components/access-table.tsx

@@ -39,9 +39,7 @@ export const AccessTable = ({ teams }: AccessTableProps) => {
           {teams.map((team) => (
             <TableRow key={team.id} className="border-slate-200 hover:bg-transparent">
               <TableCell className="font-medium">{team.name}</TableCell>
-              <TableCell>
-                {t("common.count_members", { count: team.memberCount })}
-              </TableCell>
+              <TableCell>{t("common.count_members", { count: team.memberCount })}</TableCell>
               <TableCell>
                 <IdBadge id={team.id} />
               </TableCell>

apps/web/modules/ee/teams/team-list/components/teams-table.tsx

@@ -97,9 +97,7 @@ export const TeamsTable = ({
             {userTeams.map((team) => (
               <TableRow key={team.id} id={team.name} className="hover:bg-transparent">
                 <TableCell>{team.name}</TableCell>
-                <TableCell>
-                  {t("common.count_members", { count: team.memberCount })}
-                </TableCell>
+                <TableCell>{t("common.count_members", { count: team.memberCount })}</TableCell>
                 <TableCell>
                   <Badge
                     type="success"
@@ -120,9 +118,7 @@ export const TeamsTable = ({
             {otherTeams.map((team) => (
               <TableRow key={team.id} id={team.name} className="hover:bg-transparent">
                 <TableCell>{team.name}</TableCell>
-                <TableCell>
-                  {t("common.count_members", { count: team.memberCount })}
-                </TableCell>
+                <TableCell>{t("common.count_members", { count: team.memberCount })}</TableCell>
                 <TableCell></TableCell>
                 <TableCell className="flex justify-end">
                   <ManageTeamButton