Erstes lauffähiges Grundgerüst: Monorepo, Fastify-API, React-Startseite, Docker

packages/shared/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@launchpad/shared",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.4"
+  }
+}

packages/shared/src/index.ts

@@ -0,0 +1,99 @@
+/**
+ * @launchpad/shared
+ *
+ * Gemeinsame Typen und Logik, die sowohl vom Backend (apps/backend)
+ * als auch vom Frontend (apps/frontend) verwendet werden.
+ */
+
+export interface Device {
+  id: string;
+  hostname: string;
+  ip: string;
+  mac: string | null;
+  manufacturer: string | null;
+  model: string | null;
+  online: boolean;
+  source: DeviceSource;
+  lastScan: string | null; // ISO-8601 Zeitstempel
+}
+
+export type DeviceSource = "fritzbox" | "dns" | "http" | "https" | "portscan" | "manual";
+
+export interface Service {
+  id: string;
+  deviceId: string;
+  displayName: string;
+  hostname: string;
+  url: string;
+  https: boolean;
+  port: number;
+  category: string | null;
+  icon: string | null;
+  favicon: string | null;
+  description: string | null;
+  favorite: boolean;
+  alias: string[];
+  order: number;
+}
+
+export interface HealthStatus {
+  status: "ok" | "error";
+  timestamp: string;
+  uptimeSeconds: number;
+  version: string;
+}
+
+/**
+ * Ranking-Stufen für die Suche, gemäß Spezifikation:
+ * 1. Displayname beginnt mit Suchtext
+ * 2. Alias beginnt mit Suchtext
+ * 3. Hostname beginnt mit Suchtext
+ * 4. Displayname enthält Suchtext
+ * 5. Alias enthält Suchtext
+ * 6. Beschreibung enthält Suchtext
+ *
+ * Niedrigere Werte sind relevanter. `null` bedeutet: kein Treffer.
+ */
+export function rankService(service: Service, query: string): number | null {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) return null;
+
+  const displayName = service.displayName.toLowerCase();
+  const hostname = service.hostname.toLowerCase();
+  const description = (service.description ?? "").toLowerCase();
+  const alias = service.alias.map((a) => a.toLowerCase());
+
+  if (displayName.startsWith(q)) return 1;
+  if (alias.some((a) => a.startsWith(q))) return 2;
+  if (hostname.startsWith(q)) return 3;
+  if (displayName.includes(q)) return 4;
+  if (alias.some((a) => a.includes(q))) return 5;
+  if (description.includes(q)) return 6;
+
+  return null;
+}
+
+/**
+ * Sortiert und filtert eine Liste von Diensten anhand des Suchtexts.
+ * Favoriten werden bei gleichem Rang bevorzugt, danach die definierte Reihenfolge.
+ */
+export function rankServices(services: Service[], query: string): Service[] {
+  const q = query.trim();
+
+  if (q.length === 0) {
+    return [...services].sort((a, b) => {
+      if (a.favorite !== b.favorite) return a.favorite ? -1 : 1;
+      return a.order - b.order;
+    });
+  }
+
+  return services
+    .map((service) => ({ service, rank: rankService(service, q) }))
+    .filter((entry): entry is { service: Service; rank: number } => entry.rank !== null)
+    .sort((a, b) => {
+      if (a.rank !== b.rank) return a.rank - b.rank;
+      if (a.service.favorite !== b.service.favorite) return a.service.favorite ? -1 : 1;
+      return a.service.order - b.service.order;
+    })
+    .map((entry) => entry.service);
+}

packages/shared/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

packages/ui/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@launchpad/ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "typescript": "^5.5.4"
+  }
+}

packages/ui/src/SearchInput.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** Wird links im Suchfeld angezeigt, z. B. ein Tastaturkürzel-Hinweis. */
+  hint?: string;
+}
+
+/**
+ * Zentrales Sucheingabefeld im Raycast/Spotlight-Stil.
+ * Bewusst schlicht gehalten: großer Text, viel Weißraum, keine Ablenkung.
+ */
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ hint, className = "", ...props }, ref) => {
+    return (
+      <div
+        className={`flex items-center gap-3 rounded-2xl border border-black/10 bg-white/80
+          px-5 py-4 shadow-lg backdrop-blur-md transition-colors
+          focus-within:border-black/20 dark:border-white/10 dark:bg-white/5
+          dark:focus-within:border-white/20 ${className}`}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-5 w-5 shrink-0 text-black/40 dark:text-white/40"
+        >
+          <circle cx="11" cy="11" r="7" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <input
+          ref={ref}
+          type="text"
+          autoComplete="off"
+          spellCheck={false}
+          className="w-full bg-transparent text-lg text-black outline-none placeholder:text-black/30
+            dark:text-white dark:placeholder:text-white/30"
+          {...props}
+        />
+        {hint ? (
+          <span className="shrink-0 rounded-md border border-black/10 px-1.5 py-0.5 text-xs
+            text-black/40 dark:border-white/10 dark:text-white/40">
+            {hint}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+SearchInput.displayName = "SearchInput";

packages/ui/src/StatusBadge.tsx

@@ -0,0 +1,21 @@
+export interface StatusBadgeProps {
+  online: boolean;
+  label?: string;
+}
+
+/**
+ * Kleiner Statuspunkt (online/offline), z. B. für den Backend-Health-Check
+ * oder später für einzelne Dienste.
+ */
+export function StatusBadge({ online, label }: StatusBadgeProps) {
+  return (
+    <span className="inline-flex items-center gap-2 text-sm text-black/60 dark:text-white/60">
+      <span
+        className={`h-2 w-2 rounded-full ${
+          online ? "bg-emerald-500" : "bg-red-500"
+        }`}
+      />
+      {label ?? (online ? "Online" : "Offline")}
+    </span>
+  );
+}

packages/ui/src/index.ts

@@ -0,0 +1,5 @@
+export { SearchInput } from "./SearchInput.js";
+export type { SearchInputProps } from "./SearchInput.js";
+
+export { StatusBadge } from "./StatusBadge.js";
+export type { StatusBadgeProps } from "./StatusBadge.js";

packages/ui/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src"]
+}