Make theme shop hidden an experiment

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: <Text id="app.settings.pages.experiments.title" />,
                 },
                 {
+                    divider: !isExperimentEnabled('theme_shop'),
                     category: "revolt",
                     id: "bots",
                     icon: <Bot size={20} />,
                     title: <Text id="app.settings.pages.bots.title" />,
                 },
                 {
+                    hidden: !isExperimentEnabled('theme_shop'),
                     divider: true,
                     id: "theme_shop",
                     icon: <Store size={20} />,
@@ -176,9 +179,9 @@ export default function Settings() {
                     <Route path="/settings/bots">
                         <MyBots />
                     </Route>
-                    <Route path="/settings/theme_shop">
+                    {isExperimentEnabled('theme_shop') && <Route path="/settings/theme_shop">
                         <ThemeShop />
-                    </Route>
+                    </Route>}
                     <Route path="/settings/feedback">
                         <Feedback />
                     </Route>

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) {
                 </div>
             </div>
 
-            <Link to="/settings/theme_shop">
+            {isExperimentEnabled('theme_shop') && <Link to="/settings/theme_shop">
                 <CategoryButton icon={<Store size={24} />} action="chevron" hover>
                     <Text id="app.settings.pages.theme_shop.title" />
                 </CategoryButton>
-            </Link>
+            </Link>}
 
             <h3>
                 <Text id="app.settings.pages.appearance.accent_selector" />

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) => (
                 <Checkbox
                     key={key}
-                    checked={(props.options?.enabled ?? []).indexOf(key) > -1}
+                    checked={isExperimentEnabled(key, props.options)}
                     onChange={(enabled) =>
                         dispatch({
                             type: enabled

src/redux/reducers/experiments.ts

@@ -1,5 +1,9 @@
-export type Experiments = "search";
+import { getState } from "..";
-export const AVAILABLE_EXPERIMENTS: Experiments[] = [];
+
+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;
+}