feat(ui): add hover show/hide to appVersion

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,7 +27,22 @@ const InvokeAILogoComponent = () => {
         <Text sx={{ fontSize: 'xl', userSelect: 'none' }}>
           invoke <strong>ai</strong>
         </Text>
-        {appVersion && (
+        <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,
@@ -34,7 +54,9 @@ const InvokeAILogoComponent = () => {
               >
                 {appVersion.version}
               </Text>
+            </motion.div>
           )}
+        </AnimatePresence>
       </Flex>
     </Flex>
   );