Fix search result click and FAB positioning
- Fix setMainFilter/setSubFilter -> setMainFilters/setSubFilters (array state) - Move FABs lower on screen (top: 180px) - Add version indicator in footer - Fix search dropdown z-index 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
add2f20b39
commit
dac9f620d0
|
|
@ -240,7 +240,7 @@ export default function App() {
|
||||||
<footer className="sw-footer">
|
<footer className="sw-footer">
|
||||||
<div className="sw-footer-inner">
|
<div className="sw-footer-inner">
|
||||||
<div className="sw-footer-brand">SOCIOWIRE</div>
|
<div className="sw-footer-brand">SOCIOWIRE</div>
|
||||||
<div className="sw-footer-brand">© Sociowire v0.0010</div>
|
<div className="sw-footer-brand">© Sociowire v0.0016</div>
|
||||||
<div id="sw-weather-debug" style={{color: '#0ea5e9', fontSize: '10px'}}></div>
|
<div id="sw-weather-debug" style={{color: '#0ea5e9', fontSize: '10px'}}></div>
|
||||||
<nav className="sw-footer-nav" aria-label="Site">
|
<nav className="sw-footer-nav" aria-label="Site">
|
||||||
<a href="/">{t('nav.home')}</a>
|
<a href="/">{t('nav.home')}</a>
|
||||||
|
|
|
||||||
|
|
@ -632,7 +632,7 @@ export default function MapView({
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!bottomCategories.length) return;
|
if (!bottomCategories.length) return;
|
||||||
if (!subFilter || !bottomCategories.includes(subFilter)) setSubFilter("All");
|
if (!subFilter || !bottomCategories.includes(subFilter)) setSubFilters([]);
|
||||||
}, [mainFilter, bottomCategories, subFilter]);
|
}, [mainFilter, bottomCategories, subFilter]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -1045,8 +1045,12 @@ export default function MapView({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePickSuggestion = (item, { zoom }) => {
|
const handlePickSuggestion = (item, { zoom }) => {
|
||||||
|
console.log('[handlePickSuggestion] item:', item?.kind, item?.post_id, item?.coords);
|
||||||
const map = mapRef.current;
|
const map = mapRef.current;
|
||||||
if (!map) return;
|
if (!map) {
|
||||||
|
console.warn('[handlePickSuggestion] No map ref!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Extract coords from item
|
// Extract coords from item
|
||||||
let coords = null;
|
let coords = null;
|
||||||
|
|
@ -1068,8 +1072,8 @@ export default function MapView({
|
||||||
if (looksLikePost) {
|
if (looksLikePost) {
|
||||||
skipAutoZoomRef.current = true;
|
skipAutoZoomRef.current = true;
|
||||||
setSearchQuery("");
|
setSearchQuery("");
|
||||||
setMainFilter("All");
|
setMainFilters([]);
|
||||||
setSubFilter("All");
|
setSubFilters([]);
|
||||||
setTimeHours(336); // 2 weeks
|
setTimeHours(336); // 2 weeks
|
||||||
|
|
||||||
const postId = Number(raw?.post_id ?? raw?.id ?? item?.id ?? 0);
|
const postId = Number(raw?.post_id ?? raw?.id ?? item?.id ?? 0);
|
||||||
|
|
@ -1125,14 +1129,18 @@ export default function MapView({
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const tryOpen = async (attempt = 0) => {
|
const tryOpen = async (attempt = 0) => {
|
||||||
|
console.log('[tryOpen] attempt:', attempt, 'postId:', postId, 'rawUrl:', rawUrl);
|
||||||
let post = null;
|
let post = null;
|
||||||
if (Number.isFinite(postId) && postId > 0) {
|
if (Number.isFinite(postId) && postId > 0) {
|
||||||
post = await fetchPostById(postId);
|
post = await fetchPostById(postId);
|
||||||
|
console.log('[tryOpen] fetchPostById result:', post?.id, post?.title?.substring(0, 30));
|
||||||
}
|
}
|
||||||
if (!post && rawUrl) {
|
if (!post && rawUrl) {
|
||||||
post = await fetchPostByUrl(rawUrl);
|
post = await fetchPostByUrl(rawUrl);
|
||||||
|
console.log('[tryOpen] fetchPostByUrl result:', post?.id);
|
||||||
}
|
}
|
||||||
if (post) {
|
if (post) {
|
||||||
|
console.log('[tryOpen] Opening post:', post.id);
|
||||||
pendingOpenPostIdRef.current = null;
|
pendingOpenPostIdRef.current = null;
|
||||||
pendingOpenFullRef.current = false;
|
pendingOpenFullRef.current = false;
|
||||||
focusPost(post);
|
focusPost(post);
|
||||||
|
|
@ -1189,8 +1197,8 @@ export default function MapView({
|
||||||
skipAutoZoomRef.current = false;
|
skipAutoZoomRef.current = false;
|
||||||
setSearchQuery(q);
|
setSearchQuery(q);
|
||||||
if (q) {
|
if (q) {
|
||||||
setMainFilter("All");
|
setMainFilters([]);
|
||||||
setSubFilter("All");
|
setSubFilters([]);
|
||||||
setTimeHours(336);
|
setTimeHours(336);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -1203,8 +1211,8 @@ export default function MapView({
|
||||||
|
|
||||||
// Clear ALL filters to show all search results
|
// Clear ALL filters to show all search results
|
||||||
if (query.trim()) {
|
if (query.trim()) {
|
||||||
setMainFilter("All");
|
setMainFilters([]);
|
||||||
setSubFilter("All");
|
setSubFilters([]);
|
||||||
setTimeHours(336); // 2 weeks
|
setTimeHours(336); // 2 weeks
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
.fab-left,
|
.fab-left,
|
||||||
.fab-right {
|
.fab-right {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 120px;
|
top: 180px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -240,7 +240,7 @@ body[data-theme="light"] .fab-item.is-active {
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.fab-left,
|
.fab-left,
|
||||||
.fab-right {
|
.fab-right {
|
||||||
top: 100px;
|
top: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab-left {
|
.fab-left {
|
||||||
|
|
@ -289,7 +289,7 @@ body[data-theme="light"] .fab-item.is-active {
|
||||||
@supports (padding-top: env(safe-area-inset-top)) {
|
@supports (padding-top: env(safe-area-inset-top)) {
|
||||||
.fab-left,
|
.fab-left,
|
||||||
.fab-right {
|
.fab-right {
|
||||||
top: calc(120px + env(safe-area-inset-top));
|
top: calc(180px + env(safe-area-inset-top));
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab-left {
|
.fab-left {
|
||||||
|
|
|
||||||
|
|
@ -1053,20 +1053,22 @@ export function usePostsEngine({
|
||||||
const distKm = haversineKm(lastLat, lastLng, lat, lng);
|
const distKm = haversineKm(lastLat, lastLng, lat, lng);
|
||||||
|
|
||||||
const lastR = last.radiusKm || 0;
|
const lastR = last.radiusKm || 0;
|
||||||
const radiusChanged = !lastR || Math.abs(radiusKm - lastR) / Math.max(lastR, 1) >= 0.1;
|
const radiusChanged = !lastR || Math.abs(radiusKm - lastR) / Math.max(lastR, 1) >= 0.08;
|
||||||
|
|
||||||
let boundsChanged = false;
|
let boundsChanged = false;
|
||||||
if (last.bounds && bounds) {
|
if (last.bounds && bounds) {
|
||||||
const spanLat = Math.max(0.0001, Math.abs(last.bounds.maxLat - last.bounds.minLat));
|
const spanLat = Math.max(0.0001, Math.abs(last.bounds.maxLat - last.bounds.minLat));
|
||||||
const spanLon = Math.max(0.0001, Math.abs(last.bounds.maxLon - last.bounds.minLon));
|
const spanLon = Math.max(0.0001, Math.abs(last.bounds.maxLon - last.bounds.minLon));
|
||||||
|
// Lower threshold from 15% to 8% for more responsive updates
|
||||||
boundsChanged =
|
boundsChanged =
|
||||||
Math.abs(bounds.minLat - last.bounds.minLat) / spanLat > 0.15 ||
|
Math.abs(bounds.minLat - last.bounds.minLat) / spanLat > 0.08 ||
|
||||||
Math.abs(bounds.maxLat - last.bounds.maxLat) / spanLat > 0.15 ||
|
Math.abs(bounds.maxLat - last.bounds.maxLat) / spanLat > 0.08 ||
|
||||||
Math.abs(bounds.minLon - last.bounds.minLon) / spanLon > 0.15 ||
|
Math.abs(bounds.minLon - last.bounds.minLon) / spanLon > 0.08 ||
|
||||||
Math.abs(bounds.maxLon - last.bounds.maxLon) / spanLon > 0.15;
|
Math.abs(bounds.maxLon - last.bounds.maxLon) / spanLon > 0.08;
|
||||||
}
|
}
|
||||||
|
|
||||||
const minMoveKm = Math.max(2, radiusKm * 0.05);
|
// Cap minMoveKm at 10km so even at large zoom levels we refetch reasonably
|
||||||
|
const minMoveKm = Math.min(10, Math.max(2, radiusKm * 0.03));
|
||||||
|
|
||||||
if (!radiusChanged && !boundsChanged && distKm < minMoveKm) return;
|
if (!radiusChanged && !boundsChanged && distKm < minMoveKm) return;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -145,7 +145,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: calc(14px + var(--sw-wall-overlap, 0px));
|
bottom: 90px !important;
|
||||||
z-index: 300;
|
z-index: 300;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -240,6 +240,18 @@ body[data-theme="light"] .sw-icon-active .sw-icon-label{
|
||||||
|
|
||||||
/* SW_FILTER_ICON_VISIBILITY:END */
|
/* SW_FILTER_ICON_VISIBILITY:END */
|
||||||
|
|
||||||
|
/* VERSION INDICATOR */
|
||||||
|
body::after {
|
||||||
|
content: "© Sociowire v0.0011";
|
||||||
|
position: fixed;
|
||||||
|
bottom: 4px;
|
||||||
|
right: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
z-index: 99999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== THEME PILLS D / B / L : blanc sur fond noir comme les catégories ===== */
|
/* ===== THEME PILLS D / B / L : blanc sur fond noir comme les catégories ===== */
|
||||||
.sw-theme-toggle{
|
.sw-theme-toggle{
|
||||||
display:flex;
|
display:flex;
|
||||||
|
|
|
||||||
|
|
@ -177,7 +177,7 @@
|
||||||
transform:translateX(-50%);
|
transform:translateX(-50%);
|
||||||
max-width: min(980px, calc(100vw - 24px));
|
max-width: min(980px, calc(100vw - 24px));
|
||||||
width:100%;
|
width:100%;
|
||||||
z-index: 500; /* Au-dessus des filtres (z-index: 300) */
|
z-index: 10001; /* Au-dessus des filtres (z-index: 300) et du dropdown (9999) */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue