Merge pull request #1676 from xKevIsDev/improvements

feat: implement a search functionality to search codebase

Author: xKevIsDev

.github/workflows/electron.yml

@@ -21,7 +21,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest] # TODO: add back macos-latest when notarize is figured out
+        os: [ubuntu-latest, windows-latest, macos-latest] # Use unsigned macOS builds for now
         node-version: [18.18.0]
       fail-fast: false
 

app/components/editor/codemirror/CodeMirrorEditor.tsx

@@ -47,8 +47,10 @@ type TextEditorDocument = EditorDocument & {
 };
 
 export interface ScrollPosition {
-  top: number;
-  left: number;
+  top?: number;
+  left?: number;
+  line?: number;
+  column?: number;
 }
 
 export interface EditorUpdate {
@@ -159,6 +161,25 @@ export const CodeMirrorEditor = memo(
       themeRef.current = theme;
     });
 
+    useEffect(() => {
+      if (!viewRef.current || !doc || doc.isBinary) {
+        return;
+      }
+
+      if (typeof doc.scroll?.line === 'number') {
+        const line = doc.scroll.line;
+        const column = doc.scroll.column ?? 0;
+        const linePos = viewRef.current.state.doc.line(line + 1).from + column;
+        viewRef.current.dispatch({
+          selection: { anchor: linePos },
+          scrollIntoView: true,
+        });
+        viewRef.current.focus();
+      } else if (typeof doc.scroll?.top === 'number' || typeof doc.scroll?.left === 'number') {
+        viewRef.current.scrollDOM.scrollTo(doc.scroll.left ?? 0, doc.scroll.top ?? 0);
+      }
+    }, [doc?.scroll?.line, doc?.scroll?.column, doc?.scroll?.top, doc?.scroll?.left]);
+
     useEffect(() => {
       const onUpdate = debounce((update: EditorUpdate) => {
         onChangeRef.current?.(update);
@@ -417,11 +438,23 @@ function setEditorDocument(
       const newLeft = doc.scroll?.left ?? 0;
       const newTop = doc.scroll?.top ?? 0;
 
+      if (typeof doc.scroll?.line === 'number') {
+        const line = doc.scroll.line;
+        const column = doc.scroll.column ?? 0;
+        const linePos = view.state.doc.line(line + 1).from + column;
+        view.dispatch({
+          selection: { anchor: linePos },
+          scrollIntoView: true,
+        });
+        view.focus();
+
+        return;
+      }
+
       const needsScrolling = currentLeft !== newLeft || currentTop !== newTop;
 
       if (autoFocus && editable) {
         if (needsScrolling) {
-          // we have to wait until the scroll position was changed before we can set the focus
           view.scrollDOM.addEventListener(
             'scroll',
             () => {
@@ -430,7 +463,6 @@ function setEditorDocument(
             { once: true },
           );
         } else {
-          // if the scroll position is still the same we can focus immediately
           view.focus();
         }
       }

app/components/workbench/EditorPanel.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { memo, useMemo } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import * as Tabs from '@radix-ui/react-tabs'; // <-- Import Radix UI Tabs
 import {
   CodeMirrorEditor,
   type EditorDocument,
@@ -21,6 +22,8 @@ import { FileBreadcrumb } from './FileBreadcrumb';
 import { FileTree } from './FileTree';
 import { DEFAULT_TERMINAL_SIZE, TerminalTabs } from './terminal/TerminalTabs';
 import { workbenchStore } from '~/lib/stores/workbench';
+import { Search } from './Search'; // <-- Ensure Search is imported
+import { classNames } from '~/utils/classNames'; // <-- Import classNames if not already present
 
 interface EditorPanelProps {
   files?: FileMap;
@@ -75,24 +78,48 @@ export const EditorPanel = memo(
       <PanelGroup direction="vertical">
         <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
           <PanelGroup direction="horizontal">
-            <Panel defaultSize={20} minSize={10} collapsible>
-              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">
-                <PanelHeader>
-                  <div className="i-ph:tree-structure-duotone shrink-0" />
-                  Files
+            <Panel defaultSize={20} minSize={15} collapsible className="border-r border-bolt-elements-borderColor">
+              <Tabs.Root defaultValue="files" className="flex flex-col h-full">
+                <PanelHeader className="w-full text-sm font-medium text-bolt-elements-textSecondary px-1">
+                  <Tabs.List className="h-full flex-shrink-0 flex items-center">
+                    <Tabs.Trigger
+                      value="files"
+                      className={classNames(
+                        'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                      )}
+                    >
+                      Files
+                    </Tabs.Trigger>
+                    <Tabs.Trigger
+                      value="search"
+                      className={classNames(
+                        'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                      )}
+                    >
+                      Search
+                    </Tabs.Trigger>
+                  </Tabs.List>
                 </PanelHeader>
-                <FileTree
-                  className="h-full"
-                  files={files}
-                  hideRoot
-                  unsavedFiles={unsavedFiles}
-                  fileHistory={fileHistory}
-                  rootFolder={WORK_DIR}
-                  selectedFile={selectedFile}
-                  onFileSelect={onFileSelect}
-                />
-              </div>
+
+                <Tabs.Content value="files" className="flex-grow overflow-auto focus-visible:outline-none">
+                  <FileTree
+                    className="h-full"
+                    files={files}
+                    hideRoot
+                    unsavedFiles={unsavedFiles}
+                    fileHistory={fileHistory}
+                    rootFolder={WORK_DIR}
+                    selectedFile={selectedFile}
+                    onFileSelect={onFileSelect}
+                  />
+                </Tabs.Content>
+
+                <Tabs.Content value="search" className="flex-grow overflow-auto focus-visible:outline-none">
+                  <Search />
+                </Tabs.Content>
+              </Tabs.Root>
             </Panel>
+
             <PanelResizeHandle />
             <Panel className="flex flex-col" defaultSize={80} minSize={20}>
               <PanelHeader className="overflow-x-auto">