termcast 1.3.9

package/src/components/alert.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react'
+import { useKeyboard } from '@opentui/react'
+import { Theme } from 'termcast/src/theme'
+import { TextAttributes } from '@opentui/core'
+import { LocalStorage } from 'termcast/src/apis/localstorage'
+import { useStore } from 'termcast/src/state'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
+
+export namespace Alert {
+  export interface Options {
+    icon?: any // TODO: Add proper Image.ImageLike support
+    title: string
+    message?: string
+    primaryAction?: ActionOptions
+    dismissAction?: ActionOptions
+    rememberUserChoice?: boolean
+  }
+
+  export interface ActionOptions {
+    title: string
+    onAction?: () => void
+    style?: ActionStyle
+  }
+
+  export type ActionStyle = 'default' | 'cancel' | 'destructive'
+}
+
+export const Alert = {
+  ActionStyle: {
+    Default: 'default' as Alert.ActionStyle,
+    Cancel: 'cancel' as Alert.ActionStyle,
+    Destructive: 'destructive' as Alert.ActionStyle,
+  },
+}
+
+interface AlertComponentProps {
+  options: Alert.Options
+  onConfirm: () => void
+  onDismiss: () => void
+}
+
+function AlertComponent({
+  options,
+  onConfirm,
+  onDismiss,
+}: AlertComponentProps): any {
+  const [rememberChoice, setRememberChoice] = useState(false)
+  const inFocus = useIsInFocus()
+
+  useKeyboard((evt) => {
+    if (!inFocus) return
+
+    if (evt.name === 'enter') {
+      if (options.rememberUserChoice && rememberChoice) {
+        LocalStorage.setItem(`alert-remember-${options.title}`, 'true')
+      }
+      options.primaryAction?.onAction?.()
+      onConfirm()
+    } else if (evt.name === 'escape') {
+      if (options.rememberUserChoice && rememberChoice) {
+        LocalStorage.setItem(`alert-remember-${options.title}`, 'false')
+      }
+      options.dismissAction?.onAction?.()
+      onDismiss()
+    } else if (evt.name === 'space' && options.rememberUserChoice) {
+      setRememberChoice(!rememberChoice)
+    }
+  })
+
+  const primaryStyle = options.primaryAction?.style || Alert.ActionStyle.Default
+  const dismissStyle = options.dismissAction?.style || Alert.ActionStyle.Cancel
+
+  const getPrimaryColor = () => {
+    switch (primaryStyle) {
+      case Alert.ActionStyle.Destructive:
+        return Theme.error
+      case Alert.ActionStyle.Default:
+      default:
+        return Theme.primary
+    }
+  }
+
+  return (
+    <box
+      border
+      borderColor={Theme.border}
+      backgroundColor={Theme.backgroundPanel}
+      paddingTop={2}
+      paddingBottom={2}
+      paddingLeft={3}
+      paddingRight={3}
+      width={60}
+    >
+      <box flexDirection='column' alignItems='center'>
+        {options.icon && (
+          <box marginBottom={1}>
+            <text fg={Theme.accent}>⚠️</text>
+          </box>
+        )}
+
+        <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+          {options.title}
+        </text>
+
+        {options.message && (
+          <box marginTop={1} marginBottom={1}>
+            <text fg={Theme.textMuted}>{options.message}</text>
+          </box>
+        )}
+
+        {options.rememberUserChoice && (
+          <box
+            marginTop={1}
+            marginBottom={1}
+            onMouseDown={() => setRememberChoice(!rememberChoice)}
+          >
+            <text fg={Theme.textMuted} selectable={false}>
+              {rememberChoice ? '[x]' : '[ ]'} Do not show this message again
+              (Space to toggle)
+            </text>
+          </box>
+        )}
+
+        <box flexDirection='row' marginTop={2}>
+          <box
+            marginRight={2}
+            onMouseDown={() => {
+              if (options.rememberUserChoice && rememberChoice) {
+                LocalStorage.setItem(`alert-remember-${options.title}`, 'true')
+              }
+              options.primaryAction?.onAction?.()
+              onConfirm()
+            }}
+          >
+            <text
+              fg={getPrimaryColor()}
+              attributes={TextAttributes.BOLD}
+              selectable={false}
+            >
+              [{options.primaryAction?.title || 'OK'} (↵)]
+            </text>
+          </box>
+          <box
+            onMouseDown={() => {
+              if (options.rememberUserChoice && rememberChoice) {
+                LocalStorage.setItem(`alert-remember-${options.title}`, 'false')
+              }
+              options.dismissAction?.onAction?.()
+              onDismiss()
+            }}
+          >
+            <text fg={Theme.textMuted} selectable={false}>
+              [{options.dismissAction?.title || 'Cancel'} (ESC)]
+            </text>
+          </box>
+        </box>
+      </box>
+    </box>
+  )
+}
+
+export async function confirmAlert(options: Alert.Options): Promise<boolean> {
+  // Check if user previously selected "remember choice"
+  if (options.rememberUserChoice) {
+    const remembered = await LocalStorage.getItem(
+      `alert-remember-${options.title}`,
+    )
+    if (remembered === 'true') {
+      options.primaryAction?.onAction?.()
+      return true
+    } else if (remembered === 'false') {
+      options.dismissAction?.onAction?.()
+      return false
+    }
+  }
+
+  return new Promise<boolean>((resolve) => {
+    const handleConfirm = () => {
+      useStore.setState({ dialogStack: [] })
+      resolve(true)
+    }
+
+    const handleDismiss = () => {
+      useStore.setState({ dialogStack: [] })
+      resolve(false)
+    }
+
+    const state = useStore.getState()
+    useStore.setState({
+      dialogStack: [
+        ...state.dialogStack,
+        {
+          element: (
+            <AlertComponent
+              options={options}
+              onConfirm={handleConfirm}
+              onDismiss={handleDismiss}
+            />
+          ),
+          position: 'center',
+        },
+      ],
+    })
+  })
+}

package/src/components/detail.tsx

@@ -0,0 +1,359 @@
+import React, { ReactNode, useMemo, ReactElement } from 'react'
+import { TextAttributes } from '@opentui/core'
+import { useKeyboard } from '@opentui/react'
+import { Theme } from 'termcast/src/theme'
+import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
+import { ActionPanel, Action } from 'termcast/src/components/actions'
+import { Image } from 'termcast/src/components/list'
+import { Color } from 'termcast/src/colors'
+import { useStore } from 'termcast/src/state'
+import { useDialog } from 'termcast/src/internal/dialog'
+
+interface ActionsInterface {
+  actions?: ReactNode
+}
+
+interface NavigationChildInterface {
+  navigationTitle?: string
+}
+
+interface DetailProps extends ActionsInterface, NavigationChildInterface {
+  markdown?: string | null
+  metadata?: ReactNode
+}
+
+interface DetailPropsWithLoading {
+  isLoading?: boolean
+  markdown?: string | null
+  metadata?: ReactNode
+}
+
+interface MetadataProps {
+  children: ReactNode
+}
+
+interface LabelProps {
+  title: string
+  icon?: Image.ImageLike | undefined | null
+  text?:
+    | string
+    | {
+        value: string
+        color?: Color | null
+      }
+}
+
+interface SeparatorProps {}
+
+interface LinkProps {
+  title: string
+  target: string
+  text: string
+}
+
+interface TagListProps {
+  title: string
+  children: ReactNode
+}
+
+interface TagListItemProps {
+  icon?: Image.ImageLike | undefined | null
+  text?: string
+  color?: Color.ColorLike | undefined | null
+  onAction?: () => void
+}
+
+interface DetailType {
+  (props: DetailProps): any
+  Metadata: DetailMetadataType
+}
+
+const DetailMetadataLabel = (props: LabelProps): any => {
+  const textValue =
+    typeof props.text === 'string' ? props.text : props.text?.value
+  const textColor =
+    typeof props.text === 'object' ? props.text?.color : undefined
+
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        paddingBottom: 1,
+      }}
+    >
+      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>
+        {props.title}:
+      </text>
+      <text fg={textColor || Theme.text}>{textValue || '—'}</text>
+    </box>
+  )
+}
+
+const DetailMetadataSeparator = (props: SeparatorProps): any => {
+  return (
+    <box
+      style={{
+        paddingTop: 1,
+        paddingBottom: 1,
+      }}
+    >
+      <text fg={Theme.textMuted}>{'─'.repeat(30)}</text>
+    </box>
+  )
+}
+
+const DetailMetadataLink = (props: LinkProps): any => {
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        paddingBottom: 1,
+      }}
+    >
+      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>
+        {props.title}:
+      </text>
+      <text fg={Theme.accent} attributes={TextAttributes.UNDERLINE}>
+        {props.text}
+      </text>
+    </box>
+  )
+}
+
+const DetailMetadataTagListItem = (props: TagListItemProps): any => {
+  const displayText = props.text || ''
+
+  return (
+    <text
+      fg={props.color || Theme.text}
+      style={{
+        paddingRight: 1,
+        paddingLeft: props.icon ? 1 : 0,
+      }}
+    >
+      {displayText}
+    </text>
+  )
+}
+
+interface DetailMetadataTagListType {
+  (props: TagListProps): any
+  Item: (props: TagListItemProps) => any
+}
+
+const DetailMetadataTagList: DetailMetadataTagListType = (props) => {
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        paddingBottom: 1,
+      }}
+    >
+      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>
+        {props.title}:
+      </text>
+      <box style={{ flexDirection: 'row' }}>{props.children}</box>
+    </box>
+  )
+}
+
+DetailMetadataTagList.Item = DetailMetadataTagListItem
+
+interface DetailMetadataType {
+  (props: MetadataProps): any
+  Label: (props: LabelProps) => any
+  Separator: (props: SeparatorProps) => any
+  Link: (props: LinkProps) => any
+  TagList: DetailMetadataTagListType
+}
+
+const DetailMetadata: DetailMetadataType = (props) => {
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        paddingTop: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+      }}
+    >
+      {props.children}
+    </box>
+  )
+}
+
+DetailMetadata.Label = DetailMetadataLabel
+DetailMetadata.Separator = DetailMetadataSeparator
+DetailMetadata.Link = DetailMetadataLink
+DetailMetadata.TagList = DetailMetadataTagList
+
+function DetailFooter({
+  hasActions,
+  firstActionTitle,
+}: {
+  hasActions?: boolean
+  firstActionTitle?: string
+}): 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,
+        paddingRight: 1,
+        paddingTop: 1,
+        marginTop: 1,
+        flexDirection: 'row',
+      }}
+    >
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        esc
+      </text>
+      <text fg={Theme.textMuted}> go back</text>
+      {hasActions && (
+        <>
+          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+            {'   '}^k
+          </text>
+          <text fg={Theme.textMuted}> actions</text>
+        </>
+      )}
+      {hasActions && firstActionTitle && (
+        <>
+          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+            {'   '}↵
+          </text>
+          <text fg={Theme.textMuted}> {firstActionTitle}</text>
+        </>
+      )}
+    </box>
+  )
+}
+
+// Helper to extract first action title from actions
+function getFirstActionTitle(actions: ReactNode): string | undefined {
+  let firstTitle: string | undefined
+
+  const findFirstAction = (nodes: ReactNode): void => {
+    React.Children.forEach(nodes, (child) => {
+      if (firstTitle) return
+
+      if (React.isValidElement(child)) {
+        const actionTypes = [
+          Action,
+          Action.Push,
+          Action.CopyToClipboard,
+          Action.OpenInBrowser,
+          Action.Open,
+          Action.Paste,
+        ]
+
+        if (actionTypes.includes(child.type as any)) {
+          firstTitle = (child.props as any).title
+        } else if (child.type === ActionPanel) {
+          findFirstAction((child.props as any).children)
+        } else if (child.type === ActionPanel.Section) {
+          findFirstAction((child.props as any).children)
+        }
+      }
+    })
+  }
+
+  findFirstAction(actions)
+  return firstTitle
+}
+
+const Detail: DetailType = (props) => {
+  const { actions } = props
+  const dialog = useDialog()
+  const inFocus = useIsInFocus()
+
+  const markdownLines = useMemo(() => {
+    if (!props.markdown) return []
+    // TODO: Implement proper markdown parsing
+    return props.markdown.split('\n')
+  }, [props.markdown])
+
+  const firstActionTitle = useMemo(() => {
+    return actions ? getFirstActionTitle(actions) : undefined
+  }, [actions])
+
+  // Handle Ctrl+K and Return to show actions
+  useKeyboard((evt) => {
+    if (!inFocus) return
+
+    if (evt.name === 'k' && evt.ctrl && actions) {
+      dialog.push(actions, 'bottom-right')
+    } else if (evt.name === 'return' && actions) {
+      dialog.push(actions, 'bottom-right')
+    }
+  })
+
+  const content = (
+    <box
+      style={{
+        flexDirection: 'row',
+        flexGrow: 1,
+        width: '100%',
+      }}
+    >
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: 'column',
+          paddingTop: 2,
+          // paddingLeft: 2,
+          paddingRight: props.metadata ? 1 : 2,
+        }}
+      >
+        {markdownLines.map((line, index) => (
+          <text key={index} fg={Theme.text}>
+            {line || ' '}
+          </text>
+        ))}
+      </box>
+      {props.metadata && (
+        <box
+          style={{
+            flexShrink: 0,
+            width: 40,
+          }}
+        >
+          {props.metadata}
+        </box>
+      )}
+    </box>
+  )
+
+  return (
+    <box style={{ flexDirection: 'column', height: '100%' }}>
+      {content}
+      <DetailFooter
+        hasActions={!!actions}
+        firstActionTitle={firstActionTitle}
+      />
+    </box>
+  )
+}
+
+Detail.Metadata = DetailMetadata
+
+export { Detail }
+export type { DetailProps, DetailPropsWithLoading }