Merge pull request #7035 from FlowFuse/7031-immersive-developer-mode-tab

[7031] Immersive editor drawer: restore Developer Mode tab

Author: n-lark

frontend/src/pages/device/DeveloperMode/index.vue

@@ -5,7 +5,7 @@
                 <BeakerIcon />
             </template>
             <template #content>
-                <InfoCardRow property="Editor Access:">
+                <InfoCardRow v-if="!isImmersiveEditor" property="Editor Access:">
                     <template #value>
                         <div class="flex gap-9 items-center">
                             <div class="font-medium forge-badge" :class="'forge-status-' + (editorEnabled ? (editorTunnelConnected ? 'running' : 'error') : 'stopped')">
@@ -84,7 +84,7 @@
                             <ff-button
                                 :disabled="createSnapshotDisabled"
                                 kind="secondary"
-                                class="w-28 whitespace-nowrap"
+                                class="whitespace-nowrap"
                                 size="small"
                                 data-action="create-snapshot-dialog"
                                 @click="showCreateSnapshotDialog"
@@ -180,6 +180,9 @@ export default {
         },
         deviceIsApplicationOwned () {
             return this.device.ownerType === 'application'
+        },
+        isImmersiveEditor () {
+            return this.$route.name === 'device-editor-developer-mode'
         }
     },
     watch: {

frontend/src/pages/device/Editor/index.vue

@@ -228,13 +228,13 @@ export default {
                     label: 'Settings',
                     to: { name: 'device-editor-settings' },
                     tag: 'device-settings'
+                },
+                {
+                    label: 'Developer Mode',
+                    to: { name: 'device-editor-developer-mode' },
+                    tag: 'device-devmode',
+                    hidden: !(this.isDevModeAvailable && this.device.mode === 'developer')
                 }
-                // {
-                //     label: 'Developer Mode',
-                //     to: { name: 'device-editor-developer-mode' },
-                //     tag: 'device-devmode',
-                //     hidden: !(this.isDevModeAvailable && this.device.mode === 'developer')
-                // }
             ]
         },
         permissionContext () {