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

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