// ═══════════════════════════════════════════════════════════════ // Community page — forum + supplier recommendations // Features: public + moderators-only channels, multi-image posts, // edit-with-history, full comment threads, fullscreen image gallery. // ═══════════════════════════════════════════════════════════════ const { useState: uSCM, useEffect: uECM, useMemo: uMCM, useRef: uRCM } = React; // Backward-compat helper: read images from either new `images` array or old `image` single. window.postImages = function postImages(p) { if (Array.isArray(p.images) && p.images.length) return p.images; if (p.image) return [p.image]; return []; }; // ─────────────────────────────────────────────── // Image Gallery Modal — fullscreen lightbox with prev/next // ─────────────────────────────────────────────── window.ImageGalleryModal = function ImageGalleryModal({ images, startIndex = 0, onClose }) { const [idx, setIdx] = uSCM(startIndex); uECM(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); else if (e.key === 'ArrowLeft') setIdx(i => Math.min(i + 1, images.length - 1)); else if (e.key === 'ArrowRight') setIdx(i => Math.max(i - 1, 0)); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [images.length, onClose]); if (!images?.length) return null; return ReactDOM.createPortal(
{images.length > 1 && ( <> )} e.stopPropagation()} className="max-w-[92vw] max-h-[88vh] object-contain shadow-2xl rounded-lg" alt={`תמונה ${idx + 1} מתוך ${images.length}`} /> {images.length > 1 && (
{idx + 1} / {images.length}
)}
, document.body ); }; // ─────────────────────────────────────────────── // Post images block — thumbnails with click-to-gallery // ─────────────────────────────────────────────── window.PostImages = function PostImages({ images, small = false }) { const [galleryIdx, setGalleryIdx] = uSCM(null); if (!images?.length) return null; const n = images.length; const h = small ? 'max-h-52' : 'max-h-80'; // Single image — large contain (no crop) if (n === 1) { return ( <> {galleryIdx != null && setGalleryIdx(null)}/>} ); } // Multiple — 2-column grid (or 4 for >=4) const cols = n === 2 ? 'grid-cols-2' : n === 3 ? 'grid-cols-3' : 'grid-cols-2'; return ( <>
{images.slice(0, 4).map((src, i) => ( ))}
{galleryIdx != null && setGalleryIdx(null)}/>} ); }; // ─────────────────────────────────────────────── // CommunityPage — main forum page // ─────────────────────────────────────────────── window.CommunityPage = function CommunityPage() { const { state, currentUser, likePost, togglePinPost, toggleHidePost, deletePost } = window.useApp(); const toast = window.useToast(); const [tab, setTab] = uSCM('posts'); const [channel, setChannel] = uSCM('public'); // 'public' | 'moderators' const [newPostOpen, setNewPostOpen] = uSCM(false); const [sortBy, setSortBy] = uSCM('pinned'); // 'pinned' | 'recent' | 'popular' const [showHidden, setShowHidden] = uSCM(false); const [tagFilter, setTagFilter] = uSCM(null); const [openPostId, setOpenPostId] = uSCM(null); const isModerator = currentUser.role === 'admin' || currentUser.role === 'national'; const allPosts = state.communityPosts || []; // filter by channel: only moderators see 'moderators' channel let posts = allPosts.filter(p => { const postChannel = p.channel || 'public'; if (postChannel === 'moderators') return isModerator; return true; }); if (channel === 'moderators') { posts = posts.filter(p => (p.channel || 'public') === 'moderators'); } else { posts = posts.filter(p => (p.channel || 'public') === 'public'); } posts = isModerator ? (showHidden ? posts : posts.filter(p => !p.hidden)) : posts.filter(p => !p.hidden); if (tagFilter) posts = posts.filter(p => (p.tags || []).includes(tagFilter)); posts = [...posts].sort((a, b) => { if (a.pinned && !b.pinned) return -1; if (!a.pinned && b.pinned) return 1; if (sortBy === 'popular') return (b.likes || 0) - (a.likes || 0); return (b.date || '').localeCompare(a.date || ''); }); const allTags = [...new Set(allPosts.flatMap(p => p.tags || []))]; const recs = state.supplierRecommendations || []; const openPost = openPostId ? state.communityPosts.find(p => p.id === openPostId) : null; return (
} onClick={() => setNewPostOpen(true)}> פוסט חדש } />
{tab === 'posts' && ( <> {/* Channel switcher (moderators only see the second channel) */} {isModerator && (
)}
{/* SIDEBAR: filters */} {/* MAIN */}
{posts.length === 0 ? ( } onClick={() => setNewPostOpen(true)}>פוסט ראשון} /> ) : posts.map(p => ( setOpenPostId(p.id)} onTagClick={t => setTagFilter(t)} /> ))}
)} {tab === 'suppliers' && (
{recs.length === 0 ? (
) : [...recs].sort((a,b) => (b.rating||0) - (a.rating||0)).map(r => { const workedWith = (r.authorities || []).map(id => state.authorities.find(a => a.id === id)).filter(Boolean); return (
{r.supplier.charAt(0)}
{[1,2,3,4,5].map(n => ( ))}
{r.rating.toFixed(1)} · {r.reviews} ביקורות

{r.supplier}

{r.note &&

"{r.note}"

} {r.topics?.length > 0 && (
{r.topics.map(t => ( {t} ))}
)} {workedWith.length > 0 && (
עבדו איתו:
{workedWith.map(a => )}
)}
); })}
)} setNewPostOpen(false)} defaultChannel={channel}/> {openPost && setOpenPostId(null)}/>}
); }; // ─────────────────────────────────────────────── // PostCard — a single post in the feed // ─────────────────────────────────────────────── window.PostCard = function PostCard({ post: p, onOpen, onTagClick }) { const { state, currentUser, likePost, togglePinPost, toggleHidePost, deletePost } = window.useApp(); const toast = window.useToast(); const auth = p.authorityId ? state.authorities.find(a => a.id === p.authorityId) : null; const author = state.users.find(u => u.id === p.authorId); const isHQ = (p.authorRole === 'admin' || p.authorRole === 'national') || (author && (author.role === 'admin' || author.role === 'national')); const isModerator = currentUser.role === 'admin' || currentUser.role === 'national'; const canModerate = isModerator || p.authorId === currentUser.id; const images = window.postImages(p); const commentCount = (p.commentsList?.length ?? p.comments ?? 0); return (
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(); } }} aria-label={`פוסט: ${p.title}`} >
{/* Author strip */}
{author?.name}
{auth ? (
) : isHQ ? ( הנהלה ) : null}
{window.formatDate(p.date)}
{/* Content */}
{p.pinned && ( 📌 נעוץ )} {p.channel === 'moderators' && ( 🛡 מנהלים )} {p.hidden && isModerator && ( 🔒 מוסתר )} {p.tags?.map(t => ( ))} {p.editedAt && ( ✎ נערך )}

{p.title}

{p.body}

{canModerate && (
e.stopPropagation()}> {p.authorId === currentUser.id && ( )} {isModerator && ( <> )}
)}
); }; // ─────────────────────────────────────────────── // PostDetailModal — open on click, shows full post + comments + edit // ─────────────────────────────────────────────── window.PostDetailModal = function PostDetailModal({ post: p, onClose }) { const { state, currentUser, editPost, addComment, editComment, deleteComment, likePost } = window.useApp(); const toast = window.useToast(); const [editing, setEditing] = uSCM(false); const [draft, setDraft] = uSCM({ title: p.title, body: p.body, tags: (p.tags || []).join(', '), images: window.postImages(p) }); const [newComment, setNewComment] = uSCM(''); const [editingCommentId, setEditingCommentId] = uSCM(null); const [editCommentBody, setEditCommentBody] = uSCM(''); uECM(() => { // Re-sync draft when post updates setDraft({ title: p.title, body: p.body, tags: (p.tags || []).join(', '), images: window.postImages(p) }); }, [p.id, p.editedAt]); const author = state.users.find(u => u.id === p.authorId); const canEdit = p.authorId === currentUser.id; const canModerate = currentUser.role === 'admin' || currentUser.role === 'national'; const images = window.postImages(p); const comments = p.commentsList || []; const saveEdit = () => { if (!draft.title.trim() || !draft.body.trim()) { toast.push({ type: 'error', message: 'כותרת ותוכן נדרשים' }); return; } editPost(p.id, { title: draft.title.trim(), body: draft.body.trim(), tags: draft.tags.split(',').map(t => t.trim()).filter(Boolean), images: draft.images, image: null // clear old single-image field }); toast.push({ type: 'success', message: 'הפוסט עודכן' }); setEditing(false); }; const submitComment = () => { if (!newComment.trim()) return; addComment(p.id, newComment.trim()); setNewComment(''); toast.push({ type: 'success', message: 'התגובה נוספה' }); }; const saveCommentEdit = (commentId) => { if (!editCommentBody.trim()) return; editComment(p.id, commentId, editCommentBody.trim()); setEditingCommentId(null); toast.push({ type: 'success', message: 'התגובה עודכנה' }); }; return ( {editing ? 'עריכת פוסט' : 'פוסט'} {p.channel === 'moderators' && ( 🛡 מנהלים )} } footer={סגור} > {/* Post body */} {editing ? (
setDraft(d => ({ ...d, title: e.target.value }))} className="input" autoFocus/>