feat: redesign the dock and tabbar (#22)

Reviewed-on: #22

crates/workspace/src/views/commit_diff/mod.rs

@@ -18,10 +18,12 @@ use gpui_component::{
     ActiveTheme, Sizable, StyledExt, VirtualListScrollHandle, h_flex, v_flex, v_virtual_list,
 };
 use signed_git::{CommitDiff, DiffHunk, DiffLine, DiffLineKind, DiffStatus, FileCommit, FileDiff};
+use signed_state::RepoStore;
 use signed_ui::{placeholder, tree_row};
 use utils::relative_time_secs;
 
 use crate::views::tree::{build_tree_items, tree_items};
+use crate::views::{repo_tab_avatar, tab_title};
 
 const TREE_WIDTH: f32 = 260.;
 
@@ -293,6 +295,7 @@ impl Render for DiffPane {
 
 pub struct CommitDiffView {
     focus_handle: FocusHandle,
+    store: Entity<RepoStore>,
     worktree: PathBuf,
     repo_name: SharedString,
     commit: FileCommit,
@@ -304,6 +307,7 @@ pub struct CommitDiffView {
 
 impl CommitDiffView {
     pub fn new(
+        store: Entity<RepoStore>,
         worktree: PathBuf,
         repo_name: SharedString,
         commit_id: String,
@@ -319,6 +323,7 @@ impl CommitDiffView {
 
         Self {
             focus_handle: cx.focus_handle(),
+            store,
             worktree,
             repo_name,
             commit: FileCommit {
@@ -465,11 +470,11 @@ impl BasePanel for CommitDiffView {
 }
 
 impl Panel for CommitDiffView {
-    fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
-        div().text_sm().child(SharedString::from(format!(
-            "{}/{}",
-            self.repo_name, self.commit.id
-        )))
+    fn title(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let avatar = repo_tab_avatar(self.store.read(cx), cx);
+        let label = SharedString::from(format!("{}/{}", self.repo_name, self.commit.id));
+
+        tab_title(avatar, label)
     }
 }
 

crates/workspace/src/views/discussion.rs

@@ -7,7 +7,7 @@ use gpui_component::tag::Tag;
 use gpui_component::{ActiveTheme, Icon, Sizable, StyledExt, h_flex, v_flex};
 use nostr::prelude::{Event, EventId, PublicKey};
 use signed_state::{ProfileStore, RepoStore};
-use signed_ui::UserAvatar;
+use signed_ui::Avatar;
 use utils::relative_time;
 
 pub(crate) fn issue_roots(store: &RepoStore) -> &[Event] {
@@ -71,7 +71,7 @@ pub(crate) fn sidebar_section(
                     h_flex()
                         .gap_1()
                         .items_center()
-                        .child(UserAvatar::new(name.clone()).picture(picture))
+                        .child(Avatar::new(name.clone()).picture(picture))
                         .child(div().text_sm().truncate().text_ellipsis().child(name))
                         .into_any_element()
                 })),
@@ -137,7 +137,7 @@ pub(crate) fn comments_section(store: &Entity<RepoStore>, root: EventId, cx: &Ap
                         .child(
                             h_flex()
                                 .gap_1()
-                                .child(UserAvatar::new(author.clone()).picture(picture))
+                                .child(Avatar::new(author.clone()).picture(picture))
                                 .child(author),
                         )
                         .child(

crates/workspace/src/views/inbox.rs

@@ -15,10 +15,10 @@ use signed_core::{COVER_NOTE_KIND, InboxItem, InboxReadState, RepoAddr, filters}
 use signed_state::{
     Backend, BackendEvent, ProfileStore, RefreshGate, RefreshRequest, RepoListStore, query_inbox,
 };
-use signed_ui::{CountBadge, UserAvatar};
+use signed_ui::{Avatar, CountBadge};
 use utils::relative_time;
 
-use super::{RepoItem, open_repo_item};
+use super::{RepoItem, open_repo_item, panel_avatar, tab_title};
 
 const LIST_OVERDRAW: Pixels = px(400.);
 const MAX_SUB_ACTIVITIES: usize = 5;
@@ -553,7 +553,7 @@ fn sub_activity(event: &Event, me: Option<PublicKey>, cx: &App) -> AnyElement {
                 .items_center()
                 .text_xs()
                 .child(
-                    UserAvatar::new(name.clone())
+                    Avatar::new(name.clone())
                         .picture(profile.picture())
                         .xsmall(),
                 )
@@ -619,7 +619,7 @@ impl BasePanel for InboxView {
 
 impl Panel for InboxView {
     fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
-        div().text_sm().child(SharedString::from("Inbox"))
+        tab_title(panel_avatar("inbox"), SharedString::from("Inbox"))
     }
 }
 

crates/workspace/src/views/issues/detail.rs

@@ -10,10 +10,11 @@ use gpui_component::{ActiveTheme, StyledExt, h_flex, v_flex};
 use nostr::prelude::EventId;
 use signed_core::activity_subject;
 use signed_state::{ProfileStore, RepoStore};
-use signed_ui::{UserAvatar, placeholder, status_badge};
+use signed_ui::{Avatar, placeholder, status_badge};
 use utils::relative_time;
 
 use crate::views::discussion::{comment_form, comments_section, issue_roots, sidebar_section};
+use crate::views::{repo_tab_avatar, tab_title};
 
 pub struct IssueDetailView {
     focus_handle: FocusHandle,
@@ -65,7 +66,9 @@ impl Panel for IssueDetailView {
             })
             .unwrap_or_else(|| SharedString::from("Issue"));
 
-        div().text_sm().child(short_id)
+        let avatar = repo_tab_avatar(self.store.read(cx), cx);
+
+        tab_title(avatar, short_id)
     }
 }
 
@@ -150,9 +153,7 @@ impl Render for IssueDetailView {
                                             .child(
                                                 h_flex()
                                                     .gap_1()
-                                                    .child(
-                                                        UserAvatar::new(&author).picture(picture),
-                                                    )
+                                                    .child(Avatar::new(&author).picture(picture))
                                                     .child(author),
                                             )
                                             .child(

crates/workspace/src/views/issues/mod.rs

@@ -18,13 +18,14 @@ use gpui_component::{
 use nostr::prelude::EventId;
 use signed_core::{RepoStatus, activity_subject};
 use signed_state::{ProfileStore, RepoStore};
-use signed_ui::{SegmentButton, UserAvatar, placeholder, status_badge};
+use signed_ui::{Avatar, SegmentButton, placeholder, status_badge};
 use utils::relative_time;
 
 pub(super) mod detail;
 
 use self::detail::IssueDetailView;
 use super::status_list::{StatusCounts, filter_by_status};
+use crate::views::{repo_tab_avatar, tab_title};
 
 const ISSUE_ROW_HEIGHT: f32 = 73.;
 
@@ -188,7 +189,7 @@ impl IssuesView {
                             .child(
                                 h_flex()
                                     .gap_1()
-                                    .child(UserAvatar::new(author.clone()).picture(picture))
+                                    .child(Avatar::new(author.clone()).picture(picture))
                                     .child(div().child(author)),
                             )
                             .child(SharedString::from("opened"))
@@ -333,8 +334,11 @@ impl BasePanel for IssuesView {
 }
 
 impl Panel for IssuesView {
-    fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
-        div().child(SharedString::from(format!("{}/issues", self.repo_name)))
+    fn title(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let avatar = repo_tab_avatar(self.store.read(cx), cx);
+        let label = SharedString::from(format!("{}/issues", self.repo_name));
+
+        tab_title(avatar, label)
     }
 }
 

crates/workspace/src/views/mod.rs

@@ -11,8 +11,53 @@ pub(crate) mod sidebar;
 mod status_list;
 pub(crate) mod tree;
 
+use gpui::prelude::*;
+use gpui::{AnyElement, App, div};
+use gpui_component::{Sizable as _, h_flex};
 pub use inbox::InboxView;
 pub use repo::RepoDetailView;
 pub(crate) use repo::{RepoItem, open_repo_item, open_repo_panel};
 pub use repo_list::RepoListView;
 pub use sidebar::SidebarPanel;
+use signed_state::{ProfileStore, RepoStore};
+use signed_ui::{Avatar, PixelAvatar};
+
+pub(crate) fn tab_title(avatar: AnyElement, label: impl IntoElement) -> impl IntoElement {
+    h_flex()
+        .gap_1p5()
+        .items_center()
+        .child(div().flex_shrink_0().child(avatar))
+        .child(label)
+}
+
+pub(crate) fn panel_avatar(seed: impl AsRef<str>) -> AnyElement {
+    PixelAvatar::new(seed).xsmall().into_any_element()
+}
+
+pub(crate) fn repo_tab_avatar(store: &RepoStore, cx: &App) -> AnyElement {
+    let seed = store
+        .announcement
+        .as_ref()
+        .map(|announcement| format!("{}:{}", announcement.owner, announcement.id))
+        .or_else(|| store.addr().map(|addr| addr.to_string()))
+        .or_else(|| {
+            store
+                .path
+                .as_ref()
+                .map(|path| path.to_string_lossy().into_owned())
+        })
+        .unwrap_or_default();
+
+    let owner = store
+        .announcement
+        .as_ref()
+        .map(|announcement| ProfileStore::global(cx).read(cx).get(&announcement.owner));
+
+    match owner.and_then(|profile| profile.picture().map(|picture| (profile.name(), picture))) {
+        Some((name, picture)) => Avatar::new(name)
+            .picture(Some(picture))
+            .xsmall()
+            .into_any_element(),
+        None => PixelAvatar::new(seed).xsmall().into_any_element(),
+    }
+}

crates/workspace/src/views/pull_requests/detail.rs

@@ -27,11 +27,12 @@ use signed_core::{
 };
 use signed_git::{FileCommit, patch_commits, patch_diffs};
 use signed_state::{Backend, ProfileStore, RepoStore, ensure_repo_mirror};
-use signed_ui::{CountBadge, UserAvatar, placeholder, status_badge};
+use signed_ui::{Avatar, CountBadge, placeholder, status_badge};
 use utils::{relative_time, relative_time_secs};
 
 use crate::views::commit_diff::{CommitDiffView, DiffPane};
 use crate::views::discussion::{comment_form, comments_section, pr_roots, sidebar_section};
+use crate::views::{repo_tab_avatar, tab_title};
 
 const ROW_HEIGHT: f32 = 37.;
 
@@ -343,6 +344,7 @@ impl PullRequestDetailView {
 
         let panel = cx.new(|cx| {
             CommitDiffView::new(
+                self.store.clone(),
                 worktree,
                 self.repo_name.clone(),
                 commit_id.into(),
@@ -451,7 +453,7 @@ impl PullRequestDetailView {
                                                 h_flex()
                                                     .gap_1()
                                                     .child(
-                                                        UserAvatar::new(author.clone())
+                                                        Avatar::new(author.clone())
                                                             .picture(picture),
                                                     )
                                                     .child(author),
@@ -788,15 +790,17 @@ impl BasePanel for PullRequestDetailView {
 }
 
 impl Panel for PullRequestDetailView {
-    fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
+    fn title(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let avatar = repo_tab_avatar(self.store.read(cx), cx);
         let hex = self.pr_id.to_hex();
         let id = SharedString::from(&hex[..8]);
-        let title = if self.repo_name.is_empty() {
+        let label = if self.repo_name.is_empty() {
             id
         } else {
             SharedString::from(format!("{}/{}", self.repo_name, id))
         };
-        div().text_sm().child(title)
+
+        tab_title(avatar, label)
     }
 }
 

crates/workspace/src/views/pull_requests/mod.rs

@@ -16,7 +16,7 @@ use gpui_component::{
 use nostr::prelude::{EventId, Kind};
 use signed_core::{RepoStatus, activity_subject};
 use signed_state::{ProfileStore, RepoStore};
-use signed_ui::{DropdownButton, SegmentButton, UserAvatar, placeholder, status_badge};
+use signed_ui::{Avatar, DropdownButton, SegmentButton, placeholder, status_badge};
 use utils::relative_time;
 
 pub(super) mod detail;
@@ -27,6 +27,7 @@ use self::new::open_new_pull_panel;
 use super::send_patch::open_send_patch_panel;
 use super::status_list::{StatusCounts, filter_by_status};
 use crate::views::repo::RepoAction;
+use crate::views::{repo_tab_avatar, tab_title};
 
 const ROW_HEIGHT: f32 = 73.;
 
@@ -202,7 +203,7 @@ impl PullRequestsView {
                             .child(
                                 h_flex()
                                     .gap_1()
-                                    .child(UserAvatar::new(author.clone()).picture(picture))
+                                    .child(Avatar::new(author.clone()).picture(picture))
                                     .child(div().child(author)),
                             )
                             .child(SharedString::from("opened"))
@@ -333,11 +334,11 @@ impl BasePanel for PullRequestsView {
 }
 
 impl Panel for PullRequestsView {
-    fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
-        div().child(SharedString::from(format!(
-            "{}/pull-requests",
-            self.repo_name
-        )))
+    fn title(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let avatar = repo_tab_avatar(self.store.read(cx), cx);
+        let label = SharedString::from(format!("{}/pulls", self.repo_name));
+
+        tab_title(avatar, label)
     }
 }
 

crates/workspace/src/views/pull_requests/new.rs

@@ -32,6 +32,7 @@ use signed_state::{
 use signed_ui::{CountBadge, placeholder, ref_selector_trigger};
 
 use crate::views::commit_diff::{COMMIT_ROW_HEIGHT, CommitDiffView, DiffPane, commit_row};
+use crate::views::{repo_tab_avatar, tab_title};
 
 pub struct NewPullRequestView {
     focus_handle: FocusHandle,
@@ -924,6 +925,7 @@ impl NewPullRequestView {
 
         let panel = cx.new(|cx| {
             CommitDiffView::new(
+                self.store.clone(),
                 repo_path,
                 self.repo_name.clone(),
                 commit_id.into(),
@@ -1323,11 +1325,11 @@ impl BasePanel for NewPullRequestView {
 }
 
 impl Panel for NewPullRequestView {
-    fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
-        div().child(SharedString::from(format!(
-            "{}/new-pull-request",
-            self.repo_name
-        )))
+    fn title(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let avatar = repo_tab_avatar(self.store.read(cx), cx);
+        let label = SharedString::from(format!("{}/new-pull-request", self.repo_name));
+
+        tab_title(avatar, label)
     }
 }
 

crates/workspace/src/views/repo/about.rs

@@ -5,7 +5,7 @@ use gpui_component::{ActiveTheme, StyledExt, WindowExt, h_flex, v_flex};
 use nostr::prelude::PublicKey;
 use signed_core::Announcement;
 use signed_state::ProfileStore;
-use signed_ui::{UserAvatar, middle_truncate};
+use signed_ui::{Avatar, middle_truncate};
 
 pub(super) fn open_about_dialog(announcement: Announcement, window: &mut Window, cx: &mut App) {
     window.open_dialog(cx, move |dialog, _window, cx| {
@@ -173,7 +173,7 @@ fn maintainers(maintainers: &[PublicKey], cx: &App) -> AnyElement {
                 .gap_2()
                 .items_center()
                 .min_w_0()
-                .child(UserAvatar::new(name.clone()).picture(picture))
+                .child(Avatar::new(name.clone()).picture(picture))
                 .child(
                     div()
                         .flex_1()

crates/workspace/src/views/repo/history.rs

@@ -106,8 +106,10 @@ impl RepoHistoryView {
         // Same display name as the repo detail panel's title.
         let repo_name = repo_display_name(self.store.read(cx));
 
-        let panel =
-            cx.new(|cx| CommitDiffView::new(worktree, repo_name, commit_id.into(), window, cx));
+        let store = self.store.clone();
+        let panel = cx.new(|cx| {
+            CommitDiffView::new(store, worktree, repo_name, commit_id.into(), window, cx)
+        });
 
         dock_area.update(cx, |dock_area, cx| {
             add_center_panel(dock_area, panel_handle(panel), window, cx);

crates/workspace/src/views/repo/mod.rs

@@ -31,7 +31,7 @@ use signed_state::{
     pr_proposes_checkout,
 };
 use signed_ui::{
-    CountBadge, DropdownButton, PixelAvatar, UserAvatar, copy_row, menu_copy_row, middle_truncate,
+    Avatar, CountBadge, DropdownButton, PixelAvatar, copy_row, menu_copy_row, middle_truncate,
     ref_selector_trigger,
 };
 
@@ -55,6 +55,7 @@ use crate::views::pull_requests::new::open_new_pull_panel;
 use crate::views::repo::about::open_about_dialog;
 use crate::views::send_patch::open_send_patch_panel;
 use crate::views::tree::{TreeItemSeed, build_tree_items, sorted_worktree_paths};
+use crate::views::{repo_tab_avatar, tab_title};
 
 #[derive(Clone, Copy, PartialEq, Eq)]
 enum RefKind {
@@ -1490,7 +1491,7 @@ impl RepoDetailView {
                         .child(
                             h_flex()
                                 .gap_1()
-                                .child(UserAvatar::new(owner_name.clone()).picture(owner_picture))
+                                .child(Avatar::new(owner_name.clone()).picture(owner_picture))
                                 .child(div().text_xs().whitespace_nowrap().child(owner_name)),
                         )
                         .when(!rest.is_empty(), |this| {
@@ -2031,7 +2032,7 @@ fn bound_repo_label(binding: &Nip34Binding, cx: &App) -> AnyElement {
                 h_flex()
                     .gap_1()
                     .text_color(cx.theme().foreground)
-                    .child(UserAvatar::new(profile.name()).picture(profile.picture()))
+                    .child(Avatar::new(profile.name()).picture(profile.picture()))
                     .child(profile.name()),
             )
         })
@@ -2054,7 +2055,11 @@ impl BasePanel for RepoDetailView {
 
 impl Panel for RepoDetailView {
     fn title(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        repo_display_name(self.store.read(cx))
+        let store = self.store.read(cx);
+        let name = repo_display_name(store);
+        let avatar = repo_tab_avatar(store, cx);
+
+        tab_title(avatar, name)
     }
 }
 

crates/workspace/src/views/repo_list.rs

@@ -16,10 +16,10 @@ use gpui_component::{
 };
 use signed_core::Announcement;
 use signed_state::{ProfileStore, RepoListStore, Timestamp};
-use signed_ui::{SegmentButton, UserAvatar};
+use signed_ui::{Avatar, SegmentButton};
 use utils::relative_time;
 
-use super::open_repo_panel;
+use super::{open_repo_panel, panel_avatar, tab_title};
 
 const COLUMNS: usize = 2;
 const CARD_HEIGHT: f32 = 40. + 64. + 48. + 2. + 6.;
@@ -289,7 +289,7 @@ impl RepoListView {
                         h_flex()
                             .gap_2()
                             .items_center()
-                            .child(UserAvatar::new(owner.name()).picture(owner.picture()))
+                            .child(Avatar::new(owner.name()).picture(owner.picture()))
                             .child(
                                 div()
                                     .text_xs()
@@ -389,7 +389,7 @@ impl BasePanel for RepoListView {
 
 impl Panel for RepoListView {
     fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
-        div().text_sm().child(SharedString::from("Explore"))
+        tab_title(panel_avatar("explore"), SharedString::from("Explore"))
     }
 }
 

crates/workspace/src/views/send_patch.rs

@@ -11,6 +11,8 @@ use gpui_component::spinner::Spinner;
 use gpui_component::{ActiveTheme, Icon, IconName, Sizable, h_flex, v_flex};
 use signed_state::RepoStore;
 
+use crate::views::{repo_tab_avatar, tab_title};
+
 pub struct SendPatchView {
     focus_handle: FocusHandle,
     dock_area: WeakEntity<DockArea>,
@@ -205,8 +207,11 @@ impl BasePanel for SendPatchView {
 }
 
 impl Panel for SendPatchView {
-    fn title(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
-        div().child(SharedString::from(format!("{}/send-patch", self.repo_name)))
+    fn title(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let avatar = repo_tab_avatar(self.store.read(cx), cx);
+        let label = SharedString::from(format!("{}/send-patch", self.repo_name));
+
+        tab_title(avatar, label)
     }
 }
 

crates/workspace/src/views/sidebar/mod.rs

@@ -23,7 +23,7 @@ use signed_state::{
     Backend, BackendEvent, CheckoutsStore, LocalReposStore, Nip34Binding, Nip34Kind, Profile,
     ProfileStore, RepoListStore, ResolvedLocalRepo, resolve_local_repos,
 };
-use signed_ui::{NavItem, PixelAvatar, UserAvatar, title_bar_drag_handlers};
+use signed_ui::{Avatar, NavItem, PixelAvatar, title_bar_drag_handlers};
 
 use super::{InboxView, RepoDetailView, RepoListView, open_repo_panel};
 
@@ -447,7 +447,9 @@ impl SidebarPanel {
         cx: &mut Context<Self>,
     ) -> impl IntoElement {
         let name = announcement.name().map(SharedString::from);
-        let avatar = PixelAvatar::new(format!("{}:{}", announcement.owner, announcement.id));
+        // The sidebar rows are compact, so the avatar matches the 16px nav icons.
+        let avatar =
+            PixelAvatar::new(format!("{}:{}", announcement.owner, announcement.id)).xsmall();
         let announcement = announcement.clone();
 
         let unpushed = self
@@ -552,7 +554,7 @@ impl SidebarPanel {
                         Button::new("user").text().dropdown_caret(true).child(
                             h_flex()
                                 .gap_1()
-                                .child(UserAvatar::new(name.clone()).picture(picture))
+                                .child(Avatar::new(name.clone()).picture(picture))
                                 .child(div().text_xs().font_semibold().child(name)),
                         ),
                     ),
@@ -654,7 +656,8 @@ pub(super) fn server_host(relay: &RelayUrl) -> SharedString {
 
 /// The repository's pixel avatar, with the bound owner's avatar at its bottom right.
 fn local_avatar(entry: &ResolvedLocalRepo, cx: &App) -> AnyElement {
-    let avatar = PixelAvatar::new(entry.path.to_string_lossy());
+    // Matches the other sidebar rows, and the badge below sits at its corner.
+    let avatar = PixelAvatar::new(entry.path.to_string_lossy()).xsmall();
 
     let Some(owner) = entry.nip34.as_ref().and_then(|binding| binding.owner) else {
         return avatar.into_any_element();
@@ -668,7 +671,7 @@ fn local_avatar(entry: &ResolvedLocalRepo, cx: &App) -> AnyElement {
         .child(avatar)
         .child(
             div().absolute().bottom_neg_0p5().right_neg_0p5().child(
-                UserAvatar::new(profile.name())
+                Avatar::new(profile.name())
                     .picture(profile.picture())
                     .size(px(14.)),
             ),