refactor: streamline animation handling and improve layout responsiveness

- Replaced custom spring transition settings with predefined Spring presets for smoother animations in AIEntryLayout.
- Removed unused animation logic and imports in EntryContent to simplify the component structure.
- Enhanced ArticleLayout's responsiveness by adjusting padding for better layout on smaller screens.

These changes collectively improve code maintainability and user interface responsiveness.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/entry-column/AIEntryLayout.tsx

@@ -1,3 +1,4 @@
+import { Spring } from "@follow/components/constants/spring.js"
 import { Button } from "@follow/components/ui/button/index.js"
 import { PanelSplitter } from "@follow/components/ui/divider/index.js"
 import { defaultUISettings } from "@follow/shared/settings/defaults"
@@ -144,12 +145,7 @@ const AIEntryLayoutImpl = () => {
                   initial={{ y: "100%" }}
                   animate={{ y: 0 }}
                   exit={{ y: "100%" }}
-                  transition={{
-                    type: "spring",
-                    damping: 30,
-                    stiffness: 400,
-                    duration: 0.3,
-                  }}
+                  transition={Spring.presets.smooth}
                   className="bg-theme-background absolute inset-0 z-10 border-l"
                 >
                   {/* Scroll hint indicator */}

apps/desktop/layer/renderer/src/modules/entry-content/components/entry-content/EntryContent.ai.tsx

@@ -1,4 +1,3 @@
-import { Spring } from "@follow/components/constants/spring.js"
 import { MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { RootPortal } from "@follow/components/ui/portal/index.js"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
@@ -9,11 +8,10 @@ import { useEntry } from "@follow/store/entry/hooks"
 import { useFeedById } from "@follow/store/feed/hooks"
 import { useIsInbox } from "@follow/store/inbox/hooks"
 import { thenable } from "@follow/utils"
-import { nextFrame, stopPropagation } from "@follow/utils/dom"
+import { stopPropagation } from "@follow/utils/dom"
 import { EventBus } from "@follow/utils/event-bus"
 import { clsx, cn } from "@follow/utils/utils"
-import type { JSAnimation, Variants } from "motion/react"
-import { m, useAnimationControls } from "motion/react"
+import type { JSAnimation } from "motion/react"
 import * as React from "react"
 import { memo, useEffect, useRef, useState } from "react"
 
@@ -40,12 +38,6 @@ import { EntryNoContent } from "./EntryNoContent"
 import { EntryScrollingAndNavigationHandler } from "./EntryScrollingAndNavigationHandler.js"
 import type { EntryContentProps } from "./types"
 
-const pageMotionVariants = {
-  initial: { opacity: 0, y: 25 },
-  animate: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: 25, transition: { duration: 0 } },
-} satisfies Variants
-
 const EntryContentImpl: Component<EntryContentProps> = ({
   entryId,
   noMedia,
@@ -78,21 +70,7 @@ const EntryContentImpl: Component<EntryContentProps> = ({
 
   const [panelPortalElement, setPanelPortalElement] = useState<HTMLDivElement | null>(null)
 
-  const animationController = useAnimationControls()
-  const prevEntryId = useRef<string | undefined>(undefined)
   const scrollAnimationRef = useRef<JSAnimation<any> | null>(null)
-  useEffect(() => {
-    if (prevEntryId.current !== entryId) {
-      scrollAnimationRef.current?.stop()
-      nextFrame(() => {
-        scrollerRef.current?.scrollTo({ top: 0 })
-      })
-      animationController.start(pageMotionVariants.exit).then(() => {
-        animationController.start(pageMotionVariants.animate)
-      })
-      prevEntryId.current = entryId
-    }
-  }, [animationController, entryId])
 
   const isInHasTimelineView = ![
     FeedViewType.Pictures,
@@ -138,12 +116,7 @@ const EntryContentImpl: Component<EntryContentProps> = ({
         <EntryTimelineSidebar entryId={entryId} />
         <EntryScrollArea scrollerRef={scrollerRef}>
           {/* Indicator for the entry */}
-          <m.div
-            initial={pageMotionVariants.initial}
-            animate={animationController}
-            transition={Spring.presets.bouncy}
-            className="select-text"
-          >
+          <div className="select-text">
             {!isZenMode && isInHasTimelineView && !isInPeekModal && (
               <>
                 <div className="absolute inset-y-0 left-0 flex w-12 items-center justify-center opacity-0 duration-200 hover:opacity-100">
@@ -208,7 +181,7 @@ const EntryContentImpl: Component<EntryContentProps> = ({
                 />
               )}
             </article>
-          </m.div>
+          </div>
         </EntryScrollArea>
         <SourceContentPanel src={safeUrl ?? "#"} />
       </Focusable>

apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/ArticleLayout.tsx

@@ -72,7 +72,7 @@ export const ArticleLayout: React.FC<ArticleLayoutProps> = ({
   if (!entry) return null
 
   return (
-    <div className={cn(readableContentMaxWidthClassName, "mx-auto")}>
+    <div className={cn(readableContentMaxWidthClassName, "@[500px]:px-4 mx-auto")}>
       <EntryTitle entryId={entryId} compact={compact} />
 
       <WrappedElementProvider boundingDetection>