@rexvane/piweb 0.3.15 → 0.3.16

package/src/components/SessionSidebar.tsx

@@ -30,6 +30,8 @@ import {
 	IconSettingsOutline16,
 	IconTrashOutline16,
 	IconTriangleRightFill14,
+	IconAgentPresetOutline16,
+	IconWorkflowAgent16,
 } from "@/components/icons";
 import { useI18n } from "@/i18n";
 import type { SessionListItem } from "@/hooks/usePiWeb";
@@ -97,6 +99,12 @@ export function SessionSidebar({
 	onOpenSettings,
 	onAddWorkspace,
 	draftCwd,
+	gitBranch = "—",
+	gitStatus = "未选择",
+	canAskCommit = false,
+	onAskCommit,
+	activeTopView = "workbench",
+	onSelectTopView,
 }: {
 	sessions: SessionListItem[];
 	sessionListError?: string | null;
@@ -129,6 +137,12 @@ export function SessionSidebar({
 	onAddWorkspace: () => void;
 	/** 新会话草稿所在的工作区：条目显示在该分组内，发送第一条消息才真正创建 */
 	draftCwd?: string | null;
+	gitBranch?: string;
+	gitStatus?: string;
+	canAskCommit?: boolean;
+	onAskCommit?: () => void;
+	activeTopView?: "workbench" | "diff" | "tests" | "swarm" | "archive";
+	onSelectTopView?: (view: "workbench" | "diff" | "tests" | "swarm" | "archive") => void;
 }) {
 	const { t, lang } = useI18n();
 	const [q, setQ] = useState("");
@@ -392,9 +406,6 @@ export function SessionSidebar({
 					<IconSearchOutline16 size={17} />
 				</button>
 				<div className="flex-1" />
-				<button className="rail-btn" title={t.settings} onClick={onOpenSettings}>
-					<IconSettingsOutline16 size={17} />
-				</button>
 			</div>
 		);
 	}
@@ -406,16 +417,11 @@ export function SessionSidebar({
 		return (
 			<div
 				key={s.path}
-				className="group relative flex items-center rounded-xl transition-colors"
+				className="pw-session-row group relative flex items-center transition-colors"
+				data-selected={selected || undefined}
 				style={{
 					background: selected ? "var(--dsw-active)" : "transparent",
-					paddingLeft: indented ? 38 : 10,
-					paddingRight: 8,
-					paddingTop: 6,
-					paddingBottom: 6,
-					// 选中/悬停框之间留缝，不互相粘连
-					marginTop: 2,
-					marginBottom: 2,
+					paddingLeft: indented ? 32 : s.streaming ? 16 : 8,
 				}}
 				onMouseEnter={(e) => {
 					if (!selected) e.currentTarget.style.background = "var(--dsw-hover)";
@@ -448,8 +454,8 @@ export function SessionSidebar({
 					<button
 						className="icon-btn"
 						style={{ width: 22, height: 22 }}
-						title="..."
-						aria-label="session-actions"
+						title={t.sessionActions}
+						aria-label={t.sessionActions}
 						onClick={(e) => {
 							e.stopPropagation();
 							setSessionMenu(sessionMenu === s.path ? null : s.path);
@@ -525,16 +531,12 @@ export function SessionSidebar({
 		return (
 			<div key={g.cwd}>
 				<div
-					className="group relative flex items-center rounded-xl transition-colors"
+					className="pw-workspace-row group relative flex items-center transition-colors"
+					data-current={isCurrent || undefined}
+					data-open={open || undefined}
 					style={{
 						background: open || isCurrent ? "var(--dsw-hover)" : "transparent",
-						paddingLeft: 10,
-						paddingRight: 6,
-						paddingTop: 7,
-						paddingBottom: 7,
-						// 悬停/展开框之间留缝，不互相粘连（与会话行一致）
-						marginTop: 2,
-						marginBottom: 2,
+						paddingLeft: 8,
 					}}
 					onMouseEnter={(e) => {
 						if (!(open || isCurrent)) e.currentTarget.style.background = "var(--dsw-hover)";
@@ -570,8 +572,8 @@ export function SessionSidebar({
 							<button
 								className="icon-btn"
 								style={{ width: 22, height: 22 }}
-								title="..."
-								aria-label="workspace-actions"
+								title={t.workspaceActions}
+								aria-label={t.workspaceActions}
 								onClick={() => {
 									setRowMenu(rowMenu === g.cwd ? null : g.cwd);
 									setSessionMenu(null);
@@ -651,9 +653,9 @@ export function SessionSidebar({
 	};
 
 	return (
-		<div className="flex h-full min-h-0 flex-col">
+		<div className="pw-sidebar flex h-full min-h-0 flex-col">
 			{/* 品牌行 */}
-			<div className="flex items-center gap-1 px-4 pb-2 pt-4">
+			<div className="pw-sidebar-head flex items-center gap-1 px-4 pb-2 pt-4">
 				<BrandPi />
 				<div className="flex-1" />
 				<button className="icon-btn" onClick={onToggleCollapse} title="«">
@@ -661,14 +663,116 @@ export function SessionSidebar({
 				</button>
 			</div>
 
-			{/* 新会话（dsh .newSession） */}
-			<div className="px-3 pt-1">
-				<button className="btn-new-session w-full" onClick={onNew}>
+			{/* 新会话（柔和粘土拟物风格） */}
+			<div className="pw-sidebar-new px-3 pt-1">
+				<button className="clay-btn clay-btn-mint w-full py-2.5 px-4 text-xs font-semibold tracking-wide flex items-center justify-center gap-2 text-white shadow-md rounded-2xl transition-all" onClick={onNew}>
 					<IconNewChatOutline16 size={14} />
 					{t.newChat}
 				</button>
 			</div>
 
+			{/* Git 状态卡片 (Screen 1 & 2) */}
+			<div className="px-3 pt-2">
+				<div className="clay-card p-2.5 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 bg-white/70 dark:bg-slate-900/70">
+					<div className="flex items-center justify-between text-xs font-medium text-slate-700 dark:text-slate-200">
+						<div className="flex items-center gap-1.5">
+							<IconBranchOutline16 size={13} className="text-emerald-500" />
+							<span className="font-mono truncate max-w-[90px]" title={gitBranch}>{gitBranch}</span>
+						</div>
+						<span className={`text-[10px] font-mono font-semibold px-1.5 py-0.5 rounded ${gitStatus === "干净" ? "text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/60" : "text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/60"}`}>
+							{gitStatus}
+						</span>
+					</div>
+					<div className="flex items-center justify-between pt-2">
+						<span className="text-[11px] text-slate-400">就绪待审查</span>
+						<button
+							type="button"
+							className="px-2.5 py-1 text-[11px] font-medium text-emerald-700 dark:text-emerald-300 rounded-xl clay-btn clay-btn-soft transition-colors flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed"
+							disabled={!canAskCommit}
+							onClick={onAskCommit}
+						>
+							<span>让 pi 提交</span>
+						</button>
+					</div>
+				</div>
+			</div>
+
+			{/* 快速视图切换导航 (Screen 1 & 3 & 4) */}
+			<div className="px-3 pt-2">
+				<nav className="flex flex-col gap-1">
+					<button
+						type="button"
+						className={`flex items-center justify-between px-3 py-1.5 rounded-xl transition-all text-xs font-medium ${
+							activeTopView === "workbench"
+								? "clay-card text-emerald-700 dark:text-emerald-300 font-bold bg-white dark:bg-slate-800 shadow-sm"
+								: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/60"
+						}`}
+						onClick={() => onSelectTopView?.("workbench")}
+					>
+						<span className="flex items-center gap-2">
+							<IconFolderOpenOutline16 size={14} className={activeTopView === "workbench" ? "text-emerald-500" : "text-slate-400"} />
+							<span>工作区文件</span>
+						</span>
+					</button>
+					<button
+						type="button"
+						className={`flex items-center justify-between px-3 py-1.5 rounded-xl transition-all text-xs font-medium ${
+							activeTopView === "diff"
+								? "clay-card text-emerald-700 dark:text-emerald-300 font-bold bg-white dark:bg-slate-800 shadow-sm"
+								: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/60"
+						}`}
+						onClick={() => onSelectTopView?.("diff")}
+					>
+						<span className="flex items-center gap-2">
+							<IconEditOutline16 size={14} className={activeTopView === "diff" ? "text-emerald-500" : "text-slate-400"} />
+							<span>改动检查器</span>
+						</span>
+					</button>
+					<button
+						type="button"
+						className={`flex items-center justify-between px-3 py-1.5 rounded-xl transition-all text-xs font-medium ${
+							activeTopView === "tests"
+								? "clay-card text-emerald-700 dark:text-emerald-300 font-bold bg-white dark:bg-slate-800 shadow-sm"
+								: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/60"
+						}`}
+						onClick={() => onSelectTopView?.("tests")}
+					>
+						<span className="flex items-center gap-2">
+							<IconWorkflowAgent16 size={14} className={activeTopView === "tests" ? "text-emerald-500" : "text-slate-400"} />
+							<span>测试套件</span>
+						</span>
+					</button>
+					<button
+						type="button"
+						className={`flex items-center justify-between px-3 py-1.5 rounded-xl transition-all text-xs font-medium ${
+							activeTopView === "swarm"
+								? "clay-card text-emerald-700 dark:text-emerald-300 font-bold bg-white dark:bg-slate-800 shadow-sm"
+								: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/60"
+						}`}
+						onClick={() => onSelectTopView?.("swarm")}
+					>
+						<span className="flex items-center gap-2">
+							<IconAgentPresetOutline16 size={14} className={activeTopView === "swarm" ? "text-emerald-500" : "text-slate-400"} />
+							<span>智能体群组</span>
+						</span>
+					</button>
+					<button
+						type="button"
+						className={`flex items-center justify-between px-3 py-1.5 rounded-xl transition-all text-xs font-medium ${
+							activeTopView === "archive"
+								? "clay-card text-emerald-700 dark:text-emerald-300 font-bold bg-white dark:bg-slate-800 shadow-sm"
+								: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/60"
+						}`}
+						onClick={() => onSelectTopView?.("archive")}
+					>
+						<span className="flex items-center gap-2">
+							<IconArchiveOutline20 size={14} className={activeTopView === "archive" ? "text-emerald-500" : "text-slate-400"} />
+							<span>归档</span>
+						</span>
+					</button>
+				</nav>
+			</div>
+
 			{/* 工作区标题行 / 搜索框（互替，照 dsh） */}
 			{searchOpen ? (
 				<div className="px-3 pb-1 pt-3">
@@ -676,6 +780,7 @@ export function SessionSidebar({
 						<IconSearchOutline16 size={14} style={{ color: "var(--dsw-label-caption)" }} />
 						<input
 							autoFocus
+							aria-label={t.searchSessions}
 							value={q}
 							onChange={(e) => setQ(e.target.value)}
 							placeholder={t.searchSessions}
@@ -685,6 +790,7 @@ export function SessionSidebar({
 						<button
 							className="icon-btn"
 							style={{ width: 20, height: 20 }}
+							aria-label={t.close}
 							onClick={() => {
 								setQ("");
 								setSearchOpen(false);
@@ -695,7 +801,7 @@ export function SessionSidebar({
 					</div>
 				</div>
 			) : (
-				<div className="flex items-center gap-0.5 px-4 pb-1 pt-3">
+				<div className="pw-sidebar-section-head flex items-center gap-0.5 px-4 pb-1 pt-3">
 					<span style={{ fontSize: 13, color: "var(--dsw-label-primary)" }}>{t.workspaces}</span>
 					<div className="flex-1" />
 					<button className="icon-btn" style={{ width: 26, height: 26 }} title={t.search} onClick={() => setSearchOpen(true)}>
@@ -733,7 +839,7 @@ export function SessionSidebar({
 			)}
 
 			{/* 列表区 */}
-			<div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
+			<div className="pw-sidebar-list min-h-0 flex-1 overflow-y-auto px-3 pb-3">
 				{sessionListError && (
 					<div role="alert" className="mb-2 rounded-xl px-3 py-2" style={{ background: "var(--dsw-hover)", color: "var(--dsw-danger)", fontSize: 12 }}>
 						<div>{t.sessionListLoadFailed}: {sessionListError}</div>
@@ -864,28 +970,20 @@ export function SessionSidebar({
 				)}
 			</div>
 
-			{/* 设置固定左下角 */}
-			<div className="px-3 py-2.5">
-				<button
-					className="flex w-full items-center gap-2.5 rounded-xl px-4 py-2 text-left transition-colors"
-					style={{ color: "var(--dsw-label-secondary)" }}
-					onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-					onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-					onClick={onOpenSettings}
-				>
-					<IconSettingsOutline16 size={16} />
-					<span style={{ fontSize: "var(--dsh-content-font-size)" }}>{t.settings}</span>
-				</button>
+			{/* 底部版本号 */}
+			<div className="pw-sidebar-footer px-3 py-2 border-t border-slate-200/60 dark:border-slate-800/60 flex items-center justify-center text-xs text-slate-400 font-mono text-[11px] shrink-0">
+				<span>PiWeb v0.3.15</span>
 			</div>
 
 			{/* 重命名弹窗（照用户截图 media_1788745548711.png，通过 createPortal 挂载到 document.body 确保浏览器正居中） */}
 			{mounted && renameTarget && createPortal(
 				<div
-					className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-150"
+					className="modal-mask fixed inset-0 z-[9999] flex items-center justify-center p-4 animate-in fade-in duration-150"
 					onClick={closeRename}
 				>
 					<div
-						className="relative w-full max-w-[420px] rounded-[24px] bg-[#212121] p-6 text-white shadow-2xl border border-white/10"
+						className="glass-modal relative w-full max-w-[420px] rounded-[24px] p-6 shadow-2xl"
+						style={{ color: "var(--dsw-label-primary)", border: "0.5px solid var(--dsw-border-l2)" }}
 						onClick={(e) => e.stopPropagation()}
 						role="dialog"
 						aria-modal="true"
@@ -896,14 +994,14 @@ export function SessionSidebar({
 							type="button"
 							onClick={closeRename}
 							disabled={renamePending}
-							className="absolute right-5 top-5 rounded-full p-1 text-zinc-400 hover:text-white hover:bg-white/10 transition"
+							className="icon-btn absolute right-5 top-5 rounded-full p-1"
 							aria-label={t.close}
 						>
 							<IconCloseOutline14 size={16} />
 						</button>
 
 						{/* 标题 */}
-						<h3 id="rename-dialog-title" className="text-lg font-medium text-white pr-8">
+						<h3 id="rename-dialog-title" className="pr-8 text-lg font-medium">
 							{renameTarget.type === "session"
 								? (t.renameSession || "重命名会话")
 								: (t.renameWorkspace || "重命名工作区")}
@@ -914,6 +1012,7 @@ export function SessionSidebar({
 							<input
 								ref={renameInputRef}
 								type="text"
+								aria-label={renameTarget.type === "session" ? t.renameSession : t.renameWorkspace}
 								value={renameValue}
 								disabled={renamePending}
 								onChange={(e) => {
@@ -924,7 +1023,8 @@ export function SessionSidebar({
 									if (e.key === "Enter") void handleConfirmRename();
 									if (e.key === "Escape") closeRename();
 								}}
-								className="w-full rounded-full bg-white/[0.05] border border-white/15 px-4 py-2.5 text-[14.5px] text-white outline-none focus:border-white/40 focus:ring-1 focus:ring-white/30 transition"
+								className="w-full rounded-full px-4 py-2.5 text-[14.5px] outline-none transition"
+								style={{ background: "var(--dsw-hover)", border: "1px solid var(--dsw-border-l2)", color: "var(--dsw-label-primary)" }}
 							/>
 						</div>
 						{renameError && (
@@ -937,7 +1037,7 @@ export function SessionSidebar({
 								type="button"
 								onClick={closeRename}
 								disabled={renamePending}
-								className="rounded-full bg-[#2c2c2c] px-5 py-2 text-sm font-medium text-zinc-200 hover:bg-[#383838] transition"
+								className="btn-outline"
 							>
 								{t.cancel}
 							</button>
@@ -945,7 +1045,7 @@ export function SessionSidebar({
 								type="button"
 								onClick={() => void handleConfirmRename()}
 								disabled={renamePending || !renameValue.trim() || (renameTarget.type === "workspace" && (renameValue.trim() === renameTarget.name || renameWorkspaceConflict))}
-								className="rounded-full bg-white px-5 py-2 text-sm font-medium text-black hover:bg-zinc-200 transition"
+								className="btn-primary-white"
 							>
 								{t.rename}
 							</button>
@@ -958,11 +1058,12 @@ export function SessionSidebar({
 			{/* 删除工作区确认弹窗（照用户截图 media_1788745235179.png 与 media_1788746156687.png，通过 createPortal 挂载到 document.body 确保浏览器正居中） */}
 			{mounted && deleteWorkspaceTarget && createPortal(
 				<div
-					className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-150"
+					className="modal-mask fixed inset-0 z-[9999] flex items-center justify-center p-4 animate-in fade-in duration-150"
 					onClick={() => !deleteWorkspacePending && setDeleteWorkspaceTarget(null)}
 				>
 					<div
-						className="relative w-full max-w-[420px] rounded-[24px] bg-[#212121] p-6 text-white shadow-2xl border border-white/10"
+						className="glass-modal relative w-full max-w-[420px] rounded-[24px] p-6 shadow-2xl"
+						style={{ color: "var(--dsw-label-primary)", border: "0.5px solid var(--dsw-border-l2)" }}
 						onClick={(e) => e.stopPropagation()}
 						role="dialog"
 						aria-modal="true"
@@ -973,26 +1074,26 @@ export function SessionSidebar({
 							type="button"
 							onClick={() => setDeleteWorkspaceTarget(null)}
 							disabled={deleteWorkspacePending}
-							className="absolute right-5 top-5 rounded-full p-1 text-zinc-400 hover:text-white hover:bg-white/10 transition"
+							className="icon-btn absolute right-5 top-5 rounded-full p-1"
 							aria-label={t.close}
 						>
 							<IconCloseOutline14 size={16} />
 						</button>
 
 						{/* 标题 */}
-						<h3 id="delete-workspace-dialog-title" className="text-lg font-medium text-white pr-8">
+						<h3 id="delete-workspace-dialog-title" className="pr-8 text-lg font-medium">
 							{t.deleteWorkspace}
 						</h3>
 
 						{/* 描述文本 */}
-						<p className="mt-3 text-[14.5px] leading-relaxed text-zinc-300">
+						<p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: "var(--dsw-label-secondary)" }}>
 							{(t.deleteWorkspaceConfirm || "将把“{name}”从工作区列表中移除。文件夹与会话记录会保留，其会话将显示在“未分组”下。").replace(
 								"{name}",
 								deleteWorkspaceTarget.name,
 							)}
 						</p>
 						{deleteWorkspacePending && (
-							<p className="mt-4 text-sm text-zinc-400" role="status">{t.deleteWorkspacePending}</p>
+							<p className="mt-4 text-sm" style={{ color: "var(--dsw-label-caption)" }} role="status">{t.deleteWorkspacePending}</p>
 						)}
 						{deleteWorkspaceError && (
 							<p className="mt-4 text-sm" style={{ color: "var(--dsw-danger)" }} role="alert">{deleteWorkspaceError}</p>
@@ -1004,7 +1105,7 @@ export function SessionSidebar({
 								type="button"
 								onClick={() => setDeleteWorkspaceTarget(null)}
 								disabled={deleteWorkspacePending}
-								className="rounded-xl border border-transparent bg-[#2c2c2c] px-5 py-2 text-sm font-medium text-zinc-200 transition hover:border-white/25 hover:bg-[#383838]"
+								className="btn-outline"
 							>
 								{t.cancel}
 							</button>
@@ -1012,7 +1113,8 @@ export function SessionSidebar({
 								type="button"
 								onClick={() => void handleConfirmDeleteWorkspace()}
 								disabled={deleteWorkspacePending}
-								className="rounded-xl border border-transparent bg-[#2c2c2c] px-5 py-2 text-sm font-medium text-[#f87171] transition hover:border-[#f87171]/40 hover:bg-[#383838] hover:text-[#ef4444]"
+								className="btn-outline"
+								style={{ color: "var(--dsw-danger)" }}
 							>
 								{t.deleteWorkspace}
 							</button>