From 46deba2982733320257d5d87862666d515a700ea Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Wed, 14 May 2025 16:18:33 -0500
Subject: [PATCH] wip: active downloads in header

---
 assets/icons/flowbite/download-outline.svg |  1 +
 src/Twig/Components/Header.php             |  4 ++++
 templates/components/Header.html.twig      | 24 +++++++++++++++++++---
 templates/partial/alert-status.html.twig   |  2 +-
 4 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 assets/icons/flowbite/download-outline.svg

diff --git a/assets/icons/flowbite/download-outline.svg b/assets/icons/flowbite/download-outline.svg
new file mode 100644
index 0000000..df99a90
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/Twig/Components/Header.php b/src/Twig/Components/Header.php
index 3dd5f21..42d9d16 100644
--- a/src/Twig/Components/Header.php
+++ b/src/Twig/Components/Header.php
@@ -7,4 +7,8 @@ use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 #[AsTwigComponent]
 final class Header
 {
+    public function getActiveDownloads()
+    {
+        return [];
+    }
 }
diff --git a/templates/components/Header.html.twig b/templates/components/Header.html.twig
index 48e98af..aa7e3e6 100644
--- a/templates/components/Header.html.twig
+++ b/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">
-                        <li><twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/></li>
+                    <ul class="flex items-center align-middle gap-6 text-sm">
+                        <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>
diff --git a/templates/partial/alert-status.html.twig b/templates/partial/alert-status.html.twig
index 9ea8ebc..9a1a89c 100644
--- a/templates/partial/alert-status.html.twig
+++ b/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>