Refacto issue detail

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

@@ -1,6 +1,8 @@
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
+import { marked } from 'marked';
 import { IssueEntity, IssuesStore } from '../issues.store';
 
 @Component({
@@ -13,6 +15,7 @@ export class IssueDetail {
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly issuesStore = inject(IssuesStore);
+  private readonly sanitizer = inject(DomSanitizer);
   private readonly isNewIssueRoute = this.route.snapshot.routeConfig?.path === 'issues/new';
 
   protected issue: IssueEntity = this.buildIssue();
@@ -20,6 +23,7 @@ export class IssueDetail {
   protected moreMenuOpen = false;
   protected showAddDependency = false;
   protected selectedCandidateId: number | null = null;
+  protected editingDescription = false;
 
   protected readonly statusOptions: IssueEntity['status'][] = [
     'draft',
@@ -107,6 +111,23 @@ export class IssueDetail {
     return this.issueTypeValue === 'Epic';
   }
 
+  protected get descriptionHtml(): SafeHtml {
+    const html = marked.parse(this.issue.description || '') as string;
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
+  protected get typeBadgeClass(): string {
+    const map: Record<IssueEntity['type'], string> = {
+      Bug: 'text-bg-danger',
+      Study: 'text-bg-secondary',
+      Story: 'text-bg-success',
+      Task: 'text-bg-primary',
+      'Technical Story': 'text-bg-warning',
+      Epic: 'text-bg-info',
+    };
+    return map[this.issueTypeValue] ?? 'text-bg-secondary';
+  }
+
   protected saveIssue(): void {
     this.issuesStore.upsert(this.issue);
     if (this.isNewIssueRoute) {