update AddonListing banner styles and functionality

src/core/builtins/addon-manager/styles/listing/_index.scss

@@ -3,37 +3,20 @@
 @forward 'screenshots';
 
 .vz-addon-listing {
-  height: 5000px;
-  &-banner-background {
-    width: calc(100% + var(--vz-dashboard-layout-padding-horizontal) * 2);
-    height: 500px;
-    position: relative;
-    top: calc(var(--vz-dashboard-layout-padding-vertical) * -1);
-    left: calc(var(--vz-dashboard-layout-padding-horizontal) * -1);
-    background-image: url('/assets/d03d90cb6f12a7ea06274b278dfa4160.svg');
+  &-banner {
+    height: 300px;
+    background-image: var(--addon-banner);
     background-repeat: no-repeat;
     background-size: cover;
-    background-attachment: fixed;
-    mask-image: linear-gradient(to top, transparent 0%, #000 70%);
-    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 70%);
     background-position: center;
     flex: 0 0 auto;
-    transition: opacity 0.5s, transform 0.5s;
-    [vz-theme='light'] & {
-      background-image: url('/assets/7b6ed225050df29a07cb5db712d35a73.svg');
-    }
-    &[vz-hidden] {
-      opacity: 0;
-      transform: scale(1.2);
-    }
+    border-radius: 8px;
+    margin-bottom: 20px;
   }
   &-top-card {
     background: var(--background-tertiary);
     height: 200px;
-    box-sizing: border-box;
     border-radius: 8px;
-    position: relative;
-    margin-top: -80px;
     margin-bottom: 20px;
     flex: 0 0 auto;
   }

src/core/modules/components/addon/AddonListing.jsx

@@ -38,7 +38,6 @@ const AddonScreenshots = memo(({ addon }) => {
 
 export default memo(({ addonId, type, section }) => {
   const { path, url } = useRouteMatch();
-  const [ hideBanner, setHideBanner ] = useState(false);
   type = type || (/(\/plugin\/)/).test(path) ? 'plugin' : (/(\/theme\/)/).test(path) ? 'theme' : 'plugin';
   addonId = addonId || url?.replace(`/vizality/${type}/`, '').split('/')[0];
   section = section || url?.replace(`/vizality/${type}/${addonId}/`, '') || 'overview';
@@ -50,44 +49,21 @@ export default memo(({ addonId, type, section }) => {
   const isInstalled = vizality.manager[toPlural(type)].isInstalled(addonId);
   const hasScreenshots = vizality.manager[toPlural(type)].hasScreenshots(addonId);
   const AddonSettings = hasSettings && addon?.sections?.settings?.render;
+
+  /**
+   * 
+   */
   if (!addon) {
     addon = vizality.manager.community[toPlural(type)].get(addonId);
   }
+
+  /**
+   * 
+   */
   if (!addon) {
     return;
   }
 
-  useEffect(() => {
-    const scroller = document.querySelector('.vz-dashboard-scroller');
-    let lastScrollTop = 0;
-    const onScroll = evt => {
-      evt?.persist?.();
-      evt?.preventDefault();
-      scroller.removeEventListener('scroll', onScroll);
-
-      const topOfElement = document.querySelector('#vz-addon-listing-top-card')?.offsetTop;
-      const down = Boolean(scroller.scrollTop > lastScrollTop);
-      /**
-       * On down scroll and above the top-card.
-       */
-      if (scroller.scrollTop < (topOfElement - 30) && down) {
-        scroller.scroll({ top: topOfElement - 30, behavior: 'smooth' });
-        setHideBanner(true);
-      /**
-       * On down scroll and above the top-card.
-       */
-      } else if (scroller.scrollTop <= topOfElement && !down) {
-        setHideBanner(false);
-        scroller.scroll({ top: 0, behavior: 'smooth' });
-      }
-      setTimeout(() => {
-        lastScrollTop = scroller?.scrollTop <= 0 ? 0 : scroller?.scrollTop;
-        scroller.addEventListener('scroll', onScroll);
-      }, 500);
-    };
-    scroller.addEventListener('scroll', onScroll);
-  }, []);
-
   const scrollToTop = () => {
     const scroller = document.querySelector('.vz-dashboard-scroller');
     if (scroller) {
@@ -97,8 +73,10 @@ export default memo(({ addonId, type, section }) => {
 
   return (
     <div className='vz-addon-listing'>
-      <div className='vz-addon-listing-banner-background' vz-hidden={Boolean(hideBanner) && ''} />
-      <div className='vz-addon-listing-top-card' id="vz-addon-listing-top-card" />
+      {addon.manifest?.banner && (
+        <div className='vz-addon-listing-banner-background' style={{ '--addon-banner': addon.manifest.banner }} />
+      )}
+      <div className='vz-addon-listing-top-card' />
       <StickyElement wrapperClassName='vz-addon-listing-sticky-bar-wrapper' className='vz-addon-listing-sticky-bar'>
         <__TabBar type={__TabBar.Types.TOP_PILL}>
           <__TabBar.NavItem