refine assistant window controls

apps/nextjs/src/components/assistant/assistant-panel.module.css

@@ -117,15 +117,6 @@
   animation: assistant-panel-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.floatingPanel[data-maximized] {
-  inset: 1rem;
-  width: auto;
-  height: auto;
-  min-height: 0;
-  transform: none;
-  animation: none;
-}
-
 .widgetPanel {
   container-name: assistant-widget;
   container-type: size;
@@ -188,21 +179,8 @@
 }
 
 .windowControl {
-  width: 1.75rem;
-  height: 1.75rem;
-  border: 0;
-  color: rgba(0, 0, 0, 0.72);
-  transition:
-    filter 160ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.windowControl:hover {
-  filter: brightness(0.94) saturate(1.08);
-}
-
-.windowControl:active {
-  transform: scale(0.92);
+  width: 2.25rem;
+  height: 2.25rem;
 }
 
 .windowControl:focus-visible {
@@ -210,18 +188,6 @@
   outline-offset: 2px;
 }
 
-.windowControlClose {
-  background: var(--mantine-color-red-6);
-}
-
-.windowControlMinimize {
-  background: var(--mantine-color-yellow-5);
-}
-
-.windowControlMaximize {
-  background: var(--mantine-color-green-6);
-}
-
 .panelAction {
   width: 2.625rem;
   height: 2.625rem;
@@ -1666,14 +1632,6 @@
     min-height: min(20rem, calc(100dvh - 1rem - env(safe-area-inset-bottom, 0px)));
   }
 
-  .floatingPanel[data-maximized] {
-    inset: 0;
-    width: 100vw;
-    height: 100dvh;
-    min-height: 0;
-    border-radius: 0;
-  }
-
   .panelHeader {
     min-height: 3.5rem;
     padding: 0.5rem;
@@ -1809,7 +1767,6 @@
 @media (prefers-reduced-motion: reduce) {
   .activityBar,
   .floatingPanel,
-  .windowControl,
   .disclosureIcon,
   .reasoningChevron {
     animation: none;

apps/nextjs/src/components/assistant/assistant-panel.tsx

@@ -78,7 +78,6 @@ import {
   IconApps,
   IconArrowUp,
   IconArrowsMaximize,
-  IconArrowsMinimize,
   IconAt,
   IconCheck,
   IconChevronDown,
@@ -2733,8 +2732,6 @@ interface AssistantConversationSurfaceProps extends AssistantConversationControl
   onExpand?: () => void;
   onMinimize?: () => void;
   onWindowClose?: () => void;
-  onToggleMaximize?: () => void;
-  maximized?: boolean;
 }
 
 export const AssistantConversationSurface = ({
@@ -2752,8 +2749,6 @@ export const AssistantConversationSurface = ({
   onExpand,
   onMinimize,
   onWindowClose,
-  onToggleMaximize,
-  maximized = false,
 }: AssistantConversationSurfaceProps) => {
   const t = useScopedI18n("common.assistant");
   const reducedMotion = useReducedMotion();
@@ -2768,7 +2763,7 @@ export const AssistantConversationSurface = ({
   return (
     <>
       <Group className={classes.panelHeader} justify="space-between" wrap="nowrap" gap="xs">
-        {onWindowClose && onMinimize && onToggleMaximize && (
+        {onWindowClose && onMinimize && (
           <Group
             component="fieldset"
             className={classes.windowControls}
@@ -2778,34 +2773,24 @@ export const AssistantConversationSurface = ({
           >
             <Tooltip label={t("close")}>
               <ActionIcon
-                className={`${classes.windowControl} ${classes.windowControlClose}`}
+                className={classes.windowControl}
+                variant="subtle"
+                color="gray"
                 onClick={onWindowClose}
                 aria-label={t("close")}
               >
-                <IconX size={12} stroke={2.4} />
+                <IconX size={16} />
               </ActionIcon>
             </Tooltip>
             <Tooltip label={t("minimize")}>
               <ActionIcon
-                className={`${classes.windowControl} ${classes.windowControlMinimize}`}
+                className={classes.windowControl}
+                variant="subtle"
+                color="gray"
                 onClick={onMinimize}
                 aria-label={t("minimize")}
               >
-                <IconMinus size={12} stroke={2.4} />
-              </ActionIcon>
-            </Tooltip>
-            <Tooltip label={maximized ? t("restore") : t("maximize")}>
-              <ActionIcon
-                className={`${classes.windowControl} ${classes.windowControlMaximize}`}
-                onClick={onToggleMaximize}
-                aria-label={maximized ? t("restore") : t("maximize")}
-                aria-pressed={maximized}
-              >
-                {maximized ? (
-                  <IconArrowsMinimize size={11} stroke={2.4} />
-                ) : (
-                  <IconArrowsMaximize size={11} stroke={2.4} />
-                )}
+                <IconMinus size={17} />
               </ActionIcon>
             </Tooltip>
           </Group>
@@ -2925,7 +2910,6 @@ export const AssistantPanel = ({
 }: AssistantPanelProps) => {
   const t = useScopedI18n("common.assistant");
   const previousFocusRef = useRef<HTMLElement | null>(null);
-  const [maximized, setMaximized] = useState(false);
 
   useWindowEvent("keydown", (event) => {
     if (opened && event.key === "Escape") onClose();
@@ -2965,7 +2949,7 @@ export const AssistantPanel = ({
         />
       )}
       {opened && (
-        <dialog className={classes.floatingPanel} data-maximized={maximized || undefined} aria-label={t("title")} open>
+        <dialog className={classes.floatingPanel} aria-label={t("title")} open>
           <AssistantConversationSurface
             isRunning={isRunning}
             pendingAction={pendingAction}
@@ -2983,8 +2967,6 @@ export const AssistantPanel = ({
               onDismissActivity();
               onClose();
             }}
-            onToggleMaximize={() => setMaximized((current) => !current)}
-            maximized={maximized}
           />
         </dialog>
       )}