Improve composer separator

src/apps/chat/AppChat.tsx

@@ -41,7 +41,6 @@ import { ChatDrawerMemo } from './components/layout-drawer/ChatDrawer';
 import { ChatMessageList } from './components/ChatMessageList';
 import { ChatPageMenuItems } from './components/layout-menu/ChatPageMenuItems';
 import { Composer } from './components/composer/Composer';
-import { StatusBar } from './components/StatusBar';
 import { usePanesManager } from './components/panes/usePanesManager';
 
 import type { ChatExecuteMode } from './execute-mode/execute-mode.types';
@@ -63,8 +62,11 @@ const composerOpenSx: SxProps = {
   zIndex: 21, // just to allocate a surface, and potentially have a shadow
   backgroundColor: themeBgAppChatComposer,
   borderTop: `1px solid`,
-  borderTopColor: 'divider',
-  p: { xs: 1, md: 2 },
+  borderTopColor: 'rgba(var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.4)',
+  // hack: eats the bottom of the last message (as it has a 1px divider)
+  mt: '-1px',
+  // the padding inside the composer used to be set here, not it's on the grid therein
+  // p: { xs: 1, md: 2 },
 };
 
 const composerClosedSx: SxProps = {
@@ -573,8 +575,6 @@ export function AppChat() {
 
     </PanelGroup>
 
-    {!isMobile && !beamOpenStoreInFocusedPane && <StatusBar />}
-
     <Composer
       isMobile={isMobile}
       chatLLM={chatLLM}

src/apps/chat/components/StatusBar.tsx

@@ -38,9 +38,9 @@ const hideButtonSx: SxProps = {
 // `;
 
 const StatusBarContainer = styled(Box)({
-  borderTop: '1px solid',
-  borderTopColor: 'rgba(var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.4)',
-  // borderTopColor: 'var(--joy-palette-divider)',
+  borderBottom: '1px solid',
+  borderBottomColor: 'var(--joy-palette-divider)',
+  // borderTopColor: 'rgba(var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.4)',
   backgroundColor: 'var(--joy-palette-background-surface)',
   // paddingBlock: '0.25rem',
   paddingInline: '0.5rem',

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

@@ -69,6 +69,7 @@ import { ButtonMicMemo } from './buttons/ButtonMic';
 import { ButtonMultiChatMemo } from './buttons/ButtonMultiChat';
 import { ButtonOptionsDraw } from './buttons/ButtonOptionsDraw';
 import { ReplyToBubble } from '../message/ReplyToBubble';
+import { StatusBar } from '../StatusBar';
 import { TokenBadgeMemo } from './TokenBadge';
 import { TokenProgressbarMemo } from './TokenProgressbar';
 import { useComposerStartupText } from './store-composer';
@@ -107,10 +108,11 @@ export function Composer(props: {
 
   // external state
   const { openPreferencesTab /*, setIsFocusedMode*/ } = useOptimaLayout();
-  const { labsAttachScreenCapture, labsCameraDesktop, labsShowCost } = useUXLabsStore(useShallow(state => ({
+  const { labsAttachScreenCapture, labsCameraDesktop, labsShowCost, labsShowShortcutBar } = useUXLabsStore(useShallow(state => ({
     labsAttachScreenCapture: state.labsAttachScreenCapture,
     labsCameraDesktop: state.labsCameraDesktop,
     labsShowCost: state.labsShowCost,
+    labsShowShortcutBar: state.labsShowShortcutBar,
   })));
   const timeToShowTips = useAppStateStore(state => state.usageCount > 2);
   const { novel: explainShiftEnter, touch: touchShiftEnter } = useUICounter('composer-shift-enter');
@@ -518,14 +520,24 @@ export function Composer(props: {
       textPlaceholder += platformAwareKeystrokes('\n\n💡 Tip: Ctrl + Enter to beam');
   }
 
+  const stableGridSx: SxProps = React.useMemo(() => ({
+    // basically a position:relative to enable the inner drop area
+    ...dragContainerSx,
+    // This used to be in the outer box, but we put it here instead
+    p: { xs: 1, md: 2 },
+  }), [dragContainerSx]);
+
   return (
     <Box aria-label='User Message' component='section' sx={props.sx}>
+
+      {!isMobile && labsShowShortcutBar && <StatusBar />}
+
       <Grid
         container
         onDragEnter={handleDragEnter}
         onDragStart={handleDragStart}
         spacing={{ xs: 1, md: 2 }}
-        sx={dragContainerSx}
+        sx={stableGridSx}
       >
 
         {/* [Mobile: top, Desktop: left] */}