FiveCord Toolbox — FiveCord

index.tsx

Download

Source

src/plugins/vencordToolbox/index.tsx

1/*

2 * FiveCord — a Discord client mod

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

5 */

7import "./styles.css";

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

10import ErrorBoundary from "@components/ErrorBoundary";

11import { BRAND_NAME } from "@utils/branding";

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

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

14import { findComponentByCodeLazy } from "@webpack";

15import { Popout, useRef, useState } from "@webpack/common";

16import type { PropsWithChildren } from "react";

18import { renderPopout } from "./menu";

20const HeaderBarIcon = findComponentByCodeLazy(".HEADER_BAR_BADGE_BOTTOM,", 'position:"bottom"');

22export const settings = definePluginSettings({

23 showPluginMenu: {

24 type: OptionType.BOOLEAN,

25 default: true,

26 description: "Show the plugins menu in the toolbox",

27 }

28});

30function Icon({ isShown }: { isShown: boolean; }) {

31 return (

32 <svg viewBox="0 0 27 27" width={18} height={18} className="vc-toolbox-icon">

33 {isShown

                ? <path fill="currentColor" d="M9 0h1v1h1v2h1v2h3V3h1V1h1V0h1v2h1v2h1v7h-1v-1h-3V9h1V6h-1v4h-3v1h1v-1h2v1h3v1h-1v1h-3v2h1v1h1v1h1v3h-1v4h-2v-1h-1v-4h-1v4h-1v1h-2v-4H9v-3h1v-1h1v-1h1v-2H9v-1H8v-1h3V6h-1v3h1v1H8v1H7V4h1V2h1M5 19h2v1h1v1h1v3H4v-1h2v-1H4v-2h1m15-1h2v1h1v2h-2v1h2v1h-5v-3h1v-1h1m4 3h4v1h-4" />

                : <path fill="currentColor" d="M0 0h7v1H6v1H5v1H4v1H3v1H2v1h5v1H0V6h1V5h1V4h1V3h1V2h1V1H0m13 2h5v1h-1v1h-1v1h-1v1h3v1h-5V7h1V6h1V5h1V4h-3m8 5h1v5h1v-1h1v1h-1v1h1v-1h1v1h-1v3h-1v1h-2v1h-1v1h1v-1h2v-1h1v2h-1v1h-2v1h-1v-1h-1v1h-6v-1h-1v-1h-1v-2h1v1h2v1h3v1h1v-1h-1v-1h-3v-1h-4v-4h1v-2h1v-1h1v-1h1v2h1v1h1v-1h1v1h-1v1h2v-2h1v-2h1v-1h1M8 14h2v1H9v4h1v2h1v1h1v1h1v1h4v1h-6v-1H5v-1H4v-5h1v-1h1v-2h2m17 3h1v3h-1v1h-1v1h-1v2h-2v-2h2v-1h1v-1h1m1 0h1v3h-1v1h-2v-1h1v-1h1" />

36 }

37 </svg>

38 );

39}

41function VencordPopoutButton() {

42 const buttonRef = useRef(null);

43 const [show, setShow] = useState(false);

45 return (

46 <Popout

47 position="bottom"

48 align="right"

49 animation={Popout.Animation.NONE}

50 shouldShow={show}

51 onRequestClose={() => setShow(false)}

52 targetElementRef={buttonRef}

53 renderPopout={() => renderPopout(() => setShow(false))}

54 >

55 {(_, { isShown }) => (

56 <HeaderBarIcon

57 ref={buttonRef}

58 className="vc-toolbox-btn"

59 onClick={() => setShow(v => !v)}

60 tooltip={isShown ? null : `${BRAND_NAME} Toolbox`}

61 icon={() => <Icon isShown={isShown} />}

62 selected={isShown}

63 />

64 )}

65 </Popout>

66 );

67}

69export default definePlugin({

70 name: "VencordToolbox",

71 description: "Adds a button to the titlebar that houses FiveCord quick actions",

72 tags: ["Utility", "Developers"],

73 authors: [Devs.Ven, Devs.AutumnVN],

75 settings,

77 patches: [

78 {

79 find: '?"BACK_FORWARD_NAVIGATION":',

80 replacement: {

81 match: /(trailing:.{0,50}?)\i\.Fragment,(?=\{children:\[)/,

82 replace: "$1$self.TrailingWrapper,"

83 }

84 }

85 ],

87 TrailingWrapper({ children }: PropsWithChildren) {

88 return (

89 <>

90 {children}

91 <ErrorBoundary key="vc-toolbox" noop>

92 <VencordPopoutButton />

93 </ErrorBoundary>

94 </>

95 );

96 },

97});

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

import "./styles.css";

import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { BRAND_NAME } from "@utils/branding";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { findComponentByCodeLazy } from "@webpack";
import { Popout, useRef, useState } from "@webpack/common";
import type { PropsWithChildren } from "react";

import { renderPopout } from "./menu";

const HeaderBarIcon = findComponentByCodeLazy(".HEADER_BAR_BADGE_BOTTOM,", 'position:"bottom"');

export const settings = definePluginSettings({
    showPluginMenu: {
        type: OptionType.BOOLEAN,
        default: true,
        description: "Show the plugins menu in the toolbox",
    }
});

function Icon({ isShown }: { isShown: boolean; }) {
    return (
        <svg viewBox="0 0 27 27" width={18} height={18} className="vc-toolbox-icon">
            {isShown
                ? <path fill="currentColor" d="M9 0h1v1h1v2h1v2h3V3h1V1h1V0h1v2h1v2h1v7h-1v-1h-3V9h1V6h-1v4h-3v1h1v-1h2v1h3v1h-1v1h-3v2h1v1h1v1h1v3h-1v4h-2v-1h-1v-4h-1v4h-1v1h-2v-4H9v-3h1v-1h1v-1h1v-2H9v-1H8v-1h3V6h-1v3h1v1H8v1H7V4h1V2h1M5 19h2v1h1v1h1v3H4v-1h2v-1H4v-2h1m15-1h2v1h1v2h-2v1h2v1h-5v-3h1v-1h1m4 3h4v1h-4" />
                : <path fill="currentColor" d="M0 0h7v1H6v1H5v1H4v1H3v1H2v1h5v1H0V6h1V5h1V4h1V3h1V2h1V1H0m13 2h5v1h-1v1h-1v1h-1v1h3v1h-5V7h1V6h1V5h1V4h-3m8 5h1v5h1v-1h1v1h-1v1h1v-1h1v1h-1v3h-1v1h-2v1h-1v1h1v-1h2v-1h1v2h-1v1h-2v1h-1v-1h-1v1h-6v-1h-1v-1h-1v-2h1v1h2v1h3v1h1v-1h-1v-1h-3v-1h-4v-4h1v-2h1v-1h1v-1h1v2h1v1h1v-1h1v1h-1v1h2v-2h1v-2h1v-1h1M8 14h2v1H9v4h1v2h1v1h1v1h1v1h4v1h-6v-1H5v-1H4v-5h1v-1h1v-2h2m17 3h1v3h-1v1h-1v1h-1v2h-2v-2h2v-1h1v-1h1m1 0h1v3h-1v1h-2v-1h1v-1h1" />
            }
        </svg>
    );
}

function VencordPopoutButton() {
    const buttonRef = useRef(null);
    const [show, setShow] = useState(false);

    return (
        <Popout
            position="bottom"
            align="right"
            animation={Popout.Animation.NONE}
            shouldShow={show}
            onRequestClose={() => setShow(false)}
            targetElementRef={buttonRef}
            renderPopout={() => renderPopout(() => setShow(false))}
        >
            {(_, { isShown }) => (
                <HeaderBarIcon
                    ref={buttonRef}
                    className="vc-toolbox-btn"
                    onClick={() => setShow(v => !v)}
                    tooltip={isShown ? null : `${BRAND_NAME} Toolbox`}
                    icon={() => <Icon isShown={isShown} />}
                    selected={isShown}
                />
            )}
        </Popout>
    );
}

export default definePlugin({
    name: "VencordToolbox",
    description: "Adds a button to the titlebar that houses FiveCord quick actions",
    tags: ["Utility", "Developers"],
    authors: [Devs.Ven, Devs.AutumnVN],

    settings,

    patches: [
        {
            find: '?"BACK_FORWARD_NAVIGATION":',
            replacement: {
                match: /(trailing:.{0,50}?)\i\.Fragment,(?=\{children:\[)/,
                replace: "$1$self.TrailingWrapper,"
            }
        }
    ],

    TrailingWrapper({ children }: PropsWithChildren) {
        return (
            <>
                {children}
                <ErrorBoundary key="vc-toolbox" noop>
                    <VencordPopoutButton />
                </ErrorBoundary>
            </>
        );
    },
});

Source

FiveCord for Windows