From 644d05147724a1ffcdf74e880cceb7eaac25c35e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Dec 2025 21:44:39 +0200
Subject: [PATCH] feat(layout): add shared badge

---
 apps/client/src/layouts/desktop_layout.tsx   |  4 +--
 apps/client/src/widgets/BreadcrumbBadges.tsx | 15 ++++++++++
 apps/client/src/widgets/shared_info.tsx      | 30 ++++++++++++--------
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index a9ae9a355..cc3585493 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -156,8 +156,8 @@ export default class DesktopLayout {
                                                             new ScrollingContainer()
                                                                 .filling()
                                                                 .optChild(isNewLayout, titleRow)
-                                                                .child(new ContentHeader()
-                                                                    .optChild(!isNewLayout, <ReadOnlyNoteInfoBar />)
+                                                                .optChild(!isNewLayout, new ContentHeader()
+                                                                    .child(<ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
                                                                 )
                                                                 .child(<PromotedAttributes />)
diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index f4f684c88..f77cc477c 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/apps/client/src/widgets/BreadcrumbBadges.tsx
@@ -3,11 +3,13 @@ import "./BreadcrumbBadges.css";
 import { ComponentChildren } from "preact";
 import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
 import Icon from "./react/Icon";
+import { useShareInfo } from "./shared_info";
 
 export default function NoteBadges() {
     return (
         <div className="breadcrumb-badges">
             <ReadOnlyBadge />
+            <ShareBadge />
         </div>
     );
 }
@@ -26,6 +28,19 @@ function ReadOnlyBadge() {
     );
 }
 
+function ShareBadge() {
+    const { note } = useNoteContext();
+    const { isSharedExternally, link } = useShareInfo(note);
+
+    return (link &&
+        <Badge
+            icon={isSharedExternally ? "bx bx-world" : "bx bx-link"}
+        >
+            {isSharedExternally ? "Shared publicly" : "Shared locally"}
+        </Badge>
+    );
+}
+
 function Badge({ icon, children, onClick }: { icon: string, children: ComponentChildren, onClick?: () => void }) {
     return (
         <div className="breadcrumb-badge" onClick={onClick}>
diff --git a/apps/client/src/widgets/shared_info.tsx b/apps/client/src/widgets/shared_info.tsx
index bd0b72bc2..954ceb5f0 100644
--- a/apps/client/src/widgets/shared_info.tsx
+++ b/apps/client/src/widgets/shared_info.tsx
@@ -10,8 +10,23 @@ import RawHtml from "./react/RawHtml";
 
 export default function SharedInfo() {
     const { note } = useNoteContext();
-    const [ syncServerHost ] = useTriliumOption("syncServerHost");
+    const { isSharedExternally, link } = useShareInfo(note);
+
+    return (
+        <InfoBar className="shared-info-widget" type="subtle" style={{display: (!link) ? "none" : undefined}}>
+            {link && (
+                <RawHtml html={isSharedExternally
+                ? t("shared_info.shared_publicly", { link })
+                : t("shared_info.shared_locally", { link })} />
+            )}
+            <HelpButton helpPage="R9pX4DGra2Vt" style={{ width: "24px", height: "24px" }} />
+        </InfoBar>
+    );
+}
+
+export function useShareInfo(note: FNote | null | undefined) {
     const [ link, setLink ] = useState<string>();
+    const [ syncServerHost ] = useTriliumOption("syncServerHost");
 
     function refresh() {
         if (!note) return;
@@ -48,16 +63,7 @@ export default function SharedInfo() {
         }
     });
 
-    return (
-        <InfoBar className="shared-info-widget" type="subtle" style={{display: (!link) ? "none" : undefined}}>
-            {link && (
-                <RawHtml html={syncServerHost
-                ? t("shared_info.shared_publicly", { link })
-                : t("shared_info.shared_locally", { link })} />                
-            )}
-            <HelpButton helpPage="R9pX4DGra2Vt" style={{ width: "24px", height: "24px" }} />
-        </InfoBar>
-    )
+    return { link, isSharedExternally: !!syncServerHost };
 }
 
 function getShareId(note: FNote) {
@@ -66,4 +72,4 @@ function getShareId(note: FNote) {
     }
 
     return note.getOwnedLabelValue("shareAlias") || note.noteId;
-}
\ No newline at end of file
+}