fix: use cjs extension for commonjs files

* chore(.gitignore): add auth.json to gitignore
test(landing.spec.js): remove commented out code and add check for landing page title
test(login.spec.js): add test for login page title
feat(package.json): add e2e:auth script to generate auth.json storage file for e2e tests

* test(landing.spec.js): add beforeEach hook to create a new browser context with auth.json storage state
test(landing.spec.js): change test name from 'landing page' to 'Landing title'
fix(package.json): change e2e:auth script to save auth.json in e2e directory

.gitignore

@@ -64,4 +64,4 @@ src/style - official.css
 # meilisearch
 meilisearch
 data.ms/*
-
+auth.json

client/src/components/Input/NewConversationMenu/index.jsx

@@ -122,7 +122,7 @@ export default function NewConversationMenu() {
   });
 
   return (
-    <Dialog>
+    <Dialog className="z-[100]">
       <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
         <DropdownMenuTrigger asChild>
           <Button
@@ -136,7 +136,7 @@ export default function NewConversationMenu() {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          className="min-w-[300px] dark:bg-gray-700"
+          className="min-w-[300px] dark:bg-gray-700 z-[100]"
           onCloseAutoFocus={(event) => event.preventDefault()}
         >
           <DropdownMenuLabel

client/src/components/Nav/NavLinks.jsx

@@ -69,10 +69,12 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
-                <Menu.Item>
-                  {!!isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
-                </Menu.Item>
-                <Menu.Item>
+                {isSearchEnabled && (
+                  <Menu.Item>
+                    <SearchBar clearSearch={clearSearch} />
+                  </Menu.Item>
+                )}
+                <Menu.Item as="div">
                   <NavLink
                     className={cn(
                       'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
@@ -84,10 +86,10 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                   />
                 </Menu.Item>
                 <div className="my-1.5 h-px bg-white/20" role="none" />
-                <Menu.Item>
+                <Menu.Item as="div">
                   <DarkMode />
                 </Menu.Item>
-                <Menu.Item>
+                <Menu.Item as="div">
                   <NavLink
                     className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
                     svg={() => <TrashIcon />}
@@ -96,7 +98,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                   />
                 </Menu.Item>
                 <div className="my-1.5 h-px bg-white/20" role="none" />
-                <Menu.Item>
+                <Menu.Item as="div">
                   <Logout />
                 </Menu.Item>
               </Menu.Items>

client/src/components/Nav/index.jsx

@@ -13,25 +13,25 @@ import { useAuthContext } from '~/hooks/AuthContext';
 import { ThemeContext } from '~/hooks/ThemeContext';
 import { cn } from '~/utils/';
 
-import resolveConfig from 'tailwindcss/resolveConfig';
-const tailwindConfig = import('../../../tailwind.config.cjs');
-const fullConfig = resolveConfig(tailwindConfig);
+// import resolveConfig from 'tailwindcss/resolveConfig';
+// const tailwindConfig = import('../../../tailwind.config.cjs');
+// const fullConfig = resolveConfig(tailwindConfig);
 
-export const getBreakpointValue = (value) =>
-  +fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px'));
+// export const getBreakpointValue = (value) =>
+//   +fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px'));
 
-export const getCurrentBreakpoint = () => {
-  let currentBreakpoint;
-  let biggestBreakpointValue = 0;
-  for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
-    const breakpointValue = getBreakpointValue(breakpoint);
-    if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) {
-      biggestBreakpointValue = breakpointValue;
-      currentBreakpoint = breakpoint;
-    }
-  }
-  return currentBreakpoint;
-};
+// export const getCurrentBreakpoint = () => {
+//   let currentBreakpoint;
+//   let biggestBreakpointValue = 0;
+//   for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
+//     const breakpointValue = getBreakpointValue(breakpoint);
+//     if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) {
+//       biggestBreakpointValue = breakpointValue;
+//       currentBreakpoint = breakpoint;
+//     }
+//   }
+//   return currentBreakpoint;
+// };
 
 export default function Nav({ navVisible, setNavVisible }) {
   const [isHovering, setIsHovering] = useState(false);
@@ -146,9 +146,23 @@ export default function Nav({ navVisible, setNavVisible }) {
     setNavVisible((prev) => !prev);
   };
 
+  // useEffect(() => {
+  //   let currentBreakpoint = getCurrentBreakpoint();
+  //   if (currentBreakpoint === 'sm') {
+  //     setNavVisible(false);
+  //   } else {
+  //     setNavVisible(true);
+  //   }
+  // }, [conversationId, setNavVisible]);
+
+  const isMobile = () => {
+    const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
+    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+    return mobileRegex.test(userAgent);
+  };
+
   useEffect(() => {
-    let currentBreakpoint = getCurrentBreakpoint();
-    if (currentBreakpoint === 'sm') {
+    if (isMobile()) {
       setNavVisible(false);
     } else {
       setNavVisible(true);

client/src/mobile.css

@@ -45,7 +45,7 @@
 
 .nav {
   position: fixed;
-  z-index: 999;
+  z-index: 40;
   left: calc(-100%);
   top: 0;
   width: calc(100% - 60px);
@@ -74,7 +74,7 @@
   }
   .nav-mask {
     position: fixed;
-    z-index: 996;
+    z-index: 35;
     left: 0;
     right: 0;
     top: 0;

e2e/specs/landing.spec.js

@@ -1,9 +1,18 @@
 import { expect, test } from '@playwright/test';
 
-test('landing page', async ({ page }) => {
-  await page.goto('http://localhost:3080/');
-  // expect (await page.title()).toBe('ChatGPT Clone');
-  expect(await page.textContent('#landing-title')).toBe(
-    import.meta.env.VITE_APP_TITLE || 'ChatGPT Clone'
-  );
+test.describe('Landing suite', () => {
+  let myBrowser;
+
+  test.beforeEach(async ({ browser }) => {
+    myBrowser = await browser.newContext({
+      storageState: 'e2e/auth.json',
+    });
+  });
+
+  test('Landing title', async () => {
+    const page = await myBrowser.newPage();
+    await page.goto('http://localhost:3080/');
+    const pageTitle = await page.textContent('#landing-title')
+    expect(pageTitle.length).toBeGreaterThan(0);
+  });
 });

e2e/specs/login.spec.js

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+
+test('landing page', async ({ page }) => {
+  await page.goto('http://localhost:3080/');
+  const pageTitle = await page.$eval('h1', pageTitle => pageTitle.textContent);
+  console.log('pageTitle', pageTitle);
+  expect(pageTitle.length).toBeGreaterThan(0);
+  expect(pageTitle).toEqual('Welcome back');
+});

package.json

@@ -15,6 +15,7 @@
     "e2e:update": "playwright test --config=e2e/playwright.config.js --update-snapshots",
     "e2e:debug": "cross-env PWDEBUG=1 playwright test --config=e2e/playwright.config.js",
     "e2e:report": "npx playwright show-report e2e/playwright-report",
+    "e2e:auth": "npx playwright codegen --save-storage=e2e/auth.json http://localhost:3080/",
     "prepare": "husky install",
     "format": "prettier-eslint --write \"{,!(node_modules)/**/}*.{js,jsx,ts,tsx}\""
   },