feat: MCP servers open in a drawer on mobile now (#119)

Now MCP servers are loaded in a drawer component on smaller screens.

Closes #84

![CleanShot 2025-07-08 at 09 04
29](https://github.com/user-attachments/assets/55115fd8-3e2b-4c71-b606-e3902223e0a8)

This pull request introduces several updates to the codebase, including
adding a new dependency for popovers, implementing a reusable popover
component, and enhancing the `Chat` component with a new server selector
UI. The changes improve functionality and maintainability by
centralizing popover logic and refining the user interface.

### Dependency Updates:
* Added `@radix-ui/react-popover` to the `package.json` dependencies to
enable popover functionality.

### Component Enhancements:
* Implemented a reusable popover component in
`src/components/ui/popover.tsx`, including `Popover`, `PopoverTrigger`,
`PopoverContent`, and `PopoverAnchor` components. These components use
Radix UI primitives and provide consistent styling and behavior for
popovers.

### UI Improvements:
* Updated the `Chat` component in `src/components/Chat.tsx` to include a
server selector wrapped in a styled container, enhancing the user
interface for server management.

### Optional Dependency Adjustments:
* Reorganized the `optionalDependencies` section in `package.json` to
ensure consistent formatting and inclusion of the latest versions of
`lightningcss` for various platforms.

Author: nickytonline

package-lock.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-toast": "^1.1.5",
@@ -71,9 +72,9 @@
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-arm64-gnu": "^4.41.1",
-    "lightningcss-linux-x64-gnu": "^1.30.1",
-    "lightningcss-linux-arm64-gnu": "^1.30.1",
     "lightningcss-darwin-arm64": "^1.30.1",
-    "lightningcss-darwin-x64": "^1.30.1"
+    "lightningcss-darwin-x64": "^1.30.1",
+    "lightningcss-linux-arm64-gnu": "^1.30.1",
+    "lightningcss-linux-x64-gnu": "^1.30.1"
   }
 }

package.json

@@ -724,13 +724,15 @@ export function Chat() {
             </Button>
           </div>
         )}
-        <ServerSelector
-          servers={servers}
-          onServersChange={setServers}
-          selectedServers={selectedServers}
-          onServerToggle={handleServerToggle}
-          disabled={hasStartedChat}
-        />
+        <div className="md:border-t border-gray-200 dark:border-gray-800 bg-background p-2 md:p-4">
+          <ServerSelector
+            servers={servers}
+            onServersChange={setServers}
+            selectedServers={selectedServers}
+            onServerToggle={handleServerToggle}
+            disabled={hasStartedChat}
+          />
+        </div>
         <ChatInput
           onSendMessage={handleSendMessage}
           disabled={isLoading || streaming}