termcast 1.3.9

package/src/components/dropdown.tsx

@@ -0,0 +1,438 @@
+import React, {
+  ReactNode,
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  createContext,
+  useContext,
+} from 'react'
+import { useKeyboard } from '@opentui/react'
+import { TextAttributes } from '@opentui/core'
+import { Theme } from 'termcast/src/theme'
+import { logger } from 'termcast/src/logger'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { CommonProps } from 'termcast/src/utils'
+import { createDescendants } from 'termcast/src/descendants'
+
+// SearchBarInterface provides the common search bar props
+interface SearchBarInterface {
+  isLoading?: boolean
+  filtering?: boolean | { keepSectionOrder: boolean }
+  onSearchTextChange?: (text: string) => void
+  throttle?: boolean
+}
+
+export interface DropdownProps extends SearchBarInterface, CommonProps {
+  id?: string
+  tooltip?: string
+  placeholder?: string
+  storeValue?: boolean | undefined
+  value?: string
+  defaultValue?: string
+  children?: ReactNode
+  onChange?: (newValue: string) => void
+}
+
+export interface DropdownItemProps extends CommonProps {
+  title: string
+  value: string
+  icon?: ReactNode
+
+  keywords?: string[]
+  label?: string
+}
+
+export interface DropdownSectionProps extends CommonProps {
+  title?: string
+  children?: ReactNode
+}
+
+// Create descendants for Dropdown items - minimal fields needed
+interface DropdownItemDescendant {
+  value: string
+  title: string
+  hidden?: boolean
+}
+
+const {
+  DescendantsProvider: DropdownDescendantsProvider,
+  useDescendants: useDropdownDescendants,
+  useDescendant: useDropdownItemDescendant,
+} = createDescendants<DropdownItemDescendant>()
+
+// Context for passing data to dropdown items
+interface DropdownContextValue {
+  searchText: string
+  filtering?: boolean | { keepSectionOrder: boolean }
+  currentSection?: string
+  selectedIndex: number
+  setSelectedIndex?: (index: number) => void
+  currentValue?: string
+  onChange?: (value: string) => void
+}
+
+const DropdownContext = createContext<DropdownContextValue>({
+  searchText: '',
+  filtering: true,
+  selectedIndex: 0,
+})
+
+interface DropdownType {
+  (props: DropdownProps): any
+  Item: (props: DropdownItemProps) => any
+  Section: (props: DropdownSectionProps) => any
+}
+
+const Dropdown: DropdownType = (props) => {
+  const {
+    tooltip,
+    onChange,
+    value,
+    defaultValue,
+    children,
+    placeholder = 'Search…',
+    storeValue,
+    isLoading,
+    filtering = true,
+    onSearchTextChange,
+    throttle,
+  } = props
+
+  const [selected, setSelected] = useState(0)
+  const [searchText, setSearchText] = useState('')
+  const [currentValue, setCurrentValue] = useState<string | undefined>(
+    value || defaultValue,
+  )
+  const inputRef = useRef<any>(null)
+  const lastSearchTextRef = useRef('')
+  const throttleTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+  const descendantsContext = useDropdownDescendants()
+
+  // Create context value for children
+  const contextValue = useMemo<DropdownContextValue>(
+    () => ({
+      searchText,
+      filtering,
+      currentSection: undefined,
+      selectedIndex: selected,
+      setSelectedIndex: setSelected,
+      currentValue,
+      onChange: (value: string) => selectItem(value),
+    }),
+    [searchText, filtering, selected, currentValue],
+  )
+
+  // Update controlled value
+  useEffect(() => {
+    if (value !== undefined) {
+      setCurrentValue(value)
+    }
+  }, [value])
+
+  // Reset selected index when search changes
+  useEffect(() => {
+    setSelected(0)
+  }, [searchText])
+
+  // Handle search text change with throttling
+  const handleSearchTextChange = (text: string) => {
+    if (!inFocus) return
+
+    setSearchText(text)
+
+    if (onSearchTextChange) {
+      if (throttle) {
+        if (throttleTimeoutRef.current) {
+          clearTimeout(throttleTimeoutRef.current)
+        }
+        throttleTimeoutRef.current = setTimeout(() => {
+          onSearchTextChange(text)
+        }, 300)
+      } else {
+        onSearchTextChange(text)
+      }
+    }
+  }
+
+  const move = (direction: -1 | 1) => {
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item: any) => item.index !== -1)
+      .sort((a: any, b: any) => a.index - b.index)
+
+    if (items.length === 0) return
+
+    let next = selected + direction
+    if (next < 0) next = items.length - 1
+    if (next >= items.length) next = 0
+    setSelected(next)
+  }
+
+  const selectItem = (itemValue: string) => {
+    setCurrentValue(itemValue)
+    if (onChange) {
+      onChange(itemValue)
+    }
+    if (storeValue) {
+      // In a real implementation, this would persist the value
+      logger.log('Storing value:', itemValue)
+    }
+  }
+
+  // Get focus state
+  const inFocus = useIsInFocus()
+
+  // Handle keyboard navigation
+  useKeyboard((evt) => {
+    if (!inFocus) return
+
+    if (evt.name === 'up') {
+      move(-1)
+    }
+    if (evt.name === 'down') {
+      move(1)
+    }
+    if (evt.name === 'return') {
+      const items = Object.values(descendantsContext.map.current)
+        .filter((item: any) => item.index !== -1)
+        .sort((a: any, b: any) => a.index - b.index)
+
+      const currentItem = items[selected]
+      if (currentItem?.props) {
+        selectItem((currentItem.props as DropdownItemDescendant).value)
+      }
+    }
+  })
+
+  return (
+    <DropdownDescendantsProvider value={descendantsContext}>
+      <DropdownContext.Provider value={contextValue}>
+        <box>
+          <box style={{ paddingLeft: 2, paddingRight: 2 }}>
+            <box style={{ paddingLeft: 1, paddingRight: 1 }}>
+              <box
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <text attributes={TextAttributes.BOLD}>{tooltip}</text>
+                <text fg={Theme.textMuted}>esc</text>
+              </box>
+              <box style={{ paddingTop: 1, paddingBottom: 1 }}>
+                <input
+                  ref={inputRef}
+                  onInput={(value) => handleSearchTextChange(value)}
+                  placeholder={placeholder}
+                  focused={inFocus}
+                  value={searchText}
+                  focusedBackgroundColor={Theme.backgroundPanel}
+                  cursorColor={Theme.primary}
+                  focusedTextColor={Theme.textMuted}
+                />
+              </box>
+            </box>
+            <box style={{ paddingBottom: 1 }}>
+              {/* Render children - they will register as descendants and render themselves */}
+              {children}
+            </box>
+          </box>
+          <box
+            border={false}
+            style={{
+              paddingRight: 2,
+              paddingLeft: 3,
+              paddingBottom: 1,
+              paddingTop: 1,
+              flexDirection: 'row',
+            }}
+          >
+            <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+              ↵
+            </text>
+            <text fg={Theme.textMuted}> select</text>
+            <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+              {'   '}↑↓
+            </text>
+            <text fg={Theme.textMuted}> navigate</text>
+          </box>
+        </box>
+      </DropdownContext.Provider>
+    </DropdownDescendantsProvider>
+  )
+}
+
+function ItemOption(props: {
+  title: string
+  icon?: ReactNode
+  active?: boolean
+  current?: boolean
+  label?: string
+  onMouseDown?: () => void
+  onMouseMove?: () => void
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        backgroundColor: props.active
+          ? Theme.primary
+          : isHovered
+            ? Theme.backgroundPanel
+            : undefined,
+        paddingLeft: props.active ? 0 : 1,
+        paddingRight: 1,
+        justifyContent: 'space-between',
+      }}
+      border={false}
+      onMouseMove={() => {
+        setIsHovered(true)
+        if (props.onMouseMove) props.onMouseMove()
+      }}
+      onMouseOut={() => setIsHovered(false)}
+      onMouseDown={props.onMouseDown}
+    >
+      <box style={{ flexDirection: 'row' }}>
+        {props.active && (
+          <text fg={Theme.background} selectable={false}>
+            ›{''}
+          </text>
+        )}
+        {props.icon && (
+          <text
+            fg={props.active ? Theme.background : Theme.text}
+            selectable={false}
+          >
+            {String(props.icon)}{' '}
+          </text>
+        )}
+        <text
+          fg={
+            props.active
+              ? Theme.background
+              : props.current
+                ? Theme.primary
+                : Theme.text
+          }
+          attributes={props.active ? TextAttributes.BOLD : undefined}
+          selectable={false}
+        >
+          {props.title}
+        </text>
+      </box>
+      {props.label && (
+        <text
+          fg={props.active ? Theme.background : Theme.textMuted}
+          attributes={props.active ? TextAttributes.BOLD : undefined}
+          selectable={false}
+        >
+          {props.label}
+        </text>
+      )}
+    </box>
+  )
+}
+
+const DropdownItem: (props: DropdownItemProps) => any = (props) => {
+  const context = useContext(DropdownContext)
+  if (!context) return null
+
+  const { searchText, filtering, currentSection, selectedIndex, currentValue } =
+    context
+
+  // Apply filtering logic
+  const shouldHide = (() => {
+    if (!filtering || !searchText.trim()) return false
+    const needle = searchText.toLowerCase().trim()
+    const searchableText = [props.title, ...(props.keywords || [])]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase()
+    return !searchableText.includes(needle)
+  })()
+
+  // Register as descendant
+  const { index } = useDropdownItemDescendant({
+    value: props.value,
+    title: props.title,
+    hidden: shouldHide,
+  })
+
+  // Don't render if hidden
+  if (shouldHide) return null
+
+  // Determine if active (index will be -1 if hidden)
+  const isActive = index === selectedIndex && index !== -1
+  const isCurrent = props.value === currentValue
+
+  // Handle mouse events
+  const handleMouseMove = () => {
+    // Update selected index on hover
+    if (
+      context.setSelectedIndex &&
+      context.selectedIndex !== index &&
+      index !== -1
+    ) {
+      context.setSelectedIndex(index)
+    }
+  }
+
+  const handleMouseDown = () => {
+    // Trigger selection on click
+    if (context.onChange && props.value) {
+      context.onChange(props.value)
+    }
+  }
+
+  // Render the item directly
+  return (
+    <ItemOption
+      title={props.title}
+      icon={props.icon}
+      active={isActive}
+      current={isCurrent}
+      label={props.label}
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+    />
+  )
+}
+
+const DropdownSection: (props: DropdownSectionProps) => any = (props) => {
+  const parentContext = useContext(DropdownContext)
+  if (!parentContext) return null
+
+  // Create new context with section title
+  const sectionContextValue = useMemo(
+    () => ({
+      ...parentContext,
+      currentSection: props.title,
+    }),
+    [parentContext, props.title],
+  )
+
+  return (
+    <>
+      {/* Render section title if provided */}
+      {props.title && (
+        <box style={{ paddingTop: 1, paddingLeft: 1 }}>
+          <text fg={Theme.accent} attributes={TextAttributes.BOLD}>
+            {props.title}
+          </text>
+        </box>
+      )}
+      {/* Render children with section context */}
+      <DropdownContext.Provider value={sectionContextValue}>
+        {props.children}
+      </DropdownContext.Provider>
+    </>
+  )
+}
+
+Dropdown.Item = DropdownItem
+Dropdown.Section = DropdownSection
+
+export default Dropdown
+export { Dropdown }

package/src/components/extension-preferences.tsx

@@ -0,0 +1,269 @@
+import React, { useState, useEffect } from 'react'
+import fs from 'node:fs'
+import path from 'node:path'
+import { Form, showToast, Toast, ActionPanel, Action } from 'termcast'
+import { LocalStorage } from 'termcast/src/apis/localstorage'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { logger } from 'termcast/src/logger'
+import { getStoreDirectory } from 'termcast/src/utils'
+import type { RaycastPackageJson } from 'termcast/src/package-json'
+
+interface ExtensionPreferencesProps {
+  extensionName: string
+  commandName?: string
+  onSubmit?: (values: Record<string, any>) => void
+}
+
+interface PreferenceManifest {
+  name: string
+  type:
+    | 'textfield'
+    | 'password'
+    | 'checkbox'
+    | 'dropdown'
+    | 'file'
+    | 'directory'
+    | 'appPicker'
+  title: string
+  description?: string
+  required?: boolean
+  placeholder?: string
+  default?: any
+  data?: Array<{ title: string; value: string }> // For dropdown
+}
+
+export function ExtensionPreferences({
+  extensionName,
+  commandName,
+  onSubmit,
+}: ExtensionPreferencesProps): any {
+  const [preferences, setPreferences] = useState<PreferenceManifest[]>([])
+  const [savedValues, setSavedValues] = useState<Record<string, any>>({})
+  const [isLoading, setIsLoading] = useState(true)
+  const { pop } = useNavigation()
+
+  useEffect(() => {
+    const loadPreferences = async () => {
+      try {
+        // Get extension package.json to read preference manifest
+        const storeDir = getStoreDirectory()
+        const extensionDir = path.join(storeDir, extensionName)
+        const packageJsonPath = path.join(extensionDir, 'package.json')
+
+        if (!fs.existsSync(packageJsonPath)) {
+          throw new Error(`Extension ${extensionName} not found`)
+        }
+
+        const packageJson: RaycastPackageJson = JSON.parse(
+          fs.readFileSync(packageJsonPath, 'utf-8'),
+        )
+
+        // Get preferences based on whether this is for a command or extension
+        let prefsToUse: PreferenceManifest[] = []
+
+        if (commandName) {
+          // Look for command-specific preferences
+          const command = packageJson.commands?.find(
+            (cmd) => cmd.name === commandName,
+          )
+          if (command) {
+            prefsToUse = command.preferences || []
+          }
+        } else {
+          // Get extension preferences (shared across all commands)
+          prefsToUse = packageJson.preferences || []
+        }
+
+        // Load saved values from LocalStorage
+        const preferencesKey = commandName
+          ? `preferences.${extensionName}.${commandName}`
+          : `preferences.${extensionName}`
+        const saved = await LocalStorage.getItem(preferencesKey)
+
+        if (saved && typeof saved === 'string') {
+          try {
+            const parsed = JSON.parse(saved)
+            setSavedValues(parsed)
+          } catch (e) {
+            logger.error('Failed to parse saved preferences:', e)
+          }
+        }
+
+        setPreferences(prefsToUse)
+      } catch (error) {
+        logger.error(`Failed to load preferences for ${extensionName}:`, error)
+        await showToast({
+          style: Toast.Style.Failure,
+          title: 'Failed to load preferences',
+          message: String(error),
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadPreferences()
+  }, [extensionName])
+
+  const handleSubmit = async (values: Record<string, any>) => {
+    try {
+      // Save preferences to LocalStorage
+      const preferencesKey = commandName
+        ? `preferences.${extensionName}.${commandName}`
+        : `preferences.${extensionName}`
+      await LocalStorage.setItem(preferencesKey, JSON.stringify(values))
+
+      await showToast({
+        style: Toast.Style.Success,
+        title: 'Preferences saved',
+        message: commandName
+          ? `Preferences for ${extensionName}/${commandName} have been saved`
+          : `Preferences for ${extensionName} have been saved`,
+      })
+
+      if (onSubmit) {
+        onSubmit(values)
+      } else {
+        pop()
+      }
+    } catch (error) {
+      await showToast({
+        style: Toast.Style.Failure,
+        title: 'Failed to save preferences',
+        message: String(error),
+      })
+    }
+  }
+
+  if (isLoading) {
+    return <Form isLoading />
+  }
+
+  if (preferences.length === 0) {
+    // If no preferences but onSubmit provided, call it immediately
+    if (onSubmit) {
+      onSubmit({})
+      return null
+    }
+
+    return (
+      <Form
+        actions={
+          <ActionPanel>
+            <Action.SubmitForm title='Close' onSubmit={() => pop()} />
+          </ActionPanel>
+        }
+      >
+        <Form.Description
+          text={
+            commandName
+              ? `No preferences available for ${extensionName}/${commandName}`
+              : `No preferences available for ${extensionName}`
+          }
+        />
+      </Form>
+    )
+  }
+
+  return (
+    <Form
+      actions={
+        <ActionPanel>
+          <Action.SubmitForm title='Save Preferences' onSubmit={handleSubmit} />
+        </ActionPanel>
+      }
+      navigationTitle={
+        commandName
+          ? `${extensionName}/${commandName} Preferences`
+          : `${extensionName} Preferences`
+      }
+    >
+      {preferences.map((pref) => {
+        const defaultValue = savedValues[pref.name] ?? pref.default
+
+        switch (pref.type) {
+          case 'textfield':
+            return (
+              <Form.TextField
+                key={pref.name}
+                id={pref.name}
+                title={pref.title}
+                placeholder={pref.placeholder}
+                defaultValue={defaultValue}
+                info={pref.description}
+                storeValue
+              />
+            )
+
+          case 'password':
+            return (
+              <Form.PasswordField
+                key={pref.name}
+                id={pref.name}
+                title={pref.title}
+                placeholder={pref.placeholder}
+                defaultValue={defaultValue}
+                info={pref.description}
+                storeValue
+              />
+            )
+
+          case 'checkbox':
+            return (
+              <Form.Checkbox
+                key={pref.name}
+                id={pref.name}
+                label={pref.title}
+                defaultValue={defaultValue}
+                info={pref.description}
+                storeValue
+              />
+            )
+
+          case 'dropdown':
+            return (
+              <Form.Dropdown
+                id={pref.name}
+                title={pref.title}
+                defaultValue={defaultValue}
+                info={pref.description}
+                storeValue
+              >
+                {pref.data?.map((item) => (
+                  <Form.Dropdown.Item value={item.value} title={item.title} />
+                ))}
+              </Form.Dropdown>
+            )
+
+          // TODO: Implement file and directory pickers and appPicker
+          case 'file':
+          case 'directory':
+          case 'appPicker':
+            return (
+              <Form.TextField
+                key={pref.name}
+                id={pref.name}
+                title={pref.title}
+                placeholder={
+                  pref.type === 'file'
+                    ? 'Enter file path'
+                    : pref.type === 'directory'
+                      ? 'Enter directory path'
+                      : 'Enter application name'
+                }
+                defaultValue={defaultValue}
+                info={
+                  pref.description ||
+                  `Select a ${pref.type.replace('appPicker', 'application')}`
+                }
+                storeValue
+              />
+            )
+
+          default:
+            return null
+        }
+      })}
+    </Form>
+  )
+}