refactor(packing): share the template row of the two apply template menus

ApplyTemplateButton and the packing list header drew the same template
row in their menus. PackingTemplateOption now draws it; the header's
faded hover stays a parameter (fade).

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -4,6 +4,7 @@ import { packingApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
+import { PackingTemplateOption } from './PackingTemplateOption'
 
 interface Template {
   id: number
@@ -79,23 +80,7 @@ export default function ApplyTemplateButton({ tripId, visibility, style, classNa
           }}
         >
           {templates.map(tmpl => (
-            <button type="button" key={tmpl.id} onClick={() => handleApply(tmpl.id)}
+            <PackingTemplateOption key={tmpl.id} name={tmpl.name} itemCount={tmpl.item_count} onClick={() => handleApply(tmpl.id)} t={t} />
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-                padding: '8px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
-                background: 'transparent', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)',
-              }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-            >
-              <Package size={13} className="text-content-faint" />
-              <div style={{ flex: 1, textAlign: 'start' }}>
-                <div style={{ fontWeight: 600 }}>{tmpl.name}</div>
-                <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>
-                  {tmpl.item_count} {t('admin.packingTemplates.items', { count: tmpl.item_count })}
-                </div>
-              </div>
-            </button>
           ))}
         </div>
       )}

client/src/components/Packing/PackingListPanelHeader.tsx

@@ -3,6 +3,7 @@ import {
 } from 'lucide-react'
 import type { PackingState } from './usePackingListPanel'
 import NameDialog from '../shared/NameDialog'
+import { PackingTemplateOption } from './PackingTemplateOption'
 
 export function PackingHeader(S: PackingState) {
   const {
@@ -63,22 +64,14 @@ export function PackingHeader(S: PackingState) {
                   boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 200,
                 }}>
                   {availableTemplates.map(tmpl => (
-                    <button type="button" key={tmpl.id} onClick={() => handleApplyTemplate(tmpl.id)}
+                    <PackingTemplateOption
-                      style={{
+                      key={tmpl.id}
-                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                      name={tmpl.name}
-                        padding: '8px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
+                      itemCount={tmpl.item_count}
-                        background: 'transparent', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)',
+                      onClick={() => handleApplyTemplate(tmpl.id)}
-                        transition: 'background 0.1s',
+                      t={t}
-                      }}
+                      fade
-                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+                    />
-                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-                    >
-                      <Package size={13} className="text-content-faint" />
-                      <div style={{ flex: 1, textAlign: 'start' }}>
-                        <div style={{ fontWeight: 600 }}>{tmpl.name}</div>
-                        <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>{tmpl.item_count} {t('admin.packingTemplates.items', { count: tmpl.item_count })}</div>
-                      </div>
-                    </button>
                   ))}
                 </div>
               )}

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

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+import { PackingTemplateOption } from './PackingTemplateOption';
+
+const t = (key: string, params?: Record<string, string | number | null>) =>
+  key === 'admin.packingTemplates.items' ? `items(${params?.count})` : key;
+
+describe('PackingTemplateOption', () => {
+  it('shows the template name over its item count', () => {
+    render(<PackingTemplateOption name="Beach" itemCount={12} onClick={vi.fn()} t={t} />);
+    expect(screen.getByText('Beach')).toBeInTheDocument();
+    expect(screen.getByText('12 items(12)')).toBeInTheDocument();
+  });
+
+  it('applies the template on click', () => {
+    const onClick = vi.fn();
+    render(<PackingTemplateOption name="Beach" itemCount={3} onClick={onClick} t={t} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('tints the row while hovered and clears it on leave', () => {
+    render(<PackingTemplateOption name="Beach" itemCount={3} onClick={vi.fn()} t={t} />);
+    const row = screen.getByRole('button');
+    fireEvent.mouseEnter(row);
+    expect(row.style.background).toBe('var(--bg-tertiary)');
+    fireEvent.mouseLeave(row);
+    expect(row.style.background).toBe('transparent');
+  });
+
+  it('fades the hover only when asked', () => {
+    const { unmount } = render(<PackingTemplateOption name="A" itemCount={1} onClick={vi.fn()} t={t} />);
+    expect(screen.getByRole('button').style.transition).toBe('');
+    unmount();
+    render(<PackingTemplateOption name="A" itemCount={1} onClick={vi.fn()} t={t} fade />);
+    expect(screen.getByRole('button').style.transition).toBe('background 0.1s');
+  });
+});

client/src/components/Packing/PackingTemplateOption.tsx

@@ -0,0 +1,46 @@
+import { Package } from 'lucide-react';
+import type { TranslationFn } from '../../types';
+
+interface PackingTemplateOptionProps {
+  name: string;
+  itemCount: number;
+  onClick: () => void;
+  t: TranslationFn;
+  /** Fade the hover background in rather than switching it. */
+  fade?: boolean;
+}
+
+/** One packing template in an apply menu: its name over how many items it adds. */
+export function PackingTemplateOption({ name, itemCount, onClick, t, fade = false }: PackingTemplateOptionProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        width: '100%',
+        padding: '8px 12px',
+        borderRadius: 8,
+        border: 'none',
+        cursor: 'pointer',
+        background: 'transparent',
+        fontFamily: 'inherit',
+        fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+        color: 'var(--text-primary)',
+        transition: fade ? 'background 0.1s' : undefined,
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--bg-tertiary)')}
+      onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+    >
+      <Package size={13} className="text-content-faint" />
+      <div style={{ flex: 1, textAlign: 'start' }}>
+        <div style={{ fontWeight: 600 }}>{name}</div>
+        <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>
+          {itemCount} {t('admin.packingTemplates.items', { count: itemCount })}
+        </div>
+      </div>
+    </button>
+  );
+}