Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-08 06:19:05 +08:00
Code Issues Actions 3 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
Show Stats 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 { useRuntime } from '@renderer/hooks/useRuntime'
import { useSettings } from '@renderer/hooks/useSettings' import { useSettings } from '@renderer/hooks/useSettings'
import { AnimatePresence, motion } from 'framer-motion' import { AnimatePresence, motion } from 'framer-motion'
@ -14,6 +14,7 @@ const SessionsTab: FC<SessionsTabProps> = () => {
const { activeAgentId } = chat const { activeAgentId } = chat
const { t } = useTranslation() const { t } = useTranslation()
const { apiServer } = useSettings() const { apiServer } = useSettings()
const { topicPosition, navbarPosition } = useSettings()
if (!apiServer.enabled) { if (!apiServer.enabled) {
return ( return (
@ -25,26 +26,35 @@ const SessionsTab: FC<SessionsTabProps> = () => {
return ( return (
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{!activeAgentId ? ( <motion.div
<motion.div initial={{ width: 0, opacity: 0 }}
key="loading" animate={{ width: 'var(--assistants-width)', opacity: 1 }}
initial={{ opacity: 0 }} exit={{ width: 0, opacity: 0 }}
animate={{ opacity: 1 }} transition={{ duration: 0.5, ease: 'easeInOut' }}
exit={{ opacity: 0 }} className={cn(
transition={{ duration: 0.3 }} topicPosition === 'right' && navbarPosition === 'top' ? 'rounded-l-2xl border-t border-b border-l' : undefined
className="flex h-full flex-col items-center justify-center gap-3"> )}>
<Spinner size="lg" color="primary" /> {!activeAgentId ? (
<motion.p <motion.div
initial={{ opacity: 0, y: 5 }} key="loading"
animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0 }}
transition={{ delay: 0.2, duration: 0.3 }} animate={{ opacity: 1 }}
className="text-foreground-500 text-sm"> exit={{ opacity: 0 }}
{t('common.loading')}... transition={{ duration: 0.3 }}
</motion.p> className="flex h-full flex-col items-center justify-center gap-3">
</motion.div> <Spinner size="lg" color="primary" />
) : ( <motion.p
<Sessions agentId={activeAgentId} /> 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> </AnimatePresence>
) )
} }