BetterQuickReact — FiveCord

index.tsx

Download

Source

src/plugins/betterQuickReact/index.tsx

1/*

2 * FiveCord — a Discord client mod

4 * SPDX-License-Identifier: GPL-3.0-or-later

5 */

7import "./style.css";

9import { definePluginSettings } from "@api/Settings";

10import { Devs } from "@utils/constants";

11import definePlugin, { makeRange, OptionType } from "@utils/types";

13export const settings = definePluginSettings({

14 frequentEmojis: {

15 description: "Use frequently used emojis instead of favourite emojis",

16 type: OptionType.BOOLEAN,

17 default: true

18 },

19 rows: {

20 description: "Rows of quick reactions to display",

21 type: OptionType.SLIDER,

22 default: 2,

23 markers: makeRange(1, 16, 1),

24 stickToMarkers: true

25 },

26 columns: {

27 description: "Columns of quick reactions to display",

28 type: OptionType.SLIDER,

29 default: 4,

30 markers: makeRange(1, 12, 1),

31 stickToMarkers: true

32 },

33 compactMode: {

        description: "Scales the buttons to 75% of their original scale, whilst increasing the inner emoji to 125% scale. Emojis will be 93.75% of the original size. Recommended to have a minimum of 5 columns",

35 type: OptionType.BOOLEAN,

36 default: false

37 }

38});

40export default definePlugin({

41 name: "BetterQuickReact",

42 description: "Improves the quick react buttons in the message context menu.",

43 authors: [Devs.FiveCord],

44 settings,

46 patches: [

47 // Remove favourite emojis from being inserted at the start of the reaction list

48 {

49 find: "this.favoriteEmojisWithoutFetchingLatest.concat",

50 replacement: {

51 match: /(this\.favoriteEmojisWithoutFetchingLatest)\.concat/,

52 replace: "($self.settings.store.frequentEmojis?[]:$1).concat"

53 }

54 },

55 // Override limit of emojis to display

56 {

57 find: "default.Messages.ADD_REACTION_NAMED.format",

58 replacement: {

59 match: /(\i)\.length>4&&$(\i)\.length=4$;/,

60 replace: "$1.length>$self.getMaxQuickReactions()&&($2.length=$self.getMaxQuickReactions());"

61 }

62 },

        // Add a custom class to identify the quick reactions have been modified and a CSS variable for the number of columns to display

64 {

65 find: "default.Messages.ADD_REACTION_NAMED.format",

66 replacement: {

67 match: /className:(\i)\.wrapper,/,

                replace: "className:\"vc-better-quick-react \"+($self.settings.store.compactMode?\"vc-better-quick-react-compact \":\"\")+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"

69 }

70 },

71 // MenuGroup doesn't accept styles or anything special by default :/

72 {

73 find: "{MenuGroup:function()",

74 replacement: {

75 match: /role:"group",/,

76 replace: "role:\"group\",style:arguments[0].style,"

77 }

78 }

79 ],

80 getMaxQuickReactions() {

81 return settings.store.rows * settings.store.columns;

82 }

83});

/*
 * FiveCord — a Discord client mod
 * Copyright (c) 2025 FiveCord
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

import "./style.css";

import { definePluginSettings } from "@api/Settings";
import { Devs } from "@utils/constants";
import definePlugin, { makeRange, OptionType } from "@utils/types";

export const settings = definePluginSettings({
    frequentEmojis: {
        description: "Use frequently used emojis instead of favourite emojis",
        type: OptionType.BOOLEAN,
        default: true
    },
    rows: {
        description: "Rows of quick reactions to display",
        type: OptionType.SLIDER,
        default: 2,
        markers: makeRange(1, 16, 1),
        stickToMarkers: true
    },
    columns: {
        description: "Columns of quick reactions to display",
        type: OptionType.SLIDER,
        default: 4,
        markers: makeRange(1, 12, 1),
        stickToMarkers: true
    },
    compactMode: {
        description: "Scales the buttons to 75% of their original scale, whilst increasing the inner emoji to 125% scale. Emojis will be 93.75% of the original size. Recommended to have a minimum of 5 columns",
        type: OptionType.BOOLEAN,
        default: false
    }
});

export default definePlugin({
    name: "BetterQuickReact",
    description: "Improves the quick react buttons in the message context menu.",
    authors: [Devs.FiveCord],
    settings,

    patches: [
        // Remove favourite emojis from being inserted at the start of the reaction list
        {
            find: "this.favoriteEmojisWithoutFetchingLatest.concat",
            replacement: {
                match: /(this\.favoriteEmojisWithoutFetchingLatest)\.concat/,
                replace: "($self.settings.store.frequentEmojis?[]:$1).concat"
            }
        },
        // Override limit of emojis to display
        {
            find: "default.Messages.ADD_REACTION_NAMED.format",
            replacement: {
                match: /(\i)\.length>4&&\((\i)\.length=4\);/,
                replace: "$1.length>$self.getMaxQuickReactions()&&($2.length=$self.getMaxQuickReactions());"
            }
        },
        // Add a custom class to identify the quick reactions have been modified and a CSS variable for the number of columns to display
        {
            find: "default.Messages.ADD_REACTION_NAMED.format",
            replacement: {
                match: /className:(\i)\.wrapper,/,
                replace: "className:\"vc-better-quick-react \"+($self.settings.store.compactMode?\"vc-better-quick-react-compact \":\"\")+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
            }
        },
        // MenuGroup doesn't accept styles or anything special by default :/
        {
            find: "{MenuGroup:function()",
            replacement: {
                match: /role:"group",/,
                replace: "role:\"group\",style:arguments[0].style,"
            }
        }
    ],
    getMaxQuickReactions() {
        return settings.store.rows * settings.store.columns;
    }
});

Source

FiveCord for Windows