diff --git a/packages/old-import/src/widgets/options.ts b/packages/old-import/src/widgets/options.ts
index 6c9b44d7c..e9082565f 100644
--- a/packages/old-import/src/widgets/options.ts
+++ b/packages/old-import/src/widgets/options.ts
@@ -2,8 +2,8 @@ import { objectEntries } from "@homarr/common";
import { logger } from "@homarr/log";
import type { WidgetComponentProps } from "../../../widgets/src/definition";
-import { mapKind } from "./definitions";
import type { InversedWidgetMapping, OldmarrWidgetDefinitions, WidgetMapping } from "./definitions";
+import { mapKind } from "./definitions";
// This type enforces, that for all widget mappings there is a corresponding option mapping,
// each option of newmarr can be mapped from the value of the oldmarr options
@@ -38,6 +38,9 @@ const optionMapping: OptionMapping = {
return mappedLayouts[oldOptions.layout];
},
+ hideIcon: (oldOptions) => oldOptions.items.some((item) => item.hideIcon),
+ hideHostname: (oldOptions) => oldOptions.items.some((item) => item.hideHostname),
+ openNewTab: (oldOptions) => oldOptions.items.some((item) => item.openNewTab),
},
calendar: {
releaseType: (oldOptions) => [oldOptions.radarrReleaseType],
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 04f487041..86596a08e 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1067,6 +1067,15 @@
}
}
},
+ "hideIcon": {
+ "label": "Hide icons"
+ },
+ "hideHostname": {
+ "label": "Hide hostnames"
+ },
+ "openNewTab": {
+ "label": "Open in new tab"
+ },
"items": {
"label": "Bookmarks",
"add": "Add bookmark"
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index b4383fb42..721965f21 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Anchor, Box, Card, Divider, Flex, Group, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import { Anchor, Box, Card, Divider, Flex, Group, Image, Stack, Text, Title, UnstyledButton } from "@mantine/core";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
@@ -42,8 +42,25 @@ export default function BookmarksWidget({ options, width, height, itemId }: Widg
{options.title}
- {options.layout === "grid" && }
- {options.layout !== "grid" && }
+ {options.layout === "grid" && (
+
+ )}
+ {options.layout !== "grid" && (
+
+ )}
);
}
@@ -51,9 +68,12 @@ export default function BookmarksWidget({ options, width, height, itemId }: Widg
interface FlexLayoutProps {
data: RouterOutputs["app"]["byIds"];
direction: "row" | "column";
+ hideIcon: boolean;
+ hideHostname: boolean;
+ openNewTab: boolean;
}
-const FlexLayout = ({ data, direction }: FlexLayoutProps) => {
+const FlexLayout = ({ data, direction, hideIcon, hideHostname, openNewTab }: FlexLayoutProps) => {
return (
{data.map((app, index) => (
@@ -66,7 +86,7 @@ const FlexLayout = ({ data, direction }: FlexLayoutProps) => {
{
display="flex"
p={0}
>
- {direction === "row" ? : }
+ {direction === "row" ? (
+
+ ) : (
+
+ )}
@@ -94,9 +118,12 @@ interface GridLayoutProps {
data: RouterOutputs["app"]["byIds"];
width: number;
height: number;
+ hideIcon: boolean;
+ hideHostname: boolean;
+ openNewTab: boolean;
}
-const GridLayout = ({ data, width, height }: GridLayoutProps) => {
+const GridLayout = ({ data, width, height, hideIcon, hideHostname, openNewTab }: GridLayoutProps) => {
// Calculates the perfect number of columns for the grid layout based on the width and height in pixels and the number of items
const columns = Math.ceil(Math.sqrt(data.length * (width / height)));
@@ -113,13 +140,13 @@ const GridLayout = ({ data, width, height }: GridLayoutProps) => {
-
+
))}
@@ -127,55 +154,79 @@ const GridLayout = ({ data, width, height }: GridLayoutProps) => {
);
};
-const VerticalItem = ({ app }: { app: RouterOutputs["app"]["byIds"][number] }) => {
+const VerticalItem = ({
+ app,
+ hideIcon,
+ hideHostname,
+}: {
+ app: RouterOutputs["app"]["byIds"][number];
+ hideIcon: boolean;
+ hideHostname: boolean;
+}) => {
return (
{app.name}
-
-
- {app.href ? new URL(app.href).hostname : undefined}
-
+ {!hideIcon && (
+
+ )}
+ {!hideHostname && (
+
+ {app.href ? new URL(app.href).hostname : undefined}
+
+ )}
);
};
-const HorizontalItem = ({ app }: { app: RouterOutputs["app"]["byIds"][number] }) => {
+const HorizontalItem = ({
+ app,
+ hideIcon,
+ hideHostname,
+}: {
+ app: RouterOutputs["app"]["byIds"][number];
+ hideIcon: boolean;
+ hideHostname: boolean;
+}) => {
return (
-
+ {!hideIcon && (
+
+ )}
{app.name}
-
- {app.href ? new URL(app.href).hostname : undefined}
-
+ {!hideHostname && (
+
+ {app.href ? new URL(app.href).hostname : undefined}
+
+ )}
);
diff --git a/packages/widgets/src/bookmarks/index.tsx b/packages/widgets/src/bookmarks/index.tsx
index dccd16e3d..959a8601d 100644
--- a/packages/widgets/src/bookmarks/index.tsx
+++ b/packages/widgets/src/bookmarks/index.tsx
@@ -19,6 +19,9 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
})),
defaultValue: "column",
}),
+ hideIcon: factory.switch({ defaultValue: false }),
+ hideHostname: factory.switch({ defaultValue: false }),
+ openNewTab: factory.switch({ defaultValue: true }),
items: factory.sortableItemList({
ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => {
return (