@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

package/src/components/MarkdownContent.tsx

@@ -1,50 +0,0 @@
-import { CodeBlock } from '#~/components/CodeBlock'
-import React from 'react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-
-export function MarkdownContent({
-  content
-}: {
-  content: string
-}) {
-  return (
-    <div className='markdown-body'>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          pre({ children }) {
-            return <>{children}</>
-          },
-          table({ children, ...props }: any) {
-            return (
-              <div className='markdown-table-wrapper'>
-                <table {...props}>{children}</table>
-              </div>
-            )
-          },
-          code({ inline, className, children, ...props }: any) {
-            const langClass = typeof className === 'string' ? className : ''
-            const match = /language-(\w+)/.exec(langClass)
-            const isInline = inline === true
-            const codeContent = String(children).replace(/\n$/, '')
-            return !isInline && match != null
-              ? (
-                <CodeBlock
-                  code={codeContent}
-                  lang={match[1]}
-                />
-              )
-              : (
-                <code className={langClass} {...props}>
-                  {children}
-                </code>
-              )
-          }
-        }}
-      >
-        {content}
-      </ReactMarkdown>
-    </div>
-  )
-}

package/src/components/NavRail.scss

@@ -1,317 +0,0 @@
-.nav-rail {
-  width: 48px;
-  height: 100%;
-  background-color: var(--sub-sub-bg-color);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 8px 0;
-  flex-shrink: 0;
-  z-index: 20;
-
-  .nav-rail-top,
-  .nav-rail-bottom {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .nav-item {
-    width: 34px;
-    height: 34px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 7px;
-    color: var(--sub-sub-text-color, #6b7280);
-    transition: all .2s;
-
-    &:hover {
-      background-color: var(--nav-hover-bg, #f3f4f6);
-      color: var(--nav-hover-text, #111827);
-    }
-
-    &.active {
-      background-color: var(--nav-active-bg, #eff6ff);
-      color: var(--nav-active-text, #2563eb);
-
-      .material-symbols-rounded {
-        font-variation-settings: 'FILL' 1;
-      }
-    }
-
-    .material-symbols-rounded {
-      font-size: 20px;
-    }
-  }
-}
-
-.nav-rail--compact {
-  width: 100%;
-  height: auto;
-  padding: 8px max(8px, env(safe-area-inset-right))
-    calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
-  border-top: 1px solid var(--border-color);
-  background: color-mix(
-    in srgb,
-    var(--sub-sub-bg-color) 96%,
-    var(--bg-color) 4%
-  );
-  z-index: 20;
-
-  .nav-rail-compact-list {
-    display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-    align-items: center;
-    gap: 4px;
-    width: 100%;
-  }
-
-  .nav-item--compact {
-    width: 100%;
-    min-width: 0;
-    height: 44px;
-    border-radius: 8px;
-
-    .material-symbols-rounded {
-      font-size: 20px;
-    }
-  }
-}
-
-.nav-rail-compact-sheet-backdrop {
-  position: fixed;
-  inset: 0;
-  border: 0;
-  background: rgba(15, 23, 42, .28);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity .2s ease, visibility 0s linear .2s;
-  z-index: 68;
-}
-
-.nav-rail-compact-sheet-backdrop.is-open {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transition-delay: 0s;
-}
-
-.nav-rail-compact-sheet {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
-  border-top: 1px solid var(--border-color);
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  background: var(--bg-color);
-  box-shadow: none;
-  transform: translateY(100%);
-  visibility: hidden;
-  transition:
-    transform .24s cubic-bezier(.4, 0, .2, 1),
-    visibility 0s linear .24s;
-  z-index: 69;
-}
-
-.nav-rail-compact-sheet.is-open {
-  transform: translateY(0);
-  visibility: visible;
-  transition-delay: 0s;
-}
-
-.nav-rail-compact-sheet__handle {
-  width: 40px;
-  height: 4px;
-  margin: 0 auto;
-  border-radius: 999px;
-  background: var(--border-color);
-}
-
-.nav-rail-compact-sheet__section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.nav-rail-compact-sheet__section-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--sub-text-color);
-}
-
-.nav-rail-compact-sheet__section-title-icon {
-  font-size: 14px;
-  line-height: 1;
-}
-
-.nav-rail-compact-sheet__actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.nav-rail-compact-sheet__action,
-.nav-rail-compact-sheet__chip {
-  min-width: 0;
-  min-height: 40px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: var(--sub-bg-color);
-  color: var(--text-color);
-  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
-}
-
-.nav-rail-compact-sheet__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 0 10px;
-
-  .material-symbols-rounded {
-    font-size: 18px;
-    line-height: 1;
-  }
-
-  > span:last-child {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 12px;
-  }
-}
-
-.nav-rail-compact-sheet__chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.nav-rail-compact-sheet__segmented {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0;
-  width: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--sub-bg-color);
-}
-
-.nav-rail-compact-sheet__chip {
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.nav-rail-compact-sheet__segment {
-  min-width: 0;
-  min-height: 44px;
-  padding: 8px 6px;
-  border: 0;
-  border-right: 1px solid var(--border-color);
-  background: transparent;
-  color: var(--text-color);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  transition: background-color .2s ease, color .2s ease;
-
-  &:last-child {
-    border-right: 0;
-  }
-
-  > span:last-child {
-    min-width: 0;
-    font-size: 11px;
-    line-height: 1.2;
-    text-align: center;
-  }
-}
-
-.nav-rail-compact-sheet__segment-icon {
-  font-size: 18px;
-  line-height: 1;
-}
-
-.nav-rail-compact-sheet__select-shell {
-  min-width: 0;
-  min-height: 44px;
-  padding: 0 12px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: var(--sub-bg-color);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.nav-rail-compact-sheet__select-icon,
-.nav-rail-compact-sheet__select-chevron {
-  font-size: 18px;
-  line-height: 1;
-  color: var(--sub-text-color);
-  flex-shrink: 0;
-}
-
-.nav-rail-compact-sheet__select {
-  flex: 1;
-  min-width: 0;
-  height: 44px;
-  border: 0;
-  background: transparent;
-  color: var(--text-color);
-  display: block;
-  font-size: 14px;
-  line-height: 44px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-.nav-rail-compact-sheet__select-chevron {
-  pointer-events: none;
-}
-
-.nav-rail-compact-sheet__action.is-active,
-.nav-rail-compact-sheet__chip.is-active,
-.nav-rail-compact-sheet__segment.is-active {
-  border-color: var(--nav-active-text, #2563eb);
-  background: var(--nav-active-bg, #eff6ff);
-  color: var(--nav-active-text, #2563eb);
-}
-
-.nav-menu-icon {
-  font-size: 16px;
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-
-  &.active {
-    color: var(--primary-color, #2563eb);
-  }
-}
-
-.nav-menu-icon-placeholder {
-  width: 16px;
-}
-
-html.dark .nav-rail {
-  --nav-hover-bg: #1a1a1a;
-  --nav-hover-text: #ffffff;
-  --nav-active-bg: #111b26;
-  --nav-active-text: #3b82f6;
-}

package/src/components/NavRail.tsx

@@ -1,198 +0,0 @@
-import './NavRail.scss'
-
-import { Button, Dropdown, Tooltip } from 'antd'
-import type { MenuProps } from 'antd'
-import { useAtom } from 'jotai'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useLocation, useNavigate } from 'react-router-dom'
-
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { themeAtom } from '../store'
-import { NavRailCompact } from './NavRailCompact'
-import { useNavRailAccountActions } from './nav-rail-account-actions'
-import {
-  buildCompactLanguageActions,
-  buildCompactMoreActions,
-  buildCompactThemeActions
-} from './nav-rail-compact-config'
-import { buildLanguageItems, buildNavItems, buildThemeItems } from './nav-rail-items'
-
-export function NavRail({
-  ariaHidden = false,
-  isCompactLayout = false,
-  onOpenSidebar,
-  showSidebar = false
-}: {
-  ariaHidden?: boolean
-  isCompactLayout?: boolean
-  onOpenSidebar?: () => void
-  showSidebar?: boolean
-}) {
-  const { t, i18n } = useTranslation()
-  const [themeMode, setThemeMode] = useAtom(themeAtom)
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { isTouchInteraction } = useResponsiveLayout()
-  const { accountItems, accountMenuLabel, compactAccountActions, showAccountMenu } = useNavRailAccountActions()
-
-  const currentPath = location.pathname
-  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
-
-  const langItems: MenuProps['items'] = React.useMemo(() =>
-    buildLanguageItems({
-      currentLanguage: i18n.language,
-      onChangeLanguage: (language) => i18n.changeLanguage(language)
-    }), [i18n.language])
-
-  const themeItems: MenuProps['items'] = React.useMemo(() =>
-    buildThemeItems({
-      setThemeMode,
-      t,
-      themeMode
-    }), [setThemeMode, t, themeMode])
-
-  const navItems = React.useMemo(() => buildNavItems({ currentPath, t }), [currentPath, t])
-
-  const compactMoreActions = React.useMemo(() => [
-    ...buildCompactMoreActions({
-      currentPath,
-      navigate,
-      onOpenSidebar,
-      showSidebar,
-      t
-    }),
-    ...compactAccountActions
-  ], [
-    compactAccountActions,
-    currentPath,
-    navigate,
-    onOpenSidebar,
-    showSidebar,
-    t
-  ])
-
-  const compactThemeActions = React.useMemo(() =>
-    buildCompactThemeActions({
-      setThemeMode,
-      t,
-      themeMode
-    }), [setThemeMode, t, themeMode])
-
-  const compactLanguageActions = React.useMemo(() =>
-    buildCompactLanguageActions({
-      currentLanguage: i18n.language,
-      onChangeLanguage: (language) => {
-        void i18n.changeLanguage(language)
-      }
-    }), [i18n.language])
-
-  const handleNavClick = (_key: string, path: string) => {
-    void navigate(path)
-  }
-
-  if (isCompactLayout) {
-    return (
-      <NavRailCompact
-        ariaHidden={ariaHidden}
-        currentPath={currentPath}
-        languageActions={compactLanguageActions}
-        languageLabel={t('common.language')}
-        moreLabel={t('common.moreActions')}
-        moreSheetActions={compactMoreActions}
-        navItems={navItems}
-        themeActions={compactThemeActions}
-        themeLabel={t('common.theme')}
-        onNavClick={handleNavClick}
-      />
-    )
-  }
-
-  return (
-    <div className='nav-rail' aria-hidden={ariaHidden || undefined}>
-      <div className='nav-rail-top'>
-        {navItems.map(item => (
-          <Tooltip key={item.key} title={resolveTooltipTitle(item.label)} placement='right'>
-            <span>
-              <Button
-                type='text'
-                className={`nav-item ${item.active ? 'active' : ''}`}
-                onClick={() => handleNavClick(item.key, item.path)}
-                icon={<span className='material-symbols-rounded'>{item.icon}</span>}
-              />
-            </span>
-          </Tooltip>
-        ))}
-      </div>
-      <div className='nav-rail-bottom'>
-        <Tooltip title={resolveTooltipTitle(t('common.theme'))} placement='right'>
-          <span>
-            <Dropdown
-              menu={{
-                items: themeItems
-              }}
-              placement='topRight'
-              trigger={['click']}
-            >
-              <Button
-                type='text'
-                className='nav-item'
-                icon={
-                  <span className='material-symbols-rounded'>
-                    {themeMode === 'light' ? 'light_mode' : themeMode === 'dark' ? 'dark_mode' : 'desktop_windows'}
-                  </span>
-                }
-              />
-            </Dropdown>
-          </span>
-        </Tooltip>
-        <Tooltip title={resolveTooltipTitle(t('common.language'))} placement='right'>
-          <span>
-            <Dropdown
-              menu={{
-                items: langItems
-              }}
-              placement='topRight'
-              trigger={['click']}
-            >
-              <Button
-                type='text'
-                className='nav-item'
-                icon={<span className='material-symbols-rounded'>language</span>}
-              />
-            </Dropdown>
-          </span>
-        </Tooltip>
-        {showAccountMenu && (
-          <Tooltip title={resolveTooltipTitle(accountMenuLabel)} placement='right'>
-            <span>
-              <Dropdown
-                menu={{
-                  items: accountItems
-                }}
-                placement='topRight'
-                trigger={['click']}
-              >
-                <Button
-                  type='text'
-                  className='nav-item'
-                  icon={<span className='material-symbols-rounded'>account_circle</span>}
-                />
-              </Dropdown>
-            </span>
-          </Tooltip>
-        )}
-        <Tooltip title={resolveTooltipTitle(t('common.settings'))} placement='right'>
-          <span>
-            <Button
-              type='text'
-              className={`nav-item ${currentPath === '/config' ? 'active' : ''}`}
-              icon={<span className='material-symbols-rounded'>settings</span>}
-              onClick={() => void navigate('/config')}
-            />
-          </span>
-        </Tooltip>
-      </div>
-    </div>
-  )
-}

package/src/components/NavRailCompact.tsx

@@ -1,107 +0,0 @@
-import { Button } from 'antd'
-import { useEffect, useState } from 'react'
-
-import { NavRailCompactMoreSheet } from './NavRailCompactMoreSheet'
-
-export interface NavRailCompactItem {
-  active: boolean
-  icon: string
-  key: string
-  label: string
-  path: string
-}
-
-export interface NavRailCompactMoreAction {
-  active?: boolean
-  icon: string
-  key: string
-  label: string
-  onSelect: () => void
-}
-
-export interface NavRailCompactChoiceAction {
-  active: boolean
-  icon?: string
-  key: string
-  label: string
-  onSelect: () => void
-}
-
-export function NavRailCompact({
-  ariaHidden = false,
-  currentPath,
-  languageActions,
-  languageLabel,
-  moreLabel,
-  moreSheetActions,
-  navItems,
-  themeActions,
-  themeLabel,
-  onNavClick
-}: {
-  ariaHidden?: boolean
-  currentPath: string
-  languageActions: NavRailCompactChoiceAction[]
-  languageLabel: string
-  moreLabel: string
-  moreSheetActions: NavRailCompactMoreAction[]
-  navItems: NavRailCompactItem[]
-  themeActions: NavRailCompactChoiceAction[]
-  themeLabel: string
-  onNavClick: (key: string, path: string) => void
-}) {
-  const [isMoreSheetOpen, setIsMoreSheetOpen] = useState(false)
-
-  useEffect(() => {
-    setIsMoreSheetOpen(false)
-  }, [currentPath])
-
-  useEffect(() => {
-    if (ariaHidden) {
-      setIsMoreSheetOpen(false)
-    }
-  }, [ariaHidden])
-
-  return (
-    <div className='nav-rail nav-rail--compact' aria-hidden={ariaHidden || undefined}>
-      <div className='nav-rail-compact-list'>
-        {navItems.map((item) => (
-          <Button
-            key={item.key}
-            type='text'
-            className={`nav-item nav-item--compact ${item.active ? 'active' : ''}`}
-            title={item.label}
-            aria-label={item.label}
-            onClick={() => {
-              setIsMoreSheetOpen(false)
-              onNavClick(item.key, item.path)
-            }}
-            icon={<span className='material-symbols-rounded'>{item.icon}</span>}
-          />
-        ))}
-
-        <Button
-          type='text'
-          className={`nav-item nav-item--compact ${isMoreSheetOpen || currentPath === '/config' ? 'active' : ''}`}
-          title={moreLabel}
-          aria-expanded={isMoreSheetOpen}
-          aria-haspopup='dialog'
-          aria-label={moreLabel}
-          onClick={() => setIsMoreSheetOpen((prev) => !prev)}
-          icon={<span className='material-symbols-rounded'>more_horiz</span>}
-        />
-      </div>
-
-      <NavRailCompactMoreSheet
-        actions={moreSheetActions}
-        isOpen={isMoreSheetOpen}
-        languageActions={languageActions}
-        languageLabel={languageLabel}
-        moreLabel={moreLabel}
-        onClose={() => setIsMoreSheetOpen(false)}
-        themeActions={themeActions}
-        themeLabel={themeLabel}
-      />
-    </div>
-  )
-}