diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss index a62898a710..03c655d3af 100644 --- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss +++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss @@ -1997,8 +1997,6 @@ $_section-header-height: 22px; flex-shrink: 0; align-items: center; justify-content: center; - border-radius: var(--openbitfun-radius-sm); - background: var(--openbitfun-color-action-quiet-hover); color: var(--openbitfun-color-content-primary); svg { @@ -2006,43 +2004,6 @@ $_section-header-height: 22px; } } -.openbitfun-device-overview__service { - display: grid; - grid-template-columns: 16px minmax(0, 1fr); - align-items: center; - gap: 7px; - min-height: 34px; - margin: var(--openbitfun-space-4) var(--openbitfun-space-5) 0; - padding: 5px 8px; - border-radius: var(--openbitfun-radius-sm); - background: var(--openbitfun-color-surface-subtle); - color: var(--openbitfun-color-content-muted); - font-size: var(--openbitfun-type-micro-font-size); - - strong { - grid-column: 2; - min-width: 0; - overflow: hidden; - color: var(--openbitfun-color-content-secondary); - font-size: var(--openbitfun-type-label-sm-font-size); - font-weight: var(--openbitfun-type-label-selected-font-weight); - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - } - - small { - grid-column: 2 / -1; - min-width: 0; - overflow: hidden; - color: var(--openbitfun-color-content-muted); - font-size: var(--openbitfun-type-overline-sm-font-size); - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - } -} - .openbitfun-nav-panel__remote-disclaimer { display: flex; flex-direction: column; diff --git a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx index 1a34cb57bd..a98661c609 100644 --- a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx +++ b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx @@ -127,7 +127,7 @@ describe('device status card', () => { expect(element('nav-device-status-summary').textContent).toContain('Build workstation'); }); - it('keeps connected controllers and their connection service visible', () => { + it('keeps connected controllers visible without the connection service card', () => { state.overview = overview({ remoteStatus: { is_connected: true, pairing_state: 'connected', @@ -140,7 +140,7 @@ describe('device status card', () => { render(); expect(element('nav-device-status-summary').textContent).toContain('Workstation'); expect(element('nav-device-status-connected-devices').textContent).toContain('My phone'); - expect(element('nav-device-connection-service').textContent).toContain('deviceOverview.sameNetwork'); + expect(document.querySelector('[data-testid="nav-device-connection-service"]')).toBeNull(); }); it('keeps detached execution activity visible without changing the primary device', () => { diff --git a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx index 3315545a47..3737f22783 100644 --- a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx +++ b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Button, Card, CardBody, CardFooter, CardHeader, Icon, ScrollArea } from '@openbitfun/ui'; import { createPortal } from 'react-dom'; -import { Cloud, Monitor, Server, Smartphone, Undo2 } from 'lucide-react'; +import { Monitor, Server, Smartphone, Undo2 } from 'lucide-react'; import { useI18n } from '@/infrastructure/i18n/hooks/useI18n'; import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost'; import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition'; @@ -15,7 +15,6 @@ import { selectActivityFacts, selectAttachedGroups, type DeviceOverviewActivityFact, - type DeviceOverviewConnectionService, type DeviceOverviewDevice, type DeviceOverviewDeviceKind, } from '../deviceInterconnectionOverview'; @@ -63,12 +62,6 @@ function DeviceIcon({ } } -function ConnectionServiceIcon({ service }: { service: DeviceOverviewConnectionService }) { - return service.kind === 'self-hosted' || service.kind === 'device-service' - ? - : ; -} - const DeviceStatusControl: React.FC = ({ open, onOpenChange, @@ -90,7 +83,6 @@ const DeviceStatusControl: React.FC = ({ const { overview, refresh, - accountService, } = useDeviceInterconnectionOverview(localDeviceLabel, t('remoteConnect.mobileBrowserTitle')); const [returningLocal, setReturningLocal] = useState(false); const triggerRef = useRef(null); @@ -188,26 +180,6 @@ const DeviceStatusControl: React.FC = ({ return device.name; }, [t]); - const serviceContent = useMemo(() => { - const service = overview.connectionService; - if (!service) return null; - switch (service.kind) { - case 'official': - return { label: t('deviceOverview.officialService'), detail: null }; - case 'self-hosted': - return { - label: t('deviceOverview.selfHostedService'), - detail: service.host, - }; - case 'local-network': - return { label: t('deviceOverview.sameNetwork'), detail: null }; - case 'public-tunnel': - return { label: t('deviceOverview.publicConnection'), detail: null }; - default: - return { label: t('deviceOverview.deviceService'), detail: service.host }; - } - }, [overview.connectionService, t]); - return ( <>