Make Community.icon required or guard it on the community page

[ameyypawar]

Community.icon is declared optional, but the community detail page renders it as a JSX component with no guard, producing two of the seven current tsc errors. Two other call sites already guard the same access, so the type and the usage disagree in exactly one place.

Location

• src/lib/types.ts:15 — the optional declaration
• src/app/community/[communityId]/page.tsx:126 — the unguarded render
• src/components/events/EventCard.tsx:36 and src/app/events/[id]/page.tsx:117 — the two guarded call sites
• src/lib/services/searchService.ts:213 — the icon in a search result payload

export interface Community {
  id: string;
  name: string;
  icon?: React.ElementType; // Lucide icon component
  description?: string;
}

              <community.icon className="h-20 w-20 text-primary" />

src/app/community/[communityId]/page.tsx(126,16): error TS2604: JSX element type 'community.icon' does not have any construct or call signatures.
src/app/community/[communityId]/page.tsx(126,16): error TS2786: 'community.icon' cannot be used as a JSX component.

The other two consumers do guard it:

            {community.icon && <community.icon className="mr-2 h-4 w-4" />}

All six entries in COMMUNITIES (src/lib/constants.ts:12-19) do supply an icon, so nothing crashes today. The error is real and the guard is missing; only the data happens to be complete.

Why this matters

The type says the field may be absent and one render site assumes it is present. That contradiction is what the compiler is reporting, and it ships only because typescript.ignoreBuildErrors is set. Anyone adding a community without an icon — or loading community metadata from Firestore rather than constants.ts — gets a runtime crash on /community/all with no compile-time warning.

Related design problem, worth deciding in the same PR

icon stores a React component reference inside a data model, and that reference leaks into the search layer:

      metadata: {
        icon: community.icon
      }

searchService.ts has no 'use server' directive today, so this works. It stops working the moment that module moves server-side (#28) or the community list moves to Firestore, since a component reference cannot be serialised across the boundary or stored in a document. Storing an icon name and resolving it to a component in the view layer avoids that whole class of failure.

Suggested fix

Pick one:

• Narrowest: make icon required — icon: React.ElementType at src/lib/types.ts:15. All six COMMUNITIES entries already satisfy it, so this compiles immediately and clears both errors. The two existing guards become redundant but harmless.
• Or: keep it optional and add the same community.icon && guard at page.tsx:126 that EventCard.tsx:36 uses, with a fallback icon so the header is not empty.

Either way, both TS2604 and TS2786 must be gone from npm run typecheck when this closes. Changing icon to a string name and adding a resolver is the more durable fix but is a wider refactor — reasonable as a follow-up.