Refactor components to enhance code clarity and maintainability by updating prop types to use Readonly for better immutability. Adjust Result class methods for consistency, and streamline query functions in ChannelDetail and other components to improve performance and readability.

frontend/src/shared/ui/ToastProvider.tsx

@@ -8,7 +8,7 @@ import {
 
 let nextId = 1
 
-export function ToastProvider({ children }: { children: ReactNode }) {
+export function ToastProvider({ children }: Readonly<{ children: ReactNode }>) {
   const [toasts, setToasts] = useState<ToastItem[]>([])
 
   const push = useCallback((message: string, variant: ToastVariant) => {

frontend/src/shared/ui/badge.tsx

@@ -18,6 +18,6 @@ const badgeVariants = cva(
 
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>
 
-export function Badge({ className, variant, ...props }: BadgeProps) {
+export function Badge({ className, variant, ...props }: Readonly<BadgeProps>) {
   return <span className={cn(badgeVariants({ variant }), className)} {...props} />
 }

frontend/src/shared/ui/hls-video.tsx

@@ -7,7 +7,7 @@ import { cn } from '@/shared/lib/cn'
  * Мини-плеер HLS для админки: плейлист и сегменты лежат под admin-роутами (JWT), поэтому запросы
  * идут через hls.js с Bearer-заголовком. Нативный путь (Safari) — только там, где hls.js не нужен.
  */
-export function HlsVideo({ src, className }: { src: string; className?: string }) {
+export function HlsVideo({ src, className }: Readonly<{ src: string; className?: string }>) {
   const videoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {

frontend/src/shared/ui/pager.tsx

@@ -6,11 +6,11 @@ export function Pager({
   page,
   totalPages,
   onChange,
-}: {
+}: Readonly<{
   page: number
   totalPages: number
   onChange: (page: number) => void
-}) {
+}>) {
   const { t } = useTranslation()
   if (totalPages <= 1) return null
 

frontend/src/shared/ui/sortable.tsx

@@ -9,13 +9,13 @@ export function SortHeader({
   sort,
   onToggle,
   className,
-}: {
+}: Readonly<{
   label: string
   sortKey: string
   sort: SortState
   onToggle: (key: string) => void
   className?: string
-}) {
+}>) {
   const active = sort.key === sortKey
   const direction = sort.desc ? 'descending' : 'ascending'
   let Icon = ChevronsUpDown

frontend/src/shared/ui/toaster.tsx

@@ -21,12 +21,12 @@ function ToastItem({
   message,
   variant,
   onDismiss,
-}: {
+}: Readonly<{
   id: number
   message: string
   variant: 'default' | 'success' | 'error'
   onDismiss: (id: number) => void
-}) {
+}>) {
   const { t } = useTranslation()
 
   useEffect(() => {