refactor(badges/content): extract to separate file

This commit is contained in:
Elian Doran 2026-02-14 09:37:48 +02:00
parent f3dccc0aec
commit 7d103f8c50
No known key found for this signature in database
3 changed files with 41 additions and 15 deletions

View File

@ -0,0 +1,34 @@
import { Badge } from "../react/Badge";
import FormToggle from "../react/FormToggle";
import { useNoteContext, useNoteLabelBoolean } from "../react/hooks";
export function ActiveContentBadges() {
return (
<>
<IconPackBadge />
<ActiveContentToggle />
</>
);
}
function IconPackBadge() {
const { note } = useNoteContext();
const [ isEnabledIconPack ] = useNoteLabelBoolean(note, "iconPack");
const [ isDisabledIconPack ] = useNoteLabelBoolean(note, "disabled:iconPack");
return ((isEnabledIconPack || isDisabledIconPack) &&
<Badge
className="icon-pack-badge"
icon="bx bx-package"
text="Icon pack"
/>
);
}
function ActiveContentToggle() {
return <FormToggle
switchOnName="Enabled"
switchOffName="Enabled"
currentValue={true}
/>;
}

View File

@ -46,6 +46,11 @@
text-overflow: ellipsis;
min-width: 0;
}
.switch-button {
--switch-track-height: 8px;
--switch-track-width: 30px;
}
}
.dropdown-badge {

View File

@ -10,6 +10,7 @@ import { FormDropdownDivider, FormListItem } from "../react/FormList";
import { useGetContextData, useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
import { useShareState } from "../ribbon/BasicPropertiesTab";
import { useShareInfo } from "../shared_info";
import { ActiveContentBadges } from "./ActiveContentBadges";
export default function NoteBadges() {
return (
@ -19,7 +20,7 @@ export default function NoteBadges() {
<ShareBadge />
<ClippedNoteBadge />
<ExecuteBadge />
<IconPackBadge />
<ActiveContentBadges />
</div>
);
}
@ -148,17 +149,3 @@ export function SaveStatusBadge() {
/>
);
}
function IconPackBadge() {
const { note } = useNoteContext();
const isEnabledIconPack = useNoteLabelBoolean(note, "iconPack");
const isDisabledIconPack = useNoteLabelBoolean(note, "disabled:iconPack");
return ((isEnabledIconPack || isDisabledIconPack) &&
<Badge
className="icon-pack-badge"
icon="bx bx-package"
text="Icon pack"
/>
);
}