✨App tile UI change (#1231)

* 💄 Rework the App tile UI

* 🤡 Forgot one

* Make it so the app title gets hidden properly

Now if the value is missing it won't by "hover" or "hidden" so it won't hide

* Turn the `Tooltip` into `HoverCard`

* Make save and cancel button not wrap anymore

* 💄 Used InfoCard in options + translations

* ♻️ Remove fallback value for label translations

---------

Co-authored-by: Thomas Camlong <49837342+ajnart@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -1,5 +1,5 @@
-import { Box, Stack, Title, UnstyledButton } from '@mantine/core';
-import { createStyles } from '@mantine/styles';
+import { Box, Flex, Text, Tooltip, UnstyledButton } from '@mantine/core';
+import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 
@@ -20,49 +20,76 @@ export const AppTile = ({ className, app }: AppTileProps) => {
 
   const { cx, classes } = useStyles();
 
+  const { colorScheme } = useMantineTheme();
+
+  const tooltipContent = [
+    app.appearance.appNameStatus === "hover" ? app.name : undefined,
+    app.behaviour.tooltipDescription
+  ].filter( e => e ).join( ': ' );
+
   const {
     classes: { card: cardClass },
   } = useCardStyles(false);
 
   function Inner() {
     return (
-      <>
-        <Stack
+      <Tooltip.Floating
+        label={tooltipContent}
+        position="right-start"
+        c={ colorScheme === 'light' ? "black" : "dark.0" }
+        color={ colorScheme === 'light' ? "gray.2" : "dark.4" }
+        multiline
+        disabled={tooltipContent === ''}
+        styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+      >
+        <Flex
           m={0}
           p={0}
-          spacing="xs"
           justify="space-around"
           align="center"
-          style={{ height: '100%', width: '100%' }}
+          h="100%"
+          w="100%"
           className="dashboard-tile-app"
+          direction={app.appearance.positionAppName ?? 'column'}
         >
-          <Box hidden={false}>
-            <Title
-              order={5}
+          <Box px={10} hidden={["hover", "hidden"].includes(app.appearance.appNameStatus)}>
+            <Text
+              w="max-content"
               size="md"
               ta="center"
-              lineClamp={1}
+              weight={700}
               className={cx(classes.appName, 'dashboard-tile-app-title')}
             >
               {app.name}
-            </Title>
+            </Text>
           </Box>
-          <motion.img
-            className={classes.image}
-            height="85%"
-            width="85%"
-            style={{
-              objectFit: 'contain',
+          <Box
+            w="100%"
+            h="100%"
+            display="flex"
+            sx={{
+              alignContent: 'center',
+              justifyContent: 'center',
+              flex: '1 1 auto',
+              flexWrap: 'wrap',
             }}
-            src={app.appearance.iconUrl}
-            alt={app.name}
-            whileHover={{
-              scale: 1.2,
-              transition: { duration: 0.2 },
-            }}
-          />
-        </Stack>
-      </>
+          >
+            <motion.img
+              className={classes.image}
+              height="85%"
+              style={{
+                objectFit: 'contain',
+              }}
+              src={app.appearance.iconUrl}
+              alt={app.name}
+              whileHover={{
+                scale: 1.2,
+                transition: { duration: 0.2 },
+              }}
+            />
+          </Box>
+        </Flex>
+      </Tooltip.Floating>
     );
   }
 
@@ -101,7 +128,6 @@ const useStyles = createStyles((theme, _params, getRef) => ({
     wordBreak: 'break-word',
   },
   button: {
-    paddingBottom: 10,
     height: '100%',
     width: '100%',
     display: 'flex',