feat: App tile scalability (#645)

* feat: App tile scalability

* fix: missing translation

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",
         },

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
-        <Tooltip.Floating
+        label={app?.description}
-          label={app?.description}
+        position="right-start"
-          position="right-start"
+        multiline
-          multiline
+        disabled={!options.showDescriptionTooltip || !app?.description}
-          disabled={!options.showDescriptionTooltip || !app?.description}
+        styles={{ tooltip: { maxWidth: 300 } }}
-          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
+          {options.showTitle && (
-            h="100%"
+            <Text className="app-title" fw={700} size="12.5cqmin">
-            direction="column"
+              {app?.name}
-            align="center"
+            </Text>
-            gap={0}
+          )}
-            style={{
+          <img src={app?.iconUrl} alt={app?.name} className={combineClasses(classes.appIcon, "app-icon")} />
-              overflow: "visible",
+        </Flex>
-              flexGrow: 5,
+      </Tooltip.Floating>
-            }}
+      {shouldRunPing && <PingIndicator pingResult={pingResult} />}
-          >
-            {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>
     </AppLink>
   );
 }

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 }),
   })),