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

Kritische Bugfixes: Export/CA-Download (Service-Worker), Speichern-Bug bei Diensten/Lesezeichen, Dark-Mode-Direktlink, Favicon-Mixed-Content-Proxy, Live-Update Zuletzt-besucht, Kategorie-Farb-Picker, Startseite-Nav

Browse Source
This commit is contained in:
Dicken
2026-07-20 13:02:58 +02:00
parent 96cf29fef4
commit cc4b285aea
13 changed files with 286 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,13 +11,6 @@ import { useCategories } from "../hooks/useCategories.js";
import { useRecentVisits, recordVisit } from "../hooks/useRecentVisits.js";
import { useReadLater } from "../hooks/useReadLater.js";
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> {
const path = item.kind === "service" ? `/api/services/${item.id}` : `/api/bookmarks/${item.id}`;
const res = await fetch(path, {
@@ -95,6 +88,7 @@ export function HomePage() {
const [theme, toggleTheme] = useTheme();
const [query, setQuery] = useState("");
const [selectedIndex, setSelectedIndex] = useState(0);
const [resultsVisible, setResultsVisible] = useState(false);
const { health, error: healthError } = useBackendHealth();
const { data: services, isLoading: servicesLoading, isError: servicesError } = useServices();
const { data: bookmarks, isLoading: bookmarksLoading } = useBookmarks();
@@ -102,10 +96,20 @@ export function HomePage() {
const { data: recentVisits } = useRecentVisits();
const { data: readLaterItems } = useReadLater();
const inputRef = useRef<HTMLInputElement>(null);
const searchContainerRef = useRef<HTMLDivElement>(null);
const queryClient = useQueryClient();
const isSearching = query.trim().length > 0;
const isLoading = servicesLoading || bookmarksLoading;
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).then(() => {
queryClient.invalidateQueries({ queryKey: ["recent-visits"] });
});
}
}
const categoryColors = useMemo(() => {
const map: Record<string, string> = {};
for (const c of categories ?? []) {
@@ -164,6 +168,25 @@ export function HomePage() {
setSelectedIndex(0);
}, [results.length, query]);
// Beim Tippen wieder einblenden (z. B. nachdem per Klick-außerhalb
// zugeklappt wurde und man weitertippt).
useEffect(() => {
if (isSearching) setResultsVisible(true);
}, [isSearching]);
// Klick außerhalb von Suchfeld+Trefferliste klappt das Dropdown wieder ein
// (Desktop-Verhalten, Text bleibt erhalten).
useEffect(() => {
function onPointerDown(e: MouseEvent) {
if (!searchContainerRef.current) return;
if (!searchContainerRef.current.contains(e.target as Node)) {
setResultsVisible(false);
}
}
document.addEventListener("mousedown", onPointerDown);
return () => document.removeEventListener("mousedown", onPointerDown);
}, []);
useEffect(() => {
function onKeyDown(e: KeyboardEvent) {
const isSlash = e.key === "/" && document.activeElement !== inputRef.current;
@@ -223,19 +246,19 @@ export function HomePage() {
</div>
{/* 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">
<div className="flex shrink-0 flex-col items-center gap-6 px-6 pb-4 pt-8 sm:pt-12">
<div className="flex flex-col items-center gap-1.5 text-center">
<h1 className="text-2xl font-semibold tracking-tight text-black dark:text-white sm:text-3xl">
LaunchPad
</h1>
<p className="text-xs text-black/50 dark:text-white/50 sm:text-sm">
<p className="text-sm text-black/50 dark:text-white/50">
Tippe, um deine Homelab-Dienste sofort zu öffnen.
</p>
</div>
<div className="w-full max-w-xl">
<div ref={searchContainerRef} className="w-full max-w-xl">
{hasFavorites ? (
<div className="mb-3 flex flex-col gap-2">
<div className="mb-5 flex flex-col gap-4">
{favoriteServices.length > 0 ? (
<FavoritesBar
items={favoriteServices}
@@ -267,12 +290,17 @@ export function HomePage() {
ref={inputRef}
value={query}
onChange={(e) => setQuery(e.target.value)}
onClear={() => {
setQuery("");
inputRef.current?.focus();
}}
onFocus={() => setResultsVisible(true)}
placeholder="Dienst oder Lesezeichen suchen … z. B. „frigate“"
hint="⌘K"
autoFocus
/>
{!isSearching ? (
{!isSearching || !resultsVisible ? (
<div className="mt-3 flex flex-col gap-3">
<ReadLaterBox />
@@ -295,26 +323,15 @@ export function HomePage() {
) : 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>
<FavoritesBar
items={recentVisits}
label="Zuletzt besucht"
categoryColors={categoryColors}
onOpen={(item) => {
const original = recentVisits.find((r) => r.id === item.id);
if (original) openItem(original);
}}
/>
) : null}
</div>
) : null}
@@ -322,7 +339,7 @@ export function HomePage() {
</div>
{/* Scrollender Bereich: NUR die Trefferliste scrollt, nicht die ganze Seite */}
{isSearching ? (
{isSearching && resultsVisible ? (
<div className="min-h-0 flex-1 px-6 pb-4">
<div className="mx-auto h-full max-w-xl">
{isLoading ? (