From 46ccc6c245923cf9dd319d9bbb64e428af05131a Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Tue, 2 Jun 2026 22:07:40 +0200
Subject: [PATCH 1/2] fix: add bookmark widget option to toggle card borders

Replace hardcoded borderless cards with a withBorder switch defaulting to false so existing bookmarks stay borderless while users can opt in to borders.
---
 packages/translation/src/lang/en.json        |  3 +++
 packages/widgets/src/bookmarks/component.tsx | 17 ++++++++++++++++-
 packages/widgets/src/bookmarks/index.tsx     |  1 +
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index a62728845..ecd5af1fc 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1405,6 +1405,9 @@
         "openNewTab": {
           "label": "Open in new tab"
         },
+        "withBorder": {
+          "label": "Show border"
+        },
         "items": {
           "label": "Bookmarks",
           "add": "Add bookmark"
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index 09066f90d..d4ffe3321 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -56,6 +56,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           hideIcon={options.hideIcon}
           hideHostname={options.hideHostname}
           openNewTab={options.openNewTab}
+          withBorder={options.withBorder}
           hasIconColor={board.iconColor !== null}
         />
       )}
@@ -67,6 +68,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           hideIcon={options.hideIcon}
           hideHostname={options.hideHostname}
           openNewTab={options.openNewTab}
+          withBorder={options.withBorder}
           hasIconColor={board.iconColor !== null}
         />
       )}
@@ -81,6 +83,7 @@ interface FlexLayoutProps {
   hideIcon: boolean;
   hideHostname: boolean;
   openNewTab: boolean;
+  withBorder: boolean;
   hasIconColor: boolean;
 }
 
@@ -91,6 +94,7 @@ const FlexLayout = ({
   hideIcon,
   hideHostname,
   openNewTab,
+  withBorder,
   hasIconColor,
 }: FlexLayoutProps) => {
   const board = useRequiredBoard();
@@ -106,7 +110,15 @@ const FlexLayout = ({
             key={app.id}
             w="100%"
           >
-            <Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={4} h="100%">
+            <Card
+              radius={board.itemRadius}
+              className={classes.card}
+              w="100%"
+              display="flex"
+              p={4}
+              h="100%"
+              withBorder={withBorder}
+            >
               {direction === "row" ? (
                 <VerticalItem
                   app={app}
@@ -138,6 +150,7 @@ interface GridLayoutProps {
   hideIcon: boolean;
   hideHostname: boolean;
   openNewTab: boolean;
+  withBorder: boolean;
   itemDirection: "horizontal" | "vertical";
   hasIconColor: boolean;
 }
@@ -148,6 +161,7 @@ const GridLayout = ({
   hideIcon,
   hideHostname,
   openNewTab,
+  withBorder,
   itemDirection,
   hasIconColor,
 }: GridLayoutProps) => {
@@ -168,6 +182,7 @@ const GridLayout = ({
             h="100%"
             className={combineClasses(classes.card, classes["card-grid"])}
             radius={board.itemRadius}
+            withBorder={withBorder}
             p="xs"
           >
             {itemDirection === "horizontal" ? (
diff --git a/packages/widgets/src/bookmarks/index.tsx b/packages/widgets/src/bookmarks/index.tsx
index 24b3a618c..c57b909fd 100644
--- a/packages/widgets/src/bookmarks/index.tsx
+++ b/packages/widgets/src/bookmarks/index.tsx
@@ -24,6 +24,7 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
       hideIcon: factory.switch({ defaultValue: false }),
       hideHostname: factory.switch({ defaultValue: false }),
       openNewTab: factory.switch({ defaultValue: true }),
+      withBorder: factory.switch({ defaultValue: false }),
       items: factory.sortableItemList<RouterOutputs["app"]["all"][number], string>({
         ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => {
           return (

From 144a55b34e052b196791fa0ef10d7824a5562b7e Mon Sep 17 00:00:00 2001
From: ajnart <49837342+ajnart@users.noreply.github.com>
Date: Tue, 2 Jun 2026 20:08:53 +0000
Subject: [PATCH 2/2] style: auto-fix lint and format

---
 packages/widgets/src/bookmarks/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index d4ffe3321..51fb6f781 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -16,7 +16,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
   const board = useRequiredBoard();
   const [data] = clientApi.app.byIds.useSuspenseQuery(options.items, {
     select(data) {
-      return data.sort((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
+      return data.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
     },
   });