Popups: improvements v2

enricoros · Dec 31, 2024 · bae15f3 · bae15f3
1 parent 35733e8
commit bae15f3
Show file tree

Hide file tree

Showing 13 changed files with 196 additions and 174 deletions.
diff --git a/src/apps/chat/components/composer/actile/ActilePopup.tsx b/src/apps/chat/components/composer/actile/ActilePopup.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Box, ListItem, ListItemButton, ListItemDecorator, Sheet, Typography } from '@mui/joy';
 
-import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { CloseablePopup } from '~/common/components/CloseablePopup';
 
 import type { ActileItem, ActileProvider } from './ActileProvider';
 
@@ -33,12 +33,12 @@ export function ActilePopup(props: {
   }, [props.itemsByProvider, props.activeItemIndex]);
 
   return (
-    <CloseableMenu
-      open anchorEl={props.anchorEl} onClose={props.onClose}
-      noTopPadding
-      noBottomPadding
+    <CloseablePopup
+      menu anchorEl={props.anchorEl} onClose={props.onClose}
       maxHeightGapPx={320}
-      sx={{ minWidth: 320 }}
+      minWidth={320}
+      noBottomPadding
+      noTopPadding
     >
 
       {!props.itemsByProvider.length && (
@@ -108,6 +108,6 @@ export function ActilePopup(props: {
         </React.Fragment>
       ))}
 
-    </CloseableMenu>
+    </CloseablePopup>
   );
 }
diff --git a/src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx b/src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx
@@ -15,7 +15,7 @@ import ReadMoreIcon from '@mui/icons-material/ReadMore';
 import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 
-import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DMessageAttachmentFragment, DMessageDocPart, DMessageImageRefPart, isDocPart, isImageRefPart } from '~/common/stores/chat/chat.fragments';
 import { LiveFileIcon } from '~/common/livefile/liveFile.icons';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
@@ -151,11 +151,13 @@ export function LLMAttachmentMenu(props: {
   const showInputs = uiComplexityMode !== 'minimal';
 
   return (
-    <CloseableMenu
-      dense placement='top'
+    <CloseablePopup
+      menu anchorEl={props.menuAnchor} onClose={props.onClose}
+      dense
+      maxWidth={460}
+      minWidth={260}
       noTopPadding
-      open anchorEl={props.menuAnchor} onClose={props.onClose}
-      sx={{ minWidth: 260, maxWidth: 460 }}
+      placement='top'
     >
 
       {/* Move Arrows */}
@@ -388,6 +390,6 @@ export function LLMAttachmentMenu(props: {
         Remove
       </MenuItem>
 
-    </CloseableMenu>
+    </CloseablePopup>
   );
 }
diff --git a/src/apps/chat/components/composer/llmattachments/LLMAttachmentsList.tsx b/src/apps/chat/components/composer/llmattachments/LLMAttachmentsList.tsx
@@ -9,7 +9,7 @@ import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 
 import type { AgiAttachmentPromptsData } from '~/modules/aifn/agiattachmentprompts/useAgiAttachmentPrompts';
 
-import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { ConfirmationModal } from '~/common/components/modals/ConfirmationModal';
 import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents';
 
@@ -205,11 +205,11 @@ export function LLMAttachmentsList(props: {
 
     {/* All Drafts Menu */}
     {!!overallMenuAnchor && (
-      <CloseableMenu
-        open
-        dense placement='top-start'
-        anchorEl={overallMenuAnchor} onClose={handleOverallMenuHide}
-        sx={{ minWidth: 200 }}
+      <CloseablePopup
+        menu anchorEl={overallMenuAnchor} onClose={handleOverallMenuHide}
+        dense
+        minWidth={200}
+        placement='top-start'
       >
         {/* uses the agiAttachmentPrompts to imagine what the user will ask aboud those */}
         <MenuItem color='primary' variant='soft' onClick={agiAttachmentPrompts.refetch} disabled={!hasAttachments || agiAttachmentPrompts.isFetching}>
@@ -234,7 +234,7 @@ export function LLMAttachmentsList(props: {
           <ListItemDecorator><ClearIcon /></ListItemDecorator>
           Remove All{llmAttachmentDrafts.length > 5 ? <span style={{ opacity: 0.5 }}> {llmAttachmentDrafts.length} attachments</span> : null}
         </MenuItem>
-      </CloseableMenu>
+      </CloseablePopup>
     )}
 
   </>;

diff --git a/src/apps/chat/components/layout-drawer/ChatDrawer.tsx b/src/apps/chat/components/layout-drawer/ChatDrawer.tsx
@@ -15,7 +15,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import StarOutlineRoundedIcon from '@mui/icons-material/StarOutlineRounded';
 
 import type { DConversationId } from '~/common/stores/chat/chat.conversation';
-import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DFolder, useFolderStore } from '~/common/stores/folders/store-chat-folders';
 import { DebouncedInputMemo } from '~/common/components/DebouncedInput';
 import { FoldersToggleOff } from '~/common/components/icons/FoldersToggleOff';
@@ -410,12 +410,12 @@ function ChatDrawer(props: {
 
     {/* [Menu] Chat Item Folder Change */}
     {!!folderChangeRequest?.anchorEl && (
-      <CloseableMenu
+      <CloseablePopup
+        menu anchorEl={folderChangeRequest.anchorEl} onClose={handleConversationFolderCancel}
         bigIcons
-        open anchorEl={folderChangeRequest.anchorEl} onClose={handleConversationFolderCancel}
+        minWidth={200}
         placement='bottom-start'
         zIndex={themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */}
-        sx={{ minWidth: 200 }}
       >
 
         {/* Folder Assignment Buttons */}
@@ -449,7 +449,7 @@ function ChatDrawer(props: {
           </ListItem>
         )}
 
-      </CloseableMenu>
+      </CloseablePopup>
     )}
 
   </>;

diff --git a/src/apps/chat/components/layout-drawer/folders/FolderListItem.tsx b/src/apps/chat/components/layout-drawer/folders/FolderListItem.tsx
@@ -9,7 +9,7 @@ import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import FolderIcon from '@mui/icons-material/Folder';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
-import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DFolder, FOLDERS_COLOR_PALETTE, useFolderStore } from '~/common/stores/folders/store-chat-folders';
 import { InlineTextarea } from '~/common/components/InlineTextarea';
 import { themeZIndexOverMobileDrawer } from '~/common/app.theme';
@@ -203,11 +203,12 @@ export function FolderListItem(props: {
         </IconButton>
 
         {!!menuAnchorEl && (
-          <CloseableMenu
-            dense placement='top'
-            open anchorEl={menuAnchorEl} onClose={handleMenuClose}
+          <CloseablePopup
+            menu anchorEl={menuAnchorEl} onClose={handleMenuClose}
+            dense
+            minWidth={200}
+            placement='top'
             zIndex={themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */}
-            sx={{ minWidth: 200 }}
           >
 
             <MenuItem
@@ -316,7 +317,7 @@ export function FolderListItem(props: {
               </RadioGroup>
             </MenuItem>
 
-          </CloseableMenu>
+          </CloseablePopup>
         )}
 
       </ListItemButton>

diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx
@@ -35,7 +35,7 @@ import { ModelVendorAnthropic } from '~/modules/llms/vendors/anthropic/anthropic
 
 import { AnthropicIcon } from '~/common/components/icons/vendors/AnthropicIcon';
 import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
-import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DMessage, DMessageId, DMessageUserFlag, DMetaReferenceItem, MESSAGE_FLAG_AIX_SKIP, MESSAGE_FLAG_NOTIFY_COMPLETE, MESSAGE_FLAG_STARRED, MESSAGE_FLAG_VND_ANT_CACHE_AUTO, MESSAGE_FLAG_VND_ANT_CACHE_USER, messageFragmentsReduceText, messageHasUserFlag } from '~/common/stores/chat/chat.message';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { MarkHighlightIcon } from '~/common/components/icons/MarkHighlightIcon';
@@ -796,10 +796,11 @@ export function ChatMessage(props: {
 
       {/* Message Operations Menu (3 dots) */}
       {!!opsMenuAnchor && (
-        <CloseableMenu
-          dense placement='auto-end'
-          open={true} anchorEl={opsMenuAnchor} onClose={handleCloseOpsMenu}
-          sx={{ minWidth: 280 }}
+        <CloseablePopup
+          menu anchorEl={opsMenuAnchor} onClose={handleCloseOpsMenu}
+          dense
+          minWidth={280}
+          placement={fromAssistant ? 'auto-start' : 'auto-end'}
         >
 
           {fromSystem && (
@@ -946,7 +947,7 @@ export function ChatMessage(props: {
                   : <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>Beam Edit<KeyStroke variant='outlined' combo='Ctrl + Shift + B' /></Box>}
             </MenuItem>
           )}
-        </CloseableMenu>
+        </CloseablePopup>
       )}
 
 
@@ -1049,10 +1050,11 @@ export function ChatMessage(props: {
 
       {/* Context (Right-click) Menu */}
       {!!contextMenuAnchor && (
-        <CloseableMenu
-          dense placement='bottom-start'
-          open={true} anchorEl={contextMenuAnchor} onClose={closeContextMenu}
-          sx={{ minWidth: 220 }}
+        <CloseablePopup
+          menu anchorEl={contextMenuAnchor} onClose={closeContextMenu}
+          dense
+          minWidth={220}
+          placement='bottom-start'
         >
           <MenuItem onClick={handleOpsCopy} sx={{ flex: 1, alignItems: 'center' }}>
             <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
@@ -1071,7 +1073,7 @@ export function ChatMessage(props: {
             <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverOutlinedIcon />}</ListItemDecorator>
             Speak
           </MenuItem>}
-        </CloseableMenu>
+        </CloseablePopup>
       )}
 
     </Box>

diff --git a/src/apps/chat/execute-mode/ExecuteModeMenu.tsx b/src/apps/chat/execute-mode/ExecuteModeMenu.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Box, MenuItem, Radio, Typography } from '@mui/joy';
 
-import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { KeyStroke, platformAwareKeystrokes } from '~/common/components/KeyStroke';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
@@ -23,10 +23,10 @@ export function ExecuteModeMenu(props: {
   const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
 
   return (
-    <CloseableMenu
+    <CloseablePopup
+      menu anchorEl={props.anchorEl} onClose={props.onClose}
+      minWidth={320}
       placement='top-end'
-      open={true} anchorEl={props.anchorEl} onClose={props.onClose}
-      sx={{ minWidth: 320 }}
     >
 
       {/*<MenuItem color='neutral' selected>*/}
@@ -60,7 +60,7 @@ export function ExecuteModeMenu(props: {
           </MenuItem>,
         )}
 
-    </CloseableMenu>
+    </CloseablePopup>
   );
 }
 

diff --git a/src/common/components/CloseableMenu.tsx b/src/common/components/CloseableMenu.tsx