🐛 fix: send func, tags lost

CHANGELOG.md

@@ -2,10 +2,9 @@
 
 # [1.3.0](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.2.2...v1.3.0) (2023-04-20)
 
-
 ### ✨ Features
 
-* add prompt editor ([1428cc1](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/1428cc1))
+- add prompt editor ([1428cc1](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/1428cc1))
 
 ## [1.2.2](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.2.1...v1.2.2) (2023-04-20)
 

src/components/Header/index.tsx

@@ -1,12 +1,12 @@
 import { DraggablePanel } from '@/components'
-import { GithubOutlined } from '@ant-design/icons'
+import { BoldOutlined, GithubOutlined } from '@ant-design/icons'
 import { Button, Space } from 'antd'
 import { useResponsive } from 'antd-style'
 import qs from 'query-string'
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 import Logo from './Logo'
-import { themeIcon } from './style'
+import { civitaiLogo, themeIcon } from './style'
 
 const HeaderView = styled.div`
   padding: 16px 24px;
@@ -16,7 +16,7 @@ const HeaderView = styled.div`
   justify-content: space-between;
   gap: 12px;
 
-  #header {
+  #tabs.header {
     .tab-nav {
       border: none !important;
       margin: 0 !important;
@@ -65,23 +65,17 @@ const Header: React.FC<HeaderProps> = ({ children, themeMode }) => {
 
   return (
     <DraggablePanel placement="top" defaultSize={{ height: 'auto' }} isExpand={expand} onExpandChange={setExpand}>
-      <HeaderView style={{ flexDirection: mobile ? 'column' : 'row' }}>
+      <HeaderView id="header" style={{ flexDirection: mobile ? 'column' : 'row' }}>
         <a href="https://github.com/canisminor1990/sd-web-ui-kitchen-theme" target="_blank" rel="noreferrer">
           <Logo themeMode={themeMode} />
         </a>
         {children}
         <Space.Compact>
           <a href="https://civitai.com/" target="_blank" rel="noreferrer">
-            <Button
-              title="Civitai"
-              icon={<img src="https://civitai.com/favicon.ico" width={20} style={{ padding: 2 }} />}
-            />
+            <Button title="Civitai" icon={civitaiLogo} />
           </a>
           <a href="https://www.birme.net/?target_width=512&target_height=512" target="_blank" rel="noreferrer">
-            <Button
-              title="Birme"
-              icon={<img src="https://www.birme.net/static/images/favicon.png" width={16} style={{ padding: 4 }} />}
-            />
+            <Button title="Birme" icon={<BoldOutlined />} />
           </a>
           <a href="https://github.com/canisminor1990/sd-web-ui-kitchen-theme" target="_blank" rel="noreferrer">
             <Button title="Github" icon={<GithubOutlined />} />

src/components/Header/style.tsx

@@ -17,3 +17,11 @@ export const themeIcon = {
 
 export const darkLogo = 'https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg'
 export const lightLogo = 'https://gw.alipayobjects.com/zos/bmw-prod/e146116d-c65a-4306-a3d2-bb8d05e1c49b.svg'
+
+export const civitaiLogo = (
+  <span role="img" className="anticon civitai">
+    <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
+      <path d="M2 4.5L8 1l6 3.5v7L8 15l-6-3.5v-7zm6-1.194L3.976 5.653v4.694L8 12.694l4.024-2.347V5.653L8 3.306zm0 1.589l2.662 1.552v.824H9.25L8 6.54l-1.25.73v1.458L8 9.46l1.25-.73h1.412v.824L8 11.105 5.338 9.553V6.447L8 4.895z" />
+    </svg>
+  </span>
+)

src/components/Sidebar/Prompt.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 import TagList, { PromptType, TagItem } from './TagList'
 import { formatPrompt } from './utils'
@@ -9,7 +9,12 @@ const View = styled.div`
   gap: 8px;
 `
 
-const Reload = styled.button`
+const BtnGroup = styled.div`
+  display: flex;
+  gap: 8px;
+`
+
+const Btn = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -22,6 +27,7 @@ const Reload = styled.button`
   line-height: var(--line-sm);
   padding: var(--input-padding);
   cursor: pointer;
+  flex: 1;
 `
 
 interface PromptProps {
@@ -33,30 +39,31 @@ const Prompt: React.FC<PromptProps> = ({ type }) => {
 
   const id = type === 'positive' ? "[id$='2img_prompt'] textarea" : "[id$='2img_neg_prompt'] textarea"
 
-  useEffect(() => {
-    onUiUpdate(() => {
+  const getValue = useCallback(() => {
+    try {
       const textarea: HTMLTextAreaElement | any = get_uiCurrentTabContent().querySelector(id)
-      if (textarea) textarea.addEventListener('change', (e: any) => setTags(formatPrompt(e.target.value)), false)
-    })
+      if (textarea) setTags(formatPrompt(textarea.value))
+    } catch {}
   }, [])
 
-  useEffect(() => {
-    if (!tags) return
+  const setValue = useCallback(() => {
     try {
       const textarea: HTMLTextAreaElement | any = get_uiCurrentTabContent().querySelector(id)
       if (textarea) textarea.value = tags.map((t) => t.text).join(', ')
     } catch {}
   }, [tags])
 
-  const getValue = useCallback(() => {
-    const textarea: HTMLTextAreaElement | any = get_uiCurrentTabContent().querySelector(id)
-    if (textarea) setTags(formatPrompt(textarea.value))
-  }, [])
-
   return (
     <View>
       <TagList type={type} tags={tags} setTags={setTags} />
-      <Reload onClick={getValue}>🔄</Reload>
+      <BtnGroup>
+        <Btn title="Load Prompt" onClick={getValue}>
+          🔄
+        </Btn>
+        <Btn title="Set Prompt" onClick={setValue}>
+          ➡️
+        </Btn>
+      </BtnGroup>
     </View>
   )
 }

src/components/Sidebar/index.tsx

@@ -1,9 +1,7 @@
 import { DraggablePanel } from '@/components'
-import { useAppStore } from '@/store'
 import { useResponsive } from 'antd-style'
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { shallow } from 'zustand/shallow'
 import PromptGroup from './PromptGroup'
 
 const SidebarView = styled.div`
@@ -64,11 +62,10 @@ interface SidebarProps {
 const Sidebar: React.FC<SidebarProps> = ({ children, loading }) => {
   const { mobile } = useResponsive()
   const [expand, setExpand] = useState<boolean>(!mobile)
-  const [currentTab] = useAppStore((st) => [st.currentTab], shallow)
   return (
     <DraggablePanel placement="left" defaultSize={{ width: 280 }} isExpand={expand} onExpandChange={setExpand}>
       <SidebarView>
-        {!loading && ['tab_txt2img', 'tab_img2img'].includes(currentTab) && <PromptGroup />}
+        {!loading && <PromptGroup />}
         {children}
       </SidebarView>
     </DraggablePanel>

src/pages/index/App.tsx

@@ -47,7 +47,10 @@ const App: React.FC<AppProps> = ({ themeMode }) => {
       const header = gradioApp().querySelector('#tabs > .tab-nav:first-child')
       const main = gradioApp().querySelector('.app')
       if (sidebar) sidebarRef.current?.appendChild(sidebar)
-      if (header) headerRef.current?.appendChild(header)
+      if (header) {
+        headerRef.current?.appendChild(header)
+        headerRef.current.id = 'tabs'
+      }
       if (main) mainRef.current?.appendChild(main)
       setLoading(false)
     })
@@ -64,7 +67,7 @@ const App: React.FC<AppProps> = ({ themeMode }) => {
             <Spin size="small" />
           </LoadingBox>
         )}
-        <div id="header" ref={headerRef} />
+        <div ref={headerRef} className="header" />
       </Header>
       <View>
         <Sidebar>

src/theme/style.less

@@ -74,11 +74,4 @@ h5 {
   color: var(--color-text);
 }
 
-.dark,
-.light {
-  div {
-    color: var(--color-text);
-  }
-}
-
 /* Theme Fix */