feat: quick add app modal (#2248)

apps/nextjs/src/app/[locale]/manage/apps/_form.tsx

@@ -1,85 +0,0 @@
-"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 "~/components/icons/picker/icon-picker";
-
-type FormType = z.infer<typeof validation.app.manage>;
-
-interface AppFormProps {
-  buttonLabels: {
-    submit: string;
-    submitAndCreateAnother?: string;
-  };
-  initialValues?: FormType;
-  handleSubmit: (values: FormType, redirect: boolean, afterSuccess?: () => void) => void;
-  isPending: boolean;
-}
-
-export const AppForm = ({
-  buttonLabels,
-  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">
-          <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>
-  );
-};

apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx

@@ -7,12 +7,11 @@ import type { z } from "zod";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
+import { AppForm } from "@homarr/forms-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { validation } from "@homarr/validation";
 
-import { AppForm } from "../../_form";
-
 interface AppEditFormProps {
   app: RouterOutputs["app"]["byId"];
 }
@@ -58,6 +57,7 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
       initialValues={app}
       handleSubmit={handleSubmit}
       isPending={isPending}
+      showBackToOverview
     />
   );
 };

apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx

@@ -1,61 +0,0 @@
-"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 = () => {
-  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: t("common.action.createAnother"),
-      }}
-      handleSubmit={handleSubmit}
-      isPending={isPending}
-    />
-  );
-};

apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx

@@ -2,10 +2,10 @@ import { notFound } from "next/navigation";
 import { Container, Stack, Title } from "@mantine/core";
 
 import { auth } from "@homarr/auth/next";
+import { AppNewForm } from "@homarr/forms-collection";
 import { getI18n } from "@homarr/translation/server";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { AppNewForm } from "./_app-new-form";
 
 export default async function AppNewPage() {
   const session = await auth();
@@ -22,7 +22,7 @@ export default async function AppNewPage() {
       <Container>
         <Stack>
           <Title>{t("app.page.create.title")}</Title>
-          <AppNewForm />
+          <AppNewForm showBackToOverview showCreateAnother />
         </Stack>
       </Container>
     </>

apps/nextjs/src/app/[locale]/manage/medias/_actions/upload-media.tsx

@@ -1,15 +1,11 @@
 "use client";
 
-import type { JSX } from "react";
-import { Button, FileButton } from "@mantine/core";
+import { Button } from "@mantine/core";
 import { IconUpload } from "@tabler/icons-react";
 
-import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { MaybePromise } from "@homarr/common/types";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { UploadMedia } from "@homarr/forms-collection";
 import { useI18n } from "@homarr/translation/client";
-import { supportedMediaUploadFormats } from "@homarr/validation";
 
 export const UploadMediaButton = () => {
   const t = useI18n();
@@ -27,45 +23,3 @@ export const UploadMediaButton = () => {
     </UploadMedia>
   );
 };
-
-interface UploadMediaProps {
-  children: (props: { onClick: () => void; loading: boolean }) => JSX.Element;
-  onSettled?: () => MaybePromise<void>;
-  onSuccess?: (media: { id: string; url: string }) => MaybePromise<void>;
-}
-
-export const UploadMedia = ({ children, onSettled, onSuccess }: UploadMediaProps) => {
-  const t = useI18n();
-  const { mutateAsync, isPending } = clientApi.media.uploadMedia.useMutation();
-
-  const handleFileUploadAsync = async (file: File | null) => {
-    if (!file) return;
-    const formData = new FormData();
-    formData.append("file", file);
-    await mutateAsync(formData, {
-      async onSuccess(mediaId) {
-        showSuccessNotification({
-          message: t("media.action.upload.notification.success.message"),
-        });
-        await onSuccess?.({
-          id: mediaId,
-          url: `/api/user-medias/${mediaId}`,
-        });
-      },
-      onError() {
-        showErrorNotification({
-          message: t("media.action.upload.notification.error.message"),
-        });
-      },
-      async onSettled() {
-        await onSettled?.();
-      },
-    });
-  };
-
-  return (
-    <FileButton onChange={handleFileUploadAsync} accept={supportedMediaUploadFormats.join(",")}>
-      {({ onClick }) => children({ onClick, loading: isPending })}
-    </FileButton>
-  );
-};

apps/nextjs/src/app/[locale]/manage/search-engines/_form.tsx

@@ -9,12 +9,11 @@ import type { z } from "zod";
 import { clientApi } from "@homarr/api/client";
 import { searchEngineTypes } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
+import { IconPicker } from "@homarr/forms-collection";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
-import { IconPicker } from "~/components/icons/picker/icon-picker";
-
 type FormType = z.infer<typeof validation.searchEngine.manage>;
 
 interface SearchEngineFormProps {

apps/nextjs/src/components/icons/picker/icon-picker.module.css

@@ -1,3 +0,0 @@
-[data-combobox-selected="true"] .iconCard {
-  border-color: var(--mantine-primary-color-6);
-}

apps/nextjs/src/components/icons/picker/icon-picker.tsx

@@ -1,195 +0,0 @@
-import type { FocusEventHandler } from "react";
-import { startTransition } from "react";
-import {
-  ActionIcon,
-  Box,
-  Card,
-  Combobox,
-  Flex,
-  Group,
-  Image,
-  Indicator,
-  InputBase,
-  Paper,
-  Skeleton,
-  Stack,
-  Text,
-  UnstyledButton,
-  useCombobox,
-} from "@mantine/core";
-import { useDebouncedValue, useUncontrolled } from "@mantine/hooks";
-import { IconUpload } from "@tabler/icons-react";
-
-import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import { UploadMedia } from "~/app/[locale]/manage/medias/_actions/upload-media";
-import classes from "./icon-picker.module.css";
-
-interface IconPickerProps {
-  value?: string;
-  onChange: (iconUrl: string) => void;
-  error?: string | null;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
-}
-
-export const IconPicker = ({ value: propsValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
-  const [value, setValue] = useUncontrolled({
-    value: propsValue,
-    onChange,
-  });
-  const [search, setSearch] = useUncontrolled({
-    value,
-    onChange: (value) => {
-      setValue(value);
-    },
-  });
-  const [previewUrl, setPreviewUrl] = useUncontrolled({
-    value: propsValue ?? null,
-  });
-  const { data: session } = useSession();
-
-  const tCommon = useScopedI18n("common");
-
-  const [debouncedSearch] = useDebouncedValue(search, 100);
-
-  // We use not useSuspenseQuery as it would cause an above Suspense boundary to trigger and so searching for something is bad UX.
-  const { data } = clientApi.icon.findIcons.useQuery({
-    searchText: debouncedSearch,
-  });
-
-  const combobox = useCombobox({
-    onDropdownClose: () => combobox.resetSelectedOption(),
-  });
-
-  const totalOptions = data?.icons.reduce((acc, group) => acc + group.icons.length, 0) ?? 0;
-  const groups = data?.icons.map((group) => {
-    const options = group.icons.map((item) => (
-      <Combobox.Option
-        key={item.id}
-        value={item.url}
-        p={0}
-        h="calc(2*var(--mantine-spacing-sm)+25px)"
-        w="calc(2*var(--mantine-spacing-sm)+25px)"
-      >
-        <UnstyledButton
-          onClick={() => {
-            const value = item.url;
-            startTransition(() => {
-              setPreviewUrl(value);
-              setSearch(value);
-              setValue(value);
-              combobox.closeDropdown();
-            });
-          }}
-        >
-          <Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
-            <Card
-              p="sm"
-              pos="relative"
-              style={{
-                overflow: "visible",
-                cursor: "pointer",
-              }}
-              className={classes.iconCard}
-              withBorder
-            >
-              <Box w={25} h={25}>
-                <Image src={item.url} w={25} h={25} radius="md" />
-              </Box>
-            </Card>
-          </Indicator>
-        </UnstyledButton>
-      </Combobox.Option>
-    ));
-
-    return (
-      <Paper p="xs" key={group.slug} pt={2}>
-        <Text mb={8} size="sm" fw="bold">
-          {group.slug}
-        </Text>
-        <Flex gap={8} wrap={"wrap"}>
-          {options}
-        </Flex>
-      </Paper>
-    );
-  });
-
-  return (
-    <Combobox store={combobox} withinPortal>
-      <Combobox.Target>
-        <Group wrap="nowrap" gap="xs" w="100%" align="start">
-          <InputBase
-            flex={1}
-            rightSection={<Combobox.Chevron />}
-            leftSection={
-              previewUrl ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img src={previewUrl} alt="" style={{ width: 20, height: 20 }} />
-              ) : null
-            }
-            value={search}
-            onChange={(event) => {
-              combobox.openDropdown();
-              combobox.updateSelectedOptionIndex();
-              setSearch(event.currentTarget.value);
-              setValue(event.currentTarget.value);
-              setPreviewUrl(null);
-            }}
-            onClick={() => combobox.openDropdown()}
-            onFocus={(event) => {
-              onFocus?.(event);
-              combobox.openDropdown();
-            }}
-            onBlur={(event) => {
-              onBlur?.(event);
-              combobox.closeDropdown();
-              setPreviewUrl(value);
-              setSearch(value || "");
-            }}
-            rightSectionPointerEvents="none"
-            withAsterisk
-            error={error}
-            label={tCommon("iconPicker.label")}
-            placeholder={tCommon("iconPicker.header", { countIcons: data?.countIcons ?? 0 })}
-          />
-          {session?.user.permissions.includes("media-upload") && (
-            <UploadMedia
-              onSuccess={({ url }) => {
-                startTransition(() => {
-                  setValue(url);
-                  setPreviewUrl(url);
-                  setSearch(url);
-                });
-              }}
-            >
-              {({ onClick, loading }) => (
-                <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">
-                  <IconUpload size={16} stroke={1.5} />
-                </ActionIcon>
-              )}
-            </UploadMedia>
-          )}
-        </Group>
-      </Combobox.Target>
-
-      <Combobox.Dropdown>
-        <Combobox.Options mah={350} style={{ overflowY: "auto" }}>
-          {totalOptions > 0 ? (
-            <Stack gap={4}>{groups}</Stack>
-          ) : (
-            Array(15)
-              .fill(0)
-              .map((_, index: number) => (
-                <Combobox.Option value={`skeleton-${index}`} key={index} disabled>
-                  <Skeleton height={25} visible />
-                </Combobox.Option>
-              ))
-          )}
-        </Combobox.Options>
-      </Combobox.Dropdown>
-    </Combobox>
-  );
-};