refactor: convert to standalone components

src/app/home/file-upload/file-upload.component.scss

@@ -1,7 +1,6 @@
 $electron-title-width: 28px;
 
 .file-upload {
-    height: calc(100vh - 230px);
     cursor: pointer;
     border: 1px dashed #999;
     border-radius: 5px;
@@ -10,6 +9,7 @@ $electron-title-width: 28px;
     align-items: center;
     justify-content: center;
     margin: 20px;
+    padding: 10px;
     gap: 20px;
 
     .upload-icon {

src/app/home/file-upload/file-upload.component.ts

@@ -1,6 +1,10 @@
 import { Component, EventEmitter, Output } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
+    standalone: true,
+    imports: [MatIconModule, TranslateModule],
     selector: 'app-file-upload',
     templateUrl: './file-upload.component.html',
     styleUrls: ['./file-upload.component.scss'],
@@ -12,8 +16,8 @@ export class FileUploadComponent {
         file: File;
     }> = new EventEmitter();
 
-    /** Emits on reject event */
     @Output() fileRejected: EventEmitter<string> = new EventEmitter();
+    @Output() addClicked = new EventEmitter<void>();
 
     allowedContentTypes = [
         'application/mpegurl',
@@ -37,5 +41,6 @@ export class FileUploadComponent {
                 file: fileList[0],
             });
         fileReader.readAsText(fileList[0]);
+        this.addClicked.emit();
     }
 }

src/app/home/home.module.ts

@@ -2,12 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { DragDropFileUploadDirective } from './file-upload/drag-drop-file-upload.directive';
-import { FileUploadComponent } from './file-upload/file-upload.component';
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home.routing';
 import { StalkerPortalImportComponent } from './stalker-portal-import/stalker-portal-import.component';
-import { TextImportComponent } from './text-import/text-import.component';
-import { UrlUploadComponent } from './url-upload/url-upload.component';
 import { XtreamCodeImportComponent } from './xtream-code-import/xtream-code-import.component';
 
 @NgModule({
@@ -18,12 +15,6 @@ import { XtreamCodeImportComponent } from './xtream-code-import/xtream-code-impo
         XtreamCodeImportComponent,
         StalkerPortalImportComponent,
     ],
-    declarations: [
-        DragDropFileUploadDirective,
-        HomeComponent,
-        FileUploadComponent,
-        TextImportComponent,
-        UrlUploadComponent,
-    ],
+    declarations: [DragDropFileUploadDirective, HomeComponent],
 })
 export class HomeModule {}

src/app/home/stalker-portal-import/stalker-portal-import.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, EventEmitter, Output, inject } from '@angular/core';
 import {
     FormControl,
     FormGroup,
@@ -43,6 +43,7 @@ import { addPlaylist } from '../../state/actions';
     ],
 })
 export class StalkerPortalImportComponent {
+    @Output() addClicked = new EventEmitter<void>();
     URL_REGEX = /^(http|https|file):\/\/[^ "]+$/;
 
     form = new FormGroup({
@@ -68,6 +69,7 @@ export class StalkerPortalImportComponent {
         this.store.dispatch(
             addPlaylist({ playlist: this.form.value as Playlist })
         );
+        this.addClicked.emit();
     }
 
     transformPortalUrl(url: string) {

src/app/home/text-import/text-import.component.scss

@@ -1,8 +1,7 @@
 button {
     margin: 0 15px;
-    text-transform: uppercase;
 }
 
 textarea {
-    height: calc(100vh - 300px) !important;
+    height: 300px !important;
 }

src/app/home/text-import/text-import.component.ts

@@ -1,10 +1,25 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
+    standalone: true,
     selector: 'app-text-import',
     templateUrl: './text-import.component.html',
     styleUrls: ['./text-import.component.scss'],
+    imports: [
+        MatButtonModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        TranslateModule,
+    ],
 })
 export class TextImportComponent {
     @Output() textAdded = new EventEmitter<string>();

src/app/home/url-upload/url-upload.component.html

@@ -7,11 +7,9 @@
             formControlName="playlistUrl"
         />
     </mat-form-field>
-    <mat-card *ngIf="!isElectron">
-        <mat-card-content>
-            {{ 'HOME.URL_UPLOAD.CORS_NOTE' | translate }}
-        </mat-card-content>
-    </mat-card>
+    <p *ngIf="!isElectron">
+        {{ 'HOME.URL_UPLOAD.CORS_NOTE' | translate }}
+    </p>
     <button
         class="add-button"
         mat-flat-button

src/app/home/url-upload/url-upload.component.scss

@@ -4,5 +4,4 @@ form {
 
 button {
     margin-top: 10px;
-    text-transform: uppercase;
 }

src/app/home/url-upload/url-upload.component.ts

@@ -1,11 +1,30 @@
+import { NgIf } from '@angular/common';
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
 import { DataService } from '../../services/data.service';
 
 @Component({
+    standalone: true,
     selector: 'app-url-upload',
     templateUrl: './url-upload.component.html',
     styleUrls: ['./url-upload.component.scss'],
+    imports: [
+        MatButtonModule,
+        MatCardModule,
+        MatInputModule,
+        NgIf,
+        ReactiveFormsModule,
+        TranslateModule,
+    ],
 })
 export class UrlUploadComponent implements OnInit {
     /** Emits url string to the parent component on form submit */
@@ -21,7 +40,10 @@ export class UrlUploadComponent implements OnInit {
      * Creates an instance of component
      * @param fb angular form builder
      */
-    constructor(private fb: UntypedFormBuilder, private dataService: DataService) {}
+    constructor(
+        private fb: UntypedFormBuilder,
+        private dataService: DataService
+    ) {}
 
     ngOnInit(): void {
         const urlRegex = '(https?://.*?)';

src/app/home/xtream-code-import/xtream-code-import.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, EventEmitter, Output, inject } from '@angular/core';
 import {
     FormControl,
     FormGroup,
@@ -43,6 +43,7 @@ import { addPlaylist } from '../../state/actions';
     ],
 })
 export class XtreamCodeImportComponent {
+    @Output() addClicked = new EventEmitter<void>();
     URL_REGEX = /^(http|https|file):\/\/[^ "]+$/;
 
     form = new FormGroup({
@@ -64,5 +65,6 @@ export class XtreamCodeImportComponent {
         this.store.dispatch(
             addPlaylist({ playlist: this.form.value as Playlist })
         );
+        this.addClicked.emit();
     }
 }