wip: active downloads in header

assets/icons/flowbite/download-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2m-1-5l-4 5l-4-5m9 8h.01"/></svg>

src/Twig/Components/Header.php

@@ -7,4 +7,8 @@ use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 #[AsTwigComponent]
 final class Header
 {
+    public function getActiveDownloads()
+    {
+        return [];
+    }
 }

templates/components/Header.html.twig

@@ -4,11 +4,29 @@
             <twig:SearchBar />
             <div class="md:flex md:items-center md:gap-12">
                 <nav aria-label="Global" class="md:block">
-                    <ul class="flex items-center gap-6 text-sm">
+                    <ul class="flex items-center align-middle gap-6 text-sm">
-                        <li><twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/></li>
+                        <li id="active_download_notis" class="">
+                            <ul>
+                                {% if this.activeDownloads|length > 0 %}
+                                <li class="flex flex-col gap-1 align-middle">
+                                    <twig:ux:icon name="flowbite:download-outline" width="1.75rem" color="#f97316" class="border-2 border-orange-500 rounded-md p-1" />
+{#                                    {% include 'partial/alert-status.html.twig' %}#}
+{#                                    <div class="absolute" style="top: 3.5rem; right: 7rem; z-index: 1000;">#}
+{#                                        <div class="flex flex-col gap-1 bg-cyan-950 border-2 border-orange-500 text-white rounded-md p-3">#}
+{#                                            <h3>Inception</h3>#}
+{#                                            <div class="border-2 border-green-700 rounded-md w-full h-6 align-middle overflow-hidden">#}
+{#                                                <div class="rounded-sm text-bold text-center text-white bg-green-600 h-5" style="width:47%">47%</div>#}
+{#                                            </div>#}
+{#                                        </div>#}
+{#                                    </div>#}
+                                </li>
+                                {% endif %}
+                            </ul>
+                        </li>
+                        <li><twig:ux:icon name="fluent:alert-12-regular" width="2.5rem" class="text-orange-500 rounded-full p-2"/></li>
                         <li>
                             <a href="{{ path('app_logout') }}">
-                                <twig:ux:icon name="material-symbols:logout" width="25px" class="text-orange-500" />
+                                <twig:ux:icon name="material-symbols:logout" width="2rem" class="text-orange-500" />
                             </a>
                         </li>
                     </ul>

templates/partial/alert-status.html.twig

@@ -2,4 +2,4 @@
    to the Alert button, indicating there are unread alerts.
 #}
 
-<span style="position: absolute;width: 8px;height: 8px;background: greenyellow;border-radius: 5px; z-index: 1000;margin-left: 3px;margin-top: -5px;"></span>
+<span style="display: block;width: 8px;height: 8px;background: greenyellow;border-radius: 5px; z-index: 1000;margin-left: -10px;margin-bottom: -10px;"></span>