show supported platforms on client tile

src/client/ClientView.js

@@ -16,13 +16,23 @@ limitations under the License.
 
 import {TemplateView} from "../utils/TemplateView.js";
 
+function formatPlatforms(platforms) {
+	return platforms.reduce((str, p, i) => {
+		const first = i === 0;
+		const last = i === platforms.length - 1;
+		return str + (first ? "" : last ? " & " : ", ") + p;
+	}, "");
+}
+
 export class ClientView extends TemplateView {
+
 	render(t, vm) {
 		return t.div({className: "ClientView"}, [
 			t.div({className: "header"}, [
 				t.div({className: "description"}, [
 					t.h3(vm.name),
 					t.p(vm.description),
+					t.p(formatPlatforms(vm.platforms)),
 				]),
 				t.div({className: `icon ${vm.clientId}`})
 			]),

src/client/ClientViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {isWebPlatform, Platform} from "./Platform.js";
+import {isWebPlatform, isDesktopPlatform, Platform} from "./Platform.js";
 import {ViewModel} from "../utils/ViewModel.js";
 
 export class ClientViewModel extends ViewModel {
@@ -85,6 +85,28 @@ export class ClientViewModel extends ViewModel {
 		return this._client.getLinkInstructions(this._proposedPlatform, this._link);
 	}
 
+	get platforms() {
+		const platforms = this._client.platforms;
+		const textPlatforms = [];
+		const hasWebPlatform = platforms.some(p => isWebPlatform(p));
+		if (hasWebPlatform) {
+			textPlatforms.push("Web");
+		}
+		const desktopPlatforms = platforms.filter(p => isDesktopPlatform(p));
+		if (desktopPlatforms.length === 1) {
+			textPlatforms.push(desktopPlatforms[0]);
+		} else {
+			textPlatforms.push("Desktop");
+		}
+		if (platforms.includes(Platform.Android)) {
+			textPlatforms.push("Android");
+		}
+		if (platforms.includes(Platform.iOS)) {
+			textPlatforms.push("iOS");
+		}
+		return textPlatforms;
+	}
+	
 	deepLinkActivated() {
 		this._pickClient(this._client);
 		this.preferences.setClient(this._client.id, this._proposedPlatform);

src/client/Platform.js

@@ -35,3 +35,8 @@ export function guessApplicablePlatforms(userAgent) {
 export function isWebPlatform(p) {
 	return p === Platform.DesktopWeb || p === Platform.MobileWeb;
 }
+
+
+export function isDesktopPlatform(p) {
+	return p === Platform.Linux || p === Platform.Windows || p === Platform.macOS;
+}