From fa8287269f48234f9eabc82c6334fa3dbaae182d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 11 Dec 2025 17:34:04 +0200
Subject: [PATCH] feat(breadcrumb_badges): integrate note properties tab

---
 .../src/translations/en/translation.json       |  4 +++-
 apps/client/src/widgets/BreadcrumbBadges.css   |  1 +
 apps/client/src/widgets/BreadcrumbBadges.tsx   | 18 +++++++++++++++++-
 .../src/widgets/ribbon/RibbonDefinition.ts     |  2 +-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 9880e99b5..d92e21d26 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2146,6 +2146,8 @@
     "backlinks_one": "{{count}} backlink",
     "backlinks_other": "{{count}} backlinks",
     "backlinks_description_one": "This note is linked from {{count}} other note.\n\nClick to view the list of backlinks.",
-    "backlinks_description_other": "This note is linked from {{count}} other notes.\n\nClick to view the list of backlinks."
+    "backlinks_description_other": "This note is linked from {{count}} other notes.\n\nClick to view the list of backlinks.",
+    "clipped_note": "Web clip",
+    "clipped_note_description": "This note was originally taken from {{url}}.\n\nClick to navigate to the source webpage."
   }
 }
diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css
index a8fcd6657..ae8b4cad1 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.css
+++ b/apps/client/src/widgets/BreadcrumbBadges.css
@@ -33,6 +33,7 @@
     &.temporarily-editable-badge { --color: #4fa52b; }
     &.read-only-badge { --color: #e33f3b; }
     &.share-badge { --color: #3b82f6; }
+    &.clipped-note-badge { --color: #57a2a5; }
     &.backlinks-badge { color: var(--badge-text-color); }
 
     a {
diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index f1c6dd60e..42aaea065 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/apps/client/src/widgets/BreadcrumbBadges.tsx
@@ -8,7 +8,7 @@ import { t } from "../services/i18n";
 import { formatDateTime } from "../utils/formatters";
 import { BacklinksList, useBacklinkCount } from "./FloatingButtonsDefinitions";
 import Dropdown, { DropdownProps } from "./react/Dropdown";
-import { useIsNoteReadOnly, useNoteContext, useStaticTooltip } from "./react/hooks";
+import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useStaticTooltip } from "./react/hooks";
 import Icon from "./react/Icon";
 import { NoteSizeWidget, useNoteMetadata } from "./ribbon/NoteInfoTab";
 import { useShareInfo } from "./shared_info";
@@ -20,6 +20,7 @@ export default function BreadcrumbBadges() {
             <ReadOnlyBadge />
             <ShareBadge />
             <BacklinksBadge />
+            <ClippedNoteBadge />
         </div>
     );
 }
@@ -114,6 +115,21 @@ function BacklinksBadge() {
     );
 }
 
+function ClippedNoteBadge() {
+    const { note } = useNoteContext();
+    const [ pageUrl ] = useNoteLabel(note, "pageUrl");
+
+    return (pageUrl &&
+        <Badge
+            className="clipped-note-badge"
+            icon="bx bx-globe"
+            text={t("breadcrumb_badges.clipped_note")}
+            tooltip={t("breadcrumb_badges.clipped_note_description", { url: pageUrl })}
+            href={pageUrl}
+        />
+    );
+}
+
 interface BadgeProps {
     text?: string;
     icon?: string;
diff --git a/apps/client/src/widgets/ribbon/RibbonDefinition.ts b/apps/client/src/widgets/ribbon/RibbonDefinition.ts
index e2779e287..284547639 100644
--- a/apps/client/src/widgets/ribbon/RibbonDefinition.ts
+++ b/apps/client/src/widgets/ribbon/RibbonDefinition.ts
@@ -67,7 +67,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
         title: t("note_properties.info"),
         icon: "bx bx-info-square",
         content: NotePropertiesTab,
-        show: ({ note }) => !!note?.getLabelValue("pageUrl"),
+        show: ({ note }) => !isNewLayout && !!note?.getLabelValue("pageUrl"),
         activate: true
     },
     {