Dashboard Studio 2.2.0: guest invites, personal looks, more themes, Haven widgets and tiles

- Vacuum card: the robot drawn beside its dock by state, last clean, maintenance
- Formula One card: the official F1 look with a user-supplied logo
- Nine more themes; per-person theme, text size and language on Admin, People
- Guest invites: an expiring link and QR code for one dashboard, served on a
  LAN-only guest port, with the Home Assistant connection filtered both ways
- Haven 2.2: home screen widgets, three quick settings tiles, several homes,
  and self-updates from the Haven that Dashboard Studio serves

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

haven/assets/setup.html

@@ -19,6 +19,15 @@
   .hint { font-size: 13px; margin: 8px 0 22px; }
   button { width: 100%; font: inherit; font-weight: 700; color: #2b1a02; background: #f4a531; border: 0; border-radius: 12px; padding: 13px; }
   button:active { opacity: .85; }
+  .homes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
+  .homes:empty { display: none; }
+  .home { display: flex; align-items: center; gap: 8px; }
+  .home .go { flex: 1; text-align: left; background: rgba(255, 255, 255, .08); color: #f4eee4; font-weight: 600; padding: 12px 14px; display: flex; flex-direction: column; }
+  .home .go small { font-weight: 400; color: #a9b8c2; font-size: 13px; }
+  .home .go.on { outline: 2px solid #f4a531; }
+  .home .x { width: 44px; flex: none; background: transparent; color: #a9b8c2; font-size: 20px; padding: 12px 0; }
+  .add { background: transparent; color: #f4a531; border: 1.5px solid rgba(244, 165, 49, .5); margin-bottom: 22px; }
+  #f.hide { display: none; }
 </style>
 </head>
 <body>
@@ -28,6 +37,8 @@
   <h1 data-t="title">Your home’s dashboards</h1>
   <p data-t="intro">Enter the address you use to open Home Assistant, then sign in with your own login. You only do this once.</p>
   <p class="msg" id="msg"></p>
+  <div class="homes" id="homes"></div>
+  <button type="button" class="add" id="add" hidden data-t="add">Add another home</button>
   <form id="f">
     <label for="addr" data-t="label">Home Assistant address</label>
     <input id="addr" type="text" inputmode="url" autocomplete="url" autocapitalize="off" spellcheck="false" placeholder="http://homeassistant.local:8123" required>
@@ -42,6 +53,7 @@
     label: "Adres van Home Assistant",
     hint: "Vraag het aan wie Home Assistant heeft ingesteld: het staat in Dashboard Studio op het beheerscherm, onder Haven-app.",
     go: "Verbinden",
+    add: "Nog een huis toevoegen",
     offline: "Home Assistant is niet bereikbaar op dit adres. Controleer het adres en je verbinding.",
     notfound: "Dashboard Studio staat niet in Home Assistant. Vraag wie Home Assistant beheert om het te installeren.",
     noaddress: "Dashboard Studio is gevonden, maar het adres kon niet worden opgevraagd. Tik in Dashboard Studio op Openen in Haven, of vraag wie Home Assistant beheert.",
@@ -61,6 +73,20 @@
   const addr = document.getElementById("addr");
   addr.value = app ? app.address() : "";
   document.getElementById("f").onsubmit = (e) => { e.preventDefault(); app.setup(addr.value.trim()); };
+  // Several homes (a holiday home, your parents'): open one, remove one, or add another.
+  const homes = app ? JSON.parse(app.homes()) : [];
+  const box = document.getElementById("homes"), form = document.getElementById("f"), add = document.getElementById("add");
+  const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+  const removeLabel = T === NL ? "Verwijderen" : "Remove";
+  box.innerHTML = homes.map((h) => `<div class="home"><button type="button" class="go ${h.current ? "on" : ""}" data-id="${esc(h.id)}">${esc(h.name)}<small>${esc(h.ha)}</small></button>
+    <button type="button" class="x" data-x="${esc(h.id)}" aria-label="${removeLabel} ${esc(h.name)}">×</button></div>`).join("");
+  box.onclick = (e) => {
+    const go = e.target.closest("[data-id]"), x = e.target.closest("[data-x]");
+    if (go) app.switchHome(go.dataset.id);
+    if (x && confirm((T === NL ? "Verwijderen: " : "Remove ") + x.closest(".home").querySelector(".go").firstChild.textContent + "?")) app.removeHome(x.dataset.x);
+  };
+  if (homes.length && homes.some((h) => h.current) && !why) { form.classList.add("hide"); add.hidden = false; }
+  add.onclick = () => app.addHome();
 </script>
 </body>
 </html>