feat: Add Concat Link Animation

Might remove the lines. Just pushing to save changes for now.

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx

@@ -148,7 +148,7 @@ const ParamPositiveConditioning = () => {
         <Box
           sx={{
             position: 'absolute',
-            top: shouldPinParametersPanel ? 4 : 0,
+            top: shouldPinParametersPanel ? 5 : 0,
             insetInlineEnd: 0,
           }}
         >

invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx

@@ -8,10 +8,6 @@ export default function ParamPromptArea() {
       sx={{
         flexDirection: 'column',
         gap: 2,
-        p: 2,
-        borderRadius: 4,
-        bg: 'base.100',
-        _dark: { bg: 'base.850' },
       }}
     >
       <ParamPositiveConditioning />

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx

@@ -0,0 +1,43 @@
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { FaLink } from 'react-icons/fa';
+import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice';
+
+export default function ParamSDXLConcatButton() {
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+
+  const shouldPinParametersPanel = useAppSelector(
+    (state: RootState) => state.ui.shouldPinParametersPanel
+  );
+
+  const dispatch = useAppDispatch();
+
+  const handleShouldConcatPromptChange = () => {
+    dispatch(setShouldConcatSDXLStylePrompt(!shouldConcatSDXLStylePrompt));
+  };
+
+  return (
+    <IAIIconButton
+      aria-label="Concat"
+      tooltip="Concatenates Basic Prompt with Style (Recommended)"
+      variant="outline"
+      isChecked={shouldConcatSDXLStylePrompt}
+      onClick={handleShouldConcatPromptChange}
+      icon={<FaLink />}
+      size="xs"
+      sx={{
+        position: 'absolute',
+        insetInlineEnd: 1,
+        top: shouldPinParametersPanel ? 12 : 20,
+        border: 'none',
+        color: 'base.500',
+        _hover: {
+          bg: 'none',
+        },
+      }}
+    ></IAIIconButton>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx

@@ -1,33 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISwitch from 'common/components/IAISwitch';
-import { ChangeEvent } from 'react';
-import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice';
-
-export default function ParamSDXLConcatPrompt() {
-  const shouldConcatSDXLStylePrompt = useAppSelector(
-    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
-  );
-
-  const dispatch = useAppDispatch();
-
-  const handleShouldConcatPromptChange = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(setShouldConcatSDXLStylePrompt(e.target.checked));
-  };
-
-  return (
-    <Box
-      sx={{
-        px: 2,
-      }}
-    >
-      <IAISwitch
-        label="Concat Style Prompt"
-        tooltip="Concatenates Basic Prompt with Style (Recommended)"
-        isChecked={shouldConcatSDXLStylePrompt}
-        onChange={handleShouldConcatPromptChange}
-      />
-    </Box>
-  );
-}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx

@@ -1,27 +1,48 @@
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
 import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
-import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt';
+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
+  );
+
   return (
     <Flex
       sx={{
         flexDirection: 'column',
         gap: 2,
-        p: 2,
-        borderRadius: 4,
-        bg: 'base.100',
-        _dark: { bg: 'base.850' },
       }}
     >
+      <Box
+        sx={{
+          position: 'absolute',
+          w: 'full',
+          top: shouldPinParametersPanel ? '131px' : '187px',
+        }}
+      >
+        <SDXLConcatLink />
+      </Box>
+      <Box
+        sx={{
+          position: 'absolute',
+          w: 'full',
+          top: shouldPinParametersPanel ? '275px' : '331px',
+        }}
+      >
+        <SDXLConcatLink />
+      </Box>
       <ParamPositiveConditioning />
+      <ParamSDXLConcatButton />
       <ParamSDXLPositiveStyleConditioning />
       <ParamNegativeConditioning />
       <ParamSDXLNegativeStyleConditioning />
-      <ParamSDXLConcatPrompt />
     </Flex>
   );
 }

invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx

@@ -0,0 +1,72 @@
+import { Box, Flex } from '@chakra-ui/react';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { motion } from 'framer-motion';
+import { FaLink } from 'react-icons/fa';
+
+export default function SDXLConcatLink() {
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+  return (
+    shouldConcatSDXLStylePrompt && (
+      <Flex
+        sx={{
+          h: 0.5,
+          placeContent: 'center',
+          gap: 2,
+          px: 2,
+        }}
+      >
+        <Box
+          as={motion.div}
+          initial={{
+            scaleX: 0,
+          }}
+          animate={{ scaleX: 1, transition: { duration: 0.3 } }}
+          sx={{
+            bg: 'accent.300',
+            h: 0.5,
+            w: 'full',
+            borderRadius: 9999,
+            transformOrigin: 'right',
+            _dark: {
+              bg: 'accent.500',
+            },
+          }}
+        />
+        <Box
+          as={motion.div}
+          initial={{
+            opacity: 0,
+          }}
+          animate={{
+            opacity: 1,
+            transition: { duration: 0.3 },
+          }}
+          zIndex={2}
+          mt={-1.5}
+        >
+          <FaLink color="var(--invokeai-colors-accent-400)" />
+        </Box>
+        <Box
+          as={motion.div}
+          initial={{
+            scaleX: 0,
+          }}
+          animate={{ scaleX: 1, transition: { duration: 0.3 } }}
+          sx={{
+            bg: 'accent.300',
+            h: 0.5,
+            w: 'full',
+            borderRadius: 9999,
+            transformOrigin: 'left',
+            _dark: {
+              bg: 'accent.500',
+            },
+          }}
+        />
+      </Flex>
+    )
+  );
+}