@rexvane/piweb 0.3.16 → 0.3.18

package/src/components/SessionSidebar.tsx

@@ -30,8 +30,6 @@ import {
 	IconSettingsOutline16,
 	IconTrashOutline16,
 	IconTriangleRightFill14,
-	IconAgentPresetOutline16,
-	IconWorkflowAgent16,
 } from "@/components/icons";
 import { useI18n } from "@/i18n";
 import type { SessionListItem } from "@/hooks/usePiWeb";
@@ -99,12 +97,6 @@ export function SessionSidebar({
 	onOpenSettings,
 	onAddWorkspace,
 	draftCwd,
-	gitBranch = "—",
-	gitStatus = "未选择",
-	canAskCommit = false,
-	onAskCommit,
-	activeTopView = "workbench",
-	onSelectTopView,
 }: {
 	sessions: SessionListItem[];
 	sessionListError?: string | null;
@@ -137,12 +129,6 @@ 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("");
@@ -406,6 +392,9 @@ 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>
 		);
 	}
@@ -417,11 +406,16 @@ export function SessionSidebar({
 		return (
 			<div
 				key={s.path}
-				className="pw-session-row group relative flex items-center transition-colors"
-				data-selected={selected || undefined}
+				className="group relative flex items-center rounded-xl transition-colors"
 				style={{
 					background: selected ? "var(--dsw-active)" : "transparent",
-					paddingLeft: indented ? 32 : s.streaming ? 16 : 8,
+					paddingLeft: indented ? 38 : 10,
+					paddingRight: 8,
+					paddingTop: 6,
+					paddingBottom: 6,
+					// 选中/悬停框之间留缝，不互相粘连
+					marginTop: 2,
+					marginBottom: 2,
 				}}
 				onMouseEnter={(e) => {
 					if (!selected) e.currentTarget.style.background = "var(--dsw-hover)";
@@ -454,8 +448,8 @@ export function SessionSidebar({
 					<button
 						className="icon-btn"
 						style={{ width: 22, height: 22 }}
-						title={t.sessionActions}
-						aria-label={t.sessionActions}
+						title="..."
+						aria-label="session-actions"
 						onClick={(e) => {
 							e.stopPropagation();
 							setSessionMenu(sessionMenu === s.path ? null : s.path);
@@ -531,12 +525,16 @@ export function SessionSidebar({
 		return (
 			<div key={g.cwd}>
 				<div
-					className="pw-workspace-row group relative flex items-center transition-colors"
-					data-current={isCurrent || undefined}
-					data-open={open || undefined}
+					className="group relative flex items-center rounded-xl transition-colors"
 					style={{
 						background: open || isCurrent ? "var(--dsw-hover)" : "transparent",
-						paddingLeft: 8,
+						paddingLeft: 10,
+						paddingRight: 6,
+						paddingTop: 7,
+						paddingBottom: 7,
+						// 悬停/展开框之间留缝，不互相粘连（与会话行一致）
+						marginTop: 2,
+						marginBottom: 2,
 					}}
 					onMouseEnter={(e) => {
 						if (!(open || isCurrent)) e.currentTarget.style.background = "var(--dsw-hover)";
@@ -572,8 +570,8 @@ export function SessionSidebar({
 							<button
 								className="icon-btn"
 								style={{ width: 22, height: 22 }}
-								title={t.workspaceActions}
-								aria-label={t.workspaceActions}
+								title="..."
+								aria-label="workspace-actions"
 								onClick={() => {
 									setRowMenu(rowMenu === g.cwd ? null : g.cwd);
 									setSessionMenu(null);
@@ -653,9 +651,9 @@ export function SessionSidebar({
 	};
 
 	return (
-		<div className="pw-sidebar flex h-full min-h-0 flex-col">
+		<div className="flex h-full min-h-0 flex-col">
 			{/* 品牌行 */}
-			<div className="pw-sidebar-head flex items-center gap-1 px-4 pb-2 pt-4">
+			<div className="flex items-center gap-1 px-4 pb-2 pt-4">
 				<BrandPi />
 				<div className="flex-1" />
 				<button className="icon-btn" onClick={onToggleCollapse} title="«">
@@ -663,116 +661,14 @@ export function SessionSidebar({
 				</button>
 			</div>
 
-			{/* 新会话（柔和粘土拟物风格） */}
-			<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}>
+			{/* 新会话（dsh .newSession） */}
+			<div className="px-3 pt-1">
+				<button className="btn-new-session w-full" 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">
@@ -780,7 +676,6 @@ 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}
@@ -790,7 +685,6 @@ export function SessionSidebar({
 						<button
 							className="icon-btn"
 							style={{ width: 20, height: 20 }}
-							aria-label={t.close}
 							onClick={() => {
 								setQ("");
 								setSearchOpen(false);
@@ -801,7 +695,7 @@ export function SessionSidebar({
 					</div>
 				</div>
 			) : (
-				<div className="pw-sidebar-section-head flex items-center gap-0.5 px-4 pb-1 pt-3">
+				<div className="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)}>
@@ -839,7 +733,7 @@ export function SessionSidebar({
 			)}
 
 			{/* 列表区 */}
-			<div className="pw-sidebar-list min-h-0 flex-1 overflow-y-auto px-3 pb-3">
+			<div className="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>
@@ -970,20 +864,28 @@ export function SessionSidebar({
 				)}
 			</div>
 
-			{/* 底部版本号 */}
-			<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 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>
 
 			{/* 重命名弹窗（照用户截图 media_1788745548711.png，通过 createPortal 挂载到 document.body 确保浏览器正居中） */}
 			{mounted && renameTarget && createPortal(
 				<div
-					className="modal-mask fixed inset-0 z-[9999] flex items-center justify-center p-4 animate-in fade-in duration-150"
+					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"
 					onClick={closeRename}
 				>
 					<div
-						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)" }}
+						className="relative w-full max-w-[420px] rounded-[24px] bg-[#212121] p-6 text-white shadow-2xl border border-white/10"
 						onClick={(e) => e.stopPropagation()}
 						role="dialog"
 						aria-modal="true"
@@ -994,14 +896,14 @@ export function SessionSidebar({
 							type="button"
 							onClick={closeRename}
 							disabled={renamePending}
-							className="icon-btn absolute right-5 top-5 rounded-full p-1"
+							className="absolute right-5 top-5 rounded-full p-1 text-zinc-400 hover:text-white hover:bg-white/10 transition"
 							aria-label={t.close}
 						>
 							<IconCloseOutline14 size={16} />
 						</button>
 
 						{/* 标题 */}
-						<h3 id="rename-dialog-title" className="pr-8 text-lg font-medium">
+						<h3 id="rename-dialog-title" className="text-lg font-medium text-white pr-8">
 							{renameTarget.type === "session"
 								? (t.renameSession || "重命名会话")
 								: (t.renameWorkspace || "重命名工作区")}
@@ -1012,7 +914,6 @@ export function SessionSidebar({
 							<input
 								ref={renameInputRef}
 								type="text"
-								aria-label={renameTarget.type === "session" ? t.renameSession : t.renameWorkspace}
 								value={renameValue}
 								disabled={renamePending}
 								onChange={(e) => {
@@ -1023,8 +924,7 @@ export function SessionSidebar({
 									if (e.key === "Enter") void handleConfirmRename();
 									if (e.key === "Escape") closeRename();
 								}}
-								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)" }}
+								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"
 							/>
 						</div>
 						{renameError && (
@@ -1037,7 +937,7 @@ export function SessionSidebar({
 								type="button"
 								onClick={closeRename}
 								disabled={renamePending}
-								className="btn-outline"
+								className="rounded-full bg-[#2c2c2c] px-5 py-2 text-sm font-medium text-zinc-200 hover:bg-[#383838] transition"
 							>
 								{t.cancel}
 							</button>
@@ -1045,7 +945,7 @@ export function SessionSidebar({
 								type="button"
 								onClick={() => void handleConfirmRename()}
 								disabled={renamePending || !renameValue.trim() || (renameTarget.type === "workspace" && (renameValue.trim() === renameTarget.name || renameWorkspaceConflict))}
-								className="btn-primary-white"
+								className="rounded-full bg-white px-5 py-2 text-sm font-medium text-black hover:bg-zinc-200 transition"
 							>
 								{t.rename}
 							</button>
@@ -1058,12 +958,11 @@ export function SessionSidebar({
 			{/* 删除工作区确认弹窗（照用户截图 media_1788745235179.png 与 media_1788746156687.png，通过 createPortal 挂载到 document.body 确保浏览器正居中） */}
 			{mounted && deleteWorkspaceTarget && createPortal(
 				<div
-					className="modal-mask fixed inset-0 z-[9999] flex items-center justify-center p-4 animate-in fade-in duration-150"
+					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"
 					onClick={() => !deleteWorkspacePending && setDeleteWorkspaceTarget(null)}
 				>
 					<div
-						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)" }}
+						className="relative w-full max-w-[420px] rounded-[24px] bg-[#212121] p-6 text-white shadow-2xl border border-white/10"
 						onClick={(e) => e.stopPropagation()}
 						role="dialog"
 						aria-modal="true"
@@ -1074,26 +973,26 @@ export function SessionSidebar({
 							type="button"
 							onClick={() => setDeleteWorkspaceTarget(null)}
 							disabled={deleteWorkspacePending}
-							className="icon-btn absolute right-5 top-5 rounded-full p-1"
+							className="absolute right-5 top-5 rounded-full p-1 text-zinc-400 hover:text-white hover:bg-white/10 transition"
 							aria-label={t.close}
 						>
 							<IconCloseOutline14 size={16} />
 						</button>
 
 						{/* 标题 */}
-						<h3 id="delete-workspace-dialog-title" className="pr-8 text-lg font-medium">
+						<h3 id="delete-workspace-dialog-title" className="text-lg font-medium text-white pr-8">
 							{t.deleteWorkspace}
 						</h3>
 
 						{/* 描述文本 */}
-						<p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: "var(--dsw-label-secondary)" }}>
+						<p className="mt-3 text-[14.5px] leading-relaxed text-zinc-300">
 							{(t.deleteWorkspaceConfirm || "将把“{name}”从工作区列表中移除。文件夹与会话记录会保留，其会话将显示在“未分组”下。").replace(
 								"{name}",
 								deleteWorkspaceTarget.name,
 							)}
 						</p>
 						{deleteWorkspacePending && (
-							<p className="mt-4 text-sm" style={{ color: "var(--dsw-label-caption)" }} role="status">{t.deleteWorkspacePending}</p>
+							<p className="mt-4 text-sm text-zinc-400" role="status">{t.deleteWorkspacePending}</p>
 						)}
 						{deleteWorkspaceError && (
 							<p className="mt-4 text-sm" style={{ color: "var(--dsw-danger)" }} role="alert">{deleteWorkspaceError}</p>
@@ -1105,7 +1004,7 @@ export function SessionSidebar({
 								type="button"
 								onClick={() => setDeleteWorkspaceTarget(null)}
 								disabled={deleteWorkspacePending}
-								className="btn-outline"
+								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]"
 							>
 								{t.cancel}
 							</button>
@@ -1113,8 +1012,7 @@ export function SessionSidebar({
 								type="button"
 								onClick={() => void handleConfirmDeleteWorkspace()}
 								disabled={deleteWorkspacePending}
-								className="btn-outline"
-								style={{ color: "var(--dsw-danger)" }}
+								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]"
 							>
 								{t.deleteWorkspace}
 							</button>