fix: address bookmarks review feedback
This commit is contained in:
ajnart committed
1 parent
09ecb3f0b0
commit
471aa0a49f
12 files changed
+411
-765
No files matched your search
@@ -2232,8 +2232,12 @@
|
||||
"withBorder": {
|
||||
"label": "Show border"
|
||||
},
|
||||
"customUrls": {
|
||||
"label": "Custom links"
|
||||
},
|
||||
"items": {
|
||||
"label": "Bookmarks",
|
||||
"remove": "Remove bookmark",
|
||||
"apps": {
|
||||
"label": "Add bookmarks",
|
||||
"description": "Paste URLs or find existing Apps. Drag the bookmarks below to reorder them.",
|
||||
|
||||
@@ -16,7 +16,7 @@ export interface CommonWidgetInputProps<TKey extends WidgetOptionType> {
|
||||
boardId?: string;
|
||||
}
|
||||
|
||||
type UseWidgetInputTranslationReturnType = (key: "label" | "description" | "placeholder") => string;
|
||||
type UseWidgetInputTranslationReturnType = (key: "label" | "description" | "placeholder" | "remove") => string;
|
||||
|
||||
/**
|
||||
* Short description why as and unknown convertions are used below:
|
||||
|
||||
@@ -96,6 +96,28 @@ export const WidgetSortedItemListInput = <TItem, TOptionValue extends UniqueIden
|
||||
updateItems((currentValues) => [...currentValues, options.uniqueIdentifier(item) as TOptionValue]);
|
||||
};
|
||||
|
||||
const migrateItems = useCallback(
|
||||
(items: TItem[], optionsPatch: Record<string, unknown>) => {
|
||||
const migratedEntries = items.map((item) => [options.uniqueIdentifier(item) as TOptionValue, item] as const);
|
||||
setTempMap((previous) => {
|
||||
const next = new Map(previous);
|
||||
for (const [value, item] of migratedEntries) next.set(value, item);
|
||||
return next;
|
||||
});
|
||||
form.setFieldValue("options", (currentOptions) => {
|
||||
const currentItems = Array.isArray(currentOptions[property])
|
||||
? (currentOptions[property] as TOptionValue[])
|
||||
: options.defaultValue;
|
||||
const nextItems = [...currentItems];
|
||||
for (const [value] of migratedEntries) {
|
||||
if (!nextItems.includes(value)) nextItems.push(value);
|
||||
}
|
||||
return { ...currentOptions, ...optionsPatch, [property]: nextItems };
|
||||
});
|
||||
},
|
||||
[form, options, property],
|
||||
);
|
||||
|
||||
const removeItem = useCallback(
|
||||
(value: TOptionValue) => {
|
||||
updateItems((currentValues) => currentValues.filter((candidate) => candidate !== value));
|
||||
@@ -112,7 +134,13 @@ export const WidgetSortedItemListInput = <TItem, TOptionValue extends UniqueIden
|
||||
return (
|
||||
<Fieldset legend={t("label")}>
|
||||
<Stack>
|
||||
<options.addButton addItem={addItem} removeItem={removeItem} values={values} initialOptions={initialOptions} />
|
||||
<options.addButton
|
||||
addItem={addItem}
|
||||
migrateItems={migrateItems}
|
||||
removeItem={removeItem}
|
||||
values={values}
|
||||
initialOptions={initialOptions}
|
||||
/>
|
||||
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
@@ -153,6 +181,7 @@ export const WidgetSortedItemListInput = <TItem, TOptionValue extends UniqueIden
|
||||
index={index}
|
||||
item={item}
|
||||
removeItem={() => removeItem(value)}
|
||||
removeLabel={t("remove")}
|
||||
options={options}
|
||||
/>
|
||||
);
|
||||
@@ -177,6 +206,7 @@ interface ItemProps<TItem, TOptionValue extends UniqueIdentifier> {
|
||||
item: TItem;
|
||||
index: number;
|
||||
removeItem: () => void;
|
||||
removeLabel: string;
|
||||
options: CommonWidgetInputProps<"sortableItemList">["options"];
|
||||
}
|
||||
|
||||
@@ -185,6 +215,7 @@ const Item = <TItem, TOptionValue extends UniqueIdentifier>({
|
||||
index,
|
||||
item,
|
||||
removeItem,
|
||||
removeLabel,
|
||||
options,
|
||||
}: ItemProps<TItem, TOptionValue>) => {
|
||||
const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({
|
||||
@@ -220,6 +251,7 @@ const Item = <TItem, TOptionValue extends UniqueIdentifier>({
|
||||
key={index}
|
||||
item={item}
|
||||
removeItem={removeItem}
|
||||
removeLabel={removeLabel}
|
||||
rootAttributes={attributes}
|
||||
handle={
|
||||
<ActionIcon
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
Avatar,
|
||||
Combobox,
|
||||
@@ -20,12 +20,7 @@ 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 { createDirectBookmark, getBookmarkFaviconUrl, splitBookmarkUrls } from "./bookmark-item";
|
||||
import type { BookmarkItem } from "./bookmark-item";
|
||||
|
||||
type SelectableApp = RouterOutputs["app"]["selectable"][number];
|
||||
@@ -35,6 +30,7 @@ const createOptionValue = "$create-url";
|
||||
|
||||
export const BookmarkAddButton: SortableItemListInput<BookmarkSelectionItem, string>["AddButton"] = ({
|
||||
addItem,
|
||||
migrateItems,
|
||||
values,
|
||||
initialOptions,
|
||||
}) => {
|
||||
@@ -48,27 +44,26 @@ export const BookmarkAddButton: SortableItemListInput<BookmarkSelectionItem, str
|
||||
onDropdownOpen: () => combobox.updateSelectedOptionIndex("active"),
|
||||
});
|
||||
const selectedValues = useMemo(() => new Set(values), [values]);
|
||||
const migrationStartedRef = useRef(false);
|
||||
const legacyUrls = useMemo(() => {
|
||||
if (!Array.isArray(initialOptions.customUrls)) return [];
|
||||
return initialOptions.customUrls.filter((value): value is string => typeof value === "string");
|
||||
}, [initialOptions.customUrls]);
|
||||
|
||||
useEffect(() => {
|
||||
for (const url of legacyUrls) {
|
||||
const item = createDirectBookmark(url);
|
||||
if (item && !selectedValues.has(item.id)) addItem(item);
|
||||
}
|
||||
}, [addItem, legacyUrls, selectedValues]);
|
||||
if (migrationStartedRef.current || legacyUrls.length === 0) return;
|
||||
|
||||
const normalizedSearch = search.trim().toLocaleLowerCase();
|
||||
migrationStartedRef.current = true;
|
||||
const legacyItems = legacyUrls.flatMap((url) => createDirectBookmark(url) ?? []);
|
||||
migrateItems(legacyItems, { customUrls: [] });
|
||||
}, [legacyUrls, migrateItems]);
|
||||
|
||||
const normalizedSearch = search.trim().toLowerCase();
|
||||
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)
|
||||
);
|
||||
return app.name.toLowerCase().includes(normalizedSearch) || app.href?.toLowerCase().includes(normalizedSearch);
|
||||
});
|
||||
const pendingUrl = createDirectBookmark(search);
|
||||
|
||||
@@ -143,7 +138,6 @@ export const BookmarkAddButton: SortableItemListInput<BookmarkSelectionItem, str
|
||||
<PillsInput.Field
|
||||
value={search}
|
||||
placeholder={t("placeholder")}
|
||||
disabled={Boolean(error)}
|
||||
onFocus={() => combobox.openDropdown()}
|
||||
onBlur={() => combobox.closeDropdown()}
|
||||
onChange={(event) => {
|
||||
@@ -158,7 +152,7 @@ export const BookmarkAddButton: SortableItemListInput<BookmarkSelectionItem, str
|
||||
addUrls(pastedValue);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== "Enter" && event.key !== ",") return;
|
||||
if (event.key !== "Enter") return;
|
||||
if (!pendingUrl) return;
|
||||
event.preventDefault();
|
||||
addUrls(search);
|
||||
@@ -171,7 +165,7 @@ export const BookmarkAddButton: SortableItemListInput<BookmarkSelectionItem, str
|
||||
<Combobox.Dropdown>
|
||||
<ScrollArea.Autosize mah={280} type="auto">
|
||||
<Combobox.Options>
|
||||
{pendingUrl && !selectedValues.has(getDirectBookmarkValue(pendingUrl.href ?? "")) ? (
|
||||
{pendingUrl && !selectedValues.has(pendingUrl.id) ? (
|
||||
<Combobox.Option value={createOptionValue}>
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<Avatar src={getBookmarkFaviconUrl(pendingUrl.href)} size={28} radius="sm" color="gray">
|
||||
|
||||
@@ -53,7 +53,14 @@ export const createDirectBookmark = (url: string): BookmarkItem | undefined => {
|
||||
};
|
||||
|
||||
export const splitBookmarkUrls = (value: string) =>
|
||||
value
|
||||
.split(/[,\n]+/)
|
||||
.map((part) => part.trim())
|
||||
.filter(Boolean);
|
||||
value.split(/\r?\n+/).flatMap((line) => {
|
||||
const trimmedLine = line.trim();
|
||||
if (trimmedLine.length === 0) return [];
|
||||
|
||||
const commaSeparatedValues = trimmedLine.split(",").map((part) => part.trim());
|
||||
if (commaSeparatedValues.length > 1 && commaSeparatedValues.every((part) => normalizeBookmarkUrl(part))) {
|
||||
return commaSeparatedValues;
|
||||
}
|
||||
|
||||
return [trimmedLine];
|
||||
});
|
||||
@@ -1,45 +0,0 @@
|
||||
.card {
|
||||
background-color: transparent;
|
||||
border-color: rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.38));
|
||||
transition:
|
||||
background-color 120ms ease,
|
||||
border-color 120ms ease;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus-within {
|
||||
background-color: transparent;
|
||||
border-color: rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.62));
|
||||
}
|
||||
|
||||
.bookmarkButton:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
}
|
||||
|
||||
.card:hover > div > div.bookmarkIcon {
|
||||
background-color: var(--mantine-color-iconColor-filled-hover);
|
||||
}
|
||||
|
||||
.bookmarkButton:focus-visible .bookmarkIcon {
|
||||
background-color: var(--mantine-color-iconColor-filled-hover);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.compactScrollViewport > div {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.compactScrollContent {
|
||||
flex: 1;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
@@ -27,121 +27,10 @@ import { getUsableWidgetQueryData } from "../common/query-state";
|
||||
import type { WidgetComponentProps } from "../definition";
|
||||
import { createDirectBookmark, getBookmarkFaviconUrl, getDirectBookmarkUrl } from "./bookmark-item";
|
||||
import type { BookmarkItem } from "./bookmark-item";
|
||||
import { getBookmarkCardDisplay, getBookmarkDisplayPlan } from "./layout";
|
||||
import type { BookmarkOrientation } from "./layout";
|
||||
|
||||
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,
|
||||
@@ -212,15 +101,23 @@ export default function BookmarksWidget({
|
||||
[advanced, data.length, height, options.layout, options.title.length, width],
|
||||
);
|
||||
|
||||
const cardDisplay = getBookmarkCardDisplay({
|
||||
advanced,
|
||||
hideHostname: options.hideHostname,
|
||||
hideIcon: options.hideIcon,
|
||||
hideTitle: options.hideTitle,
|
||||
plan,
|
||||
});
|
||||
|
||||
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)}
|
||||
orientation={cardDisplay.orientation}
|
||||
showHostname={cardDisplay.showHostname}
|
||||
showIcon={cardDisplay.showIcon}
|
||||
showTitle={cardDisplay.showTitle}
|
||||
openNewTab={options.openNewTab}
|
||||
variant={options.variant}
|
||||
withBorder={options.withBorder}
|
||||
@@ -233,7 +130,7 @@ export default function BookmarksWidget({
|
||||
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}>
|
||||
<Text fz={11} fw={600} px={2} lh={1.2} lineClamp={1}>
|
||||
{options.title}
|
||||
</Text>
|
||||
) : null}
|
||||
@@ -317,12 +214,12 @@ const BookmarkCard = ({
|
||||
<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}>
|
||||
<Text fz={10} fw={600} lh={1.2} ta="center" lineClamp={2}>
|
||||
{bookmark.name}
|
||||
</Text>
|
||||
) : null}
|
||||
{showHostname ? (
|
||||
<Text fz={10} c="dimmed" ta="center" truncate w="100%">
|
||||
<Text fz={9} c="dimmed" ta="center" truncate w="100%">
|
||||
{hostname}
|
||||
</Text>
|
||||
) : null}
|
||||
@@ -342,17 +239,17 @@ const BookmarkCard = ({
|
||||
{!iconOnly ? (
|
||||
<Stack gap={advanced ? 3 : 0} miw={0} flex={1}>
|
||||
{showTitle ? (
|
||||
<Text fz={advanced ? "xs" : 11} fw={600} lh={1.2} truncate>
|
||||
<Text fz={advanced ? 11 : 10} fw={600} lh={1.2} truncate>
|
||||
{bookmark.name}
|
||||
</Text>
|
||||
) : null}
|
||||
{showHostname ? (
|
||||
<Text fz={advanced ? 11 : 10} c="dimmed" truncate>
|
||||
<Text fz={advanced ? 10 : 9} c="dimmed" truncate>
|
||||
{hostname}
|
||||
</Text>
|
||||
) : null}
|
||||
{advanced && bookmark.description ? (
|
||||
<Text fz={11} c="dimmed" lineClamp={2}>
|
||||
<Text fz={10} c="dimmed" lineClamp={2}>
|
||||
{bookmark.description}
|
||||
</Text>
|
||||
) : null}
|
||||
@@ -413,7 +310,9 @@ const BookmarkCard = ({
|
||||
styles={{
|
||||
root: {
|
||||
background,
|
||||
borderColor: active ? "var(--mantine-primary-color-filled)" : undefined,
|
||||
borderColor: active
|
||||
? "rgb(from var(--mantine-primary-color-filled) r g b / calc(var(--opacity, 1) * 0.62))"
|
||||
: "rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.38))",
|
||||
boxShadow: active ? "var(--mantine-shadow-sm)" : undefined,
|
||||
color: "var(--mantine-color-text)",
|
||||
cursor: href ? "pointer" : "default",
|
||||
@@ -450,10 +349,14 @@ const BookmarkAvatar = ({ bookmark, iconUrl, size }: { bookmark: BookmarkItem; i
|
||||
);
|
||||
|
||||
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)";
|
||||
if (variant === "filled") {
|
||||
const opacity = active ? 0.64 : 0.48;
|
||||
return `rgb(from var(--mantine-color-default-hover) r g b / calc(var(--opacity, 1) * ${opacity}))`;
|
||||
}
|
||||
|
||||
const opacity = active ? 0.14 : 0.08;
|
||||
return `rgb(from var(--mantine-primary-color-filled) r g b / calc(var(--opacity, 1) * ${opacity}))`;
|
||||
};
|
||||
|
||||
const getBookmarkHostname = (href: string): string | undefined => {
|
||||
|
||||
@@ -1,534 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import type { CSSProperties } from "react";
|
||||
import { useMemo } from "react";
|
||||
import { Anchor, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text, Title, UnstyledButton } from "@mantine/core";
|
||||
import { useElementSize } from "@mantine/hooks";
|
||||
import { IconLink } from "@tabler/icons-react";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import { useRequiredBoard } from "@homarr/boards/context";
|
||||
import { useRegisterSpotlightContextResults } from "@homarr/spotlight";
|
||||
import { MaskedOrNormalImage } from "@homarr/ui";
|
||||
|
||||
import type { WidgetComponentProps } from "../definition";
|
||||
import { getSafeApplicationUrl, getSafeAppHref, SAFE_NEW_TAB_REL } from "../common/application-url";
|
||||
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;
|
||||
|
||||
export interface BookmarkDisplayItem {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
iconUrl?: string;
|
||||
href: string | null;
|
||||
}
|
||||
|
||||
export interface CompactBookmarkLayout {
|
||||
columns: number;
|
||||
hideHostname: boolean;
|
||||
hideTitle: boolean;
|
||||
minimumItemSize: number;
|
||||
}
|
||||
|
||||
export function getCompactBookmarkLayout(
|
||||
width: number,
|
||||
height: number,
|
||||
itemCount: number,
|
||||
layout: BookmarkLayout,
|
||||
): CompactBookmarkLayout {
|
||||
const count = Math.max(1, itemCount);
|
||||
const isGrid = layout === "grid" || layout === "gridHorizontal";
|
||||
const targetWidth = layout === "gridHorizontal" ? 180 : 104;
|
||||
let columns = 1;
|
||||
if (isGrid) {
|
||||
columns = Math.max(1, Math.min(count, Math.floor((width + COMPACT_GRID_GAP) / (targetWidth + COMPACT_GRID_GAP))));
|
||||
} else if (layout === "row") {
|
||||
columns = count;
|
||||
}
|
||||
const rows = Math.max(1, Math.ceil(count / columns));
|
||||
const cellWidth = (width - (columns - 1) * COMPACT_GRID_GAP) / columns;
|
||||
const cellHeight = height / rows;
|
||||
const usesHorizontalItems = layout === "column" || layout === "gridHorizontal";
|
||||
|
||||
return {
|
||||
columns,
|
||||
hideHostname: cellWidth < 120 || cellHeight < (usesHorizontalItems ? 52 : 96),
|
||||
hideTitle: cellWidth < 64 || cellHeight < 40,
|
||||
minimumItemSize: usesHorizontalItems ? 48 : 96,
|
||||
};
|
||||
}
|
||||
|
||||
export function LegacyBookmarksWidget({
|
||||
options,
|
||||
itemId,
|
||||
width,
|
||||
height,
|
||||
displayMode,
|
||||
}: WidgetComponentProps<"bookmarks">) {
|
||||
const board = useRequiredBoard();
|
||||
const { ref: compactContentRef, width: compactContentWidth } = useElementSize<HTMLDivElement>();
|
||||
const apps =
|
||||
getUsableWidgetQueryData(
|
||||
clientApi.app.byIds.useQuery(options.items, {
|
||||
select(selectedApps) {
|
||||
return selectedApps.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
|
||||
},
|
||||
}),
|
||||
) ?? [];
|
||||
const customLinks = useMemo(
|
||||
() => options.customUrls.flatMap((url) => createCustomBookmark(url) ?? []),
|
||||
[options.customUrls],
|
||||
);
|
||||
const data: BookmarkDisplayItem[] = [...apps, ...customLinks];
|
||||
|
||||
useRegisterSpotlightContextResults(
|
||||
`bookmark-${itemId}`,
|
||||
data.flatMap((app) => {
|
||||
const href = getSafeAppHref(app.href);
|
||||
return href
|
||||
? [
|
||||
{
|
||||
id: app.id,
|
||||
name: app.name,
|
||||
icon: app.iconUrl ?? IconLink,
|
||||
interaction() {
|
||||
return {
|
||||
type: "link",
|
||||
href,
|
||||
newTab: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
]
|
||||
: [];
|
||||
}),
|
||||
[data],
|
||||
);
|
||||
|
||||
const compactLayout = useMemo(
|
||||
() => getCompactBookmarkLayout(compactContentWidth || width, height, data.length, options.layout),
|
||||
[compactContentWidth, data.length, height, options.layout, width],
|
||||
);
|
||||
const compactHideTitle = options.hideTitle || (compactLayout.hideTitle && !options.hideIcon);
|
||||
const compactHideHostname =
|
||||
options.hideHostname || (compactLayout.hideHostname && !(options.hideTitle && options.hideIcon));
|
||||
|
||||
return (
|
||||
<Stack h="100%" mih={0} gap="sm" p={height < 120 ? "xs" : "sm"}>
|
||||
{options.title.length > 0 && (
|
||||
<Title order={4} px="0.25rem" lineClamp={displayMode === "advanced" ? undefined : 1}>
|
||||
{options.title}
|
||||
</Title>
|
||||
)}
|
||||
{displayMode === "advanced" && (
|
||||
<AdvancedBookmarksLayout
|
||||
data={data}
|
||||
width={width}
|
||||
openNewTab={options.openNewTab}
|
||||
withBorder={options.withBorder}
|
||||
hasIconColor={board.iconColor !== null}
|
||||
/>
|
||||
)}
|
||||
{displayMode !== "advanced" && (
|
||||
<ScrollArea
|
||||
classNames={{ viewport: classes.compactScrollViewport }}
|
||||
type="auto"
|
||||
scrollbarSize={6}
|
||||
style={{ flex: 1, minHeight: 0 }}
|
||||
>
|
||||
<div ref={compactContentRef} className={classes.compactScrollContent}>
|
||||
{options.layout === "grid" || options.layout === "gridHorizontal" ? (
|
||||
<GridLayout
|
||||
data={data}
|
||||
columns={compactLayout.columns}
|
||||
minimumItemHeight={compactLayout.minimumItemSize}
|
||||
itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
|
||||
hideTitle={compactHideTitle}
|
||||
hideIcon={options.hideIcon}
|
||||
hideHostname={compactHideHostname}
|
||||
openNewTab={options.openNewTab}
|
||||
withBorder={options.withBorder}
|
||||
hasIconColor={board.iconColor !== null}
|
||||
/>
|
||||
) : (
|
||||
<FlexLayout
|
||||
data={data}
|
||||
direction={options.layout === "row" ? "row" : "column"}
|
||||
minimumItemSize={compactLayout.minimumItemSize}
|
||||
hideTitle={compactHideTitle}
|
||||
hideIcon={options.hideIcon}
|
||||
hideHostname={compactHideHostname}
|
||||
openNewTab={options.openNewTab}
|
||||
withBorder={options.withBorder}
|
||||
hasIconColor={board.iconColor !== null}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
interface FlexLayoutProps {
|
||||
data: BookmarkDisplayItem[];
|
||||
direction: "row" | "column";
|
||||
hideTitle: boolean;
|
||||
hideIcon: boolean;
|
||||
hideHostname: boolean;
|
||||
openNewTab: boolean;
|
||||
withBorder: boolean;
|
||||
hasIconColor: boolean;
|
||||
minimumItemSize: number;
|
||||
}
|
||||
|
||||
const FlexLayout = ({
|
||||
data,
|
||||
direction,
|
||||
hideTitle,
|
||||
hideIcon,
|
||||
hideHostname,
|
||||
openNewTab,
|
||||
withBorder,
|
||||
hasIconColor,
|
||||
minimumItemSize,
|
||||
}: FlexLayoutProps) => {
|
||||
const board = useRequiredBoard();
|
||||
return (
|
||||
<Flex direction={direction} gap={4} w="100%" mih="100%" wrap="nowrap">
|
||||
{data.map((app) => {
|
||||
const href = getSafeAppHref(app.href);
|
||||
return (
|
||||
<div key={app.id} style={{ display: "flex", flex: `1 0 ${minimumItemSize}px`, flexDirection: direction }}>
|
||||
<UnstyledButton
|
||||
className={classes.bookmarkButton}
|
||||
component={href ? "a" : "div"}
|
||||
href={href}
|
||||
target={href ? (openNewTab ? "_blank" : "_self") : undefined}
|
||||
rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
|
||||
key={app.id}
|
||||
w="100%"
|
||||
>
|
||||
<Card
|
||||
radius={board.itemRadius}
|
||||
className={classes.card}
|
||||
bg="transparent"
|
||||
w="100%"
|
||||
display="flex"
|
||||
p={4}
|
||||
h="100%"
|
||||
withBorder={withBorder}
|
||||
>
|
||||
{direction === "row" ? (
|
||||
<VerticalItem
|
||||
app={app}
|
||||
hideTitle={hideTitle}
|
||||
hideIcon={hideIcon}
|
||||
hideHostname={hideHostname}
|
||||
hasIconColor={hasIconColor}
|
||||
/>
|
||||
) : (
|
||||
<HorizontalItem
|
||||
app={app}
|
||||
hideTitle={hideTitle}
|
||||
hideIcon={hideIcon}
|
||||
hideHostname={hideHostname}
|
||||
hasIconColor={hasIconColor}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</UnstyledButton>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
interface AdvancedBookmarksLayoutProps {
|
||||
data: BookmarkDisplayItem[];
|
||||
width: number;
|
||||
openNewTab: boolean;
|
||||
withBorder: boolean;
|
||||
hasIconColor: boolean;
|
||||
}
|
||||
|
||||
export const getAdvancedBookmarkColumns = (width: number, itemCount: number): number =>
|
||||
Math.max(1, Math.min(itemCount || 1, Math.floor(width / 280)));
|
||||
|
||||
export const getBookmarkHostname = (href: string | null): string | undefined => {
|
||||
const safeHref = getSafeApplicationUrl(href);
|
||||
return safeHref ? new URL(safeHref).hostname : undefined;
|
||||
};
|
||||
|
||||
export const createCustomBookmark = (url: string): BookmarkDisplayItem | null => {
|
||||
const normalizedUrl = url.trim();
|
||||
const href = getSafeAppHref(normalizedUrl);
|
||||
if (!href) return null;
|
||||
|
||||
return {
|
||||
id: `custom-link:${normalizedUrl}`,
|
||||
name: getBookmarkHostname(href) ?? normalizedUrl,
|
||||
description: null,
|
||||
href,
|
||||
};
|
||||
};
|
||||
|
||||
const AdvancedBookmarksLayout = ({
|
||||
data,
|
||||
width,
|
||||
openNewTab,
|
||||
withBorder,
|
||||
hasIconColor,
|
||||
}: AdvancedBookmarksLayoutProps) => {
|
||||
const board = useRequiredBoard();
|
||||
|
||||
return (
|
||||
<ScrollArea h="100%" style={{ flex: 1 }}>
|
||||
<SimpleGrid cols={getAdvancedBookmarkColumns(width, data.length)} spacing="sm">
|
||||
{data.map((app) => {
|
||||
const href = getSafeAppHref(app.href);
|
||||
return (
|
||||
<UnstyledButton
|
||||
key={app.id}
|
||||
className={classes.bookmarkButton}
|
||||
component={href ? "a" : "div"}
|
||||
href={href}
|
||||
target={href ? (openNewTab ? "_blank" : "_self") : undefined}
|
||||
rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
|
||||
>
|
||||
<Card
|
||||
radius={board.itemRadius}
|
||||
className={classes.card}
|
||||
bg="transparent"
|
||||
withBorder={withBorder}
|
||||
p="md"
|
||||
h="100%"
|
||||
>
|
||||
<Group align="flex-start" wrap="nowrap">
|
||||
<BookmarkIcon
|
||||
app={app}
|
||||
hasColor={hasIconColor}
|
||||
className={classes.bookmarkIcon}
|
||||
style={{ width: 40, height: 40, flex: "0 0 auto" }}
|
||||
/>
|
||||
<Stack gap={3} miw={0}>
|
||||
<Text fw={700} size="sm">
|
||||
{app.name}
|
||||
</Text>
|
||||
<Anchor component="span" size="xs" truncate="end">
|
||||
{getBookmarkHostname(app.href)}
|
||||
</Anchor>
|
||||
{app.description && (
|
||||
<Text size="xs" c="dimmed">
|
||||
{app.description}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Group>
|
||||
</Card>
|
||||
</UnstyledButton>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</ScrollArea>
|
||||
);
|
||||
};
|
||||
|
||||
interface GridLayoutProps {
|
||||
data: BookmarkDisplayItem[];
|
||||
hideTitle: boolean;
|
||||
hideIcon: boolean;
|
||||
hideHostname: boolean;
|
||||
openNewTab: boolean;
|
||||
withBorder: boolean;
|
||||
itemDirection: "horizontal" | "vertical";
|
||||
hasIconColor: boolean;
|
||||
columns: number;
|
||||
minimumItemHeight: number;
|
||||
}
|
||||
|
||||
const GridLayout = ({
|
||||
data,
|
||||
hideTitle,
|
||||
hideIcon,
|
||||
hideHostname,
|
||||
openNewTab,
|
||||
withBorder,
|
||||
itemDirection,
|
||||
hasIconColor,
|
||||
columns,
|
||||
minimumItemHeight,
|
||||
}: GridLayoutProps) => {
|
||||
const board = useRequiredBoard();
|
||||
|
||||
return (
|
||||
<Flex gap={COMPACT_GRID_GAP} wrap="wrap" miw="100%" mih="100%" style={{ alignContent: "stretch" }}>
|
||||
{data.map((app) => {
|
||||
const href = getSafeAppHref(app.href);
|
||||
return (
|
||||
<UnstyledButton
|
||||
className={classes.bookmarkButton}
|
||||
component={href ? "a" : "div"}
|
||||
href={href}
|
||||
target={href ? (openNewTab ? "_blank" : "_self") : undefined}
|
||||
rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
|
||||
key={app.id}
|
||||
style={{
|
||||
flex: `1 0 calc((100% - calc(${COMPACT_GRID_GAP * (columns - 1)}px * var(--mantine-scale, 1))) / ${columns})`,
|
||||
minWidth: 0,
|
||||
minHeight: `calc(${minimumItemHeight}px * var(--mantine-scale, 1))`,
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
h="100%"
|
||||
className={classes.card}
|
||||
bg="transparent"
|
||||
radius={board.itemRadius}
|
||||
withBorder={withBorder}
|
||||
p="xs"
|
||||
>
|
||||
{itemDirection === "horizontal" ? (
|
||||
<HorizontalItem
|
||||
app={app}
|
||||
hideTitle={hideTitle}
|
||||
hideIcon={hideIcon}
|
||||
hideHostname={hideHostname}
|
||||
hasIconColor={hasIconColor}
|
||||
/>
|
||||
) : (
|
||||
<VerticalItem
|
||||
app={app}
|
||||
hideTitle={hideTitle}
|
||||
hideIcon={hideIcon}
|
||||
hideHostname={hideHostname}
|
||||
hasIconColor={hasIconColor}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</UnstyledButton>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const VerticalItem = ({
|
||||
app,
|
||||
hideTitle,
|
||||
hideIcon,
|
||||
hideHostname,
|
||||
hasIconColor,
|
||||
}: {
|
||||
app: BookmarkDisplayItem;
|
||||
hideTitle: boolean;
|
||||
hideIcon: boolean;
|
||||
hideHostname: boolean;
|
||||
hasIconColor: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<Stack h="100%" miw={16} gap="sm" justify={"center"}>
|
||||
{!hideTitle && (
|
||||
<Text fw={700} ta="center" size="xs" lineClamp={2}>
|
||||
{app.name}
|
||||
</Text>
|
||||
)}
|
||||
{!hideIcon && (
|
||||
<BookmarkIcon
|
||||
app={app}
|
||||
hasColor={hasIconColor}
|
||||
className={classes.bookmarkIcon}
|
||||
style={{
|
||||
width: hideHostname && hideTitle ? "min(max(100%, 16px), 40px)" : 40,
|
||||
height: hideHostname && hideTitle ? "min(max(100%, 16px), 40px)" : 40,
|
||||
overflow: "auto",
|
||||
flex: "unset",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!hideHostname && (
|
||||
<Anchor ta="center" component="span" size="xs" truncate="end" w="100%">
|
||||
{getBookmarkHostname(app.href)}
|
||||
</Anchor>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const HorizontalItem = ({
|
||||
app,
|
||||
hideTitle,
|
||||
hideIcon,
|
||||
hideHostname,
|
||||
hasIconColor,
|
||||
}: {
|
||||
app: BookmarkDisplayItem;
|
||||
hideTitle: boolean;
|
||||
hideIcon: boolean;
|
||||
hideHostname: boolean;
|
||||
hasIconColor: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<Group wrap="nowrap" gap="xs" h="100%" justify="start">
|
||||
{!hideIcon && (
|
||||
<BookmarkIcon
|
||||
app={app}
|
||||
hasColor={hasIconColor}
|
||||
className={classes.bookmarkIcon}
|
||||
style={{
|
||||
overflow: "auto",
|
||||
width: hideHostname ? 16 : 24,
|
||||
height: hideHostname ? 16 : 24,
|
||||
flex: "unset",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!(hideTitle && hideHostname) && (
|
||||
<>
|
||||
<Stack justify="space-between" gap={0} miw={0} style={{ flex: 1 }}>
|
||||
{!hideTitle && (
|
||||
<Text fw={700} size="xs" lineClamp={hideHostname ? 2 : 1}>
|
||||
{app.name}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{!hideHostname && (
|
||||
<Anchor component="span" size="xs" truncate="end">
|
||||
{getBookmarkHostname(app.href)}
|
||||
</Anchor>
|
||||
)}
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
interface BookmarkIconProps {
|
||||
app: BookmarkDisplayItem;
|
||||
hasColor: boolean;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
const BookmarkIcon = ({ app, hasColor, className, style }: BookmarkIconProps) =>
|
||||
app.iconUrl ? (
|
||||
<MaskedOrNormalImage
|
||||
imageUrl={app.iconUrl}
|
||||
hasColor={hasColor}
|
||||
alt={app.name}
|
||||
className={className}
|
||||
style={style}
|
||||
/>
|
||||
) : (
|
||||
<IconLink aria-label={app.name} className={className} style={style} />
|
||||
);
|
||||
@@ -44,7 +44,7 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
|
||||
withBorder: factory.switch({ defaultValue: false }),
|
||||
customUrls: factory.internal({ defaultValue: [] as string[] }),
|
||||
items: factory.sortableItemList<BookmarkSelectionItem, string>({
|
||||
ItemComponent: ({ item, handle, removeItem, rootAttributes }) => {
|
||||
ItemComponent: ({ item, handle, removeItem, removeLabel, rootAttributes }) => {
|
||||
const iconUrl = item.iconUrl ?? getBookmarkFaviconUrl(item.href);
|
||||
return (
|
||||
<Group {...rootAttributes} tabIndex={0} justify="space-between" wrap="nowrap">
|
||||
@@ -66,7 +66,7 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<ActionIcon variant="subtle" color="red" onClick={removeItem} aria-label="Remove bookmark">
|
||||
<ActionIcon variant="subtle" color="red" onClick={removeItem} aria-label={removeLabel}>
|
||||
<IconX size="var(--mantine-font-size-xl)" />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
|
||||
@@ -1,54 +1,69 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
import {
|
||||
createCustomBookmark,
|
||||
getAdvancedBookmarkColumns,
|
||||
getBookmarkHostname,
|
||||
getCompactBookmarkLayout,
|
||||
} from "./component";
|
||||
import { createDirectBookmark, normalizeBookmarkUrl, splitBookmarkUrls } from "./bookmark-item";
|
||||
import { getBookmarkCardDisplay, getBookmarkDisplayPlan } from "./layout";
|
||||
|
||||
describe("bookmark display helpers", () => {
|
||||
test("uses bounded advanced columns", () => {
|
||||
expect(getAdvancedBookmarkColumns(900, 8)).toBe(3);
|
||||
expect(getAdvancedBookmarkColumns(120, 8)).toBe(1);
|
||||
expect(getAdvancedBookmarkColumns(900, 0)).toBe(1);
|
||||
test("uses explicit width breakpoints for advanced columns", () => {
|
||||
expect(
|
||||
getBookmarkDisplayPlan({ advanced: true, width: 900, height: 500, itemCount: 8, layout: "adaptive" }),
|
||||
).toMatchObject({
|
||||
columns: 3,
|
||||
orientation: "horizontal",
|
||||
});
|
||||
expect(
|
||||
getBookmarkDisplayPlan({ advanced: true, width: 120, height: 500, itemCount: 8, layout: "adaptive" }),
|
||||
).toMatchObject({
|
||||
columns: 1,
|
||||
orientation: "horizontal",
|
||||
});
|
||||
});
|
||||
|
||||
test("uses container geometry to keep compact cards legible", () => {
|
||||
expect(getCompactBookmarkLayout(420, 220, 4, "gridHorizontal")).toMatchObject({
|
||||
test("selects an adaptive plan from width and height breakpoints", () => {
|
||||
expect(
|
||||
getBookmarkDisplayPlan({ advanced: false, width: 560, height: 260, itemCount: 4, layout: "adaptive" }),
|
||||
).toMatchObject({
|
||||
columns: 2,
|
||||
hideHostname: false,
|
||||
hideTitle: false,
|
||||
minimumItemSize: 48,
|
||||
itemHeight: 128,
|
||||
orientation: "horizontal",
|
||||
showHostname: true,
|
||||
showTitle: true,
|
||||
});
|
||||
|
||||
expect(getCompactBookmarkLayout(180, 80, 4, "row")).toMatchObject({
|
||||
columns: 4,
|
||||
hideHostname: true,
|
||||
hideTitle: true,
|
||||
minimumItemSize: 96,
|
||||
expect(
|
||||
getBookmarkDisplayPlan({ advanced: false, width: 180, height: 80, itemCount: 4, layout: "adaptive" }),
|
||||
).toMatchObject({
|
||||
columns: 1,
|
||||
orientation: "icon",
|
||||
showHostname: false,
|
||||
showTitle: false,
|
||||
});
|
||||
});
|
||||
|
||||
test("does not crash on malformed bookmark URLs", () => {
|
||||
expect(getBookmarkHostname("https://homarr.dev/docs")).toBe("homarr.dev");
|
||||
expect(getBookmarkHostname("not a URL")).toBeUndefined();
|
||||
expect(getBookmarkHostname(null)).toBeUndefined();
|
||||
test("keeps compact cards visible when icons are hidden", () => {
|
||||
const plan = getBookmarkDisplayPlan({ advanced: false, width: 180, height: 80, itemCount: 4, layout: "icons" });
|
||||
expect(
|
||||
getBookmarkCardDisplay({ advanced: false, hideHostname: false, hideIcon: true, hideTitle: false, plan }),
|
||||
).toEqual({
|
||||
orientation: "horizontal",
|
||||
showHostname: false,
|
||||
showIcon: false,
|
||||
showTitle: true,
|
||||
});
|
||||
});
|
||||
|
||||
test("creates standalone bookmarks without app records", () => {
|
||||
expect(createCustomBookmark("https://homarr.dev/docs")).toEqual({
|
||||
id: "custom-link:https://homarr.dev/docs",
|
||||
expect(createDirectBookmark("https://homarr.dev/docs")).toEqual({
|
||||
id: "url:https://homarr.dev/docs",
|
||||
name: "homarr.dev",
|
||||
description: null,
|
||||
href: "https://homarr.dev/docs",
|
||||
});
|
||||
expect(createCustomBookmark(" https://homarr.dev/docs ")).toEqual({
|
||||
id: "custom-link:https://homarr.dev/docs",
|
||||
name: "homarr.dev",
|
||||
description: null,
|
||||
href: "https://homarr.dev/docs",
|
||||
});
|
||||
expect(createCustomBookmark("javascript:alert(1)")).toBeNull();
|
||||
expect(normalizeBookmarkUrl("homarr.dev/docs")).toBe("https://homarr.dev/docs");
|
||||
expect(normalizeBookmarkUrl("javascript:alert(1)")).toBeUndefined();
|
||||
});
|
||||
|
||||
test("splits URL lists without corrupting commas inside a URL", () => {
|
||||
expect(splitBookmarkUrls("https://one.example, two.example")).toEqual(["https://one.example", "two.example"]);
|
||||
expect(splitBookmarkUrls("https://maps.example/@52.5,13.4,15z")).toEqual(["https://maps.example/@52.5,13.4,15z"]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,265 @@
|
||||
import type { WidgetComponentProps } from "../definition";
|
||||
|
||||
export type BookmarkLayout = WidgetComponentProps<"bookmarks">["options"]["layout"];
|
||||
export type BookmarkOrientation = "horizontal" | "vertical" | "icon";
|
||||
|
||||
export interface BookmarkDisplayPlan {
|
||||
columns: number;
|
||||
horizontalScroll: boolean;
|
||||
itemHeight: number;
|
||||
itemWidth: number;
|
||||
orientation: BookmarkOrientation;
|
||||
showHostname: boolean;
|
||||
showTitle: boolean;
|
||||
}
|
||||
|
||||
export interface BookmarkCardDisplay {
|
||||
orientation: BookmarkOrientation;
|
||||
showHostname: boolean;
|
||||
showIcon: boolean;
|
||||
showTitle: boolean;
|
||||
}
|
||||
|
||||
export const getBookmarkCardDisplay = ({
|
||||
advanced,
|
||||
hideHostname,
|
||||
hideIcon,
|
||||
hideTitle,
|
||||
plan,
|
||||
}: {
|
||||
advanced: boolean;
|
||||
hideHostname: boolean;
|
||||
hideIcon: boolean;
|
||||
hideTitle: boolean;
|
||||
plan: BookmarkDisplayPlan;
|
||||
}): BookmarkCardDisplay => {
|
||||
let orientation = plan.orientation;
|
||||
let showTitle = advanced || (!hideTitle && plan.showTitle);
|
||||
if (!advanced && hideIcon && !hideTitle && !showTitle) {
|
||||
orientation = "horizontal";
|
||||
showTitle = true;
|
||||
}
|
||||
const showHostname = advanced || (!hideHostname && plan.showHostname);
|
||||
const showIcon = advanced || !hideIcon || (!showTitle && !showHostname);
|
||||
|
||||
return { orientation, showHostname, showIcon, showTitle };
|
||||
};
|
||||
|
||||
interface BookmarkWidthBreakpoint {
|
||||
adaptiveColumns: number;
|
||||
adaptiveOrientation: BookmarkOrientation;
|
||||
advancedColumns: number;
|
||||
compactColumns: number;
|
||||
gridColumns: number;
|
||||
iconColumns: number;
|
||||
minWidth: number;
|
||||
rowItemWidth: number;
|
||||
showHostname: boolean;
|
||||
showTitle: boolean;
|
||||
}
|
||||
|
||||
const widthBreakpoints = [
|
||||
{
|
||||
minWidth: 900,
|
||||
adaptiveColumns: 4,
|
||||
advancedColumns: 3,
|
||||
compactColumns: 4,
|
||||
gridColumns: 5,
|
||||
iconColumns: 10,
|
||||
rowItemWidth: 180,
|
||||
adaptiveOrientation: "vertical",
|
||||
showHostname: true,
|
||||
showTitle: true,
|
||||
},
|
||||
{
|
||||
minWidth: 720,
|
||||
adaptiveColumns: 3,
|
||||
advancedColumns: 2,
|
||||
compactColumns: 3,
|
||||
gridColumns: 4,
|
||||
iconColumns: 8,
|
||||
rowItemWidth: 172,
|
||||
adaptiveOrientation: "horizontal",
|
||||
showHostname: true,
|
||||
showTitle: true,
|
||||
},
|
||||
{
|
||||
minWidth: 480,
|
||||
adaptiveColumns: 2,
|
||||
advancedColumns: 2,
|
||||
compactColumns: 2,
|
||||
gridColumns: 3,
|
||||
iconColumns: 6,
|
||||
rowItemWidth: 160,
|
||||
adaptiveOrientation: "horizontal",
|
||||
showHostname: true,
|
||||
showTitle: true,
|
||||
},
|
||||
{
|
||||
minWidth: 300,
|
||||
adaptiveColumns: 2,
|
||||
advancedColumns: 1,
|
||||
compactColumns: 1,
|
||||
gridColumns: 2,
|
||||
iconColumns: 4,
|
||||
rowItemWidth: 144,
|
||||
adaptiveOrientation: "horizontal",
|
||||
showHostname: false,
|
||||
showTitle: true,
|
||||
},
|
||||
{
|
||||
minWidth: 0,
|
||||
adaptiveColumns: 1,
|
||||
advancedColumns: 1,
|
||||
compactColumns: 1,
|
||||
gridColumns: 1,
|
||||
iconColumns: 2,
|
||||
rowItemWidth: 112,
|
||||
adaptiveOrientation: "icon",
|
||||
showHostname: false,
|
||||
showTitle: false,
|
||||
},
|
||||
] as const satisfies readonly BookmarkWidthBreakpoint[];
|
||||
|
||||
interface BookmarkHeightBreakpoint {
|
||||
columnItemHeight: number;
|
||||
itemHeight: number;
|
||||
minHeight: number;
|
||||
orientation: BookmarkOrientation;
|
||||
rowItemHeight: number;
|
||||
showHostname: boolean;
|
||||
showTitle: boolean;
|
||||
}
|
||||
|
||||
const heightBreakpoints = [
|
||||
{
|
||||
minHeight: 300,
|
||||
columnItemHeight: 72,
|
||||
itemHeight: 128,
|
||||
rowItemHeight: 128,
|
||||
orientation: "vertical",
|
||||
showHostname: true,
|
||||
showTitle: true,
|
||||
},
|
||||
{
|
||||
minHeight: 180,
|
||||
columnItemHeight: 64,
|
||||
itemHeight: 128,
|
||||
rowItemHeight: 112,
|
||||
orientation: "horizontal",
|
||||
showHostname: true,
|
||||
showTitle: true,
|
||||
},
|
||||
{
|
||||
minHeight: 110,
|
||||
columnItemHeight: 56,
|
||||
itemHeight: 80,
|
||||
rowItemHeight: 80,
|
||||
orientation: "horizontal",
|
||||
showHostname: false,
|
||||
showTitle: true,
|
||||
},
|
||||
{
|
||||
minHeight: 0,
|
||||
columnItemHeight: 48,
|
||||
itemHeight: 56,
|
||||
rowItemHeight: 56,
|
||||
orientation: "icon",
|
||||
showHostname: false,
|
||||
showTitle: false,
|
||||
},
|
||||
] as const satisfies readonly BookmarkHeightBreakpoint[];
|
||||
|
||||
export 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 normalizedWidth = Math.max(0, width);
|
||||
const normalizedHeight = Math.max(0, height);
|
||||
const widthSettings = widthBreakpoints.find(({ minWidth }) => normalizedWidth >= minWidth);
|
||||
const heightSettings = heightBreakpoints.find(({ minHeight }) => normalizedHeight >= minHeight);
|
||||
if (!widthSettings || !heightSettings) throw new Error("Bookmark breakpoints must cover all widget sizes");
|
||||
|
||||
if (advanced) {
|
||||
return {
|
||||
columns: Math.min(count, widthSettings.advancedColumns),
|
||||
horizontalScroll: false,
|
||||
itemHeight: 104,
|
||||
itemWidth: 260,
|
||||
orientation: "horizontal",
|
||||
showHostname: true,
|
||||
showTitle: true,
|
||||
};
|
||||
}
|
||||
|
||||
if (layout === "row") {
|
||||
let orientation: BookmarkOrientation = "vertical";
|
||||
if (!heightSettings.showTitle) orientation = "icon";
|
||||
return {
|
||||
columns: count,
|
||||
horizontalScroll: true,
|
||||
itemHeight: heightSettings.rowItemHeight,
|
||||
itemWidth: widthSettings.rowItemWidth,
|
||||
orientation,
|
||||
showHostname: widthSettings.showHostname && heightSettings.showHostname,
|
||||
showTitle: widthSettings.showTitle && heightSettings.showTitle,
|
||||
};
|
||||
}
|
||||
|
||||
if (layout === "column") {
|
||||
return {
|
||||
columns: 1,
|
||||
horizontalScroll: false,
|
||||
itemHeight: heightSettings.columnItemHeight,
|
||||
itemWidth: width,
|
||||
orientation: "horizontal",
|
||||
showHostname: widthSettings.showHostname && heightSettings.showHostname,
|
||||
showTitle: widthSettings.showTitle && heightSettings.showTitle,
|
||||
};
|
||||
}
|
||||
|
||||
if (layout === "icons") {
|
||||
return {
|
||||
columns: Math.min(count, widthSettings.iconColumns),
|
||||
horizontalScroll: false,
|
||||
itemHeight: 56,
|
||||
itemWidth: 56,
|
||||
orientation: "icon",
|
||||
showHostname: false,
|
||||
showTitle: false,
|
||||
};
|
||||
}
|
||||
|
||||
let columns: number = widthSettings.compactColumns;
|
||||
let orientation: BookmarkOrientation = "horizontal";
|
||||
if (layout === "grid") {
|
||||
columns = widthSettings.gridColumns;
|
||||
orientation = "vertical";
|
||||
}
|
||||
if (layout === "adaptive") {
|
||||
columns = widthSettings.adaptiveColumns;
|
||||
orientation = widthSettings.adaptiveOrientation;
|
||||
if (heightSettings.orientation === "icon") orientation = "icon";
|
||||
if (heightSettings.orientation === "horizontal" && orientation === "vertical") orientation = "horizontal";
|
||||
}
|
||||
|
||||
return {
|
||||
columns: Math.min(count, columns),
|
||||
horizontalScroll: false,
|
||||
itemHeight: heightSettings.itemHeight,
|
||||
itemWidth: widthSettings.rowItemWidth,
|
||||
orientation,
|
||||
showHostname: orientation !== "icon" && widthSettings.showHostname && heightSettings.showHostname,
|
||||
showTitle: orientation !== "icon" && widthSettings.showTitle && heightSettings.showTitle,
|
||||
};
|
||||
};
|
||||
@@ -34,6 +34,7 @@ export interface SortableItemListInput<TItem, TOptionValue extends UniqueIdentif
|
||||
> {
|
||||
AddButton: (props: {
|
||||
addItem: (item: TItem) => void;
|
||||
migrateItems: (items: TItem[], optionsPatch: Record<string, unknown>) => void;
|
||||
removeItem: (value: TOptionValue) => void;
|
||||
values: TOptionValue[];
|
||||
initialOptions: Record<string, unknown>;
|
||||
@@ -41,6 +42,7 @@ export interface SortableItemListInput<TItem, TOptionValue extends UniqueIdentif
|
||||
ItemComponent: (props: {
|
||||
item: TItem;
|
||||
removeItem: () => void;
|
||||
removeLabel: string;
|
||||
rootAttributes: DraggableAttributes;
|
||||
handle: React.ReactNode;
|
||||
}) => React.ReactNode;
|
||||
|
||||
Reference in new issue
Block a user