round19: Startseite aufgeraeumt, Favicon-Fallback ueber Ports, Favicon-Picker, Live-Status per Ping

apps/frontend/src/routes/HomePage.tsx

@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { SearchInput, StatusBadge, ResultsList, FavoritesBar, Favicon, Button } from "@launchpad/ui";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { faGear, faSun, faMoon, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { rankServices, type SearchResult } from "@launchpad/shared";
 import { useServices } from "../hooks/useServices.js";
 import { useBookmarks } from "../hooks/useBookmarks.js";
@@ -54,12 +54,15 @@ async function saveReadLaterRequest(url: string) {
 
 function ReadLaterBox() {
   const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
   const [url, setUrl] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const mutation = useMutation({
     mutationFn: () => saveReadLaterRequest(url.trim()),
     onSuccess: () => {
       setUrl("");
+      setOpen(false);
       queryClient.invalidateQueries({ queryKey: ["read-later"] });
     },
   });
@@ -70,18 +73,42 @@ function ReadLaterBox() {
     mutation.mutate();
   }
 
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => {
+          setOpen(true);
+          setTimeout(() => inputRef.current?.focus(), 0);
+        }}
+        className="flex items-center gap-1.5 text-xs text-black/40 transition-colors
+          hover:text-black/70 dark:text-white/40 dark:hover:text-white/70"
+      >
+        <FontAwesomeIcon icon={faPlus} className="text-[10px]" />
+        Link merken
+      </button>
+    );
+  }
+
   return (
-    <form onSubmit={handleSubmit} className="flex gap-2">
+    <form onSubmit={handleSubmit} className="flex w-full gap-2">
       <input
+        ref={inputRef}
         value={url}
         onChange={(e) => setUrl(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            setUrl("");
+            setOpen(false);
+          }
+        }}
         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
+        className="flex-1 rounded-xl border border-black/10 bg-white/70 px-3 py-1.5 text-sm
+          text-black outline-none placeholder:text-black/30 focus:border-indigo-400/60
           dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-white/30
-          dark:focus:border-white/30"
+          dark:focus:border-indigo-400/40"
       />
-      <Button type="submit" variant="secondary" disabled={mutation.isPending || !url.trim()}>
+      <Button type="submit" variant="secondary" size="sm" disabled={mutation.isPending || !url.trim()}>
         {mutation.isPending ? "…" : "Merken"}
       </Button>
     </form>
@@ -263,19 +290,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-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">
+      <div className="flex shrink-0 flex-col items-center gap-5 px-6 pb-4 pt-8 sm:pt-10">
+        <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
           </h1>
-          <p className="text-sm text-black/50 dark:text-white/50">
+          <p className="text-sm text-black/40 dark:text-white/40">
             Tippe, um deine Homelab-Dienste sofort zu öffnen.
           </p>
         </div>
 
         <div ref={searchContainerRef} className="w-full max-w-xl">
           {hasFavorites ? (
-            <div className="mb-5 flex flex-col gap-4">
+            <div className="mb-4 flex flex-col gap-3 divide-y divide-black/5 dark:divide-white/5">
               {favoriteServices.length > 0 ? (
                 <FavoritesBar
                   items={favoriteServices}
@@ -289,16 +316,18 @@ export function HomePage() {
                 />
               ) : 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)}
-                />
+                <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}
@@ -318,41 +347,58 @@ export function HomePage() {
           />
 
           {!isSearching || !resultsVisible ? (
-            <div className="mt-3 flex flex-col gap-3">
-              <ReadLaterBox />
-
+            <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;
-                if (!readLaterItems || readLaterItems.length === 0 || readLaterLimit <= 0) return null;
+                const hasReadLaterChips =
+                  readLaterItems && readLaterItems.length > 0 && readLaterLimit > 0;
                 return (
-                  <div className="flex flex-wrap items-center justify-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/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 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 ? (
-                <FavoritesBar
-                  items={recentVisits}
-                  label="Zuletzt besucht"
-                  categoryColors={categoryColors}
-                  onOpen={(item) => {
-                    const original = recentVisits.find((r) => r.id === item.id);
-                    if (original) openItem(original);
-                  }}
-                />
+                <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>
+                  <FavoritesBar
+                    items={recentVisits}
+                    categoryColors={categoryColors}
+                    onOpen={(item) => {
+                      const original = recentVisits.find((r) => r.id === item.id);
+                      if (original) openItem(original);
+                    }}
+                  />
+                </div>
               ) : null}
             </div>
           ) : null}