-
-
{activeTab === "profile" ? (
- {avatarSrc ? (
- 
- ) : (
- {(island.username || "U")[0].toUpperCase()}
- )}
+
+
-
+ {avatarSrc ? (
+
+ ) : (
+ {(islandUsername || "U")[0].toUpperCase()}
+ )}
+
+
+
{island.display_name || `${islandUsername}'s Island`}
+{island.bio || 'Welcome to my island'}
+
-
- {island.display_name || `${island.username}'s Island`}
-{island.bio || 'Welcome to my island'}
-
{avatarSrc ? (
-
+
) : (
- {(island.username || "U")[0].toUpperCase()}
+ {(islandUsername || "U")[0].toUpperCase()}
)}
-
@{island.username}
+ @{islandUsername}
{isSelf ? (
+
@@ -388,14 +442,14 @@ function createIslandElement(seed, terrainType = 'tropical') {
el.className = 'island-terrain-marker';
const terrainColor = getTerrainColorCSS(terrainType);
- const size = 200 + rng() * 50; // 200-250px
+ const size = 220 + rng() * 50; // 220-270px
el.innerHTML = `
+
+
+ setUsernameDraft(e.target.value)}
+ placeholder="Choose a username"
+ disabled={usernameSaving}
+ />
+
+
+
{uploadError ?
) : null}
{uploadError}
: null}
{uploadInfo ? {uploadInfo}
: null}
+ {usernameError ? {usernameError}
: null}
+ {usernameInfo ? {usernameInfo}
: null}
+
+
`;
@@ -559,10 +628,10 @@ function createContentElement(content) {
el.innerHTML = `
✨
${createIslandTexture(seed, terrainType)}
{
- const base = (username || "user").toString();
- if (base.length <= 9) return base;
- return base.slice(0, 9) + "..";
- })();
-
const [showAuth, setShowAuth] = useState(false);
const [mode, setMode] = useState("login");
const [showUsernameModal, setShowUsernameModal] = useState(false);
@@ -86,6 +82,15 @@ export default function TopBar({ theme = "dark", onChangeTheme, onIslandsClick,
const [usernameInfo, setUsernameInfo] = useState("");
const [usernameSaving, setUsernameSaving] = useState(false);
const usernamePromptTimer = useRef(null);
+ const invalidSinceRef = useRef(null);
+ const [stableUsername, setStableUsername] = useState("");
+
+ const displayUsername = (() => {
+ const raw = (stableUsername || username || "user").toString();
+ if (!stableUsername && raw.includes("@")) return "user";
+ if (raw.length <= 9) return raw;
+ return raw.slice(0, 9) + "..";
+ })();
const [loginUser, setLoginUser] = useState("");
const [loginPass, setLoginPass] = useState("");
@@ -158,7 +163,22 @@ export default function TopBar({ theme = "dark", onChangeTheme, onIslandsClick,
}, [authenticated]);
useEffect(() => {
- const needsUsername = (name) => {
+ if (!authenticated) {
+ setStableUsername("");
+ return;
+ }
+ const next = (username || "").trim();
+ if (!next) return;
+ const looksLikeEmail = next.includes("@");
+ if (!looksLikeEmail) {
+ setStableUsername(next);
+ return;
+ }
+ if (stableUsername) return;
+ }, [authenticated, username, stableUsername]);
+
+ useEffect(() => {
+ const requiresUsername = (name) => {
if (!name) return false;
if (name.includes("@")) return true;
const re = /^[A-Za-z0-9_.]{3,24}$/;
@@ -173,7 +193,8 @@ export default function TopBar({ theme = "dark", onChangeTheme, onIslandsClick,
setShowUsernameModal(false);
return;
}
- if (needsUsername(username)) {
+ const shouldPrompt = !!needsUsername || requiresUsername(username);
+ if (shouldPrompt) {
if (!showUsernameModal) {
const base = (username || "").split("@")[0] || "";
const cleaned = base.replace(/[^A-Za-z0-9_.]/g, "").slice(0, 24);
@@ -182,12 +203,12 @@ export default function TopBar({ theme = "dark", onChangeTheme, onIslandsClick,
setUsernameInfo("");
usernamePromptTimer.current = setTimeout(() => {
setShowUsernameModal(true);
- }, 350);
+ }, 600);
}
} else if (showUsernameModal) {
setShowUsernameModal(false);
}
- }, [authenticated, username, showUsernameModal, loading]);
+ }, [authenticated, username, showUsernameModal, loading, needsUsername]);
useEffect(() => {
return () => {
diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx
index f36c7e1..62afac3 100644
--- a/src/components/Map/MapView.jsx
+++ b/src/components/Map/MapView.jsx
@@ -5,7 +5,7 @@ import "../../styles/mapMarkers.css";
import "../../styles/posts.css";
import "../../styles/filters.css";
-import { createPost } from "../../api/client";
+import { createPost, fetchPostPreview } from "../../api/client";
import {
FILTER_MAIN_CATEGORIES,
FILTER_CATEGORY_MAP,
@@ -20,7 +20,7 @@ import FilterButtons from "../Filters/FilterButtons";
import TimeFilterButtons from "../Filters/TimeFilterButtons";
import SmartSearchBar from "../Search/SmartSearchBar";
import UserProfile from "../Profile/UserProfile";
-import { fetchPostById } from "../../api/client";
+import { fetchPostById, fetchPostByUrl } from "../../api/client";
import { trackEvent } from "../../utils/analytics";
export default function MapView({
@@ -33,6 +33,8 @@ export default function MapView({
onOpenIslands,
}) {
const { authenticated, username, token, needsEmailVerification } = useAuth();
+ const CLUSTERS_ENABLED = true;
+ const HEATMAP_ENABLED = false;
const { containerRef, mapRef, markersRef, expandedElRef, viewParams, hasLastView } =
useMapCore(theme);
@@ -49,6 +51,7 @@ export default function MapView({
}
});
const [subFilter, setSubFilter] = useState("All");
+ const [mainNewsOnly, setMainNewsOnly] = useState(false);
useEffect(() => {
try {
@@ -63,12 +66,15 @@ export default function MapView({
const [searchQuery, setSearchQuery] = useState("");
const skipAutoZoomRef = useRef(false);
+ const [clusterFocus, setClusterFocus] = useState(null);
+ const [forceFullPostId, setForceFullPostId] = useState(null);
// Profile state (selectedIsland is now passed from App.jsx)
const [selectedProfile, setSelectedProfile] = useState(null);
const openedPostRef = useRef(null);
const queryPostRef = useRef(false);
const overlayTimerRef = useRef(null);
+ const panTimerRef = useRef(null);
const pendingOpenPostIdRef = useRef(null);
const pendingOpenFullRef = useRef(false);
const searchFitQueryRef = useRef("");
@@ -97,6 +103,55 @@ export default function MapView({
[mapRef, theme]
);
+ const fitBoundsWhenReady = useCallback(
+ (bounds, opts = {}) => {
+ const tryFit = () => {
+ const map = mapRef.current;
+ if (!map) return false;
+ try {
+ map.fitBounds(bounds, opts);
+ } catch {}
+ return true;
+ };
+ if (tryFit()) return;
+ if (panTimerRef.current) clearInterval(panTimerRef.current);
+ panTimerRef.current = setInterval(() => {
+ if (tryFit()) {
+ clearInterval(panTimerRef.current);
+ panTimerRef.current = null;
+ }
+ }, 220);
+ },
+ [mapRef]
+ );
+
+ const panToPostWhenReady = useCallback(
+ (post, zoom = 12) => {
+ const lat = Number(post?.lat);
+ const lon = Number(post?.lon);
+ if (!Number.isFinite(lat) || !Number.isFinite(lon)) return;
+
+ const tryPan = () => {
+ const map = mapRef.current;
+ if (!map) return false;
+ try {
+ map.easeTo({ center: [lon, lat], zoom, duration: 700 });
+ } catch {}
+ return true;
+ };
+
+ if (tryPan()) return;
+ if (panTimerRef.current) clearInterval(panTimerRef.current);
+ panTimerRef.current = setInterval(() => {
+ if (tryPan()) {
+ clearInterval(panTimerRef.current);
+ panTimerRef.current = null;
+ }
+ }, 220);
+ },
+ [mapRef]
+ );
+
const { status, visiblePosts, loadingPosts, loadError, handleIncomingPost, handlePostUpdate } =
usePostsEngine({
theme,
@@ -106,6 +161,11 @@ export default function MapView({
subFilter,
timeFilter,
searchQuery,
+ clusterFocus,
+ mainNewsOnly,
+ clustersEnabled: CLUSTERS_ENABLED,
+ heatmapEnabled: HEATMAP_ENABLED,
+ forceFullPostId,
markersRef,
expandedElRef,
onAutoWidenTimeFilter: (next) => setTimeFilter(next),
@@ -116,12 +176,18 @@ export default function MapView({
const [isCreating, setIsCreating] = useState(false);
const [draftTitle, setDraftTitle] = useState("");
const [draftBody, setDraftBody] = useState("");
+ const [draftUrl, setDraftUrl] = useState("");
+ const [draftSource, setDraftSource] = useState("");
+ const [draftPublishedAt, setDraftPublishedAt] = useState("");
const [draftCategory, setDraftCategory] = useState("News");
const [draftSubCategory, setDraftSubCategory] = useState(
CREATE_CATEGORY_MAP.News[0]
);
const [draftCoords, setDraftCoords] = useState(null);
const [draftImage, setDraftImage] = useState("");
+ const [draftImageSmall, setDraftImageSmall] = useState("");
+ const [draftImageMedium, setDraftImageMedium] = useState("");
+ const [draftImageLarge, setDraftImageLarge] = useState("");
const [draftImageFile, setDraftImageFile] = useState(null);
const [draftImagePreview, setDraftImagePreview] = useState("");
const [useCustomImage, setUseCustomImage] = useState(false);
@@ -132,12 +198,28 @@ export default function MapView({
const [imageGroupId, setImageGroupId] = useState("");
const [imageUsers, setImageUsers] = useState("");
const [uploadingImage, setUploadingImage] = useState(false);
+ const [urlPreviewLoading, setUrlPreviewLoading] = useState(false);
+ const [urlPreviewError, setUrlPreviewError] = useState("");
+ const [titleTouched, setTitleTouched] = useState(false);
+ const [bodyTouched, setBodyTouched] = useState(false);
+ const [imageTouched, setImageTouched] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [saveError, setSaveError] = useState("");
const [createStep, setCreateStep] = useState(0);
+ const previewTimerRef = useRef(null);
+ const lastPreviewUrlRef = useRef("");
const bottomCategories = FILTER_CATEGORY_MAP[mainFilter] || ["All"];
+ const formatPreviewDate = (value) => {
+ if (!value) return "";
+ const d = new Date(value);
+ if (Number.isNaN(d.getTime())) return String(value);
+ return d.toLocaleString();
+ };
+
+ const isLikelyUrl = (value) => /^https?:\/\//i.test(String(value || "").trim());
+
const getSubcatIcon = (main, sub) => {
const M = {
All: {
@@ -235,7 +317,6 @@ export default function MapView({
useEffect(() => {
if (queryPostRef.current) return;
- queryPostRef.current = true;
const qs = new URLSearchParams(window.location.search || "");
let idRaw = qs.get("post_id") || qs.get("id") || qs.get("p");
if (!idRaw) {
@@ -249,6 +330,7 @@ export default function MapView({
}
}
if (!idRaw) return;
+ queryPostRef.current = true;
const id = Number(idRaw);
if (!Number.isFinite(id) || id <= 0) return;
pendingOpenPostIdRef.current = id;
@@ -262,9 +344,193 @@ export default function MapView({
});
}, [onSelectPost, openOverlayWhenReady]);
+ useEffect(() => {
+ if (queryPostRef.current) return;
+ if (!CLUSTERS_ENABLED) return;
+ const path = (window.location.pathname || "").trim();
+ const clusterMatch = path.match(/^\/cluster\/[^/]+\/\d{8}/);
+ if (!clusterMatch) return;
+ queryPostRef.current = true;
+ const fullUrl = `${window.location.origin}${clusterMatch[0]}`;
+ fetchPostByUrl(fullUrl).then((post) => {
+ if (!post) return;
+ const items = Array.isArray(post.cluster_items) ? post.cluster_items : [];
+ const ids = Array.isArray(post.cluster_members) ? post.cluster_members : [];
+ const points = items
+ .map((it) => ({ lat: Number(it?.lat), lon: Number(it?.lon) }))
+ .filter((p) => Number.isFinite(p.lat) && Number.isFinite(p.lon));
+ const mainPost = { ...post };
+ if (!Array.isArray(mainPost.cluster_items) || mainPost.cluster_items.length === 0) {
+ mainPost.cluster_items = items;
+ }
+ setClusterFocus({
+ key: post.cluster_key || "",
+ ids,
+ posts: items.map((it) => ({
+ id: Number(it.id || it.ID) || 0,
+ title: it.title || "Untitled",
+ snippet: it.snippet || "",
+ category: "NEWS",
+ sub_category: "World",
+ lat: Number(it.lat),
+ lon: Number(it.lon),
+ url: it.url || "",
+ source: it.source || "",
+ image_small: it.image_small || "",
+ image_medium: it.image_medium || "",
+ image_large: it.image_large || "",
+ created_at: it.published_at || "",
+ published_at: it.published_at || "",
+ })).concat([mainPost]),
+ points,
+ center: { lat: Number(post.lat), lon: Number(post.lon) },
+ });
+ onSelectPost?.(mainPost);
+ panToPostWhenReady(mainPost, 12);
+ openOverlayWhenReady(mainPost, { fullScreen: true });
+ });
+ }, [mapRef, onSelectPost, openOverlayWhenReady, panToPostWhenReady]);
+
+ useEffect(() => {
+ if (!CLUSTERS_ENABLED || !HEATMAP_ENABLED) return;
+ const handler = (ev) => {
+ const detail = ev?.detail || {};
+ const mode = detail.mode || "click";
+ const skipPan = !!detail.skipPan;
+ const key = (detail.clusterKey || "").toString();
+ const members = Array.isArray(detail.members) ? detail.members : [];
+ const postId = Number(detail.postId || 0);
+ const ids = members.length ? Array.from(new Set([...members, postId].filter(Boolean))) : (postId ? [postId] : []);
+ const items = Array.isArray(detail.items) ? detail.items : [];
+ const mainPost = detail.post && typeof detail.post === "object" ? detail.post : null;
+
+ const toExtraPosts = (list, basePost) => {
+ const out = [];
+ if (basePost) {
+ const withItems = { ...basePost };
+ if (!Array.isArray(withItems.cluster_items) || withItems.cluster_items.length === 0) {
+ withItems.cluster_items = list;
+ }
+ out.push(withItems);
+ }
+ for (const it of list) {
+ if (!it) continue;
+ const id = Number(it.id || it.ID);
+ out.push({
+ id: Number.isFinite(id) ? id : 0,
+ title: it.title || it.Title || "Untitled",
+ snippet: it.snippet || "",
+ category: "NEWS",
+ sub_category: "World",
+ lat: Number(it.lat),
+ lon: Number(it.lon),
+ url: it.url || "",
+ source: it.source || "",
+ image_small: it.image_small || "",
+ image_medium: it.image_medium || "",
+ image_large: it.image_large || "",
+ created_at: it.published_at || "",
+ published_at: it.published_at || "",
+ });
+ }
+ return out;
+ };
+
+ const applyClusterFocus = (list, basePost, points) => {
+ setClusterFocus((prev) => {
+ if (prev && prev.key && key && prev.key === key) {
+ return mode === "hover" ? prev : null;
+ }
+ return {
+ key,
+ ids,
+ posts: toExtraPosts(list, basePost),
+ points,
+ center: detail.center || null,
+ mode,
+ };
+ });
+ };
+
+ const map = mapRef.current;
+ if (!map) return;
+ try { map.__swForceFetchAt = Date.now(); } catch {}
+
+ const points = Array.isArray(detail.points) ? detail.points : [];
+ const center = detail.center || {};
+ const ensurePoints = (list) => {
+ const pts = list
+ .map((it) => ({ lat: Number(it?.lat), lon: Number(it?.lon) }))
+ .filter((p) => Number.isFinite(p.lat) && Number.isFinite(p.lon));
+ if (Number.isFinite(center.lat) && Number.isFinite(center.lon)) {
+ pts.push({ lat: center.lat, lon: center.lon });
+ }
+ return pts;
+ };
+
+ const usePoints = (pts) => {
+ if (skipPan) return;
+ const valid = pts.filter((p) => Number.isFinite(p.lat) && Number.isFinite(p.lon));
+ if (valid.length >= 2) {
+ let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180;
+ for (const p of valid) {
+ minLat = Math.min(minLat, p.lat);
+ maxLat = Math.max(maxLat, p.lat);
+ minLon = Math.min(minLon, p.lon);
+ maxLon = Math.max(maxLon, p.lon);
+ }
+ fitBoundsWhenReady([[minLon, minLat], [maxLon, maxLat]], { padding: 80, duration: 700 });
+ return;
+ }
+ const lat = Number(center.lat);
+ const lon = Number(center.lon);
+ if (Number.isFinite(lat) && Number.isFinite(lon)) {
+ panToPostWhenReady({ lat, lon }, 12);
+ }
+ };
+
+ if (!items.length && mainPost?.url) {
+ fetchPostByUrl(mainPost.url).then((full) => {
+ if (full && Array.isArray(full.cluster_items) && full.cluster_items.length > 0) {
+ const fullItems = full.cluster_items;
+ const pts = ensurePoints(fullItems);
+ applyClusterFocus(fullItems, { ...mainPost, ...full, cluster_items: fullItems }, pts);
+ usePoints(pts);
+ } else {
+ applyClusterFocus(items, mainPost, points);
+ usePoints(points);
+ }
+ });
+ return;
+ }
+
+ const pts = ensurePoints(items);
+ applyClusterFocus(items, mainPost, pts);
+ usePoints(pts);
+ };
+ window.addEventListener("sociowire:cluster-heatmap", handler);
+ return () => window.removeEventListener("sociowire:cluster-heatmap", handler);
+ }, [mapRef, fitBoundsWhenReady, panToPostWhenReady, CLUSTERS_ENABLED, HEATMAP_ENABLED]);
+
+ useEffect(() => {
+ if (!CLUSTERS_ENABLED || !HEATMAP_ENABLED) return;
+ const handler = () => {
+ setClusterFocus((prev) => (prev?.mode === "hover" ? null : prev));
+ };
+ window.addEventListener("sociowire:cluster-heatmap-clear", handler);
+ return () => window.removeEventListener("sociowire:cluster-heatmap-clear", handler);
+ }, [CLUSTERS_ENABLED, HEATMAP_ENABLED]);
+
useEffect(() => {
const wantId = pendingOpenPostIdRef.current;
if (!wantId || !Array.isArray(visiblePosts) || !visiblePosts.length) return;
+ const map = mapRef.current;
+ const overlay = map?.__swCenteredOverlay;
+ if (overlay && overlay.postId === wantId) {
+ pendingOpenPostIdRef.current = null;
+ pendingOpenFullRef.current = false;
+ return;
+ }
const match = visiblePosts.find((p) => (p?.id || p?.ID) === wantId);
if (!match) return;
pendingOpenPostIdRef.current = null;
@@ -277,6 +543,7 @@ export default function MapView({
useEffect(() => {
return () => {
if (overlayTimerRef.current) clearInterval(overlayTimerRef.current);
+ if (panTimerRef.current) clearInterval(panTimerRef.current);
};
}, []);
@@ -346,6 +613,112 @@ export default function MapView({
coords = [item.lon, item.lat];
}
+ // If picking a post, open the real post (with likes/comments) after fetch.
+ const kind = (item?.kind || item?.type || "").toString().toLowerCase();
+ const raw = item?.raw || item;
+ const looksLikePost =
+ kind === "post" ||
+ kind === "posts" ||
+ Number(raw?.post_id || 0) > 0 ||
+ !!raw?.url_hash ||
+ (!!raw?.url && !kind.includes("profile") && !kind.includes("place"));
+ if (looksLikePost) {
+ skipAutoZoomRef.current = true;
+ setSearchQuery("");
+ setMainFilter("All");
+ setSubFilter("All");
+ setTimeFilter("PAST"); // Show all time periods
+
+ const postId = Number(raw?.post_id ?? raw?.id ?? item?.id ?? 0);
+ const rawUrl = raw?.url || item?.url || "";
+ if (Number.isFinite(postId) && postId > 0) {
+ setForceFullPostId(postId);
+ }
+
+ const focusPost = (post) => {
+ if (!post) return;
+ const lat = Number(post?.lat);
+ const lon = Number(post?.lon);
+ if (Number.isFinite(lat) && Number.isFinite(lon)) {
+ const center = map.getCenter?.();
+ const dz = (zoom || 12);
+ const distKm = center ? Math.sqrt(Math.pow(center.lat - lat, 2) + Math.pow(center.lng - lon, 2)) * 111 : 999;
+ const curZoom = map.getZoom?.() || dz;
+ const targetZoom = distKm > 8 ? dz : Math.max(curZoom, Math.min(dz, curZoom + 0.8));
+ map.easeTo({
+ center: [lon, lat],
+ zoom: targetZoom,
+ duration: 650,
+ essential: true
+ });
+ map.__swForceFetchAt = Date.now();
+ }
+ openedPostRef.current = post?.id || null;
+ onSelectPost?.(post);
+ openOverlayWhenReady(post, { fullScreen: false });
+ };
+
+ const stubPost = (() => {
+ const lat = Number(raw?.lat ?? item?.lat);
+ const lon = Number(raw?.lon ?? item?.lon);
+ const id = Number(postId || 0);
+ if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null;
+ return {
+ id: Number.isFinite(id) ? id : 0,
+ title: raw?.title || item?.title || "Post",
+ snippet: raw?.snippet || item?.snippet || "",
+ category: raw?.category || item?.category || "NEWS",
+ sub_category: raw?.sub_category || item?.sub_category || "",
+ lat,
+ lon,
+ url: raw?.url || item?.url || "",
+ image_small: raw?.image_small || item?.image_small || "",
+ image_medium: raw?.image_medium || item?.image_medium || "",
+ image_large: raw?.image_large || item?.image_large || "",
+ created_at: raw?.created_at || item?.created_at || "",
+ published_at: raw?.published_at || item?.published_at || "",
+ };
+ })();
+
+ const tryOpen = async (attempt = 0) => {
+ let post = null;
+ if (Number.isFinite(postId) && postId > 0) {
+ post = await fetchPostById(postId);
+ }
+ if (!post && rawUrl) {
+ post = await fetchPostByUrl(rawUrl);
+ }
+ if (post) {
+ pendingOpenPostIdRef.current = null;
+ pendingOpenFullRef.current = false;
+ focusPost(post);
+ return;
+ }
+ if (attempt < 2) {
+ setTimeout(() => tryOpen(attempt + 1), 650 + attempt * 400);
+ return;
+ }
+ if (stubPost) {
+ pendingOpenPostIdRef.current = null;
+ pendingOpenFullRef.current = false;
+ focusPost(stubPost);
+ }
+ if (coords) {
+ pendingOpenPostIdRef.current = null;
+ pendingOpenFullRef.current = false;
+ map.easeTo({
+ center: coords,
+ zoom: zoom || 12,
+ duration: 650,
+ essential: true
+ });
+ map.__swForceFetchAt = Date.now();
+ }
+ };
+ tryOpen();
+ return;
+ }
+
if (!coords) {
console.warn('[MapView] No coords for suggestion:', item);
return;
@@ -360,61 +733,21 @@ export default function MapView({
});
map.__swForceFetchAt = Date.now();
- // If picking a post, clear filters and avoid query-locking
- const kind = (item?.kind || item?.type || "").toString().toLowerCase();
-
- if (kind === 'post') {
- skipAutoZoomRef.current = true;
- setSearchQuery("");
- setMainFilter("All");
- setSubFilter("All");
- setTimeFilter("PAST"); // Show all time periods
-
- const raw = item.raw || item;
- const postId = raw?.post_id ?? raw?.id ?? item?.id ?? 0;
- 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];
- const builtPost = {
- 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 || "",
- };
- handleIncomingPost(builtPost);
- if (postId > 0) {
- fetchPostById(postId).then((full) => {
- if (full) {
- openOverlayWhenReady(full, { fullScreen: true });
- } else {
- openOverlayWhenReady(builtPost, { fullScreen: true });
- }
- });
- } else {
- openOverlayWhenReady(builtPost, { fullScreen: true });
- }
- }
- } else if (kind === 'city' || kind === 'region' || kind === 'place' || kind === 'poi') {
+ if (kind === 'city' || kind === 'region' || kind === 'place' || kind === 'poi') {
// Place picks should move the map without forcing a text filter.
skipAutoZoomRef.current = false;
setSearchQuery("");
- } else {
- const q = (item.title || item.name || "").toString().trim();
- skipAutoZoomRef.current = false;
- setSearchQuery(q);
- if (q) {
- setMainFilter("All");
- setSubFilter("All");
- setTimeFilter("PAST");
- }
+ setForceFullPostId(null);
+ return;
+ }
+
+ const q = (item.title || item.name || "").toString().trim();
+ skipAutoZoomRef.current = false;
+ setSearchQuery(q);
+ if (q) {
+ setMainFilter("All");
+ setSubFilter("All");
+ setTimeFilter("PAST");
}
};
@@ -422,6 +755,7 @@ export default function MapView({
console.log('[MapView] Search/filter by:', query);
skipAutoZoomRef.current = false;
setSearchQuery(query);
+ if (!query.trim()) setForceFullPostId(null);
// Clear ALL filters to show all search results
if (query.trim()) {
@@ -563,6 +897,9 @@ export default function MapView({
setCreateStep(0);
setDraftTitle("");
setDraftBody("");
+ setDraftUrl("");
+ setDraftSource("");
+ setDraftPublishedAt("");
setDraftImage("");
setDraftImageFile(null);
setDraftImagePreview("");
@@ -573,6 +910,12 @@ export default function MapView({
setImageVisibility("public");
setImageGroupId("");
setImageUsers("");
+ setUrlPreviewLoading(false);
+ setUrlPreviewError("");
+ setTitleTouched(false);
+ setBodyTouched(false);
+ setImageTouched(false);
+ lastPreviewUrlRef.current = "";
const main = mainFilter === "All" ? "News" : mainFilter;
setDraftCategory(main);
const list = CREATE_CATEGORY_MAP[main] || CREATE_CATEGORY_MAP.News;
@@ -591,6 +934,7 @@ export default function MapView({
const handleImageFileChange = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
+ setImageTouched(true);
// Vérifier le type de fichier
if (!file.type.startsWith('image/')) {
@@ -636,11 +980,24 @@ export default function MapView({
}
const data = await res.json();
- if (data && data.url) {
- setDraftImage(data.url);
- } else if (data && data.asset_id) {
- setDraftImage(`asset://${data.asset_id}`);
+ const variants = data && data.variants ? data.variants : null;
+ const pickRef = (v) => {
+ if (!v) return "";
+ if (v.asset_id) return `asset://${v.asset_id}`;
+ return v.url || "";
+ };
+ const smallRef = variants ? pickRef(variants.small) : "";
+ const mediumRef = variants ? pickRef(variants.medium) : "";
+ let largeRef = variants ? pickRef(variants.large) : "";
+ if (!largeRef) {
+ if (data && data.url) largeRef = data.url;
+ else if (data && data.asset_id) largeRef = `asset://${data.asset_id}`;
}
+ const fallbackRef = largeRef || mediumRef || smallRef;
+ setDraftImageSmall(smallRef || fallbackRef);
+ setDraftImageMedium(mediumRef || fallbackRef);
+ setDraftImageLarge(largeRef || fallbackRef);
+ if (fallbackRef) setDraftImage(fallbackRef);
setUploadingImage(false);
} catch (err) {
console.error('Image upload error:', err);
@@ -648,9 +1005,64 @@ export default function MapView({
setUploadingImage(false);
setDraftImageFile(null);
setDraftImagePreview("");
+ setDraftImageSmall("");
+ setDraftImageMedium("");
+ setDraftImageLarge("");
}
};
+ const handleUrlPreview = async (rawOverride) => {
+ const raw = (rawOverride || draftUrl).trim();
+ if (!raw || urlPreviewLoading) return;
+ if (!/^https?:\/\//i.test(raw)) return;
+ if (raw === lastPreviewUrlRef.current) return;
+ setUrlPreviewLoading(true);
+ setUrlPreviewError("");
+ lastPreviewUrlRef.current = raw;
+
+ try {
+ const data = await fetchPostPreview(raw, token);
+ if (!data) throw new Error("Preview unavailable");
+
+ const title = (data.title || "").trim();
+ const desc = (data.description || "").trim();
+ const image = (data.image || "").trim();
+
+ if (!titleTouched && title) setDraftTitle(title);
+ if (!bodyTouched && desc) setDraftBody(desc);
+
+ if (data.source) setDraftSource(String(data.source));
+ if (data.published_at) setDraftPublishedAt(String(data.published_at));
+
+ if (!imageTouched && image) {
+ setUseCustomImage(true);
+ if (!draftImageFile && !draftImagePreview) {
+ setDraftImage(image);
+ setDraftImageSmall(image);
+ setDraftImageMedium(image);
+ setDraftImageLarge(image);
+ }
+ }
+ } catch (err) {
+ setUrlPreviewError(err?.message || "Failed to fetch link preview");
+ } finally {
+ setUrlPreviewLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ const raw = draftUrl.trim();
+ if (!raw || !/^https?:\/\//i.test(raw)) return;
+ if (raw === lastPreviewUrlRef.current) return;
+ if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
+ previewTimerRef.current = setTimeout(() => {
+ handleUrlPreview(raw);
+ }, 650);
+ return () => {
+ if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
+ };
+ }, [draftUrl]);
+
const handleSubmitPost = async () => {
if (isSaving) return;
setSaveError("");
@@ -722,9 +1134,26 @@ export default function MapView({
.filter(Boolean),
};
- if (useCustomImage && draftImage.trim()) {
- payload.image_small = draftImage.trim();
- payload.image_large = draftImage.trim();
+ if (draftUrl.trim()) {
+ payload.url = draftUrl.trim();
+ }
+ if (draftSource.trim()) {
+ payload.source = draftSource.trim();
+ }
+ if (draftPublishedAt.trim()) {
+ payload.published_at = draftPublishedAt.trim();
+ }
+
+ if (
+ draftImageSmall ||
+ draftImageMedium ||
+ draftImageLarge ||
+ (useCustomImage && draftImage.trim())
+ ) {
+ const fallback = draftImage.trim();
+ payload.image_small = (draftImageSmall || fallback).trim();
+ payload.image_medium = (draftImageMedium || fallback).trim();
+ payload.image_large = (draftImageLarge || fallback).trim();
}
const newPost = await createPost(payload, token);
@@ -789,6 +1218,18 @@ export default function MapView({
onPlaceTourWire={handleOpenCreate}
/>
+ {CLUSTERS_ENABLED && (
+
+ )}
)}
{createStep === 1 && (
+ {(draftImagePreview ||
+ draftImageLarge ||
+ draftImageMedium ||
+ draftImageSmall ||
+ draftImage) && (
+
+ 
+
+ )}
+
+ {draftSource ? {draftSource} : null}
+ {draftPublishedAt ? (
+ {formatPreviewDate(draftPublishedAt)}
+ ) : null}
+
+