From fc7c2d5adc44499066dbb127f8ef270c3234a9bc Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 6 Nov 2025 14:03:58 +0000
Subject: [PATCH] Refactor park detail address display

Implement the plan to refactor the address display in the park detail page. This includes updating the sidebar address to show the street address on its own line, followed by city, state, and postal code on the next line, and the country on a separate line. This change aims to create a more compact and natural address format.
---
 src/components/homepage/FeaturedParks.tsx     |  3 ++-
 .../moderation/displays/RichParkDisplay.tsx   |  2 ++
 src/components/parks/ParkCard.tsx             |  3 ++-
 src/components/search/SearchResults.tsx       |  3 ++-
 src/pages/ParkDetail.tsx                      | 27 ++++++++++++++-----
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/homepage/FeaturedParks.tsx b/src/components/homepage/FeaturedParks.tsx
index 1da67649..9fa2a21a 100644
--- a/src/components/homepage/FeaturedParks.tsx
+++ b/src/components/homepage/FeaturedParks.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Star, TrendingUp, Award, Castle, FerrisWheel, Waves, Tent, LucideIcon } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -82,7 +83,7 @@ export function FeaturedParks() {
             
             {park.location && (
               <p className="text-sm text-muted-foreground">
-                {park.location.city}, {park.location.country}
+                {formatLocationShort(park.location)}
               </p>
             )}
 
diff --git a/src/components/moderation/displays/RichParkDisplay.tsx b/src/components/moderation/displays/RichParkDisplay.tsx
index 0adf7155..ed81a473 100644
--- a/src/components/moderation/displays/RichParkDisplay.tsx
+++ b/src/components/moderation/displays/RichParkDisplay.tsx
@@ -109,9 +109,11 @@ export function RichParkDisplay({ data, actionType, showAllFields = true }: Rich
             <span className="text-sm font-semibold text-foreground">Location</span>
           </div>
           <div className="text-sm space-y-1 ml-6">
+            {location.street_address && <div><span className="text-muted-foreground">Street:</span> <span className="font-medium">{location.street_address}</span></div>}
             {location.city && <div><span className="text-muted-foreground">City:</span> <span className="font-medium">{location.city}</span></div>}
             {location.state_province && <div><span className="text-muted-foreground">State/Province:</span> <span className="font-medium">{location.state_province}</span></div>}
             {location.country && <div><span className="text-muted-foreground">Country:</span> <span className="font-medium">{location.country}</span></div>}
+            {location.postal_code && <div><span className="text-muted-foreground">Postal Code:</span> <span className="font-medium">{location.postal_code}</span></div>}
             {location.formatted_address && (
               <div className="text-xs text-muted-foreground mt-2">{location.formatted_address}</div>
             )}
diff --git a/src/components/parks/ParkCard.tsx b/src/components/parks/ParkCard.tsx
index 1cf213e8..575f737d 100644
--- a/src/components/parks/ParkCard.tsx
+++ b/src/components/parks/ParkCard.tsx
@@ -1,4 +1,5 @@
 import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { useNavigate } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -102,7 +103,7 @@ export function ParkCard({ park }: ParkCardProps) {
           <div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
             <MapPin className="w-3 h-3 flex-shrink-0" />
             <span className="truncate">
-              {park.location.city && `${park.location.city}, `}{park.location.country}
+              {formatLocationShort(park.location)}
             </span>
           </div>
         )}
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index d6b0c2e3..455f1af8 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useDebouncedValue } from '@/hooks/useDebouncedValue';
 import { useGlobalSearch } from '@/hooks/search/useGlobalSearch';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -87,7 +88,7 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
     switch (result.type) {
       case 'park':
         const park = result.data as Park;
-        return park.location ? `${park.location.city}, ${park.location.country}` : 'Theme Park';
+        return park.location ? formatLocationShort(park.location) : 'Theme Park';
       case 'ride':
         const ride = result.data as Ride;
         return ride.park && typeof ride.park === 'object' && 'name' in ride.park 
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index a2e048c6..42e1ca6c 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -9,6 +9,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Separator } from '@/components/ui/separator';
 import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent, Plus } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { useAuth } from '@/hooks/useAuth';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { RideCard } from '@/components/rides/RideCard';
@@ -248,7 +249,7 @@ export default function ParkDetail() {
                   </h1>
                   {park.location && <div className="flex items-center text-white/90 text-lg">
                       <MapPin className="w-5 h-5 mr-2" />
-                      {park.location.city && `${park.location.city}, `}{park.location.country}
+                      {formatLocationShort(park.location)}
                     </div>}
                   <div className="mt-3">
                     <VersionIndicator 
@@ -470,11 +471,25 @@ export default function ParkDetail() {
                           <div className="text-sm text-muted-foreground">
                             <div className="font-medium text-foreground mb-1">Address:</div>
                             <div className="space-y-1">
-                              {park.location.name && <div>{park.location.name}</div>}
-                              {park.location.city && <div>{park.location.city}</div>}
-                              {park.location.state_province && <div>{park.location.state_province}</div>}
-                              {park.location.postal_code && <div>{park.location.postal_code}</div>}
-                              <div>{park.location.country}</div>
+                              {/* Street Address on its own line if it exists */}
+                              {park.location.street_address && (
+                                <div>{park.location.street_address}</div>
+                              )}
+                              
+                              {/* City, State Postal on same line */}
+                              {(park.location.city || park.location.state_province || park.location.postal_code) && (
+                                <div>
+                                  {park.location.city}
+                                  {park.location.city && park.location.state_province && ', '}
+                                  {park.location.state_province}
+                                  {park.location.postal_code && ` ${park.location.postal_code}`}
+                                </div>
+                              )}
+                              
+                              {/* Country on its own line */}
+                              {park.location.country && (
+                                <div>{park.location.country}</div>
+                              )}
                             </div>
                           </div>