picture

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));

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(
+  const hasCustomImages = galleryItems.length > 0;
-    galleryPreviewImage ? 1 : 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 && (
+                    {shouldShowPreviewCard && (
-                  <div className="create-link-preview create-link-preview-tight">
+                      <div className="create-link-preview-card">
-                    <img src={galleryPreviewImage} alt="Link preview" />
+                        <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 && (
+                        {!hasCustomImages && (
-                          <div className="create-image-preview-row">
+                          <>
-                            <img src={draftImagePreview} alt="Preview" />
-                            <button
-                              type="button"
-                              onClick={() => {
-                                setDraftImageFile(null);
-                                setDraftImagePreview("");
-                                setDraftImage("");
-                              }}
-                            >
-                              Remove
-                            </button>
-                          </div>
-                        )}
                         <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>
                     )}
                   </>

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;
+  gap:0;
-  margin-top:.6rem;
+  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;
+  width:44px;
-  height:48px;
+  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);
+  background:rgba(15,23,42,0.85);
-  box-shadow:0 20px 40px rgba(2,6,23,0.45);
+  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;