@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/NavRailCompactMoreSheet.tsx

@@ -0,0 +1,141 @@
+interface NavRailCompactMoreAction {
+  active?: boolean
+  icon: string
+  key: string
+  label: string
+  onSelect: () => void
+}
+
+interface NavRailCompactChoiceAction {
+  active: boolean
+  icon?: string
+  key: string
+  label: string
+  onSelect: () => void
+}
+
+export function NavRailCompactMoreSheet({
+  actions,
+  isOpen,
+  languageActions,
+  languageLabel,
+  moreLabel,
+  onClose,
+  themeActions,
+  themeLabel
+}: {
+  actions: NavRailCompactMoreAction[]
+  isOpen: boolean
+  languageActions: NavRailCompactChoiceAction[]
+  languageLabel: string
+  moreLabel: string
+  onClose: () => void
+  themeActions: NavRailCompactChoiceAction[]
+  themeLabel: string
+}) {
+  const activeLanguageKey = languageActions.find((action) => action.active)?.key ?? languageActions[0]?.key ?? ''
+
+  const handleActionSelect = (action: { onSelect: () => void }) => {
+    action.onSelect()
+    onClose()
+  }
+
+  const handleChoiceSelect = (action: NavRailCompactChoiceAction) => {
+    action.onSelect()
+  }
+
+  return (
+    <>
+      <button
+        type='button'
+        className={`nav-rail-compact-sheet-backdrop ${isOpen ? 'is-open' : ''}`}
+        aria-hidden={!isOpen}
+        tabIndex={-1}
+        onClick={onClose}
+      />
+      <div
+        className={`nav-rail-compact-sheet ${isOpen ? 'is-open' : ''}`}
+        role='dialog'
+        aria-modal={isOpen ? 'true' : undefined}
+        aria-hidden={!isOpen}
+        aria-label={moreLabel}
+      >
+        <div className='nav-rail-compact-sheet__handle' />
+
+        {actions.length > 0 && (
+          <div className='nav-rail-compact-sheet__section'>
+            <div className='nav-rail-compact-sheet__section-title'>
+              <span className='material-symbols-rounded nav-rail-compact-sheet__section-title-icon'>tune</span>
+              <span>{moreLabel}</span>
+            </div>
+            <div className='nav-rail-compact-sheet__actions'>
+              {actions.map((action) => (
+                <button
+                  key={action.key}
+                  type='button'
+                  className={`nav-rail-compact-sheet__action ${action.active ? 'is-active' : ''}`}
+                  onClick={() => handleActionSelect(action)}
+                >
+                  <span className='material-symbols-rounded'>{action.icon}</span>
+                  <span>{action.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className='nav-rail-compact-sheet__section'>
+          <div className='nav-rail-compact-sheet__section-title'>
+            <span className='material-symbols-rounded nav-rail-compact-sheet__section-title-icon'>palette</span>
+            <span>{themeLabel}</span>
+          </div>
+          <div className='nav-rail-compact-sheet__segmented'>
+            {themeActions.map((action) => (
+              <button
+                key={action.key}
+                type='button'
+                className={`nav-rail-compact-sheet__segment ${action.active ? 'is-active' : ''}`}
+                onClick={() => handleChoiceSelect(action)}
+              >
+                {action.icon != null && (
+                  <span className='material-symbols-rounded nav-rail-compact-sheet__segment-icon'>
+                    {action.icon}
+                  </span>
+                )}
+                <span>{action.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className='nav-rail-compact-sheet__section'>
+          <div className='nav-rail-compact-sheet__section-title'>
+            <span className='material-symbols-rounded nav-rail-compact-sheet__section-title-icon'>language</span>
+            <span>{languageLabel}</span>
+          </div>
+          <label className='nav-rail-compact-sheet__select-shell'>
+            <span className='material-symbols-rounded nav-rail-compact-sheet__select-icon'>translate</span>
+            <select
+              className='nav-rail-compact-sheet__select'
+              value={activeLanguageKey}
+              aria-label={languageLabel}
+              onChange={(event) => {
+                const selectedAction = languageActions.find((action) => action.key === event.target.value)
+                if (selectedAction != null) {
+                  handleChoiceSelect(selectedAction)
+                }
+              }}
+            >
+              {languageActions.map((action) => (
+                <option key={action.key} value={action.key}>
+                  {action.label}
+                </option>
+              ))}
+            </select>
+            <span className='material-symbols-rounded nav-rail-compact-sheet__select-chevron'>expand_more</span>
+          </label>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/ShortcutTooltip.tsx

@@ -4,6 +4,7 @@ import { Tooltip } from 'antd'
 import type { TooltipPlacement } from 'antd/es/tooltip'
 import React, { forwardRef, useMemo } from 'react'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { formatShortcutLabel } from '#~/utils/shortcutUtils'
 import { ShortcutDisplay } from './ShortcutDisplay'
 
@@ -38,14 +39,15 @@ export const ShortcutTooltip = forwardRef<HTMLDivElement, ShortcutTooltipProps>(
   className,
   ...divProps
 }, ref) => {
+  const { isTouchInteraction } = useResponsiveLayout()
   const shortcutLabel = useMemo(() => formatShortcutLabel(shortcut, isMac), [isMac, shortcut])
   const resolvedTitle = useMemo(() => {
-    if (!enabled || shortcutLabel === '') {
+    if (!enabled || isTouchInteraction || shortcutLabel === '') {
       return null
     }
 
     return resolveShortcutTooltipTitle(title, shortcutLabel)
-  }, [enabled, shortcutLabel, title])
+  }, [enabled, isTouchInteraction, shortcutLabel, title])
 
   const trigger = (
     <div

package/src/components/Sidebar.scss

@@ -89,6 +89,20 @@
   }
 }
 
+.sidebar-container--compact {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid var(--border-color);
+
+  .sidebar-content {
+    width: 100%;
+  }
+
+  .sidebar-footer {
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+}
+
 .sidebar-collapsed-header {
   position: absolute;
   top: 12px;
@@ -142,6 +156,43 @@
   align-items: center;
 }
 
+.sidebar-utility-footer {
+  margin-top: auto;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  padding: 12px;
+  border-top: 1px solid var(--border-color);
+  background: var(--sub-bg-color);
+}
+
+.sidebar-utility-footer__action.ant-btn.ant-btn-text {
+  min-width: 0;
+  height: 40px;
+  padding: 0 8px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  .material-symbols-rounded {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  > span:last-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+  }
+}
+
 html.dark .sidebar-container {
   --sidebar-hover-bg: #1f1f1f;
   --sidebar-active-bg: #111b26;

package/src/components/Sidebar.tsx

@@ -6,6 +6,7 @@ import React, { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useSidebarQueryState } from '#~/hooks/use-sidebar-query-state'
 import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
 import { getAdapterDisplay } from '#~/resources/adapters.js'
@@ -30,11 +31,17 @@ const sortSessionsByOrder = (sessions: Session[], sortOrder: SidebarSessionSortO
 
 export function Sidebar({
   activeId,
+  isCompactLayout = false,
+  isMobileOpen = false,
+  onRequestClose,
   onSelectSession,
   onDeletedSession,
   width
 }: {
   activeId?: string
+  isCompactLayout?: boolean
+  isMobileOpen?: boolean
+  onRequestClose?: () => void
   onSelectSession: (session: Session, isNew?: boolean) => void
   onDeletedSession?: (id: string, nextId?: string) => void
   width: number
@@ -58,6 +65,7 @@ export function Sidebar({
   const [isBatchMode, setIsBatchMode] = useState(false)
   const [selectedIds, setSelectedIds] = useState(new Set<string>())
   const { t } = useTranslation()
+  const { isTouchInteraction } = useResponsiveLayout()
   const isMac = navigator.platform.includes('Mac')
 
   const { data: sessionsRes, mutate: mutateSessions } = useSWR<{ sessions: Session[] }>(
@@ -124,6 +132,7 @@ export function Sidebar({
   }, [adapterFilters, searchQuery, sessions, sortOrder, tagFilters])
 
   async function handleCreateSession() {
+    onRequestClose?.()
     onSelectSession({ id: '' } as Session, true)
   }
 
@@ -259,6 +268,8 @@ export function Sidebar({
   }
 
   const isCreatingSession = activeId === undefined || activeId === ''
+  const effectiveSidebarCollapsed = isCompactLayout ? false : isSidebarCollapsed
+  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
 
   const createBtnRef = useRef<HTMLButtonElement>(null)
 
@@ -280,27 +291,37 @@ export function Sidebar({
 
   return (
     <div
-      className={`sidebar-container ${isSidebarCollapsed ? 'collapsed' : ''}`}
-      style={{
-        width: isSidebarCollapsed ? 0 : width,
-        minWidth: isSidebarCollapsed ? 0 : undefined,
-        transition: isResizing ? 'none' : 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        borderRight: isSidebarCollapsed ? 'none' : undefined
-      }}
+      className={[
+        'sidebar-container',
+        effectiveSidebarCollapsed ? 'collapsed' : '',
+        isCompactLayout ? 'sidebar-container--compact' : '',
+        isMobileOpen ? 'is-mobile-open' : ''
+      ].filter(Boolean).join(' ')}
+      style={isCompactLayout
+        ? undefined
+        : {
+          width: effectiveSidebarCollapsed ? 0 : width,
+          minWidth: effectiveSidebarCollapsed ? 0 : undefined,
+          transition: isResizing ? 'none' : 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          borderRight: effectiveSidebarCollapsed ? 'none' : undefined
+        }}
     >
       <div
         className='sidebar-content'
-        style={{
-          width,
-          transition: isResizing ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-          transform: isSidebarCollapsed ? `translateX(-${width}px)` : 'translateX(0)'
-        }}
+        style={isCompactLayout
+          ? undefined
+          : {
+            width,
+            transition: isResizing ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            transform: effectiveSidebarCollapsed ? `translateX(-${width}px)` : 'translateX(0)'
+          }}
       >
         <SidebarHeader
           adapterFilters={adapterFilters}
           availableAdapters={availableAdapters}
           hasActiveSearchControls={hasActiveSearchControls}
-          isSidebarCollapsed={isSidebarCollapsed}
+          isCompactLayout={isCompactLayout}
+          isSidebarCollapsed={effectiveSidebarCollapsed}
           searchQuery={searchQuery}
           sortOrder={sortOrder}
           sortSelection={sortSelection}
@@ -313,6 +334,7 @@ export function Sidebar({
           isBatchMode={isBatchMode}
           onToggleBatchMode={toggleBatchMode}
           onToggleSidebarCollapsed={() => setSidebarCollapsed(!isSidebarCollapsed)}
+          onCloseSidebar={onRequestClose}
           selectedCount={selectedIds.size}
           totalCount={filteredSessions.length}
           onSelectAll={handleSelectAll}
@@ -337,7 +359,9 @@ export function Sidebar({
           sessions={filteredSessions}
           activeId={activeId}
           isBatchMode={isBatchMode}
+          isCompactLayout={isCompactLayout}
           selectedIds={selectedIds}
+          isTouchInteraction={isTouchInteraction}
           searchQuery={searchQuery}
           onSelectSession={onSelectSession}
           onArchiveSession={handleArchiveSession}
@@ -347,9 +371,12 @@ export function Sidebar({
           onToggleSelect={handleToggleSelect}
         />
       </div>
-      {isSidebarCollapsed && (
+      {!isCompactLayout && isSidebarCollapsed && (
         <div className='sidebar-collapsed-header'>
-          <Tooltip title={isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat')} placement='bottom'>
+          <Tooltip
+            title={resolveTooltipTitle(isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat'))}
+            placement='bottom'
+          >
             <Button
               ref={createBtnRef}
               className={`sidebar-collapsed-control ${isCreatingSession ? 'active' : ''}`}
@@ -364,7 +391,7 @@ export function Sidebar({
               </span>
             </Button>
           </Tooltip>
-          <Tooltip title={t('common.expand')} placement='bottom'>
+          <Tooltip title={resolveTooltipTitle(t('common.expand'))} placement='bottom'>
             <Button
               className='sidebar-collapsed-control'
               type='text'

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

@@ -6,6 +6,11 @@
     height: 100%;
   }
 
+  &__form-panel > .ant-form {
+    flex: 1;
+    min-height: 0;
+  }
+
   &__form-header {
     display: flex;
     align-items: center;
@@ -14,7 +19,7 @@
 
   &__form-header-actions {
     display: inline-flex;
-    gap: 12px;
+    gap: 8px;
   }
 
   &__form-title {
@@ -33,7 +38,7 @@
   &__form-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
-    gap: 20px;
+    gap: 12px;
     flex: 1;
     overflow: hidden;
   }
@@ -61,12 +66,10 @@
   }
 
   &__form-section {
-    padding: 12px 0;
-    border-bottom: 1px solid var(--border-color);
-
-    &:last-child {
-      border-bottom: none;
-    }
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--sub-bg-color);
   }
 
   &__label {
@@ -95,8 +98,9 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px 12px;
-    border-radius: 10px;
-    background: var(--tag-bg);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-color);
   }
 
   &__toggle-label {
@@ -114,9 +118,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 36px;
-    padding: 0 12px;
-    border-radius: 8px;
+    height: 28px;
+    min-width: 28px;
+    padding: 0 10px;
+    border-radius: 6px;
 
     &--confirm {
       font-weight: 600;
@@ -126,4 +131,26 @@
   &__action-icon {
     font-size: 18px;
   }
+
+  &__form-section .ant-input,
+  &__form-section .ant-input-affix-wrapper,
+  &__form-section .ant-input-number,
+  &__form-section .ant-select-selector {
+    border-radius: 6px !important;
+    background: var(--bg-color);
+  }
+
+  &__form-section .ant-input,
+  &__form-section .ant-input-affix-wrapper,
+  &__form-section .ant-select-selector {
+    min-height: 30px;
+  }
+}
+
+@media (max-width: 1080px) {
+  .automation-view {
+    &__form-grid {
+      grid-template-columns: 1fr;
+    }
+  }
 }

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

@@ -5,15 +5,24 @@
     height: 100%;
   }
 
-  &__sidebar-header {
+  &__sidebar-search-row {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding-bottom: 16px;
+    gap: 8px;
+    padding: 10px 12px 8px;
   }
 
-  &__sidebar-search {
-    padding-bottom: 12px;
+  &__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;
+    }
   }
 
   &__search-icon {
@@ -21,46 +30,22 @@
     color: var(--sub-text-color);
   }
 
-  &__title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  &__title-icon {
-    font-size: 24px;
-    color: var(--sub-text-color);
-  }
-
-  &__title-text {
-    margin: 0;
-    font-size: 18px;
-    color: var(--text-color);
-  }
-
   &__rule-list {
     flex: 1;
     overflow: auto;
+    padding: 0 12px 12px;
   }
 
   &__rule-item {
     padding: 0 !important;
-    margin-bottom: 10px;
+    margin-bottom: 6px;
     cursor: pointer;
     display: flex;
-    position: relative;
     border-block-end: none !important;
 
-    &--active::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      border: 2px solid var(--primary-color);
-      border-radius: 8px;
-      pointer-events: none;
+    &--active .automation-view__rule-card {
+      border-color: var(--primary-color);
+      background: var(--primary-soft-bg);
     }
   }
 
@@ -70,26 +55,45 @@
     justify-content: space-between;
     width: 100%;
     border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 12px 12px 12px 16px;
+    border-radius: 8px;
+    padding: 8px;
     background: var(--bg-color);
+    transition:
+      border-color .2s ease,
+      background-color .2s ease,
+      color .2s ease;
+  }
+
+  &__rule-card:hover {
+    border-color: var(--sidebar-hover-bg, #e5e5e5);
+    background: var(--sidebar-hover-bg, #e5e5e5);
   }
 
   &__rule-content {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
     align-items: flex-start;
+    min-width: 0;
   }
 
   &__rule-name {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
+    min-width: 0;
+
+    .ant-tag {
+      margin-inline-end: 0;
+      padding-inline: 4px;
+      font-size: 9px;
+      line-height: 13px;
+      border-radius: 2px;
+    }
   }
 
   &__rule-icon {
-    font-size: 20px;
+    font-size: 18px;
     color: var(--sub-text-color);
 
     &--interval,
@@ -100,7 +104,13 @@
   }
 
   &__rule-title {
-    font-weight: 600;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 1.35;
+    font-weight: 500;
     color: var(--text-color);
   }
 
@@ -109,7 +119,7 @@
     flex-direction: column;
     gap: 4px;
     color: var(--sub-text-color);
-    font-size: 12px;
+    font-size: 11px;
   }
 
   &__rule-trigger-list {
@@ -124,6 +134,7 @@
     align-items: center;
     gap: 4px;
     border-radius: 999px;
+    padding: 1px 8px;
     background: var(--tag-bg);
     color: var(--sub-text-color);
   }
@@ -147,8 +158,8 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    gap: 12px;
-    padding-left: 12px;
+    gap: 8px;
+    padding-left: 8px;
     flex-shrink: 0;
 
     &-top {
@@ -161,10 +172,22 @@
     &-bottom {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
+      gap: 4px;
+      opacity: 0;
+      max-width: 0;
+      overflow: hidden;
+      pointer-events: none;
+      transition: opacity .2s ease, max-width .24s ease;
     }
   }
 
+  &__rule-item--active .automation-view__rule-actions-bottom,
+  &__rule-card:hover .automation-view__rule-actions-bottom {
+    opacity: 1;
+    max-width: 88px;
+    pointer-events: auto;
+  }
+
   &__rule-last {
     display: inline-flex;
     align-items: center;
@@ -180,9 +203,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
     padding: 0;
+    border-radius: 4px;
 
     &--run .automation-view__action-icon,
     &--add .automation-view__action-icon {
@@ -203,7 +228,7 @@
   }
 
   &__action-icon {
-    font-size: 18px;
+    font-size: 16px;
   }
 
   &__action-icon--star {
@@ -215,5 +240,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 12px;
   }
 }