BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update section model selection headers to micro typography with uppercase and sticky behavior

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-01-29 23:34:28 +02:00
parent 6371c8cb2e
commit 520dd8c900
6 changed files with 9 additions and 1697 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ModelControls.tsx
+3 -3
View File
@@ -2028,7 +2028,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
{/* Favorites Section */}
{filteredFavorites.length > 0 && (
<>
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<RiStarFill className="h-4 w-4 text-primary" />
Favorites
</DropdownMenuLabel>
@@ -2043,7 +2043,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
{filteredRecents.length > 0 && (
<>
{filteredFavorites.length > 0 && <DropdownMenuSeparator />}
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<RiTimeLine className="h-4 w-4" />
Recent
</DropdownMenuLabel>
@@ -2063,7 +2063,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
{filteredProviders.map((provider, index) => (
<React.Fragment key={provider.id}>
{index > 0 && <DropdownMenuSeparator />}
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<ProviderLogo
providerId={provider.id}
className="h-4 w-4 flex-shrink-0"
packages/ui/src/components/multirun/ModelMultiSelect.tsx
+3 -3
View File
@@ -411,7 +411,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
{/* Favorites Section */}
{filteredFavorites.length > 0 && (
<>
<div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<RiStarFill className="h-4 w-4 text-primary" />
Favorites
</div>
@@ -426,7 +426,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
{filteredRecents.length > 0 && (
<>
{filteredFavorites.length > 0 && <div className="h-px bg-border/40 my-1" />}
<div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<RiTimeLine className="h-4 w-4" />
Recent
</div>
@@ -446,7 +446,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
{filteredProviders.map((provider, index) => (
<React.Fragment key={provider.id}>
{index > 0 && <div className="h-px bg-border/40 my-1" />}
<div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<ProviderLogo
providerId={provider.id}
className="h-4 w-4 flex-shrink-0"
packages/ui/src/components/sections/agents/ModelSelector.tsx
+3 -3
View File
@@ -618,7 +618,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
{/* Favorites Section */}
{filteredFavorites.length > 0 && (
<>
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<RiStarFill className="h-4 w-4 text-primary" />
Favorites
</DropdownMenuLabel>
@@ -633,7 +633,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
{filteredRecents.length > 0 && (
<>
{filteredFavorites.length > 0 && <DropdownMenuSeparator />}
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<RiTimeLine className="h-4 w-4" />
Recent
</DropdownMenuLabel>
@@ -653,7 +653,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
{filteredProviders.map((provider, index) => (
<React.Fragment key={provider.id}>
{index > 0 && <DropdownMenuSeparator />}
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
<ProviderLogo
providerId={provider.id}
className="h-4 w-4 flex-shrink-0"