reya/signed
1
0
Fork 0
Code Issues Pull Requests Actions 5 Releases 2 Activity

feat: redesign the dock and tabbar (#22)
Rust / build (macos-latest, stable) (push) Canceled after 0s
Details
Rust / build (ubuntu-latest, stable) (push) Canceled after 0s
Details
Rust / build (windows-latest, stable) (push) Canceled after 0s
Details

Browse Source 
Reviewed-on: #22
This commit was merged in pull request #22.
This commit is contained in:
reya
2026-09-25 08:37:18 +00:00
parent a85b5ee87b
commit e2bce4e074
26 changed files with 1046 additions and 1197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/assets/assets/themes/signed.json
+6 -6
View File
@@ -77,9 +77,9 @@
"success.foreground": "#052E16",
"switch.background": "#CECECE",
"switch.thumb.background": "#FFFFFF",
"tab.background": "#00000000",
"tab.active.background": "#EBFFC1",
"tab.active.foreground": "#3F6212",
"tab.background": "#E8E8E8",
"tab.active.background": "#F5F5F5",
"tab.active.foreground": "#18181B",
"tab.foreground": "#646464",
"tab_bar.background": "#F0F0F0",
"tab_bar.segmented.background": "#F0F0F0",
@@ -286,9 +286,9 @@
"success.foreground": "#052E16",
"switch.background": "#484848",
"switch.thumb.background": "#0A0A0A",
"tab.background": "#00000000",
"tab.active.background": "#19200A",
"tab.active.foreground": "#C6FF4D",
"tab.background": "#2E2E2E",
"tab.active.background": "#2A2A2A",
"tab.active.foreground": "#FAFAFA",
"tab.foreground": "#B4B4B4",
"tab_bar.background": "#191919",
"tab_bar.segmented.background": "#191919",
crates/dock/src/dock_area.rs
+2 -30
View File
@@ -11,22 +11,19 @@ use gpui::{
};
use gpui_base::dock::{
DockArea, DockAreaRenderer, DockContext, DockEvent, DockPlacement, NodeId, PanelState,
PanelView, TabGroupRenderer, TilesRenderer,
PanelView, TabGroupRenderer,
};
use gpui_base::resize_handle;
use gpui_component::scroll::ScrollbarMode;
use gpui_component::{ActiveTheme as _, Side};
use crate::invalid_panel::InvalidPanel;
use crate::panel_handle;
use crate::tab_panel::SignedTabGroupSkin;
use crate::tiles::SignedTilesSkin;
use crate::{TAB_BAR_HEIGHT, panel_handle};
/// State the skin shares with its per-container renderers.
pub(crate) struct SkinShared {
area: WeakEntity<DockArea>,
toggle_button_visible: Cell<bool>,
tiles_scrollbar_mode: Cell<Option<ScrollbarMode>>,
/// The dock whose resize handle is being dragged, if any. Only one can be.
resizing_dock: Cell<Option<DockPlacement>>,
}
@@ -40,10 +37,6 @@ impl SkinShared {
self.toggle_button_visible.get()
}
pub(crate) fn tiles_scrollbar_mode(&self) -> Option<ScrollbarMode> {
self.tiles_scrollbar_mode.get()
}
pub(crate) fn resizing_dock(&self) -> &Cell<Option<DockPlacement>> {
&self.resizing_dock
}
@@ -73,7 +66,6 @@ impl SignedDockSkin {
shared: Rc::new(SkinShared {
area: cx.weak_entity(),
toggle_button_visible: Cell::new(true),
tiles_scrollbar_mode: Cell::new(None),
resizing_dock: Cell::new(None),
}),
})
@@ -92,16 +84,6 @@ impl SignedDockSkin {
self.shared.toggle_button_visible.set(visible);
self.shared.notify(cx);
}
/// When a tiles canvas shows its scrollbar. `None` follows the theme.
pub fn tiles_scrollbar_mode(&self) -> Option<ScrollbarMode> {
self.shared.tiles_scrollbar_mode()
}
pub fn set_tiles_scrollbar_mode(&self, mode: Option<ScrollbarMode>, cx: &mut App) {
self.shared.tiles_scrollbar_mode.set(mode);
self.shared.notify(cx);
}
}
/// Payload a dock's resize handle drags.
@@ -154,16 +136,10 @@ impl DockAreaRenderer for SignedDockSkin {
window: &mut Window,
cx: &mut App,
) -> AnyElement {
let placement = dock.placement();
div()
.flex()
.size_full()
.relative()
// A closed bottom dock keeps a strip, and that strip is the tab bar.
.when(!dock.is_open() && placement.is_bottom(), |this| {
this.h(TAB_BAR_HEIGHT)
})
.child(content)
.child(self.render_resize_handle(dock, window, cx))
.child(DockResizeTracker {
@@ -190,10 +166,6 @@ impl DockAreaRenderer for SignedDockSkin {
fn tab_group_renderer(&self) -> Rc<dyn TabGroupRenderer> {
Rc::new(SignedTabGroupSkin::new(self.shared().clone()))
}
fn tiles_renderer(&self) -> Rc<dyn TilesRenderer> {
Rc::new(SignedTilesSkin::new(self.shared().clone()))
}
}
impl SignedDockSkin {
crates/dock/src/lib.rs
-1
View File
@@ -6,7 +6,6 @@ use gpui_base::dock::PanelView;
mod dock_area;
mod invalid_panel;
mod tab_panel;
mod tiles;
mod window_controls;
pub use dock_area::SignedDockSkin;
crates/dock/src/tab_panel.rs
+280 -165
View File
@@ -5,9 +5,9 @@ use std::time::Duration;
use gpui::prelude::FluentBuilder as _;
use gpui::{
Anchor, Animation, AnimationExt as _, AnyElement, AnyView, App, AppContext as _, Bounds,
Context, Div, Empty, InteractiveElement as _, IntoElement, ParentElement as _, Pixels, Point,
Render, ScrollHandle, SharedString, Stateful, StatefulInteractiveElement as _, StyleRefinement,
Animation, AnimationExt as _, AnyElement, AnyView, App, AppContext as _, Bounds, Context, Div,
Empty, InteractiveElement as _, IntoElement, ParentElement as _, Pixels, Point, Render,
ScrollHandle, SharedString, Stateful, StatefulInteractiveElement as _, StyleRefinement,
Styled as _, Window, div, px, size,
};
use gpui_base::dock::{
@@ -18,17 +18,22 @@ use gpui_base::{ElementExt, InteractiveElementExt, Tab, Tabs};
use gpui_component::animation::{Lerp as _, ease_out_cubic};
use gpui_component::button::{Button, ButtonVariants as _};
use gpui_component::dock::{ClosePanel, PanelControl, PanelHandle, ToggleZoom};
use gpui_component::menu::DropdownMenu as _;
use gpui_component::{
ActiveTheme as _, Disableable as _, IconName, Selectable as _, Sizable as _, h_flex, v_flex,
};
use gpui_component::{ActiveTheme as _, Disableable as _, IconName, Sizable as _, h_flex, v_flex};
use signed_ui::title_bar_drag_handlers;
use crate::dock_area::SkinShared;
use crate::{TAB_BAR_HEIGHT, t, window_controls};
/// The drag preview's size, reported to base for the drop placeholder.
/// A rough size for the drag preview, reported to base so a drop placeholder
/// knows where to fly in from.
///
/// The preview itself fits its content, so this is an estimate used only to
/// place the placeholder.
const DRAG_PREVIEW_SIZE: gpui::Size<gpui::Pixels> = size(px(96.), px(30.));
const COLLAPSED_TAB_BAR_SELECTOR: &str = "signed-dock-collapsed-tab-bar";
const ACTIVE_TAB_SELECTOR: &str = "signed-dock-active-tab";
const ACTIVE_TAB_CLOSE_SELECTOR: &str = "signed-dock-active-tab-close";
const TAB_HOVER_GROUP: &str = "signed-dock-tab";
/// A panel's title, or its registered name when the panel has no handle.
pub(crate) fn panel_title(
@@ -43,24 +48,23 @@ pub(crate) fn panel_title(
}
/// The preview that follows the cursor while a panel is dragged.
///
/// Base's `DragPanel` is the payload and draws nothing, this is the appearance half.
/// It fits its content rather than a fixed width, so a long title is never cut off.
struct DragPanelPreview {
panel: Arc<dyn BasePanelView>,
}
impl Render for DragPanelPreview {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
div()
h_flex()
.id("drag-panel")
.cursor_grab()
.py_1()
.px_3()
.w_24()
.overflow_hidden()
.p_1()
.whitespace_nowrap()
.border_1()
.border_color(cx.theme().border)
.rounded(cx.theme().radius)
.rounded(cx.theme().radius_lg)
.text_color(cx.theme().tab_foreground)
.bg(cx.theme().tokens.tab_active)
.opacity(0.75)
@@ -69,9 +73,14 @@ impl Render for DragPanelPreview {
}
/// The zoom affordance for the group's displayed panel, if it offers one.
/// The panel must offer a control and be zoomable, base refuses a zoom otherwise.
fn zoom_control(group: &TabGroupContext, cx: &App) -> Option<PanelControl> {
let panel = group.active_panel()?;
panel_zoom_control(group.active_panel()?, cx)
}
/// The zoom affordance `panel` offers, if any.
///
/// The panel must offer a control and be zoomable, base refuses a zoom otherwise.
fn panel_zoom_control(panel: &Arc<dyn BasePanelView>, cx: &App) -> Option<PanelControl> {
panel
.zoomable(cx)
.then(|| PanelHandle::of(panel).and_then(|handle| handle.zoom_control(cx)))
@@ -79,16 +88,17 @@ fn zoom_control(group: &TabGroupContext, cx: &App) -> Option<PanelControl> {
}
/// The left-most, top-most tab group in a container.
///
/// A left dock's collapse button lives in this group.
fn left_top_group(node: &PaneNode) -> Option<NodeId> {
match node.kind() {
PaneRef::Tabs { .. } => Some(node.id()),
PaneRef::Split { children, .. } => children.first().and_then(left_top_group),
PaneRef::Tiles { .. } => None,
}
}
/// The right-most, top-most tab group.
///
/// A vertical split picks its first child, a horizontal split picks its last.
fn right_top_group(node: &PaneNode) -> Option<NodeId> {
match node.kind() {
@@ -98,7 +108,53 @@ fn right_top_group(node: &PaneNode) -> Option<NodeId> {
gpui::Axis::Horizontal => children.last(),
}
.and_then(right_top_group),
PaneRef::Tiles { .. } => None,
}
}
/// The bottom or right dock whose root tab group is this one, if any.
///
/// Base keeps a dock's last group, so the skin removes these docks as a whole.
fn dock_root_group(
shared: &SkinShared,
group: &TabGroupContext,
cx: &App,
) -> Option<DockPlacement> {
let area = shared.area().upgrade()?;
let area = area.read(cx);
[DockPlacement::Bottom, DockPlacement::Right]
.into_iter()
.find(|placement| {
area.layout(*placement)
.is_some_and(|tree| tree.root().id() == group.node())
})
}
/// Close `panel`, removing its dock instead when base would refuse an empty one.
///
/// A bottom or right dock's only panel is that case, so the whole dock goes.
fn close_panel(
shared: &SkinShared,
group: &TabGroupContext,
panel: &Arc<dyn BasePanelView>,
window: &mut Window,
cx: &mut App,
) {
if !panel.closable(cx) {
return;
}
let dock = (group.panels().len() <= 1)
.then(|| dock_root_group(shared, group, cx))
.flatten();
match dock {
Some(placement) => {
_ = shared.area().update(cx, |area, cx| {
area.remove_dock(placement, window, cx);
});
}
None => group.close(panel.panel_id(cx), window, cx),
}
}
@@ -144,26 +200,14 @@ impl SignedTabGroupSkin {
left == group.node() && group.panels().len() == 1
}
/// The bottom or right dock whose root tab group is this one, if any.
/// Base keeps a dock's last group, so the skin removes these docks as a whole.
fn is_dock_root_group(&self, group: &TabGroupContext, cx: &App) -> Option<DockPlacement> {
let area = self.shared.area().upgrade()?;
let area = area.read(cx);
[DockPlacement::Bottom, DockPlacement::Right]
.into_iter()
.find(|placement| {
area.layout(*placement)
.is_some_and(|tree| tree.root().id() == group.node())
})
}
/// The tab's drag payload, or `None` when the group must not be rearranged.
///
/// A locked group never is, a bottom or right dock root always is.
fn tab_drag(&self, group: &TabGroupContext, ix: usize, cx: &App) -> Option<DragPanel> {
if group.is_locked() {
return None;
}
if !group.is_draggable() && self.is_dock_root_group(group, cx).is_none() {
if !group.is_draggable() && dock_root_group(&self.shared, group, cx).is_none() {
return None;
}
group.drag_panel(ix, cx)
@@ -275,95 +319,6 @@ impl SignedTabGroupSkin {
)
}
/// The trailing controls, the panel's own buttons, zoom and the ellipsis menu.
fn render_toolbar(
&self,
group: &TabGroupContext,
window: &mut Window,
cx: &mut App,
) -> impl IntoElement {
if group.is_collapsed() {
return div();
}
let zoomed = group.is_zoomed();
let handle = group.active_panel().and_then(PanelHandle::of);
let control = zoom_control(group, cx);
let toolbar_zoom = control.is_some_and(|control| control.toolbar_visible());
let menu_zoom = control.is_some_and(|control| control.menu_visible());
// A bottom or right dock's only panel cannot close through the group.
// The close item is offered, the skin removes the whole dock instead.
let closable = group.is_closable()
|| (self.is_dock_root_group(group, cx).is_some()
&& group.active_panel().is_some_and(|panel| panel.closable(cx)));
let buttons = handle.and_then(|handle| handle.toolbar_buttons(window, cx));
let panel = handle.map(|handle| handle.panel());
h_flex()
.gap_1()
.occlude()
.when_some(buttons, |this, buttons| {
this.children(
buttons
.into_iter()
.map(|button| button.small().ghost().tab_stop(false)),
)
})
.map(|this| {
let value = if zoomed {
Some(("zoom-out", IconName::Minimize, t("Dock.Zoom Out")))
} else if toolbar_zoom {
Some(("zoom-in", IconName::Maximize, t("Dock.Zoom In")))
} else {
None
};
if let Some((id, icon, tooltip)) = value {
this.child(
Button::new(id)
.icon(icon)
.small()
.ghost()
.tab_stop(false)
.tooltip_with_action(tooltip, &ToggleZoom, None)
.selected(zoomed)
.on_click({
let group = group.clone();
move |_, window, cx| group.toggle_zoom(window, cx)
}),
)
} else {
this
}
})
.child(
Button::new("menu")
.icon(IconName::Ellipsis)
.small()
.ghost()
.tab_stop(false)
.dropdown_menu(move |menu, window, cx| {
menu.when_some(panel.clone(), |menu, panel| {
panel.dropdown_menu(menu, window, cx)
})
.separator()
.menu_with_disabled(
if zoomed {
t("Dock.Zoom Out")
} else {
t("Dock.Zoom In")
},
Box::new(ToggleZoom),
!menu_zoom,
)
.when(closable, |menu| {
menu.separator().menu(t("Dock.Close"), Box::new(ClosePanel))
})
})
.anchor(Anchor::TopRight),
)
}
/// One tab of the pill strip.
/// While collapsed, tabs lose the active style and all interactions.
/// The strip is also how a closed bottom dock is opened again.
@@ -382,25 +337,73 @@ impl SignedTabGroupSkin {
let droppable = group.is_droppable();
let drag = self.tab_drag(group, ix, cx);
let handle = PanelHandle::of(&panel);
let id = SharedString::from(format!("close-tab:{}:{ix}", group.node().as_u64()));
let closable = !collapsed
&& (group.is_closable()
|| (dock_root_group(&self.shared, group, cx).is_some() && panel.closable(cx)));
// Whether a double-click zooms this tab in.
let can_zoom_in = panel_zoom_control(&panel, cx).is_some();
Tab::new(ix)
.h_6()
.px_3()
.text_sm()
.whitespace_nowrap()
.group(TAB_HOVER_GROUP)
.when(active, |this| {
this.debug_selector(|| ACTIVE_TAB_SELECTOR.to_string())
})
.flex()
.items_center()
.justify_center()
.gap_1()
.flex_shrink_0()
.h_7()
.min_w_40()
.gap_1()
.px_1p5()
.text_sm()
.overflow_hidden()
.rounded(cx.theme().radius)
.text_color(cx.theme().foreground)
.map(|this| match handle.and_then(|handle| handle.tab_name(cx)) {
Some(tab_name) => this.child(tab_name),
None => this.child(panel_title(&panel, window, cx)),
.text_color(cx.theme().tab_foreground)
.child(
h_flex()
.flex_1()
.h_6()
.items_center()
.overflow_hidden()
.whitespace_nowrap()
.map(|this| match handle.and_then(|handle| handle.tab_name(cx)) {
Some(tab_name) => this.child(tab_name),
None => this.child(panel_title(&panel, window, cx)),
}),
)
.when(closable, |this| {
this.child(
div()
.flex_shrink_0()
.when(active, |this| {
this.debug_selector(|| ACTIVE_TAB_CLOSE_SELECTOR.to_string())
})
.when(!active, |this| {
this.invisible()
.group_hover(TAB_HOVER_GROUP, |this| this.visible())
})
.child(
Button::new(id)
.icon(IconName::Close)
.tooltip(t("Dock.Close"))
.ghost()
.xsmall()
.tab_stop(false)
.on_click({
let group = group.clone();
let shared = self.shared.clone();
let panel = panel.clone();
move |_, window, cx| {
cx.stop_propagation();
close_panel(&shared, &group, &panel, window, cx);
}
}),
),
)
})
// Pill style, the selected tab is the filled pill, others show only on hover.
.styles(|styles| {
styles.selected(|style| {
style
@@ -412,15 +415,15 @@ impl SignedTabGroupSkin {
if active {
this
} else {
this.text_color(cx.theme().secondary_foreground)
.bg(cx.theme().secondary_hover)
this.text_color(cx.theme().tab_foreground)
.bg(cx.theme().tab)
}
})
.selected(active)
.on_click({
let group = group.clone();
let area = self.shared.area().clone();
move |_, window, cx| {
move |event, window, cx| {
group.select_tab(ix, window, cx);
// Clicking the strip of a collapsed bottom dock reopens it.
@@ -428,7 +431,15 @@ impl SignedTabGroupSkin {
_ = area.update(cx, |area, cx| {
area.toggle_dock(DockPlacement::Bottom, window, cx);
});
return;
}
// A double-click zooms the tab's panel
if event.click_count() < 2 || (!group.is_zoomed() && !can_zoom_in) {
return;
}
group.toggle_zoom(window, cx);
}
})
.when(!collapsed, |this| {
@@ -531,10 +542,6 @@ impl TabGroupRenderer for SignedTabGroupSkin {
if group.panels().is_empty() {
return div().id("tab-panel");
}
// Base refuses an empty dock, so closing its only panel removes the dock.
let dock_to_remove = (group.panels().len() <= 1)
.then(|| self.is_dock_root_group(group, cx))
.flatten();
let shared = self.shared.clone();
// `v_flex`, a plain `div` ignores `flex_grow` and the content would collapse.
@@ -543,14 +550,10 @@ impl TabGroupRenderer for SignedTabGroupSkin {
.size_full()
.overflow_hidden()
.bg(cx.theme().tokens.background)
// A collapsed group has no content, so these actions are not registered.
.when(!group.is_collapsed(), |this| {
this.on_action({
let group = group.clone();
move |_: &ToggleZoom, window, cx| {
// A panel with no zoom control is not zoomed in by the keybinding.
// Zooming out is never refused.
// Otherwise a zoomed panel that lost its control would strand the user.
if !group.is_zoomed() && control.is_none() {
return;
}
@@ -564,18 +567,7 @@ impl TabGroupRenderer for SignedTabGroupSkin {
let Some(panel) = group.active_panel() else {
return;
};
if !panel.closable(cx) {
return;
}
let panel = panel.panel_id(cx);
match dock_to_remove {
Some(placement) => {
_ = shared.area().update(cx, |area, cx| {
area.remove_dock(placement, window, cx);
});
}
None => group.close(panel, window, cx),
}
close_panel(&shared, &group, panel, window, cx);
}
})
})
@@ -613,17 +605,23 @@ impl TabGroupRenderer for SignedTabGroupSkin {
let right_dock_button = self.dock_toggle_button(DockPlacement::Right, group, cx);
let is_bottom_dock = bottom_dock_button.is_some();
// On macOS the traffic lights overlay the window's top-left corner.
// Only the tab bar that sits under them reserves the space.
// That is the center's top-left group when the left dock is closed or absent.
// On macOS the traffic lights overlay the window's top-left corner, so the
// tab bar under them reserves the space. That is the center's top-left group
// when the left dock is closed or absent, and the zoomed group otherwise:
// a zoom fills the whole area, hiding the docks the frame would draw.
let needs_traffic_light_padding = cfg!(target_os = "macos")
&& self.shared.area().upgrade().is_some_and(|area| {
let area = area.read(cx);
!area.is_dock_open(DockPlacement::Left)
&& area
.layout(DockPlacement::Center)
.and_then(|tree| left_top_group(tree.root()))
== Some(group.node())
match area.zoomed_group() {
Some(zoomed) => zoomed == group.node(),
None => {
!area.is_dock_open(DockPlacement::Left)
&& area
.layout(DockPlacement::Center)
.and_then(|tree| left_top_group(tree.root()))
== Some(group.node())
}
}
});
// Bring a newly displayed tab into view.
@@ -709,7 +707,16 @@ impl TabGroupRenderer for SignedTabGroupSkin {
.child(
Tabs::new("tab-bar")
.px(px(-1.))
.h(TAB_BAR_HEIGHT)
// A collapsed group stands in for a closed bottom dock,
// which base gives only its reserved strip. The bar keeps
// its own height there rather than the title-bar height,
// so it fits instead of being clipped away.
.when(!collapsed, |this| this.h(TAB_BAR_HEIGHT))
// Only a collapsed (bottom) dock tags its bar, so the
// selector is unique when a test measures it.
.when(collapsed, |this| {
this.debug_selector(|| COLLAPSED_TAB_BAR_SELECTOR.to_string())
})
.flex()
.items_center()
.text_color(cx.theme().tab_foreground)
@@ -763,7 +770,6 @@ impl TabGroupRenderer for SignedTabGroupSkin {
.and_then(PanelHandle::of)
.and_then(|handle| handle.title_suffix(window, cx)),
)
.child(self.render_toolbar(group, window, cx))
.children(right_dock_button),
)
}),
@@ -833,3 +839,112 @@ impl TabGroupRenderer for SignedTabGroupSkin {
)
}
}
#[cfg(test)]
mod tests {
use gpui::{
App, AppContext as _, Context, Empty, EventEmitter, FocusHandle, Focusable, IntoElement,
Render, TestAppContext, Window, px,
};
use gpui_base::dock::{DockArea, DockLayout, DockPlacement, PanelEvent};
use super::COLLAPSED_TAB_BAR_SELECTOR;
use crate::{BasePanel, Panel, SignedDockSkin, panel_handle};
struct Probe {
focus_handle: FocusHandle,
}
impl Probe {
fn new(cx: &mut Context<Self>) -> Self {
Self {
focus_handle: cx.focus_handle(),
}
}
}
impl BasePanel for Probe {
fn panel_name(&self) -> &'static str {
"Probe"
}
}
impl Panel for Probe {
fn title(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
"Probe"
}
}
impl EventEmitter<PanelEvent> for Probe {}
impl Focusable for Probe {
fn focus_handle(&self, _: &App) -> FocusHandle {
self.focus_handle.clone()
}
}
impl Render for Probe {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
Empty
}
}
/// Base reserves only `gpui_base::dock::CLOSED_BOTTOM_STRIP` for a closed
/// bottom dock, so the tab bar drawn in place of one has to shrink to that
/// height; at the full title-bar height its bottom was clipped away.
#[gpui::test]
fn a_collapsed_bottom_dock_bar_fits_the_reserved_strip(cx: &mut TestAppContext) {
cx.update(|cx| {
gpui_component::init(cx);
});
let (area, cx) = cx.add_window_view(|window, cx| {
let skin = SignedDockSkin::new(cx);
DockArea::new("test", None, window, cx).with_renderer(skin)
});
cx.update(|window, cx| {
let center = cx.new(Probe::new);
let bottom = cx.new(Probe::new);
area.update(cx, |area, cx| {
area.set_center(
DockLayout::tabs().panel_view(panel_handle(center), cx),
window,
cx,
);
area.set_dock(
DockPlacement::Bottom,
DockLayout::tabs().panel_view(panel_handle(bottom), cx),
window,
cx,
);
});
});
cx.run_until_parked();
cx.update(|window, cx| window.draw(cx).clear(cx));
// Open, nothing is collapsed, so no bar carries the selector.
assert!(cx.debug_bounds(COLLAPSED_TAB_BAR_SELECTOR).is_none());
cx.update(|window, cx| {
area.update(cx, |area, cx| {
area.toggle_dock(DockPlacement::Bottom, window, cx);
});
});
cx.run_until_parked();
cx.update(|window, cx| window.draw(cx).clear(cx));
let bounds = cx
.debug_bounds(COLLAPSED_TAB_BAR_SELECTOR)
.expect("a collapsed bottom dock draws its stand-in tab bar");
// `gpui_base::dock::CLOSED_BOTTOM_STRIP`, which the engine does not
// re-export. The bar used to be `TAB_BAR_HEIGHT` here and its bottom was
// clipped away; it now has to fit inside what base reserves.
let reserved_strip = px(29.);
assert!(
bounds.size.height <= reserved_strip,
"the collapsed bar is {}px tall, more than the {}px strip base reserves",
bounds.size.height,
reserved_strip,
);
}
}
crates/dock/src/tiles.rs
-388
View File
@@ -1,388 +0,0 @@
use std::rc::Rc;
use gpui::prelude::FluentBuilder as _;
use gpui::{
AnyElement, App, AppContext as _, Context, Div, DragMoveEvent, Empty, InteractiveElement as _,
IntoElement, MouseButton, MouseDownEvent, ParentElement as _, Pixels, Render, ScrollHandle,
Size, Stateful, StatefulInteractiveElement as _, Styled as _, Window, div, px,
};
use gpui_base::dock::{
DRAG_BAR_HEIGHT, HANDLE_SIZE, NodeId, ResizeSide, TileContext, TilesRenderer,
};
use gpui_component::button::{Button, ButtonVariants as _};
use gpui_component::dock::PanelHandle;
use gpui_component::menu::{DropdownMenu as _, PopupMenuItem};
use gpui_component::scroll::Scrollbar;
use gpui_component::{
ActiveTheme as _, Icon, IconName, Selectable as _, Sizable as _, h_flex, v_flex,
};
use crate::dock_area::SkinShared;
use crate::t;
use crate::tab_panel::panel_title;
/// How far a resize handle sticks out past the tile's edge.
const HANDLE_OFFSET: Pixels = px(-4.);
/// The payload a tile drag carries, so one canvas ignores another's drags.
#[derive(Clone)]
struct DragMoving(NodeId);
impl Render for DragMoving {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
Empty
}
}
/// The payload a tile resize carries, for the same reason.
#[derive(Clone)]
struct DragResizing(NodeId);
impl Render for DragResizing {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
Empty
}
}
/// One tiles canvas's appearance.
/// Built once per container, so its scroll position belongs to the canvas it scrolls.
pub(crate) struct SignedTilesSkin {
shared: Rc<SkinShared>,
scroll_handle: ScrollHandle,
}
impl SignedTilesSkin {
pub(crate) fn new(shared: Rc<SkinShared>) -> Self {
Self {
shared,
scroll_handle: ScrollHandle::default(),
}
}
fn resize_handle(
&self,
tile: &TileContext,
id: &'static str,
side: ResizeSide,
build: impl FnOnce(Stateful<Div>) -> Stateful<Div>,
) -> Stateful<Div> {
let node = tile.node();
build(div().id(id).absolute())
.on_mouse_down(MouseButton::Left, {
let tile = tile.clone();
move |event: &MouseDownEvent, window, cx| {
tile.begin_resize(side, event.position, window, cx);
cx.stop_propagation();
}
})
.on_drag(DragResizing(node), |drag, _, _, cx| {
cx.stop_propagation();
cx.new(|_| drag.clone())
})
.on_drag_move({
let tile = tile.clone();
move |event: &DragMoveEvent<DragResizing>, window, cx| {
if event.drag(cx).0 != node {
return;
}
tile.resize_to(event.event.position, window, cx);
}
})
}
/// The trailing controls of a tile's title bar, zoom, close and the ellipsis menu.
/// They use click handlers, the zoom and close actions target a focused tab group.
fn render_tile_controls(
&self,
tile: &TileContext,
window: &mut Window,
cx: &mut App,
) -> impl IntoElement {
let handle = PanelHandle::of(tile.panel());
let control = handle.and_then(|handle| handle.zoom_control(cx));
let zoomed = tile.is_zoomed();
let toolbar_zoom =
tile.is_zoomable() && control.is_some_and(|control| control.toolbar_visible());
let menu_zoom = tile.is_zoomable() && control.is_some_and(|control| control.menu_visible());
let closable = tile.is_closable();
let buttons = handle.and_then(|handle| handle.toolbar_buttons(window, cx));
let panel = handle.map(|handle| handle.panel());
h_flex()
.gap_1()
.flex_shrink_0()
.occlude()
.when_some(buttons, |this, buttons| {
this.children(
buttons
.into_iter()
.map(|button| button.xsmall().ghost().tab_stop(false)),
)
})
.when_some(
match (zoomed, toolbar_zoom) {
(true, _) => Some(("zoom-out", IconName::Minimize, t("Dock.Zoom Out"))),
(false, true) => Some(("zoom-in", IconName::Maximize, t("Dock.Zoom In"))),
(false, false) => None,
},
|this, (id, icon, tooltip)| {
this.child(
Button::new(id)
.icon(icon)
.xsmall()
.ghost()
.tab_stop(false)
.tooltip(tooltip)
.selected(zoomed)
.on_click({
let tile = tile.clone();
move |_, window, cx| tile.toggle_zoom(window, cx)
}),
)
},
)
.child(
Button::new("menu")
.icon(IconName::Ellipsis)
.xsmall()
.ghost()
.tab_stop(false)
.dropdown_menu({
let tile = tile.clone();
move |menu, window, cx| {
menu.when_some(panel.clone(), |menu, panel| {
panel.dropdown_menu(menu, window, cx)
})
.separator()
.item(
PopupMenuItem::new(match zoomed {
true => t("Dock.Zoom Out"),
false => t("Dock.Zoom In"),
})
.disabled(!menu_zoom && !zoomed)
.on_click({
let tile = tile.clone();
move |_, window, cx| tile.toggle_zoom(window, cx)
}),
)
.when(closable, |menu| {
menu.separator()
.item(PopupMenuItem::new(t("Dock.Close")).on_click({
let tile = tile.clone();
move |_, window, cx| tile.close(window, cx)
}))
})
}
})
.anchor(gpui::Anchor::TopRight),
)
}
}
impl TilesRenderer for SignedTilesSkin {
fn frame(&self, _: &mut Window, cx: &mut App) -> Stateful<Div> {
div()
.id("tiles")
.relative()
.size_full()
.bg(cx.theme().tokens.tiles)
.track_scroll(&self.scroll_handle)
.overflow_scroll()
}
fn tile_frame(&self, tile: &TileContext, _: &mut Window, cx: &mut App) -> Stateful<Div> {
v_flex()
.id(("tile", tile.panel_id().as_u64()))
.occlude()
.overflow_hidden()
.bg(cx.theme().tokens.background)
.border_1()
.border_color(cx.theme().border)
.rounded(cx.theme().tile_radius)
// Room for the title bar, which overlays the top padding.
// Base draws the panel as a plain child, this keeps them apart.
.pt(DRAG_BAR_HEIGHT)
// Base stores no bounds on a zoomed tile, the skin decides how it fills the dock.
.when(tile.is_zoomed(), |this| this.size_full())
.on_mouse_down(MouseButton::Left, {
let tile = tile.clone();
move |_, window, cx| tile.bring_to_front(window, cx)
})
// A gesture can end anywhere, so both mouse-up hooks run.
// Each is a no-op unless this tile is the one that moved.
.on_mouse_up(MouseButton::Left, {
let tile = tile.clone();
move |_, window, cx| {
tile.end_move(window, cx);
tile.end_resize(window, cx);
}
})
.on_mouse_up_out(MouseButton::Left, {
let tile = tile.clone();
move |_, window, cx| {
tile.end_move(window, cx);
tile.end_resize(window, cx);
}
})
}
fn render_drag_bar(&self, tile: &TileContext, window: &mut Window, cx: &mut App) -> AnyElement {
let node = tile.node();
let handle = PanelHandle::of(tile.panel());
let title_style = handle.and_then(|handle| handle.title_style(cx));
h_flex()
.id("drag-bar")
.absolute()
.top_0()
.left_0()
.w_full()
.h(DRAG_BAR_HEIGHT)
.items_center()
.gap_1()
.pl_3()
.pr_2()
.when_some(title_style, |this, style| {
this.bg(style.background).text_color(style.foreground)
})
.child(
div()
.flex_1()
.min_w_16()
.overflow_hidden()
.text_ellipsis()
.whitespace_nowrap()
.child(panel_title(tile.panel(), window, cx)),
)
.children(handle.and_then(|handle| handle.title_suffix(window, cx)))
.child(self.render_tile_controls(tile, window, cx))
// A zoomed tile is not at its stored bounds, so moving it would mean nothing.
.when(!tile.is_zoomed(), |this| {
this.cursor_grab()
.on_mouse_down(MouseButton::Left, {
let tile = tile.clone();
move |event: &MouseDownEvent, window, cx| {
tile.begin_move(event.position, window, cx);
}
})
.on_drag(DragMoving(node), |drag, _, _, cx| {
cx.stop_propagation();
cx.new(|_| drag.clone())
})
.on_drag_move({
let tile = tile.clone();
move |event: &DragMoveEvent<DragMoving>, window, cx| {
if event.drag(cx).0 != node {
return;
}
tile.move_to(event.event.position, window, cx);
}
})
})
.into_any_element()
}
fn render_resize_handles(
&self,
tile: &TileContext,
_: &mut Window,
cx: &mut App,
) -> AnyElement {
let bounds = tile.bounds();
// A passive full-tile box, so handles sit against the tile, not its flow neighbours.
// It registers no interaction, so it does not shadow the panel underneath.
div()
.absolute()
.top_0()
.left_0()
.size_full()
.child(
self.resize_handle(tile, "left-resize-handle", ResizeSide::Left, |this| {
this.cursor_ew_resize()
.top_0()
.left(HANDLE_OFFSET)
.w(HANDLE_SIZE)
.h(bounds.size.height)
}),
)
.child(
self.resize_handle(tile, "right-resize-handle", ResizeSide::Right, |this| {
this.cursor_ew_resize()
.top_0()
.right(HANDLE_OFFSET)
.w(HANDLE_SIZE)
.h(bounds.size.height)
}),
)
.child(
self.resize_handle(tile, "top-resize-handle", ResizeSide::Top, |this| {
this.cursor_ns_resize()
.left_0()
.top(HANDLE_OFFSET)
.w(bounds.size.width)
.h(HANDLE_SIZE)
}),
)
.child(
self.resize_handle(tile, "bottom-resize-handle", ResizeSide::Bottom, |this| {
this.cursor_ns_resize()
.left_0()
.bottom(HANDLE_OFFSET)
.w(bounds.size.width)
.h(HANDLE_SIZE)
}),
)
.child(
Icon::new(IconName::ResizeCorner)
.size_3()
.absolute()
.right(px(1.))
.bottom(px(1.))
.text_color(cx.theme().muted_foreground.opacity(0.5)),
)
.child(self.resize_handle(
tile,
"corner-resize-handle",
ResizeSide::BottomRight,
|this| {
this.cursor_nwse_resize()
.right(HANDLE_OFFSET)
.bottom(HANDLE_OFFSET)
.size_3()
},
))
.into_any_element()
}
/// Gives the tile's panel `size_full`, base draws it as a plain child otherwise.
fn panel_frame(&self, tile: &TileContext, _: &mut Window, _: &mut App) -> Stateful<Div> {
h_flex()
.id(("tile-panel", tile.panel_id().as_u64()))
.overflow_hidden()
.size_full()
}
/// The canvas scrollbar, as an overlay.
/// Placed inside the frame it would end up underneath every tile.
fn render_overlay(
&self,
content: Size<Pixels>,
_: &mut Window,
_: &mut App,
) -> Option<AnyElement> {
Some(
Scrollbar::new(&self.scroll_handle)
.scroll_size(content)
.when_some(self.shared.tiles_scrollbar_mode(), |this, mode| {
this.mode(mode)
})
.into_any_element(),
)
}
fn grid_size(&self, cx: &App) -> Pixels {
cx.theme().tile_grid_size
}
}
crates/signed_ui/src/user_avatar.rs → crates/signed_ui/src/avatar.rs
+27 -13
View File
@@ -1,21 +1,26 @@
use gpui::prelude::*;
use gpui::{App, SharedString, StyleRefinement, Window};
use gpui_component::avatar::Avatar;
use gpui_base::{Avatar as BaseAvatar, AvatarFallback, AvatarImage};
use gpui_component::{ActiveTheme, Sizable, Size, StyledExt};
/// A small user avatar from gpui-component [`Avatar`], rounded with the theme radius.
/// It shows the user's picture or falls back to name initials.
use crate::pixel_avatar::{PixelAvatar, side_length};
/// A user avatar built on the unstyled [`gpui_base::Avatar`].
///
/// It shows the user's picture when one is set, and falls back to the
/// deterministic pixel avatar seeded from the name otherwise.
#[derive(IntoElement)]
pub struct UserAvatar {
pub struct Avatar {
name: SharedString,
picture: Option<SharedString>,
size: Size,
style: StyleRefinement,
}
impl UserAvatar {
impl Avatar {
/// Create an avatar for `name`.
/// The name seeds the initials fallback shown when no picture is set.
///
/// The name seeds the pixel fallback shown when no picture is set.
pub fn new(name: impl Into<SharedString>) -> Self {
Self {
name: name.into(),
@@ -32,26 +37,35 @@ impl UserAvatar {
}
}
impl Sizable for UserAvatar {
impl Sizable for Avatar {
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
}
impl Styled for UserAvatar {
impl Styled for Avatar {
fn style(&mut self) -> &mut StyleRefinement {
&mut self.style
}
}
impl RenderOnce for UserAvatar {
impl RenderOnce for Avatar {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
Avatar::new()
.name(self.name)
.when_some(self.picture, |this, url| this.src(url))
let fallback = AvatarFallback::new()
.size_full()
.child(PixelAvatar::new(self.name.clone()).size_full());
BaseAvatar::new()
.size(side_length(self.size))
.flex_shrink_0()
.rounded(cx.theme().radius)
.overflow_hidden()
.bg(cx.theme().secondary)
.when_some(self.picture, |this, url| {
this.image(AvatarImage::new(url).size_full().rounded(cx.theme().radius))
})
.fallback(fallback)
.refine_style(&self.style)
.with_size(self.size)
}
}
crates/signed_ui/src/lib.rs
+2 -2
View File
@@ -1,3 +1,4 @@
mod avatar;
mod dropdown_button;
mod nav_item;
mod pixel_avatar;
@@ -8,11 +9,11 @@ mod setting;
mod status_badge;
mod title_bar;
mod tree_row;
mod user_avatar;
pub mod copy_row;
pub mod util;
pub use avatar::Avatar;
pub use copy_row::{copy_row, menu_copy_row};
pub use dropdown_button::DropdownButton;
pub use nav_item::NavItem;
@@ -24,5 +25,4 @@ pub use setting::{SelectOption, setting_block, setting_row};
pub use status_badge::status_badge;
pub use title_bar::title_bar_drag_handlers;
pub use tree_row::tree_row;
pub use user_avatar::UserAvatar;
pub use util::middle_truncate;
crates/signed_ui/src/pixel_avatar.rs
+22 -14
View File
@@ -5,7 +5,10 @@ use gpui_component::{ActiveTheme, Colorize, Sizable, Size};
/// Number of rows and columns in the pixel grid.
const GRID_SIZE: usize = 8;
/// Probability that a cell in the left half is filled.
/// Empty cells kept between the pattern and the avatar edge, so the art
/// gathers in the center instead of filling the whole avatar.
const MARGIN: usize = 1;
/// Probability that a cell in the left half of the pattern area is filled.
const FILL_PROBABILITY: f32 = 0.42;
/// Probability that a filled cell uses the accent shade instead of the main color.
const ACCENT_PROBABILITY: f32 = 0.25;
@@ -22,12 +25,10 @@ pub struct PixelAvatar {
impl PixelAvatar {
/// Create an avatar seeded from `seed`.
///
/// The seed should be a stable string unique to the entity the avatar represents.
pub fn new(seed: impl AsRef<str>) -> Self {
Self {
seed: fnv1a(seed.as_ref().as_bytes()),
size: Size::XSmall,
size: Size::Small,
style: StyleRefinement::default(),
}
}
@@ -79,19 +80,21 @@ impl RenderOnce for PixelAvatar {
}
div()
.refine_style(&self.style)
.grid()
.grid_cols(GRID_SIZE as u16)
.grid_rows(GRID_SIZE as u16)
.size(side_length(self.size))
.flex_shrink_0()
.rounded(theme.radius)
.overflow_hidden()
.bg(main.opacity(0.16))
.children(cells)
.refine_style(&self.style)
}
}
fn side_length(size: Size) -> Pixels {
/// The rendered side length of an avatar at `size`, shared with [`Avatar`].
pub(crate) fn side_length(size: Size) -> Pixels {
match size {
Size::XSmall => px(16.),
Size::Small => px(24.),
@@ -106,8 +109,13 @@ fn pattern(seed: u64) -> [u8; GRID_SIZE * GRID_SIZE] {
let mut pattern = [0u8; GRID_SIZE * GRID_SIZE];
let mut filled = 0usize;
for row in 0..GRID_SIZE {
for col in 0..GRID_SIZE / 2 {
// Only the inner rows and the inner left half are candidates; mirroring
// then keeps the art within the same inset, leaving the outer ring empty.
let art_rows = GRID_SIZE - 2 * MARGIN;
let art_columns = GRID_SIZE / 2 - MARGIN;
for row in MARGIN..GRID_SIZE - MARGIN {
for col in MARGIN..GRID_SIZE / 2 {
if rng.chance(FILL_PROBABILITY) {
let accent = rng.chance(ACCENT_PROBABILITY);
set_cell(&mut pattern, row, col, if accent { 2 } else { 1 });
@@ -117,17 +125,17 @@ fn pattern(seed: u64) -> [u8; GRID_SIZE * GRID_SIZE] {
}
if filled < MIN_FILLED {
let half = GRID_SIZE * GRID_SIZE / 2;
let start = (rng.next() % half as u64) as usize;
let total = art_rows * art_columns;
let start = (rng.next() % total as u64) as usize;
for offset in 0..half {
for offset in 0..total {
if filled >= MIN_FILLED {
break;
}
let ix = (start + offset) % half;
let row = ix / (GRID_SIZE / 2);
let col = ix % (GRID_SIZE / 2);
let ix = (start + offset) % total;
let row = MARGIN + ix / art_columns;
let col = MARGIN + ix % art_columns;
if pattern[row * GRID_SIZE + col] == 0 {
set_cell(&mut pattern, row, col, 1);
crates/workspace/src/views/commit_diff/mod.rs
+10 -5
View File
@@ -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
+3 -3
View File
@@ -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
+4 -4
View File
@@ -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
+6 -5
View File
@@ -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
+8 -4
View File
@@ -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
+45
View File
@@ -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
+9 -5
View File
@@ -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
+8 -7
View File
@@ -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
+7 -5
View File
@@ -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
+2 -2
View File
@@ -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
+4 -2
View File
@@ -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
+9 -4
View File
@@ -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
+4 -4
View File
@@ -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
+7 -2
View File
@@ -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
+8 -5
View File
@@ -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.)),
),