feat(ui): add delete connection(s)

Author: spacemeowx2

ui/src/api/v1.ts

@@ -227,7 +227,7 @@ export function usePostConfig() {
 }
 
 export function useDeleteConnections(baseUrl?: string) {
-  const url = `${baseUrl || ''}/api/connections`
+  const url = `${baseUrl || ''}/api/connection`
   return useSWRMutation<Connection, Error>(
     url,
     async (url: string) => {
@@ -259,12 +259,11 @@ export function usePostSelect(baseUrl?: string) {
   )
 }
 
-export function useDeleteConn(uuid: string, baseUrl?: string) {
-  const url = `${baseUrl || ''}/api/conn/${uuid}`
-  return useSWRMutation<boolean, Error>(
-    url,
-    async (url: string) => {
-      const response = await fetch(url, { method: 'DELETE' })
+export function useDeleteConn(baseUrl?: string) {
+  return useSWRMutation<boolean, Error, string, string>(
+    '/api/connection',
+    async (url: string, { arg: uuid }) => {
+      const response = await fetch(`${baseUrl || ''}${url}/${uuid}`, { method: 'DELETE' })
       if (!response.ok) {
         const error: ApiError = await response.json()
         throw new Error(error.error)

ui/src/pages/connection/index.tsx

@@ -5,7 +5,7 @@ import { Input } from '@/components/ui/input';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { X } from 'lucide-react';
-import { useConnectionsStream, ConnectionInfo, fetcher } from '@/api/v1';
+import { useConnectionsStream, ConnectionInfo, useDeleteConn, useDeleteConnections } from '@/api/v1';
 import { useInstance } from '@/contexts/instance';
 
 // Connection type for UI display
@@ -151,6 +151,8 @@ export const ConnectionsManager = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [sortOption, setSortOption] = useState<SortOption>('time');
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+  const { trigger: triggerDeleteAll } = useDeleteConnections(currentInstance?.url);
+  const { trigger: triggerDeleteConn } = useDeleteConn(currentInstance?.url);
 
   const { formattedConnections, sortedConnections } = useMemo(() => {
     if (!state) {
@@ -210,7 +212,7 @@ export const ConnectionsManager = () => {
     if (!currentInstance?.url) return;
 
     try {
-      await fetcher(['/conn/:uuid', 'delete', undefined, { uuid: id }, currentInstance.url]);
+      await triggerDeleteConn(id);
       // The WebSocket connection will update the state automatically
     } catch (error) {
       console.error('Failed to close connection:', error);
@@ -222,7 +224,7 @@ export const ConnectionsManager = () => {
     if (!currentInstance?.url) return;
 
     try {
-      await fetcher(['/connections', 'delete', undefined, currentInstance.url]);
+      await triggerDeleteAll();
       // The WebSocket connection will update the state automatically
     } catch (error) {
       console.error('Failed to close all connections:', error);