Hersteller-Auto-Erkennung ueber MAC (verifiziert), Geraete-Tabelle Hersteller/Modell-Spalten, Dropdown-Klick-Bug, Kategorie-Farbe als Hintergrund

packages/ui/src/ResultsList.tsx

@@ -2,6 +2,16 @@ import { useState, type KeyboardEvent } from "react";
 import type { SearchResult } from "@launchpad/shared";
 import { Favicon } from "./Favicon.js";
 
+function hexToRgba(hex: string, alpha: number): string | null {
+  const clean = hex.replace("#", "");
+  if (clean.length !== 6) return null;
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 export interface ResultsListProps {
   results: SearchResult[];
   selectedIndex: number;
@@ -64,11 +74,18 @@ export function ResultsList({
               onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
                 if (e.key === "Enter") onOpen(item);
               }}
+              style={
+                categoryColor
+                  ? { backgroundColor: hexToRgba(categoryColor, active ? 0.18 : 0.1) ?? undefined }
+                  : undefined
+              }
               className={`flex w-full cursor-pointer items-center gap-3 px-5 py-3 text-left
                 transition-colors ${
-                  active
-                    ? "bg-black/5 dark:bg-white/10"
-                    : "hover:bg-black/[0.03] dark:hover:bg-white/5"
+                  categoryColor
+                    ? ""
+                    : active
+                      ? "bg-black/5 dark:bg-white/10"
+                      : "hover:bg-black/[0.03] dark:hover:bg-white/5"
                 }`}
             >
               <Favicon src={item.favicon} fallbackLetter={item.displayName} />