fix: resolve architecture validation warnings

- 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>
This commit is contained in:
2025-12-31 18:59:41 +01:00
parent aa4b5a4c63
commit 94677f946b
4 changed files with 11 additions and 25 deletions

View File

@@ -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>

View File

@@ -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 = {};

View File

@@ -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>`,

View File

@@ -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') {