feat(help): rewrite the help center for v5 with a Tours section, new pictures in every language, and fix the tour planner bugs it surfaced

Every help screen checked against the v5 redesign. Tours is documented for
the first time, as a screen of its own with twelve screens under it, and
notifications get help of their own. All pictures are taken again on a
realistic demo trip, with short loops where a still cannot show the motion.
The English is plain and every language is written naturally rather than
word for word.

The switcher shows two levels at most, a screen's overview lists its
sub-screens as cards above its guides, each wiki page is linked once, and
the help sidebar is wider.

Fixes found along the way: Save to Collection keeps a tour's route, a track
dropped on the places column opens the Tours import, tour Share on desktop,
the unsaved tour draft lives on the account, a route click no longer adds
an end point, Trip places leaves the trip's tours out, Escape closes a
stage's day menu, confirms before destructive deletes, DWD warnings sharing
one id kept apart, a booking's date moves with it, and smaller fixes across
notifications, bookings, the day plan, stays, Atlas, Collections, Vacay and
the admin screens.

client/src/components/Help/HelpPanel.test.tsx

@@ -59,7 +59,7 @@ describe('HelpPanel', () => {
     fireEvent.click(screen.getAllByRole('button', { name: /Create a trip/ })[0])
     expect(screen.getByRole('heading', { level: 1, name: 'Create a trip' })).toBeInTheDocument()
     expect(screen.getByText(/Click Create New Trip\./)).toBeInTheDocument()
-    expect(screen.getByText(/takes over the boarding pass/)).toBeInTheDocument()
+    expect(screen.getByText(/shown in the boarding pass at the top/)).toBeInTheDocument()
     expect(screen.getByText(/Dates can be changed later/)).toBeInTheDocument()
     // A picture for every step.
     expect(screen.getAllByRole('button', { name: /Step \d of/ })).toHaveLength(5)
@@ -122,7 +122,7 @@ describe('HelpPanel', () => {
     expect(screen.getByRole('heading', { level: 1, name: 'Create a trip' })).toBeInTheDocument()
   })
 
-  it('lists the sub-screens of a screen folded on its overview and in the nav, and offers the way into the screen', () => {
+  it('lists the sub-screens of a screen open on its overview and in the nav, and offers the way into the screen', () => {
     render(
       <>
         <HelpButton />
@@ -131,26 +131,35 @@ describe('HelpPanel', () => {
       </>,
     )
     fireEvent.click(screen.getByRole('button', { name: 'Help for this screen' }))
-    // Folded: the names are listed in one line, the cards are not there yet.
-    const nav = screen.getByRole('navigation', { name: 'Help' })
-    const fold = screen.getAllByRole('button', { name: /Sub-screens/ }).find(b => !nav.contains(b))!
-    expect(fold).toHaveAttribute('aria-expanded', 'false')
-    expect(screen.queryByRole('button', { name: /Appearance.*guides/ })).toBeNull()
-    fireEvent.click(fold)
-    expect(fold).toHaveAttribute('aria-expanded', 'true')
+    // In view straight away: each sub-screen holds guides of its own, and a fold hid them.
     fireEvent.click(screen.getByRole('button', { name: /Appearance.*guides/ }))
     expect(useHelpStore.getState().browseId).toBe('settings-appearance')
     expect(screen.getByRole('heading', { level: 1, name: 'Appearance' })).toBeInTheDocument()
-    // On a tab, the nav lists its siblings with the shown one marked, and the header leads into the tab.
-    // The nav folds them too; open it, then the siblings are listed with the shown one marked.
+    // On a tab, the nav lists its siblings, open, with the shown one marked, and the header leads into the tab.
     // (The overview entry is also named "Appearance"; the sibling rows are the ones under "Sub-screens".)
-    fireEvent.click(within(nav).getByRole('button', { name: /Sub-screens/ }))
+    const nav = screen.getByRole('navigation', { name: 'Help' })
+    expect(within(nav).getByRole('button', { name: /Sub-screens/ })).toHaveAttribute('aria-expanded', 'true')
     const rows = within(nav).getAllByRole('button', { name: 'Appearance' })
     expect(rows.some(b => b.getAttribute('aria-current') === 'page')).toBe(true)
     expect(within(nav).getByRole('button', { name: 'Map' })).toBeInTheDocument()
     expect(screen.getByRole('link', { name: 'Go to Appearance' })).toHaveAttribute('href', '/settings?tab=appearance')
   })
 
+  it('links each docs page once, however many of its sections the screen names', () => {
+    render(
+      <>
+        <HelpButton />
+        <HelpAnchor id="trip-tour-planner" />
+        <HelpPanel />
+      </>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Help for this screen' }))
+    const hrefs = screen.getAllByRole('link').map(a => a.getAttribute('href') ?? '').filter(h => h.startsWith('/help/'))
+    const pages = hrefs.map(h => h.split('#')[0])
+    expect(pages.length).toBeGreaterThan(0)
+    expect(new Set(pages).size).toBe(pages.length)
+  })
+
   it('says so when nothing matches', async () => {
     mount()
     fireEvent.click(screen.getByRole('button', { name: 'Help for this screen' }))