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/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>
+  );
+}