✨ 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/IconSelector/DebouncedImage.tsx

@@ -0,0 +1,57 @@
+import { Image, Loader, createStyles } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconPhotoOff } from '@tabler/icons';
+
+interface DebouncedImageProps {
+  width: number;
+  height: number;
+  src: string;
+  debouncedWaitPeriod?: number;
+}
+
+export const DebouncedImage = ({
+  src,
+  width,
+  height,
+  debouncedWaitPeriod = 1000,
+}: DebouncedImageProps) => {
+  const { classes } = useStyles();
+  const [debouncedIconImageUrl] = useDebouncedValue(src, debouncedWaitPeriod);
+
+  if (debouncedIconImageUrl !== src) {
+    return <Loader width={width} height={height} />;
+  }
+
+  if (debouncedIconImageUrl.length > 0) {
+    return (
+      <Image
+        placeholder={<IconPhotoOff />}
+        className={classes.iconImage}
+        src={debouncedIconImageUrl}
+        width={width}
+        height={height}
+        fit="contain"
+        alt=""
+        withPlaceholder
+      />
+    );
+  }
+
+  return (
+    <Image
+      className={classes.iconImage}
+      src="/imgs/logo/logo.png"
+      width={width}
+      height={height}
+      fit="contain"
+      alt=""
+      withPlaceholder
+    />
+  );
+};
+
+const useStyles = createStyles(() => ({
+  iconImage: {
+    objectFit: 'contain',
+  },
+}));