From 7f6cb82cccd85e05cb2dba73321d562aa97725f1 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 23 Jan 2024 12:36:22 +0700
Subject: [PATCH] select modal updates

---
 .../common/Card/AudioCard/AudioCard.tsx       |  26 +-
 .../common/Card/ImageCard/ImageCard.tsx       |  95 +++++---
 .../common/Card/VideoCard/VideoCard.tsx       | 230 ++++++++++--------
 .../components/common/Searcher/Searcher.tsx   |   4 +-
 .../common/SelectModal/SelectMediaList.tsx    |  94 +++++++
 .../common/SelectModal/SelectModal.tsx        |  63 ++++-
 .../common/SelectModal/SelectWeightsList.tsx  |   7 +
 .../components/tabContentLibrary.tsx          |  11 +-
 .../inference_panels/SdInferencePanel.tsx     |   6 +-
 9 files changed, 372 insertions(+), 164 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx

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 f053141da6..a21fb41db5 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -22,7 +22,7 @@ interface AudioCardProps {
   showCreator?: boolean;
   showCover?: boolean;
   type: "media" | "weights";
-  inSearcher?: boolean;
+  inSelectModal?: boolean;
   onResultSelect?: () => void;
 }
 
@@ -34,7 +34,7 @@ export default function AudioCard({
   showCreator,
   showCover,
   type,
-  inSearcher = false,
+  inSelectModal = false,
   onResultSelect,
 }: AudioCardProps) {
   const { setToken, setWeightTitle } = useToken();
@@ -50,10 +50,12 @@ export default function AudioCard({
     event.stopPropagation();
   };
 
-  const handleSearcherResultSelect = () => {
-    setToken(data.weight_token);
-    setWeightTitle && setWeightTitle(data.title);
-    onResultSelect && onResultSelect();
+  const handleSelectModalResultSelect = () => {
+    if (inSelectModal) {
+      setToken(data.weight_token);
+      setWeightTitle && setWeightTitle(data.title);
+      onResultSelect && onResultSelect();
+    }
   };
 
   const timeAgo = useTimeAgo(data.created_at);
@@ -86,7 +88,11 @@ export default function AudioCard({
   }
 
   const card = (
-    <Card padding={true} canHover={true} onClick={handleSearcherResultSelect}>
+    <Card
+      padding={true}
+      canHover={true}
+      onClick={handleSelectModalResultSelect}
+    >
       {type === "media" && (
         <>
           <div className="mb-3">
@@ -161,14 +167,14 @@ export default function AudioCard({
                 <div className="d-flex flex-grow-1">
                   <Badge label={weightBadgeLabel} color={weightBadgeColor} />
                 </div>
-                {inSearcher ? (
+                {inSelectModal ? (
                   <Button
                     icon={faArrowRight}
                     iconFlip={true}
                     variant="link"
                     label="Select"
                     className="fs-7"
-                    onClick={handleSearcherResultSelect}
+                    onClick={handleSelectModalResultSelect}
                   />
                 ) : (
                   <Button
@@ -246,7 +252,7 @@ export default function AudioCard({
 
   return (
     <>
-      {inSearcher ? (
+      {inSelectModal ? (
         <>{card}</>
       ) : (
         <Link
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 98079ac2ea..8028fa8df1 100644
--- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
@@ -10,15 +10,17 @@ 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";
 
 interface ImageCardProps {
-  bookmarks: any;
+  bookmarks?: any;
   data: any;
   origin?: string;
-  ratings: any;
+  ratings?: any;
   showCreator?: boolean;
   type: "media" | "weights";
-  inSearcher?: boolean;
+  inSelectModal?: boolean;
+  onResultSelect?: () => void;
 }
 
 export default function ImageCard({
@@ -28,9 +30,11 @@ export default function ImageCard({
   showCreator,
   ratings,
   type,
-  inSearcher = false,
+  inSelectModal = false,
+  onResultSelect,
 }: ImageCardProps) {
   const history = useHistory();
+  const { setToken, setWeightTitle } = useToken();
   const linkUrl =
     type === "media"
       ? `/media/${data.token}`
@@ -42,11 +46,11 @@ export default function ImageCard({
     event.stopPropagation();
   };
 
-  const handleSearcherSelect = () => {
-    if (inSearcher) {
-      console.log("Searcher weight selected", data.weight_token);
-    } else {
-      return;
+  const handleSelectModalResultSelect = () => {
+    if (inSelectModal) {
+      setToken(data.weight_token);
+      setWeightTitle && setWeightTitle(data.title);
+      onResultSelect && onResultSelect();
     }
   };
 
@@ -83,7 +87,11 @@ export default function ImageCard({
   }
 
   const card = (
-    <Card padding={false} canHover={true}>
+    <Card
+      padding={false}
+      canHover={true}
+      onClick={handleSelectModalResultSelect}
+    >
       {type === "media" && (
         <>
           <img src={coverImage} alt={data.weight_name} className="card-img" />
@@ -94,6 +102,16 @@ export default function ImageCard({
               <div className="d-flex flex-grow-1">
                 <Badge label="Image" color="ultramarine" overlay={true} />
               </div>
+              {inSelectModal && (
+                <Button
+                  icon={faArrowRight}
+                  iconFlip={true}
+                  variant="link"
+                  label="Select"
+                  className="fs-7"
+                  onClick={handleSelectModalResultSelect}
+                />
+              )}
             </div>
 
             <div className="card-img-overlay-text">
@@ -125,16 +143,18 @@ export default function ImageCard({
                   </div>
                 )}
 
-                <div>
-                  <LikeButton
-                    {...{
-                      ...ratings.makeProps({
-                        entityToken: data.token,
-                        entityType: "media_file",
-                      }),
-                    }}
-                  />
-                </div>
+                {ratings && (
+                  <div>
+                    <LikeButton
+                      {...{
+                        ...ratings.makeProps({
+                          entityToken: data.token,
+                          entityType: "media_file",
+                        }),
+                      }}
+                    />
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -154,14 +174,14 @@ export default function ImageCard({
                   overlay={true}
                 />
               </div>
-              {inSearcher ? (
+              {inSelectModal ? (
                 <Button
                   icon={faArrowRight}
                   iconFlip={true}
                   variant="link"
                   label="Select"
                   className="fs-7"
-                  onClick={handleSearcherSelect}
+                  onClick={handleSelectModalResultSelect}
                 />
               ) : (
                 <Button
@@ -209,24 +229,29 @@ export default function ImageCard({
                   </div>
                 )}
 
-                <div>
-                  <LikeButton
+                {ratings && (
+                  <div>
+                    <LikeButton
+                      {...{
+                        ...ratings.makeProps({
+                          entityToken: data.weight_token,
+                          entityType: "model_weight",
+                        }),
+                      }}
+                    />
+                  </div>
+                )}
+
+                {bookmarks && (
+                  <BookmarkButton
                     {...{
-                      ...ratings.makeProps({
+                      ...bookmarks.makeProps({
                         entityToken: data.weight_token,
                         entityType: "model_weight",
                       }),
                     }}
                   />
-                </div>
-                <BookmarkButton
-                  {...{
-                    ...bookmarks.makeProps({
-                      entityToken: data.weight_token,
-                      entityType: "model_weight",
-                    }),
-                  }}
-                />
+                )}
               </div>
             </div>
           </div>
@@ -237,7 +262,7 @@ export default function ImageCard({
 
   return (
     <>
-      {inSearcher ? (
+      {inSelectModal ? (
         <>{card}</>
       ) : (
         <Link
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 aed5a58690..f27cb72cf6 100644
--- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx
@@ -9,6 +9,7 @@ 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";
 
 interface VideoCardProps {
   data: any;
@@ -16,6 +17,8 @@ interface VideoCardProps {
   ratings?: any;
   showCreator?: boolean;
   type: "media" | "weights";
+  inSelectModal?: boolean;
+  onResultSelect?: () => void;
 }
 
 export default function VideoCard({
@@ -24,7 +27,10 @@ export default function VideoCard({
   ratings,
   showCreator,
   type,
+  inSelectModal = false,
+  onResultSelect,
 }: VideoCardProps) {
+  const { setToken, setWeightTitle } = useToken();
   const linkUrl =
     type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`;
 
@@ -32,6 +38,14 @@ export default function VideoCard({
     event.stopPropagation();
   };
 
+  const handleSelectModalResultSelect = () => {
+    if (inSelectModal) {
+      setToken(data.weight_token || data.token);
+      setWeightTitle && setWeightTitle(data.title);
+      onResultSelect && onResultSelect();
+    }
+  };
+
   const timeAgo = useTimeAgo(data.created_at);
 
   const bucketConfig = new BucketConfig();
@@ -48,62 +62,64 @@ export default function VideoCard({
     );
   }
 
-  return (
-    <Link
-      {...{
-        to: linkUrl,
-        state: { origin },
-      }}
+  const card = (
+    <Card
+      padding={false}
+      canHover={true}
+      onClick={handleSelectModalResultSelect}
     >
-      <Card padding={false} canHover={true}>
-        {type === "media" && (
-          <>
-            <img
-              src={coverImage}
-              alt={data.weight_name}
-              className="card-video"
-            />
-            <div className="card-img-overlay">
-              <div className="card-img-gradient" />
+      {type === "media" && (
+        <>
+          <img src={coverImage} 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>
+            <div className="d-flex align-items-center">
+              <div className="d-flex flex-grow-1">
+                <Badge label="Video" color="purple" overlay={true} />
               </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>
-                  <hr className="my-2" />
-                  <div
-                    className="d-flex align-items-center gap-2"
-                    onClick={handleInnerClick}
-                  >
-                    {showCreator && (
-                      <div className="flex-grow-1">
-                        <CreatorName
-                          displayName={
-                            data.maybe_creator?.display_name || "Anonymous"
-                          }
-                          gravatarHash={data.maybe_creator?.gravatar_hash || ""}
-                          avatarIndex={
-                            data.maybe_creator?.default_avatar.image_index || ""
-                          }
-                          backgroundIndex={
-                            data.maybe_creator?.default_avatar.color_index || ""
-                          }
-                          username={data.maybe_creator?.username || "anonymous"}
-                        />
-                      </div>
-                    )}
+              {inSelectModal && (
+                <Button
+                  icon={faArrowRight}
+                  iconFlip={true}
+                  variant="link"
+                  label="Select"
+                  className="fs-7"
+                  onClick={handleSelectModalResultSelect}
+                />
+              )}
+            </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>
+                <hr className="my-2" />
+                <div
+                  className="d-flex align-items-center gap-2"
+                  onClick={handleInnerClick}
+                >
+                  {showCreator && (
+                    <div className="flex-grow-1">
+                      <CreatorName
+                        displayName={
+                          data.maybe_creator?.display_name || "Anonymous"
+                        }
+                        gravatarHash={data.maybe_creator?.gravatar_hash || ""}
+                        avatarIndex={
+                          data.maybe_creator?.default_avatar.image_index || ""
+                        }
+                        backgroundIndex={
+                          data.maybe_creator?.default_avatar.color_index || ""
+                        }
+                        username={data.maybe_creator?.username || "anonymous"}
+                      />
+                    </div>
+                  )}
 
+                  {ratings && (
                     <div>
                       <LikeButton
                         {...{
@@ -114,63 +130,79 @@ export default function VideoCard({
                         }}
                       />
                     </div>
-                  </div>
+                  )}
                 </div>
               </div>
             </div>
-          </>
-        )}
+          </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" />
+      {/* {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"
-                  to={linkUrl}
-                  className="fs-7"
-                />
+            <div className="d-flex align-items-center">
+              <div className="d-flex flex-grow-1">
+                <Badge label="Video" color="purple" overlay={true} />
               </div>
-              <FontAwesomeIcon
-                icon={faPlayCircle}
-                className="card-video-play"
+              <Button
+                icon={faArrowRight}
+                iconFlip={true}
+                variant="link"
+                label="Use"
+                className="fs-7"
+                onClick={() => {
+                  history.push(linkUrl);
+                }}
               />
-              <div className="card-img-overlay-text">
+            </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>
-                  <h6 className="fw-semibold text-white mb-1">
-                    {data.weight_name}
-                  </h6>
-                  <p className="fs-7 opacity-75">{timeAgo}</p>
-                  <div className="mt-2" onClick={handleInnerClick}>
-                    <LikeButton
-                      {...{
-                        overlay: true,
-                        ...ratings.makeProps({
-                          entityToken: data.weight_token,
-                          entityType: "model_weight",
-                        }),
-                      }}
-                    />
-                  </div>
+                  <LikeButton
+                    {...{
+                      overlay: true,
+                      ...ratings.makeProps({
+                        entityToken: data.weight_token,
+                        entityType: "model_weight",
+                      }),
+                    }}
+                  />
                 </div>
               </div>
             </div>
-          </>
-        )}
-      </Card>
-    </Link>
+          </div>
+        </>
+      )} */}
+    </Card>
+  );
+
+  return (
+    <>
+      {inSelectModal ? (
+        <>{card}</>
+      ) : (
+        <Link
+          {...{
+            to: linkUrl,
+            state: { origin },
+          }}
+        >
+          {card}
+        </Link>
+      )}
+    </>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx
index a2a5c71f51..abd073d612 100644
--- a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx
+++ b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx
@@ -128,7 +128,7 @@ export default function Searcher({
                       data,
                       showCreator: true,
                       type: "weights",
-                      inSearcher: true,
+                      inSelectModal: true,
                       onResultSelect,
                     };
 
@@ -186,7 +186,7 @@ export default function Searcher({
                         data,
                         showCreator: true,
                         type: "weights",
-                        inSearcher: true,
+                        inSelectModal: true,
                         onResultSelect,
                       };
 
diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx
new file mode 100644
index 0000000000..8009e01c4d
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx
@@ -0,0 +1,94 @@
+import React, { useRef, useState } from "react";
+import MasonryGrid from "../MasonryGrid/MasonryGrid";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useLazyLists } from "hooks";
+import prepFilter from "resources/prepFilter";
+import MediaCards from "../Card/MediaCards";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile";
+import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles";
+
+interface SelectMediaListProps {
+  mediaType: string;
+  listKey: string;
+  onResultSelect?: () => void;
+}
+
+export default function SelectMediaList({
+  mediaType,
+  listKey,
+  onResultSelect,
+}: SelectMediaListProps) {
+  const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const [list, listSet] = useState<MediaFile[]>([]);
+
+  const media = useLazyLists({
+    addQueries: {
+      page_size: 9,
+      ...prepFilter(mediaType, "filter_media_type"),
+    },
+    debug: "User Media List",
+    fetcher: ListMediaFiles,
+    list,
+    listSet,
+    requestList: true,
+    disableUrlQueries: true,
+  });
+
+  return (
+    <div className="searcher-container in-modal" id={listKey}>
+      <InfiniteScroll
+        dataLength={media.list.length}
+        next={media.getMore}
+        hasMore={!media.list.length || !!media.next}
+        loader={
+          media.list.length !== 0 &&
+          media.isLoading && (
+            <div className="mt-4 d-flex justify-content-center">
+              <div className="spinner-border text-light" role="status">
+                <span className="visually-hidden">Loading...</span>
+              </div>
+            </div>
+          )
+        }
+        endMessage={
+          <p className="text-center mt-4 opacity-75">No more results.</p>
+        }
+        className="overflow-hidden"
+        scrollableTarget={listKey}
+        scrollThreshold={0.95}
+      >
+        <>
+          {media.list.length === 0 && media.status === 3 ? (
+            <div className="text-center opacity-75">No media created yet.</div>
+          ) : (
+            <MasonryGrid
+              gridRef={gridContainerRef}
+              onLayoutComplete={() => console.log("Layout complete!")}
+            >
+              {media.list.map((data: any, key: number) => {
+                let props = {
+                  data,
+                  showCreator: true,
+                  type: "media",
+                  inSelectModal: true,
+                  onResultSelect,
+                };
+
+                return (
+                  <div
+                    {...{
+                      className: "col-12 col-sm-6 col-xl-4 grid-item",
+                      key,
+                    }}
+                  >
+                    <MediaCards {...{ type: data.media_type, props }} />
+                  </div>
+                );
+              })}
+            </MasonryGrid>
+          )}
+        </>
+      </InfiniteScroll>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
index 4ad4a369f2..3034f86182 100644
--- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, memo } from "react";
+import React, { useState, memo, useEffect } from "react";
 import Searcher from "../Searcher";
 import Modal from "../Modal";
 import NonRouteTabs from "../Tabs/NonRouteTabs";
@@ -6,12 +6,17 @@ 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";
+import { set } from "date-fns";
 
 interface TabConfig {
   label: string;
-  searcherKey?: string;
+  tabKey: string;
+  type?: "media" | "weights";
   weightTypeFilter?: string;
-  mediaTypeFilter?: string; // NOT DONE
+  mediaTypeFilter?: string;
+  searcher?: boolean;
 }
 interface SelectModalProps {
   label?: string;
@@ -22,7 +27,34 @@ interface SelectModalProps {
 const SelectModal = memo(
   ({ label, tabs, modalTitle = "Select" }: SelectModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { weightTitle, setWeightTitle } = useToken();
+    const { token, setToken, weightTitle, setWeightTitle } = useToken();
+    const [activeTab, setActiveTab] = useState(tabs[0].tabKey);
+    const [mediaType, setMediaType] = useState(
+      tabs[0].mediaTypeFilter || "all"
+    );
+    const [weightType, setWeightType] = useState(
+      tabs[0].weightTypeFilter || "all"
+    );
+
+    // Update mediaType when activeTab changes
+    useEffect(() => {
+      const currentTab = tabs.find(tab => tab.tabKey === activeTab);
+      setMediaType(currentTab?.mediaTypeFilter || "all");
+      setWeightType(currentTab?.mediaTypeFilter || "all");
+    }, [activeTab, tabs]);
+
+    // const allWeights = useLazyLists({
+    //   addQueries: {
+    //     page_size: 9,
+    //     ...prepFilter(weightType, "filter_media_type"),
+    //   },
+    //   debug: "Media List",
+    //   fetcher: ListWeights,
+    //   list: weightList,
+    //   listSet: setWeightList,
+    //   requestList: true,
+    //   disableUrlQueries: true,
+    // });
 
     const openModal = () => {
       setIsModalOpen(true);
@@ -34,19 +66,32 @@ const SelectModal = memo(
 
     const handleRemove = () => {
       setWeightTitle && setWeightTitle("");
+      setToken("");
     };
 
     const searchTabs = tabs.map(tab => ({
       label: tab.label,
-      content: tab.searcherKey ? (
+      content: tab.searcher ? (
         <Searcher
           type="modal"
           onResultSelect={closeModal}
-          searcherKey={tab.searcherKey}
+          searcherKey={tab.tabKey}
           weightType={tab.weightTypeFilter}
         />
-      ) : null,
+      ) : (
+        <>
+          {tab.type === "media" && (
+            <SelectMediaList
+              mediaType={mediaType}
+              listKey={tab.tabKey}
+              onResultSelect={closeModal}
+            />
+          )}
+          {tab.type === "weights" && <SelectWeightsList />}
+        </>
+      ),
       padding: true,
+      onClick: () => setActiveTab(tab.tabKey),
     }));
 
     return (
@@ -59,13 +104,13 @@ const SelectModal = memo(
               disabled={true}
               className="w-100"
               placeholder="None selected"
-              value={weightTitle ? weightTitle : ""}
+              value={weightTitle ? weightTitle : token || ""}
             />
             <Button
               label={weightTitle ? "Change" : "Select"}
               onClick={openModal}
             />
-            {weightTitle && (
+            {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
new file mode 100644
index 0000000000..f16db0d334
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+interface SelectWeightsListProps {}
+
+export default function SelectWeightsList(props: SelectWeightsListProps) {
+  return <div>SelectWeightsList</div>;
+}
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 2c3c158914..d667216da7 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
@@ -13,13 +13,10 @@ export default function TabContentLibrary(props: {
         tabs={[
           {
             label: "All Videos",
-            searcherKey: "allVideos",
-            mediaTypeFilter: "",
-          },
-          {
-            label: "Bookmarked",
-            searcherKey: "bookmarkedVideos",
-            mediaTypeFilter: "",
+            tabKey: "allVideos",
+            mediaTypeFilter: "video",
+            searcher: false,
+            type: "media",
           },
         ]}
       />
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 94c3939949..4262f729e4 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
@@ -338,13 +338,15 @@ function SdInferencePanel({
               tabs={[
                 {
                   label: "All LoRA Weights",
-                  searcherKey: "allLoraWeights",
+                  tabKey: "allLoraWeights",
                   weightTypeFilter: "lora",
+                  searcher: true,
                 },
                 {
                   label: "Bookmarked",
-                  searcherKey: "bookmarkedLoraWeights",
+                  tabKey: "bookmarkedLoraWeights",
                   weightTypeFilter: "lora",
+                  searcher: false,
                 },
               ]}
             />