From 0d1f25899dc9f902b17666d70c364fdeddc3a610 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Wed, 15 Nov 2023 13:01:58 +0300
Subject: [PATCH] Adds Blocked & Closed labels to channel page

---
 src/components/ChannelItem.svelte             | 34 ++++++++++---------
 src/components/ChannelPopup.svelte            | 22 +++++++++++-
 .../channels/[country]/[name]/+page.svelte    | 26 ++++++++++++--
 3 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 5a5b1e514..43380952a 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -96,22 +96,24 @@
           >
             {channel.displayName}
           </a>
-          {#if channel.is_closed}
-            <div
-              class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
-              title="closed: {channel.closed}"
-            >
-              Closed
-            </div>
-          {/if}
-          {#if channel.is_blocked}
-            <div
-              class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
-              title="The channel has been added to our blocklist due to the claim of the copyright holder"
-            >
-              Blocked
-            </div>
-          {/if}
+          <div class="flex space-x-2">
+            {#if channel.is_closed}
+              <div
+                class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 dark:text-gray-300 cursor-default rounded-full"
+                title="closed: {channel.closed}"
+              >
+                Closed
+              </div>
+            {/if}
+            {#if channel.is_blocked}
+              <div
+                class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 dark:text-gray-300 cursor-default rounded-full"
+                title="The channel has been added to our blocklist due to the claim of the copyright holder"
+              >
+                Blocked
+              </div>
+            {/if}
+          </div>
         </div>
         {#if channel.alt_names.length}
           <div
diff --git a/src/components/ChannelPopup.svelte b/src/components/ChannelPopup.svelte
index d0e6a256d..8f4ea8006 100644
--- a/src/components/ChannelPopup.svelte
+++ b/src/components/ChannelPopup.svelte
@@ -22,7 +22,27 @@
       class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
     >
       <div class="w-2/3 overflow-hidden">
-        <h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.displayName}</h3>
+        <div class="flex items-center space-x-3">
+          <h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.displayName}</h3>
+          <div class="flex space-x-2">
+            {#if channel.is_closed}
+              <div
+                class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 dark:text-gray-300 cursor-default rounded-full h-6"
+                title="closed: {channel.closed}"
+              >
+                Closed
+              </div>
+            {/if}
+            {#if channel.is_blocked}
+              <div
+                class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 dark:text-gray-300 cursor-default rounded-full h-6"
+                title="The channel has been added to our blocklist due to the claim of the copyright holder"
+              >
+                Blocked
+              </div>
+            {/if}
+          </div>
+        </div>
       </div>
 
       <div class="inline-flex w-1/3 justify-end space-x-3 items-center">
diff --git a/src/pages/channels/[country]/[name]/+page.svelte b/src/pages/channels/[country]/[name]/+page.svelte
index 5a02ca550..62c231dea 100644
--- a/src/pages/channels/[country]/[name]/+page.svelte
+++ b/src/pages/channels/[country]/[name]/+page.svelte
@@ -49,8 +49,30 @@
         <div
           class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
         >
-          <div class="w-1/3 overflow-hidden">
-            <h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.displayName}</h1>
+          <div class="w-2/3 overflow-hidden">
+            <div class="flex space-x-3">
+              <h1 class="text-l font-medium text-gray-900 dark:text-white">
+                {channel.displayName}
+              </h1>
+              <div class="flex items-center space-x-2">
+                {#if channel.is_closed}
+                  <div
+                    class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 dark:text-gray-300 cursor-default rounded-full h-6"
+                    title="closed: {channel.closed}"
+                  >
+                    Closed
+                  </div>
+                {/if}
+                {#if channel.is_blocked}
+                  <div
+                    class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 dark:text-gray-300 cursor-default rounded-full h-6"
+                    title="The channel has been added to our blocklist due to the claim of the copyright holder"
+                  >
+                    Blocked
+                  </div>
+                {/if}
+              </div>
+            </div>
           </div>
           <div class="inline-flex w-1/3 justify-end space-x-3">
             <EditButton {channel} />