Animate activity song change

src/renderer/features/users/components/user-activity-item.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Avatar, Group, Indicator, Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion, Variants } from 'framer-motion';
 import { IoIosPause } from 'react-icons/io';
 import { RiPlayFill, RiServerLine, RiUserLine } from 'react-icons/ri';
 import { generatePath } from 'react-router';
@@ -57,6 +57,8 @@ const ItemInfoContainer = styled.div`
   grid-area: info;
 `;
 
+const MotionStack = motion(Stack);
+
 export const UserActivityItem = ({ user }: UserActivityItemProps) => {
   const { data: serverMap } = useServerMap();
   const [opened, { close, open }] = useDisclosure(false);
@@ -72,9 +74,27 @@ export const UserActivityItem = ({ user }: UserActivityItemProps) => {
   const status = user?.activity?.status;
   const albumArtists = user?.activity?.song?.albumArtists;
 
-  console.log('serverMap', serverMap);
+  const infoVariants: Variants = {
-
+    animate: {
-  console.log('serverId', serverId);
+      opacity: 1,
+      transition: {
+        duration: 0.2,
+      },
+      x: 0,
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: 0.2,
+        ease: 'easeInOut',
+      },
+      x: 10,
+    },
+    initial: {
+      opacity: 0,
+      x: -10,
+    },
+  };
 
   return (
     <ActivityContainer>
@@ -113,9 +133,18 @@ export const UserActivityItem = ({ user }: UserActivityItemProps) => {
         </ItemImageContainer>
         <ItemInfoContainer>
           <Group noWrap position="apart">
-            <Stack spacing={0} sx={{ lineHeight: 1, maxWidth: '80%' }}>
+            <AnimatePresence exitBeforeEnter initial={false}>
-              <Text overflow="hidden" size="sm">
+              <MotionStack
-                {songId ? songName : 'Idle...'}
+                key={`activity-user-${user?.id}-${songId}`}
+                animate="animate"
+                exit="exit"
+                initial="initial"
+                spacing={0}
+                sx={{ lineHeight: 1, maxWidth: '80%' }}
+                variants={infoVariants}
+              >
+                <Text $secondary={!songId} overflow="hidden" size="sm">
+                  {songId ? songName : 'Not Playing'}
                 </Text>
                 <Text $secondary overflow="hidden" size="xs">
                   {albumArtists?.length ? (
@@ -131,9 +160,12 @@ export const UserActivityItem = ({ user }: UserActivityItemProps) => {
                           overflow="hidden"
                           size="xs"
                           sx={{ width: 'fit-content' }}
-                        to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+                          to={generatePath(
+                            AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+                            {
                               albumArtistId: artist.id,
-                        })}
+                            }
+                          )}
                         >
                           {artist.name}
                         </Text>
@@ -144,12 +176,11 @@ export const UserActivityItem = ({ user }: UserActivityItemProps) => {
                   )}
                 </Text>
                 {albumId ? (
+                  <Text $secondary overflow="hidden" size="xs">
                     <Text
                       $link
                       $secondary
                       component={Link}
-                  overflow="hidden"
-                  size="xs"
                       sx={{ width: 'fit-content' }}
                       to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
                         albumId,
@@ -157,12 +188,14 @@ export const UserActivityItem = ({ user }: UserActivityItemProps) => {
                     >
                       {albumName}
                     </Text>
+                  </Text>
                 ) : (
                   <Text $secondary overflow="hidden" size="xs">
                     —
                   </Text>
                 )}
-            </Stack>
+              </MotionStack>
+            </AnimatePresence>
             <Group>
               {status === 'playing' ? (
                 <RiPlayFill color="var(--main-fg)" size={15} />