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/groups/GroupsPanel.tsx

@@ -1,11 +1,14 @@
 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 { qk } from '@/shared/api/query-keys'
 import { useApiError } from '@/shared/lib/use-api-error'
 import { Badge } from '@/shared/ui/badge'
 import { Button } from '@/shared/ui/button'
+import { useCreateDialog } from '@/shared/lib/use-create-dialog'
+import { CreateNameDialog } from '@/shared/ui/create-name-dialog'
 import { Input } from '@/shared/ui/input'
 import { sortRows, useTableSort } from '@/shared/lib/table-sort'
 import { SortHeader } from '@/shared/ui/sortable'
@@ -16,7 +19,7 @@ import { GroupSuggestions } from './GroupSuggestions'
 export function GroupsPanel() {
   const { t } = useTranslation()
   const queryClient = useQueryClient()
-  const [name, setName] = useState('')
+  const create = useCreateDialog()
   const [query, setQuery] = useState('')
   const { sort, toggle } = useTableSort('name', false)
 
@@ -26,9 +29,9 @@ export function GroupsPanel() {
   const onError = useApiError()
 
   const createMutation = useMutation({
-    mutationFn: () => createGroup({ name: name.trim() }),
+    mutationFn: () => createGroup({ name: create.value.trim() }),
     onSuccess: () => {
-      setName('')
+      create.close()
       invalidate()
     },
     onError,
@@ -48,23 +51,13 @@ export function GroupsPanel() {
 
   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.groups.title')}</h2>
-        <p className="text-sm text-muted-foreground">{t('admin.groups.hint')}</p>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-2">
-        <Input
-          className="max-w-xs"
-          placeholder={t('admin.groups.name')}
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <Button
-          size="sm"
-          disabled={!name.trim() || createMutation.isPending}
-          onClick={() => createMutation.mutate()}
-        >
+      <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.groups.title')}</h2>
+          <p className="text-sm text-muted-foreground">{t('admin.groups.hint')}</p>
+        </div>
+        <Button size="sm" onClick={create.show}>
+          <Plus className="h-4 w-4" />
           {t('common.create')}
         </Button>
       </div>
@@ -156,6 +149,19 @@ export function GroupsPanel() {
           </tbody>
         </table>
       </div>
+
+      {create.open && (
+        <CreateNameDialog
+          title={t('admin.groups.createTitle')}
+          label={t('admin.groups.name')}
+          description={t('admin.groups.hint')}
+          value={create.value}
+          onChange={create.setValue}
+          pending={createMutation.isPending}
+          onCreate={() => createMutation.mutate()}
+          onClose={create.close}
+        />
+      )}
     </div>
   )
 }