feat: quick add app modal (#2248)

packages/widgets/src/_inputs/widget-app-input.tsx

@@ -3,11 +3,13 @@
 import { memo, useMemo } from "react";
 import Link from "next/link";
 import type { SelectProps } from "@mantine/core";
-import { Anchor, Group, Loader, Select, Text } from "@mantine/core";
-import { IconCheck } from "@tabler/icons-react";
+import { Anchor, Button, Group, Loader, Select, SimpleGrid, Text } from "@mantine/core";
+import { IconCheck, IconRocket } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useModalAction } from "@homarr/modals";
+import { QuickAddAppModal } from "@homarr/modals-collection";
 import { useI18n } from "@homarr/translation/client";
 
 import type { CommonWidgetInputProps } from "./common";
@@ -18,7 +20,9 @@ export const WidgetAppInput = ({ property, kind }: CommonWidgetInputProps<"app">
   const t = useI18n();
   const tInput = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
-  const { data: apps, isPending } = clientApi.app.selectable.useQuery();
+  const { data: apps, isPending, refetch } = clientApi.app.selectable.useQuery();
+
+  const { openModal } = useModalAction(QuickAddAppModal);
 
   const currentApp = useMemo(
     () => apps?.find((app) => app.id === form.values.options.appId),
@@ -26,34 +30,53 @@ export const WidgetAppInput = ({ property, kind }: CommonWidgetInputProps<"app">
   );
 
   return (
-    <Select
-      label={tInput("label")}
-      searchable
-      limit={10}
-      leftSection={<MemoizedLeftSection isPending={isPending} currentApp={currentApp} />}
-      nothingFoundMessage={t("widget.common.app.noData")}
-      renderOption={renderSelectOption}
-      data={
-        apps?.map((app) => ({
-          label: app.name,
-          value: app.id,
-          iconUrl: app.iconUrl,
-        })) ?? []
-      }
-      inputWrapperOrder={["label", "input", "description", "error"]}
-      description={
-        <Text size="xs">
-          {t.rich("widget.common.app.description", {
-            here: () => (
-              <Anchor size="xs" component={Link} target="_blank" href="/manage/apps/new">
-                {t("common.here")}
-              </Anchor>
-            ),
-          })}
-        </Text>
-      }
-      {...form.getInputProps(`options.${property}`)}
-    />
+    <SimpleGrid cols={{ base: 1, md: 2 }} spacing={{ base: "md" }} style={{ alignItems: "center" }}>
+      <Select
+        label={tInput("label")}
+        searchable
+        limit={10}
+        leftSection={<MemoizedLeftSection isPending={isPending} currentApp={currentApp} />}
+        nothingFoundMessage={t("widget.common.app.noData")}
+        renderOption={renderSelectOption}
+        data={
+          apps?.map((app) => ({
+            label: app.name,
+            value: app.id,
+            iconUrl: app.iconUrl,
+          })) ?? []
+        }
+        inputWrapperOrder={["label", "input", "description", "error"]}
+        description={
+          <Text size="xs">
+            {t.rich("widget.common.app.description", {
+              here: () => (
+                <Anchor size="xs" component={Link} target="_blank" href="/manage/apps/new">
+                  {t("common.here")}
+                </Anchor>
+              ),
+            })}
+          </Text>
+        }
+        styles={{ root: { flex: "1" } }}
+        {...form.getInputProps(`options.${property}`)}
+      />
+      <Button
+        mt={3}
+        rightSection={<IconRocket size="1.5rem" />}
+        variant="default"
+        onClick={() =>
+          openModal({
+            // eslint-disable-next-line no-restricted-syntax
+            async onClose(createdAppId) {
+              await refetch();
+              form.setFieldValue(`options.${property}`, createdAppId);
+            },
+          })
+        }
+      >
+        {t("widget.common.app.quickCreate")}
+      </Button>
+    </SimpleGrid>
   );
 };