fix(boards): add missing upload button for background in settings (#2853)

apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { Autocomplete, Button, Center, Grid, Group, Popover, Stack, Text } from "@mantine/core";
+import { startTransition } from "react";
+import { ActionIcon, Autocomplete, Button, Center, Grid, Group, Popover, Stack, Text } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
-import { IconPhotoOff } from "@tabler/icons-react";
+import { IconPhotoOff, IconUpload } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
+import { UploadMedia } from "@homarr/forms-collection";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
@@ -62,7 +64,9 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
       <Stack>
         <Grid>
           <Grid.Col span={12}>
+            <Group wrap="nowrap" gap="xs" w="100%" align="start">
               <Autocomplete
+                flex={1}
                 leftSection={
                   form.values.backgroundImageUrl &&
                   form.values.backgroundImageUrl.trim().length >= 2 && (
@@ -114,6 +118,22 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
                 ]}
                 {...form.getInputProps("backgroundImageUrl")}
               />
+              {session?.user.permissions.includes("media-upload") && (
+                <UploadMedia
+                  onSuccess={({ url }) =>
+                    startTransition(() => {
+                      form.setFieldValue("backgroundImageUrl", url);
+                    })
+                  }
+                >
+                  {({ onClick, loading }) => (
+                    <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">
+                      <IconUpload size={16} stroke={1.5} />
+                    </ActionIcon>
+                  )}
+                </UploadMedia>
+              )}
+            </Group>
           </Grid.Col>
           <Grid.Col span={12}>
             <SelectWithDescriptionBadge