From 5ff4dd26bbf93f7484fa2249930fcc3412d0ebec Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sat, 29 Jul 2023 02:30:10 +1200
Subject: [PATCH 1/2] fix: Concat Link Styling

---
 .../ParamSDXLNegativeStyleConditioning.tsx    | 33 +++++++++++++--
 .../ParamSDXLPositiveStyleConditioning.tsx    | 33 +++++++++++++--
 .../sdxl/components/ParamSDXLPromptArea.tsx   | 40 +------------------
 .../sdxl/components/SDXLConcatLink.tsx        | 10 +----
 4 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx
index e2d5c5b8e4d..cd8e1605d0e 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx
@@ -13,15 +13,22 @@ import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import AddEmbeddingButton from 'features/embedding/components/AddEmbeddingButton';
 import ParamEmbeddingPopover from 'features/embedding/components/ParamEmbeddingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { AnimatePresence } from 'framer-motion';
 import { isEqual } from 'lodash-es';
 import { flushSync } from 'react-dom';
 import { setNegativeStylePromptSDXL } from '../store/sdxlSlice';
+import SDXLConcatLink from './SDXLConcatLink';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
-  ({ sdxl }, activeTabName) => {
+  ({ sdxl, ui }, activeTabName) => {
+    const { negativeStylePrompt, shouldConcatSDXLStylePrompt } = sdxl;
+    const { shouldPinParametersPanel } = ui;
+
     return {
-      prompt: sdxl.negativeStylePrompt,
+      prompt: negativeStylePrompt,
+      shouldConcatSDXLStylePrompt,
+      shouldPinParametersPanel,
       activeTabName,
     };
   },
@@ -37,11 +44,17 @@ const promptInputSelector = createSelector(
  */
 const ParamSDXLNegativeStyleConditioning = () => {
   const dispatch = useAppDispatch();
-  const { prompt, activeTabName } = useAppSelector(promptInputSelector);
   const isReady = useIsReadyToInvoke();
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
 
+  const {
+    prompt,
+    activeTabName,
+    shouldPinParametersPanel,
+    shouldConcatSDXLStylePrompt,
+  } = useAppSelector(promptInputSelector);
+
   const handleChangePrompt = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       dispatch(setNegativeStylePromptSDXL(e.target.value));
@@ -111,6 +124,20 @@ const ParamSDXLNegativeStyleConditioning = () => {
 
   return (
     <Box position="relative">
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              left: '3',
+              w: '94%',
+              top: '-17px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
       <FormControl>
         <ParamEmbeddingPopover
           isOpen={isOpen}
diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx
index 8512aedd686..7dcf94419e2 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx
@@ -13,15 +13,22 @@ import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import AddEmbeddingButton from 'features/embedding/components/AddEmbeddingButton';
 import ParamEmbeddingPopover from 'features/embedding/components/ParamEmbeddingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { AnimatePresence } from 'framer-motion';
 import { isEqual } from 'lodash-es';
 import { flushSync } from 'react-dom';
 import { setPositiveStylePromptSDXL } from '../store/sdxlSlice';
+import SDXLConcatLink from './SDXLConcatLink';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
-  ({ sdxl }, activeTabName) => {
+  ({ sdxl, ui }, activeTabName) => {
+    const { positiveStylePrompt, shouldConcatSDXLStylePrompt } = sdxl;
+    const { shouldPinParametersPanel } = ui;
+
     return {
-      prompt: sdxl.positiveStylePrompt,
+      prompt: positiveStylePrompt,
+      shouldPinParametersPanel,
+      shouldConcatSDXLStylePrompt,
       activeTabName,
     };
   },
@@ -37,11 +44,17 @@ const promptInputSelector = createSelector(
  */
 const ParamSDXLPositiveStyleConditioning = () => {
   const dispatch = useAppDispatch();
-  const { prompt, activeTabName } = useAppSelector(promptInputSelector);
   const isReady = useIsReadyToInvoke();
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
 
+  const {
+    prompt,
+    activeTabName,
+    shouldPinParametersPanel,
+    shouldConcatSDXLStylePrompt,
+  } = useAppSelector(promptInputSelector);
+
   const handleChangePrompt = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       dispatch(setPositiveStylePromptSDXL(e.target.value));
@@ -111,6 +124,20 @@ const ParamSDXLPositiveStyleConditioning = () => {
 
   return (
     <Box position="relative">
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              left: '3',
+              w: '94%',
+              top: '-17px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
       <FormControl>
         <ParamEmbeddingPopover
           isOpen={isOpen}
diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
index 513b210a0ad..ed21284df06 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
@@ -1,23 +1,11 @@
-import { Box, Flex } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
+import { Flex } from '@chakra-ui/react';
 import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
 import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
-import { AnimatePresence } from 'framer-motion';
 import ParamSDXLConcatButton from './ParamSDXLConcatButton';
 import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
 import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
-import SDXLConcatLink from './SDXLConcatLink';
 
 export default function ParamSDXLPromptArea() {
-  const shouldPinParametersPanel = useAppSelector(
-    (state: RootState) => state.ui.shouldPinParametersPanel
-  );
-
-  const shouldConcatSDXLStylePrompt = useAppSelector(
-    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
-  );
-
   return (
     <Flex
       sx={{
@@ -25,32 +13,6 @@ export default function ParamSDXLPromptArea() {
         gap: 2,
       }}
     >
-      <AnimatePresence>
-        {shouldConcatSDXLStylePrompt && (
-          <Box
-            sx={{
-              position: 'absolute',
-              w: 'full',
-              top: shouldPinParametersPanel ? '119px' : '175px',
-            }}
-          >
-            <SDXLConcatLink />
-          </Box>
-        )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {shouldConcatSDXLStylePrompt && (
-          <Box
-            sx={{
-              position: 'absolute',
-              w: 'full',
-              top: shouldPinParametersPanel ? '263px' : '319px',
-            }}
-          >
-            <SDXLConcatLink />
-          </Box>
-        )}
-      </AnimatePresence>
       <ParamPositiveConditioning />
       <ParamSDXLConcatButton />
       <ParamSDXLPositiveStyleConditioning />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
index d64daae70d5..e9825980816 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
@@ -18,14 +18,7 @@ const sharedConcatLinkStyle: CSSObject = {
 
 export default function SDXLConcatLink() {
   return (
-    <Flex
-      sx={{
-        h: 0.5,
-        placeContent: 'center',
-        gap: 2,
-        flexDirection: 'column',
-      }}
-    >
+    <Flex>
       <Box
         as={motion.div}
         initial={{
@@ -43,7 +36,6 @@ export default function SDXLConcatLink() {
           top: '1px',
           borderTop: 'none',
           borderColor: 'base.400',
-          zIndex: 2,
           ...sharedConcatLinkStyle,
           _dark: {
             borderColor: 'accent.500',

From 8f2a6462863e62c15ac6ea845bf16ab443b2e4ad Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sat, 29 Jul 2023 02:37:59 +1200
Subject: [PATCH 2/2] fix: Lint errors

---
 .../ParamSDXLNegativeStyleConditioning.tsx           | 12 +++---------
 .../ParamSDXLPositiveStyleConditioning.tsx           | 12 +++---------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx
index cd8e1605d0e..e1533bc886c 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx
@@ -21,14 +21,12 @@ import SDXLConcatLink from './SDXLConcatLink';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
-  ({ sdxl, ui }, activeTabName) => {
+  ({ sdxl }, activeTabName) => {
     const { negativeStylePrompt, shouldConcatSDXLStylePrompt } = sdxl;
-    const { shouldPinParametersPanel } = ui;
 
     return {
       prompt: negativeStylePrompt,
       shouldConcatSDXLStylePrompt,
-      shouldPinParametersPanel,
       activeTabName,
     };
   },
@@ -48,12 +46,8 @@ const ParamSDXLNegativeStyleConditioning = () => {
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
 
-  const {
-    prompt,
-    activeTabName,
-    shouldPinParametersPanel,
-    shouldConcatSDXLStylePrompt,
-  } = useAppSelector(promptInputSelector);
+  const { prompt, activeTabName, shouldConcatSDXLStylePrompt } =
+    useAppSelector(promptInputSelector);
 
   const handleChangePrompt = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx
index 7dcf94419e2..fdd29eaeb76 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx
@@ -21,13 +21,11 @@ import SDXLConcatLink from './SDXLConcatLink';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
-  ({ sdxl, ui }, activeTabName) => {
+  ({ sdxl }, activeTabName) => {
     const { positiveStylePrompt, shouldConcatSDXLStylePrompt } = sdxl;
-    const { shouldPinParametersPanel } = ui;
 
     return {
       prompt: positiveStylePrompt,
-      shouldPinParametersPanel,
       shouldConcatSDXLStylePrompt,
       activeTabName,
     };
@@ -48,12 +46,8 @@ const ParamSDXLPositiveStyleConditioning = () => {
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
 
-  const {
-    prompt,
-    activeTabName,
-    shouldPinParametersPanel,
-    shouldConcatSDXLStylePrompt,
-  } = useAppSelector(promptInputSelector);
+  const { prompt, activeTabName, shouldConcatSDXLStylePrompt } =
+    useAppSelector(promptInputSelector);
 
   const handleChangePrompt = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {