feat: 1)add font source 2)add validator in ListItem 3)settings page ui optiminize

app/components/Input/index.tsx

@@ -4,7 +4,6 @@ import {
   DetailedHTMLProps,
   InputHTMLAttributes,
   useContext,
-  useEffect,
   useLayoutEffect,
   useState,
 } from "react";
@@ -17,6 +16,7 @@ export interface CommonInputProps
   > {
   className?: string;
 }
+
 export interface NumberInputProps {
   onChange?: (v: number) => void;
   type?: "number";
@@ -49,12 +49,16 @@ export default function Input(props: CommonInputProps & InputProps) {
 
   const internalType = (show && "text") || type;
 
-  const { update } = useContext(List.ListContext);
+  const { update, handleValidate } = useContext(List.ListContext);
 
   useLayoutEffect(() => {
     update?.({ type: "input" });
   }, []);
 
+  useLayoutEffect(() => {
+    handleValidate?.(value);
+  }, [value]);
+
   return (
     <div
       className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}