feat: add tier badges to marketplace UI
- Show 'core' (orange) and 'recommended' (blue) badges next to app titles - getAppTier() classifies apps matching backend get_app_tier() - Global .tier-badge, .tier-badge-core, .tier-badge-recommended CSS classes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -123,7 +123,7 @@ input[type="radio"]:active + * {
|
||||
|
||||
/* Mode switcher - sidebar toggle */
|
||||
.mode-switcher {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
padding: 3px;
|
||||
border-radius: 0.5rem;
|
||||
@@ -132,9 +132,10 @@ input[type="radio"]:active + * {
|
||||
}
|
||||
|
||||
.mode-switcher-btn {
|
||||
flex: 1;
|
||||
padding: 0.375rem 0.5rem;
|
||||
flex: none;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
white-space: nowrap;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
@@ -214,15 +215,15 @@ input[type="radio"]:active + * {
|
||||
}
|
||||
|
||||
.chat-mode-pill {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(env(safe-area-inset-top, 0px) + 2.25rem);
|
||||
right: calc(env(safe-area-inset-right, 0px) + 1.25rem);
|
||||
top: 2.25rem;
|
||||
right: 1.25rem;
|
||||
z-index: 10;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.chat-mode-pill {
|
||||
top: 2.25rem;
|
||||
right: 1.25rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -237,7 +238,7 @@ input[type="radio"]:active + * {
|
||||
/* On mobile, pad iframe so AIUI content ends above the tab bar */
|
||||
@media (max-width: 767px) {
|
||||
.chat-iframe-mobile {
|
||||
padding-bottom: calc(var(--mobile-tab-bar-height, 72px) + 52px);
|
||||
padding-bottom: var(--mobile-tab-bar-height, 72px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -380,6 +381,28 @@ input[type="radio"]:active + * {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
|
||||
}
|
||||
|
||||
/* Tier badges for marketplace */
|
||||
.tier-badge {
|
||||
font-size: 0.625rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.tier-badge-core {
|
||||
background: rgba(251, 146, 60, 0.2);
|
||||
color: #fb923c;
|
||||
}
|
||||
|
||||
.tier-badge-recommended {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.glass-button-sm {
|
||||
padding-block: 0.375rem;
|
||||
padding-inline: 0.75rem;
|
||||
|
||||
Reference in New Issue
Block a user