feat: rework bookmarks widget

packages/widgets/src/_inputs/widget-sortable-item-list-input.tsx

@@ -112,7 +112,7 @@ export const WidgetSortedItemListInput = <TItem, TOptionValue extends UniqueIden
   return (
     <Fieldset legend={t("label")}>
       <Stack>
-        <options.addButton addItem={addItem} removeItem={removeItem} values={values} />
+        <options.addButton addItem={addItem} removeItem={removeItem} values={values} initialOptions={initialOptions} />
 
         <DndContext
           sensors={sensors}

packages/widgets/src/bookmarks/add-button.tsx

@@ -1,79 +1,204 @@
 "use client";
 
-import type { MultiSelectProps } from "@mantine/core";
-import { Group, Loader, MultiSelect } from "@mantine/core";
-import { IconCheck } from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Avatar,
+  Combobox,
+  Group,
+  Loader,
+  PillsInput,
+  ScrollArea,
+  Stack,
+  Text,
+  ThemeIcon,
+  useCombobox,
+} from "@mantine/core";
+import { IconCheck, IconLink, IconPlus } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useI18n } from "@homarr/translation/client";
 
 import type { SortableItemListInput } from "../options";
+import {
+  createDirectBookmark,
+  getBookmarkFaviconUrl,
+  getDirectBookmarkValue,
+  splitBookmarkUrls,
+} from "./bookmark-item";
+import type { BookmarkItem } from "./bookmark-item";
 
 type SelectableApp = RouterOutputs["app"]["selectable"][number];
+export type BookmarkSelectionItem = SelectableApp | BookmarkItem;
 
-export const BookmarkAddButton: SortableItemListInput<SelectableApp, string>["AddButton"] = ({
+const createOptionValue = "$create-url";
+
+export const BookmarkAddButton: SortableItemListInput<BookmarkSelectionItem, string>["AddButton"] = ({
   addItem,
-  removeItem,
   values,
+  initialOptions,
 }) => {
   const t = useI18n("widget.bookmarks.option.items.apps");
   const tCommon = useI18n("common");
   const tSelect = useI18n("app.action.select");
   const { data: apps = [], isPending, error } = clientApi.app.selectable.useQuery();
-  const appsById = new Map(apps.map((app) => [app.id, app]));
+  const [search, setSearch] = useState("");
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+    onDropdownOpen: () => combobox.updateSelectedOptionIndex("active"),
+  });
+  const selectedValues = useMemo(() => new Set(values), [values]);
+  const legacyUrls = useMemo(() => {
+    if (!Array.isArray(initialOptions.customUrls)) return [];
+    return initialOptions.customUrls.filter((value): value is string => typeof value === "string");
+  }, [initialOptions.customUrls]);
 
-  const handleChange = (nextValues: string[]) => {
-    const nextIds = new Set(nextValues);
-    for (const value of values) {
-      if (!nextIds.has(value)) removeItem(value);
+  useEffect(() => {
+    for (const url of legacyUrls) {
+      const item = createDirectBookmark(url);
+      if (item && !selectedValues.has(item.id)) addItem(item);
     }
+  }, [addItem, legacyUrls, selectedValues]);
 
-    const currentIds = new Set(values);
-    for (const value of nextValues) {
-      if (currentIds.has(value)) continue;
-      const app = appsById.get(value);
-      if (app) addItem(app);
+  const normalizedSearch = search.trim().toLocaleLowerCase();
+  const filteredApps = apps.filter((app) => {
+    if (selectedValues.has(app.id)) return false;
+    if (normalizedSearch.length === 0) return true;
+
+    return (
+      app.name.toLocaleLowerCase().includes(normalizedSearch) ||
+      app.href?.toLocaleLowerCase().includes(normalizedSearch)
+    );
+  });
+  const pendingUrl = createDirectBookmark(search);
+
+  const addUrls = (input: string) => {
+    const nextValues = new Set(values);
+    for (const value of splitBookmarkUrls(input)) {
+      const item = createDirectBookmark(value);
+      if (!item || nextValues.has(item.id)) continue;
+      addItem(item);
+      nextValues.add(item.id);
     }
+    setSearch("");
+    combobox.closeDropdown();
   };
 
+  const handleOptionSubmit = (value: string) => {
+    if (value === createOptionValue) {
+      addUrls(search);
+      return;
+    }
+
+    const app = apps.find((candidate) => candidate.id === value);
+    if (app) addItem(app);
+    setSearch("");
+  };
+
+  const options = filteredApps.map((app) => (
+    <Combobox.Option value={app.id} key={app.id}>
+      <Group gap="sm" wrap="nowrap">
+        <Avatar src={app.iconUrl} name={app.name} color="gray" size={28} radius="sm">
+          <IconLink size={16} />
+        </Avatar>
+        <Stack gap={0} miw={0} flex={1}>
+          <Text size="sm" fw={600} truncate>
+            {app.name}
+          </Text>
+          <Text size="xs" c="dimmed" truncate>
+            {app.href}
+          </Text>
+        </Stack>
+        <IconPlus size={16} aria-hidden />
+      </Group>
+    </Combobox.Option>
+  ));
+
   return (
-    <MultiSelect
-      label={t("label")}
-      placeholder={t("placeholder")}
-      value={values}
-      onChange={handleChange}
-      searchable
-      clearable
-      clearSearchOnChange
-      hidePickedOptions
-      disabled={isPending || Boolean(error)}
-      error={error ? tCommon("error") : undefined}
-      rightSection={isPending ? <Loader size="xs" /> : undefined}
-      nothingFoundMessage={tSelect("notFound")}
-      renderOption={renderAppOption}
-      data={apps.map((app) => ({
-        value: app.id,
-        label: app.name,
-        iconUrl: app.iconUrl,
-      }))}
-    />
+    <Combobox
+      store={combobox}
+      onOptionSubmit={handleOptionSubmit}
+      position="bottom-start"
+      middlewares={{ flip: true, shift: true }}
+      styles={{
+        dropdown: { overflow: "hidden" },
+        option: { borderRadius: "var(--mantine-radius-sm)" },
+      }}
+    >
+      <Combobox.DropdownTarget>
+        <PillsInput
+          label={t("label")}
+          description={t("description")}
+          error={error ? tCommon("error") : undefined}
+          onClick={() => combobox.openDropdown()}
+          leftSection={
+            <ThemeIcon variant="light" size="sm" radius="xl">
+              <IconLink size={14} />
+            </ThemeIcon>
+          }
+          rightSection={isPending ? <Loader size="xs" /> : undefined}
+          styles={{ input: { minHeight: 44 } }}
+        >
+          <Combobox.EventsTarget>
+            <PillsInput.Field
+              value={search}
+              placeholder={t("placeholder")}
+              disabled={Boolean(error)}
+              onFocus={() => combobox.openDropdown()}
+              onBlur={() => combobox.closeDropdown()}
+              onChange={(event) => {
+                setSearch(event.currentTarget.value);
+                combobox.openDropdown();
+                combobox.updateSelectedOptionIndex();
+              }}
+              onPaste={(event) => {
+                const pastedValue = event.clipboardData.getData("text");
+                if (splitBookmarkUrls(pastedValue).length < 2) return;
+                event.preventDefault();
+                addUrls(pastedValue);
+              }}
+              onKeyDown={(event) => {
+                if (event.key !== "Enter" && event.key !== ",") return;
+                if (!pendingUrl) return;
+                event.preventDefault();
+                addUrls(search);
+              }}
+            />
+          </Combobox.EventsTarget>
+        </PillsInput>
+      </Combobox.DropdownTarget>
+
+      <Combobox.Dropdown>
+        <ScrollArea.Autosize mah={280} type="auto">
+          <Combobox.Options>
+            {pendingUrl && !selectedValues.has(getDirectBookmarkValue(pendingUrl.href ?? "")) ? (
+              <Combobox.Option value={createOptionValue}>
+                <Group gap="sm" wrap="nowrap">
+                  <Avatar src={getBookmarkFaviconUrl(pendingUrl.href)} size={28} radius="sm" color="gray">
+                    <IconLink size={16} />
+                  </Avatar>
+                  <Stack gap={0} miw={0} flex={1}>
+                    <Text size="sm" fw={600} truncate>
+                      {t("addUrl")}
+                    </Text>
+                    <Text size="xs" c="dimmed" truncate>
+                      {pendingUrl.href}
+                    </Text>
+                  </Stack>
+                  <IconCheck size={16} aria-hidden />
+                </Group>
+              </Combobox.Option>
+            ) : null}
+            {options}
+            {!pendingUrl && options.length === 0 ? <Combobox.Empty>{tSelect("notFound")}</Combobox.Empty> : null}
+          </Combobox.Options>
+        </ScrollArea.Autosize>
+        <Combobox.Footer>
+          <Text size="xs" c="dimmed">
+            {t("hint")}
+          </Text>
+        </Combobox.Footer>
+      </Combobox.Dropdown>
+    </Combobox>
   );
 };
-
-const iconProps = {
-  stroke: 1.5,
-  color: "currentColor",
-  opacity: 0.6,
-  size: 18,
-};
-
-const renderAppOption: MultiSelectProps["renderOption"] = ({ option, checked }) => (
-  <Group flex="1" gap="xs">
-    {"iconUrl" in option && typeof option.iconUrl === "string" ? (
-      <img width={20} height={20} src={option.iconUrl} alt="" />
-    ) : null}
-    {option.label}
-    {checked && <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />}
-  </Group>
-);

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

@@ -0,0 +1,59 @@
+import { getSafeApplicationUrl } from "../common/application-url";
+
+export const directBookmarkPrefix = "url:";
+
+export interface BookmarkItem {
+  id: string;
+  name: string;
+  description: string | null;
+  iconUrl?: string;
+  href: string | null;
+}
+
+export const normalizeBookmarkUrl = (value: string): string | undefined => {
+  const trimmedValue = value.trim();
+  if (trimmedValue.length === 0) return undefined;
+
+  const directUrl = getSafeApplicationUrl(trimmedValue);
+  if (directUrl) return directUrl;
+
+  if (/^(?:localhost(?::\d+)?|(?:[\w-]+\.)+[\w-]+(?::\d+)?)(?:[/?#].*)?$/i.test(trimmedValue)) {
+    return getSafeApplicationUrl(`https://${trimmedValue}`);
+  }
+
+  return undefined;
+};
+
+export const getDirectBookmarkValue = (url: string) => `${directBookmarkPrefix}${url}`;
+
+export const getDirectBookmarkUrl = (value: string): string | undefined => {
+  if (!value.startsWith(directBookmarkPrefix)) return undefined;
+  return normalizeBookmarkUrl(value.slice(directBookmarkPrefix.length));
+};
+
+export const getBookmarkFaviconUrl = (href: string | null): string | undefined => {
+  const safeUrl = getSafeApplicationUrl(href);
+  if (!safeUrl) return undefined;
+
+  const url = new URL(safeUrl);
+  return `${url.origin}/favicon.ico`;
+};
+
+export const createDirectBookmark = (url: string): BookmarkItem | undefined => {
+  const href = normalizeBookmarkUrl(url);
+  if (!href) return undefined;
+
+  const parsedUrl = new URL(href);
+  return {
+    id: getDirectBookmarkValue(href),
+    name: parsedUrl.hostname,
+    description: null,
+    href,
+  };
+};
+
+export const splitBookmarkUrls = (value: string) =>
+  value
+    .split(/[,\n]+/)
+    .map((part) => part.trim())
+    .filter(Boolean);

packages/widgets/src/bookmarks/bookmarks-widget.tsx

@@ -0,0 +1,465 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import {
+  Avatar,
+  Box,
+  Card,
+  Center,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import { useReducedMotion } from "@mantine/hooks";
+import { IconArrowUpRight, IconBookmark, IconLink } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useRegisterSpotlightContextResults } from "@homarr/spotlight";
+import { useI18n } from "@homarr/translation/client";
+
+import { getSafeAppHref, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import type { WidgetComponentProps } from "../definition";
+import { createDirectBookmark, getBookmarkFaviconUrl, getDirectBookmarkUrl } from "./bookmark-item";
+import type { BookmarkItem } from "./bookmark-item";
+
+type BookmarkLayout = WidgetComponentProps<"bookmarks">["options"]["layout"];
+type BookmarkVariant = WidgetComponentProps<"bookmarks">["options"]["variant"];
+type BookmarkOrientation = "horizontal" | "vertical" | "icon";
+
+interface BookmarkDisplayPlan {
+  columns: number;
+  horizontalScroll: boolean;
+  itemHeight: number;
+  itemWidth: number;
+  orientation: BookmarkOrientation;
+  showHostname: boolean;
+  showTitle: boolean;
+}
+
+const getBookmarkDisplayPlan = ({
+  advanced,
+  height,
+  itemCount,
+  layout,
+  width,
+}: {
+  advanced: boolean;
+  height: number;
+  itemCount: number;
+  layout: BookmarkLayout;
+  width: number;
+}): BookmarkDisplayPlan => {
+  const count = Math.max(1, itemCount);
+  const availableWidth = Math.max(1, width - 16);
+  const availableHeight = Math.max(1, height - 16);
+
+  if (advanced) {
+    const columns = Math.max(1, Math.min(count, Math.floor(availableWidth / 260)));
+    return {
+      columns,
+      horizontalScroll: false,
+      itemHeight: 104,
+      itemWidth: 260,
+      orientation: "horizontal",
+      showHostname: true,
+      showTitle: true,
+    };
+  }
+
+  if (layout === "row") {
+    const itemWidth = Math.max(96, Math.min(180, availableWidth / Math.min(count, 4)));
+    return {
+      columns: count,
+      horizontalScroll: true,
+      itemHeight: Math.max(48, availableHeight),
+      itemWidth,
+      orientation: availableHeight < 64 ? "icon" : "vertical",
+      showHostname: availableHeight >= 112,
+      showTitle: availableHeight >= 72,
+    };
+  }
+
+  if (layout === "column") {
+    const itemHeight = Math.max(46, Math.min(72, availableHeight / count));
+    return {
+      columns: 1,
+      horizontalScroll: false,
+      itemHeight,
+      itemWidth: availableWidth,
+      orientation: "horizontal",
+      showHostname: itemHeight >= 56 && availableWidth >= 150,
+      showTitle: availableWidth >= 92,
+    };
+  }
+
+  if (layout === "icons") {
+    const columns = Math.max(1, Math.min(count, Math.floor(availableWidth / 64)));
+    return {
+      columns,
+      horizontalScroll: false,
+      itemHeight: 56,
+      itemWidth: 56,
+      orientation: "icon",
+      showHostname: false,
+      showTitle: false,
+    };
+  }
+
+  const minimumWidth = layout === "gridHorizontal" ? 168 : layout === "grid" ? 104 : 64;
+  let columns = Math.max(1, Math.min(count, Math.floor(availableWidth / minimumWidth)));
+  if (layout === "adaptive") {
+    const targetAspectRatio = 1.7;
+    const idealColumns = Math.max(
+      1,
+      Math.round(Math.sqrt((availableWidth * count) / (availableHeight * targetAspectRatio))),
+    );
+    columns = Math.min(columns, idealColumns);
+  }
+  const rows = Math.max(1, Math.ceil(count / columns));
+  const cellWidth = availableWidth / columns;
+  const cellHeight = availableHeight / rows;
+  let orientation: BookmarkOrientation = layout === "grid" ? "vertical" : "horizontal";
+
+  if (layout === "adaptive") {
+    if (cellHeight < 54 || cellWidth < 72) orientation = "icon";
+    else if (cellWidth / cellHeight > 1.35 || cellHeight < 92) orientation = "horizontal";
+    else orientation = "vertical";
+  }
+
+  return {
+    columns,
+    horizontalScroll: false,
+    itemHeight: Math.max(52, Math.min(128, cellHeight)),
+    itemWidth: layout === "adaptive" ? 144 : minimumWidth,
+    orientation,
+    showHostname: orientation !== "icon" && cellWidth >= 138 && cellHeight >= 64,
+    showTitle: orientation !== "icon" && cellWidth >= 88 && cellHeight >= 48,
+  };
+};
+
+export default function BookmarksWidget({
+  options,
+  itemId,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"bookmarks">) {
+  const t = useI18n("widget.bookmarks");
+  const board = useRequiredBoard();
+  const advanced = displayMode === "advanced";
+  const appIds = useMemo(() => options.items.filter((value) => !getDirectBookmarkUrl(value)), [options.items]);
+  const apps =
+    getUsableWidgetQueryData(
+      clientApi.app.byIds.useQuery(appIds, {
+        select(selectedApps) {
+          return selectedApps;
+        },
+      }),
+    ) ?? [];
+  const appsById = new Map(apps.map((app) => [app.id, app]));
+  const configuredItems = options.items.flatMap((value) => {
+    const directUrl = getDirectBookmarkUrl(value);
+    if (directUrl) return createDirectBookmark(directUrl) ?? [];
+    return appsById.get(value) ?? [];
+  });
+  const configuredHrefs = new Set(configuredItems.map((item) => item.href));
+  const legacyItems = options.customUrls.flatMap((url) => {
+    const item = createDirectBookmark(url);
+    if (!item || configuredHrefs.has(item.href)) return [];
+    return [item];
+  });
+  const data = [...configuredItems, ...legacyItems];
+
+  useRegisterSpotlightContextResults(
+    `bookmark-${itemId}`,
+    data.flatMap((bookmark) => {
+      const href = getSafeAppHref(bookmark.href);
+      if (!href) return [];
+
+      return [
+        {
+          id: bookmark.id,
+          name: bookmark.name,
+          icon: bookmark.iconUrl ?? IconLink,
+          interaction() {
+            return {
+              type: "link" as const,
+              href,
+              newTab: false,
+            };
+          },
+        },
+      ];
+    }),
+    [data],
+  );
+
+  const plan = useMemo(
+    () =>
+      getBookmarkDisplayPlan({
+        advanced,
+        height: options.title.length > 0 ? height - 36 : height,
+        itemCount: data.length,
+        layout: options.layout,
+        width,
+      }),
+    [advanced, data.length, height, options.layout, options.title.length, width],
+  );
+
+  const cards = data.map((bookmark) => (
+    <BookmarkCard
+      key={bookmark.id}
+      bookmark={bookmark}
+      advanced={advanced}
+      orientation={plan.orientation}
+      showHostname={advanced || (!options.hideHostname && plan.showHostname)}
+      showIcon={advanced || !options.hideIcon || (options.hideTitle && options.hideHostname)}
+      showTitle={advanced || (!options.hideTitle && plan.showTitle)}
+      openNewTab={options.openNewTab}
+      variant={options.variant}
+      withBorder={options.withBorder}
+      radius={board.itemRadius}
+      height={plan.itemHeight}
+      width={plan.horizontalScroll ? plan.itemWidth : undefined}
+    />
+  ));
+
+  return (
+    <Stack h="100%" mih={0} gap={height < 120 ? 6 : "sm"} p={height < 120 ? 6 : "sm"}>
+      {options.title.length > 0 ? (
+        <Text fz="xs" fw={600} px={2} lh={1.2} lineClamp={1}>
+          {options.title}
+        </Text>
+      ) : null}
+
+      {data.length === 0 ? (
+        <Center flex={1}>
+          <Stack align="center" gap={6}>
+            <ThemeIcon variant="light" size="lg" radius="xl">
+              <IconBookmark size={20} />
+            </ThemeIcon>
+            <Text size="sm" c="dimmed" ta="center">
+              {t("empty")}
+            </Text>
+          </Stack>
+        </Center>
+      ) : (
+        <ScrollArea
+          type="hover"
+          scrollbars={plan.horizontalScroll ? "x" : "y"}
+          scrollbarSize={2}
+          scrollHideDelay={500}
+          offsetScrollbars
+          style={{ flex: 1, minHeight: 0 }}
+        >
+          <Box miw="100%" mih="100%" pb={2}>
+            {plan.horizontalScroll ? (
+              <Group gap={6} wrap="nowrap" mih="100%" align="stretch">
+                {cards}
+              </Group>
+            ) : (
+              <SimpleGrid cols={plan.columns} spacing={6} verticalSpacing={6}>
+                {cards}
+              </SimpleGrid>
+            )}
+          </Box>
+        </ScrollArea>
+      )}
+    </Stack>
+  );
+}
+
+interface BookmarkCardProps {
+  advanced: boolean;
+  bookmark: BookmarkItem;
+  height: number;
+  openNewTab: boolean;
+  orientation: BookmarkOrientation;
+  radius: string;
+  showHostname: boolean;
+  showIcon: boolean;
+  showTitle: boolean;
+  variant: BookmarkVariant;
+  width?: number;
+  withBorder: boolean;
+}
+
+const BookmarkCard = ({
+  advanced,
+  bookmark,
+  height,
+  openNewTab,
+  orientation,
+  radius,
+  showHostname,
+  showIcon,
+  showTitle,
+  variant,
+  width,
+  withBorder,
+}: BookmarkCardProps) => {
+  const [active, setActive] = useState(false);
+  const reduceMotion = useReducedMotion();
+  const href = getSafeAppHref(bookmark.href);
+  const hostname = bookmark.href ? getBookmarkHostname(bookmark.href) : undefined;
+  const iconUrl = bookmark.iconUrl ?? getBookmarkFaviconUrl(bookmark.href);
+  const iconOnly = orientation === "icon" || (!showTitle && !showHostname);
+  const background = getBookmarkBackground(variant, active);
+
+  const content =
+    orientation === "vertical" && !advanced ? (
+      <Stack h="100%" align="center" justify="center" gap={6} flex={1}>
+        {showIcon ? <BookmarkAvatar bookmark={bookmark} iconUrl={iconUrl} size={iconOnly ? 34 : 38} /> : null}
+        {showTitle ? (
+          <Text fz={11} fw={600} lh={1.2} ta="center" lineClamp={2}>
+            {bookmark.name}
+          </Text>
+        ) : null}
+        {showHostname ? (
+          <Text fz={10} c="dimmed" ta="center" truncate w="100%">
+            {hostname}
+          </Text>
+        ) : null}
+      </Stack>
+    ) : (
+      <Group
+        h="100%"
+        gap={advanced ? "sm" : "xs"}
+        wrap="nowrap"
+        justify={iconOnly ? "center" : "flex-start"}
+        align="center"
+        flex={1}
+      >
+        {showIcon ? (
+          <BookmarkAvatar bookmark={bookmark} iconUrl={iconUrl} size={advanced ? 42 : iconOnly ? 32 : 30} />
+        ) : null}
+        {!iconOnly ? (
+          <Stack gap={advanced ? 3 : 0} miw={0} flex={1}>
+            {showTitle ? (
+              <Text fz={advanced ? "xs" : 11} fw={600} lh={1.2} truncate>
+                {bookmark.name}
+              </Text>
+            ) : null}
+            {showHostname ? (
+              <Text fz={advanced ? 11 : 10} c="dimmed" truncate>
+                {hostname}
+              </Text>
+            ) : null}
+            {advanced && bookmark.description ? (
+              <Text fz={11} c="dimmed" lineClamp={2}>
+                {bookmark.description}
+              </Text>
+            ) : null}
+          </Stack>
+        ) : null}
+        {advanced ? (
+          <ThemeIcon
+            variant={active ? "light" : "transparent"}
+            color={active ? "primaryColor" : "gray"}
+            size="sm"
+            radius="xl"
+            style={{
+              opacity: active ? 1 : 0.45,
+              transform: active && !reduceMotion ? "translate(1px, -1px)" : undefined,
+              transition: reduceMotion ? undefined : "opacity 120ms ease, transform 120ms ease",
+            }}
+          >
+            <IconArrowUpRight size={14} />
+          </ThemeIcon>
+        ) : null}
+      </Group>
+    );
+
+  return (
+    <Tooltip
+      label={
+        <Stack gap={0}>
+          <Text size="xs" fw={600}>
+            {bookmark.name}
+          </Text>
+          {hostname ? (
+            <Text size="xs" opacity={0.8}>
+              {hostname}
+            </Text>
+          ) : null}
+        </Stack>
+      }
+      openDelay={450}
+      disabled={advanced}
+      withArrow
+    >
+      <Card
+        component={href ? "a" : "div"}
+        href={href}
+        target={href ? (openNewTab ? "_blank" : "_self") : undefined}
+        rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
+        aria-label={bookmark.name}
+        radius={radius}
+        withBorder={withBorder || variant === "outline"}
+        p={iconOnly ? 6 : advanced ? "md" : "xs"}
+        h={height}
+        w={width}
+        miw={width}
+        onMouseEnter={() => setActive(true)}
+        onMouseLeave={() => setActive(false)}
+        onFocus={() => setActive(true)}
+        onBlur={() => setActive(false)}
+        styles={{
+          root: {
+            background,
+            borderColor: active ? "var(--mantine-primary-color-filled)" : undefined,
+            boxShadow: active ? "var(--mantine-shadow-sm)" : undefined,
+            color: "var(--mantine-color-text)",
+            cursor: href ? "pointer" : "default",
+            display: "flex",
+            outline: active ? "2px solid var(--mantine-primary-color-light)" : undefined,
+            outlineOffset: -2,
+            overflow: "hidden",
+            textDecoration: "none",
+            transform: active && !reduceMotion ? "translateY(-1px)" : undefined,
+            transition: reduceMotion
+              ? undefined
+              : "background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease",
+          },
+        }}
+      >
+        {content}
+      </Card>
+    </Tooltip>
+  );
+};
+
+const BookmarkAvatar = ({ bookmark, iconUrl, size }: { bookmark: BookmarkItem; iconUrl?: string; size: number }) => (
+  <Avatar
+    src={iconUrl}
+    name={bookmark.name}
+    color="gray"
+    radius="sm"
+    size={size}
+    imageProps={{ referrerPolicy: "no-referrer" }}
+    styles={{ image: { objectFit: "contain" } }}
+  >
+    <IconLink size={Math.max(14, size / 2)} />
+  </Avatar>
+);
+
+const getBookmarkBackground = (variant: BookmarkVariant, active: boolean): string => {
+  if (active) return "var(--mantine-primary-color-light-hover)";
+  if (variant === "plain" || variant === "outline") return "transparent";
+  if (variant === "filled") return "var(--mantine-color-default-hover)";
+  return "var(--mantine-primary-color-light)";
+};
+
+const getBookmarkHostname = (href: string): string | undefined => {
+  try {
+    return new URL(href).hostname || undefined;
+  } catch {
+    return undefined;
+  }
+};

packages/widgets/src/bookmarks/component.tsx

@@ -16,6 +16,8 @@ import { getSafeApplicationUrl, getSafeAppHref, SAFE_NEW_TAB_REL } from "../comm
 import { getUsableWidgetQueryData } from "../common/query-state";
 import classes from "./bookmark.module.css";
 
+export { default } from "./bookmarks-widget";
+
 type BookmarkLayout = WidgetComponentProps<"bookmarks">["options"]["layout"];
 
 const COMPACT_GRID_GAP = 4;
@@ -63,7 +65,7 @@ export function getCompactBookmarkLayout(
   };
 }
 
-export default function BookmarksWidget({
+export function LegacyBookmarksWidget({
   options,
   itemId,
   width,
@@ -158,7 +160,7 @@ export default function BookmarksWidget({
             ) : (
               <FlexLayout
                 data={data}
-                direction={options.layout}
+                direction={options.layout === "row" ? "row" : "column"}
                 minimumItemSize={compactLayout.minimumItemSize}
                 hideTitle={compactHideTitle}
                 hideIcon={options.hideIcon}

packages/widgets/src/bookmarks/index.tsx

@@ -1,14 +1,13 @@
 import { ActionIcon, Avatar, Group, Stack, Text } from "@mantine/core";
-import { IconBookmark, IconX } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { IconBookmark, IconLink, IconX } from "@tabler/icons-react";
 
-import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 
-import { getSafeAppHref } from "../common/application-url";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 import { BookmarkAddButton } from "./add-button";
+import type { BookmarkSelectionItem } from "./add-button";
+import { createDirectBookmark, getBookmarkFaviconUrl, getDirectBookmarkUrl } from "./bookmark-item";
 
 export const { definition, componentLoader } = createWidgetDefinition("bookmarks", {
   icon: IconBookmark,
@@ -18,42 +17,56 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
     return optionsBuilder.from((factory) => ({
       title: factory.text(),
       layout: factory.select({
-        options: (["grid", "gridHorizontal", "row", "column"] as const).map((value) => ({
+        options: (["adaptive", "column", "row", "grid", "gridHorizontal", "icons"] as const).map((value) => ({
           value,
           label: (t) => {
+            if (value === "adaptive") return t("widget.bookmarks.option.layout.option.adaptive.label");
             if (value === "grid") return t("widget.common.layout.option.grid");
             if (value === "row") return t("widget.common.layout.option.horizontal");
             if (value === "column") return t("widget.common.layout.option.vertical");
+            if (value === "icons") return t("widget.bookmarks.option.layout.option.icons.label");
             return t("widget.bookmarks.option.layout.option.gridHorizontal.label");
           },
         })),
-        defaultValue: "column",
+        defaultValue: "adaptive",
+      }),
+      variant: factory.select({
+        options: (["soft", "filled", "outline", "plain"] as const).map((value) => ({
+          value,
+          label: (t) => t(`widget.bookmarks.option.variant.option.${value}.label`),
+        })),
+        defaultValue: "soft",
       }),
       hideTitle: factory.switch({ defaultValue: false }),
       hideIcon: factory.switch({ defaultValue: false }),
       hideHostname: factory.switch({ defaultValue: false }),
       openNewTab: factory.switch({ defaultValue: true }),
       withBorder: factory.switch({ defaultValue: false }),
-      customUrls: factory.multiText({
-        validate: z.string().refine((value) => getSafeAppHref(value) !== undefined),
-        withDescription: true,
-      }),
-      items: factory.sortableItemList<RouterOutputs["app"]["selectable"][number], string>({
+      customUrls: factory.internal({ defaultValue: [] as string[] }),
+      items: factory.sortableItemList<BookmarkSelectionItem, string>({
         ItemComponent: ({ item, handle, removeItem, rootAttributes }) => {
+          const iconUrl = item.iconUrl ?? getBookmarkFaviconUrl(item.href);
           return (
             <Group {...rootAttributes} tabIndex={0} justify="space-between" wrap="nowrap">
-              <Group wrap="nowrap">
+              <Group wrap="nowrap" miw={0}>
                 {handle}
 
-                <Group>
-                  <Avatar src={item.iconUrl} alt={item.name} />
-                  <Stack gap={0}>
-                    <Text>{item.name}</Text>
+                <Group wrap="nowrap" miw={0}>
+                  <Avatar src={iconUrl} name={item.name} color="gray" radius="sm">
+                    <IconLink size={20} />
+                  </Avatar>
+                  <Stack gap={0} miw={0}>
+                    <Text fw={600} truncate>
+                      {item.name}
+                    </Text>
+                    <Text size="xs" c="dimmed" truncate>
+                      {item.href}
+                    </Text>
                   </Stack>
                 </Group>
               </Group>
 
-              <ActionIcon variant="transparent" color="red" onClick={removeItem}>
+              <ActionIcon variant="subtle" color="red" onClick={removeItem} aria-label="Remove bookmark">
                 <IconX size="var(--mantine-font-size-xl)" />
               </ActionIcon>
             </Group>
@@ -62,7 +75,14 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
         AddButton: BookmarkAddButton,
         uniqueIdentifier: (item) => item.id,
         useData: (initialIds) => {
-          const { data, error, isLoading } = clientApi.app.byIds.useQuery(initialIds);
+          const appIds = initialIds.filter((value) => !getDirectBookmarkUrl(value));
+          const { data: apps, error, isLoading } = clientApi.app.byIds.useQuery(appIds);
+          const appsById = new Map(apps?.map((app) => [app.id, app]));
+          const data = initialIds.flatMap((value) => {
+            const directUrl = getDirectBookmarkUrl(value);
+            if (directUrl) return createDirectBookmark(directUrl) ?? [];
+            return appsById.get(value) ?? [];
+          });
 
           return {
             data,

packages/widgets/src/bookmarks/prefetch.ts

@@ -4,11 +4,12 @@ import { apps } from "@homarr/db/schema";
 
 import type { Prefetch } from "../definition";
 import { createTrpcQueryKey } from "../trpc-query-key";
+import { getDirectBookmarkUrl } from "./bookmark-item";
 
 const logger = createLogger({ module: "bookmarksWidgetPrefetch" });
 
 const prefetchAllAsync: Prefetch<"bookmarks"> = async (queryClient, items) => {
-  const appIds = items.flatMap((item) => item.options.items);
+  const appIds = items.flatMap((item) => item.options.items.filter((value) => !getDirectBookmarkUrl(value)));
   const distinctAppIds = [...new Set(appIds)];
 
   const dbApps = await db.query.apps.findMany({
@@ -16,13 +17,14 @@ const prefetchAllAsync: Prefetch<"bookmarks"> = async (queryClient, items) => {
   });
 
   for (const item of items) {
-    if (item.options.items.length === 0) {
+    const itemAppIds = item.options.items.filter((value) => !getDirectBookmarkUrl(value));
+    if (itemAppIds.length === 0) {
       continue;
     }
 
     queryClient.setQueryData(
-      createTrpcQueryKey("app.byIds", item.options.items),
-      dbApps.filter((app) => item.options.items.includes(app.id)),
+      createTrpcQueryKey("app.byIds", itemAppIds),
+      dbApps.filter((app) => itemAppIds.includes(app.id)),
     );
   }
 

packages/widgets/src/options.ts

@@ -36,6 +36,7 @@ export interface SortableItemListInput<TItem, TOptionValue extends UniqueIdentif
     addItem: (item: TItem) => void;
     removeItem: (value: TOptionValue) => void;
     values: TOptionValue[];
+    initialOptions: Record<string, unknown>;
   }) => React.ReactNode;
   ItemComponent: (props: {
     item: TItem;