feat: enhance AIEntryLayout with entry header and animation

- Added AIEntryHeader component to display entry details dynamically.
- Implemented entry header animation using AnimatePresence for smoother transitions.
- Updated entry content rendering logic to improve visual consistency and user experience.

These changes enhance the layout and interaction of the AI entry components.

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

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

@@ -17,6 +17,7 @@ import { AppLayoutGridContainerProvider } from "~/providers/app-grid-layout-cont
 
 import { AIChatRoot } from "../ai-chat/components/layouts/AIChatRoot"
 import { AIIndicator } from "../app-layout/ai/AISplineButton"
+import { AIEntryHeader } from "../entry-content/components/entry-header"
 import { EntryColumn } from "./index"
 
 const AIEntryLayoutImpl = () => {
@@ -52,17 +53,29 @@ const AIEntryLayoutImpl = () => {
           <div className="relative h-full">
             {/* Entry list - always rendered to prevent animation */}
             <EntryColumn key="entry-list" />
-
+            <AnimatePresence>
+              {realEntryId && (
+                <m.div
+                  className="absolute inset-x-0 top-0 z-10"
+                  initial={{ translateY: "-50px", opacity: 0 }}
+                  animate={{ translateY: 0, opacity: 1 }}
+                  exit={{ translateY: "-50px", opacity: 0 }}
+                  transition={Spring.smooth(0.3)}
+                >
+                  <AIEntryHeader entryId={realEntryId} />
+                </m.div>
+              )}
+            </AnimatePresence>
             {/* Entry content overlay with exit animation */}
-            <AnimatePresence mode="popLayout">
+            <AnimatePresence>
               {realEntryId && (
                 <m.div
                   lcpOptimization
-                  initial={{ y: 50, opacity: 0, scale: 0.98 }}
-                  animate={{ y: 0, opacity: 1, scale: 1 }}
-                  exit={{ y: 50, opacity: 0, scale: 0.98 }}
+                  initial={{ translateY: "50px", opacity: 0, scale: 0.98 }}
+                  animate={{ translateY: 0, opacity: 1, scale: 1 }}
+                  exit={{ translateY: "50px", opacity: 0, scale: 0.98 }}
                   transition={Spring.smooth(0.3)}
-                  className="bg-theme-background absolute inset-0 z-10 border-l"
+                  className="bg-theme-background absolute inset-0 z-[9]"
                 >
                   <EntryContent entryId={realEntryId} className="h-full" />
                 </m.div>

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

@@ -32,7 +32,6 @@ import { COMMAND_ID } from "~/modules/command/commands/id"
 import { ApplyEntryActions } from "../../ApplyEntryActions"
 import { setEntryContentScrollToTop } from "../../atoms"
 import { useEntryContent } from "../../hooks"
-import { AIEntryHeader } from "../entry-header"
 import { getEntryContentLayout } from "../layouts"
 import { SourceContentPanel } from "../SourceContentView"
 import { EntryCommandShortcutRegister } from "./EntryCommandShortcutRegister"
@@ -51,7 +50,6 @@ const EntryContentImpl: Component<EntryContentProps> = ({
   noMedia,
   className,
   compact,
-  classNames,
 }) => {
   const entry = useEntry(entryId, (state) => {
     const { feedId, inboxHandle } = state
@@ -129,11 +127,7 @@ const EntryContentImpl: Component<EntryContentProps> = ({
   return (
     <div className={cn(className, "@container flex flex-col")}>
       <EntryCommandShortcutRegister entryId={entryId} view={view} />
-      <AIEntryHeader
-        entryId={entryId}
-        className={cn("absolute inset-x-0 top-0", classNames?.header)}
-        compact={compact}
-      />
+
       <div className="w-full" ref={setPanelPortalElement} />
 
       <Focusable