generated from Dicken/dickendock
round20: Startseite ueberarbeitet, Favicon-Auswahl bereinigt und Icon-Datenbank integriert, Ping-Schalter repariert
This commit is contained in:
@@ -267,9 +267,16 @@ export function HomePage() {
|
||||
|
||||
const isOnline = !healthError && health?.status === "ok";
|
||||
const hasFavorites = favoriteServices.length > 0 || favoriteBookmarks.length > 0;
|
||||
const readLaterLimit = settings?.readLaterLimit ?? 5;
|
||||
const hasReadLaterChips = readLaterItems && readLaterItems.length > 0 && readLaterLimit > 0;
|
||||
const showShelf = !isSearching || !resultsVisible;
|
||||
const showResults = isSearching && resultsVisible;
|
||||
|
||||
return (
|
||||
<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={`flex flex-col bg-gradient-to-b from-white to-neutral-100 dark:from-black
|
||||
dark:to-neutral-950 ${showResults ? "h-dvh overflow-hidden" : "min-h-dvh"}`}
|
||||
>
|
||||
<div className="fixed right-6 top-6 z-10 flex items-center gap-2">
|
||||
<Link
|
||||
to="/admin"
|
||||
@@ -289,8 +296,12 @@ export function HomePage() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Nicht-scrollender Kopfbereich: Titel, Favoriten, Suchfeld, Später-lesen, Zuletzt besucht */}
|
||||
<div className="flex shrink-0 flex-col items-center gap-5 px-6 pb-4 pt-8 sm:pt-10">
|
||||
{/* Kopfbereich: Titel, Suchfeld, Favoriten/Später-lesen/Zuletzt-besucht.
|
||||
Nur im "aktiv suchend"-Zustand shrink-0 + scrollender Bereich
|
||||
darunter - sonst normaler Dokumentfluss, damit der Footer direkt
|
||||
nach dem Inhalt folgt statt mit einer riesigen Lücke ganz unten zu
|
||||
kleben (siehe showResults-Fallunterscheidung oben). */}
|
||||
<div className={`flex flex-col items-center gap-6 px-6 pb-6 pt-10 sm:pt-14 ${showResults ? "shrink-0" : ""}`}>
|
||||
<div className="flex flex-col items-center gap-1 text-center">
|
||||
<h1 className="text-xl font-semibold tracking-tight text-black dark:text-white sm:text-2xl">
|
||||
LaunchPad
|
||||
@@ -301,37 +312,6 @@ export function HomePage() {
|
||||
</div>
|
||||
|
||||
<div ref={searchContainerRef} className="w-full max-w-xl">
|
||||
{hasFavorites ? (
|
||||
<div className="mb-4 flex flex-col gap-3 divide-y divide-black/5 dark:divide-white/5">
|
||||
{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 ? (
|
||||
<div className={favoriteServices.length > 0 ? "pt-3" : ""}>
|
||||
<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)}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<SearchInput
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
@@ -345,68 +325,93 @@ export function HomePage() {
|
||||
hint="⌘K"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!isSearching || !resultsVisible ? (
|
||||
<div
|
||||
className="mt-4 divide-y divide-black/5 rounded-2xl border border-black/5
|
||||
bg-black/[0.015] dark:divide-white/5 dark:border-white/5 dark:bg-white/[0.02]"
|
||||
>
|
||||
{(() => {
|
||||
const readLaterLimit = settings?.readLaterLimit ?? 5;
|
||||
const hasReadLaterChips =
|
||||
readLaterItems && readLaterItems.length > 0 && readLaterLimit > 0;
|
||||
return (
|
||||
<div className="flex flex-col gap-2 px-4 py-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
|
||||
Später lesen
|
||||
</span>
|
||||
<ReadLaterBox />
|
||||
</div>
|
||||
{hasReadLaterChips ? (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{readLaterItems!.slice(0, readLaterLimit).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/60 px-2.5 py-1 text-xs text-black/60 transition-colors
|
||||
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}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{recentVisits && recentVisits.length > 0 ? (
|
||||
<div className="px-4 py-3">
|
||||
<span className="mb-2 block text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
|
||||
Zuletzt besucht
|
||||
</span>
|
||||
{showShelf ? (
|
||||
<div className="flex w-full max-w-xl flex-col gap-6">
|
||||
{hasFavorites ? (
|
||||
<div className="flex flex-col gap-4">
|
||||
{favoriteServices.length > 0 ? (
|
||||
<FavoritesBar
|
||||
items={recentVisits}
|
||||
items={favoriteServices}
|
||||
label="Favoriten · Dienste"
|
||||
categoryColors={categoryColors}
|
||||
onOpen={(item) => {
|
||||
const original = recentVisits.find((r) => r.id === item.id);
|
||||
if (original) openItem(original);
|
||||
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="Favoriten · 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}
|
||||
|
||||
{recentVisits && recentVisits.length > 0 ? (
|
||||
<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>
|
||||
<div className="mb-2.5 flex items-center justify-between gap-2">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-black/35 dark:text-white/35">
|
||||
Später lesen
|
||||
</span>
|
||||
<ReadLaterBox />
|
||||
</div>
|
||||
{hasReadLaterChips ? (
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
{readLaterItems!.slice(0, readLaterLimit).map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => window.open(item.url, "_blank", "noopener,noreferrer")}
|
||||
title={item.displayName}
|
||||
className="group flex w-16 flex-col items-center gap-1.5 rounded-xl p-1.5
|
||||
transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
|
||||
>
|
||||
<span
|
||||
className="flex h-11 w-11 items-center justify-center rounded-xl border
|
||||
border-black/10 bg-white/80 shadow-sm transition-transform
|
||||
group-hover:scale-105 dark:border-white/10 dark:bg-white/5"
|
||||
>
|
||||
<Favicon src={item.favicon} fallbackLetter={item.displayName} size="md" />
|
||||
</span>
|
||||
<span className="w-full truncate text-center text-[11px] leading-tight text-black/55 dark:text-white/55">
|
||||
{item.displayName}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
) : (
|
||||
<p className="text-xs text-black/30 dark:text-white/30">
|
||||
Noch nichts gemerkt.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Scrollender Bereich: NUR die Trefferliste scrollt, nicht die ganze Seite */}
|
||||
{isSearching && resultsVisible ? (
|
||||
{showResults ? (
|
||||
<div className="min-h-0 flex-1 px-6 pb-4">
|
||||
<div className="mx-auto h-full max-w-xl">
|
||||
{isLoading ? (
|
||||
@@ -432,11 +437,9 @@ export function HomePage() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1" />
|
||||
)}
|
||||
) : null}
|
||||
|
||||
<div className="flex shrink-0 flex-col items-center gap-1 pb-4">
|
||||
<div className={`flex flex-col items-center gap-1 pb-6 pt-2 ${showResults ? "shrink-0" : "mt-4"}`}>
|
||||
<StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
|
||||
{health ? (
|
||||
<span className="text-xs text-black/30 dark:text-white/30">
|
||||
|
||||
Reference in New Issue
Block a user