feat: add bookmark card spacing

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.",

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"
         },

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}

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 }),