fix: use translated series title in series indicator and fix cookie b… (#115)

* fix: use translated series title in series indicator and fix cookie banner safe area

* test: update MainLayout snapshot for cookie banner safe area padding

* fix: use distinct initial keys for image, embed, and gpx modals

Three sibling modals all started with key=0, triggering React duplicate key warnings.

Author: sauldeleon

apps/web/app/admin/(auth)/posts/components/PostEditor/PostEditor.tsx

@@ -247,8 +247,8 @@ export function PostEditor({
   const [isEmbedInsertModalOpen, setIsEmbedInsertModalOpen] = useState(false)
   const [isGpxModalOpen, setIsGpxModalOpen] = useState(false)
   const [imageModalKey, setImageModalKey] = useState(0)
-  const [embedModalKey, setEmbedModalKey] = useState(0)
-  const [gpxModalKey, setGpxModalKey] = useState(0)
+  const [embedModalKey, setEmbedModalKey] = useState(1)
+  const [gpxModalKey, setGpxModalKey] = useState(2)
   const [showPublishNotify, setShowPublishNotify] = useState(false)
   const [editingEmbed, setEditingEmbed] = useState<DetectedEmbed | null>(null)
   const [imageInitialValues, setImageInitialValues] =

apps/web/components/MainLayout/__snapshots__/MainLayout.spec.tsx.snap

@@ -907,7 +907,7 @@ exports[`MainLayout should render successfully 1`] = `
       </main>
       <div
         class="CookieConsent"
-        style="align-items: center; background: rgb(251, 251, 251); color: white; display: flex; flex-wrap: wrap; justify-content: space-between; left: 0px; position: fixed; width: 100%; z-index: 999; font-family: var(--font-roboto-mono); bottom: 0px;"
+        style="align-items: center; background: rgb(251, 251, 251); color: white; display: flex; flex-wrap: wrap; justify-content: space-between; left: 0px; position: fixed; width: 100%; z-index: 999; font-family: var(--font-roboto-mono); padding-bottom: max(env(safe-area-inset-bottom), 16px); bottom: 0px;"
       >
         <div
           class=""

apps/web/components/MainLayout/components/CookieBanner/CookieBanner.tsx

@@ -21,6 +21,7 @@ export function CookieBanner() {
         background: mainTheme.colors.white,
         fontFamily: mainTheme.fonts.bodyFont,
         alignItems: 'center',
+        paddingBottom: 'max(env(safe-area-inset-bottom), 16px)',
       }}
       acceptOnScroll
       acceptOnScrollPercentage={75}

apps/web/components/SeriesIndicator/SeriesIndicator.spec.tsx

@@ -21,6 +21,7 @@ const mockSeriesPost = (overrides: Record<string, unknown> = {}) => ({
   title: 'Part One',
   slug: 'part-one',
   seriesId: 'my-series',
+  seriesTitle: 'My Series Title',
   seriesOrder: 1,
   status: 'published' as const,
   category: 'engineering',
@@ -73,6 +74,37 @@ describe('SeriesIndicator', () => {
     expect(screen.getByText(/seriesIndicator\.heading/)).toBeInTheDocument()
   })
 
+  it('uses translated series title in heading, not raw series id', async () => {
+    mockGetPostsBySeries.mockResolvedValue([
+      mockSeriesPost({ seriesTitle: 'My Great Series' }),
+    ])
+    const result = await SeriesIndicator({
+      postId: '01JX002',
+      seriesId: 'my-series',
+      seriesOrder: null,
+      lng: 'en',
+    })
+    renderApp(result)
+    const heading = screen.getByText(/seriesIndicator\.heading/)
+    expect(heading.textContent).toContain('My Great Series')
+    expect(heading.textContent).not.toContain('my-series')
+  })
+
+  it('falls back to seriesId in heading when seriesTitle is null', async () => {
+    mockGetPostsBySeries.mockResolvedValue([
+      mockSeriesPost({ seriesTitle: null }),
+    ])
+    const result = await SeriesIndicator({
+      postId: '01JX002',
+      seriesId: 'my-series',
+      seriesOrder: null,
+      lng: 'en',
+    })
+    renderApp(result)
+    const heading = screen.getByText(/seriesIndicator\.heading/)
+    expect(heading.textContent).toContain('my-series')
+  })
+
   it('renders part label when seriesOrder is provided', async () => {
     mockGetPostsBySeries.mockResolvedValue([mockSeriesPost()])
     const result = await SeriesIndicator({

apps/web/components/SeriesIndicator/SeriesIndicator.tsx

@@ -21,7 +21,8 @@ export async function SeriesIndicator({
 
   if (seriesPosts.length === 0) return null
 
-  const heading = t('seriesIndicator.heading', { seriesId })
+  const seriesTitle = seriesPosts[0]?.seriesTitle ?? seriesId
+  const heading = t('seriesIndicator.heading', { seriesId: seriesTitle })
   const partLabel =
     seriesOrder != null
       ? t('seriesIndicator.part', { order: seriesOrder })