mobile chat is functional, a bit more work is needed to get it right

Author: NielsPilgaard

src/web/Client/Features/Chat/ChatSelector.razor

@@ -1,4 +1,4 @@
-<MudItem Class="chat-selector-window" md="3" lg="3" xl="3" xxl="3">
+<MudItem Class="chat-selector-window" xs="12" sm="12" md="3" lg="3" xl="3" xxl="3">
     <MudList Clickable>
         <MudListSubheader>
             <UserAutoComplete SelectedUserChanged="StartNewChat" />

src/web/Client/Features/Chat/LargeChatComponent.razor

@@ -3,6 +3,7 @@
 @inject IProfileCache ProfileCache
 @inject ISnackbar Snackbar
 @inject IJSRuntime JsRuntime
+@inject IBrowserViewportService BrowserViewportService
 @inject ChatSignalRClient ChatSignalRClient
 @attribute [Authorize]
 
@@ -14,18 +15,35 @@
 <MudLoading @bind-Loading="_isLoading" Darken Overlap>
     <MudGrid Style="height: 600px">
 
-        <ChatSelector CurrentUser="_currentUser" Chats="_chats" SelectChatCallback="SelectChat" StartNewChatCallback="StartNewChat"/>
+        @if ((_activeChat is null && _isMobile) || _isMobile is false)
+        {
+            <ChatSelector CurrentUser="_currentUser" Chats="_chats" SelectChatCallback="SelectChat" StartNewChatCallback="StartNewChat"/>
+        }
 
-        <MudItem md="1" lg="1" xl="1" xxl="1">
-            <MudDivider Vertical DividerType="DividerType.FullWidth"/>
-        </MudItem>
+        @if (_isMobile is false)
+        {
+            <MudItem md="1" lg="1" xl="1" xxl="1">
+                <MudDivider Vertical DividerType="DividerType.FullWidth"/>
+            </MudItem>
+        }
+
+        @if (_activeChat is not null)
+        {
+            <MudItem Class="chat-message-window" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8">
+                @if (_isMobile)
+                {
+                    @*something like a banner is needed here, with display name and back button
+                        Use MudAppBar
+                    *@
+                    <MudScrollToTop OnClick="BackToList"></MudScrollToTop>
+                    <MudFab StartIcon="@Icons.Material.Filled.ArrowBack" OnClick="BackToList" Color="Color.Primary"/>
+                    <MudText>@_activeChat.GetDisplayName(_currentUser.Id)</MudText>
+
+                }
 
-        <MudItem Class="chat-message-window" md="8" lg="8" xl="8" xxl="8">
-            @if (_activeChat != null)
-            {
                 <MudList Class="chat-message-list" DisablePadding Dense>
 
-                <ChatMessageList CurrentUser="_currentUser" ActiveChat="_activeChat" />
+                    <ChatMessageList CurrentUser="_currentUser" ActiveChat="_activeChat"/>
 
 
                     <MudAnimate @ref="_messageSuccessfullySentAnimation"
@@ -56,8 +74,8 @@
                                   AdornmentColor="@(string.IsNullOrEmpty(_userText) ? Color.Default : Color.Primary)"
                                   OnAdornmentClick="SendMessage"/>
                 </MudList>
-            }
-        </MudItem>
+            </MudItem>
+        }
     </MudGrid>
 </MudLoading>
 
@@ -73,9 +91,11 @@
 
     private bool _isActiveChatPublished = true;
     private bool _isLoading = true;
+    private bool _isMobile = true;
 
     private MudAnimate _messageSuccessfullySentAnimation = null!;
     private Dictionary<Guid, Guid> _lastSuccessfullySentMessageForChat = new();
+
     private bool LastMessageWasSentSuccessfullyByCurrentUser
     {
         get
@@ -107,6 +127,9 @@
             return;
         }
 
+        var currentBreakpoint = await BrowserViewportService.GetCurrentBreakpointAsync();
+        _isMobile = currentBreakpoint <= Breakpoint.SmAndDown;
+
         _chats = await ChatService.GetChats(_currentUser.Id);
         if (ChatId is not null)
         {

src/web/Client/Pages/Chat/ChatPage.razor

@@ -5,14 +5,9 @@
 
 <MudContainer MaxWidth="MaxWidth.Large">
     <MudPaper Class="pa-6" Elevation="5">
+        
 
-        <MudHidden Breakpoint="Breakpoint.MdAndUp">
-            <SmallChatComponent />
-        </MudHidden>
-
-        <MudHidden Invert Breakpoint="Breakpoint.MdAndUp">
             <LargeChatComponent ChatId="ChatId"/>
-        </MudHidden>
 
     </MudPaper>
 </MudContainer>