From 7d0a8901fe275fe4931f16500c04bca185090586 Mon Sep 17 00:00:00 2001
From: HelgeKeck <helgekeck@hotmail.com>
Date: Mon, 5 Aug 2024 10:19:34 +0200
Subject: [PATCH] feat: improve alignment of runout sensor switch and icon
 (#1469)

Signed-off-by: Helge Keck <helgekeck@hotmail.com>
Co-authored-by: Pedro Lamas <pedrolamas@gmail.com>
---
 components.d.ts                               |  2 +-
 .../runout-sensors/RunoutSensorsCard.vue      | 51 ++++++++++---------
 src/store/printer/getters.ts                  |  1 +
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index dd1589584a..ff05cf4dcd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ActionCommandPromptDialog: typeof import('./src/components/common/ActionCommandPromptDialog.vue')['default']
diff --git a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
index f2346cf952..ad829bcf97 100644
--- a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
+++ b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
@@ -20,30 +20,36 @@
       </app-btn>
     </template>
 
-    <v-card-text>
-      <v-layout
+    <v-list>
+      <v-list-item
         v-for="item in sensors"
         :key="item.name"
-        align-center
-        justify-start
-        class="py-1"
       >
-        <span class="text-subtitle-1">{{ item.name }}</span>
-        <v-icon
-          :color="(item.filament_detected) ? 'success' : 'warning'"
-          class="ml-3"
-          left
-        >
-          {{ (item.filament_detected) ? '$checkedCircle' : '$alertCircle' }}
-        </v-icon>
-        <v-switch
-          class="ml-2"
-          color="success"
-          :input-value="item.enabled"
-          @change="changeSensor(item, $event)"
-        />
-      </v-layout>
-    </v-card-text>
+        <v-list-item-content>
+          <v-list-item-title>{{ item.prettyName }}</v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-icon>
+          <v-icon
+            v-if="item.filament_detected"
+            color="success"
+          >
+            $checkedCircle
+          </v-icon>
+          <v-icon
+            v-else
+            color="warning"
+          >
+            $alertCircle
+          </v-icon>
+        </v-list-item-icon>
+        <v-list-item-action>
+          <v-switch
+            :input-value="item.enabled"
+            @change="changeSensor(item, $event)"
+          />
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
   </collapsable-card>
 </template>
 
@@ -62,8 +68,7 @@ export default class RunoutSensorsCard extends Mixins(StateMixin) {
   }
 
   changeSensor (item: RunoutSensor, value: boolean) {
-    const enable: number = (value) ? 1 : 0
-    this.sendGcode(`SET_FILAMENT_SENSOR SENSOR=${item.name} ENABLE=${enable}`)
+    this.sendGcode(`SET_FILAMENT_SENSOR SENSOR=${item.name} ENABLE=${+value}`)
   }
 }
 </script>
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index 15a7712303..3918fe044d 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -425,6 +425,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
         const sensor = get(state.printer, item, undefined)
         sensors.push({
           name,
+          prettyName: Vue.$filters.prettyCase(name),
           ...sensor
         })
       }