tweak(cfx-ui): experimental server list cleanup

Use `sets sv_projectName` and `sets sv_projectDesc` to set a project name
and/or description, which will _not_ be cut off as the hostname field is.

For example:

    sets sv_projectName "Transport Tycoon #1"
    sets sv_projectDesc "Earn your way to the top!"

ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.html

@@ -15,7 +15,7 @@
 	>
 	</div>
 
-    <figure class="icon" (click)="attemptConnect($event)" #iconFigure>
+    <figure class="icon" #iconFigure>
         <img [src]="server.sanitizedUri" (error)="server.setDefaultIcon()" *ngIf="premium == 'pt' || server.isDefaultIcon">
 	</figure>
 
@@ -29,7 +29,19 @@
 		<span><div>{{ premium }}</div></span>
 	</div>
 
-    <div class="name" [innerHTML]="server.hostname | allowify | escape | colorize:{trust: true}"></div>
+	<div class="locale"><span data-balloon-pos="right" [attr.aria-label]="localeName" [class]="'flag-icon flag-icon-' + localeCountry"></span></div>
+
+    <div *ngIf="!server.data.vars?.sv_projectName" class="name" [innerHTML]="server.hostname | allowify | escape | colorize:{trust: true}"></div>
+	<div *ngIf="server.data.vars?.sv_projectName" class="name projectName">
+		<strong [innerHTML]="server.data.vars?.sv_projectName | allowify | escape | colorize:{trust: true}"></strong>
+		<span [innerHTML]="server.data.vars?.sv_projectDesc | allowify | escape"></span>
+	</div>
+
+	<div class="tags">
+		<span *ngFor="let tag of tags">
+			{{tag}}
+		</span>
+	</div>
 
     <div class="actions" *ngIf="!isPinList">
 		<button

ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.scss

@@ -55,6 +55,33 @@
 			width: var(--q4);
 			font-size: calc(var(--fs-1) * 0.8);
 		}
+
+		.locale {
+			display: none;
+		}
+
+		.name {
+			&:after {
+				@include theme() using ($theme) {
+					$pinColor: mix(gtv($theme, bgColor), gtv($theme, accentColor2), 85%);
+					background-image: linear-gradient(90deg, rgba($pinColor, 0.0) 50%, rgba($pinColor, 1.0) 60%);
+				}
+			}
+
+			&.projectName {
+				strong {
+					display: block;
+				}
+
+				> span {
+					margin-left: 0;
+				}
+			}
+		}
+
+		.tags {
+			display: none;
+		}
 	}
 
 	.premium {
@@ -101,6 +128,15 @@
 		}
 	}
 
+	.locale {
+		margin-left: var(--qh);
+
+		.flag-icon {
+			height: 1em;
+			vertical-align: middle;
+		}
+	}
+
 	.badge {
 		margin-left: var(--qh);
 	}
@@ -122,6 +158,58 @@
 		};
 
 		font-feature-settings: 'case', 'liga' 1;
+
+		position: relative;
+
+		&.projectName {
+			&:after {
+				display: none;
+			}
+
+			strong {
+				font-weight: inherit;
+			}
+
+			> span {
+				font-size: calc(var(--fs-1) * 0.8);
+				margin-left: 0.5em;
+
+				@include theme() using ($theme) {
+					color: rgba(gtv($theme, fgColor), .6);
+				}
+
+				filter: saturate(0%);
+			}
+		}
+
+		&:after {
+			position: absolute;
+			right: 0px;
+			bottom: 0px;
+			top: 0px;
+			left: 0px;
+			content: ' ';
+
+			@include theme() using ($theme) {
+				background-image: linear-gradient(90deg, rgba(gtv($theme, bgColor), 0.0) 15%, rgba(gtv($theme, bgColor), 1.0) 25%);
+			}
+		}
+	}
+
+	.tags {
+		flex-shrink: 0;
+		justify-content: flex-end;
+
+		span {
+			display: inline-block;
+			font-size: calc(var(--fs-1) * 0.75);
+			padding: calc(var(--qh) * 0.5);
+			margin-right: calc(var(--qh) * 0.5);
+
+			@include theme() using ($theme) {
+				background-color: mix(gtv($theme, bgColor), gtv($theme, accentColor2), 85%);
+			}
+		}
 	}
 
 	.actions {
@@ -283,5 +371,15 @@
 				}
 			}
 		}
+
+		.tags {
+			opacity: 0;
+		}
+
+		.name {
+			&:after {
+				opacity: 0;
+			}
+		}
 	}
 }

ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.ts

@@ -13,6 +13,7 @@ import * as hoverintent from 'hoverintent';
 import { ServersService } from '../../servers.service';
 
 import parseAPNG, { isNotAPNG } from '@citizenfx/apng-js';
+import { ServerTagsService } from 'app/servers/server-tags.service';
 
 @Component({
 	moduleId: module.id,
@@ -39,7 +40,7 @@ export class ServersListItemComponent implements OnInit, OnChanges, OnDestroy, A
 
 	private upvoting = false;
 
-	constructor(private gameService: GameService, private discourseService: DiscourseService,
+	constructor(private gameService: GameService, private discourseService: DiscourseService, private tagService: ServerTagsService,
 		private serversService: ServersService, private router: Router, private elementRef: ElementRef,
 		private zone: NgZone, private renderer: Renderer2) { }
 
@@ -242,4 +243,28 @@ export class ServersListItemComponent implements OnInit, OnChanges, OnDestroy, A
 			this.upvoting = false;
 		}).catch(_=>_);
 	}
+
+	get locale() {
+		return this.server?.data?.vars?.locale ?? 'root-001';
+	}
+
+	get localeCountry() {
+		const parts = this.locale.split('-');
+		return parts[parts.length - 1].toLowerCase();
+	}
+
+	get localeName() {
+		return this.tagService.getLocaleDisplayName(this.locale);
+	}
+
+	get tags() {
+		const tagList = Array.from(new Set<string>(((this.server.data?.vars?.tags as string) ?? '').split(',').map(a => a.trim())));
+		const tagsByCount = tagList.map(a => this.tagService.coreTags[a]).filter(a => a).sort((a, b) => (b.count - a.count));
+
+		if (tagsByCount.length > 4) {
+			tagsByCount.length = 4;
+		}
+
+		return tagsByCount.map(a => a.name);
+	}
 }

ext/cfx-ui/src/app/servers/server-tags.service.ts

@@ -23,12 +23,20 @@ export class ServerLocale {
 
 cldrjs.load(cldrLocales, cldrLanguages, cldrTerritories, cldrSubTags);
 
+function fromEntries<TValue>(iterable: [string, TValue][]): { [key: string]: TValue } {
+	return [...iterable].reduce<{ [key: string]: TValue }>((obj, [key, val]) => {
+		(obj as any)[key] = val;
+		return obj;
+	}, {} as any);
+}
+
 @Injectable()
 export class ServerTagsService {
 	serverTags: { [addr: string]: true } = {};
 	serverLocale: { [addr: string]: true } = {};
 
 	tags: ServerTag[] = [];
+	coreTags: { [key: string]: ServerTag } = {};
 	locales: ServerLocale[] = [];
 
 	onUpdate = new EventEmitter<void>();
@@ -62,6 +70,7 @@ export class ServerTagsService {
 
 	private updateTagList() {
 		const tags = Object.entries(this.tagsIndex).sort((a, b) => b[1] - a[1]);
+		this.coreTags = fromEntries(tags.map(([name, count]) => ([name, { name, count }])));
 
 		tags.length = Math.min(50, tags.length);
 

ext/cfx-ui/src/app/servers/server.ts

@@ -135,6 +135,14 @@ export class Server {
         this.int = object;
         this.connectEndPoints = object.connectEndPoints;
 
+		if (this.data?.vars?.sv_projectName?.length >= 50) {
+			this.data.vars.sv_projectName = this.data.vars.sv_projectName.substring(0, 50);
+		}
+
+		if (this.data?.vars?.sv_projectDesc?.length >= 150) {
+			this.data.vars.sv_projectDesc = this.data.vars.sv_projectDesc.substring(0, 150);
+		}
+
         if (!object.iconVersion && sanitizer) {
             this.setDefaultIcon();
         } else {