Refactor ConnectionForm and Checkbox component for improved functionality and UI

- Updated ConnectionForm to utilize a Checkbox component for managing the "keep server running" setting, enhancing user interaction.
- Refactored Checkbox component to use a button element for better accessibility and visual feedback.
- Streamlined import statements and improved code organization across multiple components for better readability.

app/src/components/ServerSettings/ConnectionForm.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
 import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -14,11 +14,10 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
 import { useToast } from '@/components/ui/use-toast';
 import { useServerStore } from '@/stores/serverStore';
 import { setKeepServerRunning } from '@/lib/tauri';
-import { Check } from 'lucide-react';
-import { cn } from '@/lib/utils/cn';
 
 const connectionSchema = z.object({
   serverUrl: z.string().url('Please enter a valid URL'),
@@ -84,41 +83,36 @@ export function ConnectionForm() {
         </Form>
 
         <div className="mt-6 pt-6 border-t">
-          <button
-            type="button"
-            onClick={() => {
-              const newValue = !keepServerRunningOnClose;
-              setKeepServerRunningOnClose(newValue);
-              setKeepServerRunning(newValue).catch((error) => {
-                console.error('Failed to sync setting to Rust:', error);
-              });
-              toast({
-                title: 'Setting updated',
-                description: newValue
-                  ? 'Server will continue running when app closes'
-                  : 'Server will stop when app closes',
-              });
-            }}
-            className="flex items-start gap-3 text-left w-full"
-          >
-            <div
-              className={cn(
-                'h-4 w-4 rounded border-2 flex items-center justify-center shrink-0 mt-0.5',
-                keepServerRunningOnClose ? 'bg-accent border-accent' : 'border-muted-foreground/30',
-              )}
-            >
-              {keepServerRunningOnClose && <Check className="h-3 w-3 text-accent-foreground" />}
-            </div>
+          <div className="flex items-start space-x-3">
+            <Checkbox
+              id="keepServerRunning"
+              checked={keepServerRunningOnClose}
+              onCheckedChange={(checked: boolean) => {
+                setKeepServerRunningOnClose(checked);
+                setKeepServerRunning(checked).catch((error) => {
+                  console.error('Failed to sync setting to Rust:', error);
+                });
+                toast({
+                  title: 'Setting updated',
+                  description: checked
+                    ? 'Server will continue running when app closes'
+                    : 'Server will stop when app closes',
+                });
+              }}
+            />
             <div className="space-y-1">
-              <div className="text-sm font-medium leading-none">
+              <label
+                htmlFor="keepServerRunning"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+              >
                 Keep server running when app closes
-              </div>
+              </label>
               <p className="text-sm text-muted-foreground">
                 When enabled, the server will continue running in the background after closing the
                 app. Disabled by default.
               </p>
             </div>
-          </button>
+          </div>
         </div>
       </CardContent>
     </Card>