From 5a33218235d75feec6c3debafefd9592c55281f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Aug 2026 10:14:47 +0200
Subject: [PATCH] feat: support a multi-link list in the bookmark widget

A bookmark widget can now carry an optional links array instead of
a single href, rendering as a compact card with one row per link -
for grouping several quick links (e.g. "all services", "all Coolify
apps") into one widget instead of one card per link.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WpxhtQY3CExQdMs4j7MmJe
---
 components/widgets/bookmark/Widget.tsx | 31 ++++++++++++++++++++++++++
 lib/config/schema.ts                   |  9 +++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/components/widgets/bookmark/Widget.tsx b/components/widgets/bookmark/Widget.tsx
index fe9775f..8cb8602 100644
--- a/components/widgets/bookmark/Widget.tsx
+++ b/components/widgets/bookmark/Widget.tsx
@@ -6,6 +6,37 @@ import { BrandIcon } from "@/components/widgets/BrandIcon";
 type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;
 
 export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
+  if (widget.links && widget.links.length > 0) {
+    return (
+      <div className={PN_CARD_CLASS} style={{ gridColumn: "span 3" }}>
+        <div className="flex items-center gap-2">
+          <BrandIcon slug={widget.icon} />
+          <span className="min-w-0 flex-1 truncate text-[15px] font-medium text-fg">{widget.name}</span>
+        </div>
+        {widget.description && <span className="text-xs text-fg-muted">{widget.description}</span>}
+        <div className="-mx-1 flex flex-col divide-y divide-border">
+          {widget.links.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              target="_blank"
+              rel="noreferrer"
+              className="group flex items-center gap-2 px-1 py-1.5 text-sm text-fg-muted no-underline hover:text-accent"
+            >
+              <BrandIcon slug={link.icon} size={14} />
+              <span className="min-w-0 flex-1 truncate">{link.name}</span>
+              <ArrowUpRight
+                size={13}
+                className="shrink-0 text-accent opacity-0 group-hover:opacity-100"
+                aria-hidden
+              />
+            </a>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <a
       href={widget.href}
diff --git a/lib/config/schema.ts b/lib/config/schema.ts
index 771439d..f2f5322 100644
--- a/lib/config/schema.ts
+++ b/lib/config/schema.ts
@@ -6,12 +6,19 @@ const durationSchema = z
   .string()
   .regex(/^\d+(ms|s|m|h)$/, 'Expected a duration like "500ms", "5s", "1m", or "1h"');
 
+export const bookmarkLinkSchema = z.object({
+  name: z.string(),
+  href: z.string().url(),
+  icon: z.string().optional(),
+});
+
 export const bookmarkWidgetSchema = z.object({
   type: z.literal("bookmark"),
   name: z.string(),
-  href: z.string().url(),
+  href: z.string().url().optional(),
   description: z.string().optional(),
   icon: z.string().optional(),
+  links: z.array(bookmarkLinkSchema).optional(),
 });
 
 export const searchWidgetSchema = z.object({