@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/components/ArchiveView.scss

@@ -1,257 +0,0 @@
-.archive-view {
-  .page-shell__header {
-    gap: 6px;
-  }
-}
-
-.archive-view__batch-info {
-  color: var(--sub-text-color);
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.archive-view__icon-button {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-.archive-view__action-icon {
-  font-size: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.archive-view__toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.archive-view__toolbar-actions {
-  flex-shrink: 0;
-}
-
-.archive-view__select-all {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background: var(--bg-color);
-}
-
-.archive-view__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;
-  }
-}
-
-.archive-view__search-icon {
-  font-size: 14px;
-  color: var(--sub-text-color);
-}
-
-.archive-view__list {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  margin: 0 var(--subpage-content-card-gap) var(--subpage-content-card-gap);
-  padding: 0 12px 12px;
-  border-radius: var(--subpage-content-card-radius);
-  background: var(--subpage-content-card-bg);
-
-  .ant-list-items {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .ant-empty {
-    margin-top: 64px;
-  }
-}
-
-.archive-view__item {
-  padding: 0 !important;
-  border-block-end: none !important;
-  background: transparent;
-  cursor: default;
-}
-
-.archive-view__item--selected .archive-view__item-row {
-  border-color: rgba(37, 99, 235, .32);
-  background: var(--primary-soft-bg);
-}
-
-.archive-view__item--batch .archive-view__item-row {
-  cursor: pointer;
-}
-
-.archive-view__item-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 6px;
-  padding: 8px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: var(--bg-color);
-  transition: border-color .2s ease, background-color .2s ease;
-}
-
-.archive-view__item-row:hover {
-  border-color: var(--sidebar-hover-bg, #e5e5e5);
-  background: var(--sidebar-hover-bg, #e5e5e5);
-}
-
-.archive-view__item-select {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.archive-view__item-icon {
-  font-size: 16px;
-  color: var(--sub-text-color);
-  flex-shrink: 0;
-}
-
-.archive-view__item-main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-}
-
-.archive-view__item-meta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  min-width: 0;
-  flex-wrap: wrap;
-}
-
-.archive-view__item-title {
-  font-size: 12px;
-  line-height: 1.35;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.archive-view__item-tags {
-  display: flex;
-  gap: 3px;
-  flex-shrink: 0;
-}
-
-.archive-view__item-tag {
-  font-size: 9px;
-  line-height: 13px;
-  padding-inline: 3px;
-  border-radius: 2px;
-  margin: 0;
-}
-
-.archive-view__item-tag-count {
-  font-size: 10px;
-  line-height: 1;
-  color: var(--sub-text-color);
-}
-
-.archive-view__item-time {
-  font-size: 10px;
-  line-height: 1;
-  color: var(--sub-text-color);
-  flex-shrink: 0;
-  margin-left: auto;
-  max-width: 64px;
-  overflow: hidden;
-  transition: opacity .2s ease, max-width .2s ease, margin-left .2s ease;
-}
-
-.archive-view__item-actions {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-  max-width: 0;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity .2s ease, max-width .24s ease;
-}
-
-.archive-view__item-row:hover .archive-view__item-actions {
-  max-width: 72px;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.archive-view__item-row:hover .archive-view__item-time {
-  opacity: 0;
-  max-width: 0;
-  margin-left: 0;
-}
-
-.archive-view__item-action-button {
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-@media (max-width: 960px) {
-  .archive-view__toolbar {
-    gap: 6px;
-  }
-
-  .archive-view__toolbar-actions {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .archive-view__item-actions {
-    max-width: 48px;
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .archive-view__item-row:hover .archive-view__item-time {
-    opacity: 1;
-    max-width: none;
-    margin-left: 0;
-  }
-
-  .archive-view__item-action-button {
-    width: 24px;
-    min-width: 24px;
-    height: 24px;
-  }
-}

package/src/components/ArchiveView.tsx

@@ -1,313 +0,0 @@
-import './ArchiveView.scss'
-
-import type { Session } from '@vibe-forge/core'
-import { App, Button, Checkbox, Empty, Input, List, Popconfirm, Space, Tag, Tooltip } from 'antd'
-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())
-  const [isBatchMode, setIsBatchMode] = useState(false)
-
-  const filteredSessions = useMemo(() => {
-    if (searchQuery.trim() === '') return sessions
-    const query = searchQuery.toLowerCase()
-    return sessions.filter((s: Session): boolean => {
-      const title = s.title ?? ''
-      const lastMsg = s.lastMessage ?? ''
-      const lastUserMsg = s.lastUserMessage ?? ''
-      const tags = (s.tags ?? []).join(' ')
-      const searchStr = `${title} ${s.id} ${lastMsg} ${lastUserMsg} ${tags}`.toLowerCase()
-      return searchStr.includes(query)
-    })
-  }, [sessions, searchQuery])
-
-  const handleRestore = async (id: string) => {
-    try {
-      await updateSession(id, { isArchived: false })
-      void message.success(t('common.restoreSuccess', 'Restored successfully'))
-      void mutate()
-    } catch (err) {
-      void message.error(getApiErrorMessage(err, t('common.restoreFailed', 'Failed to restore')))
-    }
-  }
-
-  const handleDelete = async (id: string) => {
-    try {
-      await deleteSession(id)
-      void message.success(t('common.deleteSuccess', 'Deleted successfully'))
-      void mutate()
-    } catch (err) {
-      void message.error(getApiErrorMessage(err, t('common.deleteFailed', 'Failed to delete')))
-    }
-  }
-
-  const handleToggleSelect = (id: string) => {
-    const next = new Set(selectedIds)
-    if (next.has(id)) {
-      next.delete(id)
-    } else {
-      next.add(id)
-    }
-    setSelectedIds(next)
-  }
-
-  const handleSelectAll = (selected: boolean) => {
-    if (selected) {
-      setSelectedIds(new Set(filteredSessions.map(s => s.id)))
-    } else {
-      setSelectedIds(new Set())
-    }
-  }
-
-  const handleBatchRestore = async () => {
-    try {
-      await Promise.all(Array.from(selectedIds).map(async (id) => updateSession(id, { isArchived: false })))
-      void message.success(t('common.batchRestoreSuccess', 'Batch restored successfully'))
-      setSelectedIds(new Set())
-      setIsBatchMode(false)
-      void mutate()
-    } catch (err) {
-      void message.error(getApiErrorMessage(err, t('common.batchRestoreFailed', 'Failed to restore some sessions')))
-    }
-  }
-
-  const handleBatchDelete = async () => {
-    try {
-      await Promise.all(Array.from(selectedIds).map(async (id) => deleteSession(id)))
-      void message.success(t('common.batchDeleteSuccess', 'Batch deleted successfully'))
-      setSelectedIds(new Set())
-      setIsBatchMode(false)
-      void mutate()
-    } catch (err) {
-      void message.error(getApiErrorMessage(err, t('common.batchDeleteFailed', 'Failed to delete some sessions')))
-    }
-  }
-
-  const isAllSelected = filteredSessions.length > 0 && selectedIds.size === filteredSessions.length
-
-  return (
-    <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
-                      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')}>
-                      <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
-          ? (
-            <Empty
-              image={Empty.PRESENTED_IMAGE_SIMPLE}
-              description={searchQuery ? t('common.noSessions') : t('common.noArchivedSessions')}
-            />
-          )
-          : (
-            <List
-              itemLayout='horizontal'
-              dataSource={filteredSessions}
-              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='material-symbols-rounded archive-view__item-icon'>
-                        chat_bubble
-                      </span>
-                      <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)
-                              }}
-                            />
-                          </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>
-                )
-              }}
-            />
-          )}
-      </div>
-    </PageShell>
-  )
-}

package/src/components/CodeBlock.scss

@@ -1,92 +0,0 @@
-.code-block-wrapper {
-  --cb-border: #e5e7eb;
-  --cb-bg: #ffffff;
-  --cb-header-bg: #f6f8fa;
-  --cb-hover-bg: rgba(0, 0, 0, .05);
-  --cb-text: #000000;
-  --cb-sub-text: #6b7280;
-
-  width: 100%;
-  margin: 0;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid var(--cb-border);
-  background-color: var(--cb-bg);
-  display: flex;
-  flex-direction: column;
-
-  .code-block-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 12px;
-    background-color: var(--cb-header-bg);
-    border-bottom: 1px solid var(--cb-border);
-    user-select: none;
-
-    .code-lang-container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .code-lang {
-        font-size: 11px;
-        color: var(--cb-sub-text);
-        font-family:
-          'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-        text-transform: uppercase;
-        font-weight: 600;
-        letter-spacing: .5px;
-      }
-    }
-
-    .copy-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      min-width: 24px;
-      height: 24px;
-      padding: 4px;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      color: var(--cb-sub-text);
-      border-radius: 4px;
-      transition: all .2s ease;
-
-      &:hover {
-        background-color: var(--cb-hover-bg);
-        color: var(--cb-text);
-      }
-
-      .material-symbols-rounded {
-        font-size: 16px;
-        font-family: 'Material Symbols Rounded';
-        line-height: 1;
-      }
-    }
-  }
-
-  pre.shiki {
-    margin: 0;
-    padding: 12px;
-    overflow-x: auto;
-    font-size: 13px;
-    line-height: 1.6;
-    width: 100%;
-    box-sizing: border-box;
-    background-color: transparent !important;
-  }
-}
-
-html.dark {
-  .code-block-wrapper {
-    --cb-border: #30363d;
-    --cb-bg: #0d1117;
-    --cb-header-bg: #161b22;
-    --cb-hover-bg: rgba(255, 255, 255, .1);
-    --cb-text: #e5e7eb;
-    --cb-sub-text: #8b949e;
-  }
-}