@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

package/src/components/config/AppSettingsPanel.tsx

@@ -1,109 +0,0 @@
-import '../ConfigView.scss'
-
-import { InputNumber, Select, Switch } from 'antd'
-import { useAtom } from 'jotai'
-
-import {
-  senderHeaderDisplayAtom,
-  sessionListSearchThresholdAtom,
-  showAnnouncementsAtom,
-  showNewSessionStarterListAtom,
-  themeAtom
-} from '#~/store/index.js'
-import type { SenderHeaderDisplayMode, ThemeMode } from '#~/store/index.js'
-
-import { FieldRow } from './ConfigFieldRow'
-import type { TranslationFn } from './configUtils'
-
-export function AppSettingsPanel({ t }: { t: TranslationFn }) {
-  const [themeMode, setThemeMode] = useAtom(themeAtom)
-  const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
-  const [showNewSessionStarterList, setShowNewSessionStarterList] = useAtom(showNewSessionStarterListAtom)
-  const [senderHeaderDisplay, setSenderHeaderDisplay] = useAtom(senderHeaderDisplayAtom)
-  const [sessionListSearchThreshold, setSessionListSearchThreshold] = useAtom(sessionListSearchThresholdAtom)
-
-  return (
-    <div className='config-view__editor-wrap'>
-      <div className='config-view__section-header'>
-        <div className='config-view__section-title'>
-          <span className='material-symbols-rounded config-view__section-icon'>tune</span>
-          <span>{t('config.sections.appearance')}</span>
-        </div>
-      </div>
-      <div className='config-view__card'>
-        <div className='config-view__app-settings-list'>
-          <FieldRow
-            title={t('config.appSettings.themeMode.label')}
-            description={t('config.appSettings.themeMode.desc')}
-            icon='dark_mode'
-          >
-            <Select<ThemeMode>
-              value={themeMode}
-              onChange={setThemeMode}
-              options={[
-                {
-                  value: 'light',
-                  label: t('common.themeLight')
-                },
-                {
-                  value: 'dark',
-                  label: t('common.themeDark')
-                },
-                {
-                  value: 'system',
-                  label: t('common.themeSystem')
-                }
-              ]}
-            />
-          </FieldRow>
-          <FieldRow
-            title={t('config.appSettings.senderHeaderDisplay.label')}
-            description={t('config.appSettings.senderHeaderDisplay.desc')}
-            icon='unfold_more'
-          >
-            <Select<SenderHeaderDisplayMode>
-              value={senderHeaderDisplay}
-              onChange={setSenderHeaderDisplay}
-              options={[
-                {
-                  value: 'expanded',
-                  label: t('config.appSettings.senderHeaderDisplay.expanded')
-                },
-                {
-                  value: 'collapsed',
-                  label: t('config.appSettings.senderHeaderDisplay.collapsed')
-                }
-              ]}
-            />
-          </FieldRow>
-          <FieldRow
-            title={t('config.appSettings.sessionListSearchThreshold.label')}
-            description={t('config.appSettings.sessionListSearchThreshold.desc')}
-            icon='search'
-          >
-            <InputNumber
-              min={0}
-              precision={0}
-              value={sessionListSearchThreshold}
-              onChange={(value) => setSessionListSearchThreshold(value ?? 0)}
-            />
-          </FieldRow>
-          <FieldRow
-            title={t('config.appSettings.announcements.label')}
-            description={t('config.appSettings.announcements.desc')}
-            icon='campaign'
-          >
-            <Switch checked={showAnnouncements} onChange={setShowAnnouncements} />
-          </FieldRow>
-          <FieldRow
-            title={t('config.appSettings.recommendedActions.label')}
-            description={t('config.appSettings.recommendedActions.desc')}
-            icon='tips_and_updates'
-          >
-            <Switch checked={showNewSessionStarterList} onChange={setShowNewSessionStarterList} />
-          </FieldRow>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/config/ConfigAboutSection.scss

@@ -1,117 +0,0 @@
-.config-about {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.config-about__card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px;
-  border-radius: 12px;
-  border: 1px solid var(--border-color);
-  background: var(--code-bg);
-}
-
-.config-about__app {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.config-about__app-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--tag-bg);
-  border: 1px solid var(--border-color);
-  color: var(--primary-color);
-}
-
-.config-about__app-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.config-about__app-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-color);
-}
-
-.config-about__app-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 12px;
-  color: var(--sub-text-color);
-}
-
-.config-about__app-version,
-.config-about__app-server-version,
-.config-about__app-commit {
-  color: var(--text-color);
-}
-
-.config-about__app-version {
-  cursor: default;
-}
-
-.config-about__primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 14px;
-  border-radius: 8px;
-  background: var(--tag-bg);
-  color: var(--text-color);
-  text-decoration: none;
-  font-size: 12px;
-  border: 1px solid var(--border-color);
-  white-space: nowrap;
-}
-
-.config-about__list {
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px;
-  border: 1px solid var(--border-color);
-  overflow: hidden;
-  background: var(--bg-color);
-}
-
-.config-about__item-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  color: var(--text-color);
-  text-decoration: none;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.config-about__item-left {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.config-about__item-icon {
-  font-size: 18px;
-  color: var(--sub-text-color);
-}
-
-.config-about__item-row:last-child {
-  border-bottom: none;
-}
-
-.config-about__arrow {
-  font-size: 18px;
-  color: var(--sub-text-color);
-}

package/src/components/config/ConfigAboutSection.tsx

@@ -1,104 +0,0 @@
-import './ConfigAboutSection.scss'
-
-import type { AboutInfo } from '@vibe-forge/types'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { getClientCommitHash, getClientVersion } from '#~/client-build-info'
-
-export const AboutSection = ({ value }: { value?: AboutInfo }) => {
-  const { t } = useTranslation()
-  const [showCommitHash, setShowCommitHash] = useState(false)
-  const aboutInfo = (value != null && typeof value === 'object')
-    ? value
-    : undefined
-  const urls = aboutInfo?.urls
-  const serverVersion = aboutInfo?.version
-  const clientVersion = getClientVersion()
-  const clientCommitHash = getClientCommitHash()
-  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'
-                title={t('config.about.commitHash')}
-                onDoubleClick={() => setShowCommitHash(true)}
-              >
-                {t('config.about.clientVersion')}: {clientVersion}
-              </span>
-              {showCommitHash && (
-                <span className='config-about__app-commit'>
-                  {t('config.about.commitHash')}: {clientCommitHash ?? t('config.about.unknown')}
-                </span>
-              )}
-              <span className='config-about__app-server-version'>
-                {t('config.about.serverVersion')}: {serverVersion ?? 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

@@ -1,22 +0,0 @@
-.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

@@ -1,62 +0,0 @@
-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

@@ -1,91 +0,0 @@
-.config-view__array-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.config-view__array-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: var(--subpage-tertiary-padding);
-  border: var(--subpage-tertiary-border);
-  border-radius: var(--subpage-tertiary-radius);
-  background: var(--subpage-tertiary-bg);
-  transition: border-color .2s ease, background-color .2s ease;
-}
-
-.config-view__array-item:hover {
-  border-color: var(--subpage-tertiary-hover-border);
-  background: var(--subpage-tertiary-hover-bg);
-}
-
-.config-view__complex-editor {
-  border-radius: var(--subpage-tertiary-radius);
-  border: var(--subpage-tertiary-border);
-  background: var(--subpage-tertiary-bg);
-  color: var(--text-color);
-  transition: border-color .2s ease, background-color .2s ease;
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-    'Courier New', monospace;
-}
-
-.config-view__complex-editor:hover {
-  border-color: var(--subpage-tertiary-hover-border);
-  background: var(--subpage-tertiary-hover-bg);
-}
-
-.config-view__complex-editor textarea {
-  background: transparent;
-  color: var(--text-color);
-}
-
-.config-view__icon-button {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-}
-
-.config-view__icon-button--compact {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-}
-
-.config-view__icon-button--full {
-  width: 100%;
-  min-width: 100%;
-  height: 30px;
-}
-
-.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;
-}
-
-.config-view__array-item .ant-input,
-.config-view__array-item .ant-input-affix-wrapper,
-.config-view__array-add-inputs .ant-input,
-.config-view__array-add-inputs .ant-input-affix-wrapper {
-  border-radius: 6px !important;
-  min-height: 30px;
-}

package/src/components/config/ConfigEditors.tsx

@@ -1,98 +0,0 @@
-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>
-)