Merge remote-tracking branch 'origin/main-demo' into decal-list

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

@@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import { getCategoryAsset } from "../../../services/factoryBuilder/asset/assets/getCategoryAsset";
 import { fetchAssets } from "../../../services/marketplace/fetchAssets";
-import { useDecalStore, useSelectedItem } from "../../../store/builder/store";
+import {
+  useDecalStore,
+  useDroppedDecal,
+  useSelectedItem,
+} from "../../../store/builder/store";
 
 // images -------------------
 import vehicle from "../../../assets/image/categories/vehicles.png";
@@ -17,11 +21,11 @@ import decal from "../../../assets/image/categories/decal.png";
 import SkeletonUI from "../../templates/SkeletonUI";
 import {
   AlertIcon,
+  ArrowIcon,
   DecalInfoIcon,
   HangTagIcon,
   NavigationIcon,
 } from "../../icons/ExportCommonIcons";
-import { assert } from "console";
 import { getCategoryDecals } from "../../../services/factoryBuilder/asset/decals/getCategoryDecals";
 // -------------------------------------
 
@@ -46,6 +50,7 @@ interface CategoryListProp {
 }
 const Assets: React.FC = () => {
   const { setSelectedItem } = useSelectedItem();
+  const { setDroppedDecal } = useDroppedDecal();
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
@@ -146,7 +151,12 @@ const Assets: React.FC = () => {
       echo.error("failed to fetch assets");
       setisLoading(false);
     }
+
+    if (asset === "Decals") {
+      fetchCategoryDecals("Safety");
+    }
   };
+
   const fetchCategoryDecals = async (asset: any) => {
     setisLoading(true);
     // setSelectedCategory(asset);
@@ -185,7 +195,10 @@ const Assets: React.FC = () => {
                 <div className="assets-result">
                   <div className="assets-wrapper">
                     <div className="searched-content">
-                      <p>Results for {searchValue}</p>
+                      <p>
+                        Results for{" "}
+                        <span className="search-for">'{searchValue}'</span>
+                      </p>
                     </div>
                     <div className="assets-container">
                       {selectedCategory == "Decals" ? (
@@ -291,7 +304,7 @@ const Assets: React.FC = () => {
             if (selectedCategory) {
               return (
                 <div className="assets-wrapper">
-                  <h2>
+                  <h2 className="header">
                     {selectedCategory}
                     <button
                       className="back-button"
@@ -302,7 +315,10 @@ const Assets: React.FC = () => {
                         setCategoryAssets([]);
                       }}
                     >
-                      ← Back
+                      <div className="back-arrow">
+                        <ArrowIcon />
+                      </div>
+                      Back
                     </button>
                   </h2>
 
@@ -327,7 +343,6 @@ const Assets: React.FC = () => {
                       </div>
                     </>
                   )}
-
                   {selectedCategory !== "Decals" && !selectedSubCategory ? (
                     <div className="assets-container">
                       {categoryAssets?.map((asset: any, index: number) => (
@@ -386,15 +401,11 @@ const Assets: React.FC = () => {
                             alt={asset.decalName}
                             className="asset-image"
                             onPointerDown={() => {
-                              setSelectedItem({
-                                name: asset.decalName,
-                                id: asset.id,
-                                type:
-                                  asset.type === "undefined"
-                                    ? undefined
-                                    : asset.type,
+                              setDroppedDecal({
                                 category: asset.category,
-                                // subType: asset.subType,
+                                decalName: asset.decalName,
+                                decalImage: asset.decalImage,
+                                decalId: asset.id,
                               });
                             }}
                           />
@@ -423,7 +434,7 @@ const Assets: React.FC = () => {
 
             return (
               <div className="assets-wrapper">
-                <h2>Categories</h2>
+                <h2 className="categories-header">Categories</h2>
                 <div className="categories-container">
                   {Array.from(
                     new Set(categoryList.map((asset) => asset.category))