feat: adjust styles

This commit is contained in:
Henry Li
2026-01-22 11:42:25 +08:00
parent 54710960cb
commit 93842e81a4
2 changed files with 13 additions and 6 deletions

View File

@@ -163,7 +163,7 @@ export default function ChatPage() {
</div>
)}
<div className="absolute -top-4 right-0 left-0 z-0">
<div className="absolute right-0 bottom-0 left-0 px-4">
<div className="absolute right-0 bottom-0 left-0">
<TodoList
className="bg-background/5"
todos={thread.values.todos ?? []}

View File

@@ -1,4 +1,4 @@
import { ChevronUpIcon } from "lucide-react";
import { ChevronUpIcon, ListTodoIcon } from "lucide-react";
import type { Todo } from "@/core/todos";
import { cn } from "@/lib/utils";
@@ -26,18 +26,25 @@ export function TodoList({
return (
<div
className={cn(
"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",
"flex h-fit w-full origin-bottom translate-y-4 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 transition-all duration-300 ease-out"
className={cn(
"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?.();
}}
>
<div className="text-muted-foreground">To-dos</div>
<div className="text-muted-foreground">
<div className="flex items-center justify-center gap-2">
<ListTodoIcon className="size-4" />
<div>To-dos</div>
</div>
</div>
<div>
<ChevronUpIcon
className={cn(
@@ -50,7 +57,7 @@ export function TodoList({
<main
className={cn(
"bg-accent flex grow px-2 transition-all duration-300 ease-out",
collapsed ? "h-0" : "h-28",
collapsed ? "h-0 pb-3" : "h-28 pb-4",
)}
>
<QueueList className="bg-background mt-0 w-full rounded-t-xl">