fix(PinDMs): display properly when there are 0 unpinned dms (#2281)

Co-authored-by: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Co-authored-by: V <vendicated@riseup.net>

src/plugins/pinDms/components/CreateCategoryModal.tsx

@@ -53,7 +53,7 @@ function useCategory(categoryId: string | null, initalChannelId: string | null)
             setCategory({
                 id: Toasts.genId(),
                 name: `Pin Category ${categories.length + 1}`,
-                color: 10070709,
+                color: DEFAULT_COLOR,
                 collapsed: false,
                 channels: [initalChannelId]
             });

src/plugins/pinDms/components/contextMenu.tsx

@@ -8,7 +8,7 @@ import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/Co
 import { Menu } from "@webpack/common";
 
 import { addChannelToCategory, canMoveChannelInDirection, categories, isPinned, moveChannel, removeChannelFromCategory } from "../data";
-import { forceUpdate, settings } from "../index";
+import { forceUpdate, PinOrder, settings } from "../index";
 import { openCategoryModal } from "./CreateCategoryModal";
 
 function createPinMenuItem(channelId: string) {
@@ -52,7 +52,7 @@ function createPinMenuItem(channelId: string) {
                     />
 
                     {
-                        !settings.store.sortDmsByNewestMessage && canMoveChannelInDirection(channelId, -1) && (
+                        settings.store.pinOrder === PinOrder.Custom && canMoveChannelInDirection(channelId, -1) && (
                             <Menu.MenuItem
                                 id="move-up"
                                 label="Move Up"
@@ -62,7 +62,7 @@ function createPinMenuItem(channelId: string) {
                     }
 
                     {
-                        !settings.store.sortDmsByNewestMessage && canMoveChannelInDirection(channelId, 1) && (
+                        settings.store.pinOrder === PinOrder.Custom && canMoveChannelInDirection(channelId, 1) && (
                             <Menu.MenuItem
                                 id="move-down"
                                 label="Move Down"

src/plugins/pinDms/index.tsx

@@ -34,11 +34,19 @@ const PrivateChannelSortStore = findStoreLazy("PrivateChannelSortStore") as { ge
 export let instance: any;
 export const forceUpdate = () => instance?.props?._forceUpdate?.();
 
+export const enum PinOrder {
+    LastMessage,
+    Custom
+}
+
 export const settings = definePluginSettings({
-    sortDmsByNewestMessage: {
+    pinOrder: {
-        type: OptionType.BOOLEAN,
+        type: OptionType.SELECT,
-        description: "Sort DMs by newest message",
+        description: "Which order should pinned DMs be displayed in?",
-        default: false,
+        options: [
+            { label: "Most recent message", value: PinOrder.LastMessage, default: true },
+            { label: "Custom (right click channels to reorder)", value: PinOrder.Custom }
+        ],
         onChange: () => forceUpdate()
     },
 
@@ -61,11 +69,6 @@ export default definePlugin({
         {
             find: ".privateChannelsHeaderContainer,",
             replacement: [
-                // Init
-                {
-                    match: /(?<=componentDidMount\(\){).{1,100}scrollToChannel/,
-                    replace: "$self._instance = this;$&"
-                },
                 {
                     // Filter out pinned channels from the private channel list
                     match: /(?<=\i,{channels:\i,)privateChannelIds:(\i)/,
@@ -164,12 +167,15 @@ export default definePlugin({
     getSections,
     getAllUncollapsedChannels,
     requireSettingsMenu,
+
     makeProps(instance, { sections }: { sections: number[]; }) {
+        this._instance = instance;
         this.sections = sections;
 
-        this.sections.splice(1, 0, ...this.getPinCount(instance.props.privateChannelIds || []));
+        this.sections.splice(1, 0, ...this.getSections());
 
         if (this.instance?.props?.privateChannelIds?.length === 0) {
+            // dont render direct messages header
             this.sections[this.sections.length - 1] = 0;
         }
 
@@ -199,10 +205,6 @@ export default definePlugin({
         return (sectionHeaderSizePx + sections.reduce((acc, v) => acc += v + 44, 0) + DEFAULT_CHUNK_SIZE) * 1.5;
     },
 
-    getPinCount(channelIds: string[]) {
-        return channelIds.length ? this.getSections() : [];
-    },
-
     isCategoryIndex(sectionIndex: number) {
         return this.sections && sectionIndex > 0 && sectionIndex < this.sections.length - 1;
     },
@@ -211,7 +213,7 @@ export default definePlugin({
         if (settings.store.dmSectioncollapsed && sectionIndex !== 0)
             return true;
         const cat = categories[sectionIndex - 1];
-        return this.isCategoryIndex(sectionIndex) && (cat.channels.length === 0 || cat?.channels[channelIndex]);
+        return this.isCategoryIndex(sectionIndex) && (cat?.channels?.length === 0 || cat?.channels[channelIndex]);
     },
 
     isDMSectioncollapsed() {
@@ -219,7 +221,6 @@ export default definePlugin({
     },
 
     collapseDMList() {
-        // console.log("HI");
         settings.store.dmSectioncollapsed = !settings.store.dmSectioncollapsed;
         forceUpdate();
     },
@@ -350,7 +351,7 @@ export default definePlugin({
     getCategoryChannels(category: Category) {
         if (category.channels.length === 0) return [];
 
-        if (settings.store.sortDmsByNewestMessage) {
+        if (settings.store.pinOrder === PinOrder.LastMessage) {
             return PrivateChannelSortStore.getPrivateChannelIds().filter(c => category.channels.includes(c));
         }