update issues panel

Cargo.lock

@@ -10955,6 +10955,7 @@ dependencies = [
  "futures",
  "gix",
  "gpui",
+ "gpui-base",
  "gpui-component",
  "log",
  "nostr",

crates/assets/assets/icons/circle-plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M16.2426 12.0005H7.75736M12 16.2431V7.75781M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

crates/assets/assets/icons/git-issue-done.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 4"/>
+</svg>

crates/assets/src/lib.rs

@@ -71,10 +71,12 @@ impl Assets {
 }
 
 pub enum CustomIconName {
+    CirclePlus,
     Unlock,
     Filter,
     GlobalOn,
     GlobalOff,
+    GitIssueDone,
     GitIssueOpen,
     GitIssueClosed,
     GitIssueOngoing,
@@ -90,10 +92,12 @@ pub enum CustomIconName {
 impl IconNamed for CustomIconName {
     fn path(self) -> gpui::SharedString {
         match self {
+            CustomIconName::CirclePlus => "icons/circle-plus.svg",
             CustomIconName::Unlock => "icons/unlock.svg",
             CustomIconName::Filter => "icons/filter.svg",
             CustomIconName::GlobalOn => "icons/global-on.svg",
             CustomIconName::GlobalOff => "icons/global-off.svg",
+            CustomIconName::GitIssueDone => "icons/git-issue-done.svg",
             CustomIconName::GitIssueOpen => "icons/git-issue-open.svg",
             CustomIconName::GitIssueClosed => "icons/git-issue-close.svg",
             CustomIconName::GitIssueOngoing => "icons/git-issue-ongoing.svg",

crates/dock/src/lib.rs

@@ -949,7 +949,9 @@ impl DockArea {
             .map(|view| view.entity_id());
     }
 }
+
 impl EventEmitter<DockEvent> for DockArea {}
+
 impl Render for DockArea {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let view = cx.entity().clone();

crates/dock/src/panel.rs

@@ -147,11 +147,6 @@ pub trait Panel: EventEmitter<PanelEvent> + Render + Focusable {
     fn dump(&self, cx: &App) -> PanelState {
         PanelState::new(self)
     }
-
-    /// Whether the panel has inner padding when the panel is in the tabs layout, default is `true`.
-    fn inner_padding(&self, cx: &App) -> bool {
-        true
-    }
 }
 
 /// The PanelView trait used to define the panel view.
@@ -174,7 +169,6 @@ pub trait PanelView: 'static + Send + Sync {
     fn view(&self) -> AnyView;
     fn focus_handle(&self, cx: &App) -> FocusHandle;
     fn dump(&self, cx: &App) -> PanelState;
-    fn inner_padding(&self, cx: &App) -> bool;
 }
 
 impl<T: Panel> PanelView for Entity<T> {
@@ -252,10 +246,6 @@ impl<T: Panel> PanelView for Entity<T> {
     fn dump(&self, cx: &App) -> PanelState {
         self.read(cx).dump(cx)
     }
-
-    fn inner_padding(&self, cx: &App) -> bool {
-        self.read(cx).inner_padding(cx)
-    }
 }
 
 impl From<&dyn PanelView> for AnyView {

crates/dock/src/tab_panel.rs

@@ -230,11 +230,6 @@ impl Panel for TabPanel {
         }
         state
     }
-
-    fn inner_padding(&self, cx: &App) -> bool {
-        self.active_panel(cx)
-            .is_none_or(|panel| panel.inner_padding(cx))
-    }
 }
 
 /// State used to move the window when the title bar area is dragged.
@@ -965,8 +960,6 @@ impl TabPanel {
             return Empty {}.into_any_element();
         };
 
-        let has_inner_padding = self.inner_padding(cx);
-
         let placeholder = self.drop_placeholder_animation;
         let placeholder_animation_name = self.drop_placeholder_animation_name.clone();
 
@@ -974,7 +967,6 @@ impl TabPanel {
             .id("active-panel")
             .group("")
             .flex_1()
-            .when(has_inner_padding, |this| this.pt_2())
             .child(
                 div()
                     .id("tab-content")

crates/workspace/Cargo.toml

@@ -14,6 +14,7 @@ utils = { path = "../utils" }
 
 gpui.workspace = true
 gpui-component.workspace = true
+gpui-base.workspace = true
 gix.workspace = true
 nostr.workspace = true
 

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

@@ -9,8 +9,9 @@ use dock::{Panel, PanelEvent};
 use gpui::prelude::*;
 use gpui::{
     AnyElement, App, Context, Entity, EventEmitter, FocusHandle, Focusable, Pixels, Render,
-    SharedString, Size, Window, div, px, size,
+    SharedString, Size, Window, div, px, relative, size,
 };
+use gpui_base::Button as BaseButton;
 use gpui_component::avatar::Avatar;
 use gpui_component::button::{Button, ButtonVariants};
 use gpui_component::dialog::{DialogDescription, DialogFooter, DialogHeader, DialogTitle};
@@ -19,8 +20,7 @@ use gpui_component::input::{Input, InputState, Textarea, TextareaState};
 use gpui_component::scroll::Scrollbar;
 use gpui_component::tooltip::Tooltip;
 use gpui_component::{
-    ActiveTheme, Icon, IconName, Selectable, Sizable, StyledExt, VirtualListScrollHandle,
+    ActiveTheme, Icon, Sizable, VirtualListScrollHandle, WindowExt, h_flex, v_flex, v_virtual_list,
-    WindowExt, h_flex, v_flex, v_virtual_list,
 };
 use nostr::prelude::Event;
 use signed_core::{RepoStatus, activity_subject};
@@ -29,11 +29,11 @@ use utils::relative_time;
 
 use super::helpers::placeholder;
 
-/// Height of one issue row in the virtual list: 12px padding on top and
+/// Height of one issue row in the virtual list: 8px vertical padding
-/// bottom, a 14px title line and a 24px meta line (the small avatar is the
+/// (`py_2`) on top and bottom, a 32px title line (`h_8`) and a 24px meta
-/// tallest item). Gpui's default line height is phi (~1.62x), so the title
+/// line (`h_6`), plus the 1px bottom border; the row totals 73px. The
-/// line is ~22.7px; the row totals ~71px.
+/// status chip (`size_7`, 28px) is shorter than the content.
-const ISSUE_ROW_HEIGHT: f32 = 71.;
+const ISSUE_ROW_HEIGHT: f32 = 73.;
 
 /// Status filter of the issues list, chosen via the header's filter buttons.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -42,7 +42,8 @@ enum IssueFilter {
     All,
     /// Issues whose resolved status is [`RepoStatus::Open`].
     Open,
-    /// Issues whose resolved status is [`RepoStatus::Closed`].
+    /// Issues whose resolved status is [`RepoStatus::Closed`] or
+    /// [`RepoStatus::Applied`] (both are "done" states).
     Closed,
 }
 
@@ -52,7 +53,10 @@ impl IssueFilter {
         match self {
             Self::All => true,
             Self::Open => store.status_of(issue) == RepoStatus::Open,
-            Self::Closed => store.status_of(issue) == RepoStatus::Closed,
+            Self::Closed => matches!(
+                store.status_of(issue),
+                RepoStatus::Closed | RepoStatus::Applied
+            ),
         }
     }
 }
@@ -111,10 +115,10 @@ impl IssuesView {
 
         h_flex()
             .id(ix)
-            .h(px(ISSUE_ROW_HEIGHT))
             .w_full()
             .gap_4()
-            .p_3()
+            .px_4()
+            .py_2()
             .border_b_1()
             .border_color(cx.theme().border)
             .items_start()
@@ -124,6 +128,7 @@ impl IssuesView {
                     .flex_1()
                     .child(
                         div()
+                            .h_8()
                             .min_w_0()
                             .text_ellipsis()
                             .whitespace_nowrap()
@@ -133,6 +138,7 @@ impl IssuesView {
                     )
                     .child(
                         h_flex()
+                            .h_6()
                             .gap_2()
                             .text_xs()
                             .child(
@@ -152,9 +158,10 @@ impl IssuesView {
                                     .text_color(cx.theme().muted_foreground)
                                     .child(SharedString::from(&id_hex[..8])),
                             )
-                            .child(div().child(age)),
+                            .child(SharedString::from(age)),
                     ),
             )
+            .hover(|this| this.bg(cx.theme().list_hover))
             .into_any_element()
     }
 
@@ -171,8 +178,8 @@ impl IssuesView {
                 CustomIconName::GitIssueClosed,
                 "closed",
                 "Issue is closed",
-                cx.theme().warning,
+                cx.theme().danger,
-                cx.theme().warning_foreground,
+                cx.theme().danger_foreground,
             ),
             RepoStatus::Draft => (
                 CustomIconName::GitIssueOngoing,
@@ -193,76 +200,163 @@ impl IssuesView {
         v_flex()
             .id(label)
             .flex_shrink_0()
-            .size_6()
+            .size_7()
             .items_center()
             .justify_center()
             .rounded(cx.theme().radius)
             .bg(bg)
-            .child(Icon::new(icon).xsmall().text_color(fg))
+            .child(Icon::new(icon).small().text_color(fg))
             .tooltip(move |window, cx| Tooltip::new(tooltip).build(window, cx))
             .into_any_element()
     }
 
     fn render_header(&self, cx: &mut Context<Self>) -> AnyElement {
+        let store = self.store.read(cx);
+        let (total, open, closed) =
+            store
+                .issues
+                .iter()
+                .fold(
+                    (0usize, 0usize, 0usize),
+                    |(total, open, closed), issue| match store.status_of(issue) {
+                        RepoStatus::Open => (total + 1, open + 1, closed),
+                        RepoStatus::Closed => (total + 1, open, closed + 1),
+                        RepoStatus::Draft | RepoStatus::Applied => (total + 1, open, closed),
+                    },
+                );
+
         h_flex()
+            .px_4()
             .w_full()
-            .items_center()
             .gap_3()
-            .px_3()
-            .pb_2()
             .border_b_1()
             .border_color(cx.theme().border)
             .child(
-                div()
+                h_flex()
-                    .text_sm()
+                    .h_12()
-                    .text_color(cx.theme().muted_foreground)
+                    .gap_2()
-                    .font_semibold()
+                    .child(
-                    .child("Issues"),
+                        BaseButton::new("all")
-            )
+                            .flex()
+                            .items_center()
+                            .h_7()
+                            .px_2()
+                            .gap_1()
+                            .child(Icon::new(CustomIconName::GitIssueDone))
+                            .child(div().text_sm().child("All"))
                             .child(
                                 h_flex()
-                    .gap_1()
+                                    .justify_center()
-                    .child(
+                                    .ml_2()
-                        Button::new("all")
+                                    .px_1()
-                            .icon(CustomIconName::GitIssueOpen)
+                                    .py_0p5()
-                            .label("All")
+                                    .min_w_4()
-                            .ghost()
+                                    .text_size(px(8.))
+                                    .bg(cx.theme().muted)
+                                    .text_color(cx.theme().muted_foreground)
+                                    .rounded(cx.theme().radius)
+                                    .line_height(relative(1.))
+                                    .child(SharedString::from(total.to_string())),
+                            )
+                            .text_color(cx.theme().button_foreground)
+                            .rounded(cx.theme().radius)
+                            .hover(|this| this.bg(cx.theme().button_hover))
+                            .active(|this| this.bg(cx.theme().button_active))
                             .selected(self.filter == IssueFilter::All)
+                            .when(self.filter == IssueFilter::All, |this| {
+                                this.bg(cx.theme().button_active)
+                            })
                             .on_click(cx.listener(|this, _event, _window, cx| {
                                 this.filter = IssueFilter::All;
                                 cx.notify();
                             })),
                     )
                     .child(
-                        Button::new("open")
+                        BaseButton::new("open")
-                            .icon(CustomIconName::GitIssueOpen)
+                            .flex()
-                            .label("Open")
+                            .items_center()
-                            .ghost()
+                            .h_7()
+                            .px_2()
+                            .gap_1()
+                            .child(Icon::new(CustomIconName::GitIssueOpen))
+                            .child(div().text_sm().child("Open"))
+                            .child(
+                                h_flex()
+                                    .justify_center()
+                                    .ml_2()
+                                    .px_1()
+                                    .py_0p5()
+                                    .min_w_4()
+                                    .text_size(px(8.))
+                                    .bg(cx.theme().muted)
+                                    .text_color(cx.theme().muted_foreground)
+                                    .rounded(cx.theme().radius)
+                                    .line_height(relative(1.))
+                                    .child(SharedString::from(open.to_string())),
+                            )
+                            .text_color(cx.theme().button_foreground)
+                            .rounded(cx.theme().radius)
+                            .hover(|this| this.bg(cx.theme().button_hover))
                             .selected(self.filter == IssueFilter::Open)
+                            .when(self.filter == IssueFilter::Open, |this| {
+                                this.bg(cx.theme().button_active)
+                            })
                             .on_click(cx.listener(|this, _event, _window, cx| {
                                 this.filter = IssueFilter::Open;
                                 cx.notify();
                             })),
                     )
                     .child(
-                        Button::new("closed")
+                        BaseButton::new("closed")
-                            .icon(CustomIconName::GitIssueClosed)
+                            .flex()
-                            .label("Closed")
+                            .items_center()
-                            .ghost()
+                            .h_7()
+                            .px_2()
+                            .gap_1()
+                            .child(Icon::new(CustomIconName::GitIssueClosed))
+                            .child(div().text_sm().child("Closed"))
+                            .child(
+                                h_flex()
+                                    .justify_center()
+                                    .ml_2()
+                                    .px_1()
+                                    .py_0p5()
+                                    .min_w_4()
+                                    .text_size(px(8.))
+                                    .bg(cx.theme().muted)
+                                    .text_color(cx.theme().muted_foreground)
+                                    .rounded(cx.theme().radius)
+                                    .line_height(relative(1.))
+                                    .child(SharedString::from(closed.to_string())),
+                            )
+                            .text_color(cx.theme().button_foreground)
+                            .rounded(cx.theme().radius)
+                            .hover(|this| this.bg(cx.theme().button_hover))
                             .selected(self.filter == IssueFilter::Closed)
+                            .when(self.filter == IssueFilter::Closed, |this| {
+                                this.bg(cx.theme().button_active)
+                            })
                             .on_click(cx.listener(|this, _event, _window, cx| {
                                 this.filter = IssueFilter::Closed;
                                 cx.notify();
                             })),
                     ),
             )
-            // Spacer: pushes the button to the right edge.
             .child(div().flex_1())
             .child(
-                Button::new("new-issue")
+                BaseButton::new("new")
-                    .icon(IconName::Plus)
+                    .flex()
-                    .label("New issue")
+                    .items_center()
-                    .primary()
+                    .h_7()
+                    .px_2()
+                    .gap_1()
+                    .child(Icon::new(CustomIconName::CirclePlus))
+                    .child(div().text_sm().child("New issue"))
+                    .text_color(cx.theme().button_primary_foreground)
+                    .rounded(cx.theme().radius)
+                    .bg(cx.theme().button_primary)
+                    .hover(|this| this.bg(cx.theme().button_primary_hover))
+                    .active(|this| this.bg(cx.theme().button_primary_active))
                     .on_click(cx.listener(|this, _event, window, cx| {
                         open_new_issue_dialog(this.store.clone(), window, cx);
                     })),
@@ -283,8 +377,8 @@ fn open_new_issue_dialog(store: Entity<RepoStore>, window: &mut Window, cx: &mut
         let store = store.clone();
 
         dialog
-            .width(px(520.))
+            .keyboard(true)
-            .margin_top(px(50.))
+            .close_button(true)
             .content(move |body, _window, _cx| {
                 body.child(
                     DialogHeader::new()
@@ -383,7 +477,6 @@ impl Render for IssuesView {
 
         let sizes = self.item_sizes.clone();
         let scroll_handle = self.scroll_handle.clone();
-        let view = cx.entity().clone();
 
         v_flex()
             .size_full()
@@ -396,15 +489,20 @@ impl Render for IssuesView {
                     .w_full()
                     .when(count > 0, |this| {
                         this.child(
-                            v_virtual_list(view, "il", sizes, move |this, range, _window, cx| {
+                            v_virtual_list(
+                                cx.entity().clone(),
+                                "issues",
+                                sizes,
+                                move |this, range, _window, cx| {
                                     let issues = &this.store.read(cx).issues;
                                     range
                                         .map(|ix| {
-                                        let issue_ix = this.visible_issues[ix];
+                                            let issue = this.visible_issues[ix];
-                                        this.render_row(issue_ix, &issues[issue_ix], cx)
+                                            this.render_row(issue, &issues[issue], cx)
                                         })
                                         .collect()
-                            })
+                                },
+                            )
                             .track_scroll(&scroll_handle)
                             .size_full(),
                         )

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

@@ -18,11 +18,11 @@ use gpui_component::combobox::{
     Caret, Combobox, ComboboxEvent, ComboboxState, ComboboxTriggerContext,
 };
 use gpui_component::searchable_list::SearchableVec;
-use gpui_component::tab::{Tab, TabBar};
 use gpui_component::tag::Tag;
 use gpui_component::tree::TreeState;
 use gpui_component::{
-    ActiveTheme, Icon, IconName, Sizable, StyledExt, VirtualListScrollHandle, h_flex, v_flex,
+    ActiveTheme, Icon, IconName, Selectable, Sizable, StyledExt, VirtualListScrollHandle, h_flex,
+    v_flex,
 };
 use signed_core::Announcement;
 use signed_git::{CommitList, FileCommit};
@@ -960,7 +960,7 @@ impl RepoDetailView {
                             .child(
                                 div()
                                     .min_w_0()
-                                    .text_xs()
+                                    .text_sm()
                                     .text_color(cx.theme().muted_foreground)
                                     .line_clamp(2)
                                     .text_ellipsis()
@@ -1034,24 +1034,31 @@ impl RepoDetailView {
             .child(
                 h_flex()
                     .items_center()
+                    .gap_2()
                     .child(
-                        TabBar::new("repo-tabs")
+                        Button::new("files-tab")
-                            .segmented()
+                            .label("Files")
-                            .selected_index(self.active_tab)
+                            .selected(self.active_tab == 0)
-                            .child(Tab::new().label("Files"))
+                            .toggled(self.active_tab == 0)
-                            .child(Tab::new().label("Commits").when_some(
+                            .on_click(cx.listener(|this, _event, _window, cx| {
-                                commits_count,
+                                this.active_tab = 0;
-                                |this, count| {
+                                cx.notify();
-                                    this.suffix(
+                            })),
+                    )
+                    .child(
+                        Button::new("commits-tab")
+                            .label("Commits")
+                            .selected(self.active_tab == 1)
+                            .toggled(self.active_tab == 1)
+                            .when_some(commits_count, |this, count| {
+                                this.child(
                                     Tag::secondary()
                                         .xsmall()
-                                            .mr_1()
                                         .child(SharedString::from(count.to_string())),
                                 )
-                                },
+                            })
-                            ))
+                            .on_click(cx.listener(|this, _event, _window, cx| {
-                            .on_click(cx.listener(|this, index, _window, cx| {
+                                this.active_tab = 1;
-                                this.active_tab = *index;
                                 cx.notify();
                             })),
                     )

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

@@ -150,10 +150,6 @@ impl Panel for SidebarPanel {
     fn closable(&self, _cx: &App) -> bool {
         false
     }
-
-    fn inner_padding(&self, _cx: &App) -> bool {
-        false
-    }
 }
 
 impl EventEmitter<PanelEvent> for SidebarPanel {}

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

@@ -1,6 +1,6 @@
 use assets::CustomIconName;
 use gpui::prelude::*;
-use gpui::{AnyWindowHandle, App, Entity, SharedString, Subscription, Window, div, px};
+use gpui::{AnyWindowHandle, App, Entity, SharedString, Subscription, Window, div};
 use gpui_component::button::{Button, ButtonVariants};
 use gpui_component::dialog::{DialogDescription, DialogFooter, DialogHeader, DialogTitle};
 use gpui_component::form::{field, v_form};
@@ -49,8 +49,9 @@ pub fn open(window: &mut Window, cx: &mut App) {
         let state = state.clone();
 
         dialog
-            .width(px(420.))
+            .close_button(false)
-            .margin_top(px(50.))
+            .overlay_closable(false)
+            .keyboard(false)
             .content(move |content, _window, cx| {
                 let busy = state.read(cx).busy;
                 let error = state.read(cx).error.clone();