Move button to toggle arboretum to settings menu

app/components/chat/BaseChat/BaseChat.tsx

@@ -18,6 +18,7 @@ import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
 import type { RejectChangeData } from '~/components/chat/ApproveChange';
 import { type MessageInputProps } from '~/components/chat/MessageInput/MessageInput';
 import { Arboretum } from './components/Arboretum/Arboretum';
+import { useArboretumVisibility } from '~/lib/stores/settings';
 
 export const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -74,7 +75,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [rejectFormOpen, setRejectFormOpen] = useState(false);
-    const [showArboretum, setShowArboretum] = useState(false);
+    const { isArboretumVisible } = useArboretumVisibility();
 
     const onTranscriptChange = useCallback(
       (transcript: string) => {
@@ -198,16 +199,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   }
                   handleSendMessage(event, messageInput);
                 })}
-                {showArboretum ? (
-                  <Arboretum onHide={() => setShowArboretum(false)} />
-                ) : (
-                  <button
-                    className="text-bolt-elements-textPrimary text-center mx-auto bg-transparent p-2 rounded-md mt-10"
-                    onClick={() => setShowArboretum(true)}
-                  >
-                    Show Arboretum
-                  </button>
+                {isArboretumVisible && (
+                  <Arboretum />
                 )}
+                
               </>
             )}
           </div>

app/components/chat/BaseChat/components/Arboretum/Arboretum.tsx

@@ -2,34 +2,11 @@ import { useState } from 'react';
 import { SearchInput } from '~/components/chat/SearchInput/SearchInput';
 import { ExampleLibraryApps } from '~/components/app-library/ExampleLibraryApps';
 
-interface ArboretumProps {
-  onHide: () => void;
-}
-
-export const Arboretum: React.FC<ArboretumProps> = ({ onHide }) => {
+export const Arboretum = () => {
   const [filterText, setFilterText] = useState('');
 
   return (
     <div className="relative flex flex-col items-center">
-      <button
-        onClick={onHide}
-        className="absolute right-4 top-30 p-2 rounded-lg bg-transparent border border-bolt-elements-textSecondary hover:bg-bolt-elements-background-depth-2 transition-colors duration-200 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
-        aria-label="Hide Arboretum"
-      >
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-      </button>
       <div className="text-2xl lg:text-4xl font-bold text-bolt-elements-textPrimary mt-8 mb-4 animate-fade-in text-center max-w-chat mx-auto">
         Arboretum
       </div>

app/components/settings/SettingsWindow.tsx

@@ -6,6 +6,7 @@ import { DialogTitle, dialogVariants, dialogBackdropVariants } from '~/component
 import { IconButton } from '~/components/ui/IconButton';
 import styles from './Settings.module.scss';
 import ConnectionsTab from './connections/ConnectionsTab';
+import { useArboretumVisibility } from '~/lib/stores/settings';
 
 interface SettingsProps {
   open: boolean;
@@ -16,6 +17,7 @@ type TabType = 'data' | 'apiKeys' | 'features' | 'debug' | 'event-logs' | 'conne
 
 export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
   const [activeTab, setActiveTab] = useState<TabType>('data');
+  const { toggleArboretum } = useArboretumVisibility();
 
   const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
     { id: 'connection', label: 'Connection', icon: 'i-ph:link', component: <ConnectionsTab /> },
@@ -61,6 +63,12 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
                     {tab.label}
                   </button>
                 ))}
+                <button
+                  className="text-bolt-elements-textPrimary text-center mx-auto p-2 rounded-md mt-10"
+                  onClick={toggleArboretum}
+                >
+                  Toggle Arboretum
+                </button>
               </div>
 
               <div className="flex-1 flex flex-col p-8 pt-10 bg-bolt-elements-background-depth-2">

app/lib/stores/settings.ts

@@ -0,0 +1,15 @@
+import { atom } from 'nanostores';
+import { useStore } from '@nanostores/react';
+
+// Create the atom for arboretum visibility
+export const showArboretumStore = atom<boolean>(false);
+
+// Create a hook for easier usage in React components
+export function useArboretumVisibility() {
+  const isVisible = useStore(showArboretumStore);
+  
+  return {
+    isArboretumVisible: isVisible,
+    toggleArboretum: () => showArboretumStore.set(!isVisible)
+  };
+}