@vibe-forge/client 0.11.3 → 1.0.0

package/src/components/sidebar/SessionItem.scss

@@ -333,6 +333,68 @@
   }
 }
 
+.session-item--touch {
+  .session-header-side {
+    gap: 8px;
+  }
+
+  .time-display {
+    opacity: 1 !important;
+  }
+
+  .action-btn--more {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    color: var(--sub-text-color);
+
+    .material-symbols-rounded {
+      font-size: 18px;
+    }
+  }
+}
+
+.session-item--compact {
+  .session-info {
+    gap: 6px;
+  }
+
+  .session-header {
+    align-items: flex-start;
+  }
+
+  .session-header-side {
+    gap: 4px;
+    min-height: 0;
+  }
+
+  .time-display {
+    display: none;
+  }
+
+  .tags-container {
+    gap: 4px;
+
+    .session-tag {
+      max-width: 96px;
+
+      &--count {
+        padding: 0 5px;
+        color: var(--sub-text-color);
+      }
+    }
+  }
+}
+
+.session-item--compact.session-item--touch {
+  .action-btn--more {
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+  }
+}
+
 @keyframes spin {
   from {
     transform: rotate(0deg);

package/src/components/sidebar/SessionItem.tsx

@@ -17,7 +17,9 @@ interface SessionItemProps {
   session: Session
   isActive: boolean
   isBatchMode: boolean
+  isCompactLayout: boolean
   isSelected: boolean
+  isTouchInteraction: boolean
   onSelect: (session: Session) => void
   onArchive: (id: string) => void | Promise<void>
   onDelete: (id: string) => void | Promise<void>
@@ -32,7 +34,9 @@ export function SessionItem({
   session,
   isActive,
   isBatchMode,
+  isCompactLayout,
   isSelected,
+  isTouchInteraction,
   onSelect,
   onArchive,
   onDelete,
@@ -44,6 +48,8 @@ export function SessionItem({
   const automationPrefix = 'automation:'
   const itemContentRef = useRef<HTMLDivElement | null>(null)
   const [pendingAction, setPendingAction] = useState<PendingSessionAction>(null)
+  const showCompactActionMenu = isCompactLayout || isTouchInteraction
+  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
 
   useEffect(() => {
     if (pendingAction == null) {
@@ -83,6 +89,9 @@ export function SessionItem({
 
   const archiveActionLabel = session.isArchived ? t('common.restore') : t('common.archive')
   const archiveConfirmLabel = t('common.confirmAction', { action: archiveActionLabel })
+  const sessionTags = session.tags ?? []
+  const visibleTags = isCompactLayout ? sessionTags.slice(0, 1) : sessionTags
+  const hiddenTagCount = Math.max(sessionTags.length - visibleTags.length, 0)
 
   const displayTitle = (session.title != null && session.title !== '')
     ? session.title
@@ -138,7 +147,7 @@ export function SessionItem({
         break
       case 'waiting_input':
         return (
-          <Tooltip title={title}>
+          <Tooltip title={resolveTooltipTitle(title)}>
             <div className='waiting-input-indicator' />
           </Tooltip>
         )
@@ -147,7 +156,7 @@ export function SessionItem({
     }
 
     return (
-      <Tooltip title={title}>
+      <Tooltip title={resolveTooltipTitle(title)}>
         <span
           className={`material-symbols-rounded status-icon ${status === 'running' ? 'spin' : ''}`}
           style={{
@@ -192,7 +201,7 @@ export function SessionItem({
         }}
         className={`session-item ${isActive ? 'active' : ''} ${isSelected ? 'selected' : ''} ${
           session.isStarred ? 'starred' : ''
-        }`}
+        } ${isCompactLayout ? 'session-item--compact' : ''} ${showCompactActionMenu ? 'session-item--touch' : ''}`}
       >
         <div ref={itemContentRef} className='session-item-content'>
           <div className={`session-leading ${adapterDisplay?.icon != null ? 'has-adapter' : ''}`}>
@@ -218,71 +227,102 @@ export function SessionItem({
               <div className='session-header-side'>
                 {!isBatchMode && (
                   <>
-                    <Tooltip title={timeDisplay.full}>
-                      <span className='time-display'>
-                        {timeDisplay.relative}
-                      </span>
-                    </Tooltip>
-                    <div className='session-item-actions'>
-                      <Tooltip title={session.isStarred ? t('common.unstar') : t('common.star')}>
-                        <Button
-                          type='text'
-                          size='small'
-                          className={`action-btn star-btn ${session.isStarred ? 'starred' : ''}`}
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            setPendingAction(null)
-                            void onStar(session.id, !session.isStarred)
-                          }}
-                          icon={
-                            <span
-                              className={`material-symbols-rounded ${session.isStarred ? 'filled' : ''}`}
-                            >
-                              star
-                            </span>
-                          }
-                        />
+                    {!isCompactLayout && (
+                      <Tooltip title={resolveTooltipTitle(timeDisplay.full)}>
+                        <span className='time-display'>
+                          {timeDisplay.relative}
+                        </span>
                       </Tooltip>
-                      <Tooltip
-                        title={pendingAction === 'archive' ? archiveConfirmLabel : archiveActionLabel}
-                      >
-                        <Button
-                          type='text'
-                          size='small'
-                          className={`action-btn archive-btn ${pendingAction === 'archive' ? 'is-confirming' : ''}`}
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            handleConfirmableActionClick('archive')
-                          }}
+                    )}
+                    {showCompactActionMenu
+                      ? (
+                        <SessionContextMenu
+                          session={session}
+                          trigger={['click']}
+                          onArchive={onArchive}
+                          onDelete={onDelete}
+                          onRename={onRename}
+                          onStar={onStar}
                         >
-                          <span className='material-symbols-rounded'>
-                            {session.isArchived ? 'unarchive' : 'archive'}
-                          </span>
-                          {pendingAction === 'archive' && (
-                            <span className='action-btn__label'>{archiveConfirmLabel}</span>
-                          )}
-                        </Button>
-                      </Tooltip>
-                    </div>
+                          <Button
+                            type='text'
+                            size='small'
+                            className='action-btn action-btn--more'
+                            title={t('common.moreActions')}
+                            aria-label={t('common.moreActions')}
+                            onClick={(event) => {
+                              event.stopPropagation()
+                            }}
+                            icon={<span className='material-symbols-rounded'>more_horiz</span>}
+                          />
+                        </SessionContextMenu>
+                      )
+                      : (
+                        <div className='session-item-actions'>
+                          <Tooltip
+                            title={resolveTooltipTitle(session.isStarred ? t('common.unstar') : t('common.star'))}
+                          >
+                            <Button
+                              type='text'
+                              size='small'
+                              className={`action-btn star-btn ${session.isStarred ? 'starred' : ''}`}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                setPendingAction(null)
+                                void onStar(session.id, !session.isStarred)
+                              }}
+                              icon={
+                                <span
+                                  className={`material-symbols-rounded ${session.isStarred ? 'filled' : ''}`}
+                                >
+                                  star
+                                </span>
+                              }
+                            />
+                          </Tooltip>
+                          <Tooltip
+                            title={resolveTooltipTitle(
+                              pendingAction === 'archive' ? archiveConfirmLabel : archiveActionLabel
+                            )}
+                          >
+                            <Button
+                              type='text'
+                              size='small'
+                              className={`action-btn archive-btn ${pendingAction === 'archive' ? 'is-confirming' : ''}`}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                handleConfirmableActionClick('archive')
+                              }}
+                            >
+                              <span className='material-symbols-rounded'>
+                                {session.isArchived ? 'unarchive' : 'archive'}
+                              </span>
+                              {pendingAction === 'archive' && (
+                                <span className='action-btn__label'>{archiveConfirmLabel}</span>
+                              )}
+                            </Button>
+                          </Tooltip>
+                        </div>
+                      )}
                   </>
                 )}
               </div>
             </div>
-            {lastMessageSnippet != null && (
+            {!isCompactLayout && lastMessageSnippet != null && (
               <div className='last-message'>
                 {lastMessageSnippet}
               </div>
             )}
-            {session.tags != null && session.tags.length > 0 && (
+            {visibleTags.length > 0 && (
               <div className='tags-container'>
-                {session.tags.map((tag: string) => {
+                {visibleTags.map((tag: string) => {
                   const automationTag = parseAutomationTag(tag)
                   if (automationTag) {
                     const href = `/automation?rule=${encodeURIComponent(automationTag.ruleId)}`
                     return (
                       <Tooltip
                         key={tag}
-                        title={automationTag.ruleTitle}
+                        title={resolveTooltipTitle(automationTag.ruleTitle)}
                       >
                         <Tag
                           className='session-tag session-tag--automation'
@@ -302,7 +342,7 @@ export function SessionItem({
                   return (
                     <Tooltip
                       key={tag}
-                      title={tag}
+                      title={resolveTooltipTitle(tag)}
                     >
                       <Tag className='session-tag'>
                         <span className='session-tag__text'>
@@ -312,6 +352,11 @@ export function SessionItem({
                     </Tooltip>
                   )
                 })}
+                {hiddenTagCount > 0 && (
+                  <Tag className='session-tag session-tag--count'>
+                    +{hiddenTagCount}
+                  </Tag>
+                )}
               </div>
             )}
           </div>

package/src/components/sidebar/SessionList.tsx

@@ -11,7 +11,9 @@ interface SessionListProps {
   activeId?: string
   hasActiveFilters: boolean
   isBatchMode: boolean
+  isCompactLayout: boolean
   selectedIds: Set<string>
+  isTouchInteraction: boolean
   searchQuery?: string
   onSelectSession: (session: Session) => void
   onArchiveSession: (id: string) => void | Promise<void>
@@ -26,7 +28,9 @@ export function SessionList({
   activeId,
   hasActiveFilters,
   isBatchMode,
+  isCompactLayout,
   selectedIds,
+  isTouchInteraction,
   searchQuery,
   onSelectSession,
   onArchiveSession,
@@ -142,7 +146,9 @@ export function SessionList({
                   session={s}
                   isActive={activeId === s.id}
                   isBatchMode={isBatchMode}
+                  isCompactLayout={isCompactLayout}
                   isSelected={selectedIds.has(s.id)}
+                  isTouchInteraction={isTouchInteraction}
                   onSelect={onSelectSession}
                   onArchive={onArchiveSession}
                   onDelete={onDeleteSession}

package/src/components/sidebar/SidebarHeader.scss

@@ -357,3 +357,52 @@
     }
   }
 }
+
+.sidebar-header--compact {
+  padding-top: 12px;
+
+  .header-top {
+    align-items: stretch;
+  }
+
+  .new-chat-btn {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 12px;
+    font-size: 13px;
+  }
+
+  .sidebar-collapse-btn,
+  .sidebar-new-chat-btn {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+    border-radius: 8px;
+  }
+
+  .header-search-row {
+    margin-top: 8px;
+  }
+
+  .search-input {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 10px !important;
+
+    .ant-input {
+      font-size: 13px;
+    }
+
+    .search-toggle-button {
+      width: 24px;
+      height: 24px;
+      border-radius: 6px;
+    }
+  }
+
+  .toolbar-filter-select .ant-select-selector,
+  .batch-select-toggle {
+    min-height: 40px;
+  }
+}

package/src/components/sidebar/SidebarHeader.tsx

@@ -4,6 +4,7 @@ import { Button, Tooltip } from 'antd'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
 import { SidebarHeaderSearchActions } from './SidebarHeaderSearchActions'
 
@@ -14,6 +15,7 @@ interface SidebarHeaderProps {
   createButtonRef: React.RefObject<HTMLButtonElement | null>
   hasActiveSearchControls: boolean
   isBatchMode: boolean
+  isCompactLayout: boolean
   isCreatingSession: boolean
   isSidebarCollapsed: boolean
   searchQuery: string
@@ -27,6 +29,7 @@ interface SidebarHeaderProps {
   onBatchDelete: () => void
   onBatchStar: () => void
   onAdapterFilterChange: (filters: string[]) => void
+  onCloseSidebar?: () => void
   onCreateSession: () => void
   onSearchChange: (query: string) => void
   onSortOrderChange: (sort?: SidebarSessionSortOrder) => void
@@ -43,6 +46,7 @@ export function SidebarHeader({
   createButtonRef,
   hasActiveSearchControls,
   isBatchMode,
+  isCompactLayout,
   isCreatingSession,
   isSidebarCollapsed,
   searchQuery,
@@ -56,6 +60,7 @@ export function SidebarHeader({
   onBatchDelete,
   onBatchStar,
   onAdapterFilterChange,
+  onCloseSidebar,
   onCreateSession,
   onSearchChange,
   onSortOrderChange,
@@ -65,11 +70,12 @@ export function SidebarHeader({
   onToggleSidebarCollapsed
 }: SidebarHeaderProps) {
   const { t } = useTranslation()
+  const { isTouchInteraction } = useResponsiveLayout()
   const [isSearchActionsOpen, setIsSearchActionsOpen] = useState(false)
   const shouldShowSearchActions = !isSidebarCollapsed && (isSearchActionsOpen || isBatchMode)
 
   return (
-    <div className='sidebar-header'>
+    <div className={`sidebar-header ${isCompactLayout ? 'sidebar-header--compact' : ''}`.trim()}>
       <div className='header-top'>
         {!isSidebarCollapsed
           ? (
@@ -93,7 +99,12 @@ export function SidebarHeader({
             </Button>
           )
           : (
-            <Tooltip title={isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat')} placement='right'>
+            <Tooltip
+              title={isTouchInteraction
+                ? undefined
+                : (isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat'))}
+              placement='right'
+            >
               <Button
                 className={`sidebar-new-chat-btn ${isCreatingSession ? 'active' : ''}`}
                 type='text'
@@ -106,14 +117,25 @@ export function SidebarHeader({
               </Button>
             </Tooltip>
           )}
-        <Tooltip title={isSidebarCollapsed ? t('common.expand') : t('common.collapse')}>
+        <Tooltip
+          title={isTouchInteraction ? undefined : (
+            isCompactLayout ? t('common.close') : (
+              isSidebarCollapsed ? t('common.expand') : t('common.collapse')
+            )
+          )}
+        >
           <Button
             className='sidebar-collapse-btn'
             type='text'
-            onClick={onToggleSidebarCollapsed}
+            aria-label={isCompactLayout ? t('common.close') : (
+              isSidebarCollapsed ? t('common.expand') : t('common.collapse')
+            )}
+            onClick={isCompactLayout
+              ? onCloseSidebar
+              : onToggleSidebarCollapsed}
           >
             <span className='material-symbols-rounded'>
-              {isSidebarCollapsed ? 'dock_to_right' : 'left_panel_close'}
+              {isCompactLayout ? 'close' : isSidebarCollapsed ? 'dock_to_right' : 'left_panel_close'}
             </span>
           </Button>
         </Tooltip>

package/src/components/sidebar/SidebarHeaderBatchActions.tsx

@@ -1,6 +1,8 @@
 import { Button, Checkbox, Popconfirm, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+
 interface SidebarHeaderBatchActionsProps {
   isAllSelected: boolean
   selectedCount: number
@@ -21,10 +23,12 @@ export function SidebarHeaderBatchActions({
   onSelectAll
 }: SidebarHeaderBatchActionsProps) {
   const { t } = useTranslation()
+  const { isTouchInteraction } = useResponsiveLayout()
+  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
 
   return (
     <div className='header-batch-actions'>
-      <Tooltip title={isAllSelected ? t('common.deselectAll') : t('common.selectAll')}>
+      <Tooltip title={resolveTooltipTitle(isAllSelected ? t('common.deselectAll') : t('common.selectAll'))}>
         <label className='batch-select-toggle'>
           <Checkbox
             checked={isAllSelected}
@@ -33,7 +37,7 @@ export function SidebarHeaderBatchActions({
           />
         </label>
       </Tooltip>
-      <Tooltip title={t('common.star')}>
+      <Tooltip title={resolveTooltipTitle(t('common.star'))}>
         <Button
           className='sidebar-tool-btn is-icon-only'
           type='text'
@@ -50,7 +54,7 @@ export function SidebarHeaderBatchActions({
         okButtonProps={{ danger: false }}
         disabled={selectedCount === 0}
       >
-        <Tooltip title={t('common.archive')}>
+        <Tooltip title={resolveTooltipTitle(t('common.archive'))}>
           <Button
             className='sidebar-tool-btn is-icon-only'
             type='text'
@@ -67,7 +71,7 @@ export function SidebarHeaderBatchActions({
         okButtonProps={{ danger: true }}
         disabled={selectedCount === 0}
       >
-        <Tooltip title={t('common.delete')}>
+        <Tooltip title={resolveTooltipTitle(t('common.delete'))}>
           <Button
             className='sidebar-tool-btn is-icon-only is-danger'
             type='text'

package/src/components/sidebar/SidebarHeaderSearchActions.tsx

@@ -2,6 +2,7 @@ import { Button, Input, Tooltip } from 'antd'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
 import { SidebarHeaderBatchActions } from './SidebarHeaderBatchActions'
 import { SidebarHeaderSelectField } from './SidebarHeaderSelectField'
@@ -56,9 +57,11 @@ export function SidebarHeaderSearchActions({
   onToggleSearchActions
 }: SidebarHeaderSearchActionsProps) {
   const { t } = useTranslation()
+  const { isTouchInteraction } = useResponsiveLayout()
   const isAllSelected = totalCount > 0 && selectedCount === totalCount
   const toOptions = useMemo(() => (values: string[]) => values.map((value) => ({ label: value, value })), [])
   const filterSuffixIcon = <span className='material-symbols-rounded toolbar-filter-chevron'>expand_more</span>
+  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
   const sortOptions = useMemo(
     () => [
       { label: t('automation.sortDesc'), value: 'desc' },
@@ -78,7 +81,7 @@ export function SidebarHeaderSearchActions({
             onChange={(e) => onSearchChange(e.target.value)}
             prefix={<span className='material-symbols-rounded search-icon'>search</span>}
             suffix={
-              <Tooltip title={t('common.searchActions')}>
+              <Tooltip title={resolveTooltipTitle(t('common.searchActions'))}>
                 <button
                   type='button'
                   className={`search-toggle-button ${shouldShowSearchActions ? 'is-open' : ''} ${
@@ -102,7 +105,7 @@ export function SidebarHeaderSearchActions({
             <div className='header-toolbar-leading'>
               {isBatchMode
                 ? (
-                  <Tooltip title={t('common.cancelBatch')}>
+                  <Tooltip title={resolveTooltipTitle(t('common.cancelBatch'))}>
                     <Button
                       className='sidebar-tool-btn is-icon-only'
                       type='text'
@@ -112,7 +115,7 @@ export function SidebarHeaderSearchActions({
                   </Tooltip>
                 )
                 : (
-                  <Tooltip title={t('common.batchMode')}>
+                  <Tooltip title={resolveTooltipTitle(t('common.batchMode'))}>
                     <Button
                       className='sidebar-tool-btn is-icon-only'
                       type='text'

package/src/components/sidebar/SidebarUtilityFooter.tsx

@@ -0,0 +1,69 @@
+import { Button, Dropdown } from 'antd'
+import type { MenuProps } from 'antd'
+import { useAtom } from 'jotai'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+
+import { themeAtom } from '#~/store'
+import { buildLanguageItems, buildThemeItems } from '../nav-rail-items'
+
+export function SidebarUtilityFooter() {
+  const { t, i18n } = useTranslation()
+  const [themeMode, setThemeMode] = useAtom(themeAtom)
+  const navigate = useNavigate()
+
+  const languageItems: MenuProps['items'] = useMemo(() =>
+    buildLanguageItems({
+      currentLanguage: i18n.language,
+      onChangeLanguage: (language) => i18n.changeLanguage(language)
+    }), [i18n.language])
+
+  const themeItems: MenuProps['items'] = useMemo(() =>
+    buildThemeItems({
+      setThemeMode,
+      t,
+      themeMode
+    }), [setThemeMode, t, themeMode])
+
+  return (
+    <div className='sidebar-utility-footer'>
+      <Dropdown menu={{ items: themeItems, triggerSubMenuAction: 'click' }} placement='topLeft' trigger={['click']}>
+        <Button
+          type='text'
+          className='sidebar-utility-footer__action'
+          icon={
+            <span className='material-symbols-rounded'>
+              {themeMode === 'light' ? 'light_mode' : themeMode === 'dark' ? 'dark_mode' : 'desktop_windows'}
+            </span>
+          }
+        >
+          <span>{t('common.theme')}</span>
+        </Button>
+      </Dropdown>
+
+      <Dropdown
+        menu={{ items: languageItems, triggerSubMenuAction: 'click' }}
+        placement='topLeft'
+        trigger={['click']}
+      >
+        <Button
+          type='text'
+          className='sidebar-utility-footer__action'
+          icon={<span className='material-symbols-rounded'>language</span>}
+        >
+          <span>{t('common.language')}</span>
+        </Button>
+      </Dropdown>
+
+      <Button
+        type='text'
+        className='sidebar-utility-footer__action'
+        icon={<span className='material-symbols-rounded'>settings</span>}
+        onClick={() => void navigate('/config')}
+      >
+        <span>{t('common.settings')}</span>
+      </Button>
+    </div>
+  )
+}