refactor(dropdowns): improve dropdown item display and interaction

- Enhanced ToolDropdown and ModelDropdown to refine the display of shortcut keys, improving visibility with dynamic opacity based on active state.
- Updated button styling in ModelDropdown for better consistency and user experience.
- Streamlined the layout of dropdown items to ensure a more cohesive and responsive design.

src/components/ask-tooldropdown.tsx

@@ -106,7 +106,10 @@ export default function ToolDropdown({
       </span>
       <span className="whitespace-nowrap flex-1 flex justify-between items-center">
         <span>{tool.name}</span>
-        <span className="text-gray-400 ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+        <span
+          className={`ml-2 opacity-0 transition-all duration-100 ${active || 'group-hover:opacity-100'} ${
+            active && 'opacity-100'
+          }`}>
           [{navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'} + enter]
         </span>
       </span>

src/components/ask/ModelDropDown.tsx

@@ -65,7 +65,7 @@ export default function ModelDropdown({
     <button
       className={`${
         active ? 'bg-black text-white' : 'text-gray-900'
-      } flex w-full items-center rounded-md px-2 py-2 text-sm focus:outline-none group`}
+      } group flex w-full items-center rounded-md px-2 py-2 text-sm focus:outline-none`}
       onClick={e => {
         e.preventDefault();
         handleModelClick(model, e.metaKey || e.ctrlKey);
@@ -76,7 +76,10 @@ export default function ModelDropdown({
       </span>
       <span className="whitespace-nowrap flex-1 flex justify-between items-center">
         <span>{model.shortName}</span>
-        <span className="text-gray-400 ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+        <span
+          className={`ml-2 opacity-0 transition-all duration-100 ${active || 'group-hover:opacity-100'} ${
+            active && 'opacity-100'
+          }`}>
           [{model.provider}]
         </span>
       </span>