feat: add custom css for board and custom classes in advanced options for items (#512)

* feat: add custom css for board and custom classes in advanced options for items

* chore: add mysql migration

* fix: test not working

* fix: format issues

* fix: typecheck issue

* fix: build issue

* chore: add missing translations

* fix: merge issues related to migrations

* fix: format issues

* fix: merge issue with migration

* fix: format issue

packages/widgets/src/modals/widget-advanced-options-modal.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Button, Group, Stack } from "@mantine/core";
+
+import { useForm } from "@homarr/form";
+import { createModal } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { TextMultiSelect } from "@homarr/ui";
+import type { BoardItemAdvancedOptions } from "@homarr/validation";
+
+interface InnerProps {
+  advancedOptions: BoardItemAdvancedOptions;
+  onSuccess: (options: BoardItemAdvancedOptions) => void;
+}
+
+export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const form = useForm({
+    initialValues: innerProps.advancedOptions,
+  });
+  const handleSubmit = (values: BoardItemAdvancedOptions) => {
+    innerProps.onSuccess(values);
+    actions.closeModal();
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <TextMultiSelect
+          label={t("item.edit.field.customCssClasses.label")}
+          {...form.getInputProps("customCssClasses")}
+        />
+        <Group justify="end">
+          <Button onClick={actions.closeModal} variant="subtle" color="gray">
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" color="teal">
+            {t("common.action.saveChanges")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle(t) {
+    return t("item.edit.advancedOptions.title");
+  },
+  size: "lg",
+  transitionProps: {
+    duration: 0,
+  },
+});