Support arbitrary ReactNodes as title

web/apps/photos/src/components/Collections/CollectionOptions/AlbumCastDialog.tsx

@@ -12,6 +12,7 @@ import castGateway from "@ente/shared/network/cast";
 import { logError } from "@ente/shared/sentry";
 import { Typography } from "@mui/material";
 import { t } from "i18next";
+import { Trans } from "react-i18next";
 import { useEffect, useState } from "react";
 import { Collection } from "types/collection";
 import { v4 as uuidv4 } from "uuid";
@@ -153,7 +154,7 @@ export default function AlbumCastDialog(props: Props) {
             open={props.show}
             onClose={props.onHide}
             attributes={{
-                title: t("CAST_ALBUM_TO_TV"),
+                title: <Trans i18nKey="CAST_ALBUM_TO_TV"/>,
             }}
         >
             {view === "choose" && (

web/packages/shared/components/DialogBoxV2/types.ts

@@ -2,7 +2,15 @@ import { ButtonProps } from "@mui/material";
 
 export interface DialogBoxAttributesV2 {
     icon?: React.ReactNode;
-    title?: string;
+    /**
+     * The dialog's title
+     *
+     * Usually this will be a string, but it can be any {@link ReactNode}. Note
+     * that it always gets wrapped in a Typography element to set the font
+     * style, so if your ReactNode wants to do its own thing, it'll need to
+     * reset or override these customizations.
+     */
+    title?: React.ReactNode;
     staticBackdrop?: boolean;
     nonClosable?: boolean;
     content?: any;