From ecb45e82481c4382eaa474b442dcaf09cfb2333b Mon Sep 17 00:00:00 2001
From: z3n <z3n.d3v@proton.me>
Date: Tue, 9 Jun 2026 13:01:46 +0000
Subject: [PATCH] =?UTF-8?q?feat(browse):=20ic=C3=B4ne=20crayon=20inline=20?=
 =?UTF-8?q?sur=20les=20tuiles=20+=20apiCount=20r=C3=A9cursif?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bouton modifier réduit à l'icône crayon, placé à côté du titre de la tuile
- apiCount dans CategoryWithCounts inclut désormais les APIs de tous les
  sous-dossiers récursivement (countApisRecursively)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
---
 .../modules/categories/categories.service.ts  |  9 ++++++-
 .../src/app/pages/browse/browse.component.ts  | 24 +++++++++----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/back/src/modules/categories/categories.service.ts b/back/src/modules/categories/categories.service.ts
index 25996a2..04286d6 100644
--- a/back/src/modules/categories/categories.service.ts
+++ b/back/src/modules/categories/categories.service.ts
@@ -81,6 +81,13 @@ export class CategoriesService {
     await this.categoryRepo.delete(id);
   }
 
+  private async countApisRecursively(categoryId: string): Promise<number> {
+    const direct = await this.apiRepo.count({ where: { categoryId } });
+    const children = await this.categoryRepo.find({ where: { parentId: categoryId }, select: ['id'] });
+    const childCounts = await Promise.all(children.map((c) => this.countApisRecursively(c.id)));
+    return direct + childCounts.reduce((sum, n) => sum + n, 0);
+  }
+
   async browse(categoryId: string | null): Promise<CategoryBrowseResponse> {
     /* 1. Charge la catégorie courante */
     let currentCategory: CategoryEntity | null = null;
@@ -111,7 +118,7 @@ export class CategoriesService {
     const subcategories: CategoryWithCounts[] = await Promise.all(
       directChildren.map(async (child) => {
         const subcategoryCount = await this.categoryRepo.count({ where: { parentId: child.id } });
-        const apiCount = await this.apiRepo.count({ where: { categoryId: child.id } });
+        const apiCount = await this.countApisRecursively(child.id);
         return { ...toCategory(child), subcategoryCount, apiCount };
       }),
     );
diff --git a/front-public/src/app/pages/browse/browse.component.ts b/front-public/src/app/pages/browse/browse.component.ts
index 2e60fed..25fa76c 100644
--- a/front-public/src/app/pages/browse/browse.component.ts
+++ b/front-public/src/app/pages/browse/browse.component.ts
@@ -86,6 +86,18 @@ import { forkJoin } from 'rxjs';
                       <div class="fr-tile__content">
                         <h3 class="fr-tile__title">
                           <a [routerLink]="['/browse', cat.id]">{{ cat.name }}</a>
+                          <button title="Modifier"
+                                  style="position:relative;z-index:1;background:none;border:none;cursor:pointer;padding:0 0.25rem;vertical-align:middle;opacity:0.6"
+                                  (click)="openEdit(cat); $event.stopPropagation()">
+                            <span class="fr-icon-edit-line" aria-hidden="true" style="font-size:0.75rem"></span>
+                          </button>
+                          @if (cat.apiCount === 0 && cat.subcategoryCount === 0) {
+                            <button title="Supprimer"
+                                    style="position:relative;z-index:1;background:none;border:none;cursor:pointer;padding:0 0.25rem;vertical-align:middle;opacity:0.6"
+                                    (click)="deleteCategory(cat); $event.stopPropagation()">
+                              <span class="fr-icon-delete-bin-line" aria-hidden="true" style="font-size:0.75rem"></span>
+                            </button>
+                          }
                         </h3>
                         @if (cat.description) {
                           <p class="fr-tile__desc">{{ cat.description }}</p>
@@ -93,18 +105,6 @@ import { forkJoin } from 'rxjs';
                         <p class="fr-tile__detail">
                           {{ cat.subcategoryCount }} sous-catégorie(s) · {{ cat.apiCount }} API(s)
                         </p>
-                        <div style="position:relative;z-index:1;margin-top:0.5rem;display:flex;gap:0.25rem;order:5">
-                          <button class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-btn--icon-left fr-icon-edit-line"
-                                  (click)="openEdit(cat); $event.stopPropagation()">
-                            Modifier
-                          </button>
-                          @if (cat.apiCount === 0 && cat.subcategoryCount === 0) {
-                            <button class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-btn--icon-left fr-icon-delete-bin-line"
-                                    (click)="deleteCategory(cat); $event.stopPropagation()">
-                              Supprimer
-                            </button>
-                          }
-                        </div>
                       </div>
                     </div>
                   </div>