Skip to content

Feat/UI polish #280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
quakj wants to merge 3 commits into
base: dev
Choose a base branch
from
Draft

Feat/UI polish #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5808882
extract shared cancel button and add esc handling
quakj Jul 1, 2026
267d5e9
extract popover UI helpers and wire up Esc for all dialogs
quakj Jul 1, 2026
2f06c04
add description to commit pane details
quakj Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 127 additions & 59 deletions crates/gitcomet-ui-gpui/src/view/panels/layout.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,18 @@ fn commit_details_monospace_element(value: AnyElement) -> AnyElement {
.into_any_element()
}

fn split_commit_subject_body(message: &str) -> (&str, &str) {
let trimmed = message.trim();
if let Some(newline_pos) = trimmed.find('\n') {
let subject = trimmed[..newline_pos].trim_end();
let body = trimmed[newline_pos + 1..]
.trim_start_matches(|c: char| c == '\n' || c == '\r');
(subject, body)
} else {
(trimmed, "")
}
}

fn commit_sha_link_style(theme: AppTheme) -> gpui::HighlightStyle {
gpui::HighlightStyle {
color: Some(theme.colors.accent.into()),
Expand Down Expand Up @@ -554,10 +566,11 @@ impl DetailsPaneView {
repo_id: RepoId,
cx: &mut gpui::Context<Self>,
) {
let (highlights, links) = commit_message_sha_highlights(message, theme);
let (_subject, body) = split_commit_subject_body(message);
let (highlights, links) = commit_message_sha_highlights(body, theme);
self.commit_details_message_input.update(cx, |input, cx| {
if input.text() != message {
input.set_text(message.to_string(), cx);
if input.text() != body {
input.set_text(body.to_string(), cx);
}
input.set_highlights(highlights, cx);
});
Expand Down Expand Up @@ -645,9 +658,10 @@ impl DetailsPaneView {
message: &str,
cx: &mut gpui::Context<Self>,
) {
let (_subject, body) = split_commit_subject_body(message);
self.commit_details_message_input.update(cx, |input, cx| {
if input.text() != message {
input.set_text(message.to_string(), cx);
if input.text() != body {
input.set_text(body.to_string(), cx);
}
input.set_highlights(Vec::new(), cx);
});
Expand Down Expand Up @@ -834,36 +848,63 @@ impl DetailsPaneView {
cx,
);

let message = div()
.id(("commit_details_message_container", repo_id.0))
.relative()
let (subject, body) = split_commit_subject_body(details.message.as_str());

let subject_label = div()
.w_full()
.min_w(px(0.0))
.child(restrict_scroll_to_vertical_axis(
div()
.id(("commit_details_message_scroll_surface", repo_id.0))
.debug_selector(|| {
"commit_details_message_scroll_surface".to_string()
})
.relative()
.w_full()
.min_w(px(0.0))
.max_h(px(COMMIT_DETAILS_MESSAGE_MAX_HEIGHT_PX))
.pr(components::Scrollbar::visible_gutter(
self.commit_scroll.clone(),
components::ScrollbarAxis::Vertical,
))
.overflow_y_scroll()
.track_scroll(&self.commit_scroll)
.child(self.commit_details_message_sha_menu.clone()),
))
.child(
components::Scrollbar::new(
("commit_details_message_scrollbar", repo_id.0),
self.commit_scroll.clone(),
.font_weight(FontWeight::BOLD)
.child(subject.to_string());

let message: Div = if body.is_empty() {
subject_label
} else {
div()
.flex()
.flex_col()
.w_full()
.min_w(px(0.0))
.child(subject_label)
.child(
div()
.w_full()
.border_t_1()
.border_color(theme.colors.border)
.my(px(4.0)),
)
.render(theme),
);
.child(
div()
.id(("commit_details_message_container", repo_id.0))
.relative()
.w_full()
.min_w(px(0.0))
.child(restrict_scroll_to_vertical_axis(
div()
.id(("commit_details_message_scroll_surface", repo_id.0))
.debug_selector(|| {
"commit_details_message_scroll_surface".to_string()
})
.relative()
.w_full()
.min_w(px(0.0))
.max_h(px(COMMIT_DETAILS_MESSAGE_MAX_HEIGHT_PX))
.pr(components::Scrollbar::visible_gutter(
self.commit_scroll.clone(),
components::ScrollbarAxis::Vertical,
))
.overflow_y_scroll()
.track_scroll(&self.commit_scroll)
.child(self.commit_details_message_sha_menu.clone()),
))
.child(
components::Scrollbar::new(
("commit_details_message_scrollbar", repo_id.0),
self.commit_scroll.clone(),
)
.render(theme),
),
)
};

div()
.flex()
Expand Down Expand Up @@ -1010,36 +1051,63 @@ impl DetailsPaneView {
cx,
);

let message = div()
.id(("commit_details_message_container", repo_id.0))
.relative()
let (subject, body) = split_commit_subject_body(details.message.as_str());

let subject_label = div()
.w_full()
.min_w(px(0.0))
.child(restrict_scroll_to_vertical_axis(
div()
.id(("commit_details_message_scroll_surface", repo_id.0))
.debug_selector(|| {
"commit_details_message_scroll_surface".to_string()
})
.relative()
.w_full()
.min_w(px(0.0))
.max_h(px(COMMIT_DETAILS_MESSAGE_MAX_HEIGHT_PX))
.pr(components::Scrollbar::visible_gutter(
self.commit_scroll.clone(),
components::ScrollbarAxis::Vertical,
))
.overflow_y_scroll()
.track_scroll(&self.commit_scroll)
.child(self.commit_details_message_sha_menu.clone()),
))
.child(
components::Scrollbar::new(
("commit_details_message_scrollbar", repo_id.0),
self.commit_scroll.clone(),
.font_weight(FontWeight::BOLD)
.child(subject.to_string());

let message: Div = if body.is_empty() {
subject_label
} else {
div()
.flex()
.flex_col()
.w_full()
.min_w(px(0.0))
.child(subject_label)
.child(
div()
.w_full()
.border_t_1()
.border_color(theme.colors.border)
.my(px(4.0)),
)
.render(theme),
);
.child(
div()
.id(("commit_details_message_container", repo_id.0))
.relative()
.w_full()
.min_w(px(0.0))
.child(restrict_scroll_to_vertical_axis(
div()
.id(("commit_details_message_scroll_surface", repo_id.0))
.debug_selector(|| {
"commit_details_message_scroll_surface".to_string()
})
.relative()
.w_full()
.min_w(px(0.0))
.max_h(px(COMMIT_DETAILS_MESSAGE_MAX_HEIGHT_PX))
.pr(components::Scrollbar::visible_gutter(
self.commit_scroll.clone(),
components::ScrollbarAxis::Vertical,
))
.overflow_y_scroll()
.track_scroll(&self.commit_scroll)
.child(self.commit_details_message_sha_menu.clone()),
))
.child(
components::Scrollbar::new(
("commit_details_message_scrollbar", repo_id.0),
self.commit_scroll.clone(),
)
.render(theme),
),
)
};

div()
.flex()
Expand Down
46 changes: 43 additions & 3 deletions crates/gitcomet-ui-gpui/src/view/panels/popover.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,9 @@ fn popover_is_confirm_dialog(kind: &PopoverKind) -> bool {
| PopoverKind::ForceDeleteBranchConfirm { .. }
| PopoverKind::ForceRemoveWorktreeConfirm { .. }
| PopoverKind::DiscardChangesConfirm { .. }
| PopoverKind::ResetPrompt { .. }
| PopoverKind::PullReconcilePrompt { .. }
| PopoverKind::TerminalShutdownConfirm(_)
| PopoverKind::Repo {
kind: RepoPopoverKind::Remote(RemotePopoverKind::RemoveConfirm { .. }),
..
Expand Down Expand Up @@ -374,6 +377,35 @@ pub(super) fn hotkey_hint(
.child(label)
}

pub(super) fn cancel_button(
id: &'static str,
hint_debug_selector: &'static str,
theme: AppTheme,
) -> components::Button {
components::Button::new(id, "Cancel")
.separated_end_slot(hotkey_hint(theme, hint_debug_selector, "Esc"))
.style(components::ButtonStyle::Outlined)
}

pub(super) fn popover_title(title: impl Into<SharedString>) -> gpui::Div {
let title: SharedString = title.into();
div()
.px_2()
.py_1()
.text_sm()
.font_weight(FontWeight::BOLD)
.child(title)
}

pub(super) fn input_label(theme: AppTheme, label: &'static str) -> gpui::Div {
div()
.px_2()
.py_1()
.text_xs()
.text_color(theme.colors.text_muted)
.child(label)
}

fn popover_anchor_corner(kind: &PopoverKind) -> Anchor {
match kind {
PopoverKind::PullPicker
Expand Down Expand Up @@ -1302,6 +1334,12 @@ impl PopoverHost {
kind: RepoPopoverKind::Submodule(SubmodulePopoverKind::AddPrompt),
..
})
| Some(PopoverKind::Repo {
kind: RepoPopoverKind::Submodule(
SubmodulePopoverKind::ChangePointerPrompt { .. }
),
..
})
) || self.popover.as_ref().is_some_and(popover_is_confirm_dialog)
}

Expand Down Expand Up @@ -1373,9 +1411,11 @@ impl PopoverHost {
Some(PopoverKind::CreateBranchFromRefPrompt { .. })
| Some(PopoverKind::StashPrompt)
| Some(PopoverKind::CommitPrompt { .. })
| Some(PopoverKind::StashPickerPrompt { .. }) => {
self.dismiss_inline_popover(window, cx)
}
| Some(PopoverKind::StashPickerPrompt { .. })
| Some(PopoverKind::Repo {
kind: RepoPopoverKind::Submodule(SubmodulePopoverKind::ChangePointerPrompt { .. }),
..
}) => self.dismiss_inline_popover(window, cx),
Some(PopoverKind::CloneRepo)
| Some(PopoverKind::RecentRepositoryPicker)
| Some(PopoverKind::CreateTagPrompt { .. })
Expand Down
9 changes: 1 addition & 8 deletions crates/gitcomet-ui-gpui/src/view/panels/popover/branch_picker.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,7 @@ pub(super) fn panel(this: &mut PopoverHost, cx: &mut gpui::Context<PopoverHost>)
.flex_col()
.min_w(scaled_px(420.0))
.max_w(scaled_px(820.0))
.child(
div()
.px_2()
.py_1()
.text_sm()
.font_weight(FontWeight::BOLD)
.child(title),
)
.child(popover_title(title))
.child(div().border_t_1().border_color(theme.colors.border));

if let Some(repo) = this.active_repo() {
Expand Down
33 changes: 11 additions & 22 deletions crates/gitcomet-ui-gpui/src/view/panels/popover/checkout_remote_branch_prompt.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,7 @@ pub(super) fn panel(
.flex()
.flex_col()
.w(scaled_px(540.0))
.child(
div()
.px_2()
.py_1()
.text_sm()
.font_weight(FontWeight::BOLD)
.child("Checkout remote branch"),
)
.child(popover_title("Checkout remote branch"))
.child(div().border_t_1().border_color(theme.colors.border))
.child(
div()
Expand All @@ -35,14 +28,7 @@ pub(super) fn panel(
.text_color(theme.colors.text_muted)
.child(format!("Remote branch: {upstream}")),
)
.child(
div()
.px_2()
.py_1()
.text_xs()
.text_color(theme.colors.text_muted)
.child("Local branch name"),
)
.child(input_label(theme, "Local branch name"))
.child(
div()
.px_2()
Expand All @@ -60,12 +46,15 @@ pub(super) fn panel(
.items_center()
.justify_between()
.child(
components::Button::new("checkout_remote_branch_cancel", "Cancel")
.focus_handle(this.checkout_remote_branch_cancel_focus_handle.clone())
.style(components::ButtonStyle::Outlined)
.on_click(theme, cx, |this, _e, window, cx| {
this.dismiss_prompt_popover(window, cx);
}),
cancel_button(
"checkout_remote_branch_cancel",
"checkout_remote_branch_cancel_hint",
theme,
)
.focus_handle(this.checkout_remote_branch_cancel_focus_handle.clone())
.on_click(theme, cx, |this, _e, window, cx| {
this.dismiss_prompt_popover(window, cx);
}),
)
.child(
components::Button::new("checkout_remote_branch_go", "Checkout")
Expand Down
Loading
Loading