missing icons everywhere

3 files changed, 50 insertions, 28 deletions

diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts
index 2f1a601..ba4dd0c 100644
--- a/client-web/source/helper.ts
+++ b/client-web/source/helper.ts
@@ -21,21 +21,28 @@ interface Opts<E> {
     aria_live?: "polite" | "assertive"
     aria_modal?: boolean
     aria_popup?: "menu"
+    icon?: string,
+    hidden?: boolean,
 }
 
-function apply_opts<E extends HTMLElement>(e: E, o: Opts<E>) {
-    if (o.id) e.id = o.id
-    if (o.onclick) e.onclick = () => o.onclick!(e)
-    if (o.onchange) e.onchange = () => o.onchange!(e)
-    if (o.for) (e as unknown as HTMLLabelElement).htmlFor = o.for
-    if (o.type && e instanceof HTMLInputElement) e.type = o.type
-    if (o.href && e instanceof HTMLAnchorElement) e.href = o.href;
-    if (typeof o?.class == "string") e.classList.add(o.class)
-    if (typeof o?.class == "object") e.classList.add(...o.class)
-    if (o.aria_modal) e.ariaModal = "true"
-    if (o.aria_popup) e.ariaHasPopup = o.aria_popup
-    if (o.aria_label) e.ariaLabel = o.aria_label
-    if (o.aria_live) e.ariaLive = o.aria_live
+function apply_opts<E extends HTMLElement>(el: E, o: Opts<E>) {
+    if (o.id) el.id = o.id
+    if (o.onclick) el.onclick = () => o.onclick!(el)
+    if (o.onchange) el.onchange = () => o.onchange!(el)
+    if (o.for) (el as unknown as HTMLLabelElement).htmlFor = o.for
+    if (o.type && el instanceof HTMLInputElement) el.type = o.type
+    if (o.href && el instanceof HTMLAnchorElement) el.href = o.href;
+    if (typeof o?.class == "string") el.classList.add(o.class)
+    if (typeof o?.class == "object") el.classList.add(...o.class)
+    if (o.aria_modal) el.ariaModal = "true"
+    if (o.aria_popup) el.ariaHasPopup = o.aria_popup
+    if (o.aria_label) el.ariaLabel = o.aria_label
+    if (o.aria_live) el.ariaLive = o.aria_live
+    if (o.src && el instanceof HTMLImageElement) el.src = o.src;
+    if (o.hidden) el.hidden = o.hidden;
+    if (o.icon) {
+        el.prepend(e("img", { src: `/assets/icons/${o.icon}.svg`, class: "icon" }))
+    }
 }
 
 export function e<K extends keyof HTMLElementTagNameMap>(name: K, opts: Opts<HTMLElementTagNameMap[K]>, ...children: (HTMLElement | string)[]): HTMLElementTagNameMap[K] {
diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index 5ac56e3..57ee26c 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -37,15 +37,15 @@ export function info_br() {
 export let chat_control: (s?: boolean) => void;
 
 export function control_bar(room: Room, side_ui_container: HTMLElement): HTMLElement {
-    const leave = e("button", { class: "abort", onclick() { window.location.href = "/" } }, "Leave")
-    const chat = side_ui(side_ui_container, room.chat.element, "Chat", room.chat)
-    const prefs = side_ui(side_ui_container, ui_preferences(), "Settings")
-    const rwatches = side_ui(side_ui_container, ui_room_watches(room.signaling), "Known Rooms")
+    const leave = e("button", { icon: "leave", class: "abort", onclick() { window.location.href = "/" } }, "Leave")
+    const chat = side_ui(side_ui_container, room.chat.element, "chat", "Chat", room.chat)
+    const prefs = side_ui(side_ui_container, ui_preferences(), "settings", "Settings")
+    const rwatches = side_ui(side_ui_container, ui_room_watches(room.signaling), "room", "Known Rooms")
     const local_controls = [ //ediv({ class: "local-controls", aria_label: "local resources" },
-        e("button", { onclick: () => room.local_user.await_add_resource(create_mic_res()) }, "Microphone"),
-        e("button", { onclick: () => room.local_user.await_add_resource(create_camera_res()) }, "Camera"),
-        e("button", { onclick: () => room.local_user.await_add_resource(create_screencast_res()) }, "Screen"),
-        e("button", { onclick: () => room.local_user.await_add_resource(create_file_res()) }, "File"),
+        e("button", { icon: "microphon", onclick: () => room.local_user.await_add_resource(create_mic_res()) }, "Microphone"),
+        e("button", { icon: "camera", onclick: () => room.local_user.await_add_resource(create_camera_res()) }, "Camera"),
+        e("button", { icon: "screen", onclick: () => room.local_user.await_add_resource(create_screencast_res()) }, "Screen"),
+        e("button", { icon: "file", onclick: () => room.local_user.await_add_resource(create_file_res()) }, "File"),
     ]
     chat_control = chat.set_state;
     return e("nav", { class: "control-bar" }, leave, "|", chat.el, prefs.el, rwatches.el, "|", ...local_controls)
@@ -54,7 +54,7 @@ export function control_bar(room: Room, side_ui_container: HTMLElement): HTMLEle
 export interface SideUI { el: HTMLElement, set_state: (s?: boolean) => void }
 let close_active: (() => void) | undefined;
 let cancel_slide: number | undefined
-export function side_ui(container: HTMLElement, content: HTMLElement, label: string, handlers = { focus() { } }): SideUI {
+export function side_ui(container: HTMLElement, content: HTMLElement, icon: string, label: string, handlers = { focus() { } }): SideUI {
     const tray = e("div", { class: "side-tray" }, content)
     let last_state = false;
     const checkbox = e("input", {
@@ -99,6 +99,6 @@ export function side_ui(container: HTMLElement, content: HTMLElement, label: str
         checkbox.checked = s ?? !checkbox.checked;
         if (checkbox.onchange) checkbox.onchange(undefined as unknown as Event)
     }
-    const el = e("label", { class: "side-ui-control" }, label, checkbox)
+    const el = e("label", { class: "side-ui-control", icon }, label, checkbox)
     return { el, set_state }
 }
diff --git a/client-web/source/room_watches.ts b/client-web/source/room_watches.ts
index a0aff92..3e41507 100644
--- a/client-web/source/room_watches.ts
+++ b/client-web/source/room_watches.ts
@@ -77,16 +77,31 @@ export function ui_room_watches(conn: SignalingConnection): HTMLElement {
 
     load_watches()
 
+    let button_edit: HTMLElement, button_finish: HTMLElement;
+    const set_edit = (e: boolean) => {
+        button_edit.hidden = e;
+        button_finish.hidden = !e;
+        edit = e;
+    }
     return e("div", { class: "room-watches" },
         e("h2", {}, "Known Rooms"),
         listing,
-        e("button", {
-            onclick(e) {
-                edit = !edit;
-                e.textContent = edit ? "Finish edit" : "Edit";
-                if (!edit) save_watches(), update_watches()
+        button_edit = e("button", {
+            icon: "edit",
+            onclick() {
+                set_edit(true)
                 update_listing()
             }
         }, "Edit"),
+        button_finish = e("button", {
+            icon: "check",
+            hidden: true,
+            onclick() {
+                set_edit(false)
+                save_watches()
+                update_watches()
+                update_listing()
+            }
+        }, "Finish edit"),
     )
 }