Projets/NewTube
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(groups): panneau groupe pro + 175 icones avec recherche

Browse Source
This commit is contained in:
bruno
2026-09-27 12:33:56 -04:00
parent 201fe979b8
commit 856b38bbea
3 changed files with 183 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/library/subscriptions/subscriptions.component.html
+58 -19
View File
@@ -422,10 +422,20 @@
<!-- ==================== MODALE GROUPE ==================== -->
<div *ngIf="showGroupModal()" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" (click)="closeGroupModal()">
<div class="w-full max-w-md rounded-xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" (click)="$event.stopPropagation()">
<h3 class="text-lg font-semibold text-slate-100">
{{ editingGroup() ? 'Modifier le groupe' : 'Nouveau groupe' }}
</h3>
<div class="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" (click)="$event.stopPropagation()">
<div class="flex items-center gap-3">
<span
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-2xl transition-colors"
[style.background-color]="groupColor() + '26'"
[style.border]="'1px solid ' + groupColor() + '66'"
>{{ groupIcon() }}</span>
<div class="min-w-0">
<h3 class="truncate text-lg font-semibold text-slate-100">
{{ editingGroup() ? 'Modifier le groupe' : 'Nouveau groupe' }}
</h3>
<p class="truncate text-xs text-slate-400">{{ groupName() || 'Donnez un nom à votre groupe…' }}</p>
</div>
</div>
<label class="mt-4 block text-xs font-semibold uppercase tracking-wide text-slate-400">Nom</label>
<input
type="text"
@@ -435,41 +445,70 @@
placeholder="Ex : Tech, Musique, Sport…"
class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-red-500 focus:outline-none"
/>
<label class="mt-4 block text-xs font-semibold uppercase tracking-wide text-slate-400">Icône</label>
<div class="mt-1 flex flex-wrap gap-1">
<div class="mt-4 flex items-center justify-between gap-2">
<label class="block text-xs font-semibold uppercase tracking-wide text-slate-400" for="group-icon-search">
Icône <span class="text-slate-500">({{ filteredIcons().length }}/{{ icons.length }})</span>
</label>
<button
*ngFor="let icon of icons"
*ngIf="iconSearch()"
type="button"
(click)="iconSearch.set('')"
class="text-xs text-slate-400 underline hover:text-slate-200"
>
Effacer
</button>
</div>
<div class="relative mt-1">
<svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
id="group-icon-search"
type="text"
[ngModel]="iconSearch()"
(ngModelChange)="iconSearch.set($event)"
placeholder="Rechercher : musique, sport, cuisine…"
class="w-full rounded-md border border-slate-700 bg-slate-800 py-2 pl-9 pr-3 text-sm text-slate-100 placeholder:text-slate-500 focus:border-red-500 focus:outline-none"
/>
</div>
<div *ngIf="filteredIcons().length > 0; else noGroupIcon" class="mt-2 grid max-h-48 grid-cols-8 gap-1 overflow-y-auto rounded-lg border border-slate-800 bg-slate-900/60 p-2 sm:grid-cols-10">
<button
*ngFor="let icon of filteredIcons()"
type="button"
(click)="groupIcon.set(icon)"
class="rounded-md px-2 py-1 text-lg"
[title]="icon"
[attr.aria-label]="'Icône ' + icon"
[attr.aria-pressed]="groupIcon() === icon"
class="rounded-md px-1 py-1.5 text-xl transition"
[class.bg-red-500/20]="groupIcon() === icon"
[class.ring-1]="groupIcon() === icon"
[class.ring-red-500]="groupIcon() === icon"
[class.hover:bg-slate-800]="groupIcon() !== icon"
>{{ icon }}</button>
</div>
<ng-template #noGroupIcon>
<p class="mt-2 rounded-lg border border-dashed border-slate-700 p-4 text-center text-sm text-slate-400">
Aucune icône pour « {{ iconSearch() }} ».
</p>
</ng-template>
<label class="mt-4 block text-xs font-semibold uppercase tracking-wide text-slate-400">Couleur</label>
<div class="mt-1 flex flex-wrap gap-1">
<div class="mt-1 flex flex-wrap gap-1.5">
<button
*ngFor="let color of colors"
type="button"
(click)="groupColor.set(color)"
class="h-7 w-7 rounded-full"
class="h-7 w-7 rounded-full transition"
[style.background-color]="color"
[class.ring-2]="groupColor() === color"
[class.ring-white]="groupColor() === color"
[class.ring-offset-2]="groupColor() === color"
[class.ring-offset-slate-900]="groupColor() === color"
[title]="color"
[attr.aria-label]="'Couleur ' + color"
[attr.aria-pressed]="groupColor() === color"
></button>
</div>
<div class="mt-4 flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/60 p-3">
<span
class="flex h-10 w-10 items-center justify-center rounded-lg text-xl"
[style.background-color]="groupColor() + '26'"
[style.border]="'1px solid ' + groupColor() + '66'"
>{{ groupIcon() }}</span>
<span class="font-semibold text-slate-100">{{ groupName() || 'Aperçu du groupe' }}</span>
</div>
<div class="mt-5 flex justify-end gap-2">
<div class="mt-5 flex justify-end gap-2 border-t border-slate-800 pt-4">
<button
type="button"
(click)="closeGroupModal()"