Move toju-app into own its folder

toju-app/src/app/shared/components/chat-audio-player/chat-audio-player.component.html

@@ -0,0 +1,129 @@
+<div class="audio-player-shell">
+  <audio
+    #audioEl
+    [src]="src()"
+    preload="metadata"
+    (ended)="onPause()"
+    (loadedmetadata)="onLoadedMetadata()"
+    (pause)="onPause()"
+    (play)="onPlay()"
+    (timeupdate)="onTimeUpdate()"
+    (volumechange)="onVolumeChange()"
+  ></audio>
+
+  <div class="audio-top-bar">
+    <div class="min-w-0 flex-1">
+      <div class="truncate text-sm font-medium text-foreground">{{ filename() }}</div>
+      @if (sizeLabel()) {
+        <div class="text-xs text-muted-foreground">{{ sizeLabel() }}</div>
+      }
+    </div>
+    <button
+      type="button"
+      (click)="requestDownload()"
+      class="audio-control-btn"
+      title="Save to folder"
+      aria-label="Save audio to folder"
+    >
+      <ng-icon
+        name="lucideDownload"
+        class="w-4 h-4"
+      />
+    </button>
+  </div>
+
+  <div class="audio-body">
+    <button
+      type="button"
+      (click)="togglePlayback()"
+      class="audio-play-btn"
+      [title]="isPlaying() ? 'Pause' : 'Play'"
+      [attr.aria-label]="isPlaying() ? 'Pause audio' : 'Play audio'"
+    >
+      <ng-icon
+        [name]="isPlaying() ? 'lucidePause' : 'lucidePlay'"
+        class="w-5 h-5"
+      />
+    </button>
+
+    <div class="audio-main">
+      <div
+        class="audio-waveform-panel"
+        [class.expanded]="waveformExpanded()"
+        [attr.aria-hidden]="!waveformExpanded()"
+      >
+        <div class="audio-waveform-shell">
+          <div
+            #waveformContainer
+            class="audio-waveform-container"
+            [class.invisible]="waveformLoading() || waveformUnavailable()"
+          ></div>
+
+          @if (waveformLoading()) {
+            <div class="audio-waveform-overlay text-muted-foreground">Loading waveform…</div>
+          } @else if (waveformUnavailable()) {
+            <div class="audio-waveform-overlay text-muted-foreground">
+              Couldn’t render a waveform preview for this file, but playback still works.
+            </div>
+          }
+        </div>
+      </div>
+
+      <input
+        type="range"
+        min="0"
+        [max]="durationSeconds() || 0"
+        [value]="currentTimeSeconds()"
+        (input)="onSeek($event)"
+        class="seek-slider"
+        [style.background]="seekTrackBackground()"
+        aria-label="Seek audio"
+      />
+
+      <div class="audio-controls-row">
+        <span class="audio-time-label"> {{ formatTime(currentTimeSeconds()) }} / {{ formatTime(durationSeconds()) }} </span>
+
+        <div class="audio-actions-group">
+          <div class="audio-volume-group">
+            <button
+              type="button"
+              (click)="toggleMute()"
+              class="audio-control-btn"
+              [title]="isMuted() ? 'Unmute' : 'Mute'"
+              [attr.aria-label]="isMuted() ? 'Unmute audio' : 'Mute audio'"
+            >
+              <ng-icon
+                [name]="isMuted() ? 'lucideVolumeX' : 'lucideVolume2'"
+                class="w-4 h-4"
+              />
+            </button>
+
+            <input
+              type="range"
+              min="0"
+              max="100"
+              [value]="displayVolumePercent()"
+              (input)="onVolumeInput($event)"
+              class="volume-slider"
+              [style.background]="volumeTrackBackground()"
+              aria-label="Audio volume"
+            />
+          </div>
+
+          <button
+            type="button"
+            (click)="toggleWaveform()"
+            class="audio-control-btn"
+            [title]="waveformExpanded() ? 'Hide waveform' : 'Show waveform'"
+            [attr.aria-label]="waveformExpanded() ? 'Hide waveform' : 'Show waveform'"
+          >
+            <ng-icon
+              [name]="waveformToggleIcon()"
+              class="w-4 h-4"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>