animation tweaks and mobile desktop fixes

src/app/components/WindowsDesktop.tsx

@@ -53,6 +53,7 @@ export default function WindowsDesktop() {
   ]);
   const [activeId, setActiveId] = useState<number | null>(1);
   const [startOpen, setStartOpen] = useState(false);
+  const [startClosing, setStartClosing] = useState(false);
   const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
   const [closingIds, setClosingIds] = useState<number[]>([]);
 
@@ -78,7 +79,7 @@ export default function WindowsDesktop() {
   };
 
   const openApp = (appId: string) => {
-    setStartOpen(false);
+    if (startOpen) setStartClosing(true);
     const existing = wins.find((w) => w.appId === appId);
     if (existing) {
       setWins((prev) =>
@@ -117,6 +118,21 @@ export default function WindowsDesktop() {
     setActiveId(id);
   };
 
+  const closeStart = () => {
+    if (startOpen && !startClosing) setStartClosing(true);
+  };
+
+  const toggleStart = () => {
+    if (!startOpen) {
+      setStartClosing(false);
+      setStartOpen(true);
+    } else if (startClosing) {
+      setStartClosing(false);
+    } else {
+      setStartClosing(true);
+    }
+  };
+
   // Animate the window out first, then drop it from state.
   const closeWin = (id: number) =>
     setClosingIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
@@ -168,7 +184,7 @@ export default function WindowsDesktop() {
       style={{ backgroundImage: wallpaper }}
       onPointerDown={(e) => {
         if (e.target === e.currentTarget) {
-          setStartOpen(false);
+          closeStart();
           setSelectedIcon(null);
         }
       }}
@@ -264,7 +280,17 @@ export default function WindowsDesktop() {
 
       {/* Application launcher */}
       {startOpen && (
-        <div className="kickoff" onPointerDown={(e) => e.stopPropagation()}>
+        <div
+          className={"kickoff" + (startClosing ? " closing" : "")}
+          onPointerDown={(e) => e.stopPropagation()}
+          onAnimationEnd={(e) => {
+            if (e.target !== e.currentTarget) return;
+            if (startClosing) {
+              setStartOpen(false);
+              setStartClosing(false);
+            }
+          }}
+        >
           <div className="kickoff-content">
             <div className="kickoff-section-title">Applications</div>
             <div className="kickoff-list">
@@ -333,7 +359,7 @@ export default function WindowsDesktop() {
         <button
           type="button"
           className={"win-start" + (startOpen ? " open" : "")}
-          onClick={() => setStartOpen((v) => !v)}
+          onClick={() => toggleStart()}
           aria-label="Application Launcher"
           title="Application Launcher"
         >
@@ -352,7 +378,8 @@ export default function WindowsDesktop() {
                 className={
                   "win-tb-btn" +
                   (activeId === w.id && !w.minimized ? " active" : "") +
-                  (w.minimized ? " minimized" : "")
+                  (w.minimized ? " minimized" : "") +
+                  (closingIds.includes(w.id) ? " closing" : "")
                 }
                 onClick={() => taskbarClick(w)}
                 title={app.title}