From 59d02c606578d47181efe08734313580ce55cba4 Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Mon, 25 Sep 2023 19:05:30 +0100
Subject: [PATCH 1/4] Share link button

---
 www/app/transcripts/[transcriptId]/page.tsx |  3 ++
 www/app/transcripts/shareLink.tsx           | 52 +++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 www/app/transcripts/shareLink.tsx

diff --git a/www/app/transcripts/[transcriptId]/page.tsx b/www/app/transcripts/[transcriptId]/page.tsx
index 17cee689..8d5ea934 100644
--- a/www/app/transcripts/[transcriptId]/page.tsx
+++ b/www/app/transcripts/[transcriptId]/page.tsx
@@ -10,6 +10,7 @@ import { Topic } from "../webSocketTypes";
 import React, { useEffect, useState } from "react";
 import "../../styles/button.css";
 import FinalSummary from "../finalSummary";
+import ShareLink from "../shareLink";
 
 type TranscriptDetails = {
   params: {
@@ -55,6 +56,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               autoscroll={false}
             />
             <section className="relative w-full h-auto max-h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
+              <ShareLink />
+
               <div className="py-2 h-full">
                 {transcript?.response?.longSummary && (
                   <FinalSummary text={transcript?.response?.longSummary} />
diff --git a/www/app/transcripts/shareLink.tsx b/www/app/transcripts/shareLink.tsx
new file mode 100644
index 00000000..e0e536b9
--- /dev/null
+++ b/www/app/transcripts/shareLink.tsx
@@ -0,0 +1,52 @@
+import React, { useState, useRef } from "react";
+
+const ShareLink = () => {
+  const [isCopied, setIsCopied] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const currentURL = window.location.href;
+
+  const handleCopyClick = () => {
+    if (inputRef.current) {
+      inputRef.current.select();
+      document.execCommand("copy");
+      setIsCopied(true);
+
+      // Reset the copied state after 2 seconds
+      setTimeout(() => setIsCopied(false), 2000);
+    }
+  };
+
+  return (
+    <div
+      className="p-4 mt-4 rounded"
+      style={{ background: "rgba(96, 165, 250, 0.2)" }}
+    >
+      <p className="text-sm mb-2">
+        You can share this link with others. Anyone with the link will have
+        access to the page, including the full audio recording, for the next 10
+        days.
+      </p>
+      <div className="flex items-center">
+        <input
+          type="text"
+          readOnly
+          value={currentURL}
+          ref={inputRef}
+          className="border rounded p-2 flex-grow mr-2 text-sm bg-slate-100 outline-slate-400"
+        />
+        <button
+          onClick={handleCopyClick}
+          className={
+            (isCopied ? "bg-blue-500" : "bg-blue-400") +
+            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+          }
+        >
+          {isCopied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ShareLink;

From 69855578695384d3c89a5c9249557e57df348477 Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Mon, 25 Sep 2023 19:11:32 +0100
Subject: [PATCH 2/4] Mobile support

---
 www/app/transcripts/shareLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/app/transcripts/shareLink.tsx b/www/app/transcripts/shareLink.tsx
index e0e536b9..a4e23062 100644
--- a/www/app/transcripts/shareLink.tsx
+++ b/www/app/transcripts/shareLink.tsx
@@ -19,7 +19,7 @@ const ShareLink = () => {
 
   return (
     <div
-      className="p-4 mt-4 rounded"
+      className="p-2 md:p-4 mt-8 md:mt-4 rounded"
       style={{ background: "rgba(96, 165, 250, 0.2)" }}
     >
       <p className="text-sm mb-2">

From f0824110cd30c8e1c1aae162f8e5d198228cdb75 Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Mon, 25 Sep 2023 19:29:29 +0100
Subject: [PATCH 3/4] Made copy link button same height as text input

---
 www/app/transcripts/shareLink.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/www/app/transcripts/shareLink.tsx b/www/app/transcripts/shareLink.tsx
index a4e23062..2dad490a 100644
--- a/www/app/transcripts/shareLink.tsx
+++ b/www/app/transcripts/shareLink.tsx
@@ -34,6 +34,7 @@ const ShareLink = () => {
           value={currentURL}
           ref={inputRef}
           className="border rounded p-2 flex-grow mr-2 text-sm bg-slate-100 outline-slate-400"
+          style={{ minHeight: "38px" }}
         />
         <button
           onClick={handleCopyClick}

From 5fb38af77e4db886a98ceb7de8b432c335374080 Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Mon, 25 Sep 2023 19:30:30 +0100
Subject: [PATCH 4/4] Update shareLink.tsx

---
 www/app/transcripts/shareLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/app/transcripts/shareLink.tsx b/www/app/transcripts/shareLink.tsx
index 2dad490a..a8de5239 100644
--- a/www/app/transcripts/shareLink.tsx
+++ b/www/app/transcripts/shareLink.tsx
@@ -34,7 +34,6 @@ const ShareLink = () => {
           value={currentURL}
           ref={inputRef}
           className="border rounded p-2 flex-grow mr-2 text-sm bg-slate-100 outline-slate-400"
-          style={{ minHeight: "38px" }}
         />
         <button
           onClick={handleCopyClick}
@@ -42,6 +41,7 @@ const ShareLink = () => {
             (isCopied ? "bg-blue-500" : "bg-blue-400") +
             " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
           }
+          style={{ minHeight: "38px" }}
         >
           {isCopied ? "Copied!" : "Copy"}
         </button>