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

feat(editor): show tooltip when the editor is read-only (#34)

Browse Source
This commit is contained in:
Dominic Elm
2024-08-09 13:42:30 +02:00
committed by GitHub
parent 7465cab8f8
commit 6e99e4c11e
7 changed files with 109 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bolt/app/components/workbench/EditorPanel.tsx
View File

@@ -144,7 +144,7 @@ export const EditorPanel = memo(
{activeFile && (
<div className="flex items-center flex-1 text-sm">
<div className="i-ph:file-duotone mr-2" />
{activeFile} {isStreaming && <span className="text-xs ml-1 font-semibold">(read-only)</span>}
{activeFile}
{activeFileUnsaved && (
<div className="flex gap-1 ml-auto -mr-1.5">
<PanelHeaderButton onClick={onFileSave}>

13
packages/bolt/app/components/workbench/Workbench.client.tsx
View File

@@ -1,7 +1,7 @@
import { useStore } from '@nanostores/react';
import { motion, type HTMLMotionProps, type Variants } from 'framer-motion';
import { computed } from 'nanostores';
import { memo, useCallback, useEffect, useState } from 'react';
import { memo, useCallback, useEffect } from 'react';
import { toast } from 'react-toastify';
import {
type OnChangeCallback as OnEditorChange,
@@ -10,7 +10,7 @@ import {
import { IconButton } from '~/components/ui/IconButton';
import { PanelHeaderButton } from '~/components/ui/PanelHeaderButton';
import { Slider, type SliderOptions } from '~/components/ui/Slider';
import { workbenchStore } from '~/lib/stores/workbench';
import { workbenchStore, type WorkbenchViewType } from '~/lib/stores/workbench';
import { cubicEasingFn } from '~/utils/easings';
import { renderLogger } from '~/utils/logger';
import { EditorPanel } from './EditorPanel';
@@ -21,11 +21,9 @@ interface WorkspaceProps {
isStreaming?: boolean;
}
type ViewType = 'code' | 'preview';
const viewTransition = { ease: cubicEasingFn };
const sliderOptions: SliderOptions<ViewType> = {
const sliderOptions: SliderOptions<WorkbenchViewType> = {
left: {
value: 'code',
text: 'Code',
@@ -62,8 +60,11 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
const currentDocument = useStore(workbenchStore.currentDocument);
const unsavedFiles = useStore(workbenchStore.unsavedFiles);
const files = useStore(workbenchStore.files);
const selectedView = useStore(workbenchStore.currentView);
const [selectedView, setSelectedView] = useState<ViewType>(hasPreview ? 'preview' : 'code');
const setSelectedView = (view: WorkbenchViewType) => {
workbenchStore.currentView.set(view);
};
useEffect(() => {
if (hasPreview) {