From 9f7a5a492eeb8e8a5fce04777f1b5555b024a9be Mon Sep 17 00:00:00 2001 From: Jamie Pine Date: Tue, 27 Jan 2026 17:23:13 -0800 Subject: [PATCH] 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. --- .../ServerSettings/ConnectionForm.tsx | 56 +++++++++---------- .../ServerSettings/ModelManagement.tsx | 2 +- .../ServerSettings/ModelProgress.tsx | 12 ++-- .../ServerSettings/UpdateStatus.tsx | 30 +++++----- app/src/components/ui/checkbox.tsx | 46 ++++++++------- 5 files changed, 76 insertions(+), 70 deletions(-) diff --git a/app/src/components/ServerSettings/ConnectionForm.tsx b/app/src/components/ServerSettings/ConnectionForm.tsx index cc1e2d1d..84cf9dac 100644 --- a/app/src/components/ServerSettings/ConnectionForm.tsx +++ b/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() {
- +
diff --git a/app/src/components/ServerSettings/ModelManagement.tsx b/app/src/components/ServerSettings/ModelManagement.tsx index 776d5077..4d3975e5 100644 --- a/app/src/components/ServerSettings/ModelManagement.tsx +++ b/app/src/components/ServerSettings/ModelManagement.tsx @@ -1,4 +1,4 @@ -import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { Download, Loader2, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { diff --git a/app/src/components/ServerSettings/ModelProgress.tsx b/app/src/components/ServerSettings/ModelProgress.tsx index 4f651a7f..ae882c1a 100644 --- a/app/src/components/ServerSettings/ModelProgress.tsx +++ b/app/src/components/ServerSettings/ModelProgress.tsx @@ -1,9 +1,9 @@ -import { useEffect, useState } from 'react'; -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, XCircle } from 'lucide-react'; +import { useEffect, useState } from 'react'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Progress } from '@/components/ui/progress'; +import type { ModelProgress as ModelProgressType } from '@/lib/api/types'; +import { useServerStore } from '@/stores/serverStore'; interface ModelProgressProps { modelName: string; @@ -63,7 +63,7 @@ export function ModelProgress({ modelName, displayName }: ModelProgressProps) { const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); - return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`; + return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`; }; const getStatusIcon = () => { diff --git a/app/src/components/ServerSettings/UpdateStatus.tsx b/app/src/components/ServerSettings/UpdateStatus.tsx index d0d122e4..c946e421 100644 --- a/app/src/components/ServerSettings/UpdateStatus.tsx +++ b/app/src/components/ServerSettings/UpdateStatus.tsx @@ -1,11 +1,11 @@ -import { useState, useEffect } from 'react'; +import { getVersion } from '@tauri-apps/api/app'; import { RefreshCw, Download, AlertCircle } from 'lucide-react'; +import { useEffect, useState } from 'react'; +import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; -import { Badge } from '@/components/ui/badge'; import { Progress } from '@/components/ui/progress'; import { useAutoUpdater } from '@/hooks/useAutoUpdater'; -import { getVersion } from '@tauri-apps/api/app'; export function UpdateStatus() { const { status, checkForUpdates, downloadAndInstall, restartAndInstall } = useAutoUpdater(false); @@ -77,17 +77,18 @@ export function UpdateStatus() { Downloading update... {status.downloadProgress !== undefined && ( - - {status.downloadProgress}% - + {status.downloadProgress}% )} - {status.downloadedBytes !== undefined && status.totalBytes !== undefined && status.totalBytes > 0 && ( -
- {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB / {(status.totalBytes / 1024 / 1024).toFixed(1)} MB -
- )} + {status.downloadedBytes !== undefined && + status.totalBytes !== undefined && + status.totalBytes > 0 && ( +
+ {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB /{' '} + {(status.totalBytes / 1024 / 1024).toFixed(1)} MB +
+ )} )} @@ -96,11 +97,14 @@ export function UpdateStatus() {
Update Ready to Install
-
Version {status.version} has been downloaded
+
+ Version {status.version} has been downloaded +
- The app needs to restart to complete the installation. You can do this now or later at your convenience. + The app needs to restart to complete the installation. You can do this now or later at + your convenience.
); }, );