feat: refactor model price display and editing functionality with improved layout and interaction

src/modules/usage.js

@@ -710,29 +710,65 @@ export function renderSavedModelPrices() {
         container.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.model_price_empty')}</div>`;
         return;
     }
-
     const rows = entries.map(([model, price]) => {
         const prompt = Number(price?.prompt) || 0;
         const completion = Number(price?.completion) || 0;
+        const safeModel = this.escapeHtml ? this.escapeHtml(model) : model;
+        const editArg = JSON.stringify(model).replace(/"/g, '&quot;');
         return `
-            <div class="model-price-row">
+            <div class="provider-item model-price-item" onclick="manager.handleModelPriceEdit(${editArg})">
-                <span class="model-name">${model}</span>
+                <div class="item-content">
-                <span>$${prompt.toFixed(4)} / 1M</span>
+                    <div class="item-title">${safeModel}</div>
-                <span>$${completion.toFixed(4)} / 1M</span>
+                    <div class="item-meta">
+                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_prompt')}: $${prompt.toFixed(4)} / 1M</span>
+                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_completion')}: $${completion.toFixed(4)} / 1M</span>
+                    </div>
+                </div>
+                <div class="item-actions">
+                    <button class="btn btn-secondary" onclick="event.stopPropagation(); manager.handleModelPriceEdit(${editArg});">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                </div>
             </div>
         `;
     }).join('');
 
-    container.innerHTML = `
+    container.innerHTML = rows;
-        <div class="model-price-table">
+}
-            <div class="model-price-header">
+
-                <span>${i18n.t('usage_stats.model_price_model')}</span>
+export function handleModelPriceEdit(modelName) {
-                <span>${i18n.t('usage_stats.model_price_prompt')}</span>
+    const model = (modelName || '').trim();
-                <span>${i18n.t('usage_stats.model_price_completion')}</span>
+    const select = document.getElementById('model-price-model-select');
-            </div>
+    const promptInput = document.getElementById('model-price-prompt');
-            ${rows}
+    const completionInput = document.getElementById('model-price-completion');
-        </div>
+    const form = document.getElementById('model-price-form');
-    `;
+    if (!select || !promptInput || !completionInput) {
+        return;
+    }
+
+    const options = Array.from(select.options).map(opt => opt.value);
+    if (model && !options.includes(model)) {
+        const opt = document.createElement('option');
+        opt.value = model;
+        opt.textContent = model;
+        select.appendChild(opt);
+    }
+
+    select.disabled = false;
+    select.value = model;
+    const price = this.modelPrices?.[model];
+    if (price) {
+        promptInput.value = Number.isFinite(price.prompt) ? price.prompt : '';
+        completionInput.value = Number.isFinite(price.completion) ? price.completion : '';
+    } else {
+        promptInput.value = '';
+        completionInput.value = '';
+    }
+
+    promptInput.focus();
+    if (form && typeof form.scrollIntoView === 'function') {
+        form.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
 }
 
 export function prefillModelPriceInputs() {
@@ -1824,6 +1860,7 @@ export const usageModule = {
     persistModelPrices,
     renderModelPriceOptions,
     renderSavedModelPrices,
+    handleModelPriceEdit,
     prefillModelPriceInputs,
     normalizePriceValue,
     handleModelPriceSubmit,

styles.css

@@ -3713,34 +3713,18 @@ input:checked+.slider:before {
 
 .model-price-list {
     margin-top: 6px;
-}
-
-.model-price-table {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
-.model-price-header,
+.model-price-item {
-.model-price-row {
+    cursor: pointer;
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    gap: 12px;
-    padding: 10px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    align-items: center;
 }
 
-.model-price-header {
+.model-price-item .item-meta {
-    font-weight: 700;
+    margin-bottom: 0;
-    color: var(--text-primary);
+    gap: 10px;
-    background: var(--bg-secondary);
-}
-
-.model-price-row {
-    background: var(--bg-primary);
-    color: var(--text-secondary);
 }
 
 .chart-placeholder {
@@ -4984,6 +4968,12 @@ input:checked+.slider:before {
     border: 1px solid var(--success-border);
 }
 
+.stat-badge.stat-neutral {
+    background-color: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
 .stat-badge.stat-success i {
     font-size: 13px;
 }