feat(ui): consume REST board fields across modals and flash flow

Adapt ImageModal, BoardBadges, FlashProgress, vendor logo loading,
and the flash operation hook to the new support_tier / format /
companions fields exposed by the REST API. Ensures QDL detection
and badge rendering stay in sync with the backend migration.

Author: SuperKali

src/App.tsx

@@ -218,18 +218,21 @@ function AppContent() {
 
       // Create ImageInfo for the cached image (same pattern as handleCustomImage)
       const cachedImage: ImageInfo = {
-        armbian_version: 'Cached',
+        release: 'Cached',
         distro_release: filename,
         kernel_branch: '',
         kernel_version: '',
         image_variant: 'cached',
         preinstalled_application: '',
         promoted: false,
         file_url: '',
-        file_url_sha: null,
+        direct_url: '',
+        sha_url: null,
         file_size: size,
-        download_repository: 'cache',
-        flash_method: 'block',
+        stability: 'stable',
+        format: 'sd',
+        companions: [],
+        display_variants: [],
         is_custom: true,
         custom_path: imagePath,
       };
@@ -246,14 +249,10 @@ function AppContent() {
         name: boardName || t('custom.customImage'),
         vendor: hasCacheMetadata ? 'detected' : 'cached',
         vendor_name: hasCacheMetadata ? (boardName || 'Unknown') : 'Cached',
-        vendor_logo: null,
+        support_tier: 'community',
         image_count: 1,
-        has_standard_support: false,
-        has_community_support: false,
-        has_platinum_support: false,
-        has_eos_support: false,
-        has_tvb_support: false,
-        has_wip_support: false,
+        has_desktop: false,
+        promoted: false,
       };
 
       setSelectedManufacturer({
@@ -339,18 +338,21 @@ function AppContent() {
 
         // Create a custom ImageInfo object
         const customImage: ImageInfo = {
-          armbian_version: 'Custom',
+          release: 'Custom',
           distro_release: result.name,
           kernel_branch: '',
           kernel_version: '',
           image_variant: 'custom',
           preinstalled_application: '',
           promoted: false,
           file_url: '',
-          file_url_sha: null,
+          direct_url: '',
+          sha_url: null,
           file_size: result.size,
-          download_repository: 'local',
-          flash_method: flashMethod,
+          stability: 'stable',
+          format: flashMethod,
+          companions: [],
+          display_variants: [],
           is_custom: true,
           custom_path: result.path,
         };
@@ -364,14 +366,10 @@ function AppContent() {
           name: t('custom.customImage'),
           vendor: 'custom',
           vendor_name: 'Custom',
-          vendor_logo: null,
+          support_tier: 'community',
           image_count: 1,
-          has_standard_support: false,
-          has_community_support: false,
-          has_platinum_support: false,
-          has_eos_support: false,
-          has_tvb_support: false,
-          has_wip_support: false,
+          has_desktop: false,
+          promoted: false,
         };
 
         // Set manufacturer for display consistency (same pattern as cached image reuse)
@@ -505,7 +503,7 @@ function AppContent() {
         isOpen={activeModal === 'device'}
         onClose={() => setActiveModal('none')}
         onSelect={handleDeviceSelect}
-        flashMethod={selectedImage?.flash_method}
+        flashMethod={selectedImage?.format}
       />
 
       {/* Armbian board detection modal */}

src/components/flash/FlashProgress.tsx

@@ -53,7 +53,7 @@ export function FlashProgress({
     if (image.is_custom) {
       return image.distro_release;
     }
-    return `Armbian ${image.armbian_version} ${image.distro_release}`;
+    return `Armbian ${image.release} ${image.distro_release}`;
   }
 
   /** Stages that show an indeterminate (animated) progress bar instead of a percentage */
@@ -140,7 +140,7 @@ export function FlashProgress({
 
         {stage === 'complete' && (
           <p className="flash-success-hint">
-            {image.flash_method === 'qdl'
+            {image.format === 'qdl'
               ? t('flash.successHintQdl')
               : image.is_custom
                 ? t('flash.successHintCustom')

src/components/modals/ImageModal.tsx

@@ -34,10 +34,10 @@ interface ImageModalProps {
 const IMAGE_FILTER_PREDICATES: Record<Exclude<ImageFilterType, 'all'>, (img: ImageInfo) => boolean> = {
   // Recommended: promoted images
   recommended: (img) => img.promoted === true,
-  // Stable: from archive repository and not trunk version
-  stable: (img) => img.download_repository === 'archive' && !img.armbian_version.includes('trunk'),
-  // Nightly: trunk versions
-  nightly: (img) => img.armbian_version.includes('trunk'),
+  // Stable: stability field is "stable"
+  stable: (img) => img.stability === 'stable',
+  // Nightly: stability field is "nightly"
+  nightly: (img) => img.stability === 'nightly',
   // Apps: has preinstalled application
   apps: (img) => !!(img.preinstalled_application && img.preinstalled_application.length > 0),
   // Barebone/Minimal: no desktop environment and no preinstalled apps
@@ -91,7 +91,7 @@ export function ImageModal({ isOpen, onClose, onSelect, board }: ImageModalProps
   // Use hook for async data fetching
   const { data: allImages, loading, error, reload } = useAsyncDataWhen<ImageInfo[]>(
     isOpen && !!board,
-    () => getImagesForBoard(board!.slug, undefined, undefined, undefined, false),
+    () => getImagesForBoard(board!.slug),
     [isOpen, board?.slug]
   );
 
@@ -117,8 +117,8 @@ export function ImageModal({ isOpen, onClose, onSelect, board }: ImageModalProps
    */
   function handleImageClick(image: ImageInfo) {
     // Check if warning is needed
-    const isNightly = image.armbian_version.includes('trunk');
-    const isCommunityBoard = board?.has_community_support === true;
+    const isNightly = image.stability === 'nightly';
+    const isCommunityBoard = board?.support_tier === 'community';
 
     // No warning for custom images or stable images on supported boards
     if (!isNightly && !isCommunityBoard) {
@@ -236,7 +236,7 @@ export function ImageModal({ isOpen, onClose, onSelect, board }: ImageModalProps
 
                 <div className="list-item-content" style={{ flex: 1 }}>
                   <div className="list-item-title">
-                    Armbian {image.armbian_version} {image.distro_release}
+                    Armbian {image.release} {image.distro_release}
                   </div>
 
                   {/* Side panel with main info */}
@@ -326,7 +326,7 @@ export function ImageModal({ isOpen, onClose, onSelect, board }: ImageModalProps
           isOpen={showUnstableWarning}
           title={t('modal.imageStatusTitle')}
           message={
-            board?.has_community_support === true
+            board?.support_tier === 'community'
               ? t('modal.communityBoardMessage')
               : t('modal.nightlyBuildMessage')
           }

src/components/shared/BoardBadges.tsx

@@ -16,37 +16,37 @@ interface BoardBadgesProps {
 export function BoardBadges({ board, className = '' }: BoardBadgesProps) {
   return (
     <div className={`board-grid-badges ${className}`}>
-      {board.has_platinum_support && (
+      {board.support_tier === 'platinum' && (
         <span className="badge-platinum">
           <Crown size={10} />
           <span>Platinum</span>
         </span>
       )}
-      {board.has_standard_support && !board.has_platinum_support && (
+      {board.support_tier === 'standard' && (
         <span className="badge-standard">
           <Shield size={10} />
           <span>Standard</span>
         </span>
       )}
-      {board.has_community_support && (
+      {board.support_tier === 'community' && (
         <span className="badge-community">
           <Users size={10} />
           <span>Community</span>
         </span>
       )}
-      {board.has_eos_support && (
+      {board.support_tier === 'eos' && (
         <span className="badge-eos">
           <Clock size={10} />
           <span>EOS</span>
         </span>
       )}
-      {board.has_tvb_support && (
+      {board.support_tier === 'tvb' && (
         <span className="badge-tvb">
           <Tv size={10} />
           <span>TV Box</span>
         </span>
       )}
-      {board.has_wip_support && (
+      {board.support_tier === 'wip' && (
         <span className="badge-wip">
           <Wrench size={10} />
           <span>WIP</span>

src/hooks/useFlashOperation.ts

@@ -130,7 +130,7 @@ export function useFlashOperation({
   }, []);
 
   /** Whether the current image uses QDL (Qualcomm EDL) flashing */
-  const isQdlMode = image.flash_method === 'qdl';
+  const isQdlMode = image.format === 'qdl';
 
   /**
    * Check device connection and trigger disconnect handler if missing
@@ -275,7 +275,7 @@ export function useFlashOperation({
     }, POLLING.DOWNLOAD_PROGRESS);
 
     try {
-      const path = await downloadImage(image.file_url, image.file_url_sha);
+      const path = await downloadImage(image.file_url, image.sha_url);
       setImagePath(path);
       if (intervalRef.current) clearInterval(intervalRef.current);
       startFlash(path);

src/hooks/useVendorLogos.ts

@@ -1,6 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import type { BoardInfo } from '../types';
-import { preloadImage } from '../utils';
 import { getCachedVendorLogo } from './useTauri';
 import { VENDOR } from '../config';
 
@@ -29,18 +28,19 @@ export function useVendorLogos(boards: BoardInfo[] | null, isActive: boolean) {
     }
   }, [isActive]);
 
-  // Preload logos via local cache, falling back to remote
+  // Preload logos via local cache using vendor slugs
   useEffect(() => {
     if (!isActive || !boards?.length || state.isLoaded) return;
 
-    const vendorLogos = new Map<string, string>();
+    // Collect unique vendor slugs from boards
+    const vendorSlugs = new Set<string>();
     for (const board of boards) {
-      if (board.vendor && board.vendor !== VENDOR.FALLBACK_ID && board.vendor_logo) {
-        vendorLogos.set(board.vendor, board.vendor_logo);
+      if (board.vendor && board.vendor !== VENDOR.FALLBACK_ID) {
+        vendorSlugs.add(board.vendor);
       }
     }
 
-    if (vendorLogos.size === 0) {
+    if (vendorSlugs.size === 0) {
       setState({ failedLogos: new Set(), cachedUrls: new Map(), isLoaded: true });
       return;
     }
@@ -49,24 +49,19 @@ export function useVendorLogos(boards: BoardInfo[] | null, isActive: boolean) {
     const failed = new Set<string>();
     const cached = new Map<string, string>();
 
-    vendorLogos.forEach((logoUrl, vendorId) => {
-      // Try cache first, fall back to remote preload
-      getCachedVendorLogo(vendorId, logoUrl).then((dataUri) => {
+    vendorSlugs.forEach((vendorSlug) => {
+      // Fetch logo via backend cache (constructs URL from slug)
+      getCachedVendorLogo(vendorSlug).then((dataUri) => {
         if (dataUri) {
-          cached.set(vendorId, dataUri);
+          cached.set(vendorSlug, dataUri);
         } else {
-          // No cached path — try remote preload as fallback
-          return preloadImage(logoUrl).then((success) => {
-            if (!success) {
-              failed.add(vendorId);
-            }
-          });
+          failed.add(vendorSlug);
         }
       }).catch(() => {
-        failed.add(vendorId);
+        failed.add(vendorSlug);
       }).finally(() => {
         loaded++;
-        if (loaded >= vendorLogos.size) {
+        if (loaded >= vendorSlugs.size) {
           setState({ failedLogos: failed, cachedUrls: cached, isLoaded: true });
         }
       });
@@ -75,15 +70,15 @@ export function useVendorLogos(boards: BoardInfo[] | null, isActive: boolean) {
 
   // Helper to get effective vendor (considering failed logos)
   const getEffectiveVendor = useCallback((board: BoardInfo): string => {
-    if (!board.vendor_logo || state.failedLogos.has(board.vendor)) {
+    if (!board.vendor || state.failedLogos.has(board.vendor)) {
       return VENDOR.FALLBACK_ID;
     }
     return board.vendor || VENDOR.FALLBACK_ID;
   }, [state.failedLogos]);
 
   // Check if a vendor has a valid logo
   const hasValidLogo = useCallback((board: BoardInfo): boolean => {
-    return !!(board.vendor_logo && !state.failedLogos.has(board.vendor));
+    return !!(board.vendor && !state.failedLogos.has(board.vendor));
   }, [state.failedLogos]);
 
   return {
@@ -127,14 +122,14 @@ export function useManufacturerList(
       standardCount: number;
     }> = {};
 
-    // Build vendor map with board counts, platinum board counts, and standard board counts
+    // Build vendor map with board counts and support tier counts
     for (const board of boards) {
       const validLogo = hasValidLogo(board);
       const vendorId = validLogo ? (board.vendor || VENDOR.FALLBACK_ID) : VENDOR.FALLBACK_ID;
       const vendorName = validLogo ? (board.vendor_name || 'Other') : 'Other';
-      // Prefer cached local URL over remote URL
+      // Use cached local data URI for vendor logo
       const vendorLogo = validLogo
-        ? (cachedUrls.get(board.vendor) || board.vendor_logo)
+        ? (cachedUrls.get(board.vendor) || null)
         : null;
 
       if (!vendorMap[vendorId]) {
@@ -149,12 +144,12 @@ export function useManufacturerList(
       vendorMap[vendorId].count++;
 
       // Increment platinum count if this board has platinum support
-      if (board.has_platinum_support) {
+      if (board.support_tier === 'platinum') {
         vendorMap[vendorId].platinumCount++;
       }
 
       // Increment standard count if this board has standard support
-      if (board.has_standard_support) {
+      if (board.support_tier === 'standard') {
         vendorMap[vendorId].standardCount++;
       }
     }