From b7d72d2106c158d78be0c5153341d2a5d59bb3d6 Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.dev>
Date: Sat, 22 Aug 2026 16:37:39 +0200
Subject: [PATCH] feat: add bookmark card spacing

---
 apps/docs/docs/widgets/bookmarks/index.ts     |  6 ++++++
 packages/translation/src/lang/en.json         | 20 +++++++++++++++++++
 .../src/bookmarks/bookmarks-widget.tsx        |  8 ++++----
 packages/widgets/src/bookmarks/index.tsx      |  7 +++++++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/apps/docs/docs/widgets/bookmarks/index.ts b/apps/docs/docs/widgets/bookmarks/index.ts
index 544f7ed99..b1a766ade 100644
--- a/apps/docs/docs/widgets/bookmarks/index.ts
+++ b/apps/docs/docs/widgets/bookmarks/index.ts
@@ -26,6 +26,12 @@ export const bookmarksWidget: WidgetDefinition = {
         values: { type: "select", options: ["Soft", "Filled", "Outline", "Plain"] },
         defaultValue: "Soft",
       },
+      {
+        name: "Card spacing",
+        description: "Space between bookmark cards.",
+        values: { type: "select", options: ["Extra small", "Small", "Medium", "Large", "Extra large"] },
+        defaultValue: "Extra small",
+      },
       {
         name: "Hide title",
         description: "Whether to hide the title of the bookmark items.",
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index be9695a0f..dc27c91c8 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2220,6 +2220,26 @@
             }
           }
         },
+        "spacing": {
+          "label": "Card spacing",
+          "option": {
+            "xs": {
+              "label": "Extra small"
+            },
+            "sm": {
+              "label": "Small"
+            },
+            "md": {
+              "label": "Medium"
+            },
+            "lg": {
+              "label": "Large"
+            },
+            "xl": {
+              "label": "Extra large"
+            }
+          }
+        },
         "hideTitle": {
           "label": "Hide title"
         },
diff --git a/packages/widgets/src/bookmarks/bookmarks-widget.tsx b/packages/widgets/src/bookmarks/bookmarks-widget.tsx
index 56d90e132..986541972 100644
--- a/packages/widgets/src/bookmarks/bookmarks-widget.tsx
+++ b/packages/widgets/src/bookmarks/bookmarks-widget.tsx
@@ -157,11 +157,11 @@ export default function BookmarksWidget({
         >
           <Box miw="100%" mih="100%" pb={2}>
             {plan.horizontalScroll ? (
-              <Group gap={6} wrap="nowrap" mih="100%" align="stretch">
+              <Group gap={options.spacing} wrap="nowrap" mih="100%" align="stretch">
                 {cards}
               </Group>
             ) : (
-              <SimpleGrid cols={plan.columns} spacing={6} verticalSpacing={6}>
+              <SimpleGrid cols={plan.columns} spacing={options.spacing} verticalSpacing={options.spacing}>
                 {cards}
               </SimpleGrid>
             )}
@@ -214,7 +214,7 @@ 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={10} fw={600} lh={1.2} ta="center" lineClamp={2}>
+          <Text fz={11} fw={600} lh={1.2} ta="center" lineClamp={2}>
             {bookmark.name}
           </Text>
         ) : null}
@@ -239,7 +239,7 @@ const BookmarkCard = ({
         {!iconOnly ? (
           <Stack gap={advanced ? 3 : 0} miw={0} flex={1}>
             {showTitle ? (
-              <Text fz={advanced ? 11 : 10} fw={600} lh={1.2} truncate>
+              <Text fz={advanced ? 12 : 11} fw={600} lh={1.2} truncate>
                 {bookmark.name}
               </Text>
             ) : null}
diff --git a/packages/widgets/src/bookmarks/index.tsx b/packages/widgets/src/bookmarks/index.tsx
index 264218c9c..82d171e9d 100644
--- a/packages/widgets/src/bookmarks/index.tsx
+++ b/packages/widgets/src/bookmarks/index.tsx
@@ -37,6 +37,13 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
         })),
         defaultValue: "soft",
       }),
+      spacing: factory.select({
+        options: (["xs", "sm", "md", "lg", "xl"] as const).map((value) => ({
+          value,
+          label: (t) => t(`widget.bookmarks.option.spacing.option.${value}.label`),
+        })),
+        defaultValue: "xs",
+      }),
       hideTitle: factory.switch({ defaultValue: false }),
       hideIcon: factory.switch({ defaultValue: false }),
       hideHostname: factory.switch({ defaultValue: false }),