@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/config/AppSettingsPanel.tsx

@@ -1,15 +1,26 @@
 import '../ConfigView.scss'
 
-import { Switch } from 'antd'
+import { InputNumber, Select, Switch } from 'antd'
 import { useAtom } from 'jotai'
 
-import { showAnnouncementsAtom } from '#~/store/index.js'
+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'>
@@ -20,13 +31,78 @@ export function AppSettingsPanel({ t }: { t: TranslationFn }) {
         </div>
       </div>
       <div className='config-view__card'>
-        <FieldRow
-          title={t('config.appSettings.announcements.label')}
-          description={t('config.appSettings.announcements.desc')}
-          icon='campaign'
-        >
-          <Switch checked={showAnnouncements} onChange={setShowAnnouncements} />
-        </FieldRow>
+        <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

@@ -53,10 +53,16 @@
   color: var(--sub-text-color);
 }
 
-.config-about__app-version {
+.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;

package/src/components/config/ConfigAboutSection.tsx

@@ -1,15 +1,21 @@
 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 version = aboutInfo?.version
+  const serverVersion = aboutInfo?.version
+  const clientVersion = getClientVersion()
+  const clientCommitHash = getClientCommitHash()
   const lastReleaseAt = aboutInfo?.lastReleaseAt
 
   return (
@@ -24,8 +30,20 @@ export const AboutSection = ({ value }: { value?: AboutInfo }) => {
               {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
+                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')}

package/src/components/config/ConfigEditors.scss

@@ -12,6 +12,12 @@
   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 {
@@ -19,11 +25,17 @@
   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);

package/src/components/config/ConfigFieldRow.scss

@@ -28,18 +28,79 @@
 }
 
 .config-view__field-row--stacked {
+  display: flex;
   flex-direction: column;
   align-items: stretch;
+  justify-content: flex-start;
+  height: auto;
+  min-height: 0;
+}
+
+.config-view__field-row--stacked .config-view__field-meta {
+  display: flex;
+  flex: 0 0 auto;
+  margin-bottom: 10px;
 }
 
 .config-view__field-row--stacked .config-view__field-control {
-  justify-content: flex-start;
+  display: block;
+  flex: 0 0 auto;
+  height: auto !important;
   min-width: 0;
+  min-height: 0;
   width: 100%;
+  max-width: 100%;
+  align-self: stretch;
 }
 
 .config-view__field-row--stacked .config-view__field-control > * {
-  flex: 1 1 auto;
+  display: block;
+  flex: 0 0 auto;
+  height: auto !important;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.config-view__field-row--stacked
+  .config-view__field-control
+  .ant-input-textarea-affix-wrapper,
+.config-view__field-row--stacked
+  .config-view__field-control
+  .ant-input-textarea-show-count {
+  display: block;
+  height: auto !important;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.config-view__field-row--stacked
+  .config-view__field-control
+  .ant-input-textarea,
+.config-view__field-row--stacked
+  .config-view__field-control
+  .ant-input-textarea
+  textarea,
+.config-view__field-row--stacked
+  .config-view__field-control
+  > textarea.ant-input {
+  height: auto !important;
+  min-height: 0;
+  width: 100% !important;
+  max-width: 100%;
+}
+
+.config-view__field-row--stacked
+  .config-view__field-control
+  .ant-input-textarea
+  textarea,
+.config-view__field-row--stacked
+  .config-view__field-control
+  > textarea.ant-input {
+  display: block;
+  width: 100% !important;
+  min-height: 56px;
 }
 
 .config-view__field-meta {
@@ -49,6 +110,11 @@
   min-width: 0;
 }
 
+.config-view__field-row:not(.config-view__field-row--stacked)
+  .config-view__field-meta {
+  flex: 1 1 280px;
+}
+
 .config-view__field-text {
   display: flex;
   flex-direction: column;
@@ -76,13 +142,19 @@
 
 .config-view__field-control {
   display: flex;
+  flex: 0 1 220px;
   justify-content: flex-end;
   gap: 8px;
-  min-width: 220px;
+  min-width: 0;
+  max-width: min(320px, 100%);
 }
 
-.config-view__field-control .ant-select {
+.config-view__field-control .ant-input,
+.config-view__field-control .ant-input-affix-wrapper,
+.config-view__field-control .ant-select,
+.config-view__field-control .ant-input-number {
   width: 100%;
+  max-width: 100%;
 }
 
 .config-view__field-control .ant-btn,
@@ -95,14 +167,24 @@
 
 .config-view__field-control .ant-input,
 .config-view__field-control .ant-input-affix-wrapper,
+.config-view__field-control .ant-input-number,
 .config-view__field-control .ant-select-selector {
   min-height: 30px;
 }
 
+.config-view__field-control .ant-input-number-input {
+  min-height: 28px;
+}
+
 .config-view__field-control .ant-input-textarea {
   width: 100%;
 }
 
+.config-view__select-chevron {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}
+
 .config-view__field-icon {
   font-size: 16px;
   color: var(--sub-text-color);
@@ -125,8 +207,10 @@
   }
 
   .config-view__field-control {
+    flex: 0 0 auto;
     min-width: 0;
     width: 100%;
+    max-width: none;
     justify-content: flex-start;
   }
 

package/src/components/config/ConfigSectionForm.scss

@@ -1,7 +1,41 @@
 .config-view__field-stack {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 6px;
+}
+
+.config-view__detail-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.config-view__detail-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border: var(--subpage-tertiary-border);
+  border-radius: var(--subpage-tertiary-radius);
+  background: var(--subpage-tertiary-bg);
+}
+
+.config-view__detail-notice-text {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.config-view__field-readonly {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+.config-view__field-readonly-value {
+  width: 100%;
 }
 
 .config-view__field-list {
@@ -13,17 +47,68 @@
 .config-view__subsection {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
+}
+
+.config-view__subsection-collapse {
+  border: none;
+  background: transparent;
+}
+
+.config-view__subsection-collapse > .ant-collapse-item {
+  border-bottom: none;
+}
+
+.config-view__subsection-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 0 !important;
+  align-items: center !important;
+}
+
+.config-view__subsection-collapse
+  > .ant-collapse-item-active
+  > .ant-collapse-header {
+  padding-bottom: 4px !important;
+}
+
+.config-view__subsection-collapse
+  > .ant-collapse-item
+  > .ant-collapse-header
+  .ant-collapse-expand-icon {
+  padding-inline-start: 8px;
+  padding-inline-end: 0;
+}
+
+.config-view__subsection-collapse > .ant-collapse-item > .ant-collapse-content {
+  border-top: none;
+  background: transparent;
+}
+
+.config-view__subsection-collapse
+  > .ant-collapse-item
+  > .ant-collapse-content
+  > .ant-collapse-content-box {
+  padding: 0 !important;
 }
 
 .config-view__subsection-title {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
   color: var(--sub-text-color);
   text-transform: uppercase;
   letter-spacing: .04em;
 }
 
+.config-view__subsection-expand-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+  transition: transform .16s ease, color .16s ease;
+}
+
+.config-view__subsection-expand-icon.is-active {
+  transform: rotate(90deg);
+  color: var(--text-color);
+}
+
 .config-view__subsection-body {
   display: flex;
   flex-direction: column;