From 9bd99b5e2348de24180807c6edde9f3c0b54aa8b Mon Sep 17 00:00:00 2001
From: htdguide <115078044+htdguide@users.noreply.github.com>
Date: Thu, 6 Mar 2025 00:01:38 +1300
Subject: [PATCH 1/6] Updated dependencies

---
 package-lock.json | 19 ++++++-------------
 package.json      |  1 +
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 863d5d25..56f850cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "webport",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "webport",
-      "version": "0.2.0",
+      "version": "0.2.1",
       "dependencies": {
         "framer-motion": "^12.4.7",
         "jsmediatags": "^3.9.7",
@@ -15,6 +15,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
+        "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
         "@testing-library/user-event": "^14.6.1",
@@ -1554,7 +1555,6 @@
       "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -1658,8 +1658,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -1937,7 +1936,6 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2624,8 +2622,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
@@ -4328,7 +4325,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -4768,7 +4764,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -4784,7 +4779,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -4847,8 +4841,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-refresh": {
       "version": "0.14.2",
diff --git a/package.json b/package.json
index ece3f463..9a8292dd 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",

From b405f888c3ed869efb4a0d2ba5479b1b18e28c3b Mon Sep 17 00:00:00 2001
From: Nikita Mogilevskii <115078044+htdguide@users.noreply.github.com>
Date: Thu, 6 Mar 2025 00:09:56 +1300
Subject: [PATCH 2/6] Update docker-image.yml

---
 .github/workflows/docker-image.yml | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
index 9ada2beb..55f8621c 100644
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/docker-image.yml
@@ -6,8 +6,8 @@ on:
       - main
 
 jobs:
-  build:
-    name: Push Docker Image to Docker Hub and Deploy to Server
+  test:
+    name: Run Vitest
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
@@ -18,10 +18,19 @@ jobs:
         with:
           node-version: 18
 
-      - name: Install Dependencies and Run Vitest
-        run: |
-          npm install --legacy-peer-deps
-          npm run test
+      - name: Install Dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run Tests
+        run: npm run test
+
+  build-deploy:
+    name: Build and Deploy Docker Image to Server
+    runs-on: ubuntu-latest
+    needs: test  # This ensures the build only runs if tests pass
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v2
 
       - name: Login to Docker Hub
         id: docker-hub

From 43376ad8bc84729406cd17f3d5802ff44c02338a Mon Sep 17 00:00:00 2001
From: htdguide <115078044+htdguide@users.noreply.github.com>
Date: Thu, 6 Mar 2025 00:28:50 +1300
Subject: [PATCH 3/6] iOS sound level adjustment fix

---
 .../ControlCentreMiniApp.css                  |  15 +-
 .../MusicControl/MusicControl.css             |   2 +-
 .../MusicControl/MusicControl.jsx             |   7 +-
 src/services/MusicService/MusicService.jsx    | 669 +++++++++++-------
 4 files changed, 419 insertions(+), 274 deletions(-)

diff --git a/src/miniapps/ControlCentreMiniApp/ControlCentreMiniApp.css b/src/miniapps/ControlCentreMiniApp/ControlCentreMiniApp.css
index 7e722078..821c16fa 100644
--- a/src/miniapps/ControlCentreMiniApp/ControlCentreMiniApp.css
+++ b/src/miniapps/ControlCentreMiniApp/ControlCentreMiniApp.css
@@ -7,7 +7,15 @@
   width: 280px;
   /* Semi-translucent white with blur, to mimic macOS style */
   background: rgba(255, 255, 255, 0.5);
+
+  /* Ensures the blur effect works in Safari */
+  -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
+
+  /* Prevents artefacts in Safari */
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+
   margin-top: 6px;
   padding-left: 10px;
   padding-right: 10px;
@@ -23,7 +31,12 @@
 
 /* Each “segment” or “card” in the control center */
 .cc-segment {
-  backdrop-filter: blur(1px);
+  background: rgba(255, 255, 255, 0.5);
+
+  /* Clip the background to avoid artefacts */
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+
   border-radius: 12px;
   padding: 12px 16px;
   margin-top: 10px;
diff --git a/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css b/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css
index 54c55dfd..a3faafe6 100644
--- a/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css
+++ b/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css
@@ -30,7 +30,7 @@
 .song-title-container {
   overflow: hidden;
   white-space: nowrap;
-  margin-top: -7px;
+  margin-top: -6px;
   margin-left: 2px;
 }
 
diff --git a/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.jsx b/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.jsx
index 5b69af57..7a11bbc7 100644
--- a/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.jsx
+++ b/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.jsx
@@ -36,11 +36,12 @@ function MusicControl() {
       #888 80%)`
   };
 
-  // Convert seconds to mm:ss
+  // Convert seconds to mm:ss, cutting off milliseconds
   const formatTime = (secs) => {
     if (!secs || secs < 0) secs = 0;
-    const minutes = Math.floor(secs / 60);
-    const seconds = secs % 60;
+    const totalSeconds = Math.floor(secs);       // <-- Truncate decimal part
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
     return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
   };
 
diff --git a/src/services/MusicService/MusicService.jsx b/src/services/MusicService/MusicService.jsx
index 8625df15..b93e1ee6 100644
--- a/src/services/MusicService/MusicService.jsx
+++ b/src/services/MusicService/MusicService.jsx
@@ -1,283 +1,414 @@
 // MusicService.jsx
 import React, {
-    createContext,
-    useContext,
-    useRef,
-    useState,
-    useEffect,
-    useCallback,
-  } from 'react';
-  
-  // Import jsmediatags from the UMD build to avoid Vite dep-scan issues
-  import jsmediatags from 'jsmediatags/dist/jsmediatags.min.js';
-  
-  // Import our config
-  import musicServiceConfig from '../../configs/MusicServiceConfig/MusicServiceConfig';
-  
-  // Create the context
-  const MusicServiceContext = createContext(null);
-  
-  // Custom hook
-  export function useMusicService() {
-    return useContext(MusicServiceContext);
-  }
-  
-  export function MusicServiceProvider({ children }) {
-    // We'll store the loaded list of MP3 "entries" from the JSON.
-    const [musicList, setMusicList] = useState([]);
-  
-    // The <audio> element reference
-    const audioRef = useRef(new Audio());
-  
-    // Current track index in the list
-    const [currentIndex, setCurrentIndex] = useState(0);
-  
-    // Audio states
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-  
-    // ID3 / track info
-    const [trackInfo, setTrackInfo] = useState({
-      title: '',
-      artist: '',
-      albumArt: '',
-    });
-  
-    /**
-     * Volume state (0–100). We use DEFAULT_VOLUME from config
-     */
-    const [volume, setVolume] = useState(musicServiceConfig.DEFAULT_VOLUME);
-  
-    /**
-     * Keep <audio> volume in sync with the volume state.
-     * We apply an exponent from config (e.g. 2) so that volume changes
-     * feel more uniform across the slider’s 0–100 range.
-     */
-    useEffect(() => {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+} from 'react';
+
+// We can still use jsmediatags for ID3. The UMD build is used to avoid Vite dep-scan issues.
+import jsmediatags from 'jsmediatags/dist/jsmediatags.min.js';
+
+// Import your config
+import musicServiceConfig from '../../configs/MusicServiceConfig/MusicServiceConfig';
+
+/**
+ * Create the Context
+ */
+const MusicServiceContext = createContext(null);
+
+/**
+ * Custom hook to consume context
+ */
+export function useMusicService() {
+  return useContext(MusicServiceContext);
+}
+
+/**
+ * MusicServiceProvider that wraps the entire music service logic with Web Audio
+ */
+export function MusicServiceProvider({ children }) {
+  /**
+   * 1) States for the track list, current index, etc.
+   */
+  const [musicList, setMusicList] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // ID3 / track info
+  const [trackInfo, setTrackInfo] = useState({
+    title: '',
+    artist: '',
+    albumArt: '',
+  });
+
+  /**
+   * 2) Web Audio references:
+   *    - audioContext: must be created lazily, or iOS will block it until user gesture
+   *    - gainNode: used to set volume
+   *    - sourceNode: the currently playing AudioBufferSourceNode
+   */
+  const audioContextRef = useRef(null);
+  const gainNodeRef = useRef(null);
+  const sourceNodeRef = useRef(null);
+
+  /**
+   * 3) Playback state: isPlaying, currentTime, duration
+   *    We’ll have to track these manually, since we no longer have <audio> events.
+   */
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+
+  /**
+   * 4) We'll track a “startTimestamp” and “pausedAt” to simulate “currentTime”:
+   *    - When we “play” from pausedAt=10s, we note the current clock time in startTimestamp
+   *    - Each frame, currentTime = pausedAt + (performance.now() - startTimestamp)
+   */
+  const startTimestampRef = useRef(0);
+  const pausedAtRef = useRef(0);
+
+  /**
+   * 5) Volume state (0-100). We’ll map it to gainNode.gain, applying an exponent if desired.
+   */
+  const [volume, setVolume] = useState(musicServiceConfig.DEFAULT_VOLUME);
+
+  // This effect syncs volume → gain node
+  useEffect(() => {
+    if (gainNodeRef.current) {
       const fraction = volume / 100;
-      audioRef.current.volume = Math.pow(fraction, musicServiceConfig.VOLUME_EXPONENT);
-    }, [volume]);
-  
-    /**
-     * 1) Fetch the JSON from the MUSIC_LIST_URL in the config
-     */
-    useEffect(() => {
-      fetch(musicServiceConfig.MUSIC_LIST_URL)
-        .then((res) => {
-          if (!res.ok) {
-            throw new Error('Failed to fetch musicList.json');
-          }
-          return res.json();
-        })
-        .then((data) => {
-          setMusicList(data);
-          // Optionally load the first track automatically:
-          // loadTrackByIndex(0);
-        })
-        .catch((err) => {
-          console.error('Error loading music list:', err);
+      const exponented = Math.pow(fraction, musicServiceConfig.VOLUME_EXPONENT); // e.g. fraction^2
+      gainNodeRef.current.gain.setValueAtTime(exponented, 0);
+    }
+  }, [volume]);
+
+  /**
+   * 6) On mount, fetch the JSON music list from the config URL
+   */
+  useEffect(() => {
+    fetch(musicServiceConfig.MUSIC_LIST_URL)
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Failed to fetch musicList.json');
+        }
+        return res.json();
+      })
+      .then((data) => {
+        setMusicList(data);
+        // Optionally auto-load first track
+        // loadTrackByIndex(0);
+      })
+      .catch((err) => {
+        console.error('Error loading music list:', err);
+      });
+  }, []);
+
+  /**
+   * 7) A function to “ensureAudioContext” which we call on the first user gesture
+   *    iOS Safari typically requires audio context to be created/resumed in a user gesture.
+   */
+  const ensureAudioContext = useCallback(() => {
+    if (!audioContextRef.current) {
+      const AudioContext = window.AudioContext || window.webkitAudioContext;
+      audioContextRef.current = new AudioContext();
+      gainNodeRef.current = audioContextRef.current.createGain();
+      gainNodeRef.current.connect(audioContextRef.current.destination);
+    }
+    // If context is suspended, try to resume (iOS might require it in a gesture)
+    if (audioContextRef.current.state === 'suspended') {
+      audioContextRef.current.resume().catch((err) => {
+        console.warn('AudioContext resume error:', err);
+      });
+    }
+  }, []);
+
+  /**
+   * 8) loadTrackByIndex: fetch/ decode the MP3 into an AudioBuffer, set ID3 tags, etc.
+   */
+  const loadTrackByIndex = useCallback(
+    async (index) => {
+      if (!musicList || !musicList.length) return;
+      if (index < 0 || index >= musicList.length) return;
+
+      // Make sure we have an AudioContext
+      ensureAudioContext();
+
+      const trackData = musicList[index];
+      const mp3Url = trackData.src;
+
+      // First, read ID3 tags from the URL:
+      setTrackInfo({
+        title: trackData.title || '',
+        artist: trackData.artist || '',
+        albumArt: trackData.backupArt || '',
+      });
+
+      try {
+        // Attempt reading ID3 tags asynchronously:
+        jsmediatags.read(mp3Url, {
+          onSuccess: (tag) => {
+            const { title, artist, picture } = tag.tags;
+            let albumArtUrl = '';
+
+            // If there's embedded picture data, convert to base64
+            if (picture) {
+              const { data, format } = picture;
+              let base64String = '';
+              for (let i = 0; i < data.length; i++) {
+                base64String += String.fromCharCode(data[i]);
+              }
+              albumArtUrl = `data:${format};base64,${window.btoa(base64String)}`;
+            }
+            // Fallback to trackData.backupArt
+            if (!albumArtUrl && trackData.backupArt) {
+              albumArtUrl = trackData.backupArt;
+            }
+
+            setTrackInfo({
+              title: title || trackData.title || '',
+              artist: artist || trackData.artist || '',
+              albumArt: albumArtUrl,
+            });
+          },
+          onError: (error) => {
+            console.warn('jsmediatags error:', error.type, error.info);
+            // fallback to trackData data
+            setTrackInfo({
+              title: trackData.title || '',
+              artist: trackData.artist || '',
+              albumArt: trackData.backupArt || '',
+            });
+          },
+        });
+      } catch (err) {
+        console.warn('ID3 read error:', err);
+      }
+
+      // Next, fetch the MP3 as an ArrayBuffer for decoding
+      const response = await fetch(mp3Url);
+      if (!response.ok) {
+        console.error('Failed to fetch MP3:', mp3Url);
+        return;
+      }
+      const arrayBuffer = await response.arrayBuffer();
+
+      // Decode using the AudioContext
+      const audioBuffer = await audioContextRef.current.decodeAudioData(arrayBuffer);
+
+      // Once we have an AudioBuffer, set duration in seconds
+      setDuration(audioBuffer.duration);
+
+      // Reset any playback so it’s not playing old track
+      stop();
+
+      // We store the newly loaded AudioBuffer in a ref so that play() can use it
+      sourceNodeRef.current = { audioBuffer };
+
+      // Update currentIndex
+      setCurrentIndex(index);
+    },
+    [musicList, ensureAudioContext]
+  );
+
+  /**
+   * 9) Basic playback functions with Web Audio
+   */
+  const play = useCallback(() => {
+    ensureAudioContext(); // make sure we have an AudioContext resumed
+
+    // If we don’t have a loaded AudioBuffer, either do nothing or load the first
+    if (!sourceNodeRef.current || !sourceNodeRef.current.audioBuffer) {
+      // Optionally auto-load first:
+      if (musicList.length > 0) {
+        loadTrackByIndex(0).then(() => {
+          // Then call play again
+          play();
         });
-    }, []);
-  
-    /**
-     * 2) Audio event listeners
-     */
-    useEffect(() => {
-      const audio = audioRef.current;
-      if (!audio) return;
-  
-      const onLoadedMetadata = () => {
-        setDuration(Math.floor(audio.duration) || 0);
-      };
-      const onTimeUpdate = () => {
-        setCurrentTime(Math.floor(audio.currentTime) || 0);
-      };
-      const onEnded = () => {
+      }
+      return;
+    }
+
+    // If we’re already playing, ignore
+    if (isPlaying) return;
+
+    // Create a new BufferSource for each play
+    const newSource = audioContextRef.current.createBufferSource();
+    newSource.buffer = sourceNodeRef.current.audioBuffer;
+    newSource.connect(gainNodeRef.current);
+
+    // Start at the pausedAtRef offset
+    const offset = pausedAtRef.current;
+    newSource.start(0, offset);
+
+    // Keep reference so we can stop it
+    sourceNodeRef.current.bufferSource = newSource;
+
+    // On ended, move to next track (like <audio> “ended”)
+    newSource.onended = () => {
+      // If we intentionally stopped or paused, we might not want to “handleNext”
+      // So only call handleNext if “currentTime” is at the end
+      const total = sourceNodeRef.current?.audioBuffer?.duration || 0;
+      const diff = Math.abs(currentTime - total);
+      // If it truly ended, go next
+      if (diff < 0.5) {
         handleNext();
-      };
-  
-      audio.addEventListener('loadedmetadata', onLoadedMetadata);
-      audio.addEventListener('timeupdate', onTimeUpdate);
-      audio.addEventListener('ended', onEnded);
-  
-      return () => {
-        audio.removeEventListener('loadedmetadata', onLoadedMetadata);
-        audio.removeEventListener('timeupdate', onTimeUpdate);
-        audio.removeEventListener('ended', onEnded);
-      };
-    }, []);
-  
-    // Basic controls
-    const play = useCallback(() => {
-      audioRef.current.play();
-      setIsPlaying(true);
-    }, []);
-  
-    const pause = useCallback(() => {
-      audioRef.current.pause();
-      setIsPlaying(false);
-    }, []);
-  
-    const stop = useCallback(() => {
+      }
+    };
+
+    // Mark the startTimestamp so we can track currentTime
+    startTimestampRef.current = performance.now();
+
+    // Switch state
+    setIsPlaying(true);
+  }, [isPlaying, loadTrackByIndex, musicList.length, ensureAudioContext]);
+
+  const pause = useCallback(() => {
+    if (!sourceNodeRef.current?.bufferSource) return;
+    if (!isPlaying) return;
+
+    // We figure out how long we've played so far
+    const playedSoFar = pausedAtRef.current + (performance.now() - startTimestampRef.current) / 1000;
+    pausedAtRef.current = playedSoFar;
+
+    // Stop the current source node
+    sourceNodeRef.current.bufferSource.stop();
+    sourceNodeRef.current.bufferSource = null;
+
+    setIsPlaying(false);
+  }, [isPlaying]);
+
+  const stop = useCallback(() => {
+    if (sourceNodeRef.current?.bufferSource) {
+      sourceNodeRef.current.bufferSource.stop();
+      sourceNodeRef.current.bufferSource = null;
+    }
+    setIsPlaying(false);
+    pausedAtRef.current = 0;
+    setCurrentTime(0);
+  }, []);
+
+  /**
+   * 10) Seek function
+   *     - Stop the current source
+   *     - Set pausedAt to new time
+   *     - If was playing, call play() again
+   */
+  const seek = useCallback(
+    (timeInSeconds) => {
+      const wasPlaying = isPlaying;
+      // Pause (which sets pausedAt correctly) if needed
       pause();
-      audioRef.current.currentTime = 0;
-      setCurrentTime(0);
-    }, [pause]);
-  
-    const seek = useCallback((timeInSeconds) => {
-      audioRef.current.currentTime = timeInSeconds;
+      // Then override pausedAt with our desired new time
+      pausedAtRef.current = timeInSeconds;
       setCurrentTime(timeInSeconds);
-    }, []);
-  
-    /**
-     * 3) loadTrackByIndex – loads the MP3 from musicList[index].
-     *    Then uses jsmediatags to read ID3 (album art, etc.).
-     *    If no embedded art or an error occurs, fallback to JSON's "backupArt".
-     */
-    const loadTrackByIndex = useCallback(
-      async (index) => {
-        if (!musicList || musicList.length === 0) return;
-        if (index < 0 || index >= musicList.length) return;
-  
-        const trackData = musicList[index];
-        // e.g. "/WebintoshHD/Music/Jungle - Busy Earnin'.mp3"
-        const mp3Url = trackData.src;
-  
-        // Pause & reset time
-        pause();
-        setCurrentTime(0);
-  
-        // Set the new audio source
-        audioRef.current.src = mp3Url;
-        audioRef.current.load();
-  
-        // Default track info if ID3 fails
-        setTrackInfo({
-          title: trackData.title || '',
-          artist: trackData.artist || '',
-          // We'll store the fallback image in case ID3 has none
-          albumArt: trackData.backupArt || '',
-        });
-  
-        // Try reading ID3 tags
-        try {
-          jsmediatags.read(mp3Url, {
-            onSuccess: (tag) => {
-              const { title, artist, picture } = tag.tags;
-              let albumArtUrl = '';
-  
-              // If there's embedded picture data, convert to base64
-              if (picture) {
-                const { data, format } = picture;
-                let base64String = '';
-                for (let i = 0; i < data.length; i++) {
-                  base64String += String.fromCharCode(data[i]);
-                }
-                albumArtUrl = `data:${format};base64,${window.btoa(base64String)}`;
-              }
-  
-              // If no embedded picture, fallback to backupArt
-              if (!albumArtUrl && trackData.backupArt) {
-                albumArtUrl = trackData.backupArt;
-              }
-  
-              // Update track info with ID3 or fallback
-              setTrackInfo({
-                title: title || trackData.title || '',
-                artist: artist || trackData.artist || '',
-                albumArt: albumArtUrl,
-              });
-            },
-            onError: (error) => {
-              console.warn('jsmediatags error:', error.type, error.info);
-              // Use fallback if we get an error
-              setTrackInfo({
-                title: trackData.title || '',
-                artist: trackData.artist || '',
-                albumArt: trackData.backupArt || '',
-              });
-            },
-          });
-        } catch (err) {
-          console.warn('ID3 read error:', err);
-          // Also fallback on a general try/catch error
-          setTrackInfo((prev) => ({
-            ...prev,
-            albumArt: trackData.backupArt || '',
-          }));
-        }
-  
-        setCurrentIndex(index);
-      },
-      [musicList, pause]
-    );
-  
-    // Next / Prev track
-    const handleNext = useCallback(() => {
-      if (!musicList || musicList.length === 0) return;
-      let newIndex = currentIndex + 1;
-      if (newIndex >= musicList.length) {
-        newIndex = 0; // wrap around
+      // If we were playing, resume
+      if (wasPlaying) {
+        play();
       }
-      loadTrackByIndex(newIndex);
+    },
+    [isPlaying, pause, play]
+  );
+
+  /**
+   * 11) Next / Prev
+   *     - Just load next index, then call play
+   */
+  const handleNext = useCallback(() => {
+    if (!musicList.length) return;
+    let newIndex = currentIndex + 1;
+    if (newIndex >= musicList.length) {
+      newIndex = 0; // wrap
+    }
+    loadTrackByIndex(newIndex).then(() => {
       play();
-    }, [musicList, currentIndex, loadTrackByIndex, play]);
-  
-    const handlePrev = useCallback(() => {
-      if (!musicList || musicList.length === 0) return;
-      let newIndex = currentIndex - 1;
-      if (newIndex < 0) {
-        newIndex = musicList.length - 1;
-      }
-      loadTrackByIndex(newIndex);
+    });
+  }, [currentIndex, musicList, loadTrackByIndex, play]);
+
+  const handlePrev = useCallback(() => {
+    if (!musicList.length) return;
+    let newIndex = currentIndex - 1;
+    if (newIndex < 0) {
+      newIndex = musicList.length - 1;
+    }
+    loadTrackByIndex(newIndex).then(() => {
       play();
-    }, [musicList, currentIndex, loadTrackByIndex, play]);
-  
-    // Toggle play. If nothing loaded, load first
-    const togglePlay = useCallback(() => {
-      if (!audioRef.current.src) {
-        if (musicList && musicList.length > 0) {
-          loadTrackByIndex(0);
-          play();
-        }
-        return;
+    });
+  }, [currentIndex, musicList, loadTrackByIndex, play]);
+
+  /**
+   * 12) Toggle Play/Pause
+   */
+  const togglePlay = useCallback(() => {
+    // If no track is loaded yet, load the first
+    if (!sourceNodeRef.current?.audioBuffer) {
+      if (musicList.length > 0) {
+        loadTrackByIndex(0).then(() => play());
       }
+      return;
+    }
+    if (isPlaying) {
+      pause();
+    } else {
+      play();
+    }
+  }, [isPlaying, musicList, loadTrackByIndex, play, pause]);
+
+  /**
+   * 13) We must track “currentTime” in a requestAnimationFrame (like a “timeupdate”).
+   *     Because with Web Audio, we manage playback logic ourselves.
+   */
+  useEffect(() => {
+    let animationFrameId;
+
+    const updateTime = () => {
       if (isPlaying) {
-        pause();
-      } else {
-        play();
+        // Calculate how much time has elapsed since we started
+        const playedSoFar =
+          pausedAtRef.current + (performance.now() - startTimestampRef.current) / 1000;
+        setCurrentTime(playedSoFar);
+      }
+      animationFrameId = requestAnimationFrame(updateTime);
+    };
+
+    // Kick off
+    updateTime();
+
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
       }
-    }, [isPlaying, musicList, loadTrackByIndex, play, pause]);
-  
-    // Provide everything via context
-    const contextValue = {
-      // states
-      isPlaying,
-      currentTime,
-      duration,
-      trackInfo,
-      currentIndex,
-      musicList,
-      audioRef,
-      volume,
-  
-      // actions
-      setVolume,
-      play,
-      pause,
-      stop,
-      seek,
-      loadTrackByIndex,
-      handleNext,
-      handlePrev,
-      togglePlay,
     };
-  
-    return (
-      <MusicServiceContext.Provider value={contextValue}>
-        {children}
-      </MusicServiceContext.Provider>
-    );
-  }
-  
\ No newline at end of file
+  }, [isPlaying]);
+
+  /**
+   * 14) Expose everything via Context
+   */
+  const contextValue = {
+    // states
+    isPlaying,
+    currentTime,
+    duration,
+    trackInfo,
+    currentIndex,
+    musicList,
+    volume,
+
+    // actions
+    setVolume,
+    loadTrackByIndex,
+    play,
+    pause,
+    stop,
+    seek,
+    handleNext,
+    handlePrev,
+    togglePlay,
+  };
+
+  return (
+    <MusicServiceContext.Provider value={contextValue}>
+      {children}
+    </MusicServiceContext.Provider>
+  );
+}

From 681ae5d34ee98fbb5becee67dbe6981b75e1fe28 Mon Sep 17 00:00:00 2001
From: htdguide <115078044+htdguide@users.noreply.github.com>
Date: Thu, 6 Mar 2025 00:42:16 +1300
Subject: [PATCH 4/6] Fixed pausing when rewinding

---
 src/services/MusicService/MusicService.jsx | 138 +++++++++++----------
 1 file changed, 74 insertions(+), 64 deletions(-)

diff --git a/src/services/MusicService/MusicService.jsx b/src/services/MusicService/MusicService.jsx
index b93e1ee6..d9e1fe9d 100644
--- a/src/services/MusicService/MusicService.jsx
+++ b/src/services/MusicService/MusicService.jsx
@@ -55,7 +55,6 @@ export function MusicServiceProvider({ children }) {
 
   /**
    * 3) Playback state: isPlaying, currentTime, duration
-   *    We’ll have to track these manually, since we no longer have <audio> events.
    */
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
@@ -115,7 +114,7 @@ export function MusicServiceProvider({ children }) {
       gainNodeRef.current = audioContextRef.current.createGain();
       gainNodeRef.current.connect(audioContextRef.current.destination);
     }
-    // If context is suspended, try to resume (iOS might require it in a gesture)
+    // If context is suspended, try to resume
     if (audioContextRef.current.state === 'suspended') {
       audioContextRef.current.resume().catch((err) => {
         console.warn('AudioContext resume error:', err);
@@ -185,7 +184,7 @@ export function MusicServiceProvider({ children }) {
         console.warn('ID3 read error:', err);
       }
 
-      // Next, fetch the MP3 as an ArrayBuffer for decoding
+      // Next, fetch the MP3 as an ArrayBuffer
       const response = await fetch(mp3Url);
       if (!response.ok) {
         console.error('Failed to fetch MP3:', mp3Url);
@@ -199,10 +198,10 @@ export function MusicServiceProvider({ children }) {
       // Once we have an AudioBuffer, set duration in seconds
       setDuration(audioBuffer.duration);
 
-      // Reset any playback so it’s not playing old track
+      // Reset playback so we’re not playing the old track
       stop();
 
-      // We store the newly loaded AudioBuffer in a ref so that play() can use it
+      // Store the newly loaded AudioBuffer
       sourceNodeRef.current = { audioBuffer };
 
       // Update currentIndex
@@ -212,17 +211,40 @@ export function MusicServiceProvider({ children }) {
   );
 
   /**
-   * 9) Basic playback functions with Web Audio
+   * 9) Next / Prev must be declared before referencing them inside "play()" 
+   */
+  const handleNext = useCallback(() => {
+    if (!musicList.length) return;
+    let newIndex = currentIndex + 1;
+    if (newIndex >= musicList.length) {
+      newIndex = 0; // wrap
+    }
+    loadTrackByIndex(newIndex).then(() => {
+      play();
+    });
+  }, [currentIndex, musicList, loadTrackByIndex]);
+
+  const handlePrev = useCallback(() => {
+    if (!musicList.length) return;
+    let newIndex = currentIndex - 1;
+    if (newIndex < 0) {
+      newIndex = musicList.length - 1;
+    }
+    loadTrackByIndex(newIndex).then(() => {
+      play();
+    });
+  }, [currentIndex, musicList, loadTrackByIndex]);
+
+  /**
+   * 10) Basic playback functions
    */
   const play = useCallback(() => {
-    ensureAudioContext(); // make sure we have an AudioContext resumed
+    ensureAudioContext(); // make sure we have an AudioContext
 
-    // If we don’t have a loaded AudioBuffer, either do nothing or load the first
+    // If we don’t have a loaded AudioBuffer, load the first track
     if (!sourceNodeRef.current || !sourceNodeRef.current.audioBuffer) {
-      // Optionally auto-load first:
       if (musicList.length > 0) {
         loadTrackByIndex(0).then(() => {
-          // Then call play again
           play();
         });
       }
@@ -232,7 +254,6 @@ export function MusicServiceProvider({ children }) {
     // If we’re already playing, ignore
     if (isPlaying) return;
 
-    // Create a new BufferSource for each play
     const newSource = audioContextRef.current.createBufferSource();
     newSource.buffer = sourceNodeRef.current.audioBuffer;
     newSource.connect(gainNodeRef.current);
@@ -244,34 +265,29 @@ export function MusicServiceProvider({ children }) {
     // Keep reference so we can stop it
     sourceNodeRef.current.bufferSource = newSource;
 
-    // On ended, move to next track (like <audio> “ended”)
+    // On ended, move to next track
     newSource.onended = () => {
-      // If we intentionally stopped or paused, we might not want to “handleNext”
-      // So only call handleNext if “currentTime” is at the end
       const total = sourceNodeRef.current?.audioBuffer?.duration || 0;
       const diff = Math.abs(currentTime - total);
-      // If it truly ended, go next
       if (diff < 0.5) {
         handleNext();
       }
     };
 
-    // Mark the startTimestamp so we can track currentTime
+    // Mark the startTimestamp
     startTimestampRef.current = performance.now();
-
-    // Switch state
     setIsPlaying(true);
-  }, [isPlaying, loadTrackByIndex, musicList.length, ensureAudioContext]);
+  }, [isPlaying, loadTrackByIndex, musicList.length, ensureAudioContext, currentTime, handleNext]);
 
   const pause = useCallback(() => {
     if (!sourceNodeRef.current?.bufferSource) return;
     if (!isPlaying) return;
 
-    // We figure out how long we've played so far
+    // How long we’ve played so far
     const playedSoFar = pausedAtRef.current + (performance.now() - startTimestampRef.current) / 1000;
     pausedAtRef.current = playedSoFar;
 
-    // Stop the current source node
+    // Stop the current source
     sourceNodeRef.current.bufferSource.stop();
     sourceNodeRef.current.bufferSource = null;
 
@@ -289,58 +305,55 @@ export function MusicServiceProvider({ children }) {
   }, []);
 
   /**
-   * 10) Seek function
-   *     - Stop the current source
-   *     - Set pausedAt to new time
-   *     - If was playing, call play() again
+   * 11) Seek function that doesn't explicitly pause
    */
   const seek = useCallback(
     (timeInSeconds) => {
-      const wasPlaying = isPlaying;
-      // Pause (which sets pausedAt correctly) if needed
-      pause();
-      // Then override pausedAt with our desired new time
+      if (!sourceNodeRef.current?.audioBuffer) {
+        pausedAtRef.current = timeInSeconds;
+        setCurrentTime(timeInSeconds);
+        return;
+      }
+
+      // Stop old source if it exists
+      if (sourceNodeRef.current.bufferSource) {
+        sourceNodeRef.current.bufferSource.stop();
+        sourceNodeRef.current.bufferSource = null;
+      }
+
       pausedAtRef.current = timeInSeconds;
       setCurrentTime(timeInSeconds);
-      // If we were playing, resume
-      if (wasPlaying) {
-        play();
+
+      // If we’re still playing, create a new source at the new offset
+      if (isPlaying) {
+        const newSource = audioContextRef.current.createBufferSource();
+        newSource.buffer = sourceNodeRef.current.audioBuffer;
+        newSource.connect(gainNodeRef.current);
+        newSource.start(0, timeInSeconds);
+
+        sourceNodeRef.current.bufferSource = newSource;
+
+        // Handle end of track
+        newSource.onended = () => {
+          const total = sourceNodeRef.current?.audioBuffer?.duration || 0;
+          const diff = Math.abs(currentTime - total);
+          if (diff < 0.5) {
+            handleNext();
+          }
+        };
+
+        // Reset startTimestamp for time tracking
+        startTimestampRef.current = performance.now();
       }
     },
-    [isPlaying, pause, play]
+    [isPlaying, currentTime, handleNext]
   );
 
-  /**
-   * 11) Next / Prev
-   *     - Just load next index, then call play
-   */
-  const handleNext = useCallback(() => {
-    if (!musicList.length) return;
-    let newIndex = currentIndex + 1;
-    if (newIndex >= musicList.length) {
-      newIndex = 0; // wrap
-    }
-    loadTrackByIndex(newIndex).then(() => {
-      play();
-    });
-  }, [currentIndex, musicList, loadTrackByIndex, play]);
-
-  const handlePrev = useCallback(() => {
-    if (!musicList.length) return;
-    let newIndex = currentIndex - 1;
-    if (newIndex < 0) {
-      newIndex = musicList.length - 1;
-    }
-    loadTrackByIndex(newIndex).then(() => {
-      play();
-    });
-  }, [currentIndex, musicList, loadTrackByIndex, play]);
-
   /**
    * 12) Toggle Play/Pause
    */
   const togglePlay = useCallback(() => {
-    // If no track is loaded yet, load the first
+    // If no track is loaded, load the first
     if (!sourceNodeRef.current?.audioBuffer) {
       if (musicList.length > 0) {
         loadTrackByIndex(0).then(() => play());
@@ -355,15 +368,13 @@ export function MusicServiceProvider({ children }) {
   }, [isPlaying, musicList, loadTrackByIndex, play, pause]);
 
   /**
-   * 13) We must track “currentTime” in a requestAnimationFrame (like a “timeupdate”).
-   *     Because with Web Audio, we manage playback logic ourselves.
+   * 13) Track currentTime in a requestAnimationFrame
    */
   useEffect(() => {
     let animationFrameId;
 
     const updateTime = () => {
       if (isPlaying) {
-        // Calculate how much time has elapsed since we started
         const playedSoFar =
           pausedAtRef.current + (performance.now() - startTimestampRef.current) / 1000;
         setCurrentTime(playedSoFar);
@@ -371,7 +382,6 @@ export function MusicServiceProvider({ children }) {
       animationFrameId = requestAnimationFrame(updateTime);
     };
 
-    // Kick off
     updateTime();
 
     return () => {

From a14597e047a8c7a7561ef73b27084624b9b0ccb1 Mon Sep 17 00:00:00 2001
From: htdguide <115078044+htdguide@users.noreply.github.com>
Date: Thu, 6 Mar 2025 00:59:02 +1300
Subject: [PATCH 5/6] Default sound level fix and username miniapp fix

---
 src/components/MiniApps/MiniApps.jsx       |  1 -
 src/services/MusicService/MusicService.jsx | 18 ++++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/MiniApps/MiniApps.jsx b/src/components/MiniApps/MiniApps.jsx
index e2a38d0b..a33ea9cd 100644
--- a/src/components/MiniApps/MiniApps.jsx
+++ b/src/components/MiniApps/MiniApps.jsx
@@ -69,7 +69,6 @@ function MiniApps() {
     .filter(app => app.available)
     .filter(app => {
       if (app.id === 'battery' && deviceInfo.battery.level === null) return false;
-      if (app.id === 'user' && deviceInfo.orientation === 'portrait') return false;
       return true;
     })
     .slice()
diff --git a/src/services/MusicService/MusicService.jsx b/src/services/MusicService/MusicService.jsx
index d9e1fe9d..5c0b4795 100644
--- a/src/services/MusicService/MusicService.jsx
+++ b/src/services/MusicService/MusicService.jsx
@@ -73,7 +73,7 @@ export function MusicServiceProvider({ children }) {
    */
   const [volume, setVolume] = useState(musicServiceConfig.DEFAULT_VOLUME);
 
-  // This effect syncs volume → gain node
+  // This effect syncs volume → gain node whenever volume changes
   useEffect(() => {
     if (gainNodeRef.current) {
       const fraction = volume / 100;
@@ -95,8 +95,7 @@ export function MusicServiceProvider({ children }) {
       })
       .then((data) => {
         setMusicList(data);
-        // Optionally auto-load first track
-        // loadTrackByIndex(0);
+        // Optionally auto-load first track: loadTrackByIndex(0);
       })
       .catch((err) => {
         console.error('Error loading music list:', err);
@@ -111,8 +110,14 @@ export function MusicServiceProvider({ children }) {
     if (!audioContextRef.current) {
       const AudioContext = window.AudioContext || window.webkitAudioContext;
       audioContextRef.current = new AudioContext();
+
       gainNodeRef.current = audioContextRef.current.createGain();
       gainNodeRef.current.connect(audioContextRef.current.destination);
+
+      // Immediately set the gain to the default volume so there's no mismatch
+      const fraction = volume / 100;
+      const exponented = Math.pow(fraction, musicServiceConfig.VOLUME_EXPONENT);
+      gainNodeRef.current.gain.setValueAtTime(exponented, 0);
     }
     // If context is suspended, try to resume
     if (audioContextRef.current.state === 'suspended') {
@@ -120,7 +125,7 @@ export function MusicServiceProvider({ children }) {
         console.warn('AudioContext resume error:', err);
       });
     }
-  }, []);
+  }, [volume]);
 
   /**
    * 8) loadTrackByIndex: fetch/ decode the MP3 into an AudioBuffer, set ID3 tags, etc.
@@ -211,7 +216,7 @@ export function MusicServiceProvider({ children }) {
   );
 
   /**
-   * 9) Next / Prev must be declared before referencing them inside "play()" 
+   * 9) Next / Prev must be declared before referencing them inside "play()"
    */
   const handleNext = useCallback(() => {
     if (!musicList.length) return;
@@ -284,7 +289,8 @@ export function MusicServiceProvider({ children }) {
     if (!isPlaying) return;
 
     // How long we’ve played so far
-    const playedSoFar = pausedAtRef.current + (performance.now() - startTimestampRef.current) / 1000;
+    const playedSoFar =
+      pausedAtRef.current + (performance.now() - startTimestampRef.current) / 1000;
     pausedAtRef.current = playedSoFar;
 
     // Stop the current source

From dd4ac91647bd778fd04f9a1c62c99e7833127076 Mon Sep 17 00:00:00 2001
From: htdguide <115078044+htdguide@users.noreply.github.com>
Date: Thu, 6 Mar 2025 14:00:52 +1300
Subject: [PATCH 6/6] Added AppsContext

---
 src/App.jsx                                   | 35 +++++----
 src/components/Desktop/Desktop.jsx            | 12 ++-
 src/lists/DesktopAppsList.jsx                 |  7 ++
 .../MusicControl/MusicControl.css             |  2 +-
 src/services/AppsContext/AppsContext.jsx      | 73 +++++++++++++++++++
 5 files changed, 105 insertions(+), 24 deletions(-)
 create mode 100644 src/services/AppsContext/AppsContext.jsx

diff --git a/src/App.jsx b/src/App.jsx
index a28406b4..ec06b617 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import './App.css';
 import Desktop from './components/Desktop/Desktop.jsx';
 import DesktopAppsList from './lists/DesktopAppsList.jsx';
+import { AppsProvider } from './services/AppsContext/AppsContext.jsx';
 
 function App() {
   const [openApps, setOpenApps] = useState([]);
@@ -26,22 +27,24 @@ function App() {
   };
 
   return (
-    <div className="App">
-      <Desktop onOpenApp={handleOpenApp} />
-      {openApps.map((appId) => {
-        const appConfig = DesktopAppsList.find((app) => app.id === appId);
-        const AppComponent = appConfig?.component;
-
-        return (
-          AppComponent && (
-            <AppComponent
-              key={appId}
-              onClose={() => handleCloseApp(appId)}
-            />
-          )
-        );
-      })}
-    </div>
+    <AppsProvider>
+      <div className="App">
+        <Desktop onOpenApp={handleOpenApp} />
+        {openApps.map((appId) => {
+          const appConfig = DesktopAppsList.find((app) => app.id === appId);
+          const AppComponent = appConfig?.component;
+
+          return (
+            AppComponent && (
+              <AppComponent
+                key={appId}
+                onClose={() => handleCloseApp(appId)}
+              />
+            )
+          );
+        })}
+      </div>
+      </AppsProvider>
   );
 }
 
diff --git a/src/components/Desktop/Desktop.jsx b/src/components/Desktop/Desktop.jsx
index 7715df6a..ff0a5333 100644
--- a/src/components/Desktop/Desktop.jsx
+++ b/src/components/Desktop/Desktop.jsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
+import { AppsContext } from '../../services/AppsContext/AppsContext.jsx';
 import DesktopIcon from '../DesktopIcon/DesktopIcon.jsx';
-import DesktopAppsList from '../../lists/DesktopAppsList.jsx';
 import { GRID_GAP, TOP_MARGIN, LEFT_MARGIN } from '../../configs/DesktopIconConfig/DesktopIconConfig.jsx';
 import { GRID_SIZE } from '../../configs/DesktopIconConfig/DesktopIconConfig.jsx';
 import './Desktop.css';
@@ -12,17 +12,15 @@ import { FocusWrapper } from '../../interactions/FocusControl/FocusControl.jsx';
  */
 function getPositionFromPriority(priority) {
   const safePriority = priority && priority > 0 ? priority : 1;
-
   // Single-column approach: each subsequent icon moves (GRID_SIZE + GRID_GAP) down
   const effectiveCellSize = GRID_SIZE + GRID_GAP;
-
   const x = LEFT_MARGIN;
   const y = TOP_MARGIN + (safePriority - 1) * effectiveCellSize;
-
   return { x, y };
 }
 
 function Desktop({ onOpenApp }) {
+  const { apps } = useContext(AppsContext);
   const [selectedIcon, setSelectedIcon] = useState(null);
 
   const handleWallpaperClick = () => {
@@ -36,7 +34,7 @@ function Desktop({ onOpenApp }) {
   return (
     <FocusWrapper name="Desktop">
       <div className="desktop" onClick={handleWallpaperClick}>
-        {DesktopAppsList.map((iconConfig) => {
+        {apps.filter(iconConfig => !iconConfig.indock).map((iconConfig) => {
           // Convert the icon's priority into an (x,y) position,
           // now using GRID_GAP to keep them spaced out.
           const position = getPositionFromPriority(iconConfig.priority);
@@ -49,7 +47,7 @@ function Desktop({ onOpenApp }) {
               isSelected={selectedIcon === iconConfig.id}
               onClick={() => handleIconClick(iconConfig.id)}
               onDoubleClick={() => onOpenApp(iconConfig.id)}
-              position={position} 
+              position={position}
             />
           );
         })}
diff --git a/src/lists/DesktopAppsList.jsx b/src/lists/DesktopAppsList.jsx
index 33450c4d..8bd47b48 100644
--- a/src/lists/DesktopAppsList.jsx
+++ b/src/lists/DesktopAppsList.jsx
@@ -8,6 +8,8 @@ import awaiIcon from '../media/icons/awai.png';
 /**
  * Each icon now has a `priority` which determines its order on the desktop grid.
  * Additionally, apps that are only links have a `link` property.
+ * The new `indock` field determines if the icon should be displayed on the desktop.
+ * If `indock` is true, the icon will not be rendered on the desktop.
  */
 const DesktopAppsList = [
   {
@@ -16,6 +18,7 @@ const DesktopAppsList = [
     icon: defaultIcon,
     component: SortingAlgorithms,
     priority: 4,
+    indock: false,
   },
 
   {
@@ -24,6 +27,7 @@ const DesktopAppsList = [
     icon: folderIcon,
     component: null,
     priority: 5,
+    indock: true,  // This icon will not display on the desktop
   },
 
   {
@@ -33,6 +37,7 @@ const DesktopAppsList = [
     link: 'http://linkedin.com/in/htdguide/',
     component: null,
     priority: 2,
+    indock: false,
   },
 
   {
@@ -42,6 +47,7 @@ const DesktopAppsList = [
     link: 'https://github.com/htdguide',
     component: null,
     priority: 1,
+    indock: true,  // This icon will not display on the desktop
   },
 
   {
@@ -51,6 +57,7 @@ const DesktopAppsList = [
     link: 'https://applywithai.com',
     component: null,
     priority: 3,
+    indock: false,
   },
 
   // Add more apps here as needed, with increasing `priority`
diff --git a/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css b/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css
index a3faafe6..eba97ae8 100644
--- a/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css
+++ b/src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css
@@ -30,7 +30,7 @@
 .song-title-container {
   overflow: hidden;
   white-space: nowrap;
-  margin-top: -6px;
+  margin-top: -5px;
   margin-left: 2px;
 }
 
diff --git a/src/services/AppsContext/AppsContext.jsx b/src/services/AppsContext/AppsContext.jsx
new file mode 100644
index 00000000..f0f21348
--- /dev/null
+++ b/src/services/AppsContext/AppsContext.jsx
@@ -0,0 +1,73 @@
+import React, { createContext, useState } from 'react';
+import defaultIcon from '../../media/icons/defaultapp.png'; // Example icon
+import folderIcon from '../../media/icons/folder.webp';
+import SortingAlgorithms from '../../apps/SortingAlgorithms/SortingAlgorithms.jsx';
+import linkedinIcon from '../../media/icons/linkedin.png';
+import githubIcon from '../../media/icons/github.png';
+import awaiIcon from '../../media/icons/awai.png';
+
+/**
+ * The initial list of apps.
+ * The `indock` field determines if the icon should be rendered on the desktop.
+ * If `indock` is true, the icon will not be rendered on the desktop.
+ */
+const initialAppsList = [
+  {
+    id: 'sorting-algorithms',
+    name: 'Sorting Algorithms',
+    icon: defaultIcon,
+    component: SortingAlgorithms,
+    priority: 4,
+    indock: false,
+  },
+  {
+    id: 'untitled-folder',
+    name: 'untitled folder',
+    icon: folderIcon,
+    component: null,
+    priority: 5,
+    indock: true, // Initially in the dock, so not on desktop
+  },
+  {
+    id: 'linkedin',
+    name: 'LinkedIn',
+    icon: linkedinIcon,
+    link: 'http://linkedin.com/in/htdguide/',
+    component: null,
+    priority: 2,
+    indock: false,
+  },
+  {
+    id: 'github',
+    name: 'Github',
+    icon: githubIcon,
+    link: 'https://github.com/htdguide',
+    component: null,
+    priority: 1,
+    indock: false, // Initially in the dock, so not on desktop
+  },
+  {
+    id: 'awai',
+    name: 'ApplyWithAI',
+    icon: awaiIcon,
+    link: 'https://applywithai.com',
+    component: null,
+    priority: 3,
+    indock: false,
+  },
+];
+
+export const AppsContext = createContext({
+  apps: initialAppsList,
+  setApps: () => {},
+});
+
+export const AppsProvider = ({ children }) => {
+  const [apps, setApps] = useState(initialAppsList);
+
+  return (
+    <AppsContext.Provider value={{ apps, setApps }}>
+      {children}
+    </AppsContext.Provider>
+  );
+};