From 2101b2e1c77484fb17be8f9893002233b36ae7a4 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 28 Nov 2025 20:06:37 -0800
Subject: [PATCH] fix sidebar image animate out

---
 .../features/sidebar/components/sidebar.tsx   | 126 +++++++++---------
 1 file changed, 60 insertions(+), 66 deletions(-)

diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 3a4c4f589..b85080ef2 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -59,6 +59,7 @@ export const Sidebar = () => {
 
     const { sidebarItems } = useGeneralSettings();
     const { windowBarStyle } = useWindowSettings();
+    const showImage = useAppStore((state) => state.sidebar.image);
 
     const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
         if (!sidebarItems) return [];
@@ -131,17 +132,18 @@ export const Sidebar = () => {
                     )}
                 </Accordion>
             </ScrollArea>
-            <motion.div className={styles.serverSelectorWrapper} layout>
-                <ServerSelector />
-            </motion.div>
-            <SidebarImage />
+            <AnimatePresence initial={false} mode="popLayout">
+                <motion.div className={styles.serverSelectorWrapper} key="server-selector" layout>
+                    <ServerSelector />
+                </motion.div>
+                {showImage && <SidebarImage />}
+            </AnimatePresence>
         </div>
     );
 };
 
 const SidebarImage = () => {
     const { t } = useTranslation();
-    const showImage = useAppStore((state) => state.sidebar.image);
     const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
     const { setSideBar } = useAppStoreActions();
     const currentSong = usePlayerSong();
@@ -176,66 +178,58 @@ const SidebarImage = () => {
     };
 
     return (
-        <AnimatePresence initial={false} mode="popLayout">
-            {showImage && (
-                <motion.div
-                    animate={{ opacity: 1, y: 0 }}
-                    className={styles.imageContainer}
-                    exit={{ opacity: 0, y: 200 }}
-                    initial={{ opacity: 0, y: 200 }}
-                    key="sidebar-image"
-                    onClick={expandFullScreenPlayer}
-                    onContextMenu={handleToggleContextMenu}
-                    role="button"
-                    style={
-                        {
-                            '--sidebar-image-height': leftWidth,
-                        } as CSSProperties
-                    }
-                    transition={{ duration: 0.3, ease: 'easeInOut' }}
-                >
-                    <Tooltip
-                        label={t('player.toggleFullscreenPlayer', {
-                            postProcess: 'sentenceCase',
-                        })}
-                        openDelay={500}
-                    >
-                        {upsizedImageUrl ? (
-                            <img
-                                className={styles.sidebarImage}
-                                loading="eager"
-                                src={upsizedImageUrl}
-                            />
-                        ) : (
-                            <ImageUnloader />
-                        )}
-                    </Tooltip>
-                    <ActionIcon
-                        icon="arrowDownS"
-                        iconProps={{
-                            size: 'lg',
-                        }}
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            setSideBar({ image: false });
-                        }}
-                        opacity={0.8}
-                        radius="md"
-                        style={{
-                            cursor: 'default',
-                            position: 'absolute',
-                            right: '1rem',
-                            top: '1rem',
-                        }}
-                        tooltip={{
-                            label: t('common.collapse', {
-                                postProcess: 'titleCase',
-                            }),
-                            openDelay: 500,
-                        }}
-                    />
-                </motion.div>
-            )}
-        </AnimatePresence>
+        <motion.div
+            animate={{ opacity: 1, y: 0 }}
+            className={styles.imageContainer}
+            exit={{ opacity: 0, y: 200 }}
+            initial={{ opacity: 0, y: 200 }}
+            key="sidebar-image"
+            onClick={expandFullScreenPlayer}
+            onContextMenu={handleToggleContextMenu}
+            role="button"
+            style={
+                {
+                    '--sidebar-image-height': leftWidth,
+                } as CSSProperties
+            }
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
+        >
+            <Tooltip
+                label={t('player.toggleFullscreenPlayer', {
+                    postProcess: 'sentenceCase',
+                })}
+                openDelay={500}
+            >
+                {upsizedImageUrl ? (
+                    <img className={styles.sidebarImage} loading="eager" src={upsizedImageUrl} />
+                ) : (
+                    <ImageUnloader />
+                )}
+            </Tooltip>
+            <ActionIcon
+                icon="arrowDownS"
+                iconProps={{
+                    size: 'lg',
+                }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    setSideBar({ image: false });
+                }}
+                opacity={0.8}
+                radius="md"
+                style={{
+                    cursor: 'default',
+                    position: 'absolute',
+                    right: '1rem',
+                    top: '1rem',
+                }}
+                tooltip={{
+                    label: t('common.collapse', {
+                        postProcess: 'titleCase',
+                    }),
+                    openDelay: 500,
+                }}
+            />
+        </motion.div>
     );
 };