From 092795699b347a98d3f494d01b2acc5b7f4d9133 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 9 Feb 2024 12:58:23 -0800
Subject: [PATCH 1/6] changed ts to tsx on some files

---
 .../providers/AccountModalProvider/{index.ts => index.tsx}        | 0
 .../components/providers/InferenceJobs/{index.ts => index.tsx}    | 0
 .../fakeyou.com/src/components/providers/{index.ts => index.tsx}  | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/fakeyou.com/src/components/providers/AccountModalProvider/{index.ts => index.tsx} (100%)
 rename packages/fakeyou.com/src/components/providers/InferenceJobs/{index.ts => index.tsx} (100%)
 rename packages/fakeyou.com/src/components/providers/{index.ts => index.tsx} (100%)

diff --git a/packages/fakeyou.com/src/components/providers/AccountModalProvider/index.ts b/packages/fakeyou.com/src/components/providers/AccountModalProvider/index.tsx
similarity index 100%
rename from packages/fakeyou.com/src/components/providers/AccountModalProvider/index.ts
rename to packages/fakeyou.com/src/components/providers/AccountModalProvider/index.tsx
diff --git a/packages/fakeyou.com/src/components/providers/InferenceJobs/index.ts b/packages/fakeyou.com/src/components/providers/InferenceJobs/index.tsx
similarity index 100%
rename from packages/fakeyou.com/src/components/providers/InferenceJobs/index.ts
rename to packages/fakeyou.com/src/components/providers/InferenceJobs/index.tsx
diff --git a/packages/fakeyou.com/src/components/providers/index.ts b/packages/fakeyou.com/src/components/providers/index.tsx
similarity index 100%
rename from packages/fakeyou.com/src/components/providers/index.ts
rename to packages/fakeyou.com/src/components/providers/index.tsx

From 2660ac0c23e2028a46fe335484915d068d9e254c Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 9 Feb 2024 13:32:04 -0800
Subject: [PATCH 2/6] page container import changes

---
 packages/fakeyou.com/src/v2/view/PageContainer.tsx          | 6 +++---
 .../view/pages/profile/profile_view/tabs/BookmarksTab.tsx   | 1 +
 .../v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx  | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index f0901f76e9..1fb3e8ab99 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -96,8 +96,8 @@ import { VoiceDesignerVoiceEditPage } from "./pages/voice_designer/VoiceDesigner
 import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVoicePage";
 import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmailPage";
 import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage";
-import EngineCompositor from "./pages/EngineCompositor";
-import InferenceJobsPage from "./pages/inference_jobs_page";
+import EngineCompositor from "./pages/EngineCompositor/EngineCompositor";
+import InferenceJobsPage from "./pages/inference_jobs_page/InferenceJobsPage";
 import { NewProfilePage } from "./pages/profile/profile_view/NewProfilePage";
 import { ModerationJobControlPage } from "./pages/moderation/job_control/ModerationJobControlPage";
 import WeightPage from "./pages/weight/WeightPage";
@@ -109,7 +109,7 @@ import UploadSdWeightPage from "./pages/upload/UploadSdWeightPage";
 import { FooterNav } from "./nav/FooterNav";
 import FbxToGltfPage from "./pages/fbx_to_gltf/FbxToGltfPage";
 import UploadLoraWeightPage from "./pages/upload/UploadLoraWeightPage";
-import VideoWorkflowPage from "./pages/video_workflow";
+import VideoWorkflowPage from "./pages/video_workflow/VideoWorkflow";
 import ScrollToTop from "./_common/ScrollToTop";
 import TextToImagePage from "./pages/text_to_image/TextToImagePage";
 import DomainConfigProvider from "context/DomainConfigContext";
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
index 2996bb88da..38a8d19475 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
@@ -59,6 +59,7 @@ export default function BookmarksTab({ username }: { username: string }) {
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: res => {
       bookmarks.gather({ res, key: "weight_token" });
+      ratings.gather({ res, key: "weight_token" });
       setShowMasonryGrid(true);
     },
     requestList: true,
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
index 6939178ce4..15d51ea24d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
@@ -53,6 +53,7 @@ export default function WeightsTab({ username }: { username: string }) {
     listSet,
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: res => {
+      console.log("🧽",res);
       bookmarks.gather({ res, key: "weight_token" }); // expand rather than replace for lazy loading
       ratings.gather({ res, key: "weight_token" });
       setShowMasonryGrid(true);

From 51c182860a4ffe7e8dcb3dbbd30077c338692c13 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 9 Feb 2024 13:38:22 -0800
Subject: [PATCH 3/6] more import fixes

---
 .../providers/SessionProvider/{index.ts => index.tsx}           | 0
 packages/fakeyou.com/src/components/providers/index.tsx         | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/fakeyou.com/src/components/providers/SessionProvider/{index.ts => index.tsx} (100%)

diff --git a/packages/fakeyou.com/src/components/providers/SessionProvider/index.ts b/packages/fakeyou.com/src/components/providers/SessionProvider/index.tsx
similarity index 100%
rename from packages/fakeyou.com/src/components/providers/SessionProvider/index.ts
rename to packages/fakeyou.com/src/components/providers/SessionProvider/index.tsx
diff --git a/packages/fakeyou.com/src/components/providers/index.tsx b/packages/fakeyou.com/src/components/providers/index.tsx
index 9005f27cc3..530e095005 100644
--- a/packages/fakeyou.com/src/components/providers/index.tsx
+++ b/packages/fakeyou.com/src/components/providers/index.tsx
@@ -1,6 +1,6 @@
 import AccountModalProvider from "./AccountModalProvider";
 import InferenceJobs from "./InferenceJobs";
-import ModalProvider from "./ModalProvider";
+import ModalProvider from "./ModalProvider/ModalProvider";
 import SessionProvider from "./SessionProvider";
 
 export { AccountModalProvider, InferenceJobs, ModalProvider, SessionProvider };
\ No newline at end of file

From f083da9bed248094db1b987d5a868ed91a322d5f Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Fri, 9 Feb 2024 18:54:00 -0500
Subject: [PATCH 4/6] change URL param for bevy

---
 packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
index c04bc9933e..102cb7b2f7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
@@ -120,7 +120,7 @@ export default function MediaPage() {
         return (
           <Iframe
             {...{
-              url: `https://engine.fakeyou.com?mode=viewer&gltf=${glbUrl}`,
+              url: `https://engine.fakeyou.com?mode=viewer&mixamo=${glbUrl}`,
               className: "fy-studio-frame",
             }}
           />
@@ -130,7 +130,7 @@ export default function MediaPage() {
         return (
           <Iframe
             {...{
-              url: `https://engine.fakeyou.com?mode=viewer&gltf=${gltfUrl}`,
+              url: `https://engine.fakeyou.com?mode=viewer&mixamo=${gltfUrl}`,
               className: "fy-studio-frame",
             }}
           />

From 9a3e1fbc3716e1490a0d94a55ab0f73dcd20f6a0 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 9 Feb 2024 17:15:07 -0800
Subject: [PATCH 5/6] likes and bookmarks enabled on all card via CardFooter

---
 packages/components/src/elements/Gravatar.tsx |   3 +-
 .../common/BookmarkButton/BookmarkButton.tsx  |   4 +-
 .../common/Card/AudioCard/AudioCard.tsx       | 114 +++--------------
 .../common/Card/BVHCard/BVHCard.tsx           |  48 ++-----
 .../components/common/Card/CreatorName.tsx    |   4 +-
 .../common/Card/FBXCard/FBXCard.tsx           |  50 ++------
 .../common/Card/GLBCard/GLBCard.tsx           |  50 ++------
 .../common/Card/GLTFCard/GLTFCard.tsx         |  50 ++------
 .../common/Card/ImageCard/ImageCard.tsx       | 118 +++---------------
 .../common/Card/VideoCard/VideoCard.tsx       |  52 ++------
 .../common/LikeButton/LikeButton.tsx          |   4 +-
 .../src/components/entities/CardFooter.tsx    |  37 ------
 .../entities/CardFooter/CardFooter.scss       |  10 ++
 .../entities/CardFooter/CardFooter.tsx        |  42 +++++++
 .../components/entities/CardFooter/index.tsx  |   1 +
 .../src/components/entities/index.tsx         |   3 +-
 .../src/hooks/useBatchContent/index.ts        |   2 +-
 .../hooks/useBatchContent/useBatchContent.tsx |   2 +
 .../v2/view/pages/explore/tabs/MediaTab.tsx   |   1 +
 .../profile/profile_view/tabs/MediaTab.tsx    |   8 +-
 20 files changed, 145 insertions(+), 458 deletions(-)
 delete mode 100644 packages/fakeyou.com/src/components/entities/CardFooter.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.scss
 create mode 100644 packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/CardFooter/index.tsx

diff --git a/packages/components/src/elements/Gravatar.tsx b/packages/components/src/elements/Gravatar.tsx
index 009ddb0c5a..dee4ca46e0 100644
--- a/packages/components/src/elements/Gravatar.tsx
+++ b/packages/components/src/elements/Gravatar.tsx
@@ -7,6 +7,7 @@ interface Props {
   username?: string;
   avatarIndex?: number;
   backgroundIndex?: number;
+  noHeight?: boolean;
   onClick?: () => void;
 }
 
@@ -30,7 +31,7 @@ function Gravatar(props: Props) {
 
   return (
     <img
-      className="rounded-circle border border-2 h-100 gravatar-img"
+      className={`rounded-circle border border-2 ${ props.noHeight ? "" : "h-100" } gravatar-img`}
       alt={altText}
       src={gravatarUrl}
       height={props.size}
diff --git a/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx b/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx
index 2c49e08c69..090a2e7097 100644
--- a/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx
+++ b/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx
@@ -58,7 +58,7 @@ export default function BookmarkButton({
   const index = busy ? 0 : isToggled ? 1 : 2;
 
   return (
-    <div className="d-flex gap-2">
+    <>
       <Tippy
         theme="fakeyou"
         content={toolTip}
@@ -84,6 +84,6 @@ export default function BookmarkButton({
           </div>
         </button>
       </Tippy>
-    </div>
+    </>
   );
 }
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 888d49c8df..820cf88997 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -3,10 +3,8 @@ import { Link, useHistory } from "react-router-dom";
 import Card from "../Card";
 import AudioPlayer from "components/common/AudioPlayer";
 import useTimeAgo from "hooks/useTimeAgo";
+import { CardFooter } from "components/entities";
 import Badge from "components/common/Badge";
-import LikeButton from "components/common/LikeButton";
-import BookmarkButton from "components/common/BookmarkButton";
-import CreatorName from "../CreatorName";
 import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
 import Button from "components/common/Button";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
@@ -43,10 +41,6 @@ export default function AudioCard({
   const linkUrl = getCardUrl(data, source, type);
   const history = useHistory();
 
-  const handleInnerClick = (event: any) => {
-    event.stopPropagation();
-  };
-
   const handleSelectModalResultSelect = () => {
     if (inSelectModal && onResultSelect) {
       onResultSelect({
@@ -107,44 +101,15 @@ export default function AudioCard({
             </h6>
             <p className="fs-7 opacity-75">{timeAgo}</p>
           </div>
-
           <AudioPlayer src={data.public_bucket_path} id={data.token} />
-
-          <hr className="my-3" />
-
-          <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 || null}
-                  avatarIndex={
-                    data.maybe_creator?.default_avatar.image_index || 0
-                  }
-                  backgroundIndex={
-                    data.maybe_creator?.default_avatar.color_index || 0
-                  }
-                  username={data.maybe_creator?.username || "anonymous"}
-                />
-              </div>
-            )}
-
-            {ratings && (
-              <div>
-                <LikeButton
-                  {...{
-                    ...ratings.makeProps({
-                      entityToken: data.token,
-                      entityType: "media_file",
-                    }),
-                  }}
-                />
-              </div>
-            )}
-          </div>
+          <CardFooter {...{
+            creator: data?.maybe_creator, 
+            entityToken: data.token,
+            entityType: "media_file",
+            makeBookmarksProps: bookmarks.makeProps,
+            makeRatingsProps: ratings.makeProps,
+            showCreator
+          }}/>
         </>
       )}
 
@@ -198,60 +163,13 @@ export default function AudioCard({
               </div>
             </div>
           </div>
-
-          <hr className="my-3" />
-
-          <div
-            className="d-flex align-items-center gap-2"
-            onClick={handleInnerClick}
-          >
-            {showCreator && (
-              <div className="flex-grow-1">
-                <CreatorName
-                  displayName={
-                    data.creator?.display_name ||
-                    data.details?.maybe_weight_data.maybe_creator
-                      .display_name ||
-                    "Anonymous"
-                  }
-                  gravatarHash={data.creator?.gravatar_hash || null}
-                  avatarIndex={data.creator?.default_avatar.image_index || 0}
-                  backgroundIndex={
-                    data.creator?.default_avatar.color_index || 0
-                  }
-                  username={
-                    data.creator?.username ||
-                    data.details?.maybe_weight_data.maybe_creator.username ||
-                    "anonymous"
-                  }
-                />
-              </div>
-            )}
-
-            {ratings && (
-              <div>
-                <LikeButton
-                  {...{
-                    ...ratings.makeProps({
-                      entityToken: data.weight_token,
-                      entityType: "model_weight",
-                    }),
-                  }}
-                />
-              </div>
-            )}
-
-            {bookmarks && (
-              <BookmarkButton
-                {...{
-                  ...bookmarks.makeProps({
-                    entityToken: data.weight_token,
-                    entityType: "model_weight",
-                  }),
-                }}
-              />
-            )}
-          </div>
+          <CardFooter {...{
+            creator: data?.maybe_creator, 
+            entityToken: data.weight_token,
+            entityType: "model_weight",
+            makeBookmarksProps: bookmarks.makeProps,
+            makeRatingsProps: ratings.makeProps
+          }}/>
         </>
       )}
     </Card>
diff --git a/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx b/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
index fb9cff2fad..5e6f0a8f02 100644
--- a/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
@@ -3,8 +3,7 @@ import { Link } from "react-router-dom";
 import Card from "../Card";
 import useTimeAgo from "hooks/useTimeAgo";
 import Badge from "components/common/Badge";
-import LikeButton from "components/common/LikeButton";
-import CreatorName from "../CreatorName";
+import { CardFooter } from "components/entities";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
 import getCardUrl from "../getCardUrl";
@@ -29,11 +28,6 @@ export default function BVHCard({
   type,
 }: BVHCardProps) {
   const linkUrl = getCardUrl(data, source, type);
-
-  const handleInnerClick = (event: any) => {
-    event.stopPropagation();
-  };
-
   const timeAgo = useTimeAgo(data.created_at);
 
   const Wrapper = ({ children }: { children: any }) => inClick ? <div {...{ onClick: () => { inClick(data) } }}>{ children }</div> : <Link {...{ to: linkUrl  }}>{ children }</Link>;
@@ -60,39 +54,13 @@ export default function BVHCard({
             <div>
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
-
-            <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 || null}
-                    avatarIndex={
-                      data.maybe_creator?.default_avatar.image_index || 0
-                    }
-                    backgroundIndex={
-                      data.maybe_creator?.default_avatar.color_index || 0
-                    }
-                    username={data.maybe_creator?.username || "anonymous"}
-                  />
-                </div>
-              )}
-              <LikeButton
-                {...{
-                  ...ratings.makeProps({
-                    entityToken: data.token,
-                    entityType: "media_file",
-                  }),
-                }}
-              />
-            </div>
+            <CardFooter {...{
+              creator: data?.maybe_creator, 
+              entityToken: data.token,
+              entityType: "media_file",
+              makeBookmarksProps: bookmarks.makeProps,
+              makeRatingsProps: ratings.makeProps
+            }}/>
           </div>
         </div>
       </Card>
diff --git a/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx b/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx
index e84f79a7f8..9e43afdfa0 100644
--- a/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx
@@ -9,6 +9,7 @@ interface CreatorNameProps {
   avatarIndex: number;
   backgroundIndex: number;
   className?: string;
+  noHeight?: boolean;
 }
 
 export default function CreatorName({
@@ -18,13 +19,14 @@ export default function CreatorName({
   backgroundIndex,
   username,
   className,
+  noHeight
 }: CreatorNameProps) {
   const handleInnerClick = (event: any) => {
     event.stopPropagation();
   };
 
   const gravatar = (
-    <Gravatar
+    <Gravatar {...{ noHeight }}
       size={22}
       email_hash={gravatarHash}
       avatarIndex={avatarIndex || 0}
diff --git a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
index efc2a4fcf6..2c13a408b7 100644
--- a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Card from "../Card";
+import { CardFooter } from "components/entities";
 import useTimeAgo from "hooks/useTimeAgo";
 import Badge from "components/common/Badge";
-import LikeButton from "components/common/LikeButton";
-import CreatorName from "../CreatorName";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCube } from "@fortawesome/pro-solid-svg-icons";
 import getCardUrl from "../getCardUrl";
@@ -28,10 +27,6 @@ export default function FBXCard({
 }: FBXCardProps) {
   const linkUrl = getCardUrl(data, source, type);
 
-  const handleInnerClick = (event: any) => {
-    event.stopPropagation();
-  };
-
   const timeAgo = useTimeAgo(data.created_at);
 
   return (
@@ -58,42 +53,13 @@ export default function FBXCard({
             <div>
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
-
-            <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 || null}
-                    avatarIndex={
-                      data.maybe_creator?.default_avatar.image_index || 0
-                    }
-                    backgroundIndex={
-                      data.maybe_creator?.default_avatar.color_index || 0
-                    }
-                    username={data.maybe_creator?.username || "anonymous"}
-                  />
-                </div>
-              )}
-
-              <div>
-                <LikeButton
-                  {...{
-                    ...ratings.makeProps({
-                      entityToken: data.token,
-                      entityType: "media_file",
-                    }),
-                  }}
-                />
-              </div>
-            </div>
+            <CardFooter {...{
+              creator: data?.maybe_creator, 
+              entityToken: data.token,
+              entityType: "media_file",
+              makeBookmarksProps: bookmarks.makeProps,
+              makeRatingsProps: ratings.makeProps
+            }}/>
           </div>
         </div>
       </Card>
diff --git a/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx b/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
index 12c5eb714d..5f8333fc16 100644
--- a/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Card from "../Card";
+import { CardFooter } from "components/entities";
 import useTimeAgo from "hooks/useTimeAgo";
 import Badge from "components/common/Badge";
-import LikeButton from "components/common/LikeButton";
-import CreatorName from "../CreatorName";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCube } from "@fortawesome/pro-solid-svg-icons";
 import getCardUrl from "../getCardUrl";
@@ -28,10 +27,6 @@ export default function GLBCard({
 }: GLBCardProps) {
   const linkUrl = getCardUrl(data, source, type);
 
-  const handleInnerClick = (event: any) => {
-    event.stopPropagation();
-  };
-
   const timeAgo = useTimeAgo(data.created_at);
 
   return (
@@ -58,42 +53,13 @@ export default function GLBCard({
             <div>
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
-
-            <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 || null}
-                    avatarIndex={
-                      data.maybe_creator?.default_avatar.image_index || 0
-                    }
-                    backgroundIndex={
-                      data.maybe_creator?.default_avatar.color_index || 0
-                    }
-                    username={data.maybe_creator?.username || "anonymous"}
-                  />
-                </div>
-              )}
-
-              <div>
-                <LikeButton
-                  {...{
-                    ...ratings.makeProps({
-                      entityToken: data.token,
-                      entityType: "media_file",
-                    }),
-                  }}
-                />
-              </div>
-            </div>
+            <CardFooter {...{
+              creator: data?.maybe_creator, 
+              entityToken: data.token,
+              entityType: "media_file",
+              makeBookmarksProps: bookmarks.makeProps,
+              makeRatingsProps: ratings.makeProps
+            }}/>
           </div>
         </div>
       </Card>
diff --git a/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx b/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
index 183eabc7f6..859c33fa72 100644
--- a/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Card from "../Card";
+import { CardFooter } from "components/entities";
 import useTimeAgo from "hooks/useTimeAgo";
 import Badge from "components/common/Badge";
-import LikeButton from "components/common/LikeButton";
-import CreatorName from "../CreatorName";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCube } from "@fortawesome/pro-solid-svg-icons";
 import getCardUrl from "../getCardUrl";
@@ -28,10 +27,6 @@ export default function GLTFCard({
 }: GLTFCardProps) {
   const linkUrl = getCardUrl(data, source, type);
 
-  const handleInnerClick = (event: any) => {
-    event.stopPropagation();
-  };
-
   const timeAgo = useTimeAgo(data.created_at);
 
   return (
@@ -58,42 +53,13 @@ export default function GLTFCard({
             <div>
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
-
-            <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 || null}
-                    avatarIndex={
-                      data.maybe_creator?.default_avatar.image_index || 0
-                    }
-                    backgroundIndex={
-                      data.maybe_creator?.default_avatar.color_index || 0
-                    }
-                    username={data.maybe_creator?.username || "anonymous"}
-                  />
-                </div>
-              )}
-
-              <div>
-                <LikeButton
-                  {...{
-                    ...ratings.makeProps({
-                      entityToken: data.token,
-                      entityType: "media_file",
-                    }),
-                  }}
-                />
-              </div>
-            </div>
+            <CardFooter {...{
+              creator: data?.maybe_creator, 
+              entityToken: data.token,
+              entityType: "media_file",
+              makeBookmarksProps: bookmarks.makeProps,
+              makeRatingsProps: ratings.makeProps
+            }}/>
           </div>
         </div>
       </Card>
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 2e42cb8cfb..64c25857c1 100644
--- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
@@ -1,11 +1,9 @@
 import React from "react";
 import { Link, useHistory } from "react-router-dom";
 import Card from "../Card";
+import { CardFooter } from "components/entities";
 import useTimeAgo from "hooks/useTimeAgo";
 import Badge from "components/common/Badge";
-import LikeButton from "components/common/LikeButton";
-import BookmarkButton from "components/common/BookmarkButton";
-import CreatorName from "../CreatorName";
 import Button from "components/common/Button";
 import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
@@ -38,11 +36,6 @@ export default function ImageCard({
   // 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) {
@@ -118,44 +111,13 @@ export default function ImageCard({
               <div>
                 <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
               </div>
-
-              <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 || null}
-                      avatarIndex={
-                        data.maybe_creator?.default_avatar.image_index || 0
-                      }
-                      backgroundIndex={
-                        data.maybe_creator?.default_avatar.color_index || 0
-                      }
-                      username={data.maybe_creator?.username || "anonymous"}
-                    />
-                  </div>
-                )}
-
-                {ratings && (
-                  <div>
-                    <LikeButton
-                      {...{
-                        ...ratings.makeProps({
-                          entityToken: data.token,
-                          entityType: "media_file",
-                        }),
-                      }}
-                    />
-                  </div>
-                )}
-              </div>
+              <CardFooter {...{
+                creator: data?.maybe_creator, 
+                entityToken: data.token,
+                entityType: "media_file",
+                makeBookmarksProps: bookmarks.makeProps,
+                makeRatingsProps: ratings.makeProps
+              }}/>
             </div>
           </div>
         </>
@@ -206,63 +168,13 @@ export default function ImageCard({
                   <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
                 </div>
               </div>
-
-              <hr className="my-2" />
-
-              <div
-                className="d-flex align-items-center gap-2"
-                onClick={handleInnerClick}
-              >
-                {showCreator && (
-                  <div className="flex-grow-1">
-                    <CreatorName
-                      displayName={
-                        data.creator?.display_name ||
-                        data.details?.maybe_weight_data.maybe_creator
-                          .display_name ||
-                        "Anonymous"
-                      }
-                      gravatarHash={data.creator?.gravatar_hash || null}
-                      avatarIndex={
-                        data.creator?.default_avatar.image_index || 0
-                      }
-                      backgroundIndex={
-                        data.creator?.default_avatar.color_index || 0
-                      }
-                      username={
-                        data.creator?.username ||
-                        data.details?.maybe_weight_data.maybe_creator
-                          .username ||
-                        "anonymous"
-                      }
-                    />
-                  </div>
-                )}
-
-                {ratings && (
-                  <div>
-                    <LikeButton
-                      {...{
-                        ...ratings.makeProps({
-                          entityToken: data.weight_token,
-                          entityType: "model_weight",
-                        }),
-                      }}
-                    />
-                  </div>
-                )}
-
-                {bookmarks && (
-                  <BookmarkButton
-                    {...{
-                      ...bookmarks.makeProps({
-                        entityToken: data.weight_token,
-                        entityType: "model_weight",
-                      }),
-                    }}
-                  />
-                )}
-              </div>
+              <CardFooter {...{
+                creator: data?.maybe_creator, 
+                entityToken: data.weight_token,
+                entityType: "model_weight",
+                makeBookmarksProps: bookmarks.makeProps,
+                makeRatingsProps: ratings.makeProps
+              }}/>
             </div>
           </div>
         </>
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 ea1858410a..0d1996ccd8 100644
--- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx
@@ -4,14 +4,14 @@ import useTimeAgo from "hooks/useTimeAgo";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight, faPlayCircle } from "@fortawesome/pro-solid-svg-icons";
 import Badge from "components/common/Badge";
-import LikeButton from "components/common/LikeButton";
 import Button from "components/common/Button";
-import CreatorName from "../CreatorName";
+import { CardFooter } from "components/entities";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { Link } from "react-router-dom";
 import getCardUrl from "../getCardUrl";
 
 interface VideoCardProps {
+  bookmarks?: any;
   data: any;
   ratings?: any;
   showCreator?: boolean;
@@ -22,6 +22,7 @@ interface VideoCardProps {
 }
 
 export default function VideoCard({
+  bookmarks,
   data,
   ratings,
   showCreator,
@@ -32,10 +33,6 @@ export default function VideoCard({
 }: VideoCardProps) {
   const linkUrl = getCardUrl(data,source,type);
 
-  const handleInnerClick = (event: any) => {
-    event.stopPropagation();
-  };
-
   const handleSelectModalResultSelect = () => {
     if (inSelectModal && onResultSelect) {
       onResultSelect(data);
@@ -92,42 +89,13 @@ export default function VideoCard({
                   {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
-                        {...{
-                          ...ratings.makeProps({
-                            entityToken: data.token,
-                            entityType: "media_file",
-                          }),
-                        }}
-                      />
-                    </div>
-                  )}
-                </div>
+                <CardFooter {...{
+                  creator: data?.maybe_creator, 
+                  entityToken: data.token,
+                  entityType: "media_file",
+                  makeBookmarksProps: bookmarks.makeProps,
+                  makeRatingsProps: ratings.makeProps
+                }}/>
               </div>
             </div>
           </div>
diff --git a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx
index 4110be8181..1f772bd10c 100644
--- a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx
+++ b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx
@@ -58,7 +58,7 @@ export default function LikeButton({
   let likeCountShort = useShortenNumber(likeCount);
 
   return (
-    <div className="d-flex gap-2">
+    <>
       <Tippy
         theme="fakeyou"
         content={toolTip}
@@ -86,6 +86,6 @@ export default function LikeButton({
           </div>
         </button>
       </Tippy>
-    </div>
+    </>
   );
 }
diff --git a/packages/fakeyou.com/src/components/entities/CardFooter.tsx b/packages/fakeyou.com/src/components/entities/CardFooter.tsx
deleted file mode 100644
index 6de92f8144..0000000000
--- a/packages/fakeyou.com/src/components/entities/CardFooter.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import { MakeRatingsProps } from "hooks/useRatings";
-import LikeButton from "components/common/LikeButton";
-import CreatorName from "components/common/Card/CreatorName";
-
-interface CardFooterProps {
-  creator?: any,
-  entityToken: string,
-  entityType: string,
-  makeRatingsProps?: MakeRatingsProps,
-  showCreator?: boolean
-}
-
-export default function CardFooter({ creator, entityToken, entityType, makeRatingsProps, showCreator }: CardFooterProps) {
-  const { default_avatar, display_name, gravatar_hash, username } = creator || {};
-  return <>
-    { (showCreator || makeRatingsProps) && <hr className="my-2" /> }
-    <div {...{ className: "fy-card-footer" }}>
-      { showCreator && (
-        <div className="flex-grow-1">
-          <CreatorName {...{
-            avatarIndex: default_avatar?.image_index || 0,
-            backgroundIndex: default_avatar?.color_index || 0,
-            displayName: display_name || "Anonymous",
-            gravatarHash: gravatar_hash || null,
-            username
-          }} />
-        </div>
-      )}
-      {
-        makeRatingsProps ? <div>
-          <LikeButton {...makeRatingsProps({ entityToken, entityType })} />
-        </div> : null
-      }
-    </div>
-  </>;
-};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.scss b/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.scss
new file mode 100644
index 0000000000..0c980e3e78
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.scss
@@ -0,0 +1,10 @@
+.fy-card-footer {
+	width: 100%;
+	display: flex;
+
+	.fy-card-footer-toggles {
+		margin-left: auto;
+		display: flex;
+		gap: .5rem;
+	}
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx b/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx
new file mode 100644
index 0000000000..c06e3abbf7
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { MakeBatchProps } from "hooks/useBatchContent";
+import { MakeRatingsProps } from "hooks/useRatings";
+import BookmarkButton from "components/common/BookmarkButton";
+import LikeButton from "components/common/LikeButton";
+import CreatorName from "components/common/Card/CreatorName";
+import "./CardFooter.scss"
+
+interface CardFooterProps {
+  creator?: any,
+  entityToken: string,
+  entityType: string,
+  makeBookmarksProps?: MakeBatchProps,
+  makeRatingsProps?: MakeRatingsProps, // this is MakeBatchProps extended include likeCount
+  showCreator?: boolean
+}
+
+export default function CardFooter({ creator, entityToken, entityType, makeBookmarksProps, makeRatingsProps, showCreator }: CardFooterProps) {
+  const { default_avatar, display_name, gravatar_hash, username } = creator || {};
+  const togglesOn = makeBookmarksProps ||  makeRatingsProps;
+  const eitherOn = showCreator || togglesOn;
+  return <>
+    { ( eitherOn ) && <hr className="my-2" /> }
+    <div {...{ className: `fy-card-footer` }}>
+      { showCreator && <CreatorName {...{
+          avatarIndex: default_avatar?.image_index || 0,
+          backgroundIndex: default_avatar?.color_index || 0,
+          displayName: display_name || "Anonymous",
+          gravatarHash: gravatar_hash || null,
+          noHeight: true,
+          username
+        }} />
+      }
+      {
+        togglesOn ? <div {...{ className: "fy-card-footer-toggles" }}>
+          { makeRatingsProps && <LikeButton {...makeRatingsProps({ entityToken, entityType })} /> }
+          { makeBookmarksProps && <BookmarkButton {...makeBookmarksProps({ entityToken, entityType })} /> }
+        </div> : null
+      }
+    </div>
+  </>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/CardFooter/index.tsx b/packages/fakeyou.com/src/components/entities/CardFooter/index.tsx
new file mode 100644
index 0000000000..4cbbc0a76d
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/CardFooter/index.tsx
@@ -0,0 +1 @@
+export { default } from "./CardFooter";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/index.tsx b/packages/fakeyou.com/src/components/entities/index.tsx
index 043d89b296..c93556549c 100644
--- a/packages/fakeyou.com/src/components/entities/index.tsx
+++ b/packages/fakeyou.com/src/components/entities/index.tsx
@@ -1,8 +1,9 @@
 import AudioCard from "./AudioCard";
+import CardFooter from "./CardFooter";
 import CardWrapper from "./CardWrapper";
 import EntityInput from "./EntityInput";
 import MediaList from "./MediaList";
 import OverlayCard from "./OverlayCard";
 import WeightCard from "./WeightCard";
 
-export { AudioCard, CardWrapper, EntityInput, MediaList, OverlayCard, WeightCard };
\ No newline at end of file
+export { AudioCard, CardFooter, CardWrapper, EntityInput, MediaList, OverlayCard, WeightCard };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useBatchContent/index.ts b/packages/fakeyou.com/src/hooks/useBatchContent/index.ts
index 82d3f4948e..e323b996d4 100644
--- a/packages/fakeyou.com/src/hooks/useBatchContent/index.ts
+++ b/packages/fakeyou.com/src/hooks/useBatchContent/index.ts
@@ -1,2 +1,2 @@
 export { default } from "./useBatchContent";
-export type { BatchInputProps, MakePropsParams } from "./useBatchContent";
\ No newline at end of file
+export type { BatchInputProps, MakeBatchProps, MakePropsParams } from "./useBatchContent";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx b/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx
index 4b57a096c7..3d6e08885b 100644
--- a/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx
+++ b/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx
@@ -36,6 +36,8 @@ export interface BatchInputProps {
   toggle: BatchToggle
 }
 
+export type MakeBatchProps = (x: MakePropsParams) => BatchInputProps;
+
 export default function useBatchContent({
   checker,
   debug,
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
index de5912e1eb..3623ffad66 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
@@ -43,6 +43,7 @@ export default function MediaTab() {
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: res => {
       ratings.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
+      bookmarks.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
       setShowMasonryGrid(true);
     },
     requestList: true,
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
index 5bfad65042..609268eadd 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
@@ -13,13 +13,13 @@ import Pagination from "components/common/Pagination";
 
 import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
-import { useListContent, useRatings } from "hooks";
+import { useBookmarks, useListContent, useRatings } from "hooks";
 import prepFilter from "resources/prepFilter";
 
 export default function MediaTab({ username }: { username: string }) {
   const { pathname: source, search } = useLocation();
   const urlQueries = new URLSearchParams(search);
-  // const bookmarks = useBookmarks();
+  const bookmarks = useBookmarks();
   const ratings = useRatings();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
@@ -39,7 +39,7 @@ export default function MediaTab({ username }: { username: string }) {
     listSet,
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: res => {
-      // bookmarks.gather({ res, key: "token" });
+      bookmarks.gather({ res, key: "token" });
       ratings.gather({ res, key: "token" });
       setShowMasonryGrid(true);
     },
@@ -116,7 +116,7 @@ export default function MediaTab({ username }: { username: string }) {
                     onLayoutComplete={() => console.log("Layout complete!")}
                   >
                     {media.list.map((data: MediaFile, key: number) => {
-                      let props = { data, source, ratings, type: "media" };
+                      let props = { bookmarks, data, source, ratings, type: "media" };
                       return (
                         <div
                           {...{

From 8c4956833194c19dad8d363079b80a53a99c4664 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 9 Feb 2024 18:00:52 -0800
Subject: [PATCH 6/6] sdinferencepanel shows inference list

---
 .../weight/inference_panels/SdInferencePanel.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

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 6d24b2fb43..27806b0501 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
@@ -26,6 +26,7 @@ import {
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import PremiumLock from "components/PremiumLock";
+import InferenceJobsList from "components/layout/InferenceJobsList";
 
 interface SdInferencePanelProps {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -277,13 +278,20 @@ function SdInferencePanel({
         );
       }
     } else if (EnqueueImageGenIsError(response)) {
-      console.log("error");
+      console.log("error",response);
     }
     setIsEnqueuing(false);
 
     return false;
   };
 
+  const failures = (fail = "") => {
+    switch (fail) {
+      default:
+        return "Uknown failure";
+    }
+  };
+
   return (
     <Panel padding={true}>
       <h4 className="fw-semibold mb-4">Generate an Image</h4>
@@ -443,7 +451,7 @@ function SdInferencePanel({
         </Accordion.Item>
       </Accordion>
 
-      <div className="d-flex gap-2 justify-content-end mt-4">
+      <div className="d-flex gap-2 justify-content-end mt-4 mb-3">
         <Button
           {...{
             label: "Clear All",
@@ -460,6 +468,10 @@ function SdInferencePanel({
           }}
         />
       </div>
+      <InferenceJobsList {...{
+        failures,
+        jobType: FrontendInferenceJobType.ImageGeneration
+      }} />
     </Panel>
   );
 }