Theme system improvements

.changeset/improve-sable-theme-management.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Add uploaded Sable CSS theme loading, automatic catalog updates, and a cleaner theme browser with full CSS viewing.

src/app/components/RenderMessageContent.test.tsx

@@ -2,8 +2,19 @@ import { render, screen } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { MsgType } from '$types/matrix-sdk';
 import { ClientConfigProvider } from '$hooks/useClientConfig';
+import { MatrixClientProvider } from '$hooks/useMatrixClient';
 import { RenderMessageContent } from './RenderMessageContent';
 
+vi.mock('./message/content/UploadedSableCssContent', () => ({
+  UploadedSableCssContent: ({ body }: { body: string }) => (
+    <div data-testid="uploaded-sable-css">{body}</div>
+  ),
+}));
+
+vi.mock('$hooks/useMediaAuthentication', () => ({
+  useMediaAuthentication: () => false,
+}));
+
 vi.mock('./url-preview', () => ({
   UrlPreviewHolder: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="url-preview-holder">{children}</div>
@@ -30,6 +41,23 @@ function renderMessage(body: string) {
   );
 }
 
+function renderFileMessage(content: Record<string, unknown>) {
+  return render(
+    <ClientConfigProvider value={{}}>
+      <MatrixClientProvider value={{} as never}>
+        <RenderMessageContent
+          displayName="Alice"
+          msgType={MsgType.File}
+          ts={0}
+          getContent={() => content as never}
+          htmlReactParserOptions={{}}
+          linkifyOpts={{}}
+        />
+      </MatrixClientProvider>
+    </ClientConfigProvider>
+  );
+}
+
 beforeEach(() => {
   vi.stubGlobal('location', { origin: 'https://app.example' } as Location);
 });
@@ -92,4 +120,16 @@ describe('RenderMessageContent', () => {
     expect(screen.getByTestId('url-preview-holder')).toBeInTheDocument();
     expect(screen.getByTestId('url-preview-card')).toHaveTextContent('https://example.com)');
   });
+
+  it('detects an uploaded Sable theme by filename when the body is a caption', () => {
+    renderFileMessage({
+      msgtype: MsgType.File,
+      body: 'A theme you might like',
+      filename: 'amethyst.sable.css',
+      url: 'mxc://example/amethyst',
+      info: { mimetype: 'text/css', size: 1024 },
+    });
+
+    expect(screen.getByTestId('uploaded-sable-css')).toHaveTextContent('amethyst.sable.css');
+  });
 });

src/app/components/RenderMessageContent.tsx

@@ -31,6 +31,7 @@ import {
   RenderBody,
   ThumbnailContent,
   UnsupportedContent,
+  UploadedSableCssContent,
   VideoContent,
 } from './message';
 import {
@@ -42,6 +43,7 @@ import {
   youtubeUrl,
 } from './url-preview';
 import { isHttpsFullSableCssUrl } from '../theme/previewUrls';
+import { isSableCssAttachmentFileName } from '../theme/processThemeImport';
 import { Image, MediaControl, PersistedVolumeVideo } from './media';
 import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
@@ -278,13 +280,13 @@ function RenderMessageContentInternal({
     renderCaptionedAttachment(
       <MFile
         content={content as Record<string, never> & { msgtype: MsgType.File }}
-        renderFileContent={({ body, mimeType, info, encInfo, url }) => (
+        renderFileContent={({ fileName, mimeType, info, encInfo, url }) => (
           <FileContent
-            body={body}
+            body={fileName}
             mimeType={mimeType}
             renderAsPdfFile={() => (
               <ReadPdfFile
-                body={body}
+                body={fileName}
                 mimeType={mimeType}
                 url={url}
                 encInfo={encInfo}
@@ -293,15 +295,30 @@ function RenderMessageContentInternal({
             )}
             renderAsTextFile={() => (
               <ReadTextFile
-                body={body}
+                body={fileName}
                 mimeType={mimeType}
                 url={url}
                 encInfo={encInfo}
                 renderViewer={(p) => <TextViewer {...p} />}
               />
             )}
           >
-            <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
+            {themeChatSableWidgets && isSableCssAttachmentFileName(fileName) && (
+              <UploadedSableCssContent
+                body={fileName}
+                mimeType={mimeType}
+                url={url}
+                encInfo={encInfo}
+                size={info.size}
+              />
+            )}
+            <DownloadFile
+              body={fileName}
+              mimeType={mimeType}
+              url={url}
+              encInfo={encInfo}
+              info={info}
+            />
           </FileContent>
         )}
         outlined={outlineAttachment}

src/app/components/message/MsgTypeRenderers.tsx

@@ -652,7 +652,7 @@ export function MAudio({
 }
 
 type RenderFileContentProps = {
-  body: string;
+  fileName: string;
   info: IFileInfo & IThumbnailContent;
   mimeType: string;
   url: string;
@@ -682,7 +682,7 @@ export function MFile({ content, renderFileContent, outlined }: MFileProps) {
       <AttachmentBox>
         <AttachmentContent>
           {renderFileContent({
-            body: filename,
+            fileName: filename,
             info: fileInfo ?? {},
             mimeType: fileInfo?.mimetype ?? FALLBACK_MIMETYPE,
             url: mxcUrl,