@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/automation-view/TaskList.tsx

@@ -1,35 +1,38 @@
 import './TaskList.scss'
 
 import { Button, Form, Input, Tooltip } from 'antd'
+import type { FormInstance } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-export function TaskList() {
+import { AutomationTaskComposer } from './@components/AutomationTaskComposer'
+import { DEFAULT_STARTUP_FORM_VALUES } from './@utils/startup-options'
+import type { RuleFormValues } from './types'
+
+export function TaskList({ form }: { form: FormInstance<RuleFormValues> }) {
   const { t } = useTranslation()
 
   return (
     <Form.List name='tasks'>
       {(fields, { add, remove }) => (
-        <div className='automation-view__list automation-view__list--horizontal'>
+        <div className='automation-view__task-list'>
           <div className='automation-view__section-header'>
             <div className='automation-view__section-heading'>
               <div className='automation-view__form-title'>
                 <span className='material-symbols-rounded automation-view__form-icon'>task</span>
                 {t('automation.sectionTasks')}
               </div>
-              <span className='automation-view__section-count'>
-                {t('automation.taskCount', { count: fields.length })}
-              </span>
             </div>
             <div className='automation-view__section-actions'>
               <Tooltip title={t('automation.addTask')}>
                 <Button
-                  className='automation-view__icon-button'
+                  className='automation-view__icon-button automation-view__icon-button--section-add'
                   type='text'
                   onClick={() =>
                     add({
                       title: t('automation.taskDefaultTitle', { index: fields.length + 1 }),
-                      prompt: ''
+                      prompt: '',
+                      ...DEFAULT_STARTUP_FORM_VALUES
                     })}
                 >
                   <span className='material-symbols-rounded automation-view__action-icon'>add</span>
@@ -37,42 +40,23 @@ export function TaskList() {
               </Tooltip>
             </div>
           </div>
-          <div className='automation-view__form-desc'>{t('automation.taskAll')}</div>
-          <div className='automation-view__list-scroll'>
-            {fields.map((field, index) => (
-              <div key={field.key} className='automation-view__list-item'>
+          <div className='automation-view__task-stack'>
+            {fields.map((field) => (
+              <div key={field.key} className='automation-view__task-card'>
                 <Form.Item name={[field.name, 'id']} hidden>
                   <Input />
                 </Form.Item>
                 <Tooltip title={t('automation.remove')}>
                   <Button
-                    className='automation-view__remove-button'
+                    className='automation-view__task-remove-button'
                     type='text'
-                    danger
                     onClick={() => remove(field.name)}
                     disabled={fields.length <= 1}
                   >
                     <span className='material-symbols-rounded automation-view__action-icon'>close</span>
                   </Button>
                 </Tooltip>
-                <div className='automation-view__list-header'>
-                  <Form.Item name={[field.name, 'title']} label={t('automation.taskTitle')}>
-                    <Input placeholder={t('automation.taskTitlePlaceholder')} />
-                  </Form.Item>
-                </div>
-                <Form.Item
-                  name={[field.name, 'prompt']}
-                  label={t('automation.prompt')}
-                  rules={[{ required: true, message: t('automation.promptRequired') }]}
-                >
-                  <Input.TextArea rows={3} />
-                </Form.Item>
-                <div className='automation-view__task-index'>
-                  <span className='material-symbols-rounded automation-view__task-index-icon'>
-                    format_list_numbered
-                  </span>
-                  {t('automation.taskIndex', { index: index + 1 })}
-                </div>
+                <AutomationTaskComposer fieldName={field.name} form={form} />
               </div>
             ))}
           </div>

package/src/components/automation-view/TriggerList.scss

@@ -89,7 +89,7 @@
   &__form-desc {
     font-size: 12px;
     color: var(--sub-text-color);
-    margin-bottom: 12px;
+    margin-bottom: 0;
   }
 
   &__icon-button {
@@ -125,10 +125,53 @@
     width: 100%;
   }
 
-  &__cron-section {
+  &__trigger-list {
+    gap: 8px;
+  }
+
+  &__trigger-rows {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 8px;
+  }
+
+  &__trigger-row {
+    display: grid;
+    grid-template-columns: 150px minmax(0, 1fr) 28px;
+    gap: 10px;
+    align-items: start;
+    padding: 0;
+  }
+
+  &__trigger-type,
+  &__trigger-config {
+    min-width: 0;
+  }
+
+  &__trigger-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__trigger-remove-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 6px;
+  }
+
+  &__trigger-row .ant-form-item {
+    margin-bottom: 0;
+  }
+
+  &__cron-section {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
   }
 
   &__cron-hint {
@@ -139,7 +182,9 @@
   &__cron-weekly {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 12px;
+    grid-column: 1 / -1;
+    gap: 8px;
+    min-width: 0;
   }
 
   &__webhook {
@@ -153,15 +198,20 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    padding: 8px 12px;
+    min-height: 32px;
+    padding: 2px 4px 2px 10px;
     border-radius: 8px;
     border: 1px solid var(--border-color);
     background: var(--sub-bg-color);
     color: var(--sub-text-color);
   }
 
-  &__webhook-label {
+  &__webhook-url {
+    min-width: 0;
+    overflow: hidden;
     font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__list-item .ant-form-item {
@@ -175,14 +225,43 @@
   &__list-item .ant-input,
   &__list-item .ant-input-affix-wrapper,
   &__list-item .ant-input-number,
-  &__list-item .ant-select-selector {
+  &__list-item .ant-select-selector,
+  &__trigger-row .ant-input,
+  &__trigger-row .ant-input-affix-wrapper,
+  &__trigger-row .ant-input-number,
+  &__trigger-row .ant-select-selector {
     border-radius: 6px !important;
     background: var(--sub-bg-color);
   }
 
   &__list-item .ant-input,
   &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-select-selector {
+  &__list-item .ant-select-selector,
+  &__trigger-row .ant-input,
+  &__trigger-row .ant-input-affix-wrapper,
+  &__trigger-row .ant-select-selector {
     min-height: 30px;
   }
 }
+
+@media (max-width: 900px) {
+  .automation-view {
+    &__trigger-row {
+      grid-template-columns: 1fr 28px;
+    }
+
+    &__trigger-type,
+    &__trigger-config {
+      grid-column: 1 / 2;
+    }
+
+    &__trigger-actions {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+
+    &__cron-section {
+      grid-template-columns: 1fr;
+    }
+  }
+}

package/src/components/automation-view/TriggerList.tsx

@@ -1,10 +1,11 @@
 import './TriggerList.scss'
 
-import { Button, Form, Input, InputNumber, Select, Tooltip } from 'antd'
+import { Button, Form, Tooltip } from 'antd'
 import type { FormInstance } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { AutomationTriggerRow } from './@components/AutomationTriggerRow'
 import type { RuleFormValues } from './types'
 
 interface TriggerListProps {
@@ -19,21 +20,18 @@ export function TriggerList({ form, updateWeeklyCron, getWebhookUrl }: TriggerLi
   return (
     <Form.List name='triggers'>
       {(fields, { add, remove }) => (
-        <div className='automation-view__list automation-view__list--horizontal'>
+        <div className='automation-view__list automation-view__trigger-list'>
           <div className='automation-view__section-header'>
             <div className='automation-view__section-heading'>
               <div className='automation-view__form-title'>
                 <span className='material-symbols-rounded automation-view__form-icon'>bolt</span>
                 {t('automation.sectionTriggers')}
               </div>
-              <span className='automation-view__section-count'>
-                {t('automation.triggerCount', { count: fields.length })}
-              </span>
             </div>
             <div className='automation-view__section-actions'>
               <Tooltip title={t('automation.addTrigger')}>
                 <Button
-                  className='automation-view__icon-button'
+                  className='automation-view__icon-button automation-view__icon-button--section-add'
                   type='text'
                   onClick={() =>
                     add({
@@ -49,175 +47,18 @@ export function TriggerList({ form, updateWeeklyCron, getWebhookUrl }: TriggerLi
               </Tooltip>
             </div>
           </div>
-          <div className='automation-view__form-desc'>{t('automation.triggerAny')}</div>
-          <div className='automation-view__list-scroll'>
+          <div className='automation-view__trigger-rows'>
             {fields.map((field, index) => (
-              <Form.Item
+              <AutomationTriggerRow
                 key={field.key}
-                noStyle
-                shouldUpdate={(prevValues, nextValues) => {
-                  const prevTrigger = prevValues.triggers?.[field.name]
-                  const nextTrigger = nextValues.triggers?.[field.name]
-                  return prevTrigger?.type !== nextTrigger?.type ||
-                    prevTrigger?.webhookKey !== nextTrigger?.webhookKey ||
-                    prevTrigger?.id !== nextTrigger?.id
-                }}
-              >
-                {(formInstance) => {
-                  const triggerType = formInstance.getFieldValue([
-                    'triggers',
-                    field.name,
-                    'type'
-                  ]) as RuleFormValues['triggers'][number]['type']
-                  const triggerId = formInstance.getFieldValue(['triggers', field.name, 'id']) as string | undefined
-                  const webhookKey = formInstance.getFieldValue(['triggers', field.name, 'webhookKey']) as
-                    | string
-                    | undefined
-                  const webhookUrl = getWebhookUrl(triggerId, webhookKey)
-                  return (
-                    <div className='automation-view__list-item'>
-                      <Form.Item name={[field.name, 'id']} hidden>
-                        <Input />
-                      </Form.Item>
-                      <Tooltip title={t('automation.remove')}>
-                        <Button
-                          className='automation-view__remove-button'
-                          type='text'
-                          danger
-                          onClick={() => remove(field.name)}
-                          disabled={fields.length <= 1}
-                        >
-                          <span className='material-symbols-rounded automation-view__action-icon'>close</span>
-                        </Button>
-                      </Tooltip>
-                      <div className='automation-view__list-header'>
-                        <Form.Item
-                          name={[field.name, 'type']}
-                          label={t('automation.ruleType')}
-                          rules={[{ required: true, message: t('automation.ruleTypeRequired') }]}
-                        >
-                          <Select
-                            options={[
-                              { label: t('automation.typeInterval'), value: 'interval' },
-                              { label: t('automation.typeWebhook'), value: 'webhook' },
-                              { label: t('automation.typeCron'), value: 'cron' }
-                            ]}
-                            onChange={(value) => {
-                              if (value === 'interval') {
-                                form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30)
-                                form.setFieldValue(['triggers', field.name, 'cronExpression'], '')
-                                form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1')
-                                form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00')
-                                form.setFieldValue(['triggers', field.name, 'webhookKey'], '')
-                              }
-                              if (value === 'cron') {
-                                form.setFieldValue(['triggers', field.name, 'cronExpression'], '')
-                                form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1')
-                                form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00')
-                                form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30)
-                                form.setFieldValue(['triggers', field.name, 'webhookKey'], '')
-                              }
-                              if (value === 'webhook') {
-                                form.setFieldValue(['triggers', field.name, 'webhookKey'], '')
-                                form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30)
-                                form.setFieldValue(['triggers', field.name, 'cronExpression'], '')
-                                form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1')
-                                form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00')
-                              }
-                            }}
-                          />
-                        </Form.Item>
-                      </div>
-
-                      {triggerType === 'interval' && (
-                        <Form.Item
-                          name={[field.name, 'intervalMinutes']}
-                          label={t('automation.intervalMinutes')}
-                          rules={[{ required: true, message: t('automation.intervalRequired') }]}
-                        >
-                          <InputNumber min={1} className='automation-view__input-number' />
-                        </Form.Item>
-                      )}
-                      {triggerType === 'cron' && (
-                        <div className='automation-view__cron-section'>
-                          <Form.Item
-                            name={[field.name, 'cronExpression']}
-                            label={t('automation.cronExpressionLabel')}
-                            rules={[{ required: true, message: t('automation.cronExpressionRequired') }]}
-                          >
-                            <Input placeholder={t('automation.cronExpressionHint')} />
-                          </Form.Item>
-                          <Form.Item
-                            name={[field.name, 'cronPreset']}
-                            label={t('automation.cronPreset')}
-                          >
-                            <Select
-                              options={[
-                                { label: t('automation.cronPresetHourly'), value: '0 * * * *' },
-                                { label: t('automation.cronPresetDaily9'), value: '0 9 * * *' },
-                                { label: t('automation.cronPresetWeekday9'), value: '0 9 * * 1-5' },
-                                { label: t('automation.cronPresetWeekend10'), value: '0 10 * * 6,0' }
-                              ]}
-                              onChange={(value) =>
-                                form.setFieldValue(['triggers', field.name, 'cronExpression'], value)}
-                              placeholder={t('automation.cronPresetHint')}
-                              allowClear
-                            />
-                          </Form.Item>
-                          <div className='automation-view__cron-hint'>{t('automation.cronInputHint')}</div>
-                          <div className='automation-view__cron-weekly'>
-                            <Form.Item name={[field.name, 'weeklyDay']} label={t('automation.weeklyDay')}>
-                              <Select
-                                options={[
-                                  { label: t('automation.weekdaySun'), value: '0' },
-                                  { label: t('automation.weekdayMon'), value: '1' },
-                                  { label: t('automation.weekdayTue'), value: '2' },
-                                  { label: t('automation.weekdayWed'), value: '3' },
-                                  { label: t('automation.weekdayThu'), value: '4' },
-                                  { label: t('automation.weekdayFri'), value: '5' },
-                                  { label: t('automation.weekdaySat'), value: '6' }
-                                ]}
-                                onChange={(value) => updateWeeklyCron(index, value)}
-                              />
-                            </Form.Item>
-                            <Form.Item name={[field.name, 'weeklyTime']} label={t('automation.weeklyTime')}>
-                              <Input
-                                placeholder={t('automation.weeklyTimeHint')}
-                                onChange={(event) => updateWeeklyCron(index, undefined, event.target.value)}
-                              />
-                            </Form.Item>
-                          </div>
-                        </div>
-                      )}
-                      {triggerType === 'webhook' && (
-                        <div className='automation-view__webhook'>
-                          <Form.Item name={[field.name, 'webhookKey']} label={t('automation.webhookKey')}>
-                            <Input placeholder={t('automation.webhookKeyHint')} />
-                          </Form.Item>
-                          {webhookUrl && (
-                            <div className='automation-view__webhook-row'>
-                              <span className='automation-view__webhook-label'>{t('automation.webhookUrl')}</span>
-                              <Tooltip title={t('automation.copy')}>
-                                <Button
-                                  className='automation-view__icon-button'
-                                  type='text'
-                                  onClick={() => {
-                                    void navigator.clipboard.writeText(webhookUrl)
-                                  }}
-                                >
-                                  <span className='material-symbols-rounded automation-view__action-icon'>
-                                    content_copy
-                                  </span>
-                                </Button>
-                              </Tooltip>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  )
-                }}
-              </Form.Item>
+                fieldName={field.name}
+                form={form}
+                getWebhookUrl={getWebhookUrl}
+                index={index}
+                remove={remove}
+                triggerCount={fields.length}
+                updateWeeklyCron={updateWeeklyCron}
+              />
             ))}
           </div>
         </div>