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/contexts/LocaleContext.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import type React from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import enMessages from "../messages/en.json";
 import esMessages from "../messages/es.json";
 import hiMessages from "../messages/hi.json";
 import ptMessages from "../messages/pt.json";
 import zhMessages from "../messages/zh.json";
+import { set } from "zod";
 
 type Locale = "en" | "es" | "pt" | "hi" | "zh";
 
@@ -49,14 +50,14 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
 	}, []);
 
 	// Update locale and persist to localStorage
-	const setLocale = (newLocale: Locale) => {
+	const setLocale = useCallback((newLocale: Locale) => {
 		setLocaleState(newLocale);
 		if (typeof window !== "undefined") {
 			localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
 			// Update HTML lang attribute
 			document.documentElement.lang = newLocale;
 		}
-	};
+	}, []);
 
 	// Set HTML lang attribute when locale changes
 	useEffect(() => {
@@ -65,8 +66,10 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
 		}
 	}, [locale, mounted]);
 
+	const contextValue = useMemo(() => ({ locale, messages, setLocale }), [locale, messages, setLocale]);
+
 	return (
-		<LocaleContext.Provider value={{ locale, messages, setLocale }}>
+		<LocaleContext.Provider value={contextValue}>
 			{children}
 		</LocaleContext.Provider>
 	);