From 8caf4afb2a9df30e4002315ffb4ce1e4ca682373 Mon Sep 17 00:00:00 2001
From: Philip Zeyliger <philip@bold.dev>
Date: Tue, 6 Jan 2026 21:35:31 -0800
Subject: [PATCH] shelley: Make new conversation button black/white; move
 drawer button to header on mobile

Prompt: make the green new conversation button just black and white in
the top bar. In the conversation drawer, if the drawer is always visible
like on desktop we don't need the second new conversation button. We
still need it on mobile, but it can be smaller and in the header

- Change btn-new from green to black/white (uses text-primary/bg-base)
- Remove full-width New Conversation button from drawer body
- Add small + icon button in drawer header (mobile only, hide-on-desktop)
- Group header action buttons in drawer-header-actions container
---
 ui/src/components/ConversationDrawer.tsx | 61 ++++++++++--------------
 ui/src/styles.css                        | 12 +++--
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/ui/src/components/ConversationDrawer.tsx b/ui/src/components/ConversationDrawer.tsx
index d0e84eabc7a54d7820757a436522018ed08f061a..294ad2c02056785002a16975d44db441b298ea01 100644
--- a/ui/src/components/ConversationDrawer.tsx
+++ b/ui/src/components/ConversationDrawer.tsx
@@ -193,53 +193,40 @@ function ConversationDrawer({
         {/* Header */}
         <div className="drawer-header">
           <h2 className="drawer-title">{showArchived ? "Archived" : "Conversations"}</h2>
-          <button
-            onClick={onClose}
-            className="btn-icon hide-on-desktop"
-            aria-label="Close conversations"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-
-        {/* New conversation button */}
-        {!showArchived && (
-          <div className="drawer-section">
+          <div className="drawer-header-actions">
+            {/* New conversation button - mobile only */}
+            {!showArchived && (
+              <button
+                onClick={onNewConversation}
+                className="btn-icon hide-on-desktop"
+                aria-label="New conversation"
+              >
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 4v16m8-8H4"
+                  />
+                </svg>
+              </button>
+            )}
             <button
-              onClick={onNewConversation}
-              className="btn-primary"
-              style={{
-                width: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "0.5rem",
-              }}
+              onClick={onClose}
+              className="btn-icon hide-on-desktop"
+              aria-label="Close conversations"
             >
-              <svg
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                style={{ width: "1rem", height: "1rem" }}
-              >
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M12 4v16m8-8H4"
+                  d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
-              <span>New Conversation</span>
             </button>
           </div>
-        )}
+        </div>
 
         {/* Conversations list */}
         <div className="drawer-body scrollable">
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 22cb0aeea3783fe1521d9548908afb3d3548ee71..a7955e6b5eb42e191c53f67be37dcde33e62d515 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -365,8 +365,8 @@ button {
 .btn-new {
   width: 2rem;
   height: 2rem;
-  background: var(--green-600);
-  color: white;
+  background: var(--text-primary);
+  color: var(--bg-base);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -375,7 +375,7 @@ button {
 }
 
 .btn-new:hover {
-  background: var(--green-700);
+  background: var(--text-secondary);
 }
 
 /* Header */
@@ -452,6 +452,12 @@ button {
   border-bottom: 1px solid var(--border);
 }
 
+.drawer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .drawer-title {
   font-size: 1.125rem;
   font-weight: 600;