optimize song filter

src/app/widget-modules/components/sidebar/page-frame.component.html

@@ -7,6 +7,9 @@
               class="sidebar-toggle"
               mat-icon-button type="button">
         <fa-icon [icon]="collapsed ? closedIcon : openIcon"></fa-icon>
+        @if (menuBadge()) {
+          <span aria-hidden="true" class="sidebar-toggle-badge"></span>
+        }
       </button>
     }
     <div class="title">{{ title() }}</div>

src/app/widget-modules/components/sidebar/page-frame.component.less

@@ -39,6 +39,17 @@
   color: inherit;
 }
 
+.sidebar-toggle-badge {
+  position: absolute;
+  right: 2px;
+  bottom: 3px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--danger);
+  box-shadow: 0 0 0 1px var(--surface-persist);
+}
+
 .sidebar-toggle:hover {
   color: var(--icon-button-hover-color);
 }

src/app/widget-modules/components/sidebar/page-frame.component.ts

@@ -18,6 +18,7 @@ export class PageFrameComponent {
   public closedIcon = faBars;
   public title = input.required<string>();
   public withMenu = input<boolean>(true);
+  public menuBadge = input<boolean>(false);
 
   public toggle(): void {
     this.collapsed = !this.collapsed;