rename StickyWrapper component to StickyElement and update its code

src/core/builtins/addon-manager/styles/addons/_list.scss

@@ -92,32 +92,6 @@
       margin-bottom: 20px;
     }
   }
-  &-sticky-bar {
-    display: flex;
-    padding: 12px;
-    justify-content: space-between;
-    align-items: center;
-    &-wrapper {
-      @include vz.size(100%);
-      position: sticky;
-      top: -1px;
-      border-radius: 8px;
-      background: var(--background-secondary-alt);
-      z-index: 1;
-      box-shadow: var(--elevation-low);
-      flex: 0;
-      &.stuck {
-        background: var(--background-primary);
-        border-radius: 0;
-      }
-    }
-    .topPill-30KHOu .selected-3s45Ha.item-PXvHYJ {
-      background: var(--brand-experiment);
-      &:hover {
-        background: var(--brand-experiment);
-      }
-    }
-  }
 }
 
 @media (max-width: 1050px) {
@@ -125,12 +99,3 @@
     display: none;
   }
 }
-
-@keyframes vz-fade-half {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}

src/core/modules/components/StickyElement.jsx

@@ -0,0 +1,44 @@
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { joinClassNames } from '@vizality/util/dom';
+
+export default memo(({ sticky, onStickyChange, className, wrapperClassName, children, ...other }) => {
+  const [ _sticky, setSticky ] = useState(sticky);
+  const headerRef = useRef(null);
+
+  const handleStickyChange = element => {
+    setSticky(element.isIntersecting < 1);
+    if (onStickyChange && typeof onStickyChange === 'function') {
+      onStickyChange(element.isIntersecting < 1);
+    }
+  };
+
+  useEffect(() => {
+    const header = headerRef?.current;
+    const observer = new IntersectionObserver(
+      ([ element ]) => handleStickyChange(element),
+      { threshold: [ 1 ] }
+    );
+
+    if (header) {
+      observer.observe(header);
+    }
+
+    /**
+     * Clean up the observer
+     */
+    return (() => observer.unobserve(header));
+  }, [ headerRef ]);
+
+  return (
+    <div
+      ref={headerRef}
+      className={joinClassNames('vz-sticky-element-wrapper', wrapperClassName)}
+      vz-stuck={Boolean(_sticky) && ''}
+      {...other}
+    >
+      <div className={joinClassNames('vz-sticky-element', className)}>
+        {children}
+      </div>
+    </div>
+  );
+});

src/core/modules/components/StickyWrapper.jsx

@@ -1,40 +0,0 @@
-import React, { memo, useEffect, useRef } from 'react';
-
-import { excludeProperties } from '@vizality/util/object';
-import { joinClassNames } from '@vizality/util/dom';
-
-export default memo(props => {
-  const { className, wrapperClassName, children, handleStickyChange } = props;
-  const sticky = useRef(null);
-
-  const _handleStickyChange = (state, element) => {
-    handleStickyChange(state, element);
-  };
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(([ entry ]) => {
-      if (entry.intersectionRatio < 1) {
-        entry.target.setAttribute('vz-stuck', '');
-        _handleStickyChange('stuck', entry.target);
-      } else {
-        entry.target.removeAttribute('vz-stuck');
-        _handleStickyChange('unstuck', entry.target);
-      }
-    }, { threshold: [ 1 ] });
-
-    observer.observe(sticky.current);
-    return () => observer.unobserve(sticky.current);
-  }, []);
-
-  return (
-    <div
-      ref={sticky}
-      className={joinClassNames('vz-sticky-wrapper', wrapperClassName)}
-      {...excludeProperties(props, 'children', 'className', 'wrapperClassName')}
-    >
-      <div className={joinClassNames('vz-sticky', className)}>
-        {children}
-      </div>
-    </div>
-  );
-});

src/core/modules/components/index.js

@@ -16,6 +16,7 @@ export const LazyImageZoomable = AsyncComponent.fromDisplayName('LazyImageZoomab
 export const KeyboardShortcut = AsyncComponent.fromDisplayName('KeyboardShortcut');
 export const Avatar = AsyncComponent.fetchFromProps('AnimatedAvatar', 'default');
 export const ContextMenu = AsyncComponent.fetchFromProps('MenuGroup', 'default');
+export const PremiumPaymentGuildAnimation = AsyncComponent.fetchFromProps('PremiumPaymentGuildAnimation');
 export const KeybindRecorder = AsyncComponent.fromDisplayName('KeybindRecorder');
 export const Helmet = AsyncComponent.fetchFromProps('HelmetProvider', 'Helmet');
 export const UserPopout = AsyncComponent.fromDisplayName('ConnectedUserPopout');
@@ -70,11 +71,11 @@ export const Text = AsyncComponent.fromDisplayName('Text');
 export const Flex = AsyncComponent.fromDisplayName('Flex');
 
 export { default as ComponentPreview } from './ComponentPreview';
+export { default as OverflowTooltip } from './OverflowTooltip';
 export { default as AsyncComponent } from './AsyncComponent';
 export { default as DeferredRender } from './DeferredRender';
 export { default as ErrorBoundary } from './ErrorBoundary';
-export { default as OverflowTooltip } from './OverflowTooltip';
-export { default as StickyWrapper } from './StickyWrapper';
+export { default as StickyElement } from './StickyElement';
 export { default as ColorPicker } from './ColorPicker';
 export { default as PopupWindow } from './PopupWindow';
 export { default as FilterInput } from './FilterInput';

src/core/styles/components/_index.scss

@@ -10,4 +10,5 @@
 @forward 'code-blocks';
 @forward 'embed-table';
 @forward 'autocomplete';
+@forward 'sticky-element';
 @forward 'settings';

src/core/styles/components/_sticky-element.scss

@@ -0,0 +1,28 @@
+@use '@vizality' as vz;
+
+.vz-sticky-element {
+  display: flex;
+  padding: 12px;
+  justify-content: space-between;
+  align-items: center;
+  &-wrapper {
+    @include vz.size(100%);
+    position: sticky;
+    top: -1px;
+    border-radius: 8px;
+    background: var(--background-secondary-alt);
+    z-index: 1;
+    box-shadow: var(--elevation-low);
+    flex: 0;
+    &[vz-stuck] {
+      background: var(--background-primary);
+      border-radius: 0;
+    }
+  }
+  .topPill-30KHOu .selected-3s45Ha.item-PXvHYJ {
+    background: var(--brand-experiment);
+    &:hover {
+      background: var(--brand-experiment);
+    }
+  }
+}

src/core/styles/components/settings/_category.scss

@@ -13,7 +13,7 @@
    * Targetting any elements after a category that aren't another category.
    */
   & + *:not(.vz-settings-category) {
-    margin-top: 60px;
+    margin-top: 20px;
   }
   &-meta {
     flex: 1;