More WIP

Co-authored-by: Ben Kunkle <ben@zed.dev>

Cargo.lock

@@ -14566,13 +14566,22 @@ dependencies = [
 name = "settings_ui"
 version = "0.1.0"
 dependencies = [
+ "collections",
+ "command_palette",
  "command_palette_hooks",
+ "component",
+ "db",
  "editor",
  "feature_flags",
  "fs",
+ "fuzzy",
  "gpui",
  "log",
+ "menu",
+ "paths",
+ "project",
  "schemars",
+ "search",
  "serde",
  "settings",
  "theme",
@@ -17048,6 +17057,7 @@ dependencies = [
  "gpui_macros",
  "icons",
  "itertools 0.14.0",
+ "log",
  "menu",
  "serde",
  "settings",

assets/keymaps/default-linux.json

@@ -1050,5 +1050,12 @@
       "ctrl-tab": "pane::ActivateNextItem",
       "ctrl-shift-tab": "pane::ActivatePreviousItem"
     }
+  },
+  {
+    "context": "KeymapEditor",
+    "use_key_equivalents": true,
+    "bindings": {
+      "ctrl-f": "search::FocusSearch"
+    }
   }
 ]

assets/keymaps/default-macos.json

@@ -611,7 +611,7 @@
       "cmd-shift-f": "pane::DeploySearch",
       "cmd-shift-h": ["pane::DeploySearch", { "replace_enabled": true }],
       "cmd-shift-t": "pane::ReopenClosedItem",
-      "cmd-k cmd-s": "zed::OpenKeymap",
+      "cmd-k cmd-s": "zed::OpenKeymapEditor",
       "cmd-k cmd-t": "theme_selector::Toggle",
       "cmd-t": "project_symbols::Toggle",
       "cmd-p": "file_finder::Toggle",
@@ -1149,5 +1149,12 @@
       "ctrl-tab": "pane::ActivateNextItem",
       "ctrl-shift-tab": "pane::ActivatePreviousItem"
     }
+  },
+  {
+    "context": "KeymapEditor",
+    "use_key_equivalents": true,
+    "bindings": {
+      "cmd-f": "search::FocusSearch"
+    }
   }
 ]

crates/command_palette/src/command_palette.rs

@@ -41,7 +41,7 @@ pub struct CommandPalette {
 /// Removes subsequent whitespace characters and double colons from the query.
 ///
 /// This improves the likelihood of a match by either humanized name or keymap-style name.
-fn normalize_query(input: &str) -> String {
+pub fn normalize_action_query(input: &str) -> String {
     let mut result = String::with_capacity(input.len());
     let mut last_char = None;
 
@@ -297,7 +297,7 @@ impl PickerDelegate for CommandPaletteDelegate {
             let mut commands = self.all_commands.clone();
             let hit_counts = self.hit_counts();
             let executor = cx.background_executor().clone();
-            let query = normalize_query(query.as_str());
+            let query = normalize_action_query(query.as_str());
             async move {
                 commands.sort_by_key(|action| {
                     (
@@ -311,29 +311,17 @@ impl PickerDelegate for CommandPaletteDelegate {
                     .enumerate()
                     .map(|(ix, command)| StringMatchCandidate::new(ix, &command.name))
                     .collect::<Vec<_>>();
-                let matches = if query.is_empty() {
-                    candidates
-                        .into_iter()
-                        .enumerate()
-                        .map(|(index, candidate)| StringMatch {
-                            candidate_id: index,
-                            string: candidate.string,
-                            positions: Vec::new(),
-                            score: 0.0,
-                        })
-                        .collect()
-                } else {
-                    fuzzy::match_strings(
-                        &candidates,
-                        &query,
-                        true,
-                        true,
-                        10000,
-                        &Default::default(),
-                        executor,
-                    )
-                    .await
-                };
+
+                let matches = fuzzy::match_strings(
+                    &candidates,
+                    &query,
+                    true,
+                    true,
+                    10000,
+                    &Default::default(),
+                    executor,
+                )
+                .await;
 
                 tx.send((commands, matches)).await.log_err();
             }
@@ -422,8 +410,8 @@ impl PickerDelegate for CommandPaletteDelegate {
         window: &mut Window,
         cx: &mut Context<Picker<Self>>,
     ) -> Option<Self::ListItem> {
-        let r#match = self.matches.get(ix)?;
-        let command = self.commands.get(r#match.candidate_id)?;
+        let matching_command = self.matches.get(ix)?;
+        let command = self.commands.get(matching_command.candidate_id)?;
         Some(
             ListItem::new(ix)
                 .inset(true)
@@ -436,7 +424,7 @@ impl PickerDelegate for CommandPaletteDelegate {
                         .justify_between()
                         .child(HighlightedLabel::new(
                             command.name.clone(),
-                            r#match.positions.clone(),
+                            matching_command.positions.clone(),
                         ))
                         .children(KeyBinding::for_action_in(
                             &*command.action,
@@ -512,19 +500,28 @@ mod tests {
 
     #[test]
     fn test_normalize_query() {
-        assert_eq!(normalize_query("editor: backspace"), "editor: backspace");
-        assert_eq!(normalize_query("editor:  backspace"), "editor: backspace");
-        assert_eq!(normalize_query("editor:    backspace"), "editor: backspace");
         assert_eq!(
-            normalize_query("editor::GoToDefinition"),
+            normalize_action_query("editor: backspace"),
+            "editor: backspace"
+        );
+        assert_eq!(
+            normalize_action_query("editor:  backspace"),
+            "editor: backspace"
+        );
+        assert_eq!(
+            normalize_action_query("editor:    backspace"),
+            "editor: backspace"
+        );
+        assert_eq!(
+            normalize_action_query("editor::GoToDefinition"),
             "editor:GoToDefinition"
         );
         assert_eq!(
-            normalize_query("editor::::GoToDefinition"),
+            normalize_action_query("editor::::GoToDefinition"),
             "editor:GoToDefinition"
         );
         assert_eq!(
-            normalize_query("editor: :GoToDefinition"),
+            normalize_action_query("editor: :GoToDefinition"),
             "editor: :GoToDefinition"
         );
     }

crates/gpui/Cargo.toml

@@ -298,3 +298,7 @@ path = "examples/uniform_list.rs"
 [[example]]
 name = "window_shadow"
 path = "examples/window_shadow.rs"
+
+[[example]]
+name = "uniform_table"
+path = "examples/uniform_table.rs"

crates/gpui/examples/uniform_list.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    App, Application, Bounds, Context, Window, WindowBounds, WindowOptions, div, prelude::*, px,
-    rgb, size, uniform_list,
+    App, Application, Bounds, Context, ListSizingBehavior, Window, WindowBounds, WindowOptions,
+    div, prelude::*, px, rgb, size, uniform_list,
 };
 
 struct UniformListExample {}
@@ -12,6 +12,7 @@ impl Render for UniformListExample {
                 "entries",
                 50,
                 cx.processor(|_this, range, _window, _cx| {
+                    dbg!(&range);
                     let mut items = Vec::new();
                     for ix in range {
                         let item = ix + 1;
@@ -30,6 +31,7 @@ impl Render for UniformListExample {
                     items
                 }),
             )
+            .with_sizing_behavior(ListSizingBehavior::Infer)
             .h_full(),
         )
     }

crates/gpui/examples/uniform_table.rs

@@ -0,0 +1,54 @@
+use gpui::{
+    App, Application, Bounds, Context, Window, WindowBounds, WindowOptions, div, prelude::*, px,
+    rgb, size,
+};
+
+struct UniformTableExample {}
+
+impl Render for UniformTableExample {
+    fn render(&mut self, _window: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        const COLS: usize = 24;
+        const ROWS: usize = 100;
+        let mut headers = [0; COLS];
+
+        for column in 0..COLS {
+            headers[column] = column;
+        }
+
+        div().bg(rgb(0xffffff)).size_full().child(
+            gpui::uniform_table("simple table", ROWS, move |range, _, _| {
+                dbg!(&range);
+                range
+                    .map(|row_index| {
+                        let mut row = [0; COLS];
+                        for col in 0..COLS {
+                            row[col] = (row_index + 1) * (col + 1);
+                        }
+                        row.map(|cell| ToString::to_string(&cell))
+                            .map(|cell| div().flex().flex_row().child(cell))
+                            .map(IntoElement::into_any_element)
+                    })
+                    .collect()
+            })
+            .with_width_from_item(Some(ROWS - 1))
+            // todo! without this, the AvailableSpace passed in window.request_measured_layout is a Definite(2600px) on Anthony's machine
+            // this doesn't make sense, and results in the full range of elements getting rendered. This also occurs on uniform_list
+            // This is resulting from windows.bounds() being called
+            .h_full(),
+        )
+    }
+}
+
+fn main() {
+    Application::new().run(|cx: &mut App| {
+        let bounds = Bounds::centered(None, size(px(300.0), px(300.0)), cx);
+        cx.open_window(
+            WindowOptions {
+                window_bounds: Some(WindowBounds::Windowed(bounds)),
+                ..Default::default()
+            },
+            |_, cx| cx.new(|_| UniformTableExample {}),
+        )
+        .unwrap();
+    });
+}

crates/gpui/src/app.rs

@@ -1334,6 +1334,11 @@ impl App {
         self.pending_effects.push_back(Effect::RefreshWindows);
     }
 
+    /// Get all key bindings in the app.
+    pub fn key_bindings(&self) -> Rc<RefCell<Keymap>> {
+        self.keymap.clone()
+    }
+
     /// Register a global listener for actions invoked via the keyboard.
     pub fn on_action<A: Action>(&mut self, listener: impl Fn(&A, &mut Self) + 'static) {
         self.global_action_listeners

crates/gpui/src/elements/div.rs

@@ -613,10 +613,10 @@ pub trait InteractiveElement: Sized {
     /// Track the focus state of the given focus handle on this element.
     /// If the focus handle is focused by the application, this element will
     /// apply its focused styles.
-    fn track_focus(mut self, focus_handle: &FocusHandle) -> FocusableWrapper<Self> {
+    fn track_focus(mut self, focus_handle: &FocusHandle) -> Self {
         self.interactivity().focusable = true;
         self.interactivity().tracked_focus_handle = Some(focus_handle.clone());
-        FocusableWrapper { element: self }
+        self
     }
 
     /// Set the keymap context for this element. This will be used to determine
@@ -980,15 +980,35 @@ pub trait InteractiveElement: Sized {
         self.interactivity().block_mouse_except_scroll();
         self
     }
+
+    /// Set the given styles to be applied when this element, specifically, is focused.
+    /// Requires that the element is focusable. Elements can be made focusable using [`InteractiveElement::track_focus`].
+    fn focus(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
+    where
+        Self: Sized,
+    {
+        self.interactivity().focus_style = Some(Box::new(f(StyleRefinement::default())));
+        self
+    }
+
+    /// Set the given styles to be applied when this element is inside another element that is focused.
+    /// Requires that the element is focusable. Elements can be made focusable using [`InteractiveElement::track_focus`].
+    fn in_focus(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
+    where
+        Self: Sized,
+    {
+        self.interactivity().in_focus_style = Some(Box::new(f(StyleRefinement::default())));
+        self
+    }
 }
 
 /// A trait for elements that want to use the standard GPUI interactivity features
 /// that require state.
 pub trait StatefulInteractiveElement: InteractiveElement {
     /// Set this element to focusable.
-    fn focusable(mut self) -> FocusableWrapper<Self> {
+    fn focusable(mut self) -> Self {
         self.interactivity().focusable = true;
-        FocusableWrapper { element: self }
+        self
     }
 
     /// Set the overflow x and y to scroll.
@@ -1118,27 +1138,6 @@ pub trait StatefulInteractiveElement: InteractiveElement {
     }
 }
 
-/// A trait for providing focus related APIs to interactive elements
-pub trait FocusableElement: InteractiveElement {
-    /// Set the given styles to be applied when this element, specifically, is focused.
-    fn focus(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
-    where
-        Self: Sized,
-    {
-        self.interactivity().focus_style = Some(Box::new(f(StyleRefinement::default())));
-        self
-    }
-
-    /// Set the given styles to be applied when this element is inside another element that is focused.
-    fn in_focus(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
-    where
-        Self: Sized,
-    {
-        self.interactivity().in_focus_style = Some(Box::new(f(StyleRefinement::default())));
-        self
-    }
-}
-
 pub(crate) type MouseDownListener =
     Box<dyn Fn(&MouseDownEvent, DispatchPhase, &Hitbox, &mut Window, &mut App) + 'static>;
 pub(crate) type MouseUpListener =
@@ -2777,126 +2776,6 @@ impl GroupHitboxes {
     }
 }
 
-/// A wrapper around an element that can be focused.
-pub struct FocusableWrapper<E> {
-    /// The element that is focusable
-    pub element: E,
-}
-
-impl<E: InteractiveElement> FocusableElement for FocusableWrapper<E> {}
-
-impl<E> InteractiveElement for FocusableWrapper<E>
-where
-    E: InteractiveElement,
-{
-    fn interactivity(&mut self) -> &mut Interactivity {
-        self.element.interactivity()
-    }
-}
-
-impl<E: StatefulInteractiveElement> StatefulInteractiveElement for FocusableWrapper<E> {}
-
-impl<E> Styled for FocusableWrapper<E>
-where
-    E: Styled,
-{
-    fn style(&mut self) -> &mut StyleRefinement {
-        self.element.style()
-    }
-}
-
-impl FocusableWrapper<Div> {
-    /// Add a listener to be called when the children of this `Div` are prepainted.
-    /// This allows you to store the [`Bounds`] of the children for later use.
-    pub fn on_children_prepainted(
-        mut self,
-        listener: impl Fn(Vec<Bounds<Pixels>>, &mut Window, &mut App) + 'static,
-    ) -> Self {
-        self.element = self.element.on_children_prepainted(listener);
-        self
-    }
-}
-
-impl<E> Element for FocusableWrapper<E>
-where
-    E: Element,
-{
-    type RequestLayoutState = E::RequestLayoutState;
-    type PrepaintState = E::PrepaintState;
-
-    fn id(&self) -> Option<ElementId> {
-        self.element.id()
-    }
-
-    fn source_location(&self) -> Option<&'static core::panic::Location<'static>> {
-        self.element.source_location()
-    }
-
-    fn request_layout(
-        &mut self,
-        id: Option<&GlobalElementId>,
-        inspector_id: Option<&InspectorElementId>,
-        window: &mut Window,
-        cx: &mut App,
-    ) -> (LayoutId, Self::RequestLayoutState) {
-        self.element.request_layout(id, inspector_id, window, cx)
-    }
-
-    fn prepaint(
-        &mut self,
-        id: Option<&GlobalElementId>,
-        inspector_id: Option<&InspectorElementId>,
-        bounds: Bounds<Pixels>,
-        state: &mut Self::RequestLayoutState,
-        window: &mut Window,
-        cx: &mut App,
-    ) -> E::PrepaintState {
-        self.element
-            .prepaint(id, inspector_id, bounds, state, window, cx)
-    }
-
-    fn paint(
-        &mut self,
-        id: Option<&GlobalElementId>,
-        inspector_id: Option<&InspectorElementId>,
-        bounds: Bounds<Pixels>,
-        request_layout: &mut Self::RequestLayoutState,
-        prepaint: &mut Self::PrepaintState,
-        window: &mut Window,
-        cx: &mut App,
-    ) {
-        self.element.paint(
-            id,
-            inspector_id,
-            bounds,
-            request_layout,
-            prepaint,
-            window,
-            cx,
-        )
-    }
-}
-
-impl<E> IntoElement for FocusableWrapper<E>
-where
-    E: IntoElement,
-{
-    type Element = E::Element;
-
-    fn into_element(self) -> Self::Element {
-        self.element.into_element()
-    }
-}
-
-impl<E> ParentElement for FocusableWrapper<E>
-where
-    E: ParentElement,
-{
-    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
-        self.element.extend(elements)
-    }
-}
-
 /// A wrapper around an element that can store state, produced after assigning an ElementId.
 pub struct Stateful<E> {
     pub(crate) element: E,
@@ -2927,8 +2806,6 @@ where
     }
 }
 
-impl<E: FocusableElement> FocusableElement for Stateful<E> {}
-
 impl<E> Element for Stateful<E>
 where
     E: Element,

crates/gpui/src/elements/img.rs

@@ -25,7 +25,7 @@ use std::{
 use thiserror::Error;
 use util::ResultExt;
 
-use super::{FocusableElement, Stateful, StatefulInteractiveElement};
+use super::{Stateful, StatefulInteractiveElement};
 
 /// The delay before showing the loading state.
 pub const LOADING_DELAY: Duration = Duration::from_millis(200);
@@ -509,8 +509,6 @@ impl IntoElement for Img {
     }
 }
 
-impl FocusableElement for Img {}
-
 impl StatefulInteractiveElement for Img {}
 
 impl ImageSource {

crates/gpui/src/elements/mod.rs

@@ -10,6 +10,7 @@ mod surface;
 mod svg;
 mod text;
 mod uniform_list;
+mod uniform_table;
 
 pub use anchored::*;
 pub use animation::*;
@@ -23,3 +24,4 @@ pub use surface::*;
 pub use svg::*;
 pub use text::*;
 pub use uniform_list::*;
+pub use uniform_table::*;

crates/gpui/src/elements/uniform_table.rs

@@ -0,0 +1,516 @@
+use std::{cell::RefCell, cmp, ops::Range, rc::Rc};
+
+use smallvec::SmallVec;
+
+use crate::{
+    AnyElement, App, AvailableSpace, Bounds, ContentMask, Div, Element, ElementId, GlobalElementId,
+    Hitbox, InspectorElementId, Interactivity, IntoElement, IsZero as _, LayoutId, Length,
+    Overflow, Pixels, ScrollHandle, Size, StyleRefinement, Styled, Window, point, px, size,
+};
+
+/// todo!
+pub struct UniformTable<const COLS: usize> {
+    id: ElementId,
+    row_count: usize,
+    render_rows:
+        Rc<dyn Fn(Range<usize>, &mut Window, &mut App) -> Vec<[AnyElement; COLS]> + 'static>,
+    interactivity: Interactivity,
+    source_location: &'static std::panic::Location<'static>,
+    item_to_measure_index: usize,
+    scroll_handle: Option<UniformTableScrollHandle>, // todo! we either want to make our own or make a shared scroll handle between list and table
+    sizings: [Length; COLS],
+}
+
+/// TODO
+#[track_caller]
+pub fn uniform_table<const COLS: usize, F>(
+    id: impl Into<ElementId>,
+    row_count: usize,
+    render_rows: F,
+) -> UniformTable<COLS>
+where
+    F: 'static + Fn(Range<usize>, &mut Window, &mut App) -> Vec<[AnyElement; COLS]>,
+{
+    let mut base_style = StyleRefinement::default();
+    base_style.overflow.y = Some(Overflow::Scroll);
+    let id = id.into();
+
+    let mut interactivity = Interactivity::new();
+    interactivity.element_id = Some(id.clone());
+
+    UniformTable {
+        id: id.clone(),
+        row_count,
+        render_rows: Rc::new(render_rows),
+        interactivity: Interactivity {
+            element_id: Some(id),
+            base_style: Box::new(base_style),
+            ..Interactivity::new()
+        },
+        source_location: core::panic::Location::caller(),
+        item_to_measure_index: 0,
+        scroll_handle: None,
+        sizings: [Length::Auto; COLS],
+    }
+}
+
+impl<const COLS: usize> UniformTable<COLS> {
+    /// todo!
+    pub fn with_width_from_item(mut self, item_index: Option<usize>) -> Self {
+        self.item_to_measure_index = item_index.unwrap_or(0);
+        self
+    }
+}
+
+impl<const COLS: usize> IntoElement for UniformTable<COLS> {
+    type Element = Self;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}
+
+impl<const COLS: usize> Styled for UniformTable<COLS> {
+    fn style(&mut self) -> &mut StyleRefinement {
+        &mut self.interactivity.base_style
+    }
+}
+
+impl<const COLS: usize> Element for UniformTable<COLS> {
+    type RequestLayoutState = ();
+
+    type PrepaintState = (Option<Hitbox>, SmallVec<[AnyElement; 32]>);
+
+    fn id(&self) -> Option<ElementId> {
+        Some(self.id.clone())
+    }
+
+    fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {
+        Some(self.source_location)
+    }
+
+    fn request_layout(
+        &mut self,
+        global_id: Option<&GlobalElementId>,
+        inspector_id: Option<&InspectorElementId>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> (LayoutId, Self::RequestLayoutState) {
+        let measure_cx = MeasureContext::new(self);
+        let item_size = measure_cx.measure_item(AvailableSpace::MinContent, None, window, cx);
+        let layout_id =
+            self.interactivity.request_layout(
+                global_id,
+                inspector_id,
+                window,
+                cx,
+                |style, window, _cx| {
+                    window.with_text_style(style.text_style().cloned(), |window| {
+                        window.request_measured_layout(
+                            style,
+                            move |known_dimensions, available_space, window, cx| {
+                                let desired_height = item_size.height * measure_cx.row_count;
+                                let width = known_dimensions.width.unwrap_or(match available_space
+                                    .width
+                                {
+                                    AvailableSpace::Definite(x) => x,
+                                    AvailableSpace::MinContent | AvailableSpace::MaxContent => {
+                                        item_size.width
+                                    }
+                                });
+                                let height =
+                                    known_dimensions.height.unwrap_or(
+                                        match available_space.height {
+                                            AvailableSpace::Definite(height) => desired_height
+                                                .min(dbg!(window.bounds()).size.height),
+                                            AvailableSpace::MinContent
+                                            | AvailableSpace::MaxContent => desired_height,
+                                        },
+                                    );
+                                size(width, height)
+                            },
+                        )
+                    })
+                },
+            );
+
+        (layout_id, ())
+    }
+
+    fn prepaint(
+        &mut self,
+        global_id: Option<&GlobalElementId>,
+        inspector_id: Option<&InspectorElementId>,
+        bounds: Bounds<Pixels>,
+        _request_layout: &mut Self::RequestLayoutState,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Self::PrepaintState {
+        let style = self
+            .interactivity
+            .compute_style(global_id, None, window, cx);
+        let border = style.border_widths.to_pixels(window.rem_size());
+        let padding = style
+            .padding
+            .to_pixels(bounds.size.into(), window.rem_size());
+
+        let padded_bounds = Bounds::from_corners(
+            bounds.origin + point(border.left + padding.left, border.top + padding.top),
+            bounds.bottom_right()
+                - point(border.right + padding.right, border.bottom + padding.bottom),
+        );
+
+        let can_scroll_horizontally = true;
+
+        let mut column_widths = [Pixels::default(); COLS];
+        let longest_row_size = MeasureContext::new(self).measure_item(
+            AvailableSpace::Definite(bounds.size.width),
+            Some(&mut column_widths),
+            window,
+            cx,
+        );
+
+        // We need to run this for each column:
+        let content_width = padded_bounds.size.width.max(longest_row_size.width);
+
+        let content_size = Size {
+            width: content_width,
+            height: longest_row_size.height * self.row_count + padding.top + padding.bottom,
+        };
+
+        let shared_scroll_offset = self.interactivity.scroll_offset.clone().unwrap();
+        let row_height = longest_row_size.height;
+        let shared_scroll_to_item = self.scroll_handle.as_mut().and_then(|handle| {
+            let mut handle = handle.0.borrow_mut();
+            handle.last_row_size = Some(RowSize {
+                row: padded_bounds.size,
+                contents: content_size,
+            });
+            handle.deferred_scroll_to_item.take()
+        });
+
+        let mut rendered_rows = SmallVec::default();
+
+        let hitbox = self.interactivity.prepaint(
+            global_id,
+            inspector_id,
+            bounds,
+            content_size,
+            window,
+            cx,
+            |style, mut scroll_offset, hitbox, window, cx| {
+                dbg!(bounds, window.bounds());
+                let border = style.border_widths.to_pixels(window.rem_size());
+                let padding = style
+                    .padding
+                    .to_pixels(bounds.size.into(), window.rem_size());
+
+                let padded_bounds = Bounds::from_corners(
+                    bounds.origin + point(border.left + padding.left, border.top),
+                    bounds.bottom_right() - point(border.right + padding.right, border.bottom),
+                );
+
+                let y_flipped = if let Some(scroll_handle) = self.scroll_handle.as_mut() {
+                    let mut scroll_state = scroll_handle.0.borrow_mut();
+                    scroll_state.base_handle.set_bounds(bounds);
+                    scroll_state.y_flipped
+                } else {
+                    false
+                };
+
+                if self.row_count > 0 {
+                    let content_height = row_height * self.row_count + padding.top + padding.bottom;
+                    let is_scrolled_vertically = !scroll_offset.y.is_zero();
+                    let min_vertical_scroll_offset = padded_bounds.size.height - content_height;
+                    if is_scrolled_vertically && scroll_offset.y < min_vertical_scroll_offset {
+                        shared_scroll_offset.borrow_mut().y = min_vertical_scroll_offset;
+                        scroll_offset.y = min_vertical_scroll_offset;
+                    }
+
+                    let content_width = content_size.width + padding.left + padding.right;
+                    let is_scrolled_horizontally =
+                        can_scroll_horizontally && !scroll_offset.x.is_zero();
+                    if is_scrolled_horizontally && content_width <= padded_bounds.size.width {
+                        shared_scroll_offset.borrow_mut().x = Pixels::ZERO;
+                        scroll_offset.x = Pixels::ZERO;
+                    }
+
+                    if let Some((mut ix, scroll_strategy)) = shared_scroll_to_item {
+                        if y_flipped {
+                            ix = self.row_count.saturating_sub(ix + 1);
+                        }
+                        let list_height = dbg!(padded_bounds.size.height);
+                        let mut updated_scroll_offset = shared_scroll_offset.borrow_mut();
+                        let item_top = row_height * ix + padding.top;
+                        let item_bottom = item_top + row_height;
+                        let scroll_top = -updated_scroll_offset.y;
+                        let mut scrolled_to_top = false;
+                        if item_top < scroll_top + padding.top {
+                            scrolled_to_top = true;
+                            updated_scroll_offset.y = -(item_top) + padding.top;
+                        } else if item_bottom > scroll_top + list_height - padding.bottom {
+                            scrolled_to_top = true;
+                            updated_scroll_offset.y = -(item_bottom - list_height) - padding.bottom;
+                        }
+
+                        match scroll_strategy {
+                            ScrollStrategy::Top => {}
+                            ScrollStrategy::Center => {
+                                if scrolled_to_top {
+                                    let item_center = item_top + row_height / 2.0;
+                                    let target_scroll_top = item_center - list_height / 2.0;
+
+                                    if item_top < scroll_top
+                                        || item_bottom > scroll_top + list_height
+                                    {
+                                        updated_scroll_offset.y = -target_scroll_top
+                                            .max(Pixels::ZERO)
+                                            .min(content_height - list_height)
+                                            .max(Pixels::ZERO);
+                                    }
+                                }
+                            }
+                        }
+                        scroll_offset = *updated_scroll_offset
+                    }
+
+                    let first_visible_element_ix =
+                        (-(scroll_offset.y + padding.top) / row_height).floor() as usize;
+                    let last_visible_element_ix = ((-scroll_offset.y + padded_bounds.size.height)
+                        / row_height)
+                        .ceil() as usize;
+                    let visible_range =
+                        first_visible_element_ix..cmp::min(last_visible_element_ix, self.row_count);
+                    let rows = if y_flipped {
+                        let flipped_range = self.row_count.saturating_sub(visible_range.end)
+                            ..self.row_count.saturating_sub(visible_range.start);
+                        let mut items = (self.render_rows)(flipped_range, window, cx);
+                        items.reverse();
+                        items
+                    } else {
+                        (self.render_rows)(visible_range.clone(), window, cx)
+                    };
+
+                    let content_mask = ContentMask { bounds };
+                    window.with_content_mask(Some(content_mask), |window| {
+                        let available_width = if can_scroll_horizontally {
+                            padded_bounds.size.width + scroll_offset.x.abs()
+                        } else {
+                            padded_bounds.size.width
+                        };
+                        let available_space = size(
+                            AvailableSpace::Definite(available_width),
+                            AvailableSpace::Definite(row_height),
+                        );
+                        for (mut row, ix) in rows.into_iter().zip(visible_range.clone()) {
+                            let row_origin = padded_bounds.origin
+                                + point(
+                                    if can_scroll_horizontally {
+                                        scroll_offset.x + padding.left
+                                    } else {
+                                        scroll_offset.x
+                                    },
+                                    row_height * ix + scroll_offset.y + padding.top,
+                                );
+
+                            let mut item = render_row(row, column_widths, row_height).into_any();
+
+                            item.layout_as_root(available_space, window, cx);
+                            item.prepaint_at(row_origin, window, cx);
+                            rendered_rows.push(item);
+                        }
+                    });
+                }
+
+                hitbox
+            },
+        );
+        return (hitbox, rendered_rows);
+    }
+
+    fn paint(
+        &mut self,
+        global_id: Option<&GlobalElementId>,
+        inspector_id: Option<&InspectorElementId>,
+        bounds: Bounds<Pixels>,
+        _: &mut Self::RequestLayoutState,
+        (hitbox, rendered_rows): &mut Self::PrepaintState,
+        window: &mut Window,
+        cx: &mut App,
+    ) {
+        self.interactivity.paint(
+            global_id,
+            inspector_id,
+            bounds,
+            hitbox.as_ref(),
+            window,
+            cx,
+            |_, window, cx| {
+                for item in rendered_rows {
+                    item.paint(window, cx);
+                }
+            },
+        )
+    }
+}
+
+const DIVIDER_PADDING_PX: Pixels = px(2.0);
+
+fn render_row<const COLS: usize>(
+    row: [AnyElement; COLS],
+    column_widths: [Pixels; COLS],
+    row_height: Pixels,
+) -> Div {
+    use crate::ParentElement;
+    let mut div = crate::div().flex().flex_row().gap(DIVIDER_PADDING_PX);
+
+    for (ix, cell) in row.into_iter().enumerate() {
+        div = div.child(
+            crate::div()
+                .w(column_widths[ix])
+                .h(row_height)
+                .overflow_hidden()
+                .child(cell),
+        )
+    }
+
+    div
+}
+
+struct MeasureContext<const COLS: usize> {
+    row_count: usize,
+    item_to_measure_index: usize,
+    render_rows:
+        Rc<dyn Fn(Range<usize>, &mut Window, &mut App) -> Vec<[AnyElement; COLS]> + 'static>,
+    sizings: [Length; COLS],
+}
+
+impl<const COLS: usize> MeasureContext<COLS> {
+    fn new(table: &UniformTable<COLS>) -> Self {
+        Self {
+            row_count: table.row_count,
+            item_to_measure_index: table.item_to_measure_index,
+            render_rows: table.render_rows.clone(),
+            sizings: table.sizings,
+        }
+    }
+
+    fn measure_item(
+        &self,
+        table_width: AvailableSpace,
+        column_sizes: Option<&mut [Pixels; COLS]>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Size<Pixels> {
+        if self.row_count == 0 {
+            return Size::default();
+        }
+
+        let item_ix = cmp::min(self.item_to_measure_index, self.row_count - 1);
+        let mut items = (self.render_rows)(item_ix..item_ix + 1, window, cx);
+        let Some(mut item_to_measure) = items.pop() else {
+            return Size::default();
+        };
+        let mut default_column_sizes = [Pixels::default(); COLS];
+        let column_sizes = column_sizes.unwrap_or(&mut default_column_sizes);
+
+        let mut row_height = px(0.0);
+        for i in 0..COLS {
+            let column_available_width = match self.sizings[i] {
+                Length::Definite(definite_length) => match table_width {
+                    AvailableSpace::Definite(pixels) => AvailableSpace::Definite(
+                        definite_length.to_pixels(pixels.into(), window.rem_size()),
+                    ),
+                    AvailableSpace::MinContent => AvailableSpace::MinContent,
+                    AvailableSpace::MaxContent => AvailableSpace::MaxContent,
+                },
+                Length::Auto => AvailableSpace::MaxContent,
+            };
+
+            let column_available_space = size(column_available_width, AvailableSpace::MinContent);
+
+            // todo!: Adjust row sizing to account for inter-column spacing
+            let cell_size = item_to_measure[i].layout_as_root(column_available_space, window, cx);
+            column_sizes[i] = cell_size.width;
+            row_height = row_height.max(cell_size.height);
+        }
+
+        let mut width = Pixels::ZERO;
+
+        for size in *column_sizes {
+            width += size;
+        }
+
+        Size::new(width + (COLS - 1) * DIVIDER_PADDING_PX, row_height)
+    }
+}
+
+impl<const COLS: usize> UniformTable<COLS> {}
+
+/// A handle for controlling the scroll position of a uniform list.
+/// This should be stored in your view and passed to the uniform_list on each frame.
+#[derive(Clone, Debug, Default)]
+pub struct UniformTableScrollHandle(pub Rc<RefCell<UniformTableScrollState>>);
+
+/// Where to place the element scrolled to.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum ScrollStrategy {
+    /// Place the element at the top of the list's viewport.
+    Top,
+    /// Attempt to place the element in the middle of the list's viewport.
+    /// May not be possible if there's not enough list items above the item scrolled to:
+    /// in this case, the element will be placed at the closest possible position.
+    Center,
+}
+
+#[derive(Copy, Clone, Debug, Default)]
+/// The size of the item and its contents.
+pub struct RowSize {
+    /// The size of the item.
+    pub row: Size<Pixels>,
+    /// The size of the item's contents, which may be larger than the item itself,
+    /// if the item was bounded by a parent element.
+    pub contents: Size<Pixels>,
+}
+
+#[derive(Clone, Debug, Default)]
+#[allow(missing_docs)]
+pub struct UniformTableScrollState {
+    pub base_handle: ScrollHandle,
+    pub deferred_scroll_to_item: Option<(usize, ScrollStrategy)>,
+    /// Size of the item, captured during last layout.
+    pub last_row_size: Option<RowSize>,
+    /// Whether the list was vertically flipped during last layout.
+    pub y_flipped: bool,
+}
+
+impl UniformTableScrollHandle {
+    /// Create a new scroll handle to bind to a uniform list.
+    pub fn new() -> Self {
+        Self(Rc::new(RefCell::new(UniformTableScrollState {
+            base_handle: ScrollHandle::new(),
+            deferred_scroll_to_item: None,
+            last_row_size: None,
+            y_flipped: false,
+        })))
+    }
+
+    /// Scroll the list to the given item index.
+    pub fn scroll_to_item(&self, ix: usize, strategy: ScrollStrategy) {
+        self.0.borrow_mut().deferred_scroll_to_item = Some((ix, strategy));
+    }
+
+    /// Check if the list is flipped vertically.
+    pub fn y_flipped(&self) -> bool {
+        self.0.borrow().y_flipped
+    }
+
+    /// Get the index of the topmost visible child.
+    #[cfg(any(test, feature = "test-support"))]
+    pub fn logical_scroll_top_index(&self) -> usize {
+        let this = self.0.borrow();
+        this.deferred_scroll_to_item
+            .map(|(ix, _)| ix)
+            .unwrap_or_else(|| this.base_handle.logical_scroll_top().0)
+    }
+}

crates/gpui/src/keymap/binding.rs

@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use collections::HashMap;
 
-use crate::{Action, InvalidKeystrokeError, KeyBindingContextPredicate, Keystroke};
+use crate::{Action, InvalidKeystrokeError, KeyBindingContextPredicate, Keystroke, SharedString};
 use smallvec::SmallVec;
 
 /// A keybinding and its associated metadata, from the keymap.
@@ -11,6 +11,8 @@ pub struct KeyBinding {
     pub(crate) keystrokes: SmallVec<[Keystroke; 2]>,
     pub(crate) context_predicate: Option<Rc<KeyBindingContextPredicate>>,
     pub(crate) meta: Option<KeyBindingMetaIndex>,
+    /// The json input string used when building the keybinding, if any
+    pub(crate) action_input: Option<SharedString>,
 }
 
 impl Clone for KeyBinding {
@@ -20,6 +22,7 @@ impl Clone for KeyBinding {
             keystrokes: self.keystrokes.clone(),
             context_predicate: self.context_predicate.clone(),
             meta: self.meta,
+            action_input: self.action_input.clone(),
         }
     }
 }
@@ -32,7 +35,7 @@ impl KeyBinding {
         } else {
             None
         };
-        Self::load(keystrokes, Box::new(action), context_predicate, None).unwrap()
+        Self::load(keystrokes, Box::new(action), context_predicate, None, None).unwrap()
     }
 
     /// Load a keybinding from the given raw data.
@@ -41,6 +44,7 @@ impl KeyBinding {
         action: Box<dyn Action>,
         context_predicate: Option<Rc<KeyBindingContextPredicate>>,
         key_equivalents: Option<&HashMap<char, char>>,
+        action_input: Option<SharedString>,
     ) -> std::result::Result<Self, InvalidKeystrokeError> {
         let mut keystrokes: SmallVec<[Keystroke; 2]> = keystrokes
             .split_whitespace()
@@ -62,6 +66,7 @@ impl KeyBinding {
             action,
             context_predicate,
             meta: None,
+            action_input,
         })
     }
 
@@ -110,6 +115,11 @@ impl KeyBinding {
     pub fn meta(&self) -> Option<KeyBindingMetaIndex> {
         self.meta
     }
+
+    /// Get the action input associated with the action for this binding
+    pub fn action_input(&self) -> Option<SharedString> {
+        self.action_input.clone()
+    }
 }
 
 impl std::fmt::Debug for KeyBinding {

crates/gpui/src/prelude.rs

@@ -3,7 +3,7 @@
 //! application to avoid having to import each trait individually.
 
 pub use crate::{
-    AppContext as _, BorrowAppContext, Context, Element, FocusableElement, InteractiveElement,
-    IntoElement, ParentElement, Refineable, Render, RenderOnce, StatefulInteractiveElement, Styled,
-    StyledImage, VisualContext, util::FluentBuilder,
+    AppContext as _, BorrowAppContext, Context, Element, InteractiveElement, IntoElement,
+    ParentElement, Refineable, Render, RenderOnce, StatefulInteractiveElement, Styled, StyledImage,
+    VisualContext, util::FluentBuilder,
 };

crates/settings/src/keymap_file.rs

@@ -3,7 +3,7 @@ use collections::{BTreeMap, HashMap, IndexMap};
 use fs::Fs;
 use gpui::{
     Action, ActionBuildError, App, InvalidKeystrokeError, KEYSTROKE_PARSE_EXPECTED_MESSAGE,
-    KeyBinding, KeyBindingContextPredicate, KeyBindingMetaIndex, NoAction,
+    KeyBinding, KeyBindingContextPredicate, KeyBindingMetaIndex, NoAction, SharedString,
 };
 use schemars::{
     JsonSchema,
@@ -399,7 +399,13 @@ impl KeymapFile {
             },
         };
 
-        let key_binding = match KeyBinding::load(keystrokes, action, context, key_equivalents) {
+        let key_binding = match KeyBinding::load(
+            keystrokes,
+            action,
+            context,
+            key_equivalents,
+            action_input_string.map(SharedString::from),
+        ) {
             Ok(key_binding) => key_binding,
             Err(InvalidKeystrokeError { keystroke }) => {
                 return Err(format!(

crates/settings_ui/Cargo.toml

@@ -12,12 +12,21 @@ workspace = true
 path = "src/settings_ui.rs"
 
 [dependencies]
+command_palette.workspace = true
 command_palette_hooks.workspace = true
+component.workspace = true
+collections.workspace = true
+db.workspace = true
 editor.workspace = true
 feature_flags.workspace = true
 fs.workspace = true
+fuzzy.workspace = true
 gpui.workspace = true
 log.workspace = true
+menu.workspace = true
+paths.workspace = true
+project.workspace = true
+search.workspace = true
 schemars.workspace = true
 serde.workspace = true
 settings.workspace = true

crates/settings_ui/src/keybindings.rs

@@ -0,0 +1,612 @@
+use std::{fmt::Write as _, ops::Range, sync::Arc};
+
+use collections::HashSet;
+use db::anyhow::anyhow;
+use editor::{Editor, EditorEvent};
+use fuzzy::{StringMatch, StringMatchCandidate};
+use gpui::{
+    AppContext as _, Context, DismissEvent, Entity, EventEmitter, FocusHandle, Focusable,
+    FontWeight, Global, KeyContext, ScrollStrategy, Subscription, WeakEntity, actions, div,
+};
+use util::ResultExt;
+
+use ui::{
+    ActiveTheme as _, App, BorrowAppContext, ParentElement as _, Render, SharedString, Styled as _,
+    Window, prelude::*,
+};
+use workspace::{Item, ModalView, SerializableItem, Workspace, register_serializable_item};
+
+use crate::{
+    keybindings::persistence::KEYBINDING_EDITORS,
+    ui_components::table::{Table, TableInteractionState},
+};
+
+actions!(zed, [OpenKeymapEditor]);
+
+pub fn init(cx: &mut App) {
+    let keymap_event_channel = KeymapEventChannel::new();
+    cx.set_global(keymap_event_channel);
+
+    cx.observe_new(|workspace: &mut Workspace, _window, _cx| {
+        workspace.register_action(|workspace, _: &OpenKeymapEditor, window, cx| {
+            let open_keymap_editor =
+                cx.new(|cx| KeymapEditor::new(workspace.weak_handle(), window, cx));
+            workspace.add_item_to_center(Box::new(open_keymap_editor), window, cx);
+        });
+    })
+    .detach();
+
+    register_serializable_item::<KeymapEditor>(cx);
+}
+
+pub struct KeymapEventChannel {}
+
+impl Global for KeymapEventChannel {}
+
+impl KeymapEventChannel {
+    fn new() -> Self {
+        Self {}
+    }
+
+    pub fn trigger_keymap_changed(cx: &mut App) {
+        cx.update_global(|_event_channel: &mut Self, _| {
+            /* triggers observers in KeymapEditors */
+        });
+    }
+}
+
+struct KeymapEditor {
+    workspace: WeakEntity<Workspace>,
+    focus_handle: FocusHandle,
+    _keymap_subscription: Subscription,
+    keybindings: Vec<ProcessedKeybinding>,
+    // corresponds 1 to 1 with keybindings
+    string_match_candidates: Arc<Vec<StringMatchCandidate>>,
+    matches: Vec<StringMatch>,
+    table_interaction_state: Entity<TableInteractionState>,
+    filter_editor: Entity<Editor>,
+    selected_index: Option<usize>,
+}
+
+impl EventEmitter<()> for KeymapEditor {}
+
+impl Focusable for KeymapEditor {
+    fn focus_handle(&self, cx: &App) -> gpui::FocusHandle {
+        return self.filter_editor.focus_handle(cx);
+    }
+}
+
+impl KeymapEditor {
+    fn new(workspace: WeakEntity<Workspace>, window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let focus_handle = cx.focus_handle();
+
+        let _keymap_subscription =
+            cx.observe_global::<KeymapEventChannel>(Self::update_keybindings);
+        let table_interaction_state = TableInteractionState::new(window, cx);
+
+        let filter_editor = cx.new(|cx| {
+            let mut editor = Editor::single_line(window, cx);
+            editor.set_placeholder_text("Filter action names...", cx);
+            editor
+        });
+
+        cx.subscribe(&filter_editor, |this, _, e: &EditorEvent, cx| {
+            if !matches!(e, EditorEvent::BufferEdited) {
+                return;
+            }
+
+            this.update_matches(cx);
+        })
+        .detach();
+
+        let mut this = Self {
+            workspace,
+            keybindings: vec![],
+            string_match_candidates: Arc::new(vec![]),
+            matches: vec![],
+            focus_handle: focus_handle.clone(),
+            _keymap_subscription,
+            table_interaction_state,
+            filter_editor,
+            selected_index: None,
+        };
+
+        this.update_keybindings(cx);
+
+        this
+    }
+
+    fn update_matches(&mut self, cx: &mut Context<Self>) {
+        let query = self.filter_editor.read(cx).text(cx);
+        let string_match_candidates = self.string_match_candidates.clone();
+        let executor = cx.background_executor().clone();
+        let keybind_count = self.keybindings.len();
+        let query = command_palette::normalize_action_query(&query);
+        let fuzzy_match = cx.background_spawn(async move {
+            fuzzy::match_strings(
+                &string_match_candidates,
+                &query,
+                true,
+                true,
+                keybind_count,
+                &Default::default(),
+                executor,
+            )
+            .await
+        });
+
+        cx.spawn(async move |this, cx| {
+            let matches = fuzzy_match.await;
+            this.update(cx, |this, cx| {
+                this.selected_index.take();
+                this.scroll_to_item(0, ScrollStrategy::Top, cx);
+                this.matches = matches;
+                cx.notify();
+            })
+        })
+        .detach();
+    }
+
+    fn process_bindings(
+        cx: &mut Context<Self>,
+    ) -> (Vec<ProcessedKeybinding>, Vec<StringMatchCandidate>) {
+        let key_bindings_ptr = cx.key_bindings();
+        let lock = key_bindings_ptr.borrow();
+        let key_bindings = lock.bindings();
+        let mut unmapped_action_names = HashSet::from_iter(cx.all_action_names());
+
+        let mut processed_bindings = Vec::new();
+        let mut string_match_candidates = Vec::new();
+
+        for key_binding in key_bindings {
+            let mut keystroke_text = String::new();
+            for keystroke in key_binding.keystrokes() {
+                write!(&mut keystroke_text, "{} ", keystroke.unparse()).ok();
+            }
+            let keystroke_text = keystroke_text.trim().to_string();
+
+            let context = key_binding
+                .predicate()
+                .map(|predicate| predicate.to_string())
+                .unwrap_or_else(|| "<global>".to_string());
+
+            let source = key_binding
+                .meta()
+                .map(|meta| settings::KeybindSource::from_meta(meta).name().into());
+
+            let action_name = key_binding.action().name();
+            unmapped_action_names.remove(&action_name);
+
+            let index = processed_bindings.len();
+            let string_match_candidate = StringMatchCandidate::new(index, &action_name);
+            processed_bindings.push(ProcessedKeybinding {
+                keystroke_text: keystroke_text.into(),
+                action: action_name.into(),
+                action_input: key_binding.action_input(),
+                context: context.into(),
+                source,
+            });
+            string_match_candidates.push(string_match_candidate);
+        }
+
+        let empty = SharedString::new_static("");
+        for action_name in unmapped_action_names.into_iter() {
+            let index = processed_bindings.len();
+            let string_match_candidate = StringMatchCandidate::new(index, &action_name);
+            processed_bindings.push(ProcessedKeybinding {
+                keystroke_text: empty.clone(),
+                action: (*action_name).into(),
+                action_input: None,
+                context: empty.clone(),
+                source: None,
+            });
+            string_match_candidates.push(string_match_candidate);
+        }
+
+        (processed_bindings, string_match_candidates)
+    }
+
+    fn update_keybindings(self: &mut KeymapEditor, cx: &mut Context<KeymapEditor>) {
+        let (key_bindings, string_match_candidates) = Self::process_bindings(cx);
+        self.keybindings = key_bindings;
+        self.string_match_candidates = Arc::new(string_match_candidates);
+        self.matches = self
+            .string_match_candidates
+            .iter()
+            .enumerate()
+            .map(|(ix, candidate)| StringMatch {
+                candidate_id: ix,
+                score: 0.0,
+                positions: vec![],
+                string: candidate.string.clone(),
+            })
+            .collect();
+
+        self.update_matches(cx);
+        cx.notify();
+    }
+
+    fn dispatch_context(&self, _window: &Window, _cx: &Context<Self>) -> KeyContext {
+        let mut dispatch_context = KeyContext::new_with_defaults();
+        dispatch_context.add("KeymapEditor");
+        dispatch_context.add("menu");
+
+        // todo! track key context in keybind edit modal
+        // let identifier = if self.keymap_editor.focus_handle(cx).is_focused(window) {
+        //     "editing"
+        // } else {
+        //     "not_editing"
+        // };
+        // dispatch_context.add(identifier);
+
+        dispatch_context
+    }
+
+    fn scroll_to_item(&self, index: usize, strategy: ScrollStrategy, cx: &mut App) {
+        let index = usize::min(index, self.matches.len().saturating_sub(1));
+        self.table_interaction_state.update(cx, |this, _cx| {
+            this.scroll_handle.scroll_to_item(index, strategy);
+        });
+    }
+
+    fn select_next(&mut self, _: &menu::SelectNext, window: &mut Window, cx: &mut Context<Self>) {
+        if let Some(selected) = self.selected_index {
+            let selected = selected + 1;
+            if selected >= self.matches.len() {
+                self.select_last(&Default::default(), window, cx);
+            } else {
+                self.selected_index = Some(selected);
+                self.scroll_to_item(selected, ScrollStrategy::Center, cx);
+                cx.notify();
+            }
+        } else {
+            self.select_first(&Default::default(), window, cx);
+        }
+    }
+
+    fn select_previous(
+        &mut self,
+        _: &menu::SelectPrevious,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if let Some(selected) = self.selected_index {
+            if selected == 0 {
+                return;
+            }
+
+            let selected = selected - 1;
+
+            if selected >= self.matches.len() {
+                self.select_last(&Default::default(), window, cx);
+            } else {
+                self.selected_index = Some(selected);
+                self.scroll_to_item(selected, ScrollStrategy::Center, cx);
+                cx.notify();
+            }
+        } else {
+            self.select_last(&Default::default(), window, cx);
+        }
+    }
+
+    fn select_first(
+        &mut self,
+        _: &menu::SelectFirst,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if self.matches.get(0).is_some() {
+            self.selected_index = Some(0);
+            self.scroll_to_item(0, ScrollStrategy::Center, cx);
+            cx.notify();
+        }
+    }
+
+    fn select_last(&mut self, _: &menu::SelectLast, _window: &mut Window, cx: &mut Context<Self>) {
+        if self.matches.last().is_some() {
+            let index = self.matches.len() - 1;
+            self.selected_index = Some(index);
+            self.scroll_to_item(index, ScrollStrategy::Center, cx);
+            cx.notify();
+        }
+    }
+
+    fn confirm(&mut self, _: &menu::Confirm, window: &mut Window, cx: &mut Context<Self>) {
+        let Some(index) = self.selected_index else {
+            return;
+        };
+        let keybind = self.keybindings[self.matches[index].candidate_id].clone();
+
+        self.edit_keybinding(keybind, window, cx);
+    }
+
+    fn edit_keybinding(
+        &mut self,
+        keybind: ProcessedKeybinding,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        // todo! how to map keybinds to how to update/edit them
+        _ = keybind;
+        self.workspace
+            .update(cx, |workspace, cx| {
+                workspace.toggle_modal(window, cx, |window, cx| {
+                    let modal = KeybindingEditorModal::new(window, cx);
+                    window.focus(&modal.focus_handle(cx));
+                    modal
+                });
+            })
+            .log_err();
+    }
+
+    fn focus_search(
+        &mut self,
+        _: &search::FocusSearch,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if !self
+            .filter_editor
+            .focus_handle(cx)
+            .contains_focused(window, cx)
+        {
+            window.focus(&self.filter_editor.focus_handle(cx));
+        } else {
+            self.filter_editor.update(cx, |editor, cx| {
+                editor.select_all(&Default::default(), window, cx);
+            });
+        }
+        self.selected_index.take();
+    }
+}
+
+#[derive(Clone)]
+struct ProcessedKeybinding {
+    keystroke_text: SharedString,
+    action: SharedString,
+    action_input: Option<SharedString>,
+    context: SharedString,
+    source: Option<SharedString>,
+}
+
+impl Item for KeymapEditor {
+    type Event = ();
+
+    fn tab_content_text(&self, _detail: usize, _cx: &App) -> ui::SharedString {
+        "Keymap Editor".into()
+    }
+}
+
+impl Render for KeymapEditor {
+    fn render(&mut self, window: &mut Window, cx: &mut ui::Context<Self>) -> impl ui::IntoElement {
+        let row_count = self.matches.len();
+        let theme = cx.theme();
+
+        div()
+            .key_context(self.dispatch_context(window, cx))
+            .on_action(cx.listener(Self::select_next))
+            .on_action(cx.listener(Self::select_previous))
+            .on_action(cx.listener(Self::select_first))
+            .on_action(cx.listener(Self::select_last))
+            .on_action(cx.listener(Self::focus_search))
+            .on_action(cx.listener(Self::confirm))
+            .size_full()
+            .bg(theme.colors().editor_background)
+            .id("keymap-editor")
+            .track_focus(&self.focus_handle)
+            .px_4()
+            .v_flex()
+            .pb_4()
+            .child(
+                h_flex()
+                    .key_context({
+                        let mut context = KeyContext::new_with_defaults();
+                        context.add("BufferSearchBar");
+                        context
+                    })
+                    .w_full()
+                    .h_12()
+                    .px_4()
+                    .my_4()
+                    .border_2()
+                    .border_color(theme.colors().border)
+                    .child(self.filter_editor.clone()),
+            )
+            .child(
+                Table::new()
+                    .interactable(&self.table_interaction_state)
+                    .striped()
+                    .column_widths([rems(24.), rems(16.), rems(32.), rems(8.)])
+                    .header(["Command", "Keystrokes", "Context", "Source"])
+                    .selected_item_index(self.selected_index.clone())
+                    .on_click_row(cx.processor(|this, row_index, _window, _cx| {
+                        this.selected_index = Some(row_index);
+                    }))
+                    .uniform_list(
+                        "keymap-editor-table",
+                        row_count,
+                        cx.processor(move |this, range: Range<usize>, _window, _cx| {
+                            range
+                                .filter_map(|index| {
+                                    let candidate_id = this.matches.get(index)?.candidate_id;
+                                    let binding = &this.keybindings[candidate_id];
+                                    let action = h_flex()
+                                        .items_start()
+                                        .gap_1()
+                                        .child(binding.action.clone())
+                                        .when_some(
+                                            binding.action_input.clone(),
+                                            |this, binding_input| this.child(binding_input),
+                                        );
+                                    let keystrokes = binding.keystroke_text.clone();
+                                    let context = binding.context.clone();
+                                    let source = binding.source.clone().unwrap_or_default();
+                                    Some([
+                                        action.into_any_element(),
+                                        keystrokes.into_any_element(),
+                                        context.into_any_element(),
+                                        source.into_any_element(),
+                                    ])
+                                })
+                                .collect()
+                        }),
+                    ),
+            )
+    }
+}
+
+struct KeybindingEditorModal {
+    keybind_editor: Entity<Editor>,
+}
+
+impl ModalView for KeybindingEditorModal {}
+
+impl EventEmitter<DismissEvent> for KeybindingEditorModal {}
+
+impl Focusable for KeybindingEditorModal {
+    fn focus_handle(&self, cx: &App) -> FocusHandle {
+        self.keybind_editor.focus_handle(cx)
+    }
+}
+
+impl KeybindingEditorModal {
+    pub fn new(window: &mut Window, cx: &mut App) -> Self {
+        let keybind_editor = cx.new(|cx| {
+            let editor = Editor::single_line(window, cx);
+            editor
+        });
+        Self { keybind_editor }
+    }
+}
+
+impl Render for KeybindingEditorModal {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let theme = cx.theme().colors();
+        return v_flex()
+            .items_center()
+            .text_center()
+            .bg(theme.background)
+            .border_color(theme.border)
+            .border_2()
+            .px_4()
+            .py_2()
+            .w(rems(36.))
+            .child(div().text_lg().font_weight(FontWeight::BOLD).child(
+                // todo! better text
+                "Input desired keybinding, then hit Enter to save",
+            ))
+            .child(
+                h_flex()
+                    .w_full()
+                    .h_12()
+                    .px_4()
+                    .my_4()
+                    .border_2()
+                    .border_color(theme.border)
+                    .child(self.keybind_editor.clone()),
+            );
+    }
+}
+
+impl SerializableItem for KeymapEditor {
+    fn serialized_item_kind() -> &'static str {
+        "KeymapEditor"
+    }
+
+    fn cleanup(
+        workspace_id: workspace::WorkspaceId,
+        alive_items: Vec<workspace::ItemId>,
+        _window: &mut Window,
+        cx: &mut App,
+    ) -> gpui::Task<gpui::Result<()>> {
+        workspace::delete_unloaded_items(
+            alive_items,
+            workspace_id,
+            "keybinding_editors",
+            &KEYBINDING_EDITORS,
+            cx,
+        )
+    }
+
+    fn deserialize(
+        _project: Entity<project::Project>,
+        workspace: WeakEntity<Workspace>,
+        workspace_id: workspace::WorkspaceId,
+        item_id: workspace::ItemId,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> gpui::Task<gpui::Result<Entity<Self>>> {
+        window.spawn(cx, async move |cx| {
+            if KEYBINDING_EDITORS
+                .get_keybinding_editor(item_id, workspace_id)?
+                .is_some()
+            {
+                cx.update(|window, cx| cx.new(|cx| KeymapEditor::new(workspace, window, cx)))
+            } else {
+                Err(anyhow!("No keybinding editor to deserialize"))
+            }
+        })
+    }
+
+    fn serialize(
+        &mut self,
+        workspace: &mut Workspace,
+        item_id: workspace::ItemId,
+        _closing: bool,
+        _window: &mut Window,
+        cx: &mut ui::Context<Self>,
+    ) -> Option<gpui::Task<gpui::Result<()>>> {
+        let workspace_id = workspace.database_id()?;
+        Some(cx.background_spawn(async move {
+            KEYBINDING_EDITORS
+                .save_keybinding_editor(item_id, workspace_id)
+                .await
+        }))
+    }
+
+    fn should_serialize(&self, _event: &Self::Event) -> bool {
+        false
+    }
+}
+
+mod persistence {
+    use db::{define_connection, query, sqlez_macros::sql};
+    use workspace::WorkspaceDb;
+
+    define_connection! {
+        pub static ref KEYBINDING_EDITORS: KeybindingEditorDb<WorkspaceDb> =
+            &[sql!(
+                CREATE TABLE keybinding_editors (
+                    workspace_id INTEGER,
+                    item_id INTEGER UNIQUE,
+
+                    PRIMARY KEY(workspace_id, item_id),
+                    FOREIGN KEY(workspace_id) REFERENCES workspaces(workspace_id)
+                    ON DELETE CASCADE
+                ) STRICT;
+            )];
+    }
+
+    impl KeybindingEditorDb {
+        query! {
+            pub async fn save_keybinding_editor(
+                item_id: workspace::ItemId,
+                workspace_id: workspace::WorkspaceId
+            ) -> Result<()> {
+                INSERT OR REPLACE INTO keybinding_editors(item_id, workspace_id)
+                VALUES (?, ?)
+            }
+        }
+
+        query! {
+            pub fn get_keybinding_editor(
+                item_id: workspace::ItemId,
+                workspace_id: workspace::WorkspaceId
+            ) -> Result<Option<workspace::ItemId>> {
+                SELECT item_id
+                FROM keybinding_editors
+                WHERE item_id = ? AND workspace_id = ?
+            }
+        }
+    }
+}

crates/settings_ui/src/settings_ui.rs

@@ -20,6 +20,9 @@ use workspace::{Workspace, with_active_or_new_workspace};
 
 use crate::appearance_settings_controls::AppearanceSettingsControls;
 
+pub mod keybindings;
+pub mod ui_components;
+
 pub struct SettingsUiFeatureFlag;
 
 impl FeatureFlag for SettingsUiFeatureFlag {
@@ -121,6 +124,8 @@ pub fn init(cx: &mut App) {
         .detach();
     })
     .detach();
+
+    keybindings::init(cx);
 }
 
 async fn handle_import_vscode_settings(

crates/settings_ui/src/ui_components/mod.rs

@@ -0,0 +1 @@
+pub mod table;

crates/settings_ui/src/ui_components/table.rs

@@ -0,0 +1,884 @@
+use std::{ops::Range, rc::Rc, time::Duration};
+
+use editor::{EditorSettings, ShowScrollbar, scroll::ScrollbarAutoHide};
+use gpui::{
+    AppContext, Axis, Context, Entity, FocusHandle, FontWeight, Length,
+    ListHorizontalSizingBehavior, ListSizingBehavior, MouseButton, Stateful, Task,
+    UniformListScrollHandle, WeakEntity, transparent_black, uniform_list,
+};
+use settings::Settings as _;
+use ui::{
+    ActiveTheme as _, AnyElement, App, Button, ButtonCommon as _, ButtonStyle, Color, Component,
+    ComponentScope, Div, ElementId, FixedWidth as _, FluentBuilder as _, Indicator,
+    InteractiveElement as _, IntoElement, ParentElement, Pixels, RegisterComponent, RenderOnce,
+    Scrollbar, ScrollbarState, StatefulInteractiveElement as _, Styled, StyledExt as _,
+    StyledTypography, Window, div, example_group_with_title, h_flex, px, single_example, v_flex,
+};
+
+struct UniformListData<const COLS: usize> {
+    render_item_fn: Box<dyn Fn(Range<usize>, &mut Window, &mut App) -> Vec<[AnyElement; COLS]>>,
+    element_id: ElementId,
+    row_count: usize,
+}
+
+enum TableContents<const COLS: usize> {
+    Vec(Vec<[AnyElement; COLS]>),
+    UniformList(UniformListData<COLS>),
+}
+
+impl<const COLS: usize> TableContents<COLS> {
+    fn rows_mut(&mut self) -> Option<&mut Vec<[AnyElement; COLS]>> {
+        match self {
+            TableContents::Vec(rows) => Some(rows),
+            TableContents::UniformList(_) => None,
+        }
+    }
+
+    fn len(&self) -> usize {
+        match self {
+            TableContents::Vec(rows) => rows.len(),
+            TableContents::UniformList(data) => data.row_count,
+        }
+    }
+}
+
+pub struct TableInteractionState {
+    pub focus_handle: FocusHandle,
+    pub scroll_handle: UniformListScrollHandle,
+    pub horizontal_scrollbar: ScrollbarProperties,
+    pub vertical_scrollbar: ScrollbarProperties,
+}
+
+impl TableInteractionState {
+    pub fn new(window: &mut Window, cx: &mut App) -> Entity<Self> {
+        cx.new(|cx| {
+            let focus_handle = cx.focus_handle();
+
+            cx.on_focus_out(&focus_handle, window, |this: &mut Self, _, window, cx| {
+                this.hide_scrollbars(window, cx);
+            })
+            .detach();
+
+            let scroll_handle = UniformListScrollHandle::new();
+            let vertical_scrollbar = ScrollbarProperties {
+                axis: Axis::Vertical,
+                state: ScrollbarState::new(scroll_handle.clone()).parent_entity(&cx.entity()),
+                show_scrollbar: false,
+                show_track: false,
+                auto_hide: false,
+                hide_task: None,
+            };
+
+            let horizontal_scrollbar = ScrollbarProperties {
+                axis: Axis::Horizontal,
+                state: ScrollbarState::new(scroll_handle.clone()).parent_entity(&cx.entity()),
+                show_scrollbar: false,
+                show_track: false,
+                auto_hide: false,
+                hide_task: None,
+            };
+
+            let mut this = Self {
+                focus_handle,
+                scroll_handle,
+                horizontal_scrollbar,
+                vertical_scrollbar,
+            };
+
+            this.update_scrollbar_visibility(cx);
+            this
+        })
+    }
+
+    fn update_scrollbar_visibility(&mut self, cx: &mut Context<Self>) {
+        let show_setting = EditorSettings::get_global(cx).scrollbar.show;
+
+        let scroll_handle = self.scroll_handle.0.borrow();
+
+        let autohide = |show: ShowScrollbar, cx: &mut Context<Self>| match show {
+            ShowScrollbar::Auto => true,
+            ShowScrollbar::System => cx
+                .try_global::<ScrollbarAutoHide>()
+                .map_or_else(|| cx.should_auto_hide_scrollbars(), |autohide| autohide.0),
+            ShowScrollbar::Always => false,
+            ShowScrollbar::Never => false,
+        };
+
+        let longest_item_width = scroll_handle.last_item_size.and_then(|size| {
+            (size.contents.width > size.item.width).then_some(size.contents.width)
+        });
+
+        // is there an item long enough that we should show a horizontal scrollbar?
+        let item_wider_than_container = if let Some(longest_item_width) = longest_item_width {
+            longest_item_width > px(scroll_handle.base_handle.bounds().size.width.0)
+        } else {
+            true
+        };
+
+        let show_scrollbar = match show_setting {
+            ShowScrollbar::Auto | ShowScrollbar::System | ShowScrollbar::Always => true,
+            ShowScrollbar::Never => false,
+        };
+        let show_vertical = show_scrollbar;
+
+        let show_horizontal = item_wider_than_container && show_scrollbar;
+
+        let show_horizontal_track =
+            show_horizontal && matches!(show_setting, ShowScrollbar::Always);
+
+        // TODO: we probably should hide the scroll track when the list doesn't need to scroll
+        let show_vertical_track = show_vertical && matches!(show_setting, ShowScrollbar::Always);
+
+        self.vertical_scrollbar = ScrollbarProperties {
+            axis: self.vertical_scrollbar.axis,
+            state: self.vertical_scrollbar.state.clone(),
+            show_scrollbar: show_vertical,
+            show_track: show_vertical_track,
+            auto_hide: autohide(show_setting, cx),
+            hide_task: None,
+        };
+
+        self.horizontal_scrollbar = ScrollbarProperties {
+            axis: self.horizontal_scrollbar.axis,
+            state: self.horizontal_scrollbar.state.clone(),
+            show_scrollbar: show_horizontal,
+            show_track: show_horizontal_track,
+            auto_hide: autohide(show_setting, cx),
+            hide_task: None,
+        };
+
+        cx.notify();
+    }
+
+    fn hide_scrollbars(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        self.horizontal_scrollbar.hide(window, cx);
+        self.vertical_scrollbar.hide(window, cx);
+    }
+
+    // fn listener(this: Entity<Self>, fn: F) ->
+
+    pub fn listener<E: ?Sized>(
+        this: &Entity<Self>,
+        f: impl Fn(&mut Self, &E, &mut Window, &mut Context<Self>) + 'static,
+    ) -> impl Fn(&E, &mut Window, &mut App) + 'static {
+        let view = this.downgrade();
+        move |e: &E, window: &mut Window, cx: &mut App| {
+            view.update(cx, |view, cx| f(view, e, window, cx)).ok();
+        }
+    }
+
+    fn render_vertical_scrollbar_track(
+        this: &Entity<Self>,
+        parent: Div,
+        scroll_track_size: Pixels,
+        cx: &mut App,
+    ) -> Div {
+        if !this.read(cx).vertical_scrollbar.show_track {
+            return parent;
+        }
+        let child = v_flex()
+            .h_full()
+            .flex_none()
+            .w(scroll_track_size)
+            .bg(cx.theme().colors().background)
+            .child(
+                div()
+                    .size_full()
+                    .flex_1()
+                    .border_l_1()
+                    .border_color(cx.theme().colors().border),
+            );
+        parent.child(child)
+    }
+
+    fn render_vertical_scrollbar(this: &Entity<Self>, parent: Div, cx: &mut App) -> Div {
+        if !this.read(cx).vertical_scrollbar.show_scrollbar {
+            return parent;
+        }
+        let child = div()
+            .id(("table-vertical-scrollbar", this.entity_id()))
+            .occlude()
+            .flex_none()
+            .h_full()
+            .cursor_default()
+            .absolute()
+            .right_0()
+            .top_0()
+            .bottom_0()
+            .w(px(12.))
+            .on_mouse_move(Self::listener(this, |_, _, _, cx| {
+                cx.notify();
+                cx.stop_propagation()
+            }))
+            .on_hover(|_, _, cx| {
+                cx.stop_propagation();
+            })
+            .on_mouse_up(
+                MouseButton::Left,
+                Self::listener(this, |this, _, window, cx| {
+                    if !this.vertical_scrollbar.state.is_dragging()
+                        && !this.focus_handle.contains_focused(window, cx)
+                    {
+                        this.vertical_scrollbar.hide(window, cx);
+                        cx.notify();
+                    }
+
+                    cx.stop_propagation();
+                }),
+            )
+            .on_any_mouse_down(|_, _, cx| {
+                cx.stop_propagation();
+            })
+            .on_scroll_wheel(Self::listener(&this, |_, _, _, cx| {
+                cx.notify();
+            }))
+            .children(Scrollbar::vertical(
+                this.read(cx).vertical_scrollbar.state.clone(),
+            ));
+        parent.child(child)
+    }
+
+    /// Renders the horizontal scrollbar.
+    ///
+    /// The right offset is used to determine how far to the right the
+    /// scrollbar should extend to, useful for ensuring it doesn't collide
+    /// with the vertical scrollbar when visible.
+    fn render_horizontal_scrollbar(
+        this: &Entity<Self>,
+        parent: Div,
+        right_offset: Pixels,
+        cx: &mut App,
+    ) -> Div {
+        if !this.read(cx).horizontal_scrollbar.show_scrollbar {
+            return parent;
+        }
+        let child = div()
+            .id(("table-horizontal-scrollbar", this.entity_id()))
+            .occlude()
+            .flex_none()
+            .w_full()
+            .cursor_default()
+            .absolute()
+            .bottom_neg_px()
+            .left_0()
+            .right_0()
+            .pr(right_offset)
+            .on_mouse_move(Self::listener(this, |_, _, _, cx| {
+                cx.notify();
+                cx.stop_propagation()
+            }))
+            .on_hover(|_, _, cx| {
+                cx.stop_propagation();
+            })
+            .on_any_mouse_down(|_, _, cx| {
+                cx.stop_propagation();
+            })
+            .on_mouse_up(
+                MouseButton::Left,
+                Self::listener(this, |this, _, window, cx| {
+                    if !this.horizontal_scrollbar.state.is_dragging()
+                        && !this.focus_handle.contains_focused(window, cx)
+                    {
+                        this.horizontal_scrollbar.hide(window, cx);
+                        cx.notify();
+                    }
+
+                    cx.stop_propagation();
+                }),
+            )
+            .on_scroll_wheel(Self::listener(this, |_, _, _, cx| {
+                cx.notify();
+            }))
+            .children(Scrollbar::horizontal(
+                // percentage as f32..end_offset as f32,
+                this.read(cx).horizontal_scrollbar.state.clone(),
+            ));
+        parent.child(child)
+    }
+
+    fn render_horizantal_scrollbar_track(
+        this: &Entity<Self>,
+        parent: Div,
+        scroll_track_size: Pixels,
+        cx: &mut App,
+    ) -> Div {
+        if !this.read(cx).horizontal_scrollbar.show_track {
+            return parent;
+        }
+        let child = h_flex()
+            .w_full()
+            .h(scroll_track_size)
+            .flex_none()
+            .relative()
+            .child(
+                div()
+                    .w_full()
+                    .flex_1()
+                    // for some reason the horizontal scrollbar is 1px
+                    // taller than the vertical scrollbar??
+                    .h(scroll_track_size - px(1.))
+                    .bg(cx.theme().colors().background)
+                    .border_t_1()
+                    .border_color(cx.theme().colors().border),
+            )
+            .when(this.read(cx).vertical_scrollbar.show_track, |parent| {
+                parent
+                    .child(
+                        div()
+                            .flex_none()
+                            // -1px prevents a missing pixel between the two container borders
+                            .w(scroll_track_size - px(1.))
+                            .h_full(),
+                    )
+                    .child(
+                        // HACK: Fill the missing 1px 🥲
+                        div()
+                            .absolute()
+                            .right(scroll_track_size - px(1.))
+                            .bottom(scroll_track_size - px(1.))
+                            .size_px()
+                            .bg(cx.theme().colors().border),
+                    )
+            });
+
+        parent.child(child)
+    }
+}
+
+/// A table component
+#[derive(RegisterComponent, IntoElement)]
+pub struct Table<const COLS: usize = 3> {
+    striped: bool,
+    width: Option<Length>,
+    headers: Option<[AnyElement; COLS]>,
+    rows: TableContents<COLS>,
+    interaction_state: Option<WeakEntity<TableInteractionState>>,
+    selected_item_index: Option<usize>,
+    column_widths: Option<[Length; COLS]>,
+    on_click_row: Option<Rc<dyn Fn(usize, &mut Window, &mut App)>>,
+}
+
+impl<const COLS: usize> Table<COLS> {
+    /// number of headers provided.
+    pub fn new() -> Self {
+        Table {
+            striped: false,
+            width: None,
+            headers: None,
+            rows: TableContents::Vec(Vec::new()),
+            interaction_state: None,
+            selected_item_index: None,
+            column_widths: None,
+            on_click_row: None,
+        }
+    }
+
+    /// Enables uniform list rendering.
+    /// The provided function will be passed directly to the `uniform_list` element.
+    /// Therefore, if this method is called, any calls to [`Table::row`] before or after
+    /// this method is called will be ignored.
+    pub fn uniform_list(
+        mut self,
+        id: impl Into<ElementId>,
+        row_count: usize,
+        render_item_fn: impl Fn(Range<usize>, &mut Window, &mut App) -> Vec<[AnyElement; COLS]>
+        + 'static,
+    ) -> Self {
+        self.rows = TableContents::UniformList(UniformListData {
+            element_id: id.into(),
+            row_count: row_count,
+            render_item_fn: Box::new(render_item_fn),
+        });
+        self
+    }
+
+    /// Enables row striping.
+    pub fn striped(mut self) -> Self {
+        self.striped = true;
+        self
+    }
+
+    /// Sets the width of the table.
+    /// Will enable horizontal scrolling if [`Self::interactable`] is also called.
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = Some(width.into());
+        self
+    }
+
+    /// Enables interaction (primarily scrolling) with the table.
+    ///
+    /// Vertical scrolling will be enabled by default if the table is taller than its container.
+    ///
+    /// Horizontal scrolling will only be enabled if [`Self::width`] is also called, otherwise
+    /// the list will always shrink the table columns to fit their contents I.e. If [`Self::uniform_list`]
+    /// is used without a width and with [`Self::interactable`], the [`ListHorizontalSizingBehavior`] will
+    /// be set to [`ListHorizontalSizingBehavior::FitList`].
+    pub fn interactable(mut self, interaction_state: &Entity<TableInteractionState>) -> Self {
+        self.interaction_state = Some(interaction_state.downgrade());
+        self
+    }
+
+    pub fn selected_item_index(mut self, selected_item_index: Option<usize>) -> Self {
+        self.selected_item_index = selected_item_index;
+        self
+    }
+
+    pub fn header(mut self, headers: [impl IntoElement; COLS]) -> Self {
+        self.headers = Some(headers.map(IntoElement::into_any_element));
+        self
+    }
+
+    pub fn row(mut self, items: [impl IntoElement; COLS]) -> Self {
+        if let Some(rows) = self.rows.rows_mut() {
+            rows.push(items.map(IntoElement::into_any_element));
+        }
+        self
+    }
+
+    pub fn column_widths(mut self, widths: [impl Into<Length>; COLS]) -> Self {
+        self.column_widths = Some(widths.map(Into::into));
+        self
+    }
+
+    pub fn on_click_row(
+        mut self,
+        callback: impl Fn(usize, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click_row = Some(Rc::new(callback));
+        self
+    }
+}
+
+fn base_cell_style(width: Option<Length>, cx: &App) -> Div {
+    div()
+        .px_1p5()
+        .when_some(width, |this, width| this.w(width))
+        .when(width.is_none(), |this| this.flex_1())
+        .justify_start()
+        .text_ui(cx)
+        .whitespace_nowrap()
+        .text_ellipsis()
+        .overflow_hidden()
+}
+
+pub fn render_row<const COLS: usize>(
+    row_index: usize,
+    items: [impl IntoElement; COLS],
+    table_context: TableRenderContext<COLS>,
+    cx: &App,
+) -> AnyElement {
+    let is_striped = table_context.striped;
+    let is_last = row_index == table_context.total_row_count - 1;
+    let bg = if row_index % 2 == 1 && is_striped {
+        Some(cx.theme().colors().text.opacity(0.05))
+    } else {
+        None
+    };
+    let column_widths = table_context
+        .column_widths
+        .map_or([None; COLS], |widths| widths.map(|width| Some(width)));
+    let is_selected = table_context.selected_item_index == Some(row_index);
+
+    let row = div()
+        .w_full()
+        .border_2()
+        .border_color(transparent_black())
+        .when(is_selected, |row| {
+            row.border_color(cx.theme().colors().panel_focused_border)
+        })
+        .child(
+            div()
+                .w_full()
+                .flex()
+                .flex_row()
+                .items_center()
+                .justify_between()
+                .px_1p5()
+                .py_1()
+                .when_some(bg, |row, bg| row.bg(bg))
+                .when(!is_striped, |row| {
+                    row.border_b_1()
+                        .border_color(transparent_black())
+                        .when(!is_last, |row| row.border_color(cx.theme().colors().border))
+                })
+                .children(
+                    items
+                        .map(IntoElement::into_any_element)
+                        .into_iter()
+                        .zip(column_widths)
+                        .map(|(cell, width)| base_cell_style(width, cx).child(cell)),
+                ),
+        );
+
+    if let Some(on_click) = table_context.on_click_row {
+        row.id(("table-row", row_index))
+            .on_click(move |_, window, cx| on_click(row_index, window, cx))
+            .into_any_element()
+    } else {
+        row.into_any_element()
+    }
+}
+
+pub fn render_header<const COLS: usize>(
+    headers: [impl IntoElement; COLS],
+    table_context: TableRenderContext<COLS>,
+    cx: &mut App,
+) -> impl IntoElement {
+    let column_widths = table_context
+        .column_widths
+        .map_or([None; COLS], |widths| widths.map(|width| Some(width)));
+    div()
+        .flex()
+        .flex_row()
+        .items_center()
+        .justify_between()
+        .w_full()
+        .p_2()
+        .border_b_1()
+        .border_color(cx.theme().colors().border)
+        .children(headers.into_iter().zip(column_widths).map(|(h, width)| {
+            base_cell_style(width, cx)
+                .font_weight(FontWeight::SEMIBOLD)
+                .child(h)
+        }))
+}
+
+#[derive(Clone)]
+pub struct TableRenderContext<const COLS: usize> {
+    pub striped: bool,
+    pub total_row_count: usize,
+    pub selected_item_index: Option<usize>,
+    pub column_widths: Option<[Length; COLS]>,
+    pub on_click_row: Option<Rc<dyn Fn(usize, &mut Window, &mut App)>>,
+}
+
+impl<const COLS: usize> TableRenderContext<COLS> {
+    fn new(table: &Table<COLS>) -> Self {
+        Self {
+            striped: table.striped,
+            total_row_count: table.rows.len(),
+            column_widths: table.column_widths,
+            selected_item_index: table.selected_item_index.clone(),
+            on_click_row: table.on_click_row.clone(),
+        }
+    }
+}
+
+impl<const COLS: usize> RenderOnce for Table<COLS> {
+    fn render(mut self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let table_context = TableRenderContext::new(&self);
+        let interaction_state = self.interaction_state.and_then(|state| state.upgrade());
+
+        let scroll_track_size = px(16.);
+        let h_scroll_offset = if interaction_state
+            .as_ref()
+            .is_some_and(|state| state.read(cx).vertical_scrollbar.show_scrollbar)
+        {
+            // magic number
+            px(3.)
+        } else {
+            px(0.)
+        };
+
+        let width = self.width;
+
+        let table = div()
+            .when_some(width, |this, width| this.w(width))
+            .h_full()
+            .v_flex()
+            .when_some(self.headers.take(), |this, headers| {
+                this.child(render_header(headers, table_context.clone(), cx))
+            })
+            .child(
+                div()
+                    .flex_grow()
+                    .w_full()
+                    .relative()
+                    .overflow_hidden()
+                    .map(|parent| match self.rows {
+                        TableContents::Vec(items) => {
+                            parent.children(items.into_iter().enumerate().map(|(index, row)| {
+                                render_row(index, row, table_context.clone(), cx)
+                            }))
+                        }
+                        TableContents::UniformList(uniform_list_data) => parent.child(
+                            uniform_list(
+                                uniform_list_data.element_id,
+                                uniform_list_data.row_count,
+                                {
+                                    let render_item_fn = uniform_list_data.render_item_fn;
+                                    move |range: Range<usize>, window, cx| {
+                                        let elements = render_item_fn(range.clone(), window, cx);
+                                        elements
+                                            .into_iter()
+                                            .zip(range)
+                                            .map(|(row, row_index)| {
+                                                render_row(
+                                                    row_index,
+                                                    row,
+                                                    table_context.clone(),
+                                                    cx,
+                                                )
+                                            })
+                                            .collect()
+                                    }
+                                },
+                            )
+                            .size_full()
+                            .flex_grow()
+                            .with_sizing_behavior(ListSizingBehavior::Auto)
+                            .with_horizontal_sizing_behavior(if width.is_some() {
+                                ListHorizontalSizingBehavior::Unconstrained
+                            } else {
+                                ListHorizontalSizingBehavior::FitList
+                            })
+                            .when_some(
+                                interaction_state.as_ref(),
+                                |this, state| {
+                                    this.track_scroll(
+                                        state.read_with(cx, |s, _| s.scroll_handle.clone()),
+                                    )
+                                },
+                            ),
+                        ),
+                    })
+                    .when_some(interaction_state.as_ref(), |this, interaction_state| {
+                        this.map(|this| {
+                            TableInteractionState::render_vertical_scrollbar_track(
+                                interaction_state,
+                                this,
+                                scroll_track_size,
+                                cx,
+                            )
+                        })
+                        .map(|this| {
+                            TableInteractionState::render_vertical_scrollbar(
+                                interaction_state,
+                                this,
+                                cx,
+                            )
+                        })
+                    }),
+            )
+            .when_some(
+                width.and(interaction_state.as_ref()),
+                |this, interaction_state| {
+                    this.map(|this| {
+                        TableInteractionState::render_horizantal_scrollbar_track(
+                            interaction_state,
+                            this,
+                            scroll_track_size,
+                            cx,
+                        )
+                    })
+                    .map(|this| {
+                        TableInteractionState::render_horizontal_scrollbar(
+                            interaction_state,
+                            this,
+                            h_scroll_offset,
+                            cx,
+                        )
+                    })
+                },
+            );
+
+        if let Some(interaction_state) = interaction_state.as_ref() {
+            table
+                .track_focus(&interaction_state.read(cx).focus_handle)
+                .id(("table", interaction_state.entity_id()))
+                .on_hover({
+                    let interaction_state = interaction_state.downgrade();
+                    move |hovered, window, cx| {
+                        interaction_state
+                            .update(cx, |interaction_state, cx| {
+                                if *hovered {
+                                    interaction_state.horizontal_scrollbar.show(cx);
+                                    interaction_state.vertical_scrollbar.show(cx);
+                                    cx.notify();
+                                } else if !interaction_state
+                                    .focus_handle
+                                    .contains_focused(window, cx)
+                                {
+                                    interaction_state.hide_scrollbars(window, cx);
+                                }
+                            })
+                            .ok(); // todo! handle error?
+                    }
+                })
+                .into_any_element()
+        } else {
+            table.into_any_element()
+        }
+    }
+}
+
+// computed state related to how to render scrollbars
+// one per axis
+// on render we just read this off the keymap editor
+// we update it when
+// - settings change
+// - on focus in, on focus out, on hover, etc.
+#[derive(Debug)]
+pub struct ScrollbarProperties {
+    axis: Axis,
+    show_scrollbar: bool,
+    show_track: bool,
+    auto_hide: bool,
+    hide_task: Option<Task<()>>,
+    state: ScrollbarState,
+}
+
+impl ScrollbarProperties {
+    // Shows the scrollbar and cancels any pending hide task
+    fn show(&mut self, cx: &mut Context<TableInteractionState>) {
+        if !self.auto_hide {
+            return;
+        }
+        self.show_scrollbar = true;
+        self.hide_task.take();
+        cx.notify();
+    }
+
+    fn hide(&mut self, window: &mut Window, cx: &mut Context<TableInteractionState>) {
+        const SCROLLBAR_SHOW_INTERVAL: Duration = Duration::from_secs(1);
+
+        if !self.auto_hide {
+            return;
+        }
+
+        let axis = self.axis;
+        self.hide_task = Some(cx.spawn_in(window, async move |keymap_editor, cx| {
+            cx.background_executor()
+                .timer(SCROLLBAR_SHOW_INTERVAL)
+                .await;
+
+            if let Some(keymap_editor) = keymap_editor.upgrade() {
+                keymap_editor
+                    .update(cx, |keymap_editor, cx| {
+                        match axis {
+                            Axis::Vertical => {
+                                keymap_editor.vertical_scrollbar.show_scrollbar = false
+                            }
+                            Axis::Horizontal => {
+                                keymap_editor.horizontal_scrollbar.show_scrollbar = false
+                            }
+                        }
+                        cx.notify();
+                    })
+                    .ok();
+            }
+        }));
+    }
+}
+
+impl Component for Table<3> {
+    fn scope() -> ComponentScope {
+        ComponentScope::Layout
+    }
+
+    fn description() -> Option<&'static str> {
+        Some("A table component for displaying data in rows and columns with optional styling.")
+    }
+
+    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
+        Some(
+            v_flex()
+                .gap_6()
+                .children(vec![
+                    example_group_with_title(
+                        "Basic Tables",
+                        vec![
+                            single_example(
+                                "Simple Table",
+                                Table::new()
+                                    .width(px(400.))
+                                    .header(["Name", "Age", "City"])
+                                    .row(["Alice", "28", "New York"])
+                                    .row(["Bob", "32", "San Francisco"])
+                                    .row(["Charlie", "25", "London"])
+                                    .into_any_element(),
+                            ),
+                            single_example(
+                                "Two Column Table",
+                                Table::new()
+                                    .header(["Category", "Value"])
+                                    .width(px(300.))
+                                    .row(["Revenue", "$100,000"])
+                                    .row(["Expenses", "$75,000"])
+                                    .row(["Profit", "$25,000"])
+                                    .into_any_element(),
+                            ),
+                        ],
+                    ),
+                    example_group_with_title(
+                        "Styled Tables",
+                        vec![
+                            single_example(
+                                "Default",
+                                Table::new()
+                                    .width(px(400.))
+                                    .header(["Product", "Price", "Stock"])
+                                    .row(["Laptop", "$999", "In Stock"])
+                                    .row(["Phone", "$599", "Low Stock"])
+                                    .row(["Tablet", "$399", "Out of Stock"])
+                                    .into_any_element(),
+                            ),
+                            single_example(
+                                "Striped",
+                                Table::new()
+                                    .width(px(400.))
+                                    .striped()
+                                    .header(["Product", "Price", "Stock"])
+                                    .row(["Laptop", "$999", "In Stock"])
+                                    .row(["Phone", "$599", "Low Stock"])
+                                    .row(["Tablet", "$399", "Out of Stock"])
+                                    .row(["Headphones", "$199", "In Stock"])
+                                    .into_any_element(),
+                            ),
+                        ],
+                    ),
+                    example_group_with_title(
+                        "Mixed Content Table",
+                        vec![single_example(
+                            "Table with Elements",
+                            Table::new()
+                                .width(px(840.))
+                                .header(["Status", "Name", "Priority", "Deadline", "Action"])
+                                .row([
+                                    Indicator::dot().color(Color::Success).into_any_element(),
+                                    "Project A".into_any_element(),
+                                    "High".into_any_element(),
+                                    "2023-12-31".into_any_element(),
+                                    Button::new("view_a", "View")
+                                        .style(ButtonStyle::Filled)
+                                        .full_width()
+                                        .into_any_element(),
+                                ])
+                                .row([
+                                    Indicator::dot().color(Color::Warning).into_any_element(),
+                                    "Project B".into_any_element(),
+                                    "Medium".into_any_element(),
+                                    "2024-03-15".into_any_element(),
+                                    Button::new("view_b", "View")
+                                        .style(ButtonStyle::Filled)
+                                        .full_width()
+                                        .into_any_element(),
+                                ])
+                                .row([
+                                    Indicator::dot().color(Color::Error).into_any_element(),
+                                    "Project C".into_any_element(),
+                                    "Low".into_any_element(),
+                                    "2024-06-30".into_any_element(),
+                                    Button::new("view_c", "View")
+                                        .style(ButtonStyle::Filled)
+                                        .full_width()
+                                        .into_any_element(),
+                                ])
+                                .into_any_element(),
+                        )],
+                    ),
+                ])
+                .into_any_element(),
+        )
+    }
+}

crates/terminal_view/src/terminal_element.rs

@@ -196,7 +196,6 @@ impl TerminalElement {
             interactivity: Default::default(),
         }
         .track_focus(&focus)
-        .element
     }
 
     //Vec<Range<AlacPoint>> -> Clip out the parts of the ranges

crates/ui/Cargo.toml

@@ -20,6 +20,7 @@ gpui.workspace = true
 gpui_macros.workspace = true
 icons.workspace = true
 itertools.workspace = true
+log.workspace = true
 menu.workspace = true
 serde.workspace = true
 settings.workspace = true

crates/ui/src/components.rs

@@ -32,9 +32,9 @@ mod settings_group;
 mod stack;
 mod tab;
 mod tab_bar;
-mod table;
 mod toggle;
 mod tooltip;
+mod uniform_table;
 
 #[cfg(feature = "stories")]
 mod stories;
@@ -73,9 +73,9 @@ pub use settings_group::*;
 pub use stack::*;
 pub use tab::*;
 pub use tab_bar::*;
-pub use table::*;
 pub use toggle::*;
 pub use tooltip::*;
+pub use uniform_table::*;
 
 #[cfg(feature = "stories")]
 pub use stories::*;

crates/ui/src/components/table.rs

@@ -1,271 +0,0 @@
-use crate::{Indicator, prelude::*};
-use gpui::{AnyElement, FontWeight, IntoElement, Length, div};
-
-/// A table component
-#[derive(IntoElement, RegisterComponent)]
-pub struct Table {
-    column_headers: Vec<SharedString>,
-    rows: Vec<Vec<TableCell>>,
-    column_count: usize,
-    striped: bool,
-    width: Length,
-}
-
-impl Table {
-    /// Create a new table with a column count equal to the
-    /// number of headers provided.
-    pub fn new(headers: Vec<impl Into<SharedString>>) -> Self {
-        let column_count = headers.len();
-
-        Table {
-            column_headers: headers.into_iter().map(Into::into).collect(),
-            column_count,
-            rows: Vec::new(),
-            striped: false,
-            width: Length::Auto,
-        }
-    }
-
-    /// Adds a row to the table.
-    ///
-    /// The row must have the same number of columns as the table.
-    pub fn row(mut self, items: Vec<impl Into<TableCell>>) -> Self {
-        if items.len() == self.column_count {
-            self.rows.push(items.into_iter().map(Into::into).collect());
-        } else {
-            // TODO: Log error: Row length mismatch
-        }
-        self
-    }
-
-    /// Adds multiple rows to the table.
-    ///
-    /// Each row must have the same number of columns as the table.
-    /// Rows that don't match the column count are ignored.
-    pub fn rows(mut self, rows: Vec<Vec<impl Into<TableCell>>>) -> Self {
-        for row in rows {
-            self = self.row(row);
-        }
-        self
-    }
-
-    fn base_cell_style(cx: &mut App) -> Div {
-        div()
-            .px_1p5()
-            .flex_1()
-            .justify_start()
-            .text_ui(cx)
-            .whitespace_nowrap()
-            .text_ellipsis()
-            .overflow_hidden()
-    }
-
-    /// Enables row striping.
-    pub fn striped(mut self) -> Self {
-        self.striped = true;
-        self
-    }
-
-    /// Sets the width of the table.
-    pub fn width(mut self, width: impl Into<Length>) -> Self {
-        self.width = width.into();
-        self
-    }
-}
-
-impl RenderOnce for Table {
-    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
-        let header = div()
-            .flex()
-            .flex_row()
-            .items_center()
-            .justify_between()
-            .w_full()
-            .p_2()
-            .border_b_1()
-            .border_color(cx.theme().colors().border)
-            .children(self.column_headers.into_iter().map(|h| {
-                Self::base_cell_style(cx)
-                    .font_weight(FontWeight::SEMIBOLD)
-                    .child(h)
-            }));
-
-        let row_count = self.rows.len();
-        let rows = self.rows.into_iter().enumerate().map(|(ix, row)| {
-            let is_last = ix == row_count - 1;
-            let bg = if ix % 2 == 1 && self.striped {
-                Some(cx.theme().colors().text.opacity(0.05))
-            } else {
-                None
-            };
-            div()
-                .w_full()
-                .flex()
-                .flex_row()
-                .items_center()
-                .justify_between()
-                .px_1p5()
-                .py_1()
-                .when_some(bg, |row, bg| row.bg(bg))
-                .when(!is_last, |row| {
-                    row.border_b_1().border_color(cx.theme().colors().border)
-                })
-                .children(row.into_iter().map(|cell| match cell {
-                    TableCell::String(s) => Self::base_cell_style(cx).child(s),
-                    TableCell::Element(e) => Self::base_cell_style(cx).child(e),
-                }))
-        });
-
-        div()
-            .w(self.width)
-            .overflow_hidden()
-            .child(header)
-            .children(rows)
-    }
-}
-
-/// Represents a cell in a table.
-pub enum TableCell {
-    /// A cell containing a string value.
-    String(SharedString),
-    /// A cell containing a UI element.
-    Element(AnyElement),
-}
-
-/// Creates a `TableCell` containing a string value.
-pub fn string_cell(s: impl Into<SharedString>) -> TableCell {
-    TableCell::String(s.into())
-}
-
-/// Creates a `TableCell` containing an element.
-pub fn element_cell(e: impl Into<AnyElement>) -> TableCell {
-    TableCell::Element(e.into())
-}
-
-impl<E> From<E> for TableCell
-where
-    E: Into<SharedString>,
-{
-    fn from(e: E) -> Self {
-        TableCell::String(e.into())
-    }
-}
-
-impl Component for Table {
-    fn scope() -> ComponentScope {
-        ComponentScope::Layout
-    }
-
-    fn description() -> Option<&'static str> {
-        Some("A table component for displaying data in rows and columns with optional styling.")
-    }
-
-    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
-        Some(
-            v_flex()
-                .gap_6()
-                .children(vec![
-                    example_group_with_title(
-                        "Basic Tables",
-                        vec![
-                            single_example(
-                                "Simple Table",
-                                Table::new(vec!["Name", "Age", "City"])
-                                    .width(px(400.))
-                                    .row(vec!["Alice", "28", "New York"])
-                                    .row(vec!["Bob", "32", "San Francisco"])
-                                    .row(vec!["Charlie", "25", "London"])
-                                    .into_any_element(),
-                            ),
-                            single_example(
-                                "Two Column Table",
-                                Table::new(vec!["Category", "Value"])
-                                    .width(px(300.))
-                                    .row(vec!["Revenue", "$100,000"])
-                                    .row(vec!["Expenses", "$75,000"])
-                                    .row(vec!["Profit", "$25,000"])
-                                    .into_any_element(),
-                            ),
-                        ],
-                    ),
-                    example_group_with_title(
-                        "Styled Tables",
-                        vec![
-                            single_example(
-                                "Default",
-                                Table::new(vec!["Product", "Price", "Stock"])
-                                    .width(px(400.))
-                                    .row(vec!["Laptop", "$999", "In Stock"])
-                                    .row(vec!["Phone", "$599", "Low Stock"])
-                                    .row(vec!["Tablet", "$399", "Out of Stock"])
-                                    .into_any_element(),
-                            ),
-                            single_example(
-                                "Striped",
-                                Table::new(vec!["Product", "Price", "Stock"])
-                                    .width(px(400.))
-                                    .striped()
-                                    .row(vec!["Laptop", "$999", "In Stock"])
-                                    .row(vec!["Phone", "$599", "Low Stock"])
-                                    .row(vec!["Tablet", "$399", "Out of Stock"])
-                                    .row(vec!["Headphones", "$199", "In Stock"])
-                                    .into_any_element(),
-                            ),
-                        ],
-                    ),
-                    example_group_with_title(
-                        "Mixed Content Table",
-                        vec![single_example(
-                            "Table with Elements",
-                            Table::new(vec!["Status", "Name", "Priority", "Deadline", "Action"])
-                                .width(px(840.))
-                                .row(vec![
-                                    element_cell(
-                                        Indicator::dot().color(Color::Success).into_any_element(),
-                                    ),
-                                    string_cell("Project A"),
-                                    string_cell("High"),
-                                    string_cell("2023-12-31"),
-                                    element_cell(
-                                        Button::new("view_a", "View")
-                                            .style(ButtonStyle::Filled)
-                                            .full_width()
-                                            .into_any_element(),
-                                    ),
-                                ])
-                                .row(vec![
-                                    element_cell(
-                                        Indicator::dot().color(Color::Warning).into_any_element(),
-                                    ),
-                                    string_cell("Project B"),
-                                    string_cell("Medium"),
-                                    string_cell("2024-03-15"),
-                                    element_cell(
-                                        Button::new("view_b", "View")
-                                            .style(ButtonStyle::Filled)
-                                            .full_width()
-                                            .into_any_element(),
-                                    ),
-                                ])
-                                .row(vec![
-                                    element_cell(
-                                        Indicator::dot().color(Color::Error).into_any_element(),
-                                    ),
-                                    string_cell("Project C"),
-                                    string_cell("Low"),
-                                    string_cell("2024-06-30"),
-                                    element_cell(
-                                        Button::new("view_c", "View")
-                                            .style(ButtonStyle::Filled)
-                                            .full_width()
-                                            .into_any_element(),
-                                    ),
-                                ])
-                                .into_any_element(),
-                        )],
-                    ),
-                ])
-                .into_any_element(),
-        )
-    }
-}

crates/ui/src/components/uniform_table.rs

@@ -0,0 +1,50 @@
+use component::{Component, example_group_with_title, single_example};
+use gpui::{AnyElement, App, IntoElement, ParentElement as _, Styled as _, Window};
+use ui_macros::RegisterComponent;
+
+use crate::v_flex;
+
+#[derive(RegisterComponent)]
+struct Table;
+
+impl Component for Table {
+    fn name() -> &'static str {
+        "Uniform Table"
+    }
+
+    fn scope() -> component::ComponentScope {
+        component::ComponentScope::Layout
+    }
+
+    fn description() -> Option<&'static str> {
+        Some("A table with uniform rows")
+    }
+
+    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
+        let data = vec![
+            ["Alice", "25", "New York"],
+            ["Bob", "30", "Los Angeles"],
+            ["Charlie", "35", "Chicago"],
+            ["Sam", "27", "Detroit"],
+        ];
+        Some(
+            v_flex()
+                .gap_6()
+                .children([example_group_with_title(
+                    "Basic",
+                    vec![single_example(
+                        "Simple Table",
+                        gpui::uniform_table("simple table", 4, move |range, _, _| {
+                            data[range]
+                                .iter()
+                                .cloned()
+                                .map(|arr| arr.map(IntoElement::into_any_element))
+                                .collect()
+                        })
+                        .into_any_element(),
+                    )],
+                )])
+                .into_any_element(),
+        )
+    }
+}

crates/workspace/src/theme_preview.rs

@@ -5,8 +5,8 @@ use theme::all_theme_colors;
 use ui::{
     AudioStatus, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike,
     Checkbox, CheckboxWithLabel, CollaboratorAvailability, ContentGroup, DecoratedIcon,
-    ElevationIndex, Facepile, IconDecoration, Indicator, KeybindingHint, Switch, Table, TintColor,
-    Tooltip, element_cell, prelude::*, string_cell, utils::calculate_contrast_ratio,
+    ElevationIndex, Facepile, IconDecoration, Indicator, KeybindingHint, Switch, TintColor,
+    Tooltip, prelude::*, utils::calculate_contrast_ratio,
 };
 
 use crate::{Item, Workspace};

crates/zed/src/zed.rs

@@ -1419,6 +1419,8 @@ fn reload_keymaps(cx: &mut App, mut user_key_bindings: Vec<KeyBinding>) {
         "New Window",
         workspace::NewWindow,
     )]);
+    // todo! nicer api here
+    settings_ui::keybindings::KeymapEventChannel::trigger_keymap_changed(cx);
 }
 
 pub fn load_default_keymap(cx: &mut App) {