feat(ui): Animate a transition between chat state and no chat state

lib/ui/pages/conversation/topbar.dart

@@ -41,7 +41,6 @@ PopupMenuItem<dynamic> popupItemWithIcon(dynamic value, String text, IconData ic
 /// as it should
 // TODO(PapaTutuWawa): The conversation title may overflow the Topbar
 // TODO(Unknown): Maybe merge with BorderlessTopbar
-// TODO(PapaTutuWawa): Make the conversation title go up, when we display "online" and down if we don't have to anymore
 class ConversationTopbar extends StatelessWidget implements PreferredSizeWidget {
   const ConversationTopbar({ super.key });
 
@@ -75,6 +74,10 @@ class ConversationTopbar extends StatelessWidget implements PreferredSizeWidget
     } 
   }
 
+  bool _isChatStateVisible(ChatState state) {
+    return state != ChatState.inactive && state != ChatState.gone;
+  }
+  
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<ConversationBloc, ConversationState>(
@@ -110,10 +113,39 @@ class ConversationTopbar extends StatelessWidget implements PreferredSizeWidget
                             conversation: context.read<ConversationBloc>().state.conversation,
                           ),
                         ),
-                        child: Column(
+                        child: Stack(
                           children: [
-                            TopbarTitleText(state.conversation!.title),
+                            AnimatedPositioned(
-                            _buildChatState(state.conversation!.chatState),
+                              duration: const Duration(milliseconds: 200),
+                              top: _isChatStateVisible(state.conversation!.chatState) ?
+                                0 :
+                                10,
+                              left: 0,
+                              right: 0,
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                children: [
+                                  TopbarTitleText(state.conversation!.title),
+                                ],
+                              ),
+                            ),
+                            Positioned(
+                              left: 0,
+                              right: 0,
+                              bottom: 0,
+                              child: AnimatedOpacity(
+                                opacity: _isChatStateVisible(state.conversation!.chatState) ?
+                                  1.0 :
+                                  0.0,
+                                duration: const Duration(milliseconds: 100),
+                                child: Row(
+                                  mainAxisAlignment: MainAxisAlignment.center,
+                                  children: [
+                                    _buildChatState(state.conversation!.chatState),
+                                  ],
+                                ),
+                              ),
+                            ),
                           ],
                         ),
                       ),

lib/ui/widgets/topbar.dart

@@ -4,12 +4,14 @@ class TopbarTitleText extends StatelessWidget {
   const TopbarTitleText(this.text, { super.key });
   final String text;
 
+  static const double fontSize = 20;
+  
   @override
   Widget build(BuildContext context) {
     return Text(
       text,
       style: const TextStyle(
-        fontSize: 20,
+        fontSize: fontSize,
       ),
     );
   }