♻️ refactor(app): remove not used imports, add version to "footer"

drackp2m · Nov 13, 2024 · 7aa9f6b · 7aa9f6b
1 parent 9e3a864
commit 7aa9f6b
Show file tree

Hide file tree

Showing 37 changed files with 74 additions and 102 deletions.
diff --git a/.github/release-notes/template.hbs b/.github/release-notes/template.hbs
@@ -1,4 +1,4 @@
-# v{{version}} {{date}}
+# v{{version}} ({{date}})
 
 ## What's Changed
 {{#each commitGroups}}

diff --git a/apps/app/src/app/app.component.ts b/apps/app/src/app/app.component.ts
@@ -5,10 +5,36 @@ import { SendPingGQL } from '@playsetonline/apollo-definitions';
 
 import { pingValue } from './app.config';
 
+import { version } from '@package';
+
 @Component({
 	standalone: true,
 	selector: 'app-root',
-	template: `<router-outlet />`,
+	template: `<router-outlet />
+		<span id="app-version" class="text-sm align-self-center mb-xs" [attr.data-text]="'v' + version">
+			v{{ version }}
+		</span>`,
+	styles: `
+		:host {
+			display: flex;
+			flex-direction: column;
+
+			#app-version {
+				position: fixed;
+				bottom: 0;
+
+				position: fixed;
+				color: rgb(255 255 255 / 90%);
+
+				&::before {
+					content: attr(data-text);
+					position: absolute;
+					-webkit-text-stroke: 2px rgb(0 0 0 / 30%);
+					z-index: -1;
+				}
+			}
+		}
+	`,
 	imports: [RouterOutlet],
 	providers: [SendPingGQL],
 })
@@ -17,6 +43,8 @@ export class AppComponent {
 
 	private readonly pingValue = pingValue;
 
+	version = version;
+
 	title = 'app';
 
 	constructor() {

diff --git a/apps/app/src/app/component/card-shape/card-shape.component.ts b/apps/app/src/app/component/card-shape/card-shape.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, computed, input } from '@angular/core';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -8,7 +7,6 @@ import { CardColor, CardShading, CardShape } from '@playsetonline/api-definition
 	selector: 'app-card-shape',
 	templateUrl: './card-shape.component.html',
 	styleUrl: './card-shape.component.scss',
-	imports: [NgIf],
 })
 export class CardShapeComponent {
 	shape = input.required<string, CardShape>({

diff --git a/apps/app/src/app/component/card/card.component.scss b/apps/app/src/app/component/card/card.component.scss
@@ -2,7 +2,7 @@
 	aspect-ratio: 1 / 0.6666;
 	height: 100%;
 
-	background: white;
+	background-color: white;
 	border: solid 0.1rem #e5e5e5;
 	border-radius: 3.3% / 5%;
 

diff --git a/apps/app/src/app/component/card/card.component.ts b/apps/app/src/app/component/card/card.component.ts
@@ -1,4 +1,3 @@
-import { NgFor, NgIf } from '@angular/common';
 import { Component, computed, input } from '@angular/core';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -10,7 +9,7 @@ import { CardShapeComponent } from '../card-shape/card-shape.component';
 	selector: 'app-card',
 	templateUrl: './card.component.html',
 	styleUrl: './card.component.scss',
-	imports: [NgIf, NgFor, CardShapeComponent],
+	imports: [CardShapeComponent],
 })
 export class CardComponent {
 	private readonly hello = 22;

diff --git a/apps/app/src/app/layout/main/main.layout.ts b/apps/app/src/app/layout/main/main.layout.ts
@@ -1,6 +1,6 @@
-import { AsyncPipe, JsonPipe, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, OnInit, inject, signal } from '@angular/core';
-import { Router, RouterModule } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { SwUpdate } from '@angular/service-worker';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -21,12 +21,11 @@ import { UserStore } from '../../store/user.store';
 	templateUrl: './main.layout.html',
 	styleUrl: './main.layout.scss',
 	imports: [
-		RouterModule,
+		RouterOutlet,
+		RouterLink,
+		RouterLinkActive,
 		NgTemplateOutlet,
 		MediaDebugComponent,
-		NgIf,
-		JsonPipe,
-		AsyncPipe,
 		CardShapeComponent,
 	],
 	providers: [GetPingsGQL, GetUserInfoGQL],

diff --git a/apps/app/src/app/page/example/component/menu/example-menu.component.ts b/apps/app/src/app/page/example/component/menu/example-menu.component.ts
@@ -7,7 +7,7 @@ import { RouterModule } from '@angular/router';
 	selector: 'app-example-menu',
 	imports: [NgTemplateOutlet, RouterModule],
 	template: `
-		<nav class="flex-row flex-wrap my-md gap-sm">
+		<nav class="flex-row flex-wrap gap-sm">
 			<ng-container
 				*ngTemplateOutlet="button; context: { text: 'Typographies', link: '/example/typographies' }"
 			/>

diff --git a/apps/app/src/app/page/example/example.page.html b/apps/app/src/app/page/example/example.page.html
@@ -1,9 +1,9 @@
-<main id="example" class="content-fixed pt-lg pb-xxl">
+<main id="example" class="content-fixed flex-col pt-lg pb-xxl gap-lg">
 	<app-example-menu />
 
-	<h2 class="mt-xl">{{ hello() }}</h2>
+	<h2>{{ hello() }}</h2>
 
-	<section id="media-query-indicator" class="mt-xl">
+	<section id="media-query-indicator">
 		<ul class="flex-row gap-sm lg:gap-md">
 			<li class="round-sm p-xs px-sm color-vivid surface-radiant xs-o:surface-serene">xs</li>
 			<li class="round-sm p-xs px-sm color-vivid surface-radiant sm-o:surface-serene">sm</li>
@@ -13,7 +13,7 @@ <h2 class="mt-xl">{{ hello() }}</h2>
 		</ul>
 	</section>
 
-	<section id="logos" class="flex-row flex-wrap justify-center gap-lg mt-xl">
+	<section id="logos" class="flex-row flex-wrap justify-center gap-lg">
 		<a href="https://nx.dev" target="_blank">
 			<app-glitch-svg
 				svgPath="assets/logos/nx.svg"
@@ -56,7 +56,7 @@ <h2 class="mt-xl">{{ hello() }}</h2>
 		</a>
 	</section>
 
-	<section class="flex-col gap-md align-center mt-lg">
+	<section class="flex-col gap-md align-center">
 		<button
 			class="p-sm md:p-md surface-radiant round-md xl-o:surface-vivid"
 			(click)="initSubscription()"

diff --git a/apps/app/src/app/page/example/example.page.scss b/apps/app/src/app/page/example/example.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: #fff;
-
 	#logos {
 		a {
 			transition: transform 300ms cubic-bezier(0.6, -0.7, 0.3, 1.6);
@@ -13,8 +10,3 @@ main {
 		}
 	}
 }
-
-.test-gap {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-}
diff --git a/apps/app/src/app/page/example/example.page.ts b/apps/app/src/app/page/example/example.page.ts
@@ -1,8 +1,7 @@
-import { JsonPipe, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { Component, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { RouterOutlet } from '@angular/router';
 import { map } from 'rxjs';
 
 import {
@@ -21,14 +20,7 @@ import ExampleMenuComponent from './component/menu/example-menu.component';
 	standalone: true,
 	templateUrl: './example.page.html',
 	styleUrl: './example.page.scss',
-	imports: [
-		ExampleMenuComponent,
-		ReactiveFormsModule,
-		NgIf,
-		JsonPipe,
-		GlitchSvgComponent,
-		RouterOutlet,
-	],
+	imports: [JsonPipe, ExampleMenuComponent, ReactiveFormsModule, GlitchSvgComponent],
 	providers: [ApiClient, GetUsersGQL, GetManySubscriptionGQL, GetPingsGQL],
 })
 export class ExamplePage {

diff --git a/apps/app/src/app/page/example/section/border-radius/border-radius.page.ts b/apps/app/src/app/page/example/section/border-radius/border-radius.page.ts
@@ -1,11 +1,10 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
 	standalone: true,
-	imports: [ExampleMenuComponent, NgFor],
+	imports: [ExampleMenuComponent],
 	styles: `
 		main {
 			min-height: 100%;

diff --git a/apps/app/src/app/page/example/section/card/card.page.scss b/apps/app/src/app/page/example/section/card/card.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: white;
-
 	app-card-shape {
 		width: 76px;
 	}

diff --git a/apps/app/src/app/page/example/section/card/card.page.ts b/apps/app/src/app/page/example/section/card/card.page.ts
@@ -1,4 +1,3 @@
-import { NgFor, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -11,7 +10,7 @@ import ExampleMenuComponent from '../../component/menu/example-menu.component';
 	standalone: true,
 	templateUrl: './card.page.html',
 	styleUrl: './card.page.scss',
-	imports: [ExampleMenuComponent, CardShapeComponent, CardComponent, NgFor, NgIf],
+	imports: [ExampleMenuComponent, CardShapeComponent, CardComponent],
 })
 export class CardPage {
 	shapes: CardShape[] = [CardShape.diamond, CardShape.oval, CardShape.squiggle];

diff --git a/apps/app/src/app/page/example/section/color/color.page.scss b/apps/app/src/app/page/example/section/color/color.page.scss
diff --git a/apps/app/src/app/page/example/section/color/color.page.ts b/apps/app/src/app/page/example/section/color/color.page.ts
@@ -1,13 +1,11 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
 	standalone: true,
 	templateUrl: './color.page.html',
-	styleUrl: './color.page.scss',
-	imports: [NgFor, ExampleMenuComponent],
+	imports: [ExampleMenuComponent],
 })
 export class ColorPage {
 	colors = ['cosmic', 'radiant', 'harmony', 'vivid', 'serene'];

diff --git a/apps/app/src/app/page/example/section/shadow/shadow.page.scss b/apps/app/src/app/page/example/section/shadow/shadow.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: white;
-
 	.example {
 		width: 360px;
 	}

diff --git a/apps/app/src/app/page/example/section/spacing/spacing.page.scss b/apps/app/src/app/page/example/section/spacing/spacing.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: white;
-
 	.round {
 		border-radius: 2px;
 	}

diff --git a/apps/app/src/app/page/example/section/typography/typography.page.scss b/apps/app/src/app/page/example/section/typography/typography.page.scss
diff --git a/apps/app/src/app/page/example/section/typography/typography.page.ts b/apps/app/src/app/page/example/section/typography/typography.page.ts
@@ -1,13 +1,11 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
 	standalone: true,
 	templateUrl: './typography.page.html',
-	styleUrl: './typography.page.scss',
-	imports: [ExampleMenuComponent, NgFor],
+	imports: [ExampleMenuComponent],
 })
 export class TypographyPage {
 	sizes = ['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'];

diff --git a/apps/app/src/app/page/game/game.page.html b/apps/app/src/app/page/game/game.page.html
@@ -5,9 +5,9 @@
 >
 	<div class="flex-row justify-between">
 		<div class="flex-col gap-sm">
-			<a routerLink="/">Sets found: {{ setCards().length / 3 }}</a>
+			<a [routerLink]="'/'">Sets found: {{ setCards().length / 3 }}</a>
 			<button (click)="cheatGame()">Wrong sets: {{ wrongSetCards().length / 3 }}</button>
-			<a routerLink="/game">Card in deck: {{ remainingCardsCount() }}</a>
+			<a [routerLink]="'/game'">Card in deck: {{ remainingCardsCount() }}</a>
 		</div>
 
 		<div class="flex-col gap-sm">

diff --git a/apps/app/src/app/page/game/game.page.scss b/apps/app/src/app/page/game/game.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: rgb(255 255 255 / 90%);
-
 	&.avoid-status-bar {
 		@supports (-webkit-touch-callout: none) {
 			padding-top: 60px;

diff --git a/apps/app/src/app/page/game/game.page.ts b/apps/app/src/app/page/game/game.page.ts
@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-import { NgFor, NgIf } from '@angular/common';
 import { Component, computed, effect, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -17,7 +16,7 @@ import { GameOfflineStore } from './store/game-offline.store';
 	standalone: true,
 	templateUrl: './game.page.html',
 	styleUrl: './game.page.scss',
-	imports: [NgIf, NgFor, CardComponent, YouWonComponent, RouterLink],
+	imports: [CardComponent, YouWonComponent, RouterLink],
 })
 export class GamePage {
 	private readonly gameOfflineStore = inject(GameOfflineStore);

diff --git a/apps/app/src/app/page/home/home.page.html b/apps/app/src/app/page/home/home.page.html
@@ -6,7 +6,7 @@
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *
      -->
 
-<section class="wrapper content-fixed flex-col py-md">
+<main id="home" class="wrapper content-fixed flex-col py-md">
 	<div class="container">
 		<!--  WELCOME  -->
 		<div id="welcome">
@@ -431,4 +431,4 @@ <h2>Next steps</h2>
 			</svg>
 		</p>
 	</div>
-</section>
+</main>
diff --git a/apps/app/src/app/page/home/home.page.scss b/apps/app/src/app/page/home/home.page.scss
@@ -85,10 +85,6 @@ svg {
 	border-radius: 1.5rem;
 }
 
-.wrapper {
-	background-color: white;
-}
-
 .container {
 	width: 100%;
 	max-width: 768px;

diff --git a/apps/app/src/app/page/login/login.page.html b/apps/app/src/app/page/login/login.page.html
@@ -1,4 +1,4 @@
-<section class="content-fixed pt-lg pb-xxl">
+<main id="main" class="content-fixed pt-lg pb-xxl">
 	<h4>Login form</h4>
 
 	<div class="flex-col gap-sm">
@@ -35,4 +35,4 @@ <h4>Login form</h4>
 			</ul>
 		}
 	</div>
-</section>
+</main>
diff --git a/apps/app/src/app/page/login/login.page.scss b/apps/app/src/app/page/login/login.page.scss
diff --git a/apps/app/src/app/page/login/login.page.ts b/apps/app/src/app/page/login/login.page.ts
@@ -1,4 +1,4 @@
-import { JsonPipe, NgFor, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { Component, OnInit, WritableSignal, inject, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -12,8 +12,7 @@ import { UserStore } from '../../store/user.store';
 @Component({
 	standalone: true,
 	templateUrl: './login.page.html',
-	styleUrl: './login.page.scss',
-	imports: [NgIf, NgFor, ReactiveFormsModule, JsonPipe],
+	imports: [ReactiveFormsModule, JsonPipe],
 	providers: [GetUsersGQL],
 })
 export class LoginPage implements OnInit {

diff --git a/apps/app/src/app/page/online/online.page.html b/apps/app/src/app/page/online/online.page.html
@@ -1,5 +1,5 @@
-<main id="online" class="content-fixed py-sm px-md">
-	<h3>List of games</h3>
+<main id="online" class="content-fixed pt-lg pb-xxl">
+	<h4>List of games</h4>
 
 	<div class="flex-col gap-md align-start mt-sm">
 		<ul class="flex-col gap-xs">

diff --git a/apps/app/src/app/page/online/online.page.scss b/apps/app/src/app/page/online/online.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: rgb(255 255 255 / 90%);
-
 	.info {
 		min-height: 40px;
 	}