Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 5x 10x 10x 5x 10x 10x 5x 5x 10x 10x 10x 10x 20x 20x 10x 20x 20x 10x 20x 20x 10x 10x 20x 10x 20x 10x 10x 10x 20x 20x 10x 20x 20x 10x 10x 5x | <div class="favourites-page">
<!-- Header -->
<header class="list-header">
<div class="list-header-content">
<h1 class="list-title">{{ 'favourites.title' | transloco }}</h1>
<p class="list-description">{{ 'favourites.subtitle' | transloco }}</p>
</div>
</header>
<!-- Suchfeld -->
<div class="search-container">
<div class="search-input-wrapper">
<lucide-icon class="search-icon" [img]="icons.Search" [size]="20" [strokeWidth]="2"></lucide-icon>
<input type="text" class="search-input" [attr.placeholder]="'favourites.searchPlaceholder' | transloco" [ngModel]="searchQuery()"
(ngModelChange)="onSearchQueryChange($event)" autocomplete="off" />
</div>
</div>
<!-- Items Liste -->
<div class="items-container">
@if (!favouritesLoaded()) {
<div class="items-skeleton" aria-busy="true" role="status">
@for (i of [0, 1, 2, 3, 4]; track i) {
<div class="item-card skeleton" aria-hidden="true">
<div class="item-header">
<div class="category-icon-wrapper skeleton-circle"></div>
<div class="item-info">
<div class="skeleton-line skeleton-line--title"></div>
<div class="skeleton-line skeleton-line--meta"></div>
</div>
<div class="action-buttons" aria-hidden="true">
<div class="skeleton-btn"></div>
<div class="skeleton-btn"></div>
</div>
</div>
</div>
}
</div>
} @else {
<!-- Keine Ergebnisse gefunden -->
@if (hasNoResults()) {
<div class="no-results">
<p>{{ 'favourites.noResults' | transloco }}</p>
</div>
}
<!-- Favourites -->
@for (item of filteredFavourites(); track item.id) {
<div class="swipe-container">
<!-- Swipe Background Actions -->
<div class="swipe-actions">
<div class="swipe-action left" [class.active]="isSwipingRight(item.id)">
<lucide-icon [img]="icons.Trash2" [size]="24" [strokeWidth]="2"></lucide-icon>
</div>
</div>
<!-- Swipeable Card -->
<div class="item-card" [class.swiping]="swipingItemId() === item.id"
[style.transform]="getSwipeTransform(item.id)" (touchstart)="onTouchStart($event, item.id)"
(touchmove)="onTouchMove($event)" (touchend)="onTouchEnd(item)">
<div class="item-header">
<div class="category-icon-wrapper" [style.backgroundColor]="getCategoryColor(item.category)">
<lucide-icon [img]="getCategoryIcon(item.category)" [size]="20" [strokeWidth]="2" color="white"></lucide-icon>
</div>
<div class="item-info">
<h3 class="item-name">{{ item.name }}</h3>
<div class="item-meta">
@if (item.size && item.unit !== 'Einheit') {
<span class="size-badge">{{ item.size }} {{ ('units.' + item.unit) | transloco }}</span>
} @else if (item.size) {
<span class="size-badge">{{ item.size }}</span>
} @else if (item.unit !== 'Einheit') {
<span class="size-badge">{{ ('units.' + item.unit) | transloco }}</span>
}
</div>
</div>
<div class="action-buttons">
<button class="icon-btn edit-btn" (click)="editFavourite(item)" [attr.aria-label]="'common.edit' | transloco" [attr.title]="'common.edit' | transloco">
<lucide-icon [img]="icons.Pencil" [size]="20" [strokeWidth]="2"></lucide-icon>
</button>
<button class="icon-btn delete-btn" (click)="deleteFavourite(item)" [attr.aria-label]="'common.delete' | transloco" [attr.title]="'common.delete' | transloco">
<lucide-icon [img]="icons.Trash2" [size]="20" [strokeWidth]="2"></lucide-icon>
</button>
</div>
</div>
</div>
</div>
}
@if (favourites().length === 0 && !hasNoResults()) {
<div class="no-results">
<p>{{ 'favourites.emptyTitle' | transloco }}</p>
<p>{{ 'favourites.emptyHint' | transloco }}</p>
</div>
}
}
</div>
</div>
|