@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/FileTree.tsx

@@ -0,0 +1,313 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { ChevronRight, ChevronDown, File, Folder, FolderOpen } from 'lucide-react';
+import { FileTreeContextMenu } from './FileTreeContextMenu';
+import { FileTreeInlineInput } from './FileTreeInlineInput';
+import { getParentPath } from '../utils/file_utils';
+import type { ContextMenuItem } from './FileTreeContextMenu';
+
+export interface TreeEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  children?: TreeEntry[];
+}
+
+export interface InlineInputState {
+  parentPath: string;
+  type: 'file' | 'directory';
+  mode: 'create' | 'rename';
+  initialValue: string;
+  targetPath?: string;
+  depth: number;
+}
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+}
+
+export interface FileTreeCallbacks {
+  onFileSelect: (path: string, name: string) => void;
+  onCreateFile: (parentPath: string, name: string, type: 'file' | 'directory') => void;
+  onRename: (oldPath: string, newName: string) => void;
+  onDelete: (path: string, type: 'file' | 'directory') => void;
+}
+
+interface FileTreeProps {
+  tree: TreeEntry[];
+  callbacks: FileTreeCallbacks;
+  selectedPath: string | null;
+  expandedPaths: Set<string>;
+  onToggleExpand: (path: string) => void;
+}
+
+interface FileTreeNodeProps {
+  entry: TreeEntry;
+  depth: number;
+  callbacks: FileTreeCallbacks;
+  selectedPath: string | null;
+  expandedPaths: Set<string>;
+  onToggleExpand: (path: string) => void;
+  inlineInput: InlineInputState | null;
+  onSetInlineInput: (state: InlineInputState | null) => void;
+  onContextMenu: (e: React.MouseEvent, entry: TreeEntry, depth: number) => void;
+}
+
+const ICON_SIZE = 14;
+
+const FileTreeNode = ({
+  entry, depth, callbacks, selectedPath,
+  expandedPaths, onToggleExpand,
+  inlineInput, onSetInlineInput, onContextMenu,
+}: FileTreeNodeProps) => {
+  const expanded = expandedPaths.has(entry.path);
+
+  const handleClick = useCallback(() => {
+    if (entry.type === 'directory') {
+      onToggleExpand(entry.path);
+    } else {
+      callbacks.onFileSelect(entry.path, entry.name);
+    }
+  }, [entry, callbacks, onToggleExpand]);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onContextMenu(e, entry, depth);
+  }, [entry, depth, onContextMenu]);
+
+  const isSelected = entry.type === 'file' && entry.path === selectedPath;
+  const isRenaming = inlineInput?.mode === 'rename' && inlineInput.targetPath === entry.path;
+
+  // Show inline input for rename
+  if (isRenaming) {
+    return (
+      <FileTreeInlineInput
+        depth={depth}
+        initialValue={inlineInput!.initialValue}
+        type={entry.type}
+        onSubmit={(newName) => {
+          callbacks.onRename(entry.path, newName);
+          onSetInlineInput(null);
+        }}
+        onCancel={() => onSetInlineInput(null)}
+      />
+    );
+  }
+
+  // Check if there's a create-input targeting this directory
+  const showCreateInput = inlineInput?.mode === 'create' && inlineInput.parentPath === entry.path;
+
+  return (
+    <>
+      <button
+        className={`file-tree-node ${isSelected ? 'file-tree-node--selected' : ''}`}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={handleClick}
+        onContextMenu={handleContextMenu}
+        title={entry.path}
+      >
+        {entry.type === 'directory' ? (
+          <>
+            <span className="file-tree-node__chevron">
+              {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+            </span>
+            {expanded
+              ? <FolderOpen size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
+              : <Folder size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
+            }
+          </>
+        ) : (
+          <>
+            <span className="file-tree-node__chevron file-tree-node__chevron--hidden" />
+            <File size={ICON_SIZE} className="file-tree-node__icon" />
+          </>
+        )}
+        <span className="file-tree-node__name">{entry.name}</span>
+      </button>
+      {entry.type === 'directory' && expanded && (
+        <>
+          {showCreateInput && (
+            <FileTreeInlineInput
+              depth={depth + 1}
+              initialValue=""
+              type={inlineInput!.type}
+              onSubmit={(name) => {
+                callbacks.onCreateFile(entry.path, name, inlineInput!.type);
+                onSetInlineInput(null);
+              }}
+              onCancel={() => onSetInlineInput(null)}
+            />
+          )}
+          {entry.children?.map((child) => (
+            <FileTreeNode
+              key={child.path}
+              entry={child}
+              depth={depth + 1}
+              callbacks={callbacks}
+              selectedPath={selectedPath}
+              expandedPaths={expandedPaths}
+              onToggleExpand={onToggleExpand}
+              inlineInput={inlineInput}
+              onSetInlineInput={onSetInlineInput}
+              onContextMenu={onContextMenu}
+            />
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export const FileTree = ({ tree, callbacks, selectedPath, expandedPaths, onToggleExpand }: FileTreeProps) => {
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [inlineInput, setInlineInput] = useState<InlineInputState | null>(null);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, entry: TreeEntry, depth: number) => {
+    const items: ContextMenuItem[] = [];
+
+    if (entry.type === 'directory') {
+      items.push({
+        label: 'New File',
+        action: () => {
+          // Ensure directory is expanded
+          if (!expandedPaths.has(entry.path)) {
+            onToggleExpand(entry.path);
+          }
+          setInlineInput({
+            parentPath: entry.path,
+            type: 'file',
+            mode: 'create',
+            initialValue: '',
+            depth: depth + 1,
+          });
+        },
+      });
+      items.push({
+        label: 'New Folder',
+        action: () => {
+          if (!expandedPaths.has(entry.path)) {
+            onToggleExpand(entry.path);
+          }
+          setInlineInput({
+            parentPath: entry.path,
+            type: 'directory',
+            mode: 'create',
+            initialValue: '',
+            depth: depth + 1,
+          });
+        },
+      });
+    }
+
+    items.push({
+      label: 'Rename',
+      action: () => {
+        setInlineInput({
+          parentPath: entry.type === 'directory' ? entry.path : getParentPath(entry.path),
+          type: entry.type,
+          mode: 'rename',
+          initialValue: entry.name,
+          targetPath: entry.path,
+          depth,
+        });
+      },
+    });
+
+    items.push({
+      label: 'Delete',
+      action: () => {
+        const confirmMsg = entry.type === 'directory'
+          ? `Delete folder "${entry.name}" and all its contents?`
+          : `Delete "${entry.name}"?`;
+        if (window.confirm(confirmMsg)) {
+          callbacks.onDelete(entry.path, entry.type);
+        }
+      },
+    });
+
+    setContextMenu({ x: e.clientX, y: e.clientY, items });
+  }, [callbacks, expandedPaths, onToggleExpand]);
+
+  const handleRootContextMenu = useCallback((e: React.MouseEvent) => {
+    // Only trigger if clicking on the empty area (not on a tree node)
+    if ((e.target as HTMLElement).closest('.file-tree-node')) return;
+
+    e.preventDefault();
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        {
+          label: 'New File',
+          action: () => {
+            setInlineInput({
+              parentPath: '',
+              type: 'file',
+              mode: 'create',
+              initialValue: '',
+              depth: 0,
+            });
+          },
+        },
+        {
+          label: 'New Folder',
+          action: () => {
+            setInlineInput({
+              parentPath: '',
+              type: 'directory',
+              mode: 'create',
+              initialValue: '',
+              depth: 0,
+            });
+          },
+        },
+      ],
+    });
+  }, []);
+
+  // Check if there's a root-level create input (parentPath === '')
+  const showRootCreateInput = inlineInput?.mode === 'create' && inlineInput.parentPath === '';
+
+  return (
+    <div className="file-tree" ref={treeRef} onContextMenu={handleRootContextMenu}>
+      {showRootCreateInput && (
+        <FileTreeInlineInput
+          depth={0}
+          initialValue=""
+          type={inlineInput!.type}
+          onSubmit={(name) => {
+            callbacks.onCreateFile('', name, inlineInput!.type);
+            setInlineInput(null);
+          }}
+          onCancel={() => setInlineInput(null)}
+        />
+      )}
+      {tree.map((entry) => (
+        <FileTreeNode
+          key={entry.path}
+          entry={entry}
+          depth={0}
+          callbacks={callbacks}
+          selectedPath={selectedPath}
+          expandedPaths={expandedPaths}
+          onToggleExpand={onToggleExpand}
+          inlineInput={inlineInput}
+          onSetInlineInput={setInlineInput}
+          onContextMenu={handleContextMenu}
+        />
+      ))}
+      {contextMenu && (
+        <FileTreeContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          items={contextMenu.items}
+          onClose={() => setContextMenu(null)}
+        />
+      )}
+    </div>
+  );
+};
+

package/templates/assistkick-product-system/packages/frontend/src/components/FileTreeContextMenu.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+
+export interface ContextMenuItem {
+  label: string;
+  action: () => void;
+}
+
+interface FileTreeContextMenuProps {
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+  onClose: () => void;
+}
+
+export const FileTreeContextMenu = ({ x, y, items, onClose }: FileTreeContextMenuProps) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = useCallback((e: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+      onClose();
+    }
+  }, [onClose]);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [handleClickOutside]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [onClose]);
+
+  // Adjust position to stay within viewport
+  const style: React.CSSProperties = {
+    position: 'fixed',
+    left: x,
+    top: y,
+    zIndex: 1000,
+  };
+
+  return (
+    <div className="file-tree-context-menu" ref={menuRef} style={style}>
+      {items.map((item) => (
+        <button
+          key={item.label}
+          className="file-tree-context-menu__item"
+          onClick={() => {
+            item.action();
+            onClose();
+          }}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/FileTreeInlineInput.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { File, Folder } from 'lucide-react';
+
+const ICON_SIZE = 14;
+
+interface FileTreeInlineInputProps {
+  depth: number;
+  initialValue: string;
+  type: 'file' | 'directory';
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+export const FileTreeInlineInput = ({ depth, initialValue, type, onSubmit, onCancel }: FileTreeInlineInputProps) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      if (initialValue) {
+        // For rename: select the name part without extension
+        const dotIdx = initialValue.lastIndexOf('.');
+        if (dotIdx > 0 && type === 'file') {
+          inputRef.current.setSelectionRange(0, dotIdx);
+        } else {
+          inputRef.current.select();
+        }
+      }
+    }
+  }, [initialValue, type]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const trimmed = value.trim();
+      if (trimmed) {
+        onSubmit(trimmed);
+      } else {
+        onCancel();
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  }, [value, onSubmit, onCancel]);
+
+  const handleBlur = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+
+  return (
+    <div
+      className="file-tree-inline-input"
+      style={{ paddingLeft: `${depth * 16 + 8}px` }}
+    >
+      <span className="file-tree-node__chevron file-tree-node__chevron--hidden" />
+      {type === 'directory'
+        ? <Folder size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
+        : <File size={ICON_SIZE} className="file-tree-node__icon" />
+      }
+      <input
+        ref={inputRef}
+        className="file-tree-inline-input__field"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        spellCheck={false}
+      />
+    </div>
+  );
+};