style improvements for buttons

src/components/MainPage.tsx

@@ -2,8 +2,7 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable react/jsx-no-useless-fragment */
 /* eslint-disable no-nested-ternary */
-import React, { useState } from 'react'
-import { X, Maximize2 } from 'lucide-react'
+import React from 'react'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 
 import '../styles/global.css'
@@ -19,21 +18,8 @@ import { ChatProvider, useChatContext } from '@/contexts/ChatContext'
 import { FileProvider, useFileContext } from '@/contexts/FileContext'
 import ModalProvider from '@/contexts/ModalContext'
 import CommonModals from './Common/CommonModals'
-import useAppShortcuts from './shortcuts/use-shortcut'
-
-const WindowControls: React.FC<{
-  onClose: () => void
-  onMaximize: () => void
-}> = ({ onClose, onMaximize }) => (
-  <div className="absolute right-2 top-2 z-10 flex gap-2">
-    <button onClick={onMaximize} className="rounded p-1 transition-colors hover:bg-neutral-700/50" title="Maximize">
-      <Maximize2 className="size-4 text-neutral-400" />
-    </button>
-    <button onClick={onClose} className="rounded p-1 transition-colors hover:bg-neutral-700/50" title="Close">
-      <X className="size-4 text-neutral-400" />
-    </button>
-  </div>
-)
+import useAppShortcuts from '../lib/shortcuts/use-shortcut'
+import WindowControls from './ui/window-controls'
 
 // Moved MainContent outside as a separate component
 const MainContent: React.FC = () => {
@@ -60,7 +46,6 @@ const MainContent: React.FC = () => {
 }
 
 const MainPageContent: React.FC = () => {
-  const [showSimilarFiles, setShowSimilarFiles] = useState(false)
   const { currentlyOpenFilePath } = useFileContext()
   const { showChatbot, setShowChatbot } = useChatContext()
   const { setShowEditor, showEditor } = useContentContext()
@@ -70,7 +55,7 @@ const MainPageContent: React.FC = () => {
 
   return (
     <div className="relative flex h-screen flex-col overflow-hidden">
-      <TitleBar similarFilesOpen={showSimilarFiles} toggleSimilarFiles={() => setShowSimilarFiles(!showSimilarFiles)} />
+      <TitleBar />
       <div className="flex min-h-0 flex-1">
         <div className="border-y-0 border-l-0 border-r-[0.001px] border-solid border-neutral-700 pt-2.5">
           <IconsSidebar getShortcutDescription={getShortcutDescription} />

src/components/TitleBar/TitleBar.tsx

@@ -1,16 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { PiSidebar, PiSidebarFill } from 'react-icons/pi'
+import { PiSidebarFill } from 'react-icons/pi'
 import FileHistoryNavigator from './NavigationButtons'
 import ExternalLink from '../Common/ExternalLink'
+import { useChatContext } from '@/contexts/ChatContext'
 
 export const titleBarHeight = '30px'
 
-interface TitleBarProps {
-  similarFilesOpen: boolean
-  toggleSimilarFiles: () => void
-}
-
-const TitleBar: React.FC<TitleBarProps> = ({ similarFilesOpen, toggleSimilarFiles }) => {
+const TitleBar: React.FC = () => {
+  const { setShowChatbot } = useChatContext()
   const [platform, setPlatform] = useState('')
 
   useEffect(() => {
@@ -35,22 +32,12 @@ const TitleBar: React.FC<TitleBarProps> = ({ similarFilesOpen, toggleSimilarFile
         <ExternalLink href="https://forms.gle/8H4GtEcE6MBnNAUa7" className="decoration-gray-200">
           <span className="mr-2 cursor-pointer text-sm text-gray-200 hover:text-gray-300">Feedback</span>
         </ExternalLink>
-        {similarFilesOpen ? (
-          <PiSidebarFill
-            className="electron-no-drag mt-[0.2rem] -scale-x-100 cursor-pointer text-gray-100"
-            size={22}
-            title="Hide Similar Files"
-            onClick={toggleSimilarFiles}
-          />
-        ) : (
-          <PiSidebar
-            id="titleBarSimilarFiles"
-            className="electron-no-drag mt-[0.2rem] -scale-x-100 cursor-pointer text-gray-100"
-            size={22}
-            onClick={toggleSimilarFiles}
-            title="Show Similar Files"
-          />
-        )}
+        <PiSidebarFill
+          className="electron-no-drag mt-[0.2rem] -scale-x-100 cursor-pointer text-gray-100"
+          size={22}
+          title="Hide Similar Files"
+          onClick={() => setShowChatbot((show) => !show)}
+        />
       </div>
     </div>
   )

src/components/ui/window-controls.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/button-has-type */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+/* eslint-disable react/react-in-jsx-scope */
+import { X, Maximize2 } from 'lucide-react'
+
+const WindowControls: React.FC<{
+  onClose: () => void
+  onMaximize: () => void
+}> = ({ onClose, onMaximize }) => (
+  <div className="group absolute right-2 top-2 z-10 transition-opacity hover:opacity-100">
+    <div className="flex">
+      <button onClick={onMaximize} className="cursor-pointer bg-transparent p-1.5 transition-colors" title="Maximize">
+        <Maximize2 className="size-3 text-neutral-400 hover:text-neutral-300" />
+      </button>
+      <button onClick={onClose} className="cursor-pointer bg-transparent p-1.5 transition-colors" title="Close">
+        <X className="size-3 text-neutral-400 hover:text-neutral-300" />
+      </button>
+    </div>
+  </div>
+)
+
+export default WindowControls

src/contexts/ChatContext.tsx

@@ -8,7 +8,7 @@ interface ChatContextType {
   sidebarShowing: SidebarAbleToShow
   setSidebarShowing: (option: SidebarAbleToShow) => void
   showChatbot: boolean
-  setShowChatbot: (show: boolean) => void
+  setShowChatbot: React.Dispatch<React.SetStateAction<boolean>>
   allChatsMetadata: ChatMetadata[]
   deleteChat: (chatID: string | undefined) => Promise<void>
   saveChat: (updatedChat: Chat) => Promise<void>