@brimveyn/aimux 1.6.2 → 1.7.1

package/src/ui/components/theme-picker-modal.tsx

@@ -1,52 +1,32 @@
-import { useTerminalDimensions } from '@opentui/react'
-import { useLayoutEffect, useMemo, useRef } from 'react'
+import { useLayoutEffect, useMemo } from 'react'
 
-import { dispatchGlobal } from '../../state/dispatch-ref'
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterThemeIds } from '../filter-themes'
-import { useTheme } from '../theme'
+import { useTheme, useTransparent } from '../theme'
 import { type ThemeId, THEMES } from '../themes'
 import { uiTokens } from '../ui-tokens'
-import { ListItem } from './list-item'
-import { ModalFilterBar } from './modal-filter-bar'
-import { ModalShell } from './modal-shell'
+import { Picker, type PickerItem } from './picker'
 
 interface ThemePickerModalProps {
   currentThemeId: ThemeId
   filter: string | null
   selectedIndex: number
+  cursorPos?: number
 }
 
-const VIEWPORT_HEIGHT_RATIO = 0.6
-const MODAL_CHROME_ROWS = 6
-
 function clampSelection(index: number, count: number): number {
   if (count === 0) return 0
   return Math.max(0, Math.min(count - 1, index))
 }
 
-function computeWindowStart(
-  prevStart: number,
-  selectedRowIndex: number,
-  total: number,
-  windowSize: number
-): number {
-  if (total <= windowSize) return 0
-  const margin = 1
-  const maxStart = total - windowSize
-  let start = Math.max(0, Math.min(maxStart, prevStart))
-  const topThreshold = start + margin
-  const bottomThreshold = start + windowSize - 1 - margin
-  if (selectedRowIndex < topThreshold) {
-    start = Math.max(0, selectedRowIndex - margin)
-  } else if (selectedRowIndex > bottomThreshold) {
-    start = Math.min(maxStart, selectedRowIndex - windowSize + 1 + margin)
-  }
-  return start
-}
-
-export function ThemePickerModal({ currentThemeId, filter, selectedIndex }: ThemePickerModalProps) {
+export function ThemePickerModal({
+  currentThemeId,
+  cursorPos,
+  filter,
+  selectedIndex,
+}: ThemePickerModalProps) {
   const theme = useTheme()
-  const dimensions = useTerminalDimensions()
+  const transparent = useTransparent()
   const filtered = useMemo(() => filterThemeIds(filter), [filter])
 
   useLayoutEffect(() => {
@@ -54,78 +34,58 @@ export function ThemePickerModal({ currentThemeId, filter, selectedIndex }: Them
   }, [filtered.length])
 
   const effectiveIndex = clampSelection(selectedIndex, filtered.length)
-  const maxHeight = Math.max(6, Math.floor(dimensions.height * VIEWPORT_HEIGHT_RATIO))
-  const listHeight = Math.max(1, maxHeight - MODAL_CHROME_ROWS)
 
-  const prevStartRef = useRef(0)
-  const prevFilterRef = useRef<string | null>(filter)
-  if (prevFilterRef.current !== filter) {
-    prevFilterRef.current = filter
-    prevStartRef.current = 0
-  }
-  const start = computeWindowStart(
-    prevStartRef.current,
-    effectiveIndex,
-    filtered.length,
-    listHeight
-  )
-  prevStartRef.current = start
-  const visible = filtered.slice(start, start + listHeight)
+  const items: PickerItem[] = filtered.flatMap((id, rowIndex) => {
+    const entry = THEMES[id]
+    if (!entry) return []
+    const active = rowIndex === effectiveIndex
+    const isCurrent = id === currentThemeId
+    return [
+      {
+        key: id,
+        onClick: () => {
+          dispatchGlobal({ type: 'close-modal' })
+          runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
+        },
+        title: (
+          <text
+            fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+          >
+            {entry.name}
+          </text>
+        ),
+        trailing: isCurrent ? (
+          <text fg={theme.colors['textLink.foreground']}>current</text>
+        ) : undefined,
+      },
+    ]
+  })
 
   return (
-    <ModalShell
+    <Picker
       title="Select theme"
-      keybindsModeId="modal.theme-picker"
+      keybindsModeId="modal.theme-picker.filtering"
       width={uiTokens.modalWidth.md}
-      listGap={0}
+      filter={filter}
+      cursorPos={cursorPos}
       footer={
         <box flexDirection="column" gap={0}>
           <text fg={theme.colors['editor.lineHighlightBackground']}>
-            {filtered.length === 0
-              ? ''
-              : ` ${effectiveIndex + 1} / ${filtered.length}${filter ? '' : ' — type / to filter'}`}
+            {filtered.length === 0 ? '' : ` ${effectiveIndex + 1} / ${filtered.length}`}
+          </text>
+          <text fg={theme.colors['descriptionForeground']}>
+            {` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}
           </text>
-          <ModalFilterBar filter={filter} />
         </box>
       }
-    >
-      {filtered.length === 0 ? (
+      items={items}
+      selectedIndex={effectiveIndex}
+      emptyState={
         <text fg={theme.colors['descriptionForeground']}>
           {filter ? 'No matching themes.' : 'No themes available.'}
         </text>
-      ) : (
-        <box height={listHeight} flexDirection="column" overflow="hidden">
-          {visible.map((id, i) => {
-            const rowIndex = start + i
-            const entry = THEMES[id]
-            if (!entry) return null
-            const active = rowIndex === effectiveIndex
-            const isCurrent = id === currentThemeId
-            return (
-              <ListItem
-                key={id}
-                active={active}
-                title={
-                  <text
-                    fg={
-                      active
-                        ? theme.colors['editor.foreground']
-                        : theme.colors['descriptionForeground']
-                    }
-                  >
-                    {entry.name}
-                  </text>
-                }
-                trailing={
-                  isCurrent ? (
-                    <text fg={theme.colors['textLink.foreground']}>current</text>
-                  ) : undefined
-                }
-              />
-            )
-          })}
-        </box>
-      )}
-    </ModalShell>
+      }
+      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+    />
   )
 }

package/src/ui/root.tsx

@@ -24,7 +24,7 @@ import { StatusBar } from './components/status-bar'
 import { TerminalPane } from './components/terminal-pane'
 import { ThemePickerModal } from './components/theme-picker-modal'
 import { UpdateAvailableModal } from './components/update-available-modal'
-import { useTheme } from './theme'
+import { useBg } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
@@ -82,7 +82,10 @@ function renderModal(
         <NewTabModal
           selectedIndex={modal.selectedIndex}
           customCommands={options.customCommands}
-          editBuffer={modal.editBuffer}
+          filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
+          editingCommand={modal.type === 'new-tab' ? modal.editingCommand : null}
+          editBuffer={modal.editBuffer ?? ''}
         />
       )
     case 'session-picker':
@@ -93,6 +96,7 @@ function renderModal(
           currentSessionId={options.currentSessionId}
           currentTabCount={options.currentTabCount}
           filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'session-name':
@@ -121,6 +125,7 @@ function renderModal(
           snippets={options.snippets}
           selectedIndex={modal.selectedIndex}
           filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'snippet-editor':
@@ -138,6 +143,7 @@ function renderModal(
           selectedIndex={modal.selectedIndex}
           currentThemeId={options.themeId}
           filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'update-available':
@@ -154,6 +160,7 @@ function renderModal(
           filter={modal.editBuffer}
           selectedIndex={modal.selectedIndex}
           scope={modal.scope}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'git-commit': {
@@ -215,7 +222,7 @@ export function RootView({
   terminalRows,
   themeId,
 }: RootViewProps) {
-  const theme = useTheme()
+  const editorBg = useBg('editor.background')
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const layoutTrees = useAppStore((s) => s.layoutTrees)
@@ -241,12 +248,7 @@ export function RootView({
   const inGitMode = focusMode === 'git' || modal.type === 'git-commit'
   if (inGitMode) {
     return (
-      <box
-        flexDirection="column"
-        width="100%"
-        height="100%"
-        backgroundColor={theme.colors['editor.background']}
-      >
+      <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
         <GitView themeId={themeId} />
         <StatusBar />
         <PendingChordOverlay />
@@ -265,12 +267,7 @@ export function RootView({
   }
 
   return (
-    <box
-      flexDirection="column"
-      width="100%"
-      height="100%"
-      backgroundColor={theme.colors['editor.background']}
-    >
+    <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
       {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Sidebar onTabActivate={onPaneActivate} />
@@ -343,18 +340,12 @@ export function RootView({
 }
 
 function GitPaneInPaneMode({ ratio }: { ratio: number }) {
-  const theme = useTheme()
+  const bg = useBg('sideBar.background')
   // Ratio maps to a fixed column count (20..80), mirroring the reservation in
   // use-terminal-resize so the terminal-content area stays in sync.
   const width = Math.max(20, Math.min(80, Math.round(ratio * 80)))
   return (
-    <box
-      flexDirection="column"
-      width={width}
-      flexShrink={0}
-      backgroundColor={theme.colors['sideBar.background']}
-      overflow="hidden"
-    >
+    <box flexDirection="column" width={width} flexShrink={0} backgroundColor={bg} overflow="hidden">
       <GitPaneWidget pollingEnabled />
     </box>
   )

package/src/ui/status-bar-model.ts

@@ -114,17 +114,17 @@ export function getStatusBarModel(
 function deriveModalModeId(modalType: AppState['modal']['type']): ModeId | null {
   switch (modalType) {
     case 'help':
-      return 'modal.help'
+      return 'modal.help.filtering'
     case 'new-tab':
-      return 'modal.new-tab'
+      return 'modal.new-tab.command-edit'
     case 'session-picker':
-      return 'modal.session-picker'
+      return 'modal.session-picker.filtering'
     case 'snippet-picker':
-      return 'modal.snippet-picker'
+      return 'modal.snippet-picker.filtering'
     case 'split-picker':
       return 'modal.split-picker'
     case 'theme-picker':
-      return 'modal.theme-picker'
+      return 'modal.theme-picker.filtering'
     case 'update-available':
       return 'modal.update-available'
     default:

package/src/ui/theme-store.ts

@@ -1,16 +1,17 @@
 import { useStore } from 'zustand'
 import { createStore } from 'zustand/vanilla'
 
-import { type Theme, type ThemeId, THEMES } from './themes'
+import { type Theme, type ThemeColorMap, type ThemeId, THEMES } from './themes'
 
 interface ThemeStore {
   theme: Theme
+  transparent: boolean
 }
 
 const DEFAULT = THEMES['aimux']
 if (!DEFAULT) throw new Error('default theme missing')
 
-const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT }))
+const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT, transparent: false }))
 
 /**
  * Subscribe to the active theme. Pass a selector to subscribe to a narrower
@@ -34,3 +35,26 @@ export function applyTheme(id: ThemeId): void {
   if (!entry) return
   themeStore.setState({ theme: entry })
 }
+
+/** Subscribe to the transparent-mode flag. */
+export function useTransparent(): boolean {
+  return useStore(themeStore, (s) => s.transparent)
+}
+
+export function getTransparent(): boolean {
+  return themeStore.getState().transparent
+}
+
+export function setTransparent(value: boolean): void {
+  if (themeStore.getState().transparent === value) return
+  themeStore.setState({ transparent: value })
+}
+
+/**
+ * Resolve a background color through the transparent-mode flag. Returns
+ * `undefined` when transparent mode is on, letting the terminal emulator's
+ * own background show through.
+ */
+export function useBg(key: keyof ThemeColorMap): string | undefined {
+  return useStore(themeStore, (s) => (s.transparent ? undefined : s.theme.colors[key]))
+}

package/src/ui/theme.ts

@@ -2,4 +2,12 @@
 // React components should import `useTheme` from `./theme-store`; non-React
 // callers use `getCurrentTheme()`. `applyTheme` moved to the store module.
 
-export { applyTheme, getCurrentTheme, useTheme } from './theme-store'
+export {
+  applyTheme,
+  getCurrentTheme,
+  getTransparent,
+  setTransparent,
+  useBg,
+  useTheme,
+  useTransparent,
+} from './theme-store'

package/src/ui/components/modal-filter-bar.tsx

@@ -1,19 +0,0 @@
-import { useTheme } from '../theme'
-import { Surface } from './surface'
-
-interface ModalFilterBarProps {
-  filter: string | null
-}
-
-export function ModalFilterBar({ filter }: ModalFilterBarProps) {
-  const theme = useTheme()
-  if (filter === null) {
-    return null
-  }
-
-  return (
-    <Surface tone="input" paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
-      <text fg={theme.colors['editor.foreground']}>/{filter}_</text>
-    </Surface>
-  )
-}