shelley: Make new conversation button black/white; move drawer button to header on mobile

Philip Zeyliger created 4 months ago

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

Change summary

ui/src/components/ConversationDrawer.tsx | 61 ++++++++++---------------
ui/src/styles.css                        | 12 +++-
2 files changed, 33 insertions(+), 40 deletions(-)

Detailed changes

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">

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;