feat: modernize dashboard widgets

packages/widgets/src/app/component.tsx

@@ -19,7 +19,7 @@ import classes from "./app.module.css";
 import { PingDot } from "./ping/ping-dot";
 import { PingIndicator } from "./ping/ping-indicator";
 
-export default function AppWidget({ options, isEditMode, height, width }: WidgetComponentProps<"app">) {
+export default function AppWidget({ options, isEditMode, height, width, displayMode }: WidgetComponentProps<"app">) {
   const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
@@ -51,6 +51,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
   if (!app) return <WidgetEmptyState />;
 
   const isTiny = height < 100 || width < 100;
+  const isAdvanced = displayMode === "advanced";
   const isColumnLayout = options.layout.startsWith("column");
 
   return (
@@ -83,7 +84,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
           onContextMenu={isEditMode ? (e) => e.preventDefault() : undefined}
         >
           <Stack gap={0}>
-            {options.showTitle && (
+            {(options.showTitle || isAdvanced) && (
               <Text
                 className="app-title"
                 fw={700}
@@ -93,13 +94,13 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
                 {app.name}
               </Text>
             )}
-            {options.descriptionDisplayMode === "normal" && (
+            {(options.descriptionDisplayMode === "normal" || isAdvanced) && (
               <Text
                 className="app-description"
                 size={isTiny ? rem(8) : "sm"}
                 ta={isColumnLayout ? "center" : undefined}
                 c="dimmed"
-                lineClamp={4}
+                lineClamp={isAdvanced ? 10 : Math.max(1, Math.floor((height - 48) / 18))}
               >
                 {app.description?.split("\n").map((line, index) => (
                   <Fragment key={index}>
@@ -109,6 +110,11 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
                 ))}
               </Text>
             )}
+            {isAdvanced && app.href && (
+              <Text size="xs" c="dimmed" lineClamp={1}>
+                {getDisplayHost(app.href)}
+              </Text>
+            )}
           </Stack>
           <MaskedOrNormalImage
             imageUrl={app.iconUrl}
@@ -119,7 +125,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
               height: "100%",
               width: "100%",
               minWidth: "20%",
-              maxWidth: isColumnLayout ? undefined : "50%",
+              maxWidth: isColumnLayout ? undefined : isTiny ? "38%" : "50%",
             }}
           />
         </Flex>
@@ -154,3 +160,11 @@ const AppLink = ({ href, openInNewTab, enabled, children }: PropsWithChildren<Ap
   ) : (
     children
   );
+
+const getDisplayHost = (href: string) => {
+  try {
+    return new URL(href).host;
+  } catch {
+    return href;
+  }
+};