termcast 1.3.48 → 1.3.49

package/src/examples/list-item-accessories.tsx

@@ -0,0 +1,106 @@
+/**
+ * Example: List.Item with all inline display features.
+ *
+ * Demonstrates every property that renders inline in a list row:
+ * - icon (emoji before title)
+ * - title (main text)
+ * - subtitle (muted text after title)
+ * - accessories: text, text with color, tag, tag with color, date, date with color, icon+text combo
+ */
+import { renderWithProviders, Icon, Color } from 'termcast'
+import List from 'termcast'
+
+function ListItemAccessoriesExample() {
+  const yesterday = new Date(Date.now() - 86400_000)
+  const lastWeek = new Date(Date.now() - 7 * 86400_000)
+
+  return (
+    <List navigationTitle="List Item Accessories">
+      {/* 1. Title only */}
+      <List.Item id="title-only" title="Title Only" />
+
+      {/* 2. Title + subtitle */}
+      <List.Item id="with-subtitle" title="With Subtitle" subtitle="a subtitle" />
+
+      {/* 3. Icon + title */}
+      <List.Item id="with-icon" title="With Icon" icon={Icon.Star} />
+
+      {/* 4. Icon + title + subtitle */}
+      <List.Item
+        id="icon-subtitle"
+        title="Icon and Subtitle"
+        subtitle="description"
+        icon={Icon.Bookmark}
+      />
+
+      {/* 5. Text accessory (plain string) */}
+      <List.Item
+        id="text-accessory"
+        title="Text Accessory"
+        accessories={[{ text: 'info' }]}
+      />
+
+      {/* 6. Text accessory with color */}
+      <List.Item
+        id="colored-text"
+        title="Colored Text"
+        accessories={[{ text: { value: 'orange', color: Color.Orange } }]}
+      />
+
+      {/* 7. Tag accessory (plain string) */}
+      <List.Item
+        id="tag-accessory"
+        title="Tag Accessory"
+        accessories={[{ tag: 'beta' }]}
+      />
+
+      {/* 8. Tag accessory with color */}
+      <List.Item
+        id="colored-tag"
+        title="Colored Tag"
+        accessories={[{ tag: { value: 'v2', color: Color.Green } }]}
+      />
+
+      {/* 9. Date accessory */}
+      <List.Item
+        id="date-accessory"
+        title="Date Accessory"
+        accessories={[{ date: yesterday }]}
+      />
+
+      {/* 10. Date accessory with color */}
+      <List.Item
+        id="colored-date"
+        title="Colored Date"
+        accessories={[{ date: { value: lastWeek, color: Color.Purple } }]}
+      />
+
+      {/* 11. Multiple accessories combined */}
+      <List.Item
+        id="multiple"
+        title="Multiple Accessories"
+        subtitle="all types"
+        icon={Icon.Hammer}
+        accessories={[
+          { text: 'note' },
+          { tag: 'new' },
+          { date: yesterday },
+        ]}
+      />
+
+      {/* 12. All colored accessories */}
+      <List.Item
+        id="all-colored"
+        title="All Colored"
+        icon={Icon.CircleFilled}
+        accessories={[
+          { text: { value: 'red', color: Color.Red } },
+          { tag: { value: 'blue', color: Color.Blue } },
+          { date: { value: lastWeek, color: Color.Magenta } },
+        ]}
+      />
+    </List>
+  )
+}
+
+await renderWithProviders(<ListItemAccessoriesExample />)

package/src/examples/list-item-accessories.vitest.tsx

@@ -0,0 +1,115 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-item-accessories.tsx'],
+    cols: 80,
+    rows: 25,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('shows all inline item features: icon, title, subtitle, text/tag/date accessories', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Title Only/.test(text)
+    },
+  })
+
+  const snapshot = await session.text()
+  expect(snapshot).toMatchInlineSnapshot(`
+    "
+
+
+       List Item Accessories ────────────────────────────────────────────────────
+
+       > Search...
+
+      ›Title Only
+       With Subtitle a subtitle
+       ★ With Icon
+       ▷ Icon and Subtitle description
+       Text Accessory                                                        info
+       Colored Text                                                        orange
+       Tag Accessory                                                         beta
+       Colored Tag                                                             v2
+       Date Accessory                                                          1d
+       Colored Date                                                            1w
+       ⊤ Multiple Accessories all types                               note new 1d
+       ● All Colored                                                  red blue 1w
+
+
+       ↑↓ navigate   ^k actions                           powered by termcast.app
+
+
+
+    "
+  `)
+
+  // title-only item
+  expect(snapshot).toContain('Title Only')
+  // subtitle
+  expect(snapshot).toContain('a subtitle')
+  // text accessory
+  expect(snapshot).toContain('info')
+  // tag accessory
+  expect(snapshot).toContain('beta')
+  // colored tag
+  expect(snapshot).toContain('v2')
+  // date accessory renders relative time
+  expect(snapshot).toContain('1d')
+  // multiple accessories on one row
+  expect(snapshot).toContain('note')
+  expect(snapshot).toContain('new')
+}, 15000)
+
+test('navigation through all item types', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Title Only/.test(text)
+    },
+  })
+
+  // Navigate to "With Icon" (3rd item)
+  await session.press('down')
+  await session.press('down')
+
+  const afterNav = await session.text()
+  expect(afterNav).toMatchInlineSnapshot(`
+    "
+
+
+       List Item Accessories ────────────────────────────────────────────────────
+
+       > Search...
+
+       Title Only
+       With Subtitle a subtitle
+      ›★ With Icon
+       ▷ Icon and Subtitle description
+       Text Accessory                                                        info
+       Colored Text                                                        orange
+       Tag Accessory                                                         beta
+       Colored Tag                                                             v2
+       Date Accessory                                                          1d
+       Colored Date                                                            1w
+       ⊤ Multiple Accessories all types                               note new 1d
+       ● All Colored                                                  red blue 1w
+
+
+       ↑↓ navigate   ^k actions                           powered by termcast.app
+
+
+
+    "
+  `)
+  // Icon item should be selected
+  expect(afterNav).toContain('›')
+}, 15000)

package/src/examples/list-no-actions.tsx

@@ -0,0 +1,18 @@
+/**
+ * Example: List with items that have no actions prop.
+ * Tests that ctrl+k still opens the built-in action panel (Change Theme, etc.)
+ * even when no extension-provided actions exist.
+ */
+import React from 'react'
+import { List, renderWithProviders } from 'termcast'
+
+function ListNoActionsExample() {
+  return (
+    <List navigationTitle="No Actions Test">
+      <List.Item title="Item without actions" subtitle="Press ctrl+k" />
+      <List.Item title="Another item" subtitle="Also no actions" />
+    </List>
+  )
+}
+
+await renderWithProviders(<ListNoActionsExample />)

package/src/examples/list-no-actions.vitest.tsx

@@ -0,0 +1,97 @@
+/**
+ * E2E tests for ctrl+k with no extension-provided actions.
+ * Verifies that the built-in action panel (Change Theme, Toggle Console Logs)
+ * is always accessible via ctrl+k, even when items have no actions prop.
+ */
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-no-actions.tsx'],
+    cols: 70,
+    rows: 20,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('footer does not show stale action title from built-in actions', async () => {
+  const initial = await session.text({
+    waitFor: (text) => /Item without actions/.test(text),
+  })
+
+  // Footer should show ^k actions but NOT "↵ change theme..." — the useLayoutEffect
+  // in CurrentItemActionsOffscreen clears firstActionTitle for items without actions
+  expect(initial).toContain('^k')
+  expect(initial).not.toContain('change theme')
+  expect(initial).toMatchInlineSnapshot(`
+    "
+
+
+       No Actions Test ────────────────────────────────────────────────
+
+       > Search...
+
+      ›Item without actions Press ctrl+k
+       Another item Also no actions
+
+
+
+
+
+
+       ↑↓ navigate   ^k actions
+
+
+
+
+    "
+  `)
+}, 30000)
+
+test('ctrl+k opens built-in actions when item has no actions', async () => {
+  await session.text({
+    waitFor: (text) => /Item without actions/.test(text),
+  })
+
+  // Press ctrl+k to open action panel
+  await session.press(['ctrl', 'k'])
+
+  const actionsPanel = await session.text({
+    waitFor: (text) => /Change Theme/.test(text),
+    timeout: 5000,
+  })
+
+  // Built-in actions should appear
+  expect(actionsPanel).toContain('Change Theme')
+  expect(actionsPanel).toContain('Console Logs')
+  expect(actionsPanel).toMatchInlineSnapshot(`
+    "
+
+      ╭────────────────────────────────────────────────────────────────╮
+      │                                                                │
+      │   Actions                                                esc   │
+      │                                                                │
+      │   > Search actions...                                          │
+      │                                                                │
+      │                                                                │
+      │   Settings                                                     │
+      │  ›Change Theme...                                              │
+      │   Toggle Console Logs                                          │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │   ↵ select   ↑↓ navigate                                       │
+      │                                                                │"
+  `)
+}, 30000)

package/src/examples/list-spacing-mode.vitest.tsx

@@ -39,11 +39,11 @@ describe('spacingMode default', () => {
          > Search...
 
          With Icons
-        ›▯ Report Q4 financial summary                            [Draft]
+        ›▯ Report Q4 financial summary                              Draft
          ⟨⟩ API Docs REST endpoints guide                            v2.1
 
          Without Icons
-         Meeting Notes Weekly standup points                  [Important]
+         Meeting Notes Weekly standup points                    Important
 
          No Subtitle
          ★ Favorites
@@ -91,7 +91,7 @@ describe('spacingMode relaxed', () => {
          > Search...
 
          With Icons
-        ›▯ Report                                                 [Draft]
+        ›▯ Report                                                   Draft
            Q4 financial summary
 
          ⟨⟩ API Docs                                                 v2.1
@@ -99,7 +99,7 @@ describe('spacingMode relaxed', () => {
 
 
          Without Icons
-         Meeting Notes                                        [Important]
+         Meeting Notes                                          Important
          Weekly standup points
 
 
@@ -132,7 +132,7 @@ describe('spacingMode relaxed', () => {
          > Search...
 
          With Icons
-         ▯ Report                                                 [Draft]
+         ▯ Report                                                   Draft
            Q4 financial summary
 
         ›⟨⟩ API Docs                                                 v2.1
@@ -140,7 +140,7 @@ describe('spacingMode relaxed', () => {
 
 
          Without Icons
-         Meeting Notes                                        [Important]
+         Meeting Notes                                          Important
          Weekly standup points