From 078a829b3a0b5f522d7085f146bd6ef5eb0f99a5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 8 Jul 2023 19:55:19 +1000
Subject: [PATCH] feat(ui): add hover show/hide to appVersion

---
 .../components/InvokeAILogoComponent.tsx      | 50 +++++++++++++------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
index c9d258c5a0..71a711386f 100644
--- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
+++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
@@ -1,12 +1,17 @@
 import { Flex, Image, Text } from '@chakra-ui/react';
 import InvokeAILogoImage from 'assets/images/logo.png';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRef } from 'react';
+import { useHoverDirty } from 'react-use';
 import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
 
 const InvokeAILogoComponent = () => {
   const { data: appVersion } = useGetAppVersionQuery();
+  const ref = useRef(null);
+  const isHovered = useHoverDirty(ref);
 
   return (
-    <Flex alignItems="center" gap={3} ps={1}>
+    <Flex alignItems="center" gap={3} ps={1} ref={ref}>
       <Image
         src={InvokeAILogoImage}
         alt="invoke-ai-logo"
@@ -22,19 +27,36 @@ const InvokeAILogoComponent = () => {
         <Text sx={{ fontSize: 'xl', userSelect: 'none' }}>
           invoke <strong>ai</strong>
         </Text>
-        {appVersion && (
-          <Text
-            sx={{
-              fontWeight: 600,
-              marginTop: 1,
-              color: 'base.300',
-              fontSize: 14,
-            }}
-            variant="subtext"
-          >
-            {appVersion.version}
-          </Text>
-        )}
+        <AnimatePresence>
+          {isHovered && appVersion && (
+            <motion.div
+              key="statusText"
+              initial={{
+                opacity: 0,
+              }}
+              animate={{
+                opacity: 1,
+                transition: { duration: 0.15 },
+              }}
+              exit={{
+                opacity: 0,
+                transition: { delay: 0.8 },
+              }}
+            >
+              <Text
+                sx={{
+                  fontWeight: 600,
+                  marginTop: 1,
+                  color: 'base.300',
+                  fontSize: 14,
+                }}
+                variant="subtext"
+              >
+                {appVersion.version}
+              </Text>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </Flex>
     </Flex>
   );