From b4c2effa2470c7ce093cfaa7420b051a790b012b Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 11 Apr 2024 16:01:56 -0400
Subject: [PATCH] Fixes

---
 .../components/addons/AddOnsNavigation.svelte |  2 +-
 src/lib/components/common/Empty.svelte        |  1 +
 src/routes/app/add-ons/+page.svelte           | 23 +++++++++++++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/addons/AddOnsNavigation.svelte b/src/lib/components/addons/AddOnsNavigation.svelte
index f73246228..f161434d2 100644
--- a/src/lib/components/addons/AddOnsNavigation.svelte
+++ b/src/lib/components/addons/AddOnsNavigation.svelte
@@ -25,7 +25,7 @@
       All
     </SidebarItem>
     <SidebarItem
-      active={active === "pinned"}
+      active={active === "active"}
       href="/app/add-ons?active=true"
       --hover="var(--orange-light)"
     >
diff --git a/src/lib/components/common/Empty.svelte b/src/lib/components/common/Empty.svelte
index 82dbae30f..88b42311d 100644
--- a/src/lib/components/common/Empty.svelte
+++ b/src/lib/components/common/Empty.svelte
@@ -13,6 +13,7 @@
   .container {
     display: flex;
     padding: 1.5rem;
+    flex: 1 0 0;
     flex-direction: column;
     align-items: center;
     justify-content: center;
diff --git a/src/routes/app/add-ons/+page.svelte b/src/routes/app/add-ons/+page.svelte
index 43a92ac15..be1efd40b 100644
--- a/src/routes/app/add-ons/+page.svelte
+++ b/src/routes/app/add-ons/+page.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { _ } from "svelte-i18n";
-  import { Hourglass24, Infinity16, Star16, StarFill16 } from "svelte-octicons";
+  import {
+    Hourglass24,
+    Infinity16,
+    Plug24,
+    Star16,
+    StarFill16,
+  } from "svelte-octicons";
 
   import AddOnList from "@/addons/browser/AddOnList.svelte";
   import Paginator from "@/common/Paginator.svelte";
@@ -16,6 +22,7 @@
   import Error from "@/lib/components/common/Error.svelte";
   import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
   import Premium from "@/common/icons/Premium.svelte";
+  import ListItem from "@/addons/browser/AddOnListItem.svelte";
   import AddOnsNavigation from "@/lib/components/addons/AddOnsNavigation.svelte";
 
   export let data;
@@ -47,17 +54,17 @@
         <Search slot="center" />
       </PageToolbar>
 
-      {#if hasFilter("active")}
+      {#if active === "active"}
         <aside class="pinned tip">
           <div class="icon"><Pin size={1.75} /></div>
           <p class="message">{$_("addonBrowserDialog.pinnedTip")}</p>
         </aside>
-      {:else if hasFilter("featured")}
+      {:else if active === "featured"}
         <aside class="featured tip">
           <div class="icon"><Star size={1.75} /></div>
           <p class="message">{$_("addonBrowserDialog.featuredTip")}</p>
         </aside>
-      {:else if hasFilter("premium")}
+      {:else if active === "premium"}
         <aside class="premium tip">
           <div class="icon"><Credit badge size={1.75} /></div>
           <p class="message">{$_("addonBrowserDialog.premiumTip")}</p>
@@ -66,9 +73,11 @@
       {#await data.addons}
         <Empty icon={Hourglass24}>Loading…</Empty>
       {:then page}
-        <div class="list">
-          <AddOnList items={page.results} />
-        </div>
+        {#each page.results as addon}
+          <ListItem {addon} />
+        {:else}
+          <Empty icon={Plug24}>No Add-Ons Found</Empty>
+        {/each}
       {:catch error}
         <Error>{String(error)}</Error>
       {/await}