ServerListIndicators

index.tsx

Download

Source

src/plugins/serverListIndicators/index.tsx

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

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

3import ErrorBoundary from "@components/ErrorBoundary";

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

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

6import { findStoreLazy } from "@webpack";

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

9const enum IndicatorType {

10 SERVER = 1 << 0,

11 FRIEND = 1 << 1,

12 BOTH = SERVER | FRIEND,

13}

15const UserGuildJoinRequestStore = findStoreLazy("UserGuildJoinRequestStore");

17const settings = definePluginSettings({

18 mode: {

19 description: "Mode",

20 type: OptionType.SELECT,

21 options: [

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

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

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

25 ]

26 }

27});

29function FriendsIndicator() {

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

31 let count = 0;

33 const friendIds = RelationshipStore.getFriendIDs();

34 for (const id of friendIds) {

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

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

37 continue;

38 }

40 count++;

41 }

43 return count;

44 });

46 return (

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

48 display: "inline-block",

49 width: "100%",

50 fontSize: "12px",

51 fontWeight: "600",

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

53 textTransform: "uppercase",

54 textAlign: "center",

55 }}>

56 {onlineFriendsCount} online

57 </span>

58 );

59}

61function ServersIndicator() {

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

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

64 const guilds = GuildStore.getGuilds();

66 // Filter only pending guild join requests

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

68 });

70 return (

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

72 display: "inline-block",

73 width: "100%",

74 fontSize: "12px",

75 fontWeight: "600",

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

77 textTransform: "uppercase",

78 textAlign: "center",

79 }}>

80 {guildCount} servers

81 </span>

82 );

83}

85export default definePlugin({

86 name: "ServerListIndicators",

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

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

89 authors: [Devs.dzshn],

90 dependencies: ["ServerListAPI"],

91 settings,

93 renderIndicator: () => {

94 const { mode } = settings.store;

95 return <ErrorBoundary noop>

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

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

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

99 </div>

100 </ErrorBoundary>;

101 },

102

103 start() {

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

105 },

106

107 stop() {

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

109 }

110});

111

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