Merge pull request #131 from replayio/PRO-1435-Hide-the-arboretum

Hide arboretum by default and update double quotes to single

app/components/chat/BaseChat/BaseChat.tsx

@@ -2,7 +2,7 @@
  * @ts-nocheck
  * Preventing TS checks with files presented in the video for a better presentation.
  */
-import React, { type RefCallback, useCallback } from 'react';
+import React, { type RefCallback, useCallback, useState } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Menu } from '~/components/sidebar/Menu.client';
 import { Workbench } from '~/components/workbench/Workbench.client';
@@ -11,14 +11,14 @@ import { Messages } from '~/components/chat/Messages.client';
 import { type Message } from '~/lib/persistence/message';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { IntroSection } from '~/components/chat/BaseChat/components/IntroSection/IntroSection';
-import { SearchInput } from '~/components/chat/SearchInput/SearchInput';
 import { ChatPromptContainer } from '~/components/chat/BaseChat/components/ChatPromptContainer/ChatPromptContainer';
 import { useSpeechRecognition } from '~/hooks/useSpeechRecognition';
 import styles from './BaseChat.module.scss';
 import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
-import { ExampleLibraryApps } from '~/components/app-library/ExampleLibraryApps';
 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,8 +74,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
-    const [rejectFormOpen, setRejectFormOpen] = React.useState(false);
-    const [filterText, setFilterText] = React.useState('');
+    const [rejectFormOpen, setRejectFormOpen] = useState(false);
+    const { isArboretumVisible } = useArboretumVisibility();
 
     const onTranscriptChange = useCallback(
       (transcript: string) => {
@@ -199,14 +199,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   }
                   handleSendMessage(event, messageInput);
                 })}
-                <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>
-                <div className="text-bolt-elements-textSecondary text-center max-w-chat mx-auto">
-                  Browse these auto-generated apps for a place to start
-                </div>
-                <SearchInput onSearch={setFilterText} />
-                <ExampleLibraryApps filterText={filterText} />
+                {isArboretumVisible && <Arboretum />}
               </>
             )}
           </div>

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

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+import { SearchInput } from '~/components/chat/SearchInput/SearchInput';
+import { ExampleLibraryApps } from '~/components/app-library/ExampleLibraryApps';
+
+export const Arboretum = () => {
+  const [filterText, setFilterText] = useState('');
+
+  return (
+    <div className="relative flex flex-col items-center">
+      <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>
+      <div className="text-bolt-elements-textSecondary text-center max-w-chat mx-auto">
+        Browse these auto-generated apps for a place to start
+      </div>
+      <SearchInput onSearch={setFilterText} />
+      <ExampleLibraryApps filterText={filterText} />
+    </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 { isArboretumVisible, 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}
+                >
+                  {isArboretumVisible ? 'Hide Arboretum' : 'Show 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),
+  };
+}