From 6687b79bfd95f5ce4d19d3617b7adbba5a13e85e Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 13:01:36 -0700
Subject: [PATCH] design(chat): replace internal expand button with floating
 edge toggle; add ChevronLeft

---
 .../components/vibn-chat/chat-panel.tsx       | 88 ++++++++-----------
 1 file changed, 36 insertions(+), 52 deletions(-)

diff --git a/vibn-frontend/components/vibn-chat/chat-panel.tsx b/vibn-frontend/components/vibn-chat/chat-panel.tsx
index 35ef185a..9f96cd34 100644
--- a/vibn-frontend/components/vibn-chat/chat-panel.tsx
+++ b/vibn-frontend/components/vibn-chat/chat-panel.tsx
@@ -24,6 +24,7 @@ import {
   Square,
   MousePointerClick,
   Paperclip,
+  ChevronLeft,
 } from "lucide-react";
 import { ProjectIconRail } from "@/components/project/project-icon-rail";
 import {
@@ -2512,7 +2513,7 @@ export function ChatPanel({
                 style={{
                   width: isChatMinimized ? 52 : 380,
                   flexShrink: 0,
-                  borderRight: "1px solid #e8e4dc",
+                  borderRight: "1px solid #e4e4e7",
                   background: "#fff",
                   display: "flex",
                   flexDirection: "column",
@@ -2524,6 +2525,39 @@ export function ChatPanel({
                   zIndex: 40, // High z-index to pop over the right panel
                 }}
               >
+                <div
+                  style={{
+                    position: "absolute",
+                    zIndex: 50,
+                    right: -12,
+                    top: 12,
+                  }}
+                >
+                  <button
+                    onClick={() => setIsChatMinimized(!isChatMinimized)}
+                    style={{
+                      background: "#fff",
+                      border: "1px solid #e4e4e7",
+                      width: 24,
+                      height: 24,
+                      borderRadius: "50%",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      cursor: "pointer",
+                      color: "#a1a1aa",
+                      boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+                    }}
+                    title={isChatMinimized ? "Expand Chat" : "Minimize Chat"}
+                  >
+                    {isChatMinimized ? (
+                      <ChevronRight size={14} />
+                    ) : (
+                      <ChevronLeft size={14} />
+                    )}
+                  </button>
+                </div>
+
                 {isChatMinimized ? (
                   <div
                     style={{
@@ -2533,26 +2567,7 @@ export function ChatPanel({
                       alignItems: "center",
                       paddingTop: 16,
                     }}
-                  >
-                    <button
-                      onClick={() => setIsChatMinimized(false)}
-                      style={{
-                        background: "#f4f4f5",
-                        border: "1px solid #e4e4e7",
-                        width: 32,
-                        height: 32,
-                        borderRadius: 8,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        cursor: "pointer",
-                        color: "#52525b",
-                      }}
-                      title="Open Vibn AI Chat"
-                    >
-                      <MessageSquare size={16} />
-                    </button>
-                  </div>
+                  ></div>
                 ) : (
                   <div
                     style={{
@@ -2562,37 +2577,6 @@ export function ChatPanel({
                       overflow: "hidden",
                     }}
                   >
-                    <div
-                      style={{
-                        position: "relative",
-                        width: "100%",
-                        height: 0,
-                      }}
-                    >
-                      <button
-                        onClick={() => setIsChatMinimized(true)}
-                        style={{
-                          position: "absolute",
-                          zIndex: 50,
-                          right: -12,
-                          top: 12,
-                          background: "#fff",
-                          border: "1px solid #e8e4dc",
-                          width: 24,
-                          height: 24,
-                          borderRadius: "50%",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          cursor: "pointer",
-                          color: "#a1a1aa",
-                          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
-                        }}
-                        title="Minimize Chat"
-                      >
-                        <ChevronRight size={14} />
-                      </button>
-                    </div>
                     {structuralChatBody}
                   </div>
                 )}