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

package/src/components/NavRailCompactMoreSheet.tsx

@@ -1,141 +0,0 @@
-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/ShortcutDisplay.scss

@@ -1,38 +0,0 @@
-.shortcut-display {
-  display: inline-flex;
-  align-items: center;
-  gap: 1px;
-  min-height: 20px;
-  padding: 0 6px;
-  border-radius: 8px;
-  background: color-mix(
-    in srgb,
-    var(--text-color, #111827) 7%,
-    var(--bg-color, #ffffff) 93%
-  );
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--text-color, #111827) 10%,
-      var(--bg-color, #ffffff) 90%
-    );
-  color: var(--sub-text-color, #6b7280);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
-  white-space: nowrap;
-}
-
-.shortcut-display__token {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 9px;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1;
-}
-
-.shortcut-display__token--compact {
-  min-width: 0;
-  font-size: 11px;
-  font-weight: 700;
-}

package/src/components/ShortcutDisplay.tsx

@@ -1,37 +0,0 @@
-import './ShortcutDisplay.scss'
-
-import React, { useMemo } from 'react'
-
-import { getShortcutDisplayTokens } from '#~/utils/shortcutUtils'
-
-export function ShortcutDisplay({
-  shortcut,
-  isMac,
-  className
-}: {
-  shortcut?: string
-  isMac: boolean
-  className?: string
-}) {
-  const tokens = useMemo(() => getShortcutDisplayTokens(shortcut, isMac), [isMac, shortcut])
-
-  if (tokens.length === 0) {
-    return null
-  }
-
-  return (
-    <span className={['shortcut-display', className].filter(Boolean).join(' ')}>
-      {tokens.map(token => (
-        <span
-          key={`${token.value}-${token.compact ? 'compact' : 'full'}`}
-          className={[
-            'shortcut-display__token',
-            token.compact ? 'shortcut-display__token--compact' : ''
-          ].filter(Boolean).join(' ')}
-        >
-          {token.value}
-        </span>
-      ))}
-    </span>
-  )
-}

package/src/components/ShortcutTooltip.scss

@@ -1,36 +0,0 @@
-.shortcut-tooltip-target {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-}
-
-.shortcut-tooltip-content {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: inherit;
-  line-height: 1.4;
-}
-
-.shortcut-tooltip-content__label {
-  color: inherit;
-  font-size: inherit;
-  font-weight: 400;
-  line-height: inherit;
-  white-space: nowrap;
-}
-
-.shortcut-tooltip-popover {
-  pointer-events: none;
-
-  .ant-tooltip-inner {
-    padding: 6px 8px !important;
-  }
-
-  .shortcut-display {
-    background: rgba(255, 255, 255, .12);
-    border-color: rgba(255, 255, 255, .16);
-    color: rgba(255, 255, 255, .92);
-    box-shadow: none;
-  }
-}

package/src/components/ShortcutTooltip.tsx

@@ -1,86 +0,0 @@
-import './ShortcutTooltip.scss'
-
-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'
-
-type ShortcutTooltipTitle = React.ReactNode | ((shortcutLabel: string) => React.ReactNode)
-
-type ShortcutTooltipProps = {
-  shortcut?: string
-  isMac: boolean
-  title: ShortcutTooltipTitle
-  children: React.ReactNode
-  placement?: TooltipPlacement
-  enabled?: boolean
-  targetClassName?: string
-} & React.ComponentPropsWithoutRef<'div'>
-
-const resolveShortcutTooltipTitle = (title: ShortcutTooltipTitle, shortcutLabel: string) => {
-  if (typeof title === 'function') {
-    return title(shortcutLabel)
-  }
-
-  return title
-}
-
-export const ShortcutTooltip = forwardRef<HTMLDivElement, ShortcutTooltipProps>(({
-  shortcut,
-  isMac,
-  title,
-  children,
-  placement = 'top',
-  enabled = true,
-  targetClassName,
-  className,
-  ...divProps
-}, ref) => {
-  const { isTouchInteraction } = useResponsiveLayout()
-  const shortcutLabel = useMemo(() => formatShortcutLabel(shortcut, isMac), [isMac, shortcut])
-  const resolvedTitle = useMemo(() => {
-    if (!enabled || isTouchInteraction || shortcutLabel === '') {
-      return null
-    }
-
-    return resolveShortcutTooltipTitle(title, shortcutLabel)
-  }, [enabled, isTouchInteraction, shortcutLabel, title])
-
-  const trigger = (
-    <div
-      {...divProps}
-      ref={ref}
-      className={['shortcut-tooltip-target', targetClassName, className].filter(Boolean).join(' ')}
-    >
-      {children}
-    </div>
-  )
-
-  if (resolvedTitle == null) {
-    return trigger
-  }
-
-  return (
-    <Tooltip
-      title={
-        <span className='shortcut-tooltip-content'>
-          <span className='shortcut-tooltip-content__label'>{resolvedTitle}</span>
-          <ShortcutDisplay shortcut={shortcut} isMac={isMac} />
-        </span>
-      }
-      placement={placement}
-      classNames={{ root: 'shortcut-tooltip-popover' }}
-      trigger={['hover']}
-      mouseEnterDelay={.3}
-      mouseLeaveDelay={.08}
-      arrow={false}
-    >
-      {trigger}
-    </Tooltip>
-  )
-})
-
-ShortcutTooltip.displayName = 'ShortcutTooltip'

package/src/components/Sidebar.scss

@@ -1,161 +0,0 @@
-.sidebar-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  --sidebar-hover-bg: #e5e5e5;
-  --sidebar-active-bg: #eff6ff;
-  --sidebar-active-text: #2563eb;
-  --sidebar-btn-color: #9ca3af;
-  --sidebar-btn-hover-bg: #fff1f0;
-
-  background-color: var(--sub-bg-color);
-  z-index: 5;
-  box-sizing: border-box;
-  height: 100%;
-
-  .sidebar-content {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .sidebar-new-chat {
-      padding: 0 12px;
-      flex-shrink: 0;
-
-      .new-chat-btn {
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 10px;
-        font-size: 13px;
-        font-weight: 500;
-        transition: all .2s cubic-bezier(.4, 0, .2, 1);
-
-        .btn-content {
-          display: flex;
-          align-items: center;
-          gap: 2px;
-        }
-
-        .material-symbols-rounded {
-          font-size: 16px;
-        }
-
-        .shortcut-tag {
-          font-size: 11px;
-          opacity: .8;
-          font-family:
-            ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation
-            Mono, monospace;
-          background: rgba(255, 255, 255, .2);
-          padding: 1px 5px;
-          border-radius: 3px;
-          line-height: 1;
-        }
-
-        &.active-scale {
-          transform: scale(.96);
-        }
-
-        // Active State Styles
-        &.active {
-          background-color: transparent !important;
-          border: 1px solid var(--sidebar-active-text) !important;
-          color: var(--sidebar-active-text) !important;
-          opacity: 1 !important;
-          cursor: default;
-          box-shadow: none;
-
-          .shortcut-tag {
-            display: none;
-          }
-
-          &:hover {
-            background-color: transparent !important;
-            color: var(--sidebar-active-text) !important;
-          }
-        }
-      }
-    }
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  &.collapsed {
-    border-right-width: 0 !important;
-  }
-}
-
-.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-footer {
-  margin-top: auto;
-  border-top: 1px solid var(--border-color);
-  padding: 0;
-  display: flex;
-  justify-content: flex-end;
-  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;
-  --sidebar-active-text: #3b82f6;
-  --sidebar-btn-color: #595959;
-  --sidebar-btn-hover-bg: #2a1215;
-  --nav-hover-bg: #1a1a1a;
-  --nav-active-bg: #111b26;
-  --nav-active-text: #3b82f6;
-}