termcast 1.3.21 → 1.3.24

package/src/components/form/dropdown.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useLayoutEffect,
 } from 'react'
-import { BoxRenderable } from '@opentui/core'
+import { BoxRenderable, ScrollBoxRenderable } from '@opentui/core'
 import { useKeyboard } from '@opentui/react'
 import {
   useFormContext,
@@ -25,6 +25,7 @@ import {
 import { WithLeftBorder } from './with-left-border'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useFormNavigationHelpers } from './use-form-navigation'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface DropdownProps extends FormItemProps<string | string[]> {
   placeholder?: string
@@ -62,6 +63,7 @@ interface FormDropdownItemDescendant {
   title: string
   icon?: string
   section?: string // Track which section this item belongs to
+  elementRef?: BoxRenderable | null
 }
 
 const {
@@ -73,13 +75,12 @@ const {
 // Context for dropdown state
 interface FormDropdownContextValue {
   focusedIndex: number
-  offset: number
-  itemsPerPage: number
   isFocused: boolean
   handleSelect: (descendantId: string) => void
   field: DropdownFieldType
   props: DropdownProps
   descendantsContext: DescendantContextType<FormDropdownItemDescendant>
+  scrollBoxRef: React.RefObject<ScrollBoxRenderable | null>
 }
 
 // Separate context for section information
@@ -91,21 +92,20 @@ const SectionContext = createContext<SectionContextValue>({
   currentSection: undefined,
 })
 
-const itemsPerPage = 4
 const FormDropdownContext = createContext<FormDropdownContextValue>({
   focusedIndex: 0,
-  offset: 0,
-  itemsPerPage,
   isFocused: false,
   handleSelect: () => {},
   descendantsContext: {} as any,
   field: {} as DropdownFieldType,
   props: {} as DropdownProps,
+  scrollBoxRef: { current: null },
 })
 
 const DropdownItem = (props: DropdownItemProps) => {
   const context = useContext(FormDropdownContext)
   const sectionContext = useContext(SectionContext)
+  const elementRef = useRef<BoxRenderable | null>(null)
 
   // Register as descendant
   const descendant = useFormDropdownDescendant({
@@ -113,16 +113,9 @@ const DropdownItem = (props: DropdownItemProps) => {
     title: props.title,
     icon: props.icon,
     section: sectionContext.currentSection,
+    elementRef: elementRef.current,
   })
 
-  // Hide items that are outside the visible range
-  if (
-    descendant.index < context.offset ||
-    descendant.index >= context.offset + context.itemsPerPage
-  ) {
-    return null
-  }
-
   const isFocused = descendant.index === context.focusedIndex
 
   // Check if this item is selected based on field value
@@ -144,54 +137,34 @@ const DropdownItem = (props: DropdownItemProps) => {
   })()
 
   return (
-    <WithLeftBorder
-      key={props.value}
-      isFocused={context.isFocused}
-      paddingLeft={0}
-      paddingBottom={0}
-    >
-      <text
-        fg={
-          context.isFocused && isFocused
-            ? Theme.accent
-            : context.isFocused
-              ? Theme.text
-              : Theme.textMuted
-        }
-        onMouseDown={() => {
-          context.handleSelect(descendant.descendantId)
-        }}
+    <box ref={elementRef} key={props.value}>
+      <WithLeftBorder
+        isFocused={context.isFocused}
+        paddingLeft={0}
+        paddingBottom={0}
       >
-        {context.isFocused && isFocused ? '› ' : '  '}
-        {isSelected ? '●' : '○'} {props.title}
-      </text>
-    </WithLeftBorder>
+        <text
+          fg={
+            context.isFocused && isFocused
+              ? Theme.accent
+              : context.isFocused
+                ? Theme.text
+                : Theme.textMuted
+          }
+          onMouseDown={() => {
+            context.handleSelect(descendant.descendantId)
+          }}
+        >
+          {context.isFocused && isFocused ? '› ' : '  '}
+          {isSelected ? '●' : '○'} {props.title}
+        </text>
+      </WithLeftBorder>
+    </box>
   )
 }
 
 const DropdownSection = (props: DropdownSectionProps) => {
   const parentContext = useContext(FormDropdownContext)
-  const [isVisible, setIsVisible] = useState(false)
-
-  // Update visibility when offset changes
-  useLayoutEffect(() => {
-    if (!props.title) {
-      setIsVisible(true)
-      return
-    }
-
-    const items = Object.values(parentContext.descendantsContext.map.current)
-    logger.log('DropdownSection: items', items)
-    const hasVisibleItems = items.some((item) => {
-      return (
-        item.props?.section === props.title &&
-        item.index >= parentContext.offset &&
-        item.index < parentContext.offset + parentContext.itemsPerPage
-      )
-    })
-
-    setIsVisible(hasVisibleItems)
-  }, [parentContext.offset, props.title, parentContext.itemsPerPage])
 
   // Create section context value
   const sectionContextValue = useMemo(
@@ -204,7 +177,7 @@ const DropdownSection = (props: DropdownSectionProps) => {
   return (
     <SectionContext.Provider value={sectionContextValue}>
       <box flexDirection='column'>
-        {props.title && isVisible && (
+        {props.title && (
           <WithLeftBorder
             paddingTop={0}
             paddingBottom={0}
@@ -232,12 +205,16 @@ const DropdownContent = ({
 }: DropdownContentProps) => {
   const descendantsContext = useFormDropdownDescendants()
   const isInFocus = useIsInFocus()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const focusContext = useFocusContext()
+  const { focusedField, setFocusedField } = focusContext
   const isFocused = focusedField === props.id
   const [focusedIndex, setFocusedIndex] = useState(0)
-  const [offset, setOffset] = useState(0)
 
   const elementRef = useRef<BoxRenderable>(null)
+  const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
+
+  const typeAheadTextRef = useRef('')
+  const typeAheadTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // Register as form field descendant for scroll support
   useFormFieldDescendant({
@@ -246,9 +223,26 @@ const DropdownContent = ({
   })
 
   const [selectedTitles, setSelectedTitles] = useState<string[]>([])
-  const [itemsCount, setItemsCount] = useState(0)
 
-  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(props.id)
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(
+    props.id,
+  )
+
+  const scrollToItem = (item: { props?: FormDropdownItemDescendant }) => {
+    const scrollBox = scrollBoxRef.current
+    const itemElementRef = item.props?.elementRef
+    if (!scrollBox || !itemElementRef) return
+
+    const contentY = scrollBox.content?.y || 0
+    const viewportHeight = scrollBox.viewport?.height || 5
+
+    // Calculate item position relative to content
+    const itemTop = itemElementRef.y - contentY
+
+    // Scroll so the top of the item is centered in the viewport
+    const targetScrollTop = itemTop - viewportHeight / 2
+    scrollBox.scrollTo(Math.max(0, targetScrollTop))
+  }
 
   // Helper to get value for a descendantId
   const getValueForDescendantId = (
@@ -296,46 +290,26 @@ const DropdownContent = ({
   useKeyboard((evt) => {
     if (!isFocused || !isInFocus) return
 
-    const items = Object.values(descendantsContext.map.current).filter(
-      (item) => item.index !== -1,
-    )
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1)
+      .sort((a, b) => a.index - b.index)
     const itemCount = items.length
 
     if (itemCount > 0) {
       if (evt.name === 'down') {
-        setFocusedIndex((prev) => {
-          const nextIndex = (prev + 1) % itemCount
-
-          // Update offset only when the focused item is at the last position and there are more items
-          const visibleEnd = offset + itemsPerPage - 1
-          if (
-            prev === visibleEnd &&
-            nextIndex < itemCount &&
-            nextIndex > prev
-          ) {
-            // Scroll down by one when at the last visible item
-            setOffset(offset + 1)
-          } else if (nextIndex < prev) {
-            // Wrapped to beginning
-            setOffset(0)
-          }
-
-          return nextIndex
-        })
+        const nextIndex = (focusedIndex + 1) % itemCount
+        setFocusedIndex(nextIndex)
+        const nextItem = items[nextIndex]
+        if (nextItem) {
+          scrollToItem(nextItem)
+        }
       } else if (evt.name === 'up') {
-        setFocusedIndex((prev) => {
-          const nextIndex = (prev - 1 + itemCount) % itemCount
-
-          // Update offset if we're going above the visible range
-          if (nextIndex < offset) {
-            setOffset(Math.max(0, nextIndex))
-          } else if (nextIndex >= offset + itemsPerPage) {
-            // Wrapped to end
-            setOffset(Math.max(0, itemCount - itemsPerPage))
-          }
-
-          return nextIndex
-        })
+        const nextIndex = (focusedIndex - 1 + itemCount) % itemCount
+        setFocusedIndex(nextIndex)
+        const nextItem = items[nextIndex]
+        if (nextItem) {
+          scrollToItem(nextItem)
+        }
       } else if (evt.name === 'return' || evt.name === 'space') {
         // Toggle selection of current focused item
         const entries = Object.entries(descendantsContext.map.current)
@@ -357,21 +331,41 @@ const DropdownContent = ({
       } else {
         navigateToNext()
       }
+      return
     }
-  })
 
-  // Update active item count when descendants change
-  useLayoutEffect(() => {
-    let itemCount = 0
-    const entries = Object.entries(descendantsContext.map.current)
+    // Type-ahead search
+    if (
+      evt.name.length === 1 &&
+      /^[a-zA-Z0-9]$/.test(evt.name) &&
+      !evt.ctrl &&
+      !evt.meta &&
+      !evt.option
+    ) {
+      if (typeAheadTimeoutRef.current) {
+        clearTimeout(typeAheadTimeoutRef.current)
+      }
+
+      typeAheadTextRef.current += evt.name.toLowerCase()
+      const searchText = typeAheadTextRef.current
 
-    entries.forEach(([id, item]) => {
-      if (item.index !== -1) {
-        itemCount++
+      const matchingItem =
+        items.find((item) => {
+          return item.props?.title?.toLowerCase().startsWith(searchText)
+        }) ||
+        items.find((item) => {
+          return item.props?.title?.toLowerCase().includes(searchText)
+        })
+
+      if (matchingItem) {
+        setFocusedIndex(matchingItem.index)
+        scrollToItem(matchingItem)
       }
-    })
 
-    setItemsCount(itemCount)
+      typeAheadTimeoutRef.current = setTimeout(() => {
+        typeAheadTextRef.current = ''
+      }, 300)
+    }
   })
 
   // Initialize selected titles from field value only once when descendants are loaded
@@ -405,27 +399,30 @@ const DropdownContent = ({
   const contextValue: FormDropdownContextValue = {
     focusedIndex,
     descendantsContext,
-    offset,
-    itemsPerPage,
     isFocused,
     handleSelect,
     field,
     props,
+    scrollBoxRef,
   }
 
   return (
     <FormDropdownDescendantsProvider value={descendantsContext}>
       <FormDropdownContext.Provider value={contextValue}>
         <box ref={elementRef} flexDirection='column'>
-          <WithLeftBorder withDiamond isFocused={isFocused}>
-            <text
-              fg={isFocused ? Theme.primary : Theme.text}
+          <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
+            <box
               onMouseDown={() => {
                 setFocusedField(props.id)
               }}
             >
-              {props.title}
-            </text>
+              <LoadingText
+                isLoading={isFocused && focusContext.isLoading}
+                color={isFocused ? Theme.primary : Theme.text}
+              >
+                {props.title || ''}
+              </LoadingText>
+            </box>
           </WithLeftBorder>
           <WithLeftBorder isFocused={isFocused}>
             <text
@@ -440,12 +437,27 @@ const DropdownContent = ({
                 : props.placeholder || 'Select...'}
             </text>
           </WithLeftBorder>
-          {props.children}
-          {itemsCount > itemsPerPage && (
-            <WithLeftBorder isFocused={isFocused}>
-              <text fg={Theme.textMuted}>↑↓ to see more options</text>
-            </WithLeftBorder>
-          )}
+
+          <scrollbox
+            ref={scrollBoxRef}
+            maxHeight={5}
+            flexShrink={1}
+            style={{
+              rootOptions: {
+                flexShrink: 1,
+              },
+              viewportOptions: {
+                flexShrink: 1,
+              },
+              scrollbarOptions: {
+                visible: false,
+              },
+            }}
+          >
+            {props.children}
+          </scrollbox>
+          <WithLeftBorder children={<box />} isFocused={isFocused} />
+
           {(fieldState.error || props.error) && (
             <WithLeftBorder isFocused={isFocused}>
               <text fg={Theme.error}>

package/src/components/form/file-autocomplete.tsx

@@ -1,151 +1,133 @@
 import React, { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Theme } from 'termcast/src/theme'
-import { TextareaRenderable, RGBA } from '@opentui/core'
-import { searchFiles, parsePath } from '../../utils/file-system'
+import { TextareaRenderable } from '@opentui/core'
+import { listAllFiles } from '../../utils/file-system'
 import { useKeyboard } from '@opentui/react'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 
-const backgroundPanel = RGBA.fromHex(Theme.backgroundPanel)
-const primary = RGBA.fromHex(Theme.primary)
-const border = RGBA.fromHex(Theme.border)
-
-export interface FileAutocompleteProps {
+export interface FileAutocompleteDialogProps {
   onSelect: (path: string) => void
-  visible: boolean
-  onVisibilityChange: (visible: boolean) => void
+  onClose: () => void
   inputRef: React.RefObject<TextareaRenderable | null>
-  anchorRef: React.RefObject<any>
-  searchTrigger: number
   canChooseFiles?: boolean
   canChooseDirectories?: boolean
   initialDirectory?: string
 }
 
-export const FileAutocomplete = ({
+function fuzzyMatch(text: string, query: string): boolean {
+  if (!query) return true
+  const lowerText = text.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+  
+  let queryIndex = 0
+  for (let i = 0; i < lowerText.length && queryIndex < lowerQuery.length; i++) {
+    if (lowerText[i] === lowerQuery[queryIndex]) {
+      queryIndex++
+    }
+  }
+  return queryIndex === lowerQuery.length
+}
+
+export const FileAutocompleteDialog = ({
   onSelect,
-  visible,
-  onVisibilityChange,
+  onClose,
   inputRef,
-  anchorRef,
-  searchTrigger,
   canChooseFiles = true,
   canChooseDirectories = false,
   initialDirectory,
-}: FileAutocompleteProps): any => {
+}: FileAutocompleteDialogProps): any => {
   const [selectedIndex, setSelectedIndex] = useState(0)
+  const [filter, setFilter] = useState(() => inputRef.current?.plainText || '')
   const isInFocus = useIsInFocus()
 
-  const inputValue = inputRef.current?.plainText || ''
-  const defaultBasePath = initialDirectory || '.'
-  const { basePath, prefix } = inputValue
-    ? parsePath(inputValue)
-    : { basePath: defaultBasePath, prefix: '' }
-
-  const { data: items = [], isLoading: loading } = useQuery({
-    queryKey: ['file-autocomplete', basePath, prefix, searchTrigger, canChooseFiles, canChooseDirectories],
+  const { data: allFiles = [], isLoading } = useQuery({
+    queryKey: ['file-list', initialDirectory, canChooseFiles, canChooseDirectories],
     queryFn: async () => {
-      const results = await searchFiles(basePath, prefix)
-      const filtered = results.filter((item) => {
-        if (item.isDirectory) return true
+      // Always include directories in the listing, filter afterwards
+      const files = await listAllFiles({
+        basePath: initialDirectory || '.',
+        maxDepth: 4,
+        maxFiles: 500,
+        includeDirectories: true,
+      })
+      
+      // Filter based on canChooseFiles/canChooseDirectories
+      return files.filter((f) => {
+        const isDir = f.endsWith('/')
+        if (isDir) {
+          return canChooseDirectories
+        }
         return canChooseFiles
       })
-      setSelectedIndex(0)
-      return filtered
     },
-    enabled: visible,
   })
 
-  const directoryOnlyMode = canChooseDirectories && !canChooseFiles
+  // Filter files based on current input
+  const filteredFiles = allFiles.filter((file) => fuzzyMatch(file, filter))
+  const visibleFiles = filteredFiles.slice(0, 10)
 
   useKeyboard((evt) => {
-    if (!visible || !isInFocus) return
+    if (!isInFocus) return
 
     if (evt.name === 'up') {
-      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1))
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : visibleFiles.length - 1))
     } else if (evt.name === 'down') {
-      setSelectedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0))
-    } else if (evt.name === 'escape') {
-      onVisibilityChange(false)
-    } else if (evt.name === 'return') {
-      if (items[selectedIndex]) {
-        const value = inputRef.current?.plainText || ''
-        const selectedItem = items[selectedIndex]
-        const newValue =
-          value.substring(0, value.lastIndexOf('/') + 1) + selectedItem.name
-
-        if (selectedItem.isDirectory) {
-          const fullPath = newValue + '/'
-          inputRef.current?.setText(fullPath)
-          inputRef.current!.cursorOffset = fullPath.length
-        } else {
-          onSelect(newValue)
-          onVisibilityChange(false)
-        }
+      setSelectedIndex((prev) => (prev < visibleFiles.length - 1 ? prev + 1 : 0))
+    } else if (evt.name === 'return' || evt.name === 'tab') {
+      const selected = visibleFiles[selectedIndex]
+      if (selected) {
+        const path = selected.endsWith('/') ? selected.slice(0, -1) : selected
+        inputRef.current?.setText(path)
+        onSelect(path)
+        onClose()
       }
-    } else if (evt.name === 'right') {
-      if (items[selectedIndex]) {
-        const value = inputRef.current?.plainText || ''
-        const selectedItem = items[selectedIndex]
-        const newValue =
-          value.substring(0, value.lastIndexOf('/') + 1) + selectedItem.name
-        onSelect(newValue)
-        onVisibilityChange(false)
+    } else if (evt.name === 'backspace') {
+      if (filter.length > 0) {
+        const newFilter = filter.slice(0, -1)
+        setFilter(newFilter)
+        setSelectedIndex(0)
       }
+    } else if (evt.name && evt.name.length === 1 && !evt.ctrl && !evt.meta) {
+      // Single character input
+      const newFilter = filter + evt.name
+      setFilter(newFilter)
+      setSelectedIndex(0)
     }
   })
 
-  if (!visible || items.length === 0) return null
-
-  const anchorElement = anchorRef.current
-  if (!anchorElement) return null
-
-  const maxVisible = 8
-  const visibleItems = items.slice(0, maxVisible)
-  const displayHeight = visibleItems.length + 1
-
-  const contentWidth = anchorElement.width - 2
-
-  const hintText = directoryOnlyMode
-    ? '↑↓ navigate  ⏎ open folder  → select folder  esc close'
-    : '↑↓ navigate  ⏎ open/select  → select  esc close'
+  const hintText = '↑↓ navigate  ⏎/tab select  esc close'
 
   return (
-    <box
-      position='absolute'
-      top={anchorElement.y - displayHeight - 2}
-      left={anchorElement.x}
-      width={anchorElement.width}
-      height={displayHeight + 2}
-      zIndex={1000}
-      borderStyle='single'
-      borderColor={border}
-      backgroundColor={backgroundPanel}
-      shouldFill
-    >
-      <box flexDirection='column' backgroundColor={backgroundPanel} shouldFill>
-        {loading ? (
-          <text fg={Theme.textMuted}> Loading...</text>
-        ) : (
-          <>
-            {visibleItems.map((item, index) => {
-              const icon = item.isDirectory ? '📁 ' : '📄 '
-              const text = ' ' + icon + item.name
-              const padded = text.padEnd(contentWidth, ' ')
-              return (
-                <text
-                  key={item.path}
-                  fg={index === selectedIndex ? Theme.background : Theme.text}
-                  bg={index === selectedIndex ? Theme.primary : Theme.backgroundPanel}
-                >
-                  {padded}
-                </text>
-              )
-            })}
-            <text fg={Theme.textMuted}> {hintText}</text>
-          </>
-        )}
+    <box flexDirection='column' paddingLeft={1} paddingRight={1}>
+      <box flexDirection='row'>
+        <text fg={Theme.textMuted}>Filter: </text>
+        <text fg={Theme.primary}>{filter || '(type to filter)'}</text>
       </box>
+      <box height={1} />
+      {isLoading ? (
+        <text fg={Theme.textMuted}>Loading files...</text>
+      ) : visibleFiles.length === 0 ? (
+        <text fg={Theme.textMuted}>No files found</text>
+      ) : (
+        <>
+          {visibleFiles.map((file, index) => {
+            const isDir = file.endsWith('/')
+            const icon = isDir ? '📁 ' : '📄 '
+            return (
+              <text
+                key={file}
+                fg={index === selectedIndex ? Theme.background : Theme.text}
+                bg={index === selectedIndex ? Theme.primary : Theme.backgroundPanel}
+              >
+                {' '}{icon}{file}
+              </text>
+            )
+          })}
+        </>
+      )}
+      <box height={1} />
+      <text fg={Theme.textMuted}>{hintText}</text>
     </box>
   )
 }