Local Heart

Prompt

Role: You are an expert Frontend Developer and UI/UX Designer specializing in vanilla JavaScript, CSS, and modern web standards.

Task: Build the frontend web application for a platform called LocalHeart.

Project Concept:
LocalHeart is a free, public-interest map for neighborhood mutual aid. It allows people to post needs (e.g., picking up medicine, repairing a tap) or offers (e.g., lending tools, giving a ride) without any money, ads, or forced signup.

Technical Constraints:

Use Leaflet.js (via CDN) for the map and OpenStreetMap tiles.

Use the Nominatim API for location search.

Use LocalStorage to persist data (posts, chats, theme).

Use the Inter font (via Google Fonts).

The design must be Solid: no gradients, no glassmorphism, no complex animations. Use crisp borders, flat colors, and a professional, clean UI.

The application must be fully responsive (Desktop sidebar, Mobile bottom navigation).

Design System & UI Rules:

Light Mode: Background #F8FAFC, Surface #FFFFFF, Text #0F172A, Primary #4F46E5 (Indigo).

Dark Mode: Background #0F172A, Surface #1E293B, Text #F8FAFC, Primary #6366F1.

Corners: 8px to 12px border-radius.

Layout:

Desktop: Left sidebar (navigation), top header, and main content area.

Mobile: Top header, hidden sidebar, fixed bottom navigation bar.

Step-by-Step Features to Implement:

1. App Shell & Navigation:

Sidebar with links: Feed & List, Live Map, Post a need, Inbox, Settings, About.

Header with a Dark/Light mode toggle and a Safety Guidelines button (opens a modal).

A robust view-switching logic (showing/hiding sections based on navigation).

2. Map View (Dedicated Full-Screen Page):

Full-height Leaflet map. Default center: New York City [40.7128, -74.0060] at zoom level 12.

Search Bar: Floating at the top center. It must accept text (city/neighborhood) and use the Nominatim API to pan the map. It must also detect coordinates (e.g., 40.7128, -74.0060) and pan there.

Custom Pins: Map pins must be circular, 34x34px, with a solid background, category emoji, and colored borders (Red for urgent, Teal for offers, Indigo for normal needs).

Clicking a pin opens a detailed modal for that request.

3. Feed / List View:

A grid of cards showing all active requests.

Each card shows: Type badge (Need/Offer), Category, Urgency, Title, Description, Approximate Area, and Time ago.

Delete Feature: Include a trash icon 🗑️ in the top right of each card to delete the post.

Filters at the top: All, Medicine, Repair, Elder Care, Tools, Rideshare, Alert, Other.

4. Create View (Post a Need/Offer):

A clean form inside a max-width container.

Fields: Type (Need/Offer radio buttons), Category (dropdown), Title, Description, Urgency (radio), Approximate Area (text), Expiry (dropdown).

Geolocation Feature: A button 📍 Use my current location. When clicked, it uses navigator.geolocation to fetch the exact lat and lng and stores them in hidden input fields.

A required safety checkbox.

On submit: Save to LocalStorage, switch to Map view, and pan to the new pin.

5. Detail Modal & Inbox (Chat):

Clicking a card or map pin opens a Modal with full details.

The modal footer must include a Delete Post button, and an Offer Help (or Message) button.

Clicking "Offer Help" creates a chat thread in LocalStorage and opens the Chat Modal.

The Chat Modal allows sending messages (simulate a simple auto-reply after 1.5 seconds).

The Inbox view lists all chat threads.

6. Data & Initialization:

If LocalStorage is empty, seed it with 6 realistic demo requests around NYC with randomized coordinates near the center.

Store theme preference in LocalStorage.

Output Requirement:
Please provide the complete, production-ready code. You may structure the code into separate files (e.g., index.html, styles.css, app.js) or provide it in clearly defined, separated code blocks. Do not omit any CSS or JavaScript. Ensure the map initializes correctly without gray tiles (handle invalidateSize properly when the map view is active).