Refactor admin panels to utilize CreateNameDialog for creating new entities

Updated the BumpersPanel, ChannelsPanel, CollectionsPanel, GroupsPanel, ClipGroupPanel, and ShowsPanel components to replace direct input fields with a CreateNameDialog for creating new items. This change enhances user experience by centralizing the creation process and improving UI consistency. Localization strings were also updated to reflect new dialog titles and labels in both English and Russian.

frontend/src/features/admin/interstitials/ClipGroupPanel.tsx

@@ -1,11 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
+import { Plus } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { addGroupElements, createGroup, listGroups } from '@/features/admin/groups/api'
 import { qk } from '@/shared/api/query-keys'
+import { useCreateDialog } from '@/shared/lib/use-create-dialog'
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import { CreateNameDialog } from '@/shared/ui/create-name-dialog'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
 import { cn } from '@/shared/lib/cn'
 import { readDragItem } from './dnd'
@@ -19,7 +21,7 @@ export function ClipGroupPanel({ onError }: Readonly<{ onError: (error: unknown)
   const { t } = useTranslation()
   const queryClient = useQueryClient()
   const [selected, setSelected] = useState('')
-  const [newName, setNewName] = useState('')
+  const create = useCreateDialog()
   const [over, setOver] = useState(false)
 
   const { data: groups } = useQuery({ queryKey: qk.groups.all, queryFn: listGroups })
@@ -28,9 +30,9 @@ export function ClipGroupPanel({ onError }: Readonly<{ onError: (error: unknown)
   }
 
   const createMutation = useMutation({
-    mutationFn: () => createGroup({ name: newName.trim() }),
+    mutationFn: () => createGroup({ name: create.value.trim() }),
     onSuccess: ({ id }) => {
-      setNewName('')
+      create.close()
       setSelected(id)
       invalidate()
     },
@@ -112,22 +114,22 @@ export function ClipGroupPanel({ onError }: Readonly<{ onError: (error: unknown)
         )}
       </div>
 
-      <div className="flex gap-2">
-        <Input
-          placeholder={t('admin.interstitials.newGroupName')}
-          value={newName}
-          maxLength={256}
-          onChange={(e) => setNewName(e.target.value)}
+      <Button size="sm" variant="outline" onClick={create.show}>
+        <Plus className="h-4 w-4" />
+        {t('common.create')}
+      </Button>
+
+      {create.open && (
+        <CreateNameDialog
+          title={t('admin.interstitials.createGroupTitle')}
+          label={t('admin.interstitials.newGroupName')}
+          value={create.value}
+          onChange={create.setValue}
+          pending={createMutation.isPending}
+          onCreate={() => createMutation.mutate()}
+          onClose={create.close}
         />
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={!newName.trim() || createMutation.isPending}
-          onClick={() => createMutation.mutate()}
-        >
-          {t('common.create')}
-        </Button>
-      </div>
+      )}
     </div>
   )
 }

frontend/src/features/admin/interstitials/InterstitialsPanel.tsx

@@ -277,7 +277,11 @@ export function InterstitialsPanel() {
           <DialogHeader>
             <DialogTitle>{preview?.name}</DialogTitle>
           </DialogHeader>
-          {preview?.mediaAssetId && <HlsVideo src={mediaPreviewUrl(preview.mediaAssetId)} />}
+          {/* Кнопка в списке — это «плей», а не «открыть карточку»: жать ещё раз внутри окна
+              незачем, ролик на тридцать секунд. */}
+          {preview?.mediaAssetId && (
+            <HlsVideo src={mediaPreviewUrl(preview.mediaAssetId)} autoPlay />
+          )}
         </DialogContent>
       </Dialog>
     </div>