Fix network machines indicator alignment (#7535)

* Fix network machines indicator alignment
By integrating it better with the new API

* Update snapshots

* Update snapshots

* Add networkMachineStatus only behind isDesktop

* Update snapshots

* Small cleanup

* Fix test-id

* Update snapshots

* Lint

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/App.tsx

@@ -267,7 +267,7 @@ export function App() {
       <StatusBar
         globalItems={[
           networkHealthStatus,
-          networkMachineStatus,
+          ...(isDesktop() ? [networkMachineStatus] : []),
           ...defaultGlobalStatusBarItems({ location, filePath }),
         ]}
         localItems={[

src/components/NetworkMachineIndicator.tsx

@@ -1,65 +1,29 @@
-import { Popover } from '@headlessui/react'
 import { useContext } from 'react'
-import { CustomIcon } from '@src/components/CustomIcon'
 import { MachineManagerContext } from '@src/components/MachineManagerProvider'
-import Tooltip from '@src/components/Tooltip'
-import { isDesktop } from '@src/lib/isDesktop'
 import type { components } from '@src/lib/machine-api'
 import type { StatusBarItemType } from '@src/components/StatusBar/statusBarTypes'
 
-export const NetworkMachineIndicator = ({
+export const useNetworkMachineStatus = (): StatusBarItemType => {
-  className,
-}: {
-  className?: string
-}) => {
   const {
     noMachinesReason,
     machines,
     machines: { length: machineCount },
   } = useContext(MachineManagerContext)
   const reason = noMachinesReason()
-
-  return isDesktop() ? (
-    <Popover className="relative">
-      <Popover.Button
-        className={`flex items-center p-0 border-none bg-transparent dark:bg-transparent relative ${className || ''}`}
-        data-testid="network-machine-toggle"
-      >
-        <NetworkMachinesIcon machineCount={machineCount} />
-        <Tooltip position="top-left" wrapperClassName="ui-open:hidden">
-          Network machines ({machineCount}) {reason && `: ${reason}`}
-        </Tooltip>
-      </Popover.Button>
-      <Popover.Panel
-        className="absolute left-0 bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm"
-        data-testid="network-popover"
-      >
-        <NetworkMachinesPopoverContent machines={machines} />
-      </Popover.Panel>
-    </Popover>
-  ) : null
-}
-
-export const useNetworkMachineStatus = (): StatusBarItemType => {
   return {
     id: 'network-machines',
-    component: NetworkMachineIndicator,
+    'data-testid': `network-machine-toggle`,
+    label: `${machineCount}`,
+    hideLabel: machineCount === 0,
+    toolTip: {
+      children: `Network machines (${machineCount}) ${reason ? `: ${reason}` : ''}`,
+    },
+    element: 'popover',
+    icon: 'printer3d',
+    popoverContent: <NetworkMachinesPopoverContent machines={machines} />,
   }
 }
 
-function NetworkMachinesIcon({ machineCount }: { machineCount: number }) {
-  return (
-    <>
-      <CustomIcon name="printer3d" className="w-5 h-5" />
-      {machineCount > 0 && (
-        <p aria-hidden className="flex items-center justify-center text-xs">
-          {machineCount}
-        </p>
-      )}
-    </>
-  )
-}
-
 function NetworkMachinesPopoverContent({
   machines,
 }: { machines: components['schemas']['MachineInfoResponse'][] }) {

src/machines/commandBarMachine.ts

@@ -397,7 +397,6 @@ export const commandBarMachine = setup({
                     typeof o.value === 'object' &&
                     typeof argValue === 'object'
                   ) {
-                    
                     return JSON.stringify(o.value) === JSON.stringify(argValue)
                   } else {
                     return o.value === argValue

src/routes/Home.tsx

@@ -403,7 +403,7 @@ const Home = () => {
       </div>
       <StatusBar
         globalItems={[
-          networkMachineStatus,
+          ...(isDesktop() ? [networkMachineStatus] : []),
           ...defaultGlobalStatusBarItems({ location, filePath: undefined }),
         ]}
         localItems={defaultLocalStatusBarItems}