mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-15 18:30:39 +09:00
fix(ui): improve routine properties panel and history UX (#5703)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies. > - Routines are the recurring-work surface where operators configure schedules, executions, activity, and revision history. > - The routine detail view uses a contextual right properties panel for triggers, runs, activity, and history. > - That panel was too cramped for routine workflows: the routine header could collapse at constrained widths, and revision previews/comparisons were trying to live inside the same narrow panel. > - This pull request makes the routine properties panel wider and responsive without changing the default panel behavior for other pages. > - It also moves routine revision viewing and comparison into focused dialogs so history stays usable instead of rendering dense revision content inside the right panel. > - The benefit is a cleaner routine workflow: triggers remain scannable, the main routine stays readable, and revisions can be inspected, compared, and restored without fighting the sidebar width. ## What Changed - Added optional per-panel layout options for storage key, default width, min/max width, and compact viewport behavior. - Set the routine properties panel to use its own 400px default width and persistence key, while compacting to 320px on narrower viewports. - Made the shared resizable sidebar support right-side panes, custom width bounds, compact max width, and keyboard resizing. - Fixed the routine detail header so title text and action controls remain readable beside the properties panel at constrained widths. - Reworked routine history so selecting a revision opens a read-only snapshot dialog instead of trying to render the whole revision inside the right panel. - Added a side-by-side current-vs-selected revision comparison dialog with clearer diff markers for structured fields, triggers, and variables. - Added focused tests for the resizable pane and routine history behavior. ## Verification - `pnpm vitest run ui/src/components/RoutineHistoryTab.test.tsx ui/src/components/ResizableSidebarPane.test.tsx` - `pnpm --filter @paperclipai/ui typecheck` - `pnpm -r typecheck` - `git diff --check` - Browser E2E in TestCo at `http://localhost:3100/TES/dashboard`: - created and edited a routine - added, edited, toggled, and deleted schedule triggers - paused automation - ran the routine and stopped the live run - verified runs, activity, history, snapshot dialog, compare mode, restore confirmation, routine list, recent runs, row actions, panel close/reopen, and constrained-width layout ### Screenshots #### Trigger Panel Width | Before | After | | --- | --- | | <img width="1741" height="1289" alt="triggers-before" src="https://github.com/user-attachments/assets/2a391769-c355-4219-8da3-d1ea18698430" /> | <img width="1742" height="1288" alt="triggers-after" src="https://github.com/user-attachments/assets/9e818978-283c-49a3-9401-879be550c67b" /> | #### History Panel Before, selecting a revision attempted to show dense revision content inside the already narrow right panel. After, history remains a compact list and revision details open separately. | Before | After | | --- | --- | | <img width="1739" height="1289" alt="history-before" src="https://github.com/user-attachments/assets/eaea4f3d-bb65-4af6-b67f-3ba3026fe0c9" /> | <img width="1741" height="1290" alt="history-after" src="https://github.com/user-attachments/assets/4c139238-8494-4438-89e1-4277d05bc3aa" /> | #### Revision Snapshot The selected revision now opens in a dedicated read-only dialog instead of crowding the properties panel. <img width="1740" height="1289" alt="revision-single" src="https://github.com/user-attachments/assets/f930f50f-7016-434b-bd81-d8d97304c528" /> #### Revision Compare Historical revisions can be compared side-by-side with the current revision, including changed structured fields and trigger differences. <img width="1740" height="1287" alt="revision-compare" src="https://github.com/user-attachments/assets/5640201e-de4f-446b-8941-1b0f140c56d7" /> ## Risks - Low to moderate UI risk: the shared resizable pane API gained optional layout parameters, but existing callers keep the previous defaults. - Routine history now uses dialogs for revision viewing and comparison, so reviewers should confirm the new workflow feels right for restore and compare. - Routine panel width now persists under a routine-specific key, so previous global properties panel width preferences do not carry into routines. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, GPT-5 coding agent in Codex Desktop, tool-enabled with local shell, git, and in-app browser automation. Context window size was not exposed in this session. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge
This commit is contained in:
Aron Prins
GitHub
parent
486fb88a15
commit
74cb560c41
8 changed files with 584 additions and 553 deletions
|
|
@ -15,29 +15,29 @@ const MIN_SIDEBAR_WIDTH = 208;
|
|||
const MAX_SIDEBAR_WIDTH = 420;
|
||||
const SIDEBAR_WIDTH_STEP = 16;
|
||||
|
||||
function clampSidebarWidth(width: number) {
|
||||
return Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, width));
|
||||
function clampSidebarWidth(width: number, min: number, max: number) {
|
||||
return Math.min(max, Math.max(min, width));
|
||||
}
|
||||
|
||||
function readStoredSidebarWidth(storageKey: string) {
|
||||
if (typeof window === "undefined") return DEFAULT_SIDEBAR_WIDTH;
|
||||
function readStoredSidebarWidth(storageKey: string, fallback: number, min: number, max: number) {
|
||||
if (typeof window === "undefined") return fallback;
|
||||
|
||||
try {
|
||||
const stored = window.localStorage.getItem(storageKey);
|
||||
if (!stored) return DEFAULT_SIDEBAR_WIDTH;
|
||||
if (!stored) return fallback;
|
||||
const parsed = Number.parseInt(stored, 10);
|
||||
if (!Number.isFinite(parsed)) return DEFAULT_SIDEBAR_WIDTH;
|
||||
return clampSidebarWidth(parsed);
|
||||
if (!Number.isFinite(parsed)) return fallback;
|
||||
return clampSidebarWidth(parsed, min, max);
|
||||
} catch {
|
||||
return DEFAULT_SIDEBAR_WIDTH;
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function writeStoredSidebarWidth(storageKey: string, width: number) {
|
||||
function writeStoredSidebarWidth(storageKey: string, width: number, min: number, max: number) {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
try {
|
||||
window.localStorage.setItem(storageKey, String(clampSidebarWidth(width)));
|
||||
window.localStorage.setItem(storageKey, String(clampSidebarWidth(width, min, max)));
|
||||
} catch {
|
||||
// Storage can be unavailable in private contexts; resizing should still work.
|
||||
}
|
||||
|
|
@ -49,25 +49,68 @@ type ResizableSidebarPaneProps = {
|
|||
resizable?: boolean;
|
||||
storageKey?: string;
|
||||
className?: string;
|
||||
/** Which side of the viewport this pane sits on. Determines handle position and drag direction. */
|
||||
side?: "left" | "right";
|
||||
defaultWidth?: number;
|
||||
minWidth?: number;
|
||||
maxWidth?: number;
|
||||
/** Below this viewport width, clamp the pane to compactMaxWidth. */
|
||||
compactBelowViewport?: number;
|
||||
compactMaxWidth?: number;
|
||||
/** Optional CSS custom property name to expose the live pane width on :root (e.g. "--properties-panel-width"). */
|
||||
widthVariable?: string;
|
||||
};
|
||||
|
||||
function readViewportWidth() {
|
||||
if (typeof window === "undefined") return Number.POSITIVE_INFINITY;
|
||||
return window.innerWidth;
|
||||
}
|
||||
|
||||
export function ResizableSidebarPane({
|
||||
children,
|
||||
open,
|
||||
resizable = false,
|
||||
storageKey = "paperclip.sidebar.width",
|
||||
className,
|
||||
side = "left",
|
||||
defaultWidth = DEFAULT_SIDEBAR_WIDTH,
|
||||
minWidth = MIN_SIDEBAR_WIDTH,
|
||||
maxWidth = MAX_SIDEBAR_WIDTH,
|
||||
compactBelowViewport,
|
||||
compactMaxWidth,
|
||||
widthVariable,
|
||||
}: ResizableSidebarPaneProps) {
|
||||
const [width, setWidth] = useState(() => readStoredSidebarWidth(storageKey));
|
||||
const [viewportWidth, setViewportWidth] = useState(readViewportWidth);
|
||||
const compactModeActive =
|
||||
compactBelowViewport !== undefined
|
||||
&& compactMaxWidth !== undefined
|
||||
&& viewportWidth < compactBelowViewport;
|
||||
const effectiveMaxWidth =
|
||||
compactModeActive
|
||||
? Math.max(minWidth, Math.min(maxWidth, compactMaxWidth))
|
||||
: maxWidth;
|
||||
const canResizeAtCurrentViewport = effectiveMaxWidth > minWidth;
|
||||
const fallbackWidth = clampSidebarWidth(defaultWidth, minWidth, effectiveMaxWidth);
|
||||
const [width, setWidth] = useState(() =>
|
||||
readStoredSidebarWidth(storageKey, fallbackWidth, minWidth, effectiveMaxWidth),
|
||||
);
|
||||
const [isResizing, setIsResizing] = useState(false);
|
||||
const widthRef = useRef(width);
|
||||
const dragState = useRef<{ startX: number; startWidth: number } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const storedWidth = readStoredSidebarWidth(storageKey);
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const handleResize = () => setViewportWidth(window.innerWidth);
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const storedWidth = readStoredSidebarWidth(storageKey, fallbackWidth, minWidth, effectiveMaxWidth);
|
||||
widthRef.current = storedWidth;
|
||||
setWidth(storedWidth);
|
||||
}, [storageKey]);
|
||||
}, [storageKey, fallbackWidth, minWidth, effectiveMaxWidth]);
|
||||
|
||||
const visibleWidth = open ? width : 0;
|
||||
const paneStyle = useMemo(
|
||||
|
|
@ -75,14 +118,25 @@ export function ResizableSidebarPane({
|
|||
[visibleWidth],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!widthVariable || typeof document === "undefined") return;
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty(widthVariable, `${visibleWidth}px`);
|
||||
return () => {
|
||||
root.style.removeProperty(widthVariable);
|
||||
};
|
||||
}, [widthVariable, visibleWidth]);
|
||||
|
||||
const commitWidth = useCallback(
|
||||
(nextWidth: number) => {
|
||||
const clamped = clampSidebarWidth(nextWidth);
|
||||
const clamped = clampSidebarWidth(nextWidth, minWidth, effectiveMaxWidth);
|
||||
widthRef.current = clamped;
|
||||
setWidth(clamped);
|
||||
writeStoredSidebarWidth(storageKey, clamped);
|
||||
if (!compactModeActive) {
|
||||
writeStoredSidebarWidth(storageKey, clamped, minWidth, maxWidth);
|
||||
}
|
||||
},
|
||||
[storageKey],
|
||||
[storageKey, minWidth, maxWidth, effectiveMaxWidth, compactModeActive],
|
||||
);
|
||||
|
||||
const handlePointerDown = useCallback(
|
||||
|
|
@ -101,12 +155,15 @@ export function ResizableSidebarPane({
|
|||
(event: PointerEvent<HTMLDivElement>) => {
|
||||
if (!dragState.current) return;
|
||||
|
||||
const nextWidth = dragState.current.startWidth + event.clientX - dragState.current.startX;
|
||||
const clamped = clampSidebarWidth(nextWidth);
|
||||
const delta = event.clientX - dragState.current.startX;
|
||||
// For a right-side pane the handle is on the left edge, so dragging left increases width.
|
||||
const directional = side === "right" ? -delta : delta;
|
||||
const nextWidth = dragState.current.startWidth + directional;
|
||||
const clamped = clampSidebarWidth(nextWidth, minWidth, effectiveMaxWidth);
|
||||
widthRef.current = clamped;
|
||||
setWidth(clamped);
|
||||
},
|
||||
[],
|
||||
[side, minWidth, effectiveMaxWidth],
|
||||
);
|
||||
|
||||
const endResize = useCallback(() => {
|
||||
|
|
@ -114,28 +171,34 @@ export function ResizableSidebarPane({
|
|||
|
||||
dragState.current = null;
|
||||
setIsResizing(false);
|
||||
writeStoredSidebarWidth(storageKey, widthRef.current);
|
||||
}, [storageKey]);
|
||||
if (!compactModeActive) {
|
||||
writeStoredSidebarWidth(storageKey, widthRef.current, minWidth, maxWidth);
|
||||
}
|
||||
}, [storageKey, minWidth, maxWidth, compactModeActive]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(event: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (!open || !resizable) return;
|
||||
if (!open || !resizable || !canResizeAtCurrentViewport) return;
|
||||
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault();
|
||||
commitWidth(width - SIDEBAR_WIDTH_STEP);
|
||||
} else if (event.key === "ArrowRight") {
|
||||
// Match drag semantics: on a right-side pane, ArrowLeft grows the pane.
|
||||
const growKey = side === "right" ? "ArrowLeft" : "ArrowRight";
|
||||
const shrinkKey = side === "right" ? "ArrowRight" : "ArrowLeft";
|
||||
|
||||
if (event.key === growKey) {
|
||||
event.preventDefault();
|
||||
commitWidth(width + SIDEBAR_WIDTH_STEP);
|
||||
} else if (event.key === shrinkKey) {
|
||||
event.preventDefault();
|
||||
commitWidth(width - SIDEBAR_WIDTH_STEP);
|
||||
} else if (event.key === "Home") {
|
||||
event.preventDefault();
|
||||
commitWidth(MIN_SIDEBAR_WIDTH);
|
||||
commitWidth(minWidth);
|
||||
} else if (event.key === "End") {
|
||||
event.preventDefault();
|
||||
commitWidth(MAX_SIDEBAR_WIDTH);
|
||||
commitWidth(effectiveMaxWidth);
|
||||
}
|
||||
},
|
||||
[commitWidth, open, resizable, width],
|
||||
[commitWidth, open, resizable, side, width, minWidth, effectiveMaxWidth, canResizeAtCurrentViewport],
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -148,17 +211,18 @@ export function ResizableSidebarPane({
|
|||
style={paneStyle}
|
||||
>
|
||||
{children}
|
||||
{resizable && open ? (
|
||||
{resizable && open && canResizeAtCurrentViewport ? (
|
||||
<div
|
||||
role="separator"
|
||||
aria-label="Resize sidebar"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemin={MIN_SIDEBAR_WIDTH}
|
||||
aria-valuemax={MAX_SIDEBAR_WIDTH}
|
||||
aria-valuemin={minWidth}
|
||||
aria-valuemax={effectiveMaxWidth}
|
||||
aria-valuenow={width}
|
||||
tabIndex={0}
|
||||
className={cn(
|
||||
"absolute inset-y-0 right-0 z-20 w-3 cursor-col-resize touch-none outline-none",
|
||||
"absolute inset-y-0 z-20 w-3 cursor-col-resize touch-none outline-none",
|
||||
side === "right" ? "left-0" : "right-0",
|
||||
"before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-transparent before:transition-colors",
|
||||
"hover:before:bg-border focus-visible:before:bg-ring",
|
||||
isResizing && "before:bg-ring",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue