tag sorting, tag thumbnail and tag strip in home

src/app/component/home/home.component.html

@@ -1,3 +1,7 @@
+<div class="m-5 flex flex-nowrap overflow-x-auto gap-2">
+  <shared-tag-card *ngFor="let tag of tags" [tag]="tag" />
+</div>
+
 <shared-video-list
   (onReadList)="readList($event)"
   [total]="total"

src/app/component/home/home.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TagListEntry } from 'src/app/model/TagListEntry';
 import { VideoListEntry } from 'src/app/model/VideoListEntry';
 import { RequestService } from 'src/app/request.service';
 import { OnReadListModel } from 'src/app/shared/components/video-list/video-list.component';
@@ -11,8 +12,11 @@ import { OnReadListModel } from 'src/app/shared/components/video-list/video-list
 export class HomeComponent {
   total: number = 0;
   videos: VideoListEntry[] = [];
+  tags: TagListEntry[] = [];
 
-  constructor(public requestService: RequestService) {}
+  constructor(public requestService: RequestService) {
+    this.readTagList();
+  }
 
   readList(model: OnReadListModel): void {
     this.requestService.post(
@@ -28,4 +32,10 @@ export class HomeComponent {
       }
     );
   }
+
+  readTagList(): void {
+    this.requestService.post('tag-list/read-list', {}, (response: any) => {
+      this.tags = response.items;
+    });
+  }
 }

src/app/feature/tag/tag.component.html

@@ -28,6 +28,15 @@
             />
           </div>
         </div>
+
+        <div id="thumbnail" class="basis-full">
+          <img
+            [src]="'/api/tag/thumbnail/' + tagId"
+            alt="Thumbnail"
+            class="m-auto h-80 w-full"
+          />
+        </div>
+
         <div id="tags" class="flex flex-row gap-2">
           <div class="basis-auto w-24">Alias:</div>
           <div class="basis-full" *ngIf="tagDetails !== null">

src/app/shared/components/tag-card/tag-card.component.html

@@ -0,0 +1,40 @@
+<div
+  *ngIf="tag !== null"
+  id="card"
+  class="grow py-2 px-3 rounded-xl shadow-lg border border-gray-100 dark:bg-zinc-800 dark:border-zinc-900 text-black dark:text-white"
+  [routerLink]="['/tag', tag.id]"
+>
+  <div id="header" class="mb-2">
+    <div class="flex flex-row">
+      <div class="my-auto text-xl font-medium truncate">
+        {{ tag.description }}
+      </div>
+    </div>
+  </div>
+
+  <div id="content" class="mb-2">
+    <img
+      [src]="'/api/tag/thumbnail/' + tag.id"
+      alt="Thumbnail"
+      class="max-w-none h-40 w-80 m-auto"
+      (click)="onClick()"
+    />
+  </div>
+
+  <div id="footer">
+    <div class="flex flex-row">
+      <!--
+      <div class="basis-full h-8">
+        <span
+          *ngFor="let alias of tag.aliases"
+          class="text-sm font-medium me-2 px-2.5 py-0.5 rounded bg-zinc-700 hover:bg-zinc-900"
+          >{{ tag.description }}</span
+        >
+      </div>
+      -->
+      <div class="basis-auto text-slate-500 dark:text-slate-400">
+        {{ tag.videoCount }}
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/components/tag-card/tag-card.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TagListEntry } from 'src/app/model/TagListEntry';
+import { VideoListEntry } from 'src/app/model/VideoListEntry';
+
+@Component({
+  selector: 'shared-tag-card',
+  templateUrl: './tag-card.component.html',
+  styleUrls: ['./tag-card.component.scss'],
+})
+export class TagCardComponent {
+  @Input() tag: TagListEntry | null = null;
+  @Output() clicked = new EventEmitter<TagListEntry>();
+
+  onClick(): void {
+    if (this.tag === null) return;
+
+    this.clicked.emit(this.tag);
+  }
+}

src/app/shared/components/video-card/video-card.component.html

@@ -1,7 +1,7 @@
 <div
   *ngIf="video !== null"
   id="card"
-  class="grow py-2 px-3 my-2 rounded-xl shadow-lg border border-gray-100 dark:bg-zinc-800 dark:border-zinc-900 text-black dark:text-white"
+  class="grow py-2 px-3 rounded-xl shadow-lg border border-gray-100 dark:bg-zinc-800 dark:border-zinc-900 text-black dark:text-white"
 >
   <div id="header" class="mb-2">
     <div class="flex flex-row">

src/app/shared/components/video-list/video-list.component.html

@@ -8,7 +8,7 @@
 
 <div
   id="card-container"
-  class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 px-5"
+  class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 px-5"
 >
   <shared-video-card
     *ngFor="let video of videos; index as currentIndex"
@@ -17,10 +17,11 @@
     (clicked)="selectVideo(video)"
   />
 </div>
-<shared-paginator
+<div class="px-5 py-2">
+  <shared-paginator
     (pageChange)="onPageChanged($event)"
     [page]="page"
     [perPage]="perPage"
     [total]="total"
->
+  />
-</shared-paginator>
+</div>

src/app/shared/shared.module.ts

@@ -32,6 +32,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatChipsModule } from '@angular/material/chips';
 import { VideoListComponent } from './components/video-list/video-list.component';
 import { VideoCardComponent } from './components/video-card/video-card.component';
+import { TagCardComponent } from './components/tag-card/tag-card.component';
 import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
 
 @NgModule({
@@ -45,6 +46,7 @@ import { TagSelectorComponent } from './components/tag-selector/tag-selector.com
     TableComponent,
     VideoListComponent,
     VideoCardComponent,
+    TagCardComponent,
     TagSelectorComponent,
   ],
   exports: [
@@ -58,6 +60,7 @@ import { TagSelectorComponent } from './components/tag-selector/tag-selector.com
     VideoListComponent,
     VideoCardComponent,
     TagSelectorComponent,
+    TagCardComponent,
 
     MatSlideToggleModule,
     MatCardModule,