[feature-136] making search of models work

src/renderer/components/models-management/models-grid.component.tsx

@@ -15,9 +15,11 @@ type Props = {
     className?: string,
     version?: BSVersion,
     type: MSModelType
+    search?: string,
+    active: boolean
 }
 
-export const ModelsGrid = forwardRef(({className, version, type}: Props, forwardRef) => {
+export const ModelsGrid = forwardRef(({className, version, type, search, active}: Props, forwardRef) => {
 
     const modelsManager = useConstant(() => ModelsManagerService.getInstance());
 
@@ -67,13 +69,40 @@ export const ModelsGrid = forwardRef(({className, version, type}: Props, forward
         modelsSelected$.next(prunedArray);
     }
 
+    const filtredModels = () => {
+        if(!active){ return models?.extra; }
+        
+        const lowerSearch = search?.toLowerCase();
+
+        return models?.extra?.filter(model => {
+            const findedInRawValues = Object.values(model).some(value => {
+                if(typeof value !== "string" && typeof value !== "number"){ return false; }
+                return value.toString().toLowerCase().includes(lowerSearch);
+            });
+
+            if(findedInRawValues) { return true; }
+
+            if(!model.model){ return false; }
+
+            return Object.values(model.model).some(value => {
+                if(typeof value !== "string" && typeof value !== "number" && !Array.isArray(value)){ return false; }
+
+                if(Array.isArray(value)){
+                    return value.some(v => v.toString().toLowerCase().includes(lowerSearch));
+                }
+
+                return value.toString().toLowerCase().includes(lowerSearch);
+            });
+        })
+    }
+
     return (
         <div ref={ref} className={`w-full h-full flex-shrink-0 ${className ?? ""}`}>
-            {isLoading && <>loading</>}
-            {!hasModels && <>no models</>}
+            {isLoading && <>loading</> /** TODO that **/}
+            {!hasModels && <>no models</> /** TODO that **/}
             {hasModels && !isLoading && (
                 <ul className="flex flex-wrap shrink-0 justify-start content-start w-full h-full overflow-y-scroll overflow-x-hidden p-4 gap-4 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
-                    {models.extra.map(localModel => (
+                    {filtredModels().map(localModel => (
                         <ModelItem 
                             key={localModel.model?.hash ?? localModel.hash}
                             hash={localModel.model?.hash ?? localModel.hash}

src/renderer/components/models-management/models-panel.component.tsx

@@ -13,6 +13,7 @@ export function ModelsPanel({version}: {version?: BSVersion}) {
     const modelsManager = useConstant(() => ModelsManagerService.getInstance());
     const [avatarsRef, sabersRef, platformsRef, bloqsRef] = [useRef(null), useRef(null), useRef(null), useRef(null)];
     const [modelTypeTab, setModelTypeTab] = useState<ModelTabType>(ModelTabType.Avatars);
+    const [search, setSearch] = useState<string>("");
 
     console.log(modelTypeTab);
 
@@ -49,7 +50,7 @@ export function ModelsPanel({version}: {version?: BSVersion}) {
         <div className="w-full h-full flex flex-col items-center justify-center">
             <div className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 mb-3 text-main-color-1 dark:text-white">
                 <div className="h-full rounded-full bg-light-main-color-2 dark:bg-main-color-2 grow p-[6px]">
-                    <input type="text" className="h-full w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2" placeholder={"TODO TRANSLATE"}  tabIndex={-1}/>
+                    <input type="text" className="h-full w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2" placeholder={"TODO TRANSLATE"} onChange={e => setSearch(e.target.value)}  tabIndex={-1}/>
                 </div>
                 <BsmDropdownButton items={threeDotsItems} className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} menuTranslationY="6px" align="center"/>
             </div>
@@ -57,10 +58,10 @@ export function ModelsPanel({version}: {version?: BSVersion}) {
                 <ModelsTabsNavbar className="flex-shrink-0" version={version} tabIndex={modelTypeTab} onTabChange={setModelTypeTab}/>
                 
                 <div className="flex-grow h-full flex flex-col transition-all duration-300" style={{translate: `0 ${0 - modelTypeTab * 100}%`}}>
-                    <ModelsGrid ref={avatarsRef} version={version} type={MSModelType.Avatar}/>
-                    <ModelsGrid ref={sabersRef} version={version} type={MSModelType.Saber}/>
-                    <ModelsGrid ref={platformsRef} version={version} type={MSModelType.Platfrom}/>
-                    <ModelsGrid ref={bloqsRef} version={version} type={MSModelType.Bloq}/>
+                    <ModelsGrid ref={avatarsRef} version={version} type={MSModelType.Avatar} active={modelTypeTab === ModelTabType.Avatars} search={search}/>
+                    <ModelsGrid ref={sabersRef} version={version} type={MSModelType.Saber} active={modelTypeTab === ModelTabType.Sabers} search={search}/>
+                    <ModelsGrid ref={platformsRef} version={version} type={MSModelType.Platfrom} active={modelTypeTab === ModelTabType.Platforms} search={search}/>
+                    <ModelsGrid ref={bloqsRef} version={version} type={MSModelType.Bloq} active={modelTypeTab === ModelTabType.Bloqs} search={search}/>
                 </div>
             </div>
         </div>