fix: kachel spacing & /admin

frontend/src/app/components/home/home.html

@@ -1,17 +1,15 @@
-<div class="card-container">
+<div class="card-container" *ngIf="items$ | async as items">
-  <div *ngIf="items$ | async as items">
+  <a *ngFor="let item of items" [href]="item.target" target="_blank" rel="noopener noreferrer" class="card-link">
-    <a *ngFor="let item of items" [href]="item.target" target="_blank" rel="noopener noreferrer" class="card-link">
+    <mat-card class="item-card">
-      <mat-card class="item-card">
+      <mat-card-content>
-        <mat-card-header>
+        <div class="card-content">
-          <div class="card-header-content">
+          <img *ngIf="item.iconUrl && !imgErrorMap.get(item.id); else defaultIcon" class="card-icon" [src]="item.iconUrl" (error)="onImgError(item.id)">
-            <img *ngIf="item.iconUrl && !imgErrorMap.get(item.id); else defaultIcon" mat-card-avatar [src]="item.iconUrl" (error)="onImgError(item.id)">
+          <ng-template #defaultIcon>
-            <ng-template #defaultIcon>
+            <mat-icon class="card-icon default-avatar-icon">dashboard</mat-icon>
-              <mat-icon mat-card-avatar class="default-avatar-icon">dashboard</mat-icon>
+          </ng-template>
-            </ng-template>
+          <span class="card-title">{{ item.displayName }}</span>
-            <mat-card-title>{{ item.displayName }}</mat-card-title>
+        </div>
-          </div>
+      </mat-card-content>
-        </mat-card-header>
+    </mat-card>
-      </mat-card>
+  </a>
-    </a>
-  </div>
 </div>

frontend/src/app/components/home/home.scss

@@ -1,45 +1,52 @@
 .card-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 20px;
+  gap: 32px;
-  padding: 20px;
+  padding: 32px;
 }
 
 .card-link {
   text-decoration: none;
   color: inherit;
+  display: block;
 }
 
 .item-card {
   cursor: pointer;
   transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  height: 100%;
 }
 
 .item-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
-// Custom flex container inside the header
+.card-content {
-.card-header-content {
   display: flex;
-  align-items: center; // Revert to center alignment
+  align-items: center;
-  width: 100%;
+  gap: 16px;
-  height: 64px; // Give the container a fixed height
+  padding: 8px 0;
 }
 
-// Remove margin from the title and add padding for spacing
+.card-icon {
-.card-header-content .mat-card-title {
+  width: 48px;
-  margin: 0;
+  height: 48px;
-  padding-left: 16px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
 }
 
+.card-title {
+  font-size: 1.1rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
 
 .default-avatar-icon {
-  // Vertically align the icon in the avatar space
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
+  font-size: 32px;
-  height: 40px;
+  color: #666;
 }

frontend/src/app/components/home/home.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '../../material.module';
-import { ApiService } from '../../services/api';
+import { Api } from '../../services/api';
 import { Item } from '../../models/item';
 import { Observable } from 'rxjs';
 
@@ -16,7 +16,7 @@ export class HomeComponent implements OnInit {
   items$!: Observable<Item[]>;
   imgErrorMap = new Map<number, boolean>();
 
-  constructor(private apiService: ApiService) {}
+  constructor(private apiService: Api) {}
 
   ngOnInit(): void {
     this.items$ = this.apiService.getItems();

frontend/src/app/components/item-form/item-form.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ApiService } from '../../services/api';
+import { Api } from '../../services/api';
 import { Item } from '../../models/item';
 import { MaterialModule } from '../../material.module';
 import { CommonModule } from '@angular/common';
@@ -20,7 +20,7 @@ export class ItemFormComponent implements OnInit {
 
   constructor(
     private fb: FormBuilder,
-    private apiService: ApiService,
+    private apiService: Api,
     private router: Router,
     private route: ActivatedRoute
   ) {
@@ -52,7 +52,7 @@ export class ItemFormComponent implements OnInit {
         });
       } else {
         this.apiService.createItem(itemData).subscribe(() => {
-          this.router.navigate(['/']);
+          this.router.navigate(['/admin']);
         });
       }
     }

frontend/src/app/components/item-list/item-list.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../services/api';
+import { Api } from '../../services/api';
 import { Item } from '../../models/item';
 import { Router } from '@angular/router';
 import { MaterialModule } from '../../material.module';
@@ -17,7 +17,7 @@ export class ItemListComponent implements OnInit {
   displayedColumns: string[] = ['id', 'name', 'displayName', 'target', 'actions'];
   dataSource = new MatTableDataSource<Item>();
 
-  constructor(private apiService: ApiService, private router: Router) { }
+  constructor(private apiService: Api, private router: Router) { }
 
   ngOnInit(): void {
     this.loadItems();

frontend/src/app/services/api.ts

@@ -6,7 +6,7 @@ import { Item } from '../models/item';
 @Injectable({
   providedIn: 'root'
 })
-export class ApiService {
+export class Api {
   private apiUrl = '/api/items';
 
   constructor(private http: HttpClient) { }