feat(layout/badges): interactive share badge

This commit is contained in:
Elian Doran
2025-12-16 00:07:19 +02:00
parent 6094f738f2
commit 7bac0b25ce
2 changed files with 27 additions and 12 deletions

View File

@@ -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",

View File

@@ -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 &&
<Badge
return (linkHref &&
<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>
);
}