From 139c134bd88e9387143e4171bd8a070d7a968b7e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 6 Jul 2026 17:39:06 +0000
Subject: [PATCH] Show City, State at a glance in events viewer

The public events viewer displayed a venue place name with a caret
popover, but City and State were only visible after opening the popover.
Add an always-visible "City, State" line beneath the location trigger in
LocationPopover so users can scan an event's city and state without
clicking. Falls back to city-only or state-only, and is omitted when
neither is set.

Fixes #1098

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016s7MJjeP8Mr3KRiRA22WwJ
---
 .../LocationPopover.client.test.tsx           |  43 +++++++
 .../EventPreview/LocationPopover.tsx          | 105 ++++++++++--------
 2 files changed, 100 insertions(+), 48 deletions(-)
 create mode 100644 __tests__/client/components/LocationPopover.client.test.tsx

diff --git a/__tests__/client/components/LocationPopover.client.test.tsx b/__tests__/client/components/LocationPopover.client.test.tsx
new file mode 100644
index 000000000..b8f8cee0c
--- /dev/null
+++ b/__tests__/client/components/LocationPopover.client.test.tsx
@@ -0,0 +1,43 @@
+import { LocationPopover } from '@/components/EventPreview/LocationPopover'
+import type { Event } from '@/payload-types'
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+const buildLocation = (
+  overrides: Partial<NonNullable<Event['location']>> = {},
+): NonNullable<Event['location']> => ({
+  isVirtual: false,
+  placeName: 'Snoqualmie Pass Trailhead',
+  city: 'Snoqualmie Pass',
+  state: 'WA',
+  ...overrides,
+})
+
+describe('LocationPopover', () => {
+  it('shows City, State at a glance without opening the popover', () => {
+    render(<LocationPopover location={buildLocation()} />)
+
+    expect(screen.getByText('Snoqualmie Pass Trailhead')).toBeInTheDocument()
+    expect(screen.getByText('Snoqualmie Pass, WA')).toBeInTheDocument()
+  })
+
+  it('shows only the city when no state is set', () => {
+    render(<LocationPopover location={buildLocation({ state: null })} />)
+
+    expect(screen.getByText('Snoqualmie Pass')).toBeInTheDocument()
+  })
+
+  it('shows only the state when no city is set', () => {
+    render(<LocationPopover location={buildLocation({ city: null })} />)
+
+    expect(screen.getByText('WA')).toBeInTheDocument()
+  })
+
+  it('omits the City, State line when neither city nor state is set', () => {
+    render(<LocationPopover location={buildLocation({ city: null, state: null })} />)
+
+    // Only the placeName should remain as visible location text
+    expect(screen.getByText('Snoqualmie Pass Trailhead')).toBeInTheDocument()
+    expect(screen.queryByText(/,/)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/EventPreview/LocationPopover.tsx b/src/components/EventPreview/LocationPopover.tsx
index d1bd2a402..92488c06b 100644
--- a/src/components/EventPreview/LocationPopover.tsx
+++ b/src/components/EventPreview/LocationPopover.tsx
@@ -16,56 +16,65 @@ type LocationPopoverProps = {
 export const LocationPopover = ({ location }: LocationPopoverProps) => {
   const [isLocationOpen, setIsLocationOpen] = useState(false)
 
+  const cityState = [location.city, location.state].filter(Boolean).join(', ')
+
   return (
-    <Popover open={isLocationOpen} onOpenChange={setIsLocationOpen}>
-      <PopoverTrigger className="min-w-0 max-w-full">
-        <div className="flex items-center gap-1.5 min-w-0 text-muted-foreground">
-          <MapPin className="h-4 w-4 mt-0.5 " />
-          <p className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 text-sm ">
-            {location.placeName}
-          </p>
-          <ChevronDown
-            className={cn(
-              'h-4 w-4 flex-shrink-0 transition-transform duration-200',
-              isLocationOpen && 'rotate-180',
-            )}
-          />
-        </div>
-      </PopoverTrigger>
-      <PopoverContent align="start" className="p-3 text-sm w-auto min-w-[200px]">
-        <div className="select-text mb-2">
-          {location.address && <div>{location.address}</div>}
-          <div>
-            {location.city && `${location.city}, `}
-            {location.state && `${location.state} `}
-            {location.zip}
+    <div className="flex flex-col min-w-0">
+      <Popover open={isLocationOpen} onOpenChange={setIsLocationOpen}>
+        <PopoverTrigger className="min-w-0 max-w-full">
+          <div className="flex items-center gap-1.5 min-w-0 text-muted-foreground">
+            <MapPin className="h-4 w-4 mt-0.5 " />
+            <p className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 text-sm ">
+              {location.placeName}
+            </p>
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 flex-shrink-0 transition-transform duration-200',
+                isLocationOpen && 'rotate-180',
+              )}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="p-3 text-sm w-auto min-w-[200px]">
+          <div className="select-text mb-2">
+            {location.address && <div>{location.address}</div>}
+            <div>
+              {location.city && `${location.city}, `}
+              {location.state && `${location.state} `}
+              {location.zip}
+            </div>
           </div>
-        </div>
-        <div className="flex gap-2">
-          <CopyButton
-            text={[
-              location.address,
-              [location.city, location.state, location.zip].filter(Boolean).join(' '),
-            ]
-              .filter(Boolean)
-              .join(', ')}
-            className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
-          />
-          <a
-            href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
-              [location.address, location.city, location.state, location.zip]
+          <div className="flex gap-2">
+            <CopyButton
+              text={[
+                location.address,
+                [location.city, location.state, location.zip].filter(Boolean).join(' '),
+              ]
                 .filter(Boolean)
-                .join(', '),
-            )}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
-          >
-            <ExternalLink className="h-3 w-3" />
-            Open in Maps
-          </a>
-        </div>
-      </PopoverContent>
-    </Popover>
+                .join(', ')}
+              className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
+            />
+            <a
+              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
+                [location.address, location.city, location.state, location.zip]
+                  .filter(Boolean)
+                  .join(', '),
+              )}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
+            >
+              <ExternalLink className="h-3 w-3" />
+              Open in Maps
+            </a>
+          </div>
+        </PopoverContent>
+      </Popover>
+      {cityState && (
+        <p className="text-sm text-muted-foreground pl-[22px] whitespace-nowrap overflow-hidden text-ellipsis">
+          {cityState}
+        </p>
+      )}
+    </div>
   )
 }