feat(widgets): add border color option to advanced-options (#2512)

* feat: add border color option for all widgets

* fix: broken lockfile

* fix: typecheck issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

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

@@ -49,6 +49,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
     integrationIds: [],
     advancedOptions: {
       customCssClasses: [],
+      borderColor: "",
     },
   });
 

apps/nextjs/src/components/board/items/actions/create-item.ts

@@ -29,6 +29,7 @@ export const createItemCallback =
       integrationIds: [],
       advancedOptions: {
         customCssClasses: [],
+        borderColor: "",
       },
     } satisfies Modify<
       Item,

apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts

@@ -20,7 +20,7 @@ describe("item actions duplicate-item", () => {
       kind: itemKind,
       integrationIds: ["1"],
       options: { address: "localhost" },
-      advancedOptions: { customCssClasses: ["test"] },
+      advancedOptions: { customCssClasses: ["test"], borderColor: "#ff0000" },
     })
       .addLayout({ layoutId, sectionId: currentSectionId, ...currentItemSize })
       .build();

apps/nextjs/src/components/board/items/actions/test/mocks/item-mock.ts

@@ -14,6 +14,7 @@ export class ItemMockBuilder {
       integrationIds: [],
       advancedOptions: {
         customCssClasses: [],
+        borderColor: "",
       },
       ...item,
     } satisfies Item;

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

@@ -40,6 +40,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
           "--opacity": board.opacity / 100,
           containerType: "size",
           overflow: item.kind === "iframe" ? "hidden" : undefined,
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
         },
       }}
       p={0}

packages/translation/src/lang/en.json

@@ -1070,6 +1070,9 @@
         },
         "customCssClasses": {
           "label": "Custom css classes"
+        },
+        "borderColor": {
+          "label": "Border color"
         }
       }
     },

packages/validation/src/shared.ts

@@ -15,6 +15,7 @@ export type BoardItemIntegration = z.infer<typeof integrationSchema>;
 
 export const itemAdvancedOptionsSchema = z.object({
   customCssClasses: z.array(z.string()).default([]),
+  borderColor: z.string().default(""),
 });
 
 export type BoardItemAdvancedOptions = z.infer<typeof itemAdvancedOptionsSchema>;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Group, Stack } from "@mantine/core";
+import { Button, CloseButton, ColorInput, Group, Stack, useMantineTheme } from "@mantine/core";
 
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
@@ -15,6 +15,7 @@ interface InnerProps {
 
 export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, innerProps }) => {
   const t = useI18n();
+  const theme = useMantineTheme();
   const form = useForm({
     initialValues: innerProps.advancedOptions,
   });
@@ -30,6 +31,18 @@ export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, in
           label={t("item.edit.field.customCssClasses.label")}
           {...form.getInputProps("customCssClasses")}
         />
+        <ColorInput
+          label={t("item.edit.field.borderColor.label")}
+          format="hex"
+          swatches={Object.values(theme.colors).map((color) => color[6])}
+          rightSection={
+            <CloseButton
+              onClick={() => form.setFieldValue("borderColor", "")}
+              style={{ display: form.getInputProps("borderColor").value ? undefined : "none" }}
+            />
+          }
+          {...form.getInputProps("borderColor")}
+        />
         <Group justify="end">
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}

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

@@ -65,6 +65,7 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
         integrationIds: z.array(z.string()),
         advancedOptions: z.object({
           customCssClasses: z.array(z.string()),
+          borderColor: z.string(),
         }),
       }),
     ),