fix: scroll left panel (#257)

Co-authored-by: alkaid <muliangcong@126.com>

Author: alkaid

app/src/ssh_manager/panel.rs

@@ -19,9 +19,11 @@ use warp_core::ui::theme::color::internal_colors;
 use warpui::elements::{
     AcceptedByDropTarget, Border, ChildAnchor, ConstrainedBox, Container, CornerRadius,
     CrossAxisAlignment, Dismiss, Draggable, DraggableState, DropTarget, DropTargetData, Element,
-    Empty, Flex, Hoverable, MainAxisAlignment, MainAxisSize, MouseStateHandle, OffsetPositioning,
-    ParentAnchor, ParentElement, ParentOffsetBounds, Radius, SavePosition, Stack, Text,
+    Empty, Fill as ElementFill, Flex, Hoverable, MainAxisAlignment, MainAxisSize, MouseStateHandle,
+    OffsetPositioning, ParentAnchor, ParentElement, ParentOffsetBounds, Radius, SavePosition,
+    ScrollbarWidth, Stack, Text,
 };
+use warpui::elements::{ClippedScrollStateHandle, ClippedScrollable};
 use warpui::platform::Cursor;
 use warpui::ui_components::components::{Coords, UiComponent, UiComponentStyles};
 use warpui::{
@@ -194,6 +196,8 @@ pub struct SshManagerPanel {
     /// 区段头的 Refresh / Toggle 按钮 hover state。
     candidates_refresh_btn: MouseStateHandle,
     candidates_toggle_btn: MouseStateHandle,
+
+    content_scroll_state: ClippedScrollStateHandle,
 }
 
 impl SshManagerPanel {
@@ -220,6 +224,7 @@ impl SshManagerPanel {
             candidate_add_states: HashMap::new(),
             candidates_refresh_btn: MouseStateHandle::default(),
             candidates_toggle_btn: MouseStateHandle::default(),
+            content_scroll_state: ClippedScrollStateHandle::default(),
         };
         // 面板首次打开 → 立刻读一次 ssh_config(PRODUCT.md decision A)。
         me.candidates.update(ctx, |vm, ctx| vm.refresh(ctx));
@@ -1827,17 +1832,30 @@ impl View for SshManagerPanel {
             .with_padding_right(PANEL_HORIZONTAL_PADDING - ITEM_PADDING_HORIZONTAL)
             .finish();
 
-        // 让 tree 占满剩余垂直空间 — 这样 root DropTarget 覆盖到 panel 底部,
-        // 用户在树最底下空白处拖也能落到 root(`SshDropData{parent_id:None}`)。
-        let tree_filled = warpui::elements::Shrinkable::new(1.0, tree).finish();
+        let root_content = Flex::column()
+            .with_main_axis_size(MainAxisSize::Min)
+            .with_cross_axis_alignment(CrossAxisAlignment::Stretch)
+            .with_child(candidates_section)
+            .with_child(tree)
+            .finish();
+
+        let scrollable_content = ClippedScrollable::vertical_centered(
+            self.content_scroll_state.clone(),
+            root_content,
+            ScrollbarWidth::Custom(4.0),
+            appearance.theme().nonactive_ui_detail().into(),
+            appearance.theme().active_ui_detail().into(),
+            ElementFill::None,
+        )
+        .with_overlayed_scrollbar()
+        .finish();
 
         let panel_content = Container::new(
             Flex::column()
                 .with_main_axis_size(MainAxisSize::Max)
                 .with_cross_axis_alignment(CrossAxisAlignment::Stretch)
                 .with_child(toolbar)
-                .with_child(candidates_section)
-                .with_child(tree_filled)
+                .with_child(warpui::elements::Shrinkable::new(1.0, scrollable_content).finish())
                 .finish(),
         )
         .finish();

app/src/ssh_manager/panel_tests.rs

@@ -4,7 +4,14 @@
 
 use super::*;
 use chrono::NaiveDateTime;
+use pathfinder_geometry::vector::vec2f;
+use warp_core::ui::appearance::Appearance;
 use warp_ssh_manager::{NodeKind, SshNode};
+use warpui::platform::WindowStyle;
+use warpui::units::IntoPixels;
+use warpui::{App, Presenter, WindowInvalidation};
+
+use crate::test_util::settings::initialize_settings_for_tests;
 
 // --- 测试辅助 --------------------------------------------------------------
 
@@ -38,6 +45,57 @@ fn server(id: &str, parent_id: Option<&str>, name: &str, sort_order: i32) -> Ssh
     }
 }
 
+fn panel_with_nodes(
+    ctx: &mut ViewContext<SshManagerPanel>,
+    nodes: Vec<SshNode>,
+) -> SshManagerPanel {
+    let depths = compute_depths(&nodes);
+    let candidates = ctx.add_model(|_| CandidatesViewModel::new());
+    let mut row_states = HashMap::new();
+    let mut row_drag_states = HashMap::new();
+    for node in &nodes {
+        row_states.insert(node.id.clone(), MouseStateHandle::default());
+        row_drag_states.insert(node.id.clone(), DraggableState::default());
+    }
+
+    SshManagerPanel {
+        nodes,
+        depths,
+        selected_id: None,
+        add_folder_btn: MouseStateHandle::default(),
+        add_server_btn: MouseStateHandle::default(),
+        toggle_all_btn: MouseStateHandle::default(),
+        row_states,
+        row_drag_states,
+        context_menu_position: None,
+        context_menu_target: None,
+        context_menu_item_states: (0..MAX_CONTEXT_MENU_ITEMS)
+            .map(|_| MouseStateHandle::default())
+            .collect(),
+        rename_state: None,
+        candidates,
+        candidate_row_states: HashMap::new(),
+        candidate_add_states: HashMap::new(),
+        candidates_refresh_btn: MouseStateHandle::default(),
+        candidates_toggle_btn: MouseStateHandle::default(),
+        content_scroll_state: ClippedScrollStateHandle::default(),
+    }
+}
+
+fn render_panel_scene(app: &mut App, presenter: &mut Presenter, window_id: warpui::WindowId) {
+    let mut updated = std::collections::HashSet::new();
+    updated.insert(app.root_view_id(window_id).unwrap());
+    let invalidation = WindowInvalidation {
+        updated,
+        ..Default::default()
+    };
+
+    app.update(move |ctx| {
+        presenter.invalidate(invalidation, ctx);
+        presenter.build_scene(vec2f(240., 120.), 1., None, ctx);
+    });
+}
+
 // --- resolve_parent_for_new_node 测试 ---------------------------------------
 
 #[test]
@@ -252,3 +310,30 @@ fn sort_keeps_orphaned_existing_nodes_visible_as_roots() {
     assert_eq!(depths["s1"], 0);
     assert_eq!(depths["f1"], 0);
 }
+
+#[test]
+fn panel_content_can_scroll_when_ssh_list_is_taller_than_panel() {
+    App::test((), |mut app| async move {
+        initialize_settings_for_tests(&mut app);
+        app.add_singleton_model(|_| Appearance::mock());
+        app.add_singleton_model(|_| SshTreeChangedNotifier::new());
+
+        let nodes = (0..60)
+            .map(|i| server(&format!("s{i}"), None, &format!("server-{i}"), i))
+            .collect::<Vec<_>>();
+        let (window_id, panel) = app.add_window(WindowStyle::NotStealFocus, |ctx| {
+            panel_with_nodes(ctx, nodes)
+        });
+        let mut presenter = Presenter::new(window_id);
+
+        render_panel_scene(&mut app, &mut presenter, window_id);
+        let scroll_state = panel.read(&app, |panel, _| panel.content_scroll_state.clone());
+
+        scroll_state.scroll_by(10_000_f32.into_pixels());
+        render_panel_scene(&mut app, &mut presenter, window_id);
+
+        let scroll_start = scroll_state.scroll_start().as_f32();
+        assert!(scroll_start > 0.0);
+        assert!(scroll_start < 10_000.0);
+    });
+}