Fix ESLint issues

app/components/sidebar/Menu.client.tsx

@@ -11,12 +11,13 @@ import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
 import { binDates } from './date-binning';
 import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
+import { classNames } from '~/utils/classNames';
 
 const menuVariants = {
   closed: {
     opacity: 0,
     visibility: 'hidden',
-    left: '-150px',
+    left: '-340px',
     transition: {
       duration: 0.2,
       ease: cubicEasingFn,
@@ -41,15 +42,18 @@ function CurrentDateTime() {
   useEffect(() => {
     const timer = setInterval(() => {
       setDateTime(new Date());
-    }, 60000); // Update every minute
+    }, 60000);
 
     return () => clearInterval(timer);
   }, []);
 
   return (
-    <div className="flex items-center gap-2 px-4 py-3 font-bold text-gray-700 dark:text-gray-300 border-b border-bolt-elements-borderColor">
-      <div className="h-4 w-4 i-ph:clock-thin" />
-      {dateTime.toLocaleDateString()} {dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+    <div className="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800/50">
+      <div className="h-4 w-4 i-lucide:clock opacity-80" />
+      <div className="flex gap-2">
+        <span>{dateTime.toLocaleDateString()}</span>
+        <span>{dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+      </div>
     </div>
   );
 }
@@ -111,6 +115,10 @@ export const Menu = () => {
     const exitThreshold = 40;
 
     function onMouseMove(event: MouseEvent) {
+      if (isSettingsOpen) {
+        return;
+      }
+
       if (event.pageX < enterThreshold) {
         setOpen(true);
       }
@@ -125,7 +133,7 @@ export const Menu = () => {
     return () => {
       window.removeEventListener('mousemove', onMouseMove);
     };
-  }, []);
+  }, [isSettingsOpen]);
 
   const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
     event.preventDefault();
@@ -137,96 +145,122 @@ export const Menu = () => {
     loadEntries(); // Reload the list after duplication
   };
 
+  const handleSettingsClick = () => {
+    setIsSettingsOpen(true);
+    setOpen(false);
+  };
+
+  const handleSettingsClose = () => {
+    setIsSettingsOpen(false);
+  };
+
   return (
-    <motion.div
-      ref={menuRef}
-      initial="closed"
-      animate={open ? 'open' : 'closed'}
-      variants={menuVariants}
-      className="flex selection-accent flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
-    >
-      <div className="h-[60px]" /> {/* Spacer for top margin */}
-      <CurrentDateTime />
-      <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
-        <div className="p-4 select-none">
-          <a
-            href="/"
-            className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme mb-4"
-          >
-            <span className="inline-block i-bolt:chat scale-110" />
-            Start new chat
-          </a>
-          <div className="relative w-full">
-            <input
-              className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
-              type="search"
-              placeholder="Search"
-              onChange={handleSearchChange}
-              aria-label="Search chats"
-            />
+    <>
+      <motion.div
+        ref={menuRef}
+        initial="closed"
+        animate={open ? 'open' : 'closed'}
+        variants={menuVariants}
+        style={{ width: '340px' }}
+        className={classNames(
+          'flex selection-accent flex-col side-menu fixed top-0 h-full',
+          'bg-white dark:bg-gray-950 border-r border-gray-100 dark:border-gray-800/50',
+          'shadow-sm text-sm',
+          isSettingsOpen ? 'z-40' : 'z-sidebar',
+        )}
+      >
+        <div className="h-12 flex items-center px-4 border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/50"></div>
+        <CurrentDateTime />
+        <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
+          <div className="p-4 space-y-3">
+            <a
+              href="/"
+              className="flex gap-2 items-center bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-500/20 rounded-lg px-4 py-2 transition-colors"
+            >
+              <span className="inline-block i-lucide:message-square h-4 w-4" />
+              <span className="text-sm font-medium">Start new chat</span>
+            </a>
+            <div className="relative w-full">
+              <div className="absolute left-3 top-1/2 -translate-y-1/2">
+                <span className="i-lucide:search h-4 w-4 text-gray-400 dark:text-gray-500" />
+              </div>
+              <input
+                className="w-full bg-gray-50 dark:bg-gray-900 relative pl-9 pr-3 py-2 rounded-lg focus:outline-none focus:ring-1 focus:ring-purple-500/50 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-500 border border-gray-200 dark:border-gray-800"
+                type="search"
+                placeholder="Search chats..."
+                onChange={handleSearchChange}
+                aria-label="Search chats"
+              />
+            </div>
+          </div>
+          <div className="text-gray-600 dark:text-gray-400 text-sm font-medium px-4 py-2">Your Chats</div>
+          <div className="flex-1 overflow-auto px-3 pb-3">
+            {filteredList.length === 0 && (
+              <div className="px-4 text-gray-500 dark:text-gray-400 text-sm">
+                {list.length === 0 ? 'No previous conversations' : 'No matches found'}
+              </div>
+            )}
+            <DialogRoot open={dialogContent !== null}>
+              {binDates(filteredList).map(({ category, items }) => (
+                <div key={category} className="mt-2 first:mt-0 space-y-1">
+                  <div className="text-xs font-medium text-gray-500 dark:text-gray-400 sticky top-0 z-1 bg-white dark:bg-gray-950 px-4 py-1">
+                    {category}
+                  </div>
+                  <div className="space-y-0.5 pr-1">
+                    {items.map((item) => (
+                      <HistoryItem
+                        key={item.id}
+                        item={item}
+                        exportChat={exportChat}
+                        onDelete={(event) => handleDeleteClick(event, item)}
+                        onDuplicate={() => handleDuplicate(item.id)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+              <Dialog onBackdrop={closeDialog} onClose={closeDialog}>
+                {dialogContent?.type === 'delete' && (
+                  <>
+                    <div className="p-6 bg-white dark:bg-gray-950">
+                      <DialogTitle className="text-gray-900 dark:text-white">Delete Chat?</DialogTitle>
+                      <DialogDescription className="mt-2 text-gray-600 dark:text-gray-400">
+                        <p>
+                          You are about to delete{' '}
+                          <span className="font-medium text-gray-900 dark:text-white">
+                            {dialogContent.item.description}
+                          </span>
+                        </p>
+                        <p className="mt-2">Are you sure you want to delete this chat?</p>
+                      </DialogDescription>
+                    </div>
+                    <div className="flex justify-end gap-3 px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
+                      <DialogButton type="secondary" onClick={closeDialog}>
+                        Cancel
+                      </DialogButton>
+                      <DialogButton
+                        type="danger"
+                        onClick={(event) => {
+                          deleteItem(event, dialogContent.item);
+                          closeDialog();
+                        }}
+                      >
+                        Delete
+                      </DialogButton>
+                    </div>
+                  </>
+                )}
+              </Dialog>
+            </DialogRoot>
+          </div>
+          <div className="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 px-4 py-3">
+            <SettingsButton onClick={handleSettingsClick} />
+            <ThemeSwitch />
           </div>
         </div>
-        <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
-        <div className="flex-1 overflow-auto pl-4 pr-5 pb-5">
-          {filteredList.length === 0 && (
-            <div className="pl-2 text-bolt-elements-textTertiary">
-              {list.length === 0 ? 'No previous conversations' : 'No matches found'}
-            </div>
-          )}
-          <DialogRoot open={dialogContent !== null}>
-            {binDates(filteredList).map(({ category, items }) => (
-              <div key={category} className="mt-4 first:mt-0 space-y-1">
-                <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
-                  {category}
-                </div>
-                {items.map((item) => (
-                  <HistoryItem
-                    key={item.id}
-                    item={item}
-                    exportChat={exportChat}
-                    onDelete={(event) => handleDeleteClick(event, item)}
-                    onDuplicate={() => handleDuplicate(item.id)}
-                  />
-                ))}
-              </div>
-            ))}
-            <Dialog onBackdrop={closeDialog} onClose={closeDialog}>
-              {dialogContent?.type === 'delete' && (
-                <>
-                  <DialogTitle>Delete Chat?</DialogTitle>
-                  <DialogDescription asChild>
-                    <div>
-                      <p>
-                        You are about to delete <strong>{dialogContent.item.description}</strong>.
-                      </p>
-                      <p className="mt-1">Are you sure you want to delete this chat?</p>
-                    </div>
-                  </DialogDescription>
-                  <div className="px-5 pb-4 bg-bolt-elements-background-depth-2 flex gap-2 justify-end">
-                    <DialogButton type="secondary" onClick={closeDialog}>
-                      Cancel
-                    </DialogButton>
-                    <DialogButton
-                      type="danger"
-                      onClick={(event) => {
-                        deleteItem(event, dialogContent.item);
-                        closeDialog();
-                      }}
-                    >
-                      Delete
-                    </DialogButton>
-                  </div>
-                </>
-              )}
-            </Dialog>
-          </DialogRoot>
-        </div>
-        <div className="flex items-center justify-between border-t border-bolt-elements-borderColor p-4">
-          <SettingsButton onClick={() => setIsSettingsOpen(true)} />
-          <ThemeSwitch />
-        </div>
-      </div>
-      <UsersWindow open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
-    </motion.div>
+      </motion.div>
+
+      <UsersWindow open={isSettingsOpen} onClose={handleSettingsClose} />
+    </>
   );
 };