@@ -546,6 +545,7 @@ function renderNearbyMarkers() {
lat: place.lat,
lng: place.lng,
amenity: place.amenity,
+ iconId: nearbyImageId(place.amenity),
cuisine: place.cuisine || '',
address: place.address || '',
},
@@ -728,9 +728,6 @@ function switchTileLayer(name) {
function updateLayerColors() {
if (!map) return
const nearbyColor = theme.value === 'light' ? '#0891b2' : '#22d3ee'
- if (map.getLayer('nearby-circles')) {
- map.setPaintProperty('nearby-circles', 'circle-color', nearbyColor)
- }
if (map.getLayer('nearby-clusters')) {
map.setPaintProperty('nearby-clusters', 'circle-color', nearbyColor)
}
@@ -971,10 +968,16 @@ onMounted(() => {
// Category marker icons are generated lazily (and re-generated after every
// style switch, which wipes images): white disc + ink outline + colored icon.
map.on('styleimagemissing', (e) => {
- if (!e.id.startsWith('cat-marker|') || map.hasImage(e.id)) return
- const [, icon, color] = e.id.split('|')
- const { imageData, pixelRatio } = drawMarkerImage(icon, color)
- map.addImage(e.id, imageData, { pixelRatio })
+ if (map.hasImage(e.id)) return
+ if (e.id.startsWith('cat-marker|')) {
+ const [, icon, color] = e.id.split('|')
+ const { imageData, pixelRatio } = drawMarkerImage(icon, color)
+ map.addImage(e.id, imageData, { pixelRatio })
+ } else if (e.id.startsWith('nearby-marker|')) {
+ const [, icon, color] = e.id.split('|')
+ const { imageData, pixelRatio } = drawMarkerImage(icon, color, { size: 30, dashed: true })
+ map.addImage(e.id, imageData, { pixelRatio })
+ }
})
map.on('load', () => {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 24a7656..7104b05 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -331,6 +331,13 @@ select {
justify-content: center;
svg { display: block; }
+
+ /* nearby (unsaved) variant: dotted outline in the type color */
+ &.nearby {
+ border-radius: 50%;
+ border-style: dashed;
+ border-width: 2px;
+ }
}
.pp-nearby-dot {
From 240c159b107a40ae4a4816fe13605658ce34a887 Mon Sep 17 00:00:00 2001
From: irvin <7606712+Osyna@users.noreply.github.com>
Date: Mon, 10 Aug 2026 01:29:20 +0200
Subject: [PATCH 3/3] Per-tab identity colors + Profile-style hero headers with
icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Every navbar tab now has a dedicated color, reused by its view:
- Map green, Discover blue, My Places amber, Friends pink, Profile
purple (unchanged — it set the pattern)
- Active tab pills take their color (tinted glow shadow to match)
Each view header is now a Profile-style hero card:
- Tinted rounded card with the two decorative corner blobs (identity
color + yellow), a white icon chip (view icon in the identity
color) and the title in the identity color
- Discover keeps its collapse-on-scroll behavior (compact hero)
- My Places keeps the count badge + Select button (now amber),
Friends keeps the count badge
- Base gradient text-fill on titles reset so hero colors apply
---
src/App.vue | 10 +--
src/components/FriendsView.vue | 14 +++-
src/components/PlacesView.vue | 13 +++-
src/components/SearchView.vue | 13 +++-
src/styles/cartoon.scss | 128 +++++++++++++++++++++++++++++++--
5 files changed, 158 insertions(+), 20 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 138b9f3..3716496 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -209,26 +209,26 @@ function onSplashFinish() {
-