feat: add animations

frontend/src/components/workspace/input-box.tsx

@@ -35,7 +35,6 @@ export function InputBox({
   autoFocus,
   status = "ready",
   context,
-  extraHeader,
   onContextChange,
   onSubmit,
   onStop,
@@ -104,12 +103,7 @@ export function InputBox({
       onSubmit={handleSubmit}
       {...props}
     >
-      {extraHeader && (
-        <div className="absolute top-0 right-0 left-0 z-100">
-          <div className="absolute right-0 bottom-0 left-0">{extraHeader}</div>
-        </div>
-      )}
-      <PromptInputBody>
+      <PromptInputBody className="absolute top-0 right-0 left-0 z-3">
         <PromptInputTextarea
           className={cn("size-full")}
           placeholder={t.inputBox.placeholder}

frontend/src/components/workspace/todo-list.tsx

@@ -14,22 +14,25 @@ export function TodoList({
   className,
   todos,
   collapsed = false,
+  hidden = false,
   onToggle,
 }: {
   className?: string;
   todos: Todo[];
   collapsed?: boolean;
+  hidden?: boolean;
   onToggle?: () => void;
 }) {
   return (
     <div
       className={cn(
-        "flex h-fit w-full flex-col overflow-hidden rounded-t-xl border bg-white backdrop-blur-sm",
+        "flex h-fit w-full origin-bottom flex-col overflow-hidden rounded-t-xl border border-b-0 bg-white backdrop-blur-sm transition-all duration-200 ease-out",
+        hidden ? "pointer-events-none translate-y-8 opacity-0" : "",
         className,
       )}
     >
       <header
-        className="bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm"
+        className="bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm transition-all duration-300 ease-out"
         onClick={() => {
           onToggle?.();
         }}