react-os-shell 0.2.60 → 0.2.62

package/dist/{chunk-7ZPVS3H2.js → chunk-VH7LZ3JT.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-FBOBSZM5.js';
+import { Modal } from './chunk-RGAFGLUW.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DEFAULT_APPEARANCE = { activeOpacity: 70, inactiveOpacity: 50, activeBlur: 0, inactiveBlur: 0 };
@@ -138,5 +138,5 @@ function WidgetSettingsModal({ open, onClose, title, appearance, onAppearanceCha
 }
 
 export { WidgetSettingsModal, loadAppearance };
-//# sourceMappingURL=chunk-7ZPVS3H2.js.map
-//# sourceMappingURL=chunk-7ZPVS3H2.js.map
+//# sourceMappingURL=chunk-VH7LZ3JT.js.map
+//# sourceMappingURL=chunk-VH7LZ3JT.js.map

package/dist/{chunk-7ZPVS3H2.js.map → chunk-VH7LZ3JT.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/shell/WidgetSettingsModal.tsx"],"names":[],"mappings":"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","file":"chunk-7ZPVS3H2.js","sourcesContent":["import Modal from './Modal';\n\nexport interface WidgetAppearance {\n  activeOpacity: number;\n  inactiveOpacity: number;\n  activeBlur: number;\n  inactiveBlur: number;\n}\n\nexport const DEFAULT_APPEARANCE: WidgetAppearance = { activeOpacity: 70, inactiveOpacity: 50, activeBlur: 0, inactiveBlur: 0 };\n\nexport function loadAppearance(key: string): WidgetAppearance {\n  try {\n    const saved = JSON.parse(localStorage.getItem(key) || '');\n    // Migrate old single `blur` field to activeBlur/inactiveBlur\n    if (saved.blur != null && saved.activeBlur == null) {\n      saved.activeBlur = saved.blur;\n      saved.inactiveBlur = saved.blur;\n      delete saved.blur;\n    }\n    return { ...DEFAULT_APPEARANCE, ...saved };\n  }\n  catch { return DEFAULT_APPEARANCE; }\n}\n\n/** Reusable settings modal for widgets — renders appearance sliders + optional extra content above */\nexport default function WidgetSettingsModal({ open, onClose, title, appearance, onAppearanceChange, onSave, children }: {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  appearance: WidgetAppearance;\n  onAppearanceChange: (a: WidgetAppearance) => void;\n  onSave: () => void;\n  children?: React.ReactNode;\n}) {\n  if (!open) return null;\n\n  const inp = 'w-full h-1.5 rounded-full appearance-none bg-gray-200 cursor-pointer accent-blue-500';\n  const lbl = 'flex items-center justify-between text-xs text-gray-500';\n\n  return (\n    <div onPointerDown={e => e.stopPropagation()} onContextMenu={e => e.stopPropagation()}>\n    <Modal open={open} onClose={onClose} title={title} size=\"sm\">\n      <div className=\"space-y-4\">\n        {children}\n\n        {/* Appearance */}\n        <div>\n          <h3 className=\"text-sm font-semibold text-gray-700 mb-3\">Appearance</h3>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <div className=\"text-xs font-medium text-gray-600 mb-2\">Active</div>\n              <div className=\"space-y-2\">\n                <div>\n                  <div className={lbl}><span>Opacity</span><span>{appearance.activeOpacity}%</span></div>\n                  <input type=\"range\" min={20} max={100} value={appearance.activeOpacity}\n                    onChange={e => onAppearanceChange({ ...appearance, activeOpacity: +e.target.value })} className={inp} />\n                </div>\n                <div>\n                  <div className={lbl}><span>Blur</span><span>{appearance.activeBlur}px</span></div>\n                  <input type=\"range\" min={0} max={20} value={appearance.activeBlur}\n                    onChange={e => onAppearanceChange({ ...appearance, activeBlur: +e.target.value })} className={inp} />\n                </div>\n              </div>\n            </div>\n            <div>\n              <div className=\"text-xs font-medium text-gray-600 mb-2\">Inactive</div>\n              <div className=\"space-y-2\">\n                <div>\n                  <div className={lbl}><span>Opacity</span><span>{appearance.inactiveOpacity}%</span></div>\n                  <input type=\"range\" min={20} max={100} value={appearance.inactiveOpacity}\n                    onChange={e => onAppearanceChange({ ...appearance, inactiveOpacity: +e.target.value })} className={inp} />\n                </div>\n                <div>\n                  <div className={lbl}><span>Blur</span><span>{appearance.inactiveBlur}px</span></div>\n                  <input type=\"range\" min={0} max={20} value={appearance.inactiveBlur}\n                    onChange={e => onAppearanceChange({ ...appearance, inactiveBlur: +e.target.value })} className={inp} />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex gap-2 pt-2\">\n          <button onClick={onSave}\n            className=\"flex-1 text-sm font-medium py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition\">Save</button>\n          <button onClick={onClose}\n            className=\"flex-1 text-sm font-medium py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 transition\">Cancel</button>\n        </div>\n      </div>\n    </Modal>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/shell/WidgetSettingsModal.tsx"],"names":[],"mappings":"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","file":"chunk-VH7LZ3JT.js","sourcesContent":["import Modal from './Modal';\n\nexport interface WidgetAppearance {\n  activeOpacity: number;\n  inactiveOpacity: number;\n  activeBlur: number;\n  inactiveBlur: number;\n}\n\nexport const DEFAULT_APPEARANCE: WidgetAppearance = { activeOpacity: 70, inactiveOpacity: 50, activeBlur: 0, inactiveBlur: 0 };\n\nexport function loadAppearance(key: string): WidgetAppearance {\n  try {\n    const saved = JSON.parse(localStorage.getItem(key) || '');\n    // Migrate old single `blur` field to activeBlur/inactiveBlur\n    if (saved.blur != null && saved.activeBlur == null) {\n      saved.activeBlur = saved.blur;\n      saved.inactiveBlur = saved.blur;\n      delete saved.blur;\n    }\n    return { ...DEFAULT_APPEARANCE, ...saved };\n  }\n  catch { return DEFAULT_APPEARANCE; }\n}\n\n/** Reusable settings modal for widgets — renders appearance sliders + optional extra content above */\nexport default function WidgetSettingsModal({ open, onClose, title, appearance, onAppearanceChange, onSave, children }: {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  appearance: WidgetAppearance;\n  onAppearanceChange: (a: WidgetAppearance) => void;\n  onSave: () => void;\n  children?: React.ReactNode;\n}) {\n  if (!open) return null;\n\n  const inp = 'w-full h-1.5 rounded-full appearance-none bg-gray-200 cursor-pointer accent-blue-500';\n  const lbl = 'flex items-center justify-between text-xs text-gray-500';\n\n  return (\n    <div onPointerDown={e => e.stopPropagation()} onContextMenu={e => e.stopPropagation()}>\n    <Modal open={open} onClose={onClose} title={title} size=\"sm\">\n      <div className=\"space-y-4\">\n        {children}\n\n        {/* Appearance */}\n        <div>\n          <h3 className=\"text-sm font-semibold text-gray-700 mb-3\">Appearance</h3>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <div className=\"text-xs font-medium text-gray-600 mb-2\">Active</div>\n              <div className=\"space-y-2\">\n                <div>\n                  <div className={lbl}><span>Opacity</span><span>{appearance.activeOpacity}%</span></div>\n                  <input type=\"range\" min={20} max={100} value={appearance.activeOpacity}\n                    onChange={e => onAppearanceChange({ ...appearance, activeOpacity: +e.target.value })} className={inp} />\n                </div>\n                <div>\n                  <div className={lbl}><span>Blur</span><span>{appearance.activeBlur}px</span></div>\n                  <input type=\"range\" min={0} max={20} value={appearance.activeBlur}\n                    onChange={e => onAppearanceChange({ ...appearance, activeBlur: +e.target.value })} className={inp} />\n                </div>\n              </div>\n            </div>\n            <div>\n              <div className=\"text-xs font-medium text-gray-600 mb-2\">Inactive</div>\n              <div className=\"space-y-2\">\n                <div>\n                  <div className={lbl}><span>Opacity</span><span>{appearance.inactiveOpacity}%</span></div>\n                  <input type=\"range\" min={20} max={100} value={appearance.inactiveOpacity}\n                    onChange={e => onAppearanceChange({ ...appearance, inactiveOpacity: +e.target.value })} className={inp} />\n                </div>\n                <div>\n                  <div className={lbl}><span>Blur</span><span>{appearance.inactiveBlur}px</span></div>\n                  <input type=\"range\" min={0} max={20} value={appearance.inactiveBlur}\n                    onChange={e => onAppearanceChange({ ...appearance, inactiveBlur: +e.target.value })} className={inp} />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex gap-2 pt-2\">\n          <button onClick={onSave}\n            className=\"flex-1 text-sm font-medium py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition\">Save</button>\n          <button onClick={onClose}\n            className=\"flex-1 text-sm font-medium py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 transition\">Cancel</button>\n        </div>\n      </div>\n    </Modal>\n    </div>\n  );\n}\n"]}

package/dist/index.js

@@ -1,18 +1,18 @@
 import { useEmailUnreadCount } from './chunk-PDFQNHW7.js';
 import { formatDate } from './chunk-NSU7OHPC.js';
 export { formatDate } from './chunk-NSU7OHPC.js';
-export { EditableGrid } from './chunk-GP4Y3VCB.js';
 import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
 import { useGoogleAuth } from './chunk-MVWEL34Y.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-6W6HAU2K.js';
+export { EditableGrid } from './chunk-GP4Y3VCB.js';
+import { setPdfPreview } from './chunk-ST7KKB2W.js';
 import './chunk-KUIPWCTJ.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, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-FBOBSZM5.js';
-export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, glassStyle, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellNavIcons, setShellWindowRegistry, setWindowDefaultPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-FBOBSZM5.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-RGAFGLUW.js';
+export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, glassStyle, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellNavIcons, setShellWindowRegistry, setWindowDefaultPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-RGAFGLUW.js';
 import { confirm } from './chunk-PLGHQ7QW.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
 import { createContext, lazy, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useSyncExternalStore, useMemo } from 'react';
@@ -909,7 +909,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.2.60" ;
+var VERSION = "0.2.61" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -2997,6 +2997,231 @@ function StartMenu({
       ` })
   ] });
 }
+function Sidebar({
+  width,
+  openPage,
+  profile,
+  user,
+  onLogout,
+  onNavigate,
+  navSections: navSections2 = navSections,
+  navIcons: navIcons2 = navIcons,
+  sectionIcons: sectionIcons2 = sectionIcons,
+  categories = startMenuCategories,
+  productName,
+  productIcon
+}) {
+  const { hasAnyPerm } = useAuth();
+  const erpLabels = new Set(categories.erp);
+  const systemLabels = new Set(categories.system);
+  const virtualSections = categories.virtual ?? [];
+  const [search, setSearch] = useState("");
+  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+  const searchRef = useRef(null);
+  const toggleExpanded = (label) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  };
+  const topItems = navSections2.filter((item) => !isSection(item));
+  const erpSections = navSections2.filter((item) => isSection(item) && erpLabels.has(item.label));
+  const systemSections = navSections2.filter((item) => isSection(item) && systemLabels.has(item.label));
+  const getVisibleItems = (section) => {
+    if (section.perms && !hasAnyPerm(section.perms)) return [];
+    return section.items.filter((it) => !it.perms || hasAnyPerm(it.perms));
+  };
+  const searchResults = useMemo(() => {
+    if (search.length < 2) return [];
+    const q = search.toLowerCase();
+    return navSections2.flatMap((entry) => {
+      if (isSection(entry)) {
+        return getVisibleItems(entry).filter((it) => it.label.toLowerCase().includes(q));
+      }
+      return entry.label.toLowerCase().includes(q) ? [entry] : [];
+    });
+  }, [search, navSections2, hasAnyPerm]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setExpanded(/* @__PURE__ */ new Set());
+        setSearch("");
+      } else if (e.key === "/" && document.activeElement?.tagName !== "INPUT" && document.activeElement?.tagName !== "TEXTAREA") {
+        e.preventDefault();
+        searchRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const handleClick = (path) => {
+    onNavigate(path);
+    onPageOpenedReset();
+  };
+  const onPageOpenedReset = () => {
+    setSearch("");
+  };
+  const itemCls = "w-full flex items-center gap-2 rounded-lg px-3 py-2 text-sm";
+  const menuGlass = glassStyle();
+  const iconEl = (to) => {
+    const icon = navIcons2[to];
+    if (icon && isValidElement(icon)) {
+      return cloneElement(icon, {
+        className: "h-4 w-4 shrink-0 text-gray-500"
+      });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0" });
+  };
+  const secIcon = (label) => {
+    const icon = sectionIcons2[label];
+    if (icon && isValidElement(icon)) {
+      return cloneElement(icon, {
+        className: "h-4 w-4 shrink-0 text-gray-500"
+      });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0" });
+  };
+  const renderItem = (item) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => handleClick(item.to),
+        className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+        children: [
+          iconEl(item.to),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+        ]
+      }
+    ),
+    item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
+  ] }, item.to);
+  const renderSectionAccordion = (section, isErp) => {
+    const items = "perms" in section ? getVisibleItems(section) : section.items;
+    if (items.length === 0) return null;
+    const isOpen = expanded.has(section.label);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => toggleExpanded(section.label),
+          "aria-expanded": isOpen,
+          className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+          children: [
+            "icon" in section && section.icon ? section.icon : secIcon(section.label),
+            /* @__PURE__ */ jsx("span", { className: `truncate ${isErp ? "font-medium" : ""}`, children: section.label }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: `h-3.5 w-3.5 ml-auto text-gray-500 transition-transform ${isOpen ? "rotate-90" : ""}`,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx("div", { className: "pl-4 mt-0.5 mb-1 space-y-0.5", children: items.map((it) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => handleClick(it.to),
+          className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+          children: [
+            iconEl(it.to),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: it.label })
+          ]
+        },
+        it.to
+      )) })
+    ] }, section.label);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed top-0 left-0 bottom-0 z-[260] flex flex-col rounded-r-2xl overflow-hidden",
+      style: { width, ...menuGlass },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-white/15 shrink-0", children: [
+          productIcon && /* @__PURE__ */ jsx("img", { src: productIcon, alt: "", className: "h-5 w-5 shrink-0 opacity-80" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-800 truncate", children: productName ?? "Apps" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${GLASS_INPUT_BG} rounded-lg px-2.5 py-1.5`, children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchRef,
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              placeholder: "Search...",
+              className: "flex-1 bg-transparent text-xs outline-none placeholder-gray-400"
+            }
+          ),
+          search && /* @__PURE__ */ jsx("button", { onClick: () => setSearch(""), className: "text-gray-400 hover:text-gray-600 text-xs", children: "\xD7" })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-1 pb-1", children: search.length >= 2 ? (
+          // Search results take over the body.
+          /* @__PURE__ */ jsx("div", { children: searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-xs text-gray-400", children: "No matches" }) : searchResults.map((r) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleClick(r.to),
+              className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+              children: [
+                iconEl(r.to),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: r.label })
+              ]
+            },
+            r.to
+          )) })
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          topItems.map(renderItem),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleClick("/notifications"),
+              className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+              children: [
+                /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, 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" }) }),
+                /* @__PURE__ */ jsx("span", { children: "Notifications" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-white/15 my-1.5 mx-2" }),
+          erpSections.map((s) => renderSectionAccordion(s, true)),
+          systemSections.map((s) => renderSectionAccordion(s, false)),
+          virtualSections.map((v) => renderSectionAccordion(v, false))
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-white/15 p-1 shrink-0", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => handleClick("/profile"),
+            className: "rounded-lg px-2 py-1.5 flex items-center gap-2.5 hover:bg-blue-50 hover:text-blue-700 transition-colors cursor-pointer",
+            children: [
+              profile?.avatar_url ? /* @__PURE__ */ jsx("img", { src: profile.avatar_url, alt: "", className: "h-8 w-8 rounded-full object-cover border border-white/20 shrink-0" }) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-sm font-bold text-blue-700 shrink-0", children: (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase() }),
+              /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 text-sm font-medium text-gray-900 truncate", children: profile?.first_name ? `${profile.first_name} ${profile.last_name || ""}`.trim() : user?.email }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onLogout();
+                  },
+                  title: "Sign Out",
+                  className: "shrink-0 p-1.5 rounded-md text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors",
+                  children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" }) })
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
 
 // src/shell/mobileShellStore.ts
 var _mode = "home";
@@ -3968,7 +4193,11 @@ function Layout({
   useTheme();
   const { desktopBg} = useFavorites(wallpapers);
   const { prefs, save: savePrefs } = useShellPrefs();
-  const taskbarPosition = prefs.taskbar_position || "bottom";
+  const layoutMode = prefs.layout_mode === "sidebar" ? "sidebar" : "classic";
+  const sidebarMode = layoutMode === "sidebar";
+  const sidebarWidth = sidebarMode ? 280 : 0;
+  const taskbarPositionRaw = prefs.taskbar_position || "bottom";
+  const taskbarPosition = sidebarMode ? "bottom" : taskbarPositionRaw;
   const taskbarSize = prefs.taskbar_size || "medium";
   const desktopDblClick = prefs.desktop_dblclick || "deactivate";
   const isVerticalTaskbar = taskbarPosition === "left" || taskbarPosition === "right";
@@ -3992,6 +4221,9 @@ function Layout({
     root.style.setProperty("--taskbar-height", String(taskbarH));
     root.style.setProperty("--taskbar-width", String(taskbarW));
     root.style.setProperty("--taskbar-position", taskbarPosition);
+    root.style.setProperty("--sidebar-width", String(sidebarWidth));
+    root.style.setProperty("--layout-mode", layoutMode);
+    window.dispatchEvent(new CustomEvent("react-os-shell:layout-mode-changed"));
     root.style.setProperty("--default-window-size", prefs.default_window_size || "large");
     root.style.setProperty("--window-position", prefs.window_position || "cascade");
     root.style.setProperty("--menu-density", prefs.menu_density || "normal");
@@ -4007,7 +4239,7 @@ function Layout({
     root.style.setProperty("--menu-padding-y", sv.py);
     root.style.setProperty("--window-tab-width", sv.tabW);
     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]);
+  }, [inactiveHeaderOpacity, inactiveContentOpacity, activeHeaderOpacity, activeContentOpacity, taskbarH, taskbarPosition, prefs.default_window_size, prefs.window_position, prefs.menu_density, prefs.start_menu_size, sidebarWidth, layoutMode]);
   useEffect(() => {
     document.documentElement.style.setProperty("--mobile-bottom-nav", isMobile ? "100px" : "0px");
   }, [isMobile]);
@@ -4114,7 +4346,7 @@ function Layout({
       sessionStorage.removeItem("erp_startup_shown");
       logout();
     } }),
-    /* @__PURE__ */ jsx(
+    !sidebarMode && /* @__PURE__ */ jsx(
       StartMenu,
       {
         open: menuOpen,
@@ -4141,6 +4373,23 @@ function Layout({
         categories
       }
     ),
+    sidebarMode && /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        width: sidebarWidth,
+        openPage: (path) => openPage(path),
+        profile,
+        user,
+        onLogout: () => setShowLogout(true),
+        onNavigate: (path) => openPage(path),
+        navSections: navSections2,
+        navIcons: navIcons2,
+        sectionIcons: sectionIcons2,
+        categories,
+        productName,
+        productIcon
+      }
+    ),
     (() => {
       const wallpaperStyle = {
         backgroundColor: desktopBg?.startsWith("#") ? desktopBg : desktopBg === "none" ? (() => {
@@ -4191,14 +4440,17 @@ function Layout({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: `flex backdrop-blur-sm border-gray-200 z-[250] fixed ${isVerticalTaskbar ? `flex-col items-center ${taskbarWClass} py-3 gap-2 top-0 bottom-0 ${taskbarPosition === "left" ? "left-0 border-r" : "right-0 border-l"}` : `items-center ${taskbarHClass} px-3 gap-2 left-0 right-0 ${taskbarPosition === "top" ? "top-0 border-b" : "bottom-0 border-t"}`}`,
-            style: { backgroundColor: `rgb(var(--taskbar-bg-rgb, 243 244 246) / ${taskbarOpacity})` },
+            className: `flex backdrop-blur-sm border-gray-200 z-[250] fixed ${isVerticalTaskbar ? `flex-col items-center ${taskbarWClass} py-3 gap-2 top-0 bottom-0 ${taskbarPosition === "left" ? "left-0 border-r" : "right-0 border-l"}` : `items-center ${taskbarHClass} px-3 gap-2 right-0 ${taskbarPosition === "top" ? "top-0 border-b" : "bottom-0 border-t"}`}`,
+            style: {
+              backgroundColor: `rgb(var(--taskbar-bg-rgb, 243 244 246) / ${taskbarOpacity})`,
+              ...isVerticalTaskbar ? {} : { left: sidebarWidth }
+            },
             onContextMenu: (e) => {
               e.preventDefault();
               setTaskbarMenu({ x: e.clientX, y: e.clientY });
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+              !sidebarMode && /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
                 openWindows.length === 0 && !menuOpen && !balloonDismissed && /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -4255,7 +4507,7 @@ function Layout({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { className: isVerticalTaskbar ? "h-px w-6 bg-gray-300 my-1" : "w-px h-6 bg-gray-300 mx-1" }),
+              !sidebarMode && /* @__PURE__ */ jsx("div", { className: isVerticalTaskbar ? "h-px w-6 bg-gray-300 my-1" : "w-px h-6 bg-gray-300 mx-1" }),
               /* @__PURE__ */ jsx("div", { id: "taskbar-windows", className: `flex-1 flex ${isVerticalTaskbar ? "flex-col items-center gap-1 min-h-0 overflow-y-auto w-full" : "items-center gap-1.5 min-w-0 overflow-x-auto"}` }),
               /* @__PURE__ */ jsx("div", { className: isVerticalTaskbar ? "h-px w-6 bg-gray-300 my-1" : "w-px h-6 bg-gray-300 mx-1" }),
               isVerticalTaskbar ? (
@@ -4624,6 +4876,25 @@ function Customization() {
         ] }, item.key);
       }) })
     ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Layout Mode" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: "Sidebar mode is designed for small screens \u2014 windows always run maximized and the start menu lives in a persistent left sidebar (sections expand inline instead of opening flyouts)." }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+        { key: "classic", label: "Classic" },
+        { key: "sidebar", label: "Sidebar" }
+      ].map((m) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            savePref("layout_mode", m.key);
+            if (m.key === "sidebar") savePref("default_window_size", "maximized");
+          },
+          className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.layout_mode || "classic") === m.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+          children: m.label
+        },
+        m.key
+      )) })
+    ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Taskbar" }),
       /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -4632,7 +4903,9 @@ function Customization() {
           "button",
           {
             onClick: () => savePref("taskbar_position", pos),
-            className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.taskbar_position || "bottom") === pos ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+            disabled: prefs.layout_mode === "sidebar",
+            title: prefs.layout_mode === "sidebar" ? "Sidebar mode forces a horizontal taskbar." : void 0,
+            className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${(prefs.taskbar_position || "bottom") === pos ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
             children: pos.charAt(0).toUpperCase() + pos.slice(1)
           },
           pos