From 0b99d0b9b62c1634ad2392ebaa7dd24592df2884 Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Thu, 30 Apr 2026 01:41:21 -0600
Subject: [PATCH] ui_migration bugfix(store) mixin and wot store overlap,
 calling reactive variable as function error

---
 webapp/src/components/appContent.vue          |  2 +-
 .../aboutComponents/statusPane.vue            | 30 ++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index a34b9ffa..d1afec43 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -68,7 +68,7 @@
         :tab-i-d="item.id"
         :require-connection="true"
         :current-tab="currentTab"
-      >
+      > 
         <component :is="item.component" @scroll-top="scrollToTop"></component>
       </tabContent>
     </div>
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index ada92dae..e1cfe003 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="host-input">
-    <div v-if="$store.state.available">
+    <div v-if="available">
       <div>
         <div class="uk-margin-small-bottom">
           <b>Microscope Hostname:</b>
           <br />
-          {{ $store.state.microscopeHostname }}
+          {{ microscopeHostname }}
         </div>
         <div class="uk-margin-small-bottom">
           <b>API Origin:</b>
           <br />
-          {{ $store.state.origin }}
+          {{ origin }}
         </div>
         <action-button
           v-if="illuminationType"
@@ -56,14 +56,17 @@
 
       <hr />
     </div>
-    <div v-else-if="$store.state.waiting">Loading...</div>
-    <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
+    <div v-else-if="waiting">Loading...</div>
+    <div v-else-if="error"><b>Error:</b> {{ error }}</div>
     <div v-else>No active connection</div>
   </div>
 </template>
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+import { mapState, mapWritableState } from "pinia";
+import { useSettingsStore } from "@/stores/settings.js";
+import { useWotStore } from "@/stores/wot.js";
 
 export default {
   name: "StatusPane",
@@ -79,16 +82,27 @@ export default {
   },
 
   computed: {
+    ...mapState(useSettingsStore, [
+      "origin", 
+      "microscopeHostname", 
+      "available", 
+      "waiting",
+  ]   ),
+    ...mapState(useWotStore, [
+      "thingDescriptions",
+    ]),
+    ...mapWritableState(useSettingsStore, ["error"]),
+
     cameraType() {
       // No need to check as the microscope won't start up without a camera defined
-      return this.thingDescription("camera").title;
+      return this.thingDescriptions["camera"]?.title;
     },
     stageType() {
-      return this.thingAvailable("stage") ? this.thingDescription("stage").title : undefined;
+      return this.thingAvailable("stage") ? this.thingDescriptions["stage"]?.title : undefined;
     },
     illuminationType() {
       return this.thingAvailable("illumination")
-        ? this.thingDescription("illumination").title
+        ? this.thingDescriptions["illumination"]?.title
         : undefined;
     },
   },