termcast 1.3.32 → 1.3.34

package/src/components/list.tsx

@@ -9,6 +9,7 @@ import React, {
     ReactElement,
     ReactNode,
     createContext,
+    useCallback,
     useContext,
     useEffect,
     useLayoutEffect,
@@ -17,6 +18,7 @@ import React, {
     useState
 } from 'react'
 import { LoadingBar } from 'termcast/src/components/loading-bar'
+import { LoadingText } from 'termcast/src/components/loading-text'
 import { Footer } from 'termcast/src/components/footer'
 import { createDescendants } from 'termcast/src/descendants'
 import { useStore } from 'termcast/src/state'
@@ -27,9 +29,9 @@ import { Offscreen } from 'termcast/src/internal/offscreen'
 import { ScrollBox } from 'termcast/src/internal/scrollbox'
 
 import { Color, resolveColor } from 'termcast/src/colors'
-import { getIconEmoji } from 'termcast/src/components/icon'
+import { getIconEmoji, getIconValue } from 'termcast/src/components/icon'
 import { ActionPanel } from 'termcast/src/components/actions'
-import { Theme, markdownSyntaxStyle } from 'termcast/src/theme'
+import { useTheme, markdownSyntaxStyle } from 'termcast/src/theme'
 import { CommonProps } from 'termcast/src/utils'
 
 export { Color }
@@ -71,32 +73,42 @@ interface ActionsInterface {
 }
 
 function ListFooter(): any {
+  const theme = useTheme()
   const firstActionTitle = useStore((s) => s.firstActionTitle)
   const hasToast = useStore((s) => s.toast !== null)
   const listContext = useContext(ListContext)
   const isShowingDetail = listContext?.isShowingDetail ?? false
+  const hasDropdown = listContext?.hasDropdown ?? false
 
   const content = hasToast ? null : (
     <box style={{ flexDirection: 'row', gap: 3 }}>
       {firstActionTitle && (
         <box style={{ flexDirection: 'row', gap: 1 }}>
-          <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
             ↵
           </text>
-          <text flexShrink={0} fg={Theme.textMuted}>{firstActionTitle.toLowerCase()}</text>
+          <text flexShrink={0} fg={theme.textMuted}>{firstActionTitle.toLowerCase()}</text>
         </box>
       )}
       <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ↑↓
         </text>
-        <text flexShrink={0} fg={Theme.textMuted}>navigate</text>
+        <text flexShrink={0} fg={theme.textMuted}>navigate</text>
       </box>
+      {hasDropdown && (
+        <box style={{ flexDirection: 'row', gap: 1 }}>
+          <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
+            ^p
+          </text>
+          <text flexShrink={0} fg={theme.textMuted}>dropdown</text>
+        </box>
+      )}
       <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ^k
         </text>
-        <text flexShrink={0} fg={Theme.textMuted}>actions</text>
+        <text flexShrink={0} fg={theme.textMuted}>actions</text>
       </box>
     </box>
   )
@@ -104,6 +116,38 @@ function ListFooter(): any {
   return <Footer hidePoweredBy={isShowingDetail}>{content}</Footer>
 }
 
+/**
+ * Component that subscribes to descendants changes and renders current item's
+ * actions offscreen. This ensures actions are captured even when items register
+ * after the initial render (preserving context via closures).
+ */
+function CurrentItemActionsOffscreen(props: {
+  selectedIndex: number
+  fallbackActions?: ReactNode
+}): any {
+  // Subscribe to descendants changes - this hook triggers re-render when items register
+  const descendantsMap = useListDescendantsRerender()
+
+  // Get current item's actions
+  const items = Object.values(descendantsMap)
+    .filter((item) => item.index !== -1)
+    .sort((a, b) => a.index - b.index)
+
+  const currentItem = items.find((item) => item.index === props.selectedIndex)
+  const actions = currentItem?.props?.actions ?? props.fallbackActions ?? null
+
+  // Clear first action title when there are no actions
+  useLayoutEffect(() => {
+    if (!actions) {
+      useStore.setState({ firstActionTitle: '' })
+    }
+  }, [actions])
+
+  if (!actions) return null
+
+  return <Offscreen>{actions}</Offscreen>
+}
+
 interface NavigationChildInterface {
   navigationTitle?: string
   isLoading?: boolean
@@ -126,7 +170,11 @@ interface PaginationInterface {
 }
 
 export namespace Image {
-  export type ImageLike = string | { source: string; tintColor?: string }
+  export type ImageLike = string | { source: string; tintColor?: string; mask?: ImageMask }
+  export enum ImageMask {
+    Circle = 'circle',
+    RoundedRectangle = 'roundedRectangle',
+  }
 }
 
 export type ItemAccessory =
@@ -298,6 +346,9 @@ interface ListContextValue {
   isFiltering: boolean
   setCurrentDetail?: (detail: ReactNode) => void
   isShowingDetail?: boolean
+  customEmptyViewRef: React.MutableRefObject<boolean>
+  isLoading?: boolean
+  hasDropdown?: boolean
 }
 
 const ListContext = createContext<ListContextValue | undefined>(undefined)
@@ -383,6 +434,7 @@ interface ListDropdownDialogProps extends DropdownProps {
 }
 
 function ListDropdownDialog(props: ListDropdownDialogProps): any {
+  const theme = useTheme()
   const [searchText, setSearchTextRaw] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
   const inputRef = useRef<TextareaRenderable>(null)
@@ -469,11 +521,11 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
                 justifyContent: 'space-between',
               }}
             >
-              <text flexShrink={0} fg={Theme.textMuted}>{props.tooltip}</text>
-              <text flexShrink={0} fg={Theme.textMuted}>esc</text>
+              <text flexShrink={0} fg={theme.textMuted}>{props.tooltip}</text>
+              <text flexShrink={0} fg={theme.textMuted}>esc</text>
             </box>
             <box style={{ paddingTop: 1, paddingBottom: 1, flexDirection: 'row' }}>
-              <text flexShrink={0} fg={Theme.textMuted}>&gt; </text>
+              <text flexShrink={0} fg={theme.textMuted}>&gt; </text>
               <textarea
                 ref={inputRef}
                 height={1}
@@ -490,9 +542,9 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
                 placeholder={props.placeholder || 'Search...'}
                 focused={inFocus}
                 initialValue={searchText}
-                focusedBackgroundColor={Theme.backgroundPanel}
-                cursorColor={Theme.primary}
-                focusedTextColor={Theme.textMuted}
+                focusedBackgroundColor={theme.backgroundPanel}
+                cursorColor={theme.primary}
+                focusedTextColor={theme.textMuted}
               />
             </box>
           </box>
@@ -517,7 +569,7 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
           </box>
           {props.isLoading && (
             <box style={{ paddingLeft: 1 }}>
-              <text flexShrink={0} fg={Theme.textMuted}>Loading...</text>
+              <text flexShrink={0} fg={theme.textMuted}>Loading...</text>
             </box>
           )}
         </box>
@@ -529,21 +581,22 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
 }
 
 function DropdownFooter(): any {
+  const theme = useTheme()
   const hasToast = useStore((s) => s.toast !== null)
 
   const content = hasToast ? null : (
     <box style={{ flexDirection: 'row', gap: 3 }}>
       <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ↵
         </text>
-        <text flexShrink={0} fg={Theme.textMuted}>select</text>
+        <text flexShrink={0} fg={theme.textMuted}>select</text>
       </box>
       <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ↑↓
         </text>
-        <text flexShrink={0} fg={Theme.textMuted}>navigate</text>
+        <text flexShrink={0} fg={theme.textMuted}>navigate</text>
       </box>
     </box>
   )
@@ -568,6 +621,7 @@ function ListItemRow(props: {
   index?: number
   ref?: React.Ref<BoxRenderable>
 }) {
+  const theme = useTheme()
   const { title, subtitle, icon, iconColor, accessories, active, ref } = props
   const [isHovered, setIsHovered] = useState(false)
 
@@ -586,7 +640,7 @@ function ListItemRow(props: {
             <text
               key={`text-${textValue}`}
               flexShrink={0}
-              fg={active ? Theme.background : resolveColor(textColor) || Theme.info}
+              fg={active ? theme.background : resolveColor(textColor) || theme.info}
               wrapMode="none"
             >
               {textValue}
@@ -606,7 +660,7 @@ function ListItemRow(props: {
             <text
               key={`tag-${tagValue}`}
               flexShrink={0}
-              fg={active ? Theme.background : resolveColor(tagColor) || Theme.warning}
+              fg={active ? theme.background : resolveColor(tagColor) || theme.warning}
               wrapMode="none"
             >
               [{tagValue}]
@@ -629,7 +683,7 @@ function ListItemRow(props: {
             <text
               key={`date-${dateValue.getTime()}`}
               flexShrink={0}
-              fg={active ? Theme.background : resolveColor(dateColor) || Theme.success}
+              fg={active ? theme.background : resolveColor(dateColor) || theme.success}
               wrapMode="none"
             >
               {formatted}
@@ -647,9 +701,9 @@ function ListItemRow(props: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         backgroundColor: active
-          ? Theme.primary
+          ? theme.primary
           : isHovered
-            ? Theme.backgroundPanel
+            ? theme.backgroundPanel
             : undefined,
         paddingLeft: 0,
         paddingRight: 1,
@@ -666,11 +720,11 @@ function ListItemRow(props: {
     >
       <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden', gap: 1 }}>
         <box style={{ flexDirection: 'row', flexShrink: 0 }}>
-          <text flexShrink={0} fg={active ? Theme.background : Theme.text} attributes={active ? TextAttributes.BOLD : undefined} selectable={false} wrapMode="none">{active ? '›' : ' '}</text>
-          {icon && <text flexShrink={0} fg={active ? Theme.background : iconColor || Theme.text} selectable={false} wrapMode="none">{getIconEmoji(icon)} </text>}
+          <text flexShrink={0} fg={active ? theme.background : theme.text} attributes={active ? TextAttributes.BOLD : undefined} selectable={false} wrapMode="none">{active ? '›' : ' '}</text>
+          {icon && <text flexShrink={0} fg={active ? theme.background : iconColor || theme.text} selectable={false} wrapMode="none">{getIconEmoji(icon)} </text>}
           <text
             flexShrink={0}
-            fg={active ? Theme.background : Theme.text}
+            fg={active ? theme.background : theme.text}
             attributes={active ? TextAttributes.BOLD : undefined}
             selectable={false}
             wrapMode="none"
@@ -681,7 +735,7 @@ function ListItemRow(props: {
         {subtitle && (
           <text
             flexShrink={0}
-            fg={active ? Theme.background : Theme.textMuted}
+            fg={active ? theme.background : theme.textMuted}
             selectable={false}
             wrapMode="none"
           >
@@ -719,12 +773,30 @@ export const List: ListType = (props) => {
     ...otherProps
   } = props
 
-  const [internalSearchText, setInternalSearchTextRaw] = useState('')
+  const theme = useTheme()
+  const [internalSearchText, setInternalSearchText] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [currentDetail, setCurrentDetail] = useState<ReactNode>(null)
-  const [currentItemActions, setCurrentItemActions] = useState<ReactNode>(null)
+
   const inputRef = useRef<TextareaRenderable>(null)
+  const customEmptyViewRef = useRef(false)
+
+  // Ref callback that registers the textarea in global state for ESC handling
+  const setInputRef = useCallback((node: TextareaRenderable | null) => {
+    if (!node) return
+
+    inputRef.current = node
+    useStore.setState({ activeSearchInputRef: node })
+
+    // React 19: return cleanup function for unmount
+    return () => {
+      if (useStore.getState().activeSearchInputRef === node) {
+        useStore.setState({ activeSearchInputRef: null })
+      }
+      inputRef.current = null
+    }
+  }, [])
   const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
   const descendantsContext = useListDescendants()
   const navigationPending = useNavigationPending()
@@ -773,12 +845,17 @@ export const List: ListType = (props) => {
     setIsDropdownOpen(true)
   }
 
-  // Wrapper function that updates search text
-  const setInternalSearchText = (value: string) => {
-    // Using flushSync to force descendants to update visibility before querying
-    flushSync(() => {
-      setInternalSearchTextRaw(value)
-    })
+  // Sync selection to the first visible item whenever searchText changes.
+  // Runs after children's useLayoutEffects (descendants registered) but before paint,
+  // so there is no intermediate frame with stale selection.
+  // Works for both controlled and uncontrolled searchText.
+  const prevSearchTextRef = useRef(searchText)
+  useLayoutEffect(() => {
+    if (prevSearchTextRef.current === searchText) return
+    prevSearchTextRef.current = searchText
+
+    if (!isFilteringEnabled) return
+
     const items = Object.values(descendantsContext.map.current)
       .filter((item) => item.index !== -1 && item.props?.visible !== false)
       .sort((a, b) => a.index - b.index)
@@ -786,7 +863,7 @@ export const List: ListType = (props) => {
     if (items.length > 0 && items[0]) {
       setSelectedIndex(items[0].index)
     }
-  }
+  })
 
   const listContextValue = useMemo<ListContextValue>(
     () => ({
@@ -799,19 +876,22 @@ export const List: ListType = (props) => {
       isFiltering: isFilteringEnabled,
       setCurrentDetail,
       isShowingDetail,
+      customEmptyViewRef,
+      isLoading,
+      hasDropdown: !!searchBarAccessory,
     }),
-    [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail],
+    [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail, isLoading, searchBarAccessory],
   )
 
-  // Clear detail when detail view is hidden
-  useEffect(() => {
+  // Clear detail when detail view is hidden (before paint to avoid flash)
+  useLayoutEffect(() => {
     if (!isShowingDetail) {
       setCurrentDetail(null)
     }
   }, [isShowingDetail])
 
-  // Handle selectedItemId prop changes
-  useEffect(() => {
+  // Handle selectedItemId prop changes (before paint to avoid flash)
+  useLayoutEffect(() => {
     // Only update selection if selectedItemId is explicitly provided
     if (selectedItemId !== undefined) {
       const items = Object.values(descendantsContext.map.current)
@@ -824,7 +904,7 @@ export const List: ListType = (props) => {
     }
   }, [selectedItemId])
 
-  // Call onSelectionChange when selection changes and track current item's actions
+  // Call onSelectionChange when selection changes
   useEffect(() => {
     const items = Object.values(descendantsContext.map.current)
       .filter((item) => item.index !== -1)
@@ -832,21 +912,12 @@ export const List: ListType = (props) => {
 
     const currentItem = items.find((item) => item.index === selectedIndex)
 
-    // Track current item's actions for footer display
-    const actions = currentItem?.props?.actions ?? props.actions ?? null
-    setCurrentItemActions(actions)
-
-    // Clear first action title when there are no actions
-    if (!actions) {
-      useStore.setState({ firstActionTitle: '' })
-    }
-
     // Call onSelectionChange callback if provided
     if (onSelectionChange) {
       const selectedId = currentItem?.props?.id ?? null
       onSelectionChange(selectedId)
     }
-  }, [selectedIndex, props.actions])
+  }, [selectedIndex])
 
   const scrollToItem = (item: { props?: ListItemDescendant }) => {
     const scrollBox = scrollBoxRef.current
@@ -891,8 +962,10 @@ export const List: ListType = (props) => {
 
     const nextItem = items[nextVisibleIndex]
     if (nextItem) {
+      flushSync(() => {
+        setSelectedIndex(nextItem.index)
+      })
       scrollToItem(nextItem)
-      setSelectedIndex(nextItem.index)
     }
   }
 
@@ -914,32 +987,23 @@ export const List: ListType = (props) => {
       .sort((a, b) => a.index - b.index)
     const currentItem = items.find((item) => item.index === selectedIndex)
 
-    // Handle Ctrl+K to show actions (always show sheet)
+    // Handle Ctrl+K to show actions dialog via portal
     if (evt.name === 'k' && evt.ctrl) {
-      // Show current item's actions if available
-      if (currentItem?.props?.actions) {
-        dialog.pushActions(currentItem.props.actions)
-      }
-      // Otherwise show List's own actions
-      else if (props.actions) {
-        dialog.pushActions(props.actions)
-      }
-      // Otherwise show empty ActionPanel (still has Settings section with Configure Extension, etc.)
-      else {
-        dialog.pushActions(<ActionPanel />)
+      const hasActions = currentItem?.props?.actions || props.actions
+      if (hasActions) {
+        useStore.setState({ showActionsDialog: true })
       }
       return
     }
 
     if (evt.name === 'up') move(-1)
     if (evt.name === 'down') move(1)
-    // Handle Enter to execute first action directly
+    // Handle Enter to auto-execute first action via ActionPanel
     if (evt.name === 'return') {
       if (!currentItem?.props) return
 
       if (currentItem.props.actions) {
         useStore.setState({ shouldAutoExecuteFirstAction: true })
-        dialog.pushActions(currentItem.props.actions)
       }
     }
   })
@@ -1002,9 +1066,9 @@ export const List: ListType = (props) => {
                   flexShrink: 1,
                 }}
               >
-                <text flexShrink={0} fg={Theme.textMuted}>&gt; </text>
+                <text flexShrink={0} fg={theme.textMuted}>&gt; </text>
                 <textarea
-                  ref={inputRef}
+                  ref={setInputRef}
                   height={1}
                   flexGrow={1}
                   wrapMode='none'
@@ -1019,9 +1083,9 @@ export const List: ListType = (props) => {
                     const value = inputRef.current?.plainText || ''
                     handleSearchChange(value)
                   }}
-                  focusedBackgroundColor={Theme.backgroundPanel}
-                  cursorColor={Theme.primary}
-                  focusedTextColor={Theme.text}
+                  focusedBackgroundColor={theme.backgroundPanel}
+                  cursorColor={theme.primary}
+                  focusedTextColor={theme.text}
                 />
               </box>
               {searchBarAccessory}
@@ -1038,6 +1102,7 @@ export const List: ListType = (props) => {
                 focused={false}
                 flexGrow={1}
                 flexShrink={1}
+                minHeight={6}
                 style={{
                   rootOptions: {
                     backgroundColor: undefined,
@@ -1056,10 +1121,11 @@ export const List: ListType = (props) => {
               {/* Footer with keyboard shortcuts or toast */}
               <ListFooter />
 
-              {/* Render current item's actions offscreen to collect first action title */}
-              {currentItemActions && (
-                <Offscreen>{currentItemActions}</Offscreen>
-              )}
+              {/* Render current item's actions offscreen to capture them with context preserved */}
+              <CurrentItemActionsOffscreen
+                selectedIndex={selectedIndex}
+                fallbackActions={props.actions}
+              />
             </box>
 
             {/* Detail panel on the right */}
@@ -1073,7 +1139,7 @@ export const List: ListType = (props) => {
                 }}
                 border={['left']}
                 borderStyle='single'
-                borderColor={Theme.border}
+                borderColor={theme.border}
               >
                 {currentDetail}
               </box>
@@ -1086,11 +1152,13 @@ export const List: ListType = (props) => {
 }
 
 
-function DefaultEmptyView(): any {
+// Wrapper component that only renders children when no visible items exist
+function ShowOnNoItems(props: { children: ReactNode; isCustomEmptyView?: boolean }): any {
   // Subscribe to re-render when items are added/removed
   void useListDescendantsRerender()
   // Get live map ref for reading in useLayoutEffect
   const map = useListDescendantsMap()
+  const listContext = useContext(ListContext)
   const [hasVisibleItems, setHasVisibleItems] = useState(true)
 
   // We must check visibility in useLayoutEffect because:
@@ -1102,27 +1170,36 @@ function DefaultEmptyView(): any {
   useLayoutEffect(() => {
     const items = Object.values(map.current)
       .filter((item) => item.index !== -1 && item.props?.visible !== false)
-    setHasVisibleItems(items.length > 0)
+    // For default empty view, also check if custom empty view exists
+    const hasCustomEmptyView = !props.isCustomEmptyView && (listContext?.customEmptyViewRef.current ?? false)
+    setHasVisibleItems(items.length > 0 || hasCustomEmptyView)
   })
 
   if (hasVisibleItems) return null
 
+  return props.children
+}
+
+function DefaultEmptyView(): any {
+  const theme = useTheme()
   return (
-    <box
-      style={{
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingTop: 2,
-        paddingBottom: 2,
-        paddingLeft: 2,
-        paddingRight: 2,
-      }}
-    >
-      <text flexShrink={0} fg={Theme.textMuted}>
-        No items found
-      </text>
-    </box>
+    <ShowOnNoItems>
+      <box
+        style={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: 2,
+          paddingRight: 2,
+        }}
+      >
+        <text flexShrink={0} fg={theme.textMuted}>
+          No items found
+        </text>
+      </box>
+    </ShowOnNoItems>
   )
 }
 
@@ -1197,8 +1274,8 @@ const ListItem: ListItemType = (props) => {
   const selectedIndex = listContext?.selectedIndex ?? 0
   const isActive = index === selectedIndex
 
-  // Update detail when this item becomes active or detail prop changes
-  useEffect(() => {
+  // Update detail when this item becomes active or detail prop changes (before paint)
+  useLayoutEffect(() => {
     if (isActive && listContext?.isShowingDetail && listContext?.setCurrentDetail) {
       listContext.setCurrentDetail(props.detail || null)
     }
@@ -1212,7 +1289,10 @@ const ListItem: ListItemType = (props) => {
     if (listContext && index !== -1) {
       // If clicking on already selected item, show actions (like pressing Enter)
       if (isActive) {
-        dialog.pushActions(props.actions || <ActionPanel />)
+        // Show actions dialog via portal
+        if (props.actions) {
+          useStore.setState({ showActionsDialog: true })
+        }
       } else if (listContext.setSelectedIndex) {
         // Otherwise just select the item
         listContext.setSelectedIndex(index)
@@ -1262,13 +1342,14 @@ const ListItem: ListItemType = (props) => {
 }
 
 const ListItemDetail: ListItemDetailType = (props) => {
+  const theme = useTheme()
   const { isLoading, markdown, metadata } = props
 
   return (
     <box style={{ flexDirection: 'column', flexGrow: 1 }}>
       {isLoading && (
         <box style={{ paddingBottom: 1 }}>
-          <text flexShrink={0} fg={Theme.textMuted}>Loading...</text>
+          <text flexShrink={0} fg={theme.textMuted}>Loading...</text>
         </box>
       )}
 
@@ -1287,16 +1368,16 @@ const ListItemDetail: ListItemDetailType = (props) => {
           },
         }}
       >
-        <box style={{ flexDirection: 'column' }}>
+        <box gap={1} 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}
+              // border={['top']}
+              // borderStyle='single'
+              // borderColor={theme.border}
             >
               {metadata}
             </box>
@@ -1307,65 +1388,32 @@ const ListItemDetail: ListItemDetailType = (props) => {
   )
 }
 
-const ListItemDetailMetadata = (props: MetadataProps) => {
-  return (
-    <box style={{ flexDirection: 'column' }}>
-      {props.children}
-    </box>
-  )
-}
-
-const ListItemDetailMetadataLabel = (props: { title: string; text?: string; icon?: Image.ImageLike }) => {
-  return (
-    <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
-      <text flexShrink={0} fg={Theme.textMuted}>{props.title}:</text>
-      {props.text && <text flexShrink={0} fg={Theme.text}>{props.text}</text>}
-    </box>
-  )
-}
-
-const ListItemDetailMetadataSeparator = () => {
-  return (
-    <box style={{ paddingBottom: 0.5 }}>
-      <text flexShrink={0} fg={Theme.border}>─────────────────</text>
-    </box>
-  )
-}
+import { Metadata, MetadataContext } from 'termcast/src/components/metadata'
+import type { MetadataConfig } from 'termcast/src/components/metadata'
 
-const ListItemDetailMetadataLink = (props: { title: string; target: string; text: string }) => {
-  return (
-    <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
-      <text flexShrink={0} fg={Theme.textMuted}>{props.title}:</text>
-      <text flexShrink={0} fg={Theme.markdownLink}>{props.text}</text>
-    </box>
-  )
+// List.Item.Detail.Metadata config: smaller padding for compact list detail panel
+const listDetailMetadataConfig: MetadataConfig = {
+  maxValueLen: 20,
+  titleMinWidth: 12,
+  paddingBottom: 0.5,
+  separatorWidth: 17,
 }
 
-const ListItemDetailMetadataTagList = (props: { title: string; children: ReactNode }) => {
+const ListItemDetailMetadata = (props: MetadataProps) => {
   return (
-    <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
-      <text flexShrink={0} fg={Theme.textMuted}>{props.title}:</text>
-      <box style={{ flexDirection: 'row', paddingLeft: 1 }}>
+    <MetadataContext.Provider value={listDetailMetadataConfig}>
+      <box style={{ flexDirection: 'column' }}>
         {props.children}
       </box>
-    </box>
-  )
-}
-
-const ListItemDetailMetadataTagListItem = (props: { text?: string; color?: Color.ColorLike; icon?: Image.ImageLike; onAction?: () => void }) => {
-  return (
-    <box style={{ paddingRight: 1 }}>
-      <text flexShrink={0} fg={resolveColor(props.color) || Theme.accent}>[{props.text}]</text>
-    </box>
+    </MetadataContext.Provider>
   )
 }
 
 ListItemDetail.Metadata = ListItemDetailMetadata as any
-ListItemDetailMetadata.Label = ListItemDetailMetadataLabel as any
-ListItemDetailMetadata.Separator = ListItemDetailMetadataSeparator as any
-ListItemDetailMetadata.Link = ListItemDetailMetadataLink as any
-ListItemDetailMetadata.TagList = ListItemDetailMetadataTagList as any
-ListItemDetailMetadataTagList.Item = ListItemDetailMetadataTagListItem as any
+ListItemDetailMetadata.Label = Metadata.Label as any
+ListItemDetailMetadata.Separator = Metadata.Separator as any
+ListItemDetailMetadata.Link = Metadata.Link as any
+ListItemDetailMetadata.TagList = Metadata.TagList as any
 
 ListItem.Detail = ListItemDetail
 
@@ -1378,6 +1426,7 @@ ListItem.Detail = ListItemDetail
  * value="" (or your preferred reset value) at the top of your dropdown items.
  */
 const ListDropdown: ListDropdownType = (props) => {
+  const theme = useTheme()
   const listContext = useContext(ListContext)
   const [isHovered, setIsHovered] = useState(false)
 
@@ -1442,8 +1491,8 @@ const ListDropdown: ListDropdownType = (props) => {
     [],
   )
 
-  // Open dropdown dialog when triggered
-  useEffect(() => {
+  // Open dropdown dialog when triggered (before paint to avoid flash)
+  useLayoutEffect(() => {
     if (isDropdownOpen && !dialog.stack.length) {
       // Pass the children to the dialog to render them there
       dialog.push({
@@ -1499,7 +1548,7 @@ const ListDropdown: ListDropdownType = (props) => {
             // minWidth: value.length + 4,
             flexDirection: 'row',
             flexShrink: 0,
-            backgroundColor: isHovered ? Theme.backgroundPanel : undefined,
+            backgroundColor: isHovered ? theme.backgroundPanel : undefined,
           }}
           onMouseMove={() => setIsHovered(true)}
           onMouseOut={() => setIsHovered(false)}
@@ -1511,16 +1560,22 @@ const ListDropdown: ListDropdownType = (props) => {
           }}
         >
           {/*<text >^p </text>*/}
+          {listContext.isLoading ? (
+            <LoadingText isLoading color={isHovered ? theme.text : theme.textMuted}>
+              {displayValue || 'Loading...'}
+            </LoadingText>
+          ) : (
+            <text
+              flexShrink={0}
+              fg={isHovered ? theme.text : theme.textMuted}
+              selectable={false}
+            >
+              {displayValue}
+            </text>
+          )}
           <text
             flexShrink={0}
-            fg={isHovered ? Theme.text : Theme.textMuted}
-            selectable={false}
-          >
-            {displayValue}
-          </text>
-          <text
-            flexShrink={0}
-            fg={isHovered ? Theme.text : Theme.textMuted}
+            fg={isHovered ? theme.text : theme.textMuted}
             selectable={false}
           >
             {' '}
@@ -1533,6 +1588,7 @@ const ListDropdown: ListDropdownType = (props) => {
 }
 
 ListDropdown.Item = (props) => {
+  const theme = useTheme()
   const dropdownContext = useContext(DropdownContext)
   const [isHovered, setIsHovered] = useState(false)
 
@@ -1596,9 +1652,9 @@ ListDropdown.Item = (props) => {
         style={{
           flexDirection: 'row',
           backgroundColor: isActive
-            ? Theme.primary
+            ? theme.primary
             : isHovered
-              ? Theme.backgroundPanel
+              ? theme.backgroundPanel
               : undefined,
           paddingLeft: isActive ? 0 : 1,
           paddingRight: 1,
@@ -1611,7 +1667,7 @@ ListDropdown.Item = (props) => {
       >
         <box style={{ flexDirection: 'row' }}>
           {isActive && (
-            <text flexShrink={0} fg={Theme.background} selectable={false}>
+            <text flexShrink={0} fg={theme.background} selectable={false}>
               ›{''}
             </text>
           )}
@@ -1619,10 +1675,10 @@ ListDropdown.Item = (props) => {
             flexShrink={0}
             fg={
               isActive
-                ? Theme.background
+                ? theme.background
                 : isCurrent
-                  ? Theme.primary
-                  : Theme.text
+                  ? theme.primary
+                  : theme.text
             }
             attributes={isActive ? TextAttributes.BOLD : undefined}
             selectable={false}
@@ -1638,6 +1694,7 @@ ListDropdown.Item = (props) => {
 }
 
 ListDropdown.Section = (props) => {
+  const theme = useTheme()
   const parentContext = useContext(DropdownContext)
 
   // If not inside a Dropdown, just render nothing
@@ -1665,7 +1722,7 @@ ListDropdown.Section = (props) => {
       {/* Render section title if we're in the dialog and not searching */}
       {showTitle && (
         <box style={{ paddingTop: 1, paddingLeft: 1 }}>
-          <text flexShrink={0} fg={Theme.accent} attributes={TextAttributes.BOLD}>
+          <text flexShrink={0} fg={theme.accent} attributes={TextAttributes.BOLD}>
             {props.title}
           </text>
         </box>
@@ -1679,16 +1736,13 @@ ListDropdown.Section = (props) => {
 
 List.Item = ListItem
 const ListSection = (props: SectionProps) => {
+  const theme = useTheme()
   const parentContext = useContext(ListSectionContext)
   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
+  // NOTE: Must be called before any early returns to satisfy React hooks rules
   const sectionContextValue = useMemo(
     () => ({
       ...parentContext,
@@ -1698,6 +1752,11 @@ const ListSection = (props: SectionProps) => {
     [parentContext, props.title, searchText],
   )
 
+  // Don't render empty sections
+  if (React.Children.count(props.children) === 0) {
+    return null
+  }
+
   const isSearching = searchText.trim().length > 0
 
   const children = (
@@ -1719,7 +1778,7 @@ const ListSection = (props: SectionProps) => {
             paddingLeft: 1,
           }}
         >
-          <text flexShrink={0} fg={Theme.accent} attributes={TextAttributes.BOLD}>
+          <text flexShrink={0} fg={theme.accent} attributes={TextAttributes.BOLD}>
             {props.title}
           </text>
         </box>
@@ -1731,43 +1790,30 @@ const ListSection = (props: SectionProps) => {
 
 List.Section = ListSection
 List.Dropdown = ListDropdown
-List.EmptyView = (props: EmptyViewProps) => {
-  const dialog = useDialog()
+// Inner component for EmptyView content (needs hooks at top level)
+function EmptyViewContent(props: EmptyViewProps): any {
+  const theme = useTheme()
   const inFocus = useIsInFocus()
 
   // Handle keyboard for actions
   useKeyboard((evt) => {
     if (!inFocus) return
 
-    // Handle Ctrl+K to show actions (always show panel, even without actions)
+    // Handle Ctrl+K to show actions dialog via portal
     if (evt.name === 'k' && evt.ctrl) {
-      dialog.pushActions(props.actions || <ActionPanel />)
+      if (props.actions) {
+        useStore.setState({ showActionsDialog: true })
+      }
       return
     }
 
-    // Handle Enter to execute first action
+    // Handle Enter to auto-execute first action via ActionPanel
     if (evt.name === 'return' && props.actions) {
       useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.pushActions(props.actions)
     }
   })
 
-  // Get icon string from ImageLike
-  const getIconString = (icon: Image.ImageLike): string | null => {
-    if (typeof icon === 'string') {
-      return getIconEmoji(icon)
-    }
-    if (icon && typeof icon === 'object' && 'source' in icon) {
-      // For { source: string } or { source: { light, dark } } objects
-      const source = icon.source
-      if (typeof source === 'string') {
-        return getIconEmoji(source)
-      }
-    }
-    return null
-  }
-
-  const iconEmoji = props.icon ? getIconString(props.icon) : null
+  const iconEmoji = props.icon ? getIconValue(props.icon) || null : null
 
   return (
     <box
@@ -1784,24 +1830,46 @@ List.EmptyView = (props: EmptyViewProps) => {
       }}
     >
       {iconEmoji && (
-        <text flexShrink={0} fg={Theme.textMuted} style={{ marginBottom: 1 }}>
+        <text flexShrink={0} fg={theme.textMuted} style={{ marginBottom: 1 }}>
           {iconEmoji}
         </text>
       )}
       {props.title && (
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           {props.title?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || ''}
         </text>
       )}
       {props.description && (
-        <text flexShrink={0} fg={Theme.textMuted} wrapMode='word'>
+        <text flexShrink={0} fg={theme.textMuted} wrapMode='word'>
           {props.description?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || ''}
         </text>
       )}
+      {/* Render actions offscreen to capture them */}
+      {props.actions && <Offscreen>{props.actions}</Offscreen>}
     </box>
   )
 }
 
+List.EmptyView = (props: EmptyViewProps) => {
+  const listContext = useContext(ListContext)
+
+  // Register that a custom empty view exists
+  useLayoutEffect(() => {
+    if (listContext?.customEmptyViewRef) {
+      listContext.customEmptyViewRef.current = true
+      return () => {
+        listContext.customEmptyViewRef.current = false
+      }
+    }
+  }, [listContext])
+
+  return (
+    <ShowOnNoItems isCustomEmptyView>
+      <EmptyViewContent {...props} />
+    </ShowOnNoItems>
+  )
+}
+
 export default List
 
 // Grid Component Implementation