Function HfModelFileList

src/components/HfModelFileList.tsx:13–55

({ repoId, files, hardwareInfo, onDownload, downloads, installedModels }: HfModelFileListProps)

}

export function HfModelFileList({ repoId, files, hardwareInfo, onDownload, downloads, installedModels }: HfModelFileListProps) {
  if (files.length === 0) {
    return (
      <div className="text-center py-8 text-dark-text-secondary">
        No GGUF files found for this model
      </div>
    );
  }

  // Group files by quantization quality (already sorted from backend)
  const recommendedQuantization = hardwareInfo
    ? getRecommendedQuantization(hardwareInfo.vram_gb)
    : null;

  return (
    <div className="space-y-3">
      {files.map((file) => {
        const isRecommended = recommendedQuantization && file.quantization?.includes(recommendedQuantization);
        const modelName = deriveModelName(repoId, file.filename);
        const isInstalled = installedModels.some((installed) => installed.name === modelName);
        
        return (
          <div key={file.filename} className={isRecommended ? 'ring-2 ring-dark-accent rounded-lg' : ''}>
            {isRecommended && (
              <div className="px-3 py-1 bg-dark-accent text-white text-xs font-medium rounded-t-lg">
                Recommended for your hardware
              </div>
            )}
            <HfModelFileItem
              file={file}
              hardwareInfo={hardwareInfo}
              onDownload={() => onDownload(file.filename)}
              downloadProgress={Array.from(downloads.values()).find(
                (d) => d.model_name === modelName
              )}
              isInstalled={isInstalled}
            />
          </div>
        );
      })}
    </div>
  );
}

function getRecommendedQuantization(vramGb: number): string | null {
  if (vramGb >= 10.0) return 'Q6_K';