uniform favicons

Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>

front/src/lib/components/favicon-or-icon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Database, Key, Mail } from "@lucide/svelte";
+  import { cn } from "../utils";
+
+  let { url, icon="", class: className = "" } = $props();
+
+  let hasError = $state(false);
+</script>
+
+<div
+  class={cn(
+    "w-10 h-10 rounded-box bg-neutral text-neutral-content items-center justify-center flex",
+    className,
+  )}
+>
+  {#if url && !hasError}
+    <img
+      src={"https://icons.duckduckgo.com/ip3/" + url + ".ico"}
+      class="rounded-box w-full h-full"
+      alt="Favicon de {url}"
+      onerror={() => { hasError = true }}
+    />
+  {:else if icon == "password"}
+    <Key />
+  {:else if icon == "email"}
+    <Mail />
+  {:else}
+    <Database />
+  {/if}
+</div>

front/src/lib/components/index/search/datawells.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Dataleak } from "$src/lib/types";
   import { Database, Replace, Search } from "@lucide/svelte";
+  import FaviconOrIcon from "../../favicon-or-icon.svelte";
 
   let {
     dataleaks,
@@ -89,23 +90,14 @@
           {#each paginatedDataleaks as item}
             <tr class="hover:bg-base-300">
               <th>
-                <div class="size-8">
-                  {#if getDomain(item.Name)}
-                    <img
-                      src="https://icons.duckduckgo.com/ip3/{getDomain(
-                        item.Name,
-                      )}.ico"
-                      class="size-8 rounded-xl bg-neutral"
-                      alt="Favicon de {getDomain(item.Name)}"
-                    />
-                  {:else}
-                    <div
-                      class="size-8 rounded-xl bg-neutral items-center justify-center flex"
-                    >
-                      <Database class="text-neutral-content" />
-                    </div>
-                  {/if}
-                </div>
+                <FaviconOrIcon
+                  url={getDomain(item.Name)}
+                  icon={item.Columns.includes("password")
+                    ? "password"
+                    : item.Columns.includes("email")
+                      ? "email"
+                      : ""}
+                />
               </th>
               <th>
                 {item.Name}

front/src/lib/components/index/search/id/row.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import FaviconOrIcon from "$src/lib/components/favicon-or-icon.svelte";
   import Table from "$src/lib/components/table.svelte";
   import { ChevronDown, ChevronUp, Database, Key, Mail } from "@lucide/svelte";
 
@@ -54,35 +55,16 @@
   }}
 >
   <div>
-    {#if getDomain(row["source"])}
-      <img
-        src="https://icons.duckduckgo.com/ip3/{getDomain(row['source'])}.ico"
-        class="size-10 rounded-box bg-neutral"
-        alt="Favicon de {getDomain(row['source'])}"
-      />
-    {:else if row["password"] !== null}
-      <div
-        class="size-10 rounded-box bg-neutral items-center justify-center flex"
-      >
-        <Key class="text-neutral-content" />
-      </div>
-    {:else if row["email"] !== null}
-      <div
-        class="size-10 rounded-box bg-neutral items-center justify-center flex"
-      >
-        <Mail class="text-neutral-content" />
-      </div>
-    {:else}
-      <div
-        class="size-10 rounded-box bg-neutral items-center justify-center flex"
-      >
-        <Database class="text-neutral-content" />
-      </div>
-    {/if}
+    <FaviconOrIcon
+      url={row["source"] !== null ? getDomain(row["source"]) : ""}
+      icon={row["password"] !== null
+        ? "password"
+        : row["email"] !== null
+          ? "email"
+          : ""}
+    />
   </div>
-  <div
-    class="flex-1 flex flex-col min-w-0 items-start justify-center"
-  >
+  <div class="flex-1 flex flex-col min-w-0 items-start justify-center">
     <div class="w-full overflow-hidden whitespace-nowrap text-ellipsis">
       {getHighlightedContent(row)}
     </div>