feat(app-widget): add layout option (#3875)

packages/widgets/src/app/component.tsx

@@ -56,7 +56,8 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
     [app, options.openInNewTab],
   );
 
-  const tinyText = height < 100 || width < 100;
+  const isTiny = height < 100 || width < 100;
+  const isColumnLayout = options.layout.startsWith("column");
 
   return (
     <AppLink
@@ -77,15 +78,22 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
         styles={{ tooltip: { maxWidth: 300 } }}
       >
         <Flex
+          p={isTiny ? 4 : "sm"}
           className={combineClasses("app-flex-wrapper", app.name, app.id, app.href && classes.appWithUrl)}
           h="100%"
           w="100%"
-          direction="column"
+          direction={options.layout}
           justify="center"
           align="center"
+          gap={isColumnLayout ? 0 : "sm"}
         >
           {options.showTitle && (
-            <Text className="app-title" fw={700} size={tinyText ? "8px" : "sm"} ta="center">
+            <Text
+              className="app-title"
+              fw={700}
+              size={isTiny ? "8px" : "sm"}
+              ta={isColumnLayout ? "center" : undefined}
+            >
               {app.name}
             </Text>
           )}
@@ -97,6 +105,8 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
             style={{
               height: "100%",
               width: "100%",
+              minWidth: "20%",
+              maxWidth: isColumnLayout ? undefined : "50%",
             }}
           />
         </Flex>

packages/widgets/src/app/index.ts

@@ -1,4 +1,11 @@
-import { IconApps, IconDeviceDesktopX } from "@tabler/icons-react";
+import {
+  IconApps,
+  IconDeviceDesktopX,
+  IconLayoutBottombarExpand,
+  IconLayoutNavbarExpand,
+  IconLayoutSidebarLeftExpand,
+  IconLayoutSidebarRightExpand,
+} from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
@@ -12,6 +19,40 @@ export const { definition, componentLoader } = createWidgetDefinition("app", {
         openInNewTab: factory.switch({ defaultValue: true }),
         showTitle: factory.switch({ defaultValue: true }),
         showDescriptionTooltip: factory.switch({ defaultValue: false }),
+        layout: factory.select({
+          options: [
+            {
+              label(t) {
+                return t("widget.app.option.layout.option.column");
+              },
+              value: "column",
+              icon: IconLayoutNavbarExpand,
+            },
+            {
+              label(t) {
+                return t("widget.app.option.layout.option.column-reverse");
+              },
+              value: "column-reverse",
+              icon: IconLayoutBottombarExpand,
+            },
+            {
+              label(t) {
+                return t("widget.app.option.layout.option.row");
+              },
+              value: "row",
+              icon: IconLayoutSidebarLeftExpand,
+            },
+            {
+              label(t) {
+                return t("widget.app.option.layout.option.row-reverse");
+              },
+              value: "row-reverse",
+              icon: IconLayoutSidebarRightExpand,
+            },
+          ],
+          defaultValue: "column",
+          searchable: true,
+        }),
         pingEnabled: factory.switch({ defaultValue: settings.enableStatusByDefault }),
       }),
       {