user preferences - chord type - apply in song and show-song

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,4 +1,4 @@
-<div [class.chords]="chordMode!=='hide'" class="song-text">
+<div [class.chords]="_chordMode!=='hide'" class="song-text">
 
   <div (click)="onChordClick()" class="menu">
     <fa-icon [icon]="faLines"></fa-icon>

src/app/widget-modules/components/song-text/song-text.component.less

@@ -29,7 +29,7 @@
   position: absolute;
   right: 0;
   background: #eee;
-  border-radius: 8px;
+  border-radius: 50%;
   padding: 5px;
   width: 20px;
   height: 20px;
@@ -38,7 +38,12 @@
   align-items: center;
   transition: 300ms all ease-in-out;
   cursor: pointer;
-  opacity: 0;
+  opacity: 0.1;
+
+  @media screen and (max-width: 860px) {
+    background: #0001;
+    opacity: 0.6;
+  }
 
   &:hover {
     background: #ddd;

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -17,7 +17,12 @@ export type ChordMode = 'show' | 'hide' | 'onlyFirst'
 })
 export class SongTextComponent implements OnInit {
   public sections: Section[];
-  public chordMode: ChordMode = 'hide';
+  public _chordMode: ChordMode = 'hide';
+  @Input()
+  public set chordMode(value: ChordMode) {
+    this._chordMode = value ?? 'hide';
+  }
+
   @Output() public chordModeChanged = new EventEmitter<ChordMode>();
   public faLines = faGripLines;
 
@@ -37,7 +42,7 @@ export class SongTextComponent implements OnInit {
     return section.lines.filter(_ => {
       if (_.type !== LineType.chord) return true;
 
-      switch (this.chordMode) {
+      switch (this._chordMode) {
         case 'show':
           return true;
         case 'hide':
@@ -50,12 +55,13 @@ export class SongTextComponent implements OnInit {
 
   public onChordClick(): void {
     const next = this.getNextChordMode();
+
     this.chordMode = next;
-    this.chordModeChanged.next(next);
+    this.chordModeChanged.emit(next);
   }
 
   private getNextChordMode(): ChordMode {
-    switch (this.chordMode) {
+    switch (this._chordMode) {
       case 'show':
         return 'hide';
       case 'hide':