Mini Apps: Support fullscreen button and visibility_changed event (#5292)

src/components/modals/webApp/WebAppModal.module.scss

@@ -290,6 +290,10 @@
   height: 1.75rem !important;
 }
 
+.fullscreenButton {
+  margin-right: 0.5rem;
+}
+
 .tab-close-button {
   transition: opacity 0.25s ease-in-out;
   opacity: 0;

src/components/modals/webApp/WebAppModal.tsx

@@ -306,6 +306,10 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
     changeWebAppModalState({ state: 'minimized' });
   });
 
+  const handleFullscreenClick = useLastCallback(() => {
+    changeWebAppModalState({ state: 'fullScreen' });
+  });
+
   const handleOpenMoreAppsTabClick = useLastCallback(() => {
     openMoreAppsTab();
   });
@@ -588,6 +592,20 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
         {renderTabs()}
         {renderMoreMenu()}
 
+        <Button
+          className={buildClassName(
+            styles.windowStateButton,
+            styles.fullscreenButton,
+            'no-drag',
+          )}
+          round
+          color="translucent"
+          size="tiny"
+          onClick={handleFullscreenClick}
+        >
+          <Icon className={styles.stateIcon} name="expand-modal" />
+        </Button>
+
         <Button
           className={buildClassName(
             styles.windowStateButton,

src/components/modals/webApp/WebAppModalTabContent.tsx

@@ -30,6 +30,7 @@ import renderText from '../../common/helpers/renderText';
 
 import { getIsWebAppsFullscreenSupported } from '../../../hooks/useAppLayout';
 import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
+import useEffectWithPrevDeps from '../../../hooks/useEffectWithPrevDeps';
 import useFlag from '../../../hooks/useFlag';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
@@ -326,6 +327,30 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
     }
   }, [isFullscreen]);
 
+  const visibilityChangedCallBack = useLastCallback((visibility: boolean) => {
+    sendEvent({
+      eventType: 'visibility_changed',
+      eventData: {
+        is_visible: visibility,
+      },
+    });
+  });
+
+  useEffect(() => {
+    if (isLoaded) {
+      visibilityChangedCallBack(Boolean(isActive));
+    }
+  }, [isActive, isLoaded]);
+
+  useEffectWithPrevDeps(([prevModalState]) => {
+    if (modalState === 'minimized') {
+      visibilityChangedCallBack(false);
+    }
+    if (modalState && prevModalState === 'minimized') {
+      visibilityChangedCallBack(true);
+    }
+  }, [modalState]);
+
   useSyncEffect(([prevIsPaymentModalOpen]) => {
     if (isPaymentModalOpen === prevIsPaymentModalOpen) return;
     if (webApp?.slug && !isPaymentModalOpen && paymentStatus) {

src/types/webapp.ts

@@ -152,6 +152,9 @@ export type WebAppOutboundEvent =
   WebAppEvent<'fullscreen_changed', {
     is_fullscreen: boolean;
   }> |
+  WebAppEvent<'visibility_changed', {
+    is_visible: boolean;
+  }> |
   WebAppEvent<'fullscreen_failed', {
     error: 'UNSUPPORTED' | string;
   }> |