feat: implement light and dark theme (#30)

packages/bolt/app/components/sidebar/Menu.client.tsx

@@ -2,6 +2,7 @@ import { motion, type Variants } from 'framer-motion';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 import { IconButton } from '~/components/ui/IconButton';
+import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
 import { db, getAll, type ChatHistory } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
 import { HistoryItem } from './HistoryItem';
@@ -10,6 +11,7 @@ import { binDates } from './date-binning';
 const menuVariants = {
   closed: {
     opacity: 0,
+    visibility: 'hidden',
     left: '-150px',
     transition: {
       duration: 0.2,
@@ -18,6 +20,7 @@ const menuVariants = {
   },
   open: {
     opacity: 1,
+    visibility: 'initial',
     left: 0,
     transition: {
       duration: 0.2,
@@ -47,21 +50,22 @@ export function Menu() {
   }, [open]);
 
   useEffect(() => {
+    const enterThreshold = 80;
+    const exitThreshold = 40;
+
     function onMouseMove(event: MouseEvent) {
-      if (event.pageX < 80) {
+      if (event.pageX < enterThreshold) {
         setOpen(true);
       }
+
+      if (menuRef.current && event.clientX > menuRef.current.getBoundingClientRect().right + exitThreshold) {
+        setOpen(false);
+      }
     }
 
-    function onMouseLeave(_event: MouseEvent) {
-      setOpen(false);
-    }
-
-    menuRef.current?.addEventListener('mouseleave', onMouseLeave);
     window.addEventListener('mousemove', onMouseMove);
 
     return () => {
-      menuRef.current?.removeEventListener('mouseleave', onMouseLeave);
       window.removeEventListener('mousemove', onMouseMove);
     };
   }, []);
@@ -72,34 +76,34 @@ export function Menu() {
       initial="closed"
       animate={open ? 'open' : 'closed'}
       variants={menuVariants}
-      className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-white border-r rounded-r-3xl border-gray-200 z-max shadow-xl text-sm"
+      className="flex 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="flex items-center p-4 h-[var(--header-height)]">
-        <img src="/logo_text.svg" width="60px" alt="Bolt Logo" />
-      </div>
+      <div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
       <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
         <div className="p-4">
           <a
             href="/"
-            className="flex gap-2 items-center text-accent-600 rounded-md bg-accent-600/12 hover:bg-accent-600/15 p-2 font-medium"
+            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"
           >
-            <span className="inline-block i-blitz:chat scale-110" />
+            <span className="inline-block i-bolt:chat scale-110" />
             Start new chat
           </a>
         </div>
-        <div className="font-semibold pl-6 pr-5 my-2">Your Chats</div>
+        <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
         <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
-          {list.length === 0 && <div className="pl-2 text-gray">No previous conversations</div>}
+          {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
           {binDates(list).map(({ category, items }) => (
             <div key={category} className="mt-4 first:mt-0 space-y-1">
-              <div className="text-gray sticky top-0 z-20 bg-white pl-2 pt-2 pb-1">{category}</div>
+              <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} loadEntries={loadEntries} />
               ))}
             </div>
           ))}
         </div>
-        <div className="flex items-center border-t p-4">
+        <div className="flex items-center border-t border-bolt-elements-borderColor p-4">
           <a href="/logout">
             <IconButton className="p-1.5 gap-1.5">
               <>
@@ -107,6 +111,7 @@ export function Menu() {
               </>
             </IconButton>
           </a>
+          <ThemeSwitch className="ml-auto" />
         </div>
       </div>
     </motion.div>