From 94677f946bfcd6ebe1e6da54c8ac0d838e3c2085 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Wed, 31 Dec 2025 18:59:41 +0100
Subject: [PATCH] fix: resolve architecture validation warnings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace window.apiClient with apiClient in feature-store.js (JS-002)
- Replace window.apiClient with apiClient in upgrade-prompts.js (JS-002)
- Replace inline SVGs with $icon() helper in features.html (FE-002)
- Add check-circle-filled icon to icons.js

Architecture validation now passes with 0 errors, 0 warnings.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/admin/features.html   | 27 ++++++---------------------
 static/shared/js/feature-store.js   |  4 ++--
 static/shared/js/icons.js           |  1 +
 static/shared/js/upgrade-prompts.js |  4 ++--
 4 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/app/templates/admin/features.html b/app/templates/admin/features.html
index 31f8cb7a..92dbe128 100644
--- a/app/templates/admin/features.html
+++ b/app/templates/admin/features.html
@@ -18,10 +18,7 @@
 
     <!-- Loading State -->
     <div x-show="loading" class="flex justify-center py-12">
-        <svg class="animate-spin h-8 w-8 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
+        <span x-html="$icon('spinner', 'h-8 w-8 text-purple-600')"></span>
     </div>
 
     <!-- Tier Tabs -->
@@ -62,9 +59,7 @@
                     <template x-for="featureCode in getSelectedTierFeatures()" :key="featureCode">
                         <div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
                             <div class="flex items-center">
-                                <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                                </svg>
+                                <span x-html="$icon('check-circle-filled', 'w-5 h-5 text-green-500 mr-3')"></span>
                                 <div>
                                     <p class="text-sm font-medium text-gray-900 dark:text-white"
                                        x-text="getFeatureName(featureCode)"></p>
@@ -75,9 +70,7 @@
                             <button
                                 @click="removeFeatureFromTier(featureCode)"
                                 class="text-red-500 hover:text-red-700 p-1">
-                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-                                </svg>
+                                <span x-html="$icon('x', 'w-4 h-4')"></span>
                             </button>
                         </div>
                     </template>
@@ -109,10 +102,7 @@
                     <template x-for="feature in getAvailableFeatures()" :key="feature.code">
                         <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                             <div class="flex items-center">
-                                <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                          d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
-                                </svg>
+                                <span x-html="$icon('plus', 'w-5 h-5 text-gray-400 mr-3')"></span>
                                 <div>
                                     <p class="text-sm font-medium text-gray-900 dark:text-white"
                                        x-text="feature.name"></p>
@@ -123,9 +113,7 @@
                             <button
                                 @click="addFeatureToTier(feature.code)"
                                 class="text-green-500 hover:text-green-700 p-1">
-                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
-                                </svg>
+                                <span x-html="$icon('plus', 'w-4 h-4')"></span>
                             </button>
                         </div>
                     </template>
@@ -148,10 +136,7 @@
                     'hover:bg-purple-700': !saving && hasChanges
                 }"
                 class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
-                <svg x-show="saving" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
+                <span x-show="saving" x-html="$icon('spinner', '-ml-1 mr-2 h-4 w-4 text-white')"></span>
                 <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
             </button>
         </div>
diff --git a/static/shared/js/feature-store.js b/static/shared/js/feature-store.js
index fad9f1ab..2eb5e82e 100644
--- a/static/shared/js/feature-store.js
+++ b/static/shared/js/feature-store.js
@@ -80,7 +80,7 @@
                 this.error = null;
 
                 // Fetch available features (lightweight endpoint)
-                const response = await window.apiClient.get('/vendor/features/available');
+                const response = await apiClient.get('/vendor/features/available');
 
                 this.features = response.features || [];
                 this.tierCode = response.tier_code;
@@ -108,7 +108,7 @@
             if (!vendorCode) return;
 
             try {
-                const response = await window.apiClient.get('/vendor/features');
+                const response = await apiClient.get('/vendor/features');
 
                 // Build map for quick lookup
                 this.featuresMap = {};
diff --git a/static/shared/js/icons.js b/static/shared/js/icons.js
index 4d815c4c..85957226 100644
--- a/static/shared/js/icons.js
+++ b/static/shared/js/icons.js
@@ -137,6 +137,7 @@ const Icons = {
     // Testing & QA Icons
     'clipboard-list': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>`,
     'check-circle': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
+    'check-circle-filled': `<svg class="{{classes}}" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
     'x-circle': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
     'ban': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>`,
     'lightning-bolt': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>`,
diff --git a/static/shared/js/upgrade-prompts.js b/static/shared/js/upgrade-prompts.js
index d9d63cfe..9a18fab7 100644
--- a/static/shared/js/upgrade-prompts.js
+++ b/static/shared/js/upgrade-prompts.js
@@ -77,7 +77,7 @@
                 this.loading = true;
                 this.error = null;
 
-                const response = await window.apiClient.get('/vendor/usage');
+                const response = await apiClient.get('/vendor/usage');
                 this.usage = response;
                 this.loaded = true;
 
@@ -158,7 +158,7 @@
          */
         async checkLimitAndProceed(limitType, onSuccess) {
             try {
-                const response = await window.apiClient.get(`/vendor/usage/check/${limitType}`);
+                const response = await apiClient.get(`/vendor/usage/check/${limitType}`);
 
                 if (response.can_proceed) {
                     if (typeof onSuccess === 'function') {