fix: add filter display setting and revert name changes (#548)

[leoisadev8]

Summary

• Adds a Filter Display setting in Settings > Models that lets users toggle between showing provider names (default) or icons in the model selector filter tabs
• Reverts the "Meta Llama" → "Llama" renaming from PR fix: unify filter names in model selector #551 (keeps original provider names)
• The preference is persisted in localStorage via the UI store

Fixes the issues raised in #548 comments — users can now choose their preferred filter display style, and the default shows text names as requested.

Test plan

• Open model selector → verify filter tabs show text names by default (no icons)
• Go to Settings > Models → verify "Filter Display" toggle is present
• Switch to "Icons" mode → verify filter tabs now show provider logos instead of names
• Switch back to "Names" → verify text labels return
• Refresh the page → verify the preference persists
• Verify "Meta Llama" shows as the provider name (not just "Llama")

🤖 Generated with Claude Code

[railway-app]

🚅 Deployed to the openchat-pr-552 environment in OpenChat

Service	Status	Web	Updated (UTC)
web	😴 Sleeping (View Logs)	Web	Jan 23, 2026 at 11:29 am

[greptile-apps]

Greptile Summary

This PR introduces a user-configurable filter display setting that allows toggling between provider names (default) and icons in the model selector filter tabs. The implementation reverts the "Meta Llama" → "Llama" name change from PR #551, restoring the original provider naming convention.

Key Changes:

• Added filterStyle state to UI store with localStorage persistence (defaults to "names")
• Created Filter Display settings section in Settings > Models with toggle UI
• Modified model selector to conditionally render provider logos or text labels based on user preference
• Restored "Meta Llama" naming in PROVIDER_INFO and fallback models
• Applied changes to both mobile and desktop view implementations

Technical Implementation:
The feature uses Zustand for state management with the persist middleware to maintain user preference across sessions. The model selector component reads filterStyle reactively from the UI store and adjusts rendering logic for both the mobile horizontal scroll tabs and desktop vertical sidebar filters.

Minor Style Issue:
There's a small visual inconsistency in the mobile filter tabs (line 578) where icons are conditionally rendered with a ternary returning null, which works but could be improved by using && for cleaner conditional rendering when the element should be omitted entirely.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is straightforward and well-contained, adding a simple UI preference toggle without modifying core functionality. State management follows established patterns using Zustand with persistence. The changes are non-breaking, use proper TypeScript typing, and maintain backward compatibility by defaulting to "names" mode. The only issue found is a minor style preference that doesn't affect functionality.
• No files require special attention

Important Files Changed

Filename	Overview
apps/web/src/stores/ui.ts	Added FilterStyle type and state management for filter display preference with localStorage persistence
apps/web/src/stores/model.ts	Reverted "Llama" back to "Meta Llama" in PROVIDER_INFO and fallback models to maintain consistency with original naming
apps/web/src/routes/settings.tsx	Added Filter Display section with toggle between names/icons mode for model selector provider filters
apps/web/src/components/model-selector.tsx	Integrated filter style preference from UI store to conditionally render provider logos or names in both mobile and desktop filter tabs

Sequence Diagram

sequenceDiagram
    participant User
    participant Settings
    participant UIStore
    participant LocalStorage
    participant ModelSelector
    participant FilterTabs

    Note over User,FilterTabs: Initial Load
    UIStore->>LocalStorage: Load persisted filterStyle
    LocalStorage-->>UIStore: Return "names" (default)
    ModelSelector->>UIStore: Read filterStyle
    UIStore-->>ModelSelector: "names"
    ModelSelector->>FilterTabs: Render provider names (no icons)

    Note over User,FilterTabs: User Changes Preference
    User->>Settings: Click "Icons" button
    Settings->>UIStore: setFilterStyle("icons")
    UIStore->>LocalStorage: Persist filterStyle="icons"
    
    Note over User,FilterTabs: UI Updates
    ModelSelector->>UIStore: Read filterStyle (reactive)
    UIStore-->>ModelSelector: "icons"
    ModelSelector->>FilterTabs: Re-render with provider icons
    FilterTabs-->>User: Display icons instead of names

    Note over User,FilterTabs: Page Refresh
    User->>ModelSelector: Open model selector
    UIStore->>LocalStorage: Load persisted filterStyle
    LocalStorage-->>UIStore: Return "icons"
    ModelSelector->>UIStore: Read filterStyle
    UIStore-->>ModelSelector: "icons"
    ModelSelector->>FilterTabs: Render provider icons
    FilterTabs-->>User: Preference persisted

Loading

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: when icons are hidden, the text label still displays but without the icon spacing

this creates inconsistent visual alignment since the button's layout doesn't fully account for icon-less state

Suggested change

	{filterStyle === "icons" ? (
	<ProviderLogo providerId={provider.logoId} className="size-4" />
	) : null}
	<span className="max-w-[80px] truncate">{provider.name}</span>
	{filterStyle === "icons" && (
	<ProviderLogo providerId={provider.logoId} className="size-4" />
	)}

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}