@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/dock-panel/DockPanel.tsx

@@ -1,9 +1,11 @@
 import './DockPanel.scss'
 
-import { Button } from 'antd'
 import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
+import { DockPanelHeader } from './DockPanelHeader'
+import { useDockPanelFullscreen } from './use-dock-panel-fullscreen'
+
 const DEFAULT_PANEL_HEIGHT = 240
 
 const clampPanelHeight = (height: number, minHeight: number, maxHeight: number) =>
@@ -17,11 +19,15 @@ const shouldIgnoreResizePointerDown = (target: HTMLElement | null) =>
 export function DockPanel({
   enterMotion = 'slide-up',
   allowResize = true,
+  allowFullscreen = false,
   children,
   className,
   closeLabel,
   defaultHeight = DEFAULT_PANEL_HEIGHT,
   footer,
+  fullscreenEnterLabel,
+  fullscreenExitLabel,
+  isResizeDisabled = false,
   isOpen = true,
   maxHeight = 520,
   meta,
@@ -33,6 +39,7 @@ export function DockPanel({
   actions
 }: {
   enterMotion?: 'none' | 'slide-up'
+  allowFullscreen?: boolean
   allowResize?: boolean
   actions?: ReactNode
   children: ReactNode
@@ -40,7 +47,10 @@ export function DockPanel({
   closeLabel?: string
   defaultHeight?: number
   footer?: ReactNode
+  fullscreenEnterLabel?: string
+  fullscreenExitLabel?: string
   isOpen?: boolean
+  isResizeDisabled?: boolean
   maxHeight?: number
   meta?: ReactNode
   minHeight?: number
@@ -52,12 +62,14 @@ export function DockPanel({
   const panelRef = useRef<HTMLDivElement | null>(null)
   const resizeSessionRef = useRef<{ maxHeight: number; startHeight: number; startY: number } | null>(null)
   const [isResizing, setIsResizing] = useState(false)
+  const { isFullscreen, isFullscreenExiting, toggleFullscreen } = useDockPanelFullscreen()
   const [panelHeight, setPanelHeight] = useState(() => {
     const storedHeight = Number(localStorage.getItem(storageKey))
     return Number.isFinite(storedHeight) && storedHeight > 0
       ? clampPanelHeight(storedHeight, minHeight, maxHeight)
       : clampPanelHeight(defaultHeight, minHeight, maxHeight)
   })
+  const resizeEnabled = allowResize && !isResizeDisabled && !isFullscreen
 
   useEffect(() => {
     localStorage.setItem(storageKey, String(panelHeight))
@@ -71,7 +83,7 @@ export function DockPanel({
   }, [])
 
   useEffect(() => {
-    if (!allowResize || !isResizing) {
+    if (!resizeEnabled || !isResizing) {
       return
     }
 
@@ -106,10 +118,10 @@ export function DockPanel({
       window.removeEventListener('pointerup', stopResizing)
       window.removeEventListener('pointercancel', stopResizing)
     }
-  }, [allowResize, isResizing, minHeight])
+  }, [isResizing, minHeight, resizeEnabled])
 
   const handleResizePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
-    if (shouldIgnoreResizePointerDown(event.target as HTMLElement | null)) {
+    if (!resizeEnabled || shouldIgnoreResizePointerDown(event.target as HTMLElement | null)) {
       return
     }
 
@@ -144,38 +156,29 @@ export function DockPanel({
       ref={panelRef}
       className={`dock-panel ${isOpen && enterMotion === 'slide-up' ? 'is-entering-slide-up' : ''} ${
         isOpen ? 'is-open' : 'is-closing'
-      } ${className ?? ''} ${isResizing ? 'is-resizing' : ''} ${allowResize ? 'is-resizable' : 'is-static'}`}
+      } ${className ?? ''} ${isResizing ? 'is-resizing' : ''} ${resizeEnabled ? 'is-resizable' : 'is-static'} ${
+        isResizeDisabled || isFullscreen ? 'is-resize-disabled' : ''
+      } ${isFullscreen ? 'is-fullscreen' : ''} ${isFullscreenExiting ? 'is-fullscreen-exiting' : ''}`}
       style={panelStyle as CSSProperties}
     >
-      <div
-        className={`dock-panel__resize-handle ${allowResize ? 'is-resizable' : 'is-static'}`}
-        title={allowResize ? resizeLabel : undefined}
-        onPointerDown={allowResize ? handleResizePointerDown : undefined}
-      >
-        <div className='dock-panel__header-main'>
-          <span className='dock-panel__title'>{title}</span>
-          {meta != null && (
-            <span className='dock-panel__meta'>{meta}</span>
-          )}
-        </div>
-        <div className='dock-panel__header-spacer' />
-        {(actions != null || onClose != null) && (
-          <div className='dock-panel__header-actions'>
-            {actions}
-            {onClose != null && closeLabel != null && (
-              <Button
-                type='text'
-                className='dock-panel__close-btn'
-                data-dock-panel-no-resize='true'
-                icon={<span className='material-symbols-rounded'>close</span>}
-                title={closeLabel}
-                aria-label={closeLabel}
-                onClick={onClose}
-              />
-            )}
-          </div>
-        )}
-      </div>
+      {resizeEnabled && (
+        <div
+          className='dock-panel__resize-strip'
+          title={resizeLabel}
+          onPointerDown={handleResizePointerDown}
+        />
+      )}
+      <DockPanelHeader
+        actions={actions}
+        closeLabel={closeLabel}
+        fullscreenEnterLabel={fullscreenEnterLabel}
+        fullscreenExitLabel={fullscreenExitLabel}
+        isFullscreen={isFullscreen}
+        meta={meta}
+        title={title}
+        onClose={onClose}
+        onToggleFullscreen={allowFullscreen ? toggleFullscreen : undefined}
+      />
 
       <div className='dock-panel__body'>
         {children}

package/src/components/dock-panel/DockPanelHeader.tsx

@@ -0,0 +1,65 @@
+import { Button } from 'antd'
+import type { ReactNode } from 'react'
+
+export function DockPanelHeader({
+  actions,
+  closeLabel,
+  fullscreenEnterLabel,
+  fullscreenExitLabel,
+  isFullscreen,
+  meta,
+  onClose,
+  onToggleFullscreen,
+  title
+}: {
+  actions?: ReactNode
+  closeLabel?: string
+  fullscreenEnterLabel?: string
+  fullscreenExitLabel?: string
+  isFullscreen: boolean
+  meta?: ReactNode
+  onClose?: () => void
+  onToggleFullscreen?: () => void
+  title: ReactNode
+}) {
+  const fullscreenLabel = isFullscreen ? fullscreenExitLabel : fullscreenEnterLabel
+
+  return (
+    <div className='dock-panel__header'>
+      <div className='dock-panel__header-main'>
+        <span className='dock-panel__title'>{title}</span>
+        {meta != null && (
+          <span className='dock-panel__meta'>{meta}</span>
+        )}
+      </div>
+      <div className='dock-panel__header-spacer' />
+      {(actions != null || onToggleFullscreen != null || onClose != null) && (
+        <div className='dock-panel__header-actions'>
+          {actions}
+          {onToggleFullscreen != null && fullscreenLabel != null && (
+            <Button
+              type='text'
+              className='dock-panel__close-btn dock-panel__fullscreen-btn'
+              data-dock-panel-no-resize='true'
+              icon={<span className='material-symbols-rounded'>{isFullscreen ? 'fullscreen_exit' : 'fullscreen'}</span>}
+              title={fullscreenLabel}
+              aria-label={fullscreenLabel}
+              onClick={onToggleFullscreen}
+            />
+          )}
+          {onClose != null && closeLabel != null && (
+            <Button
+              type='text'
+              className='dock-panel__close-btn'
+              data-dock-panel-no-resize='true'
+              icon={<span className='material-symbols-rounded'>close</span>}
+              title={closeLabel}
+              aria-label={closeLabel}
+              onClick={onClose}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/dock-panel/use-dock-panel-fullscreen.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const FULLSCREEN_EXIT_ANIMATION_MS = 180
+
+export function useDockPanelFullscreen() {
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [isFullscreenExiting, setIsFullscreenExiting] = useState(false)
+  const exitTimerRef = useRef<number | null>(null)
+
+  const clearExitTimer = useCallback(() => {
+    if (exitTimerRef.current == null) {
+      return
+    }
+
+    window.clearTimeout(exitTimerRef.current)
+    exitTimerRef.current = null
+  }, [])
+
+  const enterFullscreen = useCallback(() => {
+    clearExitTimer()
+    setIsFullscreenExiting(false)
+    setIsFullscreen(true)
+  }, [clearExitTimer])
+
+  const exitFullscreen = useCallback(() => {
+    clearExitTimer()
+    setIsFullscreenExiting(true)
+    exitTimerRef.current = window.setTimeout(() => {
+      setIsFullscreen(false)
+      setIsFullscreenExiting(false)
+      exitTimerRef.current = null
+    }, FULLSCREEN_EXIT_ANIMATION_MS)
+  }, [clearExitTimer])
+
+  const toggleFullscreen = useCallback(() => {
+    if (isFullscreen && !isFullscreenExiting) {
+      exitFullscreen()
+      return
+    }
+
+    enterFullscreen()
+  }, [enterFullscreen, exitFullscreen, isFullscreen, isFullscreenExiting])
+
+  useEffect(() => clearExitTimer, [clearExitTimer])
+
+  return {
+    isFullscreen,
+    isFullscreenExiting,
+    toggleFullscreen
+  }
+}

package/src/components/knowledge-base/KnowledgeBaseView.scss

@@ -2,11 +2,8 @@
   color: var(--text-color);
 }
 
-.knowledge-base-view__mobile-switcher-shell {
-  display: none;
-}
-
 .knowledge-base-view__body {
+  position: relative;
   display: flex;
   flex: 1;
   min-height: 0;
@@ -14,6 +11,68 @@
   overflow: hidden;
 }
 
+.knowledge-base-view--compact .knowledge-base-view__body {
+  flex-direction: column;
+}
+
+.knowledge-base-view__mobile-sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  border: none;
+  background: rgba(0, 0, 0, .28);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity .24s ease, visibility 0s linear .24s;
+  z-index: 70;
+}
+
+.knowledge-base-view__mobile-sidebar-backdrop.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.knowledge-base-view__mobile-sidebar-sheet {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(320px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
+  padding: max(4px, env(safe-area-inset-top)) 0
+    max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform .24s cubic-bezier(.4, 0, .2, 1),
+    visibility 0s linear .24s;
+  z-index: 71;
+  pointer-events: none;
+  overscroll-behavior: contain;
+}
+
+.knowledge-base-view__mobile-sidebar-sheet.is-open {
+  transform: translateX(0);
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.knowledge-base-view__mobile-sidebar {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--border-color);
+  border-radius: 0 8px 8px 0;
+  background: var(--sub-bg-color);
+  box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
+  overscroll-behavior: contain;
+}
+
 .knowledge-base-view__left {
   width: var(--subpage-secondary-panel-width);
   min-width: var(--subpage-secondary-panel-width);
@@ -21,6 +80,22 @@
   display: flex;
   flex-direction: column;
   background: var(--sub-bg-color);
+  position: relative;
+  overflow: visible;
+  transition:
+    width .3s cubic-bezier(.4, 0, .2, 1),
+    min-width .3s cubic-bezier(.4, 0, .2, 1);
+}
+
+.knowledge-base-view__left.is-collapsed {
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+}
+
+.knowledge-base-view__left.is-collapsed .knowledge-base-view__sidebar {
+  transform: translateX(calc(-1 * var(--subpage-secondary-panel-width)));
+  pointer-events: none;
 }
 
 .knowledge-base-view__sidebar {
@@ -28,13 +103,81 @@
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  width: var(--subpage-secondary-panel-width);
+  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
+}
+
+.knowledge-base-view__sidebar-top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px 0;
+  flex-shrink: 0;
+}
+
+.knowledge-base-view__new-button {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.knowledge-base-view__new-button-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.knowledge-base-view__new-button .material-symbols-rounded {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.ant-btn.knowledge-base-view__sidebar-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px !important;
+  min-width: 28px !important;
+  max-width: 28px !important;
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 !important;
+  color: var(--sub-text-color);
+  flex-shrink: 0;
+}
+
+.knowledge-base-view__sidebar-control .material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.knowledge-base-view__sidebar-search {
+  margin: 6px 12px 0;
+  width: calc(100% - 24px);
+  height: 30px;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.knowledge-base-view__sidebar-search .ant-input {
+  font-size: 12px;
 }
 
 .knowledge-base-view__nav-list {
   display: flex;
   flex-direction: column;
+  flex: 1;
   gap: 6px;
-  padding: 10px 12px 12px;
+  min-height: 0;
+  padding: 8px 12px 12px;
   overflow: auto;
 }
 
@@ -53,9 +196,9 @@
   transition: border-color .2s ease, background-color .2s ease, color .2s ease;
 }
 
-.knowledge-base-view__nav-item:hover {
-  border-color: var(--sidebar-hover-bg, #e5e5e5);
-  background: var(--sidebar-hover-bg, #e5e5e5);
+.knowledge-base-view__nav-item:not(.is-active):hover {
+  border-color: var(--sub-border-color);
+  background: var(--tag-hover-bg);
 }
 
 .knowledge-base-view__nav-item.is-active {
@@ -133,57 +276,152 @@
   flex-direction: column;
 }
 
+.knowledge-base-view--compact .knowledge-base-view__right {
+  margin: 0;
+  border-radius: 8px;
+}
+
+.knowledge-base-view--compact .knowledge-base-view__mobile-sidebar {
+  .knowledge-base-view__sidebar-top {
+    align-items: stretch;
+    padding-top: 12px;
+  }
+
+  .knowledge-base-view__new-button {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 12px;
+    border-radius: 8px;
+    font-size: 13px;
+  }
+
+  .knowledge-base-view__new-button .material-symbols-rounded {
+    font-size: 18px;
+  }
+
+  .ant-btn.knowledge-base-view__sidebar-control {
+    width: 40px !important;
+    min-width: 40px !important;
+    max-width: 40px !important;
+    height: 40px !important;
+    min-height: 40px !important;
+    border-radius: 8px !important;
+  }
+
+  .knowledge-base-view__sidebar-search {
+    height: 40px;
+    min-height: 40px;
+    margin-top: 8px;
+    padding: 0 10px !important;
+    border-radius: 8px;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+  }
+
+  .knowledge-base-view__sidebar-search .ant-input {
+    font-size: 13px;
+  }
+
+  .knowledge-base-view__sidebar-search .knowledge-base-view__filter-icon {
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+
 .knowledge-base-view__right-body {
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
 
-@media (max-width: 1100px) {
-  .knowledge-base-view__body {
-    flex-direction: column;
-  }
+.knowledge-base-view__icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px !important;
+  min-width: 28px !important;
+  max-width: 28px !important;
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 !important;
+  border-radius: 6px !important;
+}
 
-  .knowledge-base-view__left {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-  }
+.knowledge-base-view__icon-button .material-symbols-rounded {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.knowledge-base-view__content-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
 
-  .knowledge-base-view__right {
-    margin-top: 0;
-    margin-left: var(--subpage-content-card-gap);
+.app-shell--dark {
+  .knowledge-base-view__mobile-sidebar-backdrop {
+    background: rgba(0, 0, 0, .48);
   }
 
-  .knowledge-base-view__nav-list {
-    padding-bottom: 10px;
+  .knowledge-base-view__mobile-sidebar {
+    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
   }
 }
 
 @media (max-width: 960px) {
   .knowledge-base-view--compact {
-    .knowledge-base-view__mobile-switcher-shell {
-      display: block;
-      padding: 12px;
-      padding-bottom: 0;
+    .knowledge-base-view__right {
+      margin: 0;
+      min-height: 0;
+      border-radius: 8px;
     }
 
-    .knowledge-base-view__mobile-switcher {
-      width: 100%;
+    .knowledge-base-view__content {
+      padding: 10px;
+      gap: 8px;
+    }
 
-      .ant-segmented-group {
-        gap: 4px;
-      }
+    .knowledge-base-view__section-header {
+      gap: 8px;
+    }
 
-      .ant-segmented-item {
-        min-height: 32px;
-        font-size: 12px;
-      }
+    .knowledge-base-view__section-actions .ant-space {
+      gap: 6px !important;
     }
 
-    .knowledge-base-view__right {
-      margin: 12px;
-      margin-top: 12px;
+    .knowledge-base-view__icon-button,
+    .knowledge-base-view__action-button--icon-only {
+      width: 36px !important;
+      min-width: 36px !important;
+      max-width: 36px !important;
+      height: 36px !important;
+      min-height: 36px !important;
+      border-radius: 8px !important;
+    }
+
+    .knowledge-base-view__filter-input,
+    .knowledge-base-view__filter-select {
+      min-width: 0;
+      flex: 1 1 100%;
+    }
+
+    .knowledge-base-view__filter-input .ant-input-affix-wrapper,
+    .knowledge-base-view__filter-select .ant-select-selector,
+    .knowledge-base-view__skill-toolbar-select .ant-select-selector {
+      min-height: 40px !important;
+      height: 40px !important;
+      border-radius: 8px !important;
+    }
+
+    .knowledge-base-view__list .ant-list-items {
+      gap: 8px;
+    }
+
+    .knowledge-base-view__skill-result,
+    .knowledge-base-view__item {
+      padding: 10px;
     }
   }