mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design(chat): replace internal expand button with floating edge toggle; add ChevronLeft

Browse Source
This commit is contained in:
mawkone
2026-06-12 13:01:36 -07:00
parent 2b569bd55f
commit 6687b79bfd
1 changed files with 36 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
vibn-frontend/components/vibn-chat/chat-panel.tsx
View File

@@ -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>
)}