From 113fcb28ded19afb0d0ad846dbc02170726f3a7d Mon Sep 17 00:00:00 2001
From: Janis Meister <janis.meister87@gmail.com>
Date: Fri, 30 Jun 2023 13:22:07 +0200
Subject: [PATCH 1/3] [feature] get boolean from parameter

---
 src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.tsx b/src/App.tsx
index 29e4343..0186e1f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,6 +56,7 @@ export default function App() {
   return (
     <div className="App">
       <Viewer
+        showChannelName={searchParams.get("showChannelName") === "true"}
         hideNonTalking={searchParams.get("hideNonTalking") === "true"}
         clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
         clients={

From 0d3317802cfbcd1692cccb6c6df945b3899f2d7e Mon Sep 17 00:00:00 2001
From: Janis Meister <janis.meister87@gmail.com>
Date: Fri, 30 Jun 2023 13:25:44 +0200
Subject: [PATCH 2/3] [refactor] update channel name style

---
 src/Viewer.tsx         |  6 +++++-
 src/styles/Viewer.scss | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/Viewer.tsx b/src/Viewer.tsx
index 11b9b50..7682bc3 100644
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -16,7 +16,11 @@ export default function Viewer({
 }) {
   return (
     <div className="viewer">
-      {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
+      {showChannelName ? (
+        <div className="channelNameContainer">
+          <h3>{channel?.properties.name}</h3>
+        </div>
+      ) : null}
       {clients?.map((client, i) => {
         //* Client limit
         if (clientLimit != 0 && i >= clientLimit) {
diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss
index dc4ad81..951bf25 100644
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -4,10 +4,19 @@
   gap: 0 0;
   padding: 1rem;
 
-  h3 {
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin: 0;
+  .channelNameContainer {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    h3 {
+      font-size: 1.7rem;
+      font-weight: 500;
+      margin: 0;
+      background-color: rgba(47, 49, 54, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      color: white;
+    }
   }
 
   .client {

From 14db96d10ad99b8680391416a1641ed35b998144 Mon Sep 17 00:00:00 2001
From: Janis Meister <janis.meister87@gmail.com>
Date: Fri, 30 Jun 2023 13:26:58 +0200
Subject: [PATCH 3/3] [refactor] update readme paramter table

---
 README.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 50217b9..153d9bb 100644
--- a/README.md
+++ b/README.md
@@ -47,11 +47,12 @@ Real example: `file://C:/Users/.../index.html?remoteAppPort=5899&hideNonTalking=
 
 This is a list of all available parameters (all parameters are optional):
 
-| Parameter        | Description                              | Type    | Default         |
-| ---------------- | ---------------------------------------- | ------- | --------------- |
-| `remoteAppPort`  | The port of the Teamspeak 5 remote app   | number  | `5899`          |
-| `hideNonTalking` | Hide all non-talking clients             | boolean | `false`         |
-| `clientLimit`    | Count of how many client should be shown | number  | `0` (unlimited) |
+| Parameter         | Description                              | Type    | Default         |
+| ----------------- | ---------------------------------------- | ------- | --------------- |
+| `remoteAppPort`   | The port of the Teamspeak 5 remote app   | number  | `5899`          |
+| `hideNonTalking`  | Hide all non-talking clients             | boolean | `false`         |
+| `clientLimit`     | Count of how many client should be shown | number  | `0` (unlimited) |
+| `showChannelName` | Display the channel name                 | boolean | `false`         |
 
 ## Setup (Developer)