);
}
function usePlatformSync(availablePlatforms, setPlatformOrder, setPlatformVisibility) {
const enabledPlatforms = useMemo(() => {
return (availablePlatforms || []).map((slug) => ({
slug,
name: PLATFORM_CONFIG[slug]?.name || slug,
colorIcon: PLATFORM_COLOR_ICONS[slug] || slug,
}));
}, [availablePlatforms]);
const platformLookup = useMemo(() => {
const map = {};
for (const p of enabledPlatforms) map[p.slug] = p;
return map;
}, [enabledPlatforms]);
// Seed + merge order
useEffect(() => {
const currentOrder = useChatStore.getState().platformOrder;
const slugs = enabledPlatforms.map((p) => p.slug);
if (!slugs.length) return;
if (currentOrder === null) {
setPlatformOrder(slugs);
return;
}
const newSlugs = slugs.filter((s) => !currentOrder.includes(s));
const filtered = currentOrder.filter((s) => slugs.includes(s));
if (newSlugs.length > 0 || filtered.length !== currentOrder.length) {
setPlatformOrder([...filtered, ...newSlugs]);
}
}, [enabledPlatforms, setPlatformOrder]);
// Seed + merge visibility
useEffect(() => {
const currentVis = useChatStore.getState().platformVisibility;
const slugs = enabledPlatforms.map((p) => p.slug);
if (!slugs.length) return;
if (currentVis === null) {
setPlatformVisibility(Object.fromEntries(slugs.map((s) => [s, true])));
return;
}
const updated = {};
let changed = false;
for (const slug of slugs) {
updated[slug] = currentVis[slug] ?? true;
if (!(slug in currentVis)) changed = true;
}
for (const slug of Object.keys(currentVis)) {
if (!slugs.includes(slug)) changed = true;
}
if (changed) setPlatformVisibility(updated);
}, [enabledPlatforms, setPlatformVisibility]);
const platformOrder = useChatStore.getState().platformOrder;
const platformVisibility = useChatStore.getState().platformVisibility;
const orderedPlatformItems = useMemo(() => {
if (!platformOrder) return enabledPlatforms;
return platformOrder.map((slug) => platformLookup[slug]).filter(Boolean);
}, [platformOrder, platformLookup, enabledPlatforms]);
const enabledCount = platformVisibility
? Object.values(platformVisibility).filter(Boolean).length
: enabledPlatforms.length;
return { enabledPlatforms, orderedPlatformItems, enabledCount };
}
export default function IconPanel() {
const {
setShowChat, setChatToggleIcon,
iconType, setIconType,
iconShape, setIconShape,
iconPosition, setIconPosition,
iconPositionOffsetX, setIconPositionOffsetX,
iconPositionOffsetY, setIconPositionOffsetY,
iconAnimation, setIconAnimation,
platformOrder, setPlatformOrder,
platformVisibility, setPlatformVisibility,
togglePlatformVisibility,
availablePlatforms, fetchAvailablePlatforms,
} = useChatStore(useShallow((s) => ({
setShowChat: s.setShowChat,
setChatToggleIcon: s.setChatToggleIcon,
iconType: s.iconType,
setIconType: s.setIconType,
iconShape: s.iconShape,
setIconShape: s.setIconShape,
iconPosition: s.iconPosition,
setIconPosition: s.setIconPosition,
iconPositionOffsetX: s.iconPositionOffsetX,
setIconPositionOffsetX: s.setIconPositionOffsetX,
iconPositionOffsetY: s.iconPositionOffsetY,
setIconPositionOffsetY: s.setIconPositionOffsetY,
iconAnimation: s.iconAnimation,
setIconAnimation: s.setIconAnimation,
platformOrder: s.platformOrder,
setPlatformOrder: s.setPlatformOrder,
platformVisibility: s.platformVisibility,
setPlatformVisibility: s.setPlatformVisibility,
togglePlatformVisibility: s.togglePlatformVisibility,
availablePlatforms: s.availablePlatforms,
fetchAvailablePlatforms: s.fetchAvailablePlatforms,
})));
// Treat null (loading) as configured so the radio doesn't flicker disabled
// on first paint — real state takes over once the fetch lands.
const hasConfiguredPlatform = availablePlatforms === null || availablePlatforms.length > 0;
// Frontend embed only fetches when iconType is 'platform' — customizer
// needs the list regardless. Store dedupes internally.
useEffect(() => {
if (availablePlatforms === null) fetchAvailablePlatforms();
}, [availablePlatforms, fetchAvailablePlatforms]);
useEffect(() => {
setShowChat(false);
return () => setShowChat(true);
}, [setShowChat]);
// Auto-fall-back to 'custom' if the user removed all platforms while
// iconType was 'platform'. Gated on availablePlatforms !== null so we
// don't clobber a valid saved iconType during the initial fetch.
useEffect(() => {
if (availablePlatforms !== null && availablePlatforms.length === 0 && iconType === 'platform') {
setIconType('custom');
}
}, [availablePlatforms, iconType, setIconType]);
const { orderedPlatformItems, enabledCount } = usePlatformSync(
availablePlatforms, setPlatformOrder, setPlatformVisibility,
);
const handleReorder = (reorderedItems) => {
setPlatformOrder(reorderedItems.map((item) => item.slug));
};
const handleIconClick = ({ icon }) => {
setShowChat(false);
setChatToggleIcon(icon);
};
return (