feat: add bookmark widget

packages/definitions/src/widget.ts

@@ -12,5 +12,6 @@ export const widgetKinds = [
   "mediaServer",
   "calendar",
   "rssFeed",
+  "bookmarks"
 ] as const;
 export type WidgetKind = (typeof widgetKinds)[number];

packages/translation/src/lang/en.ts

@@ -745,6 +745,15 @@ export default {
         },
       },
     },
+    bookmarks: {
+      name: "Bookmarks",
+      description: "Displays a static list of strings or links",
+      option: {
+        title: {
+          label: "Title",
+        }
+      }
+    },
     dnsHoleSummary: {
       name: "DNS Hole Summary",
       description: "Displays the summary of your DNS Hole",

packages/widgets/src/_inputs/index.ts

@@ -8,6 +8,7 @@ import { WidgetSelectInput } from "./widget-select-input";
 import { WidgetSliderInput } from "./widget-slider-input";
 import { WidgetSwitchInput } from "./widget-switch-input";
 import { WidgetTextInput } from "./widget-text-input";
+import {WidgetOrderedObjectListInput} from "./widget-ordered-object-list-input";
 
 const mapping = {
   text: WidgetTextInput,
@@ -19,6 +20,7 @@ const mapping = {
   slider: WidgetSliderInput,
   switch: WidgetSwitchInput,
   app: WidgetAppInput,
+  orderedObjectList: WidgetOrderedObjectListInput
 } satisfies Record<WidgetOptionType, unknown>;
 
 export const getInputForType = <TType extends WidgetOptionType>(type: TType) => {

packages/widgets/src/_inputs/widget-ordered-object-list-input.tsx

@@ -0,0 +1,8 @@
+import type {CommonWidgetInputProps} from "./common";
+
+export const WidgetOrderedObjectListInput = ({ property, kind, options }: CommonWidgetInputProps<"orderedObjectList">) => {
+  return <div>
+    {JSON.stringify(options)}
+    <span>AAAA!</span>
+  </div>
+}

packages/widgets/src/bookmarks/bookmark-item.ts

@@ -0,0 +1 @@
+export interface BookmarkItem {}

packages/widgets/src/bookmarks/component.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import {Code, Stack, Title} from "@mantine/core";
+import type {WidgetComponentProps} from "../definition";
+
+export default function BookmarksWidget({options}: WidgetComponentProps<"bookmarks">) {
+  return <Stack>
+    <Title size="h4" px="0.25rem">
+      {options.title}
+    </Title>
+    <Code mx={"md"} block>
+      {JSON.stringify(options)}
+    </Code>
+  </Stack>
+}

packages/widgets/src/bookmarks/index.tsx

@@ -0,0 +1,19 @@
+import {IconClock} from "@tabler/icons-react";
+
+import {createWidgetDefinition} from "../definition";
+import {optionsBuilder} from "../options";
+import type {BookmarkItem} from "./bookmark-item";
+
+export const {definition, componentLoader} = createWidgetDefinition("bookmarks", {
+  icon: IconClock,
+  options: optionsBuilder.from(
+    (factory) => ({
+      title: factory.text(),
+      items: factory.orderedObjectList<BookmarkItem>({
+        itemComponent: (bookmarkItem) => {
+          return <span>Bookmark: {JSON.stringify(bookmarkItem)}</span>
+        }
+      })
+    }),
+  ),
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/index.tsx

@@ -20,6 +20,7 @@ import * as smartHomeEntityState from "./smart-home/entity-state";
 import * as smartHomeExecuteAutomation from "./smart-home/execute-automation";
 import * as video from "./video";
 import * as weather from "./weather";
+import * as bookmarks from "./bookmarks";
 
 export { reduceWidgetOptionsWithDefaultValues } from "./options";
 
@@ -43,6 +44,7 @@ export const widgetImports = {
   mediaServer,
   calendar,
   rssFeed,
+  bookmarks
 } satisfies WidgetImportRecord;
 
 export type WidgetImports = typeof widgetImports;

packages/widgets/src/options.ts

@@ -5,6 +5,7 @@ import { z } from "@homarr/validation";
 
 import { widgetImports } from ".";
 import type { inferSelectOptionValue, SelectOption } from "./_inputs/widget-select-input";
+import React from "react";
 
 interface CommonInput<TType> {
   defaultValue?: TType;
@@ -109,6 +110,11 @@ const optionsFactory = {
     defaultValue: "",
     withDescription: input?.withDescription ?? false,
   }),
+  orderedObjectList: <TItem>(input?: (Omit<CommonInput<string>, "defaultValue"> & { itemComponent: (item: TItem) => React.ReactNode })) => ({
+    type: "orderedObjectList" as const,
+    defaultValue: [],
+    itemComponent: input?.itemComponent ?? null,
+  }),
 };
 
 type WidgetOptionFactory = typeof optionsFactory;