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

apps/nextjs/src/app/[locale]/boards/(content)/_custom-css.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useRequiredBoard } from "./_context";
+
+export const CustomCss = () => {
+  const board = useRequiredBoard();
+
+  return <style>{board.customCss}</style>;
+};

apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx

@@ -1,7 +1,91 @@
 "use client";
 
-// TODO: add some sort of store (maybe directory on GitHub)
+import { Alert, Button, Group, Input, Stack } from "@mantine/core";
+import { highlight, languages } from "prismjs";
+import Editor from "react-simple-code-editor";
 
-export const CustomCssSettingsContent = () => {
+import "~/styles/prismjs.scss";
-  return null;
+
+import { IconInfoCircle } from "@tabler/icons-react";
+
+import { useForm } from "@homarr/form";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import type { Board } from "../../_types";
+import { useSavePartialSettingsMutation } from "./_shared";
+import classes from "./customcss.module.css";
+
+interface Props {
+  board: Board;
+}
+
+export const CustomCssSettingsContent = ({ board }: Props) => {
+  const t = useI18n();
+  const customCssT = useScopedI18n("board.field.customCss");
+  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
+  const form = useForm({
+    initialValues: {
+      customCss: board.customCss ?? "",
+    },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        savePartialSettings({
+          id: board.id,
+          ...values,
+        });
+      })}
+    >
+      <Stack>
+        <CustomCssInput {...form.getInputProps("customCss")} />
+
+        <Alert variant="light" color="cyan" title={customCssT("customClassesAlert.title")} icon={<IconInfoCircle />}>
+          {customCssT("customClassesAlert.description")}
+        </Alert>
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending} color="teal">
+            {t("common.action.saveChanges")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+interface CustomCssInputProps {
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+const CustomCssInput = ({ value, onChange }: CustomCssInputProps) => {
+  const customCssT = useScopedI18n("board.field.customCss");
+
+  return (
+    <Input.Wrapper
+      label={customCssT("label")}
+      labelProps={{
+        htmlFor: "custom-css",
+      }}
+      description={customCssT("description")}
+      inputWrapperOrder={["label", "description", "input", "error"]}
+    >
+      <div className={classes.codeEditorRoot}>
+        <Editor
+          textareaId="custom-css"
+          onValueChange={onChange}
+          value={value ?? ""}
+          highlight={(code) => highlight(code, languages.extend("css", {}), "css")}
+          padding={10}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 12,
+            minHeight: 250,
+          }}
+        />
+      </div>
+    </Input.Wrapper>
+  );
 };

apps/nextjs/src/app/[locale]/boards/[name]/settings/customcss.module.css

@@ -0,0 +1,22 @@
+.codeEditorFooter {
+  border-bottom-left-radius: var(--mantine-radius-sm);
+  border-bottom-right-radius: var(--mantine-radius-sm);
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7));
+}
+
+.codeEditorRoot {
+  margin-top: 4px;
+  border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--mantine-radius-sm);
+}
+
+.codeEditor {
+  background-color: light-dark(white, var(--mantine-color-dark-6));
+  font-size: var(--mantine-font-size-xs);
+}
+
+.codeEditor ::placeholder {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}

apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx

@@ -84,7 +84,7 @@ export default async function BoardSettingsPage({ params, searchParams }: Props)
             <ColorSettingsContent board={board} />
           </AccordionItemFor>
           <AccordionItemFor value="customCss" icon={IconFileTypeCss}>
-            <CustomCssSettingsContent />
+            <CustomCssSettingsContent board={board} />
           </AccordionItemFor>
           {hasFullAccess && (
             <>

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -12,6 +12,7 @@ import { ClientShell } from "~/components/layout/shell";
 import type { Board } from "./_types";
 import { BoardProvider } from "./(content)/_context";
 import type { Params } from "./(content)/_creator";
+import { CustomCss } from "./(content)/_custom-css";
 import { BoardMantineProvider } from "./(content)/_theme";
 
 interface CreateBoardLayoutProps<TParams extends Params> {
@@ -44,6 +45,7 @@ export const createBoardLayout = <TParams extends Params>({
       <GlobalItemServerDataRunner board={initialBoard} shouldRun={isBoardContentPage}>
         <BoardProvider initialBoard={initialBoard}>
           <BoardMantineProvider>
+            <CustomCss />
             <ClientShell hasNavigation={false}>
               <MainHeader
                 logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}

apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx

@@ -8,7 +8,7 @@ import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import type { BoardItemIntegration } from "@homarr/validation";
+import type { BoardItemAdvancedOptions, BoardItemIntegration } from "@homarr/validation";
 import {
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,
@@ -42,9 +42,13 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
   const [state, setState] = useState<{
     options: Record<string, unknown>;
     integrations: BoardItemIntegration[];
+    advancedOptions: BoardItemAdvancedOptions;
   }>({
     options: reduceWidgetOptionsWithDefaultValues(kind, {}),
     integrations: [],
+    advancedOptions: {
+      customCssClasses: [],
+    },
   });
 
   const handleOpenEditWidgetModal = useCallback(() => {

apps/nextjs/src/components/board/items/item-actions.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 
 import { createId } from "@homarr/db/client";
 import type { WidgetKind } from "@homarr/definitions";
-import type { BoardItemIntegration } from "@homarr/validation";
+import type { BoardItemAdvancedOptions, BoardItemIntegration } from "@homarr/validation";
 
 import type { EmptySection, Item } from "~/app/[locale]/boards/_types";
 import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
@@ -31,6 +31,11 @@ interface UpdateItemOptions {
   newOptions: Record<string, unknown>;
 }
 
+interface UpdateItemAdvancedOptions {
+  itemId: string;
+  newAdvancedOptions: BoardItemAdvancedOptions;
+}
+
 interface UpdateItemIntegrations {
   itemId: string;
   newIntegrations: BoardItemIntegration[];
@@ -59,6 +64,9 @@ export const useItemActions = () => {
           width: 1,
           height: 1,
           integrations: [],
+          advancedOptions: {
+            customCssClasses: [],
+          },
         } satisfies Omit<Item, "kind" | "yOffset" | "xOffset"> & {
           kind: WidgetKind;
         };
@@ -91,7 +99,7 @@ export const useItemActions = () => {
             return {
               ...section,
               items: section.items.map((item) => {
-                // Return same item if item is not the one we're moving
+                // Return same item if item is not the one we're changing
                 if (item.id !== itemId) return item;
                 return {
                   ...item,
@@ -106,6 +114,33 @@ export const useItemActions = () => {
     [updateBoard],
   );
 
+  const updateItemAdvancedOptions = useCallback(
+    ({ itemId, newAdvancedOptions }: UpdateItemAdvancedOptions) => {
+      updateBoard((previous) => {
+        if (!previous) return previous;
+        return {
+          ...previous,
+          sections: previous.sections.map((section) => {
+            // Return same section if item is not in it
+            if (!section.items.some((item) => item.id === itemId)) return section;
+            return {
+              ...section,
+              items: section.items.map((item) => {
+                // Return same item if item is not the one we're changing
+                if (item.id !== itemId) return item;
+                return {
+                  ...item,
+                  advancedOptions: newAdvancedOptions,
+                };
+              }),
+            };
+          }),
+        };
+      });
+    },
+    [updateBoard],
+  );
+
   const updateItemIntegrations = useCallback(
     ({ itemId, newIntegrations }: UpdateItemIntegrations) => {
       updateBoard((previous) => {
@@ -224,6 +259,7 @@ export const useItemActions = () => {
     moveItemToSection,
     removeItem,
     updateItemOptions,
+    updateItemAdvancedOptions,
     updateItemIntegrations,
     createItem,
   };

apps/nextjs/src/components/board/sections/content.tsx

@@ -70,7 +70,11 @@ const BoardItem = ({ refs, item, opacity }: ItemProps) => {
     >
       <Card
         ref={ref}
-        className={combineClasses(classes.itemCard, "grid-stack-item-content")}
+        className={combineClasses(
+          classes.itemCard,
+          "grid-stack-item-content",
+          item.advancedOptions.customCssClasses.join(" "),
+        )}
         withBorder
         styles={{
           root: {
@@ -123,7 +127,7 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
   const { openModal } = useModalAction(WidgetEditModal);
   const { openConfirmModal } = useConfirmModal();
   const isEditMode = useAtomValue(editModeAtom);
-  const { updateItemOptions, updateItemIntegrations, removeItem } = useItemActions();
+  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, removeItem } = useItemActions();
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
 
@@ -133,14 +137,19 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
     openModal({
       kind: item.kind,
       value: {
+        advancedOptions: item.advancedOptions,
         options: item.options,
         integrations: item.integrations,
       },
-      onSuccessfulEdit: ({ options, integrations }) => {
+      onSuccessfulEdit: ({ options, integrations, advancedOptions }) => {
         updateItemOptions({
           itemId: item.id,
           newOptions: options,
         });
+        updateItemAdvancedOptions({
+          itemId: item.id,
+          newAdvancedOptions: advancedOptions,
+        });
         updateItemIntegrations({
           itemId: item.id,
           newIntegrations: integrations,

apps/nextjs/src/styles/prismjs.scss

@@ -0,0 +1,225 @@
+[data-mantine-color-scheme="light"] {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #000;
+    background: 0 0;
+    text-shadow: 0 1px #fff;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  code[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection,
+  pre[class*="language-"] ::-moz-selection,
+  pre[class*="language-"]::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+  code[class*="language-"] ::selection,
+  code[class*="language-"]::selection,
+  pre[class*="language-"] ::selection,
+  pre[class*="language-"]::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: #f5f2f0;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #708090;
+  }
+  .token.punctuation {
+    color: #999;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.deleted,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #905;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #690;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url {
+    color: #9a6e3a;
+    background: hsla(0, 0%, 100%, 0.5);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #07a;
+  }
+  .token.class-name,
+  .token.function {
+    color: #dd4a68;
+  }
+  .token.important,
+  .token.regex,
+  .token.variable {
+    color: #e90;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+}
+
+[data-mantine-color-scheme="dark"] {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #fff;
+    background: 0 0;
+    text-shadow: 0 -0.1em 0.2em #000;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: #4c3f33;
+  }
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0.3em solid #7a6651;
+    border-radius: 0.5em;
+    box-shadow: 1px 1px 0.5em #000 inset;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: 0.15em 0.2em 0.05em;
+    border-radius: 0.3em;
+    border: 0.13em solid #7a6651;
+    box-shadow: 1px 1px 0.3em -0.1em #000 inset;
+    white-space: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #997f66;
+  }
+  .token.punctuation {
+    opacity: 0.7;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #d1939e;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #bce051;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url,
+  .token.variable {
+    color: #f4b73d;
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #d1939e;
+  }
+  .token.important,
+  .token.regex {
+    color: #e90;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  .token.deleted {
+    color: red;
+  }
+}

packages/api/src/router/board.ts

@@ -16,6 +16,7 @@ import {
 } from "@homarr/db/schema/sqlite";
 import type { WidgetKind } from "@homarr/definitions";
 import { getPermissionsWithParents, widgetKinds } from "@homarr/definitions";
+import type { BoardItemAdvancedOptions } from "@homarr/validation";
 import { createSectionSchema, sharedItemSchema, validation, z } from "@homarr/validation";
 
 import { zodUnionFromArray } from "../../../validation/src/enums";
@@ -229,6 +230,7 @@ export const boardRouter = createTRPCRouter({
             xOffset: item.xOffset,
             yOffset: item.yOffset,
             options: superjson.stringify(item.options),
+            advancedOptions: superjson.stringify(item.advancedOptions),
             sectionId: item.sectionId,
           })),
         );
@@ -515,6 +517,7 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
         items: section.items.map((item) => ({
           ...item,
           integrations: item.integrations.map((item) => item.integration),
+          advancedOptions: superjson.parse<BoardItemAdvancedOptions>(item.advancedOptions),
           options: superjson.parse<Record<string, unknown>>(item.options),
         })),
       }),

packages/api/src/router/test/board.spec.ts

@@ -664,6 +664,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 0,
               yOffset: 0,
+              advancedOptions: {},
             },
           ],
         },
@@ -724,6 +725,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 0,
               yOffset: 0,
+              advancedOptions: {},
             },
           ],
         },
@@ -837,6 +839,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 3,
               yOffset: 2,
+              advancedOptions: {},
             },
           ],
         },
@@ -905,6 +908,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 0,
               yOffset: 0,
+              advancedOptions: {},
             },
           ],
         },
@@ -1018,6 +1022,7 @@ describe("saveBoard should save full board", () => {
               width: 2,
               xOffset: 7,
               yOffset: 5,
+              advancedOptions: {},
             },
           ],
         },

packages/db/migrations/mysql/0002_flimsy_deathbird.sql

@@ -0,0 +1 @@
+ALTER TABLE `item` ADD `advanced_options` text DEFAULT ('{"json": {}}') NOT NULL;

packages/db/migrations/mysql/meta/0002_snapshot.json

@@ -1,8 +1,8 @@
 {
   "version": "5",
   "dialect": "mysql",
-  "id": "e7a373e1-9f36-4910-9f2b-ac6fd5e79145",
+  "id": "4e382d0d-a432-4953-bd5e-04f3f33e26a4",
-  "prevId": "ba2dd885-4e7f-4a45-99a0-7b45cbd0a5c2",
+  "prevId": "fdeaf6eb-cd62-4fa5-9b38-d7f80a60db9f",
   "tables": {
     "account": {
       "name": "account",
@@ -910,6 +910,14 @@
           "notNull": true,
           "autoincrement": false,
           "default": "('{\"json\": {}}')"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
         }
       },
       "indexes": {},
@@ -991,40 +999,6 @@
       },
       "uniqueConstraints": {}
     },
-    "serverSetting": {
-      "name": "serverSetting",
-      "columns": {
-        "key": {
-          "name": "key",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "('{\"json\": {}}')"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {
-        "serverSetting_key": {
-          "name": "serverSetting_key",
-          "columns": ["key"]
-        }
-      },
-      "uniqueConstraints": {
-        "serverSetting_key_unique": {
-          "name": "serverSetting_key_unique",
-          "columns": ["key"]
-        }
-      }
-    },
     "session": {
       "name": "session",
       "columns": {

packages/db/migrations/mysql/meta/_journal.json

@@ -19,8 +19,15 @@
     {
       "idx": 2,
       "version": "5",
+      "when": 1715980459023,
+      "tag": "0002_flimsy_deathbird",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "5",
       "when": 1716148439439,
-      "tag": "0002_freezing_black_panther",
+      "tag": "0003_freezing_black_panther",
       "breakpoints": true
     }
   ]

packages/db/migrations/sqlite/0002_cooing_sumo.sql

@@ -0,0 +1 @@
+ALTER TABLE `item` ADD `advanced_options` text DEFAULT '{"json": {}}' NOT NULL;

packages/db/migrations/sqlite/meta/0002_snapshot.json

@@ -1,8 +1,8 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "b72fe407-31bc-4dd0-8c36-dbb8e42ef708",
+  "id": "5ad60251-8450-437d-9081-a456884120d2",
-  "prevId": "2ed0ffc3-8612-42e7-bd8e-f5f8f3338a39",
+  "prevId": "0575873a-9e10-4480-8d7d-c47198622c22",
   "tables": {
     "account": {
       "name": "account",
@@ -877,6 +877,14 @@
           "notNull": true,
           "autoincrement": false,
           "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
         }
       },
       "indexes": {},
@@ -948,36 +956,6 @@
       "compositePrimaryKeys": {},
       "uniqueConstraints": {}
     },
-    "serverSetting": {
-      "name": "serverSetting",
-      "columns": {
-        "key": {
-          "name": "key",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        }
-      },
-      "indexes": {
-        "serverSetting_key_unique": {
-          "name": "serverSetting_key_unique",
-          "columns": ["key"],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
     "session": {
       "name": "session",
       "columns": {

packages/db/migrations/sqlite/meta/_journal.json

@@ -19,8 +19,15 @@
     {
       "idx": 2,
       "version": "6",
+      "when": 1715973963014,
+      "tag": "0002_cooing_sumo",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "6",
       "when": 1716148434186,
-      "tag": "0002_adorable_raider",
+      "tag": "0003_adorable_raider",
       "breakpoints": true
     }
   ]

packages/db/schema/mysql.ts

@@ -243,6 +243,7 @@ export const items = mysqlTable("item", {
   width: int("width").notNull(),
   height: int("height").notNull(),
   options: text("options").default('{"json": {}}').notNull(), // empty superjson object
+  advancedOptions: text("advanced_options").default('{"json": {}}').notNull(), // empty superjson object
 });
 
 export const apps = mysqlTable("app", {

packages/db/schema/sqlite.ts

@@ -246,6 +246,7 @@ export const items = sqliteTable("item", {
   width: int("width").notNull(),
   height: int("height").notNull(),
   options: text("options").default('{"json": {}}').notNull(), // empty superjson object
+  advancedOptions: text("advanced_options").default('{"json": {}}').notNull(), // empty superjson object
 });
 
 export const apps = sqliteTable("app", {

packages/modals/src/index.tsx

@@ -103,7 +103,6 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
     <Modal
       key={modal.id}
       zIndex={getDefaultZIndex("modal") + 1}
-      display={modal.id === state.current?.id ? undefined : "none"}
       style={{
         userSelect: modal.id === state.current?.id ? undefined : "none",
       }}
@@ -112,6 +111,9 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
           fontSize: "1.25rem",
           fontWeight: 500,
         },
+        inner: {
+          display: modal.id === state.current?.id ? undefined : "none",
+        },
       }}
       trapFocus={modal.id === state.current?.id}
       {...otherModalProps}

packages/translation/src/lang/en.ts

@@ -469,6 +469,10 @@ export default {
     multiSelect: {
       placeholder: "Pick one or more values",
     },
+    multiText: {
+      placeholder: "Add more values",
+      addLabel: `Add {value}`,
+    },
     select: {
       placeholder: "Pick value",
       badge: {
@@ -594,10 +598,17 @@ export default {
     },
     edit: {
       title: "Edit item",
+      advancedOptions: {
+        label: "Advanced options",
+        title: "Advanced item options",
+      },
       field: {
         integrations: {
           label: "Integrations",
         },
+        customCssClasses: {
+          label: "Custom css classes",
+        },
       },
     },
     remove: {
@@ -944,7 +955,13 @@ export default {
         label: "Opacity",
       },
       customCss: {
-        label: "Custom CSS",
+        label: "Custom css for this board",
+        description: "Further, customize your dashboard using CSS, only recommended for experienced users",
+        customClassesAlert: {
+          title: "Custom classes",
+          description:
+            "You can add custom classes to your board items in the advanced options of each item and use them in the custom CSS above.",
+        },
       },
       columnCount: {
         label: "Column count",

packages/ui/package.json

@@ -29,7 +29,8 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@homarr/log": "workspace:^0.1.0"
+    "@homarr/log": "workspace:^0.1.0",
+    "@homarr/translation": "workspace:^0.1.0"
   },
   "eslintConfig": {
     "extends": [

packages/ui/src/components/index.tsx

@@ -5,3 +5,4 @@ export { UserAvatar } from "./user-avatar";
 export { UserAvatarGroup } from "./user-avatar-group";
 export { TablePagination } from "./table-pagination";
 export { SearchInput } from "./search-input";
+export { TextMultiSelect } from "./text-multi-select";

packages/ui/src/components/text-multi-select.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import type { FocusEventHandler } from "react";
+import { useState } from "react";
+import { Combobox, Group, Pill, PillsInput, Text, useCombobox } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+
+import { useI18n } from "@homarr/translation/client";
+
+interface TextMultiSelectProps {
+  label: string;
+  value?: string[];
+  onChange: (value: string[]) => void;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  error?: string;
+}
+
+export const TextMultiSelect = ({ label, value = [], onChange, onBlur, onFocus, error }: TextMultiSelectProps) => {
+  const t = useI18n();
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+    onDropdownOpen: () => combobox.updateSelectedOptionIndex("active"),
+  });
+
+  const [search, setSearch] = useState("");
+
+  const exactOptionMatch = value.some((item) => item === search);
+
+  const handleValueSelect = (selectedValue: string) => {
+    setSearch("");
+
+    if (selectedValue === "$create") {
+      onChange([...value, search]);
+    } else {
+      onChange(value.filter((filterValue) => filterValue !== selectedValue));
+    }
+  };
+
+  const handleValueRemove = (removedValue: string) =>
+    onChange(value.filter((filterValue) => filterValue !== removedValue));
+
+  const values = value.map((item) => (
+    <Pill key={item} withRemoveButton onRemove={() => handleValueRemove(item)}>
+      {item}
+    </Pill>
+  ));
+
+  return (
+    <Combobox store={combobox} onOptionSubmit={handleValueSelect} withinPortal={false}>
+      <Combobox.DropdownTarget>
+        <PillsInput label={label} error={error} onClick={() => combobox.openDropdown()}>
+          <Pill.Group>
+            {values}
+
+            <Combobox.EventsTarget>
+              <PillsInput.Field
+                onFocus={(event) => {
+                  onFocus?.(event);
+                  combobox.openDropdown();
+                }}
+                onBlur={(event) => {
+                  onBlur?.(event);
+                  combobox.closeDropdown();
+                }}
+                value={search}
+                placeholder={t("common.multiText.placeholder")}
+                onChange={(event) => {
+                  combobox.updateSelectedOptionIndex();
+                  setSearch(event.currentTarget.value);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Backspace" && search.length === 0) {
+                    event.preventDefault();
+                    handleValueRemove(value.at(-1)!);
+                  }
+                }}
+              />
+            </Combobox.EventsTarget>
+          </Pill.Group>
+        </PillsInput>
+      </Combobox.DropdownTarget>
+
+      {!exactOptionMatch && search.trim().length > 0 && (
+        <Combobox.Dropdown>
+          <Combobox.Options>
+            <Combobox.Option value="$create">
+              <Group>
+                <IconPlus size={12} />
+                <Text size="sm">{t("common.multiText.addLabel", { value: search })}</Text>
+              </Group>
+            </Combobox.Option>
+          </Combobox.Options>
+        </Combobox.Dropdown>
+      )}
+    </Combobox>
+  );
+};

packages/validation/src/index.ts

@@ -18,4 +18,10 @@ export const validation = {
   icons: iconsSchemas,
 };
 
-export { createSectionSchema, sharedItemSchema, type BoardItemIntegration } from "./shared";
+export {
+  createSectionSchema,
+  sharedItemSchema,
+  itemAdvancedOptionsSchema,
+  type BoardItemIntegration,
+  type BoardItemAdvancedOptions,
+} from "./shared";

packages/validation/src/shared.ts

@@ -13,6 +13,12 @@ export const integrationSchema = z.object({
 
 export type BoardItemIntegration = z.infer<typeof integrationSchema>;
 
+export const itemAdvancedOptionsSchema = z.object({
+  customCssClasses: z.array(z.string()).default([]),
+});
+
+export type BoardItemAdvancedOptions = z.infer<typeof itemAdvancedOptionsSchema>;
+
 export const sharedItemSchema = z.object({
   id: z.string(),
   xOffset: z.number(),
@@ -20,6 +26,7 @@ export const sharedItemSchema = z.object({
   height: z.number(),
   width: z.number(),
   integrations: z.array(integrationSchema),
+  advancedOptions: itemAdvancedOptionsSchema,
 });
 
 export const commonItemSchema = z

packages/widgets/package.json

@@ -23,6 +23,7 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
+    "@types/prismjs": "^1.26.4",
     "@types/video.js": "^7.3.58",
     "eslint": "^8.57.0",
     "typescript": "^5.4.5"
@@ -40,17 +41,15 @@
     "@homarr/form": "workspace:^0.1.0",
     "@homarr/modals": "workspace:^0.1.0",
     "@homarr/notifications": "workspace:^0.1.0",
-    "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/redis": "workspace:^0.1.0",
+    "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@tiptap/extension-link": "^2.4.0",
-    "@tiptap/react": "^2.4.0",
-    "@tiptap/starter-kit": "^2.4.0",
     "@tiptap/extension-color": "2.4.0",
     "@tiptap/extension-highlight": "2.4.0",
     "@tiptap/extension-image": "2.4.0",
+    "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-table": "2.4.0",
     "@tiptap/extension-table-cell": "2.4.0",
     "@tiptap/extension-table-header": "2.4.0",
@@ -60,6 +59,10 @@
     "@tiptap/extension-text-align": "2.4.0",
     "@tiptap/extension-text-style": "2.4.0",
     "@tiptap/extension-underline": "2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
+    "prismjs": "^1.29.0",
+    "react-simple-code-editor": "^0.13.1",
     "video.js": "^8.12.0"
   }
 }

packages/widgets/src/_inputs/form.ts

@@ -4,4 +4,5 @@ import { createFormContext } from "@homarr/form";
 
 import type { WidgetEditModalState } from "../modals/widget-edit-modal";
 
-export const [FormProvider, useFormContext, useForm] = createFormContext<WidgetEditModalState>();
+export const [FormProvider, useFormContext, useForm] =
+  createFormContext<Omit<WidgetEditModalState, "advancedOptions">>();

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,
+  },
+});

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -1,21 +1,25 @@
 "use client";
 
+import { useState } from "react";
 import { Button, Group, Stack } from "@mantine/core";
 
 import type { WidgetKind } from "@homarr/definitions";
-import { createModal } from "@homarr/modals";
+import { createModal, useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 import type { BoardItemIntegration } from "@homarr/validation";
 
 import { widgetImports } from "..";
 import { getInputForType } from "../_inputs";
 import { FormProvider, useForm } from "../_inputs/form";
+import type { BoardItemAdvancedOptions } from "../../../validation/src/shared";
 import type { OptionsBuilderResult } from "../options";
 import type { IntegrationSelectOption } from "../widget-integration-select";
 import { WidgetIntegrationSelect } from "../widget-integration-select";
+import { WidgetAdvancedOptionsModal } from "./widget-advanced-options-modal";
 
 export interface WidgetEditModalState {
   options: Record<string, unknown>;
+  advancedOptions: BoardItemAdvancedOptions;
   integrations: BoardItemIntegration[];
 }
 
@@ -29,16 +33,21 @@ interface ModalProps<TSort extends WidgetKind> {
 
 export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, innerProps }) => {
   const t = useI18n();
+  const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
   const form = useForm({
     initialValues: innerProps.value,
   });
+  const { openModal } = useModalAction(WidgetAdvancedOptionsModal);
 
   const { definition } = widgetImports[innerProps.kind];
 
   return (
     <form
       onSubmit={form.onSubmit((values) => {
-        innerProps.onSuccessfulEdit(values);
+        innerProps.onSuccessfulEdit({
+          ...values,
+          advancedOptions,
+        });
         actions.closeModal();
       })}
     >
@@ -60,13 +69,32 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
 
             return <Input key={key} kind={innerProps.kind} property={key} options={value as never} />;
           })}
-          <Group justify="right">
+          <Group justify="space-between">
-            <Button onClick={actions.closeModal} variant="subtle" color="gray">
+            <Button
-              {t("common.action.cancel")}
+              variant="subtle"
-            </Button>
+              onClick={() =>
-            <Button type="submit" color="teal">
+                openModal({
-              {t("common.action.saveChanges")}
+                  advancedOptions,
+                  onSuccess(options) {
+                    setAdvancedOptions(options);
+                    innerProps.onSuccessfulEdit({
+                      ...innerProps.value,
+                      advancedOptions: options,
+                    });
+                  },
+                })
+              }
+            >
+              {t("item.edit.advancedOptions.label")}
             </Button>
+            <Group justify="end" w={{ base: "100%", xs: "auto" }}>
+              <Button onClick={actions.closeModal} variant="subtle" color="gray">
+                {t("common.action.cancel")}
+              </Button>
+              <Button type="submit" color="teal">
+                {t("common.action.saveChanges")}
+              </Button>
+            </Group>
           </Group>
         </Stack>
       </FormProvider>
@@ -74,4 +102,8 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
   );
 }).withOptions({
   keepMounted: true,
+  defaultTitle(t) {
+    return t("item.edit.title");
+  },
+  size: "lg",
 });

pnpm-lock.yaml

@@ -798,6 +798,9 @@ importers:
       '@homarr/log':
         specifier: workspace:^0.1.0
         version: link:../log
+      '@homarr/translation':
+        specifier: workspace:^0.1.0
+        version: link:../translation
     devDependencies:
       '@homarr/eslint-config':
         specifier: workspace:^0.2.0
@@ -926,6 +929,12 @@ importers:
       '@tiptap/starter-kit':
         specifier: ^2.4.0
         version: 2.4.0(@tiptap/pm@2.2.4)
+      prismjs:
+        specifier: ^1.29.0
+        version: 1.29.0
+      react-simple-code-editor:
+        specifier: ^0.13.1
+        version: 0.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       video.js:
         specifier: ^8.12.0
         version: 8.12.0
@@ -939,6 +948,9 @@ importers:
       '@homarr/tsconfig':
         specifier: workspace:^0.1.0
         version: link:../../tooling/typescript
+      '@types/prismjs':
+        specifier: ^1.26.4
+        version: 1.26.4
       '@types/video.js':
         specifier: ^7.3.58
         version: 7.3.58
@@ -2367,6 +2379,9 @@ packages:
   '@types/object.pick@1.3.4':
     resolution: {integrity: sha512-5PjwB0uP2XDp3nt5u5NJAG2DORHIRClPzWT/TTZhJ2Ekwe8M5bA9tvPdi9NO/n2uvu2/ictat8kgqvLfcIE1SA==}
 
+  '@types/prismjs@1.26.4':
+    resolution: {integrity: sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==}
+
   '@types/prop-types@15.7.11':
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
 
@@ -4647,6 +4662,10 @@ packages:
   pretty-format@3.8.0:
     resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
 
+  prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+
   process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
@@ -4784,6 +4803,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-simple-code-editor@0.13.1:
+    resolution: {integrity: sha512-XYeVwRZwgyKtjNIYcAEgg2FaQcCZwhbarnkJIV20U2wkCU9q/CPFBo8nRXrK4GXUz3AvbqZFsZRrpUTkqqEYyQ==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   react-style-singleton@2.2.1:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -6968,6 +6993,8 @@ snapshots:
 
   '@types/object.pick@1.3.4': {}
 
+  '@types/prismjs@1.26.4': {}
+
   '@types/prop-types@15.7.11': {}
 
   '@types/qs@6.9.11': {}
@@ -9614,6 +9641,8 @@ snapshots:
 
   pretty-format@3.8.0: {}
 
+  prismjs@1.29.0: {}
+
   process@0.11.10: {}
 
   prop-types@15.8.1:
@@ -9799,6 +9828,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.2
 
+  react-simple-code-editor@0.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-style-singleton@2.2.1(@types/react@18.3.2)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1