✨ feat: update header

src/components/Containers/FlowContainer.tsx

@@ -83,6 +83,7 @@ const FlowContainer: React.FC = () => {
 
   return (
     <ReactFlow
+      id="floweditor"
       ref={reactFlowWrapper}
       nodes={nodes}
       edges={edges}

src/components/Containers/index.tsx

@@ -1,8 +1,6 @@
-export { default as ControlPanelContainer } from './ControlPanelContainer'
 export { default as FlowContainer } from './FlowContainer'
 export { default as GalleryContainer } from './GalleryContainer'
 export { default as InputContainer } from './InputContainer'
 export { default as NodeContainer } from './NodeContainer'
 export { default as NodePickerContainer } from './NodePickerContainer'
-export { default as QueueContainer } from './QueueContainer'
 export { default as WorkflowPageContainer } from './WorkflowPageContainer'

src/components/ControlPanelComponent/index.tsx

@@ -1,6 +1,5 @@
-import { GalleryContainer, NodePickerContainer, QueueContainer, Tabs, WorkflowPageContainer } from '@/components'
-import { Button, message } from 'antd'
-import React, { useEffect, useState } from 'react'
+import { GalleryContainer, NodePickerContainer, Tabs, WorkflowPageContainer } from '@/components'
+import React from 'react'
 import styled from 'styled-components'
 
 const SideBar = styled.div`
@@ -9,76 +8,30 @@ const SideBar = styled.div`
   height: 100%;
 `
 
-const Footer = styled.div`
-  flex: none;
-  padding: 12px 0;
-`
-
-interface ControlPanelComponentProps {
-  promptError?: string
-  onSubmit: () => Promise<void>
-}
-
-const ControlPanelComponent: React.FC<ControlPanelComponentProps> = ({ onSubmit, promptError }) => {
-  const [messageApi, contextHolder] = message.useMessage()
-  const [count, setCount] = useState(0)
-
-  useEffect(() => {
-    if (promptError !== undefined)
-      messageApi.open({
-        type: 'error',
-        content: promptError,
-        duration: 4,
-      })
-  }, [promptError, count])
-
+const ControlPanelComponent: React.FC = () => {
   return (
-    <>
-      {contextHolder}
-      <SideBar>
-        <Tabs
-          defaultActiveKey="Workflow"
-          items={[
-            {
-              label: 'Workflow',
-              key: 'Workflow',
-              children: (
-                <>
-                  <div style={{ flex: 1 }}>
-                    <WorkflowPageContainer />
-                  </div>
-                  <Footer>
-                    <QueueContainer />
-                    <Button
-                      style={{ marginTop: 12 }}
-                      type="primary"
-                      size="large"
-                      block
-                      onClick={() => {
-                        void onSubmit()
-                        setCount(count + 1)
-                      }}
-                    >
-                      Enqueue Pipeline
-                    </Button>
-                  </Footer>
-                </>
-              ),
-            },
-            {
-              label: 'Nodes',
-              key: 'Nodes',
-              children: <NodePickerContainer />,
-            },
-            {
-              label: 'Gallery',
-              key: 'Gallery',
-              children: <GalleryContainer />,
-            },
-          ]}
-        />
-      </SideBar>
-    </>
+    <SideBar>
+      <Tabs
+        defaultActiveKey="Nodes"
+        items={[
+          {
+            label: 'Nodes',
+            key: 'Nodes',
+            children: <NodePickerContainer />,
+          },
+          {
+            label: 'Gallery',
+            key: 'Gallery',
+            children: <GalleryContainer />,
+          },
+          {
+            label: 'Workflow',
+            key: 'Workflow',
+            children: <WorkflowPageContainer />,
+          },
+        ]}
+      />
+    </SideBar>
   )
 }
 

src/components/Header/Logo.tsx

@@ -0,0 +1,15 @@
+import { darkLogo, lightLogo } from '@/components/Header/style'
+import { ThemeMode } from 'antd-style'
+import React from 'react'
+
+interface LogoProps {
+  themeMode: ThemeMode
+  size?: number
+  style?: React.CSSProperties
+}
+
+const Logo: React.FC<LogoProps> = ({ themeMode, size = 20, style }) => (
+  <img src={themeMode === 'light' ? lightLogo : darkLogo} alt="logo" style={{ height: size, ...style }} />
+)
+
+export default React.memo(Logo)

src/components/Header/QueueList.tsx

@@ -0,0 +1,36 @@
+import { type QueueItem } from '@/types'
+import { DeleteOutlined, LoadingOutlined } from '@ant-design/icons'
+import type { MenuProps } from 'antd'
+import { Spin } from 'antd'
+import Label from './Label'
+
+interface QueueListProps {
+  queue: QueueItem[]
+  onDeleteFromQueue: (id: number) => Promise<void>
+}
+
+const QueueList = ({ queue, onDeleteFromQueue }: QueueListProps): MenuProps['items'] => {
+  if (queue.length === 0)
+    return [
+      {
+        label: 'Empty queue',
+        key: 0,
+      },
+    ]
+  return queue.map((it, i) => ({
+    icon: i === 0 ? <Spin size="small" indicator={<LoadingOutlined spin />} /> : <DeleteOutlined />,
+    onClick: () => void onDeleteFromQueue(it.id),
+    label: (
+      <div style={{ marginLeft: 8 }}>
+        <h5>Queue {it.id}</h5>
+        <Label label="model" value={it.model === undefined ? 'N/A' : it.model} />
+        {it.prompts.map((prompt, i) => (
+          <Label key={i} label="prompt" value={prompt} />
+        ))}
+      </div>
+    ),
+    key: it.id,
+  }))
+}
+
+export default QueueList

src/components/Header/index.tsx

@@ -0,0 +1,82 @@
+import { useAppStore } from '@/store'
+import { GithubOutlined, LoadingOutlined } from '@ant-design/icons'
+import { Button, Dropdown, Space, Spin, message } from 'antd'
+import React, { ReactNode, useEffect, useState } from 'react'
+import { shallow } from 'zustand/shallow'
+import Logo from './Logo'
+import QueueList from './QueueList'
+import { ThemeList, View, themeIcon } from './style'
+
+interface HeaderProps {
+  children?: ReactNode
+}
+const Header: React.FC<HeaderProps> = ({ children }) => {
+  const [messageApi, messageHolder] = message.useMessage()
+  const [count, setCount] = useState(0)
+
+  const { themeMode, onSetThemeMode, onSubmit, queue, onDeleteFromQueue, promptError } = useAppStore(
+    (st) => ({
+      themeMode: st.themeMode,
+      onSetThemeMode: st.onSetThemeMode,
+      onSubmit: st.onSubmit,
+      queue: st.queue,
+      onDeleteFromQueue: st.onDeleteFromQueue,
+      promptError: st.promptError,
+    }),
+    shallow
+  )
+
+  useEffect(() => {
+    if (promptError !== undefined)
+      messageApi.open({
+        type: 'error',
+        content: promptError,
+        duration: 4,
+      })
+  }, [promptError, count])
+
+  const handleRun = () => {
+    onSubmit()
+    setCount(count + 1)
+  }
+
+  return (
+    <>
+      <View>
+        <Logo themeMode={themeMode} />
+        <Space>
+          {children}
+          <a href="https://github.com/canisminor1990/kitchen-comfyui" target="_blank" rel="noreferrer">
+            <Button icon={<GithubOutlined />} />
+          </a>
+          <Dropdown
+            trigger={['click']}
+            placement="bottomRight"
+            menu={{
+              items: ThemeList({ onSetThemeMode }),
+            }}
+          >
+            <Button icon={themeIcon[themeMode]} />
+          </Dropdown>
+          <Dropdown.Button
+            type="primary"
+            trigger={['hover']}
+            placement="bottomRight"
+            onClick={handleRun}
+            menu={{ items: QueueList({ queue, onDeleteFromQueue }) }}
+            icon={
+              queue.length > 0 ? (
+                <Spin size="small" indicator={<LoadingOutlined spin style={{ color: '#fff' }} />} />
+              ) : undefined
+            }
+          >
+            Run Queue
+          </Dropdown.Button>
+        </Space>
+      </View>
+      {messageHolder}
+    </>
+  )
+}
+
+export default React.memo(Header)