@edenapp/sdk 0.1.0

package/apps/com/eden/files/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "com.eden.files",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@edenapp/types": "workspace:*",
+    "solid-js": "^1.9.10",
+    "typescript": "^5.3.0",
+    "vite": "^7.2.4",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "dependencies": {
+    "solid-icons": "^1.1.0"
+  }
+}

package/apps/com/eden/files/src/App.tsx

@@ -0,0 +1,387 @@
+import { createSignal, createEffect, onMount } from "solid-js";
+import type { Component } from "solid-js";
+import type { FileItem, DisplayPreferences } from "./types";
+import { joinPath, getParentPath, isValidName } from "./utils";
+import FileExplorerHeader from "./components/FileExplorerHeader";
+import FileList from "./components/FileList";
+import CreateFolderDialog from "./dialogs/CreateFolderDialog";
+import CreateFileDialog from "./dialogs/CreateFileDialog";
+import DeleteConfirmDialog from "./dialogs/DeleteConfirmDialog";
+import ErrorDialog from "./dialogs/ErrorDialog";
+import DisplayOptionsModal from "./dialogs/DisplayOptionsModal";
+
+const App: Component = () => {
+  const [currentPath, setCurrentPath] = createSignal("/");
+  const [items, setItems] = createSignal<FileItem[]>([]);
+  const [loading, setLoading] = createSignal(true);
+  const [selectedItem, setSelectedItem] = createSignal<string | null>(null);
+  const [scrollToSelected, setScrollToSelected] = createSignal(false);
+  const [navigationHistory, setNavigationHistory] = createSignal<string[]>([
+    "/",
+  ]);
+  const [historyIndex, setHistoryIndex] = createSignal(0);
+
+  // Modal states
+  const [showNewFolderDialog, setShowNewFolderDialog] = createSignal(false);
+  const [showNewFileDialog, setShowNewFileDialog] = createSignal(false);
+  const [showDeleteDialog, setShowDeleteDialog] = createSignal(false);
+  const [showErrorDialog, setShowErrorDialog] = createSignal(false);
+  const [showDisplayOptionsModal, setShowDisplayOptionsModal] = createSignal(false);
+  const [errorMessage, setErrorMessage] = createSignal("");
+  const [itemToDelete, setItemToDelete] = createSignal<FileItem | null>(null);
+
+  // Display preferences
+  const [displayPreferences, setDisplayPreferences] = createSignal<DisplayPreferences>({
+    viewStyle: 'grid',
+    itemSize: 'medium',
+    sortBy: 'name',
+    sortOrder: 'asc',
+  });
+
+  // Load preferences from database on mount
+  onMount(async () => {
+    try {
+      const result = await window.edenAPI.shellCommand('db/get', { key: 'display-preferences' });
+      if (result.value) {
+        setDisplayPreferences(JSON.parse(result.value));
+      }
+    } catch (error) {
+      console.error('Failed to load display preferences:', error);
+    }
+  });
+
+  const loadDirectory = async (path: string) => {
+    try {
+      setLoading(true);
+      setCurrentPath(path);
+
+      const dirItems = await window.edenAPI.shellCommand(
+        "fs/readdir",
+        { path }
+      );
+      const itemsWithStats = await Promise.all(
+        dirItems.map(async (name: string) => {
+          const itemPath = joinPath(path, name);
+          try {
+            const stats = await window.edenAPI.shellCommand(
+              "fs/stat",
+              { path: itemPath }
+            );
+            return {
+              name,
+              path: itemPath,
+              isDirectory: stats.isDirectory,
+              isFile: stats.isFile,
+              size: stats.size,
+              modified: new Date(stats.mtime),
+            };
+          } catch (error) {
+            return {
+              name,
+              path: itemPath,
+              isDirectory: false,
+              isFile: true,
+              size: 0,
+              modified: new Date(),
+            };
+          }
+        })
+      );
+
+      const sorted = sortItems(itemsWithStats);
+      setItems(sorted);
+    } catch (error) {
+      console.error("Error loading directory:", error);
+      showError("Failed to load directory: " + (error as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  createEffect(() => {
+    loadDirectory(currentPath());
+  });
+
+  // Handle mouse button 4/5 for back/forward navigation
+  createEffect(() => {
+    const handleMouseButton = (e: MouseEvent) => {
+      if (e.button === 3) {
+        // Mouse button 4 (back)
+        e.preventDefault();
+        goBack();
+      } else if (e.button === 4) {
+        // Mouse button 5 (forward)
+        e.preventDefault();
+        goForward();
+      }
+    };
+
+    document.addEventListener("mousedown", handleMouseButton);
+
+    return () => {
+      document.removeEventListener("mousedown", handleMouseButton);
+    };
+  });
+
+  const navigateTo = (path: string, selectedItem?: string) => {
+    const history = navigationHistory();
+    const index = historyIndex();
+
+    if (index === history.length - 1) {
+      setNavigationHistory([...history, path]);
+      setHistoryIndex(index + 1);
+    } else {
+      setNavigationHistory([...history.slice(0, index + 1), path]);
+      setHistoryIndex(index + 1);
+    }
+
+    loadDirectory(path);
+
+    // If a specific item should be selected, set it after navigation and trigger scroll
+    if (selectedItem) {
+      setScrollToSelected(true);
+      setSelectedItem(selectedItem);
+    }
+  };
+
+  const goBack = () => {
+    const index = historyIndex();
+    if (index > 0) {
+      setHistoryIndex(index - 1);
+      loadDirectory(navigationHistory()[index - 1]);
+    }
+  };
+
+  const goForward = () => {
+    const history = navigationHistory();
+    const index = historyIndex();
+    if (index < history.length - 1) {
+      setHistoryIndex(index + 1);
+      loadDirectory(history[index + 1]);
+    }
+  };
+
+  const goUp = () => {
+    const parentPath = getParentPath(currentPath());
+    if (parentPath !== currentPath()) {
+      navigateTo(parentPath);
+    }
+  };
+
+  const refresh = () => {
+    loadDirectory(currentPath());
+  };
+
+  const sortItems = (items: FileItem[]): FileItem[] => {
+    const prefs = displayPreferences();
+
+    return [...items].sort((a, b) => {
+      // Folders always come first
+      if (a.isDirectory && !b.isDirectory) return -1;
+      if (!a.isDirectory && b.isDirectory) return 1;
+
+      // Then sort by selected criteria
+      let comparison = 0;
+      switch (prefs.sortBy) {
+        case 'name':
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case 'size':
+          comparison = a.size - b.size;
+          break;
+        case 'modified':
+          comparison = a.modified.getTime() - b.modified.getTime();
+          break;
+      }
+
+      return prefs.sortOrder === 'asc' ? comparison : -comparison;
+    });
+  };
+
+  const handlePreferencesChange = async (newPreferences: DisplayPreferences) => {
+    setDisplayPreferences(newPreferences);
+    // Re-sort existing items with new preferences
+    const currentItems = items();
+    if (currentItems.length > 0) {
+      setItems(sortItems(currentItems));
+    }
+    
+    // Persist preferences to database
+    try {
+      await window.edenAPI.shellCommand('db/set', { 
+        key: 'display-preferences', 
+        value: JSON.stringify(newPreferences) 
+      });
+    } catch (error) {
+      console.error('Failed to save display preferences:', error);
+    }
+  };
+
+  const createFolder = async (name: string) => {
+    const trimmedName = name.trim();
+    if (!trimmedName || !isValidName(trimmedName)) {
+      showError("Invalid folder name");
+      return;
+    }
+
+    const folderPath = joinPath(currentPath(), trimmedName);
+
+    try {
+      await window.edenAPI.shellCommand("fs/mkdir", {
+        path: folderPath,
+      });
+      setShowNewFolderDialog(false);
+      refresh();
+    } catch (error) {
+      showError("Failed to create folder: " + (error as Error).message);
+    }
+  };
+
+  const createFile = async (name: string) => {
+    const trimmedName = name.trim();
+    if (!trimmedName || !isValidName(trimmedName)) {
+      showError("Invalid file name");
+      return;
+    }
+
+    const filePath = joinPath(currentPath(), trimmedName);
+
+    try {
+      await window.edenAPI.shellCommand("fs/write", {
+        path: filePath,
+        content: "",
+      });
+      setShowNewFileDialog(false);
+      refresh();
+    } catch (error) {
+      showError("Failed to create file: " + (error as Error).message);
+    }
+  };
+
+  const confirmDelete = async () => {
+    const item = itemToDelete();
+    if (!item) return;
+
+    try {
+      await window.edenAPI.shellCommand("fs/delete", {
+        path: item.path,
+      });
+      setShowDeleteDialog(false);
+      setItemToDelete(null);
+      refresh();
+    } catch (error) {
+      showError("Failed to delete item: " + (error as Error).message);
+    }
+  };
+
+  const showError = (message: string) => {
+    setErrorMessage(message);
+    setShowErrorDialog(true);
+  };
+
+  const handleItemClick = (item: FileItem) => {
+    setScrollToSelected(false); // Don't scroll when clicking directly
+    setSelectedItem(item.path);
+  };
+
+  const handleItemDoubleClick = async (item: FileItem) => {
+    if (item.isDirectory) {
+      navigateTo(item.path);
+    } else {
+      // Open files with their registered handler
+      try {
+        let result = await window.edenAPI.shellCommand("file/open", { path: item.path });
+        if(!result.success) {
+          showError("Failed to open file: " + result.error);
+        }
+      } catch (error) {
+        showError("Failed to open file: " + (error as Error).message);
+      }
+    }
+  };
+
+  const handleDeleteClick = (item: FileItem, e: MouseEvent) => {
+    e.stopPropagation();
+    setItemToDelete(item);
+    setShowDeleteDialog(true);
+  };
+
+  const getBreadcrumbs = () => {
+    const path = currentPath();
+    const parts = path.split("/").filter((p) => p);
+
+    const crumbs = [{ name: "/", path: "/" }];
+    let accumulatedPath = "";
+
+    parts.forEach((part) => {
+      accumulatedPath += "/" + part;
+      crumbs.push({ name: part, path: accumulatedPath });
+    });
+
+    return crumbs;
+  };
+
+  return (
+    <div class="file-explorer">
+      <FileExplorerHeader
+        currentPath={currentPath()}
+        historyIndex={historyIndex()}
+        historyLength={navigationHistory().length}
+        breadcrumbs={getBreadcrumbs()}
+        onGoBack={goBack}
+        onGoForward={goForward}
+        onGoUp={goUp}
+        onNavigate={navigateTo}
+        onNewFolder={() => setShowNewFolderDialog(true)}
+        onNewFile={() => setShowNewFileDialog(true)}
+        onOpenDisplayOptions={() => setShowDisplayOptionsModal(true)}
+      />
+
+      <FileList
+        loading={loading()}
+        items={items()}
+        selectedItem={selectedItem()}
+        scrollToSelected={scrollToSelected()}
+        viewStyle={displayPreferences().viewStyle}
+        itemSize={displayPreferences().itemSize}
+        onItemClick={handleItemClick}
+        onItemDoubleClick={handleItemDoubleClick}
+        onItemDelete={handleDeleteClick}
+      />
+
+      <CreateFolderDialog
+        show={showNewFolderDialog()}
+        onClose={() => setShowNewFolderDialog(false)}
+        onCreate={createFolder}
+      />
+
+      <CreateFileDialog
+        show={showNewFileDialog()}
+        onClose={() => setShowNewFileDialog(false)}
+        onCreate={createFile}
+      />
+
+      <DeleteConfirmDialog
+        show={showDeleteDialog()}
+        onClose={() => setShowDeleteDialog(false)}
+        onConfirm={confirmDelete}
+        item={itemToDelete()}
+      />
+
+      <ErrorDialog
+        show={showErrorDialog()}
+        onClose={() => setShowErrorDialog(false)}
+        message={errorMessage()}
+      />
+
+      <DisplayOptionsModal
+        show={showDisplayOptionsModal()}
+        preferences={displayPreferences()}
+        onClose={() => setShowDisplayOptionsModal(false)}
+        onChange={handlePreferencesChange}
+      />
+    </div>
+  );
+};
+
+export default App;

package/apps/com/eden/files/src/components/FileExplorerHeader.tsx

@@ -0,0 +1,90 @@
+import { createSignal } from "solid-js";
+import type { Component } from "solid-js";
+import Omnibox from "./Omnibox";
+import { FaSolidArrowLeft, FaSolidArrowRight, FaSolidArrowUp, FaSolidFolderPlus, FaSolidFileMedical, FaSolidEllipsis } from "solid-icons/fa";
+
+interface Breadcrumb {
+  name: string;
+  path: string;
+}
+
+interface FileExplorerHeaderProps {
+  currentPath: string;
+  historyIndex: number;
+  historyLength: number;
+  breadcrumbs: Breadcrumb[];
+  onGoBack: () => void;
+  onGoForward: () => void;
+  onGoUp: () => void;
+  onNavigate: (path: string) => void;
+  onNewFolder: () => void;
+  onNewFile: () => void;
+  onOpenDisplayOptions: () => void;
+}
+
+const FileExplorerHeader: Component<FileExplorerHeaderProps> = (props) => {
+  return (
+    <header class="explorer-header">
+      <div class="header-content">
+        <div class="toolbar-left">
+          <button
+            class="eden-btn eden-btn-sm eden-btn-square"
+            onClick={props.onGoBack}
+            disabled={props.historyIndex === 0}
+            title="Go back"
+          >
+            <FaSolidArrowLeft />
+          </button>
+          <button
+            class="eden-btn eden-btn-sm eden-btn-square"
+            onClick={props.onGoForward}
+            disabled={props.historyIndex >= props.historyLength - 1}
+            title="Go forward"
+          >
+            <FaSolidArrowRight />
+          </button>
+          <button
+            class="eden-btn eden-btn-sm eden-btn-square"
+            onClick={props.onGoUp}
+            disabled={props.currentPath === "/"}
+            title="Go up"
+          >
+            <FaSolidArrowUp />
+          </button>
+        </div>
+
+        <Omnibox
+          currentPath={props.currentPath}
+          breadcrumbs={props.breadcrumbs}
+          onNavigate={props.onNavigate}
+        />
+
+        <div class="toolbar-right">
+          <button
+            class="eden-btn eden-btn-sm eden-btn-square"
+            onClick={props.onNewFolder}
+            title="New Folder"
+          >
+            <FaSolidFolderPlus />
+          </button>
+          <button
+            class="eden-btn eden-btn-sm eden-btn-square"
+            onClick={props.onNewFile}
+            title="New File"
+          >
+            <FaSolidFileMedical />
+          </button>
+          <button
+            class="eden-btn eden-btn-sm eden-btn-square"
+            onClick={props.onOpenDisplayOptions}
+            title="Display Options"
+          >
+            <FaSolidEllipsis />
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default FileExplorerHeader;

package/apps/com/eden/files/src/components/FileItem.tsx

@@ -0,0 +1,70 @@
+import type { Component } from "solid-js";
+import type { FileItem, ViewStyle, ItemSize } from "../types";
+import { getFileIcon, formatFileSize } from "../utils";
+
+interface FileItemComponentProps {
+  ref?: (el: HTMLDivElement) => void;
+  item: FileItem;
+  isSelected: boolean;
+  viewStyle: ViewStyle;
+  itemSize: ItemSize;
+  onClick: (item: FileItem) => void;
+  onDoubleClick: (item: FileItem) => void;
+  onDelete: (item: FileItem, e: MouseEvent) => void;
+}
+
+const FileItemComponent: Component<FileItemComponentProps> = (props) => {
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    }).format(date);
+  };
+
+  return (
+    <div
+      ref={props.ref}
+      class="file-item"
+      classList={{
+        selected: props.isSelected,
+        'list-view': props.viewStyle === 'list',
+        [`size-${props.itemSize}`]: true
+      }}
+      onClick={() => props.onClick(props.item)}
+      onDblClick={() => props.onDoubleClick(props.item)}
+    >
+      <div class="file-icon">{getFileIcon(props.item)}</div>
+      <div class="file-name">{props.item.name}</div>
+
+      {props.viewStyle === 'list' && (
+        <>
+          <div class="file-size">
+            {props.item.isFile ? formatFileSize(props.item.size) : "—"}
+          </div>
+          <div class="file-modified">{formatDate(props.item.modified)}</div>
+        </>
+      )}
+
+      {props.viewStyle === 'grid' && (
+        <div class="file-meta">
+          {props.item.isFile ? formatFileSize(props.item.size) : "Folder"}
+        </div>
+      )}
+
+      <div class="file-item-actions">
+        <button
+          class="eden-btn eden-btn-danger eden-btn-xs file-action-btn"
+          onClick={(e) => props.onDelete(props.item, e)}
+          title="Delete"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FileItemComponent;

package/apps/com/eden/files/src/components/FileList.tsx

@@ -0,0 +1,77 @@
+import { Show, For, createEffect } from "solid-js";
+import type { Component } from "solid-js";
+import type { FileItem, ViewStyle, ItemSize } from "../types";
+import FileItemComponent from "./FileItem";
+
+interface FileListProps {
+  loading: boolean;
+  items: FileItem[];
+  selectedItem: string | null;
+  scrollToSelected?: boolean;
+  viewStyle: ViewStyle;
+  itemSize: ItemSize;
+  onItemClick: (item: FileItem) => void;
+  onItemDoubleClick: (item: FileItem) => void;
+  onItemDelete: (item: FileItem, e: MouseEvent) => void;
+}
+
+const FileList: Component<FileListProps> = (props) => {
+  let fileRefs: Map<string, HTMLDivElement> = new Map();
+
+  createEffect(() => {
+    // Track items to re-run when list updates
+    const items = props.items;
+    const shouldScroll = props.scrollToSelected;
+    const selected = props.selectedItem;
+    
+    // Only scroll when explicitly requested (e.g., when selecting from omnibox)
+    if (shouldScroll && selected && items.length > 0) {
+      // Wait for DOM to update with new refs
+      requestAnimationFrame(() => {
+        const element = fileRefs.get(selected);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }
+      });
+    }
+  });
+
+  return (
+    <main class="explorer-content">
+      <Show when={props.loading}>
+        <div class="loading-message">Loading...</div>
+      </Show>
+
+      <Show when={!props.loading && props.items.length === 0}>
+        <div class="empty-state">
+          <div class="empty-icon">📂</div>
+          <div class="empty-message">This folder is empty</div>
+          <div class="empty-hint">
+            Create a new file or folder to get started
+          </div>
+        </div>
+      </Show>
+
+      <Show when={!props.loading && props.items.length > 0}>
+        <div class="file-list" classList={{ 'list-view': props.viewStyle === 'list' }}>
+          <For each={props.items}>
+            {(item) => (
+              <FileItemComponent
+                ref={(el: HTMLDivElement) => fileRefs.set(item.path, el)}
+                item={item}
+                isSelected={props.selectedItem === item.path}
+                viewStyle={props.viewStyle}
+                itemSize={props.itemSize}
+                onClick={props.onItemClick}
+                onDoubleClick={props.onItemDoubleClick}
+                onDelete={props.onItemDelete}
+              />
+            )}
+          </For>
+        </div>
+      </Show>
+    </main>
+  );
+};
+
+export default FileList;

package/apps/com/eden/files/src/components/Modal.tsx

@@ -0,0 +1,48 @@
+import { Show, JSX } from "solid-js";
+import type { Component } from "solid-js";
+
+interface ModalProps {
+  show: boolean;
+  onClose: () => void;
+  title: string;
+  size?: "sm" | "md" | "lg";
+  children: JSX.Element;
+  footer?: JSX.Element;
+}
+
+const Modal: Component<ModalProps> = (props) => {
+  const sizeClass = () => {
+    switch (props.size) {
+      case "sm":
+        return "eden-modal-sm";
+      case "lg":
+        return "eden-modal-lg";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <Show when={props.show}>
+      <div class="eden-modal-overlay" onClick={props.onClose}>
+        <div
+          class={`eden-modal ${sizeClass()}`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div class="eden-modal-header">
+            <h3 class="eden-modal-title">{props.title}</h3>
+            <button class="eden-modal-close" onClick={props.onClose}>
+              ×
+            </button>
+          </div>
+          <div class="eden-modal-body">{props.children}</div>
+          <Show when={props.footer}>
+            <div class="eden-modal-footer">{props.footer}</div>
+          </Show>
+        </div>
+      </div>
+    </Show>
+  );
+};
+
+export default Modal;