diff --git a/src/components/Assets.jsx b/src/components/Assets.jsx index 87d562f..a0a76a9 100644 --- a/src/components/Assets.jsx +++ b/src/components/Assets.jsx @@ -140,6 +140,22 @@ const Assets = () => { }); }; + const removeFileHandler = index => { + const file = files[index]; + const answer = confirm(`Are you sure you want to delete "${file.name}"?`); + if (!answer) return; + const fileRef = storageRef.child(file.name); + fileRef + .delete() + .then(() => { + alertsService.add('File deleted successfully'); + setFiles(files.filter((_, i) => i !== index)); + }) + .catch(error => { + console.error('File delete error:', error); + }); + }; + if (!window.user?.isPro) { return ( @@ -235,19 +251,52 @@ const Assets = () => { }`} > {filteredFiles.map((file, index) => ( - + + + + {file.name} {/* */} - + ))} diff --git a/src/style.css b/src/style.css index a5463c8..1d10f23 100644 --- a/src/style.css +++ b/src/style.css @@ -2142,6 +2142,24 @@ while the theme CSS file is loading */ width: 100%; height: auto; } +.asset-manager__file-actions { + position: absolute; + bottom: 0; + left: 0; + right: 0; + opacity: 0; + padding: 0.5rem 0; + visibility: hidden; + transform: translateY(-0.5rem); + transition: 0.3s ease; + background-color: rgb(255 255 255 / 15%); + backdrop-filter: blur(5px); +} +.asset-manager__file:hover .asset-manager__file-actions { + transform: translateY(0rem); + opacity: 1; + visibility: visible; +} .stack { display: flex; align-items: center;