feat: board settings (#137)

* refactor: improve user feedback for general board settings section

* wip: add board settings for background and colors, move danger zone to own file, refactor code

* feat: add shade selector

* feat: add slider for opacity

* fix: issue with invalid hex values for color preview

* refactor: add shared mutation hook for saving partial board settings with invalidate query

* fix: add cleanup for not applied changes to logo and page title

* feat: add layout settings

* feat: add empty custom css section to board settings

* refactor: improve layout of board logo on mobile

* feat: add theme provider for board colors

* refactor: add auto contrast for better contrast of buttons with low primary shade

* feat: add background for boards

* feat: add opacity for boards

* feat: add rename board

* feat: add visibility and delete of board settings

* fix: issue that wrong data is updated with update board method

* refactor: improve danger zone button placement for mobile

* fix: board not revalidated when already in boards layout

* refactor: improve board color preview

* refactor: change save button color to teal, add placeholders for general board settings

* chore: update initial migration

* refactor: remove unnecessary div

* chore: address pull request feedback

* fix: ci issues

* fix: deepsource issues

* chore: address pull request feedback

* fix: formatting issue

* chore: address pull request feedback

packages/ui/src/components/select-with-description.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Text } from "@mantine/core";
+
+import type { SelectWithCustomItemsProps } from "./select-with-custom-items";
+import { SelectWithCustomItems } from "./select-with-custom-items";
+
+export interface SelectItemWithDescription {
+  value: string;
+  label: string;
+  description: string;
+}
+type Props = SelectWithCustomItemsProps<SelectItemWithDescription>;
+
+export const SelectWithDescription = (props: Props) => {
+  return (
+    <SelectWithCustomItems<SelectItemWithDescription>
+      {...props}
+      SelectOption={SelectOption}
+    />
+  );
+};
+
+const SelectOption = ({ label, description }: SelectItemWithDescription) => {
+  return (
+    <div>
+      <Text fz="sm" fw={500}>
+        {label}
+      </Text>
+      <Text fz="xs" opacity={0.6}>
+        {description}
+      </Text>
+    </div>
+  );
+};