termcast 1.3.21 → 1.3.25

package/src/components/form/text-field.tsx

@@ -7,6 +7,7 @@ import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
 import { createTextareaFormRef } from './form-ref'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface TextFieldProps extends FormItemProps<string> {
   placeholder?: string
@@ -16,7 +17,8 @@ export type TextFieldRef = FormItemRef
 
 export const TextField = (props: TextFieldProps): any => {
   const { register, formState } = useFormContext()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const focusContext = useFocusContext()
+  const { focusedField, setFocusedField } = focusContext
   const isFocused = focusedField === props.id
 
   const elementRef = useRef<BoxRenderable>(null)
@@ -59,15 +61,19 @@ export const TextField = (props: TextFieldProps): any => {
 
   return (
     <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}>
         <textarea
@@ -77,6 +83,7 @@ export const TextField = (props: TextFieldProps): any => {
             { name: 'return', action: 'submit' },
             { name: 'linefeed', action: 'submit' },
           ]}
+          wrapMode='none'
           initialValue={props.defaultValue || props.value || ''}
           onContentChange={handleContentChange}
           placeholder={props.placeholder}

package/src/components/form/types.tsx

@@ -6,12 +6,18 @@ export interface FormValues {
   [key: string]: FormValue
 }
 
+export interface LinkAccessoryProps {
+  target: string
+  text: string
+}
+
 export interface FormProps {
   actions?: React.ReactNode
   children?: React.ReactNode
   navigationTitle?: string
   isLoading?: boolean
   enableDrafts?: boolean
+  searchBarAccessory?: React.ReactElement<LinkAccessoryProps> | null
 }
 
 export interface FormItemProps<T> {

package/src/components/form/with-left-border.tsx

@@ -1,12 +1,41 @@
 import React from 'react'
 import { TextAttributes } from '@opentui/core'
 import { Theme } from 'termcast/src/theme'
+import { colord } from 'colord'
+
+const spinnerFrames = [
+  { char: ' ', color: Theme.accent },
+  { char: '·', color: Theme.accent },
+  { char: '•', color: colord(Theme.accent).lighten(0.1).toHex() },
+  // { char: '●', color: colord(Theme.accent).lighten(0.2).toHex() },
+]
+
+function Spinner(): any {
+  const [index, setIndex] = React.useState(0)
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((i) => (i + 1) % spinnerFrames.length)
+    }, 200)
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  const frame = spinnerFrames[index]
+  return (
+    <text flexShrink={0} fg={frame.color}>
+      <b>{frame.char}</b>
+    </text>
+  )
+}
 
 interface WithLeftBorderProps {
   children: React.ReactNode
   withDiamond?: boolean
   customCharacter?: { focused: string; unfocused: string }
   isFocused: boolean
+  isLoading?: boolean
   paddingBottom?: number
   paddingLeft?: number
   paddingTop?: number
@@ -18,21 +47,24 @@ export const WithLeftBorder = ({
   withDiamond,
   customCharacter,
   isFocused,
+  isLoading,
   paddingBottom = 1,
   paddingLeft = 2,
   paddingTop = 0,
 }: WithLeftBorderProps): any => {
   if (withDiamond || customCharacter) {
     const chars = customCharacter || { focused: '◆', unfocused: '◇' }
+    const color = isFocused ? Theme.accent : Theme.text
     return (
       <box flexDirection='row'>
-        <text
-          key={String(isFocused)}
-          fg={isFocused ? Theme.accent : Theme.text}
-        >
-          <b>{isFocused ? chars.focused : chars.unfocused}</b>
-        </text>
-        <box flexGrow={1} paddingLeft={paddingLeft}>
+        {isFocused && isLoading ? (
+          <Spinner />
+        ) : (
+          <text key={String(isFocused)} flexShrink={0} fg={color}>
+            <b>{isFocused ? chars.focused : chars.unfocused}</b>
+          </text>
+        )}
+        <box flexShrink={0} flexGrow={1} paddingLeft={paddingLeft}>
           {children}
         </box>
       </box>
@@ -42,8 +74,9 @@ export const WithLeftBorder = ({
     <box
       paddingLeft={paddingLeft}
       border={['left']}
-      borderStyle={isFocused ? 'heavy' : 'single'}
+      // borderStyle={isFocused ? 'heavy' : 'single'}
       borderColor={isFocused ? Theme.accent : undefined}
+      flexShrink={0}
       flexDirection='row'
     >
       <box paddingTop={paddingTop} paddingBottom={paddingBottom} flexGrow={1}>

package/src/components/icon.tsx

@@ -6,11 +6,11 @@ const ICON_SHAPES = [
   '◆', // filled diamond
   '▲', // filled triangle up
   '▼', // filled triangle down
-  '★', // filled star
-  '♦', // diamond suit
-  '♥', // heart suit
-  '♠', // spade suit
-  '♣', // club suit
+  // '★', // filled star
+  // '♦', // diamond suit
+  // '♥', // heart suit
+  // '♠', // spade suit
+  // '♣', // club suit
 ]
 
 function hashString(str: string): number {
@@ -505,13 +505,28 @@ function createIconEnum(): Record<string, string> {
   return icons
 }
 
-export const Icon = createIconEnum()
+function createIconWithUnicode(): Record<string, string> {
+  const icons: Record<string, string> = {}
+
+  for (const iconId of iconIds) {
+    const name = iconId.replace(/-16$/, '')
+    const pascalName = pascalCase(name)
+    icons[pascalName] = getIconShape(iconId)
+  }
+
+  return icons
+}
+
+export const IconSource = createIconEnum()
+export const Icon = createIconWithUnicode()
 
 export function getIconEmoji(icon: string): string {
+  // If it's an icon ID (like 'pencil-16'), convert to unicode
   if (iconIds.includes(icon)) {
     return getIconShape(icon)
   }
-  return '?'
+  // Otherwise assume it's already unicode and return as-is
+  return icon
 }
 
 interface IconProps {
@@ -520,5 +535,9 @@ interface IconProps {
 }
 
 export function IconComponent({ source }: IconProps): any {
-  return getIconEmoji(source)
+  // If it's an icon ID, convert to unicode; otherwise return as-is
+  if (iconIds.includes(source)) {
+    return getIconShape(source)
+  }
+  return source
 }