Bring sliding sync out of experimental

config.json

@@ -16,10 +16,6 @@
   "themeCatalogBaseUrl": "https://raw.githubusercontent.com/SableClient/themes/main/",
   "themeCatalogApprovedHostPrefixes": ["https://raw.githubusercontent.com/SableClient/themes/"],
 
-  "slidingSync": {
-    "enabled": true
-  },
-
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [

index.html

@@ -28,6 +28,24 @@
 
     <link id="favicon" rel="shortcut icon" href="./public/favicon.png" />
 
+    <style>
+      html,
+      body {
+        background-color: #1b1a21;
+        background-image: radial-gradient(#2d2c36 2px, #1b1a21 2px);
+        background-size: 40px 40px;
+        color: #eae8f0;
+      }
+      @media (prefers-color-scheme: light) {
+        html,
+        body {
+          background-color: #ffffff;
+          background-image: radial-gradient(#e4e4e7 2px, #ffffff 2px);
+          color: #18181b;
+        }
+      }
+    </style>
+
     <link rel="manifest" href="/manifest.json" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="application-name" content="Sable" />

src/app/components/SpecVersionsLoader.tsx

@@ -32,7 +32,7 @@ export function SpecVersionsLoader({
   }
 
   if (!ignoreError && state.status === AsyncStatus.Error) {
-    return error?.(state.error, load, ignoreCallback);
+    if (error) return error(state.error, load, ignoreCallback);
   }
 
   return children(

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

@@ -7,7 +7,6 @@ import { useSetting } from '$state/hooks/settings';
 import { SequenceCardStyle } from '$features/common-settings/styles.css';
 import { SettingTile } from '$components/setting-tile';
 import { SequenceCard } from '$components/sequence-card';
-import { Sync } from '../general';
 import { SettingsSectionPage } from '../SettingsSectionPage';
 import { BandwidthSavingEmojis } from './BandwithSavingEmojis';
 import { MSC4268HistoryShare } from './MSC4268HistoryShare';
@@ -60,7 +59,6 @@ export function Experimental({ requestBack, requestClose }: Readonly<Experimenta
             />
             <br />
             <Box direction="Column" gap="700">
-              <Sync />
               <MSC4268HistoryShare />
               <BandwidthSavingEmojis />
               <PersonaToggle />

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

@@ -49,8 +49,6 @@ import { useMessageSpacingItems } from '$hooks/useMessageSpacing';
 import { useDateFormatItems } from '$hooks/useDateFormat';
 import { SequenceCardStyle } from '$features/settings/styles.css';
 import { sessionsAtom, activeSessionIdAtom } from '$state/sessions';
-import { useClientConfig } from '$hooks/useClientConfig';
-import { resolveSlidingEnabled } from '$client/initMatrix';
 import { isKeyHotkey } from 'is-hotkey';
 import { settingsSyncLastSyncedAtom, settingsSyncStatusAtom } from '$hooks/useSettingsSync';
 import { exportSettingsAsJson, importSettingsFromJson } from '$utils/settingsSync';
@@ -1380,14 +1378,17 @@ function Embeds() {
   );
 }
 
-export function Sync() {
-  const clientConfig = useClientConfig();
+type GeneralProps = {
+  requestBack?: () => void;
+  requestClose: () => void;
+};
+
+function Sync() {
   const sessions = useAtomValue(sessionsAtom);
   const activeSessionId = useAtomValue(activeSessionIdAtom);
   const setSessions = useSetAtom(sessionsAtom);
   const activeSession = sessions.find((s) => s.userId === activeSessionId) ?? sessions[0];
 
-  const serverSlidingEnabled = resolveSlidingEnabled(clientConfig.slidingSync?.enabled);
   const useSlidingSync = activeSession?.slidingSyncOptIn === true;
 
   const handleSetSlidingSync = (value: boolean) => {
@@ -1402,76 +1403,6 @@ export function Sync() {
     window.location.reload();
   };
 
-  return (
-    <Box direction="Column" gap="100">
-      <Text size="L400" style={{ opacity: serverSlidingEnabled ? 1 : 0.5 }}>
-        Sync
-      </Text>
-      <SequenceCard
-        className={SequenceCardStyle}
-        variant="SurfaceVariant"
-        direction="Column"
-        style={{ opacity: serverSlidingEnabled ? 1 : 0.5 }}
-      >
-        <SettingTile
-          title="Use Sliding Sync"
-          focusId="use-sliding-sync"
-          description={
-            serverSlidingEnabled ? (
-              <>
-                Enable Sliding Sync for this current login/session. Requires server support and
-                admin configuration.{' '}
-                <a
-                  href="https://github.com/matrix-org/matrix-spec-proposals/blob/erikj/sss/proposals/4186-simplified-sliding-sync.md"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  More info/Documentation
-                </a>
-                .{' '}
-                <a
-                  href="https://github.com/SableClient/Sable/issues/39"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Known issues (Sable GitHub)
-                </a>
-                .
-              </>
-            ) : (
-              <>
-                Unavailable: the server has disabled Sliding Sync in its config.{' '}
-                <a
-                  href="https://github.com/matrix-org/matrix-spec-proposals/blob/erikj/sss/proposals/4186-simplified-sliding-sync.md"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  More info
-                </a>
-                .
-              </>
-            )
-          }
-          after={
-            <Switch
-              variant="Primary"
-              value={useSlidingSync}
-              onChange={handleSetSlidingSync}
-              disabled={!serverSlidingEnabled}
-            />
-          }
-        />
-      </SequenceCard>
-    </Box>
-  );
-}
-
-type GeneralProps = {
-  requestBack?: () => void;
-  requestClose: () => void;
-};
-
-function SettingsSyncSection() {
   const [syncEnabled, setSyncEnabled] = useSetting(settingsAtom, 'settingsSyncEnabled');
   const lastSynced = useAtomValue(settingsSyncLastSyncedAtom);
   const syncStatus = useAtomValue(settingsSyncStatusAtom);
@@ -1500,15 +1431,42 @@ function SettingsSyncSection() {
 
   return (
     <Box direction="Column" gap="100">
-      <Text size="L400">Settings Sync & Backup</Text>
+      <Text size="L400">Data Syncing</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Use Sliding Sync"
+          focusId="use-sliding-sync"
+          description={
+            <>
+              Enable Sliding Sync for this current login/session. Requires server support.{' '}
+              <a
+                href="https://github.com/SableClient/Sable/issues/39"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Known issues (Sable GitHub)
+              </a>
+              .
+            </>
+          }
+          after={
+            <Switch variant="Primary" value={useSlidingSync} onChange={handleSetSlidingSync} />
+          }
+        />
+      </SequenceCard>
       <SequenceCard
         className={SequenceCardStyle}
         variant="SurfaceVariant"
         direction="Column"
         gap="400"
       >
         <SettingTile
-          title="Sync across devices"
+          title="Sync settings across devices"
           focusId="sync-across-devices"
           description="Store your settings in your Matrix account so they follow you to any Sable instance. Notification and zoom preferences are kept per-device."
           after={<Switch variant="Primary" value={syncEnabled} onChange={setSyncEnabled} />}
@@ -1669,7 +1627,7 @@ export function General({ requestBack, requestClose }: Readonly<GeneralProps>) {
               <Messages />
               <Embeds />
               <Calls />
-              <SettingsSyncSection />
+              <Sync />
               <DiagnosticsAndPrivacy />
             </Box>
           </PageContent>