feat: use canonical room alias for room completion

Author: aviraldg

src/autocomplete/Components.js

@@ -13,7 +13,7 @@ export function TextualCompletion({
         <div style={{width: '100%'}}>
             <span>{title}</span>
             <em>{subtitle}</em>
-            <span style={{color: 'gray'}}>{description}</span>
+            <span style={{color: 'gray', float: 'right'}}>{description}</span>
         </div>
     );
 }

src/autocomplete/RoomProvider.js

@@ -4,6 +4,7 @@ import Q from 'q';
 import MatrixClientPeg from '../MatrixClientPeg';
 import Fuse from 'fuse.js';
 import {TextualCompletion} from './Components';
+import {getDisplayAliasForRoom} from '../MatrixTools';
 
 const ROOM_REGEX = /(?=#)([^\s]*)/g;
 
@@ -27,16 +28,18 @@ export default class RoomProvider extends AutocompleteProvider {
             // the only reason we need to do this is because Fuse only matches on properties
             this.fuse.set(client.getRooms().filter(room => !!room).map(room => {
                 return {
+                    room: room,
                     name: room.name,
                     roomId: room.roomId,
                     aliases: room.getAliases(),
                 };
             }));
             completions = this.fuse.search(command[0]).map(room => {
+                let displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
-                    completion: room.roomId,
+                    completion: displayAlias,
                     component: (
-                        <TextualCompletion title={room.name} subtitle={room.roomId} />
+                        <TextualCompletion title={room.name} description={displayAlias} />
                     ),
                     range,
                 };