@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/ArchiveView.tsx

@@ -6,16 +6,22 @@ import dayjs from 'dayjs'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
+
+import { PageShell } from '#~/components/layout/PageShell'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+
 import { deleteSession, getApiErrorMessage, listSessions, updateSession } from '../api'
 
 export function ArchiveView() {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const { data: sessionsRes, mutate } = useSWR<{ sessions: Session[] }>(
     '/api/sessions/archived',
     async () => listSessions('archived')
   )
   const sessions: Session[] = sessionsRes?.sessions ?? []
+  const isCompactView = isCompactLayout || isTouchInteraction
 
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
@@ -99,109 +105,105 @@ export function ArchiveView() {
   const isAllSelected = filteredSessions.length > 0 && selectedIds.size === filteredSessions.length
 
   return (
-    <div className='archive-view'>
-      <div className='archive-view__header'>
-        <Space size={8} className='archive-view__title'>
-          <h2 className='archive-view__title-text'>{t('common.archivedSessions')}</h2>
-        </Space>
-
-        <Space>
-          {isBatchMode
-            ? (
-              <>
-                <span className='archive-view__batch-info'>
-                  {t('common.selectedCount', { count: selectedIds.size })}
-                </span>
-                <Tooltip title={t('common.cancel')}>
-                  <Button
-                    icon={
-                      <span className='material-symbols-rounded archive-view__action-icon'>
-                        close
-                      </span>
-                    }
-                    onClick={() => {
-                      setIsBatchMode(false)
-                      setSelectedIds(new Set())
-                    }}
-                    className='archive-view__icon-button'
-                  />
-                </Tooltip>
-                <Tooltip title={t('common.batchRestore')}>
-                  <Button
-                    type='primary'
-                    icon={
-                      <span className='material-symbols-rounded archive-view__action-icon'>
-                        unarchive
-                      </span>
-                    }
-                    onClick={() => {
-                      void handleBatchRestore()
-                    }}
-                    disabled={selectedIds.size === 0}
-                    className='archive-view__icon-button'
-                  />
-                </Tooltip>
-                <Popconfirm
-                  title={t('common.deleteConfirm', { count: selectedIds.size })}
-                  onConfirm={() => {
-                    void handleBatchDelete()
-                  }}
-                  disabled={selectedIds.size === 0}
-                >
-                  <Tooltip title={t('common.batchDelete')}>
+    <PageShell
+      className={`archive-view ${isCompactView ? 'archive-view--compact' : ''}`}
+      header={
+        <div className='archive-view__toolbar'>
+          {isBatchMode && (
+            <div className='archive-view__select-all'>
+              <Tooltip title={isAllSelected ? t('common.deselectAll') : t('common.selectAll')}>
+                <Checkbox
+                  checked={isAllSelected}
+                  indeterminate={selectedIds.size > 0 && selectedIds.size < filteredSessions.length}
+                  onChange={(e) => handleSelectAll(e.target.checked)}
+                />
+              </Tooltip>
+            </div>
+          )}
+          <Input
+            prefix={<span className='material-symbols-rounded archive-view__search-icon'>search</span>}
+            placeholder={t('common.search')}
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            allowClear
+            className='archive-view__search-input'
+          />
+          <Space size={6} className='archive-view__toolbar-actions'>
+            {isBatchMode
+              ? (
+                <>
+                  <span className='archive-view__batch-info'>
+                    {t('common.selectedCount', { count: selectedIds.size })}
+                  </span>
+                  <Tooltip title={t('common.cancel')}>
+                    <Button
+                      icon={
+                        <span className='material-symbols-rounded archive-view__action-icon'>
+                          close
+                        </span>
+                      }
+                      onClick={() => {
+                        setIsBatchMode(false)
+                        setSelectedIds(new Set())
+                      }}
+                      className='archive-view__icon-button'
+                    />
+                  </Tooltip>
+                  <Tooltip title={t('common.batchRestore')}>
                     <Button
-                      danger
+                      type='primary'
                       icon={
                         <span className='material-symbols-rounded archive-view__action-icon'>
-                          delete_sweep
+                          unarchive
                         </span>
                       }
+                      onClick={() => {
+                        void handleBatchRestore()
+                      }}
                       disabled={selectedIds.size === 0}
                       className='archive-view__icon-button'
                     />
                   </Tooltip>
-                </Popconfirm>
-              </>
-            )
-            : (
-              <Tooltip title={t('common.batchMode')}>
-                <Button
-                  icon={
-                    <span className='material-symbols-rounded archive-view__action-icon'>
-                      checklist
-                    </span>
-                  }
-                  onClick={() => setIsBatchMode(true)}
-                  disabled={sessions.length === 0}
-                  className='archive-view__icon-button'
-                />
-              </Tooltip>
-            )}
-        </Space>
-      </div>
-
-      <div className='archive-view__filter-bar'>
-        {isBatchMode && (
-          <div className='archive-view__select-all'>
-            <Tooltip title={isAllSelected ? t('common.deselectAll') : t('common.selectAll')}>
-              <Checkbox
-                checked={isAllSelected}
-                indeterminate={selectedIds.size > 0 && selectedIds.size < filteredSessions.length}
-                onChange={(e) => handleSelectAll(e.target.checked)}
-              />
-            </Tooltip>
-          </div>
-        )}
-        <Input
-          prefix={<span className='material-symbols-rounded archive-view__search-icon'>search</span>}
-          placeholder={t('common.search')}
-          value={searchQuery}
-          onChange={e => setSearchQuery(e.target.value)}
-          allowClear
-          className='archive-view__search-input'
-        />
-      </div>
-
+                  <Popconfirm
+                    title={t('common.deleteConfirm', { count: selectedIds.size })}
+                    onConfirm={() => {
+                      void handleBatchDelete()
+                    }}
+                    disabled={selectedIds.size === 0}
+                  >
+                    <Tooltip title={t('common.batchDelete')}>
+                      <Button
+                        danger
+                        icon={
+                          <span className='material-symbols-rounded archive-view__action-icon'>
+                            delete_sweep
+                          </span>
+                        }
+                        disabled={selectedIds.size === 0}
+                        className='archive-view__icon-button'
+                      />
+                    </Tooltip>
+                  </Popconfirm>
+                </>
+              )
+              : (
+                <Tooltip title={t('common.batchMode')}>
+                  <Button
+                    icon={
+                      <span className='material-symbols-rounded archive-view__action-icon'>
+                        checklist
+                      </span>
+                    }
+                    onClick={() => setIsBatchMode(true)}
+                    disabled={sessions.length === 0}
+                    className='archive-view__icon-button'
+                  />
+                </Tooltip>
+              )}
+          </Space>
+        </div>
+      }
+    >
       <div className='archive-view__list'>
         {filteredSessions.length === 0
           ? (
@@ -214,86 +216,98 @@ export function ArchiveView() {
             <List
               itemLayout='horizontal'
               dataSource={filteredSessions}
-              renderItem={(session) => (
-                <List.Item
-                  className={[
-                    'archive-view__item',
-                    selectedIds.has(session.id) ? 'archive-view__item--selected' : '',
-                    isBatchMode ? 'archive-view__item--batch' : ''
-                  ].filter(Boolean).join(' ')}
-                  onClick={() => isBatchMode && handleToggleSelect(session.id)}
-                >
-                  <div className='archive-view__item-row'>
-                    {isBatchMode && (
-                      <div className='archive-view__item-select'>
-                        <Checkbox
-                          checked={selectedIds.has(session.id)}
-                          onChange={() => handleToggleSelect(session.id)}
-                          onClick={(e) => e.stopPropagation()}
-                        />
-                      </div>
-                    )}
-                    <span className='material-symbols-rounded archive-view__item-icon'>
-                      chat_bubble
-                    </span>
-                    <div className='archive-view__item-main'>
-                      <span className='archive-view__item-title'>
-                        {(session.title != null && session.title !== '')
-                          ? session.title
-                          : (session.lastMessage != null && session.lastMessage !== '')
-                          ? session.lastMessage
-                          : t('common.newChat')}
-                      </span>
-                      {session.tags && session.tags.length > 0 && (
-                        <div className='archive-view__item-tags'>
-                          {session.tags.map((tag: string) => (
-                            <Tag key={tag} className='archive-view__item-tag'>{tag}</Tag>
-                          ))}
+              renderItem={(session) => {
+                const displayTitle = (session.title != null && session.title !== '')
+                  ? session.title
+                  : (session.lastMessage != null && session.lastMessage !== '')
+                  ? session.lastMessage
+                  : t('common.newChat')
+                const sessionTags = session.tags ?? []
+                const visibleTags = isCompactView ? sessionTags.slice(0, 1) : sessionTags
+                const hiddenTagCount = Math.max(sessionTags.length - visibleTags.length, 0)
+
+                return (
+                  <List.Item
+                    className={[
+                      'archive-view__item',
+                      selectedIds.has(session.id) ? 'archive-view__item--selected' : '',
+                      isBatchMode ? 'archive-view__item--batch' : ''
+                    ].filter(Boolean).join(' ')}
+                    onClick={() => isBatchMode && handleToggleSelect(session.id)}
+                  >
+                    <div className='archive-view__item-row'>
+                      {isBatchMode && (
+                        <div className='archive-view__item-select'>
+                          <Checkbox
+                            checked={selectedIds.has(session.id)}
+                            onChange={() => handleToggleSelect(session.id)}
+                            onClick={(e) => e.stopPropagation()}
+                          />
                         </div>
                       )}
-                      <span className='archive-view__item-time'>
-                        {dayjs(session.createdAt).format('YYYY-MM-DD HH:mm')}
+                      <span className='material-symbols-rounded archive-view__item-icon'>
+                        chat_bubble
                       </span>
-                    </div>
+                      <div className='archive-view__item-main'>
+                        <span className='archive-view__item-title'>{displayTitle}</span>
+                        <div className='archive-view__item-meta'>
+                          {visibleTags.length > 0 && (
+                            <div className='archive-view__item-tags'>
+                              {visibleTags.map((tag: string) => (
+                                <Tag key={tag} className='archive-view__item-tag'>{tag}</Tag>
+                              ))}
+                              {hiddenTagCount > 0 && (
+                                <span className='archive-view__item-tag-count'>+{hiddenTagCount}</span>
+                              )}
+                            </div>
+                          )}
+                          <span className='archive-view__item-time'>
+                            {dayjs(session.createdAt).format('YYYY-MM-DD HH:mm')}
+                          </span>
+                        </div>
+                      </div>
 
-                    {!isBatchMode && (
-                      <div className='archive-view__item-actions'>
-                        <Tooltip title={t('common.restore')}>
-                          <Button
-                            type='text'
-                            size='small'
-                            className='archive-view__item-action-button'
-                            icon={<span className='material-symbols-rounded archive-view__action-icon'>unarchive</span>}
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              void handleRestore(session.id)
+                      {!isBatchMode && (
+                        <div className='archive-view__item-actions'>
+                          <Tooltip title={t('common.restore')}>
+                            <Button
+                              type='text'
+                              size='small'
+                              className='archive-view__item-action-button'
+                              icon={
+                                <span className='material-symbols-rounded archive-view__action-icon'>unarchive</span>
+                              }
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                void handleRestore(session.id)
+                              }}
+                            />
+                          </Tooltip>
+                          <Popconfirm
+                            title={t('common.deleteSessionConfirm')}
+                            onConfirm={(e) => {
+                              e?.stopPropagation()
+                              void handleDelete(session.id)
                             }}
-                          />
-                        </Tooltip>
-                        <Popconfirm
-                          title={t('common.deleteSessionConfirm')}
-                          onConfirm={(e) => {
-                            e?.stopPropagation()
-                            void handleDelete(session.id)
-                          }}
-                        >
-                          <Button
-                            type='text'
-                            size='small'
-                            danger
-                            className='archive-view__item-action-button'
-                            icon={<span className='material-symbols-rounded archive-view__action-icon'>delete</span>}
-                            onClick={(e) => e.stopPropagation()}
-                          />
-                        </Popconfirm>
-                      </div>
-                    )}
-                  </div>
-                </List.Item>
-              )}
+                          >
+                            <Button
+                              type='text'
+                              size='small'
+                              danger
+                              className='archive-view__item-action-button'
+                              icon={<span className='material-symbols-rounded archive-view__action-icon'>delete</span>}
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </Popconfirm>
+                        </div>
+                      )}
+                    </div>
+                  </List.Item>
+                )
+              }}
             />
           )}
       </div>
-    </div>
+    </PageShell>
   )
 }

package/src/components/CodeBlock.scss

@@ -44,6 +44,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 24px;
+      min-width: 24px;
+      height: 24px;
       padding: 4px;
       border: none;
       background: transparent;
@@ -59,6 +62,8 @@
 
       .material-symbols-rounded {
         font-size: 16px;
+        font-family: 'Material Symbols Rounded';
+        line-height: 1;
       }
     }
   }