style: update Mobile Nav with new ChatGPT styling; fix: New Chat on Mobile will correctly reset conversation state (#1255)

client/src/components/Nav/MobileNav.tsx

@@ -1,37 +1,41 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import { useLocalize, useConversation } from '~/hooks';
+import type { Dispatch, SetStateAction } from 'react';
+import { useLocalize, useNewConvo } from '~/hooks';
 import store from '~/store';
 
-export default function MobileNav({ setNavVisible }) {
-  const conversation = useRecoilValue(store.conversation);
-  const { newConversation } = useConversation();
-  const { title = 'New Chat' } = conversation || {};
+export default function MobileNav({
+  setNavVisible,
+}: {
+  setNavVisible: Dispatch<SetStateAction<boolean>>;
+}) {
   const localize = useLocalize();
+  const { newConversation } = useNewConvo(0);
+  const conversation = useRecoilValue(store.conversationByIndex(0));
+  const { title = 'New Chat' } = conversation || {};
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
+    <div className="text-token-primary border-token-border-medium bg-token-surface-primary dark:bg-token-surface-secondary sticky top-0 z-10 flex min-h-[40px] items-center border-b pl-1 dark:text-white md:hidden">
       <button
         type="button"
-        className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-0 focus:ring-inset focus:ring-white dark:hover:text-white"
+        className="absolute -ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
         onClick={() => setNavVisible((prev) => !prev)}
       >
         <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
         <svg
-          stroke="currentColor"
-          fill="none"
-          strokeWidth="1.5"
+          width="24"
+          height="24"
           viewBox="0 0 24 24"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="h-6 w-6"
-          height="1em"
-          width="1em"
+          fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          className="icon-md"
         >
-          <line x1="3" y1="12" x2="21" y2="12" />
-          <line x1="3" y1="6" x2="21" y2="6" />
-          <line x1="3" y1="18" x2="21" y2="18" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 8C3 7.44772 3.44772 7 4 7H20C20.5523 7 21 7.44772 21 8C21 8.55228 20.5523 9 20 9H4C3.44772 9 3 8.55228 3 8ZM3 16C3 15.4477 3.44772 15 4 15H14C14.5523 15 15 15.4477 15 16C15 16.5523 14.5523 17 14 17H4C3.44772 17 3 16.5523 3 16Z"
+            fill="currentColor"
+          />
         </svg>
       </button>
       <h1 className="flex-1 text-center text-base font-normal">
@@ -39,19 +43,19 @@ export default function MobileNav({ setNavVisible }) {
       </h1>
       <button type="button" className="px-3" onClick={() => newConversation()}>
         <svg
-          stroke="currentColor"
-          fill="none"
-          strokeWidth="1.5"
+          width="24"
+          height="24"
           viewBox="0 0 24 24"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="h-6 w-6"
-          height="1em"
-          width="1em"
+          fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          className="icon-md"
         >
-          <line x1="12" y1="5" x2="12" y2="19" />
-          <line x1="5" y1="12" x2="19" y2="12" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.7929 2.79289C18.0118 1.57394 19.9882 1.57394 21.2071 2.79289C22.4261 4.01184 22.4261 5.98815 21.2071 7.20711L12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16H9C8.44772 16 8 15.5523 8 15V12C8 11.7348 8.10536 11.4804 8.29289 11.2929L16.7929 2.79289ZM19.7929 4.20711C19.355 3.7692 18.645 3.7692 18.2071 4.2071L10 12.4142V14H11.5858L19.7929 5.79289C20.2308 5.35499 20.2308 4.64501 19.7929 4.20711ZM6 5C5.44772 5 5 5.44771 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34314 4.34315 3 6 3H10C10.5523 3 11 3.44771 11 4C11 4.55228 10.5523 5 10 5H6Z"
+            fill="currentColor"
+          />
         </svg>
       </button>
     </div>

client/src/routes/Root.tsx

@@ -72,8 +72,8 @@ export default function Root() {
     <>
       <div className="flex h-screen">
         <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
-        <div className="flex h-full w-full flex-1 flex-col bg-gray-50">
-          <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-10 dark:bg-gray-800 md:pt-0">
+        <div className="relative z-0 flex h-full w-full overflow-hidden">
+          <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
             <MobileNav setNavVisible={setNavVisible} />
             <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
           </div>