basic mute,unmute,change channel

src/app.rs

@@ -25,6 +25,16 @@ pub enum Command {
         markdown: String,
         channels: Vec<ChannelId>,
     },
+    SetMute {
+        mute: bool,
+    },
+    SetDeaf {
+        deaf: bool,
+    },
+    EnterChannel {
+        channel: ChannelId,
+        user: UserId,
+    },
     Disconnect,
 }
 
@@ -43,6 +53,10 @@ pub struct ChannelState {
 pub struct UserState {
     pub name: String,
     pub channel: ChannelId,
+    pub deaf: bool,
+    pub mute: bool,
+    pub self_deaf: bool,
+    pub self_mute: bool,
 }
 
 pub struct Chat {
@@ -105,7 +119,9 @@ pub fn User(id: UserId) -> Element {
 
 #[component]
 pub fn Channel(id: ChannelId) -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
+    let user = server.session?;
     let state = server.channels.get(&id)?;
 
     let channel_details = css!(
@@ -129,7 +145,10 @@ pub fn Channel(id: ChannelId) -> Element {
         details {
             class: "{channel_details}",
             open: true,
-            summary { "{state.name}" }
+            summary {
+                ondoubleclick: move |_| net.send(EnterChannel { channel: id, user }),
+                "{state.name}"
+            }
             div {
                 class: "{channel_children}",
                 for id in state.users.iter() {
@@ -229,6 +248,13 @@ pub fn ChatView() -> Element {
 pub fn ServerView() -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
+    let &UserState {
+        deaf,
+        self_deaf,
+        mute,
+        self_mute,
+        ..
+    } = server.this_user()?;
 
     let grid = css!(
         r#"
@@ -280,6 +306,11 @@ pub fn ServerView() -> Element {
         border: solid black 1px;
         grid-area: bar;
 
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        align-items: center;
+
         button {
             padding: 8px;
         }
@@ -295,7 +326,32 @@ pub fn ServerView() -> Element {
                     onclick: move |_| net.send(Disconnect),
                     "Disconnect"
                 }
-
+                span {
+                    input {
+                        r#type: "checkbox",
+                        id: "mute",
+                        checked: mute || self_mute,
+                        disabled: mute,
+                        onchange: move |_| net.send(SetMute { mute: !self_mute }),
+                    }
+                    label {
+                        r#for: "mute",
+                        "Mute"
+                    }
+                }
+                span {
+                    input {
+                        r#type: "checkbox",
+                        id: "deaf",
+                        checked: deaf || self_deaf,
+                        disabled: deaf,
+                        onchange: move |_| net.send(SetDeaf { deaf: !self_deaf }),
+                    }
+                    label {
+                        r#for: "deaf",
+                        "Deafen"
+                    }
+                }
             }
             div {
                 class: "{channel_box}",