feat(app-widget): multiline description (#3873)

apps/nextjs/src/app/[locale]/manage/apps/page.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
@@ -98,7 +99,12 @@ const AppCard = async ({ app }: AppCardProps) => {
             </Text>
             {app.description && (
               <Text size="sm" c="gray.6" lineClamp={4}>
-                {app.description}
+                {app.description.split("\n").map((line, index) => (
+                  <Fragment key={index}>
+                    {line}
+                    <br />
+                  </Fragment>
+                ))}
               </Text>
             )}
             {app.href && (

packages/forms-collection/src/new-app/_form.tsx

@@ -97,7 +97,13 @@ export const AppForm = ({
       <Stack>
         <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
         <IconPicker {...form.getInputProps("iconUrl")} />
-        <Textarea {...form.getInputProps("description")} label={t("app.field.description.label")} />
+        <Textarea
+          {...form.getInputProps("description")}
+          label={t("app.field.description.label")}
+          autosize
+          minRows={2}
+          resize="vertical"
+        />
         <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
 
         <Checkbox

packages/widgets/src/app/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { Suspense } from "react";
+import { Fragment, Suspense } from "react";
 import { Flex, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconLoader } from "@tabler/icons-react";
 import combineClasses from "clsx";
@@ -65,7 +65,12 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
       enabled={Boolean(app.href) && !isEditMode}
     >
       <Tooltip.Floating
-        label={app.description}
+        label={app.description?.split("\n").map((line, index) => (
+          <Fragment key={index}>
+            {line}
+            <br />
+          </Fragment>
+        ))}
         position="right-start"
         multiline
         disabled={!options.showDescriptionTooltip || !app.description}