378 lines
13 KiB
TypeScript
378 lines
13 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { configStorage } from '@/lib/configStorage'
|
||
import type { Nip95Config } from '@/lib/configStorageTypes'
|
||
import { t } from '@/lib/i18n'
|
||
import { userConfirm } from '@/lib/userConfirm'
|
||
|
||
interface Nip95ConfigManagerProps {
|
||
onConfigChange?: () => void
|
||
}
|
||
|
||
export function Nip95ConfigManager({ onConfigChange }: Nip95ConfigManagerProps): React.ReactElement {
|
||
const [apis, setApis] = useState<Nip95Config[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [editingId, setEditingId] = useState<string | null>(null)
|
||
const [newUrl, setNewUrl] = useState('')
|
||
const [showAddForm, setShowAddForm] = useState(false)
|
||
const [draggedId, setDraggedId] = useState<string | null>(null)
|
||
const [dragOverId, setDragOverId] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
void loadApis()
|
||
}, [])
|
||
|
||
async function loadApis(): Promise<void> {
|
||
try {
|
||
setLoading(true)
|
||
setError(null)
|
||
const config = await configStorage.getConfig()
|
||
setApis(config.nip95Apis.sort((a, b) => a.priority - b.priority))
|
||
} catch (e) {
|
||
const errorMessage = e instanceof Error ? e.message : t('settings.nip95.error.loadFailed')
|
||
setError(errorMessage)
|
||
console.error('Error loading NIP-95 APIs:', e)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
async function handleToggleEnabled(id: string, enabled: boolean): Promise<void> {
|
||
try {
|
||
await configStorage.updateNip95Api(id, { enabled })
|
||
await loadApis()
|
||
onConfigChange?.()
|
||
} catch (e) {
|
||
const errorMessage = e instanceof Error ? e.message : t('settings.nip95.error.updateFailed')
|
||
setError(errorMessage)
|
||
console.error('Error updating NIP-95 API:', e)
|
||
}
|
||
}
|
||
|
||
async function handleUpdatePriorities(newOrder: Nip95Config[]): Promise<void> {
|
||
try {
|
||
// Update priorities based on new order (priority = index + 1, lower number = higher priority)
|
||
const updatePromises = newOrder.map((api, index) => {
|
||
const newPriority = index + 1
|
||
if (api.priority !== newPriority) {
|
||
return configStorage.updateNip95Api(api.id, { priority: newPriority })
|
||
}
|
||
return Promise.resolve()
|
||
})
|
||
|
||
await Promise.all(updatePromises)
|
||
await loadApis()
|
||
onConfigChange?.()
|
||
} catch (e) {
|
||
const errorMessage = e instanceof Error ? e.message : t('settings.nip95.error.priorityFailed')
|
||
setError(errorMessage)
|
||
console.error('Error updating priorities:', e)
|
||
}
|
||
}
|
||
|
||
function handleDragStart(e: React.DragEvent<HTMLDivElement>, id: string): void {
|
||
setDraggedId(id)
|
||
e.dataTransfer.effectAllowed = 'move'
|
||
e.dataTransfer.setData('text/plain', id)
|
||
}
|
||
|
||
function handleDragOver(e: React.DragEvent<HTMLDivElement>, id: string): void {
|
||
e.preventDefault()
|
||
e.dataTransfer.dropEffect = 'move'
|
||
setDragOverId(id)
|
||
}
|
||
|
||
function handleDragLeave(): void {
|
||
setDragOverId(null)
|
||
}
|
||
|
||
function handleDrop(e: React.DragEvent<HTMLDivElement>, targetId: string): void {
|
||
e.preventDefault()
|
||
setDragOverId(null)
|
||
|
||
if (!draggedId || draggedId === targetId) {
|
||
setDraggedId(null)
|
||
return
|
||
}
|
||
|
||
const draggedIndex = apis.findIndex((api) => api.id === draggedId)
|
||
const targetIndex = apis.findIndex((api) => api.id === targetId)
|
||
|
||
if (draggedIndex === -1 || targetIndex === -1) {
|
||
setDraggedId(null)
|
||
return
|
||
}
|
||
|
||
// Reorder the array
|
||
const newApis = [...apis]
|
||
const removed = newApis[draggedIndex]
|
||
if (!removed) {
|
||
setDraggedId(null)
|
||
return
|
||
}
|
||
newApis.splice(draggedIndex, 1)
|
||
newApis.splice(targetIndex, 0, removed)
|
||
|
||
setApis(newApis)
|
||
setDraggedId(null)
|
||
|
||
// Update priorities based on new order
|
||
void handleUpdatePriorities(newApis)
|
||
}
|
||
|
||
function DragHandle(): React.ReactElement {
|
||
return (
|
||
<div className="flex flex-col gap-1 cursor-grab active:cursor-grabbing text-cyber-accent/50 hover:text-neon-cyan transition-colors">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||
<circle cx="2" cy="2" r="1.5" />
|
||
<circle cx="6" cy="2" r="1.5" />
|
||
<circle cx="10" cy="2" r="1.5" />
|
||
<circle cx="2" cy="6" r="1.5" />
|
||
<circle cx="6" cy="6" r="1.5" />
|
||
<circle cx="10" cy="6" r="1.5" />
|
||
<circle cx="2" cy="10" r="1.5" />
|
||
<circle cx="6" cy="10" r="1.5" />
|
||
<circle cx="10" cy="10" r="1.5" />
|
||
</svg>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
async function handleUpdateUrl(id: string, url: string): Promise<void> {
|
||
try {
|
||
await configStorage.updateNip95Api(id, { url })
|
||
await loadApis()
|
||
setEditingId(null)
|
||
onConfigChange?.()
|
||
} catch (e) {
|
||
const errorMessage = e instanceof Error ? e.message : t('settings.nip95.error.urlFailed')
|
||
setError(errorMessage)
|
||
console.error('Error updating URL:', e)
|
||
}
|
||
}
|
||
|
||
async function handleAddApi(): Promise<void> {
|
||
if (!newUrl.trim()) {
|
||
setError(t('settings.nip95.error.urlRequired'))
|
||
return
|
||
}
|
||
|
||
try {
|
||
// Validate URL format - throws if invalid
|
||
void new URL(newUrl)
|
||
await configStorage.addNip95Api(newUrl.trim(), false)
|
||
setNewUrl('')
|
||
setShowAddForm(false)
|
||
await loadApis()
|
||
onConfigChange?.()
|
||
} catch (e) {
|
||
if (e instanceof TypeError && e.message.includes('Invalid URL')) {
|
||
setError(t('settings.nip95.error.invalidUrl'))
|
||
} else {
|
||
const errorMessage = e instanceof Error ? e.message : t('settings.nip95.error.addFailed')
|
||
setError(errorMessage)
|
||
}
|
||
console.error('Error adding NIP-95 API:', e)
|
||
}
|
||
}
|
||
|
||
async function handleRemoveApi(id: string): Promise<void> {
|
||
if (!userConfirm(t('settings.nip95.remove.confirm'))) {
|
||
return
|
||
}
|
||
|
||
try {
|
||
await configStorage.removeNip95Api(id)
|
||
await loadApis()
|
||
onConfigChange?.()
|
||
} catch (e) {
|
||
const errorMessage = e instanceof Error ? e.message : t('settings.nip95.error.removeFailed')
|
||
setError(errorMessage)
|
||
console.error('Error removing NIP-95 API:', e)
|
||
}
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="text-center py-8 text-neon-cyan">
|
||
<div>{t('settings.nip95.loading')}</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{error && (
|
||
<div className="bg-red-900/30 border border-red-500/50 rounded p-4 text-red-300">
|
||
{error}
|
||
<button
|
||
onClick={() => setError(null)}
|
||
className="ml-4 text-red-400 hover:text-red-200"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-between items-center">
|
||
<h2 className="text-2xl font-bold text-neon-cyan">{t('settings.nip95.title')}</h2>
|
||
<button
|
||
onClick={() => setShowAddForm(!showAddForm)}
|
||
className="px-4 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan border border-neon-cyan/50 rounded transition-colors"
|
||
>
|
||
{showAddForm ? t('settings.nip95.add.cancel') : t('settings.nip95.addButton')}
|
||
</button>
|
||
</div>
|
||
|
||
{showAddForm && (
|
||
<div className="bg-cyber-dark border border-neon-cyan/30 rounded p-4 space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-cyber-accent mb-2">
|
||
{t('settings.nip95.add.url')}
|
||
</label>
|
||
<input
|
||
type="url"
|
||
value={newUrl}
|
||
onChange={(e) => setNewUrl(e.target.value)}
|
||
placeholder={t('settings.nip95.add.placeholder')}
|
||
className="w-full px-4 py-2 bg-cyber-darker border border-cyber-accent/30 rounded text-cyber-light focus:border-neon-cyan focus:outline-none"
|
||
/>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => void handleAddApi()}
|
||
className="px-4 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan border border-neon-cyan/50 rounded transition-colors"
|
||
>
|
||
{t('settings.nip95.add.add')}
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setShowAddForm(false)
|
||
setNewUrl('')
|
||
setError(null)
|
||
}}
|
||
className="px-4 py-2 bg-cyber-accent/20 hover:bg-cyber-accent/30 text-cyber-accent border border-cyber-accent/50 rounded transition-colors"
|
||
>
|
||
{t('settings.nip95.add.cancel')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-4">
|
||
{apis.length === 0 ? (
|
||
<div className="text-center py-8 text-cyber-accent">
|
||
{t('settings.nip95.empty')}
|
||
</div>
|
||
) : (
|
||
apis.map((api, index) => (
|
||
<div
|
||
key={api.id}
|
||
onDragOver={(e) => {
|
||
handleDragOver(e, api.id)
|
||
}}
|
||
onDragLeave={handleDragLeave}
|
||
onDrop={(e) => {
|
||
handleDrop(e, api.id)
|
||
}}
|
||
className={`bg-cyber-dark border rounded p-4 space-y-3 transition-all ${
|
||
draggedId === api.id
|
||
? 'opacity-50 border-neon-cyan'
|
||
: dragOverId === api.id
|
||
? 'border-neon-green shadow-lg'
|
||
: 'border-neon-cyan/30'
|
||
}`}
|
||
>
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="flex items-center gap-3 flex-1">
|
||
<div
|
||
className="drag-handle cursor-grab active:cursor-grabbing"
|
||
draggable
|
||
onDragStart={(e) => {
|
||
handleDragStart(e, api.id)
|
||
e.stopPropagation()
|
||
}}
|
||
onMouseDown={(e) => {
|
||
e.stopPropagation()
|
||
}}
|
||
>
|
||
<DragHandle />
|
||
</div>
|
||
<div className="flex-1">
|
||
{editingId === api.id ? (
|
||
<div className="space-y-2">
|
||
<input
|
||
type="url"
|
||
defaultValue={api.url}
|
||
onBlur={(e) => {
|
||
if (e.target.value !== api.url) {
|
||
void handleUpdateUrl(api.id, e.target.value)
|
||
} else {
|
||
setEditingId(null)
|
||
}
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
e.currentTarget.blur()
|
||
} else if (e.key === 'Escape') {
|
||
setEditingId(null)
|
||
}
|
||
}}
|
||
className="w-full px-3 py-2 bg-cyber-darker border border-neon-cyan/50 rounded text-cyber-light focus:border-neon-cyan focus:outline-none"
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="text-neon-cyan cursor-pointer hover:text-neon-green transition-colors"
|
||
onClick={() => setEditingId(api.id)}
|
||
title={t('settings.nip95.list.editUrl')}
|
||
>
|
||
{api.url}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<label className="flex items-center gap-2 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
checked={api.enabled}
|
||
onChange={(e) => void handleToggleEnabled(api.id, e.target.checked)}
|
||
className="w-4 h-4 text-neon-cyan bg-cyber-darker border-cyber-accent rounded focus:ring-neon-cyan"
|
||
/>
|
||
<span className="text-sm text-cyber-accent">
|
||
{api.enabled ? t('settings.nip95.list.enabled') : t('settings.nip95.list.disabled')}
|
||
</span>
|
||
</label>
|
||
<button
|
||
onClick={() => void handleRemoveApi(api.id)}
|
||
className="px-3 py-1 text-sm bg-red-900/30 hover:bg-red-900/50 text-red-300 border border-red-500/50 rounded transition-colors"
|
||
title={t('settings.nip95.list.remove')}
|
||
>
|
||
{t('settings.nip95.list.remove')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-xs text-cyber-accent/70">
|
||
<span>
|
||
{t('settings.nip95.list.priorityLabel', { priority: index + 1, id: api.id })}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-sm text-cyber-accent space-y-2">
|
||
<p>
|
||
<strong>{t('settings.nip95.note.title')}</strong> {t('settings.nip95.note.priority')}
|
||
</p>
|
||
<p>
|
||
{t('settings.nip95.note.fallback')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|