feat: refactoring

frontend/src/routes/EditorView.tsx

@@ -1,29 +1,20 @@
-import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
-import { BookOpen, Upload } from "lucide-react";
 import * as api from "@/api/client";
 import { autocompletion } from "@codemirror/autocomplete";
-import type { Extension } from "@codemirror/state";
 import { useEditorStore } from "@/stores/editorStore";
 import { usePagesStore } from "@/stores/pagesStore";
 import { useUnsavedGuard } from "@/hooks/useUnsavedGuard";
 import { useCompile } from "@/hooks/useCompile";
+import { useKeyboardSave } from "@/hooks/useKeyboardSave";
 import { uframeHighlight } from "@/components/editor/uframeHighlight";
 import { uframeCommandSource, uframeValueHintSource, loadCommandsFromApi } from "@/components/editor/uframeCommands";
 import { keywordHoverTooltip } from "@/components/editor/uframeHover";
-import EditorPane from "@/components/editor/EditorPane";
 import EditorPointer from "@/components/editor/EditorPointer";
 import PreviewPane from "@/components/editor/PreviewPane";
+import SourcePane from "@/components/editor/SourcePane";
 import ToolBar from "@/components/editor/ToolBar";
-import { EXAMPLES } from "@/components/editor/examples";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverHeader,
-  PopoverTitle,
-} from "@/components/ui/popover";
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -81,10 +72,8 @@ export default function EditorView() {
       setPageName(name);
       api.fetchPage(name).then((data) => {
         if (data.source != null) {
-          useEditorStore.setState({
-            ufSource: data.source,
-            isDirty: false,
-          });
+          setSource(data.source);
+          setDirty(false);
         }
       });
     }
@@ -118,20 +107,10 @@ export default function EditorView() {
     [pageName, ufSource, isNew, navigate],
   );
 
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-        e.preventDefault();
-        handleSave(false);
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === "p") {
-        e.preventDefault();
-        handleSave(true);
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [handleSave]);
+  useKeyboardSave(
+    useCallback(() => handleSave(false), [handleSave]),
+    useCallback(() => handleSave(true), [handleSave]),
+  );
 
   return (
     <div className="flex flex-col h-full">
@@ -164,82 +143,3 @@ export default function EditorView() {
 }
 
 
-/** Source pane — editor with header bar matching the Preview pane */
-function SourcePane({
-  ufSource,
-  setSource,
-  extensions,
-}: {
-  ufSource: string;
-  setSource: (s: string) => void;
-  extensions: Extension[];
-}) {
-  const [examplesOpen, setExamplesOpen] = useState(false);
-  const fileRef = useRef<HTMLInputElement>(null);
-  const [uploading, setUploading] = useState(false);
-
-  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setUploading(true);
-    try {
-      const data = await api.uploadImage(file);
-      toast.success(`Uploaded ${data.filename}`);
-      setSource(`image "${data.path}" braille 30\n  align center`);
-    } catch (err) {
-      toast.error(`Upload failed: ${err}`);
-    } finally {
-      setUploading(false);
-      if (fileRef.current) fileRef.current.value = "";
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center px-4 py-2 border-b-2 border-border shrink-0 gap-2">
-        <span className="font-medium text-foreground flex-1">Source</span>
-
-        <Popover open={examplesOpen} onOpenChange={setExamplesOpen}>
-          <PopoverTrigger
-            render={
-              <button className="text-[10px] text-muted-foreground hover:text-foreground transition-colors uppercase tracking-wider flex items-center gap-1 cursor-pointer">
-                <BookOpen className="h-3 w-3" />
-                Examples
-              </button>
-            }
-          />
-          <PopoverContent side="bottom" align="end" sideOffset={8}>
-            <PopoverHeader>
-              <PopoverTitle>Insert Example</PopoverTitle>
-            </PopoverHeader>
-            <div className="flex flex-col gap-0.5 max-h-72 overflow-y-auto -mx-1">
-              {EXAMPLES.map((ex) => (
-                <button
-                  key={ex.name}
-                  onClick={() => { setSource(ex.source); setExamplesOpen(false); }}
-                  className="flex flex-col items-start px-2 py-1.5 text-left hover:bg-accent transition-colors cursor-pointer"
-                >
-                  <span className="text-sm font-medium">{ex.name}</span>
-                  <span className="text-xs text-muted-foreground leading-tight">{ex.description}</span>
-                </button>
-              ))}
-            </div>
-          </PopoverContent>
-        </Popover>
-
-        <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleUpload} />
-        <button
-          onClick={() => fileRef.current?.click()}
-          disabled={uploading}
-          className="text-[10px] text-muted-foreground hover:text-foreground transition-colors uppercase tracking-wider flex items-center gap-1 disabled:opacity-50 cursor-pointer"
-        >
-          <Upload className="h-3 w-3" />
-          {uploading ? "Uploading…" : "Image"}
-        </button>
-      </div>
-      <div className="flex-1 overflow-auto min-h-0">
-        <EditorPane value={ufSource} onChange={setSource} extensions={extensions} />
-      </div>
-    </div>
-  );
-}