Add differentiating badge icon for issues and PRs

src/app/issues-viewer/card-view/card-view.component.css

@@ -132,7 +132,6 @@ div.column-header .mat-card-header {
 }
 
 .row-count {
-  background-color: rgb(222, 222, 222);
   border-radius: 3px;
   cursor: default;
   padding: 6px 8px 3px 8px;
@@ -144,6 +143,14 @@ div.column-header .mat-card-header {
   margin-top: 3px;
 }
 
+.pr-row-count {
+  background-color: rgb(222, 222, 222);
+}
+
+.issue-row-count {
+  background-color: rgb(222, 222, 222);
+}
+
 .assignee-container {
   width: 100%;
   text-align: left;

src/app/issues-viewer/card-view/card-view.component.html

@@ -51,11 +51,11 @@
                 {{ assignee.login }}
               </span>
             </div>
-            <div class="row-count count-margins" [matTooltip]="getIssueTooltip()" matTooltipPosition="above">
+            <div class="row-count issue-row-count count-margins" [matTooltip]="getIssueTooltip()" matTooltipPosition="above">
               <span class="octicon count-margins" octicon="issue-opened"></span>
               <span class="">{{ this.issues.issueCount }}</span>
             </div>
-            <div class="row-count" [matTooltip]="getPrTooltip()" matTooltipPosition="above">
+            <div class="row-count pr-row-count" [matTooltip]="getPrTooltip()" matTooltipPosition="above">
               <span class="octicon count-margins" octicon="git-pull-request"></span>
               <span>{{ this.issues.prCount }}</span>
             </div>
@@ -75,11 +75,11 @@
             <div>
               {{ milestone.title }}
             </div>
-            <div class="row-count count-margins" [matTooltip]="getIssueTooltip()" matTooltipPosition="above">
+            <div class="issue-row-count count-margins" [matTooltip]="getIssueTooltip()" matTooltipPosition="above">
               <span class="octicon count-margins" octicon="issue-opened"></span>
               <span class="">{{ this.issues.issueCount }}</span>
             </div>
-            <div class="row-count" [matTooltip]="getPrTooltip()" matTooltipPosition="above">
+            <div class="pr-row-count" [matTooltip]="getPrTooltip()" matTooltipPosition="above">
               <span class="octicon count-margins" octicon="git-pull-request"></span>
               <span>{{ this.issues.prCount }}</span>
             </div>

src/app/shared/issue-pr-card/issue-pr-card-header/issue-pr-card-header.component.css

@@ -21,6 +21,7 @@ span.octicon {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  margin-right: 14px;
 }
 
 :host ::ng-deep .mat-card-header-text {

src/app/shared/issue-pr-card/issue-pr-card-header/issue-pr-card-header.component.html

@@ -1,5 +1,5 @@
 <mat-card-header>
-  <mat-card-title>
+  <mat-card-title style="padding-right: 10px">
     <span class="octicon" [octicon]="getOcticon()" [color]="getIssueOpenOrCloseColor()"></span>
     #{{ issue.id }}: {{ fitTitleText() }}
   </mat-card-title>

src/app/shared/issue-pr-card/issue-pr-card.component.css

@@ -1,12 +1,73 @@
 .card {
   margin: 8px 0px 8px 0px;
+  position: relative;
+}
+
+.pr-card {
+  background-color: transparent;
+}
+
+.issue-card {
   background-color: transparent;
 }
 
 .mat-card {
   padding: 10px;
 }
 
+.issue-type-indicator {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+}
+
+.type-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 12px;
+  color: #fff;
+  background-color: gray; /* Default fallback */
+  margin-top: 4px;
+  margin-right: 2px;
+}
+
+.issue-badge {
+  width: 22px;
+  height: 22px;
+  font-family: 'Georgia';
+  border-radius: 50%; /* Circle shape */
+  padding: 0;
+}
+
+.pr-badge {
+  width: 24px;
+  height: 20px;
+  border-radius: 20%; /* Rounded square shape */
+}
+
+.issue-badge.badge-green,
+.pr-badge.badge-green {
+  background-color: green;
+}
+
+.issue-badge.badge-purple,
+.pr-badge.badge-purple {
+  background-color: purple;
+}
+
+.issue-badge.badge-red,
+.pr-badge.badge-red {
+  background-color: red;
+}
+
+.issue-badge.badge-gray,
+.pr-badge.badge-gray {
+  background-color: gray;
+}
+
 .column-header {
   justify-content: center;
   margin: 0;

src/app/shared/issue-pr-card/issue-pr-card.component.html

@@ -1,4 +1,9 @@
-<mat-card class="card" [ngClass]="getIssueOpenOrCloseColorCSSClass()">
+<mat-card class="card" [class.issue-card]="isIssue()" [class.pr-card]="!isIssue()" [ngClass]="getIssueOpenOrCloseColorCSSClass()">
+  <div class="issue-type-indicator">
+    <span [ngClass]="getBadgeClasses()" [matTooltip]="getBadgeTooltip()">
+      {{ getBadgeText() }}
+    </span>
+  </div>
   <a class="no-underline link-grey-dark">
     <span [matTooltip]="this.issue.updated_at">
       <app-issue-pr-card-header [issue]="issue" (click)="viewIssueInBrowser($event)"></app-issue-pr-card-header>

src/app/shared/issue-pr-card/issue-pr-card.component.ts

@@ -72,4 +72,49 @@ export class IssuePrCardComponent {
   isMergedWithoutReview(issue: Issue): boolean {
     return issue.issueOrPr === 'PullRequest' && issue.state === 'MERGED' && (!issue.reviews || issue.reviews.length === 0);
   }
+
+  isIssue(): boolean {
+    return this.issue.issueOrPr === 'Issue';
+  }
+
+  /**
+   * Obtains badge colour from issue state.
+   * @returns CSS class for the badge color based on the issue state.
+   */
+  getBadgeColorClass(): string {
+    if (this.issue.state === 'OPEN') {
+      if (this.issue.isDraft) {
+        return 'badge-gray';
+      } else {
+        return 'badge-green';
+      }
+    } else if (this.issue.issueOrPr === 'PullRequest' && this.issue.state === 'CLOSED') {
+      return 'badge-red';
+    } else if (this.issue.issueOrPr === 'Issue' && this.issue.stateReason === 'NOT_PLANNED') {
+      return 'badge-gray';
+    } else {
+      return 'badge-purple';
+    }
+  }
+
+  /**
+   * Gets the badge class array for CSS styling.
+   */
+  getBadgeClasses(): string[] {
+    return ['type-badge', this.isIssue() ? 'issue-badge' : 'pr-badge', this.getBadgeColorClass()];
+  }
+
+  /**
+   * Gets the badge display text.
+   */
+  getBadgeText(): string {
+    return this.isIssue() ? 'I' : 'PR';
+  }
+
+  /**
+   * Gets the tooltip text for the badge.
+   */
+  getBadgeTooltip(): string {
+    return this.isIssue() ? 'Issue' : 'Pull Request';
+  }
 }