(v0.1.4.3-alpha) Taskbar Animation + Bug Fixes

rupnil-codes · rupnil-codes · commit a6666b644d19 · 2026-02-20T15:37:17.000+05:30
Animation when popping up new items in the taskbar. Make ~~opaque and~~ high zIndex when dragging desktop apps, to overlay the bottom objects. In fullscreen clicking the app in taskbar toggles fullscreen, and it becomes not fullscreen.
diff --git a/README.md b/README.md
@@ -16,4 +16,7 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [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)
-- [ ] Make opaque and high zIndex when dragging desktop apps, to hide the bottom objects. 
+- [X] New apps (not pinned in the taskbar) should be shown in taskbar when opened. (Done in v0.1.4.3)
+- [X] Animation when popping up new items in the taskbar. (Done in v0.1.4.3)
+- [X] Make ~~opaque and~~ high zIndex when dragging desktop apps, to overlay the bottom objects. (Done in v0.1.4.3)
+- [X] BUG: In fullscreen clicking the app in taskbar toggles fullscreen, and it becomes not fullscreen. (Done in v0.1.4.3)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.34.2",
     "lucide-react": "^0.574.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
diff --git a/public/assets/icons/Notepad.png b/public/assets/icons/Notepad.png
diff --git a/public/assets/icons/Windows.svg b/public/assets/icons/Windows.svg
@@ -0,0 +1,24 @@
+<svg width="1350" height="1350" viewBox="0 0 1350 1350" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M707.333 1350L1281.33 1349.33L1292 1345.73C1317.2 1337.07 1337.2 1317.2 1345.73 1292L1349.33 1281.33L1350 707.333H707.333V1350Z" fill="url(#paint0_linear_18_24)"/>
+<path d="M707 1L1281 1.66667L1291.67 5.26667C1316.87 13.9333 1336.87 33.8 1345.4 59L1349 69.6667L1349.67 643.667H707V1Z" fill="url(#paint1_linear_18_24)"/>
+<path d="M642.667 1349.67L68.6667 1349L58 1345.4C32.8 1336.73 12.8 1316.87 4.26667 1291.67L0.666667 1281L0 707H642.667V1349.67Z" fill="url(#paint2_linear_18_24)"/>
+<path d="M642.667 0L68.6667 0.666667L58 4.26667C32.8 12.9333 12.8 32.8 4.26667 58L0.666667 68.6667L0 642.667H642.667V0Z" fill="url(#paint3_linear_18_24)"/>
+<defs>
+<linearGradient id="paint0_linear_18_24" x1="0" y1="0" x2="1350" y2="1350" gradientUnits="userSpaceOnUse">
+<stop stop-color="#77F2FF"/>
+<stop offset="1" stop-color="#0B89E1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_18_24" x1="0" y1="0" x2="1350" y2="1350" gradientUnits="userSpaceOnUse">
+<stop stop-color="#77F2FF"/>
+<stop offset="1" stop-color="#0B89E1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_18_24" x1="0" y1="0" x2="1350" y2="1350" gradientUnits="userSpaceOnUse">
+<stop stop-color="#77F2FF"/>
+<stop offset="1" stop-color="#0B89E1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_18_24" x1="0" y1="0" x2="1350" y2="1350" gradientUnits="userSpaceOnUse">
+<stop stop-color="#77F2FF"/>
+<stop offset="1" stop-color="#0B89E1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,8 +14,8 @@ function App() {
         <>
             <div className="app">
                 <Routes>
-                    <Route path="/" Component={LockScreen}/>
-                    <Route path="/desktop" Component={Desktop}/>
+                    <Route path="/desktop" Component={LockScreen}/>
+                    <Route path="/" Component={Desktop}/>
 
                     <Route path="/apps/*" element={<DesktopApps />} />
                 </Routes>
diff --git a/src/DesktopApps.jsx b/src/DesktopApps.jsx
@@ -8,16 +8,19 @@ 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";
 
 function DesktopApps() {
     return (
-        <div className="app-container">
+        <div className="app-window">
             <Routes>
                 <Route path="/explorer" element={<Explorer />} />
                 <Route path="/vscode" element={<VSCode />} />
                 <Route path="/settings" element={<Settings />} />
                 <Route path="/chrome" element={<Chrome />} />
                 <Route path="/terminal" element={<Terminal />} />
+
+                <Route path={"/readme_txt"} element={<Readme_txt />} />
             </Routes>
         </div>
     );
diff --git a/src/apps/README.txt.jsx b/src/apps/README.txt.jsx
@@ -0,0 +1,12 @@
+import "../styles/apps/readme_txt.css"
+
+function Readme_txt() {
+
+    return (
+        <>
+            <p>Readme_txt</p>
+        </>
+    )
+}
+
+export default Readme_txt
diff --git a/src/assets/icons/Notepad.png b/src/assets/icons/Notepad.png
diff --git a/src/data/Apps.js b/src/data/Apps.js
@@ -24,4 +24,10 @@ export const APP_REGISTRY = {
         src: "/?start=/apps/terminal",
         imgSrc: "/assets/icons/Terminal.ico",
     },
+
+    readme_txt: {
+        title: "README.txt",
+        src: "/?start=/apps/readme_txt",
+        imgSrc: "/assets/icons/Notepad.png",
+    }
 };
diff --git a/src/routes/desktop.jsx b/src/routes/desktop.jsx
@@ -3,7 +3,9 @@ import { Wifi, Volume2, Bell } from 'lucide-react';
 import AppWindow, { INITIAL_Z, getNextZ } from '../core/WindowManager.jsx';
 import { createRef, useRef, useState, useMemo } from "react";
 import { APP_REGISTRY } from "../data/Apps.js";
+
 import Draggable from 'react-draggable';
+import { motion, AnimatePresence } from "framer-motion";
 
 function Desktop() {
     const [iconPositions, setIconPositions] = useState({
@@ -12,6 +14,7 @@ function Desktop() {
         settings: { col: 1, row: 3 },
         chrome: { col: 2, row: 1 },
         terminal: { col: 2, row: 2 },
+        readme_txt: { col: 3, row: 3 },
     });
 
     const [selectedIcon, setSelectedIcon] = useState(null);
@@ -22,6 +25,7 @@ function Desktop() {
         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 lastPos = useRef({ x: 100, y: 100 });
@@ -33,8 +37,17 @@ function Desktop() {
         settings: createRef(),
         chrome: createRef(),
         terminal: createRef(),
+        readme_txt: createRef(),
     }), []);
 
+    const taskbarApps = useMemo(() => {
+        const pinned = ['explorer', 'vscode', 'settings', 'chrome', 'terminal'];
+        const openAppKeys = Object.keys(apps).filter(key => apps[key].isOpen);
+        return Array.from(new Set([...pinned, ...openAppKeys]));
+    }, [apps]);
+
+    const [draggingIcon, setDraggingIcon] = useState(null);
+
     const handleIconStop = (e, data, id) => {
         const gridX = 5.35 * 16;
         const gridY = 6 * 16;
@@ -78,7 +91,6 @@ function Desktop() {
                 [name]: {
                     ...prev[name],
                     isOpen: true,
-                    fullscreen: false,
                     minimized: !prev[name].minimized,
                     zIndex: getNextZ() }
             }));
@@ -89,7 +101,6 @@ function Desktop() {
                 [name]: {
                     ...prev[name],
                     isOpen: true,
-                    fullscreen: false,
                     minimized: false,
                     zIndex: getNextZ(),
                     initialX: lastPos.current.x,
@@ -145,8 +156,12 @@ function Desktop() {
                         onStart={(e) => {
                             e.stopPropagation();
                             setSelectedIcon(id);
+                            setDraggingIcon(id);
                         }}
-                        onStop={(e, data) => handleIconStop(e, data, id)}
+                        onStop={(e, data) => {
+                            setDraggingIcon(null);
+                            handleIconStop(e, data, id)
+                    }}
                         cancel=".icon, p"
                     >
                         <div
@@ -160,6 +175,10 @@ function Desktop() {
                             style={{
                                 gridColumn: iconPositions[id].col,
                                 gridRow: iconPositions[id].row,
+
+                                zIndex: draggingIcon === id ? 99999 : 1,
+                                opacity: draggingIcon === id ? 1 : undefined,
+                                position: 'relative'
                             }}
                         >
                             <img className="app-icon" src={APP_REGISTRY[id].imgSrc} draggable="false" alt="icon" />
@@ -191,18 +210,36 @@ function Desktop() {
 
             <div className={`taskbar ${ isAnyFullScreen ? 'is-fullscreen' : ''}`} onClick={(e) => e.stopPropagation()}>
                 <div className="apps">
-                    <div className="app-item">
-                        <div className="taskbar-app start-menu" id="start-menu"></div>
-                    </div>
-                    {['explorer', 'vscode', 'settings', 'chrome', 'terminal'].map(id => (
-                        <div
-                            key={id}
-                            className={`app-item ${!apps[id].isOpen ? "" : (focussed === id && !apps[id].minimized) ? "open focussed active" : "open"}`}
-                            onClick={() => openApp(id)}
+                    <AnimatePresence mode="popLayout">
+                        <motion.div
+                            layout
+                            initial={{ opacity: 0, width: 0, scale: 0.5 }}
+                            animate={{ opacity: 1, width: 24, scale: 1 }}
+                            exit={{ opacity: 0, width: 0, scale: 0.5 }}
+                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                            className="app-item"
                         >
-                            <div className={`taskbar-app ${id}`} id={id}></div>
-                        </div>
-                    ))}
+                            <div className="taskbar-app" id="start-menu">
+                                <img className={"taskbar-app-icon"} src={"/assets/icons/Windows.svg"} draggable="false" alt="icon" />
+                            </div>
+                        </motion.div>
+                        {taskbarApps.map(id => (
+                            <motion.div
+                                key={id}
+                                layout
+                                initial={{ opacity: 0, width: 0, scale: 0.5 }}
+                                animate={{ opacity: 1, width: 24, scale: 1 }}
+                                exit={{ opacity: 0, width: 0, scale: 0.5 }}
+                                transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                                className={`app-item ${!apps[id].isOpen ? "" : (focussed === id && !apps[id].minimized) ? "open focussed active" : "open"}`}
+                                onClick={() => openApp(id)}
+                            >
+                                <div className={`taskbar-app ${id}`} id={id}>
+                                    <img className={"taskbar-app-icon"} src={APP_REGISTRY[id].imgSrc} draggable="false" alt="icon" />
+                                </div>
+                            </motion.div>
+                        ))}
+                    </AnimatePresence>
                 </div>
                 <div className="tray">
                     <div className="wifisound tray-container">
diff --git a/src/styles/DesktopApps.css b/src/styles/DesktopApps.css
@@ -0,0 +1,7 @@
+
+.app-window {
+    background-color: #0c0c0c;
+    height: 100vh;
+    width: 100vw;
+
+}
diff --git a/src/styles/apps/readme_txt.css b/src/styles/apps/readme_txt.css
diff --git a/src/styles/core/WindowManager.css b/src/styles/core/WindowManager.css
@@ -59,5 +59,5 @@
 }
 
 .window-obj {
-    border-radius: 10px;
+    border-radius: 0 0 10px 10px;
 }
diff --git a/src/styles/routes/desktop.css b/src/styles/routes/desktop.css
