Fix QuickLinkIcon: Favicon immer aus URL ableiten wenn kein gespeichertes Icon, Fallback auf Emoji

This commit is contained in:
2026-06-04 08:46:25 +02:00
parent b9d3c63fdc
commit 1b304567c8

View File

@@ -453,15 +453,31 @@ function QuickLinksCarousel({ links }) {
} }
function QuickLinkIcon({ l }) { function QuickLinkIcon({ l }) {
const [imgOk, setImgOk] = useState(true);
// Favicon-URL bauen: gespeicherten Wert nehmen oder aus URL ableiten
const faviconUrl = (() => {
if (l.icon && l.icon.startsWith('http')) return l.icon;
try {
const host = new URL(l.url).hostname;
return `https://www.google.com/s2/favicons?sz=64&domain=${host}`;
} catch { return null; }
})();
const showEmoji = !faviconUrl || !imgOk;
const fallbackEmoji = l.icon && !l.icon.startsWith('http') ? l.icon : '🔗';
return ( return (
<a href={l.url} target="_blank" rel="noopener noreferrer" <a href={l.url} target="_blank" rel="noopener noreferrer"
style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3, style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3,
padding:'4px 2px', background:'rgba(255,255,255,0.04)', padding:'4px 2px', background:'rgba(255,255,255,0.04)',
border:'1px solid rgba(255,255,255,0.08)', borderRadius:10, border:'1px solid rgba(255,255,255,0.08)', borderRadius:10,
textDecoration:'none', height:48, width:'100%', boxSizing:'border-box', cursor:'pointer' }}> textDecoration:'none', height:48, width:'100%', boxSizing:'border-box', cursor:'pointer' }}>
{l.icon && l.icon.startsWith('http') {!showEmoji
? <img src={l.icon} alt="" style={{width:16,height:16,objectFit:'contain'}} onError={e=>e.target.style.display='none'}/> ? <img src={faviconUrl} alt="" style={{width:18,height:18,objectFit:'contain'}}
: <span style={{ fontSize:16 }}>{l.icon}</span>} onError={() => setImgOk(false)}/>
: <span style={{ fontSize:16 }}>{fallbackEmoji}</span>
}
<span style={{ color:'rgba(255,255,255,0.65)', fontSize:8, fontFamily:'monospace', <span style={{ color:'rgba(255,255,255,0.65)', fontSize:8, fontFamily:'monospace',
maxWidth:52, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{l.title}</span> maxWidth:52, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{l.title}</span>
</a> </a>