store optimization

app/src/components/layout/sidebarLeft/assetList/Assets.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { useDecalStore } from "../../../../store/builder/store";
 import { getFilteredAssets } from "./assetsHelpers/filteredAssetsHelper";
 import { fetchCategoryDecals } from "./assetsHelpers/fetchDecalsHelper";
+import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 import {
   fetchAllAssets,
   fetchCategoryAssets,
@@ -16,7 +16,7 @@ import {
 import { ArrowIcon } from "../../../icons/ExportCommonIcons";
 
 const Assets: React.FC = () => {
-  const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
+  const { selectedDecalCategory, setSelectedDecalCategory } = useBuilderStore();
   const [searchValue, setSearchValue] = useState<string | null>(null);
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [assets, setAssets] = useState<AssetProp[] | DecalProp[]>([]);
@@ -31,9 +31,9 @@ const Assets: React.FC = () => {
         assets,
         searchValue,
         selectedCategory,
-        selectedSubCategory,
+        selectedDecalCategory,
       }),
-    [assets, searchValue, selectedCategory, selectedSubCategory]
+    [assets, searchValue, selectedCategory, selectedDecalCategory]
   );
 
   const handleFetchCategory = useCallback(
@@ -43,14 +43,14 @@ const Assets: React.FC = () => {
       if (category === "Decals") {
         const res = await fetchCategoryDecals("Safety");
         setAssets(res);
-        setSelectedSubCategory("Safety");
+        setSelectedDecalCategory("Safety");
       } else {
         const res = await fetchCategoryAssets(category);
         setAssets(res);
       }
       setIsLoading(false);
     },
-    [setSelectedSubCategory]
+    [setSelectedDecalCategory]
   );
 
   const fetchGlobalSearch = useCallback(async (term: string) => {
@@ -90,7 +90,7 @@ const Assets: React.FC = () => {
                       className="back-button"
                       onClick={() => {
                         setSelectedCategory(null);
-                        setSelectedSubCategory(null);
+                        setSelectedDecalCategory(null);
                         setAssets([]);
                         setSearchValue(null);
                       }}
@@ -106,14 +106,13 @@ const Assets: React.FC = () => {
                       {ACTIVE_DECAL_SUBCATEGORIES.map((cat) => (
                         <div
                           key={cat.name}
-                          className={`catogory-asset-filter-wrapper ${
-                            selectedSubCategory === cat.name ? "active" : ""
-                          }`}
+                          className={`catogory-asset-filter-wrapper ${selectedDecalCategory === cat.name ? "active" : ""
+                            }`}
                           onClick={async () => {
                             setIsLoading(true);
                             const res = await fetchCategoryDecals(cat.name);
                             setAssets(res);
-                            setSelectedSubCategory(cat.name);
+                            setSelectedDecalCategory(cat.name);
                             setIsLoading(false);
                           }}
                         >

app/src/components/layout/sidebarLeft/assetList/assetsHelpers/filteredAssetsHelper.ts

@@ -2,19 +2,19 @@ interface FilterProps {
   assets: AssetProp[] | DecalProp[];
   searchValue: string | null;
   selectedCategory: string | null;
-  selectedSubCategory: string | null;
+  selectedDecalCategory: string | null;
 }
 
 export const getFilteredAssets = ({
   assets,
   searchValue,
   selectedCategory,
-  selectedSubCategory,
+  selectedDecalCategory,
 }: FilterProps) => {
   const term = searchValue?.trim().toLowerCase();
   if (!term) return assets;
 
-  if (selectedCategory === "Decals" || selectedSubCategory) {
+  if (selectedCategory === "Decals" || selectedDecalCategory) {
     return (assets as DecalProp[]).filter((a) =>
       a.decalName?.toLowerCase().includes(term)
     );

app/src/components/layout/sidebarLeft/assetList/assetsHelpers/renderAssetHelper.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { useDroppedDecal, useSelectedItem } from "../../../../../store/builder/store";
+import { useSelectedItem } from "../../../../../store/builder/store";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
 
 export const RenderAsset: React.FC<{ asset: AssetProp | DecalProp; index: number }> = ({ asset, index }) => {
   const { setSelectedItem } = useSelectedItem();
-  const { setDroppedDecal } = useDroppedDecal();
+  const { setDroppedDecal } = useBuilderStore();
 
   if ("decalName" in asset) {
     return (