feat(inbox): 侧边栏状态筛选与日期分组 — Segmented 图标筛选 + Skeleton 加载态 + 五级日期分组可折叠 + 卡片显示关联日期

src/web/features/inbox/components/MaterialGroup.tsx

@@ -0,0 +1,39 @@
+import { CaretDownOutlined, CaretRightOutlined } from "@ant-design/icons";
+import { Typography } from "antd";
+import { type ReactNode, useState } from "react";
+
+interface MaterialGroupProps {
+  children: ReactNode;
+  count: number;
+  emptyText?: string;
+  label: string;
+}
+
+export function MaterialGroup({ children, count, emptyText, label }: MaterialGroupProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className="app-inbox-group">
+      <div className="app-inbox-group-header" onClick={() => setCollapsed(!collapsed)}>
+        <span className="app-inbox-group-arrow">{collapsed ? <CaretRightOutlined /> : <CaretDownOutlined />}</span>
+        <Typography.Text className="app-inbox-group-label" type="secondary">
+          {label}
+        </Typography.Text>
+        <Typography.Text className="app-inbox-group-count" type="secondary">
+          ({count})
+        </Typography.Text>
+      </div>
+      {!collapsed && (
+        <div className="app-inbox-group-content">
+          {count === 0 && emptyText ? (
+            <Typography.Text className="app-inbox-group-empty" type="secondary">
+              {emptyText}
+            </Typography.Text>
+          ) : (
+            children
+          )}
+        </div>
+      )}
+    </div>
+  );
+}