✨ Bookmark widget (#890)

* 🚧 Bookmark widget

* ✨ Add input type

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

* ✨ Add content display and input fields

* 🐛 Fix delete button updating to invalid schema

* 🌐 Add translations for options

* ✨ Add field for image

* ♻️ Refactor IconSelector and add forward ref

* 🦺 Add form validation

* 🦺 Add validation for icon url and fix state for icon picker

* 🌐 PR feedback

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -15,13 +15,13 @@ import { useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { AppType } from '../../../../types/app';
+import { DebouncedImage } from '../../../IconSelector/DebouncedImage';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { AppearanceTab } from './Tabs/AppereanceTab/AppereanceTab';
 import { BehaviourTab } from './Tabs/BehaviourTab/BehaviourTab';
 import { GeneralTab } from './Tabs/GeneralTab/GeneralTab';
 import { IntegrationTab } from './Tabs/IntegrationTab/IntegrationTab';
 import { NetworkTab } from './Tabs/NetworkTab/NetworkTab';
-import { DebouncedAppIcon } from './Tabs/Shared/DebouncedAppIcon';
 import { EditAppModalTab } from './Tabs/type';
 
 const appUrlRegex =
@@ -138,7 +138,7 @@ export const EditAppModal = ({
           </Alert>
         ))}
       <Stack spacing={0} align="center" my="lg">
-        <DebouncedAppIcon form={form} width={120} height={120} />
+        <DebouncedImage src={form.values.appearance.iconUrl} width={120} height={120} />
 
         <Text align="center" weight="bold" size="lg" mt="md">
           {form.values.name ?? 'New App'}

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx

@@ -1,10 +1,9 @@
 import { Flex, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
-import { useEffect } from 'react';
-import { useGetDashboardIcons } from '../../../../../../hooks/icons/useGetDashboardIcons';
+import { useEffect, useRef } from 'react';
 import { AppType } from '../../../../../../types/app';
-import { IconSelector } from './IconSelector';
+import { IconSelector } from '../../../../../IconSelector/IconSelector';
 
 interface AppearanceTabProps {
   form: UseFormReturnType<AppType, (values: AppType) => AppType>;
@@ -17,8 +16,7 @@ export const AppearanceTab = ({
   disallowAppNameProgagation,
   allowAppNamePropagation,
 }: AppearanceTabProps) => {
-  const { data, isLoading } = useGetDashboardIcons();
-
+  const iconSelectorRef = useRef();
   const [debouncedValue] = useDebouncedValue(form.values.name, 500);
 
   useEffect(() => {
@@ -26,26 +24,28 @@ export const AppearanceTab = ({
       return;
     }
 
-    const matchingDebouncedIcon = data
-      ?.flatMap((x) => x.entries)
-      .find((x) => replaceCharacters(x.name.split('.')[0]) === replaceCharacters(debouncedValue));
-
-    if (!matchingDebouncedIcon) {
+    if (!iconSelectorRef.current) {
       return;
     }
 
-    form.setFieldValue('appearance.iconUrl', matchingDebouncedIcon.url);
+    const currentRef = iconSelectorRef.current as {
+      chooseFirstOrDefault: (debouncedValue: string) => void;
+    };
+
+    currentRef.chooseFirstOrDefault(debouncedValue);
   }, [debouncedValue]);
 
   return (
     <Tabs.Panel value="appearance" pt="lg">
       <Flex gap={5}>
         <IconSelector
-          form={form}
-          data={data}
-          isLoading={isLoading}
-          allowAppNamePropagation={allowAppNamePropagation}
-          disallowAppNameProgagation={disallowAppNameProgagation}
+          defaultValue={form.values.appearance.iconUrl}
+          onChange={(value) => {
+            form.setFieldValue('appearance.iconUrl', value);
+            disallowAppNameProgagation();
+          }}
+          value={form.values.appearance.iconUrl}
+          ref={iconSelectorRef}
         />
       </Flex>
     </Tabs.Panel>

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector.tsx

@@ -1,164 +0,0 @@
-import {
-  Autocomplete,
-  Box,
-  CloseButton,
-  createStyles,
-  Group,
-  Image,
-  Loader,
-  ScrollArea,
-  SelectItemProps,
-  Stack,
-  Text,
-  Title,
-} from '@mantine/core';
-import { UseFormReturnType } from '@mantine/form';
-import { IconSearch } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-import { forwardRef } from 'react';
-import { humanFileSize } from '../../../../../../tools/humanFileSize';
-import { NormalizedIconRepositoryResult } from '../../../../../../tools/server/images/abstract-icons-repository';
-import { AppType } from '../../../../../../types/app';
-import { DebouncedAppIcon } from '../Shared/DebouncedAppIcon';
-
-interface IconSelectorProps {
-  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
-  data: NormalizedIconRepositoryResult[] | undefined;
-  isLoading: boolean;
-  disallowAppNameProgagation: () => void;
-  allowAppNamePropagation: boolean;
-}
-
-export const IconSelector = ({
-  form,
-  data,
-  isLoading,
-  allowAppNamePropagation,
-  disallowAppNameProgagation,
-}: IconSelectorProps) => {
-  const { t } = useTranslation('layout/modals/add-app');
-  const { classes } = useStyles();
-
-  const a =
-    data === undefined
-      ? []
-      : data.flatMap((repository) =>
-          repository.entries.map((entry) => ({
-            url: entry.url,
-            label: entry.name,
-            size: entry.size,
-            value: entry.url,
-            group: repository.name,
-            copyright: repository.copyright,
-          }))
-        );
-
-  return (
-    <Stack w="100%">
-      <Autocomplete
-        nothingFound={
-          <Stack align="center" spacing="xs" my="lg">
-            <IconSearch />
-            <Title order={6} align="center">
-              {t('appearance.icon.autocomplete.title')}
-            </Title>
-            <Text align="center" maw={350}>
-              {t('appearance.icon.autocomplete.text')}
-            </Text>
-          </Stack>
-        }
-        icon={<DebouncedAppIcon form={form} width={20} height={20} />}
-        rightSection={
-          form.values.appearance.iconUrl.length > 0 ? (
-            <CloseButton onClick={() => form.setFieldValue('appearance.iconUrl', '')} />
-          ) : null
-        }
-        itemComponent={AutoCompleteItem}
-        className={classes.textInput}
-        data={a}
-        limit={25}
-        label={t('appearance.icon.label')}
-        description={t('appearance.icon.description', {
-          suggestionsCount: data?.reduce((a, b) => a + b.count, 0) ?? 0,
-        })}
-        filter={(search, item) =>
-          item.value
-            .toLowerCase()
-            .replaceAll('_', '')
-            .replaceAll(' ', '-')
-            .includes(search.toLowerCase().replaceAll('_', '').replaceAll(' ', '-'))
-        }
-        variant="default"
-        withAsterisk
-        dropdownComponent={(props: any) => <ScrollArea {...props} mah={250} />}
-        dropdownPosition="bottom"
-        required
-        onChange={(event) => {
-          if (allowAppNamePropagation) {
-            disallowAppNameProgagation();
-          }
-          form.setFieldValue('appearance.iconUrl', event);
-        }}
-        value={form.values.appearance.iconUrl}
-      />
-      {(!data || isLoading) && (
-        <Group>
-          <Loader variant="oval" size="sm" />
-          <Stack spacing={0}>
-            <Text size="xs" weight="bold">
-              {t('appearance.icon.noItems.title')}
-            </Text>
-            <Text color="dimmed" size="xs">
-              {t('appearance.icon.noItems.text')}
-            </Text>
-          </Stack>
-        </Group>
-      )}
-    </Stack>
-  );
-};
-
-const useStyles = createStyles(() => ({
-  textInput: {
-    flexGrow: 1,
-  },
-}));
-
-const AutoCompleteItem = forwardRef<HTMLDivElement, ItemProps>(
-  ({ label, size, copyright, url, ...others }: ItemProps, ref) => (
-    <div ref={ref} {...others}>
-      <Group noWrap>
-        <Box
-          sx={(theme) => ({
-            backgroundColor:
-              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
-            borderRadius: theme.radius.md,
-          })}
-          p={2}
-        >
-          <Image src={url} width={30} height={30} fit="contain" />
-        </Box>
-        <Stack spacing={0}>
-          <Text>{label}</Text>
-          <Group>
-            <Text color="dimmed" size="xs">
-              {humanFileSize(size, false)}
-            </Text>
-            {copyright && (
-              <Text color="dimmed" size="xs">
-                © {copyright}
-              </Text>
-            )}
-          </Group>
-        </Stack>
-      </Group>
-    </div>
-  )
-);
-
-interface ItemProps extends SelectItemProps {
-  url: string;
-  group: string;
-  size: number;
-  copyright: string | undefined;
-}

src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx

@@ -0,0 +1,138 @@
+import { Collapse, Flex, Stack, Text, createStyles } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconChevronDown, IconGripVertical } from '@tabler/icons';
+import { Reorder, useDragControls } from 'framer-motion';
+import { FC, useEffect, useRef } from 'react';
+import { IDraggableEditableListInputValue } from '../../../../../widgets/widgets';
+
+interface DraggableListProps {
+  items: {
+    data: { id: string } & any;
+  }[];
+  value: IDraggableEditableListInputValue<any>['defaultValue'];
+  onChange: (value: IDraggableEditableListInputValue<any>['defaultValue']) => void;
+  options: IDraggableEditableListInputValue<any>;
+}
+
+export const DraggableList = ({ items, value, onChange, options }: DraggableListProps) => (
+  <div>
+    <Reorder.Group
+      axis="y"
+      values={items.map((x) => x.data.id)}
+      onReorder={(order) => onChange(order.map((id) => value.find((v) => v.id === id)!))}
+      as="div"
+    >
+      {items.map(({ data }) => (
+        <ListItem key={data.id} item={data} label={options.getLabel(data)}>
+          <options.itemComponent
+            data={data}
+            onChange={(data: any) => {
+              onChange(
+                items.map((item) => {
+                  if (item.data.id === data.id) return data;
+                  return item.data;
+                })
+              );
+            }}
+            delete={() => {
+              onChange(items.filter((item) => item.data.id !== data.id).map((item) => item.data));
+            }}
+          />
+        </ListItem>
+      ))}
+    </Reorder.Group>
+  </div>
+);
+
+const ListItem: FC<{
+  item: any;
+  label: string | JSX.Element;
+}> = ({ item, label, children }) => {
+  const [opened, handlers] = useDisclosure(false);
+  const { classes, cx } = useStyles();
+  const controls = useDragControls();
+
+  // Workaround for mobile drag controls not working
+  // https://github.com/framer/motion/issues/1597#issuecomment-1235026724
+  const dragRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const touchHandler: EventListener = (e) => e.preventDefault();
+
+    const dragItem = dragRef.current;
+
+    if (dragItem) {
+      dragItem.addEventListener('touchstart', touchHandler, { passive: false });
+
+      return () => {
+        dragItem.removeEventListener('touchstart', touchHandler);
+      };
+    }
+
+    return undefined;
+  }, [dragRef]);
+
+  return (
+    <Reorder.Item value={item.id} dragListener={false} dragControls={controls} as="div">
+      <div className={classes.container}>
+        <div className={classes.row}>
+          <Flex ref={dragRef} onPointerDown={(e) => controls.start(e)}>
+            <IconGripVertical className={classes.clickableIcons} size={18} stroke={1.5} />
+          </Flex>
+
+          <div className={classes.middle}>
+            <Text className={classes.symbol}>{label}</Text>
+          </div>
+
+          <IconChevronDown
+            className={cx(classes.clickableIcons, { [classes.rotate]: opened })}
+            onClick={() => handlers.toggle()}
+            size={18}
+            stroke={1.5}
+          />
+        </div>
+
+        <Collapse in={opened}>
+          <Stack className={classes.collapseContent}>{children}</Stack>
+        </Collapse>
+      </div>
+    </Reorder.Item>
+  );
+};
+
+const useStyles = createStyles((theme) => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.radius.md,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
+    }`,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
+    marginBottom: theme.spacing.xs,
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '12px 16px',
+    gap: theme.spacing.sm,
+  },
+  middle: {
+    flexGrow: 1,
+  },
+  symbol: {
+    fontSize: 16,
+  },
+  clickableIcons: {
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],
+    cursor: 'pointer',
+    userSelect: 'none',
+    transition: 'transform .3s ease-in-out',
+  },
+  rotate: {
+    transform: 'rotate(180deg)',
+  },
+  collapseContent: {
+    padding: '12px 16px',
+  },
+}));

src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx

@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconChevronDown, IconGripVertical } from '@tabler/icons';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, ReactNode, useEffect, useRef } from 'react';
-import { IDraggableListInputValue } from '../../../../widgets/widgets';
+import { IDraggableListInputValue } from '../../../../../widgets/widgets';
 
 const useStyles = createStyles((theme) => ({
   container: {
@@ -43,14 +43,14 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-type DraggableListParams = {
+type StaticDraggableListParams = {
   value: IDraggableListInputValue['defaultValue'];
   onChange: (value: IDraggableListInputValue['defaultValue']) => void;
   labels: Record<string, string>;
   children?: Record<string, ReactNode>;
 };
 
-export const DraggableList: FC<DraggableListParams> = (props) => {
+export const StaticDraggableList: FC<StaticDraggableListParams> = (props) => {
   const keys = props.value.map((v) => v.key);
 
   return (
@@ -64,10 +64,10 @@ export const DraggableList: FC<DraggableListParams> = (props) => {
         as="div"
       >
         {props.value.map((item) => (
-          <ListItem key={item.key} item={item} label={props.labels[item.key]}>
-            {props.children?.[item.key]}
-          </ListItem>
-        ))}
+            <ListItem key={item.key} item={item} label={props.labels[item.key]}>
+              {props.children?.[item.key]}
+            </ListItem>
+          ))}
       </Reorder.Group>
     </div>
   );

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -1,6 +1,8 @@
 import {
   Alert,
   Button,
+  Card,
+  Flex,
   Group,
   MultiSelect,
   NumberInput,
@@ -10,9 +12,10 @@ import {
   Switch,
   Text,
   TextInput,
+  Title,
 } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
-import { IconAlertTriangle } from '@tabler/icons';
+import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons';
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
@@ -22,7 +25,8 @@ import { useColorTheme } from '../../../../tools/color';
 import Widgets from '../../../../widgets';
 import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets';
 import { IWidget } from '../../../../widgets/widgets';
-import { DraggableList } from './DraggableList';
+import { DraggableList } from './Inputs/DraggableList';
+import { StaticDraggableList } from './Inputs/StaticDraggableList';
 
 export type WidgetEditModalInnerProps = {
   widgetId: string;
@@ -222,7 +226,7 @@ const WidgetOptionTypeSwitch: FC<{
       return (
         <Stack spacing="xs">
           <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-          <DraggableList
+          <StaticDraggableList
             value={typedVal}
             onChange={(v) => handleChange(key, v)}
             labels={mapObject(option.items, (liName) =>
@@ -241,7 +245,7 @@ const WidgetOptionTypeSwitch: FC<{
                 />
               ))
             )}
-          </DraggableList>
+          </StaticDraggableList>
         </Stack>
       );
     case 'multiple-text':
@@ -263,6 +267,46 @@ const WidgetOptionTypeSwitch: FC<{
           }
         />
       );
+    case 'draggable-editable-list':
+      const { t: translateDraggableList } = useTranslation('widgets/draggable-list');
+      return (
+        <Stack spacing="xs">
+          <Text>{t(`descriptor.settings.${key}.label`)}</Text>
+          <DraggableList
+            items={Array.from(value).map((v: any) => ({
+              data: v,
+            }))}
+            value={value}
+            onChange={(v) => handleChange(key, v)}
+            options={option}
+          />
+
+          {Array.from(value).length === 0 && (
+            <Card>
+              <Stack align="center">
+                <IconPlaylistX size="2rem" />
+                <Stack align="center" spacing={0}>
+                  <Title order={5}>{translateDraggableList('noEntries.title')}</Title>
+                  <Text>{translateDraggableList('noEntries.text')}</Text>
+                </Stack>
+              </Stack>
+            </Card>
+          )}
+
+          <Flex gap="md">
+            <Button
+              onClick={() => {
+                handleChange('items', [...value, option.create()]);
+              }}
+              leftIcon={<IconPlus size={16} />}
+              variant="default"
+              fullWidth
+            >
+              {translateDraggableList('buttonAdd')}
+            </Button>
+          </Flex>
+        </Stack>
+      );
     /* eslint-enable no-case-declarations */
     default:
       return null;

src/components/IconSelector/DebouncedImage.tsx

@@ -1,42 +1,38 @@
-// disabled due to too many dynamic targets for next image cache
-/* eslint-disable @next/next/no-img-element */
-import Image from 'next/image';
-import { createStyles, Loader } from '@mantine/core';
-import { UseFormReturnType } from '@mantine/form';
+import { Image, Loader, createStyles } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
-import { AppType } from '../../../../../../types/app';
+import { IconPhotoOff } from '@tabler/icons';
 
-interface DebouncedAppIconProps {
+interface DebouncedImageProps {
   width: number;
   height: number;
-  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
+  src: string;
   debouncedWaitPeriod?: number;
 }
 
-export const DebouncedAppIcon = ({
-  form,
+export const DebouncedImage = ({
+  src,
   width,
   height,
   debouncedWaitPeriod = 1000,
-}: DebouncedAppIconProps) => {
+}: DebouncedImageProps) => {
   const { classes } = useStyles();
-  const [debouncedIconImageUrl] = useDebouncedValue(
-    form.values.appearance.iconUrl,
-    debouncedWaitPeriod
-  );
+  const [debouncedIconImageUrl] = useDebouncedValue(src, debouncedWaitPeriod);
 
-  if (debouncedIconImageUrl !== form.values.appearance.iconUrl) {
+  if (debouncedIconImageUrl !== src) {
     return <Loader width={width} height={height} />;
   }
 
   if (debouncedIconImageUrl.length > 0) {
     return (
-      <img
+      <Image
+        placeholder={<IconPhotoOff />}
         className={classes.iconImage}
         src={debouncedIconImageUrl}
         width={width}
         height={height}
+        fit="contain"
         alt=""
+        withPlaceholder
       />
     );
   }
@@ -47,7 +43,9 @@ export const DebouncedAppIcon = ({
       src="/imgs/logo/logo.png"
       width={width}
       height={height}
+      fit="contain"
       alt=""
+      withPlaceholder
     />
   );
 };

src/components/IconSelector/IconSelector.tsx

@@ -0,0 +1,177 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import {
+  Autocomplete,
+  CloseButton,
+  Stack,
+  Title,
+  Text,
+  Group,
+  Loader,
+  createStyles,
+  Box,
+  Image,
+  SelectItemProps,
+  ScrollArea,
+} from '@mantine/core';
+import { IconSearch } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { useGetDashboardIcons } from '../../hooks/icons/useGetDashboardIcons';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { DebouncedImage } from './DebouncedImage';
+
+export const IconSelector = forwardRef(
+  (
+    {
+      defaultValue,
+      value,
+      onChange,
+    }: {
+      defaultValue: string;
+      value?: string;
+      onChange: (debouncedValue: string | undefined) => void;
+    },
+    ref
+  ) => {
+    const { t } = useTranslation('layout/modals/add-app');
+    const { classes } = useStyles();
+
+    const { data, isLoading } = useGetDashboardIcons();
+    const [currentValue, setValue] = useState(value ?? defaultValue);
+
+    const flatIcons =
+      data === undefined
+        ? []
+        : data.flatMap((repository) =>
+            repository.entries.map((entry) => ({
+              url: entry.url,
+              label: entry.name,
+              size: entry.size,
+              value: entry.url,
+              group: repository.name,
+              copyright: repository.copyright,
+            }))
+          );
+
+    useImperativeHandle(ref, () => ({
+      chooseFirstOrDefault(searchTerm: string) {
+        const match = flatIcons.find((icon) =>
+          icon.label.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+
+        if (!match) {
+          return;
+        }
+
+        onChange(match.url);
+      },
+    }));
+
+    return (
+      <Stack w="100%">
+        <Autocomplete
+          nothingFound={
+            <Stack align="center" spacing="xs" my="lg">
+              <IconSearch />
+              <Title order={6} align="center">
+                {t('appearance.icon.autocomplete.title')}
+              </Title>
+              <Text align="center" maw={350}>
+                {t('appearance.icon.autocomplete.text')}
+              </Text>
+            </Stack>
+          }
+          icon={<DebouncedImage src={value ?? currentValue} width={20} height={20} />}
+          rightSection={
+            (value ?? currentValue).length > 0 ? (
+              <CloseButton onClick={() => onChange(undefined)} />
+            ) : null
+          }
+          itemComponent={AutoCompleteItem}
+          className={classes.textInput}
+          data={flatIcons}
+          limit={25}
+          label={t('appearance.icon.label')}
+          description={t('appearance.icon.description', {
+            suggestionsCount: data?.reduce((a, b) => a + b.count, 0) ?? 0,
+          })}
+          filter={(search, item) =>
+            item.value
+              .toLowerCase()
+              .replaceAll('_', '')
+              .replaceAll(' ', '-')
+              .includes(search.toLowerCase().replaceAll('_', '').replaceAll(' ', '-'))
+          }
+          dropdownComponent={(props: any) => <ScrollArea {...props} mah={250} />}
+          onChange={(event) => {
+            onChange(event);
+            setValue(event);
+          }}
+          dropdownPosition="bottom"
+          variant="default"
+          value={value}
+          withAsterisk
+          withinPortal
+          required
+        />
+        {(!data || isLoading) && (
+          <Group>
+            <Loader variant="oval" size="sm" />
+            <Stack spacing={0}>
+              <Text size="xs" weight="bold">
+                {t('appearance.icon.noItems.title')}
+              </Text>
+              <Text color="dimmed" size="xs">
+                {t('appearance.icon.noItems.text')}
+              </Text>
+            </Stack>
+          </Group>
+        )}
+      </Stack>
+    );
+  }
+);
+
+const useStyles = createStyles(() => ({
+  textInput: {
+    flexGrow: 1,
+  },
+}));
+
+const AutoCompleteItem = forwardRef<HTMLDivElement, ItemProps>(
+  ({ label, size, copyright, url, ...others }: ItemProps, ref) => (
+    <div ref={ref} {...others}>
+      <Group noWrap>
+        <Box
+          sx={(theme) => ({
+            backgroundColor:
+              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
+            borderRadius: theme.radius.md,
+          })}
+          p={2}
+        >
+          <Image src={url} width={30} height={30} fit="contain" />
+        </Box>
+        <Stack spacing={0}>
+          <Text>{label}</Text>
+          <Group>
+            <Text color="dimmed" size="xs">
+              {humanFileSize(size, false)}
+            </Text>
+            {copyright && (
+              <Text color="dimmed" size="xs">
+                © {copyright}
+              </Text>
+            )}
+          </Group>
+        </Stack>
+      </Group>
+    </div>
+  )
+);
+
+interface ItemProps extends SelectItemProps {
+  url: string;
+  group: string;
+  size: number;
+  copyright: string | undefined;
+}