[eric] desktop: fullscreen card collapses its traffic lights to one exit control (native lights own that corner)

This commit is contained in:
ciregenz
2026-07-21 18:40:19 -07:00
parent 76cf209eda
commit c5efd8fd57
5 changed files with 33 additions and 4 deletions
@@ -1071,7 +1071,7 @@ const AgentCard: React.FC<Props> = ({
onPointerDown={(e) => e.stopPropagation()}
sx={{ display: 'flex', alignItems: 'center', mr: 0.75, flexShrink: 0 }}
>
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={isFullscreen} />
</Box>
<Box
sx={{
@@ -1000,6 +1000,7 @@ const BrowserCard: React.FC<Props> = ({
onMinimize={handleMinimize}
onTile={onTile}
tiled={!!tileZone}
fullscreen={tileZone === 'fullscreen'}
/>
</Box>
<Box
@@ -557,7 +557,7 @@ const DashboardViewCard: React.FC<Props> = ({
}}
>
<Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}>
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
</Box>
{!isMinimized && <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
<Typography
@@ -342,7 +342,7 @@ const NoteCard: React.FC<Props> = ({
}}
>
<Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
</Box>
{isMinimized && (
<Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
@@ -1,5 +1,6 @@
import React, { useRef, useState } from 'react';
import Box from '@mui/material/Box';
import FullscreenExitRoundedIcon from '@mui/icons-material/FullscreenExitRounded';
import { TILE_ZONES } from './tileZones';
interface WindowControlsProps {
@@ -7,6 +8,9 @@ interface WindowControlsProps {
onMinimize: () => void;
onTile: (zone: string) => void; // a TILE_ZONES key, or 'restore'
tiled?: boolean;
// Full size view: the native macOS lights sit right above this corner, so a second dot cluster
// reads as double chrome; collapse to ONE exit control and let the natives own window ops.
fullscreen?: boolean;
}
// macOS-style traffic lights on every card = the "AI OS" window feel. Grey at rest so a canvas
@@ -50,13 +54,37 @@ export const ARC_CHIP_SX: Record<string, unknown> = {
'.osw-pill-host:hover & .osw-window-lights > :nth-of-type(3)': { transform: 'translate(calc(-50% + 11px), calc(-50% + 5px)) scale(1)', opacity: 1, transitionDelay: '80ms' },
};
function WindowControls({ onClose, onMinimize, onTile, tiled }: WindowControlsProps): React.ReactElement {
function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen }: WindowControlsProps): React.ReactElement {
const [menuOpen, setMenuOpen] = useState(false);
const closeTimer = useRef<number | null>(null);
const openMenu = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
if (fullscreen) {
return (
<Box className="osw-window-lights" onPointerDown={stop} sx={{ display: 'flex', alignItems: 'center', flex: 'none' }}>
<Box
component="button"
type="button"
aria-label="Exit full screen"
title="Exit full screen (Esc)"
onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile('restore'); }}
onPointerDown={stop}
sx={{
display: 'flex', alignItems: 'center', justifyContent: 'center',
width: 22, height: 22, p: 0, border: 'none', borderRadius: '6px',
background: 'transparent', color: 'inherit', opacity: 0.65, cursor: 'pointer',
transition: 'opacity 120ms, background 120ms',
'&:hover': { opacity: 1, background: 'rgba(136,136,136,0.18)' },
}}
>
<FullscreenExitRoundedIcon sx={{ fontSize: 16 }} />
</Box>
</Box>
);
}
const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
<Box component="button" type="button" aria-label={label}
onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick(); }} onPointerDown={stop} sx={dotSx(color)}>