react-os-shell 0.1.12 → 0.1.14

package/dist/index.js

@@ -1,10 +1,10 @@
 import { useEmailUnreadCount } from './chunk-PDFQNHW7.js';
-import { useGoogleAuth } from './chunk-5O2KEISQ.js';
 import { formatDate } from './chunk-NSU7OHPC.js';
 export { formatDate } from './chunk-NSU7OHPC.js';
+import { useGoogleAuth } from './chunk-5O2KEISQ.js';
+import { playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-import { playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
 import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive } from './chunk-24K73LGZ.js';
@@ -643,7 +643,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.1.12" ;
+var VERSION = "0.1.14" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -748,6 +748,183 @@ function DesktopHostProvider({ value, children }) {
 function useDesktopHost() {
   return useContext(DesktopHostContext);
 }
+function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder }) {
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [rubber, setRubber] = useState(null);
+  const didDragRubber = useRef(false);
+  const bodyRef = useRef(null);
+  const [dragIdx, setDragIdx] = useState(null);
+  const [dropIdx, setDropIdx] = useState(null);
+  const toggleSelect = (i, e) => {
+    e.stopPropagation();
+    if (e.shiftKey || e.metaKey || e.ctrlKey) {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        next.has(i) ? next.delete(i) : next.add(i);
+        return next;
+      });
+    } else {
+      setSelected(/* @__PURE__ */ new Set([i]));
+    }
+  };
+  const startRubber = (e) => {
+    if (e.button !== 0 || e.target !== bodyRef.current) return;
+    const r = bodyRef.current.getBoundingClientRect();
+    const x = e.clientX - r.left;
+    const y = e.clientY - r.top;
+    setRubber({ x1: x, y1: y, x2: x, y2: y });
+    didDragRubber.current = false;
+    setSelected(/* @__PURE__ */ new Set());
+  };
+  useEffect(() => {
+    if (!rubber) return;
+    const move = (e) => {
+      const r = bodyRef.current?.getBoundingClientRect();
+      if (!r) return;
+      const x = e.clientX - r.left;
+      const y = e.clientY - r.top;
+      const dx = x - rubber.x1, dy = y - rubber.y1;
+      if (dx * dx + dy * dy > 16) didDragRubber.current = true;
+      setRubber((prev) => prev ? { ...prev, x2: x, y2: y } : null);
+    };
+    const up = () => {
+      const next = /* @__PURE__ */ new Set();
+      const r = bodyRef.current;
+      if (r && rubber) {
+        const minX = Math.min(rubber.x1, rubber.x2);
+        const maxX = Math.max(rubber.x1, rubber.x2);
+        const minY = Math.min(rubber.y1, rubber.y2);
+        const maxY = Math.max(rubber.y1, rubber.y2);
+        const tiles = r.querySelectorAll("[data-folder-item]");
+        const containerRect = r.getBoundingClientRect();
+        tiles.forEach((t) => {
+          const tr = t.getBoundingClientRect();
+          const tx = tr.left - containerRect.left;
+          const ty = tr.top - containerRect.top;
+          if (tx + tr.width > minX && tx < maxX && ty + tr.height > minY && ty < maxY) {
+            const i = parseInt(t.getAttribute("data-folder-item") || "-1", 10);
+            if (i >= 0) next.add(i);
+          }
+        });
+      }
+      if (didDragRubber.current) setSelected(next);
+      setRubber(null);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [rubber]);
+  const onItemDragStart = (i) => (e) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(i));
+    setDragIdx(i);
+  };
+  const onItemDragOver = (i) => (e) => {
+    e.preventDefault();
+    if (dragIdx !== null && dragIdx !== i) setDropIdx(i);
+  };
+  const onItemDrop = (i) => (e) => {
+    e.preventDefault();
+    if (dragIdx === null || dragIdx === i) {
+      setDragIdx(null);
+      setDropIdx(null);
+      return;
+    }
+    const next = [...items];
+    const [moved] = next.splice(dragIdx, 1);
+    next.splice(i, 0, moved);
+    onReorder(next);
+    setDragIdx(null);
+    setDropIdx(null);
+  };
+  const moveSelectedOut = () => {
+    if (selected.size === 0) return;
+    onMoveOut(Array.from(selected).map((i) => items[i]).filter(Boolean));
+    setSelected(/* @__PURE__ */ new Set());
+  };
+  const folderIcon = /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-amber-500", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M2 6a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" }) });
+  return /* @__PURE__ */ jsx(Modal, { open: true, onClose, title: folder.name, icon: folderIcon, size: "lg", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: bodyRef,
+      onPointerDown: startRubber,
+      onClick: () => {
+        if (didDragRubber.current) {
+          didDragRubber.current = false;
+          return;
+        }
+        setSelected(/* @__PURE__ */ new Set());
+      },
+      className: "relative h-full min-h-[300px] p-3 overflow-auto",
+      style: {
+        background: "linear-gradient(135deg, rgba(254, 243, 199, 0.55) 0%, rgba(253, 230, 138, 0.4) 50%, rgba(252, 211, 77, 0.3) 100%)"
+      },
+      children: [
+        selected.size > 0 && /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 mb-2 flex items-center gap-2 px-2 py-1 rounded-md bg-white/80 backdrop-blur-sm shadow border border-gray-200 text-xs text-gray-700 w-fit", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            selected.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: moveSelectedOut, className: "px-2 py-0.5 rounded text-blue-600 hover:bg-blue-50", children: "Move to desktop" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setSelected(/* @__PURE__ */ new Set()), className: "px-2 py-0.5 rounded text-gray-500 hover:bg-gray-100", children: "Clear" })
+        ] }),
+        items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 text-center py-8 italic", children: "Folder is empty. Drag documents here." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: items.map((item, i) => {
+          const isSelected = selected.has(i);
+          const isDropTarget = dropIdx === i && dragIdx !== i;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-folder-item": i,
+              draggable: true,
+              onDragStart: onItemDragStart(i),
+              onDragOver: onItemDragOver(i),
+              onDrop: onItemDrop(i),
+              onDragEnd: () => {
+                setDragIdx(null);
+                setDropIdx(null);
+              },
+              onClick: (e) => toggleSelect(i, e),
+              onDoubleClick: () => onOpen(item),
+              className: `group relative flex flex-col items-center gap-1 w-20 p-2 rounded-lg cursor-default transition-colors ${isSelected ? "bg-blue-200/60 ring-2 ring-blue-400" : "hover:bg-white/60"} ${isDropTarget ? "ring-2 ring-blue-500 ring-dashed" : ""} ${dragIdx === i ? "opacity-40" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onMoveOut([item]);
+                    },
+                    title: "Move to desktop",
+                    className: "absolute -top-1 -right-1 h-5 w-5 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-100 hover:text-red-600 shadow-sm z-10",
+                    children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: `w-12 h-12 rounded-lg bg-white shadow flex items-center justify-center text-xs font-bold ${ENTITY_ICON_COLORS[item.entityType] || "text-gray-600"}`, children: ENTITY_ICONS[item.entityType] || item.entityType.slice(0, 3).toUpperCase() }),
+                /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium text-center leading-tight truncate w-full ${isSelected ? "text-blue-900" : "text-gray-700"}`, children: item.label })
+              ]
+            },
+            `${item.entityType}-${item.entityId}-${i}`
+          );
+        }) }),
+        rubber && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute border border-blue-500 bg-blue-500/10 pointer-events-none",
+            style: {
+              left: Math.min(rubber.x1, rubber.x2),
+              top: Math.min(rubber.y1, rubber.y2),
+              width: Math.abs(rubber.x2 - rubber.x1),
+              height: Math.abs(rubber.y2 - rubber.y1)
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
 function Desktop({ profile }) {
   useQueryClient();
   const { openEntity, openPage } = useWindowManager();
@@ -1016,8 +1193,8 @@ function Desktop({ profile }) {
       window.removeEventListener("pointerup", up);
     };
   }, [dragging, snapEnabled, favDocs, folders, desktopItems]);
-  const favDocsKey = JSON.stringify(favDocs.map((d) => d.entityId));
-  const foldersKey = JSON.stringify(folders.map((f) => f.id));
+  const favDocsKey = JSON.stringify(favDocs.map((d) => `${d.entityId}:${d.x ?? ""}:${d.y ?? ""}:${d.folderId ?? ""}`));
+  const foldersKey = JSON.stringify(folders.map((f) => `${f.id}:${f.x ?? ""}:${f.y ?? ""}`));
   useEffect(() => {
     setLocalPositions({});
   }, [favDocsKey, foldersKey]);
@@ -1599,35 +1776,29 @@ function Desktop({ profile }) {
         openFolder && (() => {
           const folder = folders.find((f) => f.id === openFolder);
           if (!folder) return null;
-          const items = folderItems(openFolder);
-          return /* @__PURE__ */ jsx(Modal, { open: true, onClose: () => setOpenFolder(null), title: folder.name, size: "lg", children: items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 text-center py-8", children: "Folder is empty. Drag documents here." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 p-2", children: items.map((item, i) => /* @__PURE__ */ jsxs(
-            "div",
+          return /* @__PURE__ */ jsx(
+            FolderWindow,
             {
-              className: "group relative flex flex-col items-center gap-1 w-20 p-2 rounded-lg hover:bg-gray-100 cursor-default",
-              onDoubleClick: () => openEntity(item.entityType, item.entityId, null, item.label),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      const updated = favDocs.map((d) => d.entityType === item.entityType && d.entityId === item.entityId && d.folderId === openFolder ? { ...d, folderId: void 0 } : d);
-                      saveDocs(updated);
-                    },
-                    title: "Move to Desktop",
-                    className: "absolute -top-1 -right-1 h-5 w-5 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-100 hover:text-red-600 shadow-sm z-10",
-                    children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: `w-12 h-12 rounded-lg bg-gray-50 shadow flex items-center justify-center text-xs font-bold ${ENTITY_ICON_COLORS[item.entityType] || "text-gray-600"}`, children: ENTITY_ICONS[item.entityType] || item.entityType.slice(0, 3).toUpperCase() }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-700 font-medium text-center leading-tight truncate w-full", children: item.label })
-              ]
-            },
-            i
-          )) }) });
+              folder,
+              items: folderItems(openFolder),
+              onClose: () => setOpenFolder(null),
+              onOpen: (item) => openEntity(item.entityType, item.entityId, null, item.label),
+              onMoveOut: (toMove) => {
+                const ids = new Set(toMove.map((t) => `${t.entityType}|${t.entityId}`));
+                const updated = favDocs.map(
+                  (d) => d.folderId === openFolder && ids.has(`${d.entityType}|${d.entityId}`) ? { ...d, folderId: void 0 } : d
+                );
+                saveDocs(updated);
+              },
+              onReorder: (nextItems) => {
+                const others = favDocs.filter((d) => d.folderId !== openFolder);
+                saveDocs([...others, ...nextItems]);
+              }
+            }
+          );
         })(),
         aboutOpen && (() => {
-          const version = APP_VERSION;
+          const version = host.productVersion ?? APP_VERSION;
           return /* @__PURE__ */ jsx(Modal, { open: true, onClose: () => setAboutOpen(false), title: `About ${host.productName ?? "this app"}`, size: "sm", bodyScroll: false, compact: true, dimensions: [340, 420], children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 pt-4 pb-3 w-full", children: [
               /* @__PURE__ */ jsx("img", { src: host.productIcon ?? "/favicon.svg", alt: "", className: "h-16 w-16" }),
@@ -1676,7 +1847,7 @@ function Desktop({ profile }) {
             ] })
           ] }) });
         })(),
-        (prefs.show_desktop_version ?? true) && /* @__PURE__ */ jsx(
+        (prefs.show_desktop_version ?? true) && (host.productVersion ?? APP_VERSION) && /* @__PURE__ */ jsx(
           "button",
           {
             onClick: (e) => {
@@ -1684,7 +1855,7 @@ function Desktop({ profile }) {
               setWhatsNewOpen(true);
             },
             className: `absolute bottom-3 text-[10px] text-white/50 font-mono select-none drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)] hover:text-white/80 transition-colors cursor-pointer ${prefs.taskbar_position === "top" ? "right-3" : prefs.taskbar_position === "left" ? "right-3" : prefs.taskbar_position === "right" ? "left-3" : "right-3 !bottom-16"}`,
-            children: APP_VERSION
+            children: host.productVersion ?? APP_VERSION
           }
         ),
         whatsNewOpen && /* @__PURE__ */ jsx(Modal, { open: true, onClose: () => setWhatsNewOpen(false), title: "What's New", size: "md", bodyScroll: false, children: /* @__PURE__ */ jsx("div", { className: "space-y-5 max-h-[60vh] overflow-y-auto px-1", children: changelog_default.map((entry, i) => /* @__PURE__ */ jsxs("div", { children: [