From dfd94bbd0ba37b8ca410e08fc52a92f9b797651a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 10 Jul 2024 16:16:53 +1000
Subject: [PATCH] feat(ui): remove galleryHeader in favor of projectUrl &
 projectName

---
 .../web/src/app/components/InvokeAIUI.tsx     | 27 ++++++++++++-------
 .../src/app/store/nanostores/galleryHeader.ts |  4 ---
 .../web/src/app/store/nanostores/projectId.ts |  3 +++
 3 files changed, 20 insertions(+), 14 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 12611943bc..1dd1a265fb 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -7,11 +7,10 @@ import { $baseUrl } from 'app/store/nanostores/baseUrl';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import type { CustomStarUi } from 'app/store/nanostores/customStarUI';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
-import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { $isDebugging } from 'app/store/nanostores/isDebugging';
 import { $logo } from 'app/store/nanostores/logo';
 import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
-import { $projectId } from 'app/store/nanostores/projectId';
+import { $projectId, $projectName, $projectUrl } from 'app/store/nanostores/projectId';
 import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
 import { $store } from 'app/store/nanostores/store';
 import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
@@ -37,7 +36,8 @@ interface Props extends PropsWithChildren {
   customNavComponent?: ReactNode;
   middleware?: Middleware[];
   projectId?: string;
-  galleryHeader?: ReactNode;
+  projectName?: string;
+  projectUrl?: string;
   queueId?: string;
   selectedImage?: {
     imageName: string;
@@ -58,7 +58,8 @@ const InvokeAIUI = ({
   customNavComponent,
   middleware,
   projectId,
-  galleryHeader,
+  projectName,
+  projectUrl,
   queueId,
   selectedImage,
   customStarUi,
@@ -108,7 +109,7 @@ const InvokeAIUI = ({
       $projectId.set(undefined);
       $queueId.set(DEFAULT_QUEUE_ID);
     };
-  }, [apiUrl, token, middleware, projectId, queueId]);
+  }, [apiUrl, token, middleware, projectId, queueId, projectName, projectUrl]);
 
   useEffect(() => {
     if (customStarUi) {
@@ -141,14 +142,20 @@ const InvokeAIUI = ({
   }, [openAPISchemaUrl]);
 
   useEffect(() => {
-    if (galleryHeader) {
-      $galleryHeader.set(galleryHeader);
-    }
+    $projectName.set(projectName);
 
     return () => {
-      $galleryHeader.set(undefined);
+      $projectName.set(undefined);
     };
-  }, [galleryHeader]);
+  }, [projectName]);
+
+  useEffect(() => {
+    $projectUrl.set(projectUrl);
+
+    return () => {
+      $projectUrl.set(undefined);
+    };
+  }, [projectUrl]);
 
   useEffect(() => {
     if (logo) {
diff --git a/invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts b/invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts
deleted file mode 100644
index 5de7b1dd40..0000000000
--- a/invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { atom } from 'nanostores';
-import type { ReactNode } from 'react';
-
-export const $galleryHeader = atom<ReactNode | undefined>(undefined);
diff --git a/invokeai/frontend/web/src/app/store/nanostores/projectId.ts b/invokeai/frontend/web/src/app/store/nanostores/projectId.ts
index 2268ccdff1..c2b14e91ac 100644
--- a/invokeai/frontend/web/src/app/store/nanostores/projectId.ts
+++ b/invokeai/frontend/web/src/app/store/nanostores/projectId.ts
@@ -4,3 +4,6 @@ import { atom } from 'nanostores';
  * The optional project-id header.
  */
 export const $projectId = atom<string | undefined>();
+
+export const $projectName = atom<string | undefined>();
+export const $projectUrl = atom<string | undefined>();