Refactor

app/app.css

@@ -1 +1,3 @@
+/* stylelint-disable import-notation */
 @import "tailwindcss";
+/* stylelint-enable import-notation */

app/components/forward-button.hbs

@@ -4,7 +4,7 @@
   {{on "click" @onClick}}
   aria-label="Next"
 >
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
     <path d="M3 5v14l8 -7z"></path>
     <path d="M14 5v14l8 -7z"></path>
   </svg>

app/components/noise-button.hbs

@@ -4,13 +4,13 @@
   aria-label="Noises"
 >
   {{#if true}}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;" width="24" height="24" stroke-width="2">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
         <path d="M3 7c3 -2 6 -2 9 0s6 2 9 0"></path>
         <path d="M3 17c3 -2 6 -2 9 0s6 2 9 0"></path>
         <path d="M3 12c3 -2 6 -2 9 0s6 2 9 0"></path>
       </svg>
     {{else}}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;" width="24" height="24" stroke-width="2">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
         <path d="M3 7c.915 -.61 1.83 -1.034 2.746 -1.272m4.212 .22c.68 .247 1.361 .598 2.042 1.052c3 2 6 2 9 0"></path>
         <path d="M3 17c3 -2 6 -2 9 0c2.092 1.395 4.184 1.817 6.276 1.266"></path>
         <path d="M3 12c3 -2 6 -2 9 0m5.482 1.429c1.173 -.171 2.345 -.647 3.518 -1.429"></path>

app/components/noise-dropdown.hbs

@@ -1,4 +1,4 @@
-<div class="mt-2 bg-stone-500/20 backdrop-blur-sm p-4 rounded-xl shadow-lg">
+<div class="mt-2 bg-stone-500/20 backdrop-blur-sm p-4 rounded-xl shadow-lg border border-transparent hover:border-white/10">
   <div class="grid grid-cols-3 gap-2">
     <button type="button"
       class="p-2 rounded hover:bg-white/10 transition-colours cursor-pointer {{if this.noises.brown.active 'bg-white/20'}}"

app/components/noise-dropdown.ts

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-// Use a type alias instead of an empty interface to avoid ESLint warnings.
 type NoiseDropdownArgs = Record<string, never>;
 
 type NoiseType = 'brown' | 'green' | 'white';
@@ -16,15 +15,14 @@ export default class NoiseDropdownComponent extends Component<NoiseDropdownArgs>
   @tracked volume = 1;
   private previousVolume = 1;
 
-  // Each noise is mapped to an audio element; note that the green noise plays blue_noise.mp3.
   noises: Record<NoiseType, Noise> = {
     brown: {
       active: false,
       audio: new Audio('/brown_noise.mp3'),
     },
     green: {
       active: false,
-      audio: new Audio('/blue_noise.mp3'),
+      audio: new Audio('/green_noise.mp3'),
     },
     white: {
       active: false,
@@ -34,19 +32,16 @@ export default class NoiseDropdownComponent extends Component<NoiseDropdownArgs>
 
   constructor(owner: unknown, args: NoiseDropdownArgs) {
     super(owner, args);
-    // Set each audio element to loop and initialise its volume.
     Object.values(this.noises).forEach((noise) => {
       noise.audio.loop = true;
       noise.audio.volume = this.volume;
     });
   }
 
-  // Computed property to indicate whether the volume is muted.
   get isMuted(): boolean {
     return this.volume === 0;
   }
 
-  // Toggle the given noise on or off.
   @action
   toggleNoise(noiseType: NoiseType) {
     const noise = this.noises[noiseType];
@@ -74,7 +69,6 @@ export default class NoiseDropdownComponent extends Component<NoiseDropdownArgs>
     });
   }
 
-  // Toggle mute by setting the volume to zero or restoring the previous volume.
   @action
   toggleMute() {
     if (this.volume === 0) {

app/components/play-pause-button.hbs

@@ -5,14 +5,14 @@
   aria-label={{if @isPlaying "Pause" "Play"}}
 >
   {{#if @isPlaying}}
-    <!-- Pause SVG -->
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
+    {{!-- Pause SVG --}}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
         <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
         <path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
       </svg>
   {{else}}
-    <!-- Play SVG -->
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
+    {{!-- Play SVG --}}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
         <path d="M7 4v16l13 -8z"></path>
       </svg>
   {{/if}}

app/components/player.hbs

@@ -1,4 +1,4 @@
-<!-- lofi/app/components/player.hbs -->
+{{!-- lofi/app/components/player.hbs --}}
 <div class="z-20 fixed border border-transparent hover:border-white/10 bottom-4 left-1/2 -translate-x-1/2 bg-stone-500/20 backdrop-blur-sm p-4 rounded-xl shadow-lg flex items-center w-[calc(100vw-2rem)] md:w-1/2 lg:w-2/5 xl:w-1/3">
 
   <div class="flex flex-col w-full">

app/components/player.ts

@@ -1,13 +1,8 @@
-// lofi/app/components/player.ts
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import songs from 'lofi/data/lofigirl-songs';
 
-/**
- * If this component doesn’t take any arguments,
- * use a type alias to avoid the "empty interface" ESLint warning.
- */
 type PlayerArgs = Record<string, never>;
 
 export default class PlayerComponent extends Component<PlayerArgs> {
@@ -21,7 +16,6 @@ export default class PlayerComponent extends Component<PlayerArgs> {
   private audioElement = new Audio();
   private baseUrl = 'https://lofigirl.com/wp-content/uploads/';
 
-  // Add a history stack to keep track of played songs
   @tracked history: number[] = [];
 
   constructor(owner: unknown, args: PlayerArgs) {
@@ -94,29 +88,17 @@ export default class PlayerComponent extends Component<PlayerArgs> {
       return;
     }
 
-    // Push the current index to history before changing
     if (this.previousIndex !== -1) {
-      // Reassign history to trigger reactivity
       this.history = [...this.history, this.previousIndex];
-      // Optional: Limit history size
-      // const maxHistory = 10;
-      // if (this.history.length > maxHistory) {
-      //   this.history = this.history.slice(-maxHistory);
-      // }
     }
 
     this.previousIndex = index;
-    // The `!` asserts we know there is a valid string at songs[index].
     const songPath = songs[index]!;
     this.currentSongName = this.formatSongName(songPath);
     this.audioElement.src = `${this.baseUrl}${songPath}`;
   }
 
-  /**
-   * Safely handle the possibility that `filename` might be undefined (though we used `!` above).
-   */
   private formatSongName(path: string): string {
-    // `.pop()` can be undefined, so fallback with `?? ''`
     const filename = path.split('/').pop() ?? '';
     return filename
       .replace(/^\d+-/, '')
@@ -128,7 +110,6 @@ export default class PlayerComponent extends Component<PlayerArgs> {
     return this.volume === 0;
   }
 
-  // New computed property to determine if "Previous" should be disabled
   get isPreviousDisabled(): boolean {
     return this.history.length === 0;
   }
@@ -163,15 +144,12 @@ export default class PlayerComponent extends Component<PlayerArgs> {
   @action
   async previousSong(): Promise<void> {
     if (this.history.length === 0) {
-      // Optionally, you can handle the case when there's no history
       console.log('No previous song in history.');
       return;
     }
 
-    // Create a copy of history and remove the last element
     const newHistory = [...this.history];
     const previousIndex = newHistory.pop()!;
-    // Reassign the updated history
     this.history = newHistory;
 
     this.previousIndex = previousIndex;

app/components/previous-track-button.hbs

@@ -6,7 +6,7 @@
   disabled={{@isDisabled}}
   title={{@tooltip}}
 >
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
     <path d="M21 5v14l-8 -7z"></path>
     <path d="M10 5v14l-8 -7z"></path>
   </svg>

app/components/top.hbs

@@ -1,11 +1,11 @@
 <div class="flex flex-col items-end">
   <div class="z-20 flex space-x-2">
-    <button {{on "click" this.toggleNoiseDropdown}}>
+    <button type="button" {{on "click" this.toggleNoiseDropdown}}>
       <NoiseButton />
     </button>
     <PomodoroButton />
   </div>
   <div class="{{if this.showNoiseDropdown 'mt-2 z-20' 'hidden'}}" {{on "mouseleave" this.hideNoiseDropdown}}>
     <NoiseDropdown />
   </div>
-</div>
+</div>

app/components/volume-control.hbs

@@ -6,22 +6,24 @@
     aria-label={{if @isMuted "Unmute" "Mute"}}
   >
     {{#if @isMuted}}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"  stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" class="dark:stroke-current">
         <path d="M15 8a5 5 0 0 1 1.912 4.934m-1.377 2.602a5 5 0 0 1 -.535 .464"></path>
         <path d="M17.7 5a9 9 0 0 1 2.362 11.086m-1.676 2.299a9 9 0 0 1 -.686 .615"></path>
         <path d="M9.069 5.054l.431 -.554a.8 .8 0 0 1 1.5 .5v2m0 4v8a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l1.294 -1.664"></path>
         <path d="M3 3l18 18"></path>
       </svg>
     {{else}}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2" class="dark:stroke-current">
         <path d="M15 8a5 5 0 0 1 0 8"></path>
         <path d="M17.7 5a9 9 0 0 1 0 14"></path>
         <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"></path>
       </svg>
     {{/if}}
   </button>
 
+  <label for="volume-control" class="sr-only">Volume</label>
   <input
+    id="volume-control"
     type="range"
     min="0"
     max="1"
@@ -30,4 +32,4 @@
     {{on "input" @onVolumeChange}}
     class="w-24 h-1 bg-gray-600 rounded-full accent-gray-100 cursor-pointer"
   />
-</div>
+</div>

app/styles/app.css

@@ -2,10 +2,7 @@
 .rain-overlay {
   /* Fill the parent container */
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 
   /* Prevent clicks on the overlay (so underlying elements are clickable) */
   pointer-events: none;
@@ -25,3 +22,10 @@ button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+.background-container {
+  background-image: url("/images/cyberpunk1.jpeg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}

app/templates/application.hbs

@@ -1,7 +1,6 @@
 <div class="relative min-h-screen w-full">
   <div
-    class="bg-cover bg-center bg-no-repeat min-h-screen w-full flex flex-col"
-    style="background-image: url('/images/cyberpunk1.jpeg');"
+    class="background-container bg-cover bg-center bg-no-repeat min-h-screen w-full flex flex-col"
   >
     {{page-title "Lofi"}}