Commit 3: Suche im Frontend mit echten Backend-Daten, Ranking, Tastatur-Navigation

apps/frontend/src/App.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from "react";
-import { SearchInput, StatusBadge } from "@launchpad/ui";
-import type { HealthStatus } from "@launchpad/shared";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { SearchInput, StatusBadge, ResultsList } from "@launchpad/ui";
+import { rankServices, type Service, type HealthStatus } from "@launchpad/shared";
+import { useServices } from "./hooks/useServices.js";
 
 type Theme = "light" | "dark";
 
@@ -55,33 +56,65 @@ function useBackendHealth() {
   return { health, error };
 }
 
+function openService(service: Service) {
+  window.open(service.url, "_blank", "noopener,noreferrer");
+}
+
 export default function App() {
   const [theme, toggleTheme] = useTheme();
   const [query, setQuery] = useState("");
-  const { health, error } = useBackendHealth();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { health, error: healthError } = useBackendHealth();
+  const { data: services, isLoading, isError } = useServices();
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const results = useMemo(
+    () => rankServices(services ?? [], query),
+    [services, query]
+  );
+
+  // Auswahl zurücksetzen, sobald sich die Trefferliste ändert
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [results.length, query]);
+
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
       const isSlash = e.key === "/" && document.activeElement !== inputRef.current;
       const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k";
+
       if (isSlash || isCmdK) {
         e.preventDefault();
         inputRef.current?.focus();
+        return;
       }
-      if (e.key === "Escape") {
+
+      if (document.activeElement !== inputRef.current) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, Math.max(results.length - 1, 0)));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const target = results[selectedIndex];
+        if (target) openService(target);
+      } else if (e.key === "Escape") {
         inputRef.current?.blur();
         setQuery("");
       }
     }
+
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, []);
+  }, [results, selectedIndex]);
 
-  const isOnline = !error && health?.status === "ok";
+  const isOnline = !healthError && health?.status === "ok";
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-8 bg-gradient-to-b from-white to-neutral-100 px-6 dark:from-black dark:to-neutral-950">
+    <div className="flex min-h-screen flex-col items-center justify-start gap-8 bg-gradient-to-b from-white to-neutral-100 px-6 pt-[15vh] dark:from-black dark:to-neutral-950">
       <button
         onClick={toggleTheme}
         aria-label="Theme wechseln"
@@ -109,9 +142,31 @@ export default function App() {
           hint="⌘K"
           autoFocus
         />
+
+        {isLoading ? (
+          <p className="mt-4 text-center text-sm text-black/40 dark:text-white/40">
+            Lade Dienste …
+          </p>
+        ) : isError ? (
+          <p className="mt-4 text-center text-sm text-red-500">
+            Dienste konnten nicht geladen werden.
+          </p>
+        ) : (
+          <ResultsList
+            services={results}
+            selectedIndex={selectedIndex}
+            onHover={setSelectedIndex}
+            onOpen={openService}
+            emptyLabel={
+              (services?.length ?? 0) === 0
+                ? "Noch keine Dienste angelegt. Füge welche über die API hinzu."
+                : "Keine Treffer für deine Suche."
+            }
+          />
+        )}
       </div>
 
-      <div className="flex flex-col items-center gap-1">
+      <div className="flex flex-col items-center gap-1 pb-8">
         <StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
         {health ? (
           <span className="text-xs text-black/30 dark:text-white/30">

apps/frontend/src/hooks/useServices.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Service } from "@launchpad/shared";
+
+async function fetchServices(): Promise<Service[]> {
+  const res = await fetch("/api/services");
+  if (!res.ok) {
+    throw new Error(`Dienste konnten nicht geladen werden (HTTP ${res.status})`);
+  }
+  return res.json();
+}
+
+export function useServices() {
+  return useQuery({
+    queryKey: ["services"],
+    queryFn: fetchServices,
+  });
+}

apps/frontend/src/main.tsx

@@ -1,10 +1,22 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App.js";
 import "./index.css";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </React.StrictMode>
 );