Create ExpandButton.svelte

src/components/ExpandButton.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+
+  let expanded = false
+</script>
+
+<button
+  class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
+  on:click={() => {
+    expanded = !expanded
+    dispatch('click', { state: expanded })
+  }}
+  area-label={expanded ? 'Collapse' : 'Expand'}
+>
+  <svg
+    class="w-4 h-4"
+    class:rotate-90={expanded}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+  </svg>
+</button>

src/components/GuideItem.svelte

@@ -1,4 +1,5 @@
 <script>
+  import ExpandButton from './ExpandButton.svelte'
   import CopyToClipboard from './CopyToClipboard.svelte'
   import JsonDataViewer from './JsonDataViewer.svelte'
 
@@ -12,38 +13,18 @@
 >
   <div
     class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
-    class:border-b="{expanded}"
+    class:border-b={expanded}
   >
     <div class="flex space-x-3 items-center max-w-[90%] w-full">
-      <button
+      <ExpandButton on:click={event => (expanded = event.detail.state)} />
-        class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
-        on:click="{() => {expanded = !expanded}}"
-      >
-        <svg
-          class="w-4 h-4"
-          class:rotate-90="{expanded}"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 5l7 7-7 7"
-          ></path>
-        </svg>
-      </button>
       <a
         class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
-        href="{guide.url}"
+        href={guide.url}
-        title="{guide.url}"
+        title={guide.url}
         target="_blank"
         rel="noreferrer"
       >
-        <span class="truncate">{guide.url}</span
+        <span class="truncate">{guide.url}</span><span
-        ><span
           class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
         >
           <svg
@@ -59,16 +40,17 @@
               stroke-width="2"
               d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
             ></path>
-          </svg> </span
+          </svg>
-      ></a>
+        </span></a
+      >
     </div>
     <div class="flex shrink-0">
-      <CopyToClipboard text="{guide.url}" />
+      <CopyToClipboard text={guide.url} />
     </div>
   </div>
   {#if expanded}
-  <div class="w-full flex px-2 py-4">
+    <div class="w-full flex px-2 py-4">
-    <JsonDataViewer data="{guide}" />
+      <JsonDataViewer data={guide} />
-  </div>
+    </div>
   {/if}
 </div>

src/components/StreamItem.svelte

@@ -1,5 +1,6 @@
 <script>
   import CopyToClipboard from './CopyToClipboard.svelte'
+  import ExpandButton from './ExpandButton.svelte'
   import JsonDataViewer from './JsonDataViewer.svelte'
 
   export let stream
@@ -12,48 +13,18 @@
 >
   <div
     class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
-    class:border-b="{expanded}"
+    class:border-b={expanded}
   >
     <div class="flex space-x-3 items-center max-w-[90%] w-full">
-      <button
+      <ExpandButton on:click={event => (expanded = event.detail.state)} />
-        class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
-        on:click="{() => {expanded = !expanded}}"
-      >
-        <svg
-          class="w-4 h-4"
-          class:rotate-90="{expanded}"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 5l7 7-7 7"
-          ></path>
-        </svg>
-      </button>
-      <!-- <svg
-        class="w-2 h-2 flex shrink-0"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-        class:fill-green-500="{stream.status === 'online'}"
-        class:fill-yellow-500="{['blocked', 'timeout'].includes(stream.status)}"
-        class:fill-red-500="{stream.status === 'error'}"
-      >
-        <circle cx="50" cy="50" r="50" />
-      </svg> -->
       <a
         class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
-        href="{stream.url}"
+        href={stream.url}
-        title="{stream.url}"
+        title={stream.url}
         target="_blank"
         rel="noopener noreferrer"
       >
-        <span class="truncate">{stream.url}</span
+        <span class="truncate">{stream.url}</span><span
-        ><span
           class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
         >
           <svg
@@ -69,16 +40,17 @@
               stroke-width="2"
               d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
             ></path>
-          </svg> </span
+          </svg>
-      ></a>
+        </span></a
+      >
     </div>
     <div class="flex shrink-0">
-      <CopyToClipboard text="{stream.url}" />
+      <CopyToClipboard text={stream.url} />
     </div>
   </div>
   {#if expanded}
-  <div class="w-full flex px-2 py-4">
+    <div class="w-full flex px-2 py-4">
-    <JsonDataViewer data="{stream}" />
+      <JsonDataViewer data={stream} />
-  </div>
+    </div>
   {/if}
 </div>