"touch mode" improvement

ui/src/components/TouchButton.vue

@@ -1,10 +1,12 @@
 <template>
+  <span>Eingabemodus:&nbsp;</span>
   <BulmaButton
+    v-bind="$attrs"
     :icon="
       'fa-solid fa-' +
       (store.is_touch_device ? 'hand-pointer' : 'arrow-pointer')
     "
-    text="Eingabemodus"
+    :text="store.is_touch_device ? 'Touch' : 'Desktop'"
     @click.left="store.toggle_touch_device"
   />
 </template>

ui/src/plugins/store.ts

@@ -3,16 +3,23 @@ import { Advent22 } from "@/plugins/advent22";
 import { AxiosBasicCredentials } from "axios";
 import { acceptHMRUpdate, defineStore } from "pinia";
 
-const check_touch_device = () => window.matchMedia("(any-hover: none)").matches;
-const empty_creds = () => ["", ""] as Credentials;
+declare global {
+  interface Navigator {
+    readonly msMaxTouchPoints: number;
+  }
+}
 
 export const advent22Store = defineStore({
   id: "advent22",
 
   state: () => ({
     advent22: {} as Advent22,
-    api_creds: empty_creds(),
-    is_touch_device: check_touch_device(),
+    api_creds: ["", ""] as Credentials,
+    is_touch_device:
+      window.matchMedia("(any-hover: none)").matches ||
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0,
     is_admin: false,
     site_config: {
       title: document.title,
@@ -70,7 +77,7 @@ export const advent22Store = defineStore({
         .catch(advent22.alert_user_error);
     },
 
-    login(creds: Credentials = empty_creds()): Promise<boolean> {
+    login(creds: Credentials): Promise<boolean> {
       this.api_creds = creds;
 
       return new Promise<boolean>((resolve, reject) => {
@@ -85,11 +92,7 @@ export const advent22Store = defineStore({
     },
 
     logout(): Promise<boolean> {
-      return this.login();
-    },
-
-    set_touch_device(state: boolean = check_touch_device()): void {
-      this.is_touch_device = state;
+      return this.login(["", ""]);
     },
 
     toggle_touch_device(): void {