@vibe-forge/client 0.2.0-alpha.0

package/src/components/config/ConfigAboutSection.tsx

@@ -0,0 +1,86 @@
+import './ConfigAboutSection.scss'
+
+import type { AboutInfo } from '@vibe-forge/core'
+import { useTranslation } from 'react-i18next'
+
+export const AboutSection = ({ value }: { value?: AboutInfo }) => {
+  const { t } = useTranslation()
+  const aboutInfo = (value != null && typeof value === 'object')
+    ? value
+    : undefined
+  const urls = aboutInfo?.urls
+  const version = aboutInfo?.version
+  const lastReleaseAt = aboutInfo?.lastReleaseAt
+
+  return (
+    <div className='config-about'>
+      <div className='config-about__card'>
+        <div className='config-about__app'>
+          <div className='config-about__app-icon'>
+            <span className='material-symbols-rounded'>auto_awesome</span>
+          </div>
+          <div className='config-about__app-info'>
+            <div className='config-about__app-title'>
+              {t('config.about.software')}
+            </div>
+            <div className='config-about__app-meta'>
+              <span className='config-about__app-version'>
+                {t('config.about.version')}: {version ?? t('config.about.unknown')}
+              </span>
+              <span className='config-about__app-date'>
+                {lastReleaseAt ?? t('config.about.unknown')}
+              </span>
+            </div>
+          </div>
+        </div>
+        <a
+          className='config-about__primary'
+          href={urls?.releases ?? urls?.repo}
+          target='_blank'
+          rel='noreferrer'
+        >
+          {t('config.about.checkUpdate')}
+        </a>
+      </div>
+
+      <div className='config-about__list'>
+        <a
+          className='config-about__item-row'
+          href={urls?.docs ?? urls?.repo}
+          target='_blank'
+          rel='noreferrer'
+        >
+          <span className='config-about__item-left'>
+            <span className='material-symbols-rounded config-about__item-icon'>menu_book</span>
+            <span>{t('config.about.docs')}</span>
+          </span>
+          <span className='material-symbols-rounded config-about__arrow'>open_in_new</span>
+        </a>
+        <a
+          className='config-about__item-row'
+          href={urls?.contact ?? urls?.repo}
+          target='_blank'
+          rel='noreferrer'
+        >
+          <span className='config-about__item-left'>
+            <span className='material-symbols-rounded config-about__item-icon'>mail</span>
+            <span>{t('config.about.contact')}</span>
+          </span>
+          <span className='material-symbols-rounded config-about__arrow'>open_in_new</span>
+        </a>
+        <a
+          className='config-about__item-row'
+          href={urls?.issues ?? urls?.repo}
+          target='_blank'
+          rel='noreferrer'
+        >
+          <span className='config-about__item-left'>
+            <span className='material-symbols-rounded config-about__item-icon'>bug_report</span>
+            <span>{t('config.about.feedback')}</span>
+          </span>
+          <span className='material-symbols-rounded config-about__arrow'>open_in_new</span>
+        </a>
+      </div>
+    </div>
+  )
+}

package/src/components/config/ConfigDisplayValue.scss

@@ -0,0 +1,22 @@
+.config-view__pill {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-size: 12px;
+}
+
+.config-view__display-pill {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.config-view__field-list {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/config/ConfigDisplayValue.tsx

@@ -0,0 +1,62 @@
+import './ConfigDisplayValue.scss'
+
+import { Empty } from 'antd'
+
+import { FieldRow } from './ConfigFieldRow'
+import { getFieldDescription, getFieldLabel, getTypeIcon, getValueType, isEmptyValue } from './configUtils'
+import type { TranslationFn } from './configUtils'
+
+export const DisplayValue = ({
+  value,
+  sectionKey,
+  path = [],
+  t
+}: {
+  value: unknown
+  sectionKey: string
+  path?: string[]
+  t: TranslationFn
+}) => {
+  if (isEmptyValue(value)) {
+    return <Empty description={t('common.noData')} image={null} />
+  }
+
+  if (Array.isArray(value)) {
+    const hasObject = value.some(item => item != null && typeof item === 'object')
+    if (hasObject) {
+      return <span className='config-view__pill'>{t('config.editor.complexValue')}</span>
+    }
+    return (
+      <div className='config-view__display-pill'>
+        {value.map((item, index) => (
+          <span key={`${index}-${String(item)}`} className='config-view__pill'>
+            {String(item)}
+          </span>
+        ))}
+      </div>
+    )
+  }
+
+  if (value != null && typeof value === 'object') {
+    return (
+      <div className='config-view__field-list'>
+        {Object.entries(value).map(([key, itemValue]) => {
+          const label = getFieldLabel(t, sectionKey, [...path, key], key)
+          const description = getFieldDescription(t, sectionKey, [...path, key])
+          return (
+            <FieldRow
+              key={key}
+              title={label}
+              description={description}
+              icon={getTypeIcon(getValueType(itemValue))}
+            >
+              <DisplayValue value={itemValue} sectionKey={sectionKey} path={[...path, key]} t={t} />
+            </FieldRow>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return <span className='config-view__pill'>{String(value)}</span>
+}

package/src/components/config/ConfigEditors.scss

@@ -0,0 +1,65 @@
+.config-view__array-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.config-view__array-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-view__complex-editor {
+  border-radius: 10px;
+  border: 1px solid var(--code-border);
+  background: var(--code-bg);
+  color: var(--text-color);
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+}
+
+.config-view__complex-editor textarea {
+  background: transparent;
+  color: var(--text-color);
+}
+
+.config-view__icon-button {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.config-view__icon-button--compact {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+}
+
+.config-view__icon-button--full {
+  width: 100%;
+  min-width: 100%;
+}
+
+.config-view__array-add {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-view__array-add-inputs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.config-view__array-add-inputs .ant-input,
+.config-view__array-add-inputs .ant-input-affix-wrapper {
+  flex: 1;
+}

package/src/components/config/ConfigEditors.tsx

@@ -0,0 +1,98 @@
+import './ConfigEditors.scss'
+
+import { App, Button, Input, Tooltip } from 'antd'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { TranslationFn } from './configUtils'
+
+export const ComplexTextEditor = ({
+  value,
+  onChange
+}: {
+  value: unknown
+  onChange?: (nextValue: unknown) => void
+}) => {
+  const { message } = App.useApp()
+  const { t } = useTranslation()
+  const [textValue, setTextValue] = useState(() => JSON.stringify(value ?? {}, null, 2))
+
+  useEffect(() => {
+    setTextValue(JSON.stringify(value ?? {}, null, 2))
+  }, [value])
+
+  return (
+    <Input.TextArea
+      className='config-view__complex-editor'
+      value={textValue}
+      onChange={(event) => {
+        setTextValue(event.target.value)
+      }}
+      onBlur={() => {
+        try {
+          const parsed = JSON.parse(textValue) as unknown
+          onChange?.(parsed)
+          setTextValue(JSON.stringify(parsed ?? {}, null, 2))
+        } catch {
+          void message.error(t('config.invalidJson'))
+          setTextValue(JSON.stringify(value ?? {}, null, 2))
+        }
+      }}
+      placeholder={t('config.editor.complexPlaceholder')}
+      autoSize={{ minRows: 6 }}
+    />
+  )
+}
+
+export const StringArrayEditor = ({
+  value,
+  onChange,
+  t
+}: {
+  value: string[]
+  onChange: (nextValue: string[]) => void
+  t: TranslationFn
+}) => (
+  <div className='config-view__array-list'>
+    {value.map((item, index) => (
+      <div key={`${index}-${item}`} className='config-view__array-item'>
+        <Input
+          value={item}
+          placeholder={t('config.editor.itemPlaceholder')}
+          onChange={(event) => {
+            const updated = value.slice()
+            updated[index] = event.target.value
+            onChange(updated)
+          }}
+        />
+        <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>}
+            onClick={() => {
+              const updated = value.slice()
+              updated.splice(index, 1)
+              onChange(updated)
+            }}
+          />
+        </Tooltip>
+      </div>
+    ))}
+    <Tooltip title={t('config.editor.addItem')}>
+      <Button
+        size='small'
+        type='primary'
+        className='config-view__icon-button config-view__icon-button--full'
+        aria-label={t('config.editor.addItem')}
+        icon={<span className='material-symbols-rounded'>add</span>}
+        onClick={() => {
+          onChange([...value, ''])
+        }}
+      />
+    </Tooltip>
+  </div>
+)

package/src/components/config/ConfigFieldRow.scss

@@ -0,0 +1,97 @@
+.config-view__field-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 14px;
+  border-radius: 0;
+  border: 1px solid var(--border-color);
+  border-bottom: none;
+  background-color: var(--sub-bg-color);
+  &.config-view__collapse-group {
+    padding: 0;
+    gap: 0;
+    > .ant-collapse-item {
+      width: 100%;
+      border-bottom: 1px solid var(--border-color);
+      .ant-collapse-header-text {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+.config-view__field-row:first-child {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.config-view__field-row:last-child {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.config-view__field-row--stacked {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.config-view__field-row--stacked .config-view__field-control {
+  justify-content: flex-start;
+  min-width: 0;
+  width: 100%;
+}
+
+.config-view__field-row--stacked .config-view__field-control > * {
+  flex: 1 1 auto;
+}
+
+.config-view__field-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.config-view__field-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.config-view__field-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.config-view__field-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.config-view__field-control {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 220px;
+}
+
+.config-view__field-control .ant-select {
+  width: 100%;
+}
+
+.config-view__field-control .ant-input-textarea {
+  width: 100%;
+}
+
+.config-view__field-icon {
+  font-size: 16px;
+  color: var(--sub-text-color);
+}

package/src/components/config/ConfigFieldRow.tsx

@@ -0,0 +1,36 @@
+import './ConfigFieldRow.scss'
+
+import type { ReactNode } from 'react'
+
+export const FieldRow = ({
+  title,
+  description,
+  icon,
+  layout = 'inline',
+  children
+}: {
+  title: string
+  description?: string
+  icon?: string
+  layout?: 'inline' | 'stacked'
+  children: ReactNode
+}) => (
+  <div className={`config-view__field-row${layout === 'stacked' ? ' config-view__field-row--stacked' : ''}`}>
+    <div className='config-view__field-meta'>
+      {icon != null && (
+        <span className='material-symbols-rounded config-view__field-icon'>
+          {icon}
+        </span>
+      )}
+      <div className='config-view__field-text'>
+        <div className='config-view__field-title'>{title}</div>
+        {description != null && description !== '' && (
+          <div className='config-view__field-desc'>{description}</div>
+        )}
+      </div>
+    </div>
+    <div className='config-view__field-control'>
+      {children}
+    </div>
+  </div>
+)

package/src/components/config/ConfigSectionForm.scss

@@ -0,0 +1,94 @@
+.config-view__field-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.config-view__field-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.config-view__subsection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.config-view__subsection-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--sub-text-color);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+
+.config-view__subsection-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.config-view__slider {
+  width: 240px;
+}
+
+.config-view__collapse-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.config-view__collapse-group .ant-collapse-header {
+  padding: 0;
+}
+
+.config-view__collapse-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: 6px;
+}
+
+.config-view__collapse-header-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.config-view__collapse-title {
+  font-size: 13px;
+  color: var(--text-color);
+}
+
+.config-view__collapse-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.config-view__multiline {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.config-view__multiline-input {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.config-view__option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.config-view__option-title {
+  font-size: 13px;
+  color: var(--text-color);
+}
+
+.config-view__option-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}