Comprehensive admin + user dashboards (production-ready)

components/app/script-editor.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
-import { Loader2, Save, RefreshCw, AudioLines } from "lucide-react";
+import { Loader2, Save, RefreshCw, AudioLines, Clipboard, Clock } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import {
   updateScriptAction,
   regenerateAction,
@@ -27,6 +28,25 @@ interface Script {
   sections: Section[];
 }
 
+// Average speaking pace used to estimate spoken duration from word count.
+const WORDS_PER_MINUTE = 150;
+
+function wordCount(text: string): number {
+  const t = text.trim();
+  return t ? t.split(/\s+/).length : 0;
+}
+
+function estimateDuration(words: number): string {
+  const totalSec = Math.round((words / WORDS_PER_MINUTE) * 60);
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return m > 0 ? `${m}m ${s}s` : `${s}s`;
+}
+
+function sectionWords(section: Section): number {
+  return section.turns.reduce((n, t) => n + wordCount(t.text), 0);
+}
+
 export function ScriptEditor({
   episodeId,
   script,
@@ -43,6 +63,11 @@ export function ScriptEditor({
   const [busySection, setBusySection] = useState<string | null>(null);
   const [rerecording, setRerecording] = useState(false);
 
+  const totalWords = useMemo(
+    () => sections.reduce((n, s) => n + sectionWords(s), 0),
+    [sections]
+  );
+
   function updateTurn(si: number, ti: number, text: string) {
     setSections((prev) =>
       prev.map((s, i) =>
@@ -98,13 +123,47 @@ export function ScriptEditor({
     }
   }
 
+  function copyTranscript() {
+    const lines: string[] = [script.title, ""];
+    for (const section of sections) {
+      lines.push(section.title, "");
+      for (const turn of section.turns) {
+        const name = speakerNames[turn.speakerKey] ?? turn.speakerKey;
+        lines.push(`${name}: ${turn.text}`, "");
+      }
+    }
+    navigator.clipboard
+      .writeText(lines.join("\n").trimEnd())
+      .then(() => toast.success("Transcript copied"))
+      .catch(() => toast.error("Could not copy"));
+  }
+
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold">Script</h2>
-        <div className="flex gap-2">
+      {/* Sticky save bar — dirty-aware. */}
+      <div className="sticky top-2 z-10 flex flex-wrap items-center justify-between gap-3 rounded-2xl border bg-card/95 px-4 py-3 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-card/80">
+        <div className="flex items-center gap-3">
+          <h2 className="font-display text-lg font-extrabold tracking-tight">Script</h2>
+          <span className="hidden items-center gap-1.5 text-xs text-muted-foreground sm:inline-flex">
+            <Clock className="h-3.5 w-3.5" />
+            {totalWords.toLocaleString()} words · ~{estimateDuration(totalWords)}
+          </span>
+          {dirty && (
+            <Badge variant="warning" className="hidden sm:inline-flex">
+              Unsaved changes
+            </Badge>
+          )}
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Button variant="ghost" size="sm" onClick={copyTranscript}>
+            <Clipboard className="h-4 w-4" /> Copy full transcript
+          </Button>
           <Button variant="outline" size="sm" onClick={rerecord} disabled={rerecording}>
-            {rerecording ? <Loader2 className="h-4 w-4 animate-spin" /> : <AudioLines className="h-4 w-4" />}
+            {rerecording ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <AudioLines className="h-4 w-4" />
+            )}
             Re-record audio
           </Button>
           <Button size="sm" onClick={save} disabled={!dirty || saving}>
@@ -114,40 +173,48 @@ export function ScriptEditor({
         </div>
       </div>
 
-      {sections.map((section, si) => (
-        <Card key={section.id}>
-          <CardHeader className="flex flex-row items-center justify-between py-3">
-            <CardTitle className="text-sm">{section.title}</CardTitle>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => regenSection(section.id)}
-              disabled={busySection === section.id}
-            >
-              {busySection === section.id ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <RefreshCw className="h-4 w-4" />
-              )}
-              Regenerate
-            </Button>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {section.turns.map((turn, ti) => (
-              <div key={ti} className="space-y-1">
-                <span className="text-xs font-medium text-muted-foreground">
-                  {speakerNames[turn.speakerKey] ?? turn.speakerKey}
-                </span>
-                <Textarea
-                  value={turn.text}
-                  onChange={(e) => updateTurn(si, ti, e.target.value)}
-                  rows={Math.max(2, Math.ceil(turn.text.length / 80))}
-                />
+      {sections.map((section, si) => {
+        const words = sectionWords(section);
+        return (
+          <Card key={section.id}>
+            <CardHeader className="flex flex-row items-center justify-between gap-2 py-3">
+              <div className="min-w-0">
+                <CardTitle className="truncate text-sm">{section.title}</CardTitle>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {words.toLocaleString()} words · ▶ {estimateDuration(words)}
+                </p>
               </div>
-            ))}
-          </CardContent>
-        </Card>
-      ))}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => regenSection(section.id)}
+                disabled={busySection === section.id}
+              >
+                {busySection === section.id ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+                Regenerate
+              </Button>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {section.turns.map((turn, ti) => (
+                <div key={ti} className="space-y-1">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {speakerNames[turn.speakerKey] ?? turn.speakerKey}
+                  </span>
+                  <Textarea
+                    value={turn.text}
+                    onChange={(e) => updateTurn(si, ti, e.target.value)}
+                    rows={Math.max(2, Math.ceil(turn.text.length / 80))}
+                  />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        );
+      })}
     </div>
   );
 }