Make credential card show username/email uniformly in all clients (#771)

mobile-app/app/(tabs)/(credentials)/index.tsx

@@ -89,6 +89,28 @@ export default function CredentialsScreen() {
   const authContext = useAuth();
   const dbContext = useDb();
 
+  /**
+   * Get the display text for a credential, showing username by default,
+   * falling back to email only if username is null/undefined
+   */
+  const getCredentialDisplayText = (cred: Credential): string => {
+    const username = cred.Username ?? '';
+
+    // Show username if available.
+    if (username.length > 0) {
+      return username;
+    }
+
+    // Show email if username is not available.
+    const email = cred.Alias?.Email ?? '';
+    if (email.length > 0) {
+      return email;
+    }
+
+    // Show empty string if neither username nor email is available.
+    return '';
+  };
+
   const isAuthenticated = authContext.isLoggedIn;
   const isDatabaseAvailable = dbContext.dbAvailable;
 
@@ -210,16 +232,9 @@ export default function CredentialsScreen() {
                       <Text style={[styles.serviceName]}>
                         {item.ServiceName ?? 'Unknown Service'}
                       </Text>
-                      {item.Username && (
-                        <Text style={[styles.credentialText]}>
-                          Username: {item.Username}
-                        </Text>
-                      )}
-                      {item.Alias?.Email && (
-                        <Text style={[styles.credentialText]}>
-                          Email: {item.Alias.Email}
-                        </Text>
-                      )}
+                      <Text style={[styles.credentialText]}>
+                        {getCredentialDisplayText(item)}
+                      </Text>
                     </View>
                   </View>
                 </TouchableOpacity>

src/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor

@@ -5,7 +5,7 @@
     <div class="px-4 py-2 text-gray-400 rounded text-center flex flex-col items-center">
         <DisplayFavicon FaviconBytes="@Obj.Logo" Padding="true"></DisplayFavicon>
         <div class="text-gray-900 dark:text-gray-100">@Obj.Service</div>
-        <div class="text-gray-500 dark:text-gray-400">@Obj.Username</div>
+        <div class="text-gray-500 dark:text-gray-400">@GetDisplayText()</div>
     </div>
 </div>
 
@@ -16,6 +16,28 @@
     [Parameter]
     public required CredentialListEntry Obj { get; set; }
 
+    /// <summary>
+    /// Gets the display text for the credential, showing username by default,
+    /// falling back to email only if username is null/empty.
+    /// </summary>
+    private string GetDisplayText()
+    {
+        // Show username if available
+        if (!string.IsNullOrEmpty(Obj.Username))
+        {
+            return Obj.Username;
+        }
+
+        // Show email if username is not available
+        if (!string.IsNullOrEmpty(Obj.Email))
+        {
+            return Obj.Email;
+        }
+
+        // Show empty string if neither username nor email is available
+        return string.Empty;
+    }
+
     /// <summary>
     /// Navigate to the details page of the credential.
     /// </summary>