Composer: minimize

src/apps/chat/components/StatusBar.tsx

@@ -4,6 +4,8 @@ import { useShallow } from 'zustand/react/shallow';
 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, IconButton, styled, Typography } from '@mui/joy';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import MinimizeIcon from '@mui/icons-material/Minimize';
 
 // import { isMacUser } from '~/common/util/pwaUtils';
 import type { ShortcutObject } from '~/common/components/shortcuts/useGlobalShortcuts';
@@ -14,6 +16,10 @@ import { useOverlayComponents } from '~/common/layout/overlays/useOverlayCompone
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 
+// configuration
+const COMPOSER_ENABLE_MINIMIZE = false;
+
+
 const hideButtonTooltip = (
   <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
     Hide Shortcuts<br />
@@ -122,7 +128,7 @@ function ShortcutItem(props: { shortcut: ShortcutObject }) {
 }
 
 
-export function StatusBar() {
+export function StatusBar(props: { toggleMinimized?: () => void, isMinimized?: boolean }) {
 
   // state (modifiers pressed/not)
   const { showPromisedOverlay } = useOverlayComponents();
@@ -187,12 +193,19 @@ export function StatusBar() {
   return (
     <StatusBarContainer aria-label='Status bar'>
 
-      {/* Close Button */}
-      <GoodTooltip variantOutlined arrow placement='top' title={hideButtonTooltip}>
-        <IconButton size='sm' sx={hideButtonSx} onClick={handleHideShortcuts}>
-          <CloseRoundedIcon />
+      {(!props.toggleMinimized || !COMPOSER_ENABLE_MINIMIZE) && !props.isMinimized ? (
+        // Close Button
+        <GoodTooltip variantOutlined arrow placement='top' title={hideButtonTooltip}>
+          <IconButton size='sm' sx={hideButtonSx} onClick={handleHideShortcuts}>
+            <CloseRoundedIcon />
+          </IconButton>
+        </GoodTooltip>
+      ) : (
+        // Minimize Button
+        <IconButton size='sm' sx={hideButtonSx} onClick={props.toggleMinimized}>
+          {props.isMinimized ? <ExpandLessIcon /> : <MinimizeIcon />}
         </IconButton>
-      </GoodTooltip>
+      )}
 
       {/* Show all shortcuts */}
       {shortcuts.map((shortcut, idx) => (

src/apps/chat/components/composer/Composer.tsx

@@ -85,6 +85,12 @@ const paddingBoxSx: SxProps = {
 };
 
 
+const minimizedSx: SxProps = {
+  ...paddingBoxSx,
+  display: 'none',
+};
+
+
 /**
  * A React component for composing messages, with attachments and different modes.
  */
@@ -113,6 +119,7 @@ export function Composer(props: {
     chatExecuteModeSendColor, chatExecuteModeSendLabel,
     chatExecuteMenuComponent, chatExecuteMenuShown, showChatExecuteMenu,
   } = useChatExecuteMode(props.capabilityHasT2I, props.isMobile);
+  const [isMinimized, setIsMinimized] = React.useState(false);
   const micCardRef = React.useRef<HTMLDivElement>(null);
 
   // external state
@@ -544,6 +551,11 @@ export function Composer(props: {
   // useMediaSessionCallbacks({ play: toggleRecognition, pause: toggleRecognition });
 
 
+  // Minimize
+
+  const handleToggleMinimized = React.useCallback(() => setIsMinimized(hide => !hide), []);
+
+
   // Attachment Up
 
   const handleAttachCtrlV = React.useCallback(async (event: React.ClipboardEvent) => {
@@ -691,10 +703,10 @@ export function Composer(props: {
   return (
     <Box aria-label='User Message' component='section' sx={props.sx}>
 
-      {!isMobile && labsShowShortcutBar && <StatusBar />}
+      {!isMobile && labsShowShortcutBar && <StatusBar toggleMinimized={handleToggleMinimized} isMinimized={isMinimized} />}
 
       {/* This container is here just to let the potential statusbar fill the whole space, so we moved the padding here and not in the parent */}
-      <Box sx={paddingBoxSx}>
+      <Box sx={(!isMinimized || isMobile || !labsShowShortcutBar) ? paddingBoxSx : minimizedSx}>
 
         <Grid
           container

src/apps/settings-modal/UxLabsSettings.tsx

@@ -89,7 +89,7 @@ export function UxLabsSettings() {
     />
 
     {!isMobile && <FormSwitchControl
-      title={<><ShortcutIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Pro Shortcuts</>} description={labsShowShortcutBar ? 'Status Bar' : 'Disabled'}
+      title={<><ShortcutIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Shortcuts Bar</>} description={labsShowShortcutBar ? 'Status Bar' : 'Disabled'}
       checked={labsShowShortcutBar} onChange={setLabsShowShortcutBar}
     />}