Add chip to home page for current city

apps/frontend/src/components/NearbyVenues.tsx

@@ -131,25 +131,46 @@ export default function NearbyVenues({
         )}
 
       {hasLocation && venues.length > 0 && (
-        <ul className="mt-3 striped-list venue-list">
-          {venues.map((venue) => (
-            <li key={venue.id}>
-              {venue.cityId ? (
+        <>
+          {venues[0].cityId && venues[0].cityName && (
+            <div className="flex flex-row flex-wrap items-start justify-between gap-3">
+              <h2 className="mt-1 text-lg">
                 <Link
-                  to="/$cityId/venues/$venueId"
-                  params={{ cityId: venue.cityId, venueId: venue.id }}
-                  className={rowClassName}
+                  to="/$cityId/venues"
+                  params={{ cityId: venues[0].cityId }}
+                  className="inline-block rounded-full p-3 outline-2 outline-(--harp-gold) bg-(--chip-bg) transition duration-200 hover:-translate-y-0.5 hover:outline-(--cream-head) focus-visible:outline-(--lagoon-deep)"
+                  style={{ textBox: 'trim-both ex alphabetic' }}
                 >
-                  <VenueRow venue={venue} timeZone={timeZone} />
+                  Show all venues in {venues[0].cityName}
                 </Link>
-              ) : (
-                <div className={rowClassName}>
-                  <VenueRow venue={venue} timeZone={timeZone} />
-                </div>
-              )}
-            </li>
-          ))}
-        </ul>
+              </h2>
+              <h3 className="mt-1 text-base">
+                Not in {venues[0].cityName}? Search for your city in the search
+                bar above!
+              </h3>
+            </div>
+          )}
+
+          <ul className="mt-3 striped-list venue-list">
+            {venues.map((venue) => (
+              <li key={venue.id}>
+                {venue.cityId ? (
+                  <Link
+                    to="/$cityId/venues/$venueId"
+                    params={{ cityId: venue.cityId, venueId: venue.id }}
+                    className={rowClassName}
+                  >
+                    <VenueRow venue={venue} timeZone={timeZone} />
+                  </Link>
+                ) : (
+                  <div className={rowClassName}>
+                    <VenueRow venue={venue} timeZone={timeZone} />
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        </>
       )}
     </section>
   )

apps/frontend/src/components/VenueCard.tsx

@@ -15,6 +15,7 @@ export function venueToSearchResult(current: venue): SearchResult {
   return {
     id: current.id,
     cityId: current.city.id,
+    cityName: current.city.name,
     type: 'venue',
     name: current.name,
     lat: current.lat,

apps/frontend/src/routes/index.tsx

@@ -59,6 +59,7 @@ const NEARBY_QUERY = `
       lon
       city {
         id
+        name
       }
       openingHours {
         days
@@ -110,6 +111,7 @@ function toSearchResult(venue: NearbyVenue): SearchResult {
   return {
     id: venue.id,
     cityId: venue.city.id,
+    cityName: venue.city.name,
     type: 'venue',
     name: venue.name,
     lat: venue.lat,

apps/frontend/src/test/fixtures.ts

@@ -37,6 +37,7 @@ export function makeSearchResult(
   return {
     id: 'venue-1',
     cityId: 'trondheim',
+    cityName: 'Trondheim',
     type: 'venue',
     name: 'Studentersamfundet',
     lat: 63.4228,

apps/frontend/src/types/search.ts

@@ -33,6 +33,7 @@ export interface SearchPriceSighting {
 export interface SearchResult {
   id: string
   cityId: string | null
+  cityName: string | null
   type: 'venue' | 'city'
   name: string
   lat: number

apps/frontend/src/types/venue.ts

@@ -53,7 +53,7 @@ export interface NearbyVenue {
   address: string
   lat: number
   lon: number
-  city: { id: string }
+  city: { id: string; name: string }
   openingHours: VenueOpeningHours[]
   openingHoursNotes: VenueOpeningHoursNote[]
   pricesSighted: VenuePriceSighting[]