feat(sidebar): change swoosh colour depending on sidebar collapse

src/components/navigation/left/ServerListSidebar.tsx

@@ -13,6 +13,7 @@ import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
+import { SIDEBAR_CHANNELS } from "../../../mobx/stores/Layout";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
@@ -168,6 +169,14 @@ const SettingsButton = styled.div`
 `;
 
 function Swoosh() {
+    const sidebarOpen = useApplicationState().layout.getSectionState(
+        SIDEBAR_CHANNELS,
+        true,
+    );
+    const fill = sidebarOpen
+        ? "var(--sidebar-active)"
+        : "var(--primary-background)";
+
     return (
         <span>
             <svg
@@ -177,15 +186,15 @@ function Swoosh() {
                 xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
-                    fill="var(--sidebar-active)"
+                    fill={fill}
                 />
                 <path
                     d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
-                    fill="var(--sidebar-active)"
+                    fill={fill}
                 />
                 <path
                     d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
-                    fill="var(--sidebar-active)"
+                    fill={fill}
                 />
             </svg>
         </span>

src/pages/channels/Channel.tsx

@@ -20,7 +20,7 @@ import AgeGate from "../../components/common/AgeGate";
 import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
-import Header from "../../components/ui/Header";
+import Header, { PageHeader } from "../../components/ui/Header";
 
 import RightSidebar from "../../components/navigation/RightSidebar";
 import ChannelHeader from "./ChannelHeader";
@@ -145,12 +145,11 @@ function VoiceChannel({ channel }: { channel: ChannelI }) {
 function ChannelPlaceholder() {
     return (
         <PlaceholderBase>
-            <Header placement="primary">
-                <Hash size={24} />
+            <PageHeader icon={<Hash size={24} />}>
                 <span className="name">
                     <Text id="app.main.channel.errors.nochannel" />
                 </span>
-            </Header>
+            </PageHeader>
 
             <div className="placeholder">
                 <Ghost width={80} />