Remove CheckCircle2 icon from various components for a cleaner UI

- Eliminated CheckCircle2 icon from ModelManagement, ModelProgress, ServerStatus, and UpdateStatus components to streamline the visual presentation.
- Updated import statements accordingly to reflect the removal of unused icons.

app/src/components/ServerSettings/ConnectionForm.tsx

@@ -14,10 +14,11 @@ 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'),
@@ -83,36 +84,41 @@ export function ConnectionForm() {
         </Form>
 
         <div className="mt-6 pt-6 border-t">
-          <div className="flex items-start space-x-3">
+          <button
-            <Checkbox
+            type="button"
-              id="keepServerRunning"
+            onClick={() => {
-              checked={keepServerRunningOnClose}
+              const newValue = !keepServerRunningOnClose;
-              onCheckedChange={(checked: boolean) => {
+              setKeepServerRunningOnClose(newValue);
-                setKeepServerRunningOnClose(checked);
+              setKeepServerRunning(newValue).catch((error) => {
-                setKeepServerRunning(checked).catch((error) => {
+                console.error('Failed to sync setting to Rust:', error);
-                  console.error('Failed to sync setting to Rust:', error);
+              });
-                });
+              toast({
-                toast({
+                title: 'Setting updated',
-                  title: 'Setting updated',
+                description: newValue
-                  description: checked
+                  ? 'Server will continue running when app closes'
-                    ? 'Server will continue running when app closes'
+                  : 'Server will stop 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="space-y-1">
-              <label
+              <div className="text-sm font-medium leading-none">
-                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
-              </label>
+              </div>
               <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>
-          </div>
+          </button>
         </div>
       </CardContent>
     </Card>

app/src/components/ServerSettings/ModelManagement.tsx

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { CheckCircle2, Download, Loader2, Trash2 } from 'lucide-react';
+import { Download, Loader2, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import {
   AlertDialog,
@@ -271,7 +271,6 @@ function ModelItem({ model, onDownload, onDelete, isDownloading, formatSize }: M
         {model.downloaded ? (
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-1 text-sm text-muted-foreground">
-              <CheckCircle2 className="h-4 w-4 text-accent" />
               <span>Ready</span>
             </div>
             <Button

app/src/components/ServerSettings/ModelProgress.tsx

@@ -3,7 +3,7 @@ import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useServerStore } from '@/stores/serverStore';
 import type { ModelProgress as ModelProgressType } from '@/lib/api/types';
-import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+import { Loader2, XCircle } from 'lucide-react';
 
 interface ModelProgressProps {
   modelName: string;
@@ -68,8 +68,6 @@ export function ModelProgress({ modelName, displayName }: ModelProgressProps) {
 
   const getStatusIcon = () => {
     switch (progress.status) {
-      case 'complete':
-        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
       case 'error':
         return <XCircle className="h-4 w-4 text-destructive" />;
       case 'downloading':

app/src/components/ServerSettings/ServerStatus.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle2, Loader2, XCircle } from 'lucide-react';
+import { Loader2, XCircle } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useServerHealth } from '@/lib/hooks/useServer';
@@ -43,7 +43,6 @@ export function ServerStatus() {
         ) : health ? (
           <div className="space-y-2">
             <div className="flex items-center gap-2">
-              <CheckCircle2 className="h-4 w-4 text-green-500" />
               <span className="text-sm">Connected</span>
             </div>
             <div className="flex flex-wrap gap-2">

app/src/components/ServerSettings/UpdateStatus.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { RefreshCw, Download, CheckCircle2, AlertCircle } from 'lucide-react';
+import { RefreshCw, Download, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -94,7 +94,6 @@ export function UpdateStatus() {
         {status.readyToInstall && (
           <div className="space-y-3 p-4 border rounded-lg bg-green-500/10 border-green-500/20">
             <div className="flex items-center gap-2">
-              <CheckCircle2 className="h-5 w-5 text-green-500" />
               <div>
                 <div className="font-semibold">Update Ready to Install</div>
                 <div className="text-sm text-muted-foreground">Version {status.version} has been downloaded</div>
@@ -112,7 +111,6 @@ export function UpdateStatus() {
 
         {!status.available && !status.checking && !status.error && status.checking === false && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <CheckCircle2 className="h-4 w-4 text-green-500" />
             You're up to date
           </div>
         )}