Anim: enter Models Modal

src/common/app.theme.ts

@@ -3,6 +3,8 @@ import createCache from '@emotion/cache';
 import { Inter, JetBrains_Mono } from 'next/font/google';
 import { extendTheme } from '@mui/joy';
 
+import { animationEnterModal } from '~/common/util/animUtils';
+
 
 // Definitions
 export type UIComplexityMode = 'minimal' | 'pro' | 'extra';
@@ -116,12 +118,17 @@ export const createAppTheme = (uiComplexityMinimal: boolean) => extendTheme({
     //   },
     // },
 
-    JoyModal: !uiComplexityMinimal ? undefined : {
+    JoyModal: {
       styleOverrides: {
-        backdrop: {
+        backdrop: !uiComplexityMinimal ? undefined : {
           backdropFilter: 'none',
           // backdropFilter: 'blur(2px)',
         },
+        root: uiComplexityMinimal ? undefined : {
+          '& .agi-animate-enter': {
+            animation: `${animationEnterModal} 0.2s`,
+          },
+        },
       },
     },
 

src/common/components/modals/GoodModal.tsx

@@ -13,6 +13,7 @@ export function GoodModal(props: {
   strongerTitle?: boolean,
   noTitleBar?: boolean,
   dividers?: boolean,
+  animateEnter?: boolean,
   open: boolean,
   onClose?: () => void,
   hideBottomClose?: boolean,
@@ -36,6 +37,7 @@ export function GoodModal(props: {
     >
       <ModalOverflow sx={{ p: 1 }}>
         <ModalDialog
+          className={props.animateEnter ? 'agi-animate-enter' : ''}
           sx={{
             minWidth: { xs: 360, sm: 500, md: 600, lg: 700 },
             maxWidth: 700,

src/modules/llms/models-modal/ModelsModal.tsx

@@ -65,6 +65,8 @@ export function ModelsModal(props: { suspendAutoModelsSetup?: boolean }) {
     {/* Services Setup */}
     {showModels && <GoodModal
       title={<>Configure <b>AI Models</b></>}
+      open onClose={optimaActions().closeModels}
+      animateEnter={llmCount === 0}
       startButton={
         multiService ? <Checkbox
           label='All Services'
@@ -72,7 +74,6 @@ export function ModelsModal(props: { suspendAutoModelsSetup?: boolean }) {
           checked={showAllServices} onChange={() => setShowAllServices(all => !all)}
         /> : undefined
       }
-      open onClose={optimaActions().closeModels}
       sx={{
         // forces some shrinkage of the contents (ModelsList)
         overflow: 'auto',