feat: refactor ChatToolbar to improve new conversation handling and streamline web preview URL logic

Author: milisp

src/components/layout/ChatToolBar.tsx

@@ -9,66 +9,75 @@ import { useActiveConversationStore } from "@/stores/useActiveConversationStore"
 import { runCommand } from "@/utils/runCommand";
 import { useCodexStore } from "@/stores/useCodexStore";
 
+const DEFAULT_DEV_URL = "http://localhost:3000";
+
 export const ChatToolbar: React.FC = () => {
-  const { cwd } = useCodexStore()
+  const { cwd } = useCodexStore();
   const { showWebPreview, setWebPreviewUrl } = useLayoutStore();
   const { currentFolder } = useFolderStore();
   const { clearAll, requestFocus } = useChatInputStore();
   const { setActiveConversationId, activeConversationId } = useActiveConversationStore();
 
-  const handleToggleWebPreview = async () => {
+  const handleNewConversation = React.useCallback(() => {
+    setActiveConversationId(null);
+    clearAll();
+    requestFocus();
+  }, [setActiveConversationId, clearAll, requestFocus]);
+
+  const handleToggleWebPreview = React.useCallback(async () => {
     if (showWebPreview) {
       setWebPreviewUrl(null);
-    } else {
-      let defaultUrl = "http://localhost:3000";
+      return;
+    }
+
+    let devUrl = DEFAULT_DEV_URL;
 
-      // Try to detect web framework and use appropriate URL
-      if (currentFolder) {
-        try {
-          const frameworkInfo = await detectWebFramework(currentFolder);
-          if (frameworkInfo) {
-            defaultUrl = frameworkInfo.devUrl;
-          }
-        } catch (error) {
-          console.error("Failed to detect web framework:", error);
+    if (currentFolder) {
+      try {
+        const frameworkInfo = await detectWebFramework(currentFolder);
+        if (frameworkInfo) {
+          devUrl = frameworkInfo.devUrl;
         }
+      } catch (error) {
+        console.error("Failed to detect web framework:", error);
       }
+    }
 
-      setWebPreviewUrl(defaultUrl);
+    setWebPreviewUrl(devUrl);
+  }, [showWebPreview, setWebPreviewUrl, currentFolder]);
+
+  const handleRunCommand = React.useCallback(() => {
+    if (activeConversationId) {
+      runCommand(activeConversationId, cwd);
     }
-  };
+  }, [activeConversationId, cwd]);
 
+  // Cmd/Ctrl+N shortcut for new conversation
   React.useEffect(() => {
     const handleShortcut = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "n") {
         event.preventDefault();
-        setActiveConversationId(null);
-        clearAll();
-        requestFocus();
+        handleNewConversation();
       }
     };
 
     window.addEventListener("keydown", handleShortcut);
     return () => window.removeEventListener("keydown", handleShortcut);
-  }, [setActiveConversationId, clearAll, requestFocus]);
+  }, [handleNewConversation]);
 
   return (
     <div className="flex justify-between gap-2 px-2 w-full">
       <span className="flex gap-2">
-        <Button
-          size="icon"
-          onClick={() => {
-            setActiveConversationId(null);
-            clearAll();
-            requestFocus();
-          }}
-        >
+        <Button size="icon" onClick={handleNewConversation} title="New Conversation (Cmd/Ctrl+N)">
           <PenSquare />
         </Button>
+        
         <Button
           size="icon"
-          variant={"secondary"}
-          onClick={() => activeConversationId  && runCommand(activeConversationId, cwd)}
+          variant="secondary"
+          onClick={handleRunCommand}
+          disabled={!activeConversationId}
+          title="Run Command"
         >
           <Terminal />
         </Button>
@@ -78,7 +87,7 @@ export const ChatToolbar: React.FC = () => {
         variant="ghost"
         size="icon"
         onClick={handleToggleWebPreview}
-        className={`${showWebPreview ? "bg-accent" : ""}`}
+        className={showWebPreview ? "bg-accent" : ""}
         title="Toggle Web Preview"
       >
         <Globe />