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() {
+
);
}
@@ -114,6 +115,21 @@ function BacklinksBadge() {
);
}
+function ClippedNoteBadge() {
+ const { note } = useNoteContext();
+ const [ pageUrl ] = useNoteLabel(note, "pageUrl");
+
+ return (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
},
{