improve helm chart logo rendering

app/javascript/controllers/helm_search_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { renderHelmChartCard } from "../utils/helm_charts"
+import { renderHelmChartCard, getLogoImageUrl } from "../utils/helm_charts"
 
 export default class extends Controller {
   static values = {
@@ -43,10 +43,13 @@ export default class extends Controller {
 
     this.dropdown.innerHTML = packages.map(pkg => `
       <li class="p-2 cursor-pointer" data-package-name="${pkg.name}" data-package-data='${JSON.stringify(pkg)}'>
-        <div class="font-medium block">
-          ${pkg.name}
-          <br/>
-          <div class="text-sm text-base-content/70">${pkg.description}</div>
+        <div class="font-medium flex items-center">
+          <img src="${getLogoImageUrl(pkg)}" alt="${pkg.name} logo" class="w-8 h-8 mr-2"/>
+          <div>
+            ${pkg.name}
+            <br/>
+            <div class="text-sm text-base-content/70">${pkg.description}</div>
+          </div>
         </div>
       </li>
     `).join('')

app/javascript/utils/helm_charts/index.js

@@ -1,3 +1,8 @@
+export function getLogoImageUrl(packageData) {
+  const logoImageId = packageData.logo_image_id;
+  return logoImageId ? `https://artifacthub.io/image/${logoImageId}` : "https://artifacthub.io/static/media/placeholder_pkg_helm.png";
+}
+
 export async function getDefaultValues(
   repositoryName,
   repositoryUrl,
@@ -16,9 +21,7 @@ export async function getDefaultValues(
 }
 
 export function renderHelmChartCard(packageData) {
-  const logoImageId = packageData.logo_image_id;
-  const logoImageUrl = `https://artifacthub.io/image/${logoImageId}`;
-    
+  const logoImageUrl = getLogoImageUrl(packageData);
   // Create a temporary container to convert HTML string to DOM element
   const tempContainer = document.createElement('div');
   tempContainer.innerHTML = `