fix: repo-ref directory display + tag cleanup

Author: zaucy

src/app/reference/repo-ref/repo-ref.component.html

@@ -1,8 +1,18 @@
 <ng-template #loadingTpl>
-	<div>Loading...</div>
+		<div class="max-w-sm m-auto">
+			<p class="text-center m-8">Loading...</p>
+		</div>
 </ng-template>
 
-<ng-container *ngIf="def; else loadingTpl">
+<ng-template #noDefTpl>
+	<ng-container *ngIf="!loading; else loadingTpl">
+		<div class="max-w-sm m-auto">
+			<p class="text-center m-8">Unable to find reference documentation.</p>
+		</div>
+	</ng-container>
+</ng-template>
+
+<ng-container *ngIf="def; else noDefTpl">
 	<!-- https://github.com/angular/angular/issues/20780 -->
 	<div [ngSwitch]="def.kind">
 		<ng-container *ngSwitchCase="'datatype'">

src/app/reference/repo-ref/repo-ref.component.ts

@@ -19,6 +19,7 @@ import {
 })
 export class RepoRefComponent implements OnInit {
 	def?: DoxygenCompoundDef | DoxygenMemberDef;
+	loading = false;
 
 	constructor(
 		private search: Search,
@@ -31,8 +32,14 @@ export class RepoRefComponent implements OnInit {
 			const repo = paramMap.get('repo');
 			const refid = paramMap.get('refid');
 
-			this.def = await this.search.getDef(repo, refid);
-			this.cdr.markForCheck();
+			this.loading = true;
+			try {
+				this.def = await this.search.getDef(repo, refid);
+			} finally {
+				this.loading = false;
+				this.cdr.markForCheck();
+			}
+
 		});
 	}
 }

src/app/reference/repo/repo.component.html

@@ -1,6 +1,6 @@
 <ng-template #compoundsListTpl let-compounds>
 	<p *ngIf="compounds.length === 0">(none)</p>
-	<ul class="list-disc list-inside">
+	<ul class="list-disc list-inside compound-list">
 		<li
 			*ngFor="
 				let compound of sortByName(
@@ -12,8 +12,8 @@
 			<a [doxygenRefidLink]="compound.refid" [title]="compound.name"
 				><code>{{ compound.name }}</code></a
 			>
-			<span>{{ compound.kind }}</span>
-			<span *ngIf="compound.internal">INTERNAL API</span>
+			<span class="kind-tag bg-primary">{{ compound.kind }}</span>
+			<span class="kind-tag bg-error" *ngIf="compound.internal">INTERNAL API</span>
 		</li>
 	</ul>
 </ng-template>
@@ -47,6 +47,7 @@ <h1 id="ref-index">Repository Reference Index</h1>
 		<ng-container *ngSwitchCase="RepoCompoundsView.ByKind">
 			<div class="repo-directories" *ngIf="dirs$ | async as dirs">
 				<div
+					[attr.title]="dir.name"
 					*ngFor="
 						let dir of sortByName(showInternals ? dirs : filterInternal(dirs));
 						trackBy: trackyByRefid

src/app/reference/repo/repo.component.scss

@@ -12,6 +12,7 @@
 }
 
 li.compound-list-item {
+	margin: 4px 0px;
 	font-family: 'Noto Sans Mono', monospace;
 
 	a {
@@ -30,11 +31,46 @@ li.compound-list-item {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	gap: 16px;
-	margin: 16px;
+	margin: 16px 0;
 
 	.repo-dir {
 		border-radius: 6px;
 		padding: 8px;
 		background-color: #392f5a;
+		display: flex;
+		flex-direction: row;
+		overflow: hidden;
+		a {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+.kind-tag {
+	font-size: 70%;
+	display: inline-block;
+	margin: 0 4px;
+	padding: 2px 4px;
+	border-radius: 4px;
+}
+
+@media(max-width: 1024px) {
+	.repo-directories {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+@media(max-width: 599px) {
+	.repo-directories {
+		grid-template-columns: 1fr;
+	}
+
+	.compound-list {
+		margin: 16px 0px;
+	}
+
+	li.compound-list-item {
+		list-style: none;
 	}
 }

src/search/search.service.ts

@@ -34,7 +34,10 @@ function parseDoxygenMember(el: Element): DoxygenMember {
 function parseDoxygenCompound(el: Element): DoxygenCompound {
 	return {
 		...parseDoxygenBase(el),
-		members: Array.from(el.querySelectorAll('member')).map(parseDoxygenMember),
+		members:
+			Array.from(el.querySelectorAll('member'))
+				.map(parseDoxygenMember)
+				.filter(mem => mem.name.indexOf('__') === -1),
 	};
 }
 
@@ -195,7 +198,6 @@ export class Search {
 
 		const index = this._refidMap[refid];
 		if (typeof index !== 'number') {
-			console.log(this._refidMap);
 			throw new Error(`Unknown refid ${refid}`);
 		}
 
@@ -272,9 +274,9 @@ export class Search {
 			xhr.send();
 		});
 
-		const compounds = Array.from(doc.documentElement.children).map(
-			parseDoxygenCompound,
-		);
+		const compounds = Array.from(doc.documentElement.children)
+			.map(parseDoxygenCompound)
+			.filter(compound => compound.name.indexOf('__') === -1);
 
 		this._compounds[repo] = compounds;