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

package/src/components/monaco/use-monaco-theme.ts

@@ -0,0 +1,63 @@
+import type { editor as MonacoEditorNamespace } from 'monaco-editor'
+import { useEffect, useState } from 'react'
+
+import { monacoApi } from './monaco-runtime'
+
+const LIGHT_THEME = 'vf-workspace-light'
+const DARK_THEME = 'vf-workspace-dark'
+const HEX_COLOR_PATTERN = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i
+
+const readCssColor = (styles: CSSStyleDeclaration, name: string, fallback: string) => {
+  const value = styles.getPropertyValue(name).trim()
+  return HEX_COLOR_PATTERN.test(value) ? value : fallback
+}
+
+const buildTheme = (isDark: boolean): MonacoEditorNamespace.IStandaloneThemeData => {
+  const styles = window.getComputedStyle(document.documentElement)
+  const background = readCssColor(styles, '--bg-color', isDark ? '#141414' : '#ffffff')
+  const foreground = readCssColor(styles, '--text-color', isDark ? '#ffffff' : '#111827')
+  const primaryColor = readCssColor(styles, '--primary-color', isDark ? '#3b82f6' : '#2563eb')
+  const selectionBackground = readCssColor(styles, '--primary-soft-bg', isDark ? '#111b26' : '#eff6ff')
+
+  return {
+    base: isDark ? 'vs-dark' : 'vs',
+    colors: {
+      'editor.background': background,
+      'editor.foreground': foreground,
+      'editor.inactiveSelectionBackground': selectionBackground,
+      'editor.selectionBackground': selectionBackground,
+      'editorCursor.foreground': primaryColor
+    },
+    inherit: true,
+    rules: []
+  }
+}
+
+const defineTheme = (isDark: boolean) => {
+  const themeName = isDark ? DARK_THEME : LIGHT_THEME
+  monacoApi.editor.defineTheme(themeName, buildTheme(isDark))
+  return themeName
+}
+
+const getThemeName = () => defineTheme(document.documentElement.classList.contains('dark'))
+
+export const useMonacoTheme = () => {
+  const [themeName, setThemeName] = useState(getThemeName)
+
+  useEffect(() => {
+    const syncThemeName = () => setThemeName(getThemeName())
+    const observer = new MutationObserver(syncThemeName)
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+    syncThemeName()
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return themeName
+}

package/src/components/nav-rail-account-actions.tsx

@@ -0,0 +1,104 @@
+import { App as AntdApp } from 'antd'
+import type { MenuProps } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR, { useSWRConfig } from 'swr'
+
+import { getAuthStatus, logout } from '#~/api/auth'
+import { clearAuthToken } from '#~/api/auth-token'
+import { getApiErrorMessage } from '#~/api/base'
+import { isServerConnectionManagedClientMode, requestServerConnectionPicker } from '#~/runtime-config'
+
+import type { NavRailCompactMoreAction } from './NavRailCompact'
+
+export function useNavRailAccountActions() {
+  const { t } = useTranslation()
+  const { message } = AntdApp.useApp()
+  const { mutate } = useSWRConfig()
+  const { data: authStatus } = useSWR('/api/auth/status', getAuthStatus)
+  const connectionManagedMode = isServerConnectionManagedClientMode()
+  const authEnabled = authStatus?.enabled === true
+
+  const refreshAuthStatus = React.useCallback(async () => {
+    try {
+      await mutate('/api/auth/status')
+    } catch {
+      // The user intent is still to leave the current local session.
+    }
+  }, [mutate])
+
+  const handleChangeServer = React.useCallback(() => {
+    requestServerConnectionPicker({ clearCurrentServer: true })
+    window.location.reload()
+  }, [])
+
+  const handleLogout = React.useCallback(async () => {
+    try {
+      await logout()
+      await refreshAuthStatus()
+    } catch (err) {
+      clearAuthToken()
+      await refreshAuthStatus()
+      void message.error(getApiErrorMessage(err, t('auth.logoutFailed')))
+    }
+  }, [message, refreshAuthStatus, t])
+
+  const accountItems = React.useMemo<NonNullable<MenuProps['items']>>(() => {
+    const items: NonNullable<MenuProps['items']> = []
+
+    if (connectionManagedMode) {
+      items.push({
+        key: 'change-server',
+        label: t('auth.changeServer'),
+        icon: <span className='material-symbols-rounded nav-menu-icon'>sync_alt</span>,
+        onClick: handleChangeServer
+      })
+    }
+
+    if (authEnabled) {
+      if (items.length > 0) {
+        items.push({ key: 'account-divider', type: 'divider' })
+      }
+
+      items.push({
+        key: 'logout',
+        label: t('auth.logout'),
+        danger: true,
+        icon: <span className='material-symbols-rounded nav-menu-icon'>logout</span>,
+        onClick: () => {
+          void handleLogout()
+        }
+      })
+    }
+
+    return items
+  }, [authEnabled, connectionManagedMode, handleChangeServer, handleLogout, t])
+
+  const compactAccountActions = React.useMemo<NavRailCompactMoreAction[]>(() => [
+    ...(connectionManagedMode
+      ? [{
+        icon: 'sync_alt',
+        key: 'change-server',
+        label: t('auth.changeServer'),
+        onSelect: handleChangeServer
+      }]
+      : []),
+    ...(authEnabled
+      ? [{
+        icon: 'logout',
+        key: 'logout',
+        label: t('auth.logout'),
+        onSelect: () => {
+          void handleLogout()
+        }
+      }]
+      : [])
+  ], [authEnabled, connectionManagedMode, handleChangeServer, handleLogout, t])
+
+  return {
+    accountItems,
+    accountMenuLabel: t('auth.accountMenu'),
+    compactAccountActions,
+    showAccountMenu: accountItems.length > 0
+  }
+}

package/src/components/server-connection/ServerConnectionGate.scss

@@ -0,0 +1,356 @@
+.server-connection-gate {
+  min-height: var(--vf-visual-viewport-height, 100dvh);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  background: var(--bg-color);
+  color: var(--text-color);
+  scroll-padding-bottom: 24px;
+}
+
+.server-connection-gate__panel {
+  width: min(460px, 100%);
+}
+
+.server-connection-gate__intro {
+  margin-bottom: 18px;
+
+  h1 {
+    margin: 0 0 6px;
+    font-size: 24px;
+    line-height: 1.2;
+  }
+
+  p {
+    margin: 0;
+    color: var(--sub-text-color);
+    line-height: 1.5;
+  }
+}
+
+.server-connection-gate__setup {
+  margin-bottom: 18px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--sub-bg-color);
+
+  code {
+    display: block;
+    margin: 8px 0;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: var(--sub-sub-bg-color);
+    color: var(--text-color);
+    font-size: 13px;
+    line-height: 1.4;
+    overflow-x: auto;
+  }
+
+  p {
+    margin: 0;
+    color: var(--sub-text-color);
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  a {
+    color: var(--primary-color, #2563eb);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.server-connection-gate__setup-title,
+.server-connection-gate__modal-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  .material-symbols-rounded {
+    font-size: 18px;
+    color: var(--sub-text-color);
+  }
+}
+
+.server-connection-gate__setup-title {
+  color: var(--text-color);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.server-connection-gate__notice {
+  margin-bottom: 18px;
+}
+
+.server-connection-gate__scheme-select {
+  width: 112px;
+  min-width: 112px;
+
+  .ant-select-selector {
+    padding-inline-end: 24px !important;
+    box-shadow: none !important;
+  }
+
+  .ant-select-arrow {
+    color: var(--sub-text-color);
+    inset-inline-end: 8px;
+    width: 18px;
+    height: 18px;
+    margin-top: -9px;
+    pointer-events: none;
+  }
+
+  .server-connection-gate__scheme-chevron {
+    font-size: 16px;
+    line-height: 1;
+    color: var(--sub-text-color);
+    transition: transform .2s ease, color .2s ease;
+  }
+
+  &.ant-select-open .server-connection-gate__scheme-chevron {
+    transform: rotate(180deg);
+    color: var(--primary-color);
+  }
+
+  &.ant-select-focused .ant-select-selector,
+  &.ant-select-open .ant-select-selector {
+    border-color: rgba(37, 99, 235, .32) !important;
+    box-shadow: none !important;
+  }
+}
+
+.server-connection-gate__hint {
+  margin: 0 0 18px;
+  color: var(--sub-text-color);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.server-connection-gate__recent {
+  margin: 0 0 18px;
+
+  h2 {
+    margin: 0 0 8px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--sub-text-color);
+    font-weight: 600;
+  }
+}
+
+.server-connection-gate__recent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.server-connection-gate__profile-row {
+  min-width: 0;
+}
+
+.server-connection-gate__profile-card {
+  min-width: 0;
+  width: 100%;
+  min-height: 58px;
+  padding: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--sub-bg-color);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: border-color .2s ease, background-color .2s ease;
+
+  &:hover:not(.is-disabled) {
+    border-color: var(--primary-color, #2563eb);
+    background: color-mix(
+      in srgb,
+      var(--sub-bg-color) 88%,
+      var(--primary-color, #2563eb) 12%
+    );
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: .62;
+  }
+
+  .material-symbols-rounded {
+    flex-shrink: 0;
+    font-size: 18px;
+    color: var(--sub-text-color);
+  }
+}
+
+.server-connection-gate__recent-item {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  padding: 2px 0 2px 4px;
+  background: transparent;
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  .server-connection-gate__profile-main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .server-connection-gate__profile-title,
+  .server-connection-gate__profile-url,
+  .server-connection-gate__profile-version,
+  .server-connection-gate__profile-description {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.4;
+  }
+}
+
+.server-connection-gate__profile-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.server-connection-gate__profile-url,
+.server-connection-gate__profile-version,
+.server-connection-gate__profile-description {
+  color: var(--sub-text-color);
+  font-size: 12px;
+}
+
+.server-connection-gate__profile-auth {
+  flex-shrink: 0;
+  align-self: center;
+  padding: 2px 6px;
+  border-radius: 8px;
+  background: var(--sub-sub-bg-color);
+  color: var(--sub-text-color);
+  font-size: 11px;
+  line-height: 1.4;
+
+  &.is-saved {
+    background: color-mix(
+      in srgb,
+      var(--success-color, #16a34a) 12%,
+      transparent
+    );
+    color: var(--success-color, #16a34a);
+  }
+}
+
+.server-connection-gate__profile-manage {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+
+  .material-symbols-rounded {
+    font-size: 18px;
+  }
+}
+
+.server-connection-gate__profile-modal-url {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 12px;
+  color: var(--sub-text-color);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+
+  .material-symbols-rounded {
+    flex-shrink: 0;
+    font-size: 18px;
+  }
+}
+
+.server-connection-gate__profile-modal-auth {
+  min-height: 36px;
+  margin-bottom: 16px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--sub-bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--sub-text-color);
+
+  .material-symbols-rounded {
+    flex-shrink: 0;
+    font-size: 18px;
+  }
+
+  strong {
+    color: var(--text-color);
+    font-weight: 600;
+  }
+
+  &.is-saved {
+    background: color-mix(
+      in srgb,
+      var(--success-color, #16a34a) 12%,
+      transparent
+    );
+
+    .material-symbols-rounded,
+    strong {
+      color: var(--success-color, #16a34a);
+    }
+  }
+}
+
+.server-connection-gate__profile-modal-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .server-connection-gate {
+    padding: max(16px, env(safe-area-inset-top)) 14px
+      max(16px, env(safe-area-inset-bottom));
+  }
+
+  html.has-mobile-keyboard .server-connection-gate {
+    align-items: flex-start;
+    justify-content: flex-start;
+    scroll-padding-bottom: calc(24px + var(--vf-keyboard-inset-bottom, 0px));
+  }
+
+  .server-connection-gate__panel {
+    width: 100%;
+
+    h1 {
+      font-size: 22px;
+    }
+  }
+
+  .server-connection-gate__profile-auth {
+    display: none;
+  }
+}