groove-dev 0.26.14 → 0.26.15

package/packages/gui/dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-D5zShz2P.js"></script>
+    <script type="module" crossorigin src="/assets/index-CBlL5EFb.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">

package/packages/gui/src/views/editor.jsx

@@ -5,11 +5,16 @@ import { FileTree } from '../components/editor/file-tree';
 import { EditorTabs } from '../components/editor/editor-tabs';
 import { CodeEditor } from '../components/editor/code-editor';
 import { MediaViewer, isMediaFile } from '../components/editor/media-viewer';
-import { Code2, AlertTriangle, RefreshCw, X } from 'lucide-react';
+import { Code2, AlertTriangle, RefreshCw, X, Eye, FileCode } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { api } from '../lib/api';
 import { cn } from '../lib/cn';
 
+function isHtmlFile(path) {
+  const ext = path?.split('.').pop()?.toLowerCase();
+  return ext === 'html' || ext === 'htm';
+}
+
 export default function EditorView() {
   const activeFile = useGrooveStore((s) => s.editorActiveFile);
   const files = useGrooveStore((s) => s.editorFiles);
@@ -20,14 +25,20 @@ export default function EditorView() {
   const dismissFileChange = useGrooveStore((s) => s.dismissFileChange);
 
   const [rootDir, setRootDir] = useState('');
+  const [previewMode, setPreviewMode] = useState(false);
+  const [previewKey, setPreviewKey] = useState(0);
 
   // Fetch root dir
   useEffect(() => {
     api.get('/files/root').then((d) => setRootDir(d.root || '')).catch(() => {});
   }, []);
 
+  // Reset preview mode when switching files
+  useEffect(() => { setPreviewMode(false); }, [activeFile]);
+
   const file = activeFile ? files[activeFile] : null;
   const isMedia = activeFile && isMediaFile(activeFile);
+  const isHtml = activeFile && isHtmlFile(activeFile);
   const hasExternalChange = activeFile && changedFiles[activeFile];
 
   return (
@@ -70,7 +81,52 @@ export default function EditorView() {
 
           {activeFile && isMedia && <MediaViewer path={activeFile} />}
 
-          {activeFile && !isMedia && file && (
+          {activeFile && !isMedia && isHtml && (
+            <>
+              {/* Code / Preview toggle for HTML files */}
+              <div className="absolute top-0 right-4 z-10 flex items-center gap-0.5 mt-2 bg-surface-2 border border-border-subtle rounded-md p-0.5">
+                <button
+                  onClick={() => setPreviewMode(false)}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2.5 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
+                    !previewMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
+                  )}
+                >
+                  <FileCode size={12} /> Code
+                </button>
+                <button
+                  onClick={() => { setPreviewMode(true); setPreviewKey((k) => k + 1); }}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2.5 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
+                    previewMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
+                  )}
+                >
+                  <Eye size={12} /> Preview
+                </button>
+              </div>
+
+              {previewMode ? (
+                <iframe
+                  key={previewKey}
+                  src={`/api/files/raw?path=${encodeURIComponent(activeFile)}`}
+                  className="w-full h-full border-0"
+                  sandbox="allow-scripts allow-same-origin"
+                  title="HTML Preview"
+                />
+              ) : (
+                file && (
+                  <CodeEditor
+                    content={file.content}
+                    language={file.language}
+                    onChange={(content) => updateFileContent(activeFile, content)}
+                    onSave={() => saveFile(activeFile)}
+                  />
+                )
+              )}
+            </>
+          )}
+
+          {activeFile && !isMedia && !isHtml && file && (
             <CodeEditor
               content={file.content}
               language={file.language}