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

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>

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

@@ -1,12 +1,11 @@
 .automation-view {
+  position: relative;
+
   &__body {
     flex-direction: row;
     gap: 0;
     padding: 0;
-  }
-
-  &__mobile-switcher-shell {
-    display: none;
+    position: relative;
   }
 
   display: flex;
@@ -25,9 +24,29 @@
     flex-direction: column;
     overflow: hidden;
     background: var(--sub-bg-color);
+    transition:
+      width .3s cubic-bezier(.4, 0, .2, 1),
+      min-width .3s cubic-bezier(.4, 0, .2, 1),
+      max-width .3s cubic-bezier(.4, 0, .2, 1);
+
+    &.is-collapsed {
+      width: 0;
+      min-width: 0;
+      max-width: 0;
+      pointer-events: none;
+
+      .automation-view__sidebar {
+        transform: translateX(calc(-1 * var(--subpage-secondary-panel-width)));
+      }
+    }
   }
 
   &__right {
+    --automation-view-right-padding-x: 12px;
+    --automation-view-right-padding-bottom: 12px;
+
+    display: flex;
+    flex-direction: column;
     flex: 1;
     overflow: hidden;
     min-width: 0;
@@ -37,23 +56,81 @@
     border-radius: var(--subpage-content-card-radius);
     background: var(--subpage-content-card-bg);
   }
-}
 
-@media (max-width: 1100px) {
-  .automation-view {
-    &__body {
-      flex-direction: column;
+  &__mobile-rule-backdrop,
+  &__mobile-rule-sheet {
+    display: none;
+  }
+
+  &__select-arrow {
+    color: var(--sub-text-color);
+    font-size: 16px;
+    line-height: 1;
+    pointer-events: none;
+    transition: transform .18s ease, color .18s ease;
+  }
+
+  .ant-select-open &__select-arrow,
+  .ant-select-focused &__select-arrow {
+    color: var(--text-color);
+  }
+
+  .ant-select-open &__select-arrow {
+    transform: rotate(180deg);
+  }
+
+  &__title-leading-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  &__title-action-button.ant-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--sub-text-color);
+    box-shadow: none;
+
+    .ant-btn-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline-end: 0;
+      line-height: 1;
     }
 
-    &__left {
-      width: 100%;
-      min-width: 0;
-      max-height: 360px;
+    &:not(:disabled):hover,
+    &:not(:disabled):focus-visible {
+      background: var(--nav-hover-bg, var(--tag-hover-bg));
+      color: var(--text-color);
+    }
+
+    &.is-active,
+    &.is-active:disabled {
+      border: 1px solid var(--primary-color);
+      background: transparent;
+      color: var(--primary-color);
+      opacity: 1;
     }
+  }
+
+  &__title-action-icon {
+    font-size: 16px;
+    line-height: 1;
+  }
 
-    &__right {
-      margin-top: 0;
-      margin-left: var(--subpage-content-card-gap);
+  &--left-collapsed {
+    .automation-view__right {
+      margin: 4px;
     }
   }
 }
@@ -62,24 +139,7 @@
   .automation-view--compact {
     .automation-view__body {
       gap: 0;
-    }
-
-    .automation-view__mobile-switcher-shell {
-      display: block;
-      padding: 12px;
-      padding-bottom: 0;
-    }
-
-    .automation-view__mobile-switcher {
-      width: 100%;
-
-      .ant-segmented-group {
-        gap: 4px;
-      }
-
-      .ant-segmented-item {
-        min-height: 32px;
-      }
+      height: 100%;
     }
 
     .automation-view__left,
@@ -88,9 +148,9 @@
       min-width: 0;
       max-width: none;
       max-height: none;
-      margin: 12px;
-      margin-top: 12px;
-      border-radius: var(--subpage-content-card-radius);
+      height: 100%;
+      margin: 0;
+      border-radius: 0;
       background: var(--subpage-content-card-bg);
       overflow: hidden;
     }
@@ -98,5 +158,73 @@
     .automation-view__right {
       padding: 12px;
     }
+
+    .automation-view__mobile-rule-backdrop {
+      position: absolute;
+      inset: 0;
+      display: block;
+      border: none;
+      background: rgba(0, 0, 0, .28);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition: opacity .24s ease, visibility 0s linear .24s;
+      z-index: 30;
+    }
+
+    .automation-view__mobile-rule-backdrop.is-open {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+      transition-delay: 0s;
+    }
+
+    .automation-view__mobile-rule-sheet {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      display: block;
+      width: min(320px, calc(100% - 24px));
+      max-width: calc(100% - 24px);
+      transform: translateX(-100%);
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        transform .24s cubic-bezier(.4, 0, .2, 1),
+        visibility 0s linear .24s;
+      z-index: 31;
+      overscroll-behavior: contain;
+    }
+
+    .automation-view__mobile-rule-sheet.is-open {
+      transform: translateX(0);
+      visibility: visible;
+      pointer-events: auto;
+      transition-delay: 0s;
+    }
+
+    .automation-view__left--mobile-sheet {
+      width: 100%;
+      min-width: 0;
+      max-width: none;
+      height: 100%;
+      border-right: 1px solid var(--border-color);
+      border-radius: 0 8px 8px 0;
+      background: var(--sub-bg-color);
+      box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
+      overflow: hidden;
+      overscroll-behavior: contain;
+    }
+  }
+}
+
+html.dark .automation-view--compact {
+  .automation-view__mobile-rule-backdrop {
+    background: rgba(0, 0, 0, .48);
+  }
+
+  .automation-view__left--mobile-sheet {
+    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
   }
 }