+ ${islandSVG}
+
+ `;
+
+ // Hover effect
+ el.addEventListener('mouseenter', () => {
+ el.querySelector('.universe-island-shape').style.transform = 'scale(1.25) translateY(-8px)';
+ el.querySelector('.universe-island-shape').style.filter = `drop-shadow(0 0 30px ${terrainColor}ff) drop-shadow(0 15px 35px rgba(0,0,0,0.8))`;
+ setHoveredIsland(island);
+ });
+
+ el.addEventListener('mouseleave', () => {
+ el.querySelector('.universe-island-shape').style.transform = 'scale(1)';
+ el.querySelector('.universe-island-shape').style.filter = `drop-shadow(0 0 15px ${terrainColor}aa) drop-shadow(0 8px 20px rgba(0,0,0,0.6))`;
+ setHoveredIsland(null);
+ });
+
+ // Click handler
+ el.addEventListener('click', (e) => {
+ e.stopPropagation();
+ console.log('[IslandUniverse] Clicked island:', island.username);
+ onIslandClick && onIslandClick(island);
+ });
+
+ // Create marker
+ const marker = new maplibregl.Marker({
+ element: el,
+ anchor: 'center'
+ })
+ .setLngLat([lng, lat])
+ .addTo(map);
+
+ markers.push({ marker, island, el });
+ });
+
+ markersRef.current = markers;
+
+ // Slow rotation animation
+ let bearing = 0;
+ function rotateCamera() {
+ bearing += 0.1;
+ if (bearing >= 360) bearing = 0;
+ map.rotateTo(bearing, { duration: 100 });
+ requestAnimationFrame(rotateCamera);
+ }
+ rotateCamera();
+
+ // Add starfield effect with custom layer
+ map.addLayer({
+ id: 'stars',
+ type: 'circle',
+ source: {
+ type: 'geojson',
+ data: createStarfieldGeoJSON(centerLng, centerLat, 500)
+ },
+ paint: {
+ 'circle-radius': ['interpolate', ['linear'], ['zoom'], 0, 0.5, 10, 2],
+ 'circle-color': [
+ 'case',
+ ['<', ['random'], 0.7], '#ffffff',
+ ['<', ['random'], 0.9], '#aabbff',
+ '#ffeeaa'
+ ],
+ 'circle-opacity': 0.8,
+ 'circle-blur': 0.2
+ }
+ });
+ });
+
+ // Cleanup
+ return () => {
+ markersRef.current.forEach(({ marker }) => marker.remove());
+ markersRef.current = [];
+ map.remove();
+ };
+ }, [islands, onIslandClick]);
+
+ return (
+ @${island.username}
+
+
+ );
+}
+
+/**
+ * Create starfield as GeoJSON for MapLibre
+ */
+function createStarfieldGeoJSON(centerLng, centerLat, count) {
+ const features = [];
+
+ for (let i = 0; i < count; i++) {
+ const lng = centerLng + (Math.random() - 0.5) * 20;
+ const lat = centerLat + (Math.random() - 0.5) * 20;
+
+ features.push({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [lng, lat]
+ },
+ properties: {
+ brightness: Math.random()
+ }
+ });
+ }
+
+ return {
+ type: 'FeatureCollection',
+ features
+ };
+}
+
+/**
+ * Get terrain color as CSS color string
+ */
+function getTerrainColor(terrainType) {
+ const palettes = {
+ 'tropical': '#2ecc71',
+ 'desert': '#f39c12',
+ 'arctic': '#3498db',
+ 'volcanic': '#e74c3c',
+ 'meadow': '#27ae60',
+ };
+ return palettes[terrainType] || palettes['tropical'];
+}
+
+/**
+ * Generate a mini island SVG shape (organic, irregular)
+ */
+function generateMiniIsland(seed, terrainColor) {
+ // Seeded random
+ const rng = () => {
+ seed = (seed * 9301 + 49297) % 233280;
+ return seed / 233280;
+ };
+
+ // Generate organic island shape using bezier curves
+ const size = 50;
+ const centerX = size / 2;
+ const centerY = size / 2;
+ const numPoints = 8;
+
+ let path = '';
+ const points = [];
+
+ for (let i = 0; i < numPoints; i++) {
+ const angle = (i / numPoints) * Math.PI * 2;
+ const radiusVariation = 0.7 + rng() * 0.6; // Random radius
+ const radius = (size / 2) * radiusVariation;
+ const x = centerX + Math.cos(angle) * radius;
+ const y = centerY + Math.sin(angle) * radius;
+ points.push({ x, y });
+ }
+
+ // Create smooth curve using quadratic bezier
+ path = `M ${points[0].x} ${points[0].y}`;
+ for (let i = 0; i < numPoints; i++) {
+ const current = points[i];
+ const next = points[(i + 1) % numPoints];
+ const controlX = (current.x + next.x) / 2 + (rng() - 0.5) * 5;
+ const controlY = (current.y + next.y) / 2 + (rng() - 0.5) * 5;
+ path += ` Q ${controlX} ${controlY} ${next.x} ${next.y}`;
+ }
+ path += ' Z';
+
+ // Add some trees/details
+ const numTrees = 2 + Math.floor(rng() * 3);
+ let trees = '';
+ for (let i = 0; i < numTrees; i++) {
+ const tx = centerX + (rng() - 0.5) * (size * 0.4);
+ const ty = centerY + (rng() - 0.5) * (size * 0.4);
+ const treeSize = 3 + rng() * 2;
+ trees += ` e.stopPropagation()}>
+
+
+
+
+
+
+
+
+ {hoveredIsland && (
+ 🌌 Island Universe
+{islands.length} islands floating in virtual space
+
+
+ )}
+
+ @{hoveredIsland.username}
+ {hoveredIsland.display_name || hoveredIsland.bio || 'Click to visit'}
+
+ {hoveredIsland.content_count} posts • {hoveredIsland.terrain_type}
+
+
+
+ 🖱️ Hover over islands to see details • Click to visit
+
+
+ );
+}
+
+/**
+ * Create circle coordinates for polygon (ocean)
+ */
+function createCircleCoordinates(lng, lat, radius, points = 64) {
+ const coords = [];
+ for (let i = 0; i <= points; i++) {
+ const angle = (i / points) * Math.PI * 2;
+ coords.push([
+ lng + Math.cos(angle) * radius,
+ lat + Math.sin(angle) * radius
+ ]);
+ }
+ return coords;
+}
+
+/**
+ * Create island DOM element with seed-based styling
+ */
+function createIslandElement(seed, terrainType = 'tropical') {
+ const rng = seededRandom(seed);
+
+ const el = document.createElement('div');
+ el.className = 'island-terrain-marker';
+
+ const terrainColor = getTerrainColorCSS(terrainType);
+ const size = 200 + rng() * 50; // 200-250px
+
+ el.innerHTML = `
+ e.stopPropagation()}>
+
+
+
+
+
+
+
+
+ {island.display_name || `${island.username}'s Island`}
+{island.bio || 'Welcome to my island'}
+
+
+
+
+ {island.content_count || 0}
+ Posts
+
+
+ {island.visitors || 0}
+ Visitors
+
+
+ {island.terrain_type || 'tropical'}
+ Terrain
+
+
+
+ + 🌱 Seed: {island.seed} • 🎨 {island.color_palette || 'vibrant'} palette +
+
+ ${createIslandTexture(seed, terrainType)}
+
+ `;
+
+ return el;
+}
+
+function createIslandTexture(seed, terrainType) {
+ // Add some visual detail with random spots/patches
+ const rng = seededRandom(seed + 100);
+ let spots = '';
+
+ for (let i = 0; i < 8; i++) {
+ const x = rng() * 80 + 10; // 10-90%
+ const y = rng() * 80 + 10;
+ const size = rng() * 20 + 10; // 10-30px
+ spots += `
+
+ `;
+ }
+
+ return spots;
+}
+
+/**
+ * Get terrain color as CSS string
+ */
+function getTerrainColorCSS(terrainType) {
+ const palettes = {
+ 'tropical': '#2ecc71',
+ 'desert': '#f39c12',
+ 'arctic': '#ecf0f1',
+ 'volcanic': '#e74c3c',
+ 'meadow': '#27ae60',
+ };
+ return palettes[terrainType] || palettes['tropical'];
+}
+
+/**
+ * Generate vegetation data based on seed
+ */
+function generateVegetationData(seed, terrainType = 'tropical') {
+ const vegetation = [];
+ const rng = seededRandom(seed);
+
+ const count = terrainType === 'desert' ? 3 : terrainType === 'arctic' ? 1 : 8;
+
+ for (let i = 0; i < count; i++) {
+ const angle = rng() * Math.PI * 2;
+ const radius = (0.2 + rng() * 0.3) * 0.0001; // Small offset in lng/lat
+
+ vegetation.push({
+ offsetX: Math.cos(angle) * radius,
+ offsetY: Math.sin(angle) * radius,
+ terrainType: terrainType,
+ scale: 0.8 + rng() * 0.4
+ });
+ }
+
+ return vegetation;
+}
+
+/**
+ * Create tree DOM element
+ */
+function createTreeElement(terrainType) {
+ const el = document.createElement('div');
+ el.className = 'island-tree-marker';
+
+ let treeHTML = '';
+
+ if (terrainType === 'arctic') {
+ treeHTML = `
+
+ `;
+ } else if (terrainType === 'desert') {
+ treeHTML = `
+
+ `;
+ } else {
+ // Tropical/meadow: stylized tree
+ treeHTML = `
+
+
+
+
+
+ `;
+ }
+
+ el.innerHTML = treeHTML;
+ return el;
+}
+
+/**
+ * Create content DOM element
+ */
+function createContentElement(content) {
+ const el = document.createElement('div');
+ el.className = 'island-content-marker';
+
+ const color = content.content_type === 'post' ? '#3498db' :
+ content.content_type === 'app' ? '#e74c3c' : '#f39c12';
+
+ el.innerHTML = `
+
+ ${content.content_type === 'post' ? '📄' : content.content_type === 'app' ? '📱' : '📁'}
+
+ `;
+
+ return el;
+}
+
+/**
+ * Seeded random number generator (deterministic)
+ */
+function seededRandom(seed) {
+ let s = seed;
+ return function() {
+ s = (s * 9301 + 49297) % 233280;
+ return s / 233280;
+ };
+}
+
diff --git a/src/components/Layout/TopBar.jsx b/src/components/Layout/TopBar.jsx
index f7387c5..3291fa5 100644
--- a/src/components/Layout/TopBar.jsx
+++ b/src/components/Layout/TopBar.jsx
@@ -2,8 +2,6 @@ import React, { useEffect, useMemo, useState } from "react";
import { useAuth } from "../../auth/AuthContext";
import { registerUser } from "../../api/client";
import AuthToast from "../Auth/AuthToast";
-
-// Import pour le bouton PWA
import { promptInstall, isRunningAsPWA, canInstall } from '../../pwaInstall';
const THEME_LABELS = { dark: "Dark", blue: "Blue", light: "Light" };
@@ -55,7 +53,7 @@ function parseMergedParams() {
return { qs, hs, get, hash };
}
-export default function TopBar({ theme = "dark", onChangeTheme }) {
+export default function TopBar({ theme = "dark", onChangeTheme, onIslandsClick }) {
const {
loading,
authenticated,
@@ -101,21 +99,20 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
if (authenticated) setShowAuth(false);
}, [authenticated]);
- // Check if install button should be shown
+ // Check if PWA install should be shown (simple: hide if already PWA)
useEffect(() => {
const checkInstall = () => {
- // Hide button if already running as PWA
+ // Hide if already running as PWA
if (isRunningAsPWA()) {
setShowInstallBtn(false);
return;
}
- // Show button if installation is available
+ // Show if can install
setShowInstallBtn(canInstall());
};
checkInstall();
- // Listen for beforeinstallprompt to update button visibility
const handlePrompt = () => {
setTimeout(checkInstall, 100);
};
@@ -278,7 +275,7 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
- {/* Theme dots + BOUTON INSTALL PWA */}
+ {/* Theme dots */}
{["dark", "blue", "light"].map((t) => (
@@ -293,64 +290,71 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
))}
-
- {/* BOUTON INSTALL PWA ici en haut - seulement si pas déjà installé */}
- {showInstallBtn && (
-
- )}
- {authenticated ? (
-
+
+ {/* User Profile Modal */}
+ {selectedProfile && (
+
-
)}
- {initialLetter(username)}
+ {/* User info */}
+
diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx
index 19bb7b0..fd3806c 100644
--- a/src/components/Map/MapView.jsx
+++ b/src/components/Map/MapView.jsx
@@ -18,12 +18,15 @@ import { useAuth } from "../../auth/AuthContext";
import FilterButtons from "../Filters/FilterButtons";
import TimeFilterButtons from "../Filters/TimeFilterButtons";
import SmartSearchBar from "../Search/SmartSearchBar";
+import UserProfile from "../Profile/UserProfile";
export default function MapView({
theme = "dark",
onPostsState,
selectedPost,
onSelectPost,
+ selectedIsland,
+ onSelectIsland,
}) {
const { authenticated, username, token, needsEmailVerification } = useAuth();
@@ -36,9 +39,9 @@ export default function MapView({
try {
const v = localStorage.getItem(TIME_FILTER_KEY);
const ok = ["NOW", "TODAY", "RECENT", "PAST"].includes(v);
- return ok ? v : "TODAY";
+ return ok ? v : "PAST";
} catch {
- return "TODAY";
+ return "PAST";
}
});
const [subFilter, setSubFilter] = useState("All");
@@ -55,6 +58,10 @@ export default function MapView({
const userPosition = useUserPosition(mapRef, hasLastView);
const [searchQuery, setSearchQuery] = useState("");
+ const skipAutoZoomRef = useRef(false);
+
+ // Profile state (selectedIsland is now passed from App.jsx)
+ const [selectedProfile, setSelectedProfile] = useState(null);
const { status, visiblePosts, loadingPosts, loadError, handleIncomingPost } =
usePostsEngine({
@@ -67,6 +74,7 @@ export default function MapView({
searchQuery,
markersRef,
expandedElRef,
+ onAutoWidenTimeFilter: (next) => setTimeFilter(next),
});
const [isCreating, setIsCreating] = useState(false);
@@ -233,31 +241,61 @@ export default function MapView({
speed: 1.4,
essential: true
});
+ map.__swForceFetchAt = Date.now();
- // If picking a post, filter by its title AND clear category filters to ensure visibility
- if (item.type === 'post' && item.title) {
- setSearchQuery(item.title);
+ // If picking a post, clear filters and avoid query-locking
+ if (item.type === 'post') {
+ skipAutoZoomRef.current = true;
+ setSearchQuery("");
setMainFilter("All");
setSubFilter("All");
+ setTimeFilter("PAST"); // Show all time periods
+
+ const raw = item.raw || item;
+ if (raw && typeof raw === "object") {
+ const lat = typeof raw.lat === "number" ? raw.lat : coords[1];
+ const lon = typeof raw.lon === "number" ? raw.lon : coords[0];
+ handleIncomingPost({
+ id: raw.post_id ?? raw.id ?? 0,
+ title: raw.title || item.title || "Post",
+ snippet: raw.snippet || raw.summary || "",
+ category: raw.category || "NEWS",
+ sub_category: raw.sub_category || raw.subCategory || "ALL",
+ lat,
+ lon,
+ url: raw.url || "",
+ source: raw.source || "",
+ published_at: raw.published_at || "",
+ created_at: raw.published_at || "",
+ url_hash: raw.url_hash || "",
+ });
+ }
} else {
+ skipAutoZoomRef.current = false;
setSearchQuery("");
}
};
const handleSearch = (query) => {
console.log('[MapView] Search/filter by:', query);
+ skipAutoZoomRef.current = false;
setSearchQuery(query);
- // Clear category filters to show all search results
+ // Clear ALL filters to show all search results
if (query.trim()) {
setMainFilter("All");
setSubFilter("All");
+ setTimeFilter("PAST"); // Show all time periods
}
};
// Zoom intelligent: quand on cherche, zoom pour voir tous les résultats
useEffect(() => {
if (!searchQuery || !visiblePosts.length) return;
+ if (skipAutoZoomRef.current) {
+ skipAutoZoomRef.current = false;
+ return;
+ }
const map = mapRef.current;
if (!map) return;
@@ -307,6 +345,29 @@ export default function MapView({
return () => clearTimeout(timer);
}, [searchQuery, visiblePosts, mapRef]);
+ const handleProfileVisitIsland = (island) => {
+ console.log('[MapView] Visiting island from profile:', island.username);
+ setSelectedProfile(null); // Close profile modal
+ onSelectIsland && onSelectIsland(island); // Open island viewer via App.jsx
+ };
+
+ // Global click handler for author links
+ useEffect(() => {
+ const handleAuthorClick = (e) => {
+ const authorLink = e.target.closest('.sw-author-link');
+ if (authorLink) {
+ const author = authorLink.getAttribute('data-author');
+ if (author) {
+ console.log('[MapView] Author clicked:', author);
+ setSelectedProfile(author);
+ }
+ }
+ };
+
+ document.addEventListener('click', handleAuthorClick);
+ return () => document.removeEventListener('click', handleAuthorClick);
+ }, []);
+
const handleOpenCreate = () => {
if (!authenticated) {
alert("You must be logged in to place a wire.");
@@ -419,25 +480,31 @@ export default function MapView({
const authorName = (username || "").trim() || "anon";
- let baseLng;
- let baseLat;
+ let lng;
+ let lat;
if (draftCoords && draftCoords.length === 2) {
- baseLng = draftCoords[0];
- baseLat = draftCoords[1];
+ lng = draftCoords[0];
+ lat = draftCoords[1];
} else {
- const center = map.getCenter();
- baseLng = center.lng;
- baseLat = center.lat;
+ const stage = stageRef.current;
+ const crosshairEl = stage ? stage.querySelector(".crosshair-aim") : null;
+ const containerEl = map.getContainer();
+ if (crosshairEl && containerEl) {
+ const crossRect = crosshairEl.getBoundingClientRect();
+ const containerRect = containerEl.getBoundingClientRect();
+ const px = crossRect.left + crossRect.width / 2 - containerRect.left;
+ const py = crossRect.top + crossRect.height / 2 - containerRect.top;
+ const correctedLngLat = map.unproject([px, py]);
+ lng = correctedLngLat.lng;
+ lat = correctedLngLat.lat;
+ } else {
+ const center = map.getCenter();
+ lng = center.lng;
+ lat = center.lat;
+ }
}
- const pixelOffsetY = -20;
- const screenPoint = map.project([baseLng, baseLat]);
- const correctedPoint = { x: screenPoint.x, y: screenPoint.y + pixelOffsetY };
- const correctedLngLat = map.unproject([correctedPoint.x, correctedPoint.y]);
- const lng = correctedLngLat.lng;
- const lat = correctedLngLat.lat;
-
if (!draftTitle.trim()) {
setSaveError("Title required.");
return;
@@ -707,6 +774,15 @@ export default function MapView({
+ {authenticated ? (
+
-
+ {/* Action buttons - separate section */}
+
+
-
+ {initialLetter(username)}
+
+
+
Online
+ @{username || "user"}
+
-
- ) : (
- Online
- @{username || "user"}
+ ) : (
+
+
-
+
+
+
+
{loading ? "Loading…" : "Guest"}
+ anon
+
-
- )}
+ )}
+
-
-
-
-
- {loading ? "Loading…" : "Guest"}
- anon
-
+ {/* PWA Install button - no dismiss X */}
+ {showInstallBtn && (
+
+ )}
+
+ {/* Islands Universe button */}
+
+
+ {/* Login/Logout button */}
+
+
${escapeHtml(cat)}
@@ -319,7 +319,7 @@ function calculateSmartOffset(post, markersRef, map) {
if (createdAt) {
const ageSeconds = (Date.now() - new Date(createdAt).getTime()) / 1000;
if (ageSeconds < 10) {
- return { x: 0, y: -80 }; // Offset vers le haut (négatif = monte)
+ return { x: 0, y: -110 }; // Offset vers le haut (négatif = monte)
}
}
@@ -379,7 +379,9 @@ export function createMarkerForPost(post, mapRef, markersRef, expandedElRef, the
const lngLat = [lon, lat];
// Calculate smart offset for nearby markers
- const offset = calculateSmartOffset(post, markersRef, map);
+ // DISABLED: Using geographic coordinate variation instead of pixel offset
+ // const offset = calculateSmartOffset(post, markersRef, map);
+ const offset = { x: 0, y: 0 };
const root = document.createElement("div");
root.classList.add("sw-appear");
@@ -400,13 +402,9 @@ export function createMarkerForPost(post, mapRef, markersRef, expandedElRef, the
root.style.zIndex = "1";
// Add connecting line if offset is significant
- const hasOffset = Math.abs(offset.x) > 5 || Math.abs(offset.y) > 5;
- const lineHTML = hasOffset
- ? ``
- : '';
+ // DISABLED: No longer using pixel offsets
+ const hasOffset = false;
+ const lineHTML = '';
root.innerHTML = `
@@ -608,3 +606,130 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
markersRef.current.push({ id: post.id, marker, el: root, post, type: "simple" });
}
+
+/**
+ * ISLAND MARKER: Creates a circular avatar marker for user islands
+ * Islands are displayed with avatar, username, and 🏝️ badge
+ */
+export function createIslandMarker(island, mapRef, markersRef, onIslandClick, theme = "blue") {
+ const map = mapRef.current;
+ if (!map) return;
+
+ const lat = island.virtual_y; // Virtual coords
+ const lon = island.virtual_x;
+
+ if (lat == null || lon == null) {
+ console.warn("[createIslandMarker] Missing virtual coordinates", island);
+ return;
+ }
+
+ const root = document.createElement("div");
+ root.classList.add("island-marker", "sw-appear");
+
+ // Fade-in animation
+ requestAnimationFrame(() => root.classList.add("sw-appear-in"));
+
+ // Marker circulaire avec avatar
+ root.innerHTML = `
+
+
+
+ `;
+
+ // Hover effect
+ const avatar = root.querySelector(".island-avatar");
+ root.addEventListener("mouseenter", () => {
+ if (avatar) {
+ avatar.style.transform = "scale(1.1)";
+ avatar.style.boxShadow = "0 6px 20px rgba(102, 126, 234, 0.6)";
+ }
+ });
+
+ root.addEventListener("mouseleave", () => {
+ if (avatar) {
+ avatar.style.transform = "scale(1)";
+ avatar.style.boxShadow = "0 4px 12px rgba(0,0,0,0.4)";
+ }
+ });
+
+ // Click handler
+ root.addEventListener("click", (ev) => {
+ ev.stopPropagation();
+ console.log("[Island Marker] Clicked:", island.username, island.id);
+ if (onIslandClick) {
+ onIslandClick(island);
+ }
+ });
+
+ const marker = new maplibregl.Marker({
+ element: root,
+ anchor: "bottom",
+ })
+ .setLngLat([lon, lat])
+ .addTo(map);
+
+ markersRef.current.push({
+ id: island.id,
+ marker,
+ el: root,
+ island,
+ type: "island"
+ });
+
+ console.log("[Island Marker] Created for", island.username, "at", [lon, lat]);
+}
diff --git a/src/components/Map/templateSpecs.js b/src/components/Map/templateSpecs.js
index e8ef9fd..38bf3c7 100644
--- a/src/components/Map/templateSpecs.js
+++ b/src/components/Map/templateSpecs.js
@@ -172,15 +172,16 @@ function parseDateAny(raw) {
}
function isBreaking(post) {
+ // Only show as BREAKING if explicitly tagged
if (post?.breaking === true || post?.is_breaking === true) return true;
+ // Or if title contains breaking/urgent/alerte keywords
const t = (post?.title || "").toString().toLowerCase();
if (t.includes("breaking") || t.includes("urgent") || t.includes("alerte")) return true;
- const d = parseDateAny(post?.created_at || post?.CreatedAt || post?.createdAt);
- if (!d) return false;
- const mins = (Date.now() - d.getTime()) / 60000;
- return mins >= 0 && mins <= 45;
+ // Removed: automatic breaking news for recent posts
+ // Now only explicit tags or keywords trigger breaking news style
+ return false;
}
function normCat(post) {
diff --git a/src/components/Map/useMapCore.js b/src/components/Map/useMapCore.js
index 081e837..e872ab7 100644
--- a/src/components/Map/useMapCore.js
+++ b/src/components/Map/useMapCore.js
@@ -98,6 +98,9 @@ export function useMapCore(theme) {
mapRef.current = map;
try { setViewParams(getViewFromMap(map)); } catch {}
+ const initialTimer = setTimeout(() => {
+ try { setViewParams(getViewFromMap(map)); } catch {}
+ }, 300);
const reOcclude = () => {
const el = expandedElRef.current;
@@ -135,6 +138,7 @@ export function useMapCore(theme) {
});
return () => {
+ clearTimeout(initialTimer);
clearAllMarkers(markersRef, expandedElRef);
map.remove();
mapRef.current = null;
@@ -148,4 +152,4 @@ export function useMapCore(theme) {
}, [theme]);
return { containerRef, mapRef, markersRef, expandedElRef, viewParams, hasLastView };
-}
\ No newline at end of file
+}
diff --git a/src/components/Map/usePostsEngine.js b/src/components/Map/usePostsEngine.js
index 47e34f1..8ec2fe2 100644
--- a/src/components/Map/usePostsEngine.js
+++ b/src/components/Map/usePostsEngine.js
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
-import { fetchSmartFeed } from "../../api/client";
+import { fetchPosts, fetchSmartFeed } from "../../api/client";
import { categoryCode, matchesSubFilter, matchesTimeFilter } from "./mapFilter";
-import { haversineKm } from "./mapGeo";
+import { getCoords, getViewFromMap, haversineKm } from "./mapGeo";
import { createMarkerForPost, createSimpleMarkerForPost } from "./markerManager";
import { prioritizePosts } from "./postPriority";
@@ -9,6 +9,19 @@ function getId(p) {
return p?.id ?? p?._id ?? null;
}
+function getPostKey(p) {
+ const id = getId(p);
+ if (id != null && id !== 0) return `id:${id}`;
+ const urlHash = (p?.url_hash || p?.urlHash || "").toString().trim();
+ if (urlHash) return `urlhash:${urlHash}`;
+ const url = (p?.url || "").toString().trim();
+ if (url) return `url:${url}`;
+ const title = (p?.title || p?.Title || "").toString().trim();
+ const created = (p?.created_at || p?.CreatedAt || p?.createdAt || "").toString().trim();
+ if (title || created) return `t:${title}|${created}`;
+ return `fallback:${JSON.stringify(p)}`;
+}
+
function sameIdList(a, b) {
if (a === b) return true;
if (!Array.isArray(a) || !Array.isArray(b)) return false;
@@ -54,6 +67,20 @@ function matchesSearch(p, qRaw) {
return true;
}
+function hasPostsInRadius(posts, centerLat, centerLon, radiusKm) {
+ if (!Array.isArray(posts) || posts.length === 0) return false;
+ if (!Number.isFinite(centerLat) || !Number.isFinite(centerLon)) return true;
+ const limit = Math.max(radiusKm || 0, 1);
+ for (const p of posts) {
+ const coords = getCoords(p);
+ if (!coords) continue;
+ const [lon, lat] = coords;
+ const dKm = haversineKm(centerLat, centerLon, lat, lon);
+ if (dKm <= limit) return true;
+ }
+ return false;
+}
+
export function usePostsEngine({
mapRef,
viewParams,
@@ -63,11 +90,31 @@ export function usePostsEngine({
searchQuery,
markersRef,
expandedElRef,
+ onAutoWidenTimeFilter,
theme = "blue",
}) {
const allPostsRef = useRef([]);
- const lastFetchRef = useRef({ center: null, radiusKm: null, filterKey: "" });
+ const lastFetchRef = useRef({ center: null, radiusKm: null, filterKey: "", timeFilter: "" });
const delayedFetchRef = useRef(null);
+ const autoWidenRef = useRef(false);
+ const [mapReady, setMapReady] = useState(false);
+
+ useEffect(() => {
+ if (mapReady) return;
+ let cancelled = false;
+ const timer = setInterval(() => {
+ if (cancelled) return;
+ if (mapRef.current) {
+ mapRef.current.__swForceFetchAt = Date.now();
+ setMapReady(true);
+ clearInterval(timer);
+ }
+ }, 150);
+ return () => {
+ cancelled = true;
+ clearInterval(timer);
+ };
+ }, [mapReady, mapRef]);
const [status, setStatus] = useState("");
const [visiblePosts, setVisiblePosts] = useState([]);
@@ -195,12 +242,14 @@ export function usePostsEngine({
useEffect(() => {
const map = mapRef.current;
if (!map) return;
- if (!viewParams.center) return;
let cancelled = false;
async function load() {
const mapObj = mapRef.current;
+ const resolvedView =
+ viewParams && viewParams.center ? viewParams : getViewFromMap(mapObj);
+ if (!resolvedView?.center) return;
// If expanded overlay is open: delay fetch (do NOT disturb UI)
if (expandedElRef?.current) {
@@ -220,20 +269,25 @@ export function usePostsEngine({
}
} catch {}
- const [lng, lat] = viewParams.center;
- const radiusKm = viewParams.radiusKm || 750;
+ const [lng, lat] = resolvedView.center;
+ const radiusKm = resolvedView.radiusKm || 750;
const filterKey = `${mainFilter}|${subFilter}`;
const last = lastFetchRef.current;
+ const forceFetchAt = mapObj?.__swForceFetchAt || 0;
+ const forceFetch = forceFetchAt && Date.now() - forceFetchAt < 15000;
+ if (forceFetch) {
+ mapObj.__swForceFetchAt = 0;
+ }
- if (last.center && last.filterKey === filterKey) {
+ if (!forceFetch && last.center && last.filterKey === filterKey && last.timeFilter === timeFilter) {
const [lastLng, lastLat] = last.center;
const distKm = haversineKm(lastLat, lastLng, lat, lng);
const lastR = last.radiusKm || 0;
- const radiusChanged = !lastR || Math.abs(radiusKm - lastR) / Math.max(lastR, 1) >= 0.25;
+ const radiusChanged = !lastR || Math.abs(radiusKm - lastR) / Math.max(lastR, 1) >= 0.1;
- const minMoveKm = Math.max(40, radiusKm * 0.22);
+ const minMoveKm = Math.max(5, radiusKm * 0.1);
if (!radiusChanged && distKm < minMoveKm) return;
}
@@ -247,35 +301,87 @@ export function usePostsEngine({
subFilter && subFilter.toUpperCase() !== "ALL" && subFilter !== "All" ? subFilter : "";
// Use smart feed for personalized, trending posts
- const newPosts = await fetchSmartFeed({
+ let bounds = null;
+ try {
+ const b = mapObj.getBounds();
+ if (b) {
+ const sw = b.getSouthWest();
+ const ne = b.getNorthEast();
+ bounds = {
+ minLat: sw?.lat,
+ minLon: sw?.lng,
+ maxLat: ne?.lat,
+ maxLon: ne?.lng,
+ };
+ }
+ } catch {}
+
+ let newPosts = await fetchSmartFeed({
lat,
lon: lng,
radius_km: radiusKm,
limit: 80,
+ bounds,
// TODO: Add user_id from auth context when available
- // TODO: Add bounds parameter for screen-aware prioritization
});
+ const timeParam = timeFilter && timeFilter !== "PAST" ? timeFilter : undefined;
+ if (!hasPostsInRadius(newPosts, lat, lng, radiusKm)) {
+ newPosts = await fetchPosts({
+ category: catCode || undefined,
+ subCategory: subCatParam || undefined,
+ time: timeParam,
+ lat,
+ lon: lng,
+ radiusKm,
+ });
+ if ((!Array.isArray(newPosts) || newPosts.length === 0) && timeFilter !== "PAST") {
+ newPosts = await fetchPosts({
+ category: catCode || undefined,
+ subCategory: subCatParam || undefined,
+ time: "PAST",
+ lat,
+ lon: lng,
+ radiusKm,
+ });
+ }
+ }
if (cancelled) return;
const existing = allPostsRef.current || [];
const byId = new Map();
for (const p of existing) {
- const id = getId(p);
- if (id != null) byId.set(id, p);
+ const key = getPostKey(p);
+ if (key) byId.set(key, p);
}
if (Array.isArray(newPosts)) {
for (const p of newPosts) {
- const id = getId(p);
- if (id != null && !byId.has(id)) byId.set(id, p);
+ const key = getPostKey(p);
+ if (key && !byId.has(key)) byId.set(key, p);
}
}
allPostsRef.current = Array.from(byId.values());
- lastFetchRef.current = { center: [...viewParams.center], radiusKm, filterKey };
+ lastFetchRef.current = { center: [...resolvedView.center], radiusKm, filterKey, timeFilter };
// Smooth update: sync markers + wall without clearing everything
- refreshVisibleAndMarkers(timeFilter);
+ const visible = computeVisible(timeFilter);
+ setVisiblePosts((prev) => (sameIdList(prev, visible) ? prev : visible));
+ setStatus("");
+ syncMarkers(visible);
+ if (
+ !autoWidenRef.current &&
+ timeFilter &&
+ timeFilter !== "PAST" &&
+ Array.isArray(newPosts) &&
+ newPosts.length > 0 &&
+ visible.length === 0
+ ) {
+ autoWidenRef.current = true;
+ if (typeof onAutoWidenTimeFilter === "function") {
+ onAutoWidenTimeFilter("PAST");
+ }
+ }
setLoadingPosts(false);
} catch (err) {
@@ -291,10 +397,15 @@ export function usePostsEngine({
delayedFetchRef.current = null;
}
};
- }, [viewParams, mainFilter, subFilter, mapRef, timeFilter, expandedElRef, refreshVisibleAndMarkers]);
+ }, [viewParams, mapReady, mainFilter, subFilter, mapRef, timeFilter, expandedElRef, refreshVisibleAndMarkers, computeVisible, onAutoWidenTimeFilter, syncMarkers]);
const handleIncomingPost = useCallback(
(p) => {
+ const key = getPostKey(p);
+ if (key) {
+ const exists = (allPostsRef.current || []).some((x) => getPostKey(x) === key);
+ if (exists) return;
+ }
allPostsRef.current = [...allPostsRef.current, p];
const catCode = categoryCode(mainFilter);
diff --git a/src/components/Profile/UserProfile.jsx b/src/components/Profile/UserProfile.jsx
new file mode 100644
index 0000000..bbdcd54
--- /dev/null
+++ b/src/components/Profile/UserProfile.jsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import { fetchIsland } from '../../api/client';
+import '../../styles/profile.css';
+
+/**
+ * UserProfile: Modal showing user info with "Visit Island" button
+ *
+ * Props:
+ * - username: string (required)
+ * - onClose: function
+ * - onVisitIsland: function(island) - called when "Visit Island" is clicked
+ */
+export default function UserProfile({ username, onClose, onVisitIsland }) {
+ const [island, setIsland] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ if (!username) return;
+
+ // Find island by username (mock data uses island-{number})
+ // In real backend, we'd call /api/islands/by-username/{username}
+ const mockIslandMap = {
+ 'alice': 'island-1',
+ 'bob': 'island-2',
+ 'charlie': 'island-3',
+ 'diana': 'island-4',
+ 'eve': 'island-5',
+ };
+
+ const islandId = mockIslandMap[username.toLowerCase()];
+
+ if (islandId) {
+ fetchIsland(islandId)
+ .then(data => {
+ setIsland(data);
+ setLoading(false);
+ })
+ .catch(err => {
+ console.error('[UserProfile] Error fetching island:', err);
+ setLoading(false);
+ });
+ } else {
+ setLoading(false);
+ }
+ }, [username]);
+
+ const handleVisitIsland = () => {
+ if (island && onVisitIsland) {
+ onVisitIsland(island);
+ }
+ };
+
+ return (
+ 🏝️ ISLAND
+ @${island.username}
+
+
+
+ );
+}
diff --git a/src/components/Search/SmartSearchBar.jsx b/src/components/Search/SmartSearchBar.jsx
index 5d2b920..938e72c 100644
--- a/src/components/Search/SmartSearchBar.jsx
+++ b/src/components/Search/SmartSearchBar.jsx
@@ -9,13 +9,13 @@ function defaultZoomForKind(kind) {
if (k === "post") return 16; // Close zoom for posts
if (k === "profile") return 14; // Medium zoom for profiles
if (k === "city") return 11; // City-level zoom
- if (k === "region") return 7; // Wide zoom for regions/provinces
+ if (k === "region") return 5; // Wide zoom for regions/provinces
if (k === "place" || k === "poi") return 13; // Places zoom
// Legacy/fallback
if (k.includes("post")) return 15;
if (k.includes("city")) return 11;
- if (k.includes("region") || k.includes("area") || k.includes("province") || k.includes("state")) return 7;
+ if (k.includes("region") || k.includes("area") || k.includes("province") || k.includes("state")) return 5;
if (k.includes("place")) return 13;
return 12; // Default
@@ -32,22 +32,26 @@ function IconPin(props) {
);
}
-function IconWaves(props) {
+function IconPlus(props) {
return (
);
}
+function truncateText(value, maxLen) {
+ const s = (value || "").toString();
+ if (!maxLen || s.length <= maxLen) return s;
+ return s.slice(0, Math.max(0, maxLen - 1)) + "…";
+}
+
/**
* Props:
* - placeholder
@@ -72,6 +76,7 @@ export default function SmartSearchBar({
const [hasSearched, setHasSearched] = useState(false);
const abortRef = useRef(null);
+ const skipSearchRef = useRef(false);
const boxRef = useRef(null);
useEffect(() => {
@@ -113,6 +118,11 @@ export default function SmartSearchBar({
useEffect(() => {
const query = q.trim();
+ if (skipSearchRef.current) {
+ skipSearchRef.current = false;
+ return;
+ }
+
if (abortRef.current) abortRef.current.abort();
const t = setTimeout(() => {
@@ -130,6 +140,7 @@ export default function SmartSearchBar({
const pick = (it, reason = "click") => {
if (!it) return;
const zoom = defaultZoomForKind(it.kind);
+ skipSearchRef.current = true;
setOpen(false);
setQ(it.title || q);
@@ -152,6 +163,7 @@ export default function SmartSearchBar({
pick(items[active], "enter");
} else if (q.trim()) {
// No item selected, trigger search/filter
+ skipSearchRef.current = true;
setOpen(false);
onSearch && onSearch(q.trim());
}
@@ -178,7 +190,14 @@ export default function SmartSearchBar({
setQ(e.target.value)}
+ onChange={(e) => {
+ const newValue = e.target.value;
+ setQ(newValue);
+ // Si on efface tout le texte, clear les filtres
+ if (!newValue.trim() && q.trim()) {
+ onSearch && onSearch("");
+ }
+ }}
onFocus={() => {
setOpen(true);
// Si pas encore cherché et query vide, charger suggestions populaires
@@ -212,7 +231,7 @@ export default function SmartSearchBar({
title={rightTitle}
onClick={() => onPlaceTourWire && onPlaceTourWire()}
>
- e.stopPropagation()}>
+
+
+
+
+
+
+ {loading ? (
+
+ {island?.avatar_url ? (
+ 
+ ) : (
+
+
+ {username[0].toUpperCase()}
+
+ )}
+ @{username}
+ {island?.display_name && island.display_name !== `${username}'s Island` && ( +{island.display_name}
+ )} +Loading profile...
+ ) : island ? (
+ <>
+
+
+
+ {island.bio || 'No bio yet.'}
+
+
+
+
+ {island.content_count || 0}
+ Posts
+
+
+ {island.visitors || 0}
+ Visitors
+
+
+ {island.terrain_type || 'tropical'}
+ Terrain
+
+
+
+
+
+
+
+
+ ) : (
+ Seed: {island.seed}
+
+
+ )}
+ This user doesn't have an island yet.
+