refactor: import standalone dependencies

src/app/components/combo-counter/combo-counter.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -12,7 +11,7 @@ import { SevenSegmentComponent } from '../seven-segment/seven-segment.component'
 @Component({
   selector: 'app-combo-counter',
   standalone: true,
-  imports: [CommonModule, SevenSegmentComponent],
+  imports: [SevenSegmentComponent],
   templateUrl: './combo-counter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/device-layout-setting-panel-content/device-layout-setting-panel-content.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -7,24 +6,18 @@ import {
   ViewChild,
   inject,
 } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatButton } from '@angular/material/button';
+import { MatFormField } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatOption, MatSelect } from '@angular/material/select';
 import { patchState } from '@ngrx/signals';
 import { addEntity } from '@ngrx/signals/entities';
 import { DeviceLayoutStore } from 'src/app/stores/device-layout.store';
 
 @Component({
   selector: 'app-device-layout-setting-panel-content',
   standalone: true,
-  imports: [
-    CommonModule,
-    MatSelectModule,
-    MatFormFieldModule,
-    MatButtonModule,
-    MatIconModule,
-  ],
+  imports: [MatSelect, MatOption, MatFormField, MatButton, MatIcon],
   templateUrl: './device-layout-setting-panel-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/hotkey-dialog/hotkey-dialog.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import {
@@ -33,7 +32,6 @@ export const HOTKEY_GROUPS = [
   selector: 'app-hotkey-dialog',
   standalone: true,
   imports: [
-    CommonModule,
     MatDialogActions,
     MatDialogClose,
     MatDialogContent,

src/app/components/key-side-dropdown/key-side-dropdown.component.ts

@@ -1,18 +1,17 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Output,
   input,
 } from '@angular/core';
-import { MatSelectModule } from '@angular/material/select';
+import { MatOption, MatSelect } from '@angular/material/select';
 import { PreferKeySide } from 'src/app/models/highlight-setting.models';
 
 @Component({
   selector: 'app-key-side-dropdown',
   standalone: true,
-  imports: [CommonModule, MatSelectModule],
+  imports: [MatSelect, MatOption],
   templateUrl: './key-side-dropdown.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/layout-highlight-setting-panel-content/layout-highlight-setting-panel-content.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { HighlightSetting } from 'src/app/models/highlight-setting.models';
 import { HighlightSettingStore } from 'src/app/stores/highlight-setting.store';
@@ -8,7 +7,7 @@ import { SidesDropdownComponent } from '../sides-dropdown/sides-dropdown.compone
 @Component({
   selector: 'app-layout-highlight-setting-panel-content',
   standalone: true,
-  imports: [CommonModule, SidesDropdownComponent, KeySideDropdownComponent],
+  imports: [SidesDropdownComponent, KeySideDropdownComponent],
   templateUrl: './layout-highlight-setting-panel-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/layout/layout.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -23,16 +22,17 @@ const gridRows = 5;
 @Component({
   selector: 'app-layout',
   standalone: true,
-  imports: [CommonModule, SwitchComponent, LetDirective, VisibleDirective],
+  imports: [SwitchComponent, LetDirective, VisibleDirective],
   templateUrl: './layout.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LayoutComponent {
   public viewBoxWidth = cellSize * gridColumns + gap * (gridColumns - 1);
   public viewBoxHeight = cellSize * gridRows + gap * (gridRows - 1);
   readonly keyLabelMap = input<Record<number, KeyLabel[]>>({});
-  readonly highlightKeyCombination =
-    input<HighlightKeyCombination | null>(null);
+  readonly highlightKeyCombination = input<HighlightKeyCombination | null>(
+    null,
+  );
 
   readonly highlightKeyCombinationInText = computed(() => {
     const highlightKeyCombination = this.highlightKeyCombination();

src/app/components/seven-segment/seven-segment.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -10,7 +9,6 @@ import {
 @Component({
   selector: 'app-seven-segment',
   standalone: true,
-  imports: [CommonModule],
   templateUrl: './seven-segment.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/sides-dropdown/sides-dropdown.component.ts

@@ -1,18 +1,17 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Output,
   input,
 } from '@angular/core';
-import { MatSelectModule } from '@angular/material/select';
+import { MatOption, MatSelect } from '@angular/material/select';
 import { PreferSides } from '../../models/highlight-setting.models';
 
 @Component({
   selector: 'app-sides-dropdown',
   standalone: true,
-  imports: [CommonModule, MatSelectModule],
+  imports: [MatSelect, MatOption],
   templateUrl: './sides-dropdown.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/speedometer/speedometer.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -24,7 +23,7 @@ const maxDiffPerFrame = 2;
 @Component({
   selector: 'app-speedometer',
   standalone: true,
-  imports: [CommonModule, SevenSegmentComponent],
+  imports: [SevenSegmentComponent],
   templateUrl: './speedometer.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/switch-sector/switch-sector.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -20,7 +19,6 @@ const alpha2 = (Math.asin(((o / 2) * Math.SQRT2) / r2) / Math.PI) * 180;
 @Component({
   selector: '[appSwitchSector]',
   standalone: true,
-  imports: [CommonModule],
   templateUrl: './switch-sector.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -30,8 +28,9 @@ export class SwitchSectorComponent {
   readonly degree = input.required<number>();
   readonly positionCode = input.required<number>();
   readonly keyLabel = input<KeyLabel[]>([]);
-  readonly highlightKeyCombination =
-    input<HighlightKeyCombination | null>(null);
+  readonly highlightKeyCombination = input<HighlightKeyCombination | null>(
+    null,
+  );
 
   readonly sectorPath = computed(() => {
     const center = this.center();

src/app/components/switch/switch.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -15,7 +14,7 @@ import { SwitchSectorComponent } from '../switch-sector/switch-sector.component'
 @Component({
   selector: '[appSwitch]',
   standalone: true,
-  imports: [CommonModule, SwitchSectorComponent],
+  imports: [SwitchSectorComponent],
   templateUrl: './switch.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -31,8 +30,9 @@ export class SwitchComponent {
   ];
   readonly positionCodeMap = input.required<DirectionMap<number>>();
   readonly keyLabelMap = input<Record<number, KeyLabel[]>>({});
-  readonly highlightKeyCombination =
-    input<HighlightKeyCombination | null>(null);
+  readonly highlightKeyCombination = input<HighlightKeyCombination | null>(
+    null,
+  );
   readonly r = computed(() => {
     return (this.rotationDirection() === 'cw' ? 1 : -1) * this.rotation();
   });

src/app/components/visibility-setting-panel-content/visibility-setting-panel-content.component.ts

@@ -1,11 +1,10 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   computed,
   inject,
 } from '@angular/core';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { VisibilitySetting } from 'src/app/models/visibility-setting.models';
 import { VisibilitySettingStore } from 'src/app/stores/visibility-setting.store';
 
@@ -22,7 +21,7 @@ const VISIBILITY_SETTING_ITEMS: {
 @Component({
   selector: 'app-visibility-setting-panel-content',
   standalone: true,
-  imports: [CommonModule, MatCheckboxModule],
+  imports: [MatCheckbox],
   templateUrl: './visibility-setting-panel-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/nav/nav.component.ts

@@ -1,22 +1,30 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component, ViewChild, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatIconButton } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
+import { MatDivider } from '@angular/material/divider';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import {
+  MatListItem,
+  MatListSubheaderCssMatStyler,
+  MatNavList,
+} from '@angular/material/list';
 import {
   MatSidenav,
+  MatSidenavContainer,
   MatSidenavContent,
-  MatSidenavModule,
 } from '@angular/material/sidenav';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterModule } from '@angular/router';
+import { MatToolbar } from '@angular/material/toolbar';
+import { MatTooltip } from '@angular/material/tooltip';
+import {
+  RouterLinkActive,
+  RouterLinkWithHref,
+  RouterOutlet,
+} from '@angular/router';
 import * as fuzzy from 'fuzzy';
 import { uniqBy } from 'ramda';
 import { Observable } from 'rxjs';
@@ -29,20 +37,25 @@ import { LESSON_DATA_FOR_SEARCH, TOPICS } from '../data/topics';
   templateUrl: './nav.component.html',
   standalone: true,
   imports: [
-    CommonModule,
+    AsyncPipe,
     FormsModule,
-    MatButtonModule,
-    MatDividerModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatListModule,
+    MatDivider,
+    MatFormField,
+    MatSuffix,
+    MatIcon,
+    MatIconButton,
+    MatInput,
+    MatListItem,
+    MatListSubheaderCssMatStyler,
+    MatNavList,
+    MatSidenav,
+    MatSidenavContainer,
     MatSidenavContent,
-    MatSidenavModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    RouterModule,
+    MatToolbar,
+    MatTooltip,
+    RouterLinkActive,
+    RouterLinkWithHref,
+    RouterOutlet,
   ],
 })
 export class NavComponent {

src/app/pages/home-page/home-page.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -17,7 +16,6 @@ import { pickRandomItem } from 'src/app/utils/random.utils';
   selector: 'app-home-page',
   standalone: true,
   imports: [
-    CommonModule,
     MatButton,
     MatIcon,
     RouterLink,

src/app/pages/lesson-page/lesson-page.component.html

@@ -43,6 +43,7 @@
     >
     <input
       class="peer h-0 w-0 opacity-0"
+      title="input box for practicing typing"
       #input
       type="text"
       inputmode="none"

src/app/pages/lesson-page/lesson-page.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -15,10 +15,10 @@ import {
   signal,
   untracked,
 } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router, RouterModule } from '@angular/router';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Router, RouterLinkWithHref } from '@angular/router';
 import { HotkeysService, HotkeysShortcutPipe } from '@ngneat/hotkeys';
 import { LetDirective } from '@ngrx/component';
 import { getState } from '@ngrx/signals';
@@ -57,15 +57,16 @@ import { nonNullable } from 'src/app/utils/non-nullable.utils';
   standalone: true,
   imports: [
     ComboCounterComponent,
-    CommonModule,
     HotkeysShortcutPipe,
+    NgClass,
     LayoutComponent,
     LayoutComponent,
     LetDirective,
-    MatButtonModule,
-    MatIconModule,
-    MatTooltipModule,
-    RouterModule,
+    MatButton,
+    MatIconButton,
+    MatIcon,
+    MatTooltip,
+    RouterLinkWithHref,
     SpeedometerComponent,
     VisibleDirective,
   ],