refactored to make use of the ServiceType enum throughout backend and frontend for typesafety

frontend/src/components/connections/ConnectModal.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState, type SyntheticEvent } from 'react'
 import { login } from '../../api/connections'
-import type { LoginRequest } from '../../types/connection'
+import type { LoginRequest, ServiceType } from '../../types/connection'
 import '../ui/Modal.scss'
 
 interface Props {
-  serviceType: string
+  serviceType: ServiceType
   label: string
   onClose: () => void
   onSuccess: () => void

frontend/src/components/connections/Dashboard.tsx

@@ -1,13 +1,13 @@
 import { useState, useEffect } from "react"
 import { getStatuses, logout } from "../../api/connections"
-import type { ConnectionStatus } from "../../types/connection"
+import { ServiceType, type ConnectionStatus } from "../../types/connection"
 import { ServiceCard } from "./ServiceCard"
 import { ConnectModal } from "./ConnectModal"
 import "./Dashboard.scss"
 import { SearchModal } from "../search/SearchModal"
 
 const SERVICES = [
-    { serviceType: 'HOMEBOX', label: 'Homebox', icon: '📦' },
+    { serviceType: ServiceType.HOMEBOX, label: 'Homebox', icon: '📦' },
 ] as const
 
 export function Dashboard() {
@@ -21,7 +21,7 @@ export function Dashboard() {
 
     useEffect(() => { refresh() }, [])
 
-    const handleDisconnect = (serviceType: string) => {
+    const handleDisconnect = (serviceType: ServiceType) => {
         logout(serviceType).then(refresh).catch(() => { })
     }
 

frontend/src/components/connections/ServiceCard.tsx

@@ -1,9 +1,9 @@
-import type { ConnectionStatus } from '../../types/connection'
+import type { ConnectionStatus, ServiceType } from '../../types/connection'
 import { ActionButton } from '../ui/ActionButton'
 import './ServiceCard.scss'
 
 interface Props {
-  serviceType: string
+  serviceType: ServiceType
   label: string
   icon: string
   status: ConnectionStatus | null