feat(ui): Costs bar like the other tabs, desktop packing list in the phone's look

The Costs tab opens with the same bar as Transports, Bookings, Lists and
Files: the tab's name, the trip's dates and days in one pill, the
travelers, and Settle up and Add expense on the right.

The desktop packing list takes the phone's look without losing anything
it shows. Category cards get a tinted head band, rows get hairlines and
filled checkboxes, owner, quantity and weight read as small badges, and
the bin and a menu with Move to List, Sharing, Rename and Delete replace
the row of icons. What a row does not use stays dimmed until hover or
focus, so nothing leaves a gap. A click on the name renames, ticked
items too. Add item opens a composer shaped like the next row, Add list
moved into the Lists bar, Add list and Save as template ask for the name
in a dialog, and Remove checked sits beside the progress bar. The Bags
panel becomes a card, and the item menu, the bag picker, the list menu
and the bag member picker share one popover look and close on a click
beside them.

Help center pictures for Costs and Lists are re-rendered, the Lists
guide texts follow the new controls in all 27 languages, and the wiki
pages are updated. The phone screens are unchanged.

client/src/components/Packing/PackingShareControl.test.tsx

@@ -282,3 +282,37 @@ describe('PackingShareControl — optional fields', () => {
     expect(onJoin).toHaveBeenCalledWith(8)
   })
 })
+
+describe('PackingShareControl — menu variant', () => {
+  function setupMenu(it_: PackingItem, currentUserId = 1) {
+    const handlers = { onSetSharing: vi.fn(), onClone: vi.fn(), onJoin: vi.fn(), onLeave: vi.fn(), onAction: vi.fn() }
+    render(<PackingShareControl variant="menu" item={it_} tripMembers={MEMBERS} currentUserId={currentUserId} {...handlers} />)
+    return handlers
+  }
+
+  it('FE-W6PSC-001: the owner gets one whole line naming the current tier', () => {
+    setupMenu(item())
+    const line = screen.getByText('Sharing').closest('button')!
+
+    expect(line).toHaveTextContent('Shared')
+    fireEvent.click(line)
+    expect(screen.getByText(/^Personal$/)).toBeInTheDocument()
+  })
+
+  it('FE-W6PSC-002: someone else pledges or copies from full lines, and the menu closes after', () => {
+    const h = setupMenu(item({ owner_id: 2 }))
+
+    fireEvent.click(screen.getByRole('button', { name: 'I can bring that too' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Copy to my list' }))
+    expect(h.onJoin).toHaveBeenCalledWith(5)
+    expect(h.onClone).toHaveBeenCalledWith(5)
+    expect(h.onAction).toHaveBeenCalledTimes(2)
+  })
+
+  it('FE-W6PSC-003: a co-bringer takes the pledge back from the same line', () => {
+    const h = setupMenu(item({ owner_id: 2, contributors: [{ user_id: 1, username: 'ada' }] } as Partial<PackingItem>))
+
+    fireEvent.click(screen.getByRole('button', { name: "I'm not bringing it" }))
+    expect(h.onLeave).toHaveBeenCalledWith(5, 1)
+  })
+})