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/collections/CollectionsPanel.tsx

@@ -1,13 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import { Image as ImageIcon } from 'lucide-react'
-import { useState } from 'react'
+import { Image as ImageIcon, Plus } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { imageUrl } from '@/features/admin/images/api'
 import { qk } from '@/shared/api/query-keys'
 import { useApiError } from '@/shared/lib/use-api-error'
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import { useCreateDialog } from '@/shared/lib/use-create-dialog'
+import { CreateNameDialog } from '@/shared/ui/create-name-dialog'
 import { toast } from '@/shared/ui/toast-store'
 import { sortRows, useTableSort } from '@/shared/lib/table-sort'
 import { SortHeader } from '@/shared/ui/sortable'
@@ -17,7 +17,7 @@ import { CollectionSuggestions } from './CollectionSuggestions'
 export function CollectionsPanel() {
   const { t } = useTranslation()
   const queryClient = useQueryClient()
-  const [name, setName] = useState('')
+  const create = useCreateDialog()
   const { sort, toggle } = useTableSort('name', false)
 
   const { data, isLoading } = useQuery({
@@ -29,9 +29,9 @@ export function CollectionsPanel() {
   const onError = useApiError()
 
   const createMutation = useMutation({
-    mutationFn: () => createCollection({ name: name.trim() }),
+    mutationFn: () => createCollection({ name: create.value.trim() }),
     onSuccess: () => {
-      setName('')
+      create.close()
       invalidate()
     },
     onError,
@@ -58,26 +58,18 @@ export function CollectionsPanel() {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-1">
-        <h2 className="crt-glow text-xl font-semibold">{t('admin.collections.title')}</h2>
-        <p className="text-sm text-muted-foreground">{t('admin.collections.hint')}</p>
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="flex flex-col gap-1">
+          <h2 className="crt-glow text-xl font-semibold">{t('admin.collections.title')}</h2>
+          <p className="text-sm text-muted-foreground">{t('admin.collections.hint')}</p>
+        </div>
+        <Button size="sm" onClick={create.show}>
+          <Plus className="h-4 w-4" />
+          {t('common.create')}
+        </Button>
       </div>
 
       <div className="flex flex-wrap items-center gap-2">
-        <Input
-          className="max-w-xs"
-          placeholder={t('admin.collections.name')}
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <Button
-          size="sm"
-          disabled={!name.trim() || createMutation.isPending}
-          onClick={() => createMutation.mutate()}
-        >
-          {t('common.create')}
-        </Button>
-
         {/* Постер коллекции — обложка её первой части: своей картинки у франшизы нет, а без
             обложки она теряется в списке одинаковых строк. */}
         <Button
@@ -166,6 +158,19 @@ export function CollectionsPanel() {
           </tbody>
         </table>
       </div>
+
+      {create.open && (
+        <CreateNameDialog
+          title={t('admin.collections.createTitle')}
+          label={t('admin.collections.name')}
+          description={t('admin.collections.hint')}
+          value={create.value}
+          onChange={create.setValue}
+          pending={createMutation.isPending}
+          onCreate={() => createMutation.mutate()}
+          onClose={create.close}
+        />
+      )}
     </div>
   )
 }