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

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

@@ -3,37 +3,24 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
   }
 
-  &__sidebar-search-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 12px 8px;
+  &__sidebar-header {
+    --sidebar-active-bg: #eff6ff;
+    --sidebar-active-text: #2563eb;
   }
 
-  &__sidebar-search-input {
-    flex: 1;
-    min-width: 0;
-
-    .ant-input-affix-wrapper {
-      height: 30px;
-      border-radius: 6px;
-      background: var(--bg-color);
-      padding: 0 8px;
-      font-size: 12px;
+  &__new-rule-button {
+    .sidebar-list-header__button-content {
+      width: 100%;
     }
   }
 
-  &__search-icon {
-    font-size: 16px;
-    color: var(--sub-text-color);
-  }
-
   &__rule-list {
     flex: 1;
     overflow: auto;
-    padding: 0 12px 12px;
+    padding: 8px 12px 12px;
   }
 
   &__rule-item {
@@ -43,13 +30,15 @@
     display: flex;
     border-block-end: none !important;
 
-    &--active .automation-view__rule-card {
+    &--active .automation-view__rule-card,
+    &--active .automation-view__rule-card:hover {
       border-color: var(--primary-color);
       background: var(--primary-soft-bg);
     }
   }
 
   &__rule-card {
+    position: relative;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
@@ -64,7 +53,7 @@
       color .2s ease;
   }
 
-  &__rule-card:hover {
+  &__rule-item:not(.automation-view__rule-item--active) &__rule-card:hover {
     border-color: var(--sidebar-hover-bg, #e5e5e5);
     background: var(--sidebar-hover-bg, #e5e5e5);
   }
@@ -74,7 +63,9 @@
     flex-direction: column;
     gap: 6px;
     align-items: flex-start;
+    width: 100%;
     min-width: 0;
+    padding-right: 118px;
   }
 
   &__rule-name {
@@ -118,6 +109,7 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
+    width: 100%;
     color: var(--sub-text-color);
     font-size: 11px;
   }
@@ -155,14 +147,13 @@
   }
 
   &__rule-actions {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 8px;
-    padding-left: 8px;
+    display: contents;
     flex-shrink: 0;
 
     &-top {
+      position: absolute;
+      top: 8px;
+      right: 8px;
       display: inline-flex;
       align-items: center;
       justify-content: flex-end;
@@ -170,29 +161,58 @@
     }
 
     &-bottom {
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
       display: inline-flex;
       align-items: center;
       gap: 4px;
       opacity: 0;
-      max-width: 0;
-      overflow: hidden;
       pointer-events: none;
-      transition: opacity .2s ease, max-width .24s ease;
+      transition: opacity .2s ease;
     }
   }
 
-  &__rule-item--active .automation-view__rule-actions-bottom,
-  &__rule-card:hover .automation-view__rule-actions-bottom {
+  &__rule-created-at {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 20px;
+    color: var(--sub-text-color);
+    font-size: 11px;
+    line-height: 1;
+    pointer-events: none;
+    transition: opacity .2s ease;
+  }
+
+  &__rule-card:hover .automation-view__rule-actions-bottom,
+  &__rule-card:focus-within .automation-view__rule-actions-bottom {
     opacity: 1;
-    max-width: 88px;
     pointer-events: auto;
   }
 
-  &__rule-last {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    color: var(--sub-text-color);
+  &__rule-card:hover .automation-view__rule-created-at,
+  &__rule-card:focus-within .automation-view__rule-created-at {
+    opacity: 0;
+  }
+
+  &__rule-item--touch .automation-view__rule-actions-bottom {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &__rule-item--touch .automation-view__rule-created-at {
+    opacity: 0;
+  }
+
+  &__rule-item--touch .automation-view__icon-button--more {
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    border-radius: 8px;
   }
 
   &__meta-icon {
@@ -209,8 +229,7 @@
     padding: 0;
     border-radius: 4px;
 
-    &--run .automation-view__action-icon,
-    &--add .automation-view__action-icon {
+    &--run .automation-view__action-icon {
       color: var(--success-color);
     }
 
@@ -225,12 +244,26 @@
     &--favorite .automation-view__action-icon {
       color: var(--warning-color);
     }
+
+    &--more {
+      color: var(--sub-text-color);
+    }
   }
 
   &__action-icon {
     font-size: 16px;
   }
 
+  &__dropdown-icon {
+    font-size: 16px;
+    line-height: 1;
+
+    &--active {
+      color: var(--warning-color);
+      font-variation-settings: 'FILL' 1;
+    }
+  }
+
   &__action-icon--star {
     color: var(--warning-color);
   }
@@ -243,3 +276,57 @@
     padding: 12px;
   }
 }
+
+html.dark .automation-view__sidebar-header {
+  --sidebar-active-bg: #111b26;
+  --sidebar-active-text: #3b82f6;
+}
+
+html.dark .automation-view {
+  &__rule-item:not(.automation-view__rule-item--active)
+    .automation-view__rule-card:hover {
+    border-color: var(--border-color);
+    background: var(--tag-hover-bg);
+  }
+
+  &__rule-item--active .automation-view__rule-card,
+  &__rule-item--active .automation-view__rule-card:hover {
+    border-color: var(--primary-color);
+    background: var(--primary-soft-bg);
+  }
+}
+
+@media (max-width: 960px) {
+  .automation-view--compact {
+    .automation-view__sidebar {
+      background: var(--sub-bg-color);
+    }
+
+    .automation-view__rule-list {
+      padding: 8px 12px max(8px, env(safe-area-inset-bottom));
+    }
+
+    .automation-view__rule-card {
+      min-height: 76px;
+      background: var(--bg-color);
+    }
+
+    .automation-view__rule-content {
+      gap: 5px;
+      padding-right: 52px;
+    }
+
+    .automation-view__rule-name {
+      padding-right: 44px;
+    }
+
+    .automation-view__rule-actions-bottom {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .automation-view__rule-created-at {
+      opacity: 0;
+    }
+  }
+}

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

@@ -1,22 +1,29 @@
 import './RuleSidebar.scss'
 
-import { Button, Empty, Input, List, Switch, Tag, Tooltip } from 'antd'
+import { Button, Dropdown, Empty, List, Switch, Tag, Tooltip } from 'antd'
+import type { MenuProps } from 'antd'
 import dayjs from 'dayjs'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { AutomationRule } from '#~/api.js'
+import { SidebarListHeader, SidebarListSearchInput } from '#~/components/sidebar-list/SidebarListHeader'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 
 interface RuleSidebarProps {
   rules: AutomationRule[]
   selectedRuleId: string | null
   query: string
   isCreating: boolean
+  favoriteIds: string[]
+  collapsible?: boolean
   onCreate: () => void
   onSelect: (id: string) => void
   onRun: (rule: AutomationRule) => void
   onDelete: (rule: AutomationRule) => void
+  onToggleFavorite: (ruleId: string) => void
   onToggle: (rule: AutomationRule, enabled: boolean) => void
+  onToggleCollapsed?: () => void
   onQueryChange: (value: string) => void
 }
 
@@ -25,31 +32,21 @@ export function RuleSidebar({
   selectedRuleId,
   query,
   isCreating,
+  favoriteIds,
+  collapsible = false,
   onCreate,
   onSelect,
   onRun,
   onDelete,
+  onToggleFavorite,
   onToggle,
+  onToggleCollapsed,
   onQueryChange
 }: RuleSidebarProps) {
   const { t } = useTranslation()
-  const [favorites, setFavorites] = useState<string[]>(() => {
-    try {
-      const raw = window.localStorage.getItem('automationRuleFavorites')
-      if (!raw) return []
-      const parsed = JSON.parse(raw) as string[]
-      if (!Array.isArray(parsed)) return []
-      return parsed
-    } catch {
-      return []
-    }
-  })
-
-  useEffect(() => {
-    window.localStorage.setItem('automationRuleFavorites', JSON.stringify(favorites))
-  }, [favorites])
-
-  const favoriteSet = useMemo(() => new Set(favorites), [favorites])
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
+  const isCompactHeader = isCompactLayout || isTouchInteraction
+  const favoriteSet = useMemo(() => new Set(favoriteIds), [favoriteIds])
   const filteredRules = useMemo(() => {
     const keyword = query.trim().toLowerCase()
     const list = keyword
@@ -67,10 +64,6 @@ export function RuleSidebar({
     })
   }, [favoriteSet, query, rules])
 
-  const toggleFavorite = useCallback((ruleId: string) => {
-    setFavorites(prev => prev.includes(ruleId) ? prev.filter(id => id !== ruleId) : [...prev, ruleId])
-  }, [])
-
   const renderTriggerBadge = useCallback((trigger: NonNullable<AutomationRule['triggers']>[number]) => {
     if (trigger.type === 'interval') {
       const minutes = trigger.intervalMs ? Math.max(1, Math.round(trigger.intervalMs / 60000)) : 0
@@ -99,28 +92,56 @@ export function RuleSidebar({
 
   return (
     <div className='automation-view__sidebar'>
-      <div className='automation-view__sidebar-search-row'>
-        <Input
-          value={query}
-          onChange={(event) => onQueryChange(event.target.value)}
-          placeholder={t('automation.searchRule')}
-          prefix={<span className='material-symbols-rounded automation-view__search-icon'>search</span>}
-          allowClear
-          className='automation-view__sidebar-search-input'
-        />
-        <Tooltip title={isCreating ? t('automation.creatingRule') : t('automation.newRule')}>
+      <SidebarListHeader
+        className='automation-view__sidebar-header'
+        compact={isCompactHeader}
+        primaryAction={
           <Button
-            className='automation-view__icon-button automation-view__icon-button--add'
-            type='text'
+            className={`sidebar-list-header__primary-action automation-view__new-rule-button ${
+              isCreating ? 'active' : ''
+            }`}
+            type={isCreating ? 'default' : 'primary'}
+            block
             onClick={onCreate}
             disabled={isCreating}
           >
-            <span className='material-symbols-rounded automation-view__action-icon'>
-              {isCreating ? 'progress_activity' : 'add'}
+            <span className='sidebar-list-header__button-content'>
+              <span className={`material-symbols-rounded ${isCreating ? 'filled' : ''}`}>
+                {isCreating ? 'progress_activity' : 'add'}
+              </span>
+              <span>{isCreating ? t('automation.creatingRule') : t('automation.newRule')}</span>
             </span>
           </Button>
-        </Tooltip>
-      </div>
+        }
+        sideAction={collapsible
+          ? (
+            <Tooltip
+              title={isTouchInteraction
+                ? undefined
+                : isCompactHeader
+                ? t('common.close')
+                : t('automation.collapseRulePanel')}
+            >
+              <Button
+                className='sidebar-list-header__icon-action automation-view__sidebar-collapse-button'
+                type='text'
+                aria-label={isCompactHeader ? t('common.close') : t('automation.collapseRulePanel')}
+                onClick={onToggleCollapsed}
+              >
+                <span className='material-symbols-rounded'>{isCompactHeader ? 'close' : 'left_panel_close'}</span>
+              </Button>
+            </Tooltip>
+          )
+          : undefined}
+      >
+        <SidebarListSearchInput
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+          placeholder={t('automation.searchRule')}
+          className='automation-view__sidebar-search-input'
+          allowClear
+        />
+      </SidebarListHeader>
 
       {filteredRules.length === 0
         ? (
@@ -140,9 +161,51 @@ export function RuleSidebar({
               const remainingTriggers = Math.max(triggers.length - displayTriggers.length, 0)
               const taskCount = rule.tasks?.length ?? 0
               const primaryType = triggers[0]?.type ?? 'interval'
+              const actionMenuItems: MenuProps['items'] = [
+                {
+                  key: 'run',
+                  label: t('automation.run'),
+                  icon: <span className='material-symbols-rounded automation-view__dropdown-icon'>play_arrow</span>
+                },
+                {
+                  key: 'favorite',
+                  label: isFavorite ? t('automation.unfavorite') : t('automation.favorite'),
+                  icon: (
+                    <span
+                      className={`material-symbols-rounded automation-view__dropdown-icon ${
+                        isFavorite ? 'automation-view__dropdown-icon--active' : ''
+                      }`}
+                    >
+                      {isFavorite ? 'star' : 'star_outline'}
+                    </span>
+                  )
+                },
+                {
+                  key: 'delete',
+                  label: t('automation.delete'),
+                  danger: true,
+                  icon: <span className='material-symbols-rounded automation-view__dropdown-icon'>delete</span>
+                }
+              ]
+              const handleActionMenuClick: NonNullable<MenuProps['onClick']> = ({ key, domEvent }) => {
+                domEvent.stopPropagation()
+                if (key === 'run') {
+                  void onRun(rule)
+                  return
+                }
+                if (key === 'favorite') {
+                  onToggleFavorite(rule.id)
+                  return
+                }
+                if (key === 'delete') {
+                  void onDelete(rule)
+                }
+              }
               return (
                 <List.Item
-                  className={`automation-view__rule-item ${active ? 'automation-view__rule-item--active' : ''}`}
+                  className={`automation-view__rule-item ${active ? 'automation-view__rule-item--active' : ''} ${
+                    isCompactHeader ? 'automation-view__rule-item--touch' : ''
+                  }`}
                   onClick={() => onSelect(rule.id)}
                 >
                   <div className='automation-view__rule-card'>
@@ -178,12 +241,6 @@ export function RuleSidebar({
                           <span className='material-symbols-rounded automation-view__meta-icon'>checklist</span>
                           {t('automation.taskCount', { count: taskCount })}
                         </span>
-                        <span className='automation-view__rule-last'>
-                          <span className='material-symbols-rounded automation-view__meta-icon'>update</span>
-                          {rule.lastRunAt
-                            ? t('automation.lastRunAt', { time: dayjs(rule.lastRunAt).format('YYYY-MM-DD HH:mm') })
-                            : t('automation.noRunYet')}
-                        </span>
                       </div>
                     </div>
                     <div className='automation-view__rule-actions'>
@@ -197,51 +254,78 @@ export function RuleSidebar({
                         </Tooltip>
                       </div>
                       <div className='automation-view__rule-actions-bottom'>
-                        <Tooltip title={t('automation.run')}>
-                          <Button
-                            className='automation-view__icon-button automation-view__icon-button--run'
-                            type='text'
-                            onClick={(event) => {
-                              event.stopPropagation()
-                              void onRun(rule)
-                            }}
-                          >
-                            <span className='material-symbols-rounded automation-view__action-icon'>play_arrow</span>
-                          </Button>
-                        </Tooltip>
-                        <Tooltip title={t('automation.delete')}>
-                          <Button
-                            className='automation-view__icon-button automation-view__icon-button--delete'
-                            type='text'
-                            onClick={(event) => {
-                              event.stopPropagation()
-                              void onDelete(rule)
-                            }}
-                          >
-                            <span className='material-symbols-rounded automation-view__action-icon'>delete</span>
-                          </Button>
-                        </Tooltip>
-                        <Tooltip title={isFavorite ? t('automation.unfavorite') : t('automation.favorite')}>
-                          <Button
-                            className={`automation-view__icon-button automation-view__icon-button--favorite ${
-                              isFavorite ? 'automation-view__icon-button--active' : ''
-                            }`}
-                            type='text'
-                            onClick={(event) => {
-                              event.stopPropagation()
-                              toggleFavorite(rule.id)
-                            }}
-                          >
-                            <span
-                              className={`material-symbols-rounded automation-view__action-icon ${
-                                isFavorite ? 'automation-view__action-icon--star' : ''
-                              }`}
+                        {isCompactHeader
+                          ? (
+                            <Dropdown
+                              trigger={['click']}
+                              menu={{ items: actionMenuItems, onClick: handleActionMenuClick }}
                             >
-                              {isFavorite ? 'star' : 'star_outline'}
-                            </span>
-                          </Button>
-                        </Tooltip>
+                              <Button
+                                className='automation-view__icon-button automation-view__icon-button--more'
+                                type='text'
+                                aria-label={t('common.moreActions')}
+                                onClick={(event) => event.stopPropagation()}
+                              >
+                                <span className='material-symbols-rounded automation-view__action-icon'>
+                                  more_horiz
+                                </span>
+                              </Button>
+                            </Dropdown>
+                          )
+                          : (
+                            <>
+                              <Tooltip title={t('automation.run')}>
+                                <Button
+                                  className='automation-view__icon-button automation-view__icon-button--run'
+                                  type='text'
+                                  onClick={(event) => {
+                                    event.stopPropagation()
+                                    void onRun(rule)
+                                  }}
+                                >
+                                  <span className='material-symbols-rounded automation-view__action-icon'>
+                                    play_arrow
+                                  </span>
+                                </Button>
+                              </Tooltip>
+                              <Tooltip title={isFavorite ? t('automation.unfavorite') : t('automation.favorite')}>
+                                <Button
+                                  className={`automation-view__icon-button automation-view__icon-button--favorite ${
+                                    isFavorite ? 'automation-view__icon-button--active' : ''
+                                  }`}
+                                  type='text'
+                                  onClick={(event) => {
+                                    event.stopPropagation()
+                                    onToggleFavorite(rule.id)
+                                  }}
+                                >
+                                  <span
+                                    className={`material-symbols-rounded automation-view__action-icon ${
+                                      isFavorite ? 'automation-view__action-icon--star' : ''
+                                    }`}
+                                  >
+                                    {isFavorite ? 'star' : 'star_outline'}
+                                  </span>
+                                </Button>
+                              </Tooltip>
+                              <Tooltip title={t('automation.delete')}>
+                                <Button
+                                  className='automation-view__icon-button automation-view__icon-button--delete'
+                                  type='text'
+                                  onClick={(event) => {
+                                    event.stopPropagation()
+                                    void onDelete(rule)
+                                  }}
+                                >
+                                  <span className='material-symbols-rounded automation-view__action-icon'>delete</span>
+                                </Button>
+                              </Tooltip>
+                            </>
+                          )}
                       </div>
+                      <span className='automation-view__rule-created-at'>
+                        {dayjs(rule.createdAt).format('YYYY-MM-DD HH:mm')}
+                      </span>
                     </div>
                   </div>
                 </List.Item>