ui: no border on handles, 500ms delayed hide, fix maximize button position

This commit is contained in:
Hermes Agent committed 2026-09-16 15:13:22 +02:00
1 parent eee6471110
commit c7aa5033d2
1 file changed
+11 -15
+11 -15
View File
@@ -282,14 +282,14 @@ function Plugin () {
// rendered a touch brighter than the others.
const [hoveredHandle, setHoveredHandle] = useState<string | null>(null)
const [handlesShown, setHandlesShown] = useState(false)
// Reveal the handles only after the cursor has dwelt on a resize area for 500ms.
// Hide immediately as soon as the cursor leaves the resize zone (hoveredHandle null).
// Reveal after a 500ms dwell on a resize area; hide 500ms after the cursor leaves it.
useEffect(function () {
if (hoveredHandle !== null) {
const t = setTimeout(function () { setHandlesShown(true) }, 500)
return function () { clearTimeout(t) }
}
setHandlesShown(false)
const t = setTimeout(function () { setHandlesShown(false) }, 500)
return function () { clearTimeout(t) }
}, [hoveredHandle])
function hitboxStyle (dir: string, pos: { [k: string]: number | string }) {
const active = hoveredHandle === dir
@@ -299,7 +299,6 @@ function Plugin () {
zIndex: 3,
opacity: handlesShown ? 1 : 0,
background: active ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.15)',
border: '1px solid ' + (active ? 'rgba(100,100,100,0.65)' : 'rgba(130,130,130,0.4)'),
borderRadius: 4,
transition: 'opacity 150ms ease, background 150ms ease, border-color 150ms ease'
} as any
@@ -309,18 +308,8 @@ function Plugin () {
const isMaximized = isMaxToggled
return (
<div className="plugin-root" style={{ width: '100%', height: '100%' }}>
<div className="plugin-root" style={{ position: 'relative', width: '100%', height: '100%' }}>
<Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
<IconButton
title={isMaximized ? 'Restore window' : 'Maximize window'}
onClick={toggleWindowSize}
>
{isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
</IconButton>
</div>
</div>
<div
style={{
flex: 1,
@@ -335,6 +324,13 @@ function Plugin () {
<Muted>AI assistant (MVP) — bootstrap</Muted>
</div>
</Container>
<IconButton
title={isMaximized ? 'Restore window' : 'Maximize window'}
onClick={toggleWindowSize}
style={{ position: 'absolute', top: 6, right: 6, zIndex: 4 }}
>
{isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
</IconButton>
{/* Decorative drag-handle icon in the bottom-right corner (as in the old plugin).
pointerEvents:none — the actual drag is caught by the invisible corner div. */}
<div