feat: bring back the deer

frontend/src/app/workspace/chats/[thread_id]/layout.tsx

@@ -1,5 +1,10 @@
 "use client";
 
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { useMemo } from "react";
+
+import { FlickeringGrid } from "@/components/ui/flickering-grid";
 import { ArtifactsProvider } from "@/components/workspace/artifacts";
 
 export default function ChatLayout({
@@ -7,5 +12,35 @@ export default function ChatLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <ArtifactsProvider>{children}</ArtifactsProvider>;
+  const pathname = usePathname();
+  const isNewThread = useMemo(() => {
+    return pathname === "/workspace/chats/new";
+  }, [pathname]);
+  const { theme, systemTheme } = useTheme();
+  const currentTheme = theme === "system" ? systemTheme : theme;
+  return (
+    <ArtifactsProvider>
+      {isNewThread && (
+        <>
+          <FlickeringGrid
+            className="absolute inset-0 z-0 translate-y-[2vh] mask-center mask-no-repeat"
+            squareSize={4}
+            gridGap={4}
+            color={currentTheme === "dark" ? "#60A5FA" : "#444"}
+            maxOpacity={currentTheme === "dark" ? 0.04 : 0.035}
+            flickerChance={0.1}
+          />
+          <FlickeringGrid
+            className="absolute inset-0 z-0 translate-y-[2vh] mask-[url(/images/deer.svg)] mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]"
+            squareSize={4}
+            gridGap={4}
+            color={currentTheme === "dark" ? "#60A5FA" : "#444"}
+            maxOpacity={currentTheme === "dark" ? 0.15 : 0.13}
+            flickerChance={0.12}
+          />
+        </>
+      )}
+      {children}
+    </ArtifactsProvider>
+  );
 }

frontend/src/app/workspace/chats/[thread_id]/page.tsx

@@ -101,7 +101,14 @@ export default function ChatPage() {
           minSize={artifactsOpen ? 30 : 100}
         >
           <div className="relative flex size-full min-h-0 justify-between">
-            <header className="bg-background/80 absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4 backdrop-blur">
+            <header
+              className={cn(
+                "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4",
+                isNewThread
+                  ? "bg-background/0 backdrop-blur-none"
+                  : "bg-background/80 backdrop-blur",
+              )}
+            >
               <div className="flex w-full items-center text-sm font-medium">
                 {title !== "Untitled" && (
                   <ThreadTitle threadId={threadId} threadTitle={title} />
@@ -144,14 +151,14 @@ export default function ChatPage() {
                 >
                   <div
                     className={cn(
-                      "absolute right-0 bottom-[148px] left-0 flex",
+                      "absolute right-0 bottom-[136px] left-0 flex",
                       isNewThread ? "" : "pointer-events-none opacity-0",
                     )}
                   >
                     <Welcome />
                   </div>
                   <InputBox
-                    className={cn("w-full")}
+                    className={cn("bg-background/5 w-full")}
                     autoFocus={isNewThread}
                     status={thread.isLoading ? "streaming" : "ready"}
                     context={settings.context}