Add badge for images with alt text, match CLI sorting to panel view, prettier focus outlines

Author: medienbaecker

commands/generate.php

@@ -182,6 +182,7 @@ private function collectAllImages(array $languages): array
 					$imagesByHash[$hash] = [
 						'instances' => [],
 						'needsProcessing' => false,
+						'firstOrder' => $totalScanned, // Track order of first occurrence
 					];
 				}
 
@@ -265,6 +266,11 @@ private function processImages(array $imagesByHash, array $languages): void
 		$errors = 0;
 		$uniqueImagesProcessed = 0;
 
+		// Sort hash groups by first occurrence order to match panel view
+		uasort($imagesByHash, function ($a, $b) {
+			return $a['firstOrder'] - $b['firstOrder'];
+		});
+
 		// Process by language to avoid immutable object issues
 		foreach ($languages as $language) {
 			$languageCode = $language?->code();

index.css

@@ -82,6 +82,19 @@
 					}
 
 					$totalImages = count($allImages);
+					
+					// Calculate totals for header badges
+					$totalWithAltText = 0;
+					$totalReviewed = 0;
+					foreach ($allImages as $imageData) {
+						if (!empty($imageData['alt']) && trim($imageData['alt']) !== '') {
+							$totalWithAltText++;
+						}
+						if ($imageData['alt_reviewed']) {
+							$totalReviewed++;
+						}
+					}
+					
 					$totalPages = ceil($totalImages / $limit);
 					$offset = ($page - 1) * $limit;
 					$paginatedImages = array_slice($allImages, $offset, $limit);
@@ -95,6 +108,11 @@
 							'limit' => $limit,
 							'start' => $offset + 1,
 							'end' => min($offset + $limit, $totalImages)
+						],
+						'totals' => [
+							'withAltText' => $totalWithAltText,
+							'reviewed' => $totalReviewed,
+							'total' => $totalImages
 						]
 					];
 				}