feat: Refactor client hubs to centralize hub actions and update UI styling.

apps/mobile/packages/design_system/lib/src/widgets/ui_app_bar.dart

@@ -8,6 +8,7 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget {
   const UiAppBar({
     super.key,
     this.title,
+    this.subtitle,
     this.titleWidget,
     this.leading,
     this.actions,
@@ -21,6 +22,9 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget {
   /// The title text to display in the app bar.
   final String? title;
 
+  /// The subtitle text to display in the app bar.
+  final String? subtitle;
+
   /// A widget to display instead of the title text.
   final Widget? titleWidget;
 
@@ -53,7 +57,19 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget {
     return AppBar(
       title:
           titleWidget ??
-          (title != null ? Text(title!, style: UiTypography.headline4b) : null),
+          (title != null
+              ? Column(
+                  crossAxisAlignment: centerTitle
+                      ? CrossAxisAlignment.center
+                      : CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: <Widget>[
+                    Text(title!, style: UiTypography.headline4b),
+                    if (subtitle != null)
+                      Text(subtitle!, style: UiTypography.body3r.textSecondary),
+                  ],
+                )
+              : null),
       leading:
           leading ??
           (showBackButton