farming-code 2.2.30 → 2.2.32

package/extensions/browser/frontend/BrowserSidebarPortals.tsx

@@ -1,360 +0,0 @@
-import { createPortal } from 'react-dom'
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react'
-import {
-  ChevronDownGlyph,
-  ChevronRightGlyph,
-  CloseGlyph,
-  PencilGlyph,
-  PlusGlyph,
-  SquareGlyph,
-} from '@/components/IconGlyphs'
-import type { ProjectGroup } from '@/components/code/types'
-import type { UiPreferences } from '@/lib/ui-preferences'
-import type { BrowserResource } from './types'
-import type { BrowserResourcesController } from './useBrowserResources'
-
-const COLLAPSED_KEY = 'farming.code.browserSectionsCollapsed.v1'
-
-function readCollapsed() {
-  try {
-    const parsed = JSON.parse(localStorage.getItem(COLLAPSED_KEY) || '[]')
-    return new Set(Array.isArray(parsed) ? parsed.filter(value => typeof value === 'string') : [])
-  } catch {
-    return new Set<string>()
-  }
-}
-
-function writeCollapsed(values: Set<string>) {
-  try {
-    localStorage.setItem(COLLAPSED_KEY, JSON.stringify([...values]))
-  } catch {
-    // In-memory collapse state still works.
-  }
-}
-
-function browserCopy(language: UiPreferences['language']) {
-  const zh = language === 'zh'
-  return {
-    browsers: zh ? '浏览器' : 'Browser',
-    newBrowser: zh ? '新建标签页' : 'New Tab',
-    createBrowser: zh ? '新建标签页' : 'Create tab',
-    browserName: zh ? '标签页名称' : 'Tab name',
-    renameBrowser: zh ? '重命名标签页' : 'Rename Tab',
-    startBrowser: zh ? '启动标签页' : 'Start Tab',
-    stopBrowser: zh ? '停止标签页' : 'Stop Tab',
-    deleteBrowser: zh ? '关闭标签页' : 'Close Tab',
-    failed: zh ? '标签页失败' : 'Tab failed',
-    starting: zh ? '启动中…' : 'Starting…',
-    stopping: zh ? '停止中…' : 'Stopping…',
-    stopped: zh ? '已停止' : 'Stopped',
-    renameFailed: zh ? '标签页重命名失败' : 'Failed to rename tab',
-    transitionFailed: zh ? '标签页状态切换失败' : 'Tab transition failed',
-    deleteFailed: zh ? '标签页关闭失败' : 'Failed to close tab',
-    createFailed: zh ? '标签页创建失败' : 'Failed to create tab',
-  }
-}
-
-type BrowserCopy = ReturnType<typeof browserCopy>
-
-function BrowserPlayGlyph() {
-  return (
-    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <path d="M4.5 2.6a.75.75 0 0 1 1.15-.63l7 4.9a.75.75 0 0 1 0 1.23l-7 4.9A.75.75 0 0 1 4.5 12.4V2.6Z" />
-    </svg>
-  )
-}
-
-function resourceStatusLabel(resource: BrowserResource, copy: BrowserCopy) {
-  if (resource.status === 'running') return resource.url.replace(/^https?:\/\//, '') || 'about:blank'
-  if (resource.status === 'failed') return resource.error || copy.failed
-  if (resource.status === 'starting') return copy.starting
-  if (resource.status === 'stopping') return copy.stopping
-  return copy.stopped
-}
-
-function BrowserRow({
-  resource,
-  active,
-  controller,
-  copy,
-  onOpen,
-}: {
-  resource: BrowserResource
-  active: boolean
-  controller: BrowserResourcesController
-  copy: BrowserCopy
-  onOpen: (resource: BrowserResource) => void
-}) {
-  const [renaming, setRenaming] = useState(false)
-  const [name, setName] = useState(resource.name)
-  const busy = resource.status === 'starting' || resource.status === 'stopping'
-  const submitRename = async () => {
-    const next = name.trim()
-    setRenaming(false)
-    if (!next || next === resource.name) {
-      setName(resource.name)
-      return
-    }
-    await controller.rename(resource.id, next).catch(error => {
-      setName(resource.name)
-      window.alert(error instanceof Error ? error.message : copy.renameFailed)
-    })
-  }
-  return (
-    <div
-      className={`farming-browser-row ${active ? 'active' : ''}`}
-      data-testid="farming-browser-row"
-      data-browser-id={resource.id}
-      role="button"
-      tabIndex={0}
-      onClick={() => onOpen(resource)}
-      onKeyDown={event => {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault()
-          onOpen(resource)
-        }
-      }}
-    >
-      <span className={`farming-browser-status ${resource.status}`} aria-hidden="true" />
-      <span className="farming-browser-row-copy">
-        {renaming ? (
-          <input
-            autoFocus
-            value={name}
-            aria-label={copy.browserName}
-            onClick={event => event.stopPropagation()}
-            onChange={event => setName(event.currentTarget.value)}
-            onBlur={() => void submitRename()}
-            onKeyDown={event => {
-              event.stopPropagation()
-              if (event.key === 'Enter') void submitRename()
-              if (event.key === 'Escape') {
-                setName(resource.name)
-                setRenaming(false)
-              }
-            }}
-          />
-        ) : (
-          <span className="farming-browser-row-name">{resource.name}</span>
-        )}
-        <span className="farming-browser-row-detail" title={resource.error || resource.url}>
-          {resourceStatusLabel(resource, copy)}
-        </span>
-      </span>
-      <span className="farming-browser-row-actions">
-        <button
-          type="button"
-          title={copy.renameBrowser}
-          aria-label={copy.renameBrowser}
-          onClick={event => {
-            event.stopPropagation()
-            setRenaming(true)
-          }}
-        >
-          <PencilGlyph />
-        </button>
-        <button
-          type="button"
-          disabled={busy}
-          title={resource.status === 'running' ? copy.stopBrowser : copy.startBrowser}
-          aria-label={resource.status === 'running' ? copy.stopBrowser : copy.startBrowser}
-          onClick={event => {
-            event.stopPropagation()
-            const operation = resource.status === 'running' ? controller.stop(resource.id) : controller.start(resource.id)
-            void operation.catch(error => window.alert(error instanceof Error ? error.message : copy.transitionFailed))
-          }}
-        >
-          {resource.status === 'running' ? <SquareGlyph /> : <BrowserPlayGlyph />}
-        </button>
-        <button
-          type="button"
-          title={copy.deleteBrowser}
-          aria-label={copy.deleteBrowser}
-          onClick={event => {
-            event.stopPropagation()
-            void controller.remove(resource.id).catch(error => {
-              window.alert(error instanceof Error ? error.message : copy.deleteFailed)
-            })
-          }}
-        >
-          <CloseGlyph />
-        </button>
-      </span>
-    </div>
-  )
-}
-
-function BrowserSection({
-  project,
-  resources,
-  activeBrowserId,
-  controller,
-  copy,
-  collapsed,
-  onToggle,
-  onOpen,
-}: {
-  project: ProjectGroup
-  resources: BrowserResource[]
-  activeBrowserId: string | null
-  controller: BrowserResourcesController
-  copy: BrowserCopy
-  collapsed: boolean
-  onToggle: () => void
-  onOpen: (resource: BrowserResource) => void
-}) {
-  const createBrowser = async () => {
-    try {
-      const resource = await controller.create(project.workspace)
-      const running = await controller.start(resource.id)
-      onOpen(running)
-    } catch (error) {
-      window.alert(error instanceof Error ? error.message : copy.createFailed)
-    }
-  }
-  return (
-    <section className="farming-browser-section" data-testid="farming-browser-section">
-      <header>
-        <button
-          type="button"
-          className="farming-browser-section-toggle"
-          aria-expanded={!collapsed}
-          onClick={onToggle}
-        >
-          <span className="farming-browser-section-chevron" aria-hidden="true">
-            {collapsed ? <ChevronRightGlyph /> : <ChevronDownGlyph />}
-          </span>
-          <span>{copy.browsers}</span>
-          {resources.length > 0 && <small>{resources.length}</small>}
-        </button>
-        <button
-          type="button"
-          className="farming-browser-new"
-          title={copy.newBrowser}
-          aria-label={copy.newBrowser}
-          onClick={() => void createBrowser()}
-        >
-          <PlusGlyph />
-        </button>
-      </header>
-      {!collapsed && (
-        <div className="farming-browser-list">
-          {resources.map(resource => (
-            <BrowserRow
-              key={resource.id}
-              resource={resource}
-              active={resource.id === activeBrowserId}
-              controller={controller}
-              copy={copy}
-              onOpen={onOpen}
-            />
-          ))}
-          {resources.length === 0 && (
-            <button
-              type="button"
-              className="farming-browser-empty"
-              onClick={() => void createBrowser()}
-            >
-              <PlusGlyph />
-              <span>{copy.createBrowser}</span>
-            </button>
-          )}
-        </div>
-      )}
-    </section>
-  )
-}
-
-function findProjectExpandedElement(projectId: string) {
-  const titles = document.querySelectorAll<HTMLElement>('[data-testid="code-project-title"]')
-  for (const title of titles) {
-    if (title.dataset.projectId !== projectId) continue
-    return title.closest<HTMLElement>('[data-testid="code-project-group"]')
-      ?.querySelector<HTMLElement>('.code-project-expanded') ?? null
-  }
-  return null
-}
-
-export function BrowserSidebarPortals({
-  projects,
-  collapsedProjectIds,
-  activeBrowserId,
-  controller,
-  language,
-  onOpen,
-}: {
-  projects: ProjectGroup[]
-  collapsedProjectIds: ReadonlySet<string>
-  activeBrowserId: string | null
-  controller: BrowserResourcesController
-  language: UiPreferences['language']
-  onOpen: (resource: BrowserResource) => void
-}) {
-  const copy = browserCopy(language)
-  const available = controller.loading === false && controller.capability?.available === true
-  const [targets, setTargets] = useState(new Map<string, HTMLElement>())
-  const [collapsed, setCollapsed] = useState(readCollapsed)
-  const refreshTargets = useCallback(() => {
-    const next = new Map<string, HTMLElement>()
-    for (const project of projects) {
-      if (collapsedProjectIds.has(project.id)) continue
-      const target = findProjectExpandedElement(project.id)
-      if (target) next.set(project.id, target)
-    }
-    setTargets(current => {
-      if (current.size === next.size && [...next].every(([id, element]) => current.get(id) === element)) return current
-      return next
-    })
-  }, [collapsedProjectIds, projects])
-
-  useLayoutEffect(() => {
-    if (available) {
-      refreshTargets()
-      return
-    }
-    setTargets(current => current.size === 0 ? current : new Map())
-  }, [available, refreshTargets])
-  useEffect(() => {
-    if (!available) return undefined
-    const observer = new MutationObserver(refreshTargets)
-    observer.observe(document.body, { childList: true, subtree: true })
-    return () => observer.disconnect()
-  }, [available, refreshTargets])
-
-  const toggle = (projectId: string) => {
-    setCollapsed(current => {
-      const next = new Set(current)
-      if (next.has(projectId)) next.delete(projectId)
-      else next.add(projectId)
-      writeCollapsed(next)
-      return next
-    })
-  }
-
-  if (!available) return null
-
-  return (
-    <>
-      {projects.map(project => {
-        const target = targets.get(project.id)
-        if (!target || !project.workspace) return null
-        const resources = controller.byWorkspace.get(project.workspace) ?? []
-        if (resources.length === 0) return null
-        return createPortal(
-          <BrowserSection
-            project={project}
-            resources={resources}
-            activeBrowserId={activeBrowserId}
-            controller={controller}
-            copy={copy}
-            collapsed={collapsed.has(project.id)}
-            onToggle={() => toggle(project.id)}
-            onOpen={onOpen}
-          />,
-          target,
-          `browser-section:${project.id}`,
-        )
-      })}
-    </>
-  )
-}