UI: #334 add config page language setting (#374)

* UI: #334 add config page language setting

* temporary remove logout button

* Unify fullscreen view class for dialog expanded and settings view

- Replace dialog-expanded and settings-view with single fullscreen-view class
- Update ResponsiveDialog to use fullscreen-view class
- Update CalendarLayout to use fullscreen-view class for settings view
- Consolidate CSS rules in Menubar.styl to use fullscreen-view
- Update test cases to use new class name

---------

Co-authored-by: Lê Nhân Phụng <lenhanphung@Phung-Mac-M4.local>

__test__/components/Menubar.test.tsx

@@ -409,7 +409,7 @@ describe("Menubar interaction with expanded Dialog", () => {
   });
 
   afterEach(() => {
-    document.body.classList.remove("dialog-expanded");
+    document.body.classList.remove("fullscreen-view");
   });
 
   it("has navigation controls element with correct class", () => {
@@ -497,7 +497,7 @@ describe("Menubar interaction with expanded Dialog", () => {
     const mockOnRefresh = jest.fn();
     const mockCurrentDate = new Date("2024-04-15");
 
-    document.body.classList.add("dialog-expanded");
+    document.body.classList.add("fullscreen-view");
 
     renderWithProviders(
       <Menubar
@@ -519,7 +519,7 @@ describe("Menubar interaction with expanded Dialog", () => {
     const mockOnRefresh = jest.fn();
     const mockCurrentDate = new Date("2024-04-15");
 
-    document.body.classList.add("dialog-expanded");
+    document.body.classList.add("fullscreen-view");
 
     renderWithProviders(
       <Menubar
@@ -538,13 +538,11 @@ describe("Menubar interaction with expanded Dialog", () => {
     expect(screen.getByText("Twake")).toBeInTheDocument();
   });
 
-  it("keeps avatar clickable when dialog is expanded", async () => {
+  it("opens user dropdown menu when clicking avatar", async () => {
     const mockCalendarRef = { current: null };
     const mockOnRefresh = jest.fn();
     const mockCurrentDate = new Date("2024-04-15");
 
-    document.body.classList.add("dialog-expanded");
-
     renderWithProviders(
       <Menubar
         calendarRef={mockCalendarRef}
@@ -561,10 +559,110 @@ describe("Menubar interaction with expanded Dialog", () => {
     fireEvent.click(avatar.closest("button")!);
 
     await waitFor(() => {
-      const languageSelector = screen.getByLabelText(
-        "menubar.languageSelector"
-      );
-      expect(languageSelector).toBeInTheDocument();
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+      expect(screen.getByText("test@test.com")).toBeInTheDocument();
+    });
+  });
+
+  it("closes user dropdown menu when clicking outside", async () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const avatar = screen.getByText("JD");
+    fireEvent.click(avatar.closest("button")!);
+
+    await waitFor(() => {
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+    });
+
+    // Click outside the menu - MUI Menu closes on backdrop click
+    const backdrop = document.querySelector(".MuiBackdrop-root");
+    if (backdrop) {
+      fireEvent.click(backdrop);
+    } else {
+      // Fallback: click on body
+      fireEvent.mouseDown(document.body);
+    }
+
+    await waitFor(
+      () => {
+        expect(screen.queryByText("John Doe")).not.toBeInTheDocument();
+      },
+      { timeout: 2000 }
+    );
+  });
+
+  it("displays user name and email in dropdown menu", async () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const avatar = screen.getByText("JD");
+    fireEvent.click(avatar.closest("button")!);
+
+    await waitFor(() => {
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+      expect(screen.getByText("test@test.com")).toBeInTheDocument();
+    });
+  });
+
+  it("navigates to settings page when clicking Settings in dropdown", async () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const preloadedStateWithSettings = {
+      ...preloadedState,
+      settings: {
+        language: "en",
+        view: "calendar",
+      },
+    };
+
+    const { store } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedStateWithSettings
+    );
+
+    const avatar = screen.getByText("JD");
+    fireEvent.click(avatar.closest("button")!);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Settings/i)).toBeInTheDocument();
+    });
+
+    const settingsButton = screen.getByText(/Settings/i);
+    fireEvent.click(settingsButton);
+
+    await waitFor(() => {
+      const state = store.getState();
+      expect(state.settings.view).toBe("settings");
     });
   });