fix: limits active download list to 5 items

assets/controllers/download_list_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
+*/
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static targets = ['download']
+
+    async initialize() {
+        this.component = await getComponent(this.element);
+    }
+
+    connect() {
+        // Called every time the controller is connected to the DOM
+        // (on page load, when it's added to the DOM, moved in the DOM, etc.)
+
+        // Here you can add event listeners on the element or target elements,
+        // add or remove classes, attributes, dispatch custom events, etc.
+        // this.fooTarget.addEventListener('click', this._fooBar)
+    }
+
+    downloadTargetConnected(target) {
+        let downloads = this.element.querySelectorAll('tbody tr');
+        console.log(downloads.length);
+        if (downloads.length > 5) {
+            target.classList.add('hidden');
+        }
+    }
+
+    // Add custom controller actions here
+    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
+
+    disconnect() {
+        // Called anytime its element is disconnected from the DOM
+        // (on page change, when it's removed from or moved in the DOM, etc.)
+
+        // Here you should remove all event listeners added in "connect()" 
+        // this.fooTarget.removeEventListener('click', this._fooBar)
+    }
+}

src/Twig/Components/DownloadList.php

@@ -3,11 +3,14 @@
 namespace App\Twig\Components;
 
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsTwigComponent]
+#[AsLiveComponent]
 final class DownloadList extends AbstractController
 {
+    use DefaultActionTrait;
+
     public string $type;
 
     public function getDownloads()

templates/broadcast/Download.stream.html.twig

@@ -5,15 +5,15 @@
 
     <turbo-stream action="append" target="active_downloads">
         <template>
-            <tr  id="ad_download_{{ entity.id }}">
+            <tr data-download-list-target="download" id="ad_download_{{ entity.id }}">
                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
                     {{ entity.title }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
                     {% if entity.progress < 100 %}
-                        <span class="p-1.5 bg-purple-600 rounded-full">
+                        <div class="w-[3.25ch] h-[3.25ch] bg-purple-600 rounded-full block text-center table-cell align-middle text-xs text-gray-50">
-                            <span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
+                            {{ entity.progress }}
-                        </span>
+                        </div>
                     {% else %}
                         <twig:StatusBadge color="green" status="Complete" />
                     {% endif %}

templates/components/DownloadList.html.twig

@@ -1,4 +1,4 @@
-<div{{ attributes }} class="min-w-48">
+<div{{ attributes.defaults(stimulus_controller('download_list')) }} class="min-w-48" >
     {% set table_body_id = (type == "complete") ? "complete_downloads" : "active_downloads" %}
     <table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-fixed" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
         <thead>
@@ -16,7 +16,7 @@
         <tbody id="{{ table_body_id }}" class="divide-y divide-gray-200 dark:divide-gray-50">
         {% if this.downloads|length > 0 %}
             {% for download in this.downloads %}
-                <tr  id="ad_download_{{ download.id }}">
+                <tr id="ad_download_{{ download.id }}">
                     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
                         {{ download.title }}
                     </td>