mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-15 18:30:39 +09:00
Revert "fix(ui): improve routine properties panel and history UX" (#5723)
## Thinking Path
> - Paperclip orchestrates AI agents through visible, governable task
and routine workflows.
> - The routines UI includes the routine detail page, properties panel,
history tab, and shared sidebar components.
> - PR #5703 changed that workflow by widening the routine properties
panel and moving revision inspection/comparison into dialogs.
> - The product direction for that change is being paused for now, so
the safest path is a direct revert instead of partial edits.
> - This pull request reverts merge commit
`74cb560c41` from #5703.
> - The benefit is restoring the prior routines UI behavior while
keeping the revert easy to review and re-apply later if needed.
## What Changed
- Reverted #5703: `fix(ui): improve routine properties panel and history
UX`.
- Restored the previous routine properties panel sizing, panel context
API, routine detail layout, and routine history rendering behavior.
- Removed the reverted sidebar pane test additions and restored the
previous focused routine history test expectations.
## Verification
- `git diff --check origin/master..HEAD`
- `pnpm vitest run ui/src/components/RoutineHistoryTab.test.tsx`
- `pnpm --filter @paperclipai/ui typecheck`
### Screenshots
This is a direct revert of #5703. The visual state after this PR
corresponds to the "Before" screenshots from #5703, and the state being
removed corresponds to the "After" screenshots from #5703.
#### Trigger Panel Width
| Before this revert | After this revert |
| --- | --- |
| <img width="1742" height="1288" alt="triggers-before-this-revert"
src="https://github.com/user-attachments/assets/9e818978-283c-49a3-9401-879be550c67b"
/> | <img width="1741" height="1289" alt="triggers-after-this-revert"
src="https://github.com/user-attachments/assets/2a391769-c355-4219-8da3-d1ea18698430"
/> |
#### History Panel
| Before this revert | After this revert |
| --- | --- |
| <img width="1741" height="1290" alt="history-before-this-revert"
src="https://github.com/user-attachments/assets/4c139238-8494-4438-89e1-4277d05bc3aa"
/> | <img width="1739" height="1289" alt="history-after-this-revert"
src="https://github.com/user-attachments/assets/eaea4f3d-bb65-4af6-b67f-3ba3026fe0c9"
/> |
## Risks
- Low technical risk: this is a clean Git revert of a recently merged
UI-only PR.
- Product risk: the routine properties panel and revision history return
to the older, narrower workflow that #5703 was improving.
- Re-application risk: future work that wants the #5703 behavior back
should re-apply it deliberately rather than cherry-picking around this
revert.
> 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, tool-enabled with local shell and
GitHub CLI access. 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
Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
21404e8a34
commit
0c6f9bdcf8
8 changed files with 553 additions and 584 deletions
|
|
@ -15,29 +15,29 @@ const MIN_SIDEBAR_WIDTH = 208;
|
|||
const MAX_SIDEBAR_WIDTH = 420;
|
||||
const SIDEBAR_WIDTH_STEP = 16;
|
||||
|
||||
function clampSidebarWidth(width: number, min: number, max: number) {
|
||||
return Math.min(max, Math.max(min, width));
|
||||
function clampSidebarWidth(width: number) {
|
||||
return Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, width));
|
||||
}
|
||||
|
||||
function readStoredSidebarWidth(storageKey: string, fallback: number, min: number, max: number) {
|
||||
if (typeof window === "undefined") return fallback;
|
||||
function readStoredSidebarWidth(storageKey: string) {
|
||||
if (typeof window === "undefined") return DEFAULT_SIDEBAR_WIDTH;
|
||||
|
||||
try {
|
||||
const stored = window.localStorage.getItem(storageKey);
|
||||
if (!stored) return fallback;
|
||||
if (!stored) return DEFAULT_SIDEBAR_WIDTH;
|
||||
const parsed = Number.parseInt(stored, 10);
|
||||
if (!Number.isFinite(parsed)) return fallback;
|
||||
return clampSidebarWidth(parsed, min, max);
|
||||
if (!Number.isFinite(parsed)) return DEFAULT_SIDEBAR_WIDTH;
|
||||
return clampSidebarWidth(parsed);
|
||||
} catch {
|
||||
return fallback;
|
||||
return DEFAULT_SIDEBAR_WIDTH;
|
||||
}
|
||||
}
|
||||
|
||||
function writeStoredSidebarWidth(storageKey: string, width: number, min: number, max: number) {
|
||||
function writeStoredSidebarWidth(storageKey: string, width: number) {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
try {
|
||||
window.localStorage.setItem(storageKey, String(clampSidebarWidth(width, min, max)));
|
||||
window.localStorage.setItem(storageKey, String(clampSidebarWidth(width)));
|
||||
} catch {
|
||||
// Storage can be unavailable in private contexts; resizing should still work.
|
||||
}
|
||||
|
|
@ -49,68 +49,25 @@ 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 [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 [width, setWidth] = useState(() => readStoredSidebarWidth(storageKey));
|
||||
const [isResizing, setIsResizing] = useState(false);
|
||||
const widthRef = useRef(width);
|
||||
const dragState = useRef<{ startX: number; startWidth: number } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
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);
|
||||
const storedWidth = readStoredSidebarWidth(storageKey);
|
||||
widthRef.current = storedWidth;
|
||||
setWidth(storedWidth);
|
||||
}, [storageKey, fallbackWidth, minWidth, effectiveMaxWidth]);
|
||||
}, [storageKey]);
|
||||
|
||||
const visibleWidth = open ? width : 0;
|
||||
const paneStyle = useMemo(
|
||||
|
|
@ -118,25 +75,14 @@ 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, minWidth, effectiveMaxWidth);
|
||||
const clamped = clampSidebarWidth(nextWidth);
|
||||
widthRef.current = clamped;
|
||||
setWidth(clamped);
|
||||
if (!compactModeActive) {
|
||||
writeStoredSidebarWidth(storageKey, clamped, minWidth, maxWidth);
|
||||
}
|
||||
writeStoredSidebarWidth(storageKey, clamped);
|
||||
},
|
||||
[storageKey, minWidth, maxWidth, effectiveMaxWidth, compactModeActive],
|
||||
[storageKey],
|
||||
);
|
||||
|
||||
const handlePointerDown = useCallback(
|
||||
|
|
@ -155,15 +101,12 @@ export function ResizableSidebarPane({
|
|||
(event: PointerEvent<HTMLDivElement>) => {
|
||||
if (!dragState.current) return;
|
||||
|
||||
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);
|
||||
const nextWidth = dragState.current.startWidth + event.clientX - dragState.current.startX;
|
||||
const clamped = clampSidebarWidth(nextWidth);
|
||||
widthRef.current = clamped;
|
||||
setWidth(clamped);
|
||||
},
|
||||
[side, minWidth, effectiveMaxWidth],
|
||||
[],
|
||||
);
|
||||
|
||||
const endResize = useCallback(() => {
|
||||
|
|
@ -171,34 +114,28 @@ export function ResizableSidebarPane({
|
|||
|
||||
dragState.current = null;
|
||||
setIsResizing(false);
|
||||
if (!compactModeActive) {
|
||||
writeStoredSidebarWidth(storageKey, widthRef.current, minWidth, maxWidth);
|
||||
}
|
||||
}, [storageKey, minWidth, maxWidth, compactModeActive]);
|
||||
writeStoredSidebarWidth(storageKey, widthRef.current);
|
||||
}, [storageKey]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(event: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (!open || !resizable || !canResizeAtCurrentViewport) return;
|
||||
if (!open || !resizable) return;
|
||||
|
||||
// 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) {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault();
|
||||
commitWidth(width - SIDEBAR_WIDTH_STEP);
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault();
|
||||
commitWidth(width + SIDEBAR_WIDTH_STEP);
|
||||
} else if (event.key === "Home") {
|
||||
event.preventDefault();
|
||||
commitWidth(minWidth);
|
||||
commitWidth(MIN_SIDEBAR_WIDTH);
|
||||
} else if (event.key === "End") {
|
||||
event.preventDefault();
|
||||
commitWidth(effectiveMaxWidth);
|
||||
commitWidth(MAX_SIDEBAR_WIDTH);
|
||||
}
|
||||
},
|
||||
[commitWidth, open, resizable, side, width, minWidth, effectiveMaxWidth, canResizeAtCurrentViewport],
|
||||
[commitWidth, open, resizable, width],
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -211,18 +148,17 @@ export function ResizableSidebarPane({
|
|||
style={paneStyle}
|
||||
>
|
||||
{children}
|
||||
{resizable && open && canResizeAtCurrentViewport ? (
|
||||
{resizable && open ? (
|
||||
<div
|
||||
role="separator"
|
||||
aria-label="Resize sidebar"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemin={minWidth}
|
||||
aria-valuemax={effectiveMaxWidth}
|
||||
aria-valuemin={MIN_SIDEBAR_WIDTH}
|
||||
aria-valuemax={MAX_SIDEBAR_WIDTH}
|
||||
aria-valuenow={width}
|
||||
tabIndex={0}
|
||||
className={cn(
|
||||
"absolute inset-y-0 z-20 w-3 cursor-col-resize touch-none outline-none",
|
||||
side === "right" ? "left-0" : "right-0",
|
||||
"absolute inset-y-0 right-0 z-20 w-3 cursor-col-resize touch-none outline-none",
|
||||
"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