feat: move configure goosehints to the MoreMenu (#1474)

ui/desktop/.goosehints

@@ -81,3 +81,5 @@ The Goose Desktop App is an Electron application built with TypeScript, React, a
 5. Test your changes in both development and production builds
 
 By following these instructions, you should be able to navigate the codebase, understand its structure, and start contributing new features or modifications.
+
+

ui/desktop/src/App.tsx

@@ -10,6 +10,7 @@ import ErrorScreen from './components/ErrorScreen';
 import { ConfirmationModal } from './components/ui/ConfirmationModal';
 import { ToastContainer } from 'react-toastify';
 import { extractExtensionName } from './components/settings/extensions/utils';
+import { GoosehintsModal } from './components/GoosehintsModal';
 
 import WelcomeView from './components/WelcomeView';
 import ChatView from './components/ChatView';
@@ -49,6 +50,7 @@ export default function App() {
     view: 'welcome',
     viewOptions: {},
   });
+  const [isGoosehintsModalOpen, setIsGoosehintsModalOpen] = useState(false);
 
   const { switchModel } = useModel();
   const { addRecentModel } = useRecentModels();
@@ -248,10 +250,22 @@ export default function App() {
           {view === 'alphaConfigureProviders' && (
             <ProviderSettings onClose={() => setView('chat')} />
           )}
-          {view === 'chat' && <ChatView setView={setView} viewOptions={viewOptions} />}
+          {view === 'chat' && (
+            <ChatView
+              setView={setView}
+              viewOptions={viewOptions}
+              setIsGoosehintsModalOpen={setIsGoosehintsModalOpen}
+            />
+          )}
           {view === 'sessions' && <SessionsView setView={setView} />}
         </div>
       </div>
+      {isGoosehintsModalOpen && (
+        <GoosehintsModal
+          directory={window.appConfig.get('GOOSE_WORKING_DIR')}
+          setIsGoosehintsModalOpen={setIsGoosehintsModalOpen}
+        />
+      )}
     </>
   );
 }

ui/desktop/src/components/BottomMenu.tsx

@@ -5,7 +5,6 @@ import { Sliders } from 'lucide-react';
 import { ModelRadioList } from './settings/models/ModelRadioList';
 import { Document, ChevronUp, ChevronDown } from './icons';
 import type { View } from '../ChatWindow';
-import { ConfigureGooseHints } from './ConfigureGooseHints';
 
 export default function BottomMenu({
   hasMessages,
@@ -77,10 +76,6 @@ export default function BottomMenu({
         <ChevronUp className="ml-1" />
       </span>
 
-      <div className="ml-4">
-        <ConfigureGooseHints directory={window.appConfig.get('GOOSE_WORKING_DIR')} />
-      </div>
-
       {/* Model Selector Dropdown - Only in development */}
       <div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>
         <div

ui/desktop/src/components/ChatView.tsx

@@ -26,9 +26,11 @@ export interface ChatType {
 export default function ChatView({
   setView,
   viewOptions,
+  setIsGoosehintsModalOpen,
 }: {
   setView: (view: View, viewOptions?: Record<any, any>) => void;
   viewOptions?: Record<any, any>;
+  setIsGoosehintsModalOpen: (isOpen: boolean) => void;
 }) {
   // Check if we're resuming a session
   const resumedSession = viewOptions?.resumedSession;
@@ -228,7 +230,7 @@ export default function ChatView({
   return (
     <div className="flex flex-col w-full h-screen items-center justify-center">
       <div className="relative flex items-center h-[36px] w-full bg-bgSubtle border-b border-borderSubtle">
-        <MoreMenu setView={setView} />
+        <MoreMenu setView={setView} setIsGoosehintsModalOpen={setIsGoosehintsModalOpen} />
       </div>
       <Card className="flex flex-col flex-1 rounded-none h-[calc(100vh-95px)] w-full bg-bgApp mt-0 border-none relative">
         {messages.length === 0 ? (

ui/desktop/src/components/GoosehintsModal.tsx

@@ -4,7 +4,7 @@ import { Button } from './ui/button';
 import { Check } from './icons';
 
 const Modal = ({ children }) => (
-  <div className="fixed inset-0 bg-black/20 dark:bg-white/20 backdrop-blur-sm transition-colors animate-[fadein_200ms_ease-in_forwards]">
+  <div className="fixed inset-0 bg-black/20 dark:bg-white/20 backdrop-blur-sm transition-colors animate-[fadein_200ms_ease-in_forwards] z-[1000]">
     <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] bg-bgApp rounded-xl overflow-hidden shadow-none px-8 pt-[24px] pb-0">
       <div className="flex flex-col space-y-8 text-base text-textStandard h-full">{children}</div>
     </Card>
@@ -87,7 +87,8 @@ type GoosehintsModalProps = {
   directory: string;
   setIsGoosehintsModalOpen: (isOpen: boolean) => void;
 };
-const GoosehintsModal = ({ directory, setIsGoosehintsModalOpen }: GoosehintsModalProps) => {
+
+export const GoosehintsModal = ({ directory, setIsGoosehintsModalOpen }: GoosehintsModalProps) => {
   const goosehintsFilePath = `${directory}/.goosehints`;
   const [goosehintsFile, setGoosehintsFile] = useState<string>(null);
   const [goosehintsFileFound, setGoosehintsFileFound] = useState<boolean>(false);
@@ -125,7 +126,7 @@ const GoosehintsModal = ({ directory, setIsGoosehintsModalOpen }: GoosehintsModa
             <textarea
               defaultValue={goosehintsFile}
               autoFocus
-              className="w-full flex-1 border rounded-md min-h-40 p-2 text-sm resize-none"
+              className="w-full flex-1 border rounded-md min-h-40 p-2 text-sm resize-none bg-bgApp text-textStandard border-borderStandard focus:outline-none"
               onChange={(event) => setGoosehintsFile(event.target.value)}
             />
           </div>
@@ -135,24 +136,3 @@ const GoosehintsModal = ({ directory, setIsGoosehintsModalOpen }: GoosehintsModa
     </Modal>
   );
 };
-
-export const ConfigureGooseHints = ({ directory }: { directory: string }) => {
-  const [isGooseHintsModalOpen, setIsGoosehintsModalOpen] = useState<boolean>(false);
-  return (
-    <span>
-      <div
-        className="cursor-pointer ml-4 hover:opacity-75"
-        onClick={() => setIsGoosehintsModalOpen(true)}
-      >
-        Configure .goosehints
-      </div>
-
-      {isGooseHintsModalOpen ? (
-        <GoosehintsModal
-          directory={directory}
-          setIsGoosehintsModalOpen={setIsGoosehintsModalOpen}
-        />
-      ) : null}
-    </span>
-  );
-};

ui/desktop/src/components/MoreMenu.tsx

@@ -2,13 +2,20 @@ import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-u
 import React, { useEffect, useState } from 'react';
 import { More } from './icons';
 import { View } from '../App';
+
 interface VersionInfo {
   current_version: string;
   available_versions: string[];
 }
 
 // Accept setView as a prop from the parent (e.g. Chat)
-export default function MoreMenu({ setView }: { setView: (view: View) => void }) {
+export default function MoreMenu({
+  setView,
+  setIsGoosehintsModalOpen,
+}: {
+  setView: (view: View) => void;
+  setIsGoosehintsModalOpen: (isOpen: boolean) => void;
+}) {
   const [open, setOpen] = useState(false);
   const [versions, setVersions] = useState<VersionInfo | null>(null);
   const [showVersions, setShowVersions] = useState(false);
@@ -257,6 +264,12 @@ export default function MoreMenu({ setView }: { setView: (view: View) => void })
             >
               New Session (cmd+N)
             </button>
+            <div
+              onClick={() => setIsGoosehintsModalOpen(true)}
+              className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors cursor-pointer"
+            >
+              Configure .goosehints
+            </div>
             <button
               onClick={() => {
                 localStorage.removeItem('GOOSE_PROVIDER');