Dicken/LaunchPad
1
0
Fork 0
generated from Dicken/dickendock
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfixes (Dark Mode, Dropdown-Kontrast, IP-Suche), Lesezeichen-Ausbau (Farbe, Beschreibung, Favicon), Zuletzt-besucht, Spaeter-lesen, kombinierter Import-Export, Scanner-Reconciliation, Admin-Ueberarbeitung

Browse Source
This commit is contained in:
Dicken
2026-07-20 07:52:38 +02:00
parent dc91a9aba9
commit 96cf29fef4
37 changed files with 1988 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/frontend/docker-entrypoint.sh
View File

@@ -8,9 +8,22 @@ CERT_FILE="$CERT_DIR/fullchain.pem"
KEY_FILE="$CERT_DIR/privkey.pem"
CERT_HOST_FILE="$CERT_DIR/.cert-host"
HOST="${LAUNCHPAD_HOST:-localhost}"
EXTRA_HOST="${LAUNCHPAD_EXTRA_HOST:-}"
mkdir -p "$CERT_DIR"
# Baut einen SAN-Eintrag (IP:... oder DNS:...) für einen einzelnen Hostwert.
san_entry_for() {
case "$1" in
*[0-9]*.*[0-9]*.*[0-9]*.*[0-9]*)
echo "IP:$1"
;;
*)
echo "DNS:$1"
;;
esac
}
if [ -f "$CERT_FILE" ] && [ -f "$KEY_FILE" ] && [ ! -f "$CA_CERT" ]; then
# fullchain.pem/privkey.pem wurden vom Nutzer eingebunden (z. B. eigenes
# Zertifikat) und es gibt keine von uns erzeugte CA dazu -> nichts anfassen.
@@ -27,24 +40,22 @@ else
-out "$CA_CERT" 2>/dev/null
fi
# Server-Zertifikat nur neu erzeugen, wenn es noch keins gibt oder sich
# LAUNCHPAD_HOST geändert hat (dann würde die alte SAN nicht mehr passen).
# Kombinierte Kennung aus HOST + EXTRA_HOST, um zu erkennen ob sich einer
# von beiden geändert hat -> dann Server-Zertifikat neu ausstellen. Die CA
# selbst bleibt davon unberührt (bereits erteiltes Gerätevertrauen gilt weiter).
HOST_SIGNATURE="$HOST|$EXTRA_HOST"
NEED_NEW_LEAF=false
if [ ! -f "$CERT_FILE" ] || [ ! -f "$KEY_FILE" ]; then
NEED_NEW_LEAF=true
elif [ "$(cat "$CERT_HOST_FILE" 2>/dev/null)" != "$HOST" ]; then
elif [ "$(cat "$CERT_HOST_FILE" 2>/dev/null)" != "$HOST_SIGNATURE" ]; then
NEED_NEW_LEAF=true
fi
if [ "$NEED_NEW_LEAF" = "true" ]; then
case "$HOST" in
*[0-9]*.*[0-9]*.*[0-9]*.*[0-9]*)
SAN="IP:$HOST,DNS:localhost,IP:127.0.0.1"
;;
*)
SAN="DNS:$HOST,DNS:localhost,IP:127.0.0.1"
;;
esac
SAN="$(san_entry_for "$HOST"),DNS:localhost,IP:127.0.0.1"
if [ -n "$EXTRA_HOST" ] && [ "$EXTRA_HOST" != "$HOST" ]; then
SAN="$SAN,$(san_entry_for "$EXTRA_HOST")"
fi
EXTFILE=$(mktemp)
printf "subjectAltName=%s\nbasicConstraints=CA:FALSE\nkeyUsage=digitalSignature,keyEncipherment\nextendedKeyUsage=serverAuth\n" "$SAN" > "$EXTFILE"
@@ -56,8 +67,8 @@ else
-out "$CERT_FILE" 2>/dev/null
rm -f "$EXTFILE" "$CERT_DIR/server.csr"
echo "$HOST" > "$CERT_HOST_FILE"
echo "[entrypoint] Server-Zertifikat für '$HOST' erzeugt und mit lokaler CA signiert."
echo "$HOST_SIGNATURE" > "$CERT_HOST_FILE"
echo "[entrypoint] Server-Zertifikat erzeugt (SAN: $SAN), mit lokaler CA signiert."
fi
fi

24
apps/frontend/src/hooks/useReadLater.ts Normal file
View File

@@ -0,0 +1,24 @@
import { useQuery } from "@tanstack/react-query";
export interface ReadLaterItem {
id: string;
url: string;
displayName: string;
favicon: string | null;
savedAt: string;
}
async function fetchReadLater(): Promise<ReadLaterItem[]> {
const res = await fetch("/api/read-later");
if (!res.ok) {
throw new Error(`Später-lesen-Liste konnte nicht geladen werden (HTTP ${res.status})`);
}
return res.json();
}
export function useReadLater() {
return useQuery({
queryKey: ["read-later"],
queryFn: fetchReadLater,
});
}

29
apps/frontend/src/hooks/useRecentVisits.ts Normal file
View File

@@ -0,0 +1,29 @@
import { useQuery } from "@tanstack/react-query";
import type { Bookmark, Service } from "@launchpad/shared";
export type RecentVisitItem =
| (Service & { kind: "service" })
| (Bookmark & { kind: "bookmark" });
async function fetchRecentVisits(): Promise<RecentVisitItem[]> {
const res = await fetch("/api/recent-visits");
if (!res.ok) {
throw new Error(`Zuletzt besucht konnte nicht geladen werden (HTTP ${res.status})`);
}
return res.json();
}
export function useRecentVisits() {
return useQuery({
queryKey: ["recent-visits"],
queryFn: fetchRecentVisits,
});
}
export async function recordVisit(itemType: "service" | "bookmark", itemId: string): Promise<void> {
await fetch("/api/recent-visits", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ itemType, itemId }),
});
}

20
apps/frontend/src/hooks/useSettings.ts Normal file
View File

@@ -0,0 +1,20 @@
import { useQuery } from "@tanstack/react-query";
export interface AppSettings {
recentVisitsLimit: number;
}
async function fetchSettings(): Promise<AppSettings> {
const res = await fetch("/api/settings");
if (!res.ok) {
throw new Error(`Einstellungen konnten nicht geladen werden (HTTP ${res.status})`);
}
return res.json();
}
export function useSettings() {
return useQuery({
queryKey: ["settings"],
queryFn: fetchSettings,
});
}

14
apps/frontend/src/index.css
View File

@@ -16,3 +16,17 @@ body {
"Segoe UI",
sans-serif;
}
/*
* Sagt dem Browser, dass native Formularelemente (select/option, Checkbox,
* Datepicker …) im jeweiligen Theme gerendert werden sollen. Ohne das
* bleiben z. B. <option>-Listen in <select> auf vielen Browsern immer hell
* (weißer Text auf weißem Grund im Dark Mode), weil Tailwind-Klassen auf
* das native Dropdown-Popup keinen Einfluss haben.
*/
:root {
color-scheme: light;
}
.dark {
color-scheme: dark;
}

17
apps/frontend/src/main.tsx
View File

@@ -5,6 +5,23 @@ import { RouterProvider } from "@tanstack/react-router";
import { router } from "./router.js";
import "./index.css";
// Muss VOR dem ersten Render laufen und unabhängig davon, welche Route
// zuerst geladen wird (z. B. Direktlink auf /admin/...) – vorher hing das
// Anwenden der Dark-Mode-Klasse an useTheme(), das nur auf Home/Einstellungen
// aufgerufen wurde, wodurch andere Admin-Seiten beim Direktaufruf immer hell
// starteten, egal was gespeichert war.
function applyStoredTheme() {
const stored = window.localStorage.getItem("launchpad-theme");
const theme =
stored === "light" || stored === "dark"
? stored
: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
document.documentElement.classList.toggle("dark", theme === "dark");
}
applyStoredTheme();
const queryClient = new QueryClient({
defaultOptions: {
queries: {

268
apps/frontend/src/routes/HomePage.tsx
View File

@@ -1,15 +1,21 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { SearchInput, StatusBadge, ResultsList, FavoritesBar } from "@launchpad/ui";
import { SearchInput, StatusBadge, ResultsList, FavoritesBar, Favicon, Button } from "@launchpad/ui";
import { rankServices, type SearchResult } from "@launchpad/shared";
import { useServices } from "../hooks/useServices.js";
import { useBookmarks } from "../hooks/useBookmarks.js";
import { useBackendHealth } from "../hooks/useBackendHealth.js";
import { useTheme } from "../hooks/useTheme.js";
import { useCategories } from "../hooks/useCategories.js";
import { useRecentVisits, recordVisit } from "../hooks/useRecentVisits.js";
import { useReadLater } from "../hooks/useReadLater.js";
function openItem(item: SearchResult) {
function openItem(item: SearchResult | { url: string; id?: string; kind?: "service" | "bookmark" }) {
window.open(item.url, "_blank", "noopener,noreferrer");
if ("kind" in item && item.kind && item.id) {
recordVisit(item.kind, item.id);
}
}
async function toggleFavoriteRequest(item: SearchResult): Promise<void> {
@@ -36,6 +42,55 @@ async function reorderRequest(kind: "service" | "bookmark", orderedIds: string[]
}
}
async function saveReadLaterRequest(url: string) {
const res = await fetch("/api/read-later", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ url }),
});
if (!res.ok) {
const body = await res.json().catch(() => ({}));
throw new Error(body.error ?? `Konnte nicht gespeichert werden (HTTP ${res.status})`);
}
return res.json();
}
function ReadLaterBox() {
const queryClient = useQueryClient();
const [url, setUrl] = useState("");
const mutation = useMutation({
mutationFn: () => saveReadLaterRequest(url.trim()),
onSuccess: () => {
setUrl("");
queryClient.invalidateQueries({ queryKey: ["read-later"] });
},
});
function handleSubmit(e: FormEvent) {
e.preventDefault();
if (!url.trim()) return;
mutation.mutate();
}
return (
<form onSubmit={handleSubmit} className="flex gap-2">
<input
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="Link zum Später-Lesen hier einfügen …"
className="flex-1 rounded-xl border border-black/10 bg-white/70 px-3 py-2 text-sm
text-black outline-none placeholder:text-black/30 focus:border-black/30
dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-white/30
dark:focus:border-white/30"
/>
<Button type="submit" variant="secondary" disabled={mutation.isPending || !url.trim()}>
{mutation.isPending ? "…" : "Merken"}
</Button>
</form>
);
}
export function HomePage() {
const [theme, toggleTheme] = useTheme();
const [query, setQuery] = useState("");
@@ -43,11 +98,22 @@ export function HomePage() {
const { health, error: healthError } = useBackendHealth();
const { data: services, isLoading: servicesLoading, isError: servicesError } = useServices();
const { data: bookmarks, isLoading: bookmarksLoading } = useBookmarks();
const { data: categories } = useCategories();
const { data: recentVisits } = useRecentVisits();
const { data: readLaterItems } = useReadLater();
const inputRef = useRef<HTMLInputElement>(null);
const queryClient = useQueryClient();
const isSearching = query.trim().length > 0;
const isLoading = servicesLoading || bookmarksLoading;
const categoryColors = useMemo(() => {
const map: Record<string, string> = {};
for (const c of categories ?? []) {
if (c.color) map[c.name] = c.color;
}
return map;
}, [categories]);
const toggleFavorite = useMutation({
mutationFn: toggleFavoriteRequest,
onSuccess: (_data, item) => {
@@ -136,8 +202,8 @@ export function HomePage() {
const hasFavorites = favoriteServices.length > 0 || favoriteBookmarks.length > 0;
return (
<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">
<div className="fixed right-6 top-6 flex items-center gap-2">
<div className="flex h-dvh flex-col overflow-hidden bg-gradient-to-b from-white to-neutral-100 dark:from-black dark:to-neutral-950">
<div className="fixed right-6 top-6 z-10 flex items-center gap-2">
<Link
to="/admin"
aria-label="Adminbereich öffnen"
@@ -156,75 +222,137 @@ export function HomePage() {
</button>
</div>
<div className="flex flex-col items-center gap-2 text-center">
<h1 className="text-4xl font-semibold tracking-tight text-black dark:text-white">
LaunchPad
</h1>
<p className="text-black/50 dark:text-white/50">
Tippe, um deine Homelab-Dienste sofort zu öffnen.
</p>
</div>
<div className="w-full max-w-xl">
{hasFavorites ? (
<div className="mb-4 flex flex-col gap-3">
{favoriteServices.length > 0 ? (
<FavoritesBar
items={favoriteServices}
label="Dienste"
onOpen={(item) => {
const service = favoriteServices.find((s) => s.id === item.id);
if (service) openItem({ ...service, kind: "service" });
}}
onReorder={(ids) => reorderServices.mutate(ids)}
/>
) : null}
{favoriteBookmarks.length > 0 ? (
<FavoritesBar
items={favoriteBookmarks}
label="Lesezeichen"
onOpen={(item) => {
const bookmark = favoriteBookmarks.find((b) => b.id === item.id);
if (bookmark) openItem({ ...bookmark, kind: "bookmark" });
}}
onReorder={(ids) => reorderBookmarks.mutate(ids)}
/>
) : null}
</div>
) : null}
<SearchInput
ref={inputRef}
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Dienst oder Lesezeichen suchen … z. B. „frigate“"
hint="⌘K"
autoFocus
/>
{!isSearching ? null : isLoading ? (
<p className="mt-4 text-center text-sm text-black/40 dark:text-white/40">Lade …</p>
) : servicesError ? (
<p className="mt-4 text-center text-sm text-red-500">
Dienste konnten nicht geladen werden.
{/* Nicht-scrollender Kopfbereich: Titel, Favoriten, Suchfeld, Später-lesen, Zuletzt besucht */}
<div className="flex shrink-0 flex-col items-center gap-4 px-6 pb-3 pt-6 sm:pt-10">
<div className="flex flex-col items-center gap-0.5 text-center">
<h1 className="text-xl font-semibold tracking-tight text-black dark:text-white sm:text-2xl">
LaunchPad
</h1>
<p className="text-xs text-black/50 dark:text-white/50 sm:text-sm">
Tippe, um deine Homelab-Dienste sofort zu öffnen.
</p>
) : (
<ResultsList
results={results}
selectedIndex={selectedIndex}
onHover={setSelectedIndex}
onOpen={openItem}
onToggleFavorite={(item) => toggleFavorite.mutate(item)}
emptyLabel={
allItems.length === 0
? "Noch nichts angelegt. Füge Dienste oder Lesezeichen im Adminbereich hinzu."
: "Keine Treffer für deine Suche."
}
</div>
<div className="w-full max-w-xl">
{hasFavorites ? (
<div className="mb-3 flex flex-col gap-2">
{favoriteServices.length > 0 ? (
<FavoritesBar
items={favoriteServices}
label="Dienste"
categoryColors={categoryColors}
onOpen={(item) => {
const service = favoriteServices.find((s) => s.id === item.id);
if (service) openItem({ ...service, kind: "service" });
}}
onReorder={(ids) => reorderServices.mutate(ids)}
/>
) : null}
{favoriteBookmarks.length > 0 ? (
<FavoritesBar
items={favoriteBookmarks}
label="Lesezeichen"
categoryColors={categoryColors}
onOpen={(item) => {
const bookmark = favoriteBookmarks.find((b) => b.id === item.id);
if (bookmark) openItem({ ...bookmark, kind: "bookmark" });
}}
onReorder={(ids) => reorderBookmarks.mutate(ids)}
/>
) : null}
</div>
) : null}
<SearchInput
ref={inputRef}
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Dienst oder Lesezeichen suchen … z. B. „frigate“"
hint="⌘K"
autoFocus
/>
)}
{!isSearching ? (
<div className="mt-3 flex flex-col gap-3">
<ReadLaterBox />
{readLaterItems && readLaterItems.length > 0 ? (
<div className="flex flex-wrap items-center justify-center gap-2">
{readLaterItems.slice(0, 6).map((item) => (
<button
key={item.id}
onClick={() => window.open(item.url, "_blank", "noopener,noreferrer")}
title={item.displayName}
className="flex items-center gap-1.5 rounded-full border border-black/10
bg-white/50 px-2.5 py-1 text-xs text-black/60 hover:bg-black/5
dark:border-white/10 dark:bg-white/5 dark:text-white/60 dark:hover:bg-white/10"
>
<Favicon src={item.favicon} fallbackLetter={item.displayName} size="sm" />
<span className="max-w-[8rem] truncate">{item.displayName}</span>
</button>
))}
</div>
) : null}
{recentVisits && recentVisits.length > 0 ? (
<div>
<div className="mb-1.5 text-center text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
Zuletzt besucht
</div>
<div className="flex flex-wrap items-center justify-center gap-2">
{recentVisits.map((item) => (
<button
key={`${item.kind}-${item.id}`}
onClick={() => openItem(item)}
title={item.displayName}
className="flex items-center gap-1.5 rounded-full border border-black/10
bg-white/50 px-2.5 py-1 text-xs text-black/60 hover:bg-black/5
dark:border-white/10 dark:bg-white/5 dark:text-white/60 dark:hover:bg-white/10"
>
<Favicon src={item.favicon} fallbackLetter={item.displayName} size="sm" />
<span className="max-w-[8rem] truncate">{item.displayName}</span>
</button>
))}
</div>
</div>
) : null}
</div>
) : null}
</div>
</div>
<div className="flex flex-col items-center gap-1 pb-8">
{/* Scrollender Bereich: NUR die Trefferliste scrollt, nicht die ganze Seite */}
{isSearching ? (
<div className="min-h-0 flex-1 px-6 pb-4">
<div className="mx-auto h-full max-w-xl">
{isLoading ? (
<p className="text-center text-sm text-black/40 dark:text-white/40">Lade …</p>
) : servicesError ? (
<p className="text-center text-sm text-red-500">
Dienste konnten nicht geladen werden.
</p>
) : (
<ResultsList
results={results}
selectedIndex={selectedIndex}
categoryColors={categoryColors}
onHover={setSelectedIndex}
onOpen={openItem}
onToggleFavorite={(item) => toggleFavorite.mutate(item)}
emptyLabel={
allItems.length === 0
? "Noch nichts angelegt. Füge Dienste oder Lesezeichen im Adminbereich hinzu."
: "Keine Treffer für deine Suche."
}
/>
)}
</div>
</div>
) : (
<div className="flex-1" />
)}
<div className="flex shrink-0 flex-col items-center gap-1 pb-4">
<StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
{health ? (
<span className="text-xs text-black/30 dark:text-white/30">

97
apps/frontend/src/routes/admin/BookmarksPage.tsx
View File

@@ -1,4 +1,4 @@
import { useState, type DragEvent, type FormEvent } from "react";
import { useMemo, useState, type DragEvent, type FormEvent } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button, Favicon } from "@launchpad/ui";
import type { Bookmark } from "@launchpad/shared";
@@ -274,12 +274,14 @@ function EditForm({ bookmark, onDone }: { bookmark: Bookmark; onDone: () => void
function BookmarkRow({
bookmark,
draggable,
onDragStart,
onDragOver,
onDrop,
isDragging,
}: {
bookmark: Bookmark;
draggable: boolean;
onDragStart: (e: DragEvent<HTMLTableRowElement>) => void;
onDragOver: (e: DragEvent<HTMLTableRowElement>) => void;
onDrop: (e: DragEvent<HTMLTableRowElement>) => void;
@@ -304,14 +306,17 @@ function BookmarkRow({
return (
<tr
draggable
draggable={draggable}
onDragStart={onDragStart}
onDragOver={onDragOver}
onDrop={onDrop}
className={`border-b border-black/5 last:border-0 dark:border-white/5 ${isDragging ? "opacity-40" : ""}`}
>
<td className="px-2 py-3 text-center">
<span className="cursor-grab select-none text-black/30 dark:text-white/30" aria-hidden>
<span
className={`select-none ${draggable ? "cursor-grab text-black/30 dark:text-white/30" : "text-black/10 dark:text-white/10"}`}
aria-hidden
>
⠿⠿
</span>
</td>
@@ -361,11 +366,44 @@ function BookmarkRow({
);
}
type SortColumn = "displayName" | "hostname" | "category" | null;
function SortableHeader({
label,
column,
activeColumn,
direction,
onClick,
}: {
label: string;
column: SortColumn;
activeColumn: SortColumn;
direction: "asc" | "desc";
onClick: (column: SortColumn) => void;
}) {
const active = activeColumn === column;
return (
<th className="px-4 py-2 font-medium">
<button
onClick={() => onClick(column)}
className={`flex items-center gap-1 hover:text-black dark:hover:text-white ${
active ? "text-black dark:text-white" : ""
}`}
>
{label}
<span className="text-[10px]">{active ? (direction === "asc" ? "▲" : "▼") : "⇅"}</span>
</button>
</th>
);
}
export function BookmarksPage() {
const { data: bookmarks, isLoading, isError } = useBookmarks();
const queryClient = useQueryClient();
const [draggedId, setDraggedId] = useState<string | null>(null);
const [localOrder, setLocalOrder] = useState<Bookmark[] | null>(null);
const [sortColumn, setSortColumn] = useState<SortColumn>(null);
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
const reorderMutation = useMutation({
mutationFn: reorderBookmarksRequest,
@@ -376,7 +414,38 @@ export function BookmarksPage() {
onError: () => setLocalOrder(null),
});
const list = localOrder ?? bookmarks ?? [];
const baseList = localOrder ?? bookmarks ?? [];
const list = useMemo(() => {
if (!sortColumn) return baseList;
const sorted = [...baseList].sort((a, b) => {
let cmp = 0;
switch (sortColumn) {
case "displayName":
cmp = a.displayName.localeCompare(b.displayName);
break;
case "hostname":
cmp = a.hostname.localeCompare(b.hostname);
break;
case "category":
cmp = (a.category ?? "").localeCompare(b.category ?? "");
break;
}
return sortDirection === "asc" ? cmp : -cmp;
});
return sorted;
}, [baseList, sortColumn, sortDirection]);
function handleHeaderClick(column: SortColumn) {
if (sortColumn === column) {
setSortDirection((d) => (d === "asc" ? "desc" : "asc"));
} else {
setSortColumn(column);
setSortDirection("asc");
}
}
const dragEnabled = sortColumn === null;
function handleDragStart(id: string) {
return (_e: DragEvent<HTMLTableRowElement>) => setDraggedId(id);
@@ -385,7 +454,7 @@ export function BookmarksPage() {
function handleDragOver(targetId: string) {
return (e: DragEvent<HTMLTableRowElement>) => {
e.preventDefault();
if (!draggedId || draggedId === targetId) return;
if (!dragEnabled || !draggedId || draggedId === targetId) return;
const current = localOrder ?? bookmarks ?? [];
const fromIndex = current.findIndex((b) => b.id === draggedId);
const toIndex = current.findIndex((b) => b.id === targetId);
@@ -400,6 +469,7 @@ export function BookmarksPage() {
function handleDrop() {
return (e: DragEvent<HTMLTableRowElement>) => {
e.preventDefault();
if (!dragEnabled) return;
setDraggedId(null);
const current = localOrder ?? bookmarks ?? [];
reorderMutation.mutate(current.map((b, index) => ({ id: b.id, order: index })));
@@ -410,11 +480,19 @@ export function BookmarksPage() {
<div>
<AdminPageHeader
title="Lesezeichen"
description="Eigenständig von Diensten – erscheinen zusammen mit ihnen in der Suche, aber als eigene Favoriten-Gruppe auf der Startseite. Per Drag & Drop sortierbar."
description="Eigenständig von Diensten – erscheinen zusammen mit ihnen in der Suche, aber als eigene Favoriten-Gruppe auf der Startseite. Spaltenköpfe anklickbar zum Sortieren; Drag & Drop (⠿⠿) nur in der Standard-Reihenfolge."
/>
<AddBookmarkForm />
{sortColumn ? (
<div className="mb-3">
<Button size="sm" variant="ghost" onClick={() => setSortColumn(null)}>
← Zur manuellen Reihenfolge (Drag & Drop) zurück
</Button>
</div>
) : null}
{isLoading ? (
<p className="text-sm text-black/40 dark:text-white/40">Lade Lesezeichen …</p>
) : isError ? (
@@ -428,10 +506,10 @@ export function BookmarksPage() {
uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
<th className="px-2 py-2" />
<th className="px-2 py-2" />
<th className="px-4 py-2 font-medium">Lesezeichen</th>
<th className="px-4 py-2 font-medium">Kategorie</th>
<SortableHeader label="Lesezeichen" column="displayName" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Kategorie" column="category" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<th className="px-4 py-2 font-medium">Beschreibung</th>
<th className="px-4 py-2 font-medium">URL</th>
<SortableHeader label="URL" column="hostname" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<th className="px-4 py-2" />
</tr>
</thead>
@@ -440,6 +518,7 @@ export function BookmarksPage() {
<BookmarkRow
key={bookmark.id}
bookmark={bookmark}
draggable={dragEnabled}
isDragging={draggedId === bookmark.id}
onDragStart={handleDragStart(bookmark.id)}
onDragOver={handleDragOver(bookmark.id)}

20
apps/frontend/src/routes/admin/DashboardPage.tsx
View File

@@ -1,6 +1,8 @@
import { Link } from "@tanstack/react-router";
import { useServices } from "../../hooks/useServices.js";
import { useDevices } from "../../hooks/useDevices.js";
import { useCategories } from "../../hooks/useCategories.js";
import { useBookmarks } from "../../hooks/useBookmarks.js";
import { AdminPageHeader } from "./AdminPageHeader.js";
function StatCard({ label, value }: { label: string; value: number | string }) {
@@ -16,9 +18,11 @@ export function DashboardPage() {
const { data: services } = useServices();
const { data: devices } = useDevices();
const { data: categories } = useCategories();
const { data: bookmarks } = useBookmarks();
const onlineDevices = devices?.filter((d) => d.online).length ?? 0;
const favoriteServices = services?.filter((s) => s.favorite).length ?? 0;
const favoriteBookmarks = bookmarks?.filter((b) => b.favorite).length ?? 0;
const recentlyScanned = [...(devices ?? [])]
.filter((d) => d.lastScan)
@@ -30,13 +34,25 @@ export function DashboardPage() {
<AdminPageHeader
title="Dashboard"
description="Überblick über dein Homelab."
actions={
<Link
to="/"
className="flex items-center gap-1.5 rounded-lg border border-black/10 px-3 py-1.5
text-sm text-black/70 transition-colors hover:bg-black/5 dark:border-white/10
dark:text-white/70 dark:hover:bg-white/10"
>
<span aria-hidden>🏠</span> Startseite
</Link>
}
/>
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
<StatCard label="Geräte" value={devices?.length ?? 0} />
<StatCard label="davon online" value={onlineDevices} />
<StatCard label="Dienste" value={services?.length ?? 0} />
<StatCard label="Favoriten" value={favoriteServices} />
<StatCard label="Lesezeichen" value={bookmarks?.length ?? 0} />
<StatCard label="Favoriten (Dienste)" value={favoriteServices} />
<StatCard label="Favoriten (Lesezeichen)" value={favoriteBookmarks} />
</div>
<div className="mt-8">

404
apps/frontend/src/routes/admin/DevicesPage.tsx
View File

@@ -1,6 +1,7 @@
import { useState, type FormEvent } from "react";
import { useMemo, useState, type FormEvent } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@launchpad/ui";
import { Button, Favicon } from "@launchpad/ui";
import type { Service } from "@launchpad/shared";
import { useDevices, type DeviceWithServices } from "../../hooks/useDevices.js";
import { AdminPageHeader } from "./AdminPageHeader.js";
@@ -17,6 +18,18 @@ async function createDevice(input: { hostname: string; ip: string }) {
return res.json();
}
async function patchDevice(id: string, patch: Record<string, unknown>) {
const res = await fetch(`/api/devices/${id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(patch),
});
if (!res.ok) {
throw new Error(`Gerät konnte nicht aktualisiert werden (HTTP ${res.status})`);
}
return res.json();
}
async function deleteDevice(id: string) {
const res = await fetch(`/api/devices/${id}`, { method: "DELETE" });
if (!res.ok && res.status !== 404) {
@@ -24,11 +37,19 @@ async function deleteDevice(id: string) {
}
}
async function deleteServiceRequest(id: string) {
const res = await fetch(`/api/services/${id}`, { method: "DELETE" });
if (!res.ok && res.status !== 404) {
throw new Error(`Dienst konnte nicht gelöscht werden (HTTP ${res.status})`);
}
}
interface ScanResult {
scannedPorts: number;
ports: number[];
created: number;
updated: number;
staleServices: Service[];
}
async function scanDevice(id: string): Promise<ScanResult> {
@@ -40,9 +61,150 @@ async function scanDevice(id: string): Promise<ScanResult> {
return body;
}
function EditDeviceForm({ device, onDone }: { device: DeviceWithServices; onDone: () => void }) {
const queryClient = useQueryClient();
const [hostname, setHostname] = useState(device.hostname);
const [ip, setIp] = useState(device.ip);
const [mac, setMac] = useState(device.mac ?? "");
const [manufacturer, setManufacturer] = useState(device.manufacturer ?? "");
const [model, setModel] = useState(device.model ?? "");
const mutation = useMutation({
mutationFn: () =>
patchDevice(device.id, {
hostname: hostname.trim(),
ip: ip.trim(),
mac: mac.trim() || undefined,
manufacturer: manufacturer.trim() || undefined,
model: model.trim() || undefined,
}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["devices"] });
onDone();
},
});
return (
<tr className="border-b border-black/5 bg-black/[0.02] last:border-0 dark:border-white/5 dark:bg-white/5">
<td colSpan={6} className="px-4 py-3">
<div className="flex flex-wrap items-end gap-3">
<div>
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">Hostname</label>
<input
value={hostname}
onChange={(e) => setHostname(e.target.value)}
className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
dark:border-white/10 dark:bg-white/10 dark:text-white"
/>
</div>
<div>
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">IP</label>
<input
value={ip}
onChange={(e) => setIp(e.target.value)}
className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
dark:border-white/10 dark:bg-white/10 dark:text-white"
/>
</div>
<div>
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">
MAC-Adresse
</label>
<input
value={mac}
onChange={(e) => setMac(e.target.value)}
placeholder="AA:BB:CC:DD:EE:FF"
className="w-40 rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
dark:border-white/10 dark:bg-white/10 dark:text-white"
/>
</div>
<div>
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">Hersteller</label>
<input
value={manufacturer}
onChange={(e) => setManufacturer(e.target.value)}
className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
dark:border-white/10 dark:bg-white/10 dark:text-white"
/>
</div>
<div>
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">Modell</label>
<input
value={model}
onChange={(e) => setModel(e.target.value)}
className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
dark:border-white/10 dark:bg-white/10 dark:text-white"
/>
</div>
<div className="flex gap-2">
<Button size="sm" variant="primary" onClick={() => mutation.mutate()} disabled={mutation.isPending}>
Speichern
</Button>
<Button size="sm" variant="ghost" onClick={onDone}>
Abbrechen
</Button>
</div>
</div>
</td>
</tr>
);
}
function StaleServicesReview({ staleServices, onDone }: { staleServices: Service[]; onDone: () => void }) {
const queryClient = useQueryClient();
const [handled, setHandled] = useState<Set<string>>(new Set());
const deleteMutation = useMutation({
mutationFn: (id: string) => deleteServiceRequest(id),
onSuccess: (_data, id) => {
setHandled((prev) => new Set(prev).add(id));
queryClient.invalidateQueries({ queryKey: ["services"] });
},
});
const remaining = staleServices.filter((s) => !handled.has(s.id));
if (remaining.length === 0) return null;
return (
<div className="mt-2 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3 text-xs">
<p className="mb-2 font-medium text-amber-700 dark:text-amber-400">
{remaining.length} Dienst(e) beim letzten Scan nicht mehr gefunden (Port nicht mehr offen):
</p>
<ul className="space-y-1">
{remaining.map((s) => (
<li key={s.id} className="flex items-center justify-between gap-2">
<span className="text-black/70 dark:text-white/70">
{s.displayName} ({s.hostname}:{s.port})
</span>
<div className="flex gap-1">
<Button size="sm" variant="ghost" onClick={() => setHandled((prev) => new Set(prev).add(s.id))}>
Behalten
</Button>
<Button
size="sm"
variant="danger"
onClick={() => deleteMutation.mutate(s.id)}
disabled={deleteMutation.isPending}
>
Entfernen
</Button>
</div>
</li>
))}
</ul>
<button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
Hinweis schließen
</button>
</div>
);
}
function DeviceRow({ device }: { device: DeviceWithServices }) {
const queryClient = useQueryClient();
const [scanMessage, setScanMessage] = useState<string | null>(null);
const [staleServices, setStaleServices] = useState<Service[]>([]);
const [expanded, setExpanded] = useState(false);
const [editing, setEditing] = useState(false);
const scanMutation = useMutation({
mutationFn: () => scanDevice(device.id),
@@ -51,6 +213,7 @@ function DeviceRow({ device }: { device: DeviceWithServices }) {
setScanMessage(
`Ports offen: ${portsText} · ${result.created} neu · ${result.updated} aktualisiert`
);
setStaleServices(result.staleServices);
queryClient.invalidateQueries({ queryKey: ["devices"] });
queryClient.invalidateQueries({ queryKey: ["services"] });
},
@@ -62,56 +225,113 @@ function DeviceRow({ device }: { device: DeviceWithServices }) {
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["devices"] }),
});
if (editing) {
return <EditDeviceForm device={device} onDone={() => setEditing(false)} />;
}
return (
<tr className="border-b border-black/5 last:border-0 dark:border-white/5">
<td className="px-4 py-3">
<div className="font-medium text-black dark:text-white">{device.hostname}</div>
<div className="text-xs text-black/40 dark:text-white/40">{device.ip}</div>
</td>
<td className="px-4 py-3">
<span
className={`inline-flex items-center gap-1.5 text-xs ${
device.online ? "text-emerald-600 dark:text-emerald-400" : "text-black/40 dark:text-white/40"
}`}
>
<>
<tr className="border-b border-black/5 last:border-0 dark:border-white/5">
<td className="px-4 py-3">
<button
onClick={() => setExpanded((e) => !e)}
className="flex items-center gap-1.5 text-left"
title={expanded ? "Dienste ausblenden" : "Dienste anzeigen"}
>
<span className="text-black/30 dark:text-white/30">{expanded ? "▾" : "▸"}</span>
<span className="font-medium text-black dark:text-white">{device.hostname}</span>
</button>
</td>
<td className="px-4 py-3 font-mono text-black/60 dark:text-white/60">{device.ip}</td>
<td className="px-4 py-3 font-mono text-xs text-black/40 dark:text-white/40">
{device.mac ?? "–"}
</td>
<td className="px-4 py-3">
<span
className={`h-1.5 w-1.5 rounded-full ${device.online ? "bg-emerald-500" : "bg-black/20 dark:bg-white/20"}`}
/>
{device.online ? "Online" : "Offline"}
</span>
</td>
<td className="px-4 py-3 text-black/60 dark:text-white/60">{device.services.length}</td>
<td className="px-4 py-3 text-xs text-black/40 dark:text-white/40">
{device.lastScan ? new Date(device.lastScan).toLocaleString("de-DE") : "nie gescannt"}
</td>
<td className="px-4 py-3">
<div className="flex items-center justify-end gap-2">
{scanMessage ? (
<span className="max-w-[22rem] truncate text-xs text-black/40 dark:text-white/40" title={scanMessage}>
{scanMessage}
</span>
) : null}
<Button
size="sm"
onClick={() => {
setScanMessage(null);
scanMutation.mutate();
}}
disabled={scanMutation.isPending}
className={`inline-flex items-center gap-1.5 text-xs ${
device.online ? "text-emerald-600 dark:text-emerald-400" : "text-black/40 dark:text-white/40"
}`}
>
{scanMutation.isPending ? "Scanne …" : "Jetzt scannen"}
</Button>
<Button
size="sm"
variant="danger"
onClick={() => deleteMutation.mutate()}
disabled={deleteMutation.isPending}
>
Löschen
</Button>
</div>
</td>
</tr>
<span
className={`h-1.5 w-1.5 rounded-full ${device.online ? "bg-emerald-500" : "bg-black/20 dark:bg-white/20"}`}
/>
{device.online ? "Online" : "Offline"}
</span>
<div className="text-[10px] text-black/30 dark:text-white/30">
{device.lastScan
? `zuletzt gesehen: ${new Date(device.lastScan).toLocaleString("de-DE")}`
: "nie gescannt"}
</div>
</td>
<td className="px-4 py-3 text-black/60 dark:text-white/60">{device.services.length}</td>
<td className="px-4 py-3">
<div className="flex items-center justify-end gap-2">
<Button size="sm" onClick={() => setEditing(true)}>
Bearbeiten
</Button>
<Button
size="sm"
onClick={() => {
setScanMessage(null);
scanMutation.mutate();
}}
disabled={scanMutation.isPending}
>
{scanMutation.isPending ? "Scanne …" : "Jetzt scannen"}
</Button>
<Button
size="sm"
variant="danger"
onClick={() => deleteMutation.mutate()}
disabled={deleteMutation.isPending}
>
Löschen
</Button>
</div>
</td>
</tr>
{(scanMessage || staleServices.length > 0) && (
<tr className="border-b border-black/5 dark:border-white/5">
<td colSpan={6} className="px-4 pb-3">
{scanMessage ? (
<p className="text-xs text-black/40 dark:text-white/40">{scanMessage}</p>
) : null}
{staleServices.length > 0 ? (
<StaleServicesReview staleServices={staleServices} onDone={() => setStaleServices([])} />
) : null}
</td>
</tr>
)}
{expanded && (
<tr className="border-b border-black/5 bg-black/[0.015] dark:border-white/5 dark:bg-white/[0.02]">
<td colSpan={6} className="px-4 py-3">
{device.services.length === 0 ? (
<p className="text-xs text-black/40 dark:text-white/40">Keine Dienste auf diesem Gerät.</p>
) : (
<div className="flex flex-wrap gap-2">
{device.services.map((s) => (
<a
key={s.id}
href={s.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 rounded-full border border-black/10 bg-white/60
px-2.5 py-1 text-xs text-black/70 hover:bg-black/5 dark:border-white/10
dark:bg-white/5 dark:text-white/70 dark:hover:bg-white/10"
>
<Favicon src={s.favicon} fallbackLetter={s.displayName} size="sm" />
{s.displayName}
<span className="text-black/30 dark:text-white/30">:{s.port}</span>
</a>
))}
</div>
)}
</td>
</tr>
)}
</>
);
}
@@ -173,14 +393,83 @@ function AddDeviceForm() {
);
}
type SortColumn = "hostname" | "ip" | "mac" | "online" | "services" | null;
function SortableHeader({
label,
column,
activeColumn,
direction,
onClick,
}: {
label: string;
column: SortColumn;
activeColumn: SortColumn;
direction: "asc" | "desc";
onClick: (column: SortColumn) => void;
}) {
const active = activeColumn === column;
return (
<th className="px-4 py-2 font-medium">
<button
onClick={() => onClick(column)}
className={`flex items-center gap-1 hover:text-black dark:hover:text-white ${
active ? "text-black dark:text-white" : ""
}`}
>
{label}
<span className="text-[10px]">{active ? (direction === "asc" ? "▲" : "▼") : "⇅"}</span>
</button>
</th>
);
}
export function DevicesPage() {
const { data: devices, isLoading, isError } = useDevices();
const [sortColumn, setSortColumn] = useState<SortColumn>(null);
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
const list = useMemo(() => {
const base = devices ?? [];
if (!sortColumn) return base;
const sorted = [...base].sort((a, b) => {
let cmp = 0;
switch (sortColumn) {
case "hostname":
cmp = a.hostname.localeCompare(b.hostname);
break;
case "ip":
cmp = a.ip.localeCompare(b.ip, undefined, { numeric: true });
break;
case "mac":
cmp = (a.mac ?? "").localeCompare(b.mac ?? "");
break;
case "online":
cmp = Number(a.online) - Number(b.online);
break;
case "services":
cmp = a.services.length - b.services.length;
break;
}
return sortDirection === "asc" ? cmp : -cmp;
});
return sorted;
}, [devices, sortColumn, sortDirection]);
function handleHeaderClick(column: SortColumn) {
if (sortColumn === column) {
setSortDirection((d) => (d === "asc" ? "desc" : "asc"));
} else {
setSortColumn(column);
setSortDirection("asc");
}
}
return (
<div>
<AdminPageHeader
title="Geräte"
description="Alle bekannten Geräte in deinem Netzwerk. Scans laufen nur auf Knopfdruck."
description="Alle bekannten Geräte in deinem Netzwerk. Scans laufen nur auf Knopfdruck. Klick auf den Gerätenamen zeigt die zugehörigen Dienste."
/>
<div className="mb-6">
@@ -191,22 +480,23 @@ export function DevicesPage() {
<p className="text-sm text-black/40 dark:text-white/40">Lade Geräte …</p>
) : isError ? (
<p className="text-sm text-red-500">Geräte konnten nicht geladen werden.</p>
) : devices && devices.length > 0 ? (
) : list.length > 0 ? (
<div className="overflow-hidden rounded-2xl border border-black/10 dark:border-white/10">
<div className="overflow-x-auto">
<table className="w-full min-w-[640px] text-sm">
<table className="w-full min-w-[760px] text-sm">
<thead>
<tr className="border-b border-black/10 bg-black/[0.02] text-left text-xs
uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
<th className="px-4 py-2 font-medium">Gerät</th>
<th className="px-4 py-2 font-medium">Status</th>
<th className="px-4 py-2 font-medium">Dienste</th>
<th className="px-4 py-2 font-medium">Letzter Scan</th>
<SortableHeader label="Gerät" column="hostname" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="IP" column="ip" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="MAC" column="mac" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Status" column="online" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Dienste" column="services" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<th className="px-4 py-2" />
</tr>
</thead>
<tbody>
{devices.map((device) => (
{list.map((device) => (
<DeviceRow key={device.id} device={device} />
))}
</tbody>

72
apps/frontend/src/routes/admin/ScannerPage.tsx
View File

@@ -1,16 +1,29 @@
import { useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@launchpad/ui";
import type { Device } from "@launchpad/shared";
import { useDevices } from "../../hooks/useDevices.js";
import { AdminPageHeader } from "./AdminPageHeader.js";
async function scanFritzBox() {
interface FritzBoxScanResult {
found: number;
staleDevices: Device[];
}
async function scanFritzBox(): Promise<FritzBoxScanResult> {
const res = await fetch("/api/scan/fritzbox", { method: "POST" });
const body = await res.json();
if (!res.ok) {
throw new Error(body.error ?? `FritzBox-Scan fehlgeschlagen (HTTP ${res.status})`);
}
return body as { found: number };
return body;
}
async function deleteDeviceRequest(id: string) {
const res = await fetch(`/api/devices/${id}`, { method: "DELETE" });
if (!res.ok && res.status !== 404) {
throw new Error(`Gerät konnte nicht gelöscht werden (HTTP ${res.status})`);
}
}
async function scanDeviceById(id: string) {
@@ -22,15 +35,67 @@ async function scanDeviceById(id: string) {
return body as { created: number; updated: number };
}
function StaleDevicesReview({ staleDevices, onDone }: { staleDevices: Device[]; onDone: () => void }) {
const queryClient = useQueryClient();
const [handled, setHandled] = useState<Set<string>>(new Set());
const deleteMutation = useMutation({
mutationFn: (id: string) => deleteDeviceRequest(id),
onSuccess: (_data, id) => {
setHandled((prev) => new Set(prev).add(id));
queryClient.invalidateQueries({ queryKey: ["devices"] });
},
});
const remaining = staleDevices.filter((d) => !handled.has(d.id));
if (remaining.length === 0) return null;
return (
<div className="mt-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3 text-xs">
<p className="mb-2 font-medium text-amber-700 dark:text-amber-400">
{remaining.length} Gerät(e), die die FritzBox früher gemeldet hatte, diesmal aber nicht
mehr:
</p>
<ul className="space-y-1">
{remaining.map((d) => (
<li key={d.id} className="flex items-center justify-between gap-2">
<span className="text-black/70 dark:text-white/70">
{d.hostname} ({d.ip})
</span>
<div className="flex gap-1">
<Button size="sm" variant="ghost" onClick={() => setHandled((prev) => new Set(prev).add(d.id))}>
Behalten
</Button>
<Button
size="sm"
variant="danger"
onClick={() => deleteMutation.mutate(d.id)}
disabled={deleteMutation.isPending}
>
Löschen
</Button>
</div>
</li>
))}
</ul>
<button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
Hinweis schließen
</button>
</div>
);
}
export function ScannerPage() {
const queryClient = useQueryClient();
const { data: devices } = useDevices();
const [bulkStatus, setBulkStatus] = useState<string | null>(null);
const [bulkRunning, setBulkRunning] = useState(false);
const [staleDevices, setStaleDevices] = useState<Device[]>([]);
const fritzboxMutation = useMutation({
mutationFn: scanFritzBox,
onSuccess: (result) => {
setStaleDevices(result.staleDevices);
queryClient.invalidateQueries({ queryKey: ["devices"] });
queryClient.invalidateQueries({ queryKey: ["logs"] });
return result;
@@ -94,6 +159,9 @@ export function ScannerPage() {
{fritzboxMutation.isError ? (
<p className="mt-2 text-sm text-red-500">{(fritzboxMutation.error as Error).message}</p>
) : null}
{staleDevices.length > 0 ? (
<StaleDevicesReview staleDevices={staleDevices} onDone={() => setStaleDevices([])} />
) : null}
</div>
<div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">

142
apps/frontend/src/routes/admin/ServicesPage.tsx
View File

@@ -1,9 +1,10 @@
import { useMemo, useRef, useState, type DragEvent } from "react";
import { useMemo, useState, type DragEvent } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@launchpad/ui";
import { Button, Favicon } from "@launchpad/ui";
import type { Service } from "@launchpad/shared";
import { useServices } from "../../hooks/useServices.js";
import { useCategories } from "../../hooks/useCategories.js";
import { useDevices } from "../../hooks/useDevices.js";
import { AdminPageHeader } from "./AdminPageHeader.js";
interface ServicePatch {
@@ -101,7 +102,7 @@ function CategorySelect({
);
}
const EDIT_FORM_COLSPAN = 9;
const EDIT_FORM_COLSPAN = 11;
function EditForm({ service, onDone }: { service: Service; onDone: () => void }) {
const queryClient = useQueryClient();
@@ -233,6 +234,7 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
function ServiceRow({
service,
deviceMac,
draggable,
onDragStart,
onDragOver,
@@ -240,6 +242,7 @@ function ServiceRow({
isDragging,
}: {
service: Service;
deviceMac: string | null;
draggable: boolean;
onDragStart: (e: DragEvent<HTMLTableRowElement>) => void;
onDragOver: (e: DragEvent<HTMLTableRowElement>) => void;
@@ -307,16 +310,24 @@ function ServiceRow({
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-2">
<span className="font-medium text-black dark:text-white">{service.displayName}</span>
{!service.visible ? (
<span className="rounded-full bg-black/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-black/50 dark:bg-white/10 dark:text-white/50">
ausgeblendet
</span>
) : null}
<Favicon src={service.favicon} fallbackLetter={service.displayName} size="sm" />
<div className="flex items-center gap-2">
<span className="font-medium text-black dark:text-white">{service.displayName}</span>
{!service.visible ? (
<span className="rounded-full bg-black/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-black/50 dark:bg-white/10 dark:text-white/50">
ausgeblendet
</span>
) : null}
</div>
</div>
<div className="text-xs text-black/40 dark:text-white/40">{service.hostname}</div>
</td>
<td className="px-4 py-3 font-mono text-xs text-black/60 dark:text-white/60">
{service.hostname}
</td>
<td className="px-4 py-3 text-black/60 dark:text-white/60">{service.category ?? "–"}</td>
<td className="px-4 py-3 font-mono text-xs text-black/40 dark:text-white/40">
{deviceMac ?? "–"}
</td>
<td className="px-4 py-3 text-black/60 dark:text-white/60">
{service.alias.length > 0 ? service.alias.join(", ") : "–"}
</td>
@@ -356,7 +367,7 @@ function ServiceRow({
);
}
type SortColumn = "displayName" | "category" | "alias" | "port" | "https" | null;
type SortColumn = "displayName" | "hostname" | "category" | "alias" | "port" | "https" | null;
function SortableHeader({
label,
@@ -387,106 +398,21 @@ function SortableHeader({
);
}
function readFileAsBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result as string;
resolve(result.split(",")[1] ?? "");
};
reader.onerror = () => reject(new Error("Datei konnte nicht gelesen werden"));
reader.readAsDataURL(file);
});
}
function detectFormat(filename: string): "csv" | "xlsx" | "json" {
if (filename.toLowerCase().endsWith(".xlsx")) return "xlsx";
if (filename.toLowerCase().endsWith(".json")) return "json";
return "csv";
}
interface ImportResult {
imported: number;
skipped: number;
errors: string[];
}
function ImportExportBar() {
const queryClient = useQueryClient();
const fileInputRef = useRef<HTMLInputElement>(null);
const [result, setResult] = useState<ImportResult | null>(null);
const importMutation = useMutation({
mutationFn: async (file: File): Promise<ImportResult> => {
const content = await readFileAsBase64(file);
const format = detectFormat(file.name);
const res = await fetch("/api/services/import", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ format, content }),
});
if (!res.ok) {
const body = await res.json().catch(() => ({}));
throw new Error(body.error ?? `Import fehlgeschlagen (HTTP ${res.status})`);
}
return res.json();
},
onSuccess: (data) => {
setResult(data);
queryClient.invalidateQueries({ queryKey: ["services"] });
queryClient.invalidateQueries({ queryKey: ["devices"] });
queryClient.invalidateQueries({ queryKey: ["categories"] });
},
onError: (err: Error) => setResult({ imported: 0, skipped: 0, errors: [err.message] }),
});
return (
<div className="mb-6 flex flex-wrap items-center gap-2">
<span className="text-xs font-medium text-black/50 dark:text-white/50">Export:</span>
<a href="/api/services/export?format=csv" download>
<Button size="sm">CSV</Button>
</a>
<a href="/api/services/export?format=xlsx" download>
<Button size="sm">Excel</Button>
</a>
<a href="/api/services/export?format=json" download>
<Button size="sm">JSON</Button>
</a>
<span className="ml-4 text-xs font-medium text-black/50 dark:text-white/50">Import:</span>
<input
ref={fileInputRef}
type="file"
accept=".csv,.xlsx,.json"
className="hidden"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) importMutation.mutate(file);
e.target.value = "";
}}
/>
<Button size="sm" onClick={() => fileInputRef.current?.click()} disabled={importMutation.isPending}>
{importMutation.isPending ? "Importiere …" : "Datei wählen (CSV/Excel/JSON)"}
</Button>
{result ? (
<span className="w-full text-xs text-black/50 dark:text-white/50">
{result.imported} importiert, {result.skipped} übersprungen (bereits vorhanden)
{result.errors.length > 0 ? `, ${result.errors.length} Fehler: ${result.errors.join(" | ")}` : "."}
</span>
) : null}
</div>
);
}
export function ServicesPage() {
const { data: services, isLoading, isError } = useServices();
const { data: devices } = useDevices();
const queryClient = useQueryClient();
const [draggedId, setDraggedId] = useState<string | null>(null);
const [localOrder, setLocalOrder] = useState<Service[] | null>(null);
const [sortColumn, setSortColumn] = useState<SortColumn>(null);
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
const macByDeviceId = useMemo(() => {
const map: Record<string, string | null> = {};
for (const d of devices ?? []) map[d.id] = d.mac;
return map;
}, [devices]);
const reorderMutation = useMutation({
mutationFn: reorderServicesRequest,
onSuccess: () => {
@@ -507,6 +433,9 @@ export function ServicesPage() {
case "displayName":
cmp = a.displayName.localeCompare(b.displayName);
break;
case "hostname":
cmp = a.hostname.localeCompare(b.hostname);
break;
case "category":
cmp = (a.category ?? "").localeCompare(b.category ?? "");
break;
@@ -578,8 +507,6 @@ export function ServicesPage() {
}
/>
<ImportExportBar />
{sortColumn ? (
<div className="mb-3">
<Button size="sm" variant="ghost" onClick={() => setSortColumn(null)}>
@@ -595,14 +522,16 @@ export function ServicesPage() {
) : list.length > 0 ? (
<div className="overflow-hidden rounded-2xl border border-black/10 dark:border-white/10">
<div className="overflow-x-auto">
<table className="w-full min-w-[860px] text-sm">
<table className="w-full min-w-[1020px] text-sm">
<thead>
<tr className="border-b border-black/10 bg-black/[0.02] text-left text-xs
uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
<th className="px-2 py-2" />
<th className="px-2 py-2" />
<SortableHeader label="Dienst" column="displayName" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Host/IP" column="hostname" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Kategorie" column="category" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<th className="px-4 py-2 font-medium">MAC</th>
<SortableHeader label="Alias" column="alias" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Port" column="port" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Protokoll" column="https" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
@@ -615,6 +544,7 @@ export function ServicesPage() {
<ServiceRow
key={service.id}
service={service}
deviceMac={macByDeviceId[service.deviceId] ?? null}
draggable={dragEnabled}
isDragging={draggedId === service.id}
onDragStart={handleDragStart(service.id)}

223
apps/frontend/src/routes/admin/SettingsPage.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from "react";
import { useRef, useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@launchpad/ui";
import { useBackendHealth } from "../../hooks/useBackendHealth.js";
import { useTheme } from "../../hooks/useTheme.js";
import { useSettings } from "../../hooks/useSettings.js";
import { AdminPageHeader } from "./AdminPageHeader.js";
function InfoRow({ label, value }: { label: string; value: string }) {
@@ -14,6 +15,210 @@ function InfoRow({ label, value }: { label: string; value: string }) {
);
}
function RecentVisitsLimitSetting() {
const { data: settings } = useSettings();
const queryClient = useQueryClient();
const [value, setValue] = useState<string | null>(null);
const mutation = useMutation({
mutationFn: async (limit: number) => {
const res = await fetch("/api/settings", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ recentVisitsLimit: limit }),
});
if (!res.ok) throw new Error(`Speichern fehlgeschlagen (HTTP ${res.status})`);
return res.json();
},
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["settings"] }),
});
const displayed = value ?? String(settings?.recentVisitsLimit ?? 5);
return (
<div className="flex items-center justify-between py-2">
<div>
<span className="text-sm text-black/50 dark:text-white/50">
Anzahl „Zuletzt besucht"
</span>
<p className="text-xs text-black/30 dark:text-white/30">0 = Leiste ausblenden</p>
</div>
<div className="flex items-center gap-2">
<input
type="number"
min={0}
max={50}
value={displayed}
onChange={(e) => setValue(e.target.value)}
onBlur={() => {
const n = Number(value);
if (value !== null && Number.isFinite(n)) mutation.mutate(n);
}}
className="w-20 rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
text-black dark:border-white/10 dark:bg-white/10 dark:text-white"
/>
{mutation.isPending ? <span className="text-xs text-black/30 dark:text-white/30">speichere …</span> : null}
</div>
</div>
);
}
function readFileAsBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve((reader.result as string).split(",")[1] ?? "");
reader.onerror = () => reject(new Error("Datei konnte nicht gelesen werden"));
reader.readAsDataURL(file);
});
}
function detectFormat(filename: string): "csv" | "xlsx" | "json" {
if (filename.toLowerCase().endsWith(".xlsx")) return "xlsx";
if (filename.toLowerCase().endsWith(".json")) return "json";
return "csv";
}
interface TransferResult {
devicesImported: number;
devicesSkipped: number;
servicesImported: number;
servicesSkipped: number;
errors: string[];
}
function ImportExportSection() {
const queryClient = useQueryClient();
const fileInputRef = useRef<HTMLInputElement>(null);
const [result, setResult] = useState<TransferResult | null>(null);
const importMutation = useMutation({
mutationFn: async (file: File): Promise<TransferResult> => {
const content = await readFileAsBase64(file);
const format = detectFormat(file.name);
const res = await fetch("/api/transfer/import", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ format, content }),
});
if (!res.ok) {
const body = await res.json().catch(() => ({}));
throw new Error(body.error ?? `Import fehlgeschlagen (HTTP ${res.status})`);
}
return res.json();
},
onSuccess: (data) => {
setResult(data);
queryClient.invalidateQueries({ queryKey: ["devices"] });
queryClient.invalidateQueries({ queryKey: ["services"] });
queryClient.invalidateQueries({ queryKey: ["categories"] });
},
onError: (err: Error) =>
setResult({
devicesImported: 0,
devicesSkipped: 0,
servicesImported: 0,
servicesSkipped: 0,
errors: [err.message],
}),
});
return (
<div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
<h2 className="mb-1 font-medium text-black dark:text-white">Import / Export</h2>
<p className="mb-4 text-sm text-black/50 dark:text-white/50">
Exportiert Geräte und Dienste in einer Datei. Import legt ausschließlich neue Einträge
an – bereits vorhandene Geräte (Abgleich über IP/Hostname) und Dienste (Abgleich über
Gerät + Port) werden übersprungen, nie überschrieben oder verdoppelt.
</p>
<div className="mb-4 flex flex-wrap gap-2">
<a href="/api/transfer/export?format=csv" download>
<Button size="sm">CSV exportieren</Button>
</a>
<a href="/api/transfer/export?format=xlsx" download>
<Button size="sm">Excel exportieren</Button>
</a>
<a href="/api/transfer/export?format=json" download>
<Button size="sm">JSON exportieren</Button>
</a>
</div>
<div className="mb-4">
<input
ref={fileInputRef}
type="file"
accept=".csv,.xlsx,.json"
className="hidden"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) importMutation.mutate(file);
e.target.value = "";
}}
/>
<Button
variant="primary"
onClick={() => fileInputRef.current?.click()}
disabled={importMutation.isPending}
>
{importMutation.isPending ? "Importiere …" : "Datei importieren (CSV/Excel/JSON)"}
</Button>
</div>
{result ? (
<p className="mb-4 text-xs text-black/50 dark:text-white/50">
{result.devicesImported} Gerät(e) + {result.servicesImported} Dienst(e) importiert,{" "}
{result.devicesSkipped + result.servicesSkipped} übersprungen (bereits vorhanden)
{result.errors.length > 0
? `, ${result.errors.length} Fehler: ${result.errors.join(" | ")}`
: "."}
</p>
) : null}
<details className="text-xs text-black/50 dark:text-white/50">
<summary className="cursor-pointer font-medium text-black/70 dark:text-white/70">
Format-Anleitung für den Import anzeigen
</summary>
<div className="mt-2 space-y-2">
<p>
Eine Zeile pro Eintrag, mit einer Spalte{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">type</code> ={" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">device</code> oder{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">service</code>. Am
einfachsten: erst exportieren, die Datei als Vorlage nehmen.
</p>
<p>
<strong>Geräte-Zeilen</strong> brauchen:{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">hostname</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">ip</code> (Pflicht),
optional <code className="rounded bg-black/5 px-1 dark:bg-white/10">mac</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">manufacturer</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">model</code>.
</p>
<p>
<strong>Dienst-Zeilen</strong> brauchen:{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">displayName</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">hostname</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">port</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">url</code> (Pflicht),
plus <code className="rounded bg-black/5 px-1 dark:bg-white/10">deviceHostname</code>{" "}
und <code className="rounded bg-black/5 px-1 dark:bg-white/10">deviceIp</code>, um
sie einem Gerät zuzuordnen (wird bei Bedarf automatisch angelegt). Optional:{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">category</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">alias</code> (mit{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">;</code> getrennt),{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">favorite</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">visible</code>,{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">https</code> (jeweils{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">true</code>/
<code className="rounded bg-black/5 px-1 dark:bg-white/10">false</code>),{" "}
<code className="rounded bg-black/5 px-1 dark:bg-white/10">order</code> (Zahl).
</p>
</div>
</details>
</div>
);
}
async function resetEverything() {
const res = await fetch("/api/reset", {
method: "POST",
@@ -82,7 +287,7 @@ export function SettingsPage() {
<div>
<AdminPageHeader title="Einstellungen" />
<div className="max-w-lg space-y-6">
<div className="max-w-2xl space-y-6">
<div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
<h2 className="mb-2 font-medium text-black dark:text-white">Darstellung</h2>
<div className="flex items-center justify-between py-2">
@@ -96,8 +301,22 @@ export function SettingsPage() {
{theme === "dark" ? "🌙 Dunkel" : "☀️ Hell"} – wechseln
</button>
</div>
<RecentVisitsLimitSetting />
</div>
<div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
<h2 className="mb-2 font-medium text-black dark:text-white">HTTPS</h2>
<p className="mb-3 text-sm text-black/50 dark:text-white/50">
Root-CA-Zertifikat herunterladen und auf deinen Geräten als vertrauenswürdig
einstufen, um die Browser-Warnung dauerhaft loszuwerden (einmal pro Gerät).
</p>
<a href="/ca.crt" download>
<Button variant="primary">Root-Zertifikat herunterladen (ca.crt)</Button>
</a>
</div>
<ImportExportSection />
<div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
<h2 className="mb-2 font-medium text-black dark:text-white">Backend</h2>
{error ? (