feat: Enhance duplication and movement controls with axis constraints and snapping functionality

- Added axis constraint toggling for duplication and movement controls (X and Z axes).
- Implemented snapping functionality for asset positioning based on modifier keys (Ctrl, Shift).
- Created utility functions for handling asset position and rotation snapping.
- Refactored moveControls3D and rotateControls3D to utilize new snapping functions.
- Introduced state management for key events and axis constraints.
- Updated styles for new UI components related to asset filtering and transformation.
- Removed deprecated snapControls utility function.

app/src/styles/layout/sidebar.scss

@@ -468,6 +468,96 @@
             position: relative;
             width: 304px;
 
+            .decal-transformation-container {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                .transformation-wrapper {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 6px 12px;
+
+                    .header {
+                        flex: 1;
+                        text-transform: capitalize;
+                    }
+
+                    .input-wrapppers {
+                        display: flex;
+                        align-items: center;
+                        gap: 6px;
+                        flex: 1.5;
+
+                        svg {
+                            stroke: #CCACFF;
+                        }
+
+                        .icon {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
+
+                        input {
+                            min-width: 43px;
+                        }
+                    }
+
+                    .layers {
+                        display: flex;
+                        gap: 6px;
+                        align-items: center;
+
+                        .icon {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            outline: 1px solid var(--border-color);
+                            padding: 4px 16px;
+                            width: 50px;
+                            border-radius: 100px;
+                        }
+                    }
+                }
+
+                .opacity {
+                    input {
+                        min-width: 190px !important;
+                    }
+                }
+
+                .preview {
+                    width: 100%;
+                    height: 150px;
+                    border-radius: 20px;
+                    outline: 1px solid var(--border-color);
+                    position: relative;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: contain;
+                    }
+
+                    .replace-btn {
+                        background-color: #6F42C1;
+                        border-radius: 100px;
+                        color: #FFFFFF;
+                        padding: 4px 16px;
+                        width: fit-content;
+                        cursor: pointer;
+                        font-size: 12px;
+                        text-transform: capitalize;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                }
+            }
+
             .version-history-container {
                 max-height: calc(62vh - 12px);
                 display: flex;
@@ -1978,6 +2068,43 @@
             }
         }
 
+        .catogory-asset-filter {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            border: 1px solid #564B69;
+            padding: 12px 10px;
+            border-radius: 15px;
+
+            .catogory-asset-filter-wrapper {
+                display: flex;
+                align-items: center;
+                gap: 2px;
+                border: 1px solid #564B69;
+                padding: 4px 8px;
+                border-radius: 100px;
+                cursor: pointer;
+
+                .sub-catagory {
+                    display: flex;
+                }
+
+                &.active {
+                    background-color: #6F42C1;
+
+                    .sub-catagory {
+
+                        color: #FFFFFF;
+                    }
+
+                    // svg {
+                    //     stroke: white;
+                    //     fill: white;
+                    // }
+                }
+            }
+        }
+
         .assets-container {
             width: 100%;
             display: flex;