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/definitions/src/_definition.ts

@@ -0,0 +1,20 @@
+export const createDefinition = <
+  const TKeys extends string[],
+  TOptions extends { defaultValue: TKeys[number] } | void,
+>(
+  values: TKeys,
+  options: TOptions,
+) => ({
+  values,
+  defaultValue: options?.defaultValue as TOptions extends {
+    defaultValue: infer T;
+  }
+    ? T
+    : undefined,
+});
+
+export type inferDefinitionType<TDefinition> = TDefinition extends {
+  values: readonly (infer T)[];
+}
+  ? T
+  : never;

packages/definitions/src/board.ts

@@ -1,13 +1,24 @@
-export const backgroundImageAttachments = ["fixed", "scroll"] as const;
-export const backgroundImageRepeats = [
-  "repeat",
-  "repeat-x",
-  "repeat-y",
-  "no-repeat",
-] as const;
-export const backgroundImageSizes = ["cover", "contain"] as const;
+import type { inferDefinitionType } from "./_definition";
+import { createDefinition } from "./_definition";
 
-export type BackgroundImageAttachment =
-  (typeof backgroundImageAttachments)[number];
-export type BackgroundImageRepeat = (typeof backgroundImageRepeats)[number];
-export type BackgroundImageSize = (typeof backgroundImageSizes)[number];
+export const backgroundImageAttachments = createDefinition(
+  ["fixed", "scroll"],
+  { defaultValue: "fixed" },
+);
+export const backgroundImageRepeats = createDefinition(
+  ["repeat", "repeat-x", "repeat-y", "no-repeat"],
+  { defaultValue: "no-repeat" },
+);
+export const backgroundImageSizes = createDefinition(["cover", "contain"], {
+  defaultValue: "cover",
+});
+
+export type BackgroundImageAttachment = inferDefinitionType<
+  typeof backgroundImageAttachments
+>;
+export type BackgroundImageRepeat = inferDefinitionType<
+  typeof backgroundImageRepeats
+>;
+export type BackgroundImageSize = inferDefinitionType<
+  typeof backgroundImageSizes
+>;

packages/definitions/src/section.ts

@@ -1,2 +1,2 @@
-export const sectionKinds = ["category", "empty", "sidebar"] as const;
+export const sectionKinds = ["category", "empty"] as const;
 export type SectionKind = (typeof sectionKinds)[number];