From e56c5e7f19cbbde18c7999c85c1bb3e6dcfc8864 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Wed, 31 Jan 2024 16:28:19 -0500
Subject: [PATCH 01/10] UI elements are working

---
 .../common/NumberSlider/NumberSlider.tsx      |  8 +-
 .../common/NumberSliderV2/NumberSliderV2.scss | 42 ++++++++
 .../common/NumberSliderV2/NumberSliderV2.tsx  | 98 +++++++++++++++++++
 .../components/common/NumberSliderV2/index.ts |  1 +
 .../common/TextAreaV2/TextAreaV2.scss         | 27 +++++
 .../common/TextAreaV2/TextAreaV2.tsx          | 39 ++++++++
 .../components/common/TextAreaV2/index.tsx    |  1 +
 .../src/components/common/index.tsx           |  6 ++
 .../components/pageFilterControls.tsx         | 79 ++++++++++++++-
 9 files changed, 296 insertions(+), 5 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.scss
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSliderV2/index.ts
 create mode 100644 packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.scss
 create mode 100644 packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/TextAreaV2/index.tsx

diff --git a/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
index 6af7e0edeb..bb3b425fd7 100644
--- a/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
+++ b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
@@ -8,12 +8,16 @@ interface Props {
   label?: string;
   max?: number;
   min?: number;
-  name?: string;
-  onChange?: any;
   required?: boolean;
   step?: number;
   thumbTip?: string;
+  // name, value and setter for onChange has to be in this particular format
+  // name = state variable's name as a stringh
+  // value = the state variable's reference
+  // onChange = the statevariable's setter function's reference
+  name?: string;
   value?: number;
+  onChange?: any;
 }
 
 const renderTrack = ({ props: { style, ...props }, children }: any) => (
diff --git a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.scss b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.scss
new file mode 100644
index 0000000000..801687a57e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.scss
@@ -0,0 +1,42 @@
+@import "scss/colours.scss";
+
+.fy-number-slider {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  .fy-number-slider-range {
+    flex-grow: 1;
+  }
+
+  .fy-number-slider-value {
+    text-align: center;
+    width: fit-content;
+    padding: 6px;
+    border-radius: 8px;
+    background-color: $secondary;
+    border-width: 0px;
+    border-color: none;
+    color: rgba(#fff, 0.85);
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+
+  .fy-number-slider-track {
+    height: 6px;
+    margin: 0 0 0 0.6875rem; // margin half width of thumb, so that thumb does not overlap margins at minimum position
+    background-color: #4f4f66;
+    border-radius: 0.25rem;
+  }
+
+  .fy-number-slider-thumb {
+    height: 16px;
+    width: 16px;
+    background-color: #e66462;
+    border-radius: 50%;
+    box-shadow: 0px 0px 10px rgba(#000, 0.15);
+    &:hover {
+      background-color: #fff;
+    }
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
new file mode 100644
index 0000000000..cf29ef02d3
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import { Range } from "react-range";
+import Tippy from "@tippyjs/react";
+import { Label } from "components/common";
+import "./NumberSliderV2.scss";
+
+interface Props {
+  label?: string;
+  thumbTip?: string;
+  min: number;
+  max: number;
+  step?: number;
+  initialValue?: number;
+  onChange?: (x:number) => void;
+  required?: boolean;
+}
+
+function roundToStep(x:number, step:number){
+  return Math.round(x/step) * step;
+}
+
+const renderTrack = ({ props: { style, ...props }, children }: any) => (
+  <div {...{ ...props, className: "fy-number-slider-track", style }}>
+    {children}
+  </div>
+);
+
+const thumb =
+  (thumbTip = "") =>
+  ({ props: { style, ...props } }: any) => {
+    return (
+      <Tippy
+        {...{
+          arrow: false,
+          content: thumbTip,
+          placement: "bottom",
+          theme: "range-slider",
+        }}
+      >
+        <div
+          {...{ ...props, className: "fy-number-slider-thumb", style }}
+        ></div>
+      </Tippy>
+    );
+  };
+
+export default function NumberSlider({
+  label,
+  thumbTip,
+  min,
+  max,
+  step: stepProps,
+  onChange: onChangeCallback,
+  required,
+  initialValue: initialValueProps,
+}: Props) {
+  const step = stepProps && stepProps <= max-min ? stepProps 
+    : max-min >= 1 ? 1 : (max-min) / 10;
+  const initialValue = initialValueProps && initialValueProps <= max && initialValueProps >= min ? initialValueProps
+  : max-min == step ? min : roundToStep((max+min)/2, step);
+
+  // const [value, setValue] = useState<number>(initialValue);
+  // const didMount = useRef(false);
+  function handleInputOnChange(e: React.ChangeEvent<HTMLInputElement>){
+    // setValue(Number.parseInt(e.target.value));
+    if(onChangeCallback)onChangeCallback(Number.parseInt(e.target.value))
+  }
+  function handleRangeOnChange(rangeValue: number[]){
+    if(onChangeCallback)onChangeCallback(rangeValue[0])
+    // setValue(rangeValue[0])
+  }
+
+
+  return (
+    <div>
+      <Label {...{ label, required }} />
+      <div className="fy-number-slider">
+        <input 
+          className="fy-number-slider-value"
+          type="number"
+          {...{ min, max, step, value:initialValue}}
+          onChange={handleInputOnChange}
+        />
+        <div className="fy-number-slider-range">
+          <Range
+            {...{min, max, step,
+              onChange: handleRangeOnChange,
+              renderThumb: thumb(thumbTip),
+              renderTrack,
+              thumbTip,
+              values: [initialValue],
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/NumberSliderV2/index.ts b/packages/fakeyou.com/src/components/common/NumberSliderV2/index.ts
new file mode 100644
index 0000000000..66ed0c89fb
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSliderV2/index.ts
@@ -0,0 +1 @@
+export { default } from './NumberSliderV2';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.scss b/packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.scss
new file mode 100644
index 0000000000..d87c7e986e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.scss
@@ -0,0 +1,27 @@
+.fy-textarea {
+  margin-bottom: 1rem;
+
+  &:only-child,
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.d-flex:not(.flex-column) > .fy-textarea {
+  margin-bottom: 0;
+  margin-right: 0.5rem;
+
+  &:only-child,
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gap-1 > .fy-textarea,
+.gap-2 > .fy-textarea,
+.gap-3 > .fy-textarea,
+.gap-4 > .fy-textarea,
+.gap-5 > .fy-textarea {
+  margin-bottom: 0;
+  margin-right: 0;
+}
diff --git a/packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.tsx b/packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.tsx
new file mode 100644
index 0000000000..5b2aa717d4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TextAreaV2/TextAreaV2.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import "./TextAreaV2.scss";
+
+interface TextAreaProps {
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  initialValue?: string;
+  value?: string;
+  onChange?: (newText:string) => void
+}
+
+export default function TextArea({
+  label,
+  required,
+  value,
+  placeholder,
+  onChange: onChangeCallback,
+}: TextAreaProps) {
+  const handleOnChange = (e:React.ChangeEvent<HTMLTextAreaElement>)=>{
+    if(onChangeCallback) onChangeCallback (e.target.value);
+  }
+  return (
+    <div>
+      {label && 
+        <label className={`sub-title ${required ? "required" : ""}`}>
+          {label}
+        </label>
+      }
+      <div className="form-group">
+        <textarea
+          className="form-control"
+          onChange={handleOnChange}
+          {...{value, placeholder}}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/TextAreaV2/index.tsx b/packages/fakeyou.com/src/components/common/TextAreaV2/index.tsx
new file mode 100644
index 0000000000..82ff177308
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TextAreaV2/index.tsx
@@ -0,0 +1 @@
+export { default } from "./TextAreaV2";
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index ecda0ea903..ec351c3a95 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -15,6 +15,7 @@ import Input from "./Input";
 import Label from "./Label";
 import Modal from "./Modal";
 import NumberSlider from "./NumberSlider";
+import NumberSliderV2 from "./NumberSliderV2";
 import Panel from "./Panel";
 import Radio from "./Radio";
 import SegmentButtons from "./SegmentButtons";
@@ -28,6 +29,8 @@ import TempAudioPlayer from "./TempAudioPlayer";
 import TempInput from "./TempInput";
 import TempSelect from "./TempSelect";
 import TempTextArea from "./TempTextArea";
+import TextArea from "./TextArea";
+import TextAreaV2 from "./TextAreaV2";
 import TintSpinner from "./TintSpinner";
 import VideoInput from "./VideoInput";
 
@@ -49,6 +52,7 @@ export {
   Label,
   Modal,
   NumberSlider,
+  NumberSliderV2,
   Panel,
   Radio,
   SegmentButtons,
@@ -62,6 +66,8 @@ export {
   TempInput,
   TempSelect,
   TempTextArea,
+  TextArea,
+  TextAreaV2,
   TintSpinner,
   VideoInput
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
index 57d0b98005..8b1683244d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
@@ -1,8 +1,18 @@
-import React from "react";
+import React, {useState} from "react";
 import { useMedia } from "hooks";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { states, Action, State } from "../storytellerFilterReducer";
-import { BasicVideo, ErrorMessage, Panel, Spinner } from "components/common";
+import {
+  BasicVideo,
+  ErrorMessage,
+  NumberSliderV2,
+  Panel,
+  Spinner,
+  TextAreaV2
+} from "components/common";
+
+import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function PageFilterControls({
   debug=false, t, pageState, dispatchPageState
@@ -24,22 +34,85 @@ export default function PageFilterControls({
     },
   });
 
+  const [filterState, setFilterState] = useState({
+    posPrompt: "",
+    negPrompt: "",
+    firstPass: 15,
+    upScalePass: 15
+  });
+
+  const handleOnChange = (key: string, newValue:any,) => {
+    setFilterState((curr)=>({...curr, [key]: newValue}));
+  }
+
   if (pageState.mediaFile){
     const mediaLink = new BucketConfig().getGcsUrl(pageState.mediaFile.public_bucket_path);
     if (mediaLink)
       return(
+        <>
         <Panel>
           <div className="row g-3 p-3">
             {/* <h1>{t("message.fileUploaded")}</h1> */}
             {debug && <p>{`File Token: ${pageState.mediaFileToken}`}</p> }
-            <div className="col-6">
+            <div className="col-5">
               <BasicVideo src={mediaLink} />
             </div>
+            <div className="col-1 d-flex align-items-center justify-items-center">
+              <FontAwesomeIcon icon={faChevronRight} className="fa-6x"/>
+            </div>
             <div className="col-6">
               <BasicVideo src={mediaLink} />
             </div>
           </div>
         </Panel>
+        <Panel className="mt-4">
+          <div className="row g-3 p-3">
+            <p>Select A Stable Diffusion Model</p>
+            <br />
+            <p>Select A LoRA</p>
+            <TextAreaV2
+              {...{
+                label: "Prompt",
+                placeholder: "Enter a prompt",
+                onChange: (val:string)=>handleOnChange("posPrompt", val),
+                value: filterState.posPrompt,
+                required: false,
+              }}
+            />
+            <TextAreaV2
+              {...{
+                label: "Negative Prompt",
+                placeholder: "Enter Negative Prompt",
+                onChange: (val:string)=>handleOnChange("negPrompt", val),
+                value: filterState.negPrompt,
+                required: false,
+              }}
+            />
+          </div>
+        </Panel>
+        <Panel className="mt-4">
+          <div className="row g-3 p-3">
+            <NumberSliderV2 {...{
+                min: 1,
+                max: 30,
+                step: 0.5,
+                initialValue: filterState.firstPass,
+                label: " Denoise First Pass",
+                thumbTip: "Denoise First Pass",
+                onChange: (val)=>{handleOnChange("firstPass",val)}
+              }}/>
+            <NumberSliderV2 {...{
+              min: 1,
+              max: 30,
+              initialValue: filterState.upScalePass,
+              label: "Denoise Upscale Pass",
+              thumbTip: "Denoise Upscale Pass",
+              onChange: (val)=>{handleOnChange("upScalePass", val)}
+            }}/>
+            <br />
+          </div>
+        </Panel>
+        </>
       );
   }else if (pageState.status <= states.FILE_LOADING){
     return (

From 565ec1fa69d64326f4f17453d3201ddb6aa32a08 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 1 Feb 2024 01:31:05 -0500
Subject: [PATCH 02/10] fixed slider, new subrouter, etc

---
 .../common/NumberSliderV2/NumberSliderV2.tsx  |  7 +---
 .../fakeyou.com/src/v2/view/PageContainer.tsx |  2 +-
 .../storyteller_filter/StorytellerFilter.tsx  | 31 ++++-------------
 .../components/pageFilterControls.tsx         |  7 ++--
 .../components/pageVideoProvision.tsx         | 10 ++----
 .../components/tabContentLibrary.tsx          | 17 ++++++----
 .../storytellerFilterReducer.tsx              |  2 +-
 .../storytellerFilterRoutes.tsx               | 34 +++++++++++++++++++
 8 files changed, 60 insertions(+), 50 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx

diff --git a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
index cf29ef02d3..4796403494 100644
--- a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
+++ b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
@@ -57,20 +57,15 @@ export default function NumberSlider({
   const step = stepProps && stepProps <= max-min ? stepProps 
     : max-min >= 1 ? 1 : (max-min) / 10;
   const initialValue = initialValueProps && initialValueProps <= max && initialValueProps >= min ? initialValueProps
-  : max-min == step ? min : roundToStep((max+min)/2, step);
+  : max-min === step ? min : roundToStep((max+min)/2, step);
 
-  // const [value, setValue] = useState<number>(initialValue);
-  // const didMount = useRef(false);
   function handleInputOnChange(e: React.ChangeEvent<HTMLInputElement>){
-    // setValue(Number.parseInt(e.target.value));
     if(onChangeCallback)onChangeCallback(Number.parseInt(e.target.value))
   }
   function handleRangeOnChange(rangeValue: number[]){
     if(onChangeCallback)onChangeCallback(rangeValue[0])
-    // setValue(rangeValue[0])
   }
 
-
   return (
     <div>
       <Label {...{ label, required }} />
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 8383dff0ed..3066020d41 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -822,7 +822,7 @@ class PageContainer extends React.Component<
                   />
                 </Route>
 
-                <Route path="/storyteller-filter/:mediaToken?">
+                <Route path="/storyteller-filter">
                   <StorytellerFilterPage
                     {...{
                       enqueueInferenceJob: this.props.enqueueInferenceJob,
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx
index 2e223acdf9..5ee9447359 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx
@@ -3,13 +3,11 @@ import React, {useReducer } from 'react';
 import { useLocalize } from "hooks";
 import { FrontendInferenceJobType, InferenceJob } from '@storyteller/components/src/jobs/InferenceJob';
 
-import { Container, ErrorMessage } from "components/common";
+import { Container } from "components/common";
 import PageHeader from "components/layout/PageHeader";
 
-import PageVideoProvision from './components/pageVideoProvision';
-import PageFilterControls from './components/pageFilterControls';
 import { states, reducer } from "./storytellerFilterReducer";
-
+import SubRoutes from "./storytellerFilterRoutes";
 
 export default function StorytellerFilter(props:{
   enqueueInferenceJob: (
@@ -20,37 +18,20 @@ export default function StorytellerFilter(props:{
   inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
 }){
   const debug=true;
-  const { t } = useLocalize("StorytellerFilter");
-  const { NO_FILE, FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED, FILE_SELECTED, FILE_LOADING, FILE_LOADED } = states;
+  const {t} = useLocalize("StorytellerFilter");
+  const { NO_FILE } = states;
   const [pageState, dispatchPageState] = useReducer(reducer, {
     status: NO_FILE,
   });
 
-  const pagePicker = () => {
-    switch (pageState.status){
-      case NO_FILE:
-      case FILE_STAGED:
-      case FILE_UPLOADING:
-      case FILE_SELECTED:
-        return <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
-      case FILE_UPLOADED:
-      case FILE_LOADING:
-      case FILE_LOADED:
-        return <PageFilterControls {...{debug, t, pageState, dispatchPageState}}/>
-      default:
-        return <ErrorMessage/>
-    }
-  }
-  const currPage = pagePicker();
-
   return(
     <Container type="panel" className="mb-5">
       <PageHeader
         title={t("headings.title")}
         subText={t("headings.subtitle")}
-        // imageUrl="/images/header/video-mocap.png"
       />
-      {currPage}
+
+      <SubRoutes {...{debug, t, pageState, dispatchPageState}}/>
     </Container>
   );
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
index 8b1683244d..6a9a39a76b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
@@ -1,4 +1,6 @@
 import React, {useState} from "react";
+import { useParams } from "react-router-dom";
+
 import { useMedia } from "hooks";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { states, Action, State } from "../storytellerFilterReducer";
@@ -22,11 +24,12 @@ export default function PageFilterControls({
   pageState: State;
   dispatchPageState: (action: Action) => void;
 }) {
+  const { mediaToken } = useParams<any>();
+
   useMedia({
-    mediaToken: pageState.mediaFileToken,
+    mediaToken: pageState.mediaFileToken || mediaToken,
     onSuccess: (res: any) => {
       // ratings.gather({ res, key: "token" });
-      console.log(res)
       dispatchPageState({
         type: 'loadFileSuccess',
         payload: {mediaFile: res}
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx
index 095356ae63..78105ce4d1 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { Redirect, useLocation } from "react-router-dom";
 
 import { BasicVideo, Panel, Tabs } from "components/common";
 
-import { Action, State } from "../storytellerFilterReducer";
+import { State, Action } from "../storytellerFilterReducer";
 import TabContentUpload from "./tabContentUpload";
 import TabContentLibrary from "./tabContentLibrary";
 
@@ -15,6 +14,7 @@ export default function PageVideoProvision({
   pageState: State;
   dispatchPageState: (action: Action) => void;
 }) {
+
   const tabs = [
     {
       label: t("tabTitle.upload"),
@@ -34,12 +34,6 @@ export default function PageVideoProvision({
     },
   ];
 
-  //pick default tab using pathname
-  const { pathname } = useLocation();
-  if (pathname === "/storyteller-filter" || pathname === "/storyteller-filter/") {
-    return <Redirect to={"/storyteller-filter/upload"} />;
-  }
-
   return(
     <Panel>
       <div className="row g-0">
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
index 7608460c6f..0f4ebcdfaa 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
@@ -1,7 +1,9 @@
-import SelectModal from "components/common/SelectModal/SelectModal";
 import React from "react";
+import { NavLink } from "react-router-dom";
 import { states, Action, State } from "../storytellerFilterReducer";
 import { Button } from "components/common";
+import SelectModal from "components/common/SelectModal/SelectModal";
+
 export default function TabContentLibrary({
   t, pageState, dispatchPageState
 }: {
@@ -9,7 +11,6 @@ export default function TabContentLibrary({
   pageState: State;
   dispatchPageState: (action: Action) => void;
 }){
-
   const handleProceed = ()=>{
     dispatchPageState({type: "loadFile"})
   }
@@ -35,11 +36,13 @@ export default function TabContentLibrary({
           },
         ]}
       />
-      {pageState.status === states.FILE_SELECTED && 
-        <Button 
-          label={t("button.proceed")}
-          onClick={handleProceed}
-        />
+      {pageState.status === states.FILE_SELECTED &&
+        <NavLink to={`load/${pageState.mediaFileToken}`}>
+          <Button 
+            label={t("button.proceed")}
+            onClick={handleProceed}
+          />
+        </NavLink>
       }
     </div>
   );
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx
index 1362a3ab13..7da0a9e6cd 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx
@@ -28,7 +28,7 @@ export type Action =
 
 
 export function reducer (state: State, action: Action): State {
-  console.log(action);
+
   switch(action.type){
     case 'stagedFile':
       return {...state, status: states.FILE_STAGED}
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx
new file mode 100644
index 0000000000..ce67ca1a19
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import {Switch, Route, useRouteMatch, Redirect} from "react-router-dom";
+import PageFilterControls from "./components/pageFilterControls";
+import PageVideoProvision from "./components/pageVideoProvision";
+import {State,Action} from "./storytellerFilterReducer";
+
+export default function SubRoutes ({
+  debug, t, pageState, dispatchPageState
+}:{
+  debug?:boolean,
+  t:Function,
+  pageState:State,
+  dispatchPageState: (action: Action) => void
+}){
+  const { path } = useRouteMatch();
+
+  return(
+    <Switch>
+      <Route exact path={`${path}/load/:mediaToken`} >
+        <PageFilterControls {...{debug, t, pageState, dispatchPageState}}/>
+      </Route>
+      <Route exact path={`${path}/upload`}>
+        <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
+      </Route>
+      <Route exact path={`${path}/select-media`}>
+        <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
+      </Route>
+      <Route path={`${path}`}>
+        <Redirect to={`${path}/upload`} />
+      </Route>
+    </Switch>
+  )
+}
+  
\ No newline at end of file

From 08ff13b93a30c2353ec8a7cec51621f72bad7de7 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 1 Feb 2024 15:21:30 -0500
Subject: [PATCH 03/10] detached select modal from useToken, fixed all the
 components that need that, fix redirect for file upload, more UI elements
 that corresponds to ticket

---
 .../components/common/Accordion/Accordion.tsx |   7 +-
 .../common/Card/AudioCard/AudioCard.tsx       |  17 +-
 .../common/Card/ImageCard/ImageCard.tsx       |  16 +-
 .../common/Card/VideoCard/VideoCard.tsx       |  59 +-----
 .../common/SelectModal/SelectMediaList.tsx    |   2 +-
 .../common/SelectModal/SelectModal.tsx        |  47 +++--
 .../common/SelectModal/SelectWeightsList.tsx  |   2 +-
 .../components/common/SelectModal/index.tsx   |   1 +
 .../src/components/common/index.tsx           |   4 +
 .../components/pageFilterControls.tsx         | 173 ++++++++++++------
 .../components/tabContentLibrary.tsx          |   4 +-
 .../components/tabContentUpload.tsx           |   7 +-
 .../components/tabContentLibrary.tsx          |   4 +-
 .../inference_panels/SdInferencePanel.tsx     |  13 +-
 14 files changed, 186 insertions(+), 170 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/SelectModal/index.tsx

diff --git a/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx b/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx
index 206b841044..f44214a189 100644
--- a/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx
+++ b/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx
@@ -11,6 +11,7 @@ import { faChevronDown } from "@fortawesome/pro-solid-svg-icons";
 import { animated, useSpring } from "@react-spring/web";
 
 interface AccordionProps {
+  className?: string;
   children: React.ReactNode;
 }
 
@@ -96,7 +97,7 @@ function AccordionItem({
   );
 }
 
-function Accordion({ children }: AccordionProps) {
+function Accordion({ children, className }: AccordionProps) {
   // Extract titles of items that should be initially open
   const defaultOpenTitles = React.Children.toArray(children)
     .filter((child: any) => child.props.defaultOpen)
@@ -115,7 +116,9 @@ function Accordion({ children }: AccordionProps) {
 
   return (
     <AccordionContext.Provider value={{ openItems, toggleItem }}>
-      <div className="d-flex flex-column gap-3">{children}</div>
+      <div className={`d-flex flex-column gap-3 ${className}`}>
+        {children}
+      </div>
     </AccordionContext.Provider>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index 85adf2974a..4b00df8773 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -12,7 +12,7 @@ import Button from "components/common/Button";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import WeightCoverImage from "components/common/WeightCoverImage";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
-import useToken from "hooks/useToken";
+// import useToken from "hooks/useToken";
 import getCardUrl from "../getCardUrl";
 
 interface AudioCardProps {
@@ -24,7 +24,7 @@ interface AudioCardProps {
   source?: string;
   type: "media" | "weights";
   inSelectModal?: boolean;
-  onResultSelect?: () => void;
+  onResultSelect?: (data:{token: string, title:string}) => void;
 }
 
 export default function AudioCard({
@@ -38,7 +38,7 @@ export default function AudioCard({
   inSelectModal = false,
   onResultSelect,
 }: AudioCardProps) {
-  const { setToken, setWeightTitle } = useToken();
+  // const { setToken, setWeightTitle } = useToken();
   const linkUrl = getCardUrl(data,source,type);
   const history = useHistory();
 
@@ -47,10 +47,13 @@ export default function AudioCard({
   };
 
   const handleSelectModalResultSelect = () => {
-    if (inSelectModal) {
-      setToken(data.weight_token);
-      setWeightTitle && setWeightTitle(data.title);
-      onResultSelect && onResultSelect();
+    console.log(`inSelectModal : ${inSelectModal}`);
+    console.log(`onResultSelect : ${onResultSelect}`);
+    if (inSelectModal && onResultSelect) {
+      onResultSelect({
+        token: data.weight_token,
+        title: data.title
+      });
     }
   };
 
diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
index 6fb9d1cdee..2e42cb8cfb 100644
--- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
@@ -10,7 +10,7 @@ import Button from "components/common/Button";
 import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
-import useToken from "hooks/useToken";
+// import useToken from "hooks/useToken";
 import getCardUrl from "../getCardUrl";
 
 interface ImageCardProps {
@@ -21,7 +21,7 @@ interface ImageCardProps {
   source?: string;
   type: "media" | "weights";
   inSelectModal?: boolean;
-  onResultSelect?: () => void;
+  onResultSelect?: (data:{token: string, title:string}) => void;
 }
 
 export default function ImageCard({
@@ -35,18 +35,22 @@ export default function ImageCard({
   onResultSelect,
 }: ImageCardProps) {
   const history = useHistory();
-  const { setToken, setWeightTitle } = useToken();
+  // const { setToken, setWeightTitle } = useToken();
   const linkUrl = getCardUrl(data,source,type);
 
   const handleInnerClick = (event: any) => {
+    console.log("handleInnderClick")
     event.stopPropagation();
   };
 
   const handleSelectModalResultSelect = () => {
+    console.log("handleSelectModalResultSelect")
     if (inSelectModal) {
-      setToken(data.weight_token);
-      setWeightTitle && setWeightTitle(data.title);
-      onResultSelect && onResultSelect();
+      
+      onResultSelect && onResultSelect({
+        token: data.weight_token,
+        title: data.title
+      });
     }
   };
 
diff --git a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx
index d30bac3723..ea1858410a 100644
--- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx
@@ -9,7 +9,6 @@ import Button from "components/common/Button";
 import CreatorName from "../CreatorName";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { Link } from "react-router-dom";
-import useToken from "hooks/useToken";
 import getCardUrl from "../getCardUrl";
 
 interface VideoCardProps {
@@ -19,7 +18,7 @@ interface VideoCardProps {
   source?: string;
   type: "media" | "weights";
   inSelectModal?: boolean;
-  onResultSelect?: () => void;
+  onResultSelect?: (data:{token: string, title:string}) => void;
 }
 
 export default function VideoCard({
@@ -31,7 +30,6 @@ export default function VideoCard({
   inSelectModal = false,
   onResultSelect,
 }: VideoCardProps) {
-  const { setToken, setWeightTitle } = useToken();
   const linkUrl = getCardUrl(data,source,type);
 
   const handleInnerClick = (event: any) => {
@@ -39,10 +37,8 @@ export default function VideoCard({
   };
 
   const handleSelectModalResultSelect = () => {
-    if (inSelectModal) {
-      setToken(data.weight_token || data.token);
-      setWeightTitle && setWeightTitle(data.title);
-      onResultSelect && onResultSelect();
+    if (inSelectModal && onResultSelect) {
+      onResultSelect(data);
     }
   };
 
@@ -137,55 +133,6 @@ export default function VideoCard({
           </div>
         </>
       )}
-
-      {/* {type === "weights" && (
-        <>
-          <img
-            src={data.public_bucket_path}
-            alt={data.weight_name}
-            className="card-video"
-          />
-          <div className="card-img-overlay">
-            <div className="card-img-gradient" />
-
-            <div className="d-flex align-items-center">
-              <div className="d-flex flex-grow-1">
-                <Badge label="Video" color="purple" overlay={true} />
-              </div>
-              <Button
-                icon={faArrowRight}
-                iconFlip={true}
-                variant="link"
-                label="Use"
-                className="fs-7"
-                onClick={() => {
-                  history.push(linkUrl);
-                }}
-              />
-            </div>
-            <FontAwesomeIcon icon={faPlayCircle} className="card-video-play" />
-            <div className="card-img-overlay-text">
-              <div>
-                <h6 className="fw-semibold text-white mb-1">
-                  {data.weight_name}
-                </h6>
-                <p className="fs-7 opacity-75">{timeAgo}</p>
-                <div>
-                  <LikeButton
-                    {...{
-                      overlay: true,
-                      ...ratings.makeProps({
-                        entityToken: data.weight_token,
-                        entityType: "model_weight",
-                      }),
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </>
-      )} */}
     </Card>
   );
 
diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx
index 6c84003cfd..840dfcc60b 100644
--- a/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx
@@ -10,7 +10,7 @@ import { ListMediaFiles } from "@storyteller/components/src/api/media_files/List
 interface SelectMediaListProps {
   mediaType: string;
   listKey: string;
-  onResultSelect?: () => void;
+  onResultSelect?: (data:{token:string, title:string}) => void;
 }
 
 export default function SelectMediaList({
diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
index b4e6e8dba1..d30c4c57c3 100644
--- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
@@ -4,7 +4,6 @@ import Modal from "../Modal";
 import NonRouteTabs from "../Tabs/NonRouteTabs";
 import Input from "../Input";
 import Button from "../Button";
-import useToken from "hooks/useToken";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import SelectMediaList from "./SelectMediaList";
 import SelectWeightsList from "./SelectWeightsList";
@@ -21,7 +20,10 @@ interface SelectModalProps {
   label?: string;
   tabs: TabConfig[];
   modalTitle?: string;
-  onSelect?: (token: string) => void;
+  onSelect?: (data:{
+    token: string,
+    title: string,
+  }) => void;
   required?: boolean;
 }
 
@@ -34,8 +36,8 @@ const SelectModal = memo(
     required,
   }: SelectModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { token, setToken, weightTitle, setWeightTitle } = useToken();
-    const [selectedValue, setSelectedValue] = useState("");
+    const initialValue = {token:"", title:""};
+    const [selectedValue, setSelectedValue] = useState(initialValue);
     const [activeTab, setActiveTab] = useState(tabs[0].tabKey);
     const [mediaType, setMediaType] = useState(
       tabs[0].mediaTypeFilter || "all"
@@ -51,19 +53,6 @@ const SelectModal = memo(
       setWeightType(currentTab?.weightTypeFilter || "all");
     }, [activeTab, tabs]);
 
-    useEffect(() => {
-      if (token && token !== selectedValue && onSelect) {
-        setSelectedValue(token);
-        onSelect(token);
-      } else if (weightTitle && weightTitle !== selectedValue && onSelect) {
-        setSelectedValue(weightTitle);
-        onSelect(weightTitle);
-      }
-
-      console.log("token", token, "weightTitle", weightTitle);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [token, weightTitle]);
-
     const openModal = () => {
       setIsModalOpen(true);
     };
@@ -73,10 +62,18 @@ const SelectModal = memo(
     };
 
     const handleRemove = () => {
-      setWeightTitle && setWeightTitle("");
-      setToken("");
+      setSelectedValue(initialValue);
     };
 
+    const handleOnSelect = (data:{token:string, title:string}) => {
+      console.log("selct modal handleOnSelect")
+      console.log(data);
+      console.log(data.title);
+      setSelectedValue({token: data.token, title: data.title || ""});
+      if (onSelect) onSelect(data);
+      closeModal();
+    }
+
     const searchTabs = tabs.map(tab => ({
       label: tab.label,
       content: tab.searcher ? (
@@ -92,14 +89,14 @@ const SelectModal = memo(
             <SelectMediaList
               mediaType={mediaType}
               listKey={tab.tabKey}
-              onResultSelect={closeModal}
+              onResultSelect={handleOnSelect}
             />
           )}
           {tab.type === "weights" && (
             <SelectWeightsList
               weightType={weightType}
               listKey={tab.tabKey}
-              onResultSelect={closeModal}
+              onResultSelect={handleOnSelect}
             />
           )}
         </>
@@ -122,10 +119,12 @@ const SelectModal = memo(
               disabled={true}
               className="w-100"
               placeholder="None selected"
-              value={weightTitle ? weightTitle : token || ""}
+              value={selectedValue.title !=="" 
+                ? selectedValue.title 
+                : selectedValue.token || ""}
             />
-            <Button label={token ? "Change" : "Select"} onClick={openModal} />
-            {token && (
+            <Button label={selectedValue.token !== "" ? "Change" : "Select"} onClick={openModal} />
+            {selectedValue.token && (
               <Button
                 square={true}
                 variant="danger"
diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx
index d57220d124..123a933271 100644
--- a/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx
@@ -10,7 +10,7 @@ import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 interface SelectWeightsListProps {
   weightType: string;
   listKey: string;
-  onResultSelect?: () => void;
+  onResultSelect?: (data:{token:string, title:string}) => void;
 }
 
 export default function SelectWeightsList({
diff --git a/packages/fakeyou.com/src/components/common/SelectModal/index.tsx b/packages/fakeyou.com/src/components/common/SelectModal/index.tsx
new file mode 100644
index 0000000000..34f8ad1385
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SelectModal/index.tsx
@@ -0,0 +1 @@
+export { default } from "./SelectModal";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index ec351c3a95..bc3ae3d344 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -1,3 +1,4 @@
+import Accordion from "./Accordion";
 import AudioBlobPreview from "./AudioBlobPreview";
 import AudioInput from "./AudioInput";
 import BasicVideo from "./BasicVideo";
@@ -20,6 +21,7 @@ import Panel from "./Panel";
 import Radio from "./Radio";
 import SegmentButtons from "./SegmentButtons";
 import Select from "./Select";
+import SelectModal from "./SelectModal";
 import Skeleton from "./Skeleton";
 import Slider from "./Slider";
 import Spinner from "./Spinner";
@@ -35,6 +37,7 @@ import TintSpinner from "./TintSpinner";
 import VideoInput from "./VideoInput";
 
 export {
+  Accordion,
   AudioBlobPreview,
   AudioInput,
   BasicVideo,
@@ -57,6 +60,7 @@ export {
   Radio,
   SegmentButtons,
   Select,
+  SelectModal,
   Skeleton,
   Slider,
   Spinner,
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
index 6a9a39a76b..771a0e25e8 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
@@ -5,10 +5,12 @@ import { useMedia } from "hooks";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { states, Action, State } from "../storytellerFilterReducer";
 import {
+  Accordion,
   BasicVideo,
   ErrorMessage,
   NumberSliderV2,
   Panel,
+  SelectModal,
   Spinner,
   TextAreaV2
 } from "components/common";
@@ -38,6 +40,8 @@ export default function PageFilterControls({
   });
 
   const [filterState, setFilterState] = useState({
+    sdModelToken: "",
+    loraModelToken: "",
     posPrompt: "",
     negPrompt: "",
     firstPass: 15,
@@ -53,68 +57,115 @@ export default function PageFilterControls({
     if (mediaLink)
       return(
         <>
-        <Panel>
-          <div className="row g-3 p-3">
-            {/* <h1>{t("message.fileUploaded")}</h1> */}
-            {debug && <p>{`File Token: ${pageState.mediaFileToken}`}</p> }
-            <div className="col-5">
-              <BasicVideo src={mediaLink} />
+          <Panel>
+            <div className="row g-3 p-3">
+              {/* <h1>{t("message.fileUploaded")}</h1> */}
+              {debug && <p>{`File Token: ${pageState.mediaFileToken}`}</p> }
+              <div className="col-5">
+                <BasicVideo src={mediaLink} />
+              </div>
+              <div className="col-1 d-flex align-items-center justify-items-center">
+                <FontAwesomeIcon icon={faChevronRight} className="fa-6x"/>
+              </div>
+              <div className="col-6">
+                <BasicVideo src={mediaLink} />
+              </div>
             </div>
-            <div className="col-1 d-flex align-items-center justify-items-center">
-              <FontAwesomeIcon icon={faChevronRight} className="fa-6x"/>
-            </div>
-            <div className="col-6">
-              <BasicVideo src={mediaLink} />
-            </div>
-          </div>
-        </Panel>
-        <Panel className="mt-4">
-          <div className="row g-3 p-3">
-            <p>Select A Stable Diffusion Model</p>
-            <br />
-            <p>Select A LoRA</p>
-            <TextAreaV2
-              {...{
-                label: "Prompt",
-                placeholder: "Enter a prompt",
-                onChange: (val:string)=>handleOnChange("posPrompt", val),
-                value: filterState.posPrompt,
-                required: false,
-              }}
-            />
-            <TextAreaV2
-              {...{
-                label: "Negative Prompt",
-                placeholder: "Enter Negative Prompt",
-                onChange: (val:string)=>handleOnChange("negPrompt", val),
-                value: filterState.negPrompt,
-                required: false,
-              }}
-            />
-          </div>
-        </Panel>
-        <Panel className="mt-4">
-          <div className="row g-3 p-3">
-            <NumberSliderV2 {...{
-                min: 1,
-                max: 30,
-                step: 0.5,
-                initialValue: filterState.firstPass,
-                label: " Denoise First Pass",
-                thumbTip: "Denoise First Pass",
-                onChange: (val)=>{handleOnChange("firstPass",val)}
-              }}/>
-            <NumberSliderV2 {...{
-              min: 1,
-              max: 30,
-              initialValue: filterState.upScalePass,
-              label: "Denoise Upscale Pass",
-              thumbTip: "Denoise Upscale Pass",
-              onChange: (val)=>{handleOnChange("upScalePass", val)}
-            }}/>
-            <br />
-          </div>
-        </Panel>
+          </Panel>
+          <Accordion className="mt-4">
+            <Accordion.Item title={t("heading1")}>
+              <div className="row g-3 p-3">
+                <SelectModal 
+                  modalTitle="Select a Stable Diffusion Weight"
+                  label="Select a Stable Diffusion Weight"
+                  onSelect={({token})=>{
+                    console.log(`calling from select modal result select ${token}`);
+                    handleOnChange("sdModelToken", token);
+                  }}
+                  tabs={[
+                    {
+                      label: "All Weights",
+                      tabKey: "allWeights",
+                      weightTypeFilter: "sdxl",
+                      searcher: true,
+                      type: "weights",
+                    },
+                    {
+                      label: "Bookmarked",
+                      tabKey: "bookmarkedWeights",
+                      weightTypeFilter: "sdxl",
+                      searcher: false,
+                      type: "weights",
+                    },
+                  ]}
+                />
+                <SelectModal
+                  modalTitle="Select a LoRA Weight"
+                  label="Additional LoRA Weight"
+                  onSelect={({token})=>{
+                    console.log(`calling from select modal result select ${token}`);
+                    handleOnChange("loraModelToken", token);
+                  }}
+                  tabs={[
+                    {
+                      label: "All LoRA Weights",
+                      tabKey: "allLoraWeights",
+                      weightTypeFilter: "rvc_v2",
+                      searcher: true,
+                      type: "weights",
+                    },
+                    {
+                      label: "Bookmarked",
+                      tabKey: "bookmarkedLoraWeights",
+                      weightTypeFilter: "rvc_v2",
+                      searcher: false,
+                      type: "weights",
+                    },
+                  ]}
+                />
+                <TextAreaV2
+                  {...{
+                    label: "Prompt",
+                    placeholder: "Enter a prompt",
+                    onChange: (val:string)=>handleOnChange("posPrompt", val),
+                    value: filterState.posPrompt,
+                    required: false,
+                  }}
+                />
+                <TextAreaV2
+                  {...{
+                    label: "Negative Prompt",
+                    placeholder: "Enter Negative Prompt",
+                    onChange: (val:string)=>handleOnChange("negPrompt", val),
+                    value: filterState.negPrompt,
+                    required: false,
+                  }}
+                />
+              </div>
+            </Accordion.Item>
+            <Accordion.Item title={t("headings2")}>
+              <div className="row g-3 p-3">
+                <NumberSliderV2 {...{
+                    min: 1,
+                    max: 30,
+                    step: 0.5,
+                    initialValue: filterState.firstPass,
+                    label: " Denoise First Pass",
+                    thumbTip: "Denoise First Pass",
+                    onChange: (val)=>{handleOnChange("firstPass",val)}
+                  }}/>
+                <NumberSliderV2 {...{
+                  min: 1,
+                  max: 30,
+                  initialValue: filterState.upScalePass,
+                  label: "Denoise Upscale Pass",
+                  thumbTip: "Denoise Upscale Pass",
+                  onChange: (val)=>{handleOnChange("upScalePass", val)}
+                }}/>
+                <br />
+              </div>
+            </Accordion.Item>
+          </Accordion>
         </>
       );
   }else if (pageState.status <= states.FILE_LOADING){
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
index 0f4ebcdfaa..d9b321c56a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
@@ -14,10 +14,10 @@ export default function TabContentLibrary({
   const handleProceed = ()=>{
     dispatchPageState({type: "loadFile"})
   }
-  const handleOnSelect = (token:string)=>{
+  const handleOnSelect = (data:{token:string, title:string})=>{
     dispatchPageState({
       type: "selectedFile",
-      payload: {mediaFileToken: token}
+      payload: {mediaFileToken: data.token}
     });
   };
   return (
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx
index b985ee9bc8..10fb07c3ac 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Redirect } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
 
 import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia";
@@ -15,7 +16,7 @@ export default function TabContentUpload({
   dispatchPageState: (action: Action) => void;
 }) {
   const videoProps = useFile({});
-  const {NO_FILE, FILE_STAGED, FILE_UPLOADING} = states;
+  const {NO_FILE, FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED} = states;
 
   const makeVideoUploadRequest = () => ({
     uuid_idempotency_token: uuidv4(),
@@ -85,6 +86,10 @@ export default function TabContentUpload({
         </div>
       </div>
     );
+  }else if (pageState.status === FILE_UPLOADED){
+    return(
+      <Redirect to={`load/${pageState.mediaFileToken}`}/>
+    )
   }
   return <ErrorMessage />;
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
index bdfd91ceb4..5d8bd7713c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
@@ -20,8 +20,8 @@ export default function TabContentLibrary({
         payload: { mediaFileToken: token },
       });
   };
-  const handleOnSelect = (token: string) => {
-    setToken(token);
+  const handleOnSelect = (data:{token:string,title:string}) => {
+    setToken(data.token);
   };
 
   return (
diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
index 05218c3a0a..3e629a9655 100644
--- a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
@@ -1,16 +1,17 @@
 import React, { useRef, useState, memo } from "react";
 import {
+  Accordion,
   Button,
   Input,
   Label,
   NumberSlider,
   Panel,
   SegmentButtons,
+  SelectModal,
   TempSelect,
   TempTextArea,
 } from "components/common";
 import { onChanger } from "resources";
-import Accordion from "components/common/Accordion";
 import {
   faRectangleLandscape,
   faRectanglePortrait,
@@ -23,7 +24,6 @@ import {
   EnqueueImageGenIsError,
 } from "@storyteller/components/src/api/image_generation/EnqueueImageGen";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
-import SelectModal from "components/common/SelectModal/SelectModal";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import PremiumLock from "components/PremiumLock";
 
@@ -46,12 +46,11 @@ function SdInferencePanel({
   const [loraToken, setLoraToken] = useState<string | null>(null);
   const [weightToken, setWeightToken] = useState(sd_model_token);
 
-  const handleOnWeightSelect = (token: string) => {
-    setWeightToken(token);
+  const handleOnWeightSelect = (data:{token:string,title:string}) => {
+    setLoraToken(data.token);
   };
-
-  const handleOnSelect = (token: string) => {
-    setLoraToken(token);
+  const handleOnSelect = (data:{token:string,title:string}) => {
+    setLoraToken(data.token);
   };
 
   const [isEnqueuing, setIsEnqueuing] = useState(false);

From 4b29aaa70c9535c2124d720d30e29b5481a39162 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 1 Feb 2024 15:35:15 -0500
Subject: [PATCH 04/10] revert navlink card changes

---
 .../common/Card/AudioCard/AudioCard.tsx       | 51 +++++++++----------
 .../inference_panels/SdInferencePanel.tsx     |  2 +-
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index 77cf9dbc46..75d749c113 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useHistory } from "react-router-dom";
+// import { Link, useHistory } from "react-router-dom";
 import Card from "../Card";
 import AudioPlayer from "components/common/AudioPlayer";
 import useTimeAgo from "hooks/useTimeAgo";
@@ -12,8 +12,7 @@ import Button from "components/common/Button";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import WeightCoverImage from "components/common/WeightCoverImage";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
-// import useToken from "hooks/useToken";
-import getCardUrl from "../getCardUrl";
+// import getCardUrl from "../getCardUrl";
 
 interface AudioCardProps {
   bookmarks?: any;
@@ -25,7 +24,7 @@ interface AudioCardProps {
   type: "media" | "weights";
   inSelectModal?: boolean;
   onResultSelect?: (data:{token: string, title:string}) => void;
-  onClick?: (e:any) => any;
+  // onClick?: (e:any) => any;
 }
 
 export default function AudioCard({
@@ -37,12 +36,12 @@ export default function AudioCard({
   source = "",
   type,
   inSelectModal = false,
-  onClick: inClick,
+  // onClick: inClick,
   onResultSelect,
 }: AudioCardProps) {
   // const { setToken, setWeightTitle } = useToken();
-  const linkUrl = getCardUrl(data,source,type);
-  const history = useHistory();
+  // const linkUrl = getCardUrl(data,source,type);
+  // const history = useHistory();
 
   const handleInnerClick = (event: any) => {
     event.stopPropagation();
@@ -168,27 +167,27 @@ export default function AudioCard({
                 <div className="d-flex flex-grow-1">
                   <Badge label={weightBadgeLabel} color={weightBadgeColor} />
                 </div>
-                {inClick ? (
+                {/* {inClick ? (
                   <Button
                     icon={faArrowRight}
                     iconFlip={true}
                     variant="link"
                     label="Select"
                     className="fs-7"
-                    onClick={handleSelectModalResultSelect}
+                    onClick={() => {
+                      history.push(linkUrl);
+                    }}
                   />
-                ) : (
+                ) : ( */}
                   <Button
                     icon={faArrowRight}
                     iconFlip={true}
                     variant="link"
                     label="Use"
                     className="fs-7"
-                    onClick={() => {
-                      history.push(linkUrl);
-                    }}
+                    onClick={handleSelectModalResultSelect}
                   />
-                )}
+                {/* )} */}
               </div>
 
               <div className="d-flex align-items-center mt-3">
@@ -261,18 +260,18 @@ export default function AudioCard({
   );
 
   return (
-    <>
-      {inClick ? (
+    // <>
+    //   {inClick ? (
         <>{card}</>
-      ) : (
-        <Link
-          {...{
-            to: linkUrl
-          }}
-        >
-          {card}
-        </Link>
-      )}
-    </>
+    //   ) : (
+    //     <Link
+    //       {...{
+    //         to: linkUrl
+    //       }}
+    //     >
+    //       {card}
+    //     </Link>
+    //   )}
+    // </>
   );
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
index 3e629a9655..bfee799413 100644
--- a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
@@ -47,7 +47,7 @@ function SdInferencePanel({
   const [weightToken, setWeightToken] = useState(sd_model_token);
 
   const handleOnWeightSelect = (data:{token:string,title:string}) => {
-    setLoraToken(data.token);
+    setWeightToken(data.token);
   };
   const handleOnSelect = (data:{token:string,title:string}) => {
     setLoraToken(data.token);

From 79e46fcc7c2878479582aea50be1b956d6423d3b Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 1 Feb 2024 17:21:18 -0500
Subject: [PATCH 05/10] fixed select modal, all the cards, and related
 components updated to use it

---
 .../src/components/common/Card/AudioCard/AudioCard.tsx    | 5 +----
 .../src/components/common/Card/WeightsCards.tsx           | 2 +-
 .../src/components/common/Searcher/Searcher.tsx           | 2 +-
 .../src/components/common/SelectModal/SelectModal.tsx     | 7 ++-----
 .../storyteller_filter/components/pageFilterControls.tsx  | 8 ++++++--
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index 75d749c113..8bb4e47023 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -33,13 +33,12 @@ export default function AudioCard({
   ratings,
   showCreator,
   showCover,
-  source = "",
+  // source = "",
   type,
   inSelectModal = false,
   // onClick: inClick,
   onResultSelect,
 }: AudioCardProps) {
-  // const { setToken, setWeightTitle } = useToken();
   // const linkUrl = getCardUrl(data,source,type);
   // const history = useHistory();
 
@@ -48,8 +47,6 @@ export default function AudioCard({
   };
 
   const handleSelectModalResultSelect = () => {
-    console.log(`inSelectModal : ${inSelectModal}`);
-    console.log(`onResultSelect : ${onResultSelect}`);
     if (inSelectModal && onResultSelect) {
       onResultSelect({
         token: data.weight_token,
diff --git a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
index 828b14a6d7..b1fe9c0179 100644
--- a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
@@ -13,7 +13,7 @@ export default function WeightsCards({ props, type }: Props) {
     case WeightCategory.TTS:
     case WeightCategory.VC:
     case WeightCategory.ZS:
-      return <AudioCard {...{ ...props, showCover: true }} />;
+      return <AudioCard { ...props} showCover />;
     case WeightCategory.SD:
       return <ImageCard {...props} />;
     default:
diff --git a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx
index abd073d612..c1e7a5bb69 100644
--- a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx
+++ b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx
@@ -17,7 +17,7 @@ interface SearcherProps {
   type?: "page" | "modal";
   dataType?: "media" | "weights";
   weightType?: string;
-  onResultSelect?: () => void;
+  onResultSelect?: (data:{token:string, title:string}) => void;
   searcherKey: string;
 }
 
diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
index d30c4c57c3..d48c17b3ba 100644
--- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
@@ -66,9 +66,6 @@ const SelectModal = memo(
     };
 
     const handleOnSelect = (data:{token:string, title:string}) => {
-      console.log("selct modal handleOnSelect")
-      console.log(data);
-      console.log(data.title);
       setSelectedValue({token: data.token, title: data.title || ""});
       if (onSelect) onSelect(data);
       closeModal();
@@ -79,7 +76,7 @@ const SelectModal = memo(
       content: tab.searcher ? (
         <Searcher
           type="modal"
-          onResultSelect={closeModal}
+          onResultSelect={handleOnSelect}
           searcherKey={tab.tabKey}
           weightType={tab.weightTypeFilter}
         />
@@ -152,4 +149,4 @@ const SelectModal = memo(
   }
 );
 
-export default SelectModal;
+export default SelectModal;
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
index 771a0e25e8..d38668980d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, useEffect} from "react";
 import { useParams } from "react-router-dom";
 
 import { useMedia } from "hooks";
@@ -18,6 +18,8 @@ import {
 import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import UseStateViewer from "components/common/UseStateViewer";
+
 export default function PageFilterControls({
   debug=false, t, pageState, dispatchPageState
 }: {
@@ -47,6 +49,9 @@ export default function PageFilterControls({
     firstPass: 15,
     upScalePass: 15
   });
+  useEffect(()=>{
+    if(debug) console.log(filterState)
+  },[filterState, debug])
 
   const handleOnChange = (key: string, newValue:any,) => {
     setFilterState((curr)=>({...curr, [key]: newValue}));
@@ -79,7 +84,6 @@ export default function PageFilterControls({
                   modalTitle="Select a Stable Diffusion Weight"
                   label="Select a Stable Diffusion Weight"
                   onSelect={({token})=>{
-                    console.log(`calling from select modal result select ${token}`);
                     handleOnChange("sdModelToken", token);
                   }}
                   tabs={[

From ec4aea5093380fef7ebd6320d693abd2439b0455 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 1 Feb 2024 17:23:28 -0500
Subject: [PATCH 06/10] code clean

---
 .../pages/storyteller_filter/components/pageFilterControls.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
index d38668980d..0d90ab03b9 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
@@ -18,8 +18,6 @@ import {
 import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import UseStateViewer from "components/common/UseStateViewer";
-
 export default function PageFilterControls({
   debug=false, t, pageState, dispatchPageState
 }: {
@@ -64,7 +62,6 @@ export default function PageFilterControls({
         <>
           <Panel>
             <div className="row g-3 p-3">
-              {/* <h1>{t("message.fileUploaded")}</h1> */}
               {debug && <p>{`File Token: ${pageState.mediaFileToken}`}</p> }
               <div className="col-5">
                 <BasicVideo src={mediaLink} />

From f957d3d540ff44a20ed1525a2fe26a74f7e80857 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Fri, 2 Feb 2024 00:07:06 -0500
Subject: [PATCH 07/10] fixed typo

---
 .../src/hooks/useMediaFileTypeInfo/useMediaFileTypeInfo.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/hooks/useMediaFileTypeInfo/useMediaFileTypeInfo.tsx b/packages/fakeyou.com/src/hooks/useMediaFileTypeInfo/useMediaFileTypeInfo.tsx
index 42cf70c26e..b0fcc783a3 100644
--- a/packages/fakeyou.com/src/hooks/useMediaFileTypeInfo/useMediaFileTypeInfo.tsx
+++ b/packages/fakeyou.com/src/hooks/useMediaFileTypeInfo/useMediaFileTypeInfo.tsx
@@ -25,7 +25,7 @@ const mediaFileTypeInfo: MediaFileTypeInfo = {
     label: "glTF",
     color: "lime",
   },
-  [MediaFileType.GLTF]: {
+  [MediaFileType.GLB]: {
     label: "GLB",
     color: "lime",
   },

From 104b998af59208b4746b2e29390caa0efb34ccd6 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Fri, 2 Feb 2024 00:21:56 -0500
Subject: [PATCH 08/10] add page to side nav

---
 .../src/components/layout/SideNav/SideNav.tsx     | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index 3d94344135..fc37d2824c 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -15,6 +15,7 @@ import {
   faCameraMovie,
   faPersonRays,
   faMessageImage,
+  faPhotoFilm,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useState } from "react";
@@ -371,6 +372,20 @@ export default function SideNav({
               </NavLink>
             </li>
 
+            <li>
+              <NavLink
+                to="/storyteller-filter"
+                activeClassName="active-link"
+                onClick={handleNavLinkClick}
+              >
+                <FontAwesomeIcon
+                  icon={faPhotoFilm}
+                  className="sidebar-heading-icon"
+                />
+                {t("storytellerFilter")}
+              </NavLink>
+            </li>
+
             <li>
               <NavLink
                 to="/studio"

From 14fcb1df3908928fa9a372c0203e054d094abce4 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Fri, 2 Feb 2024 00:27:46 -0500
Subject: [PATCH 09/10] fixed netlify issue

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

diff --git a/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx b/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
index 184b2fd144..01e4f27330 100644
--- a/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
+++ b/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import useTimeAgo from "hooks/useTimeAgo";
-import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+// import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { MakeRatingsProps } from "hooks/useRatings";
 import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";

From 10f79d33999a99a2c8aa2cfc44d9843bb96fefcf Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 2 Feb 2024 13:21:48 +0700
Subject: [PATCH 10/10] audio card inSelectModal fix

---
 .../common/Card/AudioCard/AudioCard.tsx       | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index 8bb4e47023..4bb0d28dce 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-// import { Link, useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import Card from "../Card";
 import AudioPlayer from "components/common/AudioPlayer";
 import useTimeAgo from "hooks/useTimeAgo";
@@ -12,6 +12,7 @@ import Button from "components/common/Button";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import WeightCoverImage from "components/common/WeightCoverImage";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import getCardUrl from "../getCardUrl";
 // import getCardUrl from "../getCardUrl";
 
 interface AudioCardProps {
@@ -23,7 +24,7 @@ interface AudioCardProps {
   source?: string;
   type: "media" | "weights";
   inSelectModal?: boolean;
-  onResultSelect?: (data:{token: string, title:string}) => void;
+  onResultSelect?: (data: { token: string; title: string }) => void;
   // onClick?: (e:any) => any;
 }
 
@@ -33,14 +34,14 @@ export default function AudioCard({
   ratings,
   showCreator,
   showCover,
-  // source = "",
+  source = "",
   type,
   inSelectModal = false,
   // onClick: inClick,
   onResultSelect,
 }: AudioCardProps) {
-  // const linkUrl = getCardUrl(data,source,type);
-  // const history = useHistory();
+  const linkUrl = getCardUrl(data, source, type);
+  const history = useHistory();
 
   const handleInnerClick = (event: any) => {
     event.stopPropagation();
@@ -50,7 +51,7 @@ export default function AudioCard({
     if (inSelectModal && onResultSelect) {
       onResultSelect({
         token: data.weight_token,
-        title: data.title
+        title: data.title,
       });
     }
   };
@@ -164,7 +165,7 @@ export default function AudioCard({
                 <div className="d-flex flex-grow-1">
                   <Badge label={weightBadgeLabel} color={weightBadgeColor} />
                 </div>
-                {/* {inClick ? (
+                {inSelectModal ? (
                   <Button
                     icon={faArrowRight}
                     iconFlip={true}
@@ -175,7 +176,7 @@ export default function AudioCard({
                       history.push(linkUrl);
                     }}
                   />
-                ) : ( */}
+                ) : (
                   <Button
                     icon={faArrowRight}
                     iconFlip={true}
@@ -184,7 +185,7 @@ export default function AudioCard({
                     className="fs-7"
                     onClick={handleSelectModalResultSelect}
                   />
-                {/* )} */}
+                )}
               </div>
 
               <div className="d-flex align-items-center mt-3">
@@ -257,18 +258,18 @@ export default function AudioCard({
   );
 
   return (
-    // <>
-    //   {inClick ? (
+    <>
+      {inSelectModal ? (
         <>{card}</>
-    //   ) : (
-    //     <Link
-    //       {...{
-    //         to: linkUrl
-    //       }}
-    //     >
-    //       {card}
-    //     </Link>
-    //   )}
-    // </>
+      ) : (
+        <Link
+          {...{
+            to: linkUrl,
+          }}
+        >
+          {card}
+        </Link>
+      )}
+    </>
   );
 }