wip: active downloads in header

assets/controllers/download_button_controller.js

@@ -15,7 +15,7 @@ export default class extends Controller {
     }
 
     download() {
-        fetch('/download', {
+        fetch('/api/download', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',

assets/controllers/download_list_controller.js

@@ -0,0 +1,42 @@
+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');
+        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)
+    }
+}

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>

build.xml

@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project name="Caldwell Digital Symfony Template" default="build">
+<project name="Torsearch" default="build">
     <!-- build dev for dev envs -->
     <target name="build" depends="setEnv,composer,compileAssets,migrateDb,clearCache" />
 
     <target name="composer" description="Run composer">
         <exec executable="composer">
             <arg value="install" />
+            <arg value="--ignore-platform-reqs" />
         </exec>
     </target>
 

compose.yml

@@ -29,7 +29,7 @@ services:
     volumes:
       - ./:/var/www
       - ./var/download:/var/download
-    command: php ./bin/console messenger:consume async -vv --time-limit=3600
+    command: php ./bin/console messenger:consume async -vvv --time-limit=3600
 
   scheduler:
     build: .

config/routes.yaml

@@ -14,6 +14,14 @@ controllersUser:
     defaults:
         schemes: ['https']
 
+controllersDownload:
+    resource:
+        path: ../src/Download/Framework/Controller
+        namespace: App\Download\Framework\Controller
+    type: attribute
+    defaults:
+        schemes: [ 'https' ]
+
 controllersMonitor:
     resource:
         path: ../src/Monitor/Framework/Controller

src/Controller/AlertController.php

@@ -22,7 +22,7 @@ final class AlertController extends AbstractController
     {
         $update = new Update(
             'alerts',
-            $this->renderer->render('broadcast/Alert.html.twig', [
+            $this->renderer->render('Alert.stream.html.twig', [
                 'alert_id' => 1,
                 'title' => 'Added to queue',
                 'message' => 'This is a testy test!',

src/Controller/IndexController.php

@@ -5,6 +5,7 @@ namespace App\Controller;
 use App\Download\Framework\Repository\DownloadRepository;
 use App\Tmdb\Tmdb;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
@@ -16,9 +17,10 @@ final class IndexController extends AbstractController
     ) {}
 
     #[Route('/', name: 'app_index')]
-    public function index(): Response
+    public function index(Request $request): Response
     {
-//        dd($this->getUser()->getActiveDownloads());
+        $request->getSession()->set('mercure_alert_topic', 'alerts_' . uniqid());
+
         return $this->render('index/index.html.twig', [
             'active_downloads' => $this->getUser()->getActiveDownloads(),
             'recent_downloads' => $this->getUser()->getDownloads(),

src/Controller/TorrentioController.php

@@ -8,6 +8,7 @@ use App\Torrentio\Action\Input\GetMovieOptionsInput;
 use App\Torrentio\Action\Input\GetTvShowOptionsInput;
 use Carbon\Carbon;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Mercure\HubInterface;
 use Symfony\Component\Mercure\Update;
@@ -63,7 +64,7 @@ final class TorrentioController extends AbstractController
     }
 
     #[Route('/torrentio/tvshows/clear/{tmdbId}/{imdbId}/{season?}/{episode?}', name: 'app_clear_torrentio_tvshows')]
-    public function clearTvShowOptions(GetTvShowOptionsInput $input, CacheInterface $cache): Response
+    public function clearTvShowOptions(GetTvShowOptionsInput $input, CacheInterface $cache, Request $request): Response
     {
         $cacheId = sprintf(
             "page.torrentio.tvshows.%s.%s.%s.%s",
@@ -75,8 +76,8 @@ final class TorrentioController extends AbstractController
         $cache->delete($cacheId);
 
         $this->hub->publish(new Update(
-            'alerts',
+            $request->getSession()->get('mercure_alert_topic'),
-            $this->renderer->render('broadcast/Alert.html.twig', [
+            $this->renderer->render('Alert.stream.html.twig', [
                 'alert_id' => uniqid(),
                 'title' => 'Success',
                 'message' => 'Torrentio cache Cleared.',

src/Download/Action/Handler/DownloadMediaHandler.php

@@ -37,6 +37,8 @@ readonly class DownloadMediaHandler implements HandlerInterface
             $download = $this->downloadRepository->find($command->downloadId);
         }
 
+        dump($download);
+
         try {
             $this->downloadRepository->updateStatus($download->getId(), 'In Progress');
 

src/Download/Action/Input/DownloadMediaInput.php

@@ -39,8 +39,8 @@ class DownloadMediaInput implements InputInterface
             $this->filename,
             $this->mediaType,
             $this->imdbId,
+            $this->userId,
             $this->downloadId,
-            $this->userId
         );
     }
 }

src/Download/Framework/Controller/ApiController.php

@@ -1,24 +1,28 @@
 <?php
 
-namespace App\Controller;
+namespace App\Download\Framework\Controller;
 
 use App\Download\Action\Input\DownloadMediaInput;
 use App\Download\Framework\Repository\DownloadRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Mercure\HubInterface;
+use Symfony\Component\Mercure\Update;
 use Symfony\Component\Messenger\MessageBusInterface;
 use Symfony\Component\Routing\Attribute\Route;
 
-class DownloadController extends AbstractController
+class ApiController extends AbstractController
 {
     public function __construct(
         private DownloadRepository $downloadRepository,
         private MessageBusInterface $bus,
+        private readonly HubInterface $hub,
     ) {}
 
-    #[Route('/download', name: 'app_download', methods: ['POST'])]
+    #[Route('/api/download', name: 'api_download', methods: ['POST'])]
     public function download(
+        Request $request,
         DownloadMediaInput $input,
     ): Response {
         $download = $this->downloadRepository->insert(
@@ -30,13 +34,26 @@ class DownloadController extends AbstractController
             $input->mediaType,
             "",
         );
+        $this->downloadRepository->getEntityManager()->persist($download);
+        $this->downloadRepository->getEntityManager()->flush();
         $input->downloadId = $download->getId();
+        $input->userId = $this->getUser()->getId();
+
         try {
             $this->bus->dispatch($input->toCommand());
         } catch (\Throwable $exception) {
             return $this->json(['error' => $exception->getMessage()], Response::HTTP_INTERNAL_SERVER_ERROR);
         }
 
+        $this->hub->publish(new Update(
+            $request->getSession()->get('mercure_alert_topic'),
+            $this->renderView('broadcast/Alert.stream.html.twig', [
+                'alert_id' => uniqid(),
+                'title' => 'Success',
+                'message' => '"' . $input->title . '" added to Queue',
+            ])
+        ));
+
         return $this->json(['status' => 200, 'message' => 'Added to Queue']);
     }
-}
+}

src/Download/Framework/Controller/WebController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Download\Framework\Controller;
+
+use App\Download\Action\Input\DownloadMediaInput;
+use App\Download\Framework\Repository\DownloadRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Mercure\HubInterface;
+use Symfony\Component\Mercure\Update;
+use Symfony\Component\Messenger\MessageBusInterface;
+use Symfony\Component\Routing\Attribute\Route;
+
+class WebController extends AbstractController
+{
+    public function __construct(
+        private DownloadRepository $downloadRepository,
+        private MessageBusInterface $bus,
+        private readonly HubInterface $hub,
+    ) {}
+
+    #[Route('/downloads', name: 'app_downloads', methods: ['GET'])]
+    public function download(): Response {
+        return $this->render('downloads/index.html.twig');
+    }
+}

src/Download/Framework/Repository/DownloadRepository.php

@@ -4,10 +4,9 @@ namespace App\Download\Framework\Repository;
 
 use App\Download\Framework\Entity\Download;
 use App\User\Framework\Entity\User;
+use App\Util\Paginator;
 use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
 use Doctrine\Persistence\ManagerRegistry;
-use Knp\Component\Pager\Paginator;
-use Knp\Component\Pager\PaginatorInterface;
 use Symfony\Component\Security\Core\User\UserInterface;
 
 /**
@@ -17,38 +16,39 @@ class DownloadRepository extends ServiceEntityRepository
 {
     private ManagerRegistry $managerRegistry;
 
-    public function __construct(ManagerRegistry $registry, ManagerRegistry $managerRegistry)
+    private Paginator $paginator;
+
+    public function __construct(ManagerRegistry $registry, ManagerRegistry $managerRegistry, Paginator $paginator)
     {
         parent::__construct($registry, Download::class);
         $this->managerRegistry = $managerRegistry;
+        $this->paginator = $paginator;
     }
 
-    public function getCompletePaginated(int $pageNumber = 1, int $perPage = 10)
+    public function getCompletePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 10)
     {
-        $firstResult = ($pageNumber - 1) * $perPage;
         $query = $this->createQueryBuilder('d')
             ->andWhere('d.status IN (:statuses)')
+            ->andWhere('d.user = :user')
             ->orderBy('d.id', 'DESC')
             ->setParameter('statuses', ['Complete'])
-            ->setFirstResult($firstResult)
+            ->setParameter('user', $user)
-            ->setMaxResults($perPage)
             ->getQuery();
 
-        return new \Doctrine\ORM\Tools\Pagination\Paginator($query);
+        return $this->paginator->paginate($query, $pageNumber, $perPage);
     }
 
-    public function getActivePaginated(int $pageNumber = 1, int $perPage = 5)
+    public function getActivePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 5)
     {
-        $firstResult = ($pageNumber - 1) * $perPage;
         $query = $this->createQueryBuilder('d')
             ->andWhere('d.status IN (:statuses)')
+            ->andWhere('d.user = :user')
             ->orderBy('d.id', 'ASC')
             ->setParameter('statuses', ['New', 'In Progress'])
-            ->setFirstResult($firstResult)
+            ->setParameter('user', $user)
-            ->setMaxResults($perPage)
             ->getQuery();
 
-        return new \Doctrine\ORM\Tools\Pagination\Paginator($query);
+        return $this->paginator->paginate($query, $pageNumber, $perPage);
     }
 
     public function insert(

src/Monitor/Framework/Controller/ApiController.php

@@ -33,7 +33,7 @@ class ApiController extends AbstractController
 
         $hub->publish(new Update(
             'alerts',
-            $this->renderer->render('broadcast/Alert.html.twig', [
+            $this->renderer->render('Alert.stream.html.twig', [
                 'alert_id' => uniqid(),
                 'title' => 'Success',
                 'message' => "New monitor added for {$input->title}",

src/Monitor/Framework/Repository/MonitorRepository.php

@@ -3,41 +3,34 @@
 namespace App\Monitor\Framework\Repository;
 
 use App\Monitor\Framework\Entity\Monitor;
+use App\Util\Paginator;
 use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
 use Doctrine\Persistence\ManagerRegistry;
+use Symfony\Component\Security\Core\User\UserInterface;
 
 /**
  * @extends ServiceEntityRepository<Monitor>
  */
 class MonitorRepository extends ServiceEntityRepository
 {
-    public function __construct(ManagerRegistry $registry)
+    private Paginator $paginator;
+
+    public function __construct(ManagerRegistry $registry, Paginator $paginator)
     {
         parent::__construct($registry, Monitor::class);
+        $this->paginator = $paginator;
     }
 
-//    /**
+    public function getUserMonitorsPaginated(UserInterface $user, int $page, int $perPage)
-//     * @return MovieMonitor[] Returns an array of MovieMonitor objects
+    {
-//     */
+        $query = $this->createQueryBuilder('m')
-//    public function findByExampleField($value): array
+            ->andWhere('m.status IN (:statuses)')
-//    {
+            ->andWhere('m.user = :user')
-//        return $this->createQueryBuilder('m')
+            ->orderBy('m.id', 'ASC')
-//            ->andWhere('m.exampleField = :val')
+            ->setParameter('statuses', ['Active', 'New', 'In Progress', 'Complete'])
-//            ->setParameter('val', $value)
+            ->setParameter('user', $user)
-//            ->orderBy('m.id', 'ASC')
+            ->getQuery();
-//            ->setMaxResults(10)
-//            ->getQuery()
-//            ->getResult()
-//        ;
-//    }
 
-//    public function findOneBySomeField($value): ?MovieMonitor
+        return $this->paginator->paginate($query, $page, $perPage);
-//    {
+    }
-//        return $this->createQueryBuilder('m')
-//            ->andWhere('m.exampleField = :val')
-//            ->setParameter('val', $value)
-//            ->getQuery()
-//            ->getOneOrNullResult()
-//        ;
-//    }
 }

src/Twig/Components/ActiveDownloadList.php

@@ -1,25 +0,0 @@
-<?php
-
-namespace App\Twig\Components;
-
-use App\Download\Framework\Repository\DownloadRepository;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
-use Symfony\UX\LiveComponent\Attribute\LiveAction;
-use Symfony\UX\LiveComponent\DefaultActionTrait;
-
-#[AsLiveComponent]
-final class ActiveDownloadList extends AbstractController
-{
-    use DefaultActionTrait;
-
-    public function __construct(
-        private DownloadRepository $downloadRepository,
-    ) {}
-
-    #[LiveAction]
-    public function getDownloads()
-    {
-        return $this->getUser()->getActiveDownloads();
-    }
-}

src/Twig/Components/DownloadList.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Download\Framework\Repository\DownloadRepository;
+use App\Util\Paginator;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class DownloadList extends AbstractController
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true)]
+    public string $type;
+
+    #[LiveProp(writable: true)]
+    public int $pageNumber = 1;
+
+    #[LiveProp(writable: true)]
+    public int $perPage = 5;
+
+    #[LiveProp(writable: true)]
+    public bool $isWidget = true;
+
+    public function __construct(
+        private readonly DownloadRepository $downloadRepository,
+    ) {}
+
+    public function getDownloads()
+    {
+        if ($this->type === "active") {
+            return $this->downloadRepository->getActivePaginated($this->getUser(), $this->pageNumber, $this->perPage);
+        } elseif ($this->type === "complete") {
+            return $this->downloadRepository->getCompletePaginated($this->getUser(), $this->pageNumber, $this->perPage);
+        }
+
+        return [];
+    }
+
+    #[LiveAction]
+    public function paginate(#[LiveArg] int $page)
+    {
+        $this->pageNumber = $page;
+    }
+}

src/Twig/Components/Header.php

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

src/Twig/Components/MonitorList.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Monitor\Framework\Repository\MonitorRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class MonitorList extends AbstractController
+{
+    public bool $isWidget = true;
+
+    public function __construct(
+        private readonly MonitorRepository $monitorRepository,
+    ) {}
+
+    #[LiveAction]
+    public function getUserMonitors(#[LiveArg] int $page = 1, #[LiveArg] int $perPage = 5)
+    {
+        return $this->monitorRepository->getUserMonitorsPaginated($this->getUser(), $page, $perPage);
+    }
+}

src/Twig/Components/StatusBadge.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class StatusBadge
+{
+}

src/User/Framework/Controller/Web/PreferencesController.php

@@ -15,7 +15,10 @@ use App\Util\CountryLanguages;
 use App\Util\ProviderList;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Mercure\HubInterface;
+use Symfony\Component\Mercure\Update;
 use Symfony\Component\Routing\Attribute\Route;
 
 class PreferencesController extends AbstractController
@@ -24,6 +27,7 @@ class PreferencesController extends AbstractController
         private readonly PreferencesRepository $preferencesRepository,
         private readonly SaveUserMediaPreferencesHandler $saveUserMediaPreferencesHandler,
         private readonly Security $security,
+        private readonly HubInterface $hub,
     ) {}
     #[Route('/media/preferences', 'app_media_preferences', methods: ['GET'])]
     public function mediaPreferences(): Response
@@ -54,6 +58,7 @@ class PreferencesController extends AbstractController
 
     #[Route('/media/preferences', 'app_save_media_preferences', methods: ['POST'])]
     public function saveMediaPreferences(
+        Request $request,
         SaveUserMediaPreferencesInput $input,
     ): Response
     {
@@ -63,6 +68,15 @@ class PreferencesController extends AbstractController
         $languages = CountryLanguages::$languages;
         sort($languages);
 
+        $this->hub->publish(new Update(
+            $request->getSession()->get('mercure_alert_topic'),
+            $this->renderView('broadcast/Alert.stream.html.twig', [
+                'alert_id' => uniqid(),
+                'title' => 'Success',
+                'message' => 'Your media preferences have been saved.',
+            ])
+        ));
+
         return $this->render(
             'user/preferences.html.twig',
             [

src/User/Framework/Entity/User.php

@@ -48,7 +48,7 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
      * @var Collection<int, Monitor>
      */
     #[ORM\OneToMany(targetEntity: Monitor::class, mappedBy: 'user', orphanRemoval: true)]
-    private Collection $yes;
+    private Collection $monitors;
 
     /**
      * @var Collection<int, Download>
@@ -59,7 +59,7 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     public function __construct()
     {
         $this->userPreferences = new ArrayCollection();
-        $this->yes = new ArrayCollection();
+        $this->monitors = new ArrayCollection();
         $this->downloads = new ArrayCollection();
     }
 
@@ -226,27 +226,27 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     /**
      * @return Collection<int, Monitor>
      */
-    public function getYes(): Collection
+    public function getMonitors(): Collection
     {
-        return $this->yes;
+        return $this->monitors;
     }
 
-    public function addYe(Monitor $ye): static
+    public function addMonitor(Monitor $monitor): static
     {
-        if (!$this->yes->contains($ye)) {
+        if (!$this->monitors->contains($monitor)) {
-            $this->yes->add($ye);
+            $this->monitors->add($monitor);
-            $ye->setUser($this);
+            $monitor->setUser($this);
         }
 
         return $this;
     }
 
-    public function removeYe(Monitor $ye): static
+    public function removeMonitor(Monitor $monitor): static
     {
-        if ($this->yes->removeElement($ye)) {
+        if ($this->monitors->removeElement($monitor)) {
             // set the owning side to null (unless already changed)
-            if ($ye->getUser() === $this) {
+            if ($monitor->getUser() === $this) {
-                $ye->setUser(null);
+                $monitor->setUser(null);
             }
         }
 
@@ -302,4 +302,14 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
 
         return $this;
     }
+
+    public function queryDownloads(string $type = 'complete', int $limit = 5)
+    {
+        if ($type === 'complete') {
+            return $this->downloads->filter(fn($item) => in_array($item->getStatus(), ['Complete']))->slice(0, $limit);
+        } elseif ($type === 'in-progress') {
+            return $this->downloads->filter(fn($item) => in_array($item->getStatus(), ['New', 'In Progress']))->slice(0, $limit);
+        }
+        return [];
+    }
 }

src/User/Framework/Security/LdapUserProvider.php

@@ -156,7 +156,7 @@ class LdapUserProvider implements UserProviderInterface, PasswordUpgraderInterfa
             $extraFields[$field] = $this->getAttributeValue($entry, $field);
         }
 
-        $dbUser = $this->getDbUser($identifier);
+        $dbUser = $this->getDbUser($identifier, $entry);
 
         if (null === $dbUser) {
             $dbUser = new User();
@@ -164,9 +164,9 @@ class LdapUserProvider implements UserProviderInterface, PasswordUpgraderInterfa
         }
 
         $dbUser
-            ->setName($entry->getAttribute($this->displayNameAttribute)[0] ?? null)
+            ->setName( $this->getAttributeValue($entry, $this->displayNameAttribute)[0] ?? null)
-            ->setEmail($entry->getAttribute($this->emailAttribute)[0] ?? null)
+            ->setEmail($this->getAttributeValue($entry, $this->emailAttribute)[0] ?? null)
-            ->setUsername($entry->getAttribute($this->usernameAttribute)[0] ?? null);
+            ->setUsername($this->getAttributeValue($entry, $this->usernameAttribute) ?? null);
 
         $this->userRepository->getEntityManager()->persist($dbUser);
         $this->userRepository->getEntityManager()->flush();
@@ -174,13 +174,22 @@ class LdapUserProvider implements UserProviderInterface, PasswordUpgraderInterfa
         return $dbUser;
     }
 
-    private function getDbUser(string $identifier): ?UserInterface
+    private function getDbUser(string $identifier, Entry $entry): ?UserInterface
     {
         if (in_array($this->uidKey, ['mail', 'email'])) {
-            return $this->userRepository->findOneBy(['email' => $identifier]);
+            $dbUser = $this->userRepository->findOneBy(['email' => $identifier]);
         } else {
-            return $this->userRepository->findOneBy(['username' => $identifier]);
+            $dbUser = $this->userRepository->findOneBy(['username' => $identifier]);
         }
+
+        // Attempt to map LDAP user to existing user
+        if (null === $dbUser) {
+            if ($entry->hasAttribute($this->emailAttribute)) {
+                $dbUser = $this->userRepository->findOneBy(['email' => $this->getAttributeValue($entry, $this->emailAttribute)]);;
+            }
+        }
+
+        return $dbUser;
     }
 
     private function getAttributeValue(Entry $entry, string $attribute): mixed

src/Util/Paginator.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Util;
+
+use Doctrine\ORM\Query;
+use Doctrine\ORM\QueryBuilder;
+use Doctrine\ORM\Tools\Pagination\Paginator as OrmPaginator;
+
+class Paginator
+{
+    /**
+     * @var integer
+     */
+    private $total;
+
+    /**
+     * @var integer
+     */
+    private $lastPage;
+
+    private $items;
+
+    public $currentPage = 1;
+
+    /**
+     * @param QueryBuilder|Query $query
+     * @param int $page
+     * @param int $limit
+     * @return Paginator
+     */
+    public function paginate($query, int $page = 1, int $limit = 5): Paginator
+    {
+        $paginator = new OrmPaginator($query);
+
+        $paginator
+            ->getQuery()
+            ->setFirstResult($limit * ($page - 1))
+            ->setMaxResults($limit);
+
+        $this->total = $paginator->count();
+        $this->lastPage = (int) ceil($paginator->count() / $paginator->getQuery()->getMaxResults());
+        $this->items = $paginator;
+        $this->currentPage = $page;
+
+        return $this;
+    }
+
+    public function getTotal(): int
+    {
+        return $this->total;
+    }
+
+    public function getLastPage(): int
+    {
+        return $this->lastPage;
+    }
+
+    public function getItems()
+    {
+        return $this->items;
+    }
+}

templates/base.html.twig

@@ -19,7 +19,7 @@
             </div>
             <div class="col-span-5 h-screen overflow-y-scroll">
                 <twig:Header />
-                <h2 class="px-2 mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
+                <h2 class="px-4 my-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
                 {% block body %}{% endblock %}
             </div>
         </div>

templates/broadcast/Download.stream.html.twig

@@ -1,21 +1,26 @@
 {# Learn how to use Turbo Streams: https://github.com/symfony/ux-turbo#broadcast-doctrine-entities-update #}
 {% block create %}
+    <turbo-stream action="remove" target="active_downloads_no_downloads">
+    </turbo-stream>
+
     <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-end text-gray-800 dark:text-gray-50">
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
-                    <span class="p-1.5 bg-purple-600 rounded-full">
+                    {% if entity.progress < 100 %}
-                        <span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
+                        <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>
+                            {{ entity.progress }}
+                        </div>
+                    {% else %}
+                        <twig:StatusBadge color="green" status="Complete" />
+                    {% endif %}
                 </td>
             </tr>
         </template>
     </turbo-stream>
-
-    <twig:Alert title="Success" message="{{ entity.title }} has been added to the Download queue" alert_id="{{ entity.id }}" data-controller="alert" />
 {% endblock %}
 
 {% block update %}
@@ -27,12 +32,15 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
                     <span class="p-1.5 bg-purple-600 rounded-full">
-                        <span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
+                        <span class="mw-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
                     </span>
                 </td>
             </template>
         </turbo-stream>
     {% else %}
+        <turbo-stream action="remove" target="complete_downloads_no_downloads">
+        </turbo-stream>
+
         <turbo-stream action="remove" target="ad_download_{{ id }}">
         </turbo-stream>
 
@@ -42,16 +50,14 @@
             </template>
         </turbo-stream>
 
-        <turbo-stream action="prepend" target="recent_downloads">
+        <turbo-stream action="prepend" target="complete_downloads">
             <template>
-                <tr id="recent_download_{{ entity.id }}">
+                <tr  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-end text-gray-800 dark:text-gray-50">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
-                    <span class="p-1.5 bg-purple-600 rounded-full">
+                        <twig:StatusBadge color="green" status="Complete" />
-                        <span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
-                    </span>
                     </td>
                 </tr>
             </template>
@@ -61,5 +67,4 @@
 
 {% block remove %}
     <turbo-stream action="remove" target="ad_download_{{ id }}"></turbo-stream>
-{#    <turbo-stream action="remove" target="cd_download_{{ id }}"></turbo-stream>#}
 {% endblock %}

templates/components/ActiveDownloadList.html.twig

@@ -1,39 +0,0 @@
-<div{{ attributes }} class="min-w-48">
-    <table id="active_downloads" class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50 table-fixed" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
-        <thead>
-        <tr class="dark:bg-gray-50">
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800  min-w-[55ch] max-w-[55ch] truncate">
-                Title
-            </th>
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
-                Progress
-            </th>
-        </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 dark:divide-gray-50">
-        {% if this.getDownloads()|length > 0 %}
-            {% for download in this.getDownloads() %}
-                <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>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
-                        <span class="p-1.5 bg-purple-600 rounded-full">
-                            <span class="w-4 inline-block text-center text-gray-50">{{ download.progress }}</span>
-                        </span>
-                    </td>
-                </tr>
-            {% endfor %}
-        {% else %}
-            <tr>
-                <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-gray-800 dark:text-stone-800" colspan="2">
-                    No active downloads
-                </td>
-            </tr>
-        {% endif %}
-        </tbody>
-    </table>
-</div>
-

templates/components/Card.html.twig

@@ -1,9 +1,9 @@
 <div{{ attributes }}>
-    <div class="flex flex-col bg-white border border-gray-200 border-t-4 border-t-orange-500 shadow-2xs rounded-xl dark:bg-sky-950 dark:border-neutral-700 dark:border-t-orange-500 dark:shadow-neutral-700/70
+    <div class="flex flex-col bg-sky-950 border-neutral-700 border-t-4 border-t-orange-500 rounded-xl
-    dark:backdrop-filter dark:backdrop-blur-md dark:bg-opacity-40
+     backdrop-filter backdrop-blur-md bg-opacity-40
 ">
         <div class="p-4 md:p-5">
-            <h3 class="mb-4 text-lg font-bold text-gray-800 dark:text-white">
+            <h3 class="mb-4 text-lg font-bold text-white">
                 {{ title }}
             </h3>
 

templates/components/DownloadList.html.twig

@@ -0,0 +1,80 @@
+<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-auto w-full" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
+        <thead>
+        <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 {% if this.isWidget == true %}min-w-[45ch] max-w-[45ch]{% endif %} truncate">
+                Title
+            </th>
+
+            {% if this.isWidget == false %}
+                <th scope="col"
+                    class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate">
+                    Filename
+                </th>
+                <th scope="col"
+                    class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate">
+                    Media type
+                </th>
+            {% endif %}
+
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
+                Progress
+            </th>
+        </tr>
+        </thead>
+        <tbody id="{{ table_body_id }}" class="divide-y divide-gray-200 dark:divide-gray-50">
+        {% if this.downloads.items|length > 0 %}
+            {% for download in this.downloads.items %}
+                <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 {% if this.isWidget == true %}min-w-[45ch] max-w-[45ch]{% endif %} truncate">
+                        {{ download.title }}
+                    </td>
+
+                    {% if this.isWidget == false %}
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
+                            {{ download.filename }}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
+                            {{ download.mediaType }}
+                        </td>
+                    {% endif %}
+
+                    <td class="px-6 py-4 whitespace-nowrap text-sm align-middle text-gray-800 dark:text-gray-50">
+                        {% if download.progress < 100 %}
+                        <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">
+                            {{ download.progress }}
+                        </div>
+                        {% else %}
+                            <twig:StatusBadge color="green" status="Completed" />
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+            {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
+                <tr  id="download_view_all">
+                    <td class="py-2 whitespace-nowrap bg-orange-500 uppercase text-sm font-medium text-center text-white truncate" colspan="100%">
+                        <a href="{{ path('app_downloads') }}">View All Downloads</a>
+                    </td>
+                </tr>
+            {% endif %}
+        {% else %}
+            <tr id="{{ table_body_id }}_no_downloads">
+                <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center font-medium text-gray-800 dark:text-stone-800" colspan="100%">
+                    No downloads
+                </td>
+            </tr>
+        {% endif %}
+        </tbody>
+    </table>
+
+    {% if this.isWidget == false %}
+        {% if this.downloads.items|length > 0 %}
+            {% set paginator = this.downloads %}
+            {% include 'partial/paginator.html.twig' %}
+        {% endif %}
+    {% endif %}
+</div>
+

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>
@@ -16,7 +34,7 @@
             </div>
         </div>
     </div>
-    <div {{ turbo_stream_listen('alerts') }} class="absolute top-10 right-10">
+    <div {{ turbo_stream_listen(app.session.get('mercure_alert_topic')) }} class="absolute top-10 right-10">
         <div >
             <ul id="alert_list">
             </ul>

templates/components/MonitorList.html.twig

@@ -0,0 +1,79 @@
+<div{{ attributes }} class="min-w-48">
+    <p class="text-white mb-1">The items you're currently monitoring to automatically download.</p>
+    <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>
+        <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase  min-w-[45ch] max-w-[45ch] truncate">
+                Title
+            </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                Search Count
+            </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                Created at
+            </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                Last Search Date
+            </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                Status
+            </th>
+        </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-50">
+        {% if this.userMonitors.items|length > 0 %}
+            {% for monitor in this.userMonitors.items %}
+                <tr  id="monitor_{{ monitor.id }}">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
+                        {{ monitor.title }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ monitor.searchCount }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ monitor.createdAt|date('m/d/Y h:i a') }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ monitor.lastSearch|date('m/d/Y h:i a') }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {% if monitor.status == "New" %}
+                            <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
+                        {% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
+                            <twig:StatusBadge color="purple" status="{{ monitor.status }}" />
+                        {% else %}
+                            <twig:StatusBadge color="green" status="{{ monitor.status }}" />
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+            {% if this.userMonitors.items|length > 5 %}
+                <tr  id="monitor_view_all">
+                    <td colspan="5" class="py-2 whitespace-nowrap bg-orange-500 uppercase text-sm font-medium text-center text-white min-w-[50ch] max-w-[50ch] truncate">
+                        <a href="#">View All Monitors</a>
+                    </td>
+                </tr>
+            {% endif %}
+        {% else %}
+            <tr>
+                <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-stone-800" colspan="2">
+                    No monitors
+                </td>
+            </tr>
+        {% endif %}
+        </tbody>
+    </table>
+
+    {% if this.isWidget == false %}
+        {% if this.userMonitors.items|length > 0 %}
+            {% set paginator = this.userMonitors %}
+            {% include 'partial/paginator.html.twig' %}
+        {% endif %}
+    {% endif %}
+</div>
+

templates/components/NavBar.html.twig

@@ -12,40 +12,12 @@
             </li>
 
             <li>
-                <details class="group [&_summary::-webkit-details-marker]:hidden">
+                <a href="{{ path('app_downloads') }}"
-                    <summary class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60">
+                   class="block rounded-lg
-                        <span class="text-sm font-medium">Downloads</span>
+                         bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
-                        <span class="shrink-0 transition duration-300 group-open:-rotate-180">
+                         px-4 py-2 text-sm font-medium text-gray-50">
-              <svg
+                    Downloads
-                      xmlns="http://www.w3.org/2000/svg"
+                </a>
-                      class="size-5"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-              >
-                <path
-                        fill-rule="evenodd"
-                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                        clip-rule="evenodd"
-                />
-              </svg>
-            </span>
-                    </summary>
-                    <ul class="mt-2 space-y-1 px-4">
-                        <li>
-                            <a href="{{ path('app_search') }}"
-                               class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
-                                In Progress
-                            </a>
-                        </li>
-
-                        <li>
-                            <a href="{{ path('app_search') }}"
-                               class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
-                                Complete
-                            </a>
-                        </li>
-                    </ul>
-                </details>
             </li>
 
             <li>

templates/components/SearchBar.html.twig

@@ -13,13 +13,12 @@
             <button
                     class="absolute top-1 right-1 flex items-center rounded
                     bg-green-600 py-1 px-2.5 border border-transparent text-center
-                    text-sm text-white transition-all shadow-sm hover:shadow
+                    text-sm text-white transition-all
-                    focus:bg-green-700 focus:shadow-none active:bg-green-700
+                    focus:bg-green-700 active:bg-green-700 hover:bg-green-700
-                    hover:bg-green-700 active:shadow-none disabled:pointer-events-none
-                    disabled:opacity-50 disabled:shadow-none
 
-                    text-white bg-green-800 bg-opacity-60 text-sm
+                    text-white bg-green-600 text-sm
-                    hover:bg-green-900 border border-green-500
+                    border border-green-500
+                    backdrop-filter backdrop-blur-md bg-opacity-80
 "
                     type="submit"
             >

templates/components/StatusBadge.html.twig

@@ -0,0 +1,3 @@
+<span {{ attributes }} class="py-[3px] px-[7px] bg-{{ color|default('green') }}-600 rounded-lg inline-block text-center text-xs text-white">
+    {{ status }}
+</span>

templates/downloads/index.html.twig

@@ -0,0 +1,18 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Downloads — Torsearch{% endblock %}
+{% block h2 %}Downloads{% endblock %}
+
+{% block body %}
+    <div class="p-4">
+        <twig:Card title="Active Downloads">
+            <twig:DownloadList type="active" :isWidget="false" :perPage="10"></twig:DownloadList>
+        </twig:Card>
+    </div>
+
+    <div class="p-4">
+        <twig:Card title="Recent Downloads">
+            <twig:DownloadList type="complete" :isWidget="false" :perPage="10"></twig:DownloadList>
+        </twig:Card>
+    </div>
+{% endblock %}

templates/index/index.html.twig

@@ -7,51 +7,16 @@
         <h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
         <div class="flex flex-row gap-4">
             <twig:Card title="Active Downloads" class="w-full">
-                <twig:ActiveDownloadList />
+                <twig:DownloadList :type="'active'" />
             </twig:Card>
 
             <twig:Card title="Recent Downloads" class="w-full">
-                <table id="recent_downloads" class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50 table-fixed">
+                <twig:DownloadList :type="'complete'" />
-                    <thead>
+            </twig:Card>
-                    <tr class="dark:bg-gray-50">
+        </div>
-                        <th scope="col"
+        <div class="flex flex-row gap-4">
-                            class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 rounded-tl-md">
+            <twig:Card title="Monitors" class="w-full">
-                            Title
+                <twig:MonitorList />
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
-                            Status
-                        </th>
-                    </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-200 dark:divide-gray-50">
-                    {% if recent_downloads|length > 0 %}
-                        {% for download in recent_downloads %}
-                            <tr>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
-                                    {{ download.title }}
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
-                                    <span class="p-1 bg-green-600 rounded-lg">
-                                        <span class="text-gray-50">Complete</span>
-                                    </span>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                        <tr class="bg-blue-400">
-                            <td class="px-6 py-3 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-rose-400 dark:text-stone-800" colspan="2">
-                                <a href="#">View all downloads</a>
-                            </td>
-                        </tr>
-                    {% else %}
-                        <tr>
-                            <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-gray-800 dark:text-stone-800" colspan="2">
-                                No recent downloads
-                            </td>
-                        </tr>
-                    {% endif %}
-                    </tbody>
-                </table>
             </twig:Card>
         </div>
         <div class="flex flex-col gap-4">

templates/partial/alert-status.html.twig

@@ -0,0 +1,5 @@
+{# The status indicator for the Alert button. Rendering this will add a small colored span
+   to the Alert button, indicating there are unread alerts.
+#}
+
+<span style="display: block;width: 8px;height: 8px;background: greenyellow;border-radius: 5px; z-index: 1000;margin-left: -10px;margin-bottom: -10px;"></span>

templates/partial/paginator.html.twig

@@ -0,0 +1,83 @@
+{% set _currentPage = paginator.currentPage ?: 1 %}
+{% set _lastPage = paginator.lastPage %}
+{% set _showingPerPage = (_currentPage == _lastPage) ? paginator.total - (this.perPage * (_lastPage - 1))  : paginator.items.query.maxResults %}
+
+<p class="text-white mt-1">Showing {{ _showingPerPage }} of {{ paginator.total }} total results</p>
+
+{% if paginator.lastPage > 1 %}
+    <nav>
+        <ul class="mt-2 flex flex-row justify-content-center gap-1 py-1 text-white text-sm">
+            <li class="page-item{{ _currentPage <= 1 ? ' disabled' : '' }}">
+                <a {% if _currentPage > 1 %}
+                   data-action="click->live#action"
+                   data-live-action-param="paginate"
+                   data-live-page-param="{{ _currentPage - 1 }}"
+                   {% endif %}
+                   class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
+                   aria-label="Previous"
+                   href="#"
+                >
+                    &laquo;
+                </a>
+            </li>
+            {% set startPage = max(1, _currentPage - 2) %}
+            {% set endPage = min(_lastPage, startPage + 4) %}
+            {% if startPage > 1 %}
+                <li class="page-item">
+                    <a data-action="click->live#action"
+                       data-live-action-param="paginate"
+                       data-live-page-param="{{ "1"|number_format }}"
+                       class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
+                       aria-label="Next"
+                       href="#"
+                    >1</a>
+                </li>
+                {% if startPage > 2 %}
+                    <li class="page-item disabled">
+                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle">...</span>
+                    </li>
+                {% endif %}
+            {% endif %}
+            {% for i in startPage..endPage %}
+                <li class="page-item}">
+                    <a data-action="click->live#action"
+                        data-live-action-param="paginate"
+                        data-live-page-param="{{ i|number_format }}"
+                        class="page-link px-2.5 py-1 rounded-lg bg-orange-500 text-white align-middle"
+                        {% if i == _currentPage %}style="background-color: #fff; color: darkorange; border: 2px solid darkorange;"{% endif %}
+                        href="#"
+                    >{{ i }}</a>
+                </li>
+            {% endfor %}
+            {% if endPage < _lastPage %}
+                {% if endPage < _lastPage - 1 %}
+                    <li class="page-item disabled">
+                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle">...</span>
+                    </li>
+                {% endif %}
+                <li class="page-item">
+                    <a data-action="click->live#action"
+                       data-live-action-param="paginate"
+                       data-live-page-param="{{ _lastPage }}"
+                       class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
+                       aria-label="Next"
+                       href="#"
+                    >{{ _lastPage }}</a>
+                </li>
+            {% endif %}
+            <li class="page-item {{ _currentPage >= paginator.lastPage ? ' disabled' : '' }}">
+                <a {% if _currentPage < _lastPage %}
+                   data-action="click->live#action"
+                   data-live-action-param="paginate"
+                   data-live-page-param="{{ _currentPage + 1 }}"
+                   {% endif %}
+                   class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
+                   aria-label="Next"
+                   href="#"
+                >
+                    &raquo;
+                </a>
+            </li>
+        </ul>
+    </nav>
+{% endif %}