From 15d1cd85584623b14ef6abc6e09ce0ac28ecce93 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Wed, 4 Mar 2026 14:55:43 +0100
Subject: [PATCH] Refactor LongPressListener to use computed props for safer
 reactivity and simplify MobileHeader path check logic with optional chaining
 adjustments.

---
 .../elements/wrappers/LongPressListener.vue   | 30 ++++---------------
 .../viewport/page/headers/MobileHeader.vue    |  2 +-
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/components/viewport/elements/wrappers/LongPressListener.vue b/src/components/viewport/elements/wrappers/LongPressListener.vue
index 25db6bfa..9b4bafb4 100644
--- a/src/components/viewport/elements/wrappers/LongPressListener.vue
+++ b/src/components/viewport/elements/wrappers/LongPressListener.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, defineEmits, defineProps, onMounted, onBeforeUnmount, watch} from 'vue';
+import {ref, computed, defineEmits, defineProps, onBeforeUnmount} from 'vue';
 
 const props = defineProps({
   style: {
@@ -46,28 +46,9 @@ const onLongPress = () => {
   console.warn('Long press detected');
 }
 
-// When the parent component passes down a style object, use it
-const styleFromParent = ref(props.style);
-const classesFromParent = ref(props.class);
-
-onMounted(() => {
-  styleFromParent.value = props.style;
-  classesFromParent.value = props.class;
-});
-
-onBeforeUnmount(() => {
-  clearTimeout(timerId.value);
-});
-
-watch(() => props.style, (newStyle) => {
-  styleFromParent.value = newStyle;
-});
-
-watch(() => props.class, (newClass) => {
-  classesFromParent.value = newClass;
-})
-
-const wrapper = ref(null);
+// Forward props reactively and safely
+const styleFromParent = computed(() => props.style ?? {});
+const classesFromParent = computed(() => props.class ?? []);
 
 
 </script>
@@ -75,8 +56,7 @@ const wrapper = ref(null);
 <template>
   <div @pointerdown="pointerDown" @pointerup="pointerUp" @pointerleave="pointerLeave"
        :style="styleFromParent"
-       :class="classesFromParent"
-       ref="wrapper">
+       :class="classesFromParent">
     <slot v-bind="$attrs"/>
   </div>
 </template>
diff --git a/src/components/viewport/page/headers/MobileHeader.vue b/src/components/viewport/page/headers/MobileHeader.vue
index 004a829d..49f0ebee 100644
--- a/src/components/viewport/page/headers/MobileHeader.vue
+++ b/src/components/viewport/page/headers/MobileHeader.vue
@@ -70,7 +70,7 @@ const showProfile = computed(() => {
         </router-link>
         <!-- Return to own account if impersonating -->
         <template v-if="SessionUser.hasSuperUserToken()">
-          <router-link class="button is-white" to="/auth/return" :class="{'pl-1': SessionUser.canAccessAdmin() && !route.path.includes('/admin')}">
+          <router-link class="button is-white" to="/auth/return" :class="{'pl-1': SessionUser.canAccessAdmin() && !(route?.path || '').includes('/admin')}">
                 <span class="icon">
                   <i class="fas fa-undo-alt" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
                 </span>