From 0eeb0dd67be7e957e4b2346a10c479c970d36ca2 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 13 Mar 2025 07:42:55 +1000
Subject: [PATCH] feat(ui): use invoke logo for thumbnail fallback for default
 workflows

---
 .../WorkflowLibrary/WorkflowListItem.tsx      | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx
index 45432f6a86..005b26f409 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx
@@ -7,7 +7,7 @@ import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/L
 import InvokeLogo from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiImageBold, PiUsersBold } from 'react-icons/pi';
+import { PiImage, PiUsersBold } from 'react-icons/pi';
 import type { WorkflowRecordListItemWithThumbnailDTO } from 'services/api/types';
 
 import { DeleteWorkflow } from './WorkflowLibraryListItemActions/DeleteWorkflow';
@@ -66,7 +66,7 @@ export const WorkflowListItem = memo(({ workflow }: { workflow: WorkflowRecordLi
         <Image
           src={workflow.thumbnail_url ?? undefined}
           fallbackStrategy="beforeLoadOrError"
-          fallback={<ThumbnailFallback />}
+          fallback={workflow.category === 'default' ? <DefaultThumbnailFallback /> : <UserThumbnailFallback />}
           objectFit="cover"
           objectPosition="50% 50%"
           height={IMAGE_THUMBNAIL_SIZE}
@@ -135,18 +135,36 @@ export const WorkflowListItem = memo(({ workflow }: { workflow: WorkflowRecordLi
 });
 WorkflowListItem.displayName = 'WorkflowListItem';
 
-const ThumbnailFallback = memo(() => {
+const UserThumbnailFallback = memo(() => {
   return (
     <Flex
       height={IMAGE_THUMBNAIL_SIZE}
       minWidth={IMAGE_THUMBNAIL_SIZE}
-      bg="base.650"
+      bg="base.600"
       borderRadius="base"
       alignItems="center"
       justifyContent="center"
+      opacity={0.3}
     >
-      <Icon color="base.500" as={PiImageBold} boxSize={FALLBACK_ICON_SIZE} />
+      <Icon as={PiImage} boxSize={FALLBACK_ICON_SIZE} />
     </Flex>
   );
 });
-ThumbnailFallback.displayName = 'ThumbnailFallback';
+UserThumbnailFallback.displayName = 'UserThumbnailFallback';
+
+const DefaultThumbnailFallback = memo(() => {
+  return (
+    <Flex
+      height={IMAGE_THUMBNAIL_SIZE}
+      minWidth={IMAGE_THUMBNAIL_SIZE}
+      bg="base.600"
+      borderRadius="base"
+      alignItems="center"
+      justifyContent="center"
+      opacity={0.3}
+    >
+      <Image src={InvokeLogo} alt="invoke-logo" userSelect="none" boxSize={FALLBACK_ICON_SIZE} p={1} />
+    </Flex>
+  );
+});
+DefaultThumbnailFallback.displayName = 'DefaultThumbnailFallback';