feat[frontend](incidents): added custom assignation and expanded details drawer width

Author: AlexSanchez-bit

frontend/src/features/incidents/components/incident-assignee.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Check, ChevronDown, Loader2, UserCircle2, X } from 'lucide-react'
+import { Check, ChevronDown, Loader2, Plus, UserCircle2, X } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useIncidentAssignment } from '../hooks/use-incident-assignment'
 import type { Incident } from '../types/incident.types'
@@ -30,13 +30,22 @@ export function IncidentAssigneePicker({
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [q, setQ] = useState('')
+  const [custom, setCustom] = useState('')
   const ref = useRef<HTMLDivElement>(null)
   const current = incident.incidentAssignedTo
   const { users, busy, assign } = useIncidentAssignment(incident.id, open, () => {
     setOpen(false)
     onChanged()
   })
 
+  const customTrimmed = custom.trim()
+  const canAssignCustom = customTrimmed.length > 0 && customTrimmed !== current
+  const assignCustom = () => {
+    if (!canAssignCustom) return
+    void assign(customTrimmed)
+    setCustom('')
+  }
+
   useEffect(() => {
     if (!open) return
     const onDoc = (e: MouseEvent) => ref.current && !ref.current.contains(e.target as Node) && setOpen(false)
@@ -95,6 +104,28 @@ export function IncidentAssigneePicker({
               </button>
             ))}
           </div>
+          <div className="mt-1 border-t border-border px-3 pb-2 pt-2">
+            <div className="mb-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('incidents.assign.custom')}
+            </div>
+            <div className="flex items-center gap-1.5">
+              <input
+                value={custom}
+                onChange={(e) => setCustom(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && assignCustom()}
+                placeholder={t('incidents.assign.customPlaceholder')}
+                className="h-7 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-xs focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              />
+              <button
+                onClick={assignCustom}
+                disabled={!canAssignCustom || busy}
+                title={t('incidents.assign.custom')}
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground disabled:opacity-40"
+              >
+                <Plus size={14} />
+              </button>
+            </div>
+          </div>
         </div>
       )}
     </div>

frontend/src/features/incidents/components/incident-drawer.tsx

@@ -33,7 +33,7 @@ export function IncidentDrawer({
   return (
     <div className="fixed inset-0 z-50 flex items-stretch justify-end bg-black/40 backdrop-blur-sm" onClick={onClose}>
       <div
-        className="flex w-full max-w-[760px] flex-col overflow-hidden border-l border-border bg-card shadow-xl"
+        className="flex w-full max-w-[46em] flex-col overflow-hidden border-l border-border bg-card shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         <header className="border-b border-border px-6 py-4">

frontend/src/shared/i18n/locales/de.json

@@ -4132,7 +4132,9 @@
       "noUsers": "Keine Benutzer",
       "assigned": "Zugewiesen an {{user}}",
       "unassigned": "Zuweisung aufgehoben",
-      "error": "Zuweisung konnte nicht geändert werden"
+      "error": "Zuweisung konnte nicht geändert werden",
+      "custom": "Benutzerdefiniert zuweisen",
+      "customPlaceholder": "Login eingeben…"
     }
   },
   "alertingRules": {

frontend/src/shared/i18n/locales/en.json

@@ -4489,7 +4489,9 @@
       "noUsers": "No users",
       "assigned": "Assigned to {{user}}",
       "unassigned": "Incident unassigned",
-      "error": "Could not change the assignee"
+      "error": "Could not change the assignee",
+      "custom": "Assign custom",
+      "customPlaceholder": "Type a login…"
     }
   },
   "parsingFilters": {

frontend/src/shared/i18n/locales/es.json

@@ -4241,7 +4241,9 @@
       "noUsers": "Sin usuarios",
       "assigned": "Asignado a {{user}}",
       "unassigned": "Incidente sin asignar",
-      "error": "No se pudo cambiar el asignado"
+      "error": "No se pudo cambiar el asignado",
+      "custom": "Asignar personalizado",
+      "customPlaceholder": "Escribe un usuario…"
     }
   },
   "parsingFilters": {

frontend/src/shared/i18n/locales/fr.json

@@ -4132,7 +4132,9 @@
       "noUsers": "Aucun utilisateur",
       "assigned": "Assigné à {{user}}",
       "unassigned": "Incident désassigné",
-      "error": "Impossible de changer l’assigné"
+      "error": "Impossible de changer l’assigné",
+      "custom": "Assigner personnalisé",
+      "customPlaceholder": "Saisir un identifiant…"
     }
   },
   "alertingRules": {

frontend/src/shared/i18n/locales/it.json

@@ -4132,7 +4132,9 @@
       "noUsers": "Nessun utente",
       "assigned": "Assegnato a {{user}}",
       "unassigned": "Incidente non assegnato",
-      "error": "Impossibile cambiare l’assegnatario"
+      "error": "Impossibile cambiare l’assegnatario",
+      "custom": "Assegna personalizzato",
+      "customPlaceholder": "Inserisci un login…"
     }
   },
   "alertingRules": {

frontend/src/shared/i18n/locales/pt.json

@@ -4241,7 +4241,9 @@
       "noUsers": "Sem usuários",
       "assigned": "Atribuído a {{user}}",
       "unassigned": "Incidente sem atribuição",
-      "error": "Não foi possível alterar o responsável"
+      "error": "Não foi possível alterar o responsável",
+      "custom": "Atribuir personalizado",
+      "customPlaceholder": "Digite um login…"
     }
   },
   "parsingFilters": {

frontend/src/shared/i18n/locales/ru.json

@@ -3942,7 +3942,9 @@
       "noUsers": "Нет пользователей",
       "assigned": "Назначено {{user}}",
       "unassigned": "Назначение снято",
-      "error": "Не удалось изменить ответственного"
+      "error": "Не удалось изменить ответственного",
+      "custom": "Назначить произвольно",
+      "customPlaceholder": "Введите логин…"
     }
   },
   "alertingRules": {