From 3f8431f67086ddef7b3dbbc6df375a3bd0a6047e Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sat, 29 Jul 2023 08:15:12 +0700
Subject: [PATCH 01/18] view model page init

---
 .../src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx

diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
new file mode 100644
index 0000000000..6a32d0d109
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+interface VcModelViewPageProps {}
+
+export default function VcModelViewPage(props: VcModelViewPageProps) {
+  return <div>VcModelViewPage</div>;
+}

From 3a6c28bf88a1ba90865ec7f63d8a3c5d444e9d50 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 31 Jul 2023 14:24:21 +0700
Subject: [PATCH 02/18] page container addition

---
 packages/fakeyou.com/src/v2/view/PageContainer.tsx           | 5 +++++
 .../src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx   | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 5210ac206b..b5ed8144be 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -78,6 +78,7 @@ import { UploadVoiceConversionModel } from "./pages/upload/UploadVoiceConversion
 import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels";
 import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage";
 import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage";
+import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -521,6 +522,10 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/voice-conversion/:token">
+              <VcModelViewPage />
+            </Route>
+
             <Route path="/about">
               <AboutPage />
             </Route>
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
index 6a32d0d109..8292f89871 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
@@ -1,7 +1,9 @@
 import React from "react";
+import { useParams } from "react-router-dom";
 
 interface VcModelViewPageProps {}
 
 export default function VcModelViewPage(props: VcModelViewPageProps) {
+  let { token } = useParams() as { token: string };
   return <div>VcModelViewPage</div>;
 }

From a18bbab4053fe1e58fa3532fcf828d1c941e2ec2 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 31 Jul 2023 14:36:04 +0700
Subject: [PATCH 03/18] panel component

---
 .../src/components/common/Panel.tsx            | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 packages/fakeyou.com/src/components/common/Panel.tsx

diff --git a/packages/fakeyou.com/src/components/common/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel.tsx
new file mode 100644
index 0000000000..6ad8c5dcf0
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Panel.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { panel } from "data/animation";
+
+interface PanelProps {
+  children: React.ReactNode;
+  padding?: boolean;
+}
+
+export default function Panel(props: PanelProps) {
+  return (
+    <motion.div className="container-panel" variants={panel}>
+      <div className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""}`}>
+        {props.children}
+      </div>
+    </motion.div>
+  );
+}

From 0c6e4b7366ca31dd04965fe2eed61ca584bfd991 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 31 Jul 2023 20:33:52 +0700
Subject: [PATCH 04/18] v2v model page update

---
 .../components/common/PageHeaderModelView.tsx | 34 +++++++
 .../src/components/common/Panel.tsx           |  7 +-
 .../fakeyou.com/src/scss/site-refresh.scss    |  7 ++
 .../fakeyou.com/src/v2/view/PageContainer.tsx | 13 ++-
 .../vc/vc_model_view/VcModelViewPage.tsx      | 96 ++++++++++++++++++-
 5 files changed, 149 insertions(+), 8 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx

diff --git a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
new file mode 100644
index 0000000000..0a6e561d63
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+interface PageHeaderModelViewProps {
+  titleIcon?: React.ReactNode;
+  title: string;
+  subText: React.ReactNode;
+  tags?: string[];
+}
+
+export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
+  return (
+    <div className="container-panel hero-section pt-3 pb-4">
+      <div className="panel p-3 py-4 p-md-4">
+        <div className="row g-3">
+          <div className="col-12 col-lg-8">
+            <h2 className="fw-bold">
+              {props.titleIcon}
+              {props.title}
+            </h2>
+            <p>{props.subText}</p>
+          </div>
+          <div className="col-12 col-lg-4 d-flex flex-wrap justify-content-lg-end gap-2">
+            {props.tags &&
+              props.tags.map((tag, index) => (
+                <div key={index}>
+                  <span className="badge badge-tag">{tag}</span>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel.tsx
index 6ad8c5dcf0..8ae8d478ce 100644
--- a/packages/fakeyou.com/src/components/common/Panel.tsx
+++ b/packages/fakeyou.com/src/components/common/Panel.tsx
@@ -5,12 +5,17 @@ import { panel } from "data/animation";
 interface PanelProps {
   children: React.ReactNode;
   padding?: boolean;
+  mb?: boolean;
 }
 
 export default function Panel(props: PanelProps) {
   return (
     <motion.div className="container-panel" variants={panel}>
-      <div className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""}`}>
+      <div
+        className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""} ${
+          props.mb ? "mb-4" : ""
+        }`}
+      >
         {props.children}
       </div>
     </motion.div>
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 65f8940ed3..eebb2ff48b 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -662,6 +662,13 @@ styles with important tags:
       background-color: #fff3cd;
       color: #664d03;
     }
+
+    &.badge-tag {
+      font-size: 13px;
+      padding: 6px 12px;
+      background-color: $input-dark;
+      color: $white;
+    }
   }
 
   .badge-model {
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index b5ed8144be..976d368bd9 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -502,6 +502,15 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/voice-conversion/:token">
+              <VcModelViewPage
+                sessionSubscriptionsWrapper={
+                  this.props.sessionSubscriptionsWrapper
+                }
+                inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+              />
+            </Route>
+
             <Route path="/voice-conversion">
               <VcModelListPage
                 sessionWrapper={this.props.sessionWrapper}
@@ -522,10 +531,6 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
-            <Route path="/voice-conversion/:token">
-              <VcModelViewPage />
-            </Route>
-
             <Route path="/about">
               <AboutPage />
             </Route>
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
index 8292f89871..5f850ae2ef 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
@@ -1,9 +1,99 @@
+import {
+  faBarsStaggered,
+  faDeleteLeft,
+  faVolumeHigh,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
+import Panel from "components/common/Panel";
 import React from "react";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { SessionVoiceConversionResultsList } from "v2/view/_common/SessionVoiceConversionResultsList";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import PageHeaderModelView from "components/common/PageHeaderModelView";
 
-interface VcModelViewPageProps {}
+interface VcModelViewPageProps {
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+  inferenceJobsByCategory: any;
+}
 
 export default function VcModelViewPage(props: VcModelViewPageProps) {
   let { token } = useParams() as { token: string };
-  return <div>VcModelViewPage</div>;
+
+  const title = "Solid Snake";
+  const subText = (
+    <div className="d-flex align-items-center gap-2">
+      <div>
+        <span className="badge-model badge-model-rvc fs-6">RVCv2</span>
+      </div>
+      <p>
+        V2V model created by <Link to="/">Vegito1089</Link>
+      </p>
+    </div>
+  );
+  const tags = ["Speaking", "English", "Character", "Singing", "Spanish"];
+
+  return (
+    <div>
+      <PageHeaderModelView title={title} subText={subText} tags={tags} />
+
+      <Panel padding mb>
+        <div className="row g-5">
+          <div className="col-12 col-lg-6">
+            <h4 className="mb-3">
+              <FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
+              Use Voice
+            </h4>
+            {/* have to replace this below with Voice conversion stuff instead of the textarea */}
+            <form onSubmit={() => {}}>
+              <textarea
+                onChange={() => {}}
+                value={""}
+                className="form-control"
+                placeholder="Textual shenanigans go here..."
+                rows={6}
+              ></textarea>
+              <div className="d-flex gap-3 mt-3">
+                <button className="btn btn-primary w-100">
+                  <FontAwesomeIcon icon={faVolumeHigh} className="me-2" />
+                  Speak
+                </button>
+
+                <button
+                  className="btn btn-destructive w-100"
+                  onClick={() => {}}
+                >
+                  <FontAwesomeIcon icon={faDeleteLeft} className="me-2" />
+                  Clear
+                </button>
+              </div>
+            </form>
+          </div>
+          <div className="col-12 col-lg-6">
+            <h4 className="mb-3">
+              <FontAwesomeIcon icon={faBarsStaggered} className="me-3" />
+              Session V2V Results
+            </h4>
+            <div className="d-flex flex-column gap-3 session-tts-section session-vc-section">
+              <SessionVoiceConversionResultsList
+                inferenceJobs={
+                  props.inferenceJobsByCategory.get(
+                    FrontendInferenceJobType.VoiceConversion
+                  )!
+                }
+                sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
+              />
+            </div>
+          </div>
+        </div>
+      </Panel>
+      <Panel padding>
+        <h4 className="text-center text-lg-start mb-4">
+          <FontAwesomeIcon icon={faBarsStaggered} className="me-3" />
+          Voice Details
+        </h4>
+        lol
+      </Panel>
+    </div>
+  );
 }

From 9ccd80da312f1da37f8c91c412dd0b9bcad10a7a Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 3 Aug 2023 16:51:17 +0700
Subject: [PATCH 05/18] v2v model view page update

---
 .../components/common/PageHeaderModelView.tsx |  37 +++--
 .../src/components/common/Panel.tsx           |   2 +-
 .../src/components/common/ShareButton.tsx     |  43 ++++++
 .../fakeyou.com/src/scss/site-refresh.scss    |  25 +++-
 .../fakeyou.com/src/v2/view/PageContainer.tsx |   1 +
 .../vc/vc_model_view/VcModelViewPage.tsx      | 129 +++++++++++++-----
 6 files changed, 190 insertions(+), 47 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/ShareButton.tsx

diff --git a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
index 0a6e561d63..cdcd186b98 100644
--- a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
+++ b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
@@ -1,17 +1,21 @@
 import React from "react";
+import Panel from "./Panel";
 
 interface PageHeaderModelViewProps {
   titleIcon?: React.ReactNode;
   title: string;
   subText: React.ReactNode;
   tags?: string[];
+  ratingBtn?: React.ReactNode;
+  ratingStats?: React.ReactNode;
+  extras?: React.ReactNode;
 }
 
 export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
   return (
-    <div className="container-panel hero-section pt-3 pb-4">
-      <div className="panel p-3 py-4 p-md-4">
-        <div className="row g-3">
+    <div className="pt-3 pb-4">
+      <Panel padding>
+        <div className="row gy-3">
           <div className="col-12 col-lg-8">
             <h2 className="fw-bold">
               {props.titleIcon}
@@ -19,16 +23,27 @@ export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
             </h2>
             <p>{props.subText}</p>
           </div>
-          <div className="col-12 col-lg-4 d-flex flex-wrap justify-content-lg-end gap-2">
-            {props.tags &&
-              props.tags.map((tag, index) => (
-                <div key={index}>
-                  <span className="badge badge-tag">{tag}</span>
-                </div>
-              ))}
+          <div className="col-12 col-lg-4">
+            <div className="d-flex gap-2 flex-wrap justify-content-lg-end">
+              {props.tags &&
+                props.tags.map((tag, index) => (
+                  <div key={index}>
+                    <span className="badge badge-tag">{tag}</span>
+                  </div>
+                ))}
+            </div>
           </div>
         </div>
-      </div>
+        <hr className="my-4" />
+
+        <div className="d-flex flex-column flex-lg-row flex-column-reverse gap-3">
+          <div className="d-flex gap-3">
+            {props.ratingBtn}
+            {props.extras}
+          </div>
+          {props.ratingStats}
+        </div>
+      </Panel>
     </div>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel.tsx
index 8ae8d478ce..646548a284 100644
--- a/packages/fakeyou.com/src/components/common/Panel.tsx
+++ b/packages/fakeyou.com/src/components/common/Panel.tsx
@@ -12,7 +12,7 @@ export default function Panel(props: PanelProps) {
   return (
     <motion.div className="container-panel" variants={panel}>
       <div
-        className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""} ${
+        className={`panel ${props.padding ? "p-3 py-lg-4 p-md-4" : ""} ${
           props.mb ? "mb-4" : ""
         }`}
       >
diff --git a/packages/fakeyou.com/src/components/common/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton.tsx
new file mode 100644
index 0000000000..cb9e0852d5
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ShareButton.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import Tippy from "@tippyjs/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink } from "@fortawesome/pro-solid-svg-icons";
+
+interface ShareButtonProps {
+  url: string;
+}
+
+export default function ShareButton(props: ShareButtonProps) {
+  const [tippyContent, setTippyContent] = useState("Share");
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(props.url);
+      setTippyContent("Link Copied");
+      setTimeout(() => {
+        setTippyContent("Share");
+      }, 800);
+    } catch (error) {
+      console.error("Failed to copy link to clipboard:", error);
+    }
+  };
+
+  return (
+    <div className="d-flex">
+      <Tippy
+        content={tippyContent}
+        hideOnClick={false}
+        placement="bottom"
+        theme="fakeyou"
+        arrow={false}
+      >
+        <button className="btn-share" onClick={copyToClipboard} type="button">
+          <span>
+            <FontAwesomeIcon icon={faLink} className="me-2" />
+          </span>
+          Share Link
+        </button>
+      </Tippy>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index eebb2ff48b..52c1901821 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -869,18 +869,18 @@ styles with important tags:
     font-weight: 500;
     font-size: 17px;
     background-color: lighten($secondary, 4%);
-    border-radius: 50px;
+    border-radius: 0.5rem;
     border: none;
     padding: 6px 20px;
     color: rgba($white, 0.5);
     transition: 0.1s all;
 
     &.left {
-      border-radius: 50px 0px 0px 50px;
+      border-radius: 0.5rem 0px 0px 0.5rem;
     }
 
     &.right {
-      border-radius: 0px 50px 50px 5px;
+      border-radius: 0px 0.5rem 0.5rem 0px;
     }
 
     &.rated {
@@ -893,6 +893,25 @@ styles with important tags:
     }
   }
 
+  .btn-share {
+    font-weight: 500;
+    font-size: 14px;
+    background-color: lighten($secondary, 4%);
+    border-radius: 0.5rem;
+    border: none;
+    padding: 8.25px 20px;
+    color: $white;
+    transition: 0.1s all;
+
+    &:hover {
+      background-color: lighten($secondary, 10%);
+    }
+
+    &:active {
+      background-color: lighten($secondary, 15%);
+    }
+  }
+
   .rating-icon {
     color: #ffbc39;
 
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 976d368bd9..93602724bc 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -504,6 +504,7 @@ class PageContainer extends React.Component<Props, State> {
 
             <Route path="/voice-conversion/:token">
               <VcModelViewPage
+                sessionWrapper={this.props.sessionWrapper}
                 sessionSubscriptionsWrapper={
                   this.props.sessionSubscriptionsWrapper
                 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
index 5f850ae2ef..22551e8b52 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
@@ -1,18 +1,28 @@
+import React, { useState } from "react";
 import {
   faBarsStaggered,
-  faDeleteLeft,
+  faEdit,
+  faEye,
+  faMemoCircleInfo,
+  faMessages,
+  faTrash,
   faVolumeHigh,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import Panel from "components/common/Panel";
-import React from "react";
 import { Link, useParams } from "react-router-dom";
 import { SessionVoiceConversionResultsList } from "v2/view/_common/SessionVoiceConversionResultsList";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import PageHeaderModelView from "components/common/PageHeaderModelView";
+import { CommentComponent } from "v2/view/_common/comments/CommentComponent";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { RatingButtons } from "v2/view/_common/ratings/RatingButtons";
+import { RatingStats } from "v2/view/_common/ratings/RatingStats";
+import ShareButton from "components/common/ShareButton";
 
 interface VcModelViewPageProps {
+  sessionWrapper: SessionWrapper;
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
   inferenceJobsByCategory: any;
 }
@@ -27,15 +37,59 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
         <span className="badge-model badge-model-rvc fs-6">RVCv2</span>
       </div>
       <p>
-        V2V model created by <Link to="/">Vegito1089</Link>
+        V2V model by <Link to="/">Vegito1089</Link>
       </p>
     </div>
   );
   const tags = ["Speaking", "English", "Character", "Singing", "Spanish"];
 
+  let modelCreatorLink = <Link to="">Creator Name</Link>;
+  let modelTitle = title;
+  let modelUseCount = 10000;
+  let modelLanguage = "English";
+  let modelType = "RVCv2";
+  let modelUploadDate = "2021-09-10T06:15:04Z";
+  let modelVisibility = (
+    <div>
+      <FontAwesomeIcon icon={faEye} className="me-2" />
+      Public
+    </div>
+  );
+
+  const voiceDetails = [
+    { label: "Creator", value: modelCreatorLink },
+    { label: "Title", value: modelTitle },
+    { label: "Use count", value: modelUseCount },
+    { label: "Spoken language", value: modelLanguage },
+    { label: "Model type", value: modelType },
+    { label: "Upload date (UTC)", value: modelUploadDate },
+    { label: "Visibility", value: modelVisibility },
+  ];
+
+  let ratingButtons = <></>;
+  if (props.sessionWrapper.isLoggedIn()) {
+    ratingButtons = (
+      <RatingButtons entity_type="v2v_model" entity_token="test" />
+    );
+  }
+
+  let ratingStats = (
+    <RatingStats positive_votes={100} negative_votes={0} total_votes={100} />
+  );
+
+  const shareUrl = window.location.href;
+  const shareButton = <ShareButton url={shareUrl} />;
+
   return (
     <div>
-      <PageHeaderModelView title={title} subText={subText} tags={tags} />
+      <PageHeaderModelView
+        title={title}
+        subText={subText}
+        tags={tags}
+        ratingBtn={ratingButtons}
+        ratingStats={ratingStats}
+        extras={shareButton}
+      />
 
       <Panel padding mb>
         <div className="row g-5">
@@ -45,29 +99,7 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
               Use Voice
             </h4>
             {/* have to replace this below with Voice conversion stuff instead of the textarea */}
-            <form onSubmit={() => {}}>
-              <textarea
-                onChange={() => {}}
-                value={""}
-                className="form-control"
-                placeholder="Textual shenanigans go here..."
-                rows={6}
-              ></textarea>
-              <div className="d-flex gap-3 mt-3">
-                <button className="btn btn-primary w-100">
-                  <FontAwesomeIcon icon={faVolumeHigh} className="me-2" />
-                  Speak
-                </button>
-
-                <button
-                  className="btn btn-destructive w-100"
-                  onClick={() => {}}
-                >
-                  <FontAwesomeIcon icon={faDeleteLeft} className="me-2" />
-                  Clear
-                </button>
-              </div>
-            </form>
+            <div className="opacity-50">voice to voice components here</div>
           </div>
           <div className="col-12 col-lg-6">
             <h4 className="mb-3">
@@ -87,12 +119,45 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
           </div>
         </div>
       </Panel>
-      <Panel padding>
-        <h4 className="text-center text-lg-start mb-4">
-          <FontAwesomeIcon icon={faBarsStaggered} className="me-3" />
-          Voice Details
+      <Panel padding mb>
+        <h4 className="mb-4">
+          <FontAwesomeIcon icon={faMemoCircleInfo} className="me-3" />
+          Voice Model Details
         </h4>
-        lol
+        <table className="table">
+          <tbody>
+            {voiceDetails.map((item, index) => (
+              <tr key={index}>
+                <th scope="row" className="fw-semibold">
+                  {item.label}
+                </th>
+                <td>{item.value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {/* Model Edit Buttons */}
+        <div className="d-flex flex-column flex-md-row gap-3 mt-5">
+          <Link className={"btn btn-secondary w-100"} to="">
+            <FontAwesomeIcon icon={faEdit} className="me-2" />
+            Edit Model Details
+          </Link>
+          <Link className="btn btn-destructive w-100" to="">
+            <FontAwesomeIcon icon={faTrash} className="me-2" />
+            Delete Model
+          </Link>
+        </div>
+      </Panel>
+      <Panel padding>
+        <h4 className="mb-4">
+          <FontAwesomeIcon icon={faMessages} className="me-3" />
+          Comments
+        </h4>
+        <CommentComponent
+          entityType="user"
+          entityToken="test"
+          sessionWrapper={props.sessionWrapper}
+        />
       </Panel>
     </div>
   );

From 5f783a1a7f482cf6d5b971b87d7701f93505422f Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 3 Aug 2023 16:56:56 +0700
Subject: [PATCH 06/18] panel padding changes

---
 packages/fakeyou.com/src/components/common/Panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/components/common/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel.tsx
index 646548a284..8ae8d478ce 100644
--- a/packages/fakeyou.com/src/components/common/Panel.tsx
+++ b/packages/fakeyou.com/src/components/common/Panel.tsx
@@ -12,7 +12,7 @@ export default function Panel(props: PanelProps) {
   return (
     <motion.div className="container-panel" variants={panel}>
       <div
-        className={`panel ${props.padding ? "p-3 py-lg-4 p-md-4" : ""} ${
+        className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""} ${
           props.mb ? "mb-4" : ""
         }`}
       >

From fe092fd7247b169395dad6d5586551346dac17eb Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 3 Aug 2023 17:01:39 +0700
Subject: [PATCH 07/18] responsive layout fix

---
 .../src/components/common/PageHeaderModelView.tsx            | 5 ++++-
 packages/fakeyou.com/src/components/common/ShareButton.tsx   | 2 +-
 packages/fakeyou.com/src/scss/site-refresh.scss              | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
index cdcd186b98..74a89e9375 100644
--- a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
+++ b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
@@ -39,9 +39,12 @@ export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
         <div className="d-flex flex-column flex-lg-row flex-column-reverse gap-3">
           <div className="d-flex gap-3">
             {props.ratingBtn}
-            {props.extras}
+            <div className="d-lg-none">{props.extras}</div>
           </div>
           {props.ratingStats}
+          <div className="flex-grow-1 d-none d-lg-flex justify-content-end">
+            {props.extras}
+          </div>
         </div>
       </Panel>
     </div>
diff --git a/packages/fakeyou.com/src/components/common/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton.tsx
index cb9e0852d5..c7caacfaaa 100644
--- a/packages/fakeyou.com/src/components/common/ShareButton.tsx
+++ b/packages/fakeyou.com/src/components/common/ShareButton.tsx
@@ -31,7 +31,7 @@ export default function ShareButton(props: ShareButtonProps) {
         theme="fakeyou"
         arrow={false}
       >
-        <button className="btn-share" onClick={copyToClipboard} type="button">
+        <button className="btn-action" onClick={copyToClipboard} type="button">
           <span>
             <FontAwesomeIcon icon={faLink} className="me-2" />
           </span>
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 52c1901821..5b0a0f7270 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -893,7 +893,7 @@ styles with important tags:
     }
   }
 
-  .btn-share {
+  .btn-action {
     font-weight: 500;
     font-size: 14px;
     background-color: lighten($secondary, 4%);

From aebd23687aa3851d01141d421e8993424cd61ddf Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 7 Aug 2023 19:27:20 +0700
Subject: [PATCH 08/18] padding fix

---
 .../fakeyou.com/src/components/common/PageHeaderModelView.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
index 74a89e9375..5bba14cc92 100644
--- a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
+++ b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
@@ -13,7 +13,7 @@ interface PageHeaderModelViewProps {
 
 export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
   return (
-    <div className="pt-3 pb-4">
+    <div className="pt-2 pt-lg-4 pb-4">
       <Panel padding>
         <div className="row gy-3">
           <div className="col-12 col-lg-8">

From 7020df326de4c03e9c0a3399f6cc3f213197a353 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 7 Aug 2023 20:59:55 +0700
Subject: [PATCH 09/18] reusable input component

---
 .../src/components/common/Input.tsx           | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 packages/fakeyou.com/src/components/common/Input.tsx

diff --git a/packages/fakeyou.com/src/components/common/Input.tsx b/packages/fakeyou.com/src/components/common/Input.tsx
new file mode 100644
index 0000000000..7b0b631faa
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Input.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+interface InputProps {
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: string;
+  icon?: IconDefinition;
+  label?: string;
+  placeholder?: string;
+  type?: string;
+}
+
+export default function Input(props: InputProps) {
+  return (
+    <div>
+      {props.label && <label className="sub-title">{props.label}</label>}
+
+      <div className={`form-group ${props.icon ? "input-icon" : ""}`}>
+        {props.icon && (
+          <FontAwesomeIcon
+            icon={props.icon}
+            className="form-control-feedback"
+          />
+        )}
+        <input
+          onChange={props.onChange}
+          className="form-control"
+          type={props.type && "text"}
+          placeholder={props.placeholder}
+          value={props.value}
+        />
+      </div>
+    </div>
+  );
+}

From 4b4c152d6e34a7e2515d4f7c5b3005f25e26550f Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 09:14:48 +0700
Subject: [PATCH 10/18] model edit page init

---
 .../fakeyou.com/src/v2/view/PageContainer.tsx |  5 ++++
 .../vc/vc_model_edit/VcModelEditPage.tsx      | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx

diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 93602724bc..f85c1c0a52 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -79,6 +79,7 @@ import { VoiceConversionModelListItem } from "@storyteller/components/src/api/vo
 import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage";
 import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage";
 import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage";
+import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -502,6 +503,10 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/voice-conversion/:token/edit">
+              <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
+            </Route>
+
             <Route path="/voice-conversion/:token">
               <VcModelViewPage
                 sessionWrapper={this.props.sessionWrapper}
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
new file mode 100644
index 0000000000..ec601802f4
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { useParams } from "react-router-dom";
+import Input from "components/common/Input";
+import Panel from "components/common/Panel";
+import { faUser } from "@fortawesome/pro-solid-svg-icons";
+
+interface VcModelEditPageProps {
+  sessionWrapper: SessionWrapper;
+}
+
+export default function VcModelEditPage(props: VcModelEditPageProps) {
+  let { token } = useParams() as { token: string };
+  return (
+    <div>
+      <Panel padding>
+        <Input
+          label="Username"
+          type="text"
+          placeholder="Username"
+          icon={faUser}
+        />
+      </Panel>
+    </div>
+  );
+}

From b3a9a4307a4723116dc33ce46e71528e76fd79ee Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 10:32:00 +0700
Subject: [PATCH 11/18] input field update rest syntax

---
 .../src/components/common/Input/Input.tsx     | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/fakeyou.com/src/components/common/Input/Input.tsx

diff --git a/packages/fakeyou.com/src/components/common/Input/Input.tsx b/packages/fakeyou.com/src/components/common/Input/Input.tsx
new file mode 100644
index 0000000000..547ce817ba
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Input/Input.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon?: IconDefinition;
+  label?: string;
+}
+
+export default function Input({ label, icon, ...rest }: InputProps) {
+  return (
+    <div>
+      {label && <label className="sub-title">{label}</label>}
+
+      <div className={`form-group ${icon ? "input-icon" : ""}`}>
+        {icon && (
+          <FontAwesomeIcon icon={icon} className="form-control-feedback" />
+        )}
+        <input className="form-control" {...rest} />
+      </div>
+    </div>
+  );
+}

From 978316caf5f5209c61215c40f52ac6c1b62e1ed6 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 10:32:27 +0700
Subject: [PATCH 12/18] moved components into their folders

---
 .../src/components/common/Input.tsx           | 36 -------------------
 .../components/common/{ => Panel}/Panel.tsx   |  0
 .../common/{ => ShareButton}/ShareButton.tsx  |  0
 .../PageHeaderModelView.tsx                   |  2 +-
 .../vc/vc_model_edit/VcModelEditPage.tsx      |  9 +++--
 .../vc/vc_model_view/VcModelViewPage.tsx      |  6 ++--
 6 files changed, 11 insertions(+), 42 deletions(-)
 delete mode 100644 packages/fakeyou.com/src/components/common/Input.tsx
 rename packages/fakeyou.com/src/components/common/{ => Panel}/Panel.tsx (100%)
 rename packages/fakeyou.com/src/components/common/{ => ShareButton}/ShareButton.tsx (100%)
 rename packages/fakeyou.com/src/components/{common => layout/PageHeaderModelView}/PageHeaderModelView.tsx (97%)

diff --git a/packages/fakeyou.com/src/components/common/Input.tsx b/packages/fakeyou.com/src/components/common/Input.tsx
deleted file mode 100644
index 7b0b631faa..0000000000
--- a/packages/fakeyou.com/src/components/common/Input.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-
-interface InputProps {
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  value?: string;
-  icon?: IconDefinition;
-  label?: string;
-  placeholder?: string;
-  type?: string;
-}
-
-export default function Input(props: InputProps) {
-  return (
-    <div>
-      {props.label && <label className="sub-title">{props.label}</label>}
-
-      <div className={`form-group ${props.icon ? "input-icon" : ""}`}>
-        {props.icon && (
-          <FontAwesomeIcon
-            icon={props.icon}
-            className="form-control-feedback"
-          />
-        )}
-        <input
-          onChange={props.onChange}
-          className="form-control"
-          type={props.type && "text"}
-          placeholder={props.placeholder}
-          value={props.value}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/packages/fakeyou.com/src/components/common/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx
similarity index 100%
rename from packages/fakeyou.com/src/components/common/Panel.tsx
rename to packages/fakeyou.com/src/components/common/Panel/Panel.tsx
diff --git a/packages/fakeyou.com/src/components/common/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
similarity index 100%
rename from packages/fakeyou.com/src/components/common/ShareButton.tsx
rename to packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
diff --git a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
similarity index 97%
rename from packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
rename to packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
index 5bba14cc92..3216c1e369 100644
--- a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Panel from "./Panel";
+import Panel from "../../common/Panel/Panel";
 
 interface PageHeaderModelViewProps {
   titleIcon?: React.ReactNode;
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
index ec601802f4..8e85eb0d3f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
@@ -1,14 +1,18 @@
 import React from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { useParams } from "react-router-dom";
-import Input from "components/common/Input";
-import Panel from "components/common/Panel";
+import Input from "components/common/Input/Input";
+import Panel from "components/common/Panel/Panel";
 import { faUser } from "@fortawesome/pro-solid-svg-icons";
 
 interface VcModelEditPageProps {
   sessionWrapper: SessionWrapper;
 }
 
+const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  console.log(event.target.value);
+};
+
 export default function VcModelEditPage(props: VcModelEditPageProps) {
   let { token } = useParams() as { token: string };
   return (
@@ -19,6 +23,7 @@ export default function VcModelEditPage(props: VcModelEditPageProps) {
           type="text"
           placeholder="Username"
           icon={faUser}
+          onChange={handleChange}
         />
       </Panel>
     </div>
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
index 22551e8b52..e428557465 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
@@ -10,16 +10,16 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
-import Panel from "components/common/Panel";
+import Panel from "components/common/Panel/Panel";
 import { Link, useParams } from "react-router-dom";
 import { SessionVoiceConversionResultsList } from "v2/view/_common/SessionVoiceConversionResultsList";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
-import PageHeaderModelView from "components/common/PageHeaderModelView";
+import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
 import { CommentComponent } from "v2/view/_common/comments/CommentComponent";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { RatingButtons } from "v2/view/_common/ratings/RatingButtons";
 import { RatingStats } from "v2/view/_common/ratings/RatingStats";
-import ShareButton from "components/common/ShareButton";
+import ShareButton from "components/common/ShareButton/ShareButton";
 
 interface VcModelViewPageProps {
   sessionWrapper: SessionWrapper;

From acaff3be54df7c89049035e14ba00658bad2e69f Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 13:55:28 +0700
Subject: [PATCH 13/18] PageHeaderModel update

---
 .../PageHeaderModelView.tsx                   | 92 +++++++++++++------
 1 file changed, 62 insertions(+), 30 deletions(-)

diff --git a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
index 3216c1e369..b35f429fa2 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
@@ -1,52 +1,84 @@
 import React from "react";
 import Panel from "../../common/Panel/Panel";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 interface PageHeaderModelViewProps {
-  titleIcon?: React.ReactNode;
+  titleIcon?: IconDefinition;
   title: string;
   subText: React.ReactNode;
   tags?: string[];
   ratingBtn?: React.ReactNode;
   ratingStats?: React.ReactNode;
   extras?: React.ReactNode;
+  view?: "regular" | "edit" | "delete";
+  modelType?: "TTS" | "V2V";
 }
 
-export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
+export default function PageHeaderModelView({
+  titleIcon,
+  title,
+  subText,
+  tags,
+  ratingBtn,
+  ratingStats,
+  extras,
+  view = "regular",
+  modelType = "TTS",
+}: PageHeaderModelViewProps) {
+  const icon = (
+    <>{titleIcon && <FontAwesomeIcon icon={titleIcon} className="me-3" />}</>
+  );
+
   return (
     <div className="pt-2 pt-lg-4 pb-4">
-      <Panel padding>
-        <div className="row gy-3">
-          <div className="col-12 col-lg-8">
-            <h2 className="fw-bold">
-              {props.titleIcon}
-              {props.title}
-            </h2>
-            <p>{props.subText}</p>
-          </div>
-          <div className="col-12 col-lg-4">
-            <div className="d-flex gap-2 flex-wrap justify-content-lg-end">
-              {props.tags &&
-                props.tags.map((tag, index) => (
-                  <div key={index}>
-                    <span className="badge badge-tag">{tag}</span>
-                  </div>
-                ))}
+      {view === "regular" && (
+        <Panel padding>
+          <div className="row gy-3">
+            <div className="col-12 col-lg-8">
+              <h2 className="fw-bold">
+                {icon}
+                {title}
+              </h2>
+              <p>{subText}</p>
+            </div>
+            <div className="col-12 col-lg-4">
+              <div className="d-flex gap-2 flex-wrap justify-content-lg-end">
+                {tags &&
+                  tags.map((tag, index) => (
+                    <div key={index}>
+                      <span className="badge badge-tag">{tag}</span>
+                    </div>
+                  ))}
+              </div>
             </div>
           </div>
-        </div>
-        <hr className="my-4" />
+          <hr className="my-4" />
 
-        <div className="d-flex flex-column flex-lg-row flex-column-reverse gap-3">
-          <div className="d-flex gap-3">
-            {props.ratingBtn}
-            <div className="d-lg-none">{props.extras}</div>
+          <div className="d-flex flex-column flex-lg-row flex-column-reverse gap-3">
+            <div className="d-flex gap-3">
+              {ratingBtn}
+              <div className="d-lg-none">{extras}</div>
+            </div>
+            {ratingStats}
+            <div className="flex-grow-1 d-none d-lg-flex justify-content-end">
+              {extras}
+            </div>
           </div>
-          {props.ratingStats}
-          <div className="flex-grow-1 d-none d-lg-flex justify-content-end">
-            {props.extras}
+        </Panel>
+      )}
+
+      {view === "edit" && (
+        <Panel padding>
+          <div className="d-flex">
+            <div className="flex-grow-1">
+              <h2 className="fw-bold mb-0">
+                {icon}Edit {modelType} Model
+              </h2>
+            </div>
           </div>
-        </div>
-      </Panel>
+        </Panel>
+      )}
     </div>
   );
 }

From 6aa2c609a44223a49b4809e793008e50035f7d5d Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 13:55:44 +0700
Subject: [PATCH 14/18] select field component

---
 .../src/components/common/Input/Input.scss    | 68 ++++++++++++++++++
 .../src/components/common/Input/Input.tsx     | 71 ++++++++++++++++++-
 .../fakeyou.com/src/scss/site-refresh.scss    |  4 +-
 .../vc/vc_model_edit/VcModelEditPage.tsx      | 50 ++++++++++---
 4 files changed, 181 insertions(+), 12 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Input/Input.scss

diff --git a/packages/fakeyou.com/src/components/common/Input/Input.scss b/packages/fakeyou.com/src/components/common/Input/Input.scss
new file mode 100644
index 0000000000..20703f0a84
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Input/Input.scss
@@ -0,0 +1,68 @@
+@import "scss/colours.scss";
+
+.select__control {
+  &.select {
+    height: 48px;
+    border-width: 2px;
+    padding-left: 0.15rem;
+    padding-right: 0.15rem;
+    background-color: $input-dark;
+    border-radius: 0.5rem;
+    border-color: $input-dark !important;
+    box-shadow: none;
+    cursor: pointer;
+
+    &.no-padding {
+      padding-left: 0.5rem;
+    }
+
+    &:hover {
+      background-color: lighten($input-dark, 5%);
+      border-color: lighten($input-dark, 5%) !important;
+    }
+
+    &.focused {
+      border-color: $primary !important;
+    }
+
+    &.with-icon {
+      padding-left: 2rem;
+    }
+
+    &.rounded-full {
+      border-radius: 50px;
+    }
+  }
+
+  &.select-option {
+    background-color: $input-dark;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      background-color: lighten($input-dark, 8%);
+    }
+  }
+
+  &.select-input,
+  &.select-value {
+    color: $white;
+  }
+
+  &.select-placeholder {
+    color: $white !important;
+  }
+
+  &.select-container {
+    background: $input-dark;
+    margin-top: 6px;
+    padding: 0;
+    border-radius: 0.5rem;
+    z-index: 3;
+  }
+
+  &.select-separator {
+    width: 1px;
+    opacity: 0.3;
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/Input/Input.tsx b/packages/fakeyou.com/src/components/common/Input/Input.tsx
index 547ce817ba..11dff877a5 100644
--- a/packages/fakeyou.com/src/components/common/Input/Input.tsx
+++ b/packages/fakeyou.com/src/components/common/Input/Input.tsx
@@ -1,13 +1,31 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import "./Input.scss";
+import {
+  default as ReactSelect,
+  Props as ReactSelectProps,
+} from "react-select";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   icon?: IconDefinition;
   label?: string;
+  textArea?: boolean;
 }
 
-export default function Input({ label, icon, ...rest }: InputProps) {
+interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  textArea?: boolean;
+}
+
+interface SelectProps extends ReactSelectProps {
+  icon?: IconDefinition;
+  label?: string;
+  rounded?: boolean;
+}
+
+export function Input({ label, icon, textArea, ...rest }: InputProps) {
   return (
     <div>
       {label && <label className="sub-title">{label}</label>}
@@ -21,3 +39,54 @@ export default function Input({ label, icon, ...rest }: InputProps) {
     </div>
   );
 }
+
+export function TextArea({ label, textArea, ...rest }: TextAreaProps) {
+  return (
+    <div>
+      {label && <label className="sub-title">{label}</label>}
+
+      <div className="form-group">
+        <textarea className="form-control" {...rest} />
+      </div>
+    </div>
+  );
+}
+
+export function Select({ label, icon, rounded, ...rest }: SelectProps) {
+  const SelectFieldClass = {
+    control: (state: any) =>
+      state.isFocused
+        ? `select focused ${icon && "with-icon"} ${rounded && "rounded-full"}`
+        : `select ${icon && "with-icon"} ${rounded && "rounded-full"}`,
+    option: (state: any) =>
+      state.isFocused ? "select-option" : "select-option",
+    input: (state: any) => (state.isFocused ? "select-input" : "select-input"),
+    placeholder: (state: any) =>
+      state.isFocused ? "select-placeholder" : "select-placeholder",
+    singleValue: (state: any) =>
+      state.isFocused ? "select-value" : "select-value",
+    menu: (state: any) =>
+      state.isFocused ? "select-container" : "select-container",
+    indicatorSeparator: (state: any) =>
+      state.isFocused ? "select-separator" : "select-separator",
+  };
+
+  return (
+    <div>
+      {label && <label className="sub-title">{label}</label>}
+
+      <div className={`form-group ${icon ? "input-icon" : ""}`}>
+        {icon && (
+          <FontAwesomeIcon icon={icon} className="form-control-feedback" />
+        )}
+        <div className="w-100">
+          <ReactSelect
+            classNamePrefix="select"
+            classNames={SelectFieldClass}
+            {...rest}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 5b0a0f7270..68c6224534 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -440,7 +440,7 @@ styles with important tags:
     .form-control-feedback {
       position: absolute;
       z-index: 2;
-      width: 2.375rem;
+      width: 2.75rem;
       // height: 2.375rem;
       // line-height: 2.69rem;
       text-align: center;
@@ -759,7 +759,7 @@ styles with important tags:
     padding-left: 2.25rem;
     padding-right: 0.5rem;
     background-color: $input-dark;
-    border-radius: 50px;
+    border-radius: 0.5rem;
     border-color: $input-dark !important;
     box-shadow: none;
     cursor: pointer;
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
index 8e85eb0d3f..86fed8c367 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { useParams } from "react-router-dom";
-import Input from "components/common/Input/Input";
+import { Input, TextArea, Select } from "components/common/Input/Input";
 import Panel from "components/common/Panel/Panel";
-import { faUser } from "@fortawesome/pro-solid-svg-icons";
+import { faEye, faFilePen } from "@fortawesome/pro-solid-svg-icons";
+import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
 
 interface VcModelEditPageProps {
   sessionWrapper: SessionWrapper;
@@ -13,18 +14,49 @@ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
   console.log(event.target.value);
 };
 
+const savebtn = <button className="btn btn-primary">Save Changes</button>;
+
+const visibility = [
+  { value: "public", label: "Public" },
+  { value: "hidden", label: "Hidden" },
+];
+
 export default function VcModelEditPage(props: VcModelEditPageProps) {
   let { token } = useParams() as { token: string };
   return (
     <div>
+      <PageHeaderModelView
+        title="Solid Snake"
+        subText="Solid Snake"
+        view="edit"
+        titleIcon={faFilePen}
+        extras={savebtn}
+        modelType="V2V"
+      />
+
       <Panel padding>
-        <Input
-          label="Username"
-          type="text"
-          placeholder="Username"
-          icon={faUser}
-          onChange={handleChange}
-        />
+        <div className="d-flex flex-column gap-4">
+          <Input
+            label="Name"
+            type="text"
+            placeholder="Model title"
+            onChange={handleChange}
+          />
+
+          <TextArea
+            rows={3}
+            label="Description"
+            placeholder="Description"
+            onChange={() => {}}
+          />
+
+          <Select
+            icon={faEye}
+            defaultValue={visibility[0]}
+            options={visibility}
+            label="Visibility"
+          />
+        </div>
       </Panel>
     </div>
   );

From ade36258985119f7212fb00bc617633d14415541 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 15:18:27 +0700
Subject: [PATCH 15/18] inputs update

---
 .../src/components/common/Button/Button.scss  | 76 +++++++++++++++++++
 .../src/components/common/Button/Button.tsx   | 37 +++++++++
 .../common/{Input => Inputs}/Input.scss       |  0
 .../{Input/Input.tsx => Inputs/Inputs.tsx}    |  0
 .../common/ShareButton/ShareButton.tsx        | 16 ++--
 .../vc/vc_model_edit/VcModelEditPage.tsx      | 12 ++-
 6 files changed, 133 insertions(+), 8 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Button/Button.scss
 create mode 100644 packages/fakeyou.com/src/components/common/Button/Button.tsx
 rename packages/fakeyou.com/src/components/common/{Input => Inputs}/Input.scss (100%)
 rename packages/fakeyou.com/src/components/common/{Input/Input.tsx => Inputs/Inputs.tsx} (100%)

diff --git a/packages/fakeyou.com/src/components/common/Button/Button.scss b/packages/fakeyou.com/src/components/common/Button/Button.scss
new file mode 100644
index 0000000000..d5a58e8c67
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Button/Button.scss
@@ -0,0 +1,76 @@
+@import "scss/colours.scss";
+
+.button {
+  border-radius: 0.5rem;
+  outline: none;
+  font-size: 15px;
+  font-weight: 500;
+  padding: 10px 20px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button-primary,
+.button-primary:focus,
+.button-primary:active {
+  background-color: $primary;
+  border: 2.5px solid;
+  border-color: $primary;
+  transition: 0.2s;
+  color: $white;
+}
+.button-primary:hover {
+  background-color: lighten($primary, 5%);
+  border-color: lighten($primary, 5%);
+  color: $white;
+}
+
+.button-secondary,
+.button-secondary:focus,
+.button-secondary:active {
+  background-color: $secondary;
+  color: $white;
+  border: 2.5px solid;
+  border-color: $secondary;
+  transition: 0.2s;
+}
+
+.button-secondary:hover {
+  background-color: lighten($secondary, 5%);
+  color: $white;
+  border: 2.5px solid;
+  border-color: lighten($secondary, 5%);
+}
+
+.button-destructive,
+.button-destructive:focus,
+.button-destructive:active {
+  background-color: $danger;
+  color: $white;
+  border: 2.5px solid;
+  border-color: $danger;
+  transition: 0.2s;
+}
+
+.button-destructive:hover {
+  background-color: lighten($danger, 5%);
+  color: $white;
+  border: 2.5px solid;
+  border-color: lighten($danger, 5%);
+}
+
+.button-small,
+.button-small:focus,
+.button-small:active {
+  font-weight: 500;
+  font-size: 14px;
+  padding: 8.25px 16px;
+  transition: 0.2s;
+  border: none;
+}
+
+.button-small:hover {
+  border: none;
+}
diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx
new file mode 100644
index 0000000000..188ca25bac
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx
@@ -0,0 +1,37 @@
+import React, { ButtonHTMLAttributes } from "react";
+import "./Button.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string;
+  icon?: IconDefinition;
+  small?: boolean;
+  secondary?: boolean;
+  danger?: boolean;
+}
+
+export default function Button({
+  label,
+  icon,
+  small,
+  secondary,
+  danger,
+  ...rest
+}: ButtonProps) {
+  const buttonClasses = `button ${small ? "button-small" : ""}
+  ${
+    secondary
+      ? "button-secondary"
+      : danger
+      ? "button-destructive"
+      : "button-primary"
+  } `;
+
+  return (
+    <button className={buttonClasses} type="button" {...rest}>
+      {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
+      {label}
+    </button>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/Input/Input.scss b/packages/fakeyou.com/src/components/common/Inputs/Input.scss
similarity index 100%
rename from packages/fakeyou.com/src/components/common/Input/Input.scss
rename to packages/fakeyou.com/src/components/common/Inputs/Input.scss
diff --git a/packages/fakeyou.com/src/components/common/Input/Input.tsx b/packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx
similarity index 100%
rename from packages/fakeyou.com/src/components/common/Input/Input.tsx
rename to packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx
diff --git a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
index c7caacfaaa..2e91e9e4da 100644
--- a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
+++ b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Tippy from "@tippyjs/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLink } from "@fortawesome/pro-solid-svg-icons";
+import Button from "../Button/Button";
 
 interface ShareButtonProps {
   url: string;
@@ -31,12 +32,15 @@ export default function ShareButton(props: ShareButtonProps) {
         theme="fakeyou"
         arrow={false}
       >
-        <button className="btn-action" onClick={copyToClipboard} type="button">
-          <span>
-            <FontAwesomeIcon icon={faLink} className="me-2" />
-          </span>
-          Share Link
-        </button>
+        <div>
+          <Button
+            label="Share Link"
+            icon={faLink}
+            secondary
+            small
+            onClick={copyToClipboard}
+          />
+        </div>
       </Tippy>
     </div>
   );
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
index 86fed8c367..952255e0b6 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { useParams } from "react-router-dom";
-import { Input, TextArea, Select } from "components/common/Input/Input";
+import { Input, TextArea, Select } from "components/common/Inputs/Inputs";
 import Panel from "components/common/Panel/Panel";
-import { faEye, faFilePen } from "@fortawesome/pro-solid-svg-icons";
+import { faEye, faFilePen, faSave } from "@fortawesome/pro-solid-svg-icons";
 import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
+import Button from "components/common/Button/Button";
 
 interface VcModelEditPageProps {
   sessionWrapper: SessionWrapper;
@@ -14,6 +15,10 @@ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
   console.log(event.target.value);
 };
 
+const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {
+  console.log("save");
+};
+
 const savebtn = <button className="btn btn-primary">Save Changes</button>;
 
 const visibility = [
@@ -51,11 +56,14 @@ export default function VcModelEditPage(props: VcModelEditPageProps) {
           />
 
           <Select
+            isSearchable={false}
             icon={faEye}
             defaultValue={visibility[0]}
             options={visibility}
             label="Visibility"
           />
+
+          <Button label="Share Link" icon={faSave} onClick={handleSave} />
         </div>
       </Panel>
     </div>

From 1e1a97576514b7620acab87d1b778299bfe93b2f Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 15:42:39 +0700
Subject: [PATCH 16/18] panel and page container components

---
 .../common/PageContainer/PageContainer.tsx    | 24 +++++++++++++++++++
 .../src/components/common/Panel/Panel.tsx     | 10 ++++----
 .../vc/vc_model_edit/VcModelEditPage.tsx      |  5 ++--
 .../vc/vc_model_view/VcModelViewPage.tsx      |  5 ++--
 4 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx

diff --git a/packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx b/packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx
new file mode 100644
index 0000000000..c2088b8e9a
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx
@@ -0,0 +1,24 @@
+import { container } from "data/animation";
+import { motion } from "framer-motion";
+import React from "react";
+
+interface PageContainerProps {
+  children: React.ReactNode;
+  padding?: boolean;
+}
+
+export default function PageContainer({
+  children,
+  padding,
+}: PageContainerProps) {
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={container}
+      className={`${padding ? "container" : ""}`}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx
index 8ae8d478ce..6fda465884 100644
--- a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx
+++ b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx
@@ -6,17 +6,17 @@ interface PanelProps {
   children: React.ReactNode;
   padding?: boolean;
   mb?: boolean;
+  mt?: boolean;
 }
 
-export default function Panel(props: PanelProps) {
+export default function Panel({ children, padding, mb, mt }: PanelProps) {
   return (
     <motion.div className="container-panel" variants={panel}>
       <div
-        className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""} ${
-          props.mb ? "mb-4" : ""
-        }`}
+        className={`panel ${padding ? "p-3 py-4 p-md-4" : ""}
+        ${mb ? "mb-4" : ""} ${mt ? "mt-4" : ""}`}
       >
-        {props.children}
+        {children}
       </div>
     </motion.div>
   );
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
index 952255e0b6..74121c8f7a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
@@ -6,6 +6,7 @@ import Panel from "components/common/Panel/Panel";
 import { faEye, faFilePen, faSave } from "@fortawesome/pro-solid-svg-icons";
 import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
 import Button from "components/common/Button/Button";
+import PageContainer from "components/common/PageContainer/PageContainer";
 
 interface VcModelEditPageProps {
   sessionWrapper: SessionWrapper;
@@ -29,7 +30,7 @@ const visibility = [
 export default function VcModelEditPage(props: VcModelEditPageProps) {
   let { token } = useParams() as { token: string };
   return (
-    <div>
+    <PageContainer>
       <PageHeaderModelView
         title="Solid Snake"
         subText="Solid Snake"
@@ -66,6 +67,6 @@ export default function VcModelEditPage(props: VcModelEditPageProps) {
           <Button label="Share Link" icon={faSave} onClick={handleSave} />
         </div>
       </Panel>
-    </div>
+    </PageContainer>
   );
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
index e428557465..bcb6bc2b1a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
@@ -20,6 +20,7 @@ import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapp
 import { RatingButtons } from "v2/view/_common/ratings/RatingButtons";
 import { RatingStats } from "v2/view/_common/ratings/RatingStats";
 import ShareButton from "components/common/ShareButton/ShareButton";
+import PageContainer from "components/common/PageContainer/PageContainer";
 
 interface VcModelViewPageProps {
   sessionWrapper: SessionWrapper;
@@ -81,7 +82,7 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
   const shareButton = <ShareButton url={shareUrl} />;
 
   return (
-    <div>
+    <PageContainer>
       <PageHeaderModelView
         title={title}
         subText={subText}
@@ -159,6 +160,6 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
           sessionWrapper={props.sessionWrapper}
         />
       </Panel>
-    </div>
+    </PageContainer>
   );
 }

From 1ef3854dd12b59e318a8e20b4793602861478152 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 10 Aug 2023 15:54:43 +0700
Subject: [PATCH 17/18] rename scss file to Inputs

---
 .../src/components/common/Inputs/{Input.scss => Inputs.scss}    | 0
 packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx    | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/fakeyou.com/src/components/common/Inputs/{Input.scss => Inputs.scss} (100%)

diff --git a/packages/fakeyou.com/src/components/common/Inputs/Input.scss b/packages/fakeyou.com/src/components/common/Inputs/Inputs.scss
similarity index 100%
rename from packages/fakeyou.com/src/components/common/Inputs/Input.scss
rename to packages/fakeyou.com/src/components/common/Inputs/Inputs.scss
diff --git a/packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx b/packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx
index 11dff877a5..c2923f026f 100644
--- a/packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx
+++ b/packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import "./Input.scss";
+import "./Inputs.scss";
 import {
   default as ReactSelect,
   Props as ReactSelectProps,

From 8caffd1d8fbc8275fba9d76321bbb4534e47bb00 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 11 Aug 2023 12:34:26 +0700
Subject: [PATCH 18/18] delete page init

---
 .../PageHeaderModelView.tsx                   | 12 +++++
 .../fakeyou.com/src/v2/view/PageContainer.tsx |  5 +++
 .../src/v2/view/pages/vc/VoiceDetails.tsx     |  7 +++
 .../vc/vc_model_delete/VcModelDeletePage.tsx  | 44 +++++++++++++++++++
 .../vc/vc_model_edit/VcModelEditPage.tsx      |  2 +-
 5 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/vc/VoiceDetails.tsx
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx

diff --git a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
index b35f429fa2..bdabbc4f50 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
@@ -79,6 +79,18 @@ export default function PageHeaderModelView({
           </div>
         </Panel>
       )}
+
+      {view === "delete" && (
+        <Panel padding>
+          <div className="d-flex">
+            <div className="flex-grow-1">
+              <h2 className="fw-bold mb-0">
+                {icon}Delete {modelType} Model
+              </h2>
+            </div>
+          </div>
+        </Panel>
+      )}
     </div>
   );
 }
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index f85c1c0a52..f31874195a 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -80,6 +80,7 @@ import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPa
 import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage";
 import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage";
 import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage";
+import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -503,6 +504,10 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/voice-conversion/:token/delete">
+              <VcModelDeletePage sessionWrapper={this.props.sessionWrapper} />
+            </Route>
+
             <Route path="/voice-conversion/:token/edit">
               <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/VoiceDetails.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/VoiceDetails.tsx
new file mode 100644
index 0000000000..b485df477c
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/VoiceDetails.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+interface VoiceDetailsProps {}
+
+export default function VoiceDetails(props: VoiceDetailsProps) {
+  return <div>VoiceDetails</div>;
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx
new file mode 100644
index 0000000000..519dde8c17
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { useParams } from "react-router-dom";
+import Panel from "components/common/Panel/Panel";
+import { faSave, faTrash } from "@fortawesome/pro-solid-svg-icons";
+import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
+import Button from "components/common/Button/Button";
+import PageContainer from "components/common/PageContainer/PageContainer";
+
+interface VcModelDeletePageProps {
+  sessionWrapper: SessionWrapper;
+}
+
+const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  console.log(event.target.value);
+};
+
+const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {
+  console.log("save");
+};
+
+const savebtn = <button className="btn btn-primary">Save Changes</button>;
+
+export default function VcModelDeletePage(props: VcModelDeletePageProps) {
+  let { token } = useParams() as { token: string };
+  return (
+    <PageContainer>
+      <PageHeaderModelView
+        title="Solid Snake"
+        subText="Solid Snake"
+        view="delete"
+        titleIcon={faTrash}
+        extras={savebtn}
+        modelType="V2V"
+      />
+
+      <Panel padding>
+        <div className="d-flex flex-column gap-4">
+          <Button label="Save Changes" icon={faSave} onClick={handleSave} />
+        </div>
+      </Panel>
+    </PageContainer>
+  );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
index 74121c8f7a..1d803ec33c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
@@ -64,7 +64,7 @@ export default function VcModelEditPage(props: VcModelEditPageProps) {
             label="Visibility"
           />
 
-          <Button label="Share Link" icon={faSave} onClick={handleSave} />
+          <Button label="Save Changes" icon={faSave} onClick={handleSave} />
         </div>
       </Panel>
     </PageContainer>