From 40b5e4d5496036a821f1287c77bdf2b2b425c9d9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 10 Dec 2025 09:47:05 +0200
Subject: [PATCH] feat(breadcrumb_badges): proper link handling support

---
 apps/client/src/translations/en/translation.json |  4 ++--
 apps/client/src/widgets/BreadcrumbBadges.css     |  5 +++++
 apps/client/src/widgets/BreadcrumbBadges.tsx     | 13 ++++++++-----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 270b58299..d5b69b37f 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2138,8 +2138,8 @@
     "read_only_temporarily_disabled": "Temporarily editable",
     "read_only_temporarily_disabled_description": "This note is currently editable, but it is normally read-only. The note will go back to being read-only as soon as you navigate to another note.\n\nClick to re-enable read-only mode.",
     "shared_publicly": "Shared publicly",
-    "shared_publicly_description": "This note has been published online at {{- link}}, and is publicly accessible.\n\nClick to navigate to the shared note.",
+    "shared_publicly_description": "This note has been published online at {{- link}}, and is publicly accessible.\n\nClick to navigate to the shared note or right click for more options.",
     "shared_locally": "Shared locally",
-    "shared_locally_description": "This note is shared on the local network only at {{- link}}.\n\nClick to navigate to the shared note."
+    "shared_locally_description": "This note is shared on the local network only at {{- link}}.\n\nClick to navigate to the shared note or right click for more options."
   }
 }
diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css
index 58ffe2cff..0090f1cf9 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.css
+++ b/apps/client/src/widgets/BreadcrumbBadges.css
@@ -23,5 +23,10 @@
         &.temporarily-editable-badge { --color: #4fa52b; }
         &.read-only-badge { --color: #e33f3b; }
         &.share-badge { --color: #3b82f6; }
+
+        a {
+            color: inherit;
+            text-decoration: none;
+        }
     }
 }
diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index ffa922063..8e79aeaff 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/apps/client/src/widgets/BreadcrumbBadges.tsx
@@ -7,7 +7,6 @@ import { useShareInfo } from "./shared_info";
 import clsx from "clsx";
 import { t } from "../services/i18n";
 import { useRef } from "preact/hooks";
-import { goToLinkExt } from "../services/link";
 
 export default function BreadcrumbBadges() {
     return (
@@ -57,14 +56,14 @@ function ShareBadge() {
                 t("breadcrumb_badges.shared_locally_description", { link })
             }
             className="share-badge"
-            onClick={(e) => linkHref && goToLinkExt(e, linkHref)}
+            href={linkHref}
         >
             {isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")}
         </Badge>
     );
 }
 
-function Badge({ icon, className, children, tooltip, onClick }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement> }) {
+function Badge({ icon, className, children, tooltip, onClick, href }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement>, href?: string }) {
     const containerRef = useRef<HTMLDivElement>(null);
     useStaticTooltip(containerRef, {
         placement: "bottom",
@@ -74,14 +73,18 @@ function Badge({ icon, className, children, tooltip, onClick }: { icon: string,
         title: tooltip
     });
 
+    const content = <>
+        <Icon icon={icon} />&nbsp;
+        {children}
+    </>;
+
     return (
         <div
             ref={containerRef}
             className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })}
             onClick={onClick}
         >
-            <Icon icon={icon} />&nbsp;
-            {children}
+            {href ? <a href={href}>{content}</a> : content}
         </div>
     );
 }