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

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');