react-os-shell 0.2.2 → 0.2.20

package/dist/index.js

@@ -5,11 +5,11 @@ import { useGoogleAuth } from './chunk-46LICZUM.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-IQV6QQBQ.js';
+import { setPdfPreview } from './chunk-4J466VCS.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, useIsMobile, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive, subscribeMobileMode, getMobileMode, WINDOW_REGISTRY, isPageEntry, setMobileMode, LoadingSpinner, ThumbCard, activateModal } from './chunk-7P6DO3NC.js';
-export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, glassStyle, isEntityEntry, isPageEntry, setShellApiClient, setShellNavIcons, setShellWindowRegistry, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-7P6DO3NC.js';
+import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, useIsMobile, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-QXY6ZHRX.js';
+export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, glassStyle, isEntityEntry, isPageEntry, setShellApiClient, setShellNavIcons, setShellWindowRegistry, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-QXY6ZHRX.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
 import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, isValidElement, cloneElement, useSyncExternalStore, useMemo, Suspense } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -706,7 +706,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.2.1" ;
+var VERSION = "0.2.19" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -2791,6 +2791,24 @@ function StartMenu({
       ` })
   ] });
 }
+
+// src/shell/mobileShellStore.ts
+var _mode = "home";
+var listeners = /* @__PURE__ */ new Set();
+function getMobileMode() {
+  return _mode;
+}
+function setMobileMode(mode) {
+  if (_mode === mode) return;
+  _mode = mode;
+  listeners.forEach((fn) => fn());
+}
+function subscribeMobileMode(cb) {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+}
 var MOBILE_WIDGET_ORDER_KEY = "erp_mobile_widget_order";
 var MOBILE_HOME_ORDER_KEY = "erp_mobile_home_order";
 var LONG_PRESS_MS = 400;
@@ -2843,15 +2861,12 @@ function sizeIcon(node, fallback, sizeClass = "h-10 w-10") {
   }
   return node;
 }
-function AppTile({ route, icon, badge }) {
-  return /* @__PURE__ */ jsxs("span", { className: `relative aspect-square w-full max-w-[80px] mx-auto rounded-2xl bg-gradient-to-br ${hashGradient(route)} flex items-center justify-center text-white shadow-sm border border-white/30`, children: [
-    sizeIcon(icon, FALLBACK_APP_ICON, "h-11 w-11"),
-    badge && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-blue-400 border-2 border-white" })
-  ] });
+function AppTile({ route, icon }) {
+  return /* @__PURE__ */ jsx("span", { className: `relative aspect-square w-full rounded-2xl bg-gradient-to-br ${hashGradient(route)} flex items-center justify-center text-white shadow-sm border border-white/30`, children: sizeIcon(icon, FALLBACK_APP_ICON, "h-11 w-11") });
 }
-function FolderTile({ section, navIcons: navIcons2, badge }) {
+function FolderTile({ section, navIcons: navIcons2 }) {
   const previewItems = section.items.slice(0, 4);
-  return /* @__PURE__ */ jsxs("span", { className: "relative aspect-square w-full max-w-[80px] mx-auto rounded-2xl bg-white/30 backdrop-blur-sm border border-white/40 p-1.5 grid grid-cols-2 gap-1 shadow-sm", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "relative aspect-square w-full rounded-2xl bg-white/30 backdrop-blur-sm border border-white/40 p-1.5 grid grid-cols-2 gap-1 shadow-sm", children: [
     previewItems.map((item) => /* @__PURE__ */ jsx(
       "span",
       {
@@ -2860,8 +2875,7 @@ function FolderTile({ section, navIcons: navIcons2, badge }) {
       },
       item.to
     )),
-    Array.from({ length: Math.max(0, 4 - previewItems.length) }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "rounded-md bg-white/20" }, `empty-${i}`)),
-    badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-blue-500 text-white text-[10px] font-bold leading-[18px] text-center border-2 border-white", children: badge })
+    Array.from({ length: Math.max(0, 4 - previewItems.length) }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "rounded-md bg-white/20" }, `empty-${i}`))
   ] });
 }
 function MobileHome({
@@ -3009,7 +3023,7 @@ function MobileHome({
       saveOrder(MOBILE_WIDGET_ORDER_KEY, next);
     }
   }, [widgetWindows, widgetOrder]);
-  const openCountByRoute = useMemo(() => {
+  useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const w of openWindows) {
       if (!w.route) continue;
@@ -3017,39 +3031,33 @@ function MobileHome({
     }
     return map;
   }, [openWindows]);
-  const openInFolder = (folder) => {
-    const routes = new Set(folder.items.map((i) => i.to));
-    return openWindows.filter((w) => w.route && routes.has(w.route));
-  };
   const draggedIcon = dragId ? homeIcons.find((i) => i.id === dragId) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: "h-full overflow-y-auto px-3 pt-4 pb-4 select-none",
+        className: "h-full overflow-y-auto px-4 pt-4 pb-4 select-none",
         style: {
           // Disable iOS long-press text-selection / "Copy" callout on icon labels.
           WebkitUserSelect: "none",
           WebkitTouchCallout: "none"
         },
-        children: [
-          widgetWindows.length > 0 && /* @__PURE__ */ jsx("section", { className: "mb-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6", children: widgetWindows.map((w) => {
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          widgetWindows.length > 0 && /* @__PURE__ */ jsx("section", { className: "mb-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: widgetWindows.map((w) => {
             const entry = WINDOW_REGISTRY[w.route];
             if (!entry) return null;
             const Component = entry.component;
             return /* @__PURE__ */ jsx(
               "div",
               {
-                className: "relative rounded-2xl bg-white/85 backdrop-blur border border-white/40 shadow-md overflow-hidden aspect-square",
+                className: "col-span-2 relative rounded-2xl bg-white/85 backdrop-blur border border-white/40 shadow-md overflow-hidden aspect-square",
                 children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) }), children: /* @__PURE__ */ jsx(Component, {}) })
               },
               w.id
             );
           }) }) }),
-          homeIcons.length > 0 && /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-3", children: homeIcons.map((icon) => {
+          homeIcons.length > 0 && /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: homeIcons.map((icon) => {
             const isFolder = icon.kind === "folder";
-            const folderOpen = isFolder ? openInFolder(icon.section).length : 0;
-            const appOpen = !isFolder ? openCountByRoute.get(icon.route) ?? 0 : 0;
             const isBeingDragged = dragId === icon.id;
             return /* @__PURE__ */ jsxs(
               "button",
@@ -3063,14 +3071,14 @@ function MobileHome({
                 style: { touchAction: "none", visibility: isBeingDragged ? "hidden" : "visible" },
                 className: `flex flex-col items-center gap-1 py-1 rounded-lg active:bg-white/20 ${dragId && !isBeingDragged ? "transition-transform" : ""}`,
                 children: [
-                  isFolder ? /* @__PURE__ */ jsx(FolderTile, { section: icon.section, navIcons: navIcons2, badge: folderOpen }) : /* @__PURE__ */ jsx(AppTile, { route: icon.route, icon: navIcons2[icon.route], badge: appOpen > 0 }),
+                  isFolder ? /* @__PURE__ */ jsx(FolderTile, { section: icon.section, navIcons: navIcons2 }) : /* @__PURE__ */ jsx(AppTile, { route: icon.route, icon: navIcons2[icon.route] }),
                   /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-sm truncate w-full text-center", children: icon.label })
                 ]
               },
               icon.id
             );
           }) }) })
-        ]
+        ] })
       }
     ),
     draggedIcon && dragPos && /* @__PURE__ */ jsx(
@@ -3093,16 +3101,10 @@ function MobileHome({
       {
         folder: selectedFolder,
         navIcons: navIcons2,
-        openInFolder: openInFolder(selectedFolder),
-        openCountByRoute,
         onClose: () => setSelectedFolder(null),
         onOpenApp: (path) => {
           setSelectedFolder(null);
           onOpenApp(path);
-        },
-        onActivateWindow: (id) => {
-          setSelectedFolder(null);
-          onActivateWindow(id);
         }
       }
     )
@@ -3111,74 +3113,70 @@ function MobileHome({
 function FolderPopup({
   folder,
   navIcons: navIcons2,
-  openInFolder,
-  openCountByRoute,
   onClose,
-  onOpenApp,
-  onActivateWindow
+  onOpenApp
 }) {
+  const [closing, setClosing] = useState(false);
+  const beginClose = () => {
+    if (closing) return;
+    setClosing(true);
+    setTimeout(onClose, 200);
+  };
+  const closeThen = (after) => {
+    if (closing) return;
+    setClosing(true);
+    setTimeout(after, 200);
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "fixed inset-0 z-[210] flex flex-col items-center justify-center px-6 bg-black/45 backdrop-blur-xl select-none",
       style: {
         paddingBottom: "calc(var(--mobile-bottom-nav, 70px) + 16px)",
-        animation: "folder-fade-in 220ms ease-out",
+        animation: closing ? "folder-fade-out 200ms ease-in forwards" : "folder-fade-in 220ms ease-out",
         WebkitUserSelect: "none",
         WebkitTouchCallout: "none"
       },
-      onClick: onClose,
+      onClick: beginClose,
       children: [
         /* @__PURE__ */ jsx("style", { children: `
         @keyframes folder-fade-in { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes folder-fade-out { from { opacity: 1; } to { opacity: 0; } }
         @keyframes folder-pop-in { from { opacity: 0; transform: scale(0.86) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+        @keyframes folder-pop-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.9) translateY(4px); } }
       ` }),
-        /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-white drop-shadow-md mb-4 self-start", children: folder.label }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-full max-w-md max-h-[70vh] flex flex-col rounded-3xl bg-white/15 backdrop-blur-xl border border-white/25 shadow-2xl overflow-hidden",
-            style: { animation: "folder-pop-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1)" },
-            onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-5", children: [
-              openInFolder.length > 0 && /* @__PURE__ */ jsxs("section", { className: "mb-4", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wide text-white/70 mb-2", children: "Open" }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: openInFolder.map((w) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => onActivateWindow(w.id),
-                    className: "flex items-center gap-2 p-2 rounded-lg bg-white/15 active:bg-white/25 text-left",
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: `h-7 w-7 rounded bg-gradient-to-br ${hashGradient(w.route ?? "")} flex items-center justify-center text-white shrink-0`, children: sizeIcon(w.route ? navIcons2[w.route] : null, FALLBACK_APP_ICON, "h-4 w-4") }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white truncate flex-1", children: w.label })
-                    ]
-                  },
-                  w.id
-                )) })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3", children: folder.items.map((item) => {
-                const openCount = openCountByRoute.get(item.to) ?? 0;
+        /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[304px]", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-white drop-shadow-md mb-4 ml-4", children: folder.label }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "max-h-[70vh] flex flex-col rounded-3xl bg-white/15 backdrop-blur-xl border border-white/25 shadow-2xl overflow-hidden",
+              style: {
+                animation: closing ? "folder-pop-out 180ms ease-in forwards" : "folder-pop-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1)"
+              },
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-5", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4", children: folder.items.map((item) => {
                 return /* @__PURE__ */ jsxs(
                   "button",
                   {
-                    onClick: () => onOpenApp(item.to),
-                    className: "flex flex-col items-center gap-1.5 p-1 rounded-lg active:bg-white/15",
+                    onClick: () => closeThen(() => onOpenApp(item.to)),
+                    className: "flex flex-col items-center gap-1 py-1 rounded-lg active:bg-white/15",
                     children: [
-                      /* @__PURE__ */ jsx(AppTile, { route: item.to, icon: navIcons2[item.to], badge: openCount > 0 }),
+                      /* @__PURE__ */ jsx(AppTile, { route: item.to, icon: navIcons2[item.to] }),
                       /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-sm truncate w-full text-center", children: item.label })
                     ]
                   },
                   item.to
                 );
-              }) })
-            ] })
-          }
-        )
+              }) }) })
+            }
+          )
+        ] })
       ]
     }
   );
 }
-function MobileSwitcher({ windows, onActivate, onClose }) {
+function MobileSwitcher({ windows, onActivate, onClose, onCloseAll }) {
   const [cardSize, setCardSize] = useState(() => computeCardSize());
   useEffect(() => {
     const onResize = () => setCardSize(computeCardSize());
@@ -3197,26 +3195,36 @@ function MobileSwitcher({ windows, onActivate, onClose }) {
       /* @__PURE__ */ jsx("p", { className: "text-xs text-white/50", children: "Tap Home to launch one." })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto px-3 pt-4 pb-4", children: [
-    /* @__PURE__ */ jsxs("h1", { className: "text-white text-base font-semibold mb-3 px-1", children: [
-      "Open apps \xB7 ",
-      windows.length
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-4 pb-4", children: [
+      /* @__PURE__ */ jsxs("h1", { className: "text-white text-base font-semibold mb-3 px-1", children: [
+        "Open apps \xB7 ",
+        windows.length
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: windows.map((w) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-1", children: [
+        /* @__PURE__ */ jsx(
+          ThumbCard,
+          {
+            id: w.id,
+            label: w.label,
+            maxW: cardSize.w,
+            maxH: cardSize.h,
+            titleAbove: true,
+            onClick: () => onActivate(w.id),
+            onClose: () => onClose(w.id)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-white/80 truncate px-1", children: w.label })
+      ] }, w.id)) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: windows.map((w) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-1", children: [
-      /* @__PURE__ */ jsx(
-        ThumbCard,
-        {
-          id: w.id,
-          label: w.label,
-          maxW: cardSize.w,
-          maxH: cardSize.h,
-          titleAbove: true,
-          onClick: () => onActivate(w.id),
-          onClose: () => onClose(w.id)
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-white/80 truncate px-1", children: w.label })
-    ] }, w.id)) })
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-3 py-3 flex justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onCloseAll,
+        className: "px-5 py-2.5 rounded-full bg-white/15 backdrop-blur-md border border-white/25 text-white text-sm font-medium active:bg-white/25 shadow-lg",
+        children: "Close All"
+      }
+    ) })
   ] });
 }
 function computeCardSize() {
@@ -3401,7 +3409,7 @@ function MobileShell({
   }, [openWindows]);
   const prevOpenCountRef = useRef(openWindows.length);
   useEffect(() => {
-    if (openWindows.length < prevOpenCountRef.current && mode === "app") {
+    if (openWindows.length === 0 && mode === "app") {
       setMobileMode("home");
     }
     prevOpenCountRef.current = openWindows.length;
@@ -3421,6 +3429,13 @@ function MobileShell({
   };
   const closeSheet = () => setSheet(null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-0 pointer-events-none",
+        style: wallpaperStyle
+      }
+    ),
     mode === "home" && /* @__PURE__ */ jsx(
       "div",
       {
@@ -3447,7 +3462,8 @@ function MobileShell({
       {
         windows: switcherWindows,
         onActivate: handleActivateWindow,
-        onClose: (id) => closeEntity(id)
+        onClose: (id) => closeEntity(id),
+        onCloseAll: () => switcherWindows.forEach((w) => closeEntity(w.id))
       }
     ) }),
     sheet === "notifications" && notifications && /* @__PURE__ */ jsx(MobileNotificationSheet, { config: notifications, onClose: closeSheet }),
@@ -3467,7 +3483,6 @@ function MobileShell({
       MobileBottomNav,
       {
         mode,
-        openCount: switcherWindows.length,
         unreadCount,
         showNotifications: !!notifications,
         profileAvatar: profile?.avatar_url,
@@ -3488,7 +3503,6 @@ function MobileShell({
 }
 function MobileBottomNav({
   mode,
-  openCount,
   unreadCount,
   showNotifications,
   profileAvatar,
@@ -3513,31 +3527,28 @@ function MobileBottomNav({
       },
       children: [
         /* @__PURE__ */ jsxs("button", { onClick: onHome, className: btnClass(mode === "home"), "aria-label": "Home", children: [
-          /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: "Home" })
+          /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Home" })
         ] }),
         /* @__PURE__ */ jsxs("button", { onClick: onSwitcher, className: btnClass(mode === "switcher"), "aria-label": "App switcher", children: [
-          /* @__PURE__ */ jsxs("span", { className: "relative", children: [
-            /* @__PURE__ */ jsxs("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: [
-              /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
-              /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
-              /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.25" }),
-              /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.25" })
-            ] }),
-            openCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-blue-500 text-white text-[10px] font-bold leading-4 text-center", children: openCount })
+          /* @__PURE__ */ jsxs("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: [
+            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
+            /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
+            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.25" }),
+            /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.25" })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: "Apps" })
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Apps" })
         ] }),
         showNotifications && /* @__PURE__ */ jsxs("button", { onClick: onNotifications, className: btnClass(false), "aria-label": "Notifications", children: [
           /* @__PURE__ */ jsxs("span", { className: "relative", children: [
-            /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
-            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-bold leading-4 text-center", children: unreadCount > 99 ? "99+" : unreadCount })
+            /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
+            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1.5 -right-2 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-bold leading-[18px] text-center", children: unreadCount > 99 ? "99+" : unreadCount })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: "Alerts" })
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Alerts" })
         ] }),
         /* @__PURE__ */ jsxs("button", { onClick: onProfile, className: btnClass(false), "aria-label": "Profile", children: [
-          profileAvatar ? /* @__PURE__ */ jsx("img", { src: profileAvatar, alt: "", className: "h-6 w-6 rounded-full object-cover border border-gray-200" }) : /* @__PURE__ */ jsx("div", { className: "h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center text-[10px] font-bold text-blue-700", children: profileInitial }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: "Profile" })
+          profileAvatar ? /* @__PURE__ */ jsx("img", { src: profileAvatar, alt: "", className: "h-8 w-8 rounded-full object-cover border border-gray-200" }) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-xs font-bold text-blue-700", children: profileInitial }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Profile" })
         ] })
       ]
     }
@@ -3878,7 +3889,7 @@ function Layout({
     root.style.setProperty("--window-tab-font-size", sv.tabFont);
   }, [inactiveHeaderOpacity, inactiveContentOpacity, activeHeaderOpacity, activeContentOpacity, taskbarH, taskbarPosition, prefs.default_window_size, prefs.window_position, prefs.menu_density, prefs.start_menu_size]);
   useEffect(() => {
-    document.documentElement.style.setProperty("--mobile-bottom-nav", isMobile ? "70px" : "0px");
+    document.documentElement.style.setProperty("--mobile-bottom-nav", isMobile ? "100px" : "0px");
   }, [isMobile]);
   const [balloonDismissed, setBalloonDismissed] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);