Add editable file sections and a drag&drop feature

1 files changed, 33 insertions, 28 deletions

diff --git a/makima/frontend/src/components/files/FileDetail.tsx b/makima/frontend/src/components/files/FileDetail.tsx
index ffc67dd..2bf4c03 100644
--- a/makima/frontend/src/components/files/FileDetail.tsx
+++ b/makima/frontend/src/components/files/FileDetail.tsx
@@ -8,6 +8,8 @@ interface FileDetailProps {
   onBack: () => void;
   onSave: (id: string, name: string, description: string) => void;
   onDelete: (id: string) => void;
+  onBodyElementUpdate?: (index: number, element: import("../../lib/api").BodyElement) => void;
+  onBodyReorder?: (fromIndex: number, toIndex: number) => void;
 }
 
 export function FileDetail({
@@ -16,6 +18,8 @@ export function FileDetail({
   onBack,
   onSave,
   onDelete,
+  onBodyElementUpdate,
+  onBodyReorder,
 }: FileDetailProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [name, setName] = useState(file.name);
@@ -143,33 +147,34 @@ export function FileDetail({
           <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-3">
             Content
           </h3>
-          <BodyRenderer elements={file.body} />
+          <BodyRenderer
+            elements={file.body}
+            isEditing={isEditing}
+            onUpdate={onBodyElementUpdate}
+            onReorder={onBodyReorder}
+          />
         </div>
 
-        {/* Collapsible Transcript Section */}
-        <div className="border-t border-dashed border-[rgba(117,170,252,0.35)] pt-4">
-          <button
-            onClick={() => setTranscriptExpanded(!transcriptExpanded)}
-            className="flex items-center gap-2 font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors uppercase w-full text-left"
-          >
-            <span
-              className={`transition-transform ${
-                transcriptExpanded ? "rotate-90" : ""
-              }`}
+        {/* Collapsible Transcript Section - only show if there are entries */}
+        {file.transcript.length > 0 && (
+          <div className="border-t border-dashed border-[rgba(117,170,252,0.35)] pt-4">
+            <button
+              onClick={() => setTranscriptExpanded(!transcriptExpanded)}
+              className="flex items-center gap-2 font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors uppercase w-full text-left"
             >
-              &gt;
-            </span>
-            Transcript ({file.transcript.length} entries)
-          </button>
+              <span
+                className={`transition-transform ${
+                  transcriptExpanded ? "rotate-90" : ""
+                }`}
+              >
+                &gt;
+              </span>
+              Transcript ({file.transcript.length} entries)
+            </button>
 
-          {transcriptExpanded && (
-            <div className="mt-4 space-y-3 pl-4">
-              {file.transcript.length === 0 ? (
-                <div className="text-[#9bc3ff] text-sm font-mono opacity-60">
-                  No transcript entries.
-                </div>
-              ) : (
-                file.transcript.map((entry) => (
+            {transcriptExpanded && (
+              <div className="mt-4 space-y-3 pl-4">
+                {file.transcript.map((entry) => (
                   <div key={entry.id} className="font-mono text-sm">
                     <div className="flex items-baseline gap-2 mb-1">
                       <span className="text-[#75aafc] text-xs">
@@ -183,11 +188,11 @@ export function FileDetail({
                       {entry.text}
                     </p>
                   </div>
-                ))
-              )}
-            </div>
-          )}
-        </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );