feat: quick add app modal (#2248)

packages/forms-collection/src/new-app/_app-new-form.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+import type { z } from "zod";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { validation } from "@homarr/validation";
+
+import { AppForm } from "./_form";
+
+export const AppNewForm = ({
+  showCreateAnother,
+  showBackToOverview,
+}: {
+  showCreateAnother: boolean;
+  showBackToOverview: boolean;
+}) => {
+  const tScoped = useScopedI18n("app.page.create.notification");
+  const t = useI18n();
+  const router = useRouter();
+
+  const { mutate, isPending } = clientApi.app.create.useMutation({
+    onError: () => {
+      showErrorNotification({
+        title: tScoped("error.title"),
+        message: tScoped("error.message"),
+      });
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (values: z.infer<typeof validation.app.manage>, redirect: boolean, afterSuccess?: () => void) => {
+      mutate(values, {
+        onSuccess() {
+          showSuccessNotification({
+            title: tScoped("success.title"),
+            message: tScoped("success.message"),
+          });
+          afterSuccess?.();
+
+          if (!redirect) {
+            return;
+          }
+          void revalidatePathActionAsync("/manage/apps").then(() => {
+            router.push("/manage/apps");
+          });
+        },
+      });
+    },
+    [mutate, router, tScoped],
+  );
+
+  return (
+    <AppForm
+      buttonLabels={{
+        submit: t("common.action.create"),
+        submitAndCreateAnother: showCreateAnother ? t("common.action.createAnother") : undefined,
+      }}
+      showBackToOverview={showBackToOverview}
+      handleSubmit={handleSubmit}
+      isPending={isPending}
+    />
+  );
+};

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

@@ -0,0 +1,89 @@
+"use client";
+
+import { useRef } from "react";
+import Link from "next/link";
+import { Button, Group, Stack, Textarea, TextInput } from "@mantine/core";
+import type { z } from "zod";
+
+import { useZodForm } from "@homarr/form";
+import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
+
+import { IconPicker } from "../icon-picker/icon-picker";
+
+type FormType = z.infer<typeof validation.app.manage>;
+
+interface AppFormProps {
+  showBackToOverview: boolean;
+  buttonLabels: {
+    submit: string;
+    submitAndCreateAnother?: string;
+  };
+  initialValues?: FormType;
+  handleSubmit: (values: FormType, redirect: boolean, afterSuccess?: () => void) => void;
+  isPending: boolean;
+}
+
+export const AppForm = ({
+  buttonLabels,
+  showBackToOverview,
+  handleSubmit: originalHandleSubmit,
+  initialValues,
+  isPending,
+}: AppFormProps) => {
+  const t = useI18n();
+
+  const form = useZodForm(validation.app.manage, {
+    initialValues: {
+      name: initialValues?.name ?? "",
+      description: initialValues?.description ?? "",
+      iconUrl: initialValues?.iconUrl ?? "",
+      href: initialValues?.href ?? "",
+    },
+  });
+
+  const shouldCreateAnother = useRef(false);
+  const handleSubmit = (values: FormType) => {
+    const redirect = !shouldCreateAnother.current;
+    const afterSuccess = shouldCreateAnother.current
+      ? () => {
+          form.reset();
+          shouldCreateAnother.current = false;
+        }
+      : undefined;
+    originalHandleSubmit(values, redirect, afterSuccess);
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <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")} />
+        <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
+
+        <Group justify="end">
+          {showBackToOverview && (
+            <Button variant="default" component={Link} href="/manage/apps">
+              {t("common.action.backToOverview")}
+            </Button>
+          )}
+          {buttonLabels.submitAndCreateAnother && (
+            <Button
+              type="submit"
+              onClick={() => {
+                shouldCreateAnother.current = true;
+              }}
+              loading={isPending}
+            >
+              {buttonLabels.submitAndCreateAnother}
+            </Button>
+          )}
+          <Button type="submit" loading={isPending}>
+            {buttonLabels.submit}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};