✨ feat(breaking-changes): Compatible with sd webui v1.6 [force major]

BREAKING CHANGES: `Lobe Theme v3` is compatible with `SD WebUI v1.6` and is not backwards compatible. Versions below `< 1.6` should be moved to the branch [legacy-sd-webui-1.5](https://github.com/lobehub/sd-webui-lobe-theme/tree/legacy-sd-webui-1.5)

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
         'no-undef': 0,
         'object-curly-spacing': 0,
         'unicorn/prefer-add-event-listener': 0,
+        'unused-imports/no-unused-imports': 0,
       },
     },
   ],

README-ru_RU.md

@@ -80,7 +80,7 @@
 git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme
 ```
 
-> 👉 Примечание: Минимальные требования gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
+> 👉 Примечание: Минимальные требования gradio-3.41.2 & sd-webui 1.6
 
 <div align="right">
 

README-zh_CN.md

@@ -46,7 +46,7 @@
 
 <br/>
 
-> 📦 **Version 2.0.0** 后更名为 **Lobe Theme**, 遗产版本可以可访问 [sd-webui-kitchen-theme-legacy](https://github.com/canisminor1990/sd-webui-kitchen-theme-legacy)
+> ⚠️⚠️⚠️ `Lobe Theme v3` 适配 `SD WebUI v1.6`, 并不向下兼容，`< 1.6` 以下版本移动到分支 [legacy-sd-webui-1.5](https://github.com/lobehub/sd-webui-lobe-theme/tree/legacy-sd-webui-1.5)
 
 ## ✨ 主题特性
 
@@ -82,7 +82,7 @@
 git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme
 ```
 
-> 👉 提示：最低要求 gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
+> 👉 提示：最低要求 gradio-3.41.2 & sd-webui 1.6
 
 <div align="right">
 

README.md

@@ -27,7 +27,7 @@ English · [Russian ](./README-ru_RU.md)· [简体中文](./README-zh_CN.md) ·
 
 ![][cover]
 
-> 📦 After **Version 2.0.0** Kitchen theme was renamed to **Lobe Theme**. The legacy version can be accessed at [sd-webui-kitchen-theme-legacy](https://github.com/canisminor1990/sd-webui-kitchen-theme-legacy)
+> ⚠️⚠️⚠️ `Lobe Theme v3` is compatible with `SD WebUI v1.6` and is not backwards compatible. Versions below `< 1.6` should be moved to the branch [legacy-sd-webui-1.5](https://github.com/lobehub/sd-webui-lobe-theme/tree/legacy-sd-webui-1.5)
 
 <details>
 <summary><kbd>Table of contents</kbd></summary>
@@ -80,7 +80,7 @@ As an extension (recommended), clone the repository to your extension folder:
 git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme
 ```
 
-> 👉 Note: minimum requirements gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
+> 👉 Note: minimum requirements gradio-3.41.2 & sd-webui 1.6
 
 <div align="right">
 

src/pages/Content/index.tsx

@@ -1,29 +1,20 @@
-import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect, useRef } from 'react';
 
-import draggablePanel from '@/script/draggablePanel';
 import formatPrompt from '@/script/formatPrompt';
 import { selectors, useAppStore } from '@/store';
 import { type DivProps } from '@/types';
 
-import { useStyles as usePreviewStyles } from '../Preview/style';
 import { useStyles } from './style';
 
 const Content = memo<DivProps>(({ className, ...props }) => {
   const mainReference = useRef<HTMLDivElement>(null);
   const setting = useAppStore(selectors.currentSetting, isEqual);
-  const { mobile } = useResponsive();
+
   const { cx, styles } = useStyles({
     isPromptResizable: setting.promptTextareaType === 'resizable',
     layoutSplitPreview: setting.layoutSplitPreview,
   });
-  const previewStyle = usePreviewStyles({
-    isPrimaryColor: Boolean(setting.primaryColor),
-    liteAnimation: setting.liteAnimation,
-  });
-
-  const useDragablePanel = !setting.layoutSplitPreview && mobile === false;
 
   useEffect(() => {
     console.time('🤯 [layout] inject - Content');
@@ -57,18 +48,13 @@ const Content = memo<DivProps>(({ className, ...props }) => {
     console.timeEnd('🤯 [layout] inject - Content');
   }, []);
 
-  useEffect(() => {
-    if (useDragablePanel) draggablePanel();
-  }, [useDragablePanel]);
-
   return (
     <div
       className={cx(
         styles.container,
         styles.textares,
         styles.text2img,
-        setting.layoutSplitPreview ? styles.splitView : styles.draggableContainer,
-        useDragablePanel && previewStyle.styles.preview,
+        setting.layoutSplitPreview && styles.splitView,
         className,
       )}
       ref={mainReference}

src/pages/Content/style.ts

@@ -27,6 +27,14 @@ export const useStyles = createStyles(
           border-bottom-left-radius: 0;
         }
 
+        #txt2img_render,
+        #img2img_render {
+          display: block !important;
+          margin-top: 16px;
+          padding: 0 !important;
+          background: transparent;
+        }
+
         .block.gradio-html:has(div.prose) {
           display: block;
 
@@ -53,30 +61,6 @@ export const useStyles = createStyles(
           }
         }
       `,
-      draggableContainer: css`
-        .draggable-line {
-          flex: none !important;
-
-          width: 2px;
-          min-width: 2px !important;
-          max-width: 2px !important;
-
-          border-left: 1px dashed ${token.colorBorderSecondary};
-
-          transition: all 0.3s ease-in-out;
-
-          &:hover,
-          &:active {
-            cursor: col-resize;
-            border-left: 2px solid ${token.colorPrimary};
-          }
-        }
-
-        .draggable-container {
-          flex-wrap: nowrap !important;
-          align-items: stretch !important;
-        }
-      `,
       splitView: css`
         #txt2img_toprow,
         #img2img_toprow {
@@ -109,6 +93,16 @@ export const useStyles = createStyles(
           max-height: 44px !important;
         }
 
+        #txt2img_accordions,
+        #img2img_accordions {
+          padding: 0 !important;
+          background: transparent !important;
+
+          > div {
+            background-color: ${token.colorBgContainer}!important;
+          }
+        }
+
         #img2img_toprow .interrogate-col {
           flex-flow: row wrap;
           min-width: 100% !important;
@@ -145,6 +139,26 @@ export const useStyles = createStyles(
             flex-direction: column;
             gap: 12px;
 
+            * {
+              --layout-gap: 12px !important;
+            }
+
+            > div {
+              display: flex;
+              flex-direction: column;
+              gap: 12px;
+
+              > div.gr-group.gradio-group {
+                gap: 12px;
+
+                margin: 0 !important;
+                padding: 16px !important;
+
+                background-color: ${token.colorBgContainer}!important;
+                border-radius: ${token.borderRadius}px !important;
+              }
+            }
+
             .gradio-accordion:not(.hidden):has(div) {
               padding: 0 !important;
               border: none !important;
@@ -235,7 +249,9 @@ export const useStyles = createStyles(
             text-overflow: ellipsis;
             vertical-align: bottom;
 
-            transition: all 0.3s, height 0s;
+            transition:
+              all 0.3s,
+              height 0s;
           }
         }
 

src/pages/ExtraNetworkSidebar/Inner.tsx

@@ -22,15 +22,44 @@ const Inner = memo(() => {
   useEffect(() => {
     console.time('🤯 [layout] inject - ExtraNetworkSidebar');
     if (setting.enableExtraNetworkSidebar) {
+      const image2imageExtraNetworkButton = gradioApp().querySelectorAll(
+        '#txt2img_extra_tabs > .tab-nav > button',
+      )[1] as HTMLButtonElement;
+      const text2imageExtraNetworkButton = gradioApp().querySelectorAll(
+        '#img2img_extra_tabs > .tab-nav > button',
+      )[1] as HTMLButtonElement;
+
+      if (image2imageExtraNetworkButton) {
+        image2imageExtraNetworkButton.click();
+      }
+      if (text2imageExtraNetworkButton) {
+        text2imageExtraNetworkButton.click();
+      }
+
+      const txt2imgTab = gradioApp().querySelector('div#tab_txt2img') as HTMLDivElement;
       const txt2imgExtraNetworks = gradioApp().querySelector(
-        'div#txt2img_extra_networks',
+        'div#txt2img_extra_tabs',
       ) as HTMLDivElement;
+      const txt2imgRender = txt2imgExtraNetworks.querySelectorAll(
+        'div.tabitem.gradio-tabitem',
+      )[0] as HTMLDivElement;
+
+      const img2imgTab = gradioApp().querySelector('div#tab_img2img');
       const img2imgExtraNetworks = gradioApp().querySelector(
-        'div#img2img_extra_networks',
+        'div#img2img_extra_tabs',
       ) as HTMLDivElement;
+      const img2imgRender = img2imgExtraNetworks.querySelectorAll(
+        'div.tabitem.gradio-tabitem',
+      )[0] as HTMLDivElement;
+
       if (txt2imgExtraNetworks && img2imgExtraNetworks) {
         txt2imgExtraNetworkSidebarReference.current?.append(txt2imgExtraNetworks);
+        txt2imgRender.id = 'txt2img_render';
+        txt2imgTab?.append(txt2imgRender);
+
         img2imgExtraNetworkSidebarReference.current?.append(img2imgExtraNetworks);
+        img2imgRender.id = 'img2img_render';
+        img2imgTab?.append(img2imgRender);
       }
       if (document.querySelector('#txt2img_lora_cards')) {
         civitaiHelperFix();

src/pages/ExtraNetworkSidebar/index.tsx

@@ -27,22 +27,6 @@ const ExtraNetworkSidebar = memo<ExtraNetworkSidebarProps>(({ headerHeight }) =>
   const { styles, theme } = useStyles({ headerHeight });
   const { t } = useTranslation();
 
-  useEffect(() => {
-    const index2indexExtraNetworkButton = gradioApp().querySelector(
-      'button#img2img_extra_networks',
-    ) as HTMLButtonElement;
-    const t2indexExtraNetworkButton = gradioApp().querySelector(
-      'button#txt2img_extra_networks',
-    ) as HTMLButtonElement;
-
-    if (index2indexExtraNetworkButton) {
-      index2indexExtraNetworkButton.onclick = () => setExpand(!expand);
-    }
-    if (t2indexExtraNetworkButton) {
-      t2indexExtraNetworkButton.onclick = () => setExpand(!expand);
-    }
-  }, [expand]);
-
   useEffect(() => {
     if (mobile) setExpand(false);
   }, [mobile]);
@@ -63,9 +47,9 @@ const ExtraNetworkSidebar = memo<ExtraNetworkSidebarProps>(({ headerHeight }) =>
         <DraggablePanelContainer
           className={styles.container}
           style={
-            mode === 'float' ?
-              { background: theme.colorBgContainer, minWidth: setting.extraNetworkSidebarWidth } :
-              { minWidth: setting.extraNetworkSidebarWidth }
+            mode === 'float'
+              ? { background: theme.colorBgContainer, minWidth: setting.extraNetworkSidebarWidth }
+              : { minWidth: setting.extraNetworkSidebarWidth }
           }
         >
           <DraggablePanelHeader

src/pages/ExtraNetworkSidebar/style.ts

@@ -7,6 +7,18 @@ export const useStyles = createStyles(
         display: none;
       }
 
+      .extra-networks .tab-nav > button {
+        &:first-child {
+          display: none;
+        }
+      }
+
+      #txt2img_extra_search,
+      #img2img_extra_search {
+        width: 100% !important;
+        max-width: unset !important;
+      }
+
       #txt2img-extra-network-sidebar,
       #img2img-extra-network-sidebar {
         button.lg.secondary.gradio-button,
@@ -15,6 +27,11 @@ export const useStyles = createStyles(
           height: 34px !important;
           min-height: 34px !important;
         }
+
+        .tabitem {
+          padding: 0 !important;
+          background: transparent;
+        }
       }
 
       .extra-network-cards {

src/pages/QuickSettingSidebar/style.ts

@@ -62,6 +62,10 @@ export const useStyles = createStyles(
           min-width: 16px;
           min-height: 16px;
         }
+
+        div.gradio-dropdown {
+          min-width: unset !important;
+        }
       }
     `,
   }),

src/styles/components/progress.ts

@@ -41,7 +41,8 @@ export default (token: Theme) => css`
   }
 
   .progressDiv {
-    position: relative;
+    position: relative !important;
+    top: 0 !important;
     overflow: hidden;
     background: ${token.colorBgElevated} !important;