Add reconnect UI, disconnect button, and visual cleanup

- Redesign disconnect overlay as a full-screen modal with dark backdrop
- Add working Reconnect button that properly re-establishes WebSocket connection
- Add Disconnect button in Settings for testing
- Separate disconnect and ban/kick codepaths (no reconnect on ban)
- Log disconnect notice in IC log using hrtext style
- Refactor area list rendering from client state (renderAreaList)
- Extract appendICNotice for reusable IC log notices
- Clean up charselect: hide during loading, simplify toolbar layout
- Freshen loading screen and charselect styling
- Remove loading progress text updates (just show "Loading...")
- Guard against undefined client.chars and client.serv

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

1 files changed, 24 insertions, 0 deletions

diff --git a/webAO/dom/renderAreaList.ts b/webAO/dom/renderAreaList.ts
new file mode 100644
index 0000000..e622765
--- /dev/null
+++ b/webAO/dom/renderAreaList.ts
@@ -0,0 +1,24 @@
+import { client } from "../client";
+import { area_click } from "./areaClick";
+
+export function renderAreaList() {
+  const container = document.getElementById("areas")!;
+  container.innerHTML = "";
+
+  for (let i = 0; i < client.areas.length; i++) {
+    const area = client.areas[i];
+    const el = document.createElement("SPAN");
+    el.className = `area-button area-${area.status.toLowerCase()}`;
+    el.id = `area${i}`;
+    el.innerText = `${area.name} (${area.players}) [${area.status}]`;
+    el.title =
+      `Players: ${area.players}\n` +
+      `Status: ${area.status}\n` +
+      `CM: ${area.cm}\n` +
+      `Area lock: ${area.locked}`;
+    el.onclick = function () {
+      area_click(el);
+    };
+    container.appendChild(el);
+  }
+}