summaryrefslogtreecommitdiff
path: root/makima/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'makima/frontend')
-rw-r--r--makima/frontend/src/components/files/BodyRenderer.tsx289
-rw-r--r--makima/frontend/src/components/files/FileDetail.tsx61
-rw-r--r--makima/frontend/src/components/files/FileList.tsx14
-rw-r--r--makima/frontend/src/routes/files.tsx65
4 files changed, 371 insertions, 58 deletions
diff --git a/makima/frontend/src/components/files/BodyRenderer.tsx b/makima/frontend/src/components/files/BodyRenderer.tsx
index 9d008e2..06b2b75 100644
--- a/makima/frontend/src/components/files/BodyRenderer.tsx
+++ b/makima/frontend/src/components/files/BodyRenderer.tsx
@@ -1,11 +1,18 @@
+import { useState, useRef, useEffect } from "react";
import type { BodyElement } from "../../lib/api";
import { ChartRenderer } from "../charts/ChartRenderer";
interface BodyRendererProps {
elements: BodyElement[];
+ isEditing?: boolean;
+ onUpdate?: (index: number, element: BodyElement) => void;
+ onReorder?: (fromIndex: number, toIndex: number) => void;
}
-export function BodyRenderer({ elements }: BodyRendererProps) {
+export function BodyRenderer({ elements, isEditing = false, onUpdate, onReorder }: BodyRendererProps) {
+ const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+ const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
if (elements.length === 0) {
return (
<div className="text-[#555] font-mono text-sm italic">
@@ -14,21 +21,123 @@ export function BodyRenderer({ elements }: BodyRendererProps) {
);
}
+ const handleDragStart = (index: number) => (e: React.DragEvent) => {
+ setDraggedIndex(index);
+ e.dataTransfer.effectAllowed = "move";
+ e.dataTransfer.setData("text/plain", index.toString());
+ };
+
+ const handleDragOver = (index: number) => (e: React.DragEvent) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = "move";
+ if (draggedIndex !== null && draggedIndex !== index) {
+ setDragOverIndex(index);
+ }
+ };
+
+ const handleDragLeave = () => {
+ setDragOverIndex(null);
+ };
+
+ const handleDrop = (toIndex: number) => (e: React.DragEvent) => {
+ e.preventDefault();
+ const fromIndex = draggedIndex;
+ setDraggedIndex(null);
+ setDragOverIndex(null);
+
+ if (fromIndex !== null && fromIndex !== toIndex && onReorder) {
+ onReorder(fromIndex, toIndex);
+ }
+ };
+
+ const handleDragEnd = () => {
+ setDraggedIndex(null);
+ setDragOverIndex(null);
+ };
+
return (
- <div className="space-y-4">
+ <div className="space-y-1">
{elements.map((element, index) => (
- <BodyElementRenderer key={index} element={element} />
+ <div
+ key={index}
+ className={`group flex items-start gap-2 py-1 transition-all ${
+ draggedIndex === index ? "opacity-50" : ""
+ } ${
+ dragOverIndex === index
+ ? "border-t-2 border-[#75aafc] -mt-[2px] pt-[calc(0.25rem+2px)]"
+ : ""
+ }`}
+ onDragOver={handleDragOver(index)}
+ onDragLeave={handleDragLeave}
+ onDrop={handleDrop(index)}
+ >
+ {/* Drag handle - only show in edit mode */}
+ {isEditing && onReorder && (
+ <div
+ draggable
+ onDragStart={handleDragStart(index)}
+ onDragEnd={handleDragEnd}
+ className="flex-shrink-0 w-5 h-6 flex items-center justify-center cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 transition-opacity text-[#555] hover:text-[#75aafc]"
+ title="Drag to reorder"
+ >
+ <svg
+ width="12"
+ height="12"
+ viewBox="0 0 12 12"
+ fill="currentColor"
+ >
+ <circle cx="3" cy="2" r="1.5" />
+ <circle cx="9" cy="2" r="1.5" />
+ <circle cx="3" cy="6" r="1.5" />
+ <circle cx="9" cy="6" r="1.5" />
+ <circle cx="3" cy="10" r="1.5" />
+ <circle cx="9" cy="10" r="1.5" />
+ </svg>
+ </div>
+ )}
+ <div className="flex-1">
+ <BodyElementRenderer
+ element={element}
+ onUpdate={isEditing && onUpdate ? (el) => onUpdate(index, el) : undefined}
+ />
+ </div>
+ </div>
))}
</div>
);
}
-function BodyElementRenderer({ element }: { element: BodyElement }) {
+function BodyElementRenderer({
+ element,
+ onUpdate,
+}: {
+ element: BodyElement;
+ onUpdate?: (element: BodyElement) => void;
+}) {
switch (element.type) {
case "heading":
- return <HeadingElement level={element.level} text={element.text} />;
+ return (
+ <HeadingElement
+ level={element.level}
+ text={element.text}
+ onUpdate={
+ onUpdate
+ ? (text) => onUpdate({ ...element, text })
+ : undefined
+ }
+ />
+ );
case "paragraph":
- return <ParagraphElement text={element.text} />;
+ return (
+ <ParagraphElement
+ text={element.text}
+ onUpdate={
+ onUpdate
+ ? (text) => onUpdate({ ...element, text })
+ : undefined
+ }
+ />
+ );
case "chart":
return (
<ChartElement
@@ -51,29 +160,157 @@ function BodyElementRenderer({ element }: { element: BodyElement }) {
}
}
-function HeadingElement({ level, text }: { level: number; text: string }) {
- const className = "font-mono text-[#9bc3ff]";
-
- switch (level) {
- case 1:
- return <h1 className={`${className} text-2xl font-bold`}>{text}</h1>;
- case 2:
- return <h2 className={`${className} text-xl font-bold`}>{text}</h2>;
- case 3:
- return <h3 className={`${className} text-lg font-semibold`}>{text}</h3>;
- case 4:
- return <h4 className={`${className} text-base font-semibold`}>{text}</h4>;
- case 5:
- return <h5 className={`${className} text-sm font-semibold`}>{text}</h5>;
- case 6:
- return <h6 className={`${className} text-xs font-semibold`}>{text}</h6>;
- default:
- return <h3 className={`${className} text-lg font-semibold`}>{text}</h3>;
+function HeadingElement({
+ level,
+ text,
+ onUpdate,
+}: {
+ level: number;
+ text: string;
+ onUpdate?: (text: string) => void;
+}) {
+ const [isEditing, setIsEditing] = useState(false);
+ const [editText, setEditText] = useState(text);
+ const inputRef = useRef<HTMLInputElement>(null);
+
+ useEffect(() => {
+ setEditText(text);
+ }, [text]);
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ inputRef.current.focus();
+ inputRef.current.select();
+ }
+ }, [isEditing]);
+
+ const handleSave = () => {
+ if (onUpdate && editText.trim() !== text) {
+ onUpdate(editText.trim());
+ }
+ setIsEditing(false);
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter") {
+ handleSave();
+ } else if (e.key === "Escape") {
+ setEditText(text);
+ setIsEditing(false);
+ }
+ };
+
+ const baseClassName = "font-mono text-[#9bc3ff]";
+ const sizeClasses: Record<number, string> = {
+ 1: "text-2xl font-bold",
+ 2: "text-xl font-bold",
+ 3: "text-lg font-semibold",
+ 4: "text-base font-semibold",
+ 5: "text-sm font-semibold",
+ 6: "text-xs font-semibold",
+ };
+ const sizeClass = sizeClasses[level] || sizeClasses[3];
+
+ if (isEditing && onUpdate) {
+ return (
+ <input
+ ref={inputRef}
+ type="text"
+ value={editText}
+ onChange={(e) => setEditText(e.target.value)}
+ onBlur={handleSave}
+ onKeyDown={handleKeyDown}
+ className={`${baseClassName} ${sizeClass} w-full bg-transparent border-b border-[#3f6fb3] outline-none`}
+ />
+ );
}
+
+ const HeadingTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+ return (
+ <HeadingTag
+ className={`${baseClassName} ${sizeClass} ${onUpdate ? "cursor-text hover:bg-[rgba(117,170,252,0.05)] px-1 -mx-1 rounded" : ""}`}
+ onClick={() => onUpdate && setIsEditing(true)}
+ >
+ {text}
+ </HeadingTag>
+ );
}
-function ParagraphElement({ text }: { text: string }) {
- return <p className="font-mono text-sm text-white/80 leading-relaxed">{text}</p>;
+function ParagraphElement({
+ text,
+ onUpdate,
+}: {
+ text: string;
+ onUpdate?: (text: string) => void;
+}) {
+ const [isEditing, setIsEditing] = useState(false);
+ const [editText, setEditText] = useState(text);
+ const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+ useEffect(() => {
+ setEditText(text);
+ }, [text]);
+
+ useEffect(() => {
+ if (isEditing && textareaRef.current) {
+ textareaRef.current.focus();
+ // Auto-resize textarea
+ textareaRef.current.style.height = "auto";
+ textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
+ }
+ }, [isEditing]);
+
+ const handleSave = () => {
+ if (onUpdate && editText.trim() !== text) {
+ onUpdate(editText.trim());
+ }
+ setIsEditing(false);
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === "Escape") {
+ setEditText(text);
+ setIsEditing(false);
+ }
+ // Ctrl/Cmd + Enter to save
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+ handleSave();
+ }
+ };
+
+ const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+ setEditText(e.target.value);
+ // Auto-resize
+ e.target.style.height = "auto";
+ e.target.style.height = e.target.scrollHeight + "px";
+ };
+
+ if (isEditing && onUpdate) {
+ return (
+ <div className="relative">
+ <textarea
+ ref={textareaRef}
+ value={editText}
+ onChange={handleInput}
+ onBlur={handleSave}
+ onKeyDown={handleKeyDown}
+ className="font-mono text-sm text-white/80 leading-relaxed w-full bg-transparent border border-[#3f6fb3] outline-none p-2 resize-none min-h-[60px]"
+ />
+ <div className="text-[10px] text-[#555] font-mono mt-1">
+ Ctrl+Enter to save, Esc to cancel
+ </div>
+ </div>
+ );
+ }
+
+ return (
+ <p
+ className={`font-mono text-sm text-white/80 leading-relaxed ${onUpdate ? "cursor-text hover:bg-[rgba(117,170,252,0.05)] px-1 -mx-1 rounded" : ""}`}
+ onClick={() => onUpdate && setIsEditing(true)}
+ >
+ {text}
+ </p>
+ );
}
function ChartElement({
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>
);
diff --git a/makima/frontend/src/components/files/FileList.tsx b/makima/frontend/src/components/files/FileList.tsx
index 7e1eea4..a859aa1 100644
--- a/makima/frontend/src/components/files/FileList.tsx
+++ b/makima/frontend/src/components/files/FileList.tsx
@@ -5,6 +5,7 @@ interface FileListProps {
loading: boolean;
onSelect: (id: string) => void;
onDelete: (id: string) => void;
+ onCreate: () => void;
}
function formatDuration(seconds: number | null): string {
@@ -30,6 +31,7 @@ export function FileList({
loading,
onSelect,
onDelete,
+ onCreate,
}: FileListProps) {
if (loading) {
return (
@@ -41,8 +43,16 @@ export function FileList({
return (
<div className="panel h-full flex flex-col">
- <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase p-4 pb-2 border-b border-dashed border-[rgba(117,170,252,0.35)]">
- FILES//
+ <div className="flex items-center justify-between p-4 pb-2 border-b border-dashed border-[rgba(117,170,252,0.35)]">
+ <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
+ FILES//
+ </div>
+ <button
+ onClick={onCreate}
+ className="px-3 py-1 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] hover:bg-[rgba(117,170,252,0.05)] transition-colors uppercase"
+ >
+ + New
+ </button>
</div>
<div className="flex-1 overflow-y-auto">
diff --git a/makima/frontend/src/routes/files.tsx b/makima/frontend/src/routes/files.tsx
index 00c334d..79544c5 100644
--- a/makima/frontend/src/routes/files.tsx
+++ b/makima/frontend/src/routes/files.tsx
@@ -10,9 +10,10 @@ import type { FileDetail as FileDetailType, BodyElement } from "../lib/api";
export default function FilesPage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
- const { files, loading, error, fetchFile, editFile, removeFile } = useFiles();
+ const { files, loading, error, fetchFile, editFile, removeFile, saveFile } = useFiles();
const [fileDetail, setFileDetail] = useState<FileDetailType | null>(null);
const [detailLoading, setDetailLoading] = useState(false);
+ const [creating, setCreating] = useState(false);
// Load file detail when URL has an id
useEffect(() => {
@@ -72,6 +73,63 @@ export default function FilesPage() {
[fileDetail]
);
+ const handleBodyElementUpdate = useCallback(
+ async (index: number, element: BodyElement) => {
+ if (fileDetail && id) {
+ // Create new body array with updated element
+ const newBody = [...fileDetail.body];
+ newBody[index] = element;
+
+ // Update local state immediately for responsiveness
+ setFileDetail({
+ ...fileDetail,
+ body: newBody,
+ });
+
+ // Save to backend
+ await editFile(id, { body: newBody });
+ }
+ },
+ [fileDetail, id, editFile]
+ );
+
+ const handleBodyReorder = useCallback(
+ async (fromIndex: number, toIndex: number) => {
+ if (fileDetail && id) {
+ // Create new body array with reordered elements
+ const newBody = [...fileDetail.body];
+ const [movedElement] = newBody.splice(fromIndex, 1);
+ newBody.splice(toIndex, 0, movedElement);
+
+ // Update local state immediately for responsiveness
+ setFileDetail({
+ ...fileDetail,
+ body: newBody,
+ });
+
+ // Save to backend
+ await editFile(id, { body: newBody });
+ }
+ },
+ [fileDetail, id, editFile]
+ );
+
+ const handleCreate = useCallback(async () => {
+ if (creating) return;
+ setCreating(true);
+ try {
+ const newFile = await saveFile({
+ name: `Untitled ${new Date().toLocaleDateString()}`,
+ transcript: [],
+ });
+ if (newFile) {
+ navigate(`/files/${newFile.id}`);
+ }
+ } finally {
+ setCreating(false);
+ }
+ }, [creating, saveFile, navigate]);
+
return (
<div className="relative z-10 h-screen flex flex-col overflow-hidden">
<Masthead showTicker={false} showNav />
@@ -92,6 +150,8 @@ export default function FilesPage() {
onBack={handleBack}
onSave={handleSave}
onDelete={handleDelete}
+ onBodyElementUpdate={handleBodyElementUpdate}
+ onBodyReorder={handleBodyReorder}
/>
</div>
<div className="shrink-0">
@@ -105,9 +165,10 @@ export default function FilesPage() {
) : (
<FileList
files={files}
- loading={loading}
+ loading={loading || creating}
onSelect={handleSelectFile}
onDelete={handleDelete}
+ onCreate={handleCreate}
/>
)}
</main>
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-21 04:06:06 +0000