round17+18: Emoji durch Font Awesome ersetzt, Lesezeichen-Kategorie-Vorschlaege, Favicon-Upload

packages/shared/src/index.ts

@@ -191,3 +191,38 @@ export function rankServices<T extends Rankable>(items: T[], query: string): T[]
     })
     .map((entry) => entry.item);
 }
+
+/**
+ * Bekannte Domain-Fragmente -> naheliegende Kategorie, für den Kategorie-
+ * Vorschlag beim Anlegen eines Lesezeichens (siehe BookmarksPage.tsx). Rein
+ * heuristisch anhand des Hostnamens - keine Netzwerkabfrage, kein externer
+ * Dienst. Bewusst knapp gehalten: lieber gar kein Vorschlag als ein falscher.
+ */
+const BOOKMARK_CATEGORY_HINTS: Array<{ pattern: RegExp; category: string }> = [
+  { pattern: /github|gitlab|gitea|bitbucket|stackoverflow|npmjs|developer\.mozilla/i, category: "Entwicklung" },
+  { pattern: /youtube|netflix|twitch|spotify|disneyplus|primevideo/i, category: "Unterhaltung" },
+  { pattern: /amazon|ebay|etsy|otto\.de|zalando/i, category: "Shopping" },
+  { pattern: /wikipedia|wiktionary/i, category: "Wissen" },
+  { pattern: /reddit|twitter|x\.com|instagram|facebook|mastodon|threads\.net/i, category: "Social Media" },
+  { pattern: /paypal|sparkasse|bank|n26\.com|dkb\.de|ing\.de/i, category: "Finanzen" },
+  { pattern: /docs\.google|notion\.so|trello|asana|slack\.com|confluence/i, category: "Produktivität" },
+  { pattern: /heise\.de|golem\.de|tagesschau|spiegel\.de|zeit\.de|faz\.net/i, category: "Nachrichten" },
+];
+
+/**
+ * Liefert eine Kategorie-Vermutung anhand des Hostnamens einer URL, oder
+ * null wenn keine der bekannten Regeln zutrifft. Nur ein Vorschlag - wird nie
+ * automatisch übernommen (siehe BookmarksPage.tsx: nur als Chip zum
+ * Bestätigen angezeigt).
+ */
+export function suggestBookmarkCategory(url: string): string | null {
+  // Kein URL()-Konstruktor - der ist ein DOM-Global und in diesem Pakets
+  // tsconfig-"lib" nicht garantiert verfügbar (das Paket wird auch vom
+  // Backend importiert). Einfache manuelle Extraktion reicht hier völlig.
+  const withoutProtocol = url.replace(/^[a-z]+:\/\//i, "");
+  const hostname = withoutProtocol.split(/[/?#]/)[0] ?? withoutProtocol;
+  for (const { pattern, category } of BOOKMARK_CATEGORY_HINTS) {
+    if (pattern.test(hostname)) return category;
+  }
+  return null;
+}

packages/ui/package.json

@@ -10,6 +10,10 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.3.1",
+    "@fortawesome/free-regular-svg-icons": "^7.3.1",
+    "@fortawesome/free-solid-svg-icons": "^7.3.1",
+    "@fortawesome/react-fontawesome": "^3.5.0",
     "@launchpad/shared": "workspace:*",
     "react": "^18.3.1"
   },

packages/ui/src/ResultsList.tsx

@@ -1,5 +1,8 @@
 import { useState, type KeyboardEvent } from "react";
 import type { SearchResult } from "@launchpad/shared";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStar as faStarSolid, faCheck, faClone } from "@fortawesome/free-solid-svg-icons";
+import { faStar } from "@fortawesome/free-regular-svg-icons";
 import { Favicon } from "./Favicon.js";
 
 function hexToRgba(hex: string, alpha: number): string | null {
@@ -136,7 +139,7 @@ export function ResultsList({
                     : "text-black/15 hover:text-amber-400 dark:text-white/15 dark:hover:text-amber-400"
                 } ${onToggleFavorite ? "" : "cursor-default"}`}
               >
-                ★
+                <FontAwesomeIcon icon={item.favorite ? faStarSolid : faStar} />
               </button>
             </div>
           </li>
@@ -169,7 +172,7 @@ function CopyButton({ url }: { url: string }) {
       className="shrink-0 text-sm leading-none text-black/20 transition-colors hover:text-black/60
         dark:text-white/20 dark:hover:text-white/60"
     >
-      {copied ? "✓" : "⧉"}
+      <FontAwesomeIcon icon={copied ? faCheck : faClone} />
     </button>
   );
 }