perf: optimize ui components with react hooks memoization

- toggle-group.tsx: Wrap contextValue in useMemo to prevent unnecessary re-renders
- animated-tabs.tsx: Hoist constants and memoize handlers with useCallback/useMemo
- LocaleContext.tsx: Wrap setLocale in useCallback and contextValue in useMemo
- plate-editor.tsx: Memoize SaveShortcutPlugin and contextProviderValue, use useRef for stable references

surfsense_web/components/ui/toggle-group.tsx

@@ -5,6 +5,7 @@ import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { toggleVariants } from "@/components/ui/toggle";
 import { cn } from "@/lib/utils";
+import { useMemo } from "react";
 
 const ToggleGroupContext = React.createContext<
 	VariantProps<typeof toggleVariants> & {
@@ -27,6 +28,8 @@ function ToggleGroup({
 	VariantProps<typeof toggleVariants> & {
 		spacing?: number;
 	}) {
+	const contextValue = useMemo(() => ({variant, size, spacing }), [variant, size, spacing]);
+	
 	return (
 		<ToggleGroupPrimitive.Root
 			data-slot="toggle-group"
@@ -40,7 +43,7 @@ function ToggleGroup({
 			)}
 			{...props}
 		>
-			<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+			<ToggleGroupContext.Provider value={contextValue}>
 				{children}
 			</ToggleGroupContext.Provider>
 		</ToggleGroupPrimitive.Root>