feat(app): sidebar favorites, drag-reorder, and delete-with-confirm
- FAVORITES section at the top collects pinned workspaces (removed from their group listing); a star toggle on each row pins/unpins via setWorkspaceMeta. - Drag-to-reorder within a section using raw pointer events (HTML5 DnD is unreliable in the macOS WKWebView), with a drop-line indicator; on drop the section's `order` is reassigned sequentially and persisted. Cross-section drops are ignored (group membership unchanged). - Trash icon on row hover opens a ConfirmDelete modal that shows the live terminal count and warns before terminating them, then calls close_workspace and re-points the active workspace. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+116
-19
@@ -1,8 +1,9 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Plus, ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Plus, ChevronDown, ChevronRight, Star, Trash2 } from "lucide-react";
|
||||
import { COLORS, FONT, STATE_COLOR } from "./theme";
|
||||
import type { Group, WorkspaceView, SurfaceState } from "./layoutTypes";
|
||||
import type { DaemonHealth } from "./socketBridge";
|
||||
import { setWorkspaceMeta } from "./socketBridge";
|
||||
|
||||
function fmtUptime(startedMs: number): string {
|
||||
const s = Math.max(0, Math.floor((Date.now() - startedMs) / 1000));
|
||||
@@ -22,45 +23,131 @@ function aggregate(w: WorkspaceView): SurfaceState | "stopped" {
|
||||
return "idle";
|
||||
}
|
||||
|
||||
interface DropAt { section: string; index: number }
|
||||
|
||||
export function Sidebar({
|
||||
groups, workspaces, activeId, onSelect, onNew, health, connected,
|
||||
groups, workspaces, activeId, onSelect, onNew, onDelete, health, connected,
|
||||
}: {
|
||||
groups: Group[];
|
||||
workspaces: WorkspaceView[];
|
||||
activeId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
onNew: () => void;
|
||||
onDelete: (w: WorkspaceView) => void;
|
||||
health: DaemonHealth | null;
|
||||
connected: boolean;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
|
||||
const [hovered, setHovered] = useState<string | null>(null);
|
||||
const [drag, setDrag] = useState<{ id: string; section: string } | null>(null);
|
||||
const [dropAt, setDropAt] = useState<DropAt | null>(null);
|
||||
const dragRef = useRef<{ id: string; section: string } | null>(null);
|
||||
const dropRef = useRef<DropAt | null>(null);
|
||||
const [, setTick] = useState(0);
|
||||
dragRef.current = drag;
|
||||
dropRef.current = dropAt;
|
||||
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setTick((n) => n + 1), 30000);
|
||||
return () => clearInterval(t);
|
||||
}, []);
|
||||
const byGroup = (gid: string | null) => workspaces.filter((w) => (w.group_id ?? null) === gid).sort((a, b) => a.order - b.order);
|
||||
|
||||
const pinned = workspaces.filter((w) => w.pinned).sort((a, b) => a.order - b.order);
|
||||
const byGroup = (gid: string | null) =>
|
||||
workspaces.filter((w) => !w.pinned && (w.group_id ?? null) === gid).sort((a, b) => a.order - b.order);
|
||||
const ungrouped = byGroup(null);
|
||||
|
||||
const row = (w: WorkspaceView) => {
|
||||
const togglePin = (w: WorkspaceView) => { void setWorkspaceMeta(w.id, { pinned: !w.pinned }); };
|
||||
|
||||
// Persist a new ordering for one section by reassigning sequential `order`
|
||||
// values (per-section; values never compared across sections).
|
||||
const commitReorder = (items: WorkspaceView[], fromId: string, toIndex: number) => {
|
||||
const fromIndex = items.findIndex((w) => w.id === fromId);
|
||||
if (fromIndex < 0) return;
|
||||
const next = [...items];
|
||||
const [moved] = next.splice(fromIndex, 1);
|
||||
next.splice(Math.min(toIndex, next.length), 0, moved);
|
||||
next.forEach((w, i) => { if (w.order !== i) void setWorkspaceMeta(w.id, { order: i }); });
|
||||
};
|
||||
|
||||
const startDrag = (w: WorkspaceView, section: string, items: WorkspaceView[], e: React.MouseEvent) => {
|
||||
if (e.button !== 0) return;
|
||||
const startX = e.clientX, startY = e.clientY;
|
||||
let active = false;
|
||||
const prevUserSelect = document.body.style.userSelect;
|
||||
const move = (ev: MouseEvent) => {
|
||||
if (!active) {
|
||||
if (Math.abs(ev.clientX - startX) + Math.abs(ev.clientY - startY) < 5) return;
|
||||
active = true;
|
||||
document.body.style.userSelect = "none";
|
||||
setDrag({ id: w.id, section });
|
||||
}
|
||||
const el = (document.elementFromPoint(ev.clientX, ev.clientY) as HTMLElement | null)?.closest("[data-ws-id]") as HTMLElement | null;
|
||||
if (!el || el.getAttribute("data-ws-section") !== section) { setDropAt(null); return; }
|
||||
const idx = Number(el.getAttribute("data-ws-index"));
|
||||
const r = el.getBoundingClientRect();
|
||||
const after = ev.clientY > r.top + r.height / 2;
|
||||
setDropAt({ section, index: after ? idx + 1 : idx });
|
||||
};
|
||||
const up = () => {
|
||||
window.removeEventListener("mousemove", move);
|
||||
window.removeEventListener("mouseup", up);
|
||||
document.body.style.userSelect = prevUserSelect;
|
||||
const d = dropRef.current;
|
||||
const dr = dragRef.current;
|
||||
setDrag(null); setDropAt(null);
|
||||
if (active && d && dr && d.section === section) commitReorder(items, dr.id, d.index);
|
||||
};
|
||||
window.addEventListener("mousemove", move);
|
||||
window.addEventListener("mouseup", up);
|
||||
};
|
||||
|
||||
const row = (w: WorkspaceView, section: string, items: WorkspaceView[], index: number) => {
|
||||
const isActive = w.id === activeId;
|
||||
const showLine = dropAt && dropAt.section === section && dropAt.index === index;
|
||||
const showLineEnd = dropAt && dropAt.section === section && dropAt.index === items.length && index === items.length - 1;
|
||||
return (
|
||||
<div key={w.id} onClick={() => onSelect(w.id)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 10, height: 34, padding: "0 8px", borderRadius: 6, cursor: "pointer",
|
||||
background: isActive ? COLORS.bgElevated : "transparent", fontFamily: FONT.ui, fontSize: 13,
|
||||
color: isActive ? COLORS.textPrimary : COLORS.textSecondary,
|
||||
}}>
|
||||
<span style={{ width: 10, height: 10, borderRadius: "50%", border: `2px solid ${STATE_COLOR[aggregate(w)]}`, boxSizing: "border-box", flex: "0 0 10px" }} />
|
||||
<span style={{ flex: 1, fontWeight: isActive ? 600 : 400, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{w.name}</span>
|
||||
{w.unread && <span style={{ width: 7, height: 7, borderRadius: "50%", background: COLORS.accent, flex: "0 0 7px" }} />}
|
||||
<span style={{ display: "flex", alignItems: "center", justifyContent: "center", height: 18, minWidth: 18, padding: "0 6px", borderRadius: 9, background: COLORS.bgApp, fontFamily: FONT.mono, fontSize: 11, color: COLORS.textSecondary }}>
|
||||
{Object.keys(w.surfaces).length}
|
||||
</span>
|
||||
<div key={w.id}>
|
||||
{showLine && <div style={{ height: 2, background: COLORS.accent, borderRadius: 2, margin: "1px 0" }} />}
|
||||
<div
|
||||
data-ws-id={w.id} data-ws-section={section} data-ws-index={index}
|
||||
onClick={() => onSelect(w.id)}
|
||||
onMouseDown={(e) => startDrag(w, section, items, e)}
|
||||
onMouseEnter={() => setHovered(w.id)}
|
||||
onMouseLeave={() => setHovered((h) => (h === w.id ? null : h))}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 8, height: 34, padding: "0 8px", borderRadius: 6,
|
||||
cursor: drag?.id === w.id ? "grabbing" : "pointer",
|
||||
opacity: drag?.id === w.id ? 0.5 : 1,
|
||||
background: isActive ? COLORS.bgElevated : "transparent", fontFamily: FONT.ui, fontSize: 13,
|
||||
color: isActive ? COLORS.textPrimary : COLORS.textSecondary,
|
||||
}}>
|
||||
<span style={{ width: 10, height: 10, borderRadius: "50%", border: `2px solid ${STATE_COLOR[aggregate(w)]}`, boxSizing: "border-box", flex: "0 0 10px" }} />
|
||||
<span style={{ flex: 1, fontWeight: isActive ? 600 : 400, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{w.name}</span>
|
||||
{(hovered === w.id || w.pinned) && (
|
||||
<Star size={14} fill={w.pinned ? COLORS.stWait : "none"} color={w.pinned ? COLORS.stWait : COLORS.textMuted}
|
||||
style={{ cursor: "pointer", flex: "0 0 14px" }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => { e.stopPropagation(); togglePin(w); }} />
|
||||
)}
|
||||
{hovered === w.id && (
|
||||
<Trash2 size={14} color={COLORS.textMuted}
|
||||
style={{ cursor: "pointer", flex: "0 0 14px" }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => { e.stopPropagation(); onDelete(w); }} />
|
||||
)}
|
||||
{w.unread && <span style={{ width: 7, height: 7, borderRadius: "50%", background: COLORS.accent, flex: "0 0 7px" }} />}
|
||||
<span style={{ display: "flex", alignItems: "center", justifyContent: "center", height: 18, minWidth: 18, padding: "0 6px", borderRadius: 9, background: COLORS.bgApp, fontFamily: FONT.mono, fontSize: 11, color: COLORS.textSecondary }}>
|
||||
{Object.keys(w.surfaces).length}
|
||||
</span>
|
||||
</div>
|
||||
{showLineEnd && <div style={{ height: 2, background: COLORS.accent, borderRadius: 2, margin: "1px 0" }} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const section = (key: string, items: WorkspaceView[]) => items.map((w, i) => row(w, key, items, i));
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", width: 248, flex: "0 0 248px", background: COLORS.bgSidebar, height: "100%", padding: 14, boxSizing: "border-box" }}>
|
||||
<button onClick={onNew}
|
||||
@@ -75,8 +162,18 @@ export function Sidebar({
|
||||
</button>
|
||||
|
||||
<div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2, minHeight: 0 }}>
|
||||
{pinned.length > 0 && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 7, height: 24, padding: "0 4px" }}>
|
||||
<Star size={12} fill={COLORS.stWait} color={COLORS.stWait} />
|
||||
<span style={{ fontFamily: FONT.ui, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, color: COLORS.textSecondary }}>FAVORITES</span>
|
||||
</div>
|
||||
{section("fav", pinned)}
|
||||
</div>
|
||||
)}
|
||||
{groups.sort((a, b) => a.order - b.order).map((g) => {
|
||||
const open = !collapsed[g.id];
|
||||
const items = byGroup(g.id);
|
||||
return (
|
||||
<div key={g.id} style={{ marginBottom: 8 }}>
|
||||
<div onClick={() => setCollapsed((c) => ({ ...c, [g.id]: open }))}
|
||||
@@ -85,11 +182,11 @@ export function Sidebar({
|
||||
<span style={{ width: 8, height: 8, borderRadius: 2, background: g.color }} />
|
||||
<span style={{ fontFamily: FONT.ui, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, color: COLORS.textSecondary }}>{g.name.toUpperCase()}</span>
|
||||
</div>
|
||||
{open && byGroup(g.id).map(row)}
|
||||
{open && section(`g:${g.id}`, items)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{ungrouped.length > 0 && <div style={{ marginTop: 4, display: "flex", flexDirection: "column", gap: 2 }}>{ungrouped.map(row)}</div>}
|
||||
{ungrouped.length > 0 && <div style={{ marginTop: 4, display: "flex", flexDirection: "column", gap: 2 }}>{section("ungrouped", ungrouped)}</div>}
|
||||
</div>
|
||||
|
||||
<div title={health ? `spaceshd v${health.version} · pid ${health.pid}` : "daemon offline"}
|
||||
|
||||
Reference in New Issue
Block a user