Major refactor

ui/src/components/MapList.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import type { GridMap } from '../types';
+import './MapList.css';
+
+interface Props {
+  maps: GridMap[];
+  selectedMapId: string | null;
+  onSelect: (id: string) => void;
+  onCreate: (name: string) => void;
+  onDelete: (id: string) => void;
+}
+
+export default function MapList({ maps, selectedMapId, onSelect, onCreate, onDelete }: Props) {
+  const [newName, setNewName] = useState('');
+
+  function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    const name = newName.trim();
+    if (!name) return;
+    onCreate(name);
+    setNewName('');
+  }
+
+  function handleDeleteClick(e: React.MouseEvent, id: string) {
+    e.stopPropagation();
+    if (confirm('Delete this map? This cannot be undone.')) {
+      onDelete(id);
+    }
+  }
+
+  return (
+    <aside className="map-list">
+      <div className="map-list-header">
+        <h2>Maps</h2>
+      </div>
+
+      <form className="map-create-form" onSubmit={handleCreate}>
+        <input
+          type="text"
+          placeholder="New map name…"
+          value={newName}
+          onChange={e => setNewName(e.target.value)}
+        />
+        <button type="submit" disabled={!newName.trim()}>+</button>
+      </form>
+
+      <ul className="map-entries">
+        {maps.length === 0 && (
+          <li className="map-empty">No maps yet</li>
+        )}
+        {maps.map(map => (
+          <li
+            key={map.id}
+            className={`map-entry ${map.id === selectedMapId ? 'selected' : ''}`}
+            onClick={() => onSelect(map.id)}
+          >
+            <span className="map-name">{map.name}</span>
+            <button
+              className="map-delete"
+              onClick={e => handleDeleteClick(e, map.id)}
+              title="Delete map"
+            >
+              Delete️
+            </button>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  );
+}