Merging dock update

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webport",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -13,4 +13,33 @@ body, html {
 /* Hide React error overlay */
 #react-error-overlay {
   display: none !important;
-}
+}
+
+/* styles.css */
+
+/* Default label style */
+.version {
+  position: fixed;
+  right: 10px;
+  bottom: 8px;
+  font-size: 12px;
+  color: #000;
+  background-color: rgba(255, 255, 255, 0.6);
+  padding: 4px 4px;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Mobile view: Rotate the label vertically */
+@media (max-width: 600px) {
+  .version {
+    /* Rotate 90° counter-clockwise */
+    font-size: 8px;
+    bottom: 1px;
+    right: 1px;
+    /* Optional: adjust translation to center it along the side */
+    /* transform: rotate(-90deg) translate(-50%, 0); */
+  }
+}

src/App.jsx

@@ -1,14 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } 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';
+import { AppsContext, AppsProvider } from './services/AppsContext/AppsContext.jsx';
+import Dock from './components/Dock/Dock.jsx';
 
-function App() {
+// Move the logic that uses the context into a component that is rendered inside the provider
+function AppContent() {
+  const { apps } = useContext(AppsContext);
   const [openApps, setOpenApps] = useState([]);
 
   const handleOpenApp = (appId) => {
-    const appConfig = DesktopAppsList.find((app) => app.id === appId);
+    const appConfig = apps.find((app) => app.id === appId);
 
     // If the app configuration has a link, open it in a new tab and do not add to openApps.
     if (appConfig?.link) {
@@ -27,13 +29,13 @@ function App() {
   };
 
   return (
-    <AppsProvider>
+    <>
+      <Dock />
       <div className="App">
         <Desktop onOpenApp={handleOpenApp} />
         {openApps.map((appId) => {
-          const appConfig = DesktopAppsList.find((app) => app.id === appId);
+          const appConfig = apps.find((app) => app.id === appId);
           const AppComponent = appConfig?.component;
-
           return (
             AppComponent && (
               <AppComponent
@@ -44,7 +46,18 @@ function App() {
           );
         })}
       </div>
-      </AppsProvider>
+      <div className="version">
+        v0.2.2 alpha
+      </div>
+    </>
+  );
+}
+
+function App() {
+  return (
+    <AppsProvider>
+      <AppContent />
+    </AppsProvider>
   );
 }