From 28927cfa2802c6335487638b5ce4d7133f2e4423 Mon Sep 17 00:00:00 2001
From: SeDemal <Tagaishi@hotmail.ch>
Date: Sun, 9 Jun 2024 12:54:56 +0200
Subject: [PATCH] feat: App tile scalability (#645)

* feat: App tile scalability

* fix: missing translation
---
 packages/translation/src/lang/en.ts    |  3 ++
 packages/widgets/src/app/component.tsx | 55 ++++++++++++--------------
 packages/widgets/src/app/index.ts      |  1 +
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 4355cf030..d6e3539a8 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -637,6 +637,9 @@ export default {
         openInNewTab: {
           label: "Open in new tab",
         },
+        showTitle: {
+          label: "Show app name",
+        },
         showDescriptionTooltip: {
           label: "Show description tooltip",
         },
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 8838e6436..bff9ad604 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -4,6 +4,7 @@ import type { PropsWithChildren } from "react";
 import { useState } from "react";
 import { Box, Center, Flex, Loader, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconDeviceDesktopX } from "@tabler/icons-react";
+import combineClasses from "clsx";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -13,7 +14,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./app.module.css";
 
-export default function AppWidget({ options, serverData, isEditMode, width, height }: WidgetComponentProps<"app">) {
+export default function AppWidget({ options, serverData, isEditMode, width }: WidgetComponentProps<"app">) {
   const t = useScopedI18n("widget.app");
   const isQueryEnabled = Boolean(options.appId);
   const {
@@ -92,35 +93,31 @@ export default function AppWidget({ options, serverData, isEditMode, width, heig
 
   return (
     <AppLink href={app?.href ?? ""} openInNewTab={options.openInNewTab} enabled={Boolean(app?.href) && !isEditMode}>
-      <Flex align="center" justify="center" h="100%" pos="relative">
-        <Tooltip.Floating
-          label={app?.description}
-          position="right-start"
-          multiline
-          disabled={!options.showDescriptionTooltip || !app?.description}
-          styles={{ tooltip: { maxWidth: 300 } }}
+      <Tooltip.Floating
+        label={app?.description}
+        position="right-start"
+        multiline
+        disabled={!options.showDescriptionTooltip || !app?.description}
+        styles={{ tooltip: { maxWidth: 300 } }}
+      >
+        <Flex
+          className={combineClasses("app-flex-wrapper", app?.name, app?.id)}
+          h="100%"
+          w="100%"
+          direction="column"
+          p="7.5cqmin"
+          justify="center"
+          align="center"
         >
-          <Flex
-            h="100%"
-            direction="column"
-            align="center"
-            gap={0}
-            style={{
-              overflow: "visible",
-              flexGrow: 5,
-            }}
-          >
-            {height >= 96 && (
-              <Text fw={700} ta="center">
-                {app?.name}
-              </Text>
-            )}
-            <img src={app?.iconUrl} alt={app?.name} className={classes.appIcon} />
-          </Flex>
-        </Tooltip.Floating>
-
-        {shouldRunPing && <PingIndicator pingResult={pingResult} />}
-      </Flex>
+          {options.showTitle && (
+            <Text className="app-title" fw={700} size="12.5cqmin">
+              {app?.name}
+            </Text>
+          )}
+          <img src={app?.iconUrl} alt={app?.name} className={combineClasses(classes.appIcon, "app-icon")} />
+        </Flex>
+      </Tooltip.Floating>
+      {shouldRunPing && <PingIndicator pingResult={pingResult} />}
     </AppLink>
   );
 }
diff --git a/packages/widgets/src/app/index.ts b/packages/widgets/src/app/index.ts
index 8324b83c6..cfa202e5c 100644
--- a/packages/widgets/src/app/index.ts
+++ b/packages/widgets/src/app/index.ts
@@ -8,6 +8,7 @@ export const { definition, componentLoader, serverDataLoader } = createWidgetDef
   options: optionsBuilder.from((factory) => ({
     appId: factory.app(),
     openInNewTab: factory.switch({ defaultValue: true }),
+    showTitle: factory.switch({ defaultValue: true }),
     showDescriptionTooltip: factory.switch({ defaultValue: false }),
     pingEnabled: factory.switch({ defaultValue: false }),
   })),