ouyang/cherry-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SessionsTab): add animation and styling based on topic and navbar position

Browse Source 
Add motion animation and conditional border styling to SessionsTab component based on topicPosition and navbarPosition settings
This commit is contained in:
icarus
2025-09-26 04:57:25 +08:00
parent 5c8e06ed94
commit ebdd90b235
1 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/renderer/src/pages/home/Tabs/SessionsTab.tsx
View File

@@ -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>
)
}