round20: Startseite ueberarbeitet, Favicon-Auswahl bereinigt und Icon-Datenbank integriert, Ping-Schalter repariert

apps/frontend/src/routes/admin/ServicesPage.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFloppyDisk, faPen, faTrash, faXmark, faSort, faSortUp, faSortDown, faStar as faStarSolid, faEye, faEyeSlash, faArrowLeft, faSignature } from "@fortawesome/free-solid-svg-icons";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Favicon } from "@launchpad/ui";
+import { Button, Favicon, FaviconPicker } from "@launchpad/ui";
 import type { Service } from "@launchpad/shared";
 import { useServices } from "../../hooks/useServices.js";
 import { useBookmarks } from "../../hooks/useBookmarks.js";
@@ -125,7 +125,6 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
   // string = neu hochgeladenes Favicon als data:-URL.
   const [favicon, setFavicon] = useState<string | null | undefined>(undefined);
   const [faviconError, setFaviconError] = useState<string | null>(null);
-  const [pickerOpen, setPickerOpen] = useState(false);
 
   // Bereits verwendete Favicons (Dienste + Lesezeichen), zur Auswahl im
   // "Vorhandenes Favicon wählen"-Picker - z. B. wenn mehrere Dienste
@@ -211,16 +210,7 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
                   onChange={(e) => handleFaviconFile(e.target.files?.[0])}
                 />
               </label>
-              {existingFavicons.length > 0 ? (
-                <button
-                  type="button"
-                  onClick={() => setPickerOpen((v) => !v)}
-                  className="rounded-lg border border-black/10 px-2 py-1 text-xs text-black/70
-                    hover:bg-black/5 dark:border-white/10 dark:text-white/70 dark:hover:bg-white/10"
-                >
-                  Vorhandenes wählen
-                </button>
-              ) : null}
+              <FaviconPicker existingFavicons={existingFavicons} onSelect={(url) => setFavicon(url)} />
               {faviconPreview ? (
                 <button
                   type="button"
@@ -232,25 +222,6 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
               ) : null}
             </div>
             {faviconError ? <p className="mt-1 text-xs text-red-500">{faviconError}</p> : null}
-            {pickerOpen ? (
-              <div className="mt-2 flex max-w-xs flex-wrap gap-1.5 rounded-lg border border-black/10 p-2
-                dark:border-white/10">
-                {existingFavicons.map(([iconUrl, name]) => (
-                  <button
-                    key={iconUrl}
-                    type="button"
-                    title={name}
-                    onClick={() => {
-                      setFavicon(iconUrl);
-                      setPickerOpen(false);
-                    }}
-                    className="rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10"
-                  >
-                    <Favicon src={iconUrl} fallbackLetter={name} size="sm" />
-                  </button>
-                ))}
-              </div>
-            ) : null}
           </div>
           <div>
             <label className="mb-1 block text-xs text-black/50 dark:text-white/50">Name</label>