iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: enhance error handling and add new search feature

Browse Source 
- Add support for `PREVIEW_CONSOLE_ERROR` in WebContainer error handling

- Introduce new Search component for text search functionality

- Extend `ScrollPosition` interface to include `line` and `column`
- Implement scroll-to-line functionality in CodeMirrorEditor
- Add tab-based navigation for files and search in EditorPanel

This commit introduces several enhancements to the editor, including improved error handling, better scrolling capabilities, and a new search feature. The changes are focused on improving the user experience and adding new functionality to the editor components.
This commit is contained in:
KevIsDev
2025-05-01 15:56:08 +01:00
parent 3b2e869651
commit fcaf8f66f0
5 changed files with 337 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/components/workbench/EditorPanel.tsx
View File

@@ -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">