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, 2 insertions, 13 deletions

diff --git a/webAO/packets/handlers/handleARUP.ts b/webAO/packets/handlers/handleARUP.ts
index 7f72b15..5a7aebb 100644
--- a/webAO/packets/handlers/handleARUP.ts
+++ b/webAO/packets/handlers/handleARUP.ts
@@ -1,4 +1,5 @@
 import { client } from "../../client";
+import { renderAreaList } from "../../dom/renderAreaList";
 import { safeTags } from "../../encoding";
 
 /**
@@ -10,7 +11,6 @@ export const handleARUP = (args: string[]) => {
   for (let i = 0; i < args.length - 1; i++) {
     if (client.areas[i]) {
       // the server sends us ARUP before we even get the area list
-      const thisarea = document.getElementById(`area${i}`)!;
       switch (Number(args[0])) {
         case 0: // playercount
           client.areas[i].players = Number(args[i + 1]);
@@ -25,18 +25,7 @@ export const handleARUP = (args: string[]) => {
           client.areas[i].locked = safeTags(args[i + 1]);
           break;
       }
-
-      thisarea.className = `area-button area-${client.areas[
-        i
-      ].status.toLowerCase()}`;
-
-      thisarea.innerText = `${client.areas[i].name} (${client.areas[i].players}) [${client.areas[i].status}]`;
-
-      thisarea.title =
-        `Players: ${client.areas[i].players}\n` +
-        `Status: ${client.areas[i].status}\n` +
-        `CM: ${client.areas[i].cm}\n` +
-        `Area lock: ${client.areas[i].locked}`;
     }
   }
+  renderAreaList();
 };