From 767ca9065cfd3df93b3746144a16f8e6c08a8108 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 24 Oct 2023 11:15:54 +0200
Subject: [PATCH] POC for opening an app inside of a modal

---
 .../Dashboard/Tiles/Apps/AppTile.tsx          | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
index ba3b3676a40..85a9a00f2a9 100644
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -2,13 +2,14 @@ import { Affix, Box, Text, Tooltip, UnstyledButton } from '@mantine/core';
 import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
-
 import { AppType } from '~/types/app';
+
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
 import { AppMenu } from './AppMenu';
 import { AppPing } from './AppPing';
+import { modals } from '@mantine/modals';
 
 interface AppTileProps extends BaseTileProps {
   app: AppType;
@@ -87,9 +88,37 @@ export const AppTile = ({ className, app }: AppTileProps) => {
       ) : (
         <UnstyledButton
           style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
-          component="a"
-          href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url}
-          target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'}
+          // component="a"
+          onClick={(e) =>
+            modals.open({
+              size: '100%',
+              withCloseButton: false,
+              id: app.url,
+              keepMounted: true,
+              transitionProps: {
+                keepMounted: true,
+                transition: 'scale',
+              },
+              overlayProps: {
+                opacity: 0.55,
+                blur: 3,
+              },
+              children: (
+                <iframe
+                  style={{
+                    overflow: 'hidden',
+                  }}
+                  frameBorder={0}
+                  height={window.innerHeight - 200}
+                  width="100%"
+                  src={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url}
+                  sandbox="allow-scripts allow-same-origin allow-fullscreen"
+                ></iframe>
+              ),
+            })
+          }
+          // href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url}
+          // target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'}
           className={`${classes.button} ${classes.base}`}
         >
           <Inner />
@@ -111,7 +140,7 @@ const useStyles = createStyles((theme, _params, getRef) => ({
     overflow: 'visible',
     flexGrow: 5,
   },
-  appImage:{
+  appImage: {
     maxHeight: '100%',
     maxWidth: '100%',
     overflow: 'auto',