automagik-forge 0.1.13 → 0.1.14

package/frontend/src/components/ui/dropdown-menu.tsx

@@ -1,198 +0,0 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-[10000] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-[10000] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};

package/frontend/src/components/ui/file-search-textarea.tsx

@@ -1,292 +0,0 @@
-import { KeyboardEvent, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { AutoExpandingTextarea } from '@/components/ui/auto-expanding-textarea';
-import { projectsApi } from '@/lib/api';
-
-interface FileSearchResult {
-  path: string;
-  name: string;
-}
-
-interface FileSearchTextareaProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  rows?: number;
-  disabled?: boolean;
-  className?: string;
-  projectId?: string;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
-  maxRows?: number;
-}
-
-export function FileSearchTextarea({
-  value,
-  onChange,
-  placeholder,
-  rows = 3,
-  disabled = false,
-  className,
-  projectId,
-  onKeyDown,
-  maxRows = 10,
-}: FileSearchTextareaProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [searchResults, setSearchResults] = useState<FileSearchResult[]>([]);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-
-  const [atSymbolPosition, setAtSymbolPosition] = useState(-1);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Search for files when query changes
-  useEffect(() => {
-    if (!searchQuery || !projectId || searchQuery.length < 1) {
-      setSearchResults([]);
-      setShowDropdown(false);
-      return;
-    }
-
-    const searchFiles = async () => {
-      setIsLoading(true);
-
-      try {
-        const result = await projectsApi.searchFiles(projectId, searchQuery);
-        setSearchResults(result);
-        setShowDropdown(true);
-        setSelectedIndex(-1);
-      } catch (error) {
-        console.error('Failed to search files:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    const debounceTimer = setTimeout(searchFiles, 300);
-    return () => clearTimeout(debounceTimer);
-  }, [searchQuery, projectId]);
-
-  // Handle text changes and detect @ symbol
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = e.target.value;
-    const newCursorPosition = e.target.selectionStart || 0;
-
-    onChange(newValue);
-
-    // Check if @ was just typed
-    const textBeforeCursor = newValue.slice(0, newCursorPosition);
-    const lastAtIndex = textBeforeCursor.lastIndexOf('@');
-
-    if (lastAtIndex !== -1) {
-      // Check if there's no space after the @ (still typing the search query)
-      const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1);
-      const hasSpace = textAfterAt.includes(' ') || textAfterAt.includes('\n');
-
-      if (!hasSpace) {
-        setAtSymbolPosition(lastAtIndex);
-        setSearchQuery(textAfterAt);
-        return;
-      }
-    }
-
-    // If no valid @ context, hide dropdown
-    setShowDropdown(false);
-    setSearchQuery('');
-    setAtSymbolPosition(-1);
-  };
-
-  // Handle keyboard navigation
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    // Handle dropdown navigation first
-    if (showDropdown && searchResults.length > 0) {
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          setSelectedIndex((prev) =>
-            prev < searchResults.length - 1 ? prev + 1 : 0
-          );
-          return;
-        case 'ArrowUp':
-          e.preventDefault();
-          setSelectedIndex((prev) =>
-            prev > 0 ? prev - 1 : searchResults.length - 1
-          );
-          return;
-        case 'Enter':
-          if (selectedIndex >= 0) {
-            e.preventDefault();
-            selectFile(searchResults[selectedIndex]);
-            return;
-          }
-          break;
-        case 'Escape':
-          e.preventDefault();
-          setShowDropdown(false);
-          setSearchQuery('');
-          setAtSymbolPosition(-1);
-          return;
-      }
-    }
-
-    // Call the passed onKeyDown handler
-    onKeyDown?.(e);
-  };
-
-  // Select a file and insert it into the text
-  const selectFile = (file: FileSearchResult) => {
-    if (atSymbolPosition === -1) return;
-
-    const beforeAt = value.slice(0, atSymbolPosition);
-    const afterQuery = value.slice(atSymbolPosition + 1 + searchQuery.length);
-    const newValue = beforeAt + file.path + afterQuery;
-
-    onChange(newValue);
-    setShowDropdown(false);
-    setSearchQuery('');
-    setAtSymbolPosition(-1);
-
-    // Focus back to textarea
-    setTimeout(() => {
-      if (textareaRef.current) {
-        const newCursorPos = atSymbolPosition + file.path.length;
-        textareaRef.current.focus();
-        textareaRef.current.setSelectionRange(newCursorPos, newCursorPos);
-      }
-    }, 0);
-  };
-
-  // Calculate dropdown position relative to textarea (simpler, more stable approach)
-  const getDropdownPosition = () => {
-    if (!textareaRef.current) return { top: 0, left: 0, maxHeight: 240 };
-
-    const textareaRect = textareaRef.current.getBoundingClientRect();
-    const dropdownWidth = 256; // min-w-64 = 256px
-    const maxDropdownHeight = 320;
-    const minDropdownHeight = 120;
-
-    // Position dropdown below the textarea by default
-    let finalTop = textareaRect.bottom + 4; // 4px gap
-    let finalLeft = textareaRect.left;
-    let maxHeight = maxDropdownHeight;
-
-    // Ensure dropdown doesn't go off the right edge
-    if (finalLeft + dropdownWidth > window.innerWidth - 16) {
-      finalLeft = window.innerWidth - dropdownWidth - 16;
-    }
-
-    // Ensure dropdown doesn't go off the left edge
-    if (finalLeft < 16) {
-      finalLeft = 16;
-    }
-
-    // Calculate available space below and above textarea
-    const availableSpaceBelow = window.innerHeight - textareaRect.bottom - 32;
-    const availableSpaceAbove = textareaRect.top - 32;
-
-    // If not enough space below, position above
-    if (
-      availableSpaceBelow < minDropdownHeight &&
-      availableSpaceAbove > availableSpaceBelow
-    ) {
-      // Get actual height from rendered dropdown
-      const actualHeight =
-        dropdownRef.current?.getBoundingClientRect().height ||
-        minDropdownHeight;
-      finalTop = textareaRect.top - actualHeight - 4;
-      maxHeight = Math.min(
-        maxDropdownHeight,
-        Math.max(availableSpaceAbove, minDropdownHeight)
-      );
-    } else {
-      // Position below with available space
-      maxHeight = Math.min(
-        maxDropdownHeight,
-        Math.max(availableSpaceBelow, minDropdownHeight)
-      );
-    }
-
-    return { top: finalTop, left: finalLeft, maxHeight };
-  };
-
-  // Use effect to reposition when dropdown content changes
-  useEffect(() => {
-    if (showDropdown && dropdownRef.current) {
-      // Small delay to ensure content is rendered
-      setTimeout(() => {
-        const newPosition = getDropdownPosition();
-        if (dropdownRef.current) {
-          dropdownRef.current.style.top = `${newPosition.top}px`;
-          dropdownRef.current.style.left = `${newPosition.left}px`;
-          dropdownRef.current.style.maxHeight = `${newPosition.maxHeight}px`;
-        }
-      }, 0);
-    }
-  }, [searchResults.length, showDropdown]);
-
-  const dropdownPosition = getDropdownPosition();
-
-  return (
-    <div
-      className={`relative ${className?.includes('flex-1') ? 'flex-1' : ''}`}
-    >
-      <AutoExpandingTextarea
-        ref={textareaRef}
-        value={value}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        rows={rows}
-        disabled={disabled}
-        className={className}
-        maxRows={maxRows}
-      />
-
-      {showDropdown &&
-        createPortal(
-          <div
-            ref={dropdownRef}
-            className="fixed bg-background border border-border rounded-md shadow-lg overflow-y-auto min-w-64"
-            style={{
-              top: dropdownPosition.top,
-              left: dropdownPosition.left,
-              maxHeight: dropdownPosition.maxHeight,
-              zIndex: 10000, // Higher than dialog z-[9999]
-            }}
-          >
-            {isLoading ? (
-              <div className="p-2 text-sm text-muted-foreground">
-                Searching...
-              </div>
-            ) : searchResults.length === 0 ? (
-              <div className="p-2 text-sm text-muted-foreground">
-                No files found
-              </div>
-            ) : (
-              <div className="py-1">
-                {searchResults.map((file, index) => (
-                  <div
-                    key={file.path}
-                    className={`px-3 py-2 cursor-pointer text-sm ${
-                      index === selectedIndex
-                        ? 'bg-blue-50 text-blue-900'
-                        : 'hover:bg-muted'
-                    }`}
-                    onClick={() => selectFile(file)}
-                  >
-                    <div className="font-medium truncate">{file.name}</div>
-                    <div className="text-xs text-muted-foreground truncate">
-                      {file.path}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>,
-          document.body
-        )}
-    </div>
-  );
-}