Replace entire codebase with homarr-labs/homarr

packages/forms-collection/eslint.config.js

@@ -0,0 +1,4 @@
+import baseConfig from "@homarr/eslint-config/base";
+
+/** @type {import('typescript-eslint').Config} */
+export default [...baseConfig];

packages/forms-collection/index.ts

@@ -0,0 +1 @@
+export * from "./src";

packages/forms-collection/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@homarr/forms-collection",
+  "version": "0.1.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@homarr/prettier-config",
+  "dependencies": {
+    "@homarr/api": "workspace:^0.1.0",
+    "@homarr/auth": "workspace:^0.1.0",
+    "@homarr/common": "workspace:^0.1.0",
+    "@homarr/form": "workspace:^0.1.0",
+    "@homarr/notifications": "workspace:^0.1.0",
+    "@homarr/translation": "workspace:^0.1.0",
+    "@homarr/ui": "workspace:^0.1.0",
+    "@homarr/validation": "workspace:^0.1.0",
+    "@mantine/core": "^8.3.10",
+    "react": "19.2.3",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "@homarr/eslint-config": "workspace:^0.2.0",
+    "@homarr/prettier-config": "workspace:^0.1.0",
+    "@homarr/tsconfig": "workspace:^0.1.0",
+    "eslint": "^9.39.2",
+    "typescript": "^5.9.3"
+  }
+}

packages/forms-collection/src/icon-picker/icon-picker.module.css

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

packages/forms-collection/src/icon-picker/icon-picker.tsx

@@ -0,0 +1,206 @@
+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 "../upload-media/upload-media";
+import classes from "./icon-picker.module.css";
+
+interface IconPickerProps {
+  value?: string;
+  onChange: (iconUrl: string) => void;
+  error?: string | null;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+
+  label?: string;
+  placeholder?: string;
+  withAsterisk?: boolean;
+}
+
+export const IconPicker = ({
+  value: propsValue,
+  onChange,
+  error,
+  onFocus,
+  onBlur,
+  withAsterisk = true,
+  label,
+  placeholder,
+}: 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 ? <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={withAsterisk}
+            error={error}
+            label={label ?? tCommon("iconPicker.label")}
+            placeholder={placeholder ?? tCommon("iconPicker.header", { countIcons: String(data?.countIcons ?? 0) })}
+          />
+          {session?.user.permissions.includes("media-upload") && (
+            <UploadMedia
+              onSuccess={(medias) => {
+                const first = medias.at(0);
+                if (!first) return;
+
+                startTransition(() => {
+                  setValue(first.url);
+                  setPreviewUrl(first.url);
+                  setSearch(first.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>
+  );
+};

packages/forms-collection/src/index.tsx

@@ -0,0 +1,7 @@
+export * from "./new-app/_app-new-form";
+export * from "./new-app/_form";
+
+export * from "./icon-picker/icon-picker";
+export * from "./new-app/icon-matcher";
+
+export * from "./upload-media/upload-media";

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/v4";
+
+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 { appManageSchema } from "@homarr/validation/app";
+
+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 appManageSchema>, 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,145 @@
+"use client";
+
+import type { ChangeEventHandler } from "react";
+import { useEffect, useRef } from "react";
+import { Button, Checkbox, Collapse, Group, Stack, Textarea, TextInput } from "@mantine/core";
+import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
+import type { z } from "zod/v4";
+
+import { clientApi } from "@homarr/api/client";
+import { useZodForm } from "@homarr/form";
+import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
+import { appManageSchema } from "@homarr/validation/app";
+
+import { IconPicker } from "../icon-picker/icon-picker";
+import { findBestIconMatch } from "./icon-matcher";
+
+type FormType = z.infer<typeof appManageSchema>;
+
+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(appManageSchema, {
+    initialValues: {
+      name: initialValues?.name ?? "",
+      description: initialValues?.description ?? "",
+      iconUrl: initialValues?.iconUrl ?? "",
+      href: initialValues?.href ?? "",
+      pingUrl: initialValues?.pingUrl ?? "",
+    },
+  });
+
+  // Debounce the name value with 200ms delay
+  const [debouncedName] = useDebouncedValue(form.values.name, 200);
+
+  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);
+  };
+
+  const [opened, { open, close }] = useDisclosure((initialValues?.pingUrl?.length ?? 0) > 0);
+
+  const handleClickDifferentUrlPing: ChangeEventHandler<HTMLInputElement> = () => {
+    if (!opened) {
+      open();
+    } else {
+      close();
+      form.setFieldValue("pingUrl", "");
+    }
+  };
+
+  // Auto-select icon based on app name with debounced search
+  const { data: iconsData } = clientApi.icon.findIcons.useQuery(
+    {
+      searchText: debouncedName,
+    },
+    {
+      enabled: debouncedName.length > 3,
+    },
+  );
+
+  useEffect(() => {
+    if (debouncedName && !form.values.iconUrl && iconsData?.icons) {
+      const bestMatch = findBestIconMatch(debouncedName, iconsData.icons);
+      if (bestMatch) {
+        form.setFieldValue("iconUrl", bestMatch);
+      }
+    }
+  }, [debouncedName, iconsData]);
+
+  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")}
+          autosize
+          minRows={2}
+          resize="vertical"
+        />
+        <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
+
+        <Checkbox
+          checked={opened}
+          onChange={handleClickDifferentUrlPing}
+          label={t("app.field.useDifferentUrlForPing.checkbox.label")}
+          description={t("app.field.useDifferentUrlForPing.checkbox.description")}
+          mt="md"
+        />
+
+        <Collapse in={opened}>
+          <TextInput {...form.getInputProps("pingUrl")} />
+        </Collapse>
+
+        <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>
+  );
+};

packages/forms-collection/src/new-app/icon-matcher.ts

@@ -0,0 +1,30 @@
+import type { inferRouterOutputs } from "@trpc/server";
+
+import type { AppRouter } from "@homarr/api";
+
+type RouterOutput = inferRouterOutputs<AppRouter>;
+type IconGroupsOutput = RouterOutput["icon"]["findIcons"]["icons"];
+
+export const findBestIconMatch = (searchTerm: string, iconGroups: IconGroupsOutput): string | null => {
+  const nameLower = searchTerm.toLowerCase();
+  const allIcons = iconGroups.flatMap((group) => group.icons);
+
+  const getIconPriority = (iconUrl: string) => {
+    const fileName = iconUrl.toLowerCase().split("/").pop()?.split(".")[0];
+    if (!fileName) return -1;
+
+    const isSvg = iconUrl.endsWith(".svg");
+    const isExactMatch = fileName === nameLower;
+
+    if (isExactMatch) return isSvg ? 0 : 1;
+    if (fileName.includes(nameLower)) return isSvg ? 2 : 3;
+    return -1;
+  };
+
+  for (let priority = 0; priority <= 3; priority++) {
+    const match = allIcons.find((icon) => getIconPriority(icon.url) === priority);
+    if (match) return match.url;
+  }
+
+  return null;
+};

packages/forms-collection/src/upload-media/upload-media.tsx

@@ -0,0 +1,57 @@
+import type { JSX } from "react";
+import { FileButton } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import type { MaybePromise } from "@homarr/common/types";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { supportedMediaUploadFormats } from "@homarr/validation/media";
+
+interface UploadMediaProps {
+  children: (props: { onClick: () => void; loading: boolean }) => JSX.Element;
+  multiple?: boolean;
+  onSettled?: () => MaybePromise<void>;
+  onSuccess?: (media: { id: string; url: string }[]) => MaybePromise<void>;
+}
+
+export const UploadMedia = ({ children, onSettled, onSuccess, multiple = false }: UploadMediaProps) => {
+  const t = useI18n();
+  const { mutateAsync, isPending } = clientApi.media.uploadMedia.useMutation({
+    async onSuccess(mediaIds) {
+      await onSuccess?.(
+        mediaIds.map((id) => ({
+          id,
+          url: `/api/user-medias/${id}`,
+        })),
+      );
+    },
+    async onSettled() {
+      await onSettled?.();
+    },
+  });
+
+  const handleFileUploadAsync = async (files: File[] | File | null) => {
+    if (!files || (Array.isArray(files) && files.length === 0)) return;
+    const filesArray: File[] = Array.isArray(files) ? files : [files];
+    const formData = new FormData();
+    filesArray.forEach((file) => formData.append("files", file));
+    await mutateAsync(formData, {
+      onSuccess() {
+        showSuccessNotification({
+          message: t("media.action.upload.notification.success.message"),
+        });
+      },
+      onError() {
+        showErrorNotification({
+          message: t("media.action.upload.notification.error.message"),
+        });
+      },
+    });
+  };
+
+  return (
+    <FileButton onChange={handleFileUploadAsync} accept={supportedMediaUploadFormats.join(",")} multiple={multiple}>
+      {({ onClick }) => children({ onClick, loading: isPending })}
+    </FileButton>
+  );
+};

packages/forms-collection/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@homarr/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src", "index.tsx"],
+  "exclude": ["node_modules"]
+}