diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 8ef915ab..bf27eab4 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -50,6 +50,7 @@ import { Profile } from "./panes/Profile"; import { Sessions } from "./panes/Sessions"; import { Sync } from "./panes/Sync"; import { ThemeShop } from "./panes/ThemeShop"; +import { isExperimentEnabled } from "../../redux/reducers/experiments"; export default function Settings() { const history = useHistory(); @@ -125,12 +126,14 @@ export default function Settings() { title: , }, { + divider: !isExperimentEnabled('theme_shop'), category: "revolt", id: "bots", icon: , title: , }, { + hidden: !isExperimentEnabled('theme_shop'), divider: true, id: "theme_shop", icon: , @@ -176,9 +179,9 @@ export default function Settings() { - + {isExperimentEnabled('theme_shop') && - + } diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index e33f5b38..bd61029b 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -47,6 +47,7 @@ import notoSVG from "../assets/noto_emoji.svg"; import openmojiSVG from "../assets/openmoji_emoji.svg"; import twemojiSVG from "../assets/twemoji_emoji.svg"; import { Link } from "react-router-dom"; +import { isExperimentEnabled } from "../../../redux/reducers/experiments"; interface Props { settings: Settings; @@ -137,11 +138,11 @@ export function Component(props: Props) { - + {isExperimentEnabled('theme_shop') && } action="chevron" hover> - + }

diff --git a/src/pages/settings/panes/Experiments.tsx b/src/pages/settings/panes/Experiments.tsx index abac7cc3..7e50c892 100644 --- a/src/pages/settings/panes/Experiments.tsx +++ b/src/pages/settings/panes/Experiments.tsx @@ -7,6 +7,7 @@ import { AVAILABLE_EXPERIMENTS, ExperimentOptions, EXPERIMENTS, + isExperimentEnabled, } from "../../../redux/reducers/experiments"; import Checkbox from "../../../components/ui/Checkbox"; @@ -24,7 +25,7 @@ export function Component(props: Props) { {AVAILABLE_EXPERIMENTS.map((key) => ( -1} + checked={isExperimentEnabled(key, props.options)} onChange={(enabled) => dispatch({ type: enabled diff --git a/src/redux/reducers/experiments.ts b/src/redux/reducers/experiments.ts index c9da28d3..7d081f86 100644 --- a/src/redux/reducers/experiments.ts +++ b/src/redux/reducers/experiments.ts @@ -1,5 +1,9 @@ -export type Experiments = "search"; -export const AVAILABLE_EXPERIMENTS: Experiments[] = []; +import { getState } from ".."; + +export type Experiments = "search" | "theme_shop"; + +export const AVAILABLE_EXPERIMENTS: Experiments[] = ["theme_shop"]; + export const EXPERIMENTS: { [key in Experiments]: { title: string; description: string }; } = { @@ -7,6 +11,10 @@ export const EXPERIMENTS: { title: "Search", description: "Allows you to search for messages in channels.", }, + theme_shop: { + title: "Theme Shop", + description: "Allows you to access and set user submitted themes.", + }, }; export interface ExperimentOptions { @@ -50,3 +58,10 @@ export function experiments( return state; } } + +export function isExperimentEnabled( + name: Experiments, + experiments: ExperimentOptions = getState().experiments, +) { + return experiments.enabled?.includes(name) ?? false; +}