(wip): migrate ttp to mtp -> snake case to pascal case

packages/call/src/components/buttons/invite.tsx

@@ -61,15 +61,15 @@ export default function InviteButton({
         >
           {contacts.map((contact) => (
             <Wrapper
-              key={contact.user_id}
-              userId={contact.user_id}
+              key={contact.UserId}
+              userId={contact.UserId}
               loading={<div>Loading...</div>}
               component={(user) => (
                 <Button
                   className="w-full justify-start"
                   variant="ghost"
                   onClick={() => {
-                    void sendCallInvite(contact.user_id).catch((err) => {
+                    void sendCallInvite(contact.UserId).catch((err) => {
                       toast(
                         "error",
                         "Failed to send call invite. Check console for details.",

packages/call/src/components/modals/base.tsx

@@ -115,7 +115,7 @@ function Overlay({
   user: User;
   participant: Participant;
 }) {
-  const isAdmin = getRoomMetadata()?.admins.includes(user.user_id) === true;
+  const isAdmin = getRoomMetadata()?.admins.includes(user.UserId) === true;
   const isDeafened = participant.attributes["deafened"] === "true";
 
   return (
@@ -171,7 +171,7 @@ export default function Base({
   const [avatarBackgroundColor, setAvatarBackgroundColor] = useState<
     string | undefined
   >(undefined);
-  const isSpeaking = useIsSpeaking(user?.user_id ?? -1);
+  const isSpeaking = useIsSpeaking(user?.UserId ?? -1);
   const screenSharePublication = getTrackPublicationBySource(
     participant,
     Track.Source.ScreenShare,
@@ -242,12 +242,12 @@ export default function Base({
 
   const onClick = () => {
     if (view === "grid") {
-      focusParticipant(user.user_id, type);
+      focusParticipant(user.UserId, type);
     } else {
-      if (user.user_id === focusedParticipantId) {
+      if (user.UserId === focusedParticipantId) {
         setCallView("grid");
       } else {
-        focusParticipant(user.user_id, type);
+        focusParticipant(user.UserId, type);
       }
     }
   };
@@ -256,7 +256,7 @@ export default function Base({
     screenSharePublication?.isSubscribed && screenSharePublication.track;
 
   const isFocusedInFocusedView =
-    view === "focused" && user.user_id === focusedParticipantId;
+    view === "focused" && user.UserId === focusedParticipantId;
 
   return (
     <UIContextMenu>
@@ -276,7 +276,7 @@ export default function Base({
                       variant="outline"
                       onClick={(event) => {
                         if (isFocusedInFocusedView) event.stopPropagation();
-                        startWatchingStream(user.user_id);
+                        startWatchingStream(user.UserId);
                       }}
                     >
                       Watch Stream
@@ -286,7 +286,7 @@ export default function Base({
                         variant="outline"
                         onClick={(event) => {
                           event.stopPropagation();
-                          startWatchingStream(user.user_id);
+                          startWatchingStream(user.UserId);
                         }}
                       >
                         <Plus className="w-8 h-8" />
@@ -295,8 +295,7 @@ export default function Base({
                   </div>
                 )}
                 {view === "grid" ||
-                (view === "focused" &&
-                  user.user_id !== focusedParticipantId) ? (
+                (view === "focused" && user.UserId !== focusedParticipantId) ? (
                   <Overlay type={type} user={user} participant={participant} />
                 ) : null}
               </>

packages/call/src/components/modals/contextMenu.tsx

@@ -36,8 +36,8 @@ export default function ContextMenu({
 
   return (
     <ContextMenuContent className="p-1">
-      {watchedStreamParticipantIds.includes(user.user_id) &&
-      user.user_id !== ownId ? (
+      {watchedStreamParticipantIds.includes(user.UserId) &&
+      user.UserId !== ownId ? (
         <ContextMenuItem variant="destructive">Stop Watching</ContextMenuItem>
       ) : null}
       <ContextMenuItem>Profile</ContextMenuItem>

packages/call/src/components/top.tsx

@@ -70,7 +70,7 @@ export default function TopBar() {
     <div className="w-full flex justify-between h-12">
       <div className="flex gap-1 m-3 ml-7">
         {users.map((user) => (
-          <div key={user.user_id} className="-ml-4">
+          <div key={user.UserId} className="-ml-4">
             <Tooltip>
               <TooltipTrigger
                 render={