Add fallback logo handling for scripts in ScriptBrowser, ScriptItem, and CommandMenu components

Author: BramSuurdje

src/app/scripts/_components/ScriptBrowser.tsx

@@ -115,59 +115,63 @@ const ScriptBrowser = ({
                 }
                 className="pt-0"
               >
-              {category.expand.items
-                .slice()
-                .sort((a, b) => a.title.localeCompare(b.title))
-                .map((script, index) => (
-                  <div key={index}>
-                    <Link
-                      href={{
-                        pathname: "/scripts",
-                        query: { id: script.title },
-                      }}
-                      prefetch={false}
-                      className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
-                        selectedScript === script.title
-                          ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
-                          : ""
-                      }`}
-                      onClick={() => handleSelected(script.title)}
-                      ref={(el) => {
-                        linkRefs.current[script.title] = el;
-                      }}
-                    >
-                      <Image
-                        src={script.logo}
-                        height={16}
-                        width={16}
-                        unoptimized
-                        alt={script.title}
-                        className="mr-1 w-4 h-4 rounded-full"
-                      />
-                      <span className="flex items-center gap-2">
-                        {script.title}
-                        {script.isMostViewed && (
-                          <Star className="h-3 w-3 text-yellow-500"></Star>
-                        )}
-                      </span>
-                      <Badge
-                        className={classNames(
-                          "ml-auto w-[37.69px] justify-center text-center",
-                          {
-                            "text-primary/75": script.item_type === "VM",
-                            "text-yellow-500/75": script.item_type === "LXC",
-                            "border-none": script.item_type === "",
-                            hidden: !["VM", "LXC", ""].includes(
-                              script.item_type,
-                            ),
-                          },
-                        )}
+                {category.expand.items
+                  .slice()
+                  .sort((a, b) => a.title.localeCompare(b.title))
+                  .map((script, index) => (
+                    <div key={index}>
+                      <Link
+                        href={{
+                          pathname: "/scripts",
+                          query: { id: script.title },
+                        }}
+                        prefetch={false}
+                        className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
+                          selectedScript === script.title
+                            ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
+                            : ""
+                        }`}
+                        onClick={() => handleSelected(script.title)}
+                        ref={(el) => {
+                          linkRefs.current[script.title] = el;
+                        }}
                       >
-                        {script.item_type}
-                      </Badge>
-                    </Link>
-                  </div>
-              ))}
+                        <Image
+                          src={script.logo}
+                          height={16}
+                          width={16}
+                          unoptimized
+                          onError={(e) =>
+                            ((e.currentTarget as HTMLImageElement).src =
+                              "/logo.png")
+                          }
+                          alt={script.title}
+                          className="mr-1 w-4 h-4 rounded-full"
+                        />
+                        <span className="flex items-center gap-2">
+                          {script.title}
+                          {script.isMostViewed && (
+                            <Star className="h-3 w-3 text-yellow-500"></Star>
+                          )}
+                        </span>
+                        <Badge
+                          className={classNames(
+                            "ml-auto w-[37.69px] justify-center text-center",
+                            {
+                              "text-primary/75": script.item_type === "VM",
+                              "text-yellow-500/75": script.item_type === "LXC",
+                              "border-none": script.item_type === "",
+                              hidden: !["VM", "LXC", ""].includes(
+                                script.item_type,
+                              ),
+                            },
+                          )}
+                        >
+                          {script.item_type}
+                        </Badge>
+                      </Link>
+                    </div>
+                  ))}
               </AccordionContent>
             </AccordionItem>
           ))}

src/app/scripts/_components/ScriptItem.tsx

@@ -66,6 +66,10 @@ function ScriptItem({
                       className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
                       src={item.logo}
                       width={400}
+                      onError={(e) =>
+                        ((e.currentTarget as HTMLImageElement).src =
+                          "/logo.png")
+                      }
                       height={400}
                       alt={item.title}
                       unoptimized

src/components/CommandMenu.tsx

@@ -106,6 +106,10 @@ export default function CommandMenu() {
                       src={script.logo}
                       unoptimized
                       height={16}
+                      onError={(e) =>
+                        ((e.currentTarget as HTMLImageElement).src =
+                          "/logo.png")
+                      }
                       width={16}
                       alt=""
                       className="h-5 w-5"