(v0.1.4.5-alpha) Optimize: Single App.js + React Component for apps

1. Have ONLY App.js with all the necessary variables so that we do not need to manually add apps to each part.
2. Using React component than Iframes, as they are quite a memory hogger and a can degrade performance.

Author: rupnil-codes

README.md

@@ -10,10 +10,10 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [X] Windows Design + Desktop Design (Done in v0.1.3... & v0.1.4... respectively)
 - [X] Windows start menu does nothing rn. (Done in v0.1.4.4)
 - [X] Minimizing window still takes up the zIndex and prevents from using it.(FIXED IN v0.1.3.3-alpha)
-- [X] Clicking app on task bar checks if it is focussed or not then: if focussed minimize it, else focus it. (v0.1.3.3-alpha)
+  - [X] FEAT: Clicking app on task bar checks if it is focussed or not then: if focussed minimize it, else focus it. (v0.1.3.3-alpha)
 - [X] Bug: Closing all apps still makes one of them active (visual) (FIXED: v0.1.3.4-alpha)
-- [X] Windows Lag when moving (FIXED in v0.1.3.5).
-- [X] Draggable component throughout (FIXED in v0.1.3.5).
+- [X] BUG: Windows Lag when moving (FIXED in v0.1.3.5).
+- [X] ~~Draggable~~ Extendable component throughout the window (FIXED in v0.1.3.5).
 - [X] Dynamic Grid (Fixed in v0.1.4.1)
 - [X] the text to icon ratio is too big, maybe either increase the size of the icon or decrease the size of the text (do both) (Done in v0.1.4.2)
 - [X] Routers for the desktop Apps. (Done in v0.1.4.2)
@@ -24,3 +24,5 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [X] BUG: Closing on fullscreen saves the state. On the opening again it starts in fullscreen. (Fixed in v0.1.4.3(1))
 - [ ] QOL: drag the window, even outside the bounding box, or the window keeping padding of like 1rem.
 - [ ] BUG: Clicking on the windows icon when the start menu is active causes a jittering effect and doesn't close it.
+- [X] OPTIMIZATION: Have ONLY App.js with all the necessary variables so that we do not need to manually add apps to each part. (Done in v0.1.4.5)
+- [X] OPTIMIZATION: (TruthEntity) thinks it is better to use React component than Iframes, as they are quite a memory hogger and a can degrade performance. (Done in v0.1.4.5)

src/App.jsx

@@ -6,8 +6,6 @@ import './styles/variables.css'
 import LockScreen from "./routes/lockscreen.jsx";
 import Desktop from "./routes/desktop.jsx";
 
-import DesktopApps from "./DesktopApps.jsx";
-
 
 function App() {
     return (
@@ -16,8 +14,6 @@ function App() {
                 <Routes>
                     <Route path="/desktop" Component={LockScreen}/>
                     <Route path="/" Component={Desktop}/>
-
-                    <Route path="/apps/*" element={<DesktopApps />} />
                 </Routes>
             </div>
         </>

src/DesktopApps.jsx

@@ -3,16 +3,9 @@ import { Rnd } from "react-rnd";
 import "../styles/core/WindowManager.css"
 import { X, Square, Copy, Minus } from 'lucide-react';
 
-export let INITIAL_Z = 1000;
-
-export function getNextZ() {
-    INITIAL_Z += 1;
-    return INITIAL_Z;
-}
-
 export default function AppWindow({
     title,
-    src,
+    AppComponent,
     imgSrc,
     zIndex,
     fullscreen = false,
@@ -121,18 +114,7 @@ export default function AppWindow({
                     </div>
                 </div>
 
-                <iframe
-                    className={"window-obj"}
-                    src={src}
-                    style={{
-                        flex: 1,
-                        border: "none",
-                        width: "100%",
-                        height: "100%",
-                        pointerEvents: isInteracting ? "none" : "auto"
-                    }}
-                    title={title}
-                />
+                < AppComponent />
             </div>
         </Rnd>
     );

src/core/WindowManager.jsx

@@ -1,33 +1,47 @@
+import Chrome from "../apps/chrome.jsx";
+import Explorer from "../apps/explorer.jsx";
+import Settings from "../apps/settings.jsx";
+import VSCode from "../apps/vscode.jsx";
+import Terminal from "../apps/terminal.jsx";
+import Readme_txt from "../apps/README.txt.jsx";
+
+export let INITIAL_Z = 1000;
+
+export function getNextZ() {
+    INITIAL_Z += 1;
+    return INITIAL_Z;
+}
+
 export const APP_REGISTRY = {
     explorer: {
         title: "Explorer",
-        src: "/?start=/apps/explorer",
+        component: Explorer,
         imgSrc: "/assets/icons/Explorer.ico",
     },
     vscode: {
         title: "VS Code",
-        src: "/?start=/apps/vscode",
+        component: VSCode,
         imgSrc: "/assets/icons/VSCode.svg",
     },
     settings: {
         title: "Settings",
-        src: "/?start=/apps/settings",
+        component: Settings,
         imgSrc: "/assets/icons/Settings.ico",
     },
     chrome: {
         title: "Chrome",
-        src: "/?start=/apps/chrome",
+        component: Chrome,
         imgSrc: "/assets/icons/Chrome.ico",
     },
     terminal: {
         title: "Terminal",
-        src: "/?start=/apps/terminal",
+        component: Terminal,
         imgSrc: "/assets/icons/Terminal.ico",
     },
 
     readme_txt: {
         title: "README.txt",
-        src: "/?start=/apps/readme_txt",
+        component: Readme_txt,
         imgSrc: "/assets/icons/Notepad.png",
     }
 };

src/data/Apps.js

@@ -7,12 +7,9 @@ import App from './App.jsx'
 
 import {MemoryRouter} from "react-router-dom";
 
-const params = new URLSearchParams(window.location.search);
-const startPath = params.get("start") || "/";
-
 createRoot(document.getElementById('root')).render(
     <StrictMode>
-        <MemoryRouter initialEntries={[startPath]}>
+        <MemoryRouter>
             <App/>
         </MemoryRouter>
     </StrictMode>,

src/main.jsx

@@ -1,8 +1,9 @@
 import '../styles/routes/desktop.css';
 import { Wifi, Volume2, Bell, Search } from 'lucide-react';
-import AppWindow, { INITIAL_Z, getNextZ } from '../core/WindowManager.jsx';
 import {createRef, useRef, useState, useMemo, useEffect} from "react";
-import { APP_REGISTRY } from "../data/Apps.js";
+import { APP_REGISTRY, INITIAL_Z, getNextZ } from "../data/Apps.js";
+
+import AppWindow from "../core/WindowManager.jsx";
 
 import Draggable from 'react-draggable';
 import { motion, AnimatePresence } from "framer-motion";
@@ -11,7 +12,6 @@ function Desktop() {
     const [isStartMenuActive, setIsStartMenuActive] = useState(false);
 
     const startMenuRef = useRef(null);
-
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (isStartMenuActive && startMenuRef.current && !startMenuRef.current.contains(event.target)) {
@@ -35,26 +35,29 @@ function Desktop() {
 
     const [selectedIcon, setSelectedIcon] = useState(null);
     const [focussed, setFocussed] = useState(null);
-    const [apps, setApps] = useState({
-        explorer: { isOpen: false, minimized: true, fullscreen: false, zIndex: INITIAL_Z, initialX: 0, initialY: 0 },
-        vscode: { isOpen: false, minimized: true, fullscreen: false, zIndex: INITIAL_Z, initialX: 0, initialY: 0 },
-        settings: { isOpen: false, minimized: true, fullscreen: false, zIndex: INITIAL_Z, initialX: 0, initialY: 0 },
-        chrome: { isOpen: false, minimized: true, fullscreen: false, zIndex: INITIAL_Z, initialX: 0, initialY: 0 },
-        terminal: { isOpen: false, minimized: true, fullscreen: false, zIndex: INITIAL_Z, initialX: 0, initialY: 0 },
-        readme_txt: { isOpen: false, minimized: true, fullscreen: false, zIndex: INITIAL_Z, initialX: 0, initialY: 0 },
+    const [apps, setApps] = useState(() => {
+        return Object.keys(APP_REGISTRY).reduce((acc, key) => {
+            acc[key] = {
+                isOpen: false,
+                minimized: true,
+                fullscreen: false,
+                zIndex: INITIAL_Z,
+                initialX: 0,
+                initialY: 0
+            };
+            return acc;
+        }, {});
     });
 
     const lastPos = useRef({ x: 100, y: 100 });
     const OFFSET = 20;
 
-    const nodeRefs = useMemo(() => ({
-        explorer: createRef(),
-        vscode: createRef(),
-        settings: createRef(),
-        chrome: createRef(),
-        terminal: createRef(),
-        readme_txt: createRef(),
-    }), []);
+    const nodeRefs = useMemo(() => {
+        return Object.keys(APP_REGISTRY).reduce((acc, key) => {
+            acc[key] = createRef();
+            return acc;
+        }, {});
+    }, []);
 
     const taskbarApps = useMemo(() => {
         const pinned = ['explorer', 'vscode', 'settings', 'chrome', 'terminal'];
@@ -235,7 +238,7 @@ function Desktop() {
                     <AppWindow
                         key={name}
                         title={APP_REGISTRY[name].title}
-                        src={APP_REGISTRY[name].src}
+                        AppComponent={APP_REGISTRY[name].component}
                         imgSrc={APP_REGISTRY[name].imgSrc}
                         zIndex={app.zIndex}
                         fullscreen={app.fullscreen}

src/routes/desktop.jsx

@@ -7,6 +7,7 @@ body {
 }
 
 p {
+    color: white;
     margin: 0;
     display: block;
     unicode-bidi: isolate;