fix: align rust web stitch sidebar tabs

rust/crates/mnote-web/src/workspace_shell.rs

@@ -102,13 +102,13 @@ pub fn build_workspace_shell_projection(
                 id: "trash".into(),
                 label: "垃圾箱".into(),
                 href: "/trash".into(),
-                icon: "🗑".into(),
+                icon: "⌫".into(),
             },
             WorkspaceShellEntry {
                 id: "templates".into(),
                 label: "模板中心".into(),
                 href: "/templates".into(),
-                icon: "📦".into(),
+                icon: "◇".into(),
             },
         ],
     }
@@ -323,6 +323,35 @@ mod tests {
         assert!(html.contains("data-mnote-action=\"create-page\""));
     }
 
+    #[test]
+    fn workspace_shell_sidebar_html_uses_single_tabbed_tree_host() {
+        let dataset = json!({
+            "workspaces": [{ "id": "ws_demo", "name": "开发用户 的工作区" }],
+            "documents": [
+                { "id": "doc_root", "workspace_id": "ws_demo", "title": "Root", "parent_id": null, "sort_order": 0 }
+            ]
+        });
+        let projection = build_workspace_shell_projection(
+            &dataset,
+            "ws_demo",
+            Some("doc_root"),
+            "开发用户 的工作区",
+        );
+        let html = render_workspace_shell_sidebar_html(
+            &projection,
+            Some(r#"<ul data-rust-page-renderer="initial_v1"></ul>"#),
+            Some(r#"<ul data-rust-filetree-renderer="initial_v1"></ul>"#),
+        );
+
+        assert!(html.contains(r#"data-mnote-sidebar-tree-tab="page""#));
+        assert!(html.contains(r#"data-mnote-sidebar-tree-tab="filetree""#));
+        assert!(html.contains(r#"data-mnote-sidebar-tree-panel="page""#));
+        assert!(html.contains(r#"data-mnote-sidebar-tree-panel="filetree" hidden"#));
+        assert!(html.contains(r#"id="sidebar-tree-root""#));
+        assert!(html.contains(r#"id="sidebar-file-tree-root""#));
+        assert!(!html.contains("wolai-file-tree-section"));
+    }
+
     #[test]
     fn workspace_shell_sidebar_html_outputs_empty_state() {
         let dataset = json!({
@@ -368,16 +397,18 @@ pub fn render_workspace_shell_sidebar_html(
             )
         })
         .unwrap_or_default();
-    let file_tree_panel = file_tree_html
+    let file_tree_content = file_tree_html
         .map(str::trim)
         .filter(|value| !value.is_empty())
         .map(|html| {
             format!(
-                r#"<section class="wolai-sidebar-section wolai-file-tree-section" aria-label="文件树" data-testid="wolai-sidebar-file-tree-section"><div class="wolai-section-title"><span>文件树</span><span class="wolai-section-caret">⌄</span></div><div class="sidebar-tree-section sidebar-file-tree-section"><div id="sidebar-file-tree-root" class="sidebar-tree" data-tree-shell-mode="filetree" data-workspace-id="{}">{html}</div></div></section>"#,
+                r#"<div class="sidebar-tree-section sidebar-file-tree-section"><div id="sidebar-file-tree-root" class="sidebar-tree" data-tree-shell-mode="filetree" data-workspace-id="{}">{html}</div></div>"#,
                 escape_html(&projection.workspace_id),
             )
         })
-        .unwrap_or_default();
+        .unwrap_or_else(|| {
+            r#"<div class="wolai-sidebar-empty" data-testid="wolai-sidebar-filetree-empty-state">暂无文件或页面</div>"#.to_string()
+        });
     let empty_state = r#"<div class="wolai-sidebar-empty" data-testid="wolai-sidebar-empty-state">暂无页面</div>"#;
     let my_pages = if !tree_html.is_empty() {
         tree_html
@@ -401,7 +432,7 @@ pub fn render_workspace_shell_sidebar_html(
         .join("");
 
     format!(
-        r#"<section class="wolai-sidebar-section wolai-starred-section" aria-label="星标置顶"><div class="wolai-section-title"><span class="wolai-section-icon">★</span>星标置顶<span class="wolai-section-caret">⌄</span></div>{starred_rows}</section><section class="wolai-sidebar-section wolai-my-pages-section" aria-label="页面树" data-testid="wolai-sidebar-page-tree-shell"><div class="wolai-section-title"><span>我的页面</span><span class="wolai-section-caret">⌄</span><button type="button" class="wolai-section-add" data-testid="wolai-sidebar-create-page" data-mnote-action="create-page" data-workspace-id="{}" title="新建页面" aria-label="新建页面">+</button></div>{my_pages}</section>{file_tree_panel}<div class="wolai-sidebar-footer">{bottom_entries}</div>"#,
+        r#"<section class="wolai-sidebar-section wolai-starred-section" aria-label="星标置顶"><div class="wolai-section-title"><span class="wolai-section-icon">★</span>星标置顶<span class="wolai-section-caret">⌄</span></div>{starred_rows}</section><section class="wolai-sidebar-section wolai-my-pages-section" aria-label="页面树" data-testid="wolai-sidebar-page-tree-shell"><div class="wolai-sidebar-tabs" data-testid="wolai-sidebar-tree-tabs" role="tablist" aria-label="页面树和文件树"><button type="button" class="wolai-sidebar-tab wolai-sidebar-tab-active" data-mnote-sidebar-tree-tab="page" aria-selected="true" aria-controls="wolai-sidebar-page-tree-panel">我的页面</button><button type="button" class="wolai-sidebar-tab wolai-sidebar-tab-muted" data-mnote-sidebar-tree-tab="filetree" aria-selected="false" aria-controls="wolai-sidebar-file-tree-panel"><span class="wolai-folder-icon">▱</span>Explorer</button><span class="wolai-section-caret">⌄</span><button type="button" class="wolai-section-add" data-testid="wolai-sidebar-create-page" data-mnote-action="create-page" data-workspace-id="{}" title="新建页面" aria-label="新建页面">+</button></div><div class="wolai-sidebar-tab-panels"><div id="wolai-sidebar-page-tree-panel" class="wolai-sidebar-tab-panel" data-mnote-sidebar-tree-panel="page">{my_pages}</div><div id="wolai-sidebar-file-tree-panel" class="wolai-sidebar-tab-panel" data-mnote-sidebar-tree-panel="filetree" hidden>{file_tree_content}</div></div></section><div class="wolai-sidebar-footer">{bottom_entries}</div>"#,
         escape_html(&projection.workspace_id),
     )
 }
@@ -411,7 +442,7 @@ fn render_item_row(item: &WorkspaceShellItem) -> String {
     let depth_style = if item.depth == 0 {
         String::new()
     } else {
-        format!(r#" style="padding-left:{}px""#, 12 + item.depth.min(6) * 18)
+        format!(r#" style="padding-left:{}px""#, 12 + item.depth.min(6) * 12)
     };
     let parent_attr = item
         .parent_id
@@ -424,7 +455,7 @@ fn render_item_row(item: &WorkspaceShellItem) -> String {
         ""
     };
     format!(
-        r#"<a class="wolai-page-row{active_class}" href="{}" data-testid="wolai-sidebar-row" data-node-id="{}"{parent_attr} data-depth="{}" data-active="{}"{aria_current}{depth_style}><span class="wolai-row-icon">{}</span><span class="wolai-row-title">{}</span></a>"#,
+        r#"<a class="wolai-page-row{active_class}" href="{}" data-testid="wolai-sidebar-row" data-node-id="{}"{parent_attr} data-depth="{}" data-active="{}"{aria_current}{depth_style}><span class="wolai-row-caret" aria-hidden="true">›</span><span class="wolai-row-icon">{}</span><span class="wolai-row-title">{}</span></a>"#,
         escape_html(&item.href),
         escape_html(&item.id),
         item.depth,