40 lines
3.3 KiB
Markdown
40 lines
3.3 KiB
Markdown
# 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".
|