fixed image and added priority

src/app/models/category.model.ts

@@ -3,6 +3,7 @@ export interface Category {
   name: string;
   parentID: number;
   icon?: string;
-  wideBanner?: string;
+  wideBanner?: string | boolean;
   itemCount?: number;
+  priority?: number;
 }

src/app/pages/home/home.component.html

@@ -130,7 +130,7 @@
                  class="dexar-category-card" 
                  [class.dexar-category-card--wide]="isWideCategory(category.categoryID)">
                 <div class="dexar-category-image">
-                  @if (isWideCategory(category.categoryID) && category.wideBanner) {
+                  @if (isWideCategory(category.categoryID) && category.wideBanner && category.wideBanner !== true) {
                     <img [src]="category.wideBanner" [alt]="category.name" loading="lazy" decoding="async" />
                   } @else if (category.icon) {
                     <img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />

src/app/pages/home/home.component.ts

@@ -22,7 +22,9 @@ export class HomeComponent implements OnInit {
   
   // Memoized computed values for performance
   topLevelCategories = computed(() => {
-    return this.categories().filter(cat => cat.parentID === 0);
+    return this.categories()
+      .filter(cat => cat.parentID === 0)
+      .sort((a, b) => (a.priority ?? Infinity) - (b.priority ?? Infinity));
   });
 
   // Memoized item count lookup
@@ -83,8 +85,14 @@ export class HomeComponent implements OnInit {
   private detectWideImages(categories: Category[]): void {
     const topLevel = categories.filter(c => c.parentID === 0);
     topLevel.forEach(cat => {
-      const src = cat.wideBanner || null;
+      if (!cat.wideBanner) return;
-      if (!src) return;
+
+      // API may send wideBanner as a boolean flag instead of a URL
+      if (cat.wideBanner === true) {
+        this.wideCategories.update(set => { const next = new Set(set); next.add(cat.categoryID); return next; });
+        return;
+      }
+
       const img = new Image();
       img.onload = () => {
         const ratio = img.naturalWidth / img.naturalHeight;
@@ -96,7 +104,7 @@ export class HomeComponent implements OnInit {
           });
         }
       };
-      img.src = src;
+      img.src = cat.wideBanner as string;
     });
   }