LFS: actions in the Attachment TitleBar

src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragmentEditor.tsx

@@ -82,7 +82,7 @@ export function DocAttachmentFragmentEditor(props: {
 
   // LiveFile
 
-  const { liveFileControlButton, liveFileActionBox } = useLiveFileComparison(
+  const { liveFileControlButton, liveFileActions } = useLiveFileComparison(
     fragment.liveFileId ?? null,
     props.isMobile === true,
     fragmentDocPart.data.text,
@@ -167,7 +167,7 @@ export function DocAttachmentFragmentEditor(props: {
 
       {/* Ref of the file */}
       <Box sx={{
-        minHeight: '2.25rem',
+        minHeight: '2.75rem',
         px: 1,
         // layout
         display: 'flex',
@@ -216,6 +216,8 @@ export function DocAttachmentFragmentEditor(props: {
 
       </Box>
 
+      {/* LiveFile  */}
+      {!isEditing && liveFileActions}
 
       {/* Button Bar Edit / Delete commands */}
       <Sheet color='primary' variant='soft' sx={theme => ({
@@ -230,8 +232,6 @@ export function DocAttachmentFragmentEditor(props: {
         gap: 1,
       })}>
 
-        {!isEditing && liveFileActionBox}
-
         {/* Buttons Row */}
         <Box sx={{
           display: 'flex',

src/common/livefile/LiveFileControlButton.tsx

@@ -15,9 +15,9 @@ import { LiveFileChooseIcon, LiveFileIcon } from './liveFile.icons';
 const BUTTON_COLOR: ColorPaletteProp = 'neutral';
 
 
-const controlButtonSx: SxProps = {
-  minHeight: 36,
-};
+// const controlButtonSx: SxProps = {
+//   minHeight: 36,
+// };
 
 const refreshButtonSx: SxProps = {
   // border: '1px solid',
@@ -97,7 +97,7 @@ export function LiveFileControlButton(props: {
               : props.isPaired ? <LiveFileIcon color='success' />
                 : <LiveFileChooseIcon color='success' />
           }
-          sx={props.hasContent ? refreshButtonSx : controlButtonSx}
+          sx={props.hasContent ? refreshButtonSx : undefined /*controlButtonSx*/}
         >
           {props.hasContent ? 'Refresh'
             : props.isPaired ? 'Enable Sync'

src/common/livefile/useLiveFileComparison.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { fileOpen } from 'browser-fs-access';
 import { cleanupEfficiency, makeDiff } from '@sanity/diff-match-patch';
 
-import { Box, Button, ColorPaletteProp, Dropdown, IconButton, ListItemDecorator, Menu, MenuButton, MenuItem, Sheet } from '@mui/joy';
+import type { SxProps } from '@mui/joy/styles/types';
+import { Box, Button, ColorPaletteProp, Dropdown, IconButton, ListDivider, ListItemDecorator, Menu, MenuButton, MenuItem, Sheet } from '@mui/joy';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
@@ -18,6 +19,30 @@ import { liveFileCreateOrThrow } from './store-live-file';
 import { useLiveFile } from './liveFile.hooks';
 
 
+const sheetSx: SxProps = {
+  m: 1,
+  mt: 0,
+  p: 1,
+  backgroundColor: 'rgb(var(--joy-palette-neutral-lightChannel) / 20%)',
+  border: '1px solid',
+  borderRadius: 'sm',
+  borderColor: 'neutral.outlinedBorder',
+  boxShadow: `inset 0 4px 6px -6px rgb(var(--joy-palette-neutral-darkChannel) / 40%)`,
+  fontSize: 'sm',
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: 1,
+  'button': {
+    backgroundColor: 'background.surface',
+  },
+  'button:hover': {
+    backgroundColor: 'background.popup',
+    boxShadow: 'xs',
+  },
+};
+
+
 interface DiffSummary {
   insertions: number;
   deletions: number;
@@ -204,7 +229,7 @@ export function useLiveFileComparison(
     />
   ), [fileHasContent, handlePairNewFSFHandle, handlePairNewFileWithPicker, _handleReloadFileContent, isPairingValid, isSavingFile]);
 
-  const liveFileActionBox = React.useMemo(() => {
+  const liveFileActions = React.useMemo(() => {
     if (!status && !fileHasContent) return null;
 
     const isError = status?.mtype === 'error';
@@ -216,26 +241,14 @@ export function useLiveFileComparison(
             : 'neutral';
 
     return (
-      <Sheet
-        variant='outlined'
-        color={statusColor}
-        sx={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          alignItems: 'center',
-          borderRadius: 'sm',
-          fontSize: 'sm',
-          gap: 1,
-          p: 1,
-          // boxShadow: 'xs',
-        }}
-      >
-        <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
+      <Sheet color={statusColor} sx={sheetSx}>
+
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
 
           {/* Refresh Content Button */}
           {isPairingValid && (
             <TooltipOutlined title='Reload and compare File' placement='top-start' color='success'>
-              <IconButton size='sm' variant='plain' onClick={() => _handleReloadFileContent()}>
+              <IconButton size='sm' variant='outlined' onClick={() => _handleReloadFileContent()} sx={{ mr: 1 }}>
                 <LiveFileIcon color='success' />
               </IconButton>
             </TooltipOutlined>
@@ -331,7 +344,7 @@ export function useLiveFileComparison(
 
 
   return {
-    liveFileActionBox,
+    liveFileActions,
     liveFileControlButton,
   };
 }