ServerListIndicators

index.tsx

Download

Source

src/plugins/serverListIndicators/index.tsx

1/*

2 * FiveCord — a Discord client mod

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

5 */

7import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList";

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

9import ErrorBoundary from "@components/ErrorBoundary";

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

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

12import { findStoreLazy } from "@webpack";

13import { GuildStore, PresenceStore, RelationshipStore, useStateFromStores } from "@webpack/common";

15const enum IndicatorType {

16 SERVER = 1 << 0,

17 FRIEND = 1 << 1,

18 BOTH = SERVER | FRIEND,

19}

21const UserGuildJoinRequestStore = findStoreLazy("UserGuildJoinRequestStore");

23const settings = definePluginSettings({

24 mode: {

25 description: "Mode",

26 type: OptionType.SELECT,

27 options: [

28 { label: "Only online friend count", value: IndicatorType.FRIEND, default: true },

29 { label: "Only server count", value: IndicatorType.SERVER },

30 { label: "Both server and online friend counts", value: IndicatorType.BOTH },

31 ]

32 }

33});

35function FriendsIndicator() {

36 const onlineFriendsCount = useStateFromStores([RelationshipStore, PresenceStore], () => {

37 let count = 0;

39 const friendIds = RelationshipStore.getFriendIDs();

40 for (const id of friendIds) {

41 const status = PresenceStore.getStatus(id) ?? "offline";

42 if (status === "offline") {

43 continue;

44 }

46 count++;

47 }

49 return count;

50 });

52 return (

53 <span id="vc-friendcount" style={{

54 display: "inline-block",

55 width: "100%",

56 fontSize: "12px",

57 fontWeight: "600",

58 color: "var(--text-default)",

59 textTransform: "uppercase",

60 textAlign: "center",

61 }}>

62 {onlineFriendsCount} online

63 </span>

64 );

65}

67function ServersIndicator() {

68 const guildCount = useStateFromStores([GuildStore, UserGuildJoinRequestStore], () => {

69 const guildJoinRequests: string[] = UserGuildJoinRequestStore.computeGuildIds();

70 const guilds = GuildStore.getGuilds();

72 // Filter only pending guild join requests

73 return GuildStore.getGuildCount() + guildJoinRequests.filter(id => guilds[id] == null).length;

74 });

76 return (

77 <span id="vc-guildcount" style={{

78 display: "inline-block",

79 width: "100%",

80 fontSize: "12px",

81 fontWeight: "600",

82 color: "var(--text-default)",

83 textTransform: "uppercase",

84 textAlign: "center",

85 }}>

86 {guildCount} servers

87 </span>

88 );

89}

91export default definePlugin({

92 name: "ServerListIndicators",

93 description: "Add online friend count or server count in the server list",

94 tags: ["Servers", "Appearance"],

95 authors: [Devs.dzshn],

96 dependencies: ["ServerListAPI"],

97 settings,

99 renderIndicator: () => {

100 const { mode } = settings.store;

101 return <ErrorBoundary noop>

102 <div style={{ marginBottom: "4px" }}>

103 {!!(mode & IndicatorType.FRIEND) && <FriendsIndicator />}

104 {!!(mode & IndicatorType.SERVER) && <ServersIndicator />}

105 </div>

106 </ErrorBoundary>;

107 },

108

109 start() {

110 addServerListElement(ServerListRenderPosition.Above, this.renderIndicator);

111 },

112

113 stop() {

114 removeServerListElement(ServerListRenderPosition.Above, this.renderIndicator);

115 }

116});

117

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

import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList";
import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { findStoreLazy } from "@webpack";
import { GuildStore, PresenceStore, RelationshipStore, useStateFromStores } from "@webpack/common";

const enum IndicatorType {
    SERVER = 1 << 0,
    FRIEND = 1 << 1,
    BOTH = SERVER | FRIEND,
}

const UserGuildJoinRequestStore = findStoreLazy("UserGuildJoinRequestStore");

const settings = definePluginSettings({
    mode: {
        description: "Mode",
        type: OptionType.SELECT,
        options: [
            { label: "Only online friend count", value: IndicatorType.FRIEND, default: true },
            { label: "Only server count", value: IndicatorType.SERVER },
            { label: "Both server and online friend counts", value: IndicatorType.BOTH },
        ]
    }
});

function FriendsIndicator() {
    const onlineFriendsCount = useStateFromStores([RelationshipStore, PresenceStore], () => {
        let count = 0;

        const friendIds = RelationshipStore.getFriendIDs();
        for (const id of friendIds) {
            const status = PresenceStore.getStatus(id) ?? "offline";
            if (status === "offline") {
                continue;
            }

            count++;
        }

        return count;
    });

    return (
        <span id="vc-friendcount" style={{
            display: "inline-block",
            width: "100%",
            fontSize: "12px",
            fontWeight: "600",
            color: "var(--text-default)",
            textTransform: "uppercase",
            textAlign: "center",
        }}>
            {onlineFriendsCount} online
        </span>
    );
}

function ServersIndicator() {
    const guildCount = useStateFromStores([GuildStore, UserGuildJoinRequestStore], () => {
        const guildJoinRequests: string[] = UserGuildJoinRequestStore.computeGuildIds();
        const guilds = GuildStore.getGuilds();

        // Filter only pending guild join requests
        return GuildStore.getGuildCount() + guildJoinRequests.filter(id => guilds[id] == null).length;
    });

    return (
        <span id="vc-guildcount" style={{
            display: "inline-block",
            width: "100%",
            fontSize: "12px",
            fontWeight: "600",
            color: "var(--text-default)",
            textTransform: "uppercase",
            textAlign: "center",
        }}>
            {guildCount} servers
        </span>
    );
}

export default definePlugin({
    name: "ServerListIndicators",
    description: "Add online friend count or server count in the server list",
    tags: ["Servers", "Appearance"],
    authors: [Devs.dzshn],
    dependencies: ["ServerListAPI"],
    settings,

    renderIndicator: () => {
        const { mode } = settings.store;
        return <ErrorBoundary noop>
            <div style={{ marginBottom: "4px" }}>
                {!!(mode & IndicatorType.FRIEND) && <FriendsIndicator />}
                {!!(mode & IndicatorType.SERVER) && <ServersIndicator />}
            </div>
        </ErrorBoundary>;
    },

    start() {
        addServerListElement(ServerListRenderPosition.Above, this.renderIndicator);
    },

    stop() {
        removeServerListElement(ServerListRenderPosition.Above, this.renderIndicator);
    }
});

Source

FiveCord for Windows