Merge workspace-list-features: pinned/favorites, drag-reorder, delete-with-confirm
This commit is contained in:
@@ -269,14 +269,14 @@ pub async fn close_workspace(state: BridgeState<'_>, workspace_id: String) -> Re
|
|||||||
}
|
}
|
||||||
|
|
||||||
#[tauri::command]
|
#[tauri::command]
|
||||||
pub async fn set_workspace_meta(state: BridgeState<'_>, workspace_id: String, name: Option<String>, group_id: Option<String>, unread: Option<bool>, order: Option<u32>) -> Result<Value, String> {
|
pub async fn set_workspace_meta(state: BridgeState<'_>, workspace_id: String, name: Option<String>, group_id: Option<String>, unread: Option<bool>, order: Option<u32>, pinned: Option<bool>) -> Result<Value, String> {
|
||||||
// group_id: None from JS means "no change"; an explicit null is sent as Some("") to mean "ungroup".
|
// group_id: None from JS means "no change"; an explicit null is sent as Some("") to mean "ungroup".
|
||||||
let gid = match group_id {
|
let gid = match group_id {
|
||||||
None => None,
|
None => None,
|
||||||
Some(s) if s.is_empty() => Some(None),
|
Some(s) if s.is_empty() => Some(None),
|
||||||
Some(s) => Some(Some(GroupId(s))),
|
Some(s) => Some(Some(GroupId(s))),
|
||||||
};
|
};
|
||||||
data_of(state.request(Cmd::SetWorkspaceMeta { workspace_id: WorkspaceId(workspace_id), name, group_id: gid, unread, order }).await.map_err(|e| e.to_string())?)
|
data_of(state.request(Cmd::SetWorkspaceMeta { workspace_id: WorkspaceId(workspace_id), name, group_id: gid, unread, order, pinned }).await.map_err(|e| e.to_string())?)
|
||||||
}
|
}
|
||||||
|
|
||||||
#[tauri::command]
|
#[tauri::command]
|
||||||
|
|||||||
+22
-2
@@ -4,10 +4,11 @@ import { Sidebar } from "./Sidebar";
|
|||||||
import { TopBar } from "./TopBar";
|
import { TopBar } from "./TopBar";
|
||||||
import { CenterToolbar } from "./CenterToolbar";
|
import { CenterToolbar } from "./CenterToolbar";
|
||||||
import { Wizard } from "./Wizard";
|
import { Wizard } from "./Wizard";
|
||||||
|
import { ConfirmDelete } from "./ConfirmDelete";
|
||||||
import { EventCenter } from "./EventCenter";
|
import { EventCenter } from "./EventCenter";
|
||||||
import { maybeNotify } from "./notify";
|
import { maybeNotify } from "./notify";
|
||||||
import { COLORS } from "./theme";
|
import { COLORS } from "./theme";
|
||||||
import { getStatusFull, applyPreset, onDaemonEvent, onDaemonRawEvent, setWorkspaceMeta, focusSurface, getEventLog, markEventsRead, getHealth } from "./socketBridge";
|
import { getStatusFull, applyPreset, onDaemonEvent, onDaemonRawEvent, setWorkspaceMeta, focusSurface, getEventLog, markEventsRead, getHealth, closeWorkspaceCmd } from "./socketBridge";
|
||||||
import type { EventRecord, DaemonHealth } from "./socketBridge";
|
import type { EventRecord, DaemonHealth } from "./socketBridge";
|
||||||
import { leafIds } from "./layoutTypes";
|
import { leafIds } from "./layoutTypes";
|
||||||
import type { Group, WorkspaceView, SurfaceState } from "./layoutTypes";
|
import type { Group, WorkspaceView, SurfaceState } from "./layoutTypes";
|
||||||
@@ -29,6 +30,7 @@ export function App() {
|
|||||||
const [states, setStates] = useState<Record<string, SurfaceState>>({});
|
const [states, setStates] = useState<Record<string, SurfaceState>>({});
|
||||||
const [events, setEvents] = useState<EventRecord[]>([]);
|
const [events, setEvents] = useState<EventRecord[]>([]);
|
||||||
const [wizard, setWizard] = useState(false);
|
const [wizard, setWizard] = useState(false);
|
||||||
|
const [deleteTarget, setDeleteTarget] = useState<WorkspaceView | null>(null);
|
||||||
const [eventsOpen, setEventsOpen] = useState(() => loadFlag("spacesh.eventsOpen", true));
|
const [eventsOpen, setEventsOpen] = useState(() => loadFlag("spacesh.eventsOpen", true));
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(() => loadFlag("spacesh.sidebarOpen", true));
|
const [sidebarOpen, setSidebarOpen] = useState(() => loadFlag("spacesh.sidebarOpen", true));
|
||||||
const [health, setHealth] = useState<DaemonHealth | null>(null);
|
const [health, setHealth] = useState<DaemonHealth | null>(null);
|
||||||
@@ -137,7 +139,7 @@ export function App() {
|
|||||||
<div style={{ display: "flex", flexDirection: "column", height: "100vh", background: COLORS.bgApp }}>
|
<div style={{ display: "flex", flexDirection: "column", height: "100vh", background: COLORS.bgApp }}>
|
||||||
<TopBar active={active} eventsOpen={eventsOpen} onToggleEvents={() => setEventsOpen((v) => !v)} onShowEvents={() => setEventsOpen(true)} sidebarOpen={sidebarOpen} onToggleSidebar={() => setSidebarOpen((v) => !v)} unread={unread} />
|
<TopBar active={active} eventsOpen={eventsOpen} onToggleEvents={() => setEventsOpen((v) => !v)} onShowEvents={() => setEventsOpen(true)} sidebarOpen={sidebarOpen} onToggleSidebar={() => setSidebarOpen((v) => !v)} unread={unread} />
|
||||||
<div style={{ flex: 1, display: "flex", minHeight: 0 }}>
|
<div style={{ flex: 1, display: "flex", minHeight: 0 }}>
|
||||||
{sidebarOpen && <Sidebar groups={groups} workspaces={workspaces} activeId={activeId} onSelect={selectWorkspace} onNew={() => setWizard(true)} health={health} connected={connected} />}
|
{sidebarOpen && <Sidebar groups={groups} workspaces={workspaces} activeId={activeId} onSelect={selectWorkspace} onNew={() => setWizard(true)} onDelete={setDeleteTarget} health={health} connected={connected} />}
|
||||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
|
<div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
|
||||||
{active && (
|
{active && (
|
||||||
<CenterToolbar selected="" onSelect={(p) => { if (active) void applyPreset(active.id, p, []); }} onOpenSearch={() => { if (effectiveFocus) { setSearchSurfaceId(effectiveFocus); setSearchNonce((n) => n + 1); } }} />
|
<CenterToolbar selected="" onSelect={(p) => { if (active) void applyPreset(active.id, p, []); }} onOpenSearch={() => { if (effectiveFocus) { setSearchSurfaceId(effectiveFocus); setSearchNonce((n) => n + 1); } }} />
|
||||||
@@ -157,6 +159,24 @@ export function App() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{wizard && <Wizard onDone={(id) => { setWizard(false); setActiveId(id); void refresh(); }} onCancel={() => setWizard(false)} />}
|
{wizard && <Wizard onDone={(id) => { setWizard(false); setActiveId(id); void refresh(); }} onCancel={() => setWizard(false)} />}
|
||||||
|
{deleteTarget && (
|
||||||
|
<ConfirmDelete
|
||||||
|
name={deleteTarget.name}
|
||||||
|
activeCount={Object.values(deleteTarget.surfaces).filter((s) => s.running).length}
|
||||||
|
onCancel={() => setDeleteTarget(null)}
|
||||||
|
onConfirm={() => {
|
||||||
|
const tgt = deleteTarget;
|
||||||
|
setDeleteTarget(null);
|
||||||
|
void closeWorkspaceCmd(tgt.id).then(() => {
|
||||||
|
if (activeId === tgt.id) {
|
||||||
|
const next = workspaces.find((w) => w.id !== tgt.id);
|
||||||
|
setActiveId(next ? next.id : null);
|
||||||
|
}
|
||||||
|
void refresh();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { COLORS, FONT } from "./theme";
|
||||||
|
|
||||||
|
/** Confirmation modal for deleting a workspace. Warns when live terminals
|
||||||
|
* would be killed, but still allows the delete (per product decision). */
|
||||||
|
export function ConfirmDelete({
|
||||||
|
name,
|
||||||
|
activeCount,
|
||||||
|
onConfirm,
|
||||||
|
onCancel,
|
||||||
|
}: {
|
||||||
|
name: string;
|
||||||
|
activeCount: number;
|
||||||
|
onConfirm: () => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
}) {
|
||||||
|
const confirmRef = useRef<HTMLButtonElement>(null);
|
||||||
|
useEffect(() => { confirmRef.current?.focus(); }, []);
|
||||||
|
|
||||||
|
function onKeyDown(e: React.KeyboardEvent) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (e.key === "Escape") { e.preventDefault(); onCancel(); }
|
||||||
|
else if (e.key === "Enter") { e.preventDefault(); onConfirm(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onMouseDown={onCancel}
|
||||||
|
style={{ position: "fixed", inset: 0, zIndex: 2000, background: "#000A", display: "flex", alignItems: "center", justifyContent: "center" }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onMouseDown={(e) => e.stopPropagation()}
|
||||||
|
onKeyDown={onKeyDown}
|
||||||
|
style={{ width: 420, background: COLORS.bgApp, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 14, padding: 24, color: COLORS.textPrimary, fontFamily: FONT.ui }}
|
||||||
|
>
|
||||||
|
<div style={{ fontWeight: 700, fontSize: 16, marginBottom: 12 }}>Delete workspace</div>
|
||||||
|
<div style={{ fontSize: 13, color: COLORS.textSecondary, lineHeight: 1.5 }}>
|
||||||
|
Delete <span style={{ color: COLORS.textPrimary, fontWeight: 600 }}>{name}</span>? This removes the workspace and its layout.
|
||||||
|
</div>
|
||||||
|
{activeCount > 0 && (
|
||||||
|
<div style={{ marginTop: 12, padding: "8px 10px", borderRadius: 8, background: "#2A1414", border: `1px solid ${COLORS.stError}`, color: COLORS.stError, fontSize: 12, fontWeight: 600 }}>
|
||||||
|
{activeCount} active terminal{activeCount === 1 ? "" : "s"} will be terminated.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }}>
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
style={{ padding: "7px 14px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 13, fontFamily: FONT.ui }}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
ref={confirmRef}
|
||||||
|
onClick={onConfirm}
|
||||||
|
style={{ padding: "7px 14px", background: COLORS.stError, color: "#fff", border: "none", borderRadius: 7, fontSize: 13, fontWeight: 600, fontFamily: FONT.ui }}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+116
-19
@@ -1,8 +1,9 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import { Plus, ChevronDown, ChevronRight } from "lucide-react";
|
import { Plus, ChevronDown, ChevronRight, Star, Trash2 } from "lucide-react";
|
||||||
import { COLORS, FONT, STATE_COLOR } from "./theme";
|
import { COLORS, FONT, STATE_COLOR } from "./theme";
|
||||||
import type { Group, WorkspaceView, SurfaceState } from "./layoutTypes";
|
import type { Group, WorkspaceView, SurfaceState } from "./layoutTypes";
|
||||||
import type { DaemonHealth } from "./socketBridge";
|
import type { DaemonHealth } from "./socketBridge";
|
||||||
|
import { setWorkspaceMeta } from "./socketBridge";
|
||||||
|
|
||||||
function fmtUptime(startedMs: number): string {
|
function fmtUptime(startedMs: number): string {
|
||||||
const s = Math.max(0, Math.floor((Date.now() - startedMs) / 1000));
|
const s = Math.max(0, Math.floor((Date.now() - startedMs) / 1000));
|
||||||
@@ -22,45 +23,131 @@ function aggregate(w: WorkspaceView): SurfaceState | "stopped" {
|
|||||||
return "idle";
|
return "idle";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface DropAt { section: string; index: number }
|
||||||
|
|
||||||
export function Sidebar({
|
export function Sidebar({
|
||||||
groups, workspaces, activeId, onSelect, onNew, health, connected,
|
groups, workspaces, activeId, onSelect, onNew, onDelete, health, connected,
|
||||||
}: {
|
}: {
|
||||||
groups: Group[];
|
groups: Group[];
|
||||||
workspaces: WorkspaceView[];
|
workspaces: WorkspaceView[];
|
||||||
activeId: string | null;
|
activeId: string | null;
|
||||||
onSelect: (id: string) => void;
|
onSelect: (id: string) => void;
|
||||||
onNew: () => void;
|
onNew: () => void;
|
||||||
|
onDelete: (w: WorkspaceView) => void;
|
||||||
health: DaemonHealth | null;
|
health: DaemonHealth | null;
|
||||||
connected: boolean;
|
connected: boolean;
|
||||||
}) {
|
}) {
|
||||||
const [collapsed, setCollapsed] = useState<Record<string, 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);
|
const [, setTick] = useState(0);
|
||||||
|
dragRef.current = drag;
|
||||||
|
dropRef.current = dropAt;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const t = setInterval(() => setTick((n) => n + 1), 30000);
|
const t = setInterval(() => setTick((n) => n + 1), 30000);
|
||||||
return () => clearInterval(t);
|
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 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 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 (
|
return (
|
||||||
<div key={w.id} onClick={() => onSelect(w.id)}
|
<div key={w.id}>
|
||||||
style={{
|
{showLine && <div style={{ height: 2, background: COLORS.accent, borderRadius: 2, margin: "1px 0" }} />}
|
||||||
display: "flex", alignItems: "center", gap: 10, height: 34, padding: "0 8px", borderRadius: 6, cursor: "pointer",
|
<div
|
||||||
background: isActive ? COLORS.bgElevated : "transparent", fontFamily: FONT.ui, fontSize: 13,
|
data-ws-id={w.id} data-ws-section={section} data-ws-index={index}
|
||||||
color: isActive ? COLORS.textPrimary : COLORS.textSecondary,
|
onClick={() => onSelect(w.id)}
|
||||||
}}>
|
onMouseDown={(e) => startDrag(w, section, items, e)}
|
||||||
<span style={{ width: 10, height: 10, borderRadius: "50%", border: `2px solid ${STATE_COLOR[aggregate(w)]}`, boxSizing: "border-box", flex: "0 0 10px" }} />
|
onMouseEnter={() => setHovered(w.id)}
|
||||||
<span style={{ flex: 1, fontWeight: isActive ? 600 : 400, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{w.name}</span>
|
onMouseLeave={() => setHovered((h) => (h === w.id ? null : h))}
|
||||||
{w.unread && <span style={{ width: 7, height: 7, borderRadius: "50%", background: COLORS.accent, flex: "0 0 7px" }} />}
|
style={{
|
||||||
<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 }}>
|
display: "flex", alignItems: "center", gap: 8, height: 34, padding: "0 8px", borderRadius: 6,
|
||||||
{Object.keys(w.surfaces).length}
|
cursor: drag?.id === w.id ? "grabbing" : "pointer",
|
||||||
</span>
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const section = (key: string, items: WorkspaceView[]) => items.map((w, i) => row(w, key, items, i));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: "flex", flexDirection: "column", width: 248, flex: "0 0 248px", background: COLORS.bgSidebar, height: "100%", padding: 14, boxSizing: "border-box" }}>
|
<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}
|
<button onClick={onNew}
|
||||||
@@ -75,8 +162,18 @@ export function Sidebar({
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2, minHeight: 0 }}>
|
<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) => {
|
{groups.sort((a, b) => a.order - b.order).map((g) => {
|
||||||
const open = !collapsed[g.id];
|
const open = !collapsed[g.id];
|
||||||
|
const items = byGroup(g.id);
|
||||||
return (
|
return (
|
||||||
<div key={g.id} style={{ marginBottom: 8 }}>
|
<div key={g.id} style={{ marginBottom: 8 }}>
|
||||||
<div onClick={() => setCollapsed((c) => ({ ...c, [g.id]: open }))}
|
<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={{ 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>
|
<span style={{ fontFamily: FONT.ui, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, color: COLORS.textSecondary }}>{g.name.toUpperCase()}</span>
|
||||||
</div>
|
</div>
|
||||||
{open && byGroup(g.id).map(row)}
|
{open && section(`g:${g.id}`, items)}
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div title={health ? `spaceshd v${health.version} · pid ${health.pid}` : "daemon offline"}
|
<div title={health ? `spaceshd v${health.version} · pid ${health.pid}` : "daemon offline"}
|
||||||
|
|||||||
@@ -34,6 +34,7 @@ export interface WorkspaceView {
|
|||||||
group_id: string | null;
|
group_id: string | null;
|
||||||
order: number;
|
order: number;
|
||||||
unread: boolean;
|
unread: boolean;
|
||||||
|
pinned: boolean;
|
||||||
layout: LayoutNode | null;
|
layout: LayoutNode | null;
|
||||||
zoomed: string | null;
|
zoomed: string | null;
|
||||||
surfaces: Record<string, SurfaceView>;
|
surfaces: Record<string, SurfaceView>;
|
||||||
|
|||||||
@@ -149,13 +149,14 @@ export async function closeWorkspaceCmd(workspaceId: string): Promise<void> {
|
|||||||
await invoke("close_workspace", { workspaceId });
|
await invoke("close_workspace", { workspaceId });
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function setWorkspaceMeta(workspaceId: string, meta: { name?: string; groupId?: string | null; unread?: boolean; order?: number }): Promise<void> {
|
export async function setWorkspaceMeta(workspaceId: string, meta: { name?: string; groupId?: string | null; unread?: boolean; order?: number; pinned?: boolean }): Promise<void> {
|
||||||
await invoke("set_workspace_meta", {
|
await invoke("set_workspace_meta", {
|
||||||
workspaceId,
|
workspaceId,
|
||||||
name: meta.name ?? null,
|
name: meta.name ?? null,
|
||||||
groupId: meta.groupId === undefined ? null : meta.groupId,
|
groupId: meta.groupId === undefined ? null : meta.groupId,
|
||||||
unread: meta.unread ?? null,
|
unread: meta.unread ?? null,
|
||||||
order: meta.order ?? null,
|
order: meta.order ?? null,
|
||||||
|
pinned: meta.pinned ?? null,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -61,6 +61,7 @@ pub fn to_cmd(sub: Sub) -> Cmd {
|
|||||||
group_id: group.map(|g| if g.is_empty() { None } else { Some(GroupId(g)) }),
|
group_id: group.map(|g| if g.is_empty() { None } else { Some(GroupId(g)) }),
|
||||||
unread,
|
unread,
|
||||||
order,
|
order,
|
||||||
|
pinned: None,
|
||||||
},
|
},
|
||||||
Sub::Shutdown => Cmd::Shutdown,
|
Sub::Shutdown => Cmd::Shutdown,
|
||||||
Sub::Completions { .. } => unreachable!("completions handled before dispatch"),
|
Sub::Completions { .. } => unreachable!("completions handled before dispatch"),
|
||||||
|
|||||||
@@ -104,6 +104,8 @@ pub enum Cmd {
|
|||||||
unread: Option<bool>,
|
unread: Option<bool>,
|
||||||
#[serde(default, skip_serializing_if = "Option::is_none")]
|
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||||
order: Option<u32>,
|
order: Option<u32>,
|
||||||
|
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||||
|
pinned: Option<bool>,
|
||||||
},
|
},
|
||||||
CreateGroup { name: String, color: String },
|
CreateGroup { name: String, color: String },
|
||||||
SetGroup {
|
SetGroup {
|
||||||
|
|||||||
@@ -39,6 +39,9 @@ pub struct Workspace {
|
|||||||
pub order: u32,
|
pub order: u32,
|
||||||
#[serde(default)]
|
#[serde(default)]
|
||||||
pub unread: bool,
|
pub unread: bool,
|
||||||
|
/// Pinned to the sidebar's Favorites section.
|
||||||
|
#[serde(default)]
|
||||||
|
pub pinned: bool,
|
||||||
/// None = empty workspace (no panels yet).
|
/// None = empty workspace (no panels yet).
|
||||||
#[serde(default)]
|
#[serde(default)]
|
||||||
pub layout: Option<LayoutNode>,
|
pub layout: Option<LayoutNode>,
|
||||||
@@ -68,6 +71,8 @@ pub struct WorkspaceView {
|
|||||||
pub group_id: Option<GroupId>,
|
pub group_id: Option<GroupId>,
|
||||||
pub order: u32,
|
pub order: u32,
|
||||||
pub unread: bool,
|
pub unread: bool,
|
||||||
|
#[serde(default)]
|
||||||
|
pub pinned: bool,
|
||||||
pub layout: Option<LayoutNode>,
|
pub layout: Option<LayoutNode>,
|
||||||
#[serde(default)]
|
#[serde(default)]
|
||||||
pub zoomed: Option<SurfaceId>,
|
pub zoomed: Option<SurfaceId>,
|
||||||
@@ -103,6 +108,7 @@ mod tests {
|
|||||||
group_id: None,
|
group_id: None,
|
||||||
order: 0,
|
order: 0,
|
||||||
unread: false,
|
unread: false,
|
||||||
|
pinned: false,
|
||||||
layout: None,
|
layout: None,
|
||||||
zoomed: None,
|
zoomed: None,
|
||||||
surfaces: HashMap::new(),
|
surfaces: HashMap::new(),
|
||||||
@@ -112,11 +118,26 @@ mod tests {
|
|||||||
assert_eq!(back, w);
|
assert_eq!(back, w);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn workspace_pinned_round_trips_and_defaults_false() {
|
||||||
|
let w = Workspace {
|
||||||
|
id: WorkspaceId("w_1".into()), path: "/tmp/p".into(), name: "p".into(),
|
||||||
|
group_id: None, order: 0, unread: false, pinned: true, layout: None,
|
||||||
|
zoomed: None, surfaces: HashMap::new(),
|
||||||
|
};
|
||||||
|
let back: Workspace = serde_json::from_str(&serde_json::to_string(&w).unwrap()).unwrap();
|
||||||
|
assert!(back.pinned);
|
||||||
|
// Old state.json without the field deserializes to pinned=false.
|
||||||
|
let legacy = r#"{"id":"w_1","path":"/tmp/p","name":"p","order":0,"surfaces":{}}"#;
|
||||||
|
let old: Workspace = serde_json::from_str(legacy).unwrap();
|
||||||
|
assert!(!old.pinned);
|
||||||
|
}
|
||||||
|
|
||||||
#[test]
|
#[test]
|
||||||
fn workspace_round_trips_with_zoom() {
|
fn workspace_round_trips_with_zoom() {
|
||||||
let w = Workspace {
|
let w = Workspace {
|
||||||
id: WorkspaceId("w_1".into()), path: "/tmp/p".into(), name: "p".into(),
|
id: WorkspaceId("w_1".into()), path: "/tmp/p".into(), name: "p".into(),
|
||||||
group_id: None, order: 0, unread: false, layout: None,
|
group_id: None, order: 0, unread: false, pinned: false, layout: None,
|
||||||
zoomed: Some(SurfaceId("s_1".into())), surfaces: HashMap::new(),
|
zoomed: Some(SurfaceId("s_1".into())), surfaces: HashMap::new(),
|
||||||
};
|
};
|
||||||
let back: Workspace = serde_json::from_str(&serde_json::to_string(&w).unwrap()).unwrap();
|
let back: Workspace = serde_json::from_str(&serde_json::to_string(&w).unwrap()).unwrap();
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ impl Registry {
|
|||||||
let order = self.workspaces.len() as u32;
|
let order = self.workspaces.len() as u32;
|
||||||
self.workspaces.insert(id.clone(), Workspace {
|
self.workspaces.insert(id.clone(), Workspace {
|
||||||
id: id.clone(), path: key.clone(), name, group_id: None, order,
|
id: id.clone(), path: key.clone(), name, group_id: None, order,
|
||||||
unread: false, layout: None, zoomed: None, surfaces: HashMap::new(),
|
unread: false, pinned: false, layout: None, zoomed: None, surfaces: HashMap::new(),
|
||||||
});
|
});
|
||||||
self.by_path.insert(key, id.clone());
|
self.by_path.insert(key, id.clone());
|
||||||
(id, true)
|
(id, true)
|
||||||
@@ -168,7 +168,7 @@ impl Registry {
|
|||||||
}).collect();
|
}).collect();
|
||||||
WorkspaceView {
|
WorkspaceView {
|
||||||
id: w.id.clone(), path: w.path.clone(), name: w.name.clone(),
|
id: w.id.clone(), path: w.path.clone(), name: w.name.clone(),
|
||||||
group_id: w.group_id.clone(), order: w.order, unread: w.unread,
|
group_id: w.group_id.clone(), order: w.order, unread: w.unread, pinned: w.pinned,
|
||||||
layout: w.layout.clone(), zoomed: w.zoomed.clone(), surfaces,
|
layout: w.layout.clone(), zoomed: w.zoomed.clone(), surfaces,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -461,12 +461,13 @@ async fn handle_request(
|
|||||||
let _ = out.send(ok(id, serde_json::Value::Null)).await;
|
let _ = out.send(ok(id, serde_json::Value::Null)).await;
|
||||||
}
|
}
|
||||||
|
|
||||||
Cmd::SetWorkspaceMeta { workspace_id, name, group_id, unread, order } => {
|
Cmd::SetWorkspaceMeta { workspace_id, name, group_id, unread, order, pinned } => {
|
||||||
let found = reg.workspace_mut(&workspace_id).map(|w| {
|
let found = reg.workspace_mut(&workspace_id).map(|w| {
|
||||||
if let Some(n) = name { w.name = n; }
|
if let Some(n) = name { w.name = n; }
|
||||||
if let Some(g) = group_id { w.group_id = g; }
|
if let Some(g) = group_id { w.group_id = g; }
|
||||||
if let Some(u) = unread { w.unread = u; }
|
if let Some(u) = unread { w.unread = u; }
|
||||||
if let Some(o) = order { w.order = o; }
|
if let Some(o) = order { w.order = o; }
|
||||||
|
if let Some(p) = pinned { w.pinned = p; }
|
||||||
}).is_some();
|
}).is_some();
|
||||||
if found {
|
if found {
|
||||||
if let Some(view) = reg.workspace_view(&workspace_id) {
|
if let Some(view) = reg.workspace_view(&workspace_id) {
|
||||||
|
|||||||
@@ -92,6 +92,7 @@ mod tests {
|
|||||||
group_id: None,
|
group_id: None,
|
||||||
order: 0,
|
order: 0,
|
||||||
unread: false,
|
unread: false,
|
||||||
|
pinned: false,
|
||||||
layout: None,
|
layout: None,
|
||||||
zoomed: None,
|
zoomed: None,
|
||||||
surfaces: std::collections::HashMap::new(),
|
surfaces: std::collections::HashMap::new(),
|
||||||
|
|||||||
Reference in New Issue
Block a user