@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/components/config/ConfigSectionPanel.tsx

@@ -1,250 +0,0 @@
-/* eslint-disable max-lines -- section panel keeps route sync and focus management together for now. */
-import '../ConfigView.scss'
-
-import { Button, Tooltip } from 'antd'
-import type { ReactNode } from 'react'
-import { useLayoutEffect, useRef } from 'react'
-
-import type { ConfigUiSection } from '@vibe-forge/types'
-
-import { SectionForm } from './ConfigSectionForm'
-import type { ConfigDetailRoute } from './configDetail'
-import {
-  getConfigDetailRouteKey,
-  getSectionFields,
-  parseConfigDetailRoute,
-  resolveConfigDetailRouteMeta,
-  serializeConfigDetailRoute
-} from './configDetail'
-import type { FieldSpec } from './configSchema'
-import type { TranslationFn } from './configUtils'
-import { toLabel } from './record-editors/schemaRecordUtils'
-
-export function ConfigSectionPanel({
-  sectionKey,
-  title,
-  icon,
-  headerLeading,
-  fields,
-  uiSection,
-  value,
-  resolvedValue,
-  onChange,
-  mergedModelServices,
-  mergedAdapters,
-  selectedModelService,
-  worktreeEnvironmentOptions,
-  detailQuery = '',
-  onDetailQueryChange,
-  headerExtra,
-  t,
-  className
-}: {
-  sectionKey: string
-  title?: ReactNode
-  icon?: ReactNode
-  headerLeading?: ReactNode
-  fields?: FieldSpec[]
-  uiSection?: ConfigUiSection
-  value: unknown
-  resolvedValue?: unknown
-  onChange: (nextValue: unknown) => void
-  mergedModelServices: Record<string, unknown>
-  mergedAdapters: Record<string, unknown>
-  selectedModelService?: string
-  worktreeEnvironmentOptions?: Array<{ value: string; label: ReactNode }>
-  detailQuery?: string
-  onDetailQueryChange?: (nextQuery: string) => void
-  headerExtra?: ReactNode
-  t: TranslationFn
-  className?: string
-}) {
-  const wrapClassName = ['config-view__editor-wrap', className].filter(Boolean).join(' ')
-  const hasHeading = title != null || icon != null
-  const scrollRef = useRef<HTMLDivElement | null>(null)
-  const scrollPositionsRef = useRef<Record<string, number>>({})
-  const resolvedFields = getSectionFields(sectionKey, fields)
-  const detailRoute = parseConfigDetailRoute({
-    fields: resolvedFields,
-    raw: detailQuery
-  })
-  const detailMeta = resolveConfigDetailRouteMeta({
-    sectionKey,
-    fields: resolvedFields,
-    value,
-    resolvedValue,
-    route: detailRoute,
-    detailContext: {
-      mergedModelServices,
-      mergedAdapters,
-      t
-    },
-    t
-  })
-  const currentViewKey = getConfigDetailRouteKey(detailRoute)
-  const hasHeader = hasHeading || headerLeading != null || headerExtra != null || detailMeta != null
-  const headerClassName = [
-    'config-view__section-header',
-    !hasHeading ? 'config-view__section-header--actions-only' : ''
-  ].filter(Boolean).join(' ')
-
-  const storeCurrentScroll = () => {
-    const node = scrollRef.current
-    if (node == null) return
-    scrollPositionsRef.current[currentViewKey] = node.scrollTop
-  }
-
-  const handleOpenDetail = (nextRoute: ConfigDetailRoute) => {
-    storeCurrentScroll()
-    onDetailQueryChange?.(serializeConfigDetailRoute(nextRoute))
-  }
-
-  const handleCloseDetail = () => {
-    storeCurrentScroll()
-    if ((detailRoute?.nestedPath?.length ?? 0) > 0 && detailRoute != null) {
-      onDetailQueryChange?.(serializeConfigDetailRoute({
-        ...detailRoute,
-        nestedPath: detailRoute.nestedPath?.slice(0, -1) ?? []
-      }))
-      return
-    }
-    onDetailQueryChange?.('')
-  }
-
-  const nestedSegments = detailRoute?.nestedPath ?? []
-  const nestedBreadcrumbs = nestedSegments.map((segment, index) => {
-    const label = index === 0 && segment === 'accounts'
-      ? t('config.accounts.title')
-      : toLabel(segment)
-    const isCurrent = index === nestedSegments.length - 1
-    return {
-      key: `${segment}:${index}`,
-      label,
-      isCurrent,
-      onClick: isCurrent
-        ? undefined
-        : () => {
-          if (detailRoute == null) return
-          storeCurrentScroll()
-          onDetailQueryChange?.(serializeConfigDetailRoute({
-            ...detailRoute,
-            nestedPath: nestedSegments.slice(0, index + 1)
-          }))
-        }
-    }
-  })
-  const breadcrumbItems = (() => {
-    if (detailMeta == null) return []
-
-    const items: Array<{ key: string; label: ReactNode; isCurrent?: boolean; onClick?: () => void }> = [
-      {
-        key: 'section',
-        label: title
-      },
-      {
-        key: 'item',
-        label: detailMeta.itemLabel,
-        isCurrent: nestedBreadcrumbs.length === 0,
-        ...(nestedBreadcrumbs.length > 0
-          ? {
-            onClick: () => {
-              storeCurrentScroll()
-              onDetailQueryChange?.(serializeConfigDetailRoute({
-                ...detailRoute!,
-                nestedPath: []
-              }))
-            }
-          }
-          : {})
-      }
-    ]
-
-    return [...items, ...nestedBreadcrumbs]
-  })()
-
-  useLayoutEffect(() => {
-    const node = scrollRef.current
-    if (node == null) return
-    node.scrollTop = scrollPositionsRef.current[currentViewKey] ?? 0
-  }, [currentViewKey])
-
-  return (
-    <div className={wrapClassName}>
-      {hasHeader && (
-        <div className={headerClassName}>
-          {hasHeading
-            ? detailMeta == null
-              ? (
-                <div className='config-view__section-title'>
-                  {headerLeading}
-                  {icon != null && (
-                    <span className='material-symbols-rounded config-view__section-icon'>
-                      {icon}
-                    </span>
-                  )}
-                  <span>{title}</span>
-                </div>
-              )
-              : (
-                <div className='config-view__detail-trail'>
-                  {headerLeading}
-                  <Tooltip title={t('config.detail.back')}>
-                    <Button
-                      size='small'
-                      type='text'
-                      className='config-view__detail-back'
-                      aria-label={t('config.detail.back')}
-                      icon={<span className='material-symbols-rounded'>chevron_left</span>}
-                      onClick={handleCloseDetail}
-                    />
-                  </Tooltip>
-                  <div className='config-view__detail-breadcrumb'>
-                    {breadcrumbItems.map((item, index) => (
-                      <span key={item.key} className='config-view__detail-breadcrumb-item'>
-                        {index > 0 && (
-                          <span className='config-view__detail-separator' aria-hidden='true'>
-                            <span className='material-symbols-rounded'>chevron_right</span>
-                          </span>
-                        )}
-                        <span
-                          className={`config-view__detail-crumb ${
-                            item.isCurrent === true
-                              ? 'config-view__detail-crumb--current'
-                              : 'config-view__detail-crumb--static'
-                          }`}
-                        >
-                          {item.label}
-                        </span>
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )
-            : null}
-          {headerExtra != null && (
-            <div className='config-view__section-header-extra'>
-              {headerExtra}
-            </div>
-          )}
-        </div>
-      )}
-      <div ref={scrollRef} className='config-view__card'>
-        <SectionForm
-          sectionKey={sectionKey}
-          fields={resolvedFields}
-          uiSection={uiSection}
-          value={value}
-          resolvedValue={resolvedValue}
-          onChange={onChange}
-          mergedModelServices={mergedModelServices}
-          mergedAdapters={mergedAdapters}
-          selectedModelService={selectedModelService}
-          worktreeEnvironmentOptions={worktreeEnvironmentOptions}
-          detailRoute={detailRoute}
-          onOpenDetailRoute={handleOpenDetail}
-          t={t}
-        />
-      </div>
-    </div>
-  )
-}

package/src/components/config/ConfigShortcutInput.scss

@@ -1,11 +0,0 @@
-.config-shortcut-input {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.config-shortcut-input .ant-input {
-  text-align: center;
-  font-weight: 600;
-  letter-spacing: .5px;
-}

package/src/components/config/ConfigShortcutInput.tsx

@@ -1,59 +0,0 @@
-import './ConfigShortcutInput.scss'
-
-import { Button, Input, Tooltip } from 'antd'
-import React from 'react'
-
-import { formatShortcutLabel, getShortcutFromEvent } from '../../utils/shortcutUtils'
-
-export const ShortcutInput = ({
-  value,
-  displayValue,
-  onChange,
-  placeholder,
-  normalizeShortcut,
-  isMac,
-  t
-}: {
-  value: string
-  displayValue?: string
-  onChange: (nextValue: string) => void
-  placeholder: string
-  normalizeShortcut?: (nextValue: string) => string | null
-  isMac: boolean
-  t: (key: string) => string
-}) => {
-  const effectiveValue = (displayValue ?? value).trim()
-  const label = effectiveValue === '' ? '' : formatShortcutLabel(effectiveValue, isMac)
-  return (
-    <div className='config-shortcut-input'>
-      <Input
-        value={label}
-        placeholder={placeholder}
-        readOnly
-        onKeyDown={(event) => {
-          if (event.key === 'Backspace' || event.key === 'Delete') {
-            event.preventDefault()
-            onChange('')
-            return
-          }
-          const nextShortcut = getShortcutFromEvent(event)
-          if (nextShortcut == null) return
-          const normalizedShortcut = normalizeShortcut?.(nextShortcut) ?? nextShortcut
-          if (normalizedShortcut == null) return
-          event.preventDefault()
-          onChange(normalizedShortcut)
-        }}
-      />
-      <Tooltip title={t('config.editor.clearShortcut')}>
-        <Button
-          size='small'
-          type='text'
-          className='config-view__icon-button config-view__icon-button--compact'
-          aria-label={t('config.editor.clearShortcut')}
-          icon={<span className='material-symbols-rounded'>close</span>}
-          onClick={() => onChange('')}
-        />
-      </Tooltip>
-    </div>
-  )
-}

package/src/components/config/ConfigSourceSwitch.tsx

@@ -1,49 +0,0 @@
-import { Button, Tooltip } from 'antd'
-import type { ReactNode } from 'react'
-
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import type { ConfigSource } from '@vibe-forge/core'
-
-export function ConfigSourceSwitch({
-  value,
-  onChange,
-  options
-}: {
-  value: ConfigSource
-  onChange: (value: ConfigSource) => void
-  options: Array<{ value: ConfigSource; icon: string; label: ReactNode }>
-}) {
-  const { isTouchInteraction } = useResponsiveLayout()
-
-  return (
-    <div className='config-view__source-switch' role='group'>
-      {options.map(opt => {
-        const isActive = opt.value === value
-        return (
-          <Tooltip
-            key={opt.value}
-            title={isTouchInteraction ? undefined : opt.label}
-            placement='top'
-          >
-            <Button
-              type='text'
-              size='small'
-              aria-pressed={isActive}
-              aria-label={String(opt.label)}
-              className={`config-view__source-switch-button ${isActive ? 'is-active' : ''}`}
-              icon={
-                <span className='config-view__source-option' aria-hidden='true'>
-                  <span className='material-symbols-rounded'>{opt.icon}</span>
-                  <span className='config-view__source-option-label'>{opt.label}</span>
-                </span>
-              }
-              onClick={() => {
-                onChange(opt.value)
-              }}
-            />
-          </Tooltip>
-        )
-      })}
-    </div>
-  )
-}

package/src/components/config/DetailCollectionFieldActions.tsx

@@ -1,63 +0,0 @@
-import { Button, Popconfirm, Tooltip } from 'antd'
-
-import type { TranslationFn } from './configUtils'
-
-export const DetailCollectionFieldActions = ({
-  index,
-  itemCount,
-  onMove,
-  onRemove,
-  t
-}: {
-  index: number
-  itemCount: number
-  onMove?: (direction: -1 | 1) => void
-  onRemove: () => void
-  t: TranslationFn
-}) => (
-  <div className='config-view__record-actions'>
-    {onMove != null && (
-      <>
-        <Tooltip title={t('config.editor.moveUp')}>
-          <Button
-            size='small'
-            type='text'
-            className='config-view__icon-button config-view__icon-button--compact'
-            aria-label={t('config.editor.moveUp')}
-            icon={<span className='material-symbols-rounded'>keyboard_arrow_up</span>}
-            disabled={index === 0}
-            onClick={() => onMove(-1)}
-          />
-        </Tooltip>
-        <Tooltip title={t('config.editor.moveDown')}>
-          <Button
-            size='small'
-            type='text'
-            className='config-view__icon-button config-view__icon-button--compact'
-            aria-label={t('config.editor.moveDown')}
-            icon={<span className='material-symbols-rounded'>keyboard_arrow_down</span>}
-            disabled={index === itemCount - 1}
-            onClick={() => onMove(1)}
-          />
-        </Tooltip>
-      </>
-    )}
-    <Popconfirm
-      title={t('config.editor.removeItemConfirmTitle')}
-      okText={t('common.confirm')}
-      cancelText={t('common.cancel')}
-      onConfirm={onRemove}
-    >
-      <Tooltip title={t('config.editor.remove')}>
-        <Button
-          size='small'
-          type='text'
-          danger
-          className='config-view__icon-button config-view__icon-button--compact'
-          aria-label={t('config.editor.remove')}
-          icon={<span className='material-symbols-rounded'>delete</span>}
-        />
-      </Tooltip>
-    </Popconfirm>
-  </div>
-)