create-stylus-ide 1.0.0

package/frontend/components/file-tree/FileTree.tsx

@@ -0,0 +1,259 @@
+'use client';
+
+import { useState } from 'react';
+import { FileNode as FileNodeType } from '@/types/project';
+import { FileNode } from './FileNode';
+import { FolderNode } from './FolderNode';
+import { FileTreeContextMenu } from './ContextMenu';
+import { FileInputDialog } from './FileInputDialog';
+import { DeleteConfirmDialog } from './DeleteConfirmDialog';
+import { Button } from '@/components/ui/button';
+import { Plus, FolderPlus } from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface FileTreeProps {
+  structure: FileNodeType[];
+  activeFilePath: string | null;
+  onFileClick: (path: string) => void;
+  onFolderToggle: (path: string, expanded: boolean) => void;
+  onNewFile?: (parentPath?: string) => void;
+  onNewFolder?: (parentPath?: string) => void;
+  onRename?: (oldPath: string, newName: string) => void;
+  onDuplicate?: (path: string) => void;
+  onDelete?: (path: string, isFolder: boolean) => void;
+  className?: string;
+}
+
+export function FileTree({
+  structure,
+  activeFilePath,
+  onFileClick,
+  onFolderToggle,
+  onNewFile,
+  onNewFolder,
+  onRename,
+  onDuplicate,
+  onDelete,
+  className = '',
+}: FileTreeProps) {
+  const [contextNode, setContextNode] = useState<FileNodeType | null>(null);
+  
+  // Dialog states
+  const [newFileDialog, setNewFileDialog] = useState<{
+    open: boolean;
+    parentPath?: string;
+  }>({ open: false });
+  
+  const [newFolderDialog, setNewFolderDialog] = useState<{
+    open: boolean;
+    parentPath?: string;
+  }>({ open: false });
+  
+  const [renameDialog, setRenameDialog] = useState<{
+    open: boolean;
+    path?: string;
+    currentName?: string;
+  }>({ open: false });
+  
+  const [deleteDialog, setDeleteDialog] = useState<{
+    open: boolean;
+    path?: string;
+    name?: string;
+    isFolder?: boolean;
+  }>({ open: false });
+
+  // Context menu handlers
+  const handleNewFile = (parentPath?: string) => {
+    setNewFileDialog({ open: true, parentPath });
+  };
+
+  const handleNewFolder = (parentPath?: string) => {
+    setNewFolderDialog({ open: true, parentPath });
+  };
+
+  const handleRename = (path: string) => {
+    const pathParts = path.split('/');
+    const currentName = pathParts[pathParts.length - 1];
+    setRenameDialog({ open: true, path, currentName });
+  };
+
+  const handleDuplicate = (path: string) => {
+    onDuplicate?.(path);
+  };
+
+  const handleDelete = (path: string, isFolder: boolean) => {
+    const pathParts = path.split('/');
+    const name = pathParts[pathParts.length - 1];
+    setDeleteDialog({ open: true, path, name, isFolder });
+  };
+
+  // Dialog confirm handlers
+  const confirmNewFile = (name: string) => {
+    const fullPath = newFileDialog.parentPath
+      ? `${newFileDialog.parentPath}/${name}`
+      : name;
+    onNewFile?.(fullPath);
+  };
+
+  const confirmNewFolder = (name: string) => {
+    const fullPath = newFolderDialog.parentPath
+      ? `${newFolderDialog.parentPath}/${name}`
+      : name;
+    onNewFolder?.(fullPath);
+  };
+
+  const confirmRename = (newName: string) => {
+    if (renameDialog.path) {
+      onRename?.(renameDialog.path, newName);
+    }
+  };
+
+  const confirmDelete = () => {
+    if (deleteDialog.path !== undefined && deleteDialog.isFolder !== undefined) {
+      onDelete?.(deleteDialog.path, deleteDialog.isFolder);
+    }
+  };
+
+  return (
+    <>
+      <FileTreeContextMenu
+        node={null}
+        onNewFile={handleNewFile}
+        onNewFolder={handleNewFolder}
+        onRename={handleRename}
+        onDuplicate={handleDuplicate}
+        onDelete={handleDelete}
+      >
+        <div className={`flex flex-col h-full border-r border-border bg-card ${className}`}>
+          {/* Header */}
+          <div className="h-10 border-b border-border flex items-center justify-between px-3">
+            <span className="text-xs font-semibold text-muted-foreground uppercase">
+              Files
+            </span>
+            
+            <div className="flex items-center gap-1">
+              {onNewFile && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={() => handleNewFile()}
+                  title="New File"
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                </Button>
+              )}
+              
+              {onNewFolder && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={() => handleNewFolder()}
+                  title="New Folder"
+                >
+                  <FolderPlus className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* File Tree */}
+          <ScrollArea className="flex-1">
+            <div className="p-2">
+              {structure.length === 0 ? (
+                <div className="text-xs text-muted-foreground text-center py-8">
+                  No files yet. Create a new file to get started.
+                </div>
+              ) : (
+                <div className="space-y-0.5">
+                  {structure.map((node) => (
+                    node.type === 'folder' ? (
+                      <FileTreeContextMenu
+                        key={node.id}
+                        node={node}
+                        onNewFile={handleNewFile}
+                        onNewFolder={handleNewFolder}
+                        onRename={handleRename}
+                        onDuplicate={handleDuplicate}
+                        onDelete={handleDelete}
+                      >
+                        <div>
+                          <FolderNode
+                            node={node}
+                            activeFilePath={activeFilePath}
+                            onFileClick={onFileClick}
+                            onFolderToggle={onFolderToggle}
+                            onContextMenu={() => setContextNode(node)}
+                            depth={0}
+                          />
+                        </div>
+                      </FileTreeContextMenu>
+                    ) : (
+                      <FileTreeContextMenu
+                        key={node.id}
+                        node={node}
+                        onNewFile={handleNewFile}
+                        onNewFolder={handleNewFolder}
+                        onRename={handleRename}
+                        onDuplicate={handleDuplicate}
+                        onDelete={handleDelete}
+                      >
+                        <div>
+                          <FileNode
+                            node={node}
+                            isActive={node.path === activeFilePath}
+                            onClick={() => onFileClick(node.path)}
+                            onContextMenu={() => setContextNode(node)}
+                            depth={0}
+                          />
+                        </div>
+                      </FileTreeContextMenu>
+                    )
+                  ))}
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+      </FileTreeContextMenu>
+
+      {/* Dialogs */}
+      <FileInputDialog
+        open={newFileDialog.open}
+        onOpenChange={(open) => setNewFileDialog({ open })}
+        title="New File"
+        description="Enter the name for the new file (e.g., utils.rs)"
+        placeholder="filename.rs"
+        onConfirm={confirmNewFile}
+      />
+
+      <FileInputDialog
+        open={newFolderDialog.open}
+        onOpenChange={(open) => setNewFolderDialog({ open })}
+        title="New Folder"
+        description="Enter the name for the new folder"
+        placeholder="folder-name"
+        onConfirm={confirmNewFolder}
+      />
+
+      <FileInputDialog
+        open={renameDialog.open}
+        onOpenChange={(open) => setRenameDialog({ open })}
+        title="Rename"
+        description="Enter the new name"
+        defaultValue={renameDialog.currentName}
+        placeholder="new-name"
+        onConfirm={confirmRename}
+      />
+
+      <DeleteConfirmDialog
+        open={deleteDialog.open}
+        onOpenChange={(open) => setDeleteDialog({ open })}
+        itemName={deleteDialog.name || ''}
+        isFolder={deleteDialog.isFolder || false}
+        onConfirm={confirmDelete}
+      />
+    </>
+  );
+}

package/frontend/components/file-tree/FileTreeSkeleton.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function FileTreeSkeleton() {
+  return (
+    <div className="h-full p-2 space-y-1">
+      {/* Header skeleton */}
+      <div className="flex items-center justify-between px-2 py-2 mb-2">
+        <Skeleton className="h-4 w-24" />
+        <div className="flex gap-1">
+          <Skeleton className="h-6 w-6" />
+          <Skeleton className="h-6 w-6" />
+        </div>
+      </div>
+
+      {/* Folder skeletons */}
+      {[0, 1, 2, 3, 4].map((i) => (
+        <div key={i} className="flex items-center gap-2 px-2 py-1">
+          <Skeleton className="h-4 w-4" />
+          <Skeleton className="h-4 w-32" style={{ width: `${Math.random() * 100 + 80}px` }} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/frontend/components/file-tree/FolderNode.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useState } from 'react';
+import { FileNode as FileNodeType } from '@/types/project';
+import { ChevronRight, ChevronDown, Folder, FolderOpen } from 'lucide-react';
+import { FileNode } from './FileNode';
+import { FileTreeContextMenu } from './ContextMenu';
+import { cn } from '@/lib/utils';
+
+interface FolderNodeProps {
+  node: FileNodeType;
+  activeFilePath: string | null;
+  onFileClick: (path: string) => void;
+  onFolderToggle: (path: string, expanded: boolean) => void;
+  onContextMenu: () => void;
+  depth: number;
+}
+
+export function FolderNode({
+  node,
+  activeFilePath,
+  onFileClick,
+  onFolderToggle,
+  onContextMenu,
+  depth,
+}: FolderNodeProps) {
+  const [isExpanded, setIsExpanded] = useState(node.expanded || false);
+  const paddingLeft = depth * 12 + 8;
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const newExpanded = !isExpanded;
+    setIsExpanded(newExpanded);
+    onFolderToggle(node.path, newExpanded);
+  };
+
+  const hasChildren = node.children && node.children.length > 0;
+
+  return (
+    <div className="select-none">
+      {/* Folder Header */}
+      <div
+        className={cn(
+          'flex items-center gap-1 px-2 py-1.5 rounded-md cursor-pointer text-sm',
+          'hover:bg-accent transition-colors'
+        )}
+        style={{ paddingLeft: `${paddingLeft}px` }}
+        onClick={handleToggle}
+        onContextMenu={(e) => {
+          e.stopPropagation();
+          onContextMenu();
+        }}
+      >
+        {/* Chevron */}
+        <div className="flex items-center justify-center w-4 h-4">
+          {hasChildren ? (
+            isExpanded ? (
+              <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+            )
+          ) : null}
+        </div>
+
+        {/* Folder Icon */}
+        {isExpanded ? (
+          <FolderOpen className="h-4 w-4 text-blue-500" />
+        ) : (
+          <Folder className="h-4 w-4 text-blue-500" />
+        )}
+
+        {/* Folder Name */}
+        <span className="truncate">{node.name}</span>
+      </div>
+
+      {/* Children (when expanded) */}
+      {isExpanded && hasChildren && (
+        <div className="space-y-0.5">
+          {node.children!.map((childNode) => (
+            childNode.type === 'folder' ? (
+              <FolderNode
+                key={childNode.id}
+                node={childNode}
+                activeFilePath={activeFilePath}
+                onFileClick={onFileClick}
+                onFolderToggle={onFolderToggle}
+                onContextMenu={onContextMenu}
+                depth={depth + 1}
+              />
+            ) : (
+              <FileNode
+                key={childNode.id}
+                node={childNode}
+                isActive={childNode.path === activeFilePath}
+                onClick={() => onFileClick(childNode.path)}
+                onContextMenu={onContextMenu}
+                depth={depth + 1}
+              />
+            )
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/frontend/components/github/GitHubLoadingDialog.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Progress } from '@/components/ui/progress';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { CheckCircle2, Loader2, XCircle, Github } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { GitHubLoadProgress } from '@/lib/github-loader';
+
+interface GitHubLoadingDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  progress: GitHubLoadProgress | null;
+  onRetry?: () => void;
+}
+
+export function GitHubLoadingDialog({
+  open,
+  onOpenChange,
+  progress,
+  onRetry,
+}: GitHubLoadingDialogProps) {
+  const [dots, setDots] = useState('');
+
+  // Animated dots for loading
+  useEffect(() => {
+    if (progress?.stage === 'downloading-files' || progress?.stage === 'fetching-tree') {
+      const interval = setInterval(() => {
+        setDots((prev) => (prev.length >= 3 ? '' : prev + '.'));
+      }, 500);
+      return () => clearInterval(interval);
+    }
+  }, [progress?.stage]);
+
+  const getStageIcon = () => {
+    if (!progress) return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
+
+    switch (progress.stage) {
+      case 'complete':
+        return <CheckCircle2 className="h-5 w-5 text-green-500" />;
+      case 'error':
+        return <XCircle className="h-5 w-5 text-red-500" />;
+      default:
+        return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
+    }
+  };
+
+  const getStageTitle = () => {
+    if (!progress) return 'Loading...';
+
+    switch (progress.stage) {
+      case 'validating':
+        return 'Validating Repository';
+      case 'fetching-tree':
+        return 'Fetching Repository Structure';
+      case 'downloading-files':
+        return 'Downloading Files';
+      case 'complete':
+        return 'Success!';
+      case 'error':
+        return 'Error';
+      default:
+        return 'Loading...';
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            {progress?.stage === 'error' ? (
+              getStageIcon()
+            ) : progress?.stage === 'complete' ? (
+              getStageIcon()
+            ) : (
+              <Github className="h-5 w-5 text-muted-foreground" />
+            )}
+            <DialogTitle>{getStageTitle()}</DialogTitle>
+          </div>
+          <DialogDescription>
+            {progress?.stage === 'complete'
+              ? 'Repository loaded successfully'
+              : progress?.stage === 'error'
+              ? 'Failed to load repository'
+              : 'Loading from GitHub...'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Progress Bar */}
+          {progress && progress.stage !== 'error' && progress.stage !== 'complete' && (
+            <Progress value={progress.progress} className="w-full" />
+          )}
+
+          {/* Status Message */}
+          {progress && (
+            <div className="space-y-2">
+              <p className="text-sm text-muted-foreground">
+                {progress.message}
+                {(progress.stage === 'downloading-files' || progress.stage === 'fetching-tree') &&
+                  dots}
+              </p>
+
+              {/* File Progress */}
+              {progress.filesTotal && progress.filesDownloaded !== undefined && (
+                <div className="text-xs text-muted-foreground">
+                  {progress.filesDownloaded} / {progress.filesTotal} files downloaded
+                </div>
+              )}
+
+              {/* Current File */}
+              {progress.currentFile && (
+                <div className="text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded">
+                  {progress.currentFile}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Error Message */}
+          {progress?.stage === 'error' && (
+            <div className="space-y-3">
+              <Alert variant="destructive">
+                <XCircle className="h-4 w-4" />
+                <AlertDescription className="whitespace-pre-wrap">
+                  {progress.message}
+                </AlertDescription>
+              </Alert>
+
+              {/* Help text for common errors */}
+              {progress.message.includes('rate limit') && (
+                <div className="text-xs text-muted-foreground space-y-1">
+                  <p className="font-semibold">To increase rate limits:</p>
+                  <ol className="list-decimal list-inside space-y-1">
+                    <li>Create a GitHub Personal Access Token</li>
+                    <li>Add NEXT_PUBLIC_GITHUB_TOKEN to .env.local</li>
+                    <li>Restart your dev server</li>
+                  </ol>
+                </div>
+              )}
+
+              {progress.message.includes('not found') && (
+                <div className="text-xs text-muted-foreground">
+                  <p>Make sure the repository URL is correct and the repository is public.</p>
+                </div>
+              )}
+
+              {progress.message.includes('private') && (
+                <div className="text-xs text-muted-foreground">
+                  <p>This repository is private. Public repositories only are supported.</p>
+                </div>
+              )}
+
+              {progress.message.includes('Network error') && (
+                <div className="text-xs text-muted-foreground">
+                  <p>Check your internet connection and try again.</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Success Message */}
+          {progress?.stage === 'complete' && (
+            <Alert>
+              <CheckCircle2 className="h-4 w-4" />
+              <AlertDescription>
+                Loaded {progress.filesDownloaded} files successfully
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Actions */}
+          {progress?.stage === 'error' && onRetry && (
+            <div className="flex gap-2">
+              <Button onClick={onRetry} className="flex-1">
+                Retry
+              </Button>
+              <Button onClick={() => onOpenChange(false)} variant="outline" className="flex-1">
+                Cancel
+              </Button>
+            </div>
+          )}
+
+          {progress?.stage === 'complete' && (
+            <Button onClick={() => onOpenChange(false)} className="w-full">
+              Continue to IDE
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/components/github/GitHubMetadataBanner.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { ExternalLink, Github, GitBranch, Folder } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { URLCopyButton } from './URLCopyButton';
+
+interface GitHubMetadataBannerProps {
+  owner: string;
+  repo: string;
+  branch: string;
+  url: string;
+  folderPath?: string;  // ✅ ADD THIS
+}
+
+export function GitHubMetadataBanner({ 
+  owner, 
+  repo, 
+  branch, 
+  url,
+  folderPath  // ✅ ADD THIS
+}: GitHubMetadataBannerProps) {
+  return (
+    <div className="h-8 border-b border-border bg-blue-500/10 flex items-center justify-between px-4 text-xs">
+      <div className="flex items-center gap-3 text-blue-600 dark:text-blue-400">
+        <div className="flex items-center gap-1.5">
+          <Github className="h-3.5 w-3.5" />
+          <span className="font-medium">{owner}/{repo}</span>
+        </div>
+        <div className="flex items-center gap-1.5 text-muted-foreground">
+          <GitBranch className="h-3 w-3" />
+          <span>{branch}</span>
+        </div>
+        {/* ✅ NEW: Show folder path if loading specific folder */}
+        {folderPath && (
+          <div className="flex items-center gap-1.5 text-muted-foreground">
+            <Folder className="h-3 w-3" />
+            <span>/{folderPath}</span>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+      {/* ✅ NEW: Share button */}
+      <URLCopyButton
+          githubUrl={url}
+          branch={branch}
+          folderPath={folderPath}
+        />
+      
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 text-xs gap-1"
+        onClick={() => window.open(url, '_blank')}
+      >
+        View on GitHub
+        <ExternalLink className="h-3 w-3" />
+      </Button>
+    </div>
+    </div>
+  );
+}