From f69f2fed3ff948614359492c284238d676b86105 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 12 Feb 2026 19:43:21 +0800
Subject: [PATCH 1/2] editable List

---
 components/Cargo.toml                         |   1 +
 components/src/drawer/drawer.rs               |  48 +-
 components/src/editable_list/editable_list.rs | 783 ++++++++++++++++++
 components/src/lib.rs                         |   6 +
 examples/component-zoo/Cargo.toml             |   1 +
 examples/component-zoo/src/app.rs             | 143 ++++
 6 files changed, 974 insertions(+), 8 deletions(-)
 create mode 100644 components/src/editable_list/editable_list.rs

diff --git a/components/Cargo.toml b/components/Cargo.toml
index 418ffdf..2021f7d 100644
--- a/components/Cargo.toml
+++ b/components/Cargo.toml
@@ -24,6 +24,7 @@ Checkbox                = []
 ColorPicker             = []
 Divider                 = []
 Dropdown                = []
+EditableList            = ["Drawer", "Button"]
 Drawer                  = []
 Input                   = []
 Label                   = []
diff --git a/components/src/drawer/drawer.rs b/components/src/drawer/drawer.rs
index 57f125c..750f06b 100644
--- a/components/src/drawer/drawer.rs
+++ b/components/src/drawer/drawer.rs
@@ -93,6 +93,11 @@ live_design! {
             flow: Right
             align: { y: 0.5 }
 
+            show_bg: true
+            draw_bg: {
+                color: #ffffff
+            }
+
             title = <Label> {
                 width: Fill
                 height: Fit
@@ -166,11 +171,16 @@ live_design! {
 
         body = <ScrollYView> {
             width: Fill
-            height: Fit
+            height: Fill
             padding: { left: 24, right: 24, top: 0, bottom: 16 }
             flow: Down
             spacing: 8
 
+            show_bg: true
+            draw_bg: {
+                color: #ffffff
+            }
+
             <Label> {
                 width: Fill
                 height: Fit
@@ -190,6 +200,11 @@ live_design! {
             flow: Right
             spacing: 8
             align: { x: 1.0, y: 0.5 }
+
+            show_bg: true
+            draw_bg: {
+                color: #ffffff
+            }
         }
     }
 
@@ -396,6 +411,8 @@ pub struct MpDrawerWidget {
     scroll_enabled: bool,
     #[rust]
     height_clamped: bool,
+    #[live]
+    draw_list: DrawList2d,
 }
 
 impl Widget for MpDrawerWidget {
@@ -427,16 +444,31 @@ impl Widget for MpDrawerWidget {
         }
     }
 
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, _walk: Walk) -> DrawStep {
         if !self.visible {
             return DrawStep::done();
         }
-        self.pass_size = cx.current_pass_size().into();
+
+        // Use overlay to draw on top of everything
+        self.draw_list.begin_overlay_reuse(cx);
+
+        let size = cx.current_pass_size();
+        self.pass_size = size.into();
+        cx.begin_root_turtle(size, Layout::flow_overlay());
+
         self.apply_animation_state(cx);
-        let result = self.view.draw_walk(cx, scope, walk);
+
+        // Draw the container with Fill size to cover the entire screen
+        let mut overlay_walk = Walk::fixed(size.x, size.y);
+        overlay_walk.abs_pos = Some(DVec2 { x: 0.0, y: 0.0 });
+        let _ = self.view.draw_walk(cx, scope, overlay_walk);
+
         self.update_drawer_size(cx);
         self.block_background_scroll(cx);
-        result
+        cx.end_pass_sized_turtle();
+        self.draw_list.end(cx);
+
+        DrawStep::done()
     }
 }
 
@@ -448,13 +480,13 @@ impl MpDrawerWidget {
         self.scroll_enabled = false;
         self.drawer_size = Vec2::default();
         self.start_animation(cx, 1.0);
-        self.redraw(cx);
+        cx.redraw_all();
     }
 
     /// Close the drawer
     pub fn close(&mut self, cx: &mut Cx) {
         self.start_animation(cx, 0.0);
-        self.redraw(cx);
+        cx.redraw_all();
     }
 
     /// Check if drawer is visible
@@ -501,7 +533,7 @@ impl MpDrawerWidget {
                 cx.unblock_scrolling();
             }
         }
-        self.redraw(cx);
+        cx.redraw_all();
     }
 
     fn apply_animation_state(&mut self, cx: &mut Cx) {
diff --git a/components/src/editable_list/editable_list.rs b/components/src/editable_list/editable_list.rs
new file mode 100644
index 0000000..0c2487e
--- /dev/null
+++ b/components/src/editable_list/editable_list.rs
@@ -0,0 +1,783 @@
+use makepad_widgets::*;
+
+use crate::{button::MpButtonWidgetRefExt, drawer::MpDrawerWidgetWidgetExt};
+
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+
+    use link::theme_colors::*;
+    use crate::theme::radius::*;
+    use crate::drawer::*;
+    use crate::button::*;
+
+    // ============================================================
+    // MpDynamicList - Generic dynamic list for any widget type
+    // ============================================================
+
+    pub MpDynamicList = {{MpDynamicList}} {
+        width: Fill
+        height: Fit
+        flow: RightWrap
+        //spacing: 8.0
+        padding: 8.0
+
+        // Default template - override this with your widget type
+        template: <View> {
+            width: Fit
+            height: Fit
+        }
+
+        // Plus button template for adding new items
+        plus_template: <View> {
+            width: Fit
+            height: Fit
+            plus_button = <Button> {
+                width: 40
+                height: 40
+                text: "+"
+            }
+        }
+    }
+
+    // ============================================================
+    // MpEditableList - Dynamic list with right drawer
+    // ============================================================
+
+    pub MpEditableList = {{MpEditableList}} {
+        width: Fill,
+        height: 200
+        flow: Overlay
+
+        // Main content area with dynamic list
+        content = <View> {
+            width: Fill
+            height: Fill
+            flow: Down
+
+            list = <MpDynamicList> {
+                width: Fill
+                height: Fit
+                flow: RightWrap
+
+                margin: {left: 20}
+                show_bg: true
+                draw_bg: {
+                    color: (CARD)
+                    instance border_radius: 8.0
+                    instance border_color: (BORDER)
+                    instance border_width: 1.0
+
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        sdf.box(
+                            self.border_width,
+                            self.border_width,
+                            self.rect_size.x - self.border_width * 2.0,
+                            self.rect_size.y - self.border_width * 2.0,
+                            max(1.0, self.border_radius - self.border_width)
+                        );
+                        sdf.fill(self.color);
+                        sdf.stroke(self.border_color, self.border_width);
+                        return sdf.result;
+                    }
+                }
+
+                // Template for child items
+                template: <View> {
+                    width: 100
+                    height: 40.0
+                    padding: {left: 6, right: 6}
+                    show_bg: false
+                    <RoundedView> {
+                        width: Fill, height: Fill
+                        padding: 0
+                        draw_bg: {
+                            color: (PRIMARY)
+                            border_radius: 8.0
+                        }
+                        item_label = <Label> {
+                            width: Fit
+                            height: Fit
+                            draw_text: {
+                                text_style: <THEME_FONT_REGULAR>{ font_size: 14.0 }
+                                color: (PRIMARY_FOREGROUND)
+                            }
+                        }
+                    }
+                }
+                plus_template: <View> {
+                    plus_button = <Button> {
+                        text: "+"
+                    }
+                }
+                setting_template: <View> {
+                    setting_button = <Button> {
+                        text: "*"
+                    }
+                }
+            }
+        }
+
+        // Right drawer for item options
+        drawer = <MpDrawerWidget> {
+            container = <MpDrawerContainerRight> {
+                drawer_right = <MpDrawerRight> {
+                    width: 320
+
+                    header = {
+                        title = {
+                            text: "Options"
+                        }
+                    }
+
+                    body = {
+                        spacing: 12
+
+                        configure_btn = <MpButtonPrimary> {
+                            width: Fill, height: 44
+                            text: "Configure"
+                        }
+
+                        edit_buttons = <View> {
+                            width: Fill, height: Fit
+                            flow: Down
+                            spacing: 12
+
+                            move_left_btn = <MpButtonPrimary> {
+                                width: Fill, height: 44
+                                text: "Move Left"
+                            }
+
+                            move_right_btn = <MpButtonPrimary> {
+                                width: Fill, height: 44
+                                text: "Move Right"
+                            }
+
+                            delete_btn = <MpButtonDanger> {
+                                width: Fill, height: 44
+                                text: "Delete"
+                            }
+                        }
+                    }
+
+                    footer = {}
+                }
+            }
+        }
+    }
+}
+
+// ============================================================
+// MpDynamicList - Generic list for any child widget type
+// ============================================================
+
+#[derive(Live, Widget)]
+pub struct MpDynamicList {
+    #[redraw]
+    #[rust]
+    area: Area,
+    /// Template for creating child widgets
+    #[live]
+    template: Option<LivePtr>,
+    #[live]
+    setting_template: Option<LivePtr>,
+    #[layout]
+    layout: Layout,
+    #[walk]
+    walk: Walk,
+    /// Dynamic children vector
+    #[rust]
+    pub children: Vec<WidgetRef>,
+    #[rust]
+    setting_children: Vec<WidgetRef>,
+    #[live]
+    plus_template: Option<LivePtr>,
+    #[rust]
+    plus: WidgetRef,
+    #[live]
+    draw_list: DrawList2d,
+}
+
+impl LiveHook for MpDynamicList {
+    fn after_apply(&mut self, cx: &mut Cx, _apply: &mut Apply, _index: usize, _nodes: &[LiveNode]) {
+        self.plus = WidgetRef::new_from_ptr(cx, self.plus_template);
+    }
+}
+
+impl Widget for MpDynamicList {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        cx.begin_turtle(walk, self.layout);
+
+        // First pass: draw all children and collect their positions
+        let mut child_rects = Vec::new();
+        for child_ref in self.children.iter_mut() {
+            let _ = child_ref.draw(cx, scope);
+            child_rects.push(child_ref.area().rect(cx));
+        }
+        let _ = self.plus.draw(cx, scope);
+        cx.end_turtle_with_area(&mut self.area);
+
+        // Second pass: draw setting overlays on top of each child
+        self.draw_list.begin_overlay_reuse(cx);
+        let size = cx.current_pass_size();
+        cx.begin_root_turtle(size, Layout::flow_overlay());
+
+        for (setting_ref, child_rect) in self.setting_children.iter_mut().zip(child_rects.iter()) {
+            let mut setting_walk = setting_ref.walk(cx);
+            setting_walk.abs_pos = Some(child_rect.pos);
+            setting_walk.width = Size::Fixed(child_rect.size.x);
+            setting_walk.height = Size::Fixed(child_rect.size.y);
+            let _ = setting_ref.draw_walk(cx, scope, setting_walk);
+        }
+
+        cx.end_pass_sized_turtle();
+        self.draw_list.end(cx);
+
+        DrawStep::done()
+    }
+
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        for widget_ref in self.children.iter_mut() {
+            widget_ref.handle_event(cx, event, scope);
+        }
+        for setting_ref in self.setting_children.iter_mut() {
+            setting_ref.handle_event(cx, event, scope);
+        }
+        self.plus.handle_event(cx, event, scope);
+        self.match_event(cx, event);
+    }
+}
+impl MatchEvent for MpDynamicList {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        if self.plus.button(ids!(plus_button)).clicked(actions) {
+            cx.widget_action(
+                self.widget_uid(),
+                &Scope::empty().path,
+                DynamicListAction::Add,
+            );
+        }
+        for (idx, setting_ref) in self.setting_children.iter().enumerate() {
+            if setting_ref.button(ids!(setting_button)).clicked(actions) {
+                cx.widget_action(
+                    self.widget_uid(),
+                    &Scope::empty().path,
+                    DynamicListAction::Configure(idx),
+                );
+                break;
+            }
+        }
+    }
+}
+impl MpDynamicList {
+    /// Get or create a child widget at the given index, then populate it with the closure.
+    /// If the index is beyond current children count, new widgets are created
+    /// from the template to fill up to and including the index.
+    ///
+    /// Inside the closure, you can cast the WidgetRef to a specific type using
+    /// the generated `as_*` methods (e.g., `widget.as_my_widget()`).
+    pub fn set_child<F>(&mut self, cx: &mut Cx, idx: usize, f: F)
+    where
+        F: FnOnce(&mut Cx, WidgetRef),
+    {
+        while self.children.len() <= idx {
+            let widget = WidgetRef::new_from_ptr(cx, self.template);
+            self.children.push(widget);
+            let widget = WidgetRef::new_from_ptr(cx, self.setting_template);
+            self.setting_children.push(widget);
+        }
+        f(cx, self.children[idx].clone());
+        self.redraw(cx);
+    }
+
+    /// Get a child widget at the given index, if it exists
+    pub fn get_child(&self, idx: usize) -> Option<WidgetRef> {
+        self.children.get(idx).cloned()
+    }
+
+    /// Get the number of children
+    pub fn child_count(&self) -> usize {
+        self.children.len()
+    }
+
+    /// Clear all children
+    pub fn clear(&mut self, cx: &mut Cx) {
+        self.children.clear();
+        self.setting_children.clear();
+        self.redraw(cx);
+    }
+
+    /// Remove a child at the given index
+    pub fn remove_child(&mut self, _cx: &mut Cx, idx: usize) -> Option<WidgetRef> {
+        if idx < self.children.len() {
+            self.setting_children.remove(idx);
+            Some(self.children.remove(idx))
+        } else {
+            None
+        }
+    }
+    pub fn set_plus<F>(&mut self, cx: &mut Cx, f: F)
+    where
+        F: FnOnce(&mut Cx, WidgetRef),
+    {
+        f(cx, self.plus.clone());
+    }
+}
+
+impl MpDynamicListRef {
+    /// Get or create a child widget at the given index, then populate it with the closure.
+    ///
+    /// Inside the closure, you can cast the WidgetRef to a specific type using
+    /// the generated `as_*` methods (e.g., `widget.as_my_widget()`).
+    pub fn set_child<F>(&self, cx: &mut Cx, idx: usize, f: F)
+    where
+        F: FnOnce(&mut Cx, WidgetRef),
+    {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_child(cx, idx, f);
+        }
+    }
+
+    /// Get a child widget at the given index, if it exists
+    pub fn get_child(&self, idx: usize) -> Option<WidgetRef> {
+        self.borrow().and_then(|inner| inner.get_child(idx))
+    }
+
+    /// Get the number of children
+    pub fn child_count(&self) -> usize {
+        self.borrow().map_or(0, |inner| inner.child_count())
+    }
+
+    /// Clear all children
+    pub fn clear(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.clear(cx);
+        }
+    }
+
+    /// Remove a child at the given index
+    pub fn remove_child(&self, cx: &mut Cx, idx: usize) -> Option<WidgetRef> {
+        self.borrow_mut()
+            .and_then(|mut inner| inner.remove_child(cx, idx))
+    }
+
+    pub fn set_plus<F>(&self, cx: &mut Cx, f: F)
+    where
+        F: FnOnce(&mut Cx, WidgetRef),
+    {
+        self.borrow_mut().map(|mut inner| inner.set_plus(cx, f));
+    }
+
+    /// Check if the Add action was requested
+    pub fn add_requested(&self, actions: &Actions) -> bool {
+        if let Some(inner) = self.borrow() {
+            if let Some(item) = actions.find_widget_action(inner.widget_uid()) {
+                if let DynamicListAction::Add = item.cast() {
+                    return true;
+                }
+            }
+        }
+        false
+    }
+
+    /// Check if Configure action was requested and return the index
+    pub fn configure_requested(&self, actions: &Actions) -> Option<usize> {
+        if let Some(inner) = self.borrow() {
+            if let Some(item) = actions.find_widget_action(inner.widget_uid()) {
+                if let DynamicListAction::Configure(idx) = item.cast() {
+                    return Some(idx);
+                }
+            }
+        }
+        None
+    }
+}
+
+#[derive(Clone, Debug, DefaultNone)]
+pub enum DynamicListAction {
+    None,
+    Configure(usize),
+    Add,
+}
+
+// ============================================================
+// MpEditableList - Dynamic list with right drawer
+// ============================================================
+
+/// Callback type for setting up child widgets
+pub type SetChildFn<T> = Box<dyn Fn(&mut Cx, usize, WidgetRef, &T)>;
+
+#[derive(Live, Widget)]
+pub struct MpEditableList {
+    #[deref]
+    view: View,
+
+    #[rust]
+    selected_index: Option<usize>,
+
+    #[rust]
+    initialized: bool,
+}
+
+impl LiveHook for MpEditableList {
+    fn after_apply(&mut self, _cx: &mut Cx, _apply: &mut Apply, _index: usize, _nodes: &[LiveNode]) {
+        if !self.initialized {
+            self.initialized = true;
+            // Pre-initialize drawer content to avoid first-open lag
+            // This forces widget instantiation before first use
+            let _ = self.view.view(ids!(drawer.container.drawer));
+        }
+    }
+}
+
+impl Widget for MpEditableList {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        self.view
+            .view(ids!(drawer.container.drawer_right))
+            .handle_event(cx, event, scope);
+        self.match_event(cx, event);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl MatchEvent for MpEditableList {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        // Collect what actions need to be performed (to avoid borrow conflicts)
+        let mut close_drawer_requested = false;
+        let mut add_requested = false;
+        let mut configure_idx: Option<usize> = None;
+        let mut configure_clicked = false;
+        let mut move_left_clicked = false;
+        let mut move_right_clicked = false;
+        let mut delete_clicked = false;
+
+        // Check actions while holding borrows
+        {
+            let drawer = self.view.mp_drawer_widget(ids!(drawer));
+            if drawer.close_requested(actions) {
+                close_drawer_requested = true;
+            }
+
+            let list = self.view.mp_dynamic_list(ids!(content.list));
+            if list.add_requested(actions) {
+                add_requested = true;
+            }
+            if let Some(idx) = list.configure_requested(actions) {
+                configure_idx = Some(idx);
+            }
+
+            if drawer.mp_button(ids!(body.configure_btn)).clicked(actions) {
+                configure_clicked = true;
+            }
+            if drawer
+                .mp_button(ids!(body.edit_buttons.move_left_btn))
+                .clicked(actions)
+            {
+                move_left_clicked = true;
+            }
+            if drawer
+                .mp_button(ids!(body.edit_buttons.move_right_btn))
+                .clicked(actions)
+            {
+                move_right_clicked = true;
+            }
+            if drawer
+                .mp_button(ids!(body.edit_buttons.delete_btn))
+                .clicked(actions)
+            {
+                delete_clicked = true;
+            }
+        }
+        // Borrows dropped, now execute actions
+
+        if close_drawer_requested {
+            self.close_drawer(cx);
+        }
+
+        if add_requested {
+            self.open_drawer_for_add(cx);
+        }
+
+        if let Some(idx) = configure_idx {
+            self.selected_index = Some(idx);
+            self.open_drawer_for_item(cx, idx);
+        }
+
+        if configure_clicked {
+            println!("configure clicked");
+            cx.widget_action(
+                self.widget_uid(),
+                &Scope::empty().path,
+                EditableListAction::Configure(self.selected_index),
+            );
+            self.close_drawer(cx);
+        }
+
+        if move_left_clicked {
+            if let Some(idx) = self.selected_index {
+                self.move_item_left(cx, idx);
+                cx.widget_action(
+                    self.widget_uid(),
+                    &Scope::empty().path,
+                    EditableListAction::MoveLeft(idx),
+                );
+            }
+            self.close_drawer(cx);
+        }
+
+        if move_right_clicked {
+            if let Some(idx) = self.selected_index {
+                self.move_item_right(cx, idx);
+                cx.widget_action(
+                    self.widget_uid(),
+                    &Scope::empty().path,
+                    EditableListAction::MoveRight(idx),
+                );
+            }
+            self.close_drawer(cx);
+        }
+
+        if delete_clicked {
+            if let Some(idx) = self.selected_index {
+                self.delete_item(cx, idx);
+                cx.widget_action(
+                    self.widget_uid(),
+                    &Scope::empty().path,
+                    EditableListAction::Delete(idx),
+                );
+            }
+            self.close_drawer(cx);
+        }
+    }
+}
+
+impl MpEditableList {
+    /// Open the drawer
+    pub fn open_drawer(&mut self, cx: &mut Cx) {
+        self.view.mp_drawer_widget(ids!(drawer)).open(cx);
+    }
+
+    /// Open the drawer for adding a new item (hides edit buttons)
+    pub fn open_drawer_for_add(&mut self, cx: &mut Cx) {
+        self.selected_index = None;
+        let drawer_view = self.view.view(ids!(drawer.container.drawer_right));
+        drawer_view
+            .label(ids!(header.title))
+            .set_text(cx, "Add Item");
+        drawer_view
+            .view(ids!(body.edit_buttons))
+            .set_visible(cx, false);
+        self.open_drawer(cx);
+    }
+
+    /// Open the drawer with a specific item selected (shows edit buttons)
+    pub fn open_drawer_for_item(&mut self, cx: &mut Cx, index: usize) {
+        self.selected_index = Some(index);
+        let drawer_view = self.view.view(ids!(drawer.container.drawer_right));
+        drawer_view
+            .label(ids!(header.title))
+            .set_text(cx, &format!("Item {}", index));
+        drawer_view
+            .view(ids!(body.edit_buttons))
+            .set_visible(cx, true);
+        self.open_drawer(cx);
+    }
+
+    /// Close the drawer
+    pub fn close_drawer(&mut self, cx: &mut Cx) {
+        self.view.mp_drawer_widget(ids!(drawer)).close(cx);
+        self.selected_index = None;
+    }
+
+    /// Check if the drawer is open
+    pub fn is_drawer_open(&self) -> bool {
+        self.view.mp_drawer_widget(ids!(drawer)).is_open()
+    }
+
+    /// Get the inner dynamic list
+    pub fn list(&self) -> MpDynamicListRef {
+        self.view.mp_dynamic_list(ids!(content.list))
+    }
+
+    /// Move an item left (swap with previous item)
+    pub fn move_item_left(&mut self, cx: &mut Cx, index: usize) {
+        if index > 0 {
+            let did_swap = {
+                if let Some(mut list) = self.view.mp_dynamic_list(ids!(content.list)).borrow_mut() {
+                    if index < list.children.len() {
+                        list.children.swap(index, index - 1);
+                        list.setting_children.swap(index, index - 1);
+                        true
+                    } else {
+                        false
+                    }
+                } else {
+                    false
+                }
+            };
+            if did_swap {
+                self.view.redraw(cx);
+            }
+        }
+    }
+
+    /// Move an item right (swap with next item)
+    pub fn move_item_right(&mut self, cx: &mut Cx, index: usize) {
+        let did_swap = {
+            if let Some(mut list) = self.view.mp_dynamic_list(ids!(content.list)).borrow_mut() {
+                if index + 1 < list.children.len() {
+                    list.children.swap(index, index + 1);
+                    list.setting_children.swap(index, index + 1);
+                    true
+                } else {
+                    false
+                }
+            } else {
+                false
+            }
+        };
+        if did_swap {
+            self.view.redraw(cx);
+        }
+    }
+
+    /// Delete an item at the given index
+    pub fn delete_item(&mut self, cx: &mut Cx, index: usize) {
+        let did_delete = {
+            if let Some(mut list) = self.view.mp_dynamic_list(ids!(content.list)).borrow_mut() {
+                if index < list.children.len() {
+                    list.setting_children.remove(index);
+                    list.children.remove(index);
+                    true
+                } else {
+                    false
+                }
+            } else {
+                false
+            }
+        };
+        if did_delete {
+            self.view.redraw(cx);
+        }
+    }
+}
+
+impl MpEditableListRef {
+    /// Open the drawer
+    pub fn open_drawer(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.open_drawer(cx);
+        }
+    }
+
+    /// Open the drawer for adding a new item (hides edit buttons)
+    pub fn open_drawer_for_add(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.open_drawer_for_add(cx);
+        }
+    }
+
+    /// Open the drawer with a specific item selected (shows edit buttons)
+    pub fn open_drawer_for_item(&self, cx: &mut Cx, index: usize) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.open_drawer_for_item(cx, index);
+        }
+    }
+
+    /// Close the drawer
+    pub fn close_drawer(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.close_drawer(cx);
+        }
+    }
+
+    /// Check if the drawer is open
+    pub fn is_drawer_open(&self) -> bool {
+        self.borrow().map_or(false, |inner| inner.is_drawer_open())
+    }
+
+    /// Get the inner dynamic list
+    pub fn list(&self) -> MpDynamicListRef {
+        if let Some(inner) = self.borrow() {
+            inner.list()
+        } else {
+            MpDynamicListRef::default()
+        }
+    }
+
+    /// Move an item left (swap with previous item)
+    pub fn move_item_left(&self, cx: &mut Cx, index: usize) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.move_item_left(cx, index);
+        }
+    }
+
+    /// Move an item right (swap with next item)
+    pub fn move_item_right(&self, cx: &mut Cx, index: usize) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.move_item_right(cx, index);
+        }
+    }
+
+    /// Delete an item at the given index
+    pub fn delete_item(&self, cx: &mut Cx, index: usize) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.delete_item(cx, index);
+        }
+    }
+
+    /// Handle a EditableListEditAction with a closure to set up child widgets
+    /// The closure receives (cx, index, widget_ref, data) for Add/Configure actions
+    pub fn handle_edit_action<T, F>(&self, cx: &mut Cx, action: &EditableListEditAction<T>, f: F)
+    where
+        F: FnOnce(&mut Cx, usize, WidgetRef, &T),
+    {
+        match action {
+            EditableListEditAction::Add(data) => {
+                let list = self.list();
+                let idx = list.child_count();
+                list.set_child(cx, idx, |cx, widget| {
+                    f(cx, idx, widget, data);
+                });
+            }
+            EditableListEditAction::Configure(Some(idx), data) => {
+                let list = self.list();
+                if let Some(widget) = list.get_child(*idx) {
+                    f(cx, *idx, widget, data);
+                }
+            }
+            EditableListEditAction::Delete(idx) => {
+                self.delete_item(cx, *idx);
+            }
+            _ => {}
+        }
+    }
+}
+
+#[derive(Clone, Debug, DefaultNone)]
+pub enum EditableListAction {
+    None,
+    Configure(Option<usize>),
+    MoveLeft(usize),
+    MoveRight(usize),
+    Delete(usize),
+}
+
+#[derive(Clone, Debug)]
+pub enum EditableListEditAction<T> {
+    None,
+    Configure(Option<usize>, T),
+    Add(T),
+    Delete(usize),
+}
+
+impl<T> Default for EditableListEditAction<T> {
+    fn default() -> Self {
+        EditableListEditAction::None
+    }
+}
diff --git a/components/src/lib.rs b/components/src/lib.rs
index a0c5093..a2e0694 100644
--- a/components/src/lib.rs
+++ b/components/src/lib.rs
@@ -53,6 +53,10 @@ pub mod dropdown;
 #[path ="./drawer/drawer.rs"]
 pub mod drawer;
 
+#[cfg(feature = "EditableList")]
+#[path ="./editable_list/editable_list.rs"]
+pub mod editable_list;
+
 #[cfg(feature = "Input")]
 #[path ="./input/input.rs"]
 pub mod input;
@@ -167,6 +171,8 @@ pub fn live_design(cx: &mut Cx) {
     dropdown::live_design(cx);
     #[cfg(feature = "Drawer")]
     drawer::live_design(cx);
+    #[cfg(feature = "EditableList")]
+    editable_list::live_design(cx);
     #[cfg(feature = "Input")]
     input::live_design(cx);
     #[cfg(feature = "Label")]
diff --git a/examples/component-zoo/Cargo.toml b/examples/component-zoo/Cargo.toml
index 1158e05..f3efa38 100644
--- a/examples/component-zoo/Cargo.toml
+++ b/examples/component-zoo/Cargo.toml
@@ -19,6 +19,7 @@ makepad-components = { workspace = true, features = [
     "Divider",
     "Dropdown",
     "Drawer",
+    "EditableList",
     "Input",
     "Label",
     "Layout",
diff --git a/examples/component-zoo/src/app.rs b/examples/component-zoo/src/app.rs
index 1c95ef2..1bbf2ff 100644
--- a/examples/component-zoo/src/app.rs
+++ b/examples/component-zoo/src/app.rs
@@ -19,6 +19,7 @@ use makepad_components::slider::MpSliderWidgetRefExt;
 use makepad_components::switch::MpSwitchWidgetRefExt;
 use makepad_components::tab::MpTabWidgetRefExt;
 use makepad_components::theme::{apply_theme, ThemeMode};
+use makepad_components::editable_list::{MpEditableListWidgetRefExt, EditableListEditAction, EditableListAction};
 
 live_design! {
     use link::theme::*;
@@ -59,6 +60,7 @@ live_design! {
     use link::theme_colors::*;
     use makepad_components::tooltip::*;
     use makepad_components::table::*;
+    use makepad_components::editable_list::*;
 
     // ============================================================
     // Section Header Component
@@ -2318,6 +2320,39 @@ live_design! {
 
                             <MpDivider> {}
 
+                            // ===== Editable List Section =====
+                            <View> {
+                                width: Fill, height: Fit,
+                                flow: Down,
+                                spacing: 16,
+
+                                <SectionHeader> { text: "Editable List" }
+
+                                <SubsectionLabel> {
+                                    text: "A generic list that can hold any widget type with closure-based population"
+                                }
+
+                                <View> {
+                                    width: Fill, height: Fit,
+                                    flow: Right,
+                                    spacing: 8,
+                                    align: { y: 0.5 }
+
+                                    add_item_btn = <MpButton> { text: "Add Item" }
+                                    clear_items_btn = <MpButtonOutline> { text: "Clear All" }
+                                    item_count_label = <Label> {
+                                        draw_text: {
+                                            text_style: <THEME_FONT_REGULAR>{ font_size: 14.0 }
+                                            color: (MUTED_FOREGROUND)
+                                        }
+                                        text: "Items: 0"
+                                    }
+                                }
+                                editable_list_demo = <MpEditableList>{}
+                            }
+
+                            <MpDivider> {}
+
                             <View> {
                                 width: Fill, height: Fit,
                                 flow: Down,
@@ -3917,9 +3952,37 @@ live_design! {
                     }
                 } // close demo_modal
 
+                    // EditableList modal - must be at root level for overlay
+                    editable_list_modal = <MpModalWidget> {
+                        content = {
+                            dialog = <MpModal> {
+                                width: 400
+                                header = {
+                                    title = { text: "Configure Item" }
+                                }
+                                body = {
+                                    <Label> {
+                                        width: Fill
+                                        draw_text: {
+                                            text_style: <THEME_FONT_REGULAR>{ font_size: 14.0 }
+                                            color: (MUTED_FOREGROUND)
+                                            wrap: Word
+                                        }
+                                        text: "Configure or add a new item."
+                                    }
+                                }
+                                footer = {
+                                    editable_list_modal_cancel_btn = <MpButtonGhost> { text: "Cancel" }
+                                    editable_list_modal_save_btn = <MpButtonPrimary> { text: "Save" }
+                                }
+                            }
+                        }
+                    } // close editable_list_modal
+
                     demo_drawer_right = <MpDrawerWidget> {
                         container = <MpDrawerContainerRight> {
                             drawer = <MpDrawerRight> {
+
                                 header = {
                                     title = { text: "Quick Settings" }
                                 }
@@ -4168,6 +4231,10 @@ pub struct App {
     menu_tree_settings_expanded: bool,
     #[rust]
     radius_demo_value: f64,
+    #[rust]
+    dynamic_list_count: usize,
+    #[rust]
+    editable_list_modal_index: Option<usize>,
 }
 
 impl LiveHook for App {
@@ -4207,6 +4274,13 @@ impl MatchEvent for App {
         self.sync_tree_menu_ui(cx);
         self.sync_radius_demo_ui(cx);
 
+        // Initialize dynamic list with some items
+        self.dynamic_list_count = 0;
+        for _ in 0..2 {
+            self.ui.mp_editable_list(ids!(editable_list_demo)).handle_edit_action(cx, &EditableListEditAction::Add(String::from("hello")), |cx, idx, widget, data| {
+                widget.label(ids!(item_label)).set_text(cx, &format!("{} {}", data, idx));
+            });
+        }
     }
 
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
@@ -4291,6 +4365,74 @@ impl MatchEvent for App {
             log!("Notifications: {}", if on { "ON" } else { "OFF" });
         }
 
+        // Handle dynamic list buttons
+        if self.ui.mp_button(ids!(add_item_btn)).clicked(&actions) {
+            self.ui
+                .mp_editable_list(ids!(editable_list_demo))
+                .handle_edit_action(
+                    cx,
+                    &EditableListEditAction::Add(String::from("hello")),
+                    |cx, _idx, widget, data| {
+                        widget.label(ids!(item_label)).set_text(cx, data);
+                    },
+                );
+        }
+        if self.ui.mp_button(ids!(clear_items_btn)).clicked(&actions) {
+            self.ui.mp_editable_list(ids!(editable_list_demo)).list().clear(cx);
+        }
+
+        // Handle EditableListAction from editable_list_demo
+        for action in actions {
+            if let EditableListAction::Configure(idx) = action.as_widget_action().cast() {
+                // Open modal for configure (idx is Some) or add (idx is None)
+                self.editable_list_modal_index = idx;
+                self.ui.mp_modal_widget(ids!(editable_list_modal)).open(cx);
+            }
+        }
+
+        // Handle editable_list modal buttons
+        if self
+            .ui
+            .mp_button(ids!(editable_list_modal_cancel_btn))
+            .clicked(&actions)
+        {
+            self.ui.mp_modal_widget(ids!(editable_list_modal)).close(cx);
+        }
+        if self
+            .ui
+            .mp_button(ids!(editable_list_modal_save_btn))
+            .clicked(&actions)
+        {
+            if let Some(idx) = self.editable_list_modal_index {
+                // Configure mode - update existing item
+                self.ui
+                    .mp_editable_list(ids!(editable_list_demo))
+                    .handle_edit_action(
+                        cx,
+                        &EditableListEditAction::Configure(Some(idx), String::from("Updated")),
+                        |cx, idx, widget, data| {
+                            widget
+                                .label(ids!(item_label))
+                                .set_text(cx, &format!("{} {}", data, idx));
+                        },
+                    );
+            } else {
+                // Add mode - create new item
+                self.ui
+                    .mp_editable_list(ids!(editable_list_demo))
+                    .handle_edit_action(
+                        cx,
+                        &EditableListEditAction::Add(String::from("New Item")),
+                        |cx, idx, widget, data| {
+                            widget
+                                .label(ids!(item_label))
+                                .set_text(cx, &format!("{} {}", data, idx));
+                        },
+                    );
+            }
+            self.ui.mp_modal_widget(ids!(editable_list_modal)).close(cx);
+        }
+
         // Handle radio changes (mutually exclusive)
         if self.ui.mp_radio(ids!(radio_small)).changed(&actions).is_some() {
             self.ui.mp_radio(ids!(radio_medium)).set_checked(cx, false);
@@ -4838,6 +4980,7 @@ impl App {
             .set_text(cx, &format!("Tree Selected: {}", label));
         self.ui.redraw(cx);
     }
+
 }
 
 impl AppMain for App {

From 47ab6d35bae840885eb464ae237d41405b98356c Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 13 Feb 2026 09:58:37 +0800
Subject: [PATCH 2/2] live column config

---
 .../flexible_data_table.rs                    | 72 ++++++++-----------
 1 file changed, 28 insertions(+), 44 deletions(-)

diff --git a/components/src/flexible_data_table/flexible_data_table.rs b/components/src/flexible_data_table/flexible_data_table.rs
index 62da64d..4ea6ea8 100644
--- a/components/src/flexible_data_table/flexible_data_table.rs
+++ b/components/src/flexible_data_table/flexible_data_table.rs
@@ -311,54 +311,13 @@ impl LiveColumnConfig {
             self.dropdown_labels.split(',').map(|s| s.trim().to_string()).collect()
         }
     }
-}
-
-/// Live-compatible hidden cell configuration for DSL
-#[derive(Live, LiveHook, LiveRegister, Clone, Debug)]
-#[live_ignore]
-pub struct LiveHiddenCell {
-    /// Row index
-    #[live(0)]
-    pub row: i64,
-    /// Column index
-    #[live(0)]
-    pub col: i64,
-}
-
-impl Default for LiveHiddenCell {
-    fn default() -> Self {
-        Self { row: 0, col: 0 }
-    }
-}
-
-impl LiveHiddenCell {
-    /// Convert to (usize, usize) tuple
-    pub fn to_tuple(&self) -> (usize, usize) {
-        (self.row.max(0) as usize, self.col.max(0) as usize)
-    }
-}
-
-/// Configuration for a single column
-#[derive(Clone, Debug)]
-pub struct ColumnConfig {
-    /// Column header name
-    pub name: String,
-    /// Type of cell for this column
-    pub cell_type: CellType,
-    /// Width of the column in pixels
-    pub width: f64,
-    /// Options for dropdown cells (labels)
-    pub dropdown_labels: Vec<String>,
-}
-
-impl ColumnConfig {
     /// Create a new dropdown column
     pub fn dropdown(name: impl Into<String>, labels: Vec<String>, width: f64) -> Self {
         Self {
             name: name.into(),
             cell_type: CellType::DropDown,
             width,
-            dropdown_labels: labels,
+            dropdown_labels: labels.join(","),
         }
     }
 
@@ -368,7 +327,7 @@ impl ColumnConfig {
             name: name.into(),
             cell_type: CellType::TextInput,
             width,
-            dropdown_labels: Vec::new(),
+            dropdown_labels: String::new(),
         }
     }
 
@@ -378,11 +337,36 @@ impl ColumnConfig {
             name: name.into(),
             cell_type: CellType::ColorPicker,
             width,
-            dropdown_labels: Vec::new(),
+            dropdown_labels: String::new(),
         }
     }
 }
 
+/// Live-compatible hidden cell configuration for DSL
+#[derive(Live, LiveHook, LiveRegister, Clone, Debug)]
+#[live_ignore]
+pub struct LiveHiddenCell {
+    /// Row index
+    #[live(0)]
+    pub row: i64,
+    /// Column index
+    #[live(0)]
+    pub col: i64,
+}
+
+impl Default for LiveHiddenCell {
+    fn default() -> Self {
+        Self { row: 0, col: 0 }
+    }
+}
+
+impl LiveHiddenCell {
+    /// Convert to (usize, usize) tuple
+    pub fn to_tuple(&self) -> (usize, usize) {
+        (self.row.max(0) as usize, self.col.max(0) as usize)
+    }
+}
+
 /// Value held by a single cell
 #[derive(Clone, Debug)]
 pub enum CellValue {