@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/components/integrations/DeviceGrid.tsx

@@ -1,79 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { CompactDeviceCard } from './CompactDeviceCard'
-import { DiscoveredDeviceCard } from './DiscoveredDeviceCard'
-
-interface ActiveDevice {
-  id: string
-  name: string
-  status: string
-  snapshotUrl?: string | null
-}
-
-interface DiscoveredDevice {
-  externalId: string
-  name: string
-}
-
-interface DeviceGridProps {
-  activeDevices: readonly ActiveDevice[]
-  discoveredDevices?: readonly DiscoveredDevice[]
-  onImport?: (externalId: string) => void
-  importingIds?: ReadonlySet<string>
-}
-
-export function DeviceGrid({ activeDevices, discoveredDevices, onImport, importingIds }: DeviceGridProps) {
-  const { t } = useTranslation()
-  const hasDiscovered = discoveredDevices && discoveredDevices.length > 0
-
-  return (
-    <div className="space-y-4">
-      {/* Active devices */}
-      {activeDevices.length > 0 && (
-        <div>
-          <p className="text-[10px] font-semibold text-foreground-subtle uppercase tracking-wider mb-2">
-            {t('integrations.active')} ({activeDevices.length})
-          </p>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
-            {activeDevices.map((device) => (
-              <CompactDeviceCard
-                key={device.id}
-                id={device.id}
-                name={device.name}
-                status={device.status}
-                snapshotUrl={device.snapshotUrl}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Empty state for active */}
-      {activeDevices.length === 0 && !hasDiscovered && (
-        <div className="flex flex-col items-center py-16 text-foreground-subtle">
-          <p className="text-sm">{t('integrations.noDevices')}</p>
-          <p className="text-xs mt-1">{t('integrations.addFirstDevice')}</p>
-        </div>
-      )}
-
-      {/* Discovered devices */}
-      {hasDiscovered && (
-        <div>
-          <p className="text-[10px] font-semibold text-foreground-subtle uppercase tracking-wider mb-2">
-            {t('integrations.available')} ({discoveredDevices.length})
-          </p>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
-            {discoveredDevices.map((device) => (
-              <DiscoveredDeviceCard
-                key={device.externalId}
-                name={device.name}
-                externalId={device.externalId}
-                onImport={onImport ?? (() => {})}
-                importing={importingIds?.has(device.externalId)}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/integrations/DeviceGroupHeader.tsx

@@ -1,17 +0,0 @@
-import { ProviderIcon, getProviderLabel } from '../shared/ProviderIcon'
-
-interface DeviceGroupHeaderProps {
-  type: string
-  name: string
-  deviceCount: number
-}
-
-export function DeviceGroupHeader({ type, name, deviceCount }: DeviceGroupHeaderProps) {
-  return (
-    <div className="flex items-center gap-2.5 mb-2 mt-4 first:mt-0">
-      <ProviderIcon type={type} size="sm" />
-      <span className="text-xs font-semibold text-foreground">{name}</span>
-      <span className="text-[10px] text-foreground-subtle">({deviceCount})</span>
-    </div>
-  )
-}

package/src/components/integrations/DiscoveredDeviceCard.tsx

@@ -1,26 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { Camera } from 'lucide-react'
-
-interface DiscoveredDeviceCardProps {
-  name: string
-  externalId: string
-  onImport: (externalId: string) => void
-  importing?: boolean
-}
-
-export function DiscoveredDeviceCard({ name, externalId, onImport, importing }: DiscoveredDeviceCardProps) {
-  const { t } = useTranslation()
-  return (
-    <div className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-surface px-3 py-2.5 opacity-70">
-      <Camera className="h-3.5 w-3.5 text-foreground-subtle flex-shrink-0" />
-      <span className="text-[11px] font-medium text-foreground flex-1 truncate">{name}</span>
-      <button
-        onClick={() => onImport(externalId)}
-        disabled={importing}
-        className="flex-shrink-0 rounded bg-primary/15 border border-primary/25 px-2 py-0.5 text-[9px] font-semibold text-primary hover:bg-primary/25 transition-colors disabled:opacity-50"
-      >
-        {importing ? '...' : t('integrations.import')}
-      </button>
-    </div>
-  )
-}

package/src/components/integrations/IntegrationCard.tsx

@@ -1,40 +0,0 @@
-import { Play, Square } from 'lucide-react'
-import { ProviderIcon, getProviderLabel } from '../shared/ProviderIcon'
-import { StatusBadge } from '../shared/StatusBadge'
-
-interface IntegrationCardProps {
-  id: string
-  name: string
-  type: string
-  status: string
-  deviceCount: number
-  onStart: () => void
-  onStop: () => void
-}
-
-export function IntegrationCard({ id, name, type, status, deviceCount, onStart, onStop }: IntegrationCardProps) {
-  return (
-    <div className="rounded-lg border border-border bg-surface p-4 hover:shadow-md hover:shadow-black/5 transition-all">
-      <div className="flex items-start justify-between mb-3">
-        <ProviderIcon type={type} size="lg" />
-        <StatusBadge status={status} />
-      </div>
-      <h3 className="text-sm font-semibold text-foreground truncate">{name}</h3>
-      <p className="text-[11px] text-foreground-subtle mt-0.5">{getProviderLabel(type)}</p>
-      <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
-        <span className="text-[11px] text-foreground-subtle">{deviceCount} device{deviceCount !== 1 ? 's' : ''}</span>
-        <div className="flex items-center gap-1">
-          {status === 'running' ? (
-            <button onClick={onStop} className="p-1.5 rounded-md hover:bg-danger/10 text-foreground-subtle hover:text-danger transition-colors" title="Stop">
-              <Square className="h-3.5 w-3.5" />
-            </button>
-          ) : (
-            <button onClick={onStart} className="p-1.5 rounded-md hover:bg-success/10 text-foreground-subtle hover:text-success transition-colors" title="Start">
-              <Play className="h-3.5 w-3.5" />
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/integrations/IntegrationWizard.tsx

@@ -1,171 +0,0 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from 'react-router-dom'
-import { X } from 'lucide-react'
-import { useBackendClient } from '../../hooks/useBackendClient'
-import { ProviderPicker } from './ProviderPicker'
-import { ProviderConfigForm } from './ProviderConfigForm'
-import { DeviceDiscoveryStep } from './DeviceDiscoveryStep'
-
-type WizardStep = 'picker' | 'config' | 'discovery'
-
-interface IntegrationWizardProps {
-  open: boolean
-  onClose: () => void
-}
-
-export function IntegrationWizard({ open, onClose }: IntegrationWizardProps) {
-  const { t } = useTranslation()
-  const client = useBackendClient()
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-
-  const [step, setStep] = useState<WizardStep>('picker')
-  const [selectedAddonId, setSelectedAddonId] = useState<string | null>(null)
-  const [createdProviderId, setCreatedProviderId] = useState<string | null>(null)
-  const [discoveryMode, setDiscoveryMode] = useState<string>('manual')
-
-  const { data: configSchema } = useQuery({
-    queryKey: ['addon-config-schema', selectedAddonId],
-    queryFn: () => client.getAddonConfigSchema(selectedAddonId!),
-    enabled: selectedAddonId != null,
-  })
-
-  const addProviderMutation = useMutation({
-    mutationFn: (input: { id: string; type: string; name: string; config: Record<string, unknown> }) =>
-      client.trpc.providerConfig.addProvider.mutate({
-        id: input.id,
-        type: input.type,
-        name: input.name,
-        ...input.config,
-      }),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['providers'] }),
-  })
-
-  const adoptMutation = useMutation({
-    mutationFn: (externalId: string) =>
-      client.adoptDevice(createdProviderId!, externalId),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['devices'] }),
-  })
-
-  async function handlePickerSelect(addonId: string, instanceMode: string, providerDiscoveryMode: string) {
-    setSelectedAddonId(addonId)
-    setDiscoveryMode(providerDiscoveryMode)
-
-    if (instanceMode === 'unique') {
-      const providerId = `${addonId}-${Date.now()}`
-      try {
-        await addProviderMutation.mutateAsync({
-          id: providerId,
-          type: addonId,
-          name: addonId,
-          config: {},
-        })
-        onClose()
-        resetState()
-        navigate(`/integrations/${providerId}`)
-      } catch {
-        // Error is handled by mutation state
-      }
-      return
-    }
-
-    setStep('config')
-  }
-
-  async function handleConfigSave(data: { name: string; config: Record<string, unknown> }) {
-    if (!selectedAddonId) return
-
-    const providerId = `${selectedAddonId}-${Date.now()}`
-    try {
-      await addProviderMutation.mutateAsync({
-        id: providerId,
-        type: selectedAddonId,
-        name: data.name,
-        config: data.config,
-      })
-      setCreatedProviderId(providerId)
-      if (discoveryMode === 'auto' || discoveryMode === 'both') {
-        setStep('discovery')
-      } else {
-        finish(providerId)
-      }
-    } catch {
-      // Error is handled by mutation state
-    }
-  }
-
-  async function handleImport(externalIds: readonly string[]) {
-    for (const id of externalIds) {
-      await adoptMutation.mutateAsync(id)
-    }
-    finish()
-  }
-
-  function finish(overrideProviderId?: string) {
-    const targetId = overrideProviderId ?? createdProviderId ?? selectedAddonId
-    onClose()
-    resetState()
-    if (targetId) {
-      navigate(`/integrations/${targetId}`)
-    }
-  }
-
-  function resetState() {
-    setStep('picker')
-    setSelectedAddonId(null)
-    setCreatedProviderId(null)
-    setDiscoveryMode('manual')
-  }
-
-  function handleClose() {
-    onClose()
-    resetState()
-  }
-
-  if (!open) return null
-
-  const titles: Record<WizardStep, string> = {
-    picker: t('integrations.newIntegration'),
-    config: t('integrations.configureIntegration'),
-    discovery: t('integrations.importDevices'),
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/60" onClick={handleClose} />
-      <div className="relative z-10 w-full max-w-lg rounded-xl border border-border bg-background shadow-2xl">
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
-          <h2 className="text-sm font-semibold text-foreground">{titles[step]}</h2>
-          <button
-            onClick={handleClose}
-            className="rounded-md p-1 text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-        <div className="px-5 py-4">
-          {step === 'picker' && (
-            <ProviderPicker onSelect={handlePickerSelect} onClose={handleClose} />
-          )}
-          {step === 'config' && selectedAddonId && (
-            <ProviderConfigForm
-              addonId={selectedAddonId}
-              configSchema={(configSchema ?? null) as any}
-              onSave={handleConfigSave}
-              onBack={() => setStep('picker')}
-            />
-          )}
-          {step === 'discovery' && createdProviderId && (
-            <DeviceDiscoveryStep
-              providerId={createdProviderId}
-              onImport={handleImport}
-              onSkip={finish}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/integrations/ProviderConfigForm.tsx

@@ -1,89 +0,0 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useMutation } from '@tanstack/react-query'
-import { useBackendClient } from '../../hooks/useBackendClient'
-import { FormBuilder } from '../form-builder/FormBuilder'
-import type { ConfigUISchema } from '../../types/config-ui'
-
-interface ProviderConfigFormProps {
-  addonId: string
-  configSchema: ConfigUISchema | null
-  onSave: (config: { name: string; config: Record<string, unknown> }) => void
-  onBack: () => void
-}
-
-export function ProviderConfigForm({ addonId, configSchema, onSave, onBack }: ProviderConfigFormProps) {
-  const { t } = useTranslation()
-  const client = useBackendClient()
-  const [name, setName] = useState('')
-  const [config, setConfig] = useState<Record<string, unknown>>({})
-  const [testResult, setTestResult] = useState<{ success: boolean; error?: string } | null>(null)
-
-  const testMutation = useMutation({
-    mutationFn: () =>
-      client.trpc.providerConfig.testConnection.mutate({
-        type: addonId,
-        url: String(config.url ?? ''),
-        username: config.username ? String(config.username) : undefined,
-        password: config.password ? String(config.password) : undefined,
-      }),
-    onSuccess: (result) => setTestResult(result),
-    onError: (err) => setTestResult({ success: false, error: String(err) }),
-  })
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <label className="block text-[11px] font-medium text-foreground mb-1">{t('integrations.integrationName')}</label>
-        <input
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={t('integrations.integrationNamePlaceholder')}
-          className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-xs text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-primary/50"
-        />
-      </div>
-
-      {configSchema && (
-        <FormBuilder schema={configSchema} values={config} onChange={setConfig} />
-      )}
-
-      {testResult && (
-        <div
-          className={`rounded-lg border px-3 py-2 text-xs ${
-            testResult.success
-              ? 'border-success/30 bg-success/5 text-success'
-              : 'border-danger/30 bg-danger/5 text-danger'
-          }`}
-        >
-          {testResult.success ? t('integrations.connectionSuccess') : `${t('integrations.errorPrefix')} ${testResult.error}`}
-        </div>
-      )}
-
-      <div className="flex items-center justify-between pt-2">
-        <button
-          onClick={onBack}
-          className="rounded-lg border border-border px-3 py-1.5 text-xs text-foreground-subtle hover:text-foreground transition-colors"
-        >
-          {t('integrations.back')}
-        </button>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => testMutation.mutate()}
-            disabled={testMutation.isPending}
-            className="rounded-lg border border-border px-3 py-1.5 text-xs text-foreground hover:bg-surface-hover transition-colors disabled:opacity-50"
-          >
-            {testMutation.isPending ? t('integrations.testing') : t('integrations.testConnection')}
-          </button>
-          <button
-            onClick={() => onSave({ name, config })}
-            disabled={!name.trim()}
-            className="rounded-lg bg-primary px-4 py-1.5 text-xs font-medium text-primary-foreground shadow-sm disabled:opacity-50"
-          >
-            {t('integrations.forward')}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/integrations/ProviderPicker.tsx

@@ -1,91 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
-import { ChevronRight, Settings } from 'lucide-react'
-import { useNavigate } from 'react-router-dom'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-interface ProviderPickerProps {
-  onSelect: (addonId: string, instanceMode: string, discoveryMode: string) => void
-  onClose: () => void
-}
-
-export function ProviderPicker({ onSelect, onClose }: ProviderPickerProps) {
-  const { t } = useTranslation()
-  const client = useBackendClient()
-  const navigate = useNavigate()
-
-  const { data: providerTypes, isLoading } = useQuery({
-    queryKey: ['provider-types'],
-    queryFn: () => client.listProviderTypes(),
-  })
-
-  if (isLoading) {
-    return (
-      <div className="space-y-2 p-2">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="h-14 rounded-lg bg-surface animate-pulse" />
-        ))}
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      {(providerTypes ?? []).map((provider) => {
-        const isUniqueExisting = provider.instanceMode === 'unique' && provider.existingInstances.length > 0
-
-        return (
-          <button
-            key={provider.addonId}
-            onClick={() => {
-              if (isUniqueExisting) {
-                const existingId = provider.existingInstances[0]!.id
-                onClose()
-                navigate(`/integrations/${existingId}`)
-              } else {
-                onSelect(provider.addonId, provider.instanceMode, provider.discoveryMode)
-              }
-            }}
-            className="flex w-full items-center gap-3 rounded-lg border border-border bg-surface p-3 text-left hover:border-foreground-subtle/30 transition-colors"
-          >
-            {provider.iconUrl ? (
-              <div
-                className="flex h-9 w-9 items-center justify-center rounded-lg flex-shrink-0"
-                style={{ backgroundColor: `${provider.color}15` }}
-              >
-                <img src={provider.iconUrl} alt="" className="h-5 w-5" />
-              </div>
-            ) : (
-              <div
-                className="flex h-9 w-9 items-center justify-center rounded-lg flex-shrink-0"
-                style={{ backgroundColor: `${provider.color}15` }}
-              >
-                <span className="text-sm" style={{ color: provider.color }}>◉</span>
-              </div>
-            )}
-            <div className="flex-1 min-w-0">
-              <p className="text-xs font-semibold text-foreground">{provider.name}</p>
-              {provider.description && (
-                <p className="text-[10px] text-foreground-subtle mt-0.5 truncate">{provider.description}</p>
-              )}
-            </div>
-            {isUniqueExisting ? (
-              <span className="flex items-center gap-1 text-[10px] font-medium text-foreground-subtle">
-                <Settings className="h-3 w-3" />
-                {t('integrations.manage')}
-              </span>
-            ) : (
-              <ChevronRight className="h-4 w-4 text-foreground-subtle flex-shrink-0" />
-            )}
-          </button>
-        )
-      })}
-
-      {(providerTypes ?? []).length === 0 && (
-        <div className="py-8 text-center text-xs text-foreground-subtle">
-          {t('integrations.noProviders')}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/integrations/SnapshotPopover.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Eye } from 'lucide-react'
-
-interface SnapshotPopoverProps {
-  deviceName: string
-  snapshotUrl?: string | null
-  status: string
-  resolution?: string | null
-  codec?: string | null
-  fps?: number | null
-  lastSnapshot?: string | null
-}
-
-export function SnapshotPopover({ deviceName, snapshotUrl, status, resolution, codec, fps, lastSnapshot }: SnapshotPopoverProps) {
-  const { t } = useTranslation()
-  const [showPopover, setShowPopover] = useState(false)
-
-  return (
-    <div
-      className="relative flex-shrink-0"
-      onMouseEnter={() => setShowPopover(true)}
-      onMouseLeave={() => setShowPopover(false)}
-    >
-      <button
-        className="flex h-6 w-6 items-center justify-center rounded text-foreground-subtle hover:bg-surface-hover hover:text-foreground transition-colors"
-        title={t('integrations.preview')}
-      >
-        <Eye className="h-3.5 w-3.5" />
-      </button>
-
-      {showPopover && (
-        <div className="absolute bottom-full right-0 mb-2 w-72 rounded-lg border border-border bg-surface shadow-lg shadow-black/30 z-50 overflow-hidden">
-          <div className="h-40 bg-background flex items-center justify-center">
-            {snapshotUrl && status !== 'offline' ? (
-              <img
-                src={snapshotUrl}
-                alt={deviceName}
-                className="h-full w-full object-cover"
-                onError={(e) => {
-                  (e.target as HTMLImageElement).style.display = 'none'
-                }}
-              />
-            ) : (
-              <span className="text-xs text-foreground-subtle">
-                {status === 'offline' ? t('integrations.snapshotUnavailable') : t('integrations.noSnapshot')}
-              </span>
-            )}
-          </div>
-          <div className="px-3 py-2 space-y-0.5">
-            <p className="text-xs font-semibold text-foreground">{deviceName}</p>
-            {(resolution || codec || fps) && (
-              <p className="text-[10px] text-foreground-subtle">
-                {[codec, resolution, fps ? `${fps}fps` : null].filter(Boolean).join(' · ')}
-              </p>
-            )}
-            {lastSnapshot && (
-              <p className="text-[10px] text-foreground-subtle">{t('integrations.lastSnapshot')} {lastSnapshot}</p>
-            )}
-            {status === 'offline' && (
-              <p className="text-[10px] text-danger">{t('integrations.offline')}</p>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}