Web/bugfix/language picker mobile

app/web/components/Navigation/Navigation.test.tsx

@@ -2,10 +2,15 @@ import { render, screen, waitFor } from "@testing-library/react";
 import useAuthStore from "features/auth/useAuthStore";
 import React from "react";
 import wrapper from "test/hookWrapper";
+import { createMatchMedia } from "test/utils";
 
 import Navigation from "./Navigation";
 
 jest.mock("features/auth/useAuthStore");
+jest.mock("features/translate/LanguagePickerSelect", () => ({
+  __esModule: true,
+  default: () => <div data-testid="language-picker" />,
+}));
 
 jest.mock("features/donations/DonationBanner", () => ({
   DonationBanner: () => (
@@ -79,3 +84,36 @@ describe("Navigation", () => {
     expect(screen.queryByLabelText("Donation banner")).not.toBeInTheDocument();
   });
 });
+
+it("renders the language picker on mobile when the user is logged out", () => {
+  const originalMatchMedia = window.matchMedia;
+  window.matchMedia = createMatchMedia(800);
+
+  try {
+    mockUseAuthStore.mockReturnValue({
+      authState: {
+        authenticated: false,
+        error: null,
+        jailed: false,
+        loading: false,
+        userId: null,
+        flowState: null,
+      },
+      authActions: {
+        authError: jest.fn(),
+        clearError: jest.fn(),
+        firstLogin: jest.fn(),
+        logout: jest.fn(),
+        passwordLogin: jest.fn(),
+        updateJailStatus: jest.fn(),
+        updateSignupState: jest.fn(),
+      },
+    });
+
+    render(<Navigation />, { wrapper });
+
+    expect(screen.getByTestId("language-picker")).toBeInTheDocument();
+  } finally {
+    window.matchMedia = originalMatchMedia;
+  }
+});

app/web/components/Navigation/Navigation.tsx

@@ -287,6 +287,14 @@ export default function Navigation() {
 
   const { t } = useTranslation(GLOBAL);
 
+  const shouldShowLanguagePickerSelect = useMemo(() => {
+    if (!isMobile) return true;
+
+    if (isMobile && authState.authenticated) return true;
+
+    return false;
+  }, [authState.authenticated, isMobile]);
+
   useEffect(() => setIsMounted(true), []);
 
   const handleDrawerOpen = () => {
@@ -298,7 +306,14 @@ export default function Navigation() {
   };
 
   const drawerItems = (
-    <div>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        justifyContent: "space-between",
+      }}
+    >
       <List>
         {(isAuthenticated ? loggedInDrawerMenu : loggedOutDrawerMenu)(
           t,
@@ -329,7 +344,14 @@ export default function Navigation() {
           </ListItem>
         ))}
       </List>
-    </div>
+
+      <Box
+        sx={{ marginX: "auto", marginBottom: theme.spacing(2) }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <LanguagePickerSelect />
+      </Box>
+    </Box>
   );
 
   const loggedInMenuItems = useMemo(
@@ -431,7 +453,7 @@ export default function Navigation() {
                 gap: 2,
               }}
             >
-              {!isMobile && <LanguagePickerSelect />}
+              {shouldShowLanguagePickerSelect && <LanguagePickerSelect />}
               {!isLoginPage && (
                 <Button
                   variant="outlined"

app/web/features/auth/login/Login.tsx

@@ -1,16 +1,14 @@
-import { alpha, Box, styled, Typography, useMediaQuery } from "@mui/material";
+import { alpha, styled, Typography } from "@mui/material";
 import Alert from "components/Alert";
 import HtmlMeta from "components/HtmlMeta";
 import StyledLink from "components/StyledLink";
 import AntibotNote from "features/antibot/AntibotNote";
-import LanguagePickerSelect from "features/translate/LanguagePickerSelect";
 import { Trans, useTranslation } from "i18n";
 import { AUTH, GLOBAL, LANDING } from "i18n/namespaces";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import CouchersTextLogo from "resources/CouchersTextLogo";
 import { dashboardRoute, signupRoute } from "routes";
-import { theme } from "theme";
 import stringOrFirstString from "utils/stringOrFirstString";
 
 import { useAuthContext } from "../AuthProvider";
@@ -43,7 +41,6 @@ export default function Login() {
   const error = authState.error;
 
   const router = useRouter();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const from = stringOrFirstString(router.query.from) ?? dashboardRoute;
   const redirectTo = from === "/" || from === "%2F" ? dashboardRoute : from;
 
@@ -94,17 +91,6 @@ export default function Login() {
             <AntibotNote />
           </Typography>
         </StyledFormWrapper>
-        {isMobile && (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginTop: theme.spacing(2),
-            }}
-          >
-            <LanguagePickerSelect />
-          </Box>
-        )}
       </StyledContent>
     </>
   );

app/web/features/auth/signup/Signup.tsx

@@ -5,7 +5,6 @@ import {
   Skeleton,
   styled,
   Typography,
-  useMediaQuery,
 } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import Alert from "components/Alert";
@@ -14,7 +13,6 @@ import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
 import HtmlMeta from "components/HtmlMeta";
 import Redirect from "components/Redirect";
 import StyledLink from "components/StyledLink";
-import LanguagePickerSelect from "features/translate/LanguagePickerSelect";
 import { RpcError } from "grpc-web";
 import { Trans, useTranslation } from "i18n";
 import { AUTH, GLOBAL } from "i18n/namespaces";
@@ -46,7 +44,6 @@ const StyledFormWrapper = styled("div")(({ theme }) => ({
 export default function Signup() {
   const { t } = useTranslation([AUTH, GLOBAL]);
   const router = useRouter();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   const { authState, authActions } = useAuthContext();
   const authenticated = authState.authenticated;
@@ -196,17 +193,6 @@ export default function Signup() {
             </Trans>
           </Typography>
         </StyledFormWrapper>
-        {isMobile && (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginTop: theme.spacing(2),
-            }}
-          >
-            <LanguagePickerSelect />
-          </Box>
-        )}
       </Container>
     </>
   );