Skip to content

Commit 0b521df

Browse files
SantiagoDePoloniaSantiagoDePolonia
committed
Refine alias controls in models dashboard
1 parent 4b94b07 commit 0b521df

2 files changed

Lines changed: 84 additions & 8 deletions

File tree

‎internal/admin/dashboard/static/css/dashboard.css‎

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
--cal-level-2: #006d32;
2828
--cal-level-3: #26a641;
2929
--cal-level-4: #39d353;
30+
--alias-row-valid-bg: color-mix(in srgb, var(--bg-surface-hover) 86%, #fff 14%);
31+
--alias-row-valid-bg-hover: color-mix(in srgb, var(--bg-surface-hover) 72%, #fff 28%);
3032
color-scheme: dark;
3133
}
3234

@@ -53,6 +55,8 @@
5355
--cal-level-2: #40c463;
5456
--cal-level-3: #30a14e;
5557
--cal-level-4: #216e39;
58+
--alias-row-valid-bg: color-mix(in srgb, var(--bg-surface) 96%, var(--accent) 4%);
59+
--alias-row-valid-bg-hover: color-mix(in srgb, var(--bg-surface) 90%, var(--accent) 10%);
5660
color-scheme: light;
5761
}
5862

@@ -80,6 +84,8 @@
8084
--cal-level-2: #40c463;
8185
--cal-level-3: #30a14e;
8286
--cal-level-4: #216e39;
87+
--alias-row-valid-bg: color-mix(in srgb, var(--bg-surface) 96%, var(--accent) 4%);
88+
--alias-row-valid-bg-hover: color-mix(in srgb, var(--bg-surface) 90%, var(--accent) 10%);
8389
color-scheme: light;
8490
}
8591
}
@@ -792,6 +798,18 @@ body {
792798
display: flex;
793799
gap: 12px;
794800
margin-bottom: 16px;
801+
align-items: center;
802+
}
803+
804+
.table-toolbar-main {
805+
flex: 1;
806+
min-width: 0;
807+
}
808+
809+
.table-toolbar-actions {
810+
margin-left: auto;
811+
display: flex;
812+
justify-content: flex-end;
795813
}
796814

797815
.filter-input {
@@ -1054,6 +1072,16 @@ td.col-price {
10541072
margin-bottom: 20px;
10551073
}
10561074

1075+
.alias-close-btn {
1076+
width: 36px;
1077+
min-width: 36px;
1078+
height: 36px;
1079+
padding: 0;
1080+
border-radius: 999px;
1081+
font-size: 14px;
1082+
font-weight: 700;
1083+
}
1084+
10571085
.alias-form {
10581086
display: flex;
10591087
flex-direction: column;
@@ -1085,7 +1113,7 @@ td.col-price {
10851113
min-height: 110px;
10861114
resize: vertical;
10871115
padding: 10px 12px;
1088-
background: var(--bg);
1116+
background: var(--bg-surface);
10891117
border: 1px solid var(--border);
10901118
border-radius: var(--radius);
10911119
color: var(--text);
@@ -1114,6 +1142,7 @@ td.col-price {
11141142
display: flex;
11151143
flex-wrap: wrap;
11161144
gap: 8px;
1145+
justify-content: flex-end;
11171146
}
11181147

11191148
.model-row-actions {
@@ -1124,14 +1153,32 @@ td.col-price {
11241153
color: var(--text-muted);
11251154
}
11261155

1127-
.data-table tr.alias-row td {
1156+
.data-table tr.alias-row.is-valid td {
1157+
background: var(--alias-row-valid-bg);
1158+
}
1159+
1160+
.data-table tr.alias-row.is-valid:hover td {
1161+
background: var(--alias-row-valid-bg-hover);
1162+
}
1163+
1164+
.data-table tr.alias-row:not(.is-valid) td {
11281165
background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface));
11291166
}
11301167

1131-
.data-table tr.alias-row:hover td {
1168+
.data-table tr.alias-row:not(.is-valid):hover td {
11321169
background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface-hover));
11331170
}
11341171

1172+
.data-table tr.alias-row.is-disabled td {
1173+
background: var(--bg-surface);
1174+
opacity: 0.58;
1175+
}
1176+
1177+
.data-table tr.alias-row.is-disabled:hover td {
1178+
background: var(--bg-surface-hover);
1179+
opacity: 0.72;
1180+
}
1181+
11351182
.data-table tr.masked-model-row td {
11361183
opacity: 0.58;
11371184
}
@@ -1823,6 +1870,19 @@ body.conversation-drawer-open {
18231870
background: var(--bg-surface-hover);
18241871
}
18251872

1873+
.pagination-btn-primary {
1874+
background: var(--accent);
1875+
border-color: color-mix(in srgb, var(--accent) 70%, #000 10%);
1876+
color: #fff;
1877+
font-weight: 600;
1878+
box-shadow: 0 10px 22px rgba(59, 130, 246, 0.18);
1879+
}
1880+
1881+
.pagination-btn-primary:hover:not(:disabled) {
1882+
background: color-mix(in srgb, var(--accent) 90%, #fff 10%);
1883+
border-color: color-mix(in srgb, var(--accent) 78%, #000 12%);
1884+
}
1885+
18261886
.pagination-btn:disabled {
18271887
opacity: 0.4;
18281888
cursor: default;
@@ -2020,6 +2080,17 @@ body.conversation-drawer-open {
20202080
.alias-form-grid {
20212081
grid-template-columns: 1fr;
20222082
}
2083+
.table-toolbar {
2084+
flex-direction: column;
2085+
align-items: stretch;
2086+
}
2087+
.table-toolbar-actions {
2088+
margin-left: 0;
2089+
justify-content: stretch;
2090+
}
2091+
.table-toolbar-actions .pagination-btn {
2092+
width: 100%;
2093+
}
20232094
.model-alias-editor {
20242095
padding: 16px;
20252096
}

‎internal/admin/dashboard/templates/index.html‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -237,8 +237,12 @@ <h2>Registered Models</h2>
237237

238238
<!-- Filter -->
239239
<div class="table-toolbar" x-show="displayModels.length > 0 || modelFilter || aliasesAvailable">
240-
<input type="text" placeholder="Filter by provider/model, alias, or owner..." x-model="modelFilter" class="filter-input">
241-
<button type="button" class="pagination-btn" x-show="aliasesAvailable" @click="openAliasCreate()">Add Alias</button>
240+
<div class="table-toolbar-main">
241+
<input type="text" placeholder="Filter by provider/model, alias, or owner..." x-model="modelFilter" class="filter-input">
242+
</div>
243+
<div class="table-toolbar-actions">
244+
<button type="button" class="pagination-btn pagination-btn-primary" x-show="aliasesAvailable" @click="openAliasCreate()">Create Alias</button>
245+
</div>
242246
</div>
243247

244248
<div class="model-alias-editor" x-show="aliasFormOpen">
@@ -248,7 +252,9 @@ <h2>Registered Models</h2>
248252
<p class="alias-form-kicker" x-text="aliasFormMode === 'edit' ? 'Edit alias' : 'Create alias'"></p>
249253
<h3 x-text="aliasFormMode === 'edit' ? (aliasForm.name || aliasFormOriginalName) : 'New Alias'"></h3>
250254
</div>
251-
<button type="button" class="table-action-btn" @click="closeAliasForm()">Close</button>
255+
<button type="button" class="table-action-btn alias-close-btn" aria-label="Close alias editor" @click="closeAliasForm()">
256+
<span aria-hidden="true">X</span>
257+
</button>
252258
</div>
253259

254260
<div class="alias-form-grid">
@@ -286,8 +292,7 @@ <h3 x-text="aliasFormMode === 'edit' ? (aliasForm.name || aliasFormOriginalName)
286292
<div class="alert alert-warning" x-show="aliasFormError" x-text="aliasFormError"></div>
287293

288294
<div class="alias-form-actions">
289-
<button type="submit" class="pagination-btn" :disabled="aliasSubmitting" x-text="aliasSubmitting ? 'Saving...' : (aliasFormMode === 'edit' ? 'Save Alias' : 'Create Alias')"></button>
290-
<button type="button" class="pagination-btn" @click="closeAliasForm()">Cancel</button>
295+
<button type="submit" class="pagination-btn pagination-btn-primary" :disabled="aliasSubmitting" x-text="aliasSubmitting ? 'Saving...' : (aliasFormMode === 'edit' ? 'Save Alias' : 'Create Alias')"></button>
291296
</div>
292297
</form>
293298
</div>

0 commit comments

Comments
 (0)