feat(ui): enhance model select modal UX and modal traffic lights (#1111)

* feat(model-select-modal): highlight added models and support bulk selection

- Add addedModelValues prop to highlight already-added models with primary color
- Sort models alphabetically per provider, with added models floated to top
- Replace green highlight with primary brand color (orange #E56A4A)
- Use check icon (10px) inline with model name instead of check_circle
- Replace Done button with info bar explaining click-to-toggle behavior
- Add ProviderIcon to provider group headers replacing colored dot
- Import ProviderIcon, remove unused Button import

* feat(cli-tools): wire addedModelValues, onDeselect, and auto-save to model select modals

- Pass selectedModels as addedModelValues to ModelSelectModal in OpenCode and Copilot cards
- Add onDeselect handler to remove model from list on second click
- Set closeOnSelect=false to allow bulk model selection
- Remove manual setModalOpen(false) from onSelect callbacks
- Add saveModels() silent auto-save triggered on modal close (OpenCodeToolCard)
- Use useRef to track latest selectedModels in closure-safe way

* feat(modal): functional traffic light close button with hover icon and tooltip

- Make red dot a clickable button that closes the modal
- Show ✕ icon inside red dot on hover via group-hover opacity transition
- Gray out yellow and green dots (cursor-not-allowed, no tooltip)
- Increase dot size from w-3 h-3 to w-4 h-4
- Add Tooltip with brand-matched color #FF5F56 on red dot
- Remove X close button from modal header

* feat(tooltip): add color prop for themed tooltip backgrounds

* feat(i18n): add translations for model select info bar and close tooltip

- Add 'Click to add, click again to remove. Changes are saved automatically.' to all 32 locales
- Add 'Close' translation to all 32 locales

* fix(ui): address code review feedback on modal UX and auto-save

- Modal: remove showCloseButton prop, use showTrafficLights for header
  condition, hide traffic lights on mobile (hidden md:flex), add mobile
  X button (md:hidden) with aria-label, add aria-label and title on
  traffic light close button
- OpenCodeToolCard: validate activeModel membership before saving —
  fallback to models[0] or empty string; clear/reassign activeModel
  on deselect when removed model was the active one
- CopilotToolCard: add useRef + selectedModelsRef, add saveModels()
  using /api/cli-tools/copilot-settings, wire auto-save on modal close
- ModelSelectModal: fix JSX formatting — separate info bar closing div
  from Search comment onto its own line
This commit is contained in:
Rigel Ramadhani Waloni
2026-05-15 09:21:24 +07:00
committed by GitHub
parent 4098f91ac5
commit 1fd3132647
37 changed files with 209 additions and 276 deletions

View File

@@ -12,7 +12,7 @@
"Logout": "লগ আউট",
"Login": "লগ ইন",
"Providers": "সরবরাহকারী",
"Usage": "ব্যবহার",
"Usage": "ব্যবহারের পরিসংখ্যান",
"API Key": "API কী",
"Connected": "সংযুক্ত",
"Disconnected": "বিচ্ছিন্ন",
@@ -91,9 +91,7 @@
"Dark": "গাঢ়",
"Auto": "স্বয়ংক্রিয়",
"Endpoint": "এন্ডপয়েন্ট",
"Providers": "সরবরাহকারী",
"Combos": "কম্বো",
"Usage": "ব্যবহারের পরিসংখ্যান",
"Quota Tracker": "কোটা ট্র্যাকার",
"MITM": "MITM",
"CLI Tools": "সরঞ্জাম",
@@ -150,7 +148,6 @@
"No Proxy": "কোন প্রক্সি নেই",
"Comma-separated hostnames/domains to bypass the proxy.": "প্রক্সি বাইপাস করার জন্য কমা-পৃথক হোস্টনাম/ডোমেইন।",
"Test proxy URL": "প্রক্সি URL পরীক্ষা করুন",
"Apply": "প্রয়োগ করুন",
"Proxy settings applied": "প্রক্সি সেটিংস প্রয়োগ করা হয়েছে",
"Proxy enabled": "প্রক্সি সক্ষম",
"Proxy disabled": "প্রক্সি অক্ষম",
@@ -178,7 +175,6 @@
"Use Antigravity IDE & GitHub Copilot → with ANY provider/model from 9Router": "Antigravity IDE এবং GitHub Copilot ব্যবহার করুন → 9Router থেকে যেকোনো সরবরাহকারী/মডেলের সাথে",
"How it works:": "এটি কীভাবে কাজ করে:",
"Antigravity/Copilot IDE request → DNS redirect to localhost:443 → MITM proxy intercepts → 9Router → response to Antigravity/Copilot": "Antigravity/Copilot IDE অনুরোধ → DNS কে localhost:443 তে রিডিরেক্ট করুন → MITM প্রক্সি ইন্টারসেপ্ট করে → 9Router → Antigravity/Copilot এ প্রতিক্রিয়া",
"API Key": "API কী",
"No API keys — create one in Keys page": "কোন API কী নেই — Keys পৃষ্ঠায় একটি তৈরি করুন",
"sk_9router (default)": "sk_9router (ডিফল্ট)",
"Server started": "সার্ভার শুরু হয়েছে",
@@ -192,5 +188,5 @@
"Sudo Password Required": "Sudo পাসওয়ার্ড প্রয়োজন",
"Enter your sudo password to start/stop MITM server": "MITM সার্ভার শুরু/বন্ধ করতে আপনার sudo পাসওয়ার্ড প্রবেশ করুন",
"Sudo Password": "Sudo পাসওয়ার্ড",
"Confirm": "নিশ্চিত করুন"
"Click to add, click again to remove. Changes are saved automatically.": "যোগ করতে ক্লিক করুন, সরাতে আবার ক্লিক করুন। পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে সংরক্ষিত হয়।"
}