diff --git a/src/components/navigation/right/MemberList.tsx b/src/components/navigation/right/MemberList.tsx index a1a4114c..f90a50e9 100644 --- a/src/components/navigation/right/MemberList.tsx +++ b/src/components/navigation/right/MemberList.tsx @@ -1,3 +1,4 @@ +import { Link } from "react-router-dom"; import { GroupedVirtuoso } from "react-virtuoso"; import { Channel } from "revolt.js/dist/maps/Channels"; import { User } from "revolt.js/dist/maps/Users"; @@ -48,6 +49,10 @@ const NoOomfie = styled.div` font-size: 0.8em; text-align: center; color: var(--secondary-foreground); + + flex-direction: column; + display: flex; + gap: 4px; `; const ItemContent = memo( @@ -128,14 +133,23 @@ export default function MemberList({ if (entry.type === "no_offline") { return ( - Offline users temporarily disabled for this server, - see issue{" "} - - #128 - {" "} - for when this will be resolved. +
+ Offline users temporarily disabled for this + server, see issue{" "} + + #128 + {" "} + for when this will be resolved. +
+
+ You may re-enable them in{" "} + + experiments + + . +
); } diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx index 90b0ec88..9f10f822 100644 --- a/src/components/navigation/right/MemberSidebar.tsx +++ b/src/components/navigation/right/MemberSidebar.tsx @@ -1,5 +1,5 @@ /* eslint-disable react-hooks/rules-of-hooks */ -import { autorun, reaction } from "mobx"; +import { autorun } from "mobx"; import { observer } from "mobx-react-lite"; import { useParams } from "react-router-dom"; import { Role } from "revolt-api/types/Servers"; @@ -10,8 +10,6 @@ import { User } from "revolt.js/dist/maps/Users"; import { useContext, useEffect, useState } from "preact/hooks"; -import { defer } from "../../../lib/defer"; - import { ClientStatus, StatusContext, @@ -148,7 +146,7 @@ function useEntries( } // ! FIXME: Temporary performance fix - if (SKIP_OFFLINE.has(channel.server_id!)) { + if (shouldSkipOffline(channel.server_id!)) { entries.push({ type: "no_offline", users: [null!], @@ -194,7 +192,20 @@ export function resetMemberSidebarFetched() { FETCHED.clear(); } -export const SKIP_OFFLINE = new Set(["01F7ZSBSFHQ8TA81725KQCSDDP"]); +const SKIP_OFFLINE = new Set(["01F7ZSBSFHQ8TA81725KQCSDDP"]); + +let SKIP_ENABLED = true; +export function setOfflineSkipEnabled(value: boolean) { + SKIP_ENABLED = value; +} + +function shouldSkipOffline(id: string) { + if (SKIP_ENABLED) { + return SKIP_OFFLINE.has(id); + } + + return false; +} export const ServerMemberSidebar = observer( ({ channel }: { channel: Channel }) => { @@ -205,7 +216,7 @@ export const ServerMemberSidebar = observer( const server_id = channel.server_id!; if (status === ClientStatus.ONLINE && !FETCHED.has(server_id)) { channel - .server!.syncMembers(SKIP_OFFLINE.has(server_id)) + .server!.syncMembers(shouldSkipOffline(server_id)) .then(() => FETCHED.add(server_id)); } // eslint-disable-next-line diff --git a/src/mobx/stores/Experiments.ts b/src/mobx/stores/Experiments.ts index c0972fdd..6efe2725 100644 --- a/src/mobx/stores/Experiments.ts +++ b/src/mobx/stores/Experiments.ts @@ -1,23 +1,21 @@ -import { - action, - autorun, - computed, - makeAutoObservable, - ObservableSet, -} from "mobx"; +import { action, computed, makeAutoObservable, ObservableSet } from "mobx"; +import { + setOfflineSkipEnabled, + resetMemberSidebarFetched, +} from "../../components/navigation/right/MemberSidebar"; import Persistent from "../interfaces/Persistent"; import Store from "../interfaces/Store"; /** * Union type of available experiments. */ -export type Experiment = "dummy"; +export type Experiment = "dummy" | "offline_users"; /** * Currently active experiments. */ -export const AVAILABLE_EXPERIMENTS: Experiment[] = ["dummy"]; +export const AVAILABLE_EXPERIMENTS: Experiment[] = ["dummy", "offline_users"]; /** * Definitions for experiments listed by {@link Experiment}. @@ -29,6 +27,11 @@ export const EXPERIMENTS: { title: "Dummy Experiment", description: "This is a dummy experiment.", }, + offline_users: { + title: "Re-enable offline users in large servers (>10k members)", + description: + "If you can take the performance hit (for example, you're on desktop), you can re-enable offline users for big servers such as Revolt Lounge.", + }, }; export interface Data { @@ -62,7 +65,7 @@ export default class Experiments implements Store, Persistent { @action hydrate(data: Data) { if (data.enabled) { for (const experiment of data.enabled) { - this.enabled.add(experiment as Experiment); + this.enable(experiment as Experiment); } } } @@ -80,6 +83,11 @@ export default class Experiments implements Store, Persistent { * @param experiment Experiment */ @action enable(experiment: Experiment) { + if (experiment === "offline_users") { + setOfflineSkipEnabled(false); + resetMemberSidebarFetched(); + } + this.enabled.add(experiment); } @@ -88,6 +96,8 @@ export default class Experiments implements Store, Persistent { * @param experiment Experiment */ @action disable(experiment: Experiment) { + if (experiment === "offline_users") setOfflineSkipEnabled(true); + this.enabled.delete(experiment); }