refactor(note_icon): split filter content into a component

This commit is contained in:
Elian Doran 2025-12-26 21:01:19 +02:00
parent eb5ebb53cb
commit ba699f9842
No known key found for this signature in database

View File

@ -58,7 +58,7 @@ function NoteIconList({ note }: { note: FNote }) {
const searchBoxRef = useRef<HTMLInputElement>(null);
const [ search, setSearch ] = useState<string>();
const [ iconData, setIconData ] = useState<IconData>();
const [ filterByPrefix, setFilterByIconPack ] = useState<string | null>(null);
const [ filterByPrefix, setFilterByPrefix ] = useState<string | null>(null);
useEffect(() => {
async function loadIcons() {
@ -134,23 +134,7 @@ function NoteIconList({ note }: { note: FNote }) {
noDropdownListStyle
iconAction
>
<FormListItem
checked={filterByPrefix === null}
onClick={() => setFilterByIconPack(null)}
>{t("note_icon.filter-none")}</FormListItem>
<FormListItem
checked={filterByPrefix === "bx"}
onClick={() => setFilterByIconPack("bx")}
>{t("note_icon.filter-default")}</FormListItem>
<FormDropdownDivider />
{glob.iconRegistry.sources.map(({ prefix, name }) => (
<FormListItem
key={prefix}
onClick={() => setFilterByIconPack(prefix)}
checked={filterByPrefix === prefix}
>{name}</FormListItem>
))}
<IconFilterContent filterByPrefix={filterByPrefix} setFilterByPrefix={setFilterByPrefix} />
</Dropdown>
</div>
@ -192,6 +176,33 @@ function NoteIconList({ note }: { note: FNote }) {
);
}
function IconFilterContent({ filterByPrefix, setFilterByPrefix }: {
filterByPrefix: string | null;
setFilterByPrefix: (value: string | null) => void;
}) {
return (
<>
<FormListItem
checked={filterByPrefix === null}
onClick={() => setFilterByPrefix(null)}
>{t("note_icon.filter-none")}</FormListItem>
<FormListItem
checked={filterByPrefix === "bx"}
onClick={() => setFilterByPrefix("bx")}
>{t("note_icon.filter-default")}</FormListItem>
<FormDropdownDivider />
{glob.iconRegistry.sources.map(({ prefix, name }) => (
<FormListItem
key={prefix}
onClick={() => setFilterByPrefix(prefix)}
checked={filterByPrefix === prefix}
>{name}</FormListItem>
))}
</>
);
}
async function getIconToCountMap() {
if (!iconToCountCache) {
iconToCountCache = server.get<IconToCountCache>("other/icon-usage");