canti primo tag

src/app/pages/display/display-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { DisplayPage } from './display.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DisplayPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DisplayPageRoutingModule {}

src/app/pages/display/display.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { DisplayPageRoutingModule } from './display-routing.module';
+
+import { DisplayPage } from './display.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    DisplayPageRoutingModule
+  ],
+  declarations: [DisplayPage]
+})
+export class DisplayPageModule {}

src/app/pages/display/display.page.html

@@ -0,0 +1,46 @@
+<ion-content [fullscreen]="true" class="bg-gradient">
+  <div class="display-wrapper" 
+       [style.fontSize.rem]="fontSize()"
+       (touchstart)="onTouchStart($event)"
+       (touchmove)="onTouchMove($event)"
+       (touchend)="onTouchEnd()">
+    <div class="lyrics-window">
+      <!-- Previous line -->
+      <div *ngIf="displayLines().prev" class="prev-line">
+        <ng-container *ngIf="showChords(); else prevText">
+          <span *ngFor="let seg of displayLines().prev!.segments" class="chord-segment">
+            <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
+            <span class="seg-text">{{ seg.text }}</span>
+          </span>
+        </ng-container>
+        <ng-template #prevText>{{ displayLines().prev!.text }}</ng-template>
+      </div>
+
+      <!-- Active line -->
+      <div *ngIf="displayLines().current" class="active-line outfit-font">
+        <ng-container *ngIf="showChords(); else currentText">
+          <span *ngFor="let seg of displayLines().current!.segments" class="chord-segment">
+            <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
+            <span class="seg-text">{{ seg.text }}</span>
+          </span>
+        </ng-container>
+        <ng-template #currentText>{{ displayLines().current!.text }}</ng-template>
+      </div>
+
+      <!-- Next line -->
+      <div *ngIf="displayLines().next" class="next-line">
+        <ng-container *ngIf="showChords(); else nextText">
+          <span *ngFor="let seg of displayLines().next!.segments" class="chord-segment">
+            <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
+            <span class="seg-text">{{ seg.text }}</span>
+          </span>
+        </ng-container>
+        <ng-template #nextText>{{ displayLines().next!.text }}</ng-template>
+      </div>
+    </div>
+    
+    <div class="footer-info">
+      <div class="title-label outfit-font">{{ canto()?.titolo }}</div>
+    </div>
+  </div>
+</ion-content>

src/app/pages/display/display.page.scss

@@ -0,0 +1,91 @@
+.bg-gradient {
+  --background: radial-gradient(circle at top, #1e272e 0%, #000000 100%);
+  background: radial-gradient(circle at top, #1e272e 0%, #000000 100%);
+}
+
+.display-wrapper {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5% 10%;
+  text-align: center;
+  transition: font-size 0.2s ease;
+  touch-action: none; /* Support pinch-to-zoom */
+}
+
+.lyrics-window {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2rem;
+  width: 100%;
+}
+
+.active-line {
+  font-size: 5rem;
+  font-weight: 700;
+  color: var(--ion-color-secondary);
+  text-shadow: 0 0 20px rgba(253, 203, 110, 0.4);
+  line-height: 1.2;
+}
+
+.prev-line, .next-line {
+  font-size: 2.5rem;
+  color: rgba(255, 255, 255, 0.2);
+  font-weight: 300;
+}
+
+// ─── Chord segments for display ────────────────
+.chord-segment {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: bottom;
+}
+
+.chord {
+  color: #e74c3c;
+  font-weight: 700;
+  font-size: 0.4em;
+  line-height: 1.2;
+  min-height: 0.5em;
+  font-family: 'Outfit', sans-serif;
+  letter-spacing: 0.5px;
+}
+
+.active-line .chord {
+  color: #e74c3c;
+  font-size: 0.35em;
+}
+
+.prev-line .chord, .next-line .chord {
+  color: rgba(231, 76, 60, 0.4);
+  font-size: 0.5em;
+}
+
+.active-line, .prev-line, .next-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.seg-text {
+  white-space: pre-wrap;
+}
+
+.footer-info {
+  margin-top: 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 1rem;
+  width: 100%;
+  
+  .title-label {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+}

src/app/pages/display/display.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DisplayPage } from './display.page';
+
+describe('DisplayPage', () => {
+  let component: DisplayPage;
+  let fixture: ComponentFixture<DisplayPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DisplayPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/display/display.page.ts

@@ -0,0 +1,123 @@
+import { Component, OnInit, OnDestroy, signal, computed, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CantiService, Canto } from '../../services/canti.service';
+import { LyricsParserService, ParsedSection } from '../../services/lyrics-parser.service';
+
+@Component({
+  selector: 'app-display',
+  templateUrl: './display.page.html',
+  styleUrls: ['./display.page.scss'],
+  standalone: false
+})
+export class DisplayPage implements OnInit, OnDestroy {
+  public canto = signal<Canto | null>(null);
+  public showChords = signal<boolean>(false);
+  public fontSize = signal<number>(1.0);
+  public currentLineIndex = signal<number>(0);
+
+  public parsedSections = computed<ParsedSection[]>(() => {
+    const c = this.canto();
+    if (!c) return [];
+    if (this.showChords() && c.accordi) {
+      return this.lyricsParser.parseAccordi(c.accordi);
+    }
+    return this.lyricsParser.parseText(c.testo);
+  });
+
+  /** Get the current line text and surrounding lines from flat index */
+  public displayLines = computed(() => {
+    const sections = this.parsedSections();
+    const idx = this.currentLineIndex();
+    const allLines: { text: string; segments: any[]; sectionType: string }[] = [];
+
+    for (const section of sections) {
+      for (const line of section.lines) {
+        allLines.push({ text: line.text, segments: line.segments, sectionType: section.type });
+      }
+    }
+
+    return {
+      prev: idx > 0 ? allLines[idx - 1] : null,
+      current: allLines[idx] || null,
+      next: idx < allLines.length - 1 ? allLines[idx + 1] : null
+    };
+  });
+
+  private channel = new BroadcastChannel('karaoke_sync');
+  
+  private readonly MIN_FONT = 0.6;
+  private readonly MAX_FONT = 5.0;
+  private initialPinchDistance: number | null = null;
+  private initialFontSize: number = 1.0;
+
+  private route = inject(ActivatedRoute);
+  private cantiService = inject(CantiService);
+  private lyricsParser = inject(LyricsParserService);
+
+  constructor() { }
+
+  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      const id = params['id'];
+      if (id) {
+        const found = this.cantiService.getCantoById(id);
+        if (found) this.canto.set(found);
+      }
+    });
+
+    this.channel.onmessage = (event) => {
+      if (event.data.type === 'SYNC_INDEX') {
+        this.currentLineIndex.set(event.data.index);
+      }
+      if (event.data.type === 'SYNC_CANTO') {
+        const found = this.cantiService.getCantoById(event.data.id);
+        if (found) this.canto.set(found);
+      }
+      if (event.data.type === 'SYNC_CHORDS') {
+        this.showChords.set(event.data.showChords);
+      }
+      if (event.data.type === 'SYNC_FONT') {
+        this.fontSize.set(event.data.fontSize);
+      }
+    };
+  }
+
+  ngOnDestroy() {
+    this.channel.close();
+  }
+
+  // --- Touch Gestures for Pinch-to-Zoom ---
+  onTouchStart(event: TouchEvent) {
+    if (event.touches.length === 2) {
+      this.initialPinchDistance = this.getDistance(event.touches[0], event.touches[1]);
+      this.initialFontSize = this.fontSize();
+    }
+  }
+
+  onTouchMove(event: TouchEvent) {
+    if (event.touches.length === 2 && this.initialPinchDistance !== null) {
+      event.preventDefault(); // Prevent browser zoom/scroll
+      const currentDistance = this.getDistance(event.touches[0], event.touches[1]);
+      const ratio = currentDistance / this.initialPinchDistance;
+      let newSize = this.initialFontSize * ratio;
+      
+      // Clamp values
+      newSize = Math.max(this.MIN_FONT, Math.min(this.MAX_FONT, newSize));
+      
+      if (Math.abs(newSize - this.fontSize()) > 0.01) {
+        this.fontSize.set(newSize);
+        // Sync back to player if display is touched
+        this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.fontSize() });
+      }
+    }
+  }
+
+  onTouchEnd() {
+    this.initialPinchDistance = null;
+  }
+
+  private getDistance(t1: Touch, t2: Touch): number {
+    return Math.sqrt(Math.pow(t1.clientX - t2.clientX, 2) + Math.pow(t1.clientY - t2.clientY, 2));
+  }
+  // ----------------------------------------
+}

src/app/pages/player/player-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PlayerPage } from './player.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PlayerPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PlayerPageRoutingModule {}

src/app/pages/player/player.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { IonicModule } from '@ionic/angular';
+
+import { PlayerPageRoutingModule } from './player-routing.module';
+
+import { PlayerPage } from './player.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PlayerPageRoutingModule,
+    DragDropModule
+  ],
+  declarations: [PlayerPage]
+})
+export class PlayerPageModule {}

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

@@ -0,0 +1,211 @@
+<ion-header [translucent]="true" class="ion-no-border">
+  <ion-toolbar class="bg-gradient top-toolbar">
+    <ion-buttons slot="start">
+      <div class="offline-badge-header" *ngIf="!connectivityService.isOnline()">
+        <ion-icon name="cloud-offline-outline"></ion-icon>
+      </div>
+    </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="title-text">{{ canto()?.titolo || 'Player' }}</span>
+      </div>
+    </ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button text="" defaultHref="/home" color="secondary"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <!-- Audio Toolbar Removed -->
+</ion-header>
+
+<ion-content class="bg-gradient" [class.full-screen-content]="settingsService.fullscreenMode()">
+  <div class="lyrics-container" 
+       [style.fontSize.rem]="fontSize()"
+       [class.full-screen-container]="settingsService.fullscreenMode()"
+       (touchstart)="onTouchStart($event)"
+       (touchmove)="onTouchMove($event)"
+       (touchend)="onTouchEnd()">
+
+    
+    <!-- Landscape Side Controls (Scrollable) -->
+    <div class="landscape-side-controls" [class.active-fullscreen]="settingsService.fullscreenMode()">
+      <div class="side-scroll-container">
+        <div class="side-group equidistant-group">
+          <!-- Navigation -->
+          <ion-button fill="clear" (click)="restart()">
+            <ion-icon name="arrow-up-circle" color="secondary"></ion-icon>
+          </ion-button>
+          <ion-button fill="clear" (click)="prev()" [disabled]="currentLineIndex() === 0">
+            <ion-icon name="chevron-up" color="secondary"></ion-icon>
+          </ion-button>
+          <ion-button fill="clear" (click)="next()" [disabled]="currentLineIndex() === getTotalLines() - 1">
+            <ion-icon name="chevron-down" color="secondary"></ion-icon>
+          </ion-button>
+
+          <!-- Zoom -->
+          <ion-button fill="clear" (click)="zoomIn()" [disabled]="fontSize() >= 5.0">
+            <ion-icon name="add-circle-outline" color="secondary"></ion-icon>
+          </ion-button>
+          <ion-button fill="clear" (click)="zoomOut()" [disabled]="fontSize() <= 0.6">
+            <ion-icon name="remove-circle-outline" color="secondary"></ion-icon>
+          </ion-button>
+
+          <!-- Karaoke Toggle (Moved down) -->
+          <ion-button fill="clear" (click)="toggleListening()" [color]="audioEngine.isListening() ? 'danger' : 'secondary'">
+            <ion-icon [name]="audioEngine.isListening() ? 'mic' : 'mic-off'"></ion-icon>
+          </ion-button>
+          
+          <!-- Youtube Link -->
+          <ion-button *ngIf="canto()?.link_youtube && canto()?.link_youtube!.length > 5" fill="clear" (click)="openYoutube()">
+            <ion-icon name="logo-youtube" color="danger"></ion-icon>
+          </ion-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Sections rendering -->
+    <div class="lyrics-view">
+      <div *ngFor="let section of parsedSections(); let si = index" 
+           class="section" 
+           [class.chorus]="section.type === 'chorus'"
+           [class.verse-num]="section.type === 'verse_num'">
+        
+        <!-- Section label for chorus -->
+        <div *ngIf="section.type === 'chorus'" class="section-label">Rit.</div>
+        <div *ngIf="section.type === 'verse_num' && section.verseNumber" class="section-label verse-num-label">{{ section.verseNumber }}.</div>
+
+        <div *ngFor="let line of section.lines; let li = index" 
+             class="lyric-line"
+             [class.active]="isActiveLine(si, li)">
+
+          <!-- Chord mode: show chords above text -->
+          <ng-container *ngIf="showChords(); else textOnly">
+            <span *ngFor="let seg of line.segments" class="chord-segment">
+              <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
+              <span class="seg-text">{{ seg.text }}</span>
+            </span>
+          </ng-container>
+
+          <!-- Text only mode -->
+          <ng-template #textOnly>
+            {{ line.text }}
+          </ng-template>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</ion-content>
+
+<ion-footer class="ion-no-border">
+  <!-- Audio Player Toolbar -->
+  <ion-toolbar class="global-player-toolbar glass" *ngIf="canto()?.link_youtube && canto()?.link_youtube!.length > 5 && !settingsService.fullscreenMode()">
+    <div class="player-content">
+      <div class="controls-row">
+        <ion-button fill="clear" color="secondary" (click)="prevSong()" class="skip-btn">
+          <ion-icon slot="icon-only" name="play-skip-back-sharp"></ion-icon>
+        </ion-button>
+        
+        <ion-button fill="clear" color="secondary" (click)="toggleAudio()" class="play-btn">
+          <ion-icon slot="icon-only" [name]="youtubePlayerService.isPlaying() ? 'pause-sharp' : 'play-sharp'"></ion-icon>
+        </ion-button>
+
+        <ion-range 
+          [min]="0" 
+          [max]="youtubePlayerService.videoDuration()" 
+          [value]="youtubePlayerService.videoProgress()"
+          (ionChange)="onSeek($event)"
+          color="secondary"
+          class="global-range">
+        </ion-range>
+
+        <ion-button fill="clear" color="secondary" (click)="nextSong()" class="skip-btn">
+          <ion-icon slot="icon-only" name="play-skip-forward-sharp"></ion-icon>
+        </ion-button>
+
+        <ion-button fill="clear" color="medium" (click)="stopVideo($event)" class="close-btn">
+          <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+        </ion-button>
+      </div>
+    </div>
+  </ion-toolbar>
+
+  <!-- Voice Activity Visualizer (Slim overlay) -->
+  <div class="transcript-area slim" *ngIf="audioEngine.isListening()">
+    <div class="energy-bar" [style.width.%]="math.min(100, audioEngine.energyLevel() * 3)"></div>
+  </div>
+
+  <ion-toolbar class="bg-gradient slim-toolbar">
+    <div class="slim-controls">
+      <!-- Karaoke Toggle in Portrait -->
+      <ion-button fill="clear" size="small" (click)="toggleListening()" [color]="audioEngine.isListening() ? 'danger' : 'secondary'" class="mic-btn-portrait">
+        <ion-icon slot="icon-only" [name]="audioEngine.isListening() ? 'mic' : 'mic-off'"></ion-icon>
+      </ion-button>
+
+
+      <!-- Transposition (Only in chords mode) -->
+      <div class="group" *ngIf="showChords()">
+        <ion-button fill="clear" size="small" (click)="transposeDown()">
+          <ion-icon slot="icon-only" name="remove"></ion-icon>
+        </ion-button>
+        <div class="transpose-indicator">
+          <ion-icon name="musical-note" color="secondary"></ion-icon>
+          <span class="val" *ngIf="transposeAmount() !== 0">{{ transposeAmount() > 0 ? '+' : '' }}{{ transposeAmount() }}</span>
+        </div>
+        <ion-button fill="clear" size="small" (click)="transposeUp()">
+          <ion-icon slot="icon-only" name="add"></ion-icon>
+        </ion-button>
+      </div>
+
+      <!-- Navigation -->
+      <div class="group">
+        <ion-button fill="clear" size="small" (click)="restart()">
+          <ion-icon slot="icon-only" name="arrow-up-circle" color="secondary"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" size="small" (click)="prev()" [disabled]="currentLineIndex() === 0">
+          <ion-icon slot="icon-only" name="chevron-back" color="secondary"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" size="small" (click)="next()" [disabled]="currentLineIndex() === getTotalLines() - 1">
+          <ion-icon slot="icon-only" name="chevron-forward" color="secondary"></ion-icon>
+        </ion-button>
+      </div>
+
+      <!-- Zoom -->
+      <div class="group">
+        <ion-button fill="clear" size="small" (click)="zoomOut()" [disabled]="fontSize() <= 0.6">
+          <ion-icon slot="icon-only" name="remove-circle-outline" color="secondary"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" size="small" (click)="zoomIn()" [disabled]="fontSize() >= 5.0">
+          <ion-icon slot="icon-only" name="add-circle-outline" color="secondary"></ion-icon>
+        </ion-button>
+      </div>
+
+      <!-- Actions -->
+      <div class="group">
+        <ion-button *ngIf="canto()?.link_youtube && canto()?.link_youtube!.length > 5" fill="clear" size="small" (click)="openYoutube()">
+          <ion-icon slot="icon-only" name="logo-youtube" color="danger"></ion-icon>
+        </ion-button>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-footer>
+
+<!-- Vertical Sensitivity Slider Overlay -->
+<div class="mic-sensitivity-overlay" *ngIf="showSensitivitySlider() && audioEngine.isListening()">
+  <div class="slider-card glass">
+    <ion-button fill="clear" color="secondary" (click)="toggleSensitivitySlider($event)" class="close-slider-btn">
+      <ion-icon name="close-outline"></ion-icon>
+    </ion-button>
+    <div class="slider-wrapper" 
+         (touchstart)="handleSensitivityTouch($event)" 
+         (touchmove)="handleSensitivityTouch($event)">
+      <div class="custom-vertical-slider">
+        <div class="slider-track"></div>
+        <div class="slider-fill" [style.height.%]="(audioEngine.sensitivity() - 50) * 2"></div>
+        <div class="slider-knob" [style.bottom.%]="(audioEngine.sensitivity() - 50) * 2"></div>
+      </div>
+    </div>
+    <span class="sensitivity-label outfit-font">{{ audioEngine.sensitivity() }}%</span>
+  </div>
+</div>

src/app/pages/player/player.page.scss

@@ -0,0 +1,439 @@
+.bg-gradient {
+  --background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
+  background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
+}
+
+.outfit-font {
+  font-family: 'Outfit', sans-serif;
+}
+
+// Header styles
+.top-toolbar {
+  --padding-top: 4px;
+  --padding-bottom: 4px;
+  --min-height: 40px;
+  
+  // Force left alignment in Ionic toolbar
+  ion-title {
+    padding-inline: 8px;
+    text-align: left !important;
+  }
+
+  .title-main {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+    font-weight: 700;
+    color: var(--ion-color-secondary);
+    white-space: normal;
+    line-height: 1.2;
+    text-align: left;
+
+    .canto-number {
+      font-size: 0.85em;
+      background: rgba(var(--ion-color-secondary-rgb), 0.15);
+      padding: 2px 10px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      border: 1px solid rgba(var(--ion-color-secondary-rgb), 0.3);
+      flex-shrink: 0;
+
+      &.clickable {
+        cursor: pointer;
+        transition: all 0.2s ease;
+        &:active { transform: scale(0.9); }
+      }
+
+      &.selected {
+        background: var(--ion-color-secondary);
+        color: #000;
+        border-color: var(--ion-color-secondary);
+        box-shadow: 0 0 10px rgba(var(--ion-color-secondary-rgb), 0.4);
+      }
+    }
+    
+    .title-text {
+      flex: 1;
+      text-align: left;
+    }
+  }
+}
+
+// Content and Lyrics
+.lyrics-container {
+  padding: 8px 24px 140px 24px; // Increased bottom padding for global player
+  height: 100%;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+
+  &.full-screen-container {
+    padding-bottom: 20px !important;
+  }
+}
+
+// ... existing code ...
+
+/* GLOBAL PLAYER FOOTER */
+.global-player-toolbar {
+  --background: transparent;
+  --padding-top: 4px;
+  --padding-bottom: 4px;
+  --padding-start: 12px;
+  --padding-end: 12px;
+  
+  &.glass {
+    background: rgba(26, 26, 46, 0.95) !important;
+    backdrop-filter: blur(20px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+
+  .player-content {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .controls-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .play-btn {
+      --padding-start: 0;
+      --padding-end: 0;
+      height: 44px;
+      width: 44px;
+      
+      ion-icon {
+        font-size: 2.2rem;
+      }
+    }
+
+    .skip-btn, .close-btn {
+      --padding-start: 0;
+      --padding-end: 0;
+      height: 36px;
+      width: 36px;
+      
+      ion-icon {
+        font-size: 1.4rem;
+      }
+    }
+
+    .global-range {
+      flex: 1;
+      --bar-height: 4px;
+      --knob-size: 14px;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}
+
+.lyrics-view {
+  max-width: 900px;
+  margin-left: 0; // Always left aligned
+  text-align: left;
+}
+
+.section {
+  margin-bottom: 2rem;
+  position: relative;
+  
+  &.chorus {
+    background: rgba(var(--ion-color-secondary-rgb), 0.03);
+    border-left: 3px solid var(--ion-color-secondary);
+    padding-left: 1rem;
+    margin-left: -1rem;
+    border-radius: 0 8px 8px 0;
+  }
+
+  .section-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: var(--ion-color-secondary);
+    margin-bottom: 0.5rem;
+    opacity: 0.7;
+    letter-spacing: 1px;
+  }
+}
+
+.lyric-line {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.9);
+  transition: all 0.3s ease;
+  min-height: 1.5em;
+
+  &.active {
+    color: var(--ion-color-secondary);
+    font-weight: 700;
+    transform: scale(1.02);
+    text-shadow: 0 0 15px rgba(var(--ion-color-secondary-rgb), 0.3);
+  }
+}
+
+.chord-segment {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: bottom;
+  margin-right: 0.2em;
+
+  .chord {
+    font-size: 0.75em;
+    font-weight: 700;
+    color: var(--ion-color-secondary);
+    height: 1.2em;
+    margin-bottom: -0.2em;
+  }
+
+  .seg-text {
+    white-space: pre;
+  }
+}
+
+// Footer styles
+.slim-toolbar {
+  --min-height: 48px;
+  backdrop-filter: blur(15px);
+  background: rgba(0,0,0,0.4) !important;
+}
+
+.slim-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 8px;
+
+  .group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2px 6px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .page-indicator {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--ion-color-secondary);
+    min-width: 40px;
+    text-align: center;
+  }
+
+  .transpose-indicator {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--ion-color-secondary);
+
+    ion-icon { font-size: 0.9rem; }
+  }
+}
+
+// Transcript area
+.transcript-area {
+  height: 4px;
+  width: 100%;
+  background: rgba(0,0,0,0.2);
+  
+  .energy-bar {
+    height: 100%;
+    background: var(--ion-color-danger);
+    transition: width 0.1s ease;
+    box-shadow: 0 0 10px var(--ion-color-danger);
+  }
+}
+
+// Fullscreen and Orientation
+@media (orientation: landscape) {
+  // Always hide footer in landscape as we have side controls
+  ion-footer {
+    display: none !important;
+  }
+
+  .lyrics-container {
+    height: 100%;
+    padding-top: 4px; // Minimized
+    padding-right: 90px !important; // More room for side controls and zoom
+  }
+
+  ion-content {
+    --offset-bottom: 0px !important;
+  }
+}
+
+ion-content.full-screen-content {
+  --offset-bottom: 0px !important;
+  
+  @media (orientation: portrait) {
+    --offset-bottom: 48px !important; // Footer height
+  }
+}
+
+.landscape-side-controls {
+  display: none !important; // Strict hidden in portrait
+  
+  @media (orientation: landscape) {
+    display: flex !important;
+    flex-direction: column;
+    position: fixed;
+    right: 0;
+    top: 44px !important; // Align with header
+    bottom: 0;
+    width: 60px;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    z-index: 100;
+  }
+
+  .side-scroll-container {
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 12px 0;
+    gap: 16px;
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  .side-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px; // Reduced for a more compact layout
+    padding-bottom: 20px;
+
+    ion-button {
+      --padding-start: 0;
+      --padding-end: 0;
+      margin: 0;
+      height: 48px;
+      ion-icon { font-size: 1.8rem; }
+    }
+  }
+
+  .side-divider {
+    display: none;
+  }
+}
+ 
+.mic-sensitivity-overlay {
+  position: fixed;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1000;
+  pointer-events: auto;
+
+  @media (orientation: landscape) {
+    right: 80px; // Prossimo ai controlli laterali
+  }
+
+  .slider-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 6px 12px 6px;
+    background: rgba(18, 18, 18, 0.85) !important;
+    backdrop-filter: blur(25px);
+    border-radius: 24px;
+    border: 1px solid rgba(var(--ion-color-secondary-rgb), 0.4);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+    gap: 12px;
+    animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .close-slider-btn {
+    --padding-start: 0;
+    --padding-end: 0;
+    margin: 0;
+    height: 36px;
+    width: 36px;
+    --color: var(--ion-color-secondary);
+    
+    ion-icon {
+      font-size: 1.5rem;
+    }
+  }
+
+  .slider-wrapper {
+    height: 180px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    padding: 10px 0;
+  }
+
+  .custom-vertical-slider {
+    position: relative;
+    width: 8px;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    
+    .slider-track {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+    
+    .slider-fill {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: var(--ion-color-secondary);
+      border-radius: 4px;
+      box-shadow: 0 0 10px rgba(var(--ion-color-secondary-rgb), 0.3);
+      transition: height 0.05s linear;
+    }
+    
+    .slider-knob {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 50%);
+      width: 28px;
+      height: 28px;
+      background: var(--ion-color-secondary);
+      border-radius: 50%;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(var(--ion-color-secondary-rgb), 0.5);
+      border: 2px solid #fff;
+      transition: bottom 0.05s linear;
+    }
+  }
+
+  .sensitivity-label {
+    font-size: 0.8rem;
+    font-weight: 800;
+    color: var(--ion-color-secondary);
+    min-width: 40px;
+    text-align: center;
+    letter-spacing: 0.5px;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

src/app/pages/player/player.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PlayerPage } from './player.page';
+
+describe('PlayerPage', () => {
+  let component: PlayerPage;
+  let fixture: ComponentFixture<PlayerPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlayerPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/player/player.page.ts

@@ -0,0 +1,489 @@
+import { Component, OnInit, OnDestroy, signal, computed, effect, inject, ElementRef, AfterViewInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AlertController, ToastController, GestureController } from '@ionic/angular';
+import { CantiService, Canto } from '../../services/canti.service';
+import { AudioEngineService } from '../../services/audio-engine.service';
+import { LyricsParserService, ParsedSection } from '../../services/lyrics-parser.service';
+import { ThemeService } from '../../services/theme.service';
+import { SettingsService } from '../../services/settings.service';
+import { ConnectivityService } from '../../services/connectivity.service';
+import { PlaylistService } from '../../services/playlist.service';
+import { YoutubePlayerService } from '../../services/youtube-player.service';
+import { MyCantiService } from '../../services/my-canti.service';
+
+@Component({
+  selector: 'app-player',
+  templateUrl: './player.page.html',
+  styleUrls: ['./player.page.scss'],
+  standalone: false
+})
+export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
+  public canto = signal<Canto | null>(null);
+
+  /** true = show chords (accordi mode), false = text only */
+  public showChords = signal<boolean>(false);
+  public showSensitivitySlider = signal<boolean>(false);
+
+  /** Font size scale factor (1.0 = default) */
+  public fontSize = signal<number>(1.0);
+
+  /** Parsed sections for the current view mode */
+  public parsedSections = computed<ParsedSection[]>(() => {
+    const c = this.canto();
+    if (!c) return [];
+
+    let sections: ParsedSection[];
+    // For local songs, if accordi is missing but testo has chords, use parseAccordi on testo
+    const hasChordsInText = !c.accordi && c.testo?.includes('[');
+    
+    if ((this.showChords() && c.accordi) || (this.showChords() && hasChordsInText)) {
+      sections = this.lyricsParser.parseAccordi(c.accordi || c.testo);
+    } else {
+      sections = this.lyricsParser.parseText(c.testo);
+    }
+
+    // CRITICAL FIX: If sections are empty but we have text, force a manual section
+    if (sections.length === 0 && c.testo) {
+      const fallbackLines = c.testo.split('\n')
+        .filter(l => l.trim().length > 0)
+        .map(l => ({
+          text: l.trim(),
+          segments: [{ text: l.trim() }]
+        }));
+      
+      if (fallbackLines.length > 0) {
+        sections = [{
+          type: 'verse',
+          lines: fallbackLines
+        }];
+      }
+    }
+
+    // Apply transposition if in chords mode
+    if (this.showChords() && this.transposeAmount() !== 0) {
+      return this.lyricsParser.transposeSections(sections, this.transposeAmount());
+    }
+
+    return sections;
+  });
+
+  public transposeAmount = signal<number>(0);
+
+  public currentLineIndex = signal<number>(0);
+  public math = Math;
+  public youtubePlayerService = inject(YoutubePlayerService);
+  private channel = new BroadcastChannel('karaoke_sync');
+
+  private readonly MIN_FONT = 0.6;
+  private readonly MAX_FONT = 5.0;
+  private readonly FONT_STEP = 0.15;
+
+  private initialPinchDistance: number | null = null;
+  private initialFontSize: number = 1.0;
+
+  private lastMatchedTranscript: string = '';
+
+  // --- Logic State ---
+  private lastAdvanceTimestamp: number = 0;      // For safety cooldown
+  private readonly ADVANCE_COOLDOWN = 1500;      // 1.5 seconds min
+  
+  private wordsSpokenInCurrentLine: number = 0;
+  private lastProcessedTranscript: string = '';
+  private initialStartTime: number = 0;
+
+  private route = inject(ActivatedRoute);
+  public router = inject(Router);
+  public cantiService = inject(CantiService);
+  public audioEngine = inject(AudioEngineService);
+  private lyricsParser = inject(LyricsParserService);
+  private alertCtrl = inject(AlertController);
+  private toastCtrl = inject(ToastController);
+  public themeService = inject(ThemeService);
+  public settingsService = inject(SettingsService);
+  public connectivityService = inject(ConnectivityService);
+  public playlistService = inject(PlaylistService);
+  private myCantiService = inject(MyCantiService);
+  private gestureCtrl = inject(GestureController);
+  private el = inject(ElementRef);
+  private sanitizer = inject(DomSanitizer);
+
+  constructor() {
+    // Sync mode from global settings
+    effect(() => {
+      this.showChords.set(this.settingsService.showChordsDefault());
+    }, { allowSignalWrites: true });
+
+    // Automatic advancement logic based on line detection
+    effect(() => {
+      const count = this.audioEngine.linesDetected();
+      if (count > 0) {
+        this.next();
+      }
+    });
+
+    // Auto-scroll logic: keep active line in view
+    effect(() => {
+      const idx = this.currentLineIndex();
+      // Wait for DOM update
+      setTimeout(() => {
+        const activeElem = document.querySelector('.lyric-line.active');
+        if (activeElem) {
+          activeElem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }, 100);
+    });
+
+    effect(() => {
+      const c = this.canto();
+      if (c) {
+        if (this.playlistService.autoPlayPlaylist()) {
+          setTimeout(() => this.initPlayer(c.id), 500);
+        }
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    const gesture = this.gestureCtrl.create({
+      el: this.el.nativeElement,
+      direction: 'x',
+      gestureName: 'swipe-song',
+      canStart: (ev) => {
+        // Prevent swipe when touching the bottom toolbar or other interactive elements
+        const target = ev.event.target as HTMLElement;
+        return !target.closest('ion-footer');
+      },
+      onEnd: (ev) => {
+        if (Math.abs(ev.deltaX) > 60) {
+          if (ev.deltaX > 0) {
+            this.prevSong();
+          } else {
+            this.nextSong();
+          }
+        }
+      }
+    });
+    gesture.enable();
+  }
+
+
+  private getAllLines(): any[] {
+    const sections = this.parsedSections();
+    const allLines: any[] = [];
+    for (const s of sections) {
+      for (const l of s.lines) {
+        allLines.push(l);
+      }
+    }
+    return allLines;
+  }
+
+  ngOnInit() {
+    this.route.queryParams.subscribe(async params => {
+      let id = params['id'];
+      if (params['t']) {
+        this.initialStartTime = parseInt(params['t'], 10);
+      }
+      if (!id) {
+        id = await this.cantiService.getStorage()?.get('last_song_id');
+      }
+      if (id) {
+        let found: Canto | undefined = this.cantiService.getCantoById(id);
+        if (!found) {
+          found = this.myCantiService.myCanti().find(c => c.id === id);
+        }
+
+        if (found) {
+          this.canto.set(found);
+          this.cantiService.getStorage()?.set('last_song_id', id);
+          this.channel.postMessage({ type: 'SYNC_CANTO', id: found.id });
+        }
+      }
+    });
+  }
+
+
+
+  onTouchStart(event: TouchEvent) {
+    if (event.touches.length === 2) {
+      this.initialPinchDistance = this.getDistance(event.touches[0], event.touches[1]);
+      this.initialFontSize = this.fontSize();
+    }
+  }
+
+  onTouchMove(event: TouchEvent) {
+    if (event.touches.length === 2 && this.initialPinchDistance !== null) {
+      event.preventDefault();
+      const currentDistance = this.getDistance(event.touches[0], event.touches[1]);
+      const ratio = currentDistance / this.initialPinchDistance;
+      let newSize = this.initialFontSize * ratio;
+      newSize = Math.max(this.MIN_FONT, Math.min(this.MAX_FONT, newSize));
+      if (Math.abs(newSize - this.fontSize()) > 0.01) {
+        this.fontSize.set(newSize);
+        this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.fontSize() });
+      }
+    }
+  }
+
+  onTouchEnd() {
+    this.initialPinchDistance = null;
+  }
+
+  private getDistance(t1: Touch, t2: Touch): number {
+    return Math.sqrt(Math.pow(t1.clientX - t2.clientX, 2) + Math.pow(t1.clientY - t2.clientY, 2));
+  }
+
+  toggleChords() {
+    this.showChords.update(v => !v);
+    this.channel.postMessage({ type: 'SYNC_CHORDS', showChords: this.showChords() });
+    this.transposeAmount.set(0);
+  }
+
+  transposeUp() {
+    this.transposeAmount.update(v => v + 1);
+    this.channel.postMessage({ type: 'SYNC_TRANSPOSE', amount: this.transposeAmount() });
+  }
+
+  transposeDown() {
+    this.transposeAmount.update(v => v - 1);
+    this.channel.postMessage({ type: 'SYNC_TRANSPOSE', amount: this.transposeAmount() });
+  }
+
+  zoomIn() {
+    if (this.fontSize() < this.MAX_FONT) {
+      this.fontSize.update(v => Math.min(v + this.FONT_STEP, this.MAX_FONT));
+      this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.fontSize() });
+    }
+  }
+
+  zoomOut() {
+    if (this.fontSize() > this.MIN_FONT) {
+      this.fontSize.update(v => Math.max(v - this.FONT_STEP, this.MIN_FONT));
+      this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.fontSize() });
+    }
+  }
+
+  toggleListening() {
+    if (this.audioEngine.isListening()) {
+      this.audioEngine.stopListening();
+      this.showSensitivitySlider.set(false);
+    } else {
+      this.audioEngine.startListening();
+      this.showSensitivitySlider.set(true);
+    }
+  }
+
+  toggleSensitivitySlider(event: Event) {
+    event.stopPropagation();
+    this.showSensitivitySlider.update(v => !v);
+  }
+
+  onSensitivityChange(event: any) {
+    this.audioEngine.sensitivity.set(event.detail.value);
+  }
+
+  handleSensitivityTouch(event: TouchEvent) {
+    event.preventDefault();
+    const touch = event.touches[0];
+    const target = event.currentTarget as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    
+    // Calculate percentage based on Y position (bottom is 50%, top is 100%)
+    const rawPercentage = 100 - ((touch.clientY - rect.top) / rect.height * 100);
+    // Map 0-100 raw to 50-100 range
+    let percentage = 50 + (rawPercentage * 0.5);
+    percentage = Math.max(50, Math.min(100, Math.round(percentage)));
+    
+    this.audioEngine.sensitivity.set(percentage);
+  }
+
+  toggleAudio() {
+    if (this.youtubePlayerService.currentCantoId() === this.canto()?.id) {
+      this.youtubePlayerService.togglePlayPause();
+    } else {
+      const c = this.canto();
+      if (c) {
+        this.playlistService.autoPlayPlaylist.set(true);
+        this.initPlayer(c.id);
+      }
+    }
+  }
+
+  stopVideo(event?: Event) {
+    if (event) event.stopPropagation();
+    this.youtubePlayerService.stop();
+    this.playlistService.autoPlayPlaylist.set(false);
+  }
+
+  onSeek(event: any) {
+    this.youtubePlayerService.seekTo(event.detail.value);
+  }
+
+  restart() {
+    this.currentLineIndex.set(0);
+    this.audioEngine.resetWordCount();
+    this.youtubePlayerService.seekTo(0);
+    this.channel.postMessage({ type: 'SYNC_INDEX', index: 0 });
+  }
+
+  next() {
+    this.lastAdvanceTimestamp = Date.now();
+    this.audioEngine.resetWordCount();
+
+    const totalLines = this.getTotalLines();
+    if (this.currentLineIndex() < totalLines - 1) {
+      this.currentLineIndex.set(this.currentLineIndex() + 1);
+      this.channel.postMessage({ type: 'SYNC_INDEX', index: this.currentLineIndex() });
+    }
+  }
+
+  prev() {
+    this.lastAdvanceTimestamp = Date.now();
+    this.audioEngine.resetWordCount();
+    if (this.currentLineIndex() > 0) {
+      this.currentLineIndex.set(this.currentLineIndex() - 1);
+      this.channel.postMessage({ type: 'SYNC_INDEX', index: this.currentLineIndex() });
+    }
+  }
+
+  nextSong() {
+    let list = this.playlistService.activeListIds();
+    if (list.length === 0) {
+      list = this.cantiService.canti().map(c => c.id);
+    }
+    
+    const currentId = this.canto()?.id;
+    if (!currentId) return;
+
+    const index = list.indexOf(currentId);
+    if (index >= 0 && index < list.length - 1) {
+      const nextId = list[index + 1];
+      this.router.navigate(['/player'], { queryParams: { id: nextId } });
+    } else {
+      this.playlistService.autoPlayPlaylist.set(false);
+    }
+  }
+
+  prevSong() {
+    let list = this.playlistService.activeListIds();
+    if (list.length === 0) {
+      list = this.cantiService.canti().map(c => c.id);
+    }
+
+    const currentId = this.canto()?.id;
+    if (!currentId) return;
+
+    const index = list.indexOf(currentId);
+    if (index > 0) {
+      const prevId = list[index - 1];
+      this.router.navigate(['/player'], { queryParams: { id: prevId } });
+    }
+  }
+
+  private goToSong(id: string) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { id },
+      queryParamsHandling: 'merge'
+    });
+    this.restart();
+  }
+
+  getTotalLines(): number {
+    return this.parsedSections().reduce((acc, s) => acc + s.lines.length, 0);
+  }
+
+  isActiveLine(sectionIdx: number, lineIdx: number): boolean {
+    let flatIdx = 0;
+    for (let s = 0; s < this.parsedSections().length; s++) {
+      for (let l = 0; l < this.parsedSections()[s].lines.length; l++) {
+        if (s === sectionIdx && l === lineIdx) {
+          return flatIdx === this.currentLineIndex();
+        }
+        flatIdx++;
+      }
+    }
+    return false;
+  }
+
+  async openDisplay() {
+    const url = this.router.serializeUrl(
+      this.router.createUrlTree(['/display'], { queryParams: { id: this.canto()?.id } })
+    );
+    const absoluteUrl = window.location.origin + window.location.pathname + url;
+    const win = window.open(absoluteUrl, '_blank', 'width=1024,height=768');
+    if (!win) {
+      const alert = await this.alertCtrl.create({
+        header: 'Proiezione TV',
+        message: 'Il browser ha bloccato l\'apertura della finestra. Vuoi copiare il link da inviare alla TV?',
+        buttons: [
+          { text: 'Annulla', role: 'cancel' },
+          { text: 'Copia Link', handler: () => { this.copyToClipboard(absoluteUrl); } }
+        ]
+      });
+      await alert.present();
+    }
+  }
+
+  async copyToClipboard(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      const toast = await this.toastCtrl.create({
+        message: 'Link copiato negli appunti!',
+        duration: 2000,
+        position: 'top',
+        color: 'secondary'
+      });
+      await toast.present();
+    } catch (err) {}
+  }
+
+  openYoutube() {
+    const videoId = this.cantiService.getYoutubeId(this.canto()?.link_youtube);
+    if (videoId) {
+      window.open(`https://www.youtube.com/watch?v=${videoId}`, '_blank');
+    }
+  }
+
+  private initPlayer(id: string) {
+    const startT = this.initialStartTime;
+    this.initialStartTime = 0; // Reset
+    
+    this.youtubePlayerService.setMediaSessionCallbacks(
+      () => this.nextSong(),
+      () => this.prevSong()
+    );
+
+    this.youtubePlayerService.initPlayer(
+      id, 
+      startT,
+      () => {
+        if (this.playlistService.autoPlayPlaylist() && this.settingsService.autoAdvance()) {
+          this.nextSong();
+        } else {
+          this.playlistService.autoPlayPlaylist.set(false);
+        }
+      },
+      () => {
+        if (this.playlistService.autoPlayPlaylist() && this.settingsService.autoAdvance()) {
+          setTimeout(() => this.nextSong(), 1000);
+        } else {
+          this.playlistService.autoPlayPlaylist.set(false);
+        }
+      }
+    );
+  }
+
+  togglePlaylistSelection() {
+    const c = this.canto();
+    if (c) {
+      this.playlistService.toggleSongSelection(c.id);
+    }
+  }
+
+  ngOnDestroy() {
+    this.audioEngine.stopListening();
+    this.channel.close();
+  }
+}

src/app/pages/playlist/playlist.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { PlaylistPage } from './playlist.page';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PlaylistPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    DragDropModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [PlaylistPage]
+})
+export class PlaylistPageModule {}

src/app/pages/playlist/playlist.page.html

@@ -0,0 +1,43 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar class="bg-gradient">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/home" color="secondary"></ion-back-button>
+    </ion-buttons>
+    <ion-title class="outfit-font">Gestione Playlist</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="savePlaylist()" [disabled]="localSongs.length === 0">
+        <ion-icon slot="icon-only" name="save-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="bg-gradient">
+  <div class="ion-padding">
+    <div class="header-info glass ion-margin-bottom" *ngIf="localSongs.length > 0">
+      <p>Trascina i canti per riordinarli. Una volta finito puoi salvare la playlist.</p>
+    </div>
+
+    <div cdkDropList class="song-list" (cdkDropListDropped)="drop($event)">
+      <div class="song-item glass ion-margin-bottom" *ngFor="let song of localSongs" cdkDrag>
+        <div class="drag-handle" cdkDragHandle>
+          <ion-icon name="reorder-two-outline"></ion-icon>
+        </div>
+        <div class="song-info">
+          <span class="canto-number">{{ song.id_canti }}</span>
+          <span class="song-title">{{ song.titolo }}</span>
+        </div>
+        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+      </div>
+    </div>
+
+    <div *ngIf="localSongs.length === 0" class="empty-state ion-text-center">
+      <ion-icon name="musical-notes-outline" class="large-icon"></ion-icon>
+      <p>Nessun canto selezionato.</p>
+      <ion-button routerLink="/home" fill="outline" color="secondary" class="ion-margin-top">
+        Torna alla Home
+      </ion-button>
+    </div>
+  </div>
+
+</ion-content>

src/app/pages/playlist/playlist.page.scss

@@ -0,0 +1,179 @@
+.song-list {
+  display: block;
+}
+
+.song-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 12px;
+  cursor: move;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  .drag-handle {
+    margin-right: 12px;
+    color: rgba(255, 255, 255, 0.3);
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .song-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .canto-number {
+      background: rgba(var(--ion-color-secondary-rgb), 0.1);
+      color: var(--ion-color-secondary);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 0.8rem;
+      font-weight: 700;
+    }
+
+    .song-title {
+      font-weight: 500;
+      color: white;
+    }
+  }
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  background: #1e1e1e;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  color: white;
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.song-list.cdk-drop-list-dragging .song-item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.header-info {
+  padding: 12px;
+  border-radius: 12px;
+  p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.4;
+  }
+}
+
+.empty-state {
+  margin-top: 100px;
+  .large-icon {
+    font-size: 5rem;
+    color: rgba(255, 255, 255, 0.1);
+  }
+  p {
+    color: rgba(255, 255, 255, 0.5);
+    margin-top: 16px;
+  }
+}
+
+.qr-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+
+  .qr-card {
+    background: #ffffff;
+    padding: 24px;
+    border-radius: 20px;
+    width: 90%;
+    max-width: 350px;
+    text-align: center;
+    color: #000;
+
+    .qr-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      h3 { margin: 0; text-align: left; }
+    }
+
+    p {
+      font-size: 0.9rem;
+      color: #666;
+      margin-bottom: 24px;
+      text-align: left;
+    }
+
+    .qr-img-container {
+      background: #f8f8f8;
+      padding: 16px;
+      border-radius: 16px;
+      margin-bottom: 24px;
+      img {
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+    }
+
+    .qr-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+}
+
+.save-export-fab {
+  --border-radius: 30px;
+  width: auto;
+  min-width: 160px;
+  
+  .fab-content {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    gap: 8px;
+    
+    ion-icon {
+      font-size: 1.4rem;
+    }
+    
+    .fab-label {
+      font-size: 0.9rem;
+      font-weight: 600;
+      text-transform: none;
+    }
+  }
+}
+
+:host-context(body.high-contrast) {
+  .song-item {
+    background: #ffffff !important;
+    border-color: #000000 !important;
+    .song-title { color: #000000 !important; }
+    .drag-handle { color: #000000 !important; }
+  }
+  .header-info p { color: #000000 !important; }
+}

src/app/pages/playlist/playlist.page.ts

@@ -0,0 +1,180 @@
+import { Component, inject, computed } from '@angular/core';
+import { PlaylistService } from '../../services/playlist.service';
+import { CantiService } from '../../services/canti.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { AlertController, ToastController, ModalController } from '@ionic/angular';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-playlist',
+  templateUrl: './playlist.page.html',
+  styleUrls: ['./playlist.page.scss'],
+  standalone: false
+})
+export class PlaylistPage {
+  public playlistService = inject(PlaylistService);
+  public cantiService = inject(CantiService);
+  private alertCtrl = inject(AlertController);
+  private toastCtrl = inject(ToastController);
+  private router = inject(Router);
+
+  public selectedSongs = computed(() => {
+    const ids = Array.from(this.playlistService.selectedIds());
+    return ids.map(id => this.cantiService.canti().find(c => c.id === id)).filter(c => !!c);
+  });
+
+  public localSongs: any[] = [];
+  public qrCodeImage: string | null = null;
+  public savedPlaylistName: string | null = null;
+
+  constructor() {
+    // Initial copy to allow local reordering
+    this.localSongs = [...this.selectedSongs()];
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.localSongs, event.previousIndex, event.currentIndex);
+  }
+
+  async savePlaylist() {
+    const alert = await this.alertCtrl.create({
+      header: 'Salva Playlist',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'Nome della playlist',
+          value: this.savedPlaylistName || ''
+        }
+      ],
+      buttons: [
+        {
+          text: 'Annulla',
+          role: 'cancel'
+        },
+        {
+          text: 'Salva',
+          handler: (data) => {
+            if (data.name) {
+              this.savedPlaylistName = data.name;
+              this.playlistService.savePlaylist(data.name, this.localSongs.map(s => s.id));
+              this.showToast('Playlist salvata!');
+              this.router.navigate(['/settings']);
+              return true;
+            }
+            return false;
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+
+  async saveAndExport() {
+    const alert = await this.alertCtrl.create({
+      header: 'Salva ed Esporta QR',
+      message: 'Inserisci un nome per la playlist. Verrà salvata e generato il QR Code.',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'Nome della playlist',
+          value: this.savedPlaylistName || ''
+        }
+      ],
+      buttons: [
+        {
+          text: 'Annulla',
+          role: 'cancel'
+        },
+        {
+          text: 'Salva ed Esporta',
+          handler: async (data) => {
+            if (data.name) {
+              this.savedPlaylistName = data.name;
+              const ids = this.localSongs.map(s => s.id);
+              await this.playlistService.savePlaylist(data.name, ids);
+              this.qrCodeImage = await this.playlistService.generateQR(ids, data.name);
+              this.showToast('Playlist salvata!');
+              return true;
+            }
+            return false;
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+
+  async sharePlaylist() {
+    if (this.localSongs.length === 0) return;
+    
+    const ids = this.localSongs.map(s => s.id);
+    const name = this.savedPlaylistName || 'Playlist Condivisa';
+    this.qrCodeImage = await this.playlistService.generateQR(ids, name);
+  }
+
+  downloadQR() {
+    if (!this.qrCodeImage) return;
+    
+    const name = this.savedPlaylistName || 'playlist';
+    const fileName = `${name.toLowerCase().replace(/\s+/g, '_')}_qr.png`;
+    
+    const link = document.createElement('a');
+    link.href = this.qrCodeImage;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    this.showToast('Immagine scaricata!');
+  }
+
+  async shareQR() {
+    if (!this.qrCodeImage) return;
+    const name = this.savedPlaylistName || 'playlist';
+    const shareLink = this.playlistService.getShareLink(this.localSongs.map(s => s.id), name);
+    const fileName = `${name.toLowerCase().replace(/\s+/g, '_')}_qr.png`;
+
+    try {
+      // Convert base64 to blob/file for sharing
+      const res = await fetch(this.qrCodeImage);
+      const blob = await res.blob();
+      const file = new File([blob], fileName, { type: 'image/png' });
+      
+      if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
+        await navigator.share({
+          files: [file],
+          title: 'Playlist CantiCristiani',
+          text: `Ecco la playlist: ${name}\n\nClicca qui per aprirla subito: ${shareLink}`
+        });
+      } else {
+        // Fallback to simple share text or download
+        if (navigator.share) {
+          await navigator.share({
+            title: 'Playlist CantiCristiani',
+            text: `Ecco la playlist: ${name}\n\nClicca qui per aprirla: ${shareLink}`
+          });
+        } else {
+          this.downloadQR();
+        }
+      }
+    } catch (err) {
+      console.error('Share failed', err);
+      this.downloadQR();
+    }
+  }
+
+  closeQR() {
+    this.qrCodeImage = null;
+  }
+
+  async showToast(message: string) {
+    const toast = await this.toastCtrl.create({
+      message,
+      duration: 2000,
+      color: 'success'
+    });
+    await toast.present();
+  }
+}

src/app/pages/propose-canto/propose-canto.page.html

@@ -0,0 +1,144 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar class="bg-gradient">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/home" color="secondary"></ion-back-button>
+    </ion-buttons>
+    <ion-title class="outfit-font">Mio Canto</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="isHighContrast = !isHighContrast" [color]="isHighContrast ? 'warning' : 'medium'">
+        <ion-icon slot="icon-only" name="contrast-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding bg-gradient" [class.high-contrast-mode]="isHighContrast">
+  <div class="propose-container">
+    <!-- OCR Progress -->
+    <div class="ocr-progress-card" *ngIf="isProcessingOCR">
+      <ion-spinner name="crescent"></ion-spinner>
+      <div class="progress-info">
+        <p>Elaborazione in corso...</p>
+        <ion-progress-bar [value]="ocrProgress" color="secondary"></ion-progress-bar>
+      </div>
+    </div>
+
+    <ion-list lines="none" class="input-list">
+      <ion-item class="custom-input-item">
+        <ion-label position="stacked">Titolo del Canto</ion-label>
+        <ion-input [(ngModel)]="title" placeholder="Es: Il Signore è la mia salvezza"></ion-input>
+      </ion-item>
+
+      <div class="category-selectors">
+        <ion-item class="custom-input-item select-item">
+          <ion-label position="stacked">Momento Liturgico</ion-label>
+          <ion-select [(ngModel)]="selectedLiturgico" placeholder="Scegli momento" multiple="true" interface="popover">
+            <ion-select-option *ngFor="let lit of cantiService.indiceLiturgico()" [value]="lit.id">
+              {{ lit.tag_name }}
+            </ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item class="custom-input-item select-item">
+          <ion-label position="stacked">Periodo / Tema</ion-label>
+          <ion-select [(ngModel)]="selectedTematico" placeholder="Scegli tema" multiple="true" interface="popover">
+            <ion-select-option *ngFor="let tem of cantiService.indiceTematico()" [value]="tem.id">
+              {{ tem.tag_name }}
+            </ion-select-option>
+          </ion-select>
+        </ion-item>
+      </div>
+
+      <!-- TOOLBARS -->
+      <div class="toolbar-section">
+        <div class="horizontal-toolbar">
+          <ion-button *ngFor="let tag of commonTags" size="small" fill="outline" (click)="insertText(tag.start)">
+            {{ tag.label }}
+          </ion-button>
+        </div>
+      </div>
+
+      <div class="toolbar-section">
+        <div class="horizontal-toolbar chords-toolbar">
+          <ion-button size="small" *ngFor="let chord of commonChords" (click)="insertChord(chord)">
+            {{ chord }}
+          </ion-button>
+        </div>
+      </div>
+
+      <!-- EDITOR AREA -->
+      <div class="editor-wrapper" [class.hc]="isHighContrast">
+        <div class="editor-header">
+          <div class="editor-title-group">
+            <span>Editor Testo</span>
+          </div>
+          <div class="editor-actions">
+            <ion-button fill="clear" size="small" (click)="undo()" [disabled]="undoStack.length === 0">
+              <ion-icon name="undo-outline"></ion-icon>
+            </ion-button>
+            <ion-button fill="clear" size="small" (click)="takePhoto()">
+              <ion-icon name="camera-outline"></ion-icon>
+            </ion-button>
+            <ion-button fill="clear" size="small" (click)="uploadDoc()">
+              <ion-icon name="document-text-outline"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+        <ion-item class="custom-input-item textarea-item">
+          <ion-textarea 
+            #contentTextarea
+            [(ngModel)]="content" 
+            placeholder="Scrivi o scansiona..." 
+            rows="18" 
+            class="content-textarea"
+            (click)="openQuickMenu($event)">
+          </ion-textarea>
+        </ion-item>
+      </div>
+
+      <ion-item class="custom-input-item">
+        <ion-label position="stacked">Autore / Link YouTube</ion-label>
+        <ion-input [(ngModel)]="author" placeholder="Autore"></ion-input>
+        <ion-input [(ngModel)]="youtubeLink" placeholder="URL YouTube"></ion-input>
+      </ion-item>
+    </ion-list>
+
+    <div class="action-buttons">
+      <ion-button expand="block" (click)="saveToMyCanti()" class="send-btn" [disabled]="!title || !content || isProcessingOCR">
+        <ion-icon slot="start" name="save-outline"></ion-icon>
+        Salva nei Miei Canti
+      </ion-button>
+    </div>
+  </div>
+
+  <!-- QUICK INSERT POPOVER -->
+  <ion-popover [isOpen]="isChordPopoverOpen" (didDismiss)="isChordPopoverOpen = false" class="quick-popover">
+    <ng-template>
+      <ion-content class="ion-padding">
+        <div class="popover-container">
+          <div class="popover-section">
+            <h6>Struttura e Tag</h6>
+            <div class="popover-grid tags-grid">
+              <ion-button *ngFor="let tag of commonTags" size="small" fill="outline" (click)="insertText(tag.start); isChordPopoverOpen = false">
+                {{ tag.label }}
+              </ion-button>
+            </div>
+          </div>
+
+          <div class="popover-section">
+            <h6>Accordi Comuni</h6>
+            <div class="popover-grid chords-grid">
+              <ion-button *ngFor="let chord of commonChords" size="small" (click)="insertChord(chord); isChordPopoverOpen = false">
+                {{ chord }}
+              </ion-button>
+            </div>
+          </div>
+        </div>
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+
+  <!-- Hidden inputs -->
+  <input type="file" #cameraInput (change)="onFileSelected($event, true)" accept="image/*" capture="camera" style="display: none;">
+  <input type="file" #docInput (change)="onFileSelected($event, false)" accept=".pdf,.docx,.txt,.odt" style="display: none;">
+</ion-content>

src/app/pages/propose-canto/propose-canto.page.scss

@@ -0,0 +1,283 @@
+.bg-gradient {
+  --background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.propose-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.ocr-progress-card {
+  background: rgba(var(--ion-color-secondary-rgb), 0.15);
+  border: 1px solid var(--ion-color-secondary);
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+  
+  ion-spinner {
+    color: var(--ion-color-secondary);
+    width: 32px;
+    height: 32px;
+  }
+  
+  .progress-info {
+    flex: 1;
+    p {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 600;
+      color: white;
+      &.small {
+        font-size: 11px;
+        color: rgba(255,255,255,0.6);
+        margin-top: 2px;
+      }
+    }
+    ion-progress-bar {
+      margin-top: 12px;
+      height: 6px;
+      border-radius: 3px;
+    }
+  }
+}
+
+.toolbar-section {
+  margin-bottom: 12px;
+  
+  .toolbar-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: rgba(255, 255, 255, 0.5);
+    margin-bottom: 6px;
+    padding-left: 4px;
+    font-weight: 700;
+  }
+}
+
+.horizontal-toolbar {
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  padding-bottom: 10px;
+  scrollbar-width: thin;
+  
+  &::-webkit-scrollbar {
+    height: 3px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
+  }
+  
+  ion-button {
+    --border-radius: 10px;
+    margin: 0;
+    flex-shrink: 0;
+    font-size: 11px;
+    font-weight: 600;
+  }
+}
+
+.chords-toolbar {
+  ion-button {
+    --background: rgba(255, 255, 255, 0.1);
+    --color: #ffffff;
+    border: 1px solid rgba(255,255,255,0.1);
+    
+    &:active {
+      --background: var(--ion-color-secondary);
+    }
+  }
+}
+
+.editor-wrapper {
+  margin-bottom: 20px;
+  background: #000000;
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,0.1);
+  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
+
+  .editor-header {
+    background: rgba(255,255,255,0.05);
+    padding: 4px 8px 4px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    
+    .editor-title-group {
+      span {
+        font-size: 11px;
+        font-weight: 800;
+        color: var(--ion-color-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .editor-actions {
+      display: flex;
+      gap: 0;
+      
+      ion-button {
+        --color: rgba(255,255,255,0.6);
+        margin: 0;
+        height: 36px;
+        
+        &[disabled] {
+          opacity: 0.3;
+        }
+
+        ion-icon {
+          font-size: 18px;
+        }
+      }
+    }
+  }
+
+  &.hc {
+    border: 2px solid #ffffff;
+    background: #000000;
+    
+    .editor-header {
+      background: #ffffff;
+      span { color: #000000; }
+      small { color: #333; font-weight: 600; }
+    }
+    
+    .content-textarea {
+      --color: #ffffff !important;
+      color: #ffffff !important;
+      background: #000000 !important;
+      font-size: 18px !important;
+      font-weight: 700 !important;
+      caret-color: #ff00ff;
+    }
+  }
+}
+
+.content-textarea {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 15px;
+  font-weight: 500;
+  color: #ffffff;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --padding-top: 16px;
+  --padding-bottom: 16px;
+  min-height: 400px;
+}
+
+.category-selectors {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.select-item {
+  --background: rgba(255, 255, 255, 0.04);
+  --border-radius: 12px;
+  
+  ion-select {
+    width: 100%;
+    --padding-start: 0;
+    color: white;
+    font-size: 14px;
+  }
+}
+
+.custom-input-item {
+  --background: rgba(255, 255, 255, 0.04);
+  --border-radius: 12px;
+  margin-bottom: 12px;
+  
+  ion-label {
+    color: var(--ion-color-secondary) !important;
+    font-family: 'Outfit', sans-serif;
+    font-weight: 600;
+    margin-bottom: 6px !important;
+    font-size: 12px !important;
+    text-transform: uppercase;
+  }
+  
+  ion-input {
+    color: white;
+    font-weight: 500;
+  }
+}
+
+.textarea-item {
+  --background: transparent;
+  --padding-start: 0;
+  --padding-end: 0;
+}
+
+.action-buttons {
+  margin-top: 24px;
+  margin-bottom: 50px;
+}
+
+.send-btn {
+  --border-radius: 16px;
+  --background: var(--ion-color-secondary);
+  font-weight: 700;
+  height: 60px;
+  font-size: 16px;
+  box-shadow: 0 8px 20px rgba(var(--ion-color-secondary-rgb), 0.3);
+}
+
+/* POPOVER STYLING */
+.quick-popover {
+  --width: 90%;
+  --max-width: 400px;
+  --background: #1e1e1e;
+  --color: white;
+  
+  .popover-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .popover-section {
+    h6 {
+      margin: 0 0 8px 0;
+      font-size: 10px;
+      text-transform: uppercase;
+      color: var(--ion-color-medium);
+      letter-spacing: 1px;
+    }
+  }
+
+  .popover-grid {
+    display: grid;
+    gap: 4px;
+    
+    ion-button {
+      margin: 0;
+      --padding-start: 4px;
+      --padding-end: 4px;
+      font-size: 12px;
+      height: 32px;
+      --background: rgba(255,255,255,0.08);
+      --color: white;
+      font-weight: 700;
+    }
+  }
+
+  .tags-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .chords-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

src/app/pages/propose-canto/propose-canto.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ProposeCantoPage } from './propose-canto.page';
+
+describe('ProposeCantoPage', () => {
+  let component: ProposeCantoPage;
+  let fixture: ComponentFixture<ProposeCantoPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProposeCantoPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/propose-canto/propose-canto.page.ts

@@ -0,0 +1,254 @@
+import { Component, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule, ToastController, IonTextarea, PopoverController, NavController } from '@ionic/angular';
+import { createWorker } from 'tesseract.js';
+import { CantiService } from '../../services/canti.service';
+import { MyCantiService } from '../../services/my-canti.service';
+
+@Component({
+  selector: 'app-propose-canto',
+  templateUrl: './propose-canto.page.html',
+  styleUrls: ['./propose-canto.page.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, IonicModule]
+})
+export class ProposeCantoPage implements OnInit {
+  @ViewChild('contentTextarea', { static: false }) contentTextarea!: IonTextarea;
+  @ViewChild('cameraInput', { static: false }) cameraInput!: ElementRef;
+  @ViewChild('docInput', { static: false }) docInput!: ElementRef;
+
+  public cantiService = inject(CantiService);
+  private myCantiService = inject(MyCantiService);
+  private navCtrl = inject(NavController);
+
+  title: string = '';
+  author: string = '';
+  youtubeLink: string = '';
+  selectedLiturgico: number[] = [];
+  selectedTematico: number[] = [];
+  
+  private _content: string = '';
+  get content(): string { return this._content; }
+  set content(val: string) {
+    if (this._content !== val) {
+      this.saveToUndoStack(this._content);
+      this._content = val;
+    }
+  }
+
+  undoStack: string[] = [];
+  isProcessingOCR: boolean = false;
+  ocrProgress: number = 0;
+  isHighContrast: boolean = false;
+
+  commonChords = [
+    'DO', 'RE', 'MI', 'FA', 'SOL', 'LA', 'SI',
+    'DO-', 'RE-', 'MI-', 'FA-', 'SOL-', 'LA-', 'SI-',
+    'DO#', 'RE#', 'FA#', 'SOL#', 'LA#', 'DO#-', 'RE#-', 'FA#-', 'SOL#-', 'LA#-',
+    'DO7', 'RE7', 'MI7', 'FA7', 'SOL7', 'LA7', 'SI7', 'DO-7', 'RE-7', 'MI-7', 'LA-7', 'SI-7',
+    'DOmaj7', 'REmaj7', 'MImaj7', 'FAmaj7', 'SOLmaj7', 'LAmaj7', 'SImaj7',
+    'DO4', 'RE4', 'MI4', 'FA4', 'SOL4', 'LA4', 'SI4',
+    'DOdim', 'REdim', 'MIdim', 'FAdim', 'SOLdim', 'LAdim', 'SIdim',
+    'DOaug', 'REaug', 'MIaug', 'FAaug', 'SOLaug', 'LAaug', 'SIaug',
+    'DOm7', 'REm7', 'FAm7', 'SOLm7', 'LAm7'
+  ];
+
+  commonTags = [
+    { label: 'Ritornello', start: '{start_chorus}', end: '{end_chorus}' },
+    { label: 'Strofa', start: '{start_verse}', end: '{end_verse}' },
+    { label: 'Strofa Num.', start: '{start_verse_num}', end: '{end_verse_num}' },
+    { label: 'Inciso', start: '{start_bridge}', end: '{end_bridge}' },
+    { label: 'Intro Accordi', start: '{start_chord}', end: '{end_chord}' },
+    { label: 'Commento', start: '{c: ', end: '}' },
+    { label: 'ChordPro Strofa', start: '{sov}', end: '{eov}' },
+    { label: 'ChordPro Rit.', start: '{soc}', end: '{eoc}' }
+  ];
+
+  isChordPopoverOpen = false;
+
+  constructor(private toastController: ToastController, private popoverController: PopoverController) { }
+
+  ngOnInit() {
+  }
+
+  async insertText(tag: string) {
+    const input = await this.contentTextarea.getInputElement();
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+    
+    this.content = this.content.substring(0, start) + tag + this.content.substring(end);
+    
+    setTimeout(() => {
+      input.focus();
+      input.setSelectionRange(start + tag.length, start + tag.length);
+    }, 10);
+  }
+
+  insertChord(chord: string) {
+    this.insertText(`[${chord}]`);
+  }
+
+  undo() {
+    if (this.undoStack.length > 0) {
+      const previous = this.undoStack.pop();
+      if (previous !== undefined) {
+        this._content = previous;
+      }
+    }
+  }
+
+  private saveToUndoStack(val: string) {
+    if (this.undoStack.length >= 30) {
+      this.undoStack.shift();
+    }
+    this.undoStack.push(val);
+  }
+
+  takePhoto() {
+    this.cameraInput.nativeElement.click();
+  }
+
+  uploadDoc() {
+    this.docInput.nativeElement.click();
+  }
+
+  async onFileSelected(event: any, isCamera: boolean) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    this.isProcessingOCR = true;
+    this.ocrProgress = 0;
+
+    try {
+      const extension = file.name.split('.').pop().toLowerCase();
+      let extractedText = '';
+
+      if (extension === 'pdf') {
+        extractedText = await this.processPdf(file);
+      } else if (extension === 'docx') {
+        const mammoth = await import('mammoth');
+        const arrayBuffer = await file.arrayBuffer();
+        const result = await mammoth.extractRawText({ arrayBuffer });
+        extractedText = result.value;
+      } else if (['jpg', 'jpeg', 'png', 'webp'].includes(extension) || isCamera) {
+        extractedText = await this.processImageOCR(file);
+      } else {
+        extractedText = await file.text();
+      }
+
+      if (extractedText) {
+        const processed = this.smartProcessOCR(extractedText);
+        this.content += (this.content ? '\n\n' : '') + processed;
+        const toast = await this.toastController.create({
+          message: 'Documento elaborato!',
+          duration: 2000,
+          color: 'success'
+        });
+        toast.present();
+      }
+    } catch (error) {
+      console.error('File Processing Error:', error);
+    } finally {
+      this.isProcessingOCR = false;
+      this.ocrProgress = 0;
+      event.target.value = '';
+    }
+  }
+
+  async processImageOCR(file: File): Promise<string> {
+    const worker = await createWorker('ita', 1, {
+      logger: m => {
+        if (m.status === 'recognizing text') this.ocrProgress = m.progress;
+      }
+    });
+    const { data: { text } } = await worker.recognize(file);
+    await worker.terminate();
+    return text;
+  }
+
+  async processPdf(file: File): Promise<string> {
+    const pdfjsLib = await import('pdfjs-dist');
+    // Set worker src from CDN for PWA compatibility
+    pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.mjs`;
+
+    const arrayBuffer = await file.arrayBuffer();
+    const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
+    const pdf = await loadingTask.promise;
+    
+    let fullText = '';
+    for (let i = 1; i <= pdf.numPages; i++) {
+      const page = await pdf.getPage(i);
+      const textContent = await page.getTextContent();
+      const pageText = textContent.items.map((item: any) => item.str).join(' ');
+      fullText += pageText + '\n';
+    }
+    return fullText;
+  }
+
+  smartProcessOCR(text: string): string {
+    let lines = text.split('\n');
+    let processedLines: string[] = [];
+    const chordRegex = /\b(DO|RE|MI|FA|SOL|LA|SI|C|D|E|F|G|A|B)(#|b)?(m|-|min|maj|aug|dim)?(7|9|11|13)?\b/gi;
+    let inChorus = false;
+    let inVerse = false;
+
+    lines.forEach((line) => {
+      let trimmed = line.trim();
+      if (!trimmed) {
+        if (inChorus) { processedLines.push('{end_chorus}'); inChorus = false; }
+        if (inVerse) { processedLines.push('{end_verse}'); inVerse = false; }
+        processedLines.push('');
+        return;
+      }
+
+      const isChorusMarker = /^(Rit|Ritornello|Chorus|CORO)/i.test(trimmed);
+      if (isChorusMarker && !inChorus) {
+        if (inVerse) { processedLines.push('{end_verse}'); inVerse = false; }
+        processedLines.push('{start_chorus}');
+        inChorus = true;
+        if (trimmed.length > 12) processedLines.push(this.wrapChords(trimmed, chordRegex));
+      } else {
+        if (!inVerse && !inChorus && trimmed.length > 5) {
+          processedLines.push('{start_verse}');
+          inVerse = true;
+        }
+        processedLines.push(this.wrapChords(trimmed, chordRegex));
+      }
+    });
+
+    if (inChorus) processedLines.push('{end_chorus}');
+    if (inVerse) processedLines.push('{end_verse}');
+    return processedLines.join('\n');
+  }
+
+  private wrapChords(line: string, regex: RegExp): string {
+    const chordsInLine = line.match(regex);
+    if (chordsInLine && chordsInLine.length > 0) {
+      return line.replace(regex, (match) => `[${match.toUpperCase()}]`);
+    }
+    return line;
+  }
+
+  async openQuickMenu(event: any) {
+    this.isChordPopoverOpen = true;
+  }
+
+  async saveToMyCanti() {
+    if (!this.title || !this.content) return;
+
+    // Combine lit and tematico for id_momenti
+    const id_momenti = [...this.selectedLiturgico, ...this.selectedTematico];
+
+    await this.myCantiService.saveCanto({
+      titolo: this.title,
+      autore: this.author,
+      link_youtube: this.youtubeLink,
+      testo: this.content,
+      accordi: this.content, // Save to both fields for compatibility
+      id_momenti: id_momenti
+    });
+
+    this.navCtrl.back();
+  }
+}

src/app/pages/settings/settings-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SettingsPage } from './settings.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SettingsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingsPageRoutingModule {}

src/app/pages/settings/settings.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { SettingsPageRoutingModule } from './settings-routing.module';
+import { SettingsPage } from './settings.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SettingsPageRoutingModule
+  ],
+  declarations: [SettingsPage]
+})
+export class SettingsPageModule {}

src/app/pages/settings/settings.page.html

@@ -0,0 +1,131 @@
+<ion-header [translucent]="true" class="ion-no-border">
+  <ion-toolbar class="bg-gradient">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/home" color="secondary"></ion-back-button>
+    </ion-buttons>
+    <ion-title class="outfit-font">Impostazioni</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="bg-gradient">
+  <div class="settings-container ion-padding">
+    
+    <div class="settings-group glass ion-margin-bottom">
+      <ion-item class="transparent-item" lines="none">
+        <ion-icon name="scan-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Schermo Intero Browser</h2>
+          <p class="settings-item-subtitle">Espande l'app a tutto schermo</p>
+        </ion-label>
+        <ion-toggle slot="end" [checked]="settingsService.browserFullscreen()" (ionChange)="settingsService.toggleBrowserFullscreen()" color="secondary"></ion-toggle>
+      </ion-item>
+      <ion-item class="transparent-item" lines="none">
+        <ion-icon name="expand-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Nascondi Barre (Player)</h2>
+          <p class="settings-item-subtitle">Modalità immersiva nel dettaglio canto</p>
+        </ion-label>
+        <ion-toggle slot="end" [checked]="settingsService.fullscreenMode()" (ionChange)="settingsService.toggleFullscreenMode()" color="secondary"></ion-toggle>
+      </ion-item>
+      <ion-item class="transparent-item" lines="none">
+        <ion-icon name="contrast-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Alto Contrasto</h2>
+          <p class="settings-item-subtitle">Colori più netti per il sole</p>
+        </ion-label>
+        <ion-toggle slot="end" [checked]="themeService.highContrast()" (ionChange)="themeService.toggleContrast()" color="secondary"></ion-toggle>
+      </ion-item>
+      <ion-item class="transparent-item" lines="none">
+        <ion-icon name="play-forward-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Avanzamento Automatico</h2>
+          <p class="settings-item-subtitle">Passa al canto successivo</p>
+        </ion-label>
+        <ion-toggle slot="end" [checked]="settingsService.autoAdvance()" (ionChange)="settingsService.toggleAutoAdvance()" color="secondary"></ion-toggle>
+      </ion-item>
+      <ion-item class="transparent-item" lines="none">
+        <ion-icon name="sunny-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Schermo Sempre Acceso</h2>
+          <p class="settings-item-subtitle">Evita che lo schermo si spenga</p>
+        </ion-label>
+        <ion-toggle slot="end" [checked]="settingsService.keepScreenOn()" (ionChange)="settingsService.toggleKeepScreenOn()" color="secondary"></ion-toggle>
+      </ion-item>
+      <ion-item class="transparent-item" lines="none">
+        <ion-icon name="create-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Editor e Canti Personali</h2>
+          <p class="settings-item-subtitle">Abilita aggiunta e gestione "Miei"</p>
+        </ion-label>
+        <ion-toggle slot="end" [checked]="settingsService.showEditor()" (ionChange)="settingsService.toggleEditor()" color="secondary"></ion-toggle>
+      </ion-item>
+    </div>
+
+    <!-- Display Mode Section -->
+    <div class="settings-group glass ion-margin-bottom">
+      <div class="group-header ion-padding-start ion-padding-top">
+        <h2 class="outfit-font settings-group-title">
+          Modalità Visualizzazione
+        </h2>
+      </div>
+      
+      <div class="segment-wrapper ion-padding-horizontal ion-padding-bottom">
+      <div class="filter-buttons compact-mode ion-padding-horizontal ion-padding-bottom">
+        <div class="filter-btn glass" 
+             [class.active-btn]="!settingsService.showChordsDefault()" 
+             (click)="onModeChange({detail: {value: 'text'}})">
+          <span>Solo Testo</span>
+        </div>
+        <div class="filter-btn glass" 
+             [class.active-btn]="settingsService.showChordsDefault()" 
+             (click)="onModeChange({detail: {value: 'chords'}})">
+          <span>Accordi</span>
+        </div>
+      </div>
+      </div>
+    </div>
+
+
+    <div class="settings-group glass ion-margin-top" *ngIf="settingsService.showEditor()">
+      <ion-item class="transparent-item" lines="none" (click)="myCantiService.sendAllMyCanti()" detail="true" button *ngIf="myCantiService.myCanti().length > 0">
+        <ion-icon name="send-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Proponi i miei canti ({{ myCantiService.myCanti().length }})</h2>
+          <p class="settings-item-subtitle">Invia a frassidavid@gmail.com</p>
+        </ion-label>
+      </ion-item>
+    </div>
+
+    <div class="settings-group glass ion-margin-top">
+      <ion-item class="transparent-item" lines="none" (click)="fullRefresh()" detail="true" button>
+        <ion-icon name="cloud-download-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Allinea con Server</h2>
+          <p class="settings-item-subtitle">Aggiorna canti e versione app</p>
+        </ion-label>
+        <ion-spinner slot="end" name="crescent" color="secondary" *ngIf="cantiService.loading()"></ion-spinner>
+      </ion-item>
+      <div class="sync-info ion-padding-bottom">
+        <p class="outfit-font settings-item-subtitle">
+          Versione: <strong>v{{ version }}</strong> &bull; 
+          Canti: <strong>{{ cantiService.canti().length }}</strong>
+        </p>
+      </div>
+      <div class="sync-progress" *ngIf="cantiService.loading()">
+        <div class="progress-bar" [style.width.%]="cantiService.progress()"></div>
+      </div>
+    </div>
+
+    <div class="credits-footer ion-padding-top ion-text-center">
+      <p class="outfit-font email-text">
+        info@canticristiani.it
+      </p>
+    </div>
+
+    <div class="ion-padding-top ion-text-center">
+      <p class="outfit-font settings-footer-text">
+        Le preferenze vengono salvate automaticamente.
+      </p>
+    </div>
+  </div>
+</ion-content>

src/app/pages/settings/settings.page.scss

@@ -0,0 +1,178 @@
+.bg-gradient {
+  --background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
+  background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
+}
+
+.outfit-font {
+  font-family: 'Outfit', sans-serif;
+}
+
+.settings-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.settings-group {
+  border-radius: 20px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+
+.transparent-item {
+  --background: transparent;
+  --color: white;
+  --padding-start: 16px;
+  --inner-padding-end: 16px;
+}
+
+.settings-item-title {
+  color: white;
+  font-weight: 600;
+  margin: 0;
+}
+
+.settings-item-subtitle {
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+}
+
+.settings-group-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--ion-color-secondary);
+  margin: 0;
+}
+
+.sub-group-title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+
+.playlist-item {
+  --min-height: 44px;
+  background: rgba(255, 255, 255, 0.03) !important;
+  margin: 4px 8px;
+  border-radius: 8px;
+  
+  .settings-item-title {
+    font-size: 0.9rem;
+  }
+}
+
+ion-radio {
+  --color: rgba(255, 255, 255, 0.4);
+  --color-checked: var(--ion-color-secondary);
+  font-size: 1rem;
+  width: 100%;
+  
+  ion-label {
+    color: white;
+  }
+}
+
+.compact-mode {
+  .filter-btn {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+.group-header {
+  margin-bottom: 8px;
+}
+
+.sync-info {
+  margin-top: 4px;
+  padding-left: 56px;
+  p {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.4);
+    strong {
+      color: var(--ion-color-secondary);
+    }
+  }
+}
+
+.sync-progress {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  width: 100%;
+  
+  .progress-bar {
+    height: 100%;
+    background: var(--ion-color-secondary);
+    transition: width 0.3s ease;
+  }
+}
+
+.settings-footer-text {
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 0.8rem;
+}
+
+// High contrast overrides
+:host-context(body.high-contrast) {
+  .settings-item-title {
+    color: black !important;
+  }
+  .settings-item-subtitle {
+    color: rgba(0, 0, 0, 0.6) !important;
+  }
+  .settings-footer-text {
+    color: rgba(0, 0, 0, 0.4) !important;
+  }
+  .sub-group-title {
+    color: rgba(0, 0, 0, 0.7) !important;
+  }
+  .sync-info p {
+    color: rgba(0, 0, 0, 0.7) !important;
+  }
+  ion-label {
+    color: black !important;
+  }
+  ion-radio {
+    --color: rgba(0, 0, 0, 0.3);
+    color: black !important;
+    
+    ion-label {
+      color: black !important;
+    }
+  }
+}
+
+.credits-footer {
+  margin-top: 24px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 24px;
+  
+  .credits-text {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--ion-color-secondary);
+    line-height: 1.6;
+  }
+  
+  .email-text {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.5);
+    margin-top: 8px;
+  }
+}
+
+:host-context(body.high-contrast) {
+  .credits-footer {
+    border-top-color: rgba(0, 0, 0, 0.2);
+    .credits-text {
+      color: black !important;
+    }
+    .email-text {
+      color: rgba(0, 0, 0, 0.6) !important;
+    }
+  }
+}

src/app/pages/settings/settings.page.ts

@@ -0,0 +1,75 @@
+import { Component, inject } from '@angular/core';
+import { ThemeService } from '../../services/theme.service';
+import { SettingsService } from '../../services/settings.service';
+import { CantiService } from '../../services/canti.service';
+import { ConnectivityService } from '../../services/connectivity.service';
+import { SwUpdate } from '@angular/service-worker';
+import { ToastController, ModalController, AlertController } from '@ionic/angular';
+import { VERSION } from '../../version';
+import { PlaylistService } from '../../services/playlist.service';
+import { Router } from '@angular/router';
+
+import { MyCantiService } from '../../services/my-canti.service';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.page.html',
+  styleUrls: ['./settings.page.scss'],
+  standalone: false
+})
+export class SettingsPage {
+  public myCantiService = inject(MyCantiService);
+  public themeService = inject(ThemeService);
+  public settingsService = inject(SettingsService);
+  public cantiService = inject(CantiService);
+  public connectivityService = inject(ConnectivityService);
+  public playlistService = inject(PlaylistService);
+  private swUpdate = inject(SwUpdate);
+  private toastCtrl = inject(ToastController);
+  private modalCtrl = inject(ModalController);
+  private alertCtrl = inject(AlertController);
+  private router = inject(Router);
+
+  public version = VERSION;
+
+  constructor() {}
+
+  onModeChange(event: any) {
+    this.settingsService.setShowChordsDefault(event.detail.value === 'chords');
+  }
+
+  async fullRefresh() {
+    // 1. Refresh JSON data
+    this.cantiService.refresh();
+
+    // 2. Check for Service Worker updates
+    if (this.swUpdate.isEnabled) {
+      try {
+        const updateFound = await this.swUpdate.checkForUpdate();
+        if (updateFound) {
+          const toast = await this.toastCtrl.create({
+            message: 'Nuova versione disponibile! Aggiornamento in corso...',
+            duration: 2000,
+            color: 'secondary'
+          });
+          await toast.present();
+          
+          setTimeout(() => {
+            window.location.reload();
+          }, 2000);
+          return;
+        }
+      } catch (err) {
+        console.error('Failed to check for updates', err);
+      }
+    }
+
+    const toast = await this.toastCtrl.create({
+      message: 'Dati aggiornati correttamente!',
+      duration: 2000,
+      color: 'success'
+    });
+    await toast.present();
+  }
+
+}