termcast 1.3.10 → 1.3.18

package/src/components/list.tsx

@@ -1,58 +1,78 @@
+import {
+  BoxRenderable,
+  ScrollBoxRenderable,
+  TextAttributes,
+  TextareaRenderable,
+} from '@opentui/core'
+import { useKeyboard } from '@opentui/react'
 import React, {
-  ReactNode,
-  ReactElement,
-  Children,
-  isValidElement,
-  useState,
-  useEffect,
-  useRef,
-  Fragment,
-  useMemo,
-  useLayoutEffect,
-  createContext,
-  useContext,
+    ReactElement,
+    ReactNode,
+    createContext,
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState
 } from 'react'
-import { TextAttributes } from '@opentui/core'
-import { useKeyboard } from '@opentui/react'
-import { logger } from 'termcast/src/logger'
-import { Theme } from 'termcast/src/theme'
-import { Action, ActionPanel } from 'termcast/src/components/actions'
-import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
-import { CommonProps } from 'termcast/src/utils'
-import { useStore } from 'termcast/src/state'
-import { useDialog } from 'termcast/src/internal/dialog'
-import { createDescendants } from 'termcast/src/descendants'
 import { LoadingBar } from 'termcast/src/components/loading-bar'
+import { createDescendants } from 'termcast/src/descendants'
+import { useDialog } from 'termcast/src/internal/dialog'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useNavigationPending } from 'termcast/src/internal/navigation'
+import { ScrollBox } from 'termcast/src/internal/scrollbox'
+
+import { Color, resolveColor } from 'termcast/src/colors'
+import { getIconEmoji } from 'termcast/src/components/icon'
+import { Theme, markdownSyntaxStyle } from 'termcast/src/theme'
+import { CommonProps } from 'termcast/src/utils'
+
+export { Color }
+
+function formatRelativeDate(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSec = Math.floor(diffMs / 1000)
+  const diffMin = Math.floor(diffSec / 60)
+  const diffHour = Math.floor(diffMin / 60)
+  const diffDay = Math.floor(diffHour / 24)
+  const diffWeek = Math.floor(diffDay / 7)
+  const diffMonth = Math.floor(diffDay / 30)
+  const diffYear = Math.floor(diffDay / 365)
+
+  if (diffSec < 60) {
+    return 'now'
+  }
+  if (diffMin < 60) {
+    return `${diffMin}m`
+  }
+  if (diffHour < 24) {
+    return `${diffHour}h`
+  }
+  if (diffDay < 7) {
+    return `${diffDay}d`
+  }
+  if (diffWeek < 4) {
+    return `${diffWeek}w`
+  }
+  if (diffMonth < 12) {
+    return `${diffMonth}mo`
+  }
+  return `${diffYear}y`
+}
 
 interface ActionsInterface {
   actions?: ReactNode
 }
 
 function ListFooter(): any {
-  const toast = useStore((state) => state.toast)
-
-  if (toast) {
-    return (
-      <box
-        border={false}
-        style={{
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 1,
-          marginTop: 1,
-        }}
-      >
-        {toast}
-      </box>
-    )
-  }
-
   return (
     <box
       border={false}
       style={{
         paddingLeft: 1,
+        flexShrink: 0,
         paddingRight: 1,
         paddingTop: 1,
         marginTop: 1,
@@ -64,11 +84,11 @@ function ListFooter(): any {
       </text>
       <text fg={Theme.textMuted}> select</text>
       <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'   '}↑↓
+        {'  '}↑↓
       </text>
       <text fg={Theme.textMuted}> navigate</text>
       <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'   '}^k
+        {'  '}^k
       </text>
       <text fg={Theme.textMuted}> actions</text>
     </box>
@@ -96,10 +116,8 @@ interface PaginationInterface {
   }
 }
 
-export type Color = string
-
 export namespace Image {
-  export type ImageLike = string
+  export type ImageLike = string | { source: string; tintColor?: string }
 }
 
 export type ItemAccessory =
@@ -109,7 +127,7 @@ export type ItemAccessory =
         | null
         | {
             value: string | null
-            color?: Color
+            color?: Color.ColorLike
           }
     }
   | {
@@ -118,7 +136,7 @@ export type ItemAccessory =
         | null
         | {
             value: Date | null
-            color?: Color
+            color?: Color.ColorLike
           }
     }
   | {
@@ -126,7 +144,7 @@ export type ItemAccessory =
         | string
         | {
             value: string
-            color?: Color
+            color?: Color.ColorLike
           }
     }
   | {
@@ -245,7 +263,7 @@ interface ListItemDetailMetadataType {
 
 interface ListItemDetailMetadataTagListType {
   (props: { title: string; children: ReactNode }): any
-  Item: (props: { text?: string; color?: Color; icon?: Image.ImageLike; onAction?: () => void }) => any
+  Item: (props: { text?: string; color?: Color.ColorLike; icon?: Image.ImageLike; onAction?: () => void }) => any
 }
 
 interface ListDropdownType {
@@ -309,6 +327,7 @@ interface ListItemDescendant {
   actions?: ReactNode
   visible?: boolean
   detail?: ReactNode
+  elementRef?: { y: number; height: number } | null
 }
 
 const {
@@ -355,7 +374,7 @@ interface ListDropdownDialogProps extends DropdownProps {
 function ListDropdownDialog(props: ListDropdownDialogProps): any {
   const [searchText, setSearchTextRaw] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
-  const inputRef = useRef<any>(null)
+  const inputRef = useRef<TextareaRenderable>(null)
   const descendantsContext = useDropdownDescendants()
 
   // Wrapper function that updates search text
@@ -364,6 +383,7 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
     setSelectedIndex(0) // Reset selection when search changes
   }
 
+
   const move = (direction: -1 | 1) => {
     // Get all visible items
     const items = Object.values(descendantsContext.map.current)
@@ -433,12 +453,20 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
               <text fg={Theme.textMuted}>esc</text>
             </box>
             <box style={{ paddingTop: 1, paddingBottom: 1 }}>
-              <input
+              <textarea
                 ref={inputRef}
-                onInput={setSearchText}
+                height={1}
+                keyBindings={[
+                  { name: 'return', action: 'submit' },
+                  { name: 'linefeed', action: 'submit' },
+                ]}
+                onContentChange={() => {
+                  const value = inputRef.current?.plainText || ''
+                  setSearchText(value)
+                }}
                 placeholder={props.placeholder || 'Search...'}
                 focused={inFocus}
-                value={searchText}
+                initialValue={searchText}
                 focusedBackgroundColor={Theme.backgroundPanel}
                 cursorColor={Theme.primary}
                 focusedTextColor={Theme.textMuted}
@@ -499,16 +527,18 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
 function ListItemRow(props: {
   title: string
   subtitle?: string
+  icon?: string
+  iconColor?: string
   accessories?: ItemAccessory[]
   active?: boolean
   isShowingDetail?: boolean
   onMouseDown?: () => void
   index?: number
+  ref?: React.Ref<BoxRenderable>
 }) {
-  const { title, subtitle, accessories, active } = props
+  const { title, subtitle, icon, iconColor, accessories, active, ref } = props
   const [isHovered, setIsHovered] = useState(false)
 
-  // Format accessories for display
   const accessoryElements: ReactNode[] = []
   if (accessories) {
     accessories.forEach((accessory) => {
@@ -517,11 +547,14 @@ function ListItemRow(props: {
           typeof accessory.text === 'string'
             ? accessory.text
             : accessory.text?.value
+        const textColor =
+          typeof accessory.text === 'object' ? accessory.text?.color : undefined
         if (textValue) {
           accessoryElements.push(
             <text
               key={`text-${textValue}`}
-              fg={active ? Theme.background : Theme.info}
+              fg={active ? Theme.background : resolveColor(textColor) || Theme.info}
+              wrapMode="none"
             >
               {textValue}
             </text>,
@@ -533,22 +566,48 @@ function ListItemRow(props: {
           typeof accessory.tag === 'string'
             ? accessory.tag
             : accessory.tag?.value
+        const tagColor =
+          typeof accessory.tag === 'object' ? accessory.tag?.color : undefined
         if (tagValue) {
           accessoryElements.push(
             <text
               key={`tag-${tagValue}`}
-              fg={active ? Theme.background : Theme.warning}
+              fg={active ? Theme.background : resolveColor(tagColor) || Theme.warning}
+              wrapMode="none"
             >
               [{tagValue}]
             </text>,
           )
         }
       }
+      if ('date' in accessory && accessory.date) {
+        const dateValue =
+          accessory.date instanceof Date
+            ? accessory.date
+            : accessory.date?.value
+        const dateColor =
+          typeof accessory.date === 'object' && !(accessory.date instanceof Date)
+            ? accessory.date?.color
+            : undefined
+        if (dateValue) {
+          const formatted = formatRelativeDate(dateValue)
+          accessoryElements.push(
+            <text
+              key={`date-${dateValue.getTime()}`}
+              fg={active ? Theme.background : resolveColor(dateColor) || Theme.success}
+              wrapMode="none"
+            >
+              {formatted}
+            </text>,
+          )
+        }
+      }
     })
   }
 
   return (
     <box
+      ref={ref}
       style={{
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -557,39 +616,44 @@ function ListItemRow(props: {
           : isHovered
             ? Theme.backgroundPanel
             : undefined,
-        paddingLeft: active ? 0 : 1,
+        paddingLeft: 0,
         paddingRight: 1,
+        gap: 1,
       }}
       border={false}
-      onMouseMove={() => setIsHovered(true)}
-      onMouseOut={() => setIsHovered(false)}
+      onMouseMove={() => {
+        setIsHovered(true)
+      }}
+      onMouseOut={() => {
+        setIsHovered(false)
+      }}
       onMouseDown={props.onMouseDown}
     >
-      <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1 }}>
-        {active && (
-          <text fg={Theme.textMuted} selectable={false}>
-            ›
+      <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden', gap: 1 }}>
+        <box style={{ flexDirection: 'row', flexShrink: 0 }}>
+          <text fg={active ? Theme.background : Theme.text} attributes={active ? TextAttributes.BOLD : undefined} selectable={false} wrapMode="none">{active ? '›' : ' '}</text>
+          {icon && <text fg={active ? Theme.background : iconColor || Theme.text} selectable={false} wrapMode="none">{getIconEmoji(icon)} </text>}
+          <text
+            fg={active ? Theme.background : Theme.text}
+            attributes={active ? TextAttributes.BOLD : undefined}
+            selectable={false}
+            wrapMode="none"
+          >
+            {title}
           </text>
-        )}
-        <text
-          fg={active ? Theme.background : Theme.text}
-          attributes={active ? TextAttributes.BOLD : undefined}
-          selectable={false}
-        >
-          {title}
-        </text>
+        </box>
         {subtitle && (
           <text
             fg={active ? Theme.background : Theme.textMuted}
             selectable={false}
+            wrapMode="none"
           >
-            {' '}
             {subtitle}
           </text>
         )}
       </box>
       {accessoryElements.length > 0 && (
-        <box style={{ flexDirection: 'row' }}>
+        <box style={{ flexDirection: 'row', flexShrink: 0 }}>
           {accessoryElements.map((elem, i) => (
             <box key={i} style={{ flexDirection: 'row' }}>
               {i > 0 && <text> </text>}
@@ -598,7 +662,6 @@ function ListItemRow(props: {
           ))}
         </box>
       )}
-      {/*{active && <text fg={Theme.textMuted}>‹</text>}*/}
     </box>
   )
 }
@@ -623,7 +686,8 @@ export const List: ListType = (props) => {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [currentDetail, setCurrentDetail] = useState<ReactNode>(null)
-  const inputRef = useRef<any>(null)
+  const inputRef = useRef<TextareaRenderable>(null)
+  const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
   const descendantsContext = useListDescendants()
   const navigationPending = useNavigationPending()
 
@@ -632,6 +696,15 @@ export const List: ListType = (props) => {
       ? controlledSearchText
       : internalSearchText
 
+  // Sync controlled searchText → textarea (only when externally controlled)
+  useLayoutEffect(() => {
+    if (controlledSearchText === undefined) return
+    const textarea = inputRef.current
+    if (textarea && textarea.plainText !== controlledSearchText) {
+      textarea.setText(controlledSearchText)
+    }
+  }, [controlledSearchText])
+
   // Determine if filtering is enabled
   // List filters automatically when:
   // - filtering is not specified (defaults to true) OR filtering is explicitly true
@@ -694,15 +767,36 @@ export const List: ListType = (props) => {
     }
   }, [selectedItemId])
 
+  const scrollToItem = (item: { props?: ListItemDescendant }) => {
+    const scrollBox = scrollBoxRef.current
+    const elementRef = item.props?.elementRef
+    if (!scrollBox || !elementRef) return
+
+    const contentY = scrollBox.content?.y || 0
+    const viewportHeight = scrollBox.viewport?.height || 10
+    const currentScrollTop = scrollBox.scrollTop || 0
+
+    const itemTop = elementRef.y - contentY
+    const itemBottom = itemTop + elementRef.height
+
+    const visibleTop = currentScrollTop
+    const visibleBottom = currentScrollTop + viewportHeight
+
+    if (itemTop < visibleTop) {
+      scrollBox.scrollTo(itemTop)
+    } else if (itemBottom > visibleBottom) {
+      scrollBox.scrollTo(itemBottom - viewportHeight)
+    }
+  }
+
   const move = (direction: -1 | 1) => {
-    // Get all visible items
     const items = Object.values(descendantsContext.map.current)
       .filter((item) => item.index !== -1 && item.props?.visible !== false)
       .sort((a, b) => a.index - b.index)
 
     if (items.length === 0) return
 
-    // Find currently selected item's position in visible items
+
     let currentVisibleIndex = items.findIndex(
       (item) => item.index === selectedIndex,
     )
@@ -710,11 +804,11 @@ export const List: ListType = (props) => {
       // If current selection is not visible, select first visible item
       if (items[0]) {
         setSelectedIndex(items[0].index)
+        scrollToItem(items[0])
       }
       return
     }
 
-    // Calculate next visible index
     let nextVisibleIndex = currentVisibleIndex + direction
     if (nextVisibleIndex < 0) nextVisibleIndex = items.length - 1
     if (nextVisibleIndex >= items.length) nextVisibleIndex = 0
@@ -722,10 +816,10 @@ export const List: ListType = (props) => {
     const nextItem = items[nextVisibleIndex]
     if (nextItem) {
       setSelectedIndex(nextItem.index)
+      scrollToItem(nextItem)
     }
   }
 
-  // Handle keyboard navigation
   const inFocus = useIsInFocus()
   const dialog = useDialog()
 
@@ -808,7 +902,7 @@ export const List: ListType = (props) => {
           )}
 
           {/* Search bar with optional dropdown accessory */}
-          <box>
+          <box style={{ flexShrink: 0 }}>
             <box
               border={false}
               style={{
@@ -818,7 +912,6 @@ export const List: ListType = (props) => {
                 marginBottom: 1,
                 flexDirection: 'row',
                 justifyContent: 'space-between',
-
                 alignItems: 'center',
               }}
             >
@@ -829,12 +922,20 @@ export const List: ListType = (props) => {
                   flexShrink: 1,
                 }}
               >
-                <input
+                <textarea
                   ref={inputRef}
+                  height={1}
+                  keyBindings={[
+                    { name: 'return', action: 'submit' },
+                    { name: 'linefeed', action: 'submit' },
+                  ]}
                   placeholder={searchBarPlaceholder}
                   focused={inFocus && !isDropdownOpen}
-                  value={searchText}
-                  onInput={handleSearchChange}
+                  initialValue={searchText}
+                  onContentChange={() => {
+                    const value = inputRef.current?.plainText || ''
+                    handleSearchChange(value)
+                  }}
                   focusedBackgroundColor={Theme.backgroundPanel}
                   cursorColor={Theme.primary}
                   focusedTextColor={Theme.text}
@@ -845,16 +946,32 @@ export const List: ListType = (props) => {
           </box>
 
           {/* Main content area with optional detail view */}
-          <box style={{ flexDirection: 'row', flexGrow: 1 }}>
+          <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1 }}>
             {/* List content - render children which will register themselves */}
-            <box style={{ marginTop: 1, width: isShowingDetail ? '50%' : '100%', flexGrow: isShowingDetail ? 0 : 1 }}>
-              <>
+            <box style={{ width: isShowingDetail ? '50%' : '100%', flexGrow: isShowingDetail ? 0 : 1, flexShrink: 1, flexDirection: 'column' }}>
+              {/* Scrollable list items */}
+              <ScrollBox
+                ref={scrollBoxRef}
+                focused={false}
+                flexGrow={1}
+                flexShrink={1}
+                style={{
+                  rootOptions: {
+                    backgroundColor: undefined,
+                  },
+                  scrollbarOptions: {
+
+                    showArrows: true,
+
+                  },
+                }}
+              >
                 {/* Render children - they will register as descendants */}
                 <ListItemsRenderer>{children}</ListItemsRenderer>
+              </ScrollBox>
 
-                {/* Footer with keyboard shortcuts or toast */}
-                <ListFooter />
-              </>
+              {/* Footer with keyboard shortcuts or toast */}
+              <ListFooter />
             </box>
 
             {/* Detail panel on the right */}
@@ -907,6 +1024,7 @@ const ListItem: ListItemType = (props) => {
   const { sectionTitle } = listSectionContext
   const listContext = useContext(ListContext)
   const dialog = useDialog()
+  const elementRef = useRef<BoxRenderable>(null)
 
   // Extract text values for descendant registration
   const titleText =
@@ -942,6 +1060,7 @@ const ListItem: ListItemType = (props) => {
     actions: props.actions,
     visible: isVisible,
     detail: props.detail,
+    elementRef: elementRef.current,
   })
 
   // Get selected index from parent List context
@@ -974,16 +1093,40 @@ const ListItem: ListItemType = (props) => {
   // Don't show accessories if we're showing detail
   const showAccessories = !props.detail && props.accessories
 
+  // Get icon string and color from props.icon (can be string or object with value/tintColor)
+  const { iconValue, iconColor } = (() => {
+    if (!props.icon) return { iconValue: undefined, iconColor: undefined }
+    if (typeof props.icon === 'string') return { iconValue: props.icon, iconColor: undefined }
+    const iconObj = props.icon as Record<string, unknown>
+    if ('source' in iconObj && typeof iconObj.source === 'string') {
+      return { iconValue: iconObj.source, iconColor: iconObj.tintColor as string | undefined }
+    }
+    if ('value' in iconObj && iconObj.value) {
+      const val = iconObj.value
+      if (typeof val === 'string') return { iconValue: val, iconColor: undefined }
+      if (typeof val === 'object' && val !== null) {
+        const valObj = val as Record<string, unknown>
+        if ('source' in valObj && typeof valObj.source === 'string') {
+          return { iconValue: valObj.source, iconColor: valObj.tintColor as string | undefined }
+        }
+      }
+    }
+    return { iconValue: undefined, iconColor: undefined }
+  })()
+
   // Render the item row directly
   return (
     <ListItemRow
       title={titleText}
       subtitle={subtitleText}
+      icon={iconValue}
+      iconColor={iconColor}
       accessories={showAccessories ? props.accessories : undefined}
       active={isActive}
       isShowingDetail={props.detail !== undefined}
       onMouseDown={handleMouseDown}
       index={index}
+      ref={elementRef}
     />
   )
 }
@@ -999,22 +1142,37 @@ const ListItemDetail: ListItemDetailType = (props) => {
         </box>
       )}
 
-      {markdown && (
-        <box style={{ flexGrow: 1, flexShrink: 1, overflow: 'scroll' }}>
-          <text>{markdown}</text>
-        </box>
-      )}
+      <ScrollBox
+        focused={true}
+        flexGrow={1}
+        flexShrink={1}
+        style={{
+          rootOptions: {
+            backgroundColor: undefined,
+          },
+          scrollbarOptions: {
 
-      {metadata && (
-        <box
-          style={{ paddingTop: 1 }}
-          border={['top']}
-          borderStyle='single'
-          borderColor={Theme.border}
-        >
-          {metadata}
+            showArrows: true,
+
+          },
+        }}
+      >
+        <box style={{ flexDirection: 'column' }}>
+          {markdown && (
+            <code content={markdown} filetype="markdown" syntaxStyle={markdownSyntaxStyle} drawUnstyledText={false} />
+          )}
+          {metadata && (
+            <box
+              style={{ paddingTop: 1 }}
+              border={['top']}
+              borderStyle='single'
+              borderColor={Theme.border}
+            >
+              {metadata}
+            </box>
+          )}
         </box>
-      )}
+      </ScrollBox>
     </box>
   )
 }
@@ -1064,10 +1222,10 @@ const ListItemDetailMetadataTagList = (props: { title: string; children: ReactNo
   )
 }
 
-const ListItemDetailMetadataTagListItem = (props: { text?: string; color?: Color; icon?: Image.ImageLike; onAction?: () => void }) => {
+const ListItemDetailMetadataTagListItem = (props: { text?: string; color?: Color.ColorLike; icon?: Image.ImageLike; onAction?: () => void }) => {
   return (
     <box style={{ paddingRight: 1 }}>
-      <text fg={props.color || Theme.accent}>[{props.text}]</text>
+      <text fg={resolveColor(props.color) || Theme.accent}>[{props.text}]</text>
     </box>
   )
 }
@@ -1382,6 +1540,11 @@ const ListSection = (props: SectionProps) => {
   const listContext = useContext(ListContext)
   const searchText = listContext?.searchText || ''
 
+  // Don't render empty sections
+  if (React.Children.count(props.children) === 0) {
+    return null
+  }
+
   // Create new context with section title and search text
   const sectionContextValue = useMemo(
     () => ({
@@ -1396,14 +1559,13 @@ const ListSection = (props: SectionProps) => {
   const showTitle = props.title && !searchText.trim()
 
   return (
-    <>
+    <box style={{ marginBottom: 1 }}>
       {/* Render section title if provided and not searching */}
       {showTitle && (
         <box
           border={false}
           style={{
             paddingLeft: 1,
-            paddingTop: 1,
           }}
         >
           <text fg={Theme.accent} attributes={TextAttributes.BOLD}>
@@ -1415,7 +1577,7 @@ const ListSection = (props: SectionProps) => {
       <ListSectionContext.Provider value={sectionContextValue}>
         {props.children}
       </ListSectionContext.Provider>
-    </>
+    </box>
   )
 }
 
@@ -1526,9 +1688,14 @@ Grid.Item = (props: GridItemProps) => {
   const { content, getDetailMarkdown, ...itemProps } = props
 
   // Extract image value and tooltip
-  const imageValue = typeof content === 'string' ? content : content?.value
+  const imageValue = (() => {
+    if (typeof content === 'string') return content
+    if (content && 'source' in content) return content
+    if (content && 'value' in content) return content.value
+    return undefined
+  })()
   const imageTooltip =
-    typeof content === 'object' ? content?.tooltip : undefined
+    typeof content === 'object' && content && 'tooltip' in content ? content.tooltip : undefined
 
   // Convert Grid.Item props to List.Item props
   const listItemProps: ItemProps = {