MrSphay/odysseus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Model picker: group models by provider

Browse Source 
Rebased on current main. Integrates with the new Recent/Favorites
system — provider groups appear below Recent and Favorites in browse
mode for large catalogs (>12 models).

Changes:
- Models grouped by canonical provider with collapsible sections
- Chevron animation consistent with sidebar sections
- Domino cascade on expand (only on just-opened group)
- Provider display names (deepseek-ai -> DeepSeek, meta -> Llama, etc.)
- Alias merging (meta + meta-llama -> one Llama group)
- Search includes provider display names for filtering
- Collapsed state persists in localStorage
- No screenshot binary committed

Co-authored-by: danielxb <5981902+danielxb@users.noreply.github.com>
This commit is contained in:
danielxb
2026-06-02 14:14:22 +10:00
committed by GitHub
parent cd4f496cb4
commit 5268a546bc
2 changed files with 150 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
static/style.css
View File

@@ -2803,6 +2803,55 @@ body.bg-pattern-sparkles {
font-size: 0.92em;
opacity: 0.7;
}
/* Provider group headers */
.model-picker-list .mp-provider-header {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
cursor: pointer;
font-size: 0.78em;
font-weight: 500;
color: var(--fg);
border-radius: 4px;
user-select: none;
}
.model-picker-list .mp-provider-header:hover {
background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.model-picker-list .mp-provider-chevron {
display: inline-flex;
opacity: 0.4;
transition: transform 0.2s, opacity 0.15s;
flex-shrink: 0;
}
.model-picker-list .mp-provider-header:hover .mp-provider-chevron {
opacity: 0.7;
}
.model-picker-list .mp-provider-chevron.collapsed {
transform: rotate(-90deg);
}
.model-picker-list .mp-provider-name { flex: 1; }
.model-picker-list .mp-provider-count { font-size: 0.85em; opacity: 0.4; }
/* Domino expand (15% faster than sidebar) */
.mp-provider-group.mp-just-expanded .model-switch-item {
animation: mp-domino-in 0.31s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
}
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(1) { animation-delay: 0.035s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(2) { animation-delay: 0.07s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(3) { animation-delay: 0.105s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(4) { animation-delay: 0.14s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(5) { animation-delay: 0.175s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(6) { animation-delay: 0.21s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(7) { animation-delay: 0.245s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(8) { animation-delay: 0.28s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(9) { animation-delay: 0.315s; }
.mp-provider-group.mp-just-expanded .model-switch-item:nth-child(10) { animation-delay: 0.35s; }
@keyframes mp-domino-in {
0% { opacity: 0; transform: translateY(6px) scale(0.94); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Comfortable touch targets on phones / narrow screens. */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
.model-picker-list .model-switch-item {