feat: expands tool change support to commands

src/components/widgets/toolhead/ToolChangeCommands.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-row v-if="toolChangeCommands.length > 0">
+    <v-col>
+      <app-btn-group>
+        <v-tooltip
+          v-for="(macro, index) of toolChangeCommands"
+          :key="index"
+          top
+        >
+          <template #activator="{ on, attrs }">
+            <app-btn
+              v-bind="attrs"
+              min-width="10"
+              :color="macro.color"
+              :disabled="!klippyReady || printerPrinting"
+              class="px-0 flex-grow-1"
+              v-on="on"
+              @click="sendGcode(macro.name)"
+            >
+              {{ macro.name }}
+            </app-btn>
+          </template>
+          {{ macro.description }}
+        </v-tooltip>
+      </app-btn-group>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+
+type ToolChangeCommand = {
+  name: string,
+  description: string,
+  color?: string,
+  active?: boolean
+}
+
+@Component({})
+export default class ToolChangeCommands extends Mixins(StateMixin) {
+  get toolChangeCommands (): ToolChangeCommand[] {
+    const availableCommands = this.$store.state.console.availableCommands
+
+    return Object.keys(availableCommands)
+      .filter(command => /^t\d+$/i.test(command))
+      .map(command => {
+        const description = availableCommands[command] !== 'G-Code macro'
+          ? availableCommands[command]
+          : this.$t('app.tool.tooltip.select_tool', { tool: command.substring(1) })
+
+        const macro = this.$store.getters['macros/getMacroByName'](command.toLowerCase())
+
+        return {
+          name: command,
+          description,
+          color: macro?.variables?.color ? `#${macro.variables.color}` : undefined,
+          active: macro?.variables?.active ?? false
+        } satisfies ToolChangeCommand
+      })
+      .sort((a, b) => {
+        const numberA = parseInt(a.name.substring(1))
+        const numberB = parseInt(b.name.substring(1))
+
+        return numberA - numberB
+      })
+  }
+}
+</script>

src/components/widgets/toolhead/Toolhead.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-card-text>
-      <tool-change-macros />
+      <tool-change-commands />
 
       <v-row
         justify="space-between"
@@ -52,7 +52,7 @@ import SpeedAndFlowAdjust from './SpeedAndFlowAdjust.vue'
 import PressureAdvanceAdjust from './PressureAdvanceAdjust.vue'
 import ExtruderStats from './ExtruderStats.vue'
 import ExtruderSteppers from './ExtruderSteppers.vue'
-import ToolChangeMacros from './ToolChangeMacros.vue'
+import ToolChangeCommands from './ToolChangeCommands.vue'
 import { Extruder } from '@/store/printer/types'
 import { ToolheadControlStyle } from '@/store/config/types'
 
@@ -68,7 +68,7 @@ import { ToolheadControlStyle } from '@/store/config/types'
     PressureAdvanceAdjust,
     ExtruderStats,
     ExtruderSteppers,
-    ToolChangeMacros
+    ToolChangeCommands
   }
 })
 export default class Toolhead extends Mixins(StateMixin) {

src/locales/en.yaml

@@ -662,6 +662,7 @@ app:
       manual_probe: Manual Probe
       motors_off: Motors Off
       relative_positioning: Relative Positioning
+      select_tool: Select tool %{tool}
       tools: Tools
     label:
       stats_active_extruder: >-

src/store/macros/getters.ts

@@ -47,6 +47,12 @@ export const getters: GetterTree<MacrosState, RootState> = {
     return macros
   },
 
+  getMacroByName: (state, getters) => (name: string) => {
+    const macros = getters.getMacros as Macro[]
+
+    return macros.find(macro => macro.name === name)
+  },
+
   // Gets visible macros, transformed. Should include the macro's config.
   // Is only used on the dashboard. Grouped by category.
   getVisibleMacros: (state, getters) => {