From ddcd982225d1b6a9e855a77a094b41fa67209b49 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Tue, 20 Jan 2026 21:25:40 +0100
Subject: [PATCH] Update AliasVault.Client to use generic item type icons
 (#1465)

---
 .../Main/Components/Items/ItemIcon.razor      | 87 +++++--------------
 .../AliasClientDb/Models/ItemTypeIcons.cs     | 33 +++++++
 2 files changed, 55 insertions(+), 65 deletions(-)
 create mode 100644 apps/server/Databases/AliasClientDb/Models/ItemTypeIcons.cs

diff --git a/apps/server/AliasVault.Client/Main/Components/Items/ItemIcon.razor b/apps/server/AliasVault.Client/Main/Components/Items/ItemIcon.razor
index 2d686285c..e7c506218 100644
--- a/apps/server/AliasVault.Client/Main/Components/Items/ItemIcon.razor
+++ b/apps/server/AliasVault.Client/Main/Components/Items/ItemIcon.razor
@@ -4,69 +4,20 @@
 @using ItemTypeClass = AliasClientDb.Models.ItemType
 
 @* ItemIcon component - displays contextually appropriate icons based on item type *@
+@* Uses centralized ItemTypeIcons for SVG definitions (auto-generated from core/models) *@
 @* For Login/Alias: Uses the Logo field if available, falls back to key placeholder *@
 @* For CreditCard: Shows card brand icons (Visa, MC, Amex, Discover) based on card number *@
 @* For Note: Shows a document/note icon *@
 
 @if (ItemType == ItemTypeClass.Note)
 {
-    @* Note icon - document style *@
-    <svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 4C6.9 4 6 4.9 6 6V26C6 27.1 6.9 28 8 28H24C25.1 28 26 27.1 26 26V11L19 4H8Z" fill="#f49541"/>
-        <path d="M19 4V11H26L19 4Z" fill="#d68338"/>
-        <rect x="10" y="14" width="12" height="1.5" rx="0.75" fill="#ffe096"/>
-        <rect x="10" y="18" width="10" height="1.5" rx="0.75" fill="#ffe096"/>
-        <rect x="10" y="22" width="8" height="1.5" rx="0.75" fill="#ffe096"/>
-    </svg>
+    @* Note icon - using centralized definition *@
+    <span class="@SizeClass flex-shrink-0 inline-block [&>svg]:w-full [&>svg]:h-full">@((MarkupString)ItemTypeIcons.Note)</span>
 }
 else if (ItemType == ItemTypeClass.CreditCard)
 {
-    @* Credit card icon - detect brand and show appropriate icon *@
-    @switch (CardBrandDetector.Detect(CardNumber))
-    {
-        case CardBrandDetector.CardBrand.Visa:
-            @* Visa card icon *@
-            <svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
-                <path d="M13.5 13L11.5 19H10L8.5 14.5C8.5 14.5 8.35 14 8 14C7.65 14 7 13.8 7 13.8L7.05 13.5H9.5C9.85 13.5 10.15 13.75 10.2 14.1L10.8 17L12.5 13.5H13.5V13ZM15 19H14L15 13H16L15 19ZM20 13.5C20 13.5 19.4 13.3 18.7 13.3C17.35 13.3 16.4 14 16.4 15C16.4 15.8 17.1 16.2 17.65 16.5C18.2 16.8 18.4 17 18.4 17.2C18.4 17.5 18.05 17.7 17.6 17.7C17 17.7 16.5 17.5 16.5 17.5L16.3 18.7C16.3 18.7 16.9 19 17.7 19C19.2 19 20.1 18.2 20.1 17.1C20.1 15.7 18.4 15.6 18.4 15C18.4 14.7 18.7 14.5 19.15 14.5C19.6 14.5 20.1 14.7 20.1 14.7L20.3 13.5H20V13.5ZM24 19L23.1 13.5H22C21.7 13.5 21.45 13.7 21.35 13.95L19 19H20.5L20.8 18H22.7L22.9 19H24ZM21.2 17L22 14.5L22.45 17H21.2Z" fill="#ffe096"/>
-            </svg>
-            break;
-        case CardBrandDetector.CardBrand.Mastercard:
-            @* Mastercard icon *@
-            <svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
-                <circle cx="13" cy="16" r="5" fill="#d68338"/>
-                <circle cx="19" cy="16" r="5" fill="#ffe096"/>
-                <path d="M16 12.5C17.1 13.4 17.8 14.6 17.8 16C17.8 17.4 17.1 18.6 16 19.5C14.9 18.6 14.2 17.4 14.2 16C14.2 14.6 14.9 13.4 16 12.5Z" fill="#fbcb74"/>
-            </svg>
-            break;
-        case CardBrandDetector.CardBrand.Amex:
-            @* Amex card icon *@
-            <svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
-                <text x="16" y="18" text-anchor="middle" fill="#ffe096" font-size="8" font-weight="bold" font-family="Arial, sans-serif">AMEX</text>
-            </svg>
-            break;
-        case CardBrandDetector.CardBrand.Discover:
-            @* Discover card icon *@
-            <svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
-                <circle cx="20" cy="16" r="4" fill="#ffe096"/>
-                <path d="M7 14H8.5C9.3 14 10 14.7 10 15.5C10 16.3 9.3 17 8.5 17H7V14Z" fill="#ffe096"/>
-                <rect x="11" y="14" width="1.5" height="3" fill="#ffe096"/>
-                <path d="M14 15C14 14.4 14.4 14 15 14C15.3 14 15.5 14.1 15.7 14.3L16.5 13.5C16.1 13.2 15.6 13 15 13C13.9 13 13 13.9 13 15C13 16.1 13.9 17 15 17C15.6 17 16.1 16.8 16.5 16.5L15.7 15.7C15.5 15.9 15.3 16 15 16C14.4 16 14 15.6 14 15Z" fill="#ffe096"/>
-            </svg>
-            break;
-        default:
-            @* Generic credit card icon *@
-            <svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
-                <rect x="2" y="11" width="28" height="4" fill="#d68338"/>
-                <rect x="5" y="18" width="8" height="2" rx="1" fill="#ffe096"/>
-                <rect x="5" y="22" width="5" height="1.5" rx="0.75" fill="#fbcb74"/>
-            </svg>
-            break;
-    }
+    @* Credit card icon - detect brand and show appropriate icon from centralized definitions *@
+    <span class="@SizeClass flex-shrink-0 inline-block [&>svg]:w-full [&>svg]:h-full">@((MarkupString)GetCardIconSvg())</span>
 }
 else if (Logo != null && Logo.Length > 0)
 {
@@ -76,17 +27,7 @@ else if (Logo != null && Logo.Length > 0)
 else
 {
     @* Default placeholder - key icon for Login/Alias without logo *@
-    <svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        @* Key bow (circular head) - positioned top-left *@
-        <circle cx="10" cy="10" r="6.5" stroke="#f49541" stroke-width="2.5"/>
-        @* Key hole in bow *@
-        <circle cx="10" cy="10" r="2.5" stroke="#f49541" stroke-width="2"/>
-        @* Key shaft - diagonal *@
-        <path d="M15 15L27 27" stroke="#f49541" stroke-width="2.5" stroke-linecap="round"/>
-        @* Key teeth - perpendicular to shaft *@
-        <path d="M19 19L23 15" stroke="#f49541" stroke-width="2.5" stroke-linecap="round"/>
-        <path d="M24 24L28 20" stroke="#f49541" stroke-width="2.5" stroke-linecap="round"/>
-    </svg>
+    <span class="@SizeClass flex-shrink-0 inline-block [&>svg]:w-full [&>svg]:h-full">@((MarkupString)ItemTypeIcons.Placeholder)</span>
 }
 
 @code {
@@ -147,4 +88,20 @@ else
         ShowPlaceholder = true;
         StateHasChanged();
     }
+
+    /// <summary>
+    /// Gets the appropriate card icon SVG based on the card brand.
+    /// Uses centralized ItemTypeIcons definitions.
+    /// </summary>
+    private string GetCardIconSvg()
+    {
+        return CardBrandDetector.Detect(CardNumber) switch
+        {
+            CardBrandDetector.CardBrand.Visa => ItemTypeIcons.Visa,
+            CardBrandDetector.CardBrand.Mastercard => ItemTypeIcons.Mastercard,
+            CardBrandDetector.CardBrand.Amex => ItemTypeIcons.Amex,
+            CardBrandDetector.CardBrand.Discover => ItemTypeIcons.Discover,
+            _ => ItemTypeIcons.CreditCard,
+        };
+    }
 }
diff --git a/apps/server/Databases/AliasClientDb/Models/ItemTypeIcons.cs b/apps/server/Databases/AliasClientDb/Models/ItemTypeIcons.cs
new file mode 100644
index 000000000..a563644b2
--- /dev/null
+++ b/apps/server/Databases/AliasClientDb/Models/ItemTypeIcons.cs
@@ -0,0 +1,33 @@
+// <auto-generated />
+// This file is auto-generated from core/models/src/icons/ItemTypeIcons.ts
+// Do not edit this file directly. Run 'npm run generate:models' to regenerate.
+
+namespace AliasClientDb.Models;
+
+/// <summary>
+/// Centralized SVG icon definitions for item types.
+/// Single source of truth for all item type icons across platforms.
+/// </summary>
+public static class ItemTypeIcons
+{
+    /// <summary>Placeholder icon SVG.</summary>
+    public const string Placeholder = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <circle cx=\"10\" cy=\"10\" r=\"6.5\" stroke=\"#f49541\" stroke-width=\"2.5\"/>\n  <circle cx=\"10\" cy=\"10\" r=\"2.5\" stroke=\"#ff0000\" stroke-width=\"2\"/>\n  <path d=\"M15 15L27 27\" stroke=\"#f49541\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>\n  <path d=\"M19 19L23 15\" stroke=\"#f49541\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>\n  <path d=\"M24 24L28 20\" stroke=\"#f49541\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>\n</svg>";
+
+    /// <summary>Note icon SVG.</summary>
+    public const string Note = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 4C6.9 4 6 4.9 6 6V26C6 27.1 6.9 28 8 28H24C25.1 28 26 27.1 26 26V11L19 4H8Z\" fill=\"#f49541\"/>\n  <path d=\"M19 4V11H26L19 4Z\" fill=\"#d68338\"/>\n  <rect x=\"10\" y=\"14\" width=\"12\" height=\"1.5\" rx=\"0.75\" fill=\"#ffe096\"/>\n  <rect x=\"10\" y=\"18\" width=\"10\" height=\"1.5\" rx=\"0.75\" fill=\"#ffe096\"/>\n  <rect x=\"10\" y=\"22\" width=\"8\" height=\"1.5\" rx=\"0.75\" fill=\"#ffe096\"/>\n</svg>";
+
+    /// <summary>CreditCard icon SVG.</summary>
+    public const string CreditCard = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n  <rect x=\"2\" y=\"11\" width=\"28\" height=\"4\" fill=\"#d68338\"/>\n  <rect x=\"5\" y=\"18\" width=\"8\" height=\"2\" rx=\"1\" fill=\"#ffe096\"/>\n  <rect x=\"5\" y=\"22\" width=\"5\" height=\"1.5\" rx=\"0.75\" fill=\"#fbcb74\"/>\n</svg>";
+
+    /// <summary>Visa icon SVG.</summary>
+    public const string Visa = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n  <path d=\"M13.5 13L11.5 19H10L8.5 14.5C8.5 14.5 8.35 14 8 14C7.65 14 7 13.8 7 13.8L7.05 13.5H9.5C9.85 13.5 10.15 13.75 10.2 14.1L10.8 17L12.5 13.5H13.5V13ZM15 19H14L15 13H16L15 19ZM20 13.5C20 13.5 19.4 13.3 18.7 13.3C17.35 13.3 16.4 14 16.4 15C16.4 15.8 17.1 16.2 17.65 16.5C18.2 16.8 18.4 17 18.4 17.2C18.4 17.5 18.05 17.7 17.6 17.7C17 17.7 16.5 17.5 16.5 17.5L16.3 18.7C16.3 18.7 16.9 19 17.7 19C19.2 19 20.1 18.2 20.1 17.1C20.1 15.7 18.4 15.6 18.4 15C18.4 14.7 18.7 14.5 19.15 14.5C19.6 14.5 20.1 14.7 20.1 14.7L20.3 13.5H20V13.5ZM24 19L23.1 13.5H22C21.7 13.5 21.45 13.7 21.35 13.95L19 19H20.5L20.8 18H22.7L22.9 19H24ZM21.2 17L22 14.5L22.45 17H21.2Z\" fill=\"#ffe096\"/>\n</svg>";
+
+    /// <summary>Mastercard icon SVG.</summary>
+    public const string Mastercard = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n  <circle cx=\"13\" cy=\"16\" r=\"5\" fill=\"#d68338\"/>\n  <circle cx=\"19\" cy=\"16\" r=\"5\" fill=\"#ffe096\"/>\n  <path d=\"M16 12.5C17.1 13.4 17.8 14.6 17.8 16C17.8 17.4 17.1 18.6 16 19.5C14.9 18.6 14.2 17.4 14.2 16C14.2 14.6 14.9 13.4 16 12.5Z\" fill=\"#fbcb74\"/>\n</svg>";
+
+    /// <summary>Amex icon SVG.</summary>
+    public const string Amex = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n  <text x=\"16\" y=\"18\" text-anchor=\"middle\" fill=\"#ffe096\" font-size=\"8\" font-weight=\"bold\" font-family=\"Arial, sans-serif\">AMEX</text>\n</svg>";
+
+    /// <summary>Discover icon SVG.</summary>
+    public const string Discover = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n  <circle cx=\"20\" cy=\"16\" r=\"4\" fill=\"#ffe096\"/>\n  <path d=\"M7 14H8.5C9.3 14 10 14.7 10 15.5C10 16.3 9.3 17 8.5 17H7V14Z\" fill=\"#ffe096\"/>\n  <rect x=\"11\" y=\"14\" width=\"1.5\" height=\"3\" fill=\"#ffe096\"/>\n  <path d=\"M14 15C14 14.4 14.4 14 15 14C15.3 14 15.5 14.1 15.7 14.3L16.5 13.5C16.1 13.2 15.6 13 15 13C13.9 13 13 13.9 13 15C13 16.1 13.9 17 15 17C15.6 17 16.1 16.8 16.5 16.5L15.7 15.7C15.5 15.9 15.3 16 15 16C14.4 16 14 15.6 14 15Z\" fill=\"#ffe096\"/>\n</svg>";
+}