fix(mobile): immich app bar tap radius (#4816)

* mobile: tool-tip for server url in app bar dialog

* fix: Add Inkwell around the entire profile image

* mobile: open documentation and github in browser

---------

Co-authored-by: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/shared/ui/app_bar_dialog/app_bar_dialog.dart

@@ -194,6 +194,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
                 Navigator.of(context).pop();
                 launchUrl(
                   Uri.parse('https://immich.app'),
+                  mode: LaunchMode.externalApplication,
                 );
               },
               child: Text(
@@ -213,6 +214,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
                 Navigator.of(context).pop();
                 launchUrl(
                   Uri.parse('https://github.com/immich-app/immich'),
+                  mode: LaunchMode.externalApplication,
                 );
               },
               child: Text(

mobile/lib/shared/ui/app_bar_dialog/app_bar_server_info.dart

@@ -182,19 +182,36 @@ class AppBarServerInfo extends HookConsumerWidget {
                     child: Container(
                       width: 200,
                       padding: const EdgeInsets.only(right: 10.0),
-                      child: Text(
-                        getServerUrl() ?? '--',
-                        style: TextStyle(
-                          fontSize: 11,
-                          color: Theme.of(context)
-                              .textTheme
-                              .labelSmall
-                              ?.color
-                              ?.withOpacity(0.5),
+                      child: Tooltip(
+                        verticalOffset: 0,
+                        decoration: BoxDecoration(
+                          color:
+                              Theme.of(context).primaryColor.withOpacity(0.9),
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        textStyle: TextStyle(
+                          color: Theme.of(context).brightness == Brightness.dark
+                              ? Colors.black
+                              : Colors.white,
                           fontWeight: FontWeight.bold,
-                          overflow: TextOverflow.ellipsis,
                         ),
-                        textAlign: TextAlign.end,
+                        message: getServerUrl() ?? '--',
+                        preferBelow: false,
+                        triggerMode: TooltipTriggerMode.tap,
+                        child: Text(
+                          getServerUrl() ?? '--',
+                          style: TextStyle(
+                            fontSize: 11,
+                            color: Theme.of(context)
+                                .textTheme
+                                .labelSmall
+                                ?.color
+                                ?.withOpacity(0.5),
+                            fontWeight: FontWeight.bold,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                          textAlign: TextAlign.end,
+                        ),
                       ),
                     ),
                   ),

mobile/lib/shared/ui/immich_app_bar.dart

@@ -31,7 +31,7 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isDarkMode = Theme.of(context).brightness == Brightness.dark;
     const widgetSize = 30.0;
 
-    buildProfilePhoto() {
+    buildProfileIndicator() {
       return InkWell(
         onTap: () => showDialog(
           context: context,
@@ -39,37 +39,33 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
           builder: (ctx) => const ImmichAppBarDialog(),
         ),
         borderRadius: BorderRadius.circular(12),
-        child: authState.profileImagePath.isEmpty || user == null
-            ? const Icon(
-                Icons.face_outlined,
-                size: widgetSize,
-              )
-            : UserCircleAvatar(
-                radius: 15,
-                size: 27,
-                user: user,
-              ),
-      );
-    }
-
-    buildProfileIndicator() {
-      return Badge(
-        label: Container(
-          decoration: BoxDecoration(
-            color: Colors.black,
-            borderRadius: BorderRadius.circular(widgetSize / 2),
-          ),
-          child: const Icon(
-            Icons.info,
-            color: Color.fromARGB(255, 243, 188, 106),
-            size: widgetSize / 2,
+        child: Badge(
+          label: Container(
+            decoration: BoxDecoration(
+              color: Colors.black,
+              borderRadius: BorderRadius.circular(widgetSize / 2),
+            ),
+            child: const Icon(
+              Icons.info,
+              color: Color.fromARGB(255, 243, 188, 106),
+              size: widgetSize / 2,
+            ),
           ),
+          backgroundColor: Colors.transparent,
+          alignment: Alignment.bottomRight,
+          isLabelVisible: serverInfoState.isVersionMismatch,
+          offset: const Offset(2, 2),
+          child: authState.profileImagePath.isEmpty || user == null
+              ? const Icon(
+                  Icons.face_outlined,
+                  size: widgetSize,
+                )
+              : UserCircleAvatar(
+                  radius: 15,
+                  size: 27,
+                  user: user,
+                ),
         ),
-        backgroundColor: Colors.transparent,
-        alignment: Alignment.bottomRight,
-        isLabelVisible: serverInfoState.isVersionMismatch,
-        offset: const Offset(2, 2),
-        child: buildProfilePhoto(),
       );
     }