Catching up with minor details

.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

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",

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>
   );
 }
 

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}
             />
           );
         })}

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()

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`

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;

src/miniapps/ControlCentreMiniApp/ControlCentreWidgets/MusicControl/MusicControl.css

@@ -30,7 +30,7 @@
 .song-title-container {
   overflow: hidden;
   white-space: nowrap;
-  margin-top: -7px;
+  margin-top: -5px;
   margin-left: 2px;
 }
 

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')}`;
   };