Add experimental settings page

src/app/features/settings/Settings.tsx

@@ -34,6 +34,7 @@ import { About } from './about';
 import { Account } from './account';
 import { General } from './general';
 import { Cosmetics } from './cosmetics/Cosmetics';
+import { Experimental } from './experimental/Experimental';
 
 export enum SettingsPages {
   GeneralPage,
@@ -43,6 +44,7 @@ export enum SettingsPages {
   EmojisStickersPage,
   CosmeticsPage,
   DeveloperToolsPage,
+  ExperimentalPage,
   AboutPage,
 }
 
@@ -92,6 +94,11 @@ const useSettingsMenuItems = (): SettingsMenuItem[] =>
         name: 'Developer Tools',
         icon: Icons.Terminal,
       },
+      {
+        page: SettingsPages.ExperimentalPage,
+        name: 'Experimental',
+        icon: Icons.Funnel,
+      },
       {
         page: SettingsPages.AboutPage,
         name: 'About',
@@ -248,6 +255,9 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
       {activePage === SettingsPages.DeveloperToolsPage && (
         <DeveloperTools requestClose={handlePageRequestClose} />
       )}
+      {activePage === SettingsPages.ExperimentalPage && (
+        <Experimental requestClose={handlePageRequestClose} />
+      )}
       {activePage === SettingsPages.AboutPage && <About requestClose={handlePageRequestClose} />}
     </PageRoot>
   );

src/app/features/settings/experimental/Experimental.tsx

@@ -0,0 +1,50 @@
+import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Page, PageContent, PageHeader } from '$components/page';
+import { InfoCard } from '$components/info-card';
+import { Sync } from '../general';
+
+type ExperimentalProps = {
+  requestClose: () => void;
+};
+export function Experimental({ requestClose }: ExperimentalProps) {
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Experimental
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <InfoCard
+              before=<Icon src={Icons.Warning} size="100" filled />
+              variant="Warning"
+              description={
+                <>
+                  The features listed below may be unstable or incomplete,
+                  <strong> use at your own risk</strong>.
+                  <br />
+                  Please report any new issues potentially caused by these features!
+                </>
+              }
+            />
+            <br />
+            <Box direction="Column" gap="700">
+              <Sync />
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/settings/general/General.tsx

@@ -780,7 +780,7 @@ function Messages() {
   );
 }
 
-function Sync() {
+export function Sync() {
   const clientConfig = useClientConfig();
   const sessions = useAtomValue(sessionsAtom);
   const activeSessionId = useAtomValue(activeSessionIdAtom);
@@ -882,7 +882,6 @@ export function General({ requestClose }: GeneralProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <DateAndTime />
-              <Sync />
               <Gestures isMobile={mobileOrTablet()} />
               <Editor isMobile={mobileOrTablet()} />
               <Messages />