feat(header): new glass header on channel view

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -37,6 +37,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
         user-select: none;
         justify-content: space-between;
         transition: color ease-in-out 0.08s;
+        top: 48px;
 
         ${(props) =>
             props.accent

src/components/navigation/SidebarBase.tsx

@@ -8,6 +8,12 @@ export default styled.div`
     user-select: none;
     flex-direction: row;
     align-items: stretch;
+
+    > * > ::-webkit-scrollbar-thumb {
+        width: 4px;
+        background-clip: content-box;
+        border-top: 48px solid transparent;
+    }
 `;
 
 export const GenericSidebarBase = styled.div<{

src/components/ui/Header.tsx

@@ -31,7 +31,13 @@ const Header = styled.div<Props>`
     align-items: center;
     background-size: cover !important;
     background-position: center !important;
-    background-color: var(--primary-header);
+    //background-color: var(--primary-header);
+    background-color: rgba(54, 54, 54, 0.75);
+    backdrop-filter: blur(10px);
+    z-index: 20;
+
+    position: absolute;
+    width: 100%;
 
     /*> div {
         text-overflow: ellipsis;