feat: Complete translation in French

frontend/src/components/UDPIntegrationsPanel.tsx

@@ -14,6 +14,7 @@ import {
   Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
 
 // Local mirror of the Go struct — we duplicate the type rather than depend
 // on the generated Wails model because the inline `as any` casts are
@@ -44,36 +45,36 @@ const SERVICE_TYPES: Array<{
   {
     id: 'wsjt',
     direction: 'inbound',
-    label: 'WSJT-X / JTDX / MSHV',
-    hint: 'Auto-logs FT8/FT4/etc. QSOs and fills the entry callsign live.',
+    label: 'udpp.svcWsjtLabel',
+    hint: 'udpp.svcWsjtHint',
     defaults: { port: 2237, multicast: true, multicast_group: '224.0.0.1' },
   },
   {
     id: 'adif',
     direction: 'inbound',
-    label: 'ADIF message (JTAlert, GridTracker)',
-    hint: 'Receives a single ADIF record per packet and logs it.',
+    label: 'udpp.svcAdifLabel',
+    hint: 'udpp.svcAdifHint',
     defaults: { port: 2333, multicast: false },
   },
   {
     id: 'n1mm',
     direction: 'inbound',
-    label: 'N1MM Logger+ (contest XML)',
-    hint: 'Receives contest QSOs as XML messages.',
+    label: 'udpp.svcN1mmLabel',
+    hint: 'udpp.svcN1mmHint',
     defaults: { port: 12060, multicast: false },
   },
   {
     id: 'remote_call',
     direction: 'inbound',
-    label: 'Remote callsign (DXHunter, custom)',
-    hint: 'A short text packet containing just a callsign — fills the entry field.',
+    label: 'udpp.svcRemoteLabel',
+    hint: 'udpp.svcRemoteHint',
     defaults: { port: 12090, multicast: false },
   },
   {
     id: 'db_updated',
     direction: 'outbound',
-    label: 'DB updated → notify other apps',
-    hint: 'Sends the ADIF of every QSO you log to a remote listener (Cloudlog UDP, N1MM, …).',
+    label: 'udpp.svcDbLabel',
+    hint: 'udpp.svcDbHint',
     defaults: { port: 2333, destination_ip: '127.0.0.1' },
   },
 ];
@@ -81,6 +82,7 @@ const SERVICE_TYPES: Array<{
 type Props = { onError: (msg: string) => void };
 
 export function UDPIntegrationsPanel({ onError }: Props) {
+  const { t } = useI18n();
   const [items, setItems] = useState<UDPConfig[]>([]);
   const [loading, setLoading] = useState(true);
   const [editing, setEditing] = useState<UDPConfig | null>(null);
@@ -123,7 +125,7 @@ export function UDPIntegrationsPanel({ onError }: Props) {
   }
 
   async function remove(id: number) {
-    if (!confirm('Delete this UDP connection?')) return;
+    if (!confirm(t('udpp.deleteConfirm'))) return;
     try {
       await DeleteUDPIntegration(id);
       setItems((prev) => prev.filter((x) => x.id !== id));
@@ -143,7 +145,7 @@ export function UDPIntegrationsPanel({ onError }: Props) {
     } catch (e: any) { onError(String(e?.message ?? e)); }
   }
 
-  if (loading) return <div className="text-xs text-muted-foreground italic">Loading…</div>;
+  if (loading) return <div className="text-xs text-muted-foreground italic">{t('udpp.loading')}</div>;
 
   const inbound = items.filter((i) => i.direction === 'inbound');
   const outbound = items.filter((i) => i.direction === 'outbound');
@@ -151,15 +153,11 @@ export function UDPIntegrationsPanel({ onError }: Props) {
   return (
     <div className="space-y-4">
       <div className="text-[11px] text-muted-foreground max-w-2xl leading-relaxed">
-        UDP connections let OpsLog talk to other ham radio software. Inbound
-        connections receive QSOs or callsigns and update the logbook live;
-        outbound connections notify other apps when you log a QSO locally.
-        Enable multicast to share a port with another listener without
-        conflict — required for the typical WSJT-X 2237 setup.
+        {t('udpp.intro')}
       </div>
 
       <Section
-        title="Inbound — OpsLog listens"
+        title={t('udpp.inboundTitle')}
         icon={<ArrowDownToLine className="size-4" />}
         items={inbound}
         onAdd={() => addNew('inbound')}
@@ -168,7 +166,7 @@ export function UDPIntegrationsPanel({ onError }: Props) {
         onToggle={toggleEnabled}
       />
       <Section
-        title="Outbound — OpsLog sends"
+        title={t('udpp.outboundTitle')}
         icon={<ArrowUpFromLine className="size-4" />}
         items={outbound}
         onAdd={() => addNew('outbound')}
@@ -179,10 +177,10 @@ export function UDPIntegrationsPanel({ onError }: Props) {
 
       <div className="border-t border-border/60 pt-3 flex items-center gap-3">
         <Button size="sm" variant="outline" onClick={reloadServers}>
-          <RefreshCcw className="size-3.5" /> Reload all
+          <RefreshCcw className="size-3.5" /> {t('udpp.reloadAll')}
         </Button>
         <span className="text-[11px] text-muted-foreground">
-          Restarts every enabled listener after a manual change.
+          {t('udpp.reloadHint')}
         </span>
       </div>
 
@@ -210,6 +208,7 @@ function Section({
   onDelete: (id: number) => void;
   onToggle: (c: UDPConfig) => void;
 }) {
+  const { t } = useI18n();
   return (
     <div className="rounded-md border border-border bg-card">
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
@@ -217,11 +216,11 @@ function Section({
         <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</span>
         <div className="flex-1" />
         <Button size="sm" variant="outline" className="h-7 text-xs" onClick={onAdd}>
-          <Plus className="size-3" /> Add
+          <Plus className="size-3" /> {t('udpp.add')}
         </Button>
       </div>
       {items.length === 0 ? (
-        <div className="px-3 py-3 text-xs text-muted-foreground italic">No connection.</div>
+        <div className="px-3 py-3 text-xs text-muted-foreground italic">{t('udpp.noConnection')}</div>
       ) : (
         <div className="divide-y divide-border/60">
           {items.map((c) => {
@@ -231,9 +230,9 @@ function Section({
                 <Checkbox checked={c.enabled} onCheckedChange={() => onToggle(c)} />
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
-                    <span className="font-semibold text-sm truncate">{c.name || '(unnamed)'}</span>
+                    <span className="font-semibold text-sm truncate">{c.name || t('udpp.unnamed')}</span>
                     <span className="text-[10px] uppercase tracking-wider text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
-                      {svc?.label ?? c.service_type}
+                      {svc ? t(svc.label) : c.service_type}
                     </span>
                   </div>
                   <div className="text-[11px] text-muted-foreground font-mono">
@@ -269,6 +268,7 @@ function EditDialog({
   onCancel: () => void;
   onSave: (c: UDPConfig) => void;
 }) {
+  const { t } = useI18n();
   const [draft, setDraft] = useState<UDPConfig>(cfg);
   // Service-type list filtered to this connection's direction.
   const services = SERVICE_TYPES.filter((s) => s.direction === draft.direction);
@@ -292,31 +292,34 @@ function EditDialog({
       <DialogContent className="max-w-xl">
         <DialogHeader>
           <DialogTitle>
-            {cfg.id === 0 ? 'New' : 'Edit'} {draft.direction} connection
+            {t('udpp.dialogTitle', {
+              action: cfg.id === 0 ? t('udpp.new') : t('udpp.edit'),
+              direction: draft.direction === 'inbound' ? t('udpp.directionInbound') : t('udpp.directionOutbound'),
+            })}
           </DialogTitle>
           <DialogDescription>
-            {currentService?.hint}
+            {currentService ? t(currentService.hint) : ''}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 px-5 py-4">
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t('udpp.name')}</Label>
             <Input
               autoFocus
-              placeholder={draft.direction === 'inbound' ? 'WSJT-X log' : 'Cloudlog notify'}
+              placeholder={draft.direction === 'inbound' ? t('udpp.namePhInbound') : t('udpp.namePhOutbound')}
               value={draft.name}
               onChange={(e) => setDraft((d) => ({ ...d, name: e.target.value }))}
             />
           </div>
 
           <div className="space-y-1">
-            <Label>Service type</Label>
+            <Label>{t('udpp.serviceType')}</Label>
             <Select value={draft.service_type} onValueChange={(v) => applyPreset(v as UDPConfig['service_type'])}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
                 {services.map((s) => (
-                  <SelectItem key={s.id} value={s.id}>{s.label}</SelectItem>
+                  <SelectItem key={s.id} value={s.id}>{t(s.label)}</SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -324,7 +327,7 @@ function EditDialog({
 
           <div className="grid grid-cols-[1fr_auto] gap-2 items-end">
             <div className="space-y-1">
-              <Label>Port</Label>
+              <Label>{t('udpp.port')}</Label>
               <Input
                 type="number"
                 min={1} max={65535}
@@ -341,13 +344,13 @@ function EditDialog({
                 checked={draft.multicast}
                 onCheckedChange={(c) => setDraft((d) => ({ ...d, multicast: !!c }))}
               />
-              <span>Multicast</span>
+              <span>{t('udpp.multicast')}</span>
             </label>
           </div>
 
           {draft.multicast && (
             <div className="space-y-1">
-              <Label>Multicast group</Label>
+              <Label>{t('udpp.multicastGroup')}</Label>
               <Input
                 className="font-mono"
                 placeholder="224.0.0.1"
@@ -355,14 +358,14 @@ function EditDialog({
                 onChange={(e) => setDraft((d) => ({ ...d, multicast_group: e.target.value }))}
               />
               <div className="text-[10px] text-muted-foreground">
-                Use the same group address as the sending app. WSJT-X default is 224.0.0.1.
+                {t('udpp.multicastHint')}
               </div>
             </div>
           )}
 
           {draft.direction === 'outbound' && (
             <div className="space-y-1">
-              <Label>Destination IP</Label>
+              <Label>{t('udpp.destinationIp')}</Label>
               <Input
                 className="font-mono"
                 placeholder="127.0.0.1"
@@ -377,17 +380,17 @@ function EditDialog({
               checked={draft.enabled}
               onCheckedChange={(c) => setDraft((d) => ({ ...d, enabled: !!c }))}
             />
-            <span>Enabled</span>
+            <span>{t('udpp.enabled')}</span>
           </label>
         </div>
 
         <DialogFooter>
-          <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+          <Button variant="ghost" onClick={onCancel}>{t('udpp.cancel')}</Button>
           <Button
             onClick={() => onSave(draft)}
             disabled={!draft.name.trim() || !draft.port}
           >
-            Save
+            {t('udpp.save')}
           </Button>
         </DialogFooter>
       </DialogContent>