1 files changed, 21 insertions, 17 deletions

diff --git a/static/modules/windows.js b/static/modules/windows.js
index 7a2eeb8..a92d9e4 100644
--- a/static/modules/windows.js
+++ b/static/modules/windows.js
@@ -10,8 +10,9 @@ async function post(action, body = {}) {
   }
 }
 
-function button(label, onclick) {
+function tile(label, onclick) {
   const b = document.createElement("button");
+  b.className = "wtile";
   b.textContent = label;
   b.onclick = onclick;
   return b;
@@ -22,44 +23,47 @@ export default {
   interval: 1,
 
   mount(el) {
-    const box = document.createElement("div");
-    box.className = "windows";
-    box.innerHTML = `
-      <div class="row ws"></div>
+    el.innerHTML = `<div class="windows">
+      <div class="ws"></div>
       <div class="winlist"></div>
-      <div class="row launches"></div>`;
-    el.append(box);
+      <div class="launches"></div>
+    </div>`;
   },
 
   update(st, el) {
-    const box = el.querySelector(".windows");
-
-    const ws = box.querySelector(".ws");
+    const ws = el.querySelector(".ws");
     ws.textContent = "";
     for (const id of st.workspaces ?? []) {
-      const b = button(String(id), () => post("workspace", { n: id }));
+      const b = tile(String(id), () => post("workspace", { n: id }));
       b.classList.toggle("on", (st.windows ?? []).some((w) => w.workspace === id));
       ws.append(b);
     }
 
-    const list = box.querySelector(".winlist");
+    const list = el.querySelector(".winlist");
     list.textContent = "";
-    for (const w of (st.windows ?? []).slice(0, 12)) {
+    for (const w of (st.windows ?? []).slice(0, 8)) {
       const row = document.createElement("div");
-      row.className = "row";
+      row.className = "wrow";
       row.classList.toggle("on", Boolean(w.active));
       const title = document.createElement("span");
       title.className = "wt";
       title.textContent = w.title || w.class;
       title.onclick = () => post("focus", { address: w.address });
-      row.append(title, button("×", () => post("close", { address: w.address })));
+      const close = document.createElement("button");
+      close.className = "wclose";
+      close.textContent = "×";
+      close.setAttribute("aria-label", "Close window");
+      close.onclick = () => post("close", { address: w.address });
+      row.append(title, close);
       list.append(row);
     }
 
-    const launches = box.querySelector(".launches");
+    const launches = el.querySelector(".launches");
     launches.textContent = "";
     for (const key of st.launches ?? []) {
-      launches.append(button(key, () => post("launch", { key })));
+      const b = tile(key, () => post("launch", { key }));
+      b.classList.add("launch");
+      launches.append(b);
     }
   },
 };