Modification visuel status et type issue

src/app/issues/issue-detail/issue-detail.html

@@ -3,20 +3,51 @@
 <!-- Top bar -->
 <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
   <div class="d-flex align-items-center gap-2">
-    <span [class]="'badge ' + typeBadgeClass">{{ issue.type }}</span>
+    <span class="type-icon" [style.background]="typeIcon(issue.type).bg" [title]="issue.type">{{ typeIcon(issue.type).letter }}</span>
     <span class="text-secondary fw-semibold small">#{{ issue.id }}</span>
   </div>
   <div class="d-flex align-items-center gap-2">
-    <select
-      aria-label="Status"
-      class="form-select form-select-sm w-auto"
-      [ngModel]="issue.status"
-      (ngModelChange)="updateStatus($event)"
-    >
-      @for (status of statusOptions; track status) {
-        <option [value]="status">{{ status }}</option>
+    <div class="status-split-wrapper">
+      <div class="btn-group">
+        <button
+          type="button"
+          class="status-main-btn"
+          [style.background]="statusBadge(issue.status).bg"
+          [style.color]="statusBadge(issue.status).color"
+          [style.border-color]="statusBadge(issue.status).color"
+        >{{ statusBadge(issue.status).label }}</button>
+        <button
+          type="button"
+          class="status-toggle-btn dropdown-toggle dropdown-toggle-split"
+          [style.background]="statusBadge(issue.status).bg"
+          [style.color]="statusBadge(issue.status).color"
+          [style.border-color]="statusBadge(issue.status).color"
+          (click)="toggleStatusMenu()"
+          aria-label="Changer le statut"
+        ><span class="visually-hidden">Changer le statut</span></button>
+      </div>
+      @if (statusMenuOpen) {
+        <div class="status-backdrop" (click)="closeStatusMenu()"></div>
+        <ul class="status-dropdown dropdown-menu show">
+          @for (status of statusOptions; track status) {
+            <li>
+              <button
+                type="button"
+                class="dropdown-item d-flex align-items-center gap-2"
+                [class.active]="issue.status === status"
+                (click)="selectStatus(status)"
+              >
+                <span
+                  class="status-badge"
+                  [style.background]="statusBadge(status).bg"
+                  [style.color]="statusBadge(status).color"
+                >{{ statusBadge(status).label }}</span>
+              </button>
+            </li>
+          }
+        </ul>
       }
-    </select>
+    </div>
     @if (!isNewIssueRoute) {
       <div class="more-wrapper">
         <button type="button" class="btn btn-outline-secondary btn-sm" (click)="toggleMoreMenu()">···</button>
@@ -202,7 +233,7 @@
             (click)="openComposedIssue(composedIssue.id)"
           >
             <div class="d-flex align-items-center gap-2 flex-wrap">
-              <span [class]="'badge ' + getBadgeClass(composedIssue.type)">{{ composedIssue.type }}</span>
+              <span class="type-icon" [style.background]="typeIcon(composedIssue.type).bg" [title]="composedIssue.type">{{ typeIcon(composedIssue.type).letter }}</span>
               <span class="fw-semibold">#{{ composedIssue.id }} – {{ composedIssue.name || 'Sans nom' }}</span>
             </div>
             <div class="d-flex align-items-center gap-3 flex-shrink-0">