Move ringing status indicator to header on mobile

On mobile, the ringing status indicator is supposed to display in the header rather than on a tile. The exact layout differs between Android and iOS. To get it right I had to refactor AppBar to use CSS grid templates.

(Also, I changed my mind about the exact ringing data I needed out of CallViewModel - sorry. A little move of the ringtone audio renderer into its own component was necessary to accommodate that.)

src/tile/RingingStatus.tsx

@@ -0,0 +1,41 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import {
+  VideoCallSolidIcon,
+  VoiceCallSolidIcon,
+  EndCallIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
+
+import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
+import { useBehavior } from "../useBehavior";
+
+interface Props {
+  vm: RingingMediaViewModel;
+}
+
+export const RingingStatus: FC<Props> = ({ vm }) => {
+  const { t } = useTranslation();
+  const pickupState = useBehavior(vm.pickupState$);
+  const Icon =
+    pickupState === "ringing"
+      ? vm.intent === "video"
+        ? VideoCallSolidIcon
+        : VoiceCallSolidIcon
+      : EndCallIcon;
+
+  return (
+    <>
+      <Icon aria-hidden />
+      {pickupState === "ringing"
+        ? t("video_tile.calling")
+        : t("video_tile.call_ended")}
+    </>
+  );
+};