feat(layout): add shared badge

This commit is contained in:
Elian Doran 2025-12-09 21:44:39 +02:00
parent f42031c8de
commit 644d051477
No known key found for this signature in database
3 changed files with 35 additions and 14 deletions

View File

@ -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 />)

View File

@ -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}>

View File

@ -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;
}
}