From 039bbbdae8261bca58ffb449cf6dbb8960596ed1 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <reyakov@proton.me>
Date: Sat, 10 Oct 2026 07:26:43 +0700
Subject: [PATCH] Add icon position support to buttons

---
 crates/ui/src/button.rs                    | 47 ++++++++++++++++++++--
 crates/workspace/src/dialogs/join_group.rs |  5 ++-
 crates/workspace/src/dialogs/new_chat.rs   | 12 ++++--
 crates/workspace/src/dialogs/new_group.rs  |  5 ++-
 crates/workspace/src/dialogs/profile.rs    | 18 ++++++---
 crates/workspace/src/dialogs/relays.rs     |  5 ++-
 crates/workspace/src/dialogs/restore.rs    |  5 ++-
 crates/workspace/src/dialogs/screening.rs  | 27 +++++++------
 8 files changed, 91 insertions(+), 33 deletions(-)

diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs
index 352e79e5..53354930 100644
--- a/crates/ui/src/button.rs
+++ b/crates/ui/src/button.rs
@@ -106,6 +106,16 @@ pub trait ButtonVariants: Sized {
     }
 }
 
+/// Which side of the label the icon sits on.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum IconPosition {
+    /// Left of the label.
+    #[default]
+    Start,
+    /// Right of the label.
+    End,
+}
+
 /// A Button element.
 #[derive(IntoElement)]
 #[allow(clippy::type_complexity)]
@@ -125,6 +135,7 @@ pub struct Button {
     on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
     tab_stop: bool,
     selected: bool,
+    icon_position: IconPosition,
 }
 
 impl From<Button> for AnyElement {
@@ -151,6 +162,7 @@ impl Button {
             loading: false,
             children: Vec::new(),
             tab_stop: true,
+            icon_position: IconPosition::Start,
         }
     }
 
@@ -171,6 +183,12 @@ impl Button {
         self
     }
 
+    /// Set which side of the label the icon sits on (default [`IconPosition::Start`]).
+    pub fn icon_position(mut self, position: IconPosition) -> Self {
+        self.icon_position = position;
+        self
+    }
+
     pub fn tooltip(mut self, tooltip: impl Into<SharedString>) -> Self {
         self.tooltip = Some(tooltip.into());
         self
@@ -272,6 +290,7 @@ impl RenderOnce for Button {
             Size::Large => Size::Medium,
             _ => self.size,
         };
+        let icon_start = self.icon_position == IconPosition::Start;
 
         self.base
             .tab_index(0)
@@ -318,7 +337,7 @@ impl RenderOnce for Button {
                     }
                 } else {
                     // Normal Button
-                    match self.size {
+                    let this = match self.size {
                         Size::Size(size) => this.px(size * 0.2),
                         Size::XSmall => {
                             if self.icon.is_some() {
@@ -348,6 +367,16 @@ impl RenderOnce for Button {
                                 this.h_10().px_3()
                             }
                         }
+                    };
+
+                    if !icon_start && self.icon.is_some() {
+                        match self.size {
+                            Size::XSmall | Size::Small => this.pl_2p5().pr_2(),
+                            Size::Medium | Size::Large => this.pl_3p5().pr_3(),
+                            Size::Size(_) => this,
+                        }
+                    } else {
+                        this
                     }
                 }
             })
@@ -369,16 +398,26 @@ impl RenderOnce for Button {
                         Size::Small => this.text_style(TextStyle::Callout).gap_1p5(),
                         _ => this.text_style(TextStyle::Callout).gap(px(theme::SPACE)),
                     })
-                    .when(!self.loading, |this| {
-                        this.when_some(self.icon, |this, icon| {
+                    .when(!self.loading && icon_start, |this| {
+                        this.when_some(self.icon.clone(), |this, icon| {
                             this.child(icon.with_size(icon_size))
                         })
                     })
-                    .when(self.loading, |this| this.child(Indicator::new()))
+                    .when(self.loading && icon_start, |this| {
+                        this.child(Indicator::new())
+                    })
                     .when_some(self.label, |this, label| {
                         this.child(div().flex_none().line_height(relative(1.)).child(label))
                     })
                     .children(self.children)
+                    .when(!self.loading && !icon_start, |this| {
+                        this.when_some(self.icon.clone(), |this, icon| {
+                            this.child(icon.with_size(icon_size))
+                        })
+                    })
+                    .when(self.loading && !icon_start, |this| {
+                        this.child(Indicator::new())
+                    })
                     .when(self.caret, |this| {
                         this.justify_between().gap_0p5().child(
                             Icon::new(IconName::ChevronDown)
diff --git a/crates/workspace/src/dialogs/join_group.rs b/crates/workspace/src/dialogs/join_group.rs
index a6c910ce..ab93de15 100644
--- a/crates/workspace/src/dialogs/join_group.rs
+++ b/crates/workspace/src/dialogs/join_group.rs
@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use gpui::{App, AppContext, ClickEvent, ParentElement, Styled, Window, px};
 use nip29::{GroupReference, GroupsRegistry};
-use ui::button::{Button, ButtonVariants};
+use ui::button::{Button, ButtonVariants, IconPosition};
 use ui::input::{Input, InputState};
 use ui::notification::Notification;
 use ui::{IconName, StyledExt, WindowExtension, h_flex, v_flex};
@@ -56,7 +56,8 @@ pub fn open(window: &mut Window, cx: &mut App) {
                             )
                             .child(
                                 Button::new("join")
-                                    .icon(IconName::CheckCircle)
+                                    .icon(IconName::ArrowRight)
+                                    .icon_position(IconPosition::End)
                                     .label("Join")
                                     .primary()
                                     .font_semibold()
diff --git a/crates/workspace/src/dialogs/new_chat.rs b/crates/workspace/src/dialogs/new_chat.rs
index d40f6b79..39796ffe 100644
--- a/crates/workspace/src/dialogs/new_chat.rs
+++ b/crates/workspace/src/dialogs/new_chat.rs
@@ -15,7 +15,7 @@ use settings::AppSettings;
 use state::NostrRegistry;
 use theme::{ActiveTheme, TextStyle, Typeset as _};
 use ui::avatar::Avatar;
-use ui::button::{Button, ButtonVariants};
+use ui::button::{Button, ButtonVariants, IconPosition};
 use ui::dock::{DockArea, DockPlacement, PanelHandle};
 use ui::input::{Input, InputEvent, InputState};
 use ui::nav::Nav;
@@ -412,7 +412,12 @@ impl Render for NewChat {
             })
             .map(|this| {
                 if let Some(error) = self.error.clone() {
-                    this.child(div().text_style(TextStyle::Caption).text_color(cx.theme().danger).child(error))
+                    this.child(
+                        div()
+                            .text_style(TextStyle::Caption)
+                            .text_color(cx.theme().danger)
+                            .child(error),
+                    )
                 } else {
                     this.child(
                         div()
@@ -444,7 +449,8 @@ impl Render for NewChat {
                     )
                     .child(
                         Button::new("start")
-                            .icon(IconName::CheckCircle)
+                            .icon(IconName::ArrowRight)
+                            .icon_position(IconPosition::End)
                             .label("Start")
                             .primary()
                             .font_semibold()
diff --git a/crates/workspace/src/dialogs/new_group.rs b/crates/workspace/src/dialogs/new_group.rs
index 53bae0ad..42f5646c 100644
--- a/crates/workspace/src/dialogs/new_group.rs
+++ b/crates/workspace/src/dialogs/new_group.rs
@@ -4,7 +4,7 @@ use gpui::{App, AppContext, ClickEvent, Div, Entity, ParentElement, Styled, Wind
 use nip29::{GroupId, GroupKey, GroupMetadata, GroupsRegistry};
 use nostr_sdk::prelude::*;
 use theme::{ActiveTheme, TextStyle, Typeset as _};
-use ui::button::{Button, ButtonVariants};
+use ui::button::{Button, ButtonVariants, IconPosition};
 use ui::input::{Input, InputState};
 use ui::notification::Notification;
 use ui::{IconName, StyledExt, WindowExtension, h_flex, v_flex};
@@ -47,7 +47,8 @@ pub fn open(window: &mut Window, cx: &mut App) {
                     )
                     .child(
                         Button::new("create")
-                            .icon(IconName::CheckCircle)
+                            .icon(IconName::ArrowRight)
+                            .icon_position(IconPosition::End)
                             .label("Create")
                             .primary()
                             .font_semibold()
diff --git a/crates/workspace/src/dialogs/profile.rs b/crates/workspace/src/dialogs/profile.rs
index 76a73f23..4683b8b9 100644
--- a/crates/workspace/src/dialogs/profile.rs
+++ b/crates/workspace/src/dialogs/profile.rs
@@ -14,7 +14,7 @@ use settings::AppSettings;
 use state::{NostrRegistry, upload};
 use theme::{ActiveTheme, TextStyle, Typeset as _, button_radius};
 use ui::avatar::Avatar;
-use ui::button::{Button, ButtonVariants};
+use ui::button::{Button, ButtonVariants, IconPosition};
 use ui::dock::DockPlacement;
 use ui::input::{Input, InputState, Textarea, TextareaState};
 use ui::notification::Notification;
@@ -371,7 +371,8 @@ impl Render for ProfileDialog {
                     .when(self.editing, |this| {
                         this.child(
                             Button::new("upload")
-                                .icon(IconName::PlusCircle)
+                                .icon(IconName::ArrowRight)
+                                .icon_position(IconPosition::End)
                                 .label("Add an avatar")
                                 .xsmall()
                                 .ghost()
@@ -464,6 +465,7 @@ impl Render for ProfileDialog {
                         this.child(
                             Button::new("update")
                                 .icon(IconName::Edit)
+                                .icon_position(IconPosition::End)
                                 .label("Update")
                                 .primary()
                                 .font_semibold()
@@ -476,6 +478,7 @@ impl Render for ProfileDialog {
                         this.child(
                             Button::new("message")
                                 .icon(IconName::Message)
+                                .icon_position(IconPosition::End)
                                 .label("Message")
                                 .primary()
                                 .font_semibold()
@@ -497,6 +500,7 @@ impl Render for ProfileDialog {
                         .child(
                             Button::new("save")
                                 .icon(IconName::CheckCircle)
+                                .icon_position(IconPosition::End)
                                 .label("Save")
                                 .primary()
                                 .font_semibold()
@@ -530,8 +534,10 @@ fn field(
         None => (SharedString::from(placeholder), cx.theme().text_muted),
     };
 
-    v_flex()
-        .gap_1p5()
-        .child(label(text, cx))
-        .child(div().text_style(TextStyle::Callout).text_color(color).child(content))
+    v_flex().gap_1p5().child(label(text, cx)).child(
+        div()
+            .text_style(TextStyle::Callout)
+            .text_color(color)
+            .child(content),
+    )
 }
diff --git a/crates/workspace/src/dialogs/relays.rs b/crates/workspace/src/dialogs/relays.rs
index 151ab73d..72d5ad0e 100644
--- a/crates/workspace/src/dialogs/relays.rs
+++ b/crates/workspace/src/dialogs/relays.rs
@@ -12,7 +12,7 @@ use nostr_sdk::prelude::*;
 use smallvec::{SmallVec, smallvec};
 use state::NostrRegistry;
 use theme::{ActiveTheme, TextStyle, Typeset as _, button_radius, panel_radius};
-use ui::button::{Button, ButtonVariants};
+use ui::button::{Button, ButtonVariants, IconPosition};
 use ui::input::{Input, InputEvent, InputState};
 use ui::menu::{DropdownMenu, PopupMenuItem};
 use ui::scroll::ScrollableElement;
@@ -283,7 +283,8 @@ impl RelayManager {
 
         h_flex().gap_1().justify_end().child(
             Button::new("update")
-                .icon(IconName::CheckCircle)
+                .icon(IconName::ArrowRight)
+                .icon_position(IconPosition::End)
                 .label("Update")
                 .primary()
                 .font_semibold()
diff --git a/crates/workspace/src/dialogs/restore.rs b/crates/workspace/src/dialogs/restore.rs
index 9f8ac498..17f81a06 100644
--- a/crates/workspace/src/dialogs/restore.rs
+++ b/crates/workspace/src/dialogs/restore.rs
@@ -8,7 +8,7 @@ use instant::Duration;
 use nip4e::DeviceRegistry;
 use nostr_sdk::prelude::*;
 use theme::{ActiveTheme, TextStyle, Typeset as _};
-use ui::button::{Button, ButtonVariants};
+use ui::button::{Button, ButtonVariants, IconPosition};
 use ui::input::{Input, InputEvent, InputState};
 use ui::{IconName, StyledExt, WindowExtension, h_flex, v_flex};
 
@@ -112,7 +112,8 @@ impl Render for RestoreEncryption {
             .child(
                 h_flex().gap_1().justify_end().child(
                     Button::new("restore")
-                        .icon(IconName::CheckCircle)
+                        .icon(IconName::ArrowRight)
+                        .icon_position(IconPosition::End)
                         .label("Restore")
                         .primary()
                         .font_semibold()
diff --git a/crates/workspace/src/dialogs/screening.rs b/crates/workspace/src/dialogs/screening.rs
index 66f08b2c..18320bae 100644
--- a/crates/workspace/src/dialogs/screening.rs
+++ b/crates/workspace/src/dialogs/screening.rs
@@ -389,18 +389,21 @@ impl Render for Screening {
                             .text_style(TextStyle::Callout)
                             .child(status_badge(Some(self.followed), cx))
                             .child(
-                                v_flex().text_style(TextStyle::Callout).child("Contact").child(
-                                    div()
-                                        .line_clamp(1)
-                                        .text_color(cx.theme().text_muted)
-                                        .child({
-                                            if self.followed {
-                                                SharedString::from(CONTACT)
-                                            } else {
-                                                SharedString::from(NOT_CONTACT)
-                                            }
-                                        }),
-                                ),
+                                v_flex()
+                                    .text_style(TextStyle::Callout)
+                                    .child("Contact")
+                                    .child(
+                                        div()
+                                            .line_clamp(1)
+                                            .text_color(cx.theme().text_muted)
+                                            .child({
+                                                if self.followed {
+                                                    SharedString::from(CONTACT)
+                                                } else {
+                                                    SharedString::from(NOT_CONTACT)
+                                                }
+                                            }),
+                                    ),
                             ),
                     )
                     .child(