// pantry-icons.jsx — icon set + food chips. Two icon styles supported: // 'line' — outlined stroke // 'filled' — solid filled // Used in nav, actions, buttons, status indicators. // For food items, the option is line/filled/emoji — see . const IconWrap = ({ size = 22, children }) => ( {children} ); // ─── Generic icons ─────────────────────────────────────────── function Icon({ name, size = 22, style = 'line', color = 'currentColor', stroke = 1.75 }) { const sw = stroke; const c = color; const filled = style === 'filled'; const paths = { home: filled ? : , box: filled ? <> : <>, chef: filled ? <> : <>, cart: filled ? <> : <>, calendar: filled ? <> : <>, user: filled ? <> : <>, users: filled ? <> : <>, plus: , search: <>, chevR: , chevL: , chevD: , close: , bell: filled ? <> : <>, camera: filled ? <> : <>, barcode: <>, pen: , clock: <>, fire: filled ? : , leaf: filled ? : , check: , spark: filled ? : , settings: <>, flame: filled ? : , sparkle: , dots: <>, trash: filled ? <> : <>, }; return {paths[name] || null}; } // ─── FoodChip — renders a food item icon in 3 styles ──────── function FoodChip({ item, style = 'emoji', size = 44, palette }) { const radius = size / 2; const fontSize = Math.round(size * 0.46); const monoSize = Math.round(size * 0.38); if (style === 'emoji') { return (
{item.emoji}
); } if (style === 'filled') { return (
{item.mono}
); } // line return (
{item.mono}
); } function hexToSoft(hex) { // simple soft tint — overlay 80% white const { r, g, b } = parseHex(hex); const mix = (c) => Math.round(c * 0.18 + 255 * 0.82); return `rgb(${mix(r)}, ${mix(g)}, ${mix(b)})`; } function deepTone(hex, palette) { const { r, g, b } = parseHex(hex); const dim = (c) => Math.round(c * 0.55); return palette.isDark ? hex : `rgb(${dim(r)}, ${dim(g)}, ${dim(b)})`; } function parseHex(hex) { const h = hex.replace('#', ''); return { r: parseInt(h.substring(0, 2), 16), g: parseInt(h.substring(2, 4), 16), b: parseInt(h.substring(4, 6), 16) }; } // ───────────────────────────────────────────────────────────── // Profile photos — stored locally per user id (data URL). Persists on the // device; the initial (derived from the name) is the universal fallback. // ───────────────────────────────────────────────────────────── const PHOTO_LS_PREFIX = 'pantrywise.photo.'; function getProfilePhoto(userId) { if (!userId) return null; try { return localStorage.getItem(PHOTO_LS_PREFIX + userId) || null; } catch (e) { return null; } } function setProfilePhoto(userId, dataUrl) { if (!userId) return; try { if (dataUrl) localStorage.setItem(PHOTO_LS_PREFIX + userId, dataUrl); else localStorage.removeItem(PHOTO_LS_PREFIX + userId); } catch (e) {} } function initialFromName(name) { const n = (name || '').trim(); return n ? n.charAt(0).toUpperCase() : '?'; } // UserAvatar — round avatar showing the user's photo if set, else their // first-name initial on a colored background. Used in headers and member lists. function UserAvatar({ palette, name, userId, photo, tone, size = 38, onClick, gradient }) { const pic = photo || getProfilePhoto(userId); const bg = gradient ? `linear-gradient(135deg, ${palette.primary}, ${palette.amber})` : (tone || palette.primary); const base = { width: size, height: size, borderRadius: size / 2, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: onClick ? 'pointer' : 'default', flexShrink: 0, overflow: 'hidden', color: '#fff', fontWeight: 600, fontFamily: 'Geist, sans-serif', fontSize: Math.round(size * 0.38), }; if (pic) { return (
); } return
{initialFromName(name)}
; } Object.assign(window, { Icon, FoodChip, hexToSoft, deepTone, UserAvatar, getProfilePhoto, setProfilePhoto, initialFromName, });