mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-19 15:04:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(Discover, ModalTopBar, MainModal): enhance navigation and iframe handling with hash updates

Browse Source
This commit is contained in:
alexsparkes
2026-02-02 12:21:53 +00:00
parent cfb27ba392
commit 333a070020
4 changed files with 163 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/features/misc/views/Discover.jsx
View File

@@ -22,6 +22,92 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
const previewParam = isPreviewMode ? '&preview=true' : '';
const isOffline = navigator.onLine === false || offlineMode;
// Helper function to update iframe based on hash
const updateIframeFromHash = useRef(() => {
if (!iframeRef.current) return;
const hash = window.location.hash;
if (!hash || !hash.startsWith('#discover')) return;
const parts = hash.slice(1).split('/');
if (parts.length < 2) return;
const theme = getResolvedTheme();
const themeParam = `&theme=${theme}`;
let targetUrl = '';
if (parts[1] === 'collections') {
targetUrl = `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`;
} else if (parts[1] === 'collection' && parts[2]) {
targetUrl = `${MARKETPLACE_URL}/collection/${parts[2]}?embed=true${previewParam}${themeParam}`;
} else if (parts[2]) {
// Item view - map category to path
const pathMap = {
photo_packs: 'packs',
quote_packs: 'packs',
preset_settings: 'presets',
};
const pathSegment = pathMap[parts[1]] || 'packs';
targetUrl = `${MARKETPLACE_URL}/${pathSegment}/${parts[2]}?embed=true${previewParam}${themeParam}`;
} else if (parts[1] === 'all') {
// All items
targetUrl = `${MARKETPLACE_URL}?embed=true${previewParam}${themeParam}`;
} else {
// Category filter (photo_packs, quote_packs, preset_settings)
targetUrl = `${MARKETPLACE_URL}?embed=true&type=${parts[1]}${previewParam}${themeParam}`;
}
// Update iframe src directly
if (targetUrl && iframeRef.current.src !== targetUrl) {
setIsLoading(true);
iframeRef.current.src = targetUrl;
}
});
// Update the ref function when previewParam changes
useEffect(() => {
updateIframeFromHash.current = () => {
if (!iframeRef.current) return;
const hash = window.location.hash;
if (!hash || !hash.startsWith('#discover')) return;
const parts = hash.slice(1).split('/');
if (parts.length < 2) return;
const theme = getResolvedTheme();
const themeParam = `&theme=${theme}`;
let targetUrl = '';
if (parts[1] === 'collections') {
targetUrl = `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`;
} else if (parts[1] === 'collection' && parts[2]) {
targetUrl = `${MARKETPLACE_URL}/collection/${parts[2]}?embed=true${previewParam}${themeParam}`;
} else if (parts[2]) {
// Item view - map category to path
const pathMap = {
photo_packs: 'packs',
quote_packs: 'packs',
preset_settings: 'presets',
};
const pathSegment = pathMap[parts[1]] || 'packs';
targetUrl = `${MARKETPLACE_URL}/${pathSegment}/${parts[2]}?embed=true${previewParam}${themeParam}`;
} else if (parts[1] === 'all') {
// All items
targetUrl = `${MARKETPLACE_URL}?embed=true${previewParam}${themeParam}`;
} else {
// Category filter (photo_packs, quote_packs, preset_settings)
targetUrl = `${MARKETPLACE_URL}?embed=true&type=${parts[1]}${previewParam}${themeParam}`;
}
// Update iframe src directly
if (targetUrl && iframeRef.current.src !== targetUrl) {
setIsLoading(true);
iframeRef.current.src = targetUrl;
}
};
}, [previewParam]);
// Clear breadcrumbs when component unmounts (navigating away from discover)
useEffect(() => {
return () => {
@@ -142,57 +228,29 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
}
}, [deepLinkData, previewParam]);
// Send navigation commands to iframe when hash changes externally (e.g., browser back/forward)
// Send navigation commands to iframe when hash changes externally (e.g., browser back/forward, breadcrumb clicks)
useEffect(() => {
const handleHashChange = () => {
if (!iframeRef.current?.contentWindow) return;
updateIframeFromHash.current();
};
const hash = window.location.hash;
if (!hash || !hash.startsWith('#discover')) return;
// Parse hash to determine target path
// e.g., #discover/photo_packs/123 -> /marketplace/packs/123
// e.g., #discover/preset_settings/456 -> /marketplace/presets/456
// e.g., #discover/collections -> /marketplace/collections
// e.g., #discover/collection/featured -> /marketplace/collection/featured
const parts = hash.slice(1).split('/');
if (parts.length < 2) return;
let targetPath = '/marketplace';
if (parts[1] === 'collections') {
targetPath = '/marketplace/collections';
} else if (parts[1] === 'collection' && parts[2]) {
targetPath = `/marketplace/collection/${parts[2]}`;
} else if (parts[2]) {
// Item view - map category to path
const pathMap = {
photo_packs: 'packs',
quote_packs: 'packs',
preset_settings: 'presets',
};
const pathSegment = pathMap[parts[1]] || 'packs';
targetPath = `/marketplace/${pathSegment}/${parts[2]}`;
} else if (parts[1] !== 'all') {
// Category filter
targetPath = `/marketplace?type=${parts[1]}`;
}
// Send navigation command to iframe
const theme = getResolvedTheme();
iframeRef.current.contentWindow.postMessage(
{
type: 'marketplace:navigate',
payload: { path: targetPath },
},
MARKETPLACE_URL,
);
const handlePopState = () => {
updateIframeFromHash.current();
};
// Listen for hash changes from browser navigation
window.addEventListener('hashchange', handleHashChange);
return () => window.removeEventListener('hashchange', handleHashChange);
window.addEventListener('popstate', handlePopState);
// Also trigger immediately if hash exists
if (window.location.hash.startsWith('#discover')) {
updateIframeFromHash.current();
}
return () => {
window.removeEventListener('hashchange', handleHashChange);
window.removeEventListener('popstate', handlePopState);
};
}, []);
useEffect(() => {