# 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.

## 2. Feature: "Get Directions" Button
- **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.

## 3. Feature: Map Marker Clustering
- **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.

## 4. Feature: Sort & Filter Active Notes
- **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.

## 5. Feature: Custom Marker Colors per Notepad
- **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".