@edenapp/sdk 0.1.0

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

@@ -0,0 +1,241 @@
+import { createSignal, createEffect, onCleanup, For, Show } from "solid-js";
+import type { Component } from "solid-js";
+import { getParentPath } from "../utils";
+
+interface Breadcrumb {
+    name: string;
+    path: string;
+}
+
+interface Suggestion {
+    type: "path" | "file" | "folder";
+    name: string;
+    path: string;
+    icon: string;
+}
+
+interface OmniboxProps {
+    currentPath: string;
+    breadcrumbs: Breadcrumb[];
+    onNavigate: (path: string, selectedItem?: string) => void;
+}
+
+const Omnibox: Component<OmniboxProps> = (props) => {
+    const [isEditing, setIsEditing] = createSignal(false);
+    const [inputValue, setInputValue] = createSignal("");
+    const [suggestions, setSuggestions] = createSignal<Suggestion[]>([]);
+    const [selectedIndex, setSelectedIndex] = createSignal(0);
+    const [isLoading, setIsLoading] = createSignal(false);
+
+    let inputRef: HTMLInputElement | undefined;
+    let containerRef: HTMLDivElement | undefined;
+
+    // Generate suggestions based on input
+    const generateSuggestions = async (value: string) => {
+        setIsLoading(true);
+
+        try {
+            // If it looks like a path (starts with /)
+            if (value.startsWith("/")) {
+                const pathParts = value.split("/").filter((p) => p);
+                let basePath = "/";
+                let searchTerm = "";
+
+                if (pathParts.length > 0) {
+                    basePath = "/" + pathParts.slice(0, -1).join("/");
+                    if (basePath !== "/") basePath += "/";
+                    searchTerm = pathParts[pathParts.length - 1]?.toLowerCase() || "";
+                }
+
+                const results = await window.edenAPI.shellCommand("fs/search", {
+                    path: basePath === "//" ? "/" : basePath,
+                    pattern: searchTerm,
+                    limit: 10,
+                });
+
+                // Add icons on frontend based on type
+                const resultsWithIcons = results.map((r) => ({
+                    ...r,
+                    icon: r.type === "folder" ? "📁" : "📄",
+                }));
+
+                setSuggestions(resultsWithIcons);
+                setSelectedIndex(0);
+            } else {
+                // Search in current directory (empty value shows all items)
+                const results = await window.edenAPI.shellCommand("fs/search", {
+                    path: props.currentPath,
+                    pattern: value.toLowerCase(),
+                    limit: 10,
+                });
+
+                // Add icons on frontend based on type
+                const resultsWithIcons = results.map((r) => ({
+                    ...r,
+                    icon: r.type === "folder" ? "📁" : "📄",
+                }));
+
+                setSuggestions(resultsWithIcons);
+                setSelectedIndex(0);
+            }
+        } catch (error) {
+            console.error("Error searching:", error);
+            setSuggestions([]);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Handle input changes with debouncing
+    let debounceTimer: number | undefined;
+    const handleInput = (e: InputEvent) => {
+        const value = (e.target as HTMLInputElement).value;
+        setInputValue(value);
+
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = window.setTimeout(() => {
+            generateSuggestions(value);
+        }, 150);
+    };
+
+    // Handle keyboard navigation
+    const handleKeyDown = (e: KeyboardEvent) => {
+        const suggestionList = suggestions();
+
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setIsEditing(false);
+            setSuggestions([]);
+            setInputValue("");
+        } else if (e.key === "Enter") {
+            e.preventDefault();
+            if (suggestionList.length > 0) {
+                const selected = suggestionList[selectedIndex()];
+                if (selected) {
+                    props.onNavigate(selected.path);
+                    setIsEditing(false);
+                    setSuggestions([]);
+                    setInputValue("");
+                }
+            } else if (inputValue().trim()) {
+                // Navigate to entered path
+                props.onNavigate(inputValue().trim());
+                setIsEditing(false);
+                setSuggestions([]);
+                setInputValue("");
+            }
+        } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setSelectedIndex((prev) =>
+                prev < suggestionList.length - 1 ? prev + 1 : prev
+            );
+        } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));
+        }
+    };
+
+    // Handle click outside
+    const handleClickOutside = (e: MouseEvent) => {
+        if (containerRef && !containerRef.contains(e.target as Node)) {
+            setIsEditing(false);
+            setSuggestions([]);
+            setInputValue("");
+        }
+    };
+
+    createEffect(() => {
+        if (isEditing()) {
+            document.addEventListener("mousedown", handleClickOutside);
+            inputRef?.focus();
+            setInputValue(props.currentPath);
+        } else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+
+        onCleanup(() => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            if (debounceTimer) clearTimeout(debounceTimer);
+        });
+    });
+
+    const handleOmniboxClick = () => {
+        setIsEditing(true);
+        // Show suggestions immediately
+        generateSuggestions("");
+    };
+
+    const handleSuggestionClick = (suggestion: Suggestion) => {
+        if (suggestion.type === "file") {
+            // For files, navigate to parent directory and select the file
+            const parentPath = getParentPath(suggestion.path);
+            props.onNavigate(parentPath, suggestion.path);
+        } else {
+            // For folders, navigate to the folder itself
+            props.onNavigate(suggestion.path);
+        }
+        setIsEditing(false);
+        setSuggestions([]);
+        setInputValue("");
+    };
+
+    return (
+        <div class="omnibox-container" ref={containerRef}>
+            <Show
+                when={isEditing()}
+                fallback={
+                    <div class="omnibox-display" onClick={handleOmniboxClick}>
+                        <div class="breadcrumb-display">
+                            <For each={props.breadcrumbs}>
+                                {(crumb, index) => (
+                                    <>
+                                        {index() > 1 && <span class="breadcrumb-separator">/</span>}
+                                        {crumb.name === "/" ? (
+                                            <span class="breadcrumb-separator">/</span>
+                                        ) : (
+                                            <span class="breadcrumb-part">{crumb.name}</span>
+                                        )}
+                                    </>
+                                )}
+                            </For>
+                        </div>
+                    </div>
+                }
+            >
+                <div class="omnibox-input-container">
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        class="omnibox-input"
+                        value={inputValue()}
+                        onInput={handleInput}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Type a path or search..."
+                    />
+                    {isLoading() && <span class="omnibox-loading">⏳</span>}
+                </div>
+
+                <Show when={suggestions().length > 0}>
+                    <div class="omnibox-suggestions eden-glass-strong">
+                        <For each={suggestions()}>
+                            {(suggestion, index) => (
+                                <div
+                                    class={`suggestion-item ${index() === selectedIndex() ? "selected" : ""
+                                        }`}
+                                    onClick={() => handleSuggestionClick(suggestion)}
+                                    onMouseEnter={() => setSelectedIndex(index())}
+                                >
+                                    <span class="suggestion-icon">{suggestion.icon}</span>
+                                    <span class="suggestion-name">{suggestion.name}</span>
+                                    <span class="suggestion-path">{suggestion.path}</span>
+                                </div>
+                            )}
+                        </For>
+                    </div>
+                </Show>
+            </Show>
+        </div>
+    );
+};
+
+export default Omnibox;

package/apps/com/eden/files/src/dialogs/CreateFileDialog.tsx

@@ -0,0 +1,71 @@
+import { createSignal } from "solid-js";
+import type { Component } from "solid-js";
+import Modal from "../components/Modal";
+
+interface CreateFileDialogProps {
+  show: boolean;
+  onClose: () => void;
+  onCreate: (name: string) => void;
+}
+
+const CreateFileDialog: Component<CreateFileDialogProps> = (props) => {
+  const [fileName, setFileName] = createSignal("");
+
+  const handleCreate = () => {
+    props.onCreate(fileName());
+    setFileName("");
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") handleCreate();
+    if (e.key === "Escape") {
+      props.onClose();
+      setFileName("");
+    }
+  };
+
+  return (
+    <Modal
+      show={props.show}
+      onClose={() => {
+        props.onClose();
+        setFileName("");
+      }}
+      title="Create New File"
+      size="sm"
+      footer={
+        <>
+          <button
+            class="eden-btn"
+            onClick={() => {
+              props.onClose();
+              setFileName("");
+            }}
+          >
+            Cancel
+          </button>
+          <button class="eden-btn eden-btn-primary" onClick={handleCreate}>
+            Create
+          </button>
+        </>
+      }
+    >
+      <div class="eden-form-group">
+        <label class="eden-form-label">File Name</label>
+        <input
+          type="text"
+          class="eden-input"
+          placeholder="example.txt"
+          value={fileName()}
+          onInput={(e) => setFileName(e.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <p class="eden-form-help">
+          Include file extension (e.g., .txt, .js, .md)
+        </p>
+      </div>
+    </Modal>
+  );
+};
+
+export default CreateFileDialog;

package/apps/com/eden/files/src/dialogs/CreateFolderDialog.tsx

@@ -0,0 +1,68 @@
+import { createSignal } from "solid-js";
+import type { Component } from "solid-js";
+import Modal from "../components/Modal";
+
+interface CreateFolderDialogProps {
+  show: boolean;
+  onClose: () => void;
+  onCreate: (name: string) => void;
+}
+
+const CreateFolderDialog: Component<CreateFolderDialogProps> = (props) => {
+  const [folderName, setFolderName] = createSignal("");
+
+  const handleCreate = () => {
+    props.onCreate(folderName());
+    setFolderName("");
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") handleCreate();
+    if (e.key === "Escape") {
+      props.onClose();
+      setFolderName("");
+    }
+  };
+
+  return (
+    <Modal
+      show={props.show}
+      onClose={() => {
+        props.onClose();
+        setFolderName("");
+      }}
+      title="Create New Folder"
+      size="sm"
+      footer={
+        <>
+          <button
+            class="eden-btn"
+            onClick={() => {
+              props.onClose();
+              setFolderName("");
+            }}
+          >
+            Cancel
+          </button>
+          <button class="eden-btn eden-btn-primary" onClick={handleCreate}>
+            Create
+          </button>
+        </>
+      }
+    >
+      <div class="eden-form-group">
+        <label class="eden-form-label">Folder Name</label>
+        <input
+          type="text"
+          class="eden-input"
+          placeholder="Enter folder name..."
+          value={folderName()}
+          onInput={(e) => setFolderName(e.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+export default CreateFolderDialog;

package/apps/com/eden/files/src/dialogs/DeleteConfirmDialog.tsx

@@ -0,0 +1,35 @@
+import type { Component } from "solid-js";
+import Modal from "../components/Modal";
+import type { FileItem } from "../types";
+
+interface DeleteConfirmDialogProps {
+  show: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  item: FileItem | null;
+}
+
+const DeleteConfirmDialog: Component<DeleteConfirmDialogProps> = (props) => {
+  return (
+    <Modal
+      show={props.show}
+      onClose={props.onClose}
+      title="Confirm Delete"
+      size="sm"
+      footer={
+        <>
+          <button class="eden-btn" onClick={props.onClose}>
+            Cancel
+          </button>
+          <button class="eden-btn eden-btn-danger" onClick={props.onConfirm}>
+            Delete
+          </button>
+        </>
+      }
+    >
+      <p>Are you sure you want to delete "{props.item?.name}"?</p>
+    </Modal>
+  );
+};
+
+export default DeleteConfirmDialog;

package/apps/com/eden/files/src/dialogs/DisplayOptionsModal.tsx

@@ -0,0 +1,122 @@
+import { Show } from "solid-js";
+import type { Component } from "solid-js";
+import type { DisplayPreferences, ViewStyle, ItemSize, SortBy, SortOrder } from "../types";
+import { FaSolidGrip, FaSolidList, FaSolidArrowUp, FaSolidArrowDown } from "solid-icons/fa";
+
+interface DisplayOptionsModalProps {
+    show: boolean;
+    preferences: DisplayPreferences;
+    onClose: () => void;
+    onChange: (preferences: DisplayPreferences) => void;
+}
+
+const DisplayOptionsModal: Component<DisplayOptionsModalProps> = (props) => {
+    const updatePreference = <K extends keyof DisplayPreferences>(
+        key: K,
+        value: DisplayPreferences[K]
+    ) => {
+        props.onChange({
+            ...props.preferences,
+            [key]: value,
+        });
+    };
+
+    const getSizeValue = () => {
+        const sizes: Record<ItemSize, number> = { tiny: 0, small: 1, medium: 2, large: 3, huge: 4 };
+        return sizes[props.preferences.itemSize];
+    };
+
+    const handleSizeChange = (value: number) => {
+        const sizes: ItemSize[] = ['tiny', 'small', 'medium', 'large', 'huge'];
+        updatePreference('itemSize', sizes[value]);
+    };
+
+    return (
+        <Show when={props.show}>
+            <div class="eden-modal-overlay display-options-position" onClick={props.onClose}>
+                <div class="eden-popover display-options-popover" onClick={(e) => e.stopPropagation()}>
+                    <div class="eden-flex-between eden-gap-md">
+                        <h3 class="eden-popover-title">Display Options</h3>
+                        <button
+                            class="eden-modal-close"
+                            onClick={props.onClose}
+                            aria-label="Close"
+                        >
+                            ×
+                        </button>
+                    </div>
+
+                    <div class="eden-flex-col" style={{ "margin-top": "var(--eden-space-lg)" }}>
+                        {/* View Style Section */}
+                        <div class="eden-form-group">
+                            <label class="eden-form-label">View Style</label>
+                            <div class="eden-btn-group">
+                                <button
+                                    class="eden-btn eden-btn-md"
+                                    classList={{ 'eden-btn-primary': props.preferences.viewStyle === 'grid' }}
+                                    onClick={() => updatePreference('viewStyle', 'grid')}
+                                >
+                                    <FaSolidGrip /> Grid
+                                </button>
+                                <button
+                                    class="eden-btn eden-btn-md"
+                                    classList={{ 'eden-btn-primary': props.preferences.viewStyle === 'list' }}
+                                    onClick={() => updatePreference('viewStyle', 'list')}
+                                >
+                                    <FaSolidList /> List
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Item Size Section */}
+                        <div class="eden-form-group">
+                            <label class="eden-form-label">
+                                Display Size: <span class="eden-badge">{props.preferences.itemSize}</span>
+                            </label>
+                            <div class="eden-flex eden-gap-md" style={{ "align-items": "center" }}>
+                                <span class="eden-text-xs eden-text-muted">Tiny</span>
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max="4"
+                                    step="1"
+                                    value={getSizeValue()}
+                                    onInput={(e) => handleSizeChange(parseInt(e.currentTarget.value))}
+                                    class="eden-slider"
+                                />
+                                <span class="eden-text-xs eden-text-muted">Huge</span>
+                            </div>
+                        </div>
+
+                        {/* Sort Options Section */}
+                        <div class="eden-form-group">
+                            <label class="eden-form-label">Sort By</label>
+                            <div class="eden-flex eden-gap-sm">
+                                <select
+                                    class="eden-select"
+                                    value={props.preferences.sortBy}
+                                    onChange={(e) => updatePreference('sortBy', e.currentTarget.value as SortBy)}
+                                    style={{ flex: "1" }}
+                                >
+                                    <option value="name">Name</option>
+                                    <option value="size">Size</option>
+                                    <option value="modified">Modified Date</option>
+                                </select>
+
+                                <button
+                                    class="eden-btn eden-btn-sm eden-btn-square"
+                                    onClick={() => updatePreference('sortOrder', props.preferences.sortOrder === 'asc' ? 'desc' : 'asc')}
+                                    title={props.preferences.sortOrder === 'asc' ? 'Ascending' : 'Descending'}
+                                >
+                                    {props.preferences.sortOrder === 'asc' ? <FaSolidArrowUp /> : <FaSolidArrowDown />}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Show>
+    );
+};
+
+export default DisplayOptionsModal;

package/apps/com/eden/files/src/dialogs/ErrorDialog.tsx

@@ -0,0 +1,28 @@
+import type { Component } from "solid-js";
+import Modal from "../components/Modal";
+
+interface ErrorDialogProps {
+  show: boolean;
+  onClose: () => void;
+  message: string;
+}
+
+const ErrorDialog: Component<ErrorDialogProps> = (props) => {
+  return (
+    <Modal
+      show={props.show}
+      onClose={props.onClose}
+      title="Error"
+      size="sm"
+      footer={
+        <button class="eden-btn eden-btn-primary" onClick={props.onClose}>
+          OK
+        </button>
+      }
+    >
+      <p>{props.message}</p>
+    </Modal>
+  );
+};
+
+export default ErrorDialog;

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

@@ -0,0 +1,9 @@
+import { render } from "solid-js/web";
+import App from "./App";
+import "./styles.css";
+
+const root = document.getElementById("root");
+
+if (root) {
+  render(() => <App />, root);
+}