extensions_ui: Add scrollbar (#27303)

This PR adds scrollbar to extensions page. 

For now haven't added setting to hide or configure this scrollbar, can
be handled later.

<img width="1258" alt="image"
src="https://github.com/user-attachments/assets/0d260051-5e4a-4e3f-9738-b5c5a988419e"
/>


Release Notes:

- Added scrollbar to extensions page.
This commit is contained in:
Smit Barmase 2025-03-22 17:56:36 +05:30 committed by GitHub
parent b5e5959339
commit d96a50b029
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -22,7 +22,10 @@ use release_channel::ReleaseChannel;
use settings::Settings; use settings::Settings;
use strum::IntoEnumIterator as _; use strum::IntoEnumIterator as _;
use theme::ThemeSettings; use theme::ThemeSettings;
use ui::{prelude::*, CheckboxWithLabel, ContextMenu, PopoverMenu, ToggleButton, Tooltip}; use ui::{
prelude::*, CheckboxWithLabel, ContextMenu, PopoverMenu, Scrollbar, ScrollbarState,
ToggleButton, Tooltip,
};
use vim_mode_setting::VimModeSetting; use vim_mode_setting::VimModeSetting;
use workspace::{ use workspace::{
item::{Item, ItemEvent}, item::{Item, ItemEvent},
@ -257,6 +260,7 @@ pub struct ExtensionsPage {
_subscriptions: [gpui::Subscription; 2], _subscriptions: [gpui::Subscription; 2],
extension_fetch_task: Option<Task<()>>, extension_fetch_task: Option<Task<()>>,
upsells: BTreeSet<Feature>, upsells: BTreeSet<Feature>,
scrollbar_state: ScrollbarState,
} }
impl ExtensionsPage { impl ExtensionsPage {
@ -297,9 +301,11 @@ impl ExtensionsPage {
}); });
cx.subscribe(&query_editor, Self::on_query_change).detach(); cx.subscribe(&query_editor, Self::on_query_change).detach();
let scroll_handle = UniformListScrollHandle::new();
let mut this = Self { let mut this = Self {
workspace: workspace.weak_handle(), workspace: workspace.weak_handle(),
list: UniformListScrollHandle::new(), list: scroll_handle.clone(),
is_fetching_extensions: false, is_fetching_extensions: false,
filter: ExtensionFilter::All, filter: ExtensionFilter::All,
dev_extension_entries: Vec::new(), dev_extension_entries: Vec::new(),
@ -311,6 +317,7 @@ impl ExtensionsPage {
_subscriptions: subscriptions, _subscriptions: subscriptions,
query_editor, query_editor,
upsells: BTreeSet::default(), upsells: BTreeSet::default(),
scrollbar_state: ScrollbarState::new(scroll_handle),
}; };
this.fetch_extensions(None, Some(BTreeSet::from_iter(this.provides_filter)), cx); this.fetch_extensions(None, Some(BTreeSet::from_iter(this.provides_filter)), cx);
this this
@ -1336,25 +1343,46 @@ impl Render for ExtensionsPage {
), ),
) )
.child(self.render_feature_upsells(cx)) .child(self.render_feature_upsells(cx))
.child(v_flex().px_4().size_full().overflow_y_hidden().map(|this| { .child(
let mut count = self.filtered_remote_extension_indices.len(); v_flex()
if self.filter.include_dev_extensions() { .pl_4()
count += self.dev_extension_entries.len(); .pr_6()
} .size_full()
.overflow_y_hidden()
.map(|this| {
let mut count = self.filtered_remote_extension_indices.len();
if self.filter.include_dev_extensions() {
count += self.dev_extension_entries.len();
}
if count == 0 { if count == 0 {
return this.py_4().child(self.render_empty_state(cx)); return this.py_4().child(self.render_empty_state(cx));
} }
let extensions_page = cx.entity().clone(); let extensions_page = cx.entity().clone();
let scroll_handle = self.list.clone(); let scroll_handle = self.list.clone();
this.child( this.child(
uniform_list(extensions_page, "entries", count, Self::render_extensions) uniform_list(
.flex_grow() extensions_page,
.pb_4() "entries",
.track_scroll(scroll_handle), count,
) Self::render_extensions,
})) )
.flex_grow()
.pb_4()
.track_scroll(scroll_handle),
)
.child(
div()
.absolute()
.right_1()
.top_0()
.bottom_0()
.w(px(12.))
.children(Scrollbar::vertical(self.scrollbar_state.clone())),
)
}),
)
} }
} }