Style assistant header, update icons

Nate Butler created

Change summary

assets/icons/maximize.svg                |  5 -
assets/icons/menu.svg                    |  4 -
assets/icons/minimize.svg                |  5 -
assets/icons/quote.svg                   |  4 -
assets/icons/snip.svg                    |  1 
assets/icons/split_message.svg           |  0 
crates/assistant2/src/assistant_panel.rs | 58 ++++++++++++++++++++-----
crates/ui2/src/components/icon.rs        |  6 +
8 files changed, 53 insertions(+), 30 deletions(-)

Detailed changes

assets/icons/maximize.svg 🔗

@@ -1,4 +1 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.5 1.5H13.5M13.5 1.5V5.5M13.5 1.5C12.1332 2.86683 10.3668 4.63317 9 6" stroke="white" stroke-linecap="round"/>
-<path d="M1.5 9.5V13.5M1.5 13.5L6 9M1.5 13.5H5.5" stroke="white" stroke-linecap="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize-2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/></svg>

assets/icons/menu.svg 🔗

@@ -1,3 +1 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="#CCCAC2"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>

assets/icons/minimize.svg 🔗

@@ -1,4 +1 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 6L9 6M9 6L9 2M9 6C10.3668 4.63316 12.1332 2.86683 13.5 1.5" stroke="white" stroke-linecap="round"/>
-<path d="M6 13L6 9M6 9L1.5 13.5M6 9L2 9" stroke="white" stroke-linecap="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize-2"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></svg>

assets/icons/quote.svg 🔗

@@ -1,8 +1 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"

assets/icons/snip.svg 🔗

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>

crates/assistant2/src/assistant_panel.rs 🔗

@@ -54,7 +54,8 @@ use std::{
 };
 use theme::ThemeSettings;
 use ui::{
-    h_stack, prelude::*, v_stack, Button, ButtonLike, Icon, IconButton, IconElement, Label, Tooltip,
+    h_stack, prelude::*, v_stack, Button, ButtonLike, Icon, IconButton, IconElement, Label, TabBar,
+    Tooltip,
 };
 use util::{paths::CONVERSATIONS_DIR, post_inc, ResultExt, TryFutureExt};
 use uuid::Uuid;
@@ -939,7 +940,7 @@ impl AssistantPanel {
                     this.set_active_editor_index(this.prev_active_editor_index, cx);
                 }
             }))
-            .tooltip(|cx| Tooltip::text("History", cx))
+            .tooltip(|cx| Tooltip::text("Conversation History", cx))
     }
 
     fn render_editor_tools(&self, cx: &mut ViewContext<Self>) -> Vec<AnyElement> {
@@ -955,12 +956,13 @@ impl AssistantPanel {
     }
 
     fn render_split_button(cx: &mut ViewContext<Self>) -> impl IntoElement {
-        IconButton::new("split_button", Icon::SplitMessage)
+        IconButton::new("split_button", Icon::Snip)
             .on_click(cx.listener(|this, _event, cx| {
                 if let Some(active_editor) = this.active_editor() {
                     active_editor.update(cx, |editor, cx| editor.split(&Default::default(), cx));
                 }
             }))
+            .icon_size(IconSize::Small)
             .tooltip(|cx| Tooltip::for_action("Split Message", &Split, cx))
     }
 
@@ -971,6 +973,7 @@ impl AssistantPanel {
                     active_editor.update(cx, |editor, cx| editor.assist(&Default::default(), cx));
                 }
             }))
+            .icon_size(IconSize::Small)
             .tooltip(|cx| Tooltip::for_action("Assist", &Assist, cx))
     }
 
@@ -985,6 +988,7 @@ impl AssistantPanel {
                     });
                 }
             }))
+            .icon_size(IconSize::Small)
             .tooltip(|cx| Tooltip::for_action("Quote Seleciton", &QuoteSelection, cx))
     }
 
@@ -993,15 +997,19 @@ impl AssistantPanel {
             .on_click(cx.listener(|this, _event, cx| {
                 this.new_conversation(cx);
             }))
+            .icon_size(IconSize::Small)
             .tooltip(|cx| Tooltip::for_action("New Conversation", &NewConversation, cx))
     }
 
     fn render_zoom_button(&self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let zoomed = self.zoomed;
-        IconButton::new("zoom_button", Icon::MagnifyingGlass)
+        IconButton::new("zoom_button", Icon::Maximize)
             .on_click(cx.listener(|this, _event, cx| {
                 this.toggle_zoom(&ToggleZoom, cx);
             }))
+            .selected(zoomed)
+            .selected_icon(Icon::Minimize)
+            .icon_size(IconSize::Small)
             .tooltip(move |cx| {
                 Tooltip::for_action(if zoomed { "Zoom Out" } else { "Zoom In" }, &ToggleZoom, cx)
             })
@@ -1125,16 +1133,40 @@ impl Render for AssistantPanel {
                 .active_editor()
                 .map(|editor| Label::new(editor.read(cx).title(cx)));
 
-            let mut header = h_stack()
-                .child(Self::render_hamburger_button(cx))
-                .children(title);
+            // let mut header = h_stack()
+            //     .p_1()
+            //     .border_b()
+            //     .border_color(cx.theme().colors().border_variant)
+            //     .bg(cx.theme().colors().toolbar_background)
+            //     .child(div().flex_1());
+
+            let header = TabBar::new("assistant_header")
+                .start_child(
+                    h_stack()
+                        .gap_1()
+                        .child(Self::render_hamburger_button(cx))
+                        .children(title),
+                )
+                .end_child(if self.focus_handle.contains_focused(cx) {
+                    h_stack()
+                        .gap_1()
+                        .children(self.render_editor_tools(cx))
+                        .child(Self::render_plus_button(cx))
+                        .child(self.render_zoom_button(cx))
+                } else {
+                    div()
+                });
 
-            if self.focus_handle.contains_focused(cx) {
-                header = header
-                    .children(self.render_editor_tools(cx))
-                    .child(Self::render_plus_button(cx))
-                    .child(self.render_zoom_button(cx));
-            }
+            // if self.focus_handle.contains_focused(cx) {
+            //     header = header.child(
+            //         div()
+            //             .flex()
+            //             .gap_1()
+            //             .children(self.render_editor_tools(cx))
+            //             .child(Self::render_plus_button(cx))
+            //             .child(self.render_zoom_button(cx)),
+            //     );
+            // }
 
             v_stack()
                 .size_full()

crates/ui2/src/components/icon.rs 🔗

@@ -75,6 +75,7 @@ pub enum Icon {
     MagnifyingGlass,
     MailOpen,
     Maximize,
+    Minimize,
     Menu,
     MessageBubbles,
     Mic,
@@ -88,7 +89,7 @@ pub enum Icon {
     Screen,
     SelectAll,
     Split,
-    SplitMessage,
+    Snip,
     Terminal,
     WholeWord,
     XCircle,
@@ -156,6 +157,7 @@ impl Icon {
             Icon::MagnifyingGlass => "icons/magnifying_glass.svg",
             Icon::MailOpen => "icons/mail-open.svg",
             Icon::Maximize => "icons/maximize.svg",
+            Icon::Minimize => "icons/minimize.svg",
             Icon::Menu => "icons/menu.svg",
             Icon::MessageBubbles => "icons/conversations.svg",
             Icon::Mic => "icons/mic.svg",
@@ -169,7 +171,7 @@ impl Icon {
             Icon::Screen => "icons/desktop.svg",
             Icon::SelectAll => "icons/select-all.svg",
             Icon::Split => "icons/split.svg",
-            Icon::SplitMessage => "icons/split_message.svg",
+            Icon::Snip => "icons/snip.svg",
             Icon::Terminal => "icons/terminal.svg",
             Icon::WholeWord => "icons/word_search.svg",
             Icon::XCircle => "icons/error.svg",