feature: new pending panel on create page (#154)

* fix: issue with cached shortlinks

* feat: initial work on pending image panel for create page

* stash work

* feat: add quick and simple json file to update server status

* feat: add virtual list to pending panel

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2023.08.17
+
+- Fix issue with creating shareable links when swiping between images in the image modal.
+- Feature: Experimenting with adding a new pending panel on the create page for wider displays (anything over 1100px wide). I may try to adjust that. Regardless, I'd like to start getting feedback. I think this layout makes it nice to get immediate feedback on images while you're still messing around with new image settings.
+
 # 2023.08.16
 
 - Increase max image dimensions to 3072 x 3072 for users with API key (there probably aren't many workers that can support that)
@@ -6,7 +11,7 @@
 
 # 2023.08.15
 
-- Add some logic that attempts to check for model mismatch between LORA and image modal and warn user if an incompatibility is found.
+- Add some logic that attempts to check for model mismatch between LORA and image model and warn user if an incompatibility is found.
 - Additional PR from tijszwinkels on GitHub that adds negative prompt to JPEG metadata (thank you!)
 - Fix: Styling issues with inpainting toolbar
 

app/(default-route-group)/create/page.tsx

@@ -1,4 +1,6 @@
 import { basePath } from 'BASE_PATH'
+import FlexRow from 'app/_components/FlexRow'
+import PendingPanelView from 'app/_modules/PendingPanel/PendingPanelView'
 import CreatePage from 'app/_pages/CreatePage'
 
 async function getPageData() {
@@ -31,6 +33,19 @@ export default async function Page() {
 
   // Forward fetched data to your Client Component
   return (
-    <CreatePage availableModels={availableModels} modelDetails={modelDetails} />
+    <FlexRow
+      gap={8}
+      style={{
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        position: 'relative'
+      }}
+    >
+      <CreatePage
+        availableModels={availableModels}
+        modelDetails={modelDetails}
+      />
+      <PendingPanelView />
+    </FlexRow>
   )
 }

app/_modules/AppUpdate/index.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import MaxWidth from 'app/_components/MaxWidth'
+import ServerMessage from 'components/ServerMessage'
 import ServerUpdateComponent from 'components/ServerUpdateComponent'
 import { useCallback, useEffect, useState } from 'react'
 import { useStore } from 'statery'
@@ -10,6 +12,8 @@ let waitingForServerInfoRes = false
 
 export default function AppUpdate() {
   const { buildId } = useStore(appInfoStore)
+  const [serverMsg, setServerMsg] = useState<any>(false)
+
   const [showServerUpdateComponent, setShowServerUpdateComponent] =
     useState(false)
 
@@ -26,7 +30,7 @@ export default function AppUpdate() {
       waitingForServerInfoRes = true
       const res = await fetch('/artbot/api/server-info')
       const data = await res.json()
-      const { build } = data
+      const { build, serverMessage } = data
 
       waitingForServerInfoRes = false
 
@@ -39,6 +43,12 @@ export default function AppUpdate() {
           'Application was just updated in the background. Reload this page for the latest code.'
         )
       }
+
+      if (serverMessage) {
+        setServerMsg(serverMessage)
+      } else {
+        setServerMsg(false)
+      }
     } catch (err) {
       console.log(`Unable to fetch latest server-info. Connectivity issue?`)
       waitingForServerInfoRes = false
@@ -54,7 +64,18 @@ export default function AppUpdate() {
     return () => clearInterval(interval)
   }, [fetchAppInfo])
 
-  if (showServerUpdateComponent) return <ServerUpdateComponent />
-
-  return null
+  return (
+    <>
+      {serverMsg && (
+        <MaxWidth>
+          <ServerMessage
+            title={serverMsg.title}
+            content={serverMsg.content}
+            timestamp={serverMsg.timestamp}
+          />
+        </MaxWidth>
+      )}
+      {showServerUpdateComponent && <ServerUpdateComponent />}
+    </>
+  )
 }

app/_modules/PendingPanel/PendingPanelView.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+/**
+ * Dynamic view to toggle whether or not the pending panel
+ * should be displayed on create page based on width
+ * of browser window.
+ */
+
+import { useWindowSize } from 'hooks/useWindowSize'
+import PendingPanel from '.'
+
+export default function PendingPanelView() {
+  const { width } = useWindowSize()
+
+  if (!width || width < 1100) {
+    return null
+  }
+
+  return <PendingPanel />
+}