add song reporting

src/app/widget-modules/components/badge/badge.component.html

@@ -0,0 +1,3 @@
+<span [class]="'badge ' + type">
+  <ng-content></ng-content>
+</span>

src/app/widget-modules/components/badge/badge.component.less

@@ -0,0 +1,35 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.75rem;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1;
+  border: 1px solid transparent;
+
+  &.ok {
+    background: #e6f6ea;
+    border-color: #9ad1a7;
+    color: #1f6b34;
+  }
+
+  &.warn {
+    background: #fff4db;
+    border-color: #f2cf7a;
+    color: #8a5a00;
+  }
+
+  &.error {
+    background: #fdeaea;
+    border-color: #efb2b2;
+    color: #9b2c2c;
+  }
+
+  &.none {
+    background: #eef1f4;
+    border-color: #c7d0d9;
+    color: #4f5f6f;
+  }
+}

src/app/widget-modules/components/badge/badge.component.spec.ts

@@ -0,0 +1,28 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BadgeComponent} from './badge.component';
+
+describe('BadgeComponent', () => {
+  let component: BadgeComponent;
+  let fixture: ComponentFixture<BadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BadgeComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('create an instance', () => {
+    void expect(component).toBeTruthy();
+  });
+
+  it('should apply the configured type class', () => {
+    component.type = 'error';
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.badge')?.className).toContain('error');
+  });
+});

src/app/widget-modules/components/badge/badge.component.ts

@@ -0,0 +1,13 @@
+import {Component, Input} from '@angular/core';
+
+export type BadgeType = 'ok' | 'warn' | 'error' | 'none';
+
+@Component({
+  selector: 'app-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.less'],
+  standalone: true,
+})
+export class BadgeComponent {
+  @Input() public type: BadgeType = 'none';
+}