From 41fe5928f19207d02b04e64c2caac49d896f72ce Mon Sep 17 00:00:00 2001
From: Thomas <thomas@ajnart.fr>
Date: Thu, 4 Jun 2026 11:07:31 +0200
Subject: [PATCH] fix: add bookmark widget option to toggle card borders
 (#5854)

---
 packages/translation/src/lang/en.json        |  3 +++
 packages/widgets/src/bookmarks/component.tsx | 19 +++++++++++++++++--
 packages/widgets/src/bookmarks/index.tsx     |  1 +
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 2bfe4e223..81a04ff76 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1406,6 +1406,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..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));
     },
   });
 
@@ -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 (