gestione comunità

src/app/pages/player/player.page.html

@@ -4,10 +4,19 @@
       <div class="offline-badge-header" *ngIf="!connectivityService.isOnline()">
         <ion-icon name="cloud-offline-outline"></ion-icon>
       </div>
+      <ion-button fill="clear" (click)="toggleChords()" style="margin: 0; --padding-start: 6px; --padding-end: 6px;">
+        <ion-icon slot="icon-only" 
+          [name]="showChords() ? 'musical-notes-outline' : 'text-outline'"
+          [color]="showChords() ? 'secondary' : 'medium'"
+          style="font-size: 1.3rem;">
+        </ion-icon>
+      </ion-button>
     </ion-buttons>
     <ion-title class="outfit-font wrapped-title">
       <div class="title-main" [style.fontSize.rem]="fontSize() * 1.1">
-        <span class="canto-number" *ngIf="canto()?.id_canti">{{ canto()?.id_canti }}</span>
+        <span class="canto-number" *ngIf="canto()?.id_canti" [style.color]="getCommunitySongNumber(canto()) !== null ? 'var(--ion-color-secondary)' : ''">
+          {{ getCommunitySongNumber(canto()) || canto()?.id_canti }}
+        </span>
         <span class="title-text">{{ canto()?.titolo || 'Player' }}</span>
       </div>
     </ion-title>