deck headers and saving (closing is broken though)

components/DeckColumn.tsx

@@ -1,23 +1,52 @@
-import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
+import { filters, findByPropsLazy, findComponentByCodeLazy, mapMangledModuleLazy } from "@webpack";
 import "./DeckColumn.css";
 
 import { cl } from "./util";
-import { DeckColumn } from "../ChannelDeckStore";
-import { ChannelStore, GuildStore } from "@webpack/common";
+import { ChannelDeck, ChannelDeckStore, DeckColumn } from "../ChannelDeckStore";
+import { ChannelStore, GuildStore, useMemo } from "@webpack/common";
 
+const { HeaderBar, HeaderBarIcon } = mapMangledModuleLazy(".themedMobile]:", {
+    HeaderBarIcon: filters.byCode('size:"custom",'),
+    HeaderBar: filters.byCode(".themedMobile]:"),
+});
+const ChannelHeader = findComponentByCodeLazy(".forumPostTitle]:", '"channel-".concat');
+const XSmallIcon = findComponentByCodeLazy("1.4L12 13.42l5.3 5.3Z");
 const Chat = findComponentByCodeLazy("filterAfterTimestamp:", "chatInputType");
 const ChatInputTypes = findByPropsLazy("FORM", "NORMAL");
 
-export default function DeckColumn({ column }: { column: DeckColumn; }) {
+export default function DeckColumn({ column, deck, index }: { column: DeckColumn; deck: ChannelDeck; index: number; }) {
     const channel = ChannelStore.getChannel(column.channelId);
     const guild = GuildStore.getGuild(channel.guild_id);
+    const chatInputType = useMemo(() => ({ ...ChatInputTypes.SIDEBAR }), []);
     return <div className={cl("column")} style={{
         width: column.width
     }}>
+        <HeaderBar
+            toolbar={
+                <>
+                    <HeaderBarIcon
+                        icon={XSmallIcon}
+                        tooltip="Close Column"
+                        onClick={() => {
+                            const newColumns = deck.columns;
+                            newColumns.splice(index, 1);
+                            ChannelDeckStore.setDeck({ ...deck, columns: newColumns });
+                        }}
+                    />
+                </>
+            }
+        >
+            <ChannelHeader
+                channel={channel}
+                channelName={channel?.name}
+                guild={guild}
+                parentChannel={ChannelStore.getChannel(channel?.parent_id)}
+            />
+        </HeaderBar>
         <Chat
             channel={channel}
             guild={guild}
-            chatInputType={ChatInputTypes.SIDEBAR}
+            chatInputType={chatInputType}
         />
     </div>;
 };

components/DeckContent.tsx

@@ -6,6 +6,6 @@ import DeckColumn from "./DeckColumn";
 export default function DeckContent() {
     const deck = useDeck();
     return <div className={cl("content")}>
-        {deck?.columns.map(column => <DeckColumn key={column.channelId} column={column} />)}
+        {deck?.columns.map((column, i) => <DeckColumn key={column.channelId} deck={deck} index={i} column={column} />)}
     </div>;
 };

components/DeckPopout.tsx

@@ -7,8 +7,6 @@ import { DeckContext } from "./util";
 const PopoutWindow = findComponentByCodeLazy("Missing guestWindow reference");
 
 export default function DeckPopout({ deckId, windowKey }: { deckId: string; windowKey?: string; }) {
-    // Copy from an unexported function of the one they use in the experiment
-    // right click a channel and search withTitleBar:!0,windowKey
     const deck = useStateFromStores([ChannelDeckStore], () => ChannelDeckStore.getDeck(deckId));
 
     return <PopoutWindow