feat(layout/badges): interactive share badge

apps/client/src/translations/en/translation.json

@@ -2158,9 +2158,10 @@
     "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 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 or right click for more options.",
+    "shared_copy_to_clipboard": "Copy link to clipboard",
+    "shared_open_in_browser": "Open link in browser",
+    "shared_unshare": "Remove share",
     "clipped_note": "Web clip",
     "clipped_note_description": "This note was originally taken from {{url}}.\n\nClick to navigate to the source webpage.",
     "execute_script": "Run script",

apps/client/src/widgets/layout/NoteBadges.tsx

@@ -1,8 +1,12 @@
 import "./NoteBadges.css";
 
+import { copyTextWithToast } from "../../services/clipboard_ext";
 import { t } from "../../services/i18n";
-import { Badge } from "../react/Badge";
+import { goToLinkExt } from "../../services/link";
+import { Badge, BadgeWithDropdown } from "../react/Badge";
+import { FormDropdownDivider, FormListItem } from "../react/FormList";
 import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { useShareState } from "../ribbon/BasicPropertiesTab";
 import { useShareInfo } from "../shared_info";
 
 export default function NoteBadges() {
@@ -43,19 +47,29 @@ function ReadOnlyBadge() {
 
 function ShareBadge() {
     const { note } = useNoteContext();
-    const { isSharedExternally, link, linkHref } = useShareInfo(note);
+    const [ , switchShareState ] = useShareState(note);
+    const { isSharedExternally, linkHref } = useShareInfo(note);
 
-    return (link &&
+    return (linkHref &&
-        <Badge
+        <BadgeWithDropdown
             icon={isSharedExternally ? "bx bx-world" : "bx bx-share-alt"}
             text={isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")}
-            tooltip={isSharedExternally ?
-                t("breadcrumb_badges.shared_publicly_description", { link }) :
-                t("breadcrumb_badges.shared_locally_description", { link })
-            }
             className="share-badge"
-            href={linkHref}
+        >
-        />
+            <FormListItem
+                icon="bx bx-copy"
+                onClick={() => copyTextWithToast(linkHref)}
+            >{t("breadcrumb_badges.shared_copy_to_clipboard")}</FormListItem>
+            <FormListItem
+                icon="bx bx-link-external"
+                onClick={(e) => goToLinkExt(e, linkHref)}
+            >{t("breadcrumb_badges.shared_open_in_browser")}</FormListItem>
+            <FormDropdownDivider />
+            <FormListItem
+                icon="bx bx-unlink"
+                onClick={() => switchShareState(false)}
+            >{t("breadcrumb_badges.shared_unshare")}</FormListItem>
+        </BadgeWithDropdown>
     );
 }