From ebdd90b2357951d9e578f2dbd4afb74c16340fb1 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Fri, 26 Sep 2025 04:57:25 +0800
Subject: [PATCH] feat(SessionsTab): add animation and styling based on topic
 and navbar position

Add motion animation and conditional border styling to SessionsTab component based on topicPosition and navbarPosition settings
---
 .../src/pages/home/Tabs/SessionsTab.tsx       | 52 +++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/renderer/src/pages/home/Tabs/SessionsTab.tsx b/src/renderer/src/pages/home/Tabs/SessionsTab.tsx
index 4ba565b710..8badc76a5a 100644
--- a/src/renderer/src/pages/home/Tabs/SessionsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/SessionsTab.tsx
@@ -1,4 +1,4 @@
-import { Alert, Spinner } from '@heroui/react'
+import { Alert, cn, Spinner } from '@heroui/react'
 import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { AnimatePresence, motion } from 'framer-motion'
@@ -14,6 +14,7 @@ const SessionsTab: FC<SessionsTabProps> = () => {
   const { activeAgentId } = chat
   const { t } = useTranslation()
   const { apiServer } = useSettings()
+  const { topicPosition, navbarPosition } = useSettings()
 
   if (!apiServer.enabled) {
     return (
@@ -25,26 +26,35 @@ const SessionsTab: FC<SessionsTabProps> = () => {
 
   return (
     <AnimatePresence mode="wait">
-      {!activeAgentId ? (
-        <motion.div
-          key="loading"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
-          className="flex h-full flex-col items-center justify-center gap-3">
-          <Spinner size="lg" color="primary" />
-          <motion.p
-            initial={{ opacity: 0, y: 5 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2, duration: 0.3 }}
-            className="text-foreground-500 text-sm">
-            {t('common.loading')}...
-          </motion.p>
-        </motion.div>
-      ) : (
-        <Sessions agentId={activeAgentId} />
-      )}
+      <motion.div
+        initial={{ width: 0, opacity: 0 }}
+        animate={{ width: 'var(--assistants-width)', opacity: 1 }}
+        exit={{ width: 0, opacity: 0 }}
+        transition={{ duration: 0.5, ease: 'easeInOut' }}
+        className={cn(
+          topicPosition === 'right' && navbarPosition === 'top' ? 'rounded-l-2xl border-t border-b border-l' : undefined
+        )}>
+        {!activeAgentId ? (
+          <motion.div
+            key="loading"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="flex h-full flex-col items-center justify-center gap-3">
+            <Spinner size="lg" color="primary" />
+            <motion.p
+              initial={{ opacity: 0, y: 5 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2, duration: 0.3 }}
+              className="text-foreground-500 text-sm">
+              {t('common.loading')}...
+            </motion.p>
+          </motion.div>
+        ) : (
+          <Sessions agentId={activeAgentId} />
+        )}
+      </motion.div>
     </AnimatePresence>
   )
 }