Added react i18next.

admin/src/utils/AnimationFrameHook.ts

@@ -0,0 +1,29 @@
+import {useCallback, useEffect, useRef} from "react";
+
+type Args = any[]
+
+export const useAnimationFrame = <Fn extends (...args: Args)=>void>(
+    callback: Fn,
+    wait = 0
+): ((...args: Parameters<Fn>)=>void)=>{
+    const rafId = useRef(0)
+    const render = useCallback(
+        (...args: Parameters<Fn>)=>{
+            cancelAnimationFrame(rafId.current)
+            const timeStart = performance.now()
+
+            const renderFrame = (timeNow: number)=>{
+                if(timeNow-timeStart<wait){
+                    rafId.current = requestAnimationFrame(renderFrame)
+                    return
+                }
+                callback(...args)
+            }
+            rafId.current = requestAnimationFrame(renderFrame)
+        }, [callback, wait]
+    )
+
+
+    useEffect(()=>cancelAnimationFrame(rafId.current),[])
+    return render
+}

admin/src/utils/Toast.tsx

@@ -0,0 +1,26 @@
+import * as Toast from '@radix-ui/react-toast'
+import {useStore} from "../store/store.ts";
+import {useMemo} from "react";
+
+export const ToastDialog = ()=>{
+    const toastState = useStore(state => state.toastState)
+    const resultingClass = useMemo(()=> {
+        return toastState.success?'ToastRootSuccess':'ToastRootFailure'
+    },    [toastState.success])
+
+    console.log()
+    return <>
+        <Toast.Root className={"ToastRoot "+resultingClass} open={toastState && toastState.open} onOpenChange={()=>{
+          useStore.getState().setToastState({
+              ...toastState!,
+              open: !toastState?.open
+          })
+        }}>
+        <Toast.Title className="ToastTitle">{toastState.title}</Toast.Title>
+        <Toast.Description asChild>
+            {toastState.description}
+        </Toast.Description>
+    </Toast.Root>
+        <Toast.Viewport className="ToastViewport"/>
+    </>
+}

admin/src/utils/useDebounce.ts

@@ -0,0 +1,22 @@
+import {DependencyList, EffectCallback, useMemo, useRef} from "react";
+import {useAnimationFrame} from "./AnimationFrameHook";
+
+const defaultDeps: DependencyList = []
+
+export const useDebounce = (
+    fn:EffectCallback,
+    wait = 0,
+    deps = defaultDeps
+):void => {
+    const isFirstRender = useRef(true)
+    const render = useAnimationFrame(fn, wait)
+
+    useMemo(()=>{
+        if(isFirstRender.current){
+            isFirstRender.current = false
+            return
+        }
+
+        render()
+    }, deps)
+}