Refactor codebase and standardize unstable prefix usage

src/app/components/create-room/utils.ts

@@ -11,6 +11,7 @@ import type { StateEvents } from '$types/matrix-sdk';
 import { getViaServers } from '$plugins/via-servers';
 import { getMxIdServer } from '$utils/mxIdHelper';
 import { CreateRoomAccess } from './types';
+import * as prefix from '$unstable/prefixes';
 
 export const createRoomCreationContent = (
   type: RoomType | undefined,
@@ -87,7 +88,7 @@ export const createRoomEncryptionState = () => ({
 });
 
 export const createRoomCallState = () => ({
-  type: 'org.matrix.msc3401.call',
+  type: prefix.MATRIX_UNSTABLE_ROOM_TYPE_CALL_PROPERTY_NAME,
   state_key: '',
   content: {},
 });

src/app/components/message/MsgTypeRenderers.tsx

@@ -16,10 +16,7 @@ import type {
   IVideoContent,
   IVideoInfo,
 } from '$types/matrix/common';
-import {
-  MATRIX_SPOILER_PROPERTY_NAME,
-  MATRIX_SPOILER_REASON_PROPERTY_NAME,
-} from '$types/matrix/common';
+import * as prefix from '$unstable/prefixes';
 import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '$utils/mimeTypes';
 import { parseGeoUri, scaleYDimension } from '$utils/common';
 import { useSetting } from '$state/hooks/settings';
@@ -132,7 +129,9 @@ const getUrlsFromContent = (
     urls = urls.filter((url) => safeUrlsSet.has(url));
   }
 
-  let bundleContent = content['com.beeper.linkpreviews'] as BundleContent[];
+  let bundleContent = content[
+    prefix.MATRIX_UNSTABLE_EMBEDDED_LINK_PREVIEW_PROPERTY_NAME
+  ] as BundleContent[];
   try {
     bundleContent = bundleContent?.filter((bundle) => !!urls?.includes(bundle.matched_url));
     if (renderUrlsPreview && bundleContent)
@@ -169,7 +168,7 @@ export function MText({
   );
 
   const isForwarded = useMemo(() => {
-    const forwardMeta = content['moe.sable.message.forward'];
+    const forwardMeta = content[prefix.MATRIX_SABLE_UNSTABLE_MESSAGE_FORWARD_META_PROPERTY_NAME];
     return typeof forwardMeta === 'object';
   }, [content]);
 
@@ -204,7 +203,13 @@ export function MText({
 
   const { urls, bundleContent } = getUrlsFromContent(content, renderUrlsPreview);
 
-  if ((content['com.beeper.per_message_profile'] as PerMessageProfileBeeperFormat)?.has_fallback) {
+  if (
+    (
+      content[
+        prefix.MATRIX_UNSTABLE_PER_MESSAGE_PROFILE_PROPERTY_NAME
+      ] as PerMessageProfileBeeperFormat
+    )?.has_fallback
+  ) {
     // unwrap per-message profile fallback if present
     return (
       <>
@@ -427,8 +432,8 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
           mimeType: imgInfo?.mimetype,
           url: mxcUrl,
           encInfo: content.file,
-          markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
-          spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
+          markedAsSpoiler: content[prefix.MATRIX_UNSTABLE_SPOILER_PROPERTY_NAME],
+          spoilerReason: content[prefix.MATRIX_UNSTABLE_SPOILER_REASON_PROPERTY_NAME],
         })}
       </AttachmentBox>
     </Attachment>
@@ -499,8 +504,8 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
           mimeType: safeMimeType,
           url: mxcUrl,
           encInfo: content.file,
-          markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
-          spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
+          markedAsSpoiler: content[prefix.MATRIX_UNSTABLE_SPOILER_PROPERTY_NAME],
+          spoilerReason: content[prefix.MATRIX_UNSTABLE_SPOILER_REASON_PROPERTY_NAME],
         })}
       </AttachmentBox>
     </Attachment>

src/app/components/message/content/ImageContent.tsx

@@ -25,7 +25,6 @@ import { BlurhashCanvas } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';
 import type { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import type { IImageInfo } from '$types/matrix/common';
-import { MATRIX_BLUR_HASH_PROPERTY_NAME } from '$types/matrix/common';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { bytesToSize } from '$utils/common';
@@ -36,6 +35,7 @@ import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { ModalWide } from '$styles/Modal.css';
 import { validBlurHash } from '$utils/blurHash';
 import * as css from './style.css';
+import { MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME } from '../../../../unstable/prefixes';
 
 type RenderViewerProps = {
   src: string;
@@ -84,7 +84,7 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const blurHash = validBlurHash(info?.[MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME]);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);

src/app/components/message/content/VideoContent.tsx

@@ -20,14 +20,14 @@ import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
 import type { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import type { IThumbnailContent, IVideoInfo } from '$types/matrix/common';
-import { MATRIX_BLUR_HASH_PROPERTY_NAME } from '$types/matrix/common';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { bytesToSize, millisecondsToMinutesAndSeconds } from '$utils/common';
 import { decryptFile, downloadEncryptedMedia, downloadMedia, mxcUrlToHttp } from '$utils/matrix';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { validBlurHash } from '$utils/blurHash';
 import * as css from './style.css';
+import { MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME } from '../../../../unstable/prefixes';
 
 type RenderVideoProps = {
   title: string;
@@ -69,7 +69,7 @@ export const VideoContent = as<'div', VideoContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME]);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);

src/app/components/message/modals/MessageForward.tsx

@@ -27,6 +27,7 @@ import { sanitizeCustomHtml, sanitizeText } from '$utils/sanitize';
 import { createDebugLogger } from '$utils/debugLogger';
 import * as Sentry from '@sentry/react';
 import { isRoomPrivate } from '$utils/roomVisibility';
+import * as prefix from '$unstable/prefixes';
 
 const debugLog = createDebugLogger('MessageForward');
 
@@ -203,7 +204,7 @@ export function MessageForwardInternal({
     const baseContent = { ...mEvent.getContent() };
     delete baseContent['m.relates_to']; // remove relations from the forwarded message
     delete baseContent['m.mentions']; // remove mentions from forwarded message
-    delete baseContent['com.beeper.per_message_profile']; // remove per-message profile as that could confuse clients in the target room
+    delete baseContent[prefix.MATRIX_UNSTABLE_PER_MESSAGE_PROFILE_PROPERTY_NAME]; // remove per-message profile as that could confuse clients in the target room
     let content;
     // handle privacy stuff
     if (isRoomPrivate(mx, room)) {
@@ -212,29 +213,29 @@ export function MessageForwardInternal({
       content = {
         ...baseContent,
         ...forwardedTextContent,
-        'moe.sable.message.forward': {
+        [prefix.MATRIX_SABLE_UNSTABLE_MESSAGE_FORWARD_META_PROPERTY_NAME]: {
           v: 1,
           is_forwarded: true,
           original_timestamp: mEvent.getTs(),
           original_event_private: true,
         } satisfies ForwardMeta,
-        'com.famedly.app.forwarded': {
+        [prefix.MATRIX_UNSTABLE_MESSAGE_FORWARD_META_PROPERTY_NAME]: {
           origin_server_ts: mEvent.getTs(),
         } satisfies MSC2723ForwardMeta,
       };
     } else {
       content = {
         ...baseContent,
         ...forwardedTextContent,
-        'moe.sable.message.forward': {
+        [prefix.MATRIX_SABLE_UNSTABLE_MESSAGE_FORWARD_META_PROPERTY_NAME]: {
           v: 1,
           is_forwarded: true,
           original_timestamp: mEvent.getTs(),
           original_room_id: room.roomId,
           original_event_id: eventId,
           original_event_private: false,
         } satisfies ForwardMeta,
-        'com.famedly.app.forwarded': {
+        [prefix.MATRIX_UNSTABLE_MESSAGE_FORWARD_META_PROPERTY_NAME]: {
           event_id: eventId,
           room_id: room.roomId,
           origin_server_ts: mEvent.getTs(),

src/app/components/url-preview/ClientPreview.tsx

@@ -5,11 +5,11 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
 import { encodeBlurHash } from '$utils/blurHash';
-import { MATRIX_BLUR_HASH_PROPERTY_NAME } from '$types/matrix/common';
 import { Attachment, AttachmentBox, AttachmentHeader } from '../message/attachment';
 import { Image } from '../media';
 import { UrlPreview } from './UrlPreview';
 import { VideoContent } from '../message';
+import { MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME } from '../../../unstable/prefixes';
 
 interface OEmbed {
   type: 'photo' | 'video' | 'link' | 'rich';
@@ -114,7 +114,7 @@ export const YoutubeElement = as<'div', YoutubeElementProps>(({ videoInfo, embed
           mimeType="fake"
           url={videoUrl}
           info={{
-            thumbnail_info: { [MATRIX_BLUR_HASH_PROPERTY_NAME]: blurHash },
+            thumbnail_info: { [MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME]: blurHash },
           }}
           renderThumbnail={() => (
             <Image

src/app/components/user-profile/UserRoomProfile.tsx

@@ -59,20 +59,21 @@ import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip }
 import { UserHero, UserHeroName } from './UserHero';
 import { KnownMembership } from '$types/matrix-sdk';
 import * as css from './styles.css';
+import * as prefix from '$unstable/prefixes';
 
 const KNOWN_KEYS = new Set([
-  'moe.sable.app.bio',
-  'chat.commet.profile_bio',
-  'chat.commet.profile_banner',
-  'chat.commet.profile_status',
-  'io.fsky.nyx.pronouns',
-  'us.cloke.msc4175.tz',
-  'm.tz',
-  'moe.sable.app.name_color',
+  prefix.MATRIX_SABLE_UNSTABLE_PROFILE_BIOGRAPHY_PROPERTY_NAME,
+  prefix.MATRIX_COMMET_UNSTABLE_PROFILE_BIO_PROPERTY_NAME,
+  prefix.MATRIX_UNSTABLE_PROFILE_BANNER_PROPERTY_NAME,
+  prefix.MATRIX_COMMET_UNSTABLE_PROFILE_STATUS_PROPERTY_NAME,
+  prefix.MATRIX_UNSTABLE_PROFILE_PRONOUNS_PROPERTY_NAME,
+  prefix.MATRIX_UNSTABLE_PROFILE_TIMEZONE_PROPERTY_NAME,
+  prefix.MATRIX_STABLE_PROFILE_TIMEZONE_PROPERTY_NAME,
+  prefix.MATRIX_SABLE_UNSTABLE_NAME_COLOR_PROPERTY_NAME,
   'avatar_url',
   'displayname',
-  'kitty.meow.has_cats',
-  'kitty.meow.is_cat',
+  prefix.MATRIX_SABLE_UNSTABLE_ANIMAL_IDENTITY_IS_CAT_PROPERTY_NAME,
+  prefix.MATRIX_SABLE_UNSTABLE_ANIMAL_IDENTITY_HAS_CAT_PROPERTY_NAME,
 ]);
 
 type UserExtendedSectionProps = {
@@ -142,8 +143,8 @@ function UserExtendedSection({
 
   const bioContent = useMemo(() => {
     let rawBio =
-      profile.extended?.['moe.sable.app.bio'] ||
-      profile.extended?.['chat.commet.profile_bio'] ||
+      profile.extended?.[prefix.MATRIX_SABLE_UNSTABLE_PROFILE_BIOGRAPHY_PROPERTY_NAME] ||
+      profile.extended?.[prefix.MATRIX_COMMET_UNSTABLE_PROFILE_BIO_PROPERTY_NAME] ||
       profile.bio;
 
     if (!rawBio) return null;

src/app/features/room/RoomInput.tsx

@@ -128,7 +128,6 @@ import { getSupportedAudioExtension } from '$plugins/voice-recorder-kit/supporte
 import { sanitizeText } from '$utils/sanitize';
 import { PKitCommandMessageHandler } from '$plugins/pluralkit-handler/PKitCommandMessageHandler';
 import { PKitProxyMessageHandler } from '$plugins/pluralkit-handler/PKitProxyMessageHandler';
-import { MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME } from '$types/matrix/common';
 import type { IGenericMSC4459, MSC4459ImagePackReference } from '$types/matrix/common';
 import {
   getImagePackReferencesForMxc,
@@ -152,6 +151,7 @@ import type {
   AudioRecordingCompletePayload,
 } from './AudioMessageRecorder';
 import { AudioMessageRecorder } from './AudioMessageRecorder';
+import * as prefix from '$unstable/prefixes';
 
 // Returns the event ID of the most recent non-reaction/non-edit event in a thread,
 // falling back to the thread root if no replies exist yet.
@@ -546,10 +546,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           // We intentionally mutate the objects here to avoid unnecessary copying
           // mutating should be unproblematic here, since contents isn't a react component,
           // or used for rendering
-          c['com.beeper.per_message_profile'] = convertPerMessageProfileToBeeperFormat(
-            perMessageProfile,
-            false
-          );
+          c[prefix.MATRIX_UNSTABLE_PER_MESSAGE_PROFILE_PROPERTY_NAME] =
+            convertPerMessageProfileToBeeperFormat(perMessageProfile, false);
         });
       }
 
@@ -827,11 +825,16 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       }
 
       content['m.mentions'] = getMentionContent(Array.from(mentionData.users), mentionData.room);
-      content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = imagePacksUsedRef.current.toJSON();
+      content[prefix.MATRIX_UNSTABLE_IMAGE_SOURCE_PACK_PROPERTY_NAME] =
+        imagePacksUsedRef.current.toJSON();
 
       const links = getLinks(serializedChildren);
-      content['com.beeper.linkpreviews'] = [];
-      links?.forEach((link) => content['com.beeper.linkpreviews'].push({ matched_url: link }));
+      content[prefix.MATRIX_UNSTABLE_EMBEDDED_LINK_PREVIEW_PROPERTY_NAME] = [];
+      links?.forEach((link) =>
+        content[prefix.MATRIX_UNSTABLE_EMBEDDED_LINK_PREVIEW_PROPERTY_NAME].push({
+          matched_url: link,
+        })
+      );
 
       if (replyDraft || !customHtmlEqualsPlainText(formattedBody, body)) {
         content.format = 'org.matrix.custom.html';
@@ -851,18 +854,19 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       if (pmpProxyingEnable && pluralkitProxyMessageHandler.isAProxiedMessage(plainText))
         plainText = pluralkitProxyMessageHandler.stripProxyFromMessage(plainText) ?? plainText;
       if (perMessageProfile) {
-        content['com.beeper.per_message_profile'] = convertPerMessageProfileToBeeperFormat(
-          perMessageProfile,
-          perMessageProfile.name.trim() !== ''
-        );
+        content[prefix.MATRIX_UNSTABLE_PER_MESSAGE_PROFILE_PROPERTY_NAME] =
+          convertPerMessageProfileToBeeperFormat(
+            perMessageProfile,
+            perMessageProfile.name.trim() !== ''
+          );
 
         if (perMessageProfile.name.trim() !== '') {
           // if a per-message profile is used, it must per spec include a fallback
-          const prefix = `${perMessageProfile.name}: `;
+          const pmpPrefix = `${perMessageProfile.name}: `;
 
-          if (!content.body.startsWith(prefix)) {
+          if (!content.body.startsWith(pmpPrefix)) {
             // to prevent double-prefixing when the fallback is already present
-            content.body = prefix + content.body;
+            content.body = pmpPrefix + content.body;
           }
 
           /**
@@ -1171,12 +1175,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       };
 
       // add the image pack reference
-      content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = getImagePackReferencesForMxcWrappedInMap(
-        mxc,
-        mx,
-        ImageUsage.Sticker,
-        room
-      );
+      content[prefix.MATRIX_UNSTABLE_IMAGE_SOURCE_PACK_PROPERTY_NAME] =
+        getImagePackReferencesForMxcWrappedInMap(mxc, mx, ImageUsage.Sticker, room);
 
       /**
        * the currently with the room associated per-message profile, if any, so that it can be included in the message content when sending.
@@ -1186,17 +1186,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       const perMessageProfile = await getCurrentlyUsedPerMessageProfileForRoom(mx, roomId);
 
       if (perMessageProfile) {
-        content['com.beeper.per_message_profile'] = convertPerMessageProfileToBeeperFormat(
-          perMessageProfile,
-          false
-        );
+        content[prefix.MATRIX_UNSTABLE_PER_MESSAGE_PROFILE_PROPERTY_NAME] =
+          convertPerMessageProfileToBeeperFormat(perMessageProfile, false);
       }
-      content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = getImagePackReferencesForMxcWrappedInMap(
-        mxc,
-        mx,
-        ImageUsage.Sticker,
-        room
-      );
+      content[prefix.MATRIX_UNSTABLE_IMAGE_SOURCE_PACK_PROPERTY_NAME] =
+        getImagePackReferencesForMxcWrappedInMap(mxc, mx, ImageUsage.Sticker, room);
 
       if (replyDraft) {
         content['m.relates_to'] = getReplyContent(replyDraft, room);