SpotNotes Future Implementation & Refactoring Plan

1. Refactoring `index.js` (Reducing Complexity)

Status: [To Do]
Action Plan:
- index.js is currently a monolithic file (~1000 lines) handling global state, Leaflet map initialization, sidebar DOM manipulation, and raw API calls simultaneously.
- Extract Map Logic: Create static/assets/js/map.js to encapsulate initMap, renderMapMarkers, geolocation tracking, and all Leaflet-specific code.
- Extract UI/Sidebar Logic: Create static/assets/js/sidebar.js to handle initSidebar, renderNotepadList, HTML generation for note list items, and DOM toggling.
- Extract API & State Logic: Keep the core data fetching (loadNotepads, loadNotesForPad, loadAllMyNotes) in index.js (or a dedicated data.js) to act as the central controller.
- Namespace Globals: Group global variables (activeNotes, activePadId, currentUser, map, etc.) into a single window.SpotNotes state object to prevent scope pollution and make dependencies explicitly clear across the new script files.

Status: [To Do]
Action Plan:
- Low-Hanging Fruit: Add a quick "Directions" or "Navigate" link/button to the map marker popups and sidebar note items.
- Clicking the button will easily open a new tab mapping directly to the note's coordinates: https://www.google.com/maps/dir/?api=1&destination={lat},{lng}.
- Extremely useful UX for a location-based app, requiring absolutely zero backend changes.

Status: [To Do]
Action Plan:
- Low-Hanging Fruit: Integrate the official Leaflet.markercluster plugin.
- Currently, viewing an "All My Notes" view with hundreds of notes in the same city creates a messy, overlapping visual experience and impacts browser performance.
- Clustering groups nearby markers into a single circle with a count, automatically expanding when the user clicks or zooms in.
- Implementation requires just adding the CDN links to index.html and wrapping the markers in a L.markerClusterGroup() inside the renderMapMarkers loop.

Status: [To Do]
Action Plan:
- Low-Hanging Fruit: Add a simple, fast text input filter floating above the note list in the sidebar whenever a notepad is actively viewed.
- Allows users to instantly search for a specific note's title or content within a massive notepad without triggering a slow, global backend search.
- Implementation is 100% frontend logic: listening to the input's keyup event and filtering the existing activeNotes array before re-rendering the sidebar list.

Status: [To Do]
Action Plan:
- Update the Notepad database model to include an optional color field (defaulting to the standard Leaflet blue).
- Add a simple HTML <input type="color"> selector to the Create/Edit Notepad modals.
- Update the Leaflet marker icon logic to apply a CSS tint/filter (or use customized SVG icons) matching the notepad's selected color.
- This allows users to visually distinguish between different notes (e.g., "Restaurants" vs "Birding Spots") instantly when looking at the map in mixed views like "All My Notes".