From f640af1fc46b8cecd22de9baf81a8478faaa2909 Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Sat, 25 Jul 2026 12:55:40 +0300
Subject: [PATCH] Enhance BumperTemplateEditor UI: add collapsible
 functionality for template details, improve user interaction with
 click-to-toggle feature, and ensure delete action does not trigger unintended
 collapses. Update state management for better control of template visibility.

---
 .../features/admin/channels/ChannelDetail.tsx  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/admin/channels/ChannelDetail.tsx b/frontend/src/features/admin/channels/ChannelDetail.tsx
index 4391467..c106f2e 100644
--- a/frontend/src/features/admin/channels/ChannelDetail.tsx
+++ b/frontend/src/features/admin/channels/ChannelDetail.tsx
@@ -556,6 +556,7 @@ function BumperTemplateEditor({
   onError: (e: unknown) => void
 }) {
   const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
   const [name, setName] = useState(template.name)
   const [colors, setColors] = useState({
     backgroundColor: template.backgroundColor,
@@ -598,8 +599,14 @@ function BumperTemplateEditor({
 
   return (
     <div className="flex flex-col gap-3 rounded-md border border-border bg-muted/30 p-4">
-      <div className="flex items-center justify-between gap-2">
+      <div
+        className="flex cursor-pointer items-center justify-between gap-2"
+        onClick={() => setOpen((o) => !o)}
+      >
         <div className="flex flex-wrap items-center gap-2">
+          <ChevronDown
+            className={`h-4 w-4 shrink-0 text-muted-foreground transition-transform ${open ? 'rotate-180' : ''}`}
+          />
           <span className="text-sm font-medium">{template.name}</span>
           {template.isDefault && <Badge variant="muted">{t('admin.channels.bumperDefault')}</Badge>}
           <span className="text-xs text-muted-foreground">
@@ -613,13 +620,18 @@ function BumperTemplateEditor({
             size="sm"
             variant="destructive"
             disabled={remove.isPending}
-            onClick={() => remove.mutate()}
+            onClick={(e) => {
+              e.stopPropagation()
+              remove.mutate()
+            }}
           >
             {t('common.delete')}
           </Button>
         )}
       </div>
 
+      {open && (
+        <>
       <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         <div className="flex flex-col gap-1.5">
           <Label>{t('admin.channels.bumperTemplateName')}</Label>
@@ -674,6 +686,8 @@ function BumperTemplateEditor({
           {t('common.save')}
         </Button>
       </div>
+        </>
+      )}
     </div>
   )
 }