feat: add bookmarks options (apps) (#2048)

2026-02-27 00:40:58 +01:00 · 2025-01-23 22:10:16 +02:00
parent 860b73fa3f
commit 132db15424
4 changed files with 109 additions and 43 deletions
--- 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],
--- 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"
--- 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
      <Title order={4} px="0.25rem">
        {options.title}
      </Title>
-      {options.layout === "grid" && <GridLayout data={data} width={width} height={height} />}
-      {options.layout !== "grid" && <FlexLayout data={data} direction={options.layout} />}
+      {options.layout === "grid" && (
+        <GridLayout
+          data={data}
+          width={width}
+          height={height}
+          hideIcon={options.hideIcon}
+          hideHostname={options.hideHostname}
+          openNewTab={options.openNewTab}
+        />
+      )}
+      {options.layout !== "grid" && (
+        <FlexLayout
+          data={data}
+          direction={options.layout}
+          hideIcon={options.hideIcon}
+          hideHostname={options.hideHostname}
+          openNewTab={options.openNewTab}
+        />
+      )}
    </Stack>
  );
 }
@@ -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 (
    <Flex direction={direction} gap="0" h="100%" w="100%">
      {data.map((app, index) => (
@@ -66,7 +86,7 @@ const FlexLayout = ({ data, direction }: FlexLayoutProps) => {
          <UnstyledButton
            component="a"
            href={app.href ?? undefined}
-            target="_blank"
+            target={openNewTab ? "_blank" : "_self"}
            rel="noopener noreferrer"
            key={app.id}
            h="100%"
@@ -81,7 +101,11 @@ const FlexLayout = ({ data, direction }: FlexLayoutProps) => {
              display="flex"
              p={0}
            >
-              {direction === "row" ? <VerticalItem app={app} /> : <HorizontalItem app={app} />}
+              {direction === "row" ? (
+                <VerticalItem app={app} hideIcon={hideIcon} hideHostname={hideHostname} />
+              ) : (
+                <HorizontalItem app={app} hideIcon={hideIcon} hideHostname={hideHostname} />
+              )}
            </Card>
          </UnstyledButton>
        </div>
@@ -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) => {
        <UnstyledButton
          component="a"
          href={app.href ?? undefined}
-          target="_blank"
+          target={openNewTab ? "_blank" : "_self"}
          rel="noopener noreferrer"
          key={app.id}
          h="100%"
        >
          <Card withBorder style={{ containerType: "size" }} h="100%" className={classes.card} p="5cqmin">
-            <VerticalItem app={app} />
+            <VerticalItem app={app} hideIcon={hideIcon} hideHostname={hideHostname} />
          </Card>
        </UnstyledButton>
      ))}
@@ -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 (
    <Stack h="100%" gap="5cqmin">
      <Text fw={700} ta="center" size="20cqmin">
        {app.name}
      </Text>
-      <img
-        style={{
-          maxHeight: "100%",
-          maxWidth: "100%",
-          overflow: "auto",
-          flex: 1,
-          objectFit: "contain",
-          scale: 0.8,
-        }}
-        src={app.iconUrl}
-        alt={app.name}
-      />
-      <Anchor ta="center" component="span" size="12cqmin">
-        {app.href ? new URL(app.href).hostname : undefined}
-      </Anchor>
+      {!hideIcon && (
+        <Image
+          style={{
+            maxHeight: "100%",
+            maxWidth: "100%",
+            overflow: "auto",
+            flex: 1,
+            objectFit: "contain",
+            scale: 0.8,
+          }}
+          src={app.iconUrl}
+          alt={app.name}
+        />
+      )}
+      {!hideHostname && (
+        <Anchor ta="center" component="span" size="12cqmin">
+          {app.href ? new URL(app.href).hostname : undefined}
+        </Anchor>
+      )}
    </Stack>
  );
 };

-const HorizontalItem = ({ app }: { app: RouterOutputs["app"]["byIds"][number] }) => {
+const HorizontalItem = ({
+  app,
+  hideIcon,
+  hideHostname,
+}: {
+  app: RouterOutputs["app"]["byIds"][number];
+  hideIcon: boolean;
+  hideHostname: boolean;
+}) => {
  return (
    <Group wrap="nowrap">
-      <img
-        style={{
-          overflow: "auto",
-          objectFit: "contain",
-          scale: 0.8,
-          minHeight: "100cqh",
-          maxHeight: "100cqh",
-          minWidth: "100cqh",
-          maxWidth: "100cqh",
-        }}
-        src={app.iconUrl}
-        alt={app.name}
-      />
+      {!hideIcon && (
+        <Image
+          style={{
+            overflow: "auto",
+            objectFit: "contain",
+            scale: 0.8,
+            minHeight: "100cqh",
+            maxHeight: "100cqh",
+            minWidth: "100cqh",
+            maxWidth: "100cqh",
+          }}
+          src={app.iconUrl}
+          alt={app.name}
+        />
+      )}
      <Stack justify="space-between" gap={0}>
        <Text fw={700} size="45cqh" lineClamp={1}>
          {app.name}
        </Text>

-        <Anchor component="span" size="30cqh">
-          {app.href ? new URL(app.href).hostname : undefined}
-        </Anchor>
+        {!hideHostname && (
+          <Anchor component="span" size="30cqh">
+            {app.href ? new URL(app.href).hostname : undefined}
+          </Anchor>
+        )}
      </Stack>
    </Group>
  );
--- 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<RouterOutputs["app"]["all"][number], string>({
      ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => {
        return (