further work

ChannelDeckStore.tsx

@@ -22,6 +22,7 @@ export const ChannelDeckStore = proxyLazyWebpack(() => {
         public _decks = new Map<string, ChannelDeck>();
 
         public loaded = false;
+        public pageUnloading = false;
 
         public windowKeyPrefix = "DISCORD_VC_CHANNELDECK_";
         public dataStoreKey = "ChannelDeck_Decks";
@@ -46,7 +47,8 @@ export const ChannelDeckStore = proxyLazyWebpack(() => {
             this._decks.set(deck.id, deck);
             const { id } = deck;
             const windowKey = this.windowKeyPrefix + id;
-            if (deck?.open && !PopoutWindowStore.getWindowKeys().includes(windowKey))
+            // @ts-ignore
+            if (deck?.open && !PopoutWindowStore.getWindowOpen(windowKey))
                 PopoutActions.open(
                     windowKey,
                     (key) => <DeckPopout deckId={id} windowKey={key} />, {
@@ -54,7 +56,8 @@ export const ChannelDeckStore = proxyLazyWebpack(() => {
                     defaultHeight: 960
                 });
             // We cannot add a beforeunload event to the window here, it will be never fired as Discord has their own handler.
-            if (!deck?.open && PopoutWindowStore.getWindowKeys().includes(windowKey))
+            // @ts-ignore
+            if (!deck?.open && PopoutWindowStore.getWindowOpen(windowKey))
                 this.getDeckWindow(id).close();
             if (noWrite || !this.loaded) return;
             this.writeData();
@@ -79,8 +82,10 @@ export const ChannelDeckStore = proxyLazyWebpack(() => {
 
         // Workaround for Discord's beforeunload event
         public syncClosedWindows() {
+            if (this.pageUnloading) return;
             this._decks.forEach((deck) => {
-                if (deck.open && !PopoutWindowStore.getWindowKeys().includes(this.windowKeyPrefix + deck.id))
+                // @ts-ignore
+                if (deck.open && !PopoutWindowStore.getWindowOpen(this.windowKeyPrefix + deck.id))
                     this.setDeck({ ...deck, open: false });
             });
         }
@@ -109,6 +114,8 @@ export const ChannelDeckStore = proxyLazyWebpack(() => {
     const store = new ChannelDeckStore(FluxDispatcher, {
     });
 
+    window.addEventListener("beforeunload", () => store.pageUnloading = true);
+
     PopoutWindowStore.addChangeListener(() => store.syncClosedWindows());
 
     return store;

components/DeckColumn.tsx

@@ -3,7 +3,7 @@ import "./DeckColumn.css";
 
 import { cl } from "./util";
 import { ChannelDeck, ChannelDeckStore, DeckColumn } from "../ChannelDeckStore";
-import { ChannelStore, GuildStore, useMemo } from "@webpack/common";
+import { ChannelStore, GuildStore, MessageActions, MessageCache, useEffect, useMemo } from "@webpack/common";
 
 const { HeaderBar, HeaderBarIcon } = mapMangledModuleLazy(".themedMobile]:", {
     HeaderBarIcon: filters.byCode('size:"custom",'),
@@ -17,7 +17,21 @@ const ChatInputTypes = findByPropsLazy("FORM", "NORMAL");
 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 }), []);
+    const chatInputType = useMemo(() => ({
+        ...ChatInputTypes.SIDEBAR
+    }), []);
+    useEffect(() => {
+        // Manually load messages :/
+        MessageActions.fetchMessages({
+            channelId: channel.id,
+            limit: 50,
+            isPreload: undefined,
+            skipLocalFetch: undefined,
+            jump: {
+                jumpType: "ANIMATED"
+            }
+        });
+    });
     return <div className={cl("column")} style={{
         width: column.width
     }}>

components/DeckContent.tsx

@@ -2,6 +2,7 @@ import "./DeckContent.css";
 
 import { cl, useDeck } from "./util";
 import DeckColumn from "./DeckColumn";
+import { ScrollerThin } from "@webpack/common";
 
 export default function DeckContent() {
     const deck = useDeck();
@@ -9,3 +10,6 @@ export default function DeckContent() {
         {deck?.columns.map((column, i) => <DeckColumn key={column.channelId} deck={deck} index={i} column={column} />)}
     </div>;
 };
+// <ScrollerThin orientation="horizontal">
+
+{/* </ScrollerThin> */ }