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.name} - - {app.href ? new URL(app.href).hostname : undefined} - + {!hideIcon && ( + {app.name} + )} + {!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 ( - {app.name} + {!hideIcon && ( + {app.name} + )} {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 (