Update pnpm-lock.yaml to include new package versions and dependencies

- Added new versions for several packages, including '@codemirror/commands@6.10.4', '@codemirror/state@6.7.1', '@lezer/common@1.5.2', '@marijn/find-cluster-break@1.0.3', 'acorn@8.17.0', 'baseline-browser-mapping@2.11.5', 'caniuse-lite@1.0.30001806', 'crelt@1.0.7', 'fs-extra@11.4.0', 'jsonfile@6.2.1', and 'lodash@4.18.1'. - Updated dependencies for existing packages to reflect the latest versions, ensuring compatibility and improved functionality.
Enhance ControlPrinter and related components with improved UI and functionality
2026-07-27 23:10:40 +01:00 · 2026-07-27 23:10:24 +01:00
8 changed files with 229 additions and 46 deletions
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@ -281,6 +281,11 @@ body {
  margin: 8px;
 }

+.farmcontrol-splitter.large > .ant-splitter-bar {
+  margin: 11px;
+  opacity: 0.6;
+}
+
 .dark-mode {
  --sb-track-color: #1d1d1d;
  --sb-thumb-color: #848484;
@ -790,3 +795,16 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 .minimal-code-block-editor .ant-typography pre {
  margin: 0;
 }
+
+.ant-splitter-panel:not(:first-child) .info-collapse .info-collapse-label {
+  margin-left: 4px;
+}
+
+.farmcontrol-splitter
+  .ant-splitter-panel:has(~ .ant-splitter-panel)
+  .info-collapse.ant-collapse.ant-collapse-icon-position-end
+  > .ant-collapse-item
+  > .ant-collapse-header
+  .ant-collapse-expand-icon {
+  padding-inline-end: 2px;
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -510,6 +510,9 @@ packages:
  '@codemirror/commands@6.10.1':
    resolution: {integrity: sha512-uWDWFypNdQmz2y1LaNJzK7fL7TYKLeUAU0npEC685OKTF3KcQ2Vu3klIM78D7I6wGhktme0lh3CuQLv0ZCrD9Q==}

+  '@codemirror/commands@6.10.4':
+    resolution: {integrity: sha512-Ryk9y9T0FFVF0cUGhAknveAyUOl/A1qReTFi+qPKtOh2Z9F4AUBz3XOrYD4ZEgZirdugVzHvd/2/Wcwy5OliTg==}
+
  '@codemirror/lang-cpp@6.0.3':
    resolution: {integrity: sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==}

@ -564,6 +567,9 @@ packages:
  '@codemirror/state@6.5.4':
    resolution: {integrity: sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==}

+  '@codemirror/state@6.7.1':
+    resolution: {integrity: sha512-9QzNDgE4EYDnAHfrTlR2lwiPciiOymLtwKK+8yHQzCc7GXhAP9xdEbEJFy2IWB1j9UGUl9BsgMmTo/ImA02T7A==}
+
  '@codemirror/theme-one-dark@6.1.3':
    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}

@ -1217,6 +1223,9 @@ packages:
  '@lezer/common@1.5.0':
    resolution: {integrity: sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==}

+  '@lezer/common@1.5.2':
+    resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
+
  '@lezer/cpp@1.1.5':
    resolution: {integrity: sha512-DIhSXmYtJKLehrjzDFN+2cPt547ySQ41nA8yqcDf/GxMc+YM736xqltFkvADL2M0VebU5I+3+4ks2Vv+Kyq3Aw==}

@ -1277,6 +1286,9 @@ packages:
  '@marijn/find-cluster-break@1.0.2':
    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}

+  '@marijn/find-cluster-break@1.0.3':
+    resolution: {integrity: sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==}
+
  '@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@ -1995,6 +2007,9 @@ packages:
  '@types/estree@1.0.8':
    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}

+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
  '@types/fs-extra@9.0.13':
    resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}

@ -2168,6 +2183,11 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

+  acorn@8.17.0:
+    resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
  agent-base@7.1.4:
    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
    engines: {node: '>= 14'}
@ -2348,8 +2368,9 @@ packages:
  base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}

-  baseline-browser-mapping@2.9.19:
-    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
+  baseline-browser-mapping@2.11.5:
+    resolution: {integrity: sha512-xJo6a6YZnwZfnyGmQKWMbVOcii7XRibjOskRh+WJ9UHQoX16xrQrcIgAMQOzfvs8XiLMx6ih/fsLPF73iY2D1A==}
+    engines: {node: '>=6.0.0'}
    hasBin: true

  bl@4.1.0:
@ -2464,8 +2485,8 @@ packages:
  camelize@1.0.1:
    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}

-  caniuse-lite@1.0.30001766:
-    resolution: {integrity: sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==}
+  caniuse-lite@1.0.30001806:
+    resolution: {integrity: sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==}

  ccount@2.0.1:
    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@ -2686,6 +2707,9 @@ packages:
  crelt@1.0.6:
    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}

+  crelt@1.0.7:
+    resolution: {integrity: sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==}
+
  cross-dirname@0.1.0:
    resolution: {integrity: sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==}

@ -3467,6 +3491,10 @@ packages:
    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
    engines: {node: '>=14.14'}

+  fs-extra@11.4.0:
+    resolution: {integrity: sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==}
+    engines: {node: '>=14.14'}
+
  fs-extra@7.0.1:
    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
    engines: {node: '>=6 <7 || >=8'}
@ -4000,6 +4028,9 @@ packages:
  jsonfile@6.2.0:
    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}

+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
+
  jsx-ast-utils@3.3.5:
    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
    engines: {node: '>=4.0'}
@ -4066,6 +4097,9 @@ packages:
  lodash@4.17.23:
    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}

+  lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+
  log-symbols@4.1.0:
    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
    engines: {node: '>=10'}
@ -6501,6 +6535,13 @@ snapshots:
      '@codemirror/view': 6.39.12
      '@lezer/common': 1.5.0

+  '@codemirror/commands@6.10.4':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.7.1
+      '@codemirror/view': 6.39.12
+      '@lezer/common': 1.5.2
+
  '@codemirror/lang-cpp@6.0.3':
    dependencies:
      '@codemirror/language': 6.12.1
@ -6632,12 +6673,16 @@ snapshots:
    dependencies:
      '@codemirror/state': 6.5.4
      '@codemirror/view': 6.39.12
-      crelt: 1.0.6
+      crelt: 1.0.7

  '@codemirror/state@6.5.4':
    dependencies:
      '@marijn/find-cluster-break': 1.0.2

+  '@codemirror/state@6.7.1':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.3
+
  '@codemirror/theme-one-dark@6.1.3':
    dependencies:
      '@codemirror/language': 6.12.1
@ -6773,7 +6818,7 @@ snapshots:
    dependencies:
      cross-dirname: 0.1.0
      debug: 4.4.3
-      fs-extra: 11.3.3
+      fs-extra: 11.4.0
      minimist: 1.2.8
      postject: 1.0.0-alpha.6
    transitivePeerDependencies:
@ -7257,6 +7302,8 @@ snapshots:

  '@lezer/common@1.5.0': {}

+  '@lezer/common@1.5.2': {}
+
  '@lezer/cpp@1.1.5':
    dependencies:
      '@lezer/common': 1.5.0
@ -7361,6 +7408,8 @@ snapshots:

  '@marijn/find-cluster-break@1.0.2': {}

+  '@marijn/find-cluster-break@1.0.3': {}
+
  '@nodelib/fs.scandir@2.1.5':
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@ -8150,7 +8199,7 @@ snapshots:

  '@types/eslint@9.6.1':
    dependencies:
-      '@types/estree': 1.0.8
+      '@types/estree': 1.0.9
      '@types/json-schema': 7.0.15
    optional: true

@ -8160,6 +8209,9 @@ snapshots:

  '@types/estree@1.0.8': {}

+  '@types/estree@1.0.9':
+    optional: true
+
  '@types/fs-extra@9.0.13':
    dependencies:
      '@types/node': 25.2.0
@ -8341,6 +8393,9 @@ snapshots:

  acorn@8.15.0: {}

+  acorn@8.17.0:
+    optional: true
+
  agent-base@7.1.4: {}

  ajv-formats@3.0.1(ajv@8.17.1):
@ -8638,7 +8693,7 @@ snapshots:

  base64-js@1.5.1: {}

-  baseline-browser-mapping@2.9.19: {}
+  baseline-browser-mapping@2.11.5: {}

  bl@4.1.0:
    dependencies:
@ -8697,8 +8752,8 @@ snapshots:

  browserslist@4.28.1:
    dependencies:
-      baseline-browser-mapping: 2.9.19
-      caniuse-lite: 1.0.30001766
+      baseline-browser-mapping: 2.11.5
+      caniuse-lite: 1.0.30001806
      electron-to-chromium: 1.5.283
      node-releases: 2.0.27
      update-browserslist-db: 1.2.3(browserslist@4.28.1)
@ -8802,7 +8857,7 @@ snapshots:

  camelize@1.0.1: {}

-  caniuse-lite@1.0.30001766: {}
+  caniuse-lite@1.0.30001806: {}

  ccount@2.0.1: {}

@ -8880,7 +8935,7 @@ snapshots:
  codemirror@6.0.2:
    dependencies:
      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/commands': 6.10.1
+      '@codemirror/commands': 6.10.4
      '@codemirror/language': 6.12.1
      '@codemirror/lint': 6.9.3
      '@codemirror/search': 6.6.0
@ -9019,6 +9074,8 @@ snapshots:

  crelt@1.0.6: {}

+  crelt@1.0.7: {}
+
  cross-dirname@0.1.0:
    optional: true

@ -9379,7 +9436,7 @@ snapshots:
      '@electron/asar': 3.4.1
      debug: 4.4.3
      fs-extra: 7.0.1
-      lodash: 4.17.23
+      lodash: 4.18.1
      temp: 0.9.4
    optionalDependencies:
      '@electron/windows-sign': 1.2.2
@ -10099,6 +10156,13 @@ snapshots:
      jsonfile: 6.2.0
      universalify: 2.0.1

+  fs-extra@11.4.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+    optional: true
+
  fs-extra@7.0.1:
    dependencies:
      graceful-fs: 4.2.11
@ -10660,6 +10724,13 @@ snapshots:
    optionalDependencies:
      graceful-fs: 4.2.11

+  jsonfile@6.2.1:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    optional: true
+
  jsx-ast-utils@3.3.5:
    dependencies:
      array-includes: 3.1.9
@ -10729,6 +10800,8 @@ snapshots:

  lodash@4.17.23: {}

+  lodash@4.18.1: {}
+
  log-symbols@4.1.0:
    dependencies:
      chalk: 4.1.2
@ -12979,7 +13052,7 @@ snapshots:
  terser@5.46.0:
    dependencies:
      '@jridgewell/source-map': 0.3.11
-      acorn: 8.15.0
+      acorn: 8.17.0
      commander: 2.20.3
      source-map-support: 0.5.21
    optional: true
--- a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
+++ b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
@ -15,6 +15,8 @@ import PropTypes from 'prop-types'

 import ObjectInfo from '../../common/ObjectInfo.jsx'
 import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
+import MultiMotionIcon from '../../../Icons/MultiMotionIcon.jsx'
+import SettingsIcon from '../../../Icons/SettingsIcon.jsx'

 import PrinterTemperaturePanel from '../../common/PrinterTemperaturePanel.jsx'
 import PrinterPositionPanel from '../../common/PrinterPositionPanel.jsx'
@ -27,7 +29,6 @@ import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
 import { useMediaQuery } from 'react-responsive'
 import AlertsDisplay from '../../common/AlertsDisplay.jsx'
 import { ApiServerContext } from '../../context/ApiServerContext.jsx'
-
 import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock.jsx'
 import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
@ -165,47 +166,88 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
  }

  const sideBarItems = (
-    <Flex gap={isMobile ? 'large' : 'middle'} vertical>
-      {collapseState.temperature && (
+    <Flex gap={'large'} vertical>
+      <InfoCollapse
+        title={'Temperature'}
+        icon={<PrinterIcon />}
+        collapseKey='temperature'
+        active={collapseState.temperature}
+        onToggle={(expanded) => updateCollapseState('temperature', expanded)}
+      >
        <Card
          style={{ width: '100%' }}
-          title='Temperature'
          size='small'
          styles={{ body: { padding: '25px' } }}
        >
-          <PrinterTemperaturePanel id={printerId} />
+          <PrinterTemperaturePanel
+            id={printerId}
+            disabled={
+              !objectFormState.objectData?.online || objectFormState.loading
+            }
+          />
        </Card>
-      )}
-      {collapseState.position && (
+      </InfoCollapse>
+
+      <InfoCollapse
+        title={'Position'}
+        icon={<PrinterIcon />}
+        collapseKey='position'
+        active={collapseState.position}
+        onToggle={(expanded) => updateCollapseState('position', expanded)}
+      >
        <Card
          style={{ width: '100%' }}
-          title='Position'
          size='small'
          styles={{ body: { padding: '25px' } }}
        >
-          <PrinterPositionPanel id={printerId} />
+          <PrinterPositionPanel
+            id={printerId}
+            disabled={
+              !objectFormState.objectData?.online || objectFormState.loading
+            }
+          />
        </Card>
-      )}
-      {collapseState.movement && (
+      </InfoCollapse>
+      <InfoCollapse
+        title={'Movement'}
+        icon={<MultiMotionIcon />}
+        collapseKey='movement'
+        active={collapseState.movement}
+        onToggle={(expanded) => updateCollapseState('movement', expanded)}
+      >
        <Card
          style={{ width: '100%' }}
-          title='Movement'
          size='small'
          styles={{ body: { padding: '25px' } }}
        >
-          <PrinterMovementPanel id={printerId} />
+          <PrinterMovementPanel
+            id={printerId}
+            disabled={
+              !objectFormState.objectData?.online || objectFormState.loading
+            }
+          />
        </Card>
-      )}
-      {collapseState.misc && (
+      </InfoCollapse>
+      <InfoCollapse
+        title={'Misc'}
+        icon={<SettingsIcon />}
+        collapseKey='misc'
+        active={collapseState.misc}
+        onToggle={(expanded) => updateCollapseState('misc', expanded)}
+      >
        <Card
          style={{ width: '100%' }}
-          title='Misc'
          size='small'
          styles={{ body: { padding: '25px' } }}
        >
-          <PrinterMiscPanel id={printerId} />
+          <PrinterMiscPanel
+            id={printerId}
+            disabled={
+              !objectFormState.objectData?.online || objectFormState.loading
+            }
+          />
        </Card>
-      )}
+      </InfoCollapse>
    </Flex>
  )

@ -290,7 +332,7 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
              ref={actionHandlerRef}
            >
              <Flex vertical>
-                <Splitter className={'farmcontrol-splitter'}>
+                <Splitter className={'farmcontrol-splitter large'}>
                  <Splitter.Panel>
                    <Flex vertical gap={'large'}>
                      <InfoCollapse
--- a/src/components/Dashboard/common/InfoCollapse.jsx
+++ b/src/components/Dashboard/common/InfoCollapse.jsx
@ -21,15 +21,20 @@ const InfoCollapse = ({
      activeKey={canCollapse ? (active ? [collapseKey] : []) : [collapseKey]}
      onChange={(keys) => onToggle(keys.length > 0)}
      expandIcon={({ isActive }) =>
-        canCollapse ? <CaretLeftOutlined rotate={isActive ? -90 : 0} /> : null
+        canCollapse ? (
+          <CaretLeftOutlined
+            rotate={isActive ? -90 : 0}
+            className='info-collapse-expand-icon'
+          />
+        ) : null
      }
-      className={`no-h-padding-collapse ${className}`}
+      className={`no-h-padding-collapse ${className} info-collapse`}
      items={[
        {
          key: collapseKey,
          children: children,
          label: (
-            <Flex align='center' gap={'middle'}>
+            <Flex align='center' gap={'middle'} className='info-collapse-label'>
              {icon}
              <Title level={5} style={{ margin: 0 }}>
                {title}
--- a/src/components/Dashboard/common/PrinterMiscPanel.jsx
+++ b/src/components/Dashboard/common/PrinterMiscPanel.jsx
@ -7,9 +7,10 @@ import merge from 'lodash/merge'

 const { Text } = Typography

-const PrinterMiscPanel = ({ id, showControls = true }) => {
+const PrinterMiscPanel = ({ id, showControls = true, disabled = false }) => {
  const { subscribeToObjectEvent, connected, sendObjectAction } =
    useContext(ApiServerContext)
+  const controlsDisabled = disabled || !connected
  const [miscData, setMiscData] = useState({
    fan: {
      speed: 0,
@ -116,6 +117,7 @@ const PrinterMiscPanel = ({ id, showControls = true }) => {
                    min={0}
                    max={1}
                    step={0.01}
+                    disabled={controlsDisabled}
                    onChange={setFanSpeed}
                    onAfterChange={handleSetFanSpeed}
                    tooltip={{ open: false }}
@ -127,6 +129,7 @@ const PrinterMiscPanel = ({ id, showControls = true }) => {
                    min={0}
                    max={1}
                    step={0.01}
+                    disabled={controlsDisabled}
                    onChange={setLcdBrightness}
                    onAfterChange={handleSetLcdBrightness}
                    tooltip={{ open: false }}
@ -138,6 +141,7 @@ const PrinterMiscPanel = ({ id, showControls = true }) => {
                    min={0}
                    max={1}
                    step={0.01}
+                    disabled={controlsDisabled}
                    onChange={setBeeperValue}
                    onAfterChange={handleSetBeeperValue}
                    tooltip={{ open: false }}
@ -188,7 +192,8 @@ const PrinterMiscPanel = ({ id, showControls = true }) => {

 PrinterMiscPanel.propTypes = {
  id: PropTypes.string.isRequired,
-  showControls: PropTypes.bool
+  showControls: PropTypes.bool,
+  disabled: PropTypes.bool
 }

 export default PrinterMiscPanel
--- a/src/components/Dashboard/common/PrinterMovementPanel.jsx
+++ b/src/components/Dashboard/common/PrinterMovementPanel.jsx
@ -19,8 +19,9 @@ import ArrowDownIcon from '../../Icons/ArrowDownIcon'
 import HomeIcon from '../../Icons/HomeIcon'
 import { ApiServerContext } from '../context/ApiServerContext'

-const PrinterMovementPanel = ({ id }) => {
+const PrinterMovementPanel = ({ id, disabled = false }) => {
  const { connected, sendObjectAction } = useContext(ApiServerContext)
+  const controlsDisabled = disabled || !connected
  const [posValue, setPosValue] = useState(10)
  const [rateValue, setRateValue] = useState(1000)
  const handlePosRadioChange = (e) => {
@ -108,6 +109,7 @@ const PrinterMovementPanel = ({ id }) => {
            >
              <Button
                icon={<ArrowUpIcon />}
+                disabled={controlsDisabled}
                onClick={() => {
                  handleMoveAxisClick('Y', false)
                }}
@ -115,6 +117,7 @@ const PrinterMovementPanel = ({ id }) => {
              <Space>
                <Button
                  icon={<ArrowLeftIcon />}
+                  disabled={controlsDisabled}
                  onClick={() => {
                    handleMoveAxisClick('X', false)
                  }}
@ -123,10 +126,14 @@ const PrinterMovementPanel = ({ id }) => {
                  menu={{ items: homeAxisButtonItems }}
                  placement='bottom'
                >
-                  <Button icon={<HomeIcon />}></Button>
+                  <Button
+                    icon={<HomeIcon />}
+                    disabled={controlsDisabled}
+                  ></Button>
                </Dropdown>
                <Button
                  icon={<ArrowRightIcon />}
+                  disabled={controlsDisabled}
                  onClick={() => {
                    handleMoveAxisClick('X', true)
                  }}
@ -134,6 +141,7 @@ const PrinterMovementPanel = ({ id }) => {
              </Space>
              <Button
                icon={<ArrowDownIcon />}
+                disabled={controlsDisabled}
                onClick={() => {
                  handleMoveAxisClick('Y', true)
                }}
@ -150,18 +158,21 @@ const PrinterMovementPanel = ({ id }) => {
            >
              <Button
                icon={<ArrowUpIcon />}
+                disabled={controlsDisabled}
                onClick={() => {
                  handleMoveAxisClick('Z', true)
                }}
              />
              <Button
                icon={<LevelBedIcon />}
+                disabled={controlsDisabled}
                onClick={() => {
                  handleLevelBedClick()
                }}
              />
              <Button
                icon={<ArrowDownIcon />}
+                disabled={controlsDisabled}
                onClick={() => {
                  handleMoveAxisClick('Z', false)
                }}
@ -178,12 +189,14 @@ const PrinterMovementPanel = ({ id }) => {
            >
              <Button
                icon={<ArrowUpIcon />}
+                disabled={controlsDisabled}
                onClick={() => {
                  handleMoveAxisClick('E', true)
                }}
              />
              <Button
                icon={<ArrowDownIcon />}
+                disabled={controlsDisabled}
                onClick={() => {
                  handleMoveAxisClick('E', false)
                }}
@ -197,6 +210,7 @@ const PrinterMovementPanel = ({ id }) => {
            onChange={handlePosRadioChange}
            value={posValue}
            name='posRadio'
+            disabled={controlsDisabled}
            style={{
              display: 'flex',
              justifyContent: 'center'
@ -219,6 +233,7 @@ const PrinterMovementPanel = ({ id }) => {
              placeholder='10 mm'
              name='posInput'
              style={{ flexGrow: 1, minWidth: '125px' }}
+              disabled={controlsDisabled}
            />
            <InputNumber
              min={1}
@ -229,6 +244,7 @@ const PrinterMovementPanel = ({ id }) => {
              placeholder='100 mm/s'
              name='rateInput'
              style={{ flexGrow: 1, minWidth: '125px' }}
+              disabled={controlsDisabled}
            />
          </Flex>
        </Flex>
@ -238,7 +254,8 @@ const PrinterMovementPanel = ({ id }) => {
 }

 PrinterMovementPanel.propTypes = {
-  id: PropTypes.string.isRequired
+  id: PropTypes.string.isRequired,
+  disabled: PropTypes.bool
 }

 export default PrinterMovementPanel
--- a/src/components/Dashboard/common/PrinterPositionPanel.jsx
+++ b/src/components/Dashboard/common/PrinterPositionPanel.jsx
@ -33,10 +33,12 @@ const CustomCollapse = styled(Collapse)`
 const PrinterPositionPanel = ({
  id,
  showControls = true,
-  showMoreInfo = true
+  showMoreInfo = true,
+  disabled = false
 }) => {
  const { subscribeToObjectEvent, connected, sendObjectAction } =
    useContext(ApiServerContext)
+  const controlsDisabled = disabled || !connected
  const [positionData, setPositionData] = useState({
    speedFactor: 1.0,
    speed: 100,
@ -224,11 +226,13 @@ const PrinterPositionPanel = ({
                        onChange={(value) => setMaxVelocity(value)}
                        onPressEnter={handleSetMaxVelocity}
                        size='small'
+                        disabled={controlsDisabled}
                      />
                      <Button
                        type='default'
                        style={{ width: 40 }}
                        onClick={handleSetMaxVelocity}
+                        disabled={controlsDisabled}
                      >
                        Set
                      </Button>
@ -249,11 +253,13 @@ const PrinterPositionPanel = ({
                          onChange={(value) => setMaxAcceleration(value)}
                          onPressEnter={handleSetMaxAcceleration}
                          size='small'
+                          disabled={controlsDisabled}
                        />
                        <Button
                          type='default'
                          style={{ width: 40 }}
                          onClick={handleSetMaxAcceleration}
+                          disabled={controlsDisabled}
                        >
                          Set
                        </Button>
@ -275,11 +281,13 @@ const PrinterPositionPanel = ({
                          onChange={(value) => setSquareCornerVelocity(value)}
                          onPressEnter={handleSetSquareCornerVelocity}
                          size='small'
+                          disabled={controlsDisabled}
                        />
                        <Button
                          type='default'
                          style={{ width: 40 }}
                          onClick={handleSetSquareCornerVelocity}
+                          disabled={controlsDisabled}
                        >
                          Set
                        </Button>
@ -301,11 +309,13 @@ const PrinterPositionPanel = ({
                          onChange={(value) => setMinCruiseRatio(value / 100)}
                          onPressEnter={handleSetMinCruiseRatio}
                          size='small'
+                          disabled={controlsDisabled}
                        />
                        <Button
                          type='default'
                          style={{ width: 40 }}
                          onClick={handleSetMinCruiseRatio}
+                          disabled={controlsDisabled}
                        >
                          Set
                        </Button>
@ -402,11 +412,13 @@ const PrinterPositionPanel = ({
                        onChange={(value) => setSpeedFactor(value)}
                        onPressEnter={handleSetSpeedFactor}
                        size='small'
+                        disabled={controlsDisabled}
                      />
                      <Button
                        type='default'
                        style={{ width: 40 }}
                        onClick={handleSetSpeedFactor}
+                        disabled={controlsDisabled}
                      >
                        Set
                      </Button>
@ -426,11 +438,13 @@ const PrinterPositionPanel = ({
                        onChange={(value) => setExtrudeFactor(value)}
                        onPressEnter={handleSetExtrudeFactor}
                        size='small'
+                        disabled={controlsDisabled}
                      />
                      <Button
                        type='default'
                        style={{ width: 40 }}
                        onClick={handleSetExtrudeFactor}
+                        disabled={controlsDisabled}
                      >
                        Set
                      </Button>
@ -494,7 +508,8 @@ const PrinterPositionPanel = ({
 PrinterPositionPanel.propTypes = {
  id: PropTypes.string.isRequired,
  showControls: PropTypes.bool,
-  showMoreInfo: PropTypes.bool
+  showMoreInfo: PropTypes.bool,
+  disabled: PropTypes.bool
 }

 export default PrinterPositionPanel
--- a/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
+++ b/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
@ -37,7 +37,8 @@ const PrinterTemperaturePanel = ({
  showBedControls = true,
  showExtruder = true,
  showBed = true,
-  showMoreInfo = true
+  showMoreInfo = true,
+  disabled = false
 }) => {
  const [temperatureData, setTemperatureData] = useState({
    extruder: {
@ -56,7 +57,7 @@ const PrinterTemperaturePanel = ({

  const { subscribeToObjectEvent, connected, sendObjectAction } =
    useContext(ApiServerContext)
-
+  const controlsDisabled = disabled || !connected
  // Sync input values with actual temperature targets
  useEffect(() => {
    if (temperatureData.extruder?.target !== undefined) {
@ -184,6 +185,7 @@ const PrinterTemperaturePanel = ({
                          extruder: { target: extruderTarget }
                        })
                      }
+                      disabled={controlsDisabled}
                    />
                    <Button
                      type='default'
@ -193,6 +195,7 @@ const PrinterTemperaturePanel = ({
                          extruder: { target: extruderTarget }
                        })
                      }
+                      disabled={controlsDisabled}
                    >
                      Set
                    </Button>
@ -204,6 +207,7 @@ const PrinterTemperaturePanel = ({
                    onClick={() =>
                      handleSetTemperature({ extruder: { target: 0 } })
                    }
+                    disabled={controlsDisabled}
                  >
                    Off
                  </Button>
@ -245,6 +249,7 @@ const PrinterTemperaturePanel = ({
                          bed: { target: bedTarget }
                        })
                      }
+                      disabled={controlsDisabled}
                    />
                    <Button
                      type='default'
@ -254,6 +259,7 @@ const PrinterTemperaturePanel = ({
                          bed: { target: bedTarget }
                        })
                      }
+                      disabled={controlsDisabled}
                    >
                      Set
                    </Button>
@ -267,6 +273,7 @@ const PrinterTemperaturePanel = ({
                        bed: { target: 0 }
                      })
                    }
+                    disabled={controlsDisabled}
                  >
                    Off
                  </Button>
@ -301,7 +308,8 @@ PrinterTemperaturePanel.propTypes = {
  showExtruder: PropTypes.bool,
  showBed: PropTypes.bool,
  showMoreInfo: PropTypes.bool,
-  shouldUnsubscribe: PropTypes.bool
+  shouldUnsubscribe: PropTypes.bool,
+  disabled: PropTypes.bool
 }

 export default PrinterTemperaturePanel