plotlink-ows 1.0.24 → 1.0.26

package/app/web/components/PreviewPanel.tsx

@@ -3,13 +3,15 @@ import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
+import { GENRES, LANGUAGES } from "../../../lib/genres";
 
 interface PreviewPanelProps {
   storyName: string | null;
   fileName: string | null;
   authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
-  onPublish?: (storyName: string, fileName: string) => void;
+  onPublish?: (storyName: string, fileName: string, genre: string, language: string, isNsfw: boolean) => void;
   publishingFile?: string | null;
+  walletAddress?: string | null;
 }
 
 interface FileData {
@@ -21,11 +23,12 @@ interface FileData {
   plotIndex?: number;
   indexError?: string;
   publishedAt?: string;
+  authorAddress?: string;
 }
 
 type Tab = "preview" | "edit";
 
-export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publishingFile }: PreviewPanelProps) {
+export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publishingFile, walletAddress }: PreviewPanelProps) {
   const [fileData, setFileData] = useState<FileData | null>(null);
   const [loading, setLoading] = useState(false);
   const [activeTab, setActiveTab] = useState<Tab>("preview");
@@ -34,9 +37,25 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
   const [dirty, setDirty] = useState(false);
   const [retrying, setRetrying] = useState(false);
   const [indexTimeLeft, setIndexTimeLeft] = useState<number | null>(null);
+  const [selectedGenre, setSelectedGenre] = useState(GENRES[0]);
+  const [selectedLanguage, setSelectedLanguage] = useState(LANGUAGES[0]);
+  const [isNsfw, setIsNsfw] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const dirtyRef = useRef(false);
 
+  // Edit panel state for published stories
+  const [showEditPanel, setShowEditPanel] = useState(false);
+  const [editGenre, setEditGenre] = useState(GENRES[0] as string);
+  const [editLanguage, setEditLanguage] = useState(LANGUAGES[0] as string);
+  const [editNsfw, setEditNsfw] = useState(false);
+  const [coverFile, setCoverFile] = useState<File | null>(null);
+  const [coverPreview, setCoverPreview] = useState<string | null>(null);
+  const [editSaving, setEditSaving] = useState(false);
+  const [editMetaLoaded, setEditMetaLoaded] = useState(false);
+  const [editError, setEditError] = useState<string | null>(null);
+  const [editSuccess, setEditSuccess] = useState(false);
+  const coverInputRef = useRef<HTMLInputElement>(null);
+
   const prevFileRef = useRef<string | null>(null);
 
   const loadFile = useCallback(async () => {
@@ -75,6 +94,31 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
     return () => clearInterval(interval);
   }, [storyName, fileName, loadFile, activeTab, dirty]);
 
+  // Auto-detect genre from structure.md when story changes
+  useEffect(() => {
+    if (!storyName) return;
+    let cancelled = false;
+    authFetch(`/api/stories/${storyName}/structure.md`)
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        if (cancelled || !data?.content) return;
+        const match = data.content.match(/\*{0,2}genre\*{0,2}[:\s]+(.+)/i);
+        if (match) {
+          const detected = match[1].replace(/\*+/g, "").trim();
+          const found = GENRES.find((g) => g.toLowerCase() === detected.toLowerCase());
+          if (found) setSelectedGenre(found);
+        }
+        const langMatch = data.content.match(/\*{0,2}language\*{0,2}[:\s]+(.+)/i);
+        if (langMatch) {
+          const detected = langMatch[1].replace(/\*+/g, "").trim();
+          const found = LANGUAGES.find((l) => l.toLowerCase() === detected.toLowerCase());
+          if (found) setSelectedLanguage(found);
+        }
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [storyName, authFetch]);
+
   const handleSave = useCallback(async () => {
     if (!storyName || !fileName) return;
     setSaving(true);
@@ -92,6 +136,118 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
     setSaving(false);
   }, [storyName, fileName, authFetch, editContent]);
 
+  // Handle cover image selection
+  const handleCoverSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (file.size > 500 * 1024) {
+      setEditError("Image exceeds 500KB limit");
+      return;
+    }
+    if (!file.type.startsWith("image/")) {
+      setEditError("File must be an image");
+      return;
+    }
+    setCoverFile(file);
+    setCoverPreview(URL.createObjectURL(file));
+    setEditError(null);
+  }, []);
+
+  // Save storyline edits (cover upload + metadata update)
+  const handleEditSave = useCallback(async () => {
+    if (!fileData?.storylineId) return;
+    setEditSaving(true);
+    setEditError(null);
+    setEditSuccess(false);
+
+    try {
+      let coverCid: string | undefined;
+
+      // Upload cover image if selected
+      if (coverFile) {
+        const formData = new FormData();
+        formData.append("file", coverFile);
+        const uploadRes = await authFetch("/api/publish/upload-cover", {
+          method: "POST",
+          body: formData,
+        });
+        if (!uploadRes.ok) {
+          const err = await uploadRes.json();
+          throw new Error(err.error || "Cover upload failed");
+        }
+        const uploadData = await uploadRes.json();
+        coverCid = uploadData.cid;
+      }
+
+      // Update storyline metadata
+      const updateRes = await authFetch("/api/publish/update-storyline", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          storylineId: fileData.storylineId,
+          ...(coverCid !== undefined && { coverCid }),
+          genre: editGenre,
+          language: editLanguage,
+          isNsfw: editNsfw,
+        }),
+      });
+
+      if (!updateRes.ok) {
+        const err = await updateRes.json();
+        throw new Error(err.error || "Update failed");
+      }
+
+      setEditSuccess(true);
+      setCoverFile(null);
+      setTimeout(() => setEditSuccess(false), 3000);
+    } catch (err) {
+      setEditError(err instanceof Error ? err.message : "Update failed");
+    } finally {
+      setEditSaving(false);
+    }
+  }, [fileData?.storylineId, coverFile, editGenre, editLanguage, editNsfw, authFetch]);
+
+  // Reset edit panel state when changing files
+  useEffect(() => {
+    setShowEditPanel(false);
+    setCoverFile(null);
+    setCoverPreview(null);
+    setEditError(null);
+    setEditSuccess(false);
+    setEditMetaLoaded(false);
+  }, [storyName, fileName]);
+
+  // Fetch current storyline metadata when edit panel opens
+  useEffect(() => {
+    if (!showEditPanel || !fileData?.storylineId) return;
+    setEditMetaLoaded(false);
+    const PLOTLINK_URL = "https://plotlink.xyz";
+    let cancelled = false;
+    fetch(`${PLOTLINK_URL}/api/storyline/${fileData.storylineId}`)
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        if (cancelled) return;
+        if (!data) {
+          setEditError("Could not load current story metadata");
+          return;
+        }
+        if (data.genre) {
+          const found = GENRES.find((g) => g.toLowerCase() === data.genre.toLowerCase());
+          if (found) setEditGenre(found);
+        }
+        if (data.language) {
+          const found = LANGUAGES.find((l) => l.toLowerCase() === data.language.toLowerCase());
+          if (found) setEditLanguage(found);
+        }
+        if (data.isNsfw !== undefined) setEditNsfw(!!data.isNsfw);
+        setEditMetaLoaded(true);
+      })
+      .catch(() => {
+        if (!cancelled) setEditError("Could not load current story metadata");
+      });
+    return () => { cancelled = true; };
+  }, [showEditPanel, fileData?.storylineId]);
+
   // Ctrl+S / Cmd+S to save
   useEffect(() => {
     if (activeTab !== "edit") return;
@@ -303,7 +459,7 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
               )}
               {isPlot && (
                 <button
-                  onClick={() => storyName && fileName && onPublish?.(storyName, fileName)}
+                  onClick={() => storyName && fileName && onPublish?.(storyName, fileName, selectedGenre, selectedLanguage, isNsfw)}
                   disabled={!!publishingFile}
                   className="px-3 py-1 border border-border text-xs rounded hover:bg-surface disabled:opacity-50"
                 >
@@ -335,50 +491,176 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
             )}
           </div>
         ) : fileData?.status === "published" ? (
-          <div className="flex items-center gap-2 text-xs">
-            <span className="text-green-700">Published</span>
-            {fileData.storylineId && (
-              <a
-                href={(() => {
-                  const base = `https://plotlink.xyz/story/${fileData.storylineId}`;
-                  if (!isPlot) return base;
-                  // plotIndex convention: contract emits 0-based (genesis=0, plot-01=1)
-                  // plotlink.xyz URLs use the same 0-based index
-                  // Filename fallback: plot-01.md → parseInt("01") = 1 (matches contract)
-                  const idx = fileData.plotIndex != null && fileData.plotIndex > 0
-                    ? fileData.plotIndex
-                    : parseInt(fileName?.match(/^plot-(\d+)\.md$/)?.[1] ?? "1");
-                  return `${base}/${idx}`;
-                })()}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-accent underline"
-              >
-                View on PlotLink
-              </a>
-            )}
-            {fileData.txHash && (
-              <a
-                href={`https://basescan.org/tx/${fileData.txHash}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-muted underline"
-              >
-                BaseScan
-              </a>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2 text-xs">
+              <span className="text-green-700">Published</span>
+              {fileData.storylineId && (
+                <a
+                  href={(() => {
+                    const base = `https://plotlink.xyz/story/${fileData.storylineId}`;
+                    if (!isPlot) return base;
+                    const idx = fileData.plotIndex != null && fileData.plotIndex > 0
+                      ? fileData.plotIndex
+                      : parseInt(fileName?.match(/^plot-(\d+)\.md$/)?.[1] ?? "1");
+                    return `${base}/${idx}`;
+                  })()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-accent underline"
+                >
+                  View on PlotLink
+                </a>
+              )}
+              {fileData.txHash && (
+                <a
+                  href={`https://basescan.org/tx/${fileData.txHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted underline"
+                >
+                  BaseScan
+                </a>
+              )}
+              {isGenesis && walletAddress && fileData.storylineId && (!fileData.authorAddress || fileData.authorAddress.toLowerCase() === walletAddress.toLowerCase()) && (
+                <button
+                  onClick={() => setShowEditPanel((v) => !v)}
+                  className="px-2 py-0.5 border border-border text-xs rounded hover:bg-surface"
+                >
+                  {showEditPanel ? "Close Edit" : "Edit Story"}
+                </button>
+              )}
+            </div>
+            {/* Edit panel for published genesis files */}
+            {showEditPanel && isGenesis && fileData.storylineId && (
+              <div className="border border-border rounded p-3 flex flex-col gap-3 bg-surface">
+                {/* Cover image upload */}
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-xs font-medium text-foreground">Cover Image</span>
+                  <div className="flex items-start gap-3">
+                    {coverPreview && (
+                      <div className="relative">
+                        <img
+                          src={coverPreview}
+                          alt="Cover preview"
+                          className="w-16 h-24 object-cover rounded border border-border"
+                        />
+                        <button
+                          onClick={() => { setCoverFile(null); setCoverPreview(null); if (coverInputRef.current) coverInputRef.current.value = ""; }}
+                          className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-error text-white rounded-full text-xs flex items-center justify-center"
+                        >
+                          x
+                        </button>
+                      </div>
+                    )}
+                    <div className="flex flex-col gap-1">
+                      <input
+                        ref={coverInputRef}
+                        type="file"
+                        accept="image/webp,image/jpeg,image/png"
+                        onChange={handleCoverSelect}
+                        className="text-xs"
+                      />
+                      <span className="text-xs text-muted">WebP/JPEG, max 500KB, 600x900px recommended</span>
+                    </div>
+                  </div>
+                </div>
+                {/* Genre & Language */}
+                <div className="flex items-center gap-2">
+                  <select
+                    value={editGenre}
+                    onChange={(e) => setEditGenre(e.target.value)}
+                    className="px-2 py-1.5 text-xs border border-border rounded bg-surface text-foreground"
+                  >
+                    {GENRES.map((g) => (
+                      <option key={g} value={g}>{g}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={editLanguage}
+                    onChange={(e) => setEditLanguage(e.target.value)}
+                    className="px-2 py-1.5 text-xs border border-border rounded bg-surface text-foreground"
+                  >
+                    {LANGUAGES.map((l) => (
+                      <option key={l} value={l}>{l}</option>
+                    ))}
+                  </select>
+                </div>
+                {/* NSFW toggle */}
+                <label className="flex items-center gap-1.5 text-xs text-muted cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={editNsfw}
+                    onChange={(e) => setEditNsfw(e.target.checked)}
+                    className="rounded border-border"
+                  />
+                  This story contains adult content (18+)
+                </label>
+                {/* Save / status */}
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={handleEditSave}
+                    disabled={editSaving || !editMetaLoaded}
+                    className="px-3 py-1 bg-accent text-white text-xs rounded hover:bg-accent-dim disabled:opacity-50"
+                  >
+                    {editSaving ? "Saving..." : !editMetaLoaded ? "Loading..." : "Save Changes"}
+                  </button>
+                  {editSuccess && <span className="text-green-700 text-xs">Updated!</span>}
+                  {editError && <span className="text-error text-xs">{editError}</span>}
+                </div>
+              </div>
             )}
           </div>
         ) : (
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => storyName && fileName && onPublish?.(storyName, fileName)}
-              disabled={!!publishingFile || overLimit}
-              className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {publishingFile === fileName ? "Publishing..." : "Publish to PlotLink"}
-            </button>
-            {overLimit && (
-              <span className="text-error text-xs">Reduce content to publish</span>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              {(isGenesis) && (
+                <>
+                  <select
+                    value={selectedGenre}
+                    onChange={(e) => setSelectedGenre(e.target.value)}
+                    className="px-2 py-1.5 text-xs border border-border rounded bg-surface text-foreground"
+                  >
+                    {GENRES.map((g) => (
+                      <option key={g} value={g}>{g}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={selectedLanguage}
+                    onChange={(e) => setSelectedLanguage(e.target.value)}
+                    className="px-2 py-1.5 text-xs border border-border rounded bg-surface text-foreground"
+                  >
+                    {LANGUAGES.map((l) => (
+                      <option key={l} value={l}>{l}</option>
+                    ))}
+                  </select>
+                </>
+              )}
+              <button
+                onClick={() => storyName && fileName && onPublish?.(storyName, fileName, selectedGenre, selectedLanguage, isNsfw)}
+                disabled={!!publishingFile || overLimit}
+                className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {publishingFile === fileName ? "Publishing..." : "Publish to PlotLink"}
+              </button>
+              {overLimit && (
+                <span className="text-error text-xs">Reduce content to publish</span>
+              )}
+            </div>
+            {(isGenesis) && (
+              <div className="flex items-center gap-2">
+                <label className="flex items-center gap-1.5 text-xs text-muted cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isNsfw}
+                    onChange={(e) => setIsNsfw(e.target.checked)}
+                    className="rounded border-border"
+                  />
+                  This story contains adult content (18+)
+                </label>
+                {isNsfw && (
+                  <span className="text-xs text-amber-600">Adult content will be hidden from the default browse view.</span>
+                )}
+              </div>
             )}
           </div>
         )}

package/app/web/components/StoriesPage.tsx

@@ -38,6 +38,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [publishingFile, setPublishingFile] = useState<string | null>(null);
   const [publishProgress, setPublishProgress] = useState<string>("");
+  const [walletAddress, setWalletAddress] = useState<string | null>(null);
   const [ratio, setRatio] = useState(loadRatio);
   const [untitledSessions, setUntitledSessions] = useState<string[]>([]);
   const knownStoriesRef = useRef<Set<string>>(new Set());
@@ -45,6 +46,14 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const dragging = useRef(false);
 
+  // Fetch wallet address for edit panel authorship check
+  useEffect(() => {
+    authFetch("/api/wallet")
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => { if (data?.address) setWalletAddress(data.address); })
+      .catch(() => {});
+  }, [authFetch]);
+
   // Persist ratio to localStorage
   useEffect(() => {
     try { localStorage.setItem(STORAGE_KEY, String(ratio)); } catch { /* ignore */ }
@@ -177,7 +186,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
     window.addEventListener("mouseup", onMouseUp);
   }, []);
 
-  const handlePublish = useCallback(async (storyName: string, fileName: string) => {
+  const handlePublish = useCallback(async (storyName: string, fileName: string, genre: string, language: string, isNsfw: boolean) => {
     setPublishingFile(fileName);
     setPublishProgress("Reading file...");
 
@@ -191,17 +200,6 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
       const titleMatch = fileData.content.match(/^#\s+(.+)$/m);
       const title = titleMatch ? titleMatch[1].slice(0, 60) : fileName.replace(".md", "");
 
-      // Determine genre from structure.md if available
-      let genre = "Fiction";
-      try {
-        const structRes = await authFetch(`/api/stories/${storyName}/structure.md`);
-        if (structRes.ok) {
-          const structData = await structRes.json();
-          const genreMatch = structData.content.match(/genre[:\s]+(.+)/i);
-          if (genreMatch) genre = genreMatch[1].trim().slice(0, 30);
-        }
-      } catch { /* ignore */ }
-
       // For plot files, find the storylineId from the genesis publish status
       let storylineId: number | undefined;
       if (fileName.match(/^plot-\d+\.md$/)) {
@@ -226,7 +224,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
       const publishRes = await authFetch("/api/publish/file", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ storyName, fileName, title, content: fileData.content, genre, storylineId }),
+        body: JSON.stringify({ storyName, fileName, title, content: fileData.content, genre, language, isNsfw, storylineId }),
       });
 
       if (!publishRes.ok) {
@@ -260,6 +258,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
                     contentCid: data.contentCid,
                     gasCost: data.gasCost,
                     indexError: data.indexError,
+                    authorAddress: walletAddress,
                   }),
                 });
               }
@@ -362,6 +361,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
           authFetch={authFetch}
           onPublish={handlePublish}
           publishingFile={publishingFile}
+          walletAddress={walletAddress}
         />
         {publishProgress && (
           <div className="px-3 py-1.5 bg-surface border-t border-border text-xs text-muted">