@fde-desktop/fde-core 0.3.8 → 0.4.2

package/dist/chunk-AYFNYHMP.js

@@ -0,0 +1,541 @@
+import { useMenuEditStore } from './chunk-D5MVFFID.js';
+import { VscIcon_default } from './chunk-GRYCUBJZ.js';
+import { AppIcon_default } from './chunk-GCYD6T52.js';
+import { useCloseInterceptor } from './chunk-ODXL6BR3.js';
+import { useDesktopStore, APPS } from './chunk-NWMSWRUD.js';
+import { isDocker } from './chunk-FRHBM2U7.js';
+import { Box, Text, Group, ActionIcon, Card, TextInput, UnstyledButton } from './chunk-BQL3YXMV.js';
+import { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DndContext, pointerWithin, useDraggable, useDroppable, DragOverlay, defaultDropAnimation } from '@dnd-kit/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FOLDER_ID_TO_TRANSLATION_KEY = {
+  "launcher-folder-social-links": "socialLinks",
+  "launcher-folder-office": "office",
+  "launcher-folder-programming": "programming",
+  "launcher-folder-games": "games",
+  "launcher-folder-custom-apps": "customApps"
+};
+function useFolderName(folder) {
+  const { t } = useTranslation("apps");
+  if (!folder.isPredefined) {
+    return folder.name;
+  }
+  const translationKey = FOLDER_ID_TO_TRANSLATION_KEY[folder.id];
+  if (!translationKey) {
+    return folder.name;
+  }
+  return t(`folders.${translationKey}`, folder.name);
+}
+var DragDropStateContext = createContext(null);
+var DragDropProvider = ({ children, onDrop, onCancel }) => {
+  const [activeItem, setActiveItem] = useState(null);
+  const [overTarget, setOverTarget] = useState(null);
+  const handleDragStart = useCallback((event) => {
+    const item = event.active.data.current;
+    if (item) {
+      setActiveItem(item);
+    }
+  }, []);
+  const handleDragOver = useCallback((event) => {
+    if (event.over) {
+      const target = event.over.data.current;
+      if (target) {
+        setOverTarget(target);
+      }
+    } else {
+      setOverTarget(null);
+    }
+  }, []);
+  const handleDragEnd = useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (over && active.data.current) {
+        const item = active.data.current;
+        const target = over.data.current;
+        if (target.accepts.includes(item.type)) {
+          onDrop(item, target);
+        }
+      } else if (!over && onCancel) {
+        onCancel();
+      }
+      setActiveItem(null);
+      setOverTarget(null);
+    },
+    [onDrop, onCancel]
+  );
+  const value = useMemo(() => ({ activeItem, overTarget }), [activeItem, overTarget]);
+  return /* @__PURE__ */ jsx(DragDropStateContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      collisionDetection: pointerWithin,
+      children
+    }
+  ) });
+};
+function useDraggableItem(options) {
+  const { item, disabled = false } = options;
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: `${item.sourceId}-${item.id}`,
+    data: item,
+    disabled
+  });
+  const style = {
+    opacity: isDragging ? 0 : 1,
+    cursor: disabled ? "default" : "grab"
+  };
+  return {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    transform: transform ? { x: transform.x, y: transform.y } : null,
+    style
+  };
+}
+function useDroppableArea(options) {
+  const { target, disabled = false } = options;
+  const context = useContext(DragDropStateContext);
+  const { setNodeRef, isOver } = useDroppable({
+    id: target.id,
+    data: target,
+    disabled
+  });
+  return {
+    setNodeRef,
+    isOver,
+    active: context?.activeItem ?? null
+  };
+}
+function useDragDropState() {
+  const context = useContext(DragDropStateContext);
+  if (!context) {
+    throw new Error("useDragDropState must be used within a DragDropProvider");
+  }
+  return context;
+}
+
+// src/hooks/useDragDrop/modifiers/snapCenterToCursor.ts
+var snapCenterToCursor = ({ activatorEvent, transform, draggingNodeRect }) => {
+  if (!activatorEvent || !draggingNodeRect) {
+    return transform;
+  }
+  const event = activatorEvent;
+  let cursorX = 0;
+  let cursorY = 0;
+  if ("touches" in event && event.touches.length > 0) {
+    cursorX = event.touches[0].clientX;
+    cursorY = event.touches[0].clientY;
+  } else if ("clientX" in event) {
+    cursorX = event.clientX;
+    cursorY = event.clientY;
+  }
+  const offsetX = cursorX - draggingNodeRect.left - draggingNodeRect.width / 2;
+  const offsetY = cursorY - draggingNodeRect.top - draggingNodeRect.height / 2;
+  return {
+    ...transform,
+    x: transform.x + offsetX,
+    y: transform.y + offsetY
+  };
+};
+
+// src/hooks/useDragDrop/DragOverlay.module.css
+var DragOverlay_default = {};
+var DragOverlayComponent = () => {
+  const { activeItem } = useDragDropState();
+  if (!activeItem) return null;
+  return /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: defaultDropAnimation, modifiers: [snapCenterToCursor], children: /* @__PURE__ */ jsxs(Box, { className: DragOverlay_default.dragOverlay, children: [
+    /* @__PURE__ */ jsx(
+      AppIcon_default,
+      {
+        fcIcon: activeItem.metadata?.fcIcon,
+        iconUrl: activeItem.metadata?.iconUrl,
+        fallback: activeItem.metadata?.icon,
+        size: 20
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "xs", children: activeItem.name })
+  ] }) });
+};
+
+// src/hooks/useDragDrop/constants.ts
+var ACCEPTED_TYPES = {
+  "launcher-folder": ["app"],
+  "available-apps": ["app"]
+};
+
+// src/components/Apps/MenuEditApp/MenuEditApp.module.css
+var MenuEditApp_default = {};
+var FolderItem = ({
+  folder,
+  isEditing,
+  editingName,
+  onEdit,
+  onDelete,
+  onRename,
+  onSetEditingName,
+  onRemoveApp
+}) => {
+  const { t } = useTranslation("menuedit");
+  const folderName = useFolderName(folder);
+  const { activeItem } = useDragDropState();
+  const { setNodeRef, isOver } = useDroppableArea({
+    target: {
+      type: "launcher-folder",
+      id: folder.id,
+      name: folderName,
+      accepts: ACCEPTED_TYPES["launcher-folder"]
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ref: setNodeRef,
+      className: MenuEditApp_default.folderCard,
+      shadow: "xs",
+      padding: "xs",
+      "data-is-over": isOver && activeItem?.type === "app" ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: 4, children: [
+          isEditing ? /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: editingName,
+              onChange: (e) => onSetEditingName(e.target.value),
+              onBlur: () => onRename(folder.id),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  onRename(folder.id);
+                }
+              },
+              autoFocus: true,
+              size: "xs",
+              style: { flex: 1 }
+            }
+          ) : /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(AppIcon_default, { fcIcon: folder.fcIcon, size: 16 }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: folderName }),
+            folder.isPredefined && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+              "(",
+              t("predefined"),
+              ")"
+            ] })
+          ] }),
+          !folder.isPredefined && !isEditing && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "xs",
+                onClick: () => onEdit(folder.id),
+                "aria-label": t("rename"),
+                children: /* @__PURE__ */ jsx(VscIcon_default, { name: "VscEdit", size: 14 })
+              }
+            ),
+            onDelete && /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "xs",
+                color: "red",
+                onClick: () => onDelete(folder.id),
+                "aria-label": t("delete"),
+                children: /* @__PURE__ */ jsx(VscIcon_default, { name: "VscTrash", size: 14 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: MenuEditApp_default.appList, children: folder.appIds.map((appId) => {
+          const app = APPS.find((a) => a.id === appId);
+          if (!app) return null;
+          return /* @__PURE__ */ jsx(
+            DraggableApp,
+            {
+              app,
+              sourceId: folder.id,
+              onContextMenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemoveApp(appId, folder.id);
+              }
+            },
+            appId
+          );
+        }) })
+      ]
+    }
+  );
+};
+var DraggableApp = ({ app, sourceId, onContextMenu }) => {
+  const { attributes, listeners, setNodeRef, isDragging, style } = useDraggableItem({
+    item: {
+      type: "app",
+      id: app.id,
+      name: app.name,
+      sourceId,
+      sourceType: "launcher-folder",
+      metadata: {
+        fcIcon: app.fcIcon,
+        iconUrl: app.iconUrl,
+        icon: app.icon
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      ref: setNodeRef,
+      className: MenuEditApp_default.appItem,
+      style: { ...style, opacity: isDragging ? 0.5 : 1 },
+      onContextMenu,
+      ...attributes,
+      ...listeners,
+      children: [
+        /* @__PURE__ */ jsx(AppIcon_default, { fcIcon: app.fcIcon, iconUrl: app.iconUrl, fallback: app.icon, size: 16 }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", children: app.name })
+      ]
+    }
+  );
+};
+var AvailableApps = ({ customFolderId }) => {
+  const { t } = useTranslation("menuedit");
+  const { activeItem } = useDragDropState();
+  const { setNodeRef, isOver } = useDroppableArea({
+    target: {
+      type: "available-apps",
+      id: "available-apps",
+      name: "Available Apps",
+      accepts: ACCEPTED_TYPES["available-apps"]
+    }
+  });
+  const appsInFolders = new Set(useDesktopStore.getState().launcherFolders.flatMap((f) => f.appIds));
+  const availableApps = APPS.filter((app) => app.id !== "settings" && app.id !== "menuedit");
+  const addAppToFolder = useDesktopStore((state) => state.addAppToFolder);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: setNodeRef,
+      className: MenuEditApp_default.availableApps,
+      "data-is-over": isOver && activeItem?.type === "app" ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mb: 8, children: t("availableApps") }),
+        customFolderId === null && /* @__PURE__ */ jsx(Text, { size: "xs", c: "orange", mb: 4, children: t("canCreateNewFolder") }),
+        /* @__PURE__ */ jsx(Box, { className: MenuEditApp_default.appGrid, children: availableApps.filter((app) => !appsInFolders.has(app.id)).map((app) => /* @__PURE__ */ jsx(
+          DraggableAppFromAvailable,
+          {
+            app,
+            targetFolderId: customFolderId,
+            onAdd: addAppToFolder
+          },
+          app.id
+        )) })
+      ]
+    }
+  );
+};
+var DraggableAppFromAvailable = ({ app, targetFolderId, onAdd }) => {
+  const { attributes, listeners, setNodeRef, isDragging, style } = useDraggableItem({
+    item: {
+      type: "app",
+      id: app.id,
+      name: app.name,
+      sourceId: "available-apps",
+      sourceType: "available-apps",
+      metadata: {
+        fcIcon: app.fcIcon,
+        iconUrl: app.iconUrl,
+        icon: app.icon
+      }
+    }
+  });
+  const handleClick = () => {
+    if (targetFolderId) {
+      onAdd(app.id, targetFolderId);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      ref: setNodeRef,
+      className: MenuEditApp_default.appItem,
+      style: { ...style, opacity: isDragging ? 0 : 1 },
+      onClick: handleClick,
+      disabled: !targetFolderId,
+      ...attributes,
+      ...listeners,
+      children: [
+        /* @__PURE__ */ jsx(AppIcon_default, { fcIcon: app.fcIcon, iconUrl: app.iconUrl, fallback: app.icon, size: 16 }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", children: app.name })
+      ]
+    }
+  );
+};
+var MenuEditAppContent = ({ window: win, notifyReady }) => {
+  const { t } = useTranslation("menuedit");
+  const windowId = win?.id;
+  const launcherFolders = useDesktopStore((state) => state.launcherFolders);
+  const setLauncherFolders = useDesktopStore((state) => state.setLauncherFolders);
+  const createLauncherFolder = useDesktopStore((state) => state.createLauncherFolder);
+  const updateLauncherFolder = useDesktopStore((state) => state.updateLauncherFolder);
+  const deleteLauncherFolder = useDesktopStore((state) => state.deleteLauncherFolder);
+  const removeAppFromFolder = useDesktopStore((state) => state.removeAppFromFolder);
+  const [editingFolderId, setEditingFolderId] = useState(null);
+  const [editingName, setEditingName] = useState("");
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (!windowId) return;
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    useMenuEditStore.getState().reset(windowId);
+  }, [windowId]);
+  useEffect(() => {
+    if (!windowId) return;
+    const store = useMenuEditStore.getState();
+    if (store.getSnapshot(windowId) === null) {
+      store.takeSnapshot(windowId, launcherFolders);
+    } else {
+      const snapshot = store.getSnapshot(windowId);
+      if (snapshot) {
+        const isDirty = JSON.stringify(launcherFolders) !== JSON.stringify(snapshot);
+        store.setIsDirty(windowId, isDirty);
+      }
+    }
+  }, [windowId, launcherFolders]);
+  const handleSave = useCallback(() => {
+    if (!windowId) return;
+    useMenuEditStore.getState().takeSnapshot(windowId, launcherFolders);
+  }, [windowId, launcherFolders]);
+  const revertToSnapshot = useCallback(() => {
+    if (!windowId) return;
+    const snapshot = useMenuEditStore.getState().getSnapshot(windowId);
+    if (snapshot) {
+      setLauncherFolders(snapshot);
+    }
+  }, [windowId, setLauncherFolders]);
+  const isDirtyGetter = useCallback(() => {
+    if (!windowId) return false;
+    const snapshot = useMenuEditStore.getState().getSnapshot(windowId);
+    return JSON.stringify(launcherFolders) !== JSON.stringify(snapshot ?? []);
+  }, [windowId, launcherFolders]);
+  useCloseInterceptor({
+    isDirtyGetter,
+    windowId: win?.id,
+    onDiscard: revertToSnapshot,
+    onSave: handleSave
+  });
+  const handleCreateFolder = useCallback(() => {
+    const folder = createLauncherFolder({
+      name: t("newFolder"),
+      fcIcon: "VscFolder",
+      order: launcherFolders.length
+    });
+    setEditingFolderId(folder.id);
+    setEditingName(folder.name);
+  }, [createLauncherFolder, launcherFolders.length, t]);
+  useEffect(() => {
+    notifyReady?.({
+      createFolder: handleCreateFolder,
+      save: handleSave,
+      discard: revertToSnapshot
+    });
+  }, [handleCreateFolder, handleSave, revertToSnapshot, notifyReady]);
+  const handleEditFolder = useCallback(
+    (folderId) => {
+      const folder = launcherFolders.find((f) => f.id === folderId);
+      if (folder) {
+        setEditingFolderId(folder.id);
+        setEditingName(folder.name);
+      }
+    },
+    [launcherFolders]
+  );
+  const handleRename = useCallback(
+    (folderId) => {
+      if (editingName.trim()) {
+        updateLauncherFolder(folderId, { name: editingName.trim() });
+      }
+      setEditingFolderId(null);
+    },
+    [editingName, updateLauncherFolder]
+  );
+  const dockerMode = isDocker();
+  const predefinedFolders = launcherFolders.filter((f) => f.isPredefined);
+  const customFolders = launcherFolders.filter((f) => !f.isPredefined);
+  const firstCustomFolderId = customFolders.length > 0 ? customFolders[0].id : null;
+  return /* @__PURE__ */ jsx(Box, { className: MenuEditApp_default.container, "data-windowid": win?.id, "data-menuedit-container": true, children: /* @__PURE__ */ jsxs(Box, { className: MenuEditApp_default.content, children: [
+    predefinedFolders.length > 0 && /* @__PURE__ */ jsxs(Box, { mb: "md", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mb: 8, children: t("predefinedFolders") }),
+      /* @__PURE__ */ jsx(Box, { className: MenuEditApp_default.folderList, children: predefinedFolders.map((folder) => /* @__PURE__ */ jsx(
+        FolderItem,
+        {
+          folder,
+          isEditing: false,
+          editingName: "",
+          onEdit: () => {
+          },
+          onRemoveApp: removeAppFromFolder,
+          onRename: () => {
+          },
+          onSetEditingName: () => {
+          }
+        },
+        folder.id
+      )) })
+    ] }),
+    dockerMode && customFolders.length > 0 && /* @__PURE__ */ jsxs(Box, { mb: "md", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mb: 8, children: t("customFolders") }),
+      /* @__PURE__ */ jsx(Box, { className: MenuEditApp_default.folderList, children: customFolders.map((folder) => /* @__PURE__ */ jsx(
+        FolderItem,
+        {
+          folder,
+          isEditing: editingFolderId === folder.id,
+          editingName,
+          onEdit: handleEditFolder,
+          onDelete: deleteLauncherFolder,
+          onRename: handleRename,
+          onSetEditingName: setEditingName,
+          onRemoveApp: removeAppFromFolder
+        },
+        folder.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "md", children: [
+      /* @__PURE__ */ jsx(AvailableApps, { customFolderId: firstCustomFolderId }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: "md", children: t("instructions") }),
+      dockerMode && /* @__PURE__ */ jsx(ActionIcon, { variant: "light", onClick: handleCreateFolder, "aria-label": t("addFolder"), children: /* @__PURE__ */ jsx(VscIcon_default, { name: "VscAdd", size: 16 }) })
+    ] })
+  ] }) });
+};
+var MenuEditApp = (props) => {
+  const addAppToFolder = useDesktopStore((state) => state.addAppToFolder);
+  const removeAppFromFolder = useDesktopStore((state) => state.removeAppFromFolder);
+  const handleDrop = useCallback(
+    (item, target) => {
+      if (item.type !== "app") return;
+      if (target.type === "available-apps") {
+        if (item.sourceType === "launcher-folder") {
+          removeAppFromFolder(item.id, item.sourceId);
+        }
+        return;
+      }
+      if (target.type !== "launcher-folder") return;
+      if (item.sourceId !== target.id && item.sourceType === "launcher-folder") {
+        removeAppFromFolder(item.id, item.sourceId);
+      }
+      addAppToFolder(item.id, target.id);
+    },
+    [addAppToFolder, removeAppFromFolder]
+  );
+  return /* @__PURE__ */ jsxs(DragDropProvider, { onDrop: handleDrop, children: [
+    /* @__PURE__ */ jsx(MenuEditAppContent, { ...props }),
+    /* @__PURE__ */ jsx(DragOverlayComponent, {})
+  ] });
+};
+var MenuEditApp_default2 = MenuEditApp;
+
+export { DragDropProvider, MenuEditApp_default2 as MenuEditApp_default, useDragDropState, useDraggableItem, useDroppableArea, useFolderName };