From e541f93bdec54f953c68f60fd557b614f963c599 Mon Sep 17 00:00:00 2001
From: bracesproul <braceasproul@gmail.com>
Date: Thu, 6 Mar 2025 16:05:58 -0800
Subject: [PATCH] make hella smooth

---
 src/components/thread/history/index.tsx |  1 -
 src/components/thread/index.tsx         | 36 ++++++++++++++++---------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/thread/history/index.tsx b/src/components/thread/history/index.tsx
index 7d0fbec..cb23a7b 100644
--- a/src/components/thread/history/index.tsx
+++ b/src/components/thread/history/index.tsx
@@ -12,7 +12,6 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
-import { cn } from "@/lib/utils";
 import { PanelRightOpen } from "lucide-react";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
 
diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx
index cadecf5..2107630 100644
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -211,7 +211,7 @@ export function Thread() {
         }
       >
         {!chatStarted && (
-          <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
+          <div className="absolute top-0 left-0 w-full flex items-center justify-between gap-3 p-2 pl-4 z-10">
             {(!chatHistoryOpen || !isLargeScreen) && (
               <Button
                 className="hover:bg-gray-100"
@@ -225,25 +225,35 @@ export function Thread() {
         )}
         {chatStarted && (
           <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <div className="flex items-center justify-start gap-2">
-              {(!chatHistoryOpen || !isLargeScreen) && (
-                <Button
-                  className="hover:bg-gray-100"
-                  variant="ghost"
-                  onClick={() => setChatHistoryOpen((p) => !p)}
-                >
-                  <PanelRightOpen />
-                </Button>
-              )}
-              <button
+            <div className="flex items-center justify-start gap-2 relative">
+              <div className="absolute left-0 z-10">
+                {(!chatHistoryOpen || !isLargeScreen) && (
+                  <Button
+                    className="hover:bg-gray-100"
+                    variant="ghost"
+                    onClick={() => setChatHistoryOpen((p) => !p)}
+                  >
+                    <PanelRightOpen />
+                  </Button>
+                )}
+              </div>
+              <motion.button
                 className="flex gap-2 items-center cursor-pointer"
                 onClick={() => setThreadId(null)}
+                animate={{
+                  marginLeft: !chatHistoryOpen ? 48 : 0,
+                }}
+                transition={{
+                  type: "spring",
+                  stiffness: 300,
+                  damping: 30,
+                }}
               >
                 <LangGraphLogoSVG width={32} height={32} />
                 <span className="text-xl font-semibold tracking-tight">
                   LangGraph Chat
                 </span>
-              </button>
+              </motion.button>
             </div>
 
             <TooltipIconButton