picture

2026-01-03 16:40:32 -05:00 · 2026-01-03 16:40:32 -05:00 · d4829ae628
parent da1af00aaa
commit d4829ae628
3 changed files with 89 additions and 125 deletions
--- a/src/api/client.js
+++ b/src/api/client.js
@ -175,10 +175,28 @@ export async function fetchPosts(filters = {}) {
  if (filters.subCategory) params.set("sub_category", filters.subCategory);
  if (filters.time) params.set("time", filters.time);
  if (filters.username) params.set("username", filters.username);
-  if (typeof filters.lat === "number") params.set("lat", String(filters.lat));
-  if (typeof filters.lon === "number") params.set("lon", String(filters.lon));
+
+  // Validate and set lat/lon with proper bounds checking
+  if (typeof filters.lat === "number") {
+    if (filters.lat >= -90 && filters.lat <= 90) {
+      params.set("lat", String(filters.lat));
+    } else {
+      console.warn("Invalid latitude value (must be -90 to 90):", filters.lat);
+    }
+  }
+  if (typeof filters.lon === "number") {
+    if (filters.lon >= -180 && filters.lon <= 180) {
+      params.set("lon", String(filters.lon));
+    } else {
+      console.warn("Invalid longitude value (must be -180 to 180):", filters.lon);
+    }
+  }
  if (typeof filters.radiusKm === "number") {
+    if (filters.radiusKm > 0 && filters.radiusKm <= 20000) {
      params.set("radius_km", String(filters.radiusKm));
+    } else {
+      console.warn("Invalid radius value (must be > 0 and <= 20000 km):", filters.radiusKm);
+    }
  }
  if (typeof filters.limit === "number" && filters.limit > 0) {
    params.set("limit", String(filters.limit));
--- a/src/components/Map/MapView.jsx
+++ b/src/components/Map/MapView.jsx
@ -1279,7 +1279,7 @@ export default function MapView({
      if (!imageTouched) {
        if (image && !isPlaceholder) {
          setUseCustomImage(true);
-          if (!draftImageFile && !draftImagePreview) {
+          if (!draftImageFile && (!draftImagePreview || draftImagePreview === LINK_PREVIEW_PLACEHOLDER)) {
            addMediaUrlToGallery(image);
          }
        } else {
@ -1456,10 +1456,10 @@ export default function MapView({
  const galleryItems = draftMediaUrls.filter(
    (url) => url && url !== LINK_PREVIEW_PLACEHOLDER
  );
-  const galleryThumbnails = galleryItems.slice(
-    galleryPreviewImage ? 1 : 0
-  );
+  const hasCustomImages = galleryItems.length > 0;
  const isLinkMode = contentMode === "link";
+  const shouldShowPreviewCard = isLinkMode;
+  const galleryThumbnails = shouldShowPreviewCard ? galleryItems.slice(1) : galleryItems;

  return (
    <div className="map-page">
@ -1712,17 +1712,22 @@ export default function MapView({
                )}
                {createStep === 2 && (
                  <>
-                {galleryPreviewImage && (
-                  <div className="create-link-preview create-link-preview-tight">
-                    <img src={galleryPreviewImage} alt="Link preview" />
+                    {shouldShowPreviewCard && (
+                      <div className="create-link-preview-card">
+                        <img
+                          src={galleryPreviewImage || LINK_PREVIEW_PLACEHOLDER}
+                          alt="Post preview"
+                        />
                        <div className="create-link-preview-meta">
                          {draftSource ? <span>{draftSource}</span> : null}
                          {draftPublishedAt ? (
                            <span>{formatPreviewDate(draftPublishedAt)}</span>
                          ) : null}
                        </div>
+                      </div>
+                    )}
                    {galleryThumbnails.length > 0 && (
-                      <div className="create-gallery-row">
+                      <div className="create-gallery-row create-gallery-row--bottom">
                        {galleryThumbnails.map((url, idx) => (
                          <figure
                            key={`${url}-${idx}`}
@ -1732,8 +1737,6 @@ export default function MapView({
                          </figure>
                        ))}
                      </div>
-                    )}
-                  </div>
                    )}
                    <textarea
                      className="create-textarea create-textarea-tight"
@ -1802,21 +1805,8 @@ export default function MapView({
                            <span className="create-uploading">Uploading...</span>
                          )}
                        </div>
-                        {draftImagePreview && (
-                          <div className="create-image-preview-row">
-                            <img src={draftImagePreview} alt="Preview" />
-                            <button
-                              type="button"
-                              onClick={() => {
-                                setDraftImageFile(null);
-                                setDraftImagePreview("");
-                                setDraftImage("");
-                              }}
-                            >
-                              Remove
-                            </button>
-                          </div>
-                        )}
+                        {!hasCustomImages && (
+                          <>
                        <div className="create-muted">Or paste an image URL:</div>
                        <div className="create-image-url-row">
                          <input
@ -1838,6 +1828,8 @@ export default function MapView({
                            Add
                          </button>
                        </div>
+                      </>
+                    )}
                      </div>
                    )}
                  </>
--- a/src/styles/map.css
+++ b/src/styles/map.css
@ -744,26 +744,6 @@
  font-size:.7rem;
  color:#38bdf8;
 }
-.create-image-preview-row{
-  display:flex;
-  align-items:center;
-  gap:.5rem;
-}
-.create-image-preview-row img{
-  width:44px;
-  height:44px;
-  border-radius:8px;
-  object-fit:cover;
-  border:1px solid rgba(148, 163, 184, 0.5);
-}
-.create-image-preview-row button{
-  background:transparent;
-  border:1px solid rgba(148, 163, 184, 0.4);
-  color:#e2e8f0;
-  padding:.2rem .45rem;
-  border-radius:999px;
-  font-size:.68rem;
-}
 .create-image-gallery{
  display:flex;
  flex-direction:column;
@ -813,14 +793,20 @@
 }
 .create-gallery-row{
  display:flex;
-  gap:.35rem;
-  margin-top:.6rem;
+  gap:0;
+  margin-top:.1rem;
  overflow-x:auto;
-  padding-bottom:.25rem;
+  padding-bottom:.05rem;
+}
+.create-gallery-row figure{
+  margin:0;
+}
+.create-gallery-row--bottom{
+  margin-bottom:.2rem;
 }
 .create-gallery-static{
-  width:48px;
-  height:48px;
+  width:44px;
+  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.3);
  overflow:hidden;
@ -832,40 +818,25 @@
  object-fit:cover;
  display:block;
 }
-.create-link-preview{
+.create-link-preview-card{
  position:relative;
-  overflow:hidden;
  border-radius:18px;
-  background:rgba(15,23,42,0.8);
-  box-shadow:0 20px 40px rgba(2,6,23,0.45);
+  background:rgba(15,23,42,0.85);
+  border:1px solid rgba(148,163,184,0.4);
+  box-shadow:0 20px 40px rgba(2,6,23,0.35);
+  padding:.35rem;
+  display:flex;
+  flex-direction:column;
+  gap:.45rem;
+  margin-bottom:.5rem;
 }
-.create-link-preview-tight img{
+.create-link-preview-card img{
  width:100%;
-  height:200px;
+  height:140px;
+  border-radius:14px;
  object-fit:cover;
+  border:1px solid rgba(148,163,184,0.5);
  display:block;
-  border-bottom:1px solid rgba(255,255,255,0.1);
-}
-.create-gallery-overlay{
-  position:absolute;
-  left:12px;
-  right:12px;
-  bottom:12px;
-  padding-bottom:0;
-  background:rgba(15,23,42,0.35);
-  border-radius:999px;
-  justify-content:flex-start;
-}
-.create-gallery-overlay .create-gallery-item{
-  width:40px;
-  height:40px;
-}
-.create-gallery-overlay .create-gallery-remove{
-  top:-4px;
-  right:-4px;
-  width:18px;
-  height:18px;
-  font-size:10px;
 }
 .create-image-url-row{
  display:flex;
@ -882,23 +853,6 @@
  font-weight:700;
  cursor:pointer;
 }
-.create-link-preview{
-  display:flex;
-  align-items:center;
-  gap:.65rem;
-  padding:.45rem .6rem;
-  border-radius:12px;
-  border:1px solid rgba(148, 163, 184, 0.35);
-  background:rgba(15, 23, 42, 0.55);
-  margin-bottom:.6rem;
-}
-.create-link-preview img{
-  width:58px;
-  height:58px;
-  border-radius:10px;
-  object-fit:cover;
-  border:1px solid rgba(148, 163, 184, 0.5);
-}
 .create-link-preview-meta{
  display:flex;
  flex-direction:column;