Themes/Tweaks browser, sharing/import, custom themes/tweaks, and repo

.changeset/aadd_theme_catalog_remote_and_migration.md

@@ -0,0 +1,15 @@
+---
+default: minor
+---
+
+# Themes and tweaks from the catalog
+
+Themes are pulled from [a repo](https://github.com/SableClient/themes) now, so you get the full power of CSS instead of a palette. Tweaks are new: CSS overlays that sit on top of whatever theme you are using.
+
+You'll be prompted to migrate to the new system whenever you update, if you choose not to, you'll be limited to the basic dark/light themes. A few additional themes have been added (Rose Pine variantes, Catpuccin) along with some basic tweaks (circular avatars, monochrome avatars, and square stuff).
+
+You can share themes and tweaks. For themes uploaded online, simply hit the copy button in settings and paste the link in chat. If the setting is enabled, a preview will be generated. Third party themes (as defined by the config.json) have prominent warning banners and fetching is disabled by default.
+
+You can also export and share theme files directly, although no previews are generated for these.
+
+If you're intrested in getting a theme or tweak added to the official catalog, contribute to the themes repo linked above! We're eager to add more!

config.json

@@ -13,6 +13,9 @@
     "webPushAppID": "moe.sable.app.sygnal"
   },
 
+  "themeCatalogBaseUrl": "https://raw.githubusercontent.com/SableClient/themes/main/",
+  "themeCatalogApprovedHostPrefixes": ["https://raw.githubusercontent.com/SableClient/themes/"],
+
   "slidingSync": {
     "enabled": true
   },

src/app/components/RenderMessageContent.tsx

@@ -30,7 +30,15 @@ import {
   UnsupportedContent,
   VideoContent,
 } from './message';
-import { UrlPreviewCard, UrlPreviewHolder, ClientPreview, youtubeUrl } from './url-preview';
+import {
+  UrlPreviewCard,
+  UrlPreviewHolder,
+  ClientPreview,
+  ThemePreviewUrlCard,
+  TweakPreviewUrlCard,
+  youtubeUrl,
+} from './url-preview';
+import { isHttpsFullSableCssUrl } from '../theme/previewUrls';
 import { Image, MediaControl, PersistedVolumeVideo } from './media';
 import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
@@ -63,6 +71,10 @@ const getMediaType = (url: string) => {
   return null;
 };
 
+const isSableChatEmbedCandidate = (url: string): boolean =>
+  /^https:\/\//i.test(url) &&
+  (/\.preview\.sable\.css(\?|#|$)/i.test(url) || isHttpsFullSableCssUrl(url));
+
 const CAPTION_STYLE = { marginTop: config.space.S200 };
 
 function RenderMessageContentInternal({
@@ -85,6 +97,7 @@ function RenderMessageContentInternal({
 
   const [autoplayGifs] = useSetting(settingsAtom, 'autoplayGifs');
   const [captionPosition] = useSetting(settingsAtom, 'captionPosition');
+  const [themeChatSableWidgets] = useSetting(settingsAtom, 'themeChatSableWidgetsEnabled');
   const [multiplePreviews] = useSetting(settingsAtom, 'multiplePreviews');
   const settingsLinkBaseUrl = useSettingsLinkBaseUrl();
   const captionPositionMap = {
@@ -115,6 +128,17 @@ function RenderMessageContentInternal({
       );
       if (filteredUrls.length === 0) return undefined;
 
+      const themePreviewUrls = themeChatSableWidgets
+        ? filteredUrls.filter(
+            (u) => /^https:\/\//i.test(u) && /\.preview\.sable\.css(\?|#|$)/i.test(u)
+          )
+        : [];
+      const themeToRender = themePreviewUrls.filter((u) => /^https:\/\//i.test(u));
+
+      const tweakCandidateUrls = themeChatSableWidgets
+        ? filteredUrls.filter((u) => isHttpsFullSableCssUrl(u))
+        : [];
+
       const analyzed = filteredUrls.map((url) => ({
         url,
         type: getMediaType(url),
@@ -124,11 +148,20 @@ function RenderMessageContentInternal({
       const toRender = multiplePreviews ? previewCandidates : [previewCandidates[0]!];
       return (
         <UrlPreviewHolder>
+          {themeToRender.map((url) => (
+            <ThemePreviewUrlCard key={`theme:${url}`} url={url} />
+          ))}
+          {tweakCandidateUrls.map((url) => (
+            <TweakPreviewUrlCard key={`tweak:${url}`} url={url} />
+          ))}
           {toRender.map((item) => {
             const { url, type } = item;
+            if (themeToRender.includes(url)) return null;
+            if (tweakCandidateUrls.includes(url)) return null;
             if (type) {
               return <UrlPreviewCard urlPreview key={url} url={url} ts={ts} mediaType={type} />;
             }
+            if (!themeChatSableWidgets && isSableChatEmbedCandidate(url)) return null;
             if (clientUrlPreview && youtubeUrl(url)) {
               return <ClientPreview key={url} url={url} />;
             }
@@ -140,7 +173,7 @@ function RenderMessageContentInternal({
         </UrlPreviewHolder>
       );
     },
-    [multiplePreviews, settingsLinkBaseUrl, clientUrlPreview, urlPreview, ts]
+    [multiplePreviews, themeChatSableWidgets, settingsLinkBaseUrl, clientUrlPreview, urlPreview, ts]
   );
   const renderBundledPreviews = useCallback(
     (bundles: IPreviewUrlResponse[]) => (
@@ -157,7 +190,7 @@ function RenderMessageContentInternal({
     ),
     [urlPreview]
   );
-  const messageUrlsPreview = urlPreview ? renderUrlsPreview : undefined;
+  const messageUrlsPreview = urlPreview || themeChatSableWidgets ? renderUrlsPreview : undefined;
   const messageBundlePreview = bundledPreview ? renderBundledPreviews : undefined;
 
   const renderCaption = () => {

src/app/components/theme/ThemeMigrationBanner.tsx

@@ -0,0 +1,163 @@
+import { useCallback, useMemo, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+} from 'folds';
+import { useStore } from 'jotai/react';
+
+import { useOptionalClientConfig } from '$hooks/useClientConfig';
+import { useSetting } from '$state/hooks/settings';
+import { trimTrailingSlash } from '$utils/common';
+import { defaultSettings, settingsAtom } from '$state/settings';
+import { stopPropagation } from '$utils/keyboard';
+
+import { usePatchSettings } from '$features/settings/cosmetics/themeSettingsPatch';
+import { DEFAULT_THEME_CATALOG_BASE } from '../../theme/catalogDefaults';
+import { needsLegacyThemeMigration } from '../../theme/legacyToCatalogMap';
+import { runLegacyThemeMigration } from '../../theme/migrateLegacyThemes';
+
+export function ThemeMigrationBanner() {
+  const store = useStore();
+  const [themeMigrationDismissed] = useSetting(settingsAtom, 'themeMigrationDismissed');
+  const [themeId] = useSetting(settingsAtom, 'themeId');
+  const [lightThemeId] = useSetting(settingsAtom, 'lightThemeId');
+  const [darkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+  const patchSettings = usePatchSettings();
+  const clientConfig = useOptionalClientConfig();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const visible = useMemo(
+    () =>
+      needsLegacyThemeMigration({
+        ...defaultSettings,
+        themeMigrationDismissed: themeMigrationDismissed ?? false,
+        themeId,
+        lightThemeId,
+        darkThemeId,
+      }),
+    [themeMigrationDismissed, themeId, lightThemeId, darkThemeId]
+  );
+
+  const catalogBase = trimTrailingSlash(
+    clientConfig?.themeCatalogBaseUrl?.trim() || DEFAULT_THEME_CATALOG_BASE
+  );
+
+  const dismiss = useCallback(() => {
+    patchSettings({ themeMigrationDismissed: true });
+  }, [patchSettings]);
+
+  const dismissSafe = useCallback(() => {
+    if (busy) return;
+    dismiss();
+  }, [busy, dismiss]);
+
+  const migrate = useCallback(async () => {
+    setError(null);
+    setBusy(true);
+    try {
+      const current = store.get(settingsAtom);
+      const result = await runLegacyThemeMigration(current, catalogBase);
+      if (!result.ok) {
+        setError(result.error);
+        return;
+      }
+      patchSettings(result.partial);
+    } finally {
+      setBusy(false);
+    }
+  }, [catalogBase, patchSettings, store]);
+
+  if (!visible) return null;
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: dismissSafe,
+            clickOutsideDeactivates: false,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface" aria-labelledby="theme-migration-title">
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text id="theme-migration-title" size="H4">
+                  Update your theme selection
+                </Text>
+              </Box>
+              <IconButton
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                outlined
+                radii="300"
+                onClick={dismissSafe}
+                disabled={busy}
+                aria-label="Close"
+              >
+                <Icon src={Icons.Cross} size="100" />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Text priority="400">
+                Older bundled color themes are no longer included in the app. Migrate to the same
+                looks from the official catalog (downloaded and cached on this device), or dismiss
+                this reminder.
+              </Text>
+              {error && (
+                <Text size="T300" priority="400" style={{ color: 'var(--sable-error)' }}>
+                  {error}
+                </Text>
+              )}
+              <Box direction="Column" gap="200">
+                <Button
+                  variant="Primary"
+                  fill="Soft"
+                  outlined
+                  size="300"
+                  radii="300"
+                  onClick={migrate}
+                  disabled={busy}
+                >
+                  <Text size="B400">{busy ? 'Migrating…' : 'Migrate'}</Text>
+                </Button>
+                <Button
+                  variant="Secondary"
+                  fill="Soft"
+                  outlined
+                  size="300"
+                  radii="300"
+                  onClick={dismissSafe}
+                  disabled={busy}
+                >
+                  <Text size="B400">Not now</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}