feat(extension): ATX/DC/Serial extension support

ui/src/components/ActionBar.tsx

@@ -2,13 +2,12 @@ import { Button } from "@components/Button";
 import {
   useHidStore,
   useMountMediaStore,
-  useUiStore,
   useSettingsStore,
-  useVideoStore,
+  useUiStore,
 } from "@/hooks/stores";
 import { MdOutlineContentPasteGo } from "react-icons/md";
 import Container from "@components/Container";
-import { LuHardDrive, LuMaximize, LuSettings, LuSignal } from "react-icons/lu";
+import { LuCable, LuHardDrive, LuMaximize, LuSettings, LuSignal } from "react-icons/lu";
 import { cx } from "@/cva.config";
 import PasteModal from "@/components/popovers/PasteModal";
 import { FaKeyboard } from "react-icons/fa6";
@@ -17,6 +16,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import MountPopopover from "./popovers/MountPopover";
 import { Fragment, useCallback, useRef } from "react";
 import { CommandLineIcon } from "@heroicons/react/20/solid";
+import ExtensionPopover from "./popovers/ExtensionPopover";
 
 export default function Actionbar({
   requestFullscreen,
@@ -28,13 +28,12 @@ export default function Actionbar({
   const setVirtualKeyboard = useHidStore(state => state.setVirtualKeyboardEnabled);
   const toggleSidebarView = useUiStore(state => state.toggleSidebarView);
   const setDisableFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
-  const enableTerminal = useUiStore(state => state.enableTerminal);
-  const setEnableTerminal = useUiStore(state => state.setEnableTerminal);
+  const terminalType = useUiStore(state => state.terminalType);
+  const setTerminalType = useUiStore(state => state.setTerminalType);
   const remoteVirtualMediaState = useMountMediaStore(
     state => state.remoteVirtualMediaState,
   );
   const developerMode = useSettingsStore(state => state.developerMode);
-  const hdmiState = useVideoStore(state => state.hdmiState);
 
   // This is the only way to get a reliable state change for the popover
   // at time of writing this there is no mount, or unmount event for the popover
@@ -55,7 +54,7 @@ export default function Actionbar({
   );
 
   return (
-    <Container className="bg-white border-b border-b-slate-800/20 dark:bg-slate-900 dark:border-b-slate-300/20">
+    <Container className="border-b border-b-slate-800/20 bg-white dark:border-b-slate-300/20 dark:bg-slate-900">
       <div
         onKeyUp={e => e.stopPropagation()}
         onKeyDown={e => e.stopPropagation()}
@@ -68,7 +67,7 @@ export default function Actionbar({
               theme="light"
               text="Web Terminal"
               LeadingIcon={({ className }) => <CommandLineIcon className={className} />}
-              onClick={() => setEnableTerminal(!enableTerminal)}
+              onClick={() => setTerminalType(terminalType === "kvm" ? "none" : "kvm")}
             />
           )}
           <Popover>
@@ -94,7 +93,7 @@ export default function Actionbar({
               {({ open }) => {
                 checkIfStateChanged(open);
                 return (
-                  <div className="w-full max-w-xl mx-auto">
+                  <div className="mx-auto w-full max-w-xl">
                     <PasteModal />
                   </div>
                 );
@@ -136,7 +135,7 @@ export default function Actionbar({
                 {({ open }) => {
                   checkIfStateChanged(open);
                   return (
-                    <div className="w-full max-w-xl mx-auto">
+                    <div className="mx-auto w-full max-w-xl">
                       <MountPopopover />
                     </div>
                   );
@@ -188,7 +187,7 @@ export default function Actionbar({
                 {({ open }) => {
                   checkIfStateChanged(open);
                   return (
-                    <div className="w-full max-w-xl mx-auto">
+                    <div className="mx-auto w-full max-w-xl">
                       <WakeOnLanModal />
                     </div>
                   );
@@ -208,6 +207,33 @@ export default function Actionbar({
         </div>
 
         <div className="flex flex-wrap items-center gap-x-2 gap-y-2">
+          <Popover>
+            <PopoverButton as={Fragment}>
+              <Button
+                size="XS"
+                theme="light"
+                text="Extension"
+                LeadingIcon={LuCable}
+                onClick={() => {
+                  setDisableFocusTrap(true);
+                }}
+              />
+            </PopoverButton>
+            <PopoverPanel
+              anchor="bottom start"
+              transition
+              className={cx(
+                "z-10 flex w-[420px] flex-col !overflow-visible",
+                "flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
+              )}
+            >
+              {({ open }) => {
+                checkIfStateChanged(open);
+                return <ExtensionPopover />;
+              }}
+            </PopoverPanel>
+          </Popover>
+
           <div className="block lg:hidden">
             <Button
               size="XS"
@@ -243,13 +269,12 @@ export default function Actionbar({
               onClick={() => toggleSidebarView("system")}
             />
           </div>
-          <div className="items-center hidden gap-x-2 lg:flex">
+          <div className="hidden items-center gap-x-2 lg:flex">
             <div className="h-4 w-[1px] bg-slate-300 dark:bg-slate-600" />
             <Button
               size="XS"
               theme="light"
               text="Fullscreen"
-              disabled={hdmiState !== 'ready'}
               LeadingIcon={LuMaximize}
               onClick={() => requestFullscreen()}
             />