feat(web): implement Ship List page with create and delete modals

Adds ship cards with navigation, create ship modal with initial stats,
inline delete confirmation, and supporting CSS for modals and cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/components/ships/CreateShipModal.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import Modal from '../ui/Modal';
+import { useShipsList } from '../../store/use-ships-list';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function CreateShipModal({ open, onClose }: Props) {
+  const [name, setName] = useState('');
+  const [hullMax, setHullMax] = useState('0');
+  const [armorMax, setArmorMax] = useState('0');
+  const [ac, setAc] = useState('10');
+  const [submitting, setSubmitting] = useState(false);
+  const createShip = useShipsList((s) => s.createShip);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setSubmitting(true);
+    try {
+      const hMax = parseInt(hullMax) || 0;
+      const aMax = parseInt(armorMax) || 0;
+      await createShip({
+        name: name.trim(),
+        hull_max: hMax,
+        hull_current: hMax,
+        armor_max: aMax,
+        armor_current: aMax,
+        ac: parseInt(ac) || 10,
+      });
+      setName('');
+      setHullMax('0');
+      setArmorMax('0');
+      setAc('10');
+      onClose();
+    } catch {
+      // Error handled by store
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose} title="Create Ship">
+      <form onSubmit={handleSubmit} className="modal-form">
+        <label className="form-label">
+          Ship Name *
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. Astral Clipper"
+            autoFocus
+            required
+          />
+        </label>
+        <label className="form-label">
+          Hull Max
+          <input
+            type="number"
+            value={hullMax}
+            onChange={(e) => setHullMax(e.target.value)}
+            min="0"
+          />
+        </label>
+        <label className="form-label">
+          Armor Max
+          <input
+            type="number"
+            value={armorMax}
+            onChange={(e) => setArmorMax(e.target.value)}
+            min="0"
+          />
+        </label>
+        <label className="form-label">
+          AC
+          <input
+            type="number"
+            value={ac}
+            onChange={(e) => setAc(e.target.value)}
+            min="0"
+          />
+        </label>
+        <div className="modal-actions">
+          <button type="button" className="btn-secondary" onClick={onClose}>
+            Cancel
+          </button>
+          <button type="submit" className="btn-primary" disabled={submitting || !name.trim()}>
+            {submitting ? 'Creating...' : 'Create Ship'}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

web/src/components/ships/ShipCard.tsx

@@ -0,0 +1,43 @@
+import { useNavigate } from 'react-router-dom';
+import type { ShipListItem } from '../../types/ship';
+
+interface Props {
+  ship: ShipListItem;
+  onDelete: (id: string) => void;
+}
+
+export default function ShipCard({ ship, onDelete }: Props) {
+  const navigate = useNavigate();
+
+  const timeAgo = formatTimeAgo(ship.updated_at);
+
+  return (
+    <div className="ship-card" onClick={() => navigate(`/ship/${ship.id}`)}>
+      <div className="ship-card-info">
+        <span className="ship-card-name">{ship.name}</span>
+        <span className="ship-card-updated">{timeAgo}</span>
+      </div>
+      <button
+        className="btn-icon ship-card-delete"
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete(ship.id);
+        }}
+        title="Delete ship"
+      >
+        &#128465;
+      </button>
+    </div>
+  );
+}
+
+function formatTimeAgo(timestamp: number): string {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}

web/src/components/ui/Modal.tsx

@@ -0,0 +1,35 @@
+import { useEffect, type ReactNode } from 'react';
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+}
+
+export default function Modal({ open, onClose, title, children }: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">{title}</h2>
+          <button className="btn-icon" onClick={onClose}>
+            &times;
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}