feat: qol changes -> frontend

[Sang-it]

No description provided.

[greptile-apps]

Greptile Summary

This PR delivers a set of quality-of-life improvements to the frontend: live search/filter on the API Keys and Connections pages, a collapsible settings panel in the playground (splitting Generation and Router Config into separate sections with independent draft state), mobile sidebar auto-close on navigation, toast close buttons, and several small layout fixes (header title truncation, sidebar overflow).

Key changes:

• API Keys page — adds a client-side search box that filters keys by name or prefix; empty state doesn't yet distinguish between "no keys exist" and "search returned no results"
• Connections page — adds provider search by name, description, or model; the no-results copy ("Contact the devs to request support for this provider") is misleading when the user has simply mistyped a query
• Settings panel — refactored into collapsible Generation / Router Config accordion sections with separate draft state, dirty-checking, and per-section Apply buttons; a new reusable ModelSearchCombobox component is extracted for the fallback model picker
• Layout fixes — truncate on the site header title, min-w-0 overflow-x-hidden on SidebarInset, and closeButton on the global Toaster
• Nav — mobile sidebar closes automatically when a nav link is clicked

Confidence Score: 5/5

• This PR is safe to merge — all changes are additive UI/UX improvements with no data-loss or security risk.
• No logic bugs, data-loss risks, or security issues were found. The three flagged items are all P2 style/UX suggestions (a duplicate import, a confusing empty-state message, and a misleading search no-results copy) that do not affect correctness or production reliability.
• No files require special attention; the minor issues in api-keys/page.tsx and connections/page.tsx are polish-level suggestions.

Important Files Changed

Filename	Overview
packages/frontend/src/app/(authenticated)/(dashboard)/api-keys/page.tsx	Adds live search/filter for API keys by name and prefix; minor issues: duplicate lucide-react import and missing differentiation between empty-search and no-keys-yet states.
packages/frontend/src/components/playground/settings-panel.tsx	Refactored into collapsible Generation and Router Config sections with independent draft state; clean implementation with proper dirty-checking and loading states.
packages/frontend/src/app/(authenticated)/(dashboard)/connections/page.tsx	Adds provider search/filter with a misleading no-results empty state message that directs users to "contact the devs" even when they simply mistyped a query.
packages/frontend/src/components/model-search-combobox.tsx	New reusable model search combobox extracted for use in the settings panel's Router Config section; clean and well-structured.
packages/frontend/src/components/ui/sonner.tsx	Added closeButton prop to the global Toaster configuration — simple, non-breaking change.
packages/frontend/src/components/site-header.tsx	Added truncate class to the h1 title to prevent long page titles from overflowing the header — safe layout fix.
packages/frontend/src/components/ui/sidebar.tsx	Added min-w-0 overflow-x-hidden to SidebarInset to fix horizontal overflow on narrow viewports — safe layout fix.
packages/frontend/src/components/nav-main.tsx	Added mobile sidebar auto-close on navigation link click — straightforward UX improvement.
packages/frontend/src/components/playground/chat-playground.tsx	No functional changes visible in this file relative to context; playground wiring with SettingsPanel, streaming, and regenerate logic looks correct.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User opens Settings Panel] --> B{Expand Section?}
    B -->|Generation| C[Edit draft settings\ntemperature, top_p, etc.]
    B -->|Router Config| D[Edit draftFallback /\ndraftAnalysisTarget]

    C --> E{isDirty?}
    E -->|Yes| F[Apply → onChange draft\n+ toast success]
    E -->|No| G[Apply disabled]

    D --> H{isRouterDirty?}
    H -->|Yes| I[Apply → authClient.updateUser\n+ invalidate user query\n+ toast success/error]
    H -->|No| J[Apply disabled]

    K[Reset button] --> L[setDraft  \nsetSettings to \ninvalidates Generation only]

Loading

Comments Outside Diff (1)

1. packages/frontend/src/app/(authenticated)/(dashboard)/api-keys/page.tsx, line 416-434 (link)

   Misleading empty state during active search

   When sortedKeys is empty due to an active search filter, the same "No API keys yet" message is shown as when no keys have been created at all. A user searching for a key that doesn't match will see "No API keys yet" and a "Create API Key" CTA, which is confusing.

   Consider distinguishing between the two states:

_{Last reviewed commit: "feat: qol changes ->..."}