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/usePackingListPanel.ts

@@ -32,7 +32,8 @@ export interface PackingListPanelProps {
   tripId: number
   items: PackingItem[]
   openImportSignal?: number
-  clearCheckedSignal?: number
+  // Raised by the Lists bar's Add list button, which opens the name field here.
+  addCategorySignal?: number
   saveTemplateSignal?: number
   inlineHeader?: boolean
   // Lifted so an out-of-panel Apply Template button knows the active view (#1565).
@@ -47,7 +48,7 @@ export interface PackingListPanelProps {
  * sections below render header, filters, the grouped list, the bag sidebar/
  * modal and the import dialog.
  */
-export function usePackingList({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true, view: viewProp, onViewChange }: PackingListPanelProps) {
+export function usePackingList({ tripId, items, openImportSignal = 0, addCategorySignal = 0, saveTemplateSignal = 0, inlineHeader = true, view: viewProp, onViewChange }: PackingListPanelProps) {
   const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
   // Three-tier sharing (#858): 'common' = the group pool (where existing items
   // live — non-breaking), 'personal' = my own list (private + shared-to-me).
@@ -298,7 +299,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const [showImportModal, setShowImportModal] = useState(false)
   const [importText, setImportText] = useState('')
   const lastHandledImportSignal = useRef(openImportSignal)
-  const lastHandledClearSignal = useRef(clearCheckedSignal)
+  const lastHandledAddCategorySignal = useRef(addCategorySignal)
   const lastHandledSaveSignal = useRef(saveTemplateSignal)
 
   useEffect(() => {
@@ -309,12 +310,11 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   }, [openImportSignal])
 
   useEffect(() => {
-    if (clearCheckedSignal !== lastHandledClearSignal.current && clearCheckedSignal > 0) {
-      handleClearChecked()
+    if (addCategorySignal !== lastHandledAddCategorySignal.current && addCategorySignal > 0) {
+      setAddingCategory(true)
     }
-    lastHandledClearSignal.current = clearCheckedSignal
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [clearCheckedSignal])
+    lastHandledAddCategorySignal.current = addCategorySignal
+  }, [addCategorySignal])
 
   useEffect(() => {
     if (saveTemplateSignal !== lastHandledSaveSignal.current && saveTemplateSignal > 0) {