Show built/queued/building stats on mobile nav

frontend/src/components/MainNav.vue

@@ -29,11 +29,13 @@
 
         <!-- Mobile: Compact stats -->
         <div v-else-if="!statsStore.state.loading && !statsStore.state.error" class="mobile-stats">
-          <span class="mobile-stat mobile-stat--success">
+          <span
-            {{ statsStore.state.stats?.latest || 0 }}
+            v-for="(stat, key) in mobileStats"
-          </span>
+            :key="key"
-          <span class="mobile-stat mobile-stat--error">
+            :aria-label="`${key} packages`"
-            {{ statsStore.state.stats?.failed || 0 }}
+            :class="['mobile-stat', `mobile-stat--${stat.color}`]">
+            <span class="mobile-stat__count">{{ stat.count }}</span>
+            <span class="mobile-stat__label">{{ key }}</span>
           </span>
         </div>
 
@@ -72,6 +74,24 @@ const goHome = () => {
 const isTablet = computed(() => mobile && width.value >= 650 && width.value < 960)
 const isDesktop = computed(() => !mobile.value && !isTablet.value)
 
+const mobileStats = computed(() => {
+  const packages = packagesStore.state.currentlyBuildingPackages
+  return {
+    built: {
+      count: packages.filter((pkg) => pkg.status === 'built').length,
+      color: 'success'
+    },
+    queued: {
+      count: packages.filter((pkg) => pkg.status === 'queued').length,
+      color: 'warning'
+    },
+    building: {
+      count: packages.filter((pkg) => pkg.status === 'building').length,
+      color: 'info'
+    }
+  }
+})
+
 const appTitle = 'ALHP Status'
 const repoUrl = 'https://somegit.dev/ALHP/ALHP.GO'
 const maxContainerWidth = '1440px'
@@ -157,25 +177,64 @@ const containerClasses = computed(() => ({
 }
 
 .mobile-stat {
-  font-size: var(--font-size-sm);
+  display: flex;
-  font-weight: var(--font-weight-semibold);
+  flex-direction: column;
-  font-family: var(--font-family-mono);
+  align-items: center;
   padding: var(--space-1) var(--space-2);
   border-radius: var(--radius-sm);
   background: var(--color-bg-tertiary);
+  min-width: 52px;
 }
 
-.mobile-stat--success {
+.mobile-stat__count {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family-mono);
+}
+
+.mobile-stat__label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  text-transform: capitalize;
+}
+
+.mobile-stat--success .mobile-stat__count {
   color: var(--color-status-success);
 }
 
-.mobile-stat--error {
+.mobile-stat--warning .mobile-stat__count {
-  color: var(--color-status-error);
+  color: var(--color-status-warning);
+}
+
+.mobile-stat--info .mobile-stat__count {
+  color: var(--color-status-info);
 }
 
 @media (max-width: 600px) {
   .app-title {
     font-size: var(--font-size-lg);
   }
+
+  .repo-link {
+    display: none;
+  }
+
+  .mobile-stats {
+    gap: var(--space-1);
+  }
+
+  .mobile-stat {
+    flex: 1;
+    min-width: 40px;
+    padding: var(--space-1);
+  }
+
+  .mobile-stat__count {
+    font-size: var(--font-size-xs);
+  }
+
+  .mobile-stat__label {
+    font-size: 9px;
+  }
 }
 </style>