From e27baeb7f4bdd4817e95db937c13ac32e0f2bac4 Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Mon, 30 Oct 2023 18:57:32 +0000
Subject: [PATCH] Finished UI

---
 www/app/[domain]/transcripts/finalSummary.tsx | 135 ++++++++++++------
 .../[domain]/transcripts/transcriptTitle.tsx  |  63 ++++++--
 2 files changed, 146 insertions(+), 52 deletions(-)

diff --git a/www/app/[domain]/transcripts/finalSummary.tsx b/www/app/[domain]/transcripts/finalSummary.tsx
index 9f8e4f82..b60a42cd 100644
--- a/www/app/[domain]/transcripts/finalSummary.tsx
+++ b/www/app/[domain]/transcripts/finalSummary.tsx
@@ -16,12 +16,12 @@ export default function FinalSummary(props: FinalSummaryProps) {
   const [isCopiedSummary, setIsCopiedSummary] = useState(false);
   const [isCopiedTranscript, setIsCopiedTranscript] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
+  const [preEditSummary, setPreEditSummary] = useState(props.summary);
   const [editedSummary, setEditedSummary] = useState(props.summary);
   const api = getApi(props.protectedPath);
 
   const updateSummary = async (newSummary: string, transcriptId: string) => {
     try {
-      setEditedSummary(newSummary);
       const updatedTranscript = await api.v1TranscriptUpdate({
         transcriptId,
         updateTranscript: {
@@ -34,7 +34,7 @@ export default function FinalSummary(props: FinalSummaryProps) {
     }
   };
 
-  const handleCopySummaryClick = () => {
+  const onCopySummaryClick = () => {
     let text_to_copy = finalSummaryRef.current?.innerText;
 
     text_to_copy &&
@@ -45,7 +45,7 @@ export default function FinalSummary(props: FinalSummaryProps) {
       });
   };
 
-  const handleCopyTranscriptClick = () => {
+  const onCopyTranscriptClick = () => {
     let text_to_copy = props.fullTranscript;
 
     text_to_copy &&
@@ -56,58 +56,113 @@ export default function FinalSummary(props: FinalSummaryProps) {
       });
   };
 
-  const handleEditMode = () => {
-    setIsEditMode(!isEditMode);
+  const onEditClick = () => {
+    setPreEditSummary(editedSummary);
+    setIsEditMode(true);
+  };
+
+  const onDiscardClick = () => {
+    setEditedSummary(preEditSummary);
+    setIsEditMode(false);
+  };
+
+  const onSaveClick = () => {
+    updateSummary(editedSummary, props.transcriptId);
+    setIsEditMode(false);
+  };
+
+  const handleTextAreaKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      onDiscardClick();
+    }
+
+    if (e.key === "Enter" && e.shiftKey) {
+      onSaveClick();
+      e.preventDefault(); // prevent the default action of adding a new line
+    }
   };
 
   return (
-    <div className="overflow-y-auto h-auto max-h-full">
+    <div
+      className={
+        (isEditMode ? "overflow-y-none" : "overflow-y-auto") +
+        " h-auto max-h-full flex flex-col h-full"
+      }
+    >
       <div className="flex flex-row flex-wrap-reverse justify-between items-center">
         <h2 className="text-lg sm:text-xl md:text-2xl font-bold">
           Final Summary
         </h2>
+
         <div className="ml-auto flex space-x-2 mb-2">
-          <button
-            onClick={handleEditMode}
-            className={
-              "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
-            }
-          >
-            {isEditMode ? "Save" : "Edit Summary"}
-          </button>
-          <button
-            onClick={handleCopyTranscriptClick}
-            className={
-              (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
-              " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
-            }
-            style={{ minHeight: "30px" }}
-          >
-            {isCopiedTranscript ? "Copied!" : "Copy Full Transcript"}
-          </button>
-          <button
-            onClick={handleCopySummaryClick}
-            className={
-              (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
-              " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
-            }
-            style={{ minHeight: "30px" }}
-          >
-            {isCopiedSummary ? "Copied!" : "Copy Summary"}
-          </button>
+          {isEditMode && (
+            <>
+              <button
+                onClick={onDiscardClick}
+                className={"text-gray-500 text-sm hover:underline"}
+              >
+                Discard Changes
+              </button>
+              <button
+                onClick={onSaveClick}
+                className={
+                  "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+                }
+              >
+                Save Changes
+              </button>
+            </>
+          )}
+
+          {!isEditMode && (
+            <>
+              <button
+                onClick={onEditClick}
+                className={
+                  "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base text-xs"
+                }
+              >
+                Edit Summary
+              </button>
+              <button
+                onClick={onCopyTranscriptClick}
+                className={
+                  (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
+                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base text-xs"
+                }
+                style={{ minHeight: "30px" }}
+              >
+                {isCopiedTranscript ? "Copied!" : "Copy Transcript"}
+              </button>
+              <button
+                onClick={onCopySummaryClick}
+                className={
+                  (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
+                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base text-xs"
+                }
+                style={{ minHeight: "30px" }}
+              >
+                {isCopiedSummary ? "Copied!" : "Copy Summary"}
+              </button>
+            </>
+          )}
         </div>
       </div>
+
       {isEditMode ? (
-        <textarea
-          value={editedSummary}
-          onChange={(e) => updateSummary(e.target.value, props.transcriptId)}
-          className="markdown"
-        />
+        <div className="flex-grow overflow-y-none">
+          <textarea
+            value={editedSummary}
+            onChange={(e) => setEditedSummary(e.target.value)}
+            className="markdown w-full h-full d-block p-2 border rounded shadow-sm"
+            onKeyDown={(e) => handleTextAreaKeyDown(e)}
+          />
+        </div>
       ) : (
         <p ref={finalSummaryRef} className="markdown">
           <Markdown>{editedSummary}</Markdown>
         </p>
-      )}{" "}
+      )}
     </div>
   );
 }
diff --git a/www/app/[domain]/transcripts/transcriptTitle.tsx b/www/app/[domain]/transcripts/transcriptTitle.tsx
index 0f9b2eeb..d2f901fa 100644
--- a/www/app/[domain]/transcripts/transcriptTitle.tsx
+++ b/www/app/[domain]/transcripts/transcriptTitle.tsx
@@ -8,10 +8,13 @@ type TranscriptTitle = {
 };
 
 const TranscriptTitle = (props: TranscriptTitle) => {
-  const [currentTitle, setCurrentTitle] = useState(props.title);
+  const [displayedTitle, setDisplayedTitle] = useState(props.title);
+  const [preEditTitle, setPreEditTitle] = useState(props.title);
+  const [isEditing, setIsEditing] = useState(false);
   const api = getApi(props.protectedPath);
 
   const updateTitle = async (newTitle: string, transcriptId: string) => {
+    if (!api) return;
     try {
       const updatedTranscript = await api.v1TranscriptUpdate({
         transcriptId,
@@ -24,21 +27,57 @@ const TranscriptTitle = (props: TranscriptTitle) => {
       console.error("Failed to update transcript:", err);
     }
   };
-  const handleClick = () => {
-    const newTitle = prompt("Please enter the new title:", currentTitle);
-    if (newTitle !== null) {
-      setCurrentTitle(newTitle);
-      updateTitle(newTitle, props.transcriptId);
+
+  const handleTitleClick = () => {
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+    if (isMobile) {
+      // Use prompt
+      const newTitle = prompt("Please enter the new title:", displayedTitle);
+      if (newTitle !== null) {
+        setDisplayedTitle(newTitle);
+        updateTitle(newTitle, props.transcriptId);
+      }
+    } else {
+      setPreEditTitle(displayedTitle);
+      setIsEditing(true);
+    }
+  };
+
+  const handleChange = (e) => {
+    setDisplayedTitle(e.target.value);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      updateTitle(displayedTitle, props.transcriptId);
+      setIsEditing(false);
+    } else if (e.key === "Escape") {
+      setDisplayedTitle(preEditTitle);
+      setIsEditing(false);
     }
   };
 
   return (
-    <h2
-      className="text-2xl lg:text-4xl font-extrabold text-center mb-4"
-      onClick={handleClick}
-    >
-      {currentTitle}
-    </h2>
+    <>
+      {isEditing ? (
+        <input
+          type="text"
+          value={displayedTitle}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          autoFocus
+          className="text-2xl lg:text-4xl font-extrabold text-center mb-4 w-full border-none bg-transparent overflow-hidden h-[fit-content]"
+        />
+      ) : (
+        <h2
+          className="text-2xl lg:text-4xl font-extrabold text-center mb-4 cursor-pointer"
+          onClick={handleTitleClick}
+        >
+          {displayedTitle}
+        </h2>
+      )}
+    </>
   );
 };