feat: implement monitor page list view (#345)

plans/049-monitor-list-view.md

@@ -0,0 +1,32 @@
+# 049 - Monitor List View
+
+## Objective
+The user requested that the Monitor page should switch its card-based grid view to a list view similar to a provided screenshot, and a view mode toggle should be added to the top right.
+
+## Expected Features
+1. View Mode Toggle
+   - Add a state `viewMode` in `pages/monitor.tsx`.
+   - Add a toggle button with LayoutGrid/List icons next to the refresh button.
+   - Pass `viewMode` down to `MonitorView` component.
+2. List View Implementation
+   - Extend `MonitorViewProps` with `viewMode: "list" | "grid"`.
+   - Render the `ServerCard` grid when `viewMode === "grid"`.
+   - Render a `Table` when `viewMode === "list"`.
+   - The list view should include:
+     - 状态 (Status: Colored dot depending on `isOnline`).
+     - 名称 (Name: Node name).
+     - 速率 (Speed: Up/Down speeds styled appropriately).
+     - 流量 (Traffic: Total Up/Down bytes).
+     - 开机时长 (Uptime).
+     - 连接数 (Connections: TCP/UDP).
+     - CPU (Progress bar).
+     - RAM (Progress bar).
+     - 存储 (Storage / Disk Progress bar).
+     - 操作 (Actions: Eye view icon to open detailed monitor).
+
+## Checklist
+- [x] Create plan document.
+- [x] Add viewMode state and toggle in `monitor.tsx`.
+- [x] Receive viewMode in `MonitorView` and selectively render Grid vs List views.
+- [x] Ensure list correctly visualizes node info, speed, traffic, uptime, conns, CPU/RAM/Disk usages, and action icons.
+- [x] Fix HeroUI missing TableProps typings (remove `removeWrapper` prop).