@necrolab/dashboard 0.5.15 → 0.5.17

package/src/App.vue

@@ -1,58 +1,34 @@
 <template>
     <div class="layout min-h-screen h-screen">
+        <!-- iPhone Landscape Lock Overlay -->
+        <div v-if="showLandscapeLock" class="iphone-landscape-lock">
+            <div class="rotate-message">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="rotate-icon">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                <p class="rotate-text">Please rotate your device to portrait mode</p>
+            </div>
+        </div>
+
         <transition name="fade">
             <Splash v-if="isLoading" />
         </transition>
-        <div class="refresh-wrapper">
-            <div
-                class="refresh-container w-fit mx-auto"
-                :style="{
-                    'margin-top': maxPull() + 'px',
-                    transform: `rotate(${ui.pullChange}deg)`
-                }">
-                <div
-                    class="refresh-icon p-2 rounded-full mx-auto duration-200"
-                    :class="{
-                        'opacity-100': ui.pullChange > 250,
-                        'opacity-0': ui.pullChange < 250
-                    }">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        class="stroke-2 w-4 stroke-dark-400"
-                        :class="{ 'opacity-0': ui.pullChange == 0 }">
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
-                    </svg>
-                </div>
-            </div>
-            <h2
-                class="text-dark-400 text-center duration-200"
-                :class="{
-                    'opacity-100': ui.pullChange > 250,
-                    'opacity-0': ui.pullChange < 250
-                }">
-                Release to refresh
-            </h2>
-        </div>
         <transition name="out-in">
             <div v-if="spinner" key="reconnect-indicator" class="h-full">
                 <ReconnectIndicator :message="ui.spinnerMessage" />
             </div>
             <div v-else key="main-components" class="flex">
                 <Navbar v-if="layout == 'dashboard'" class="fixed" />
-                <div :class="['router-wrapper', { '-mt-[60px]': ui.pullChange > 1 }]"></div>
-                <router-view v-slot="{ Component, route }">
-                    <transition name="page-transition" mode="out-in">
-                        <component
-                            :is="Component"
-                            :key="route.path"
-                            class="component-container w-full mx-auto px-3 xs:px-3 md:px-2 lg:px-6 xl:px-10 pb-2 mt-0 lg:mt-4 ios-wrapper" />
-                    </transition>
-                </router-view>
+                <div class="router-wrapper w-full">
+                    <router-view v-slot="{ Component, route }">
+                        <transition name="page-transition" mode="out-in">
+                            <component
+                                :is="Component"
+                                :key="route.path"
+                                class="component-container w-full mx-auto px-3 xs:px-3 md:px-2 lg:px-6 xl:px-10 pb-2 ios-wrapper" />
+                        </transition>
+                    </router-view>
+                </div>
             </div>
         </transition>
     </div>
@@ -60,595 +36,123 @@
 
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import Navbar from "@/components/ui/Navbar.vue";
 import { useUIStore } from "@/stores/ui";
 import Splash from "@/components/ui/Splash.vue";
 import ReconnectIndicator from "@/components/ui/ReconnectIndicator.vue";
+import { useZoomPrevention } from "@/composables/useZoomPrevention";
+import { useIOSViewportHandling } from "@/composables/useIOSViewportHandling";
+import { useNotchHandling } from "@/composables/useNotchHandling";
 
 const ui = useUIStore();
+const { showSpinner: spinner } = storeToRefs(ui);
 const router = useRouter();
 const isLoading = ref(false);
-const spinner = storeToRefs(ui).showSpinner;
-
-function isIOS() {
-    if (/iPad|iPhone|iPod/.test(navigator.platform)) {
-        return true;
-    } else {
-        return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
-    }
-}
-
-function isIpadOS() {
-    return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
-}
-
-// Prevent pinch-to-zoom gestures
-let lastTouchDistance = 0;
 
-document.addEventListener('touchstart', (e) => {
-    if (e.touches.length > 1) {
-        e.preventDefault();
-    }
-}, { passive: false });
-
-document.addEventListener('touchmove', (e) => {
-    if (e.touches.length > 1) {
-        e.preventDefault();
-    }
-}, { passive: false });
-
-document.addEventListener('gesturestart', (e) => {
-    e.preventDefault();
-}, { passive: false });
-
-document.addEventListener('gesturechange', (e) => {
-    e.preventDefault();
-}, { passive: false });
-
-document.addEventListener('gestureend', (e) => {
-    e.preventDefault();
-}, { passive: false });
-
-// Prevent double-tap zoom
-let lastTouchEnd = 0;
-document.addEventListener('touchend', (e) => {
-    const now = Date.now();
-    if (now - lastTouchEnd <= 300) {
-        e.preventDefault();
-    }
-    lastTouchEnd = now;
-}, { passive: false });
-
-if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
+// Initialize zoom prevention (all browsers)
+const { KEY_CODES } = useZoomPrevention();
 
-// Ensure notch handling runs when Vue app mounts
-onMounted(() => {
-    // Multiple aggressive attempts on Vue mount
-    handleNotch();
-    setTimeout(handleNotch, 10);
-    setTimeout(handleNotch, 50);
-    setTimeout(handleNotch, 150);
-    setTimeout(handleNotch, 300);
+// Initialize iOS viewport handling
+useIOSViewportHandling();
 
-    // Set up a recurring check for the first few seconds
-    let attempts = 0;
-    const recurringCheck = setInterval(() => {
-        if (attempts++ > 10) {
-            clearInterval(recurringCheck);
-            return;
-        }
-        handleNotch();
-    }, 200);
-});
+// Initialize notch handling (iPhone-specific)
+const { showLandscapeLock } = useNotchHandling(ui.logger);
 
-// close modals on esc
+// ESC key handling for modals
 document.onkeydown = function (evt) {
     evt = evt || window.event;
-    var isEscape = false;
+    let isEscape = false;
     if ("key" in evt) {
         isEscape = evt.key === "Escape" || evt.key === "Esc";
     } else {
-        isEscape = evt.keyCode === 27;
+        isEscape = evt.keyCode === KEY_CODES.ESCAPE;
     }
     if (isEscape) {
         ui.activeModal = "";
     }
 };
 
-// Prevent ALL keyboard zoom combinations
-document.addEventListener("keydown", function (event) {
-    // Prevent Ctrl/Cmd + Plus/Minus/0 (various keycodes for different browsers)
-    if (
-        (event.ctrlKey || event.metaKey) &&
-        (event.which === 61 ||  // = key
-            event.which === 107 || // Numpad +
-            event.which === 173 || // Firefox -
-            event.which === 109 || // Numpad -
-            event.which === 187 || // = key (Chrome)
-            event.which === 189 || // - key
-            event.keyCode === 61 ||
-            event.keyCode === 107 ||
-            event.keyCode === 173 ||
-            event.keyCode === 109 ||
-            event.keyCode === 187 ||
-            event.keyCode === 189 ||
-            event.key === '+' ||
-            event.key === '-' ||
-            event.key === '=' ||
-            event.key === '0')
-    ) {
-        event.preventDefault();
-    }
-}, { passive: false });
-
-// Prevent Ctrl/Cmd + Mouse wheel zoom (desktop)
-document.addEventListener("wheel", function (event) {
-    if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-    }
-}, { passive: false });
-
-// Also block mousewheel for older browsers
-document.addEventListener("mousewheel", function (event) {
-    if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-    }
-}, { passive: false });
-
-// Block DOMMouseScroll for Firefox
-document.addEventListener("DOMMouseScroll", function (event) {
-    if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-    }
-}, { passive: false });
-// Nuclear iOS keyboard prevention - lock everything down
-let isIOSDevice =
-    /iPad|iPhone|iPod/.test(navigator.platform) ||
-    (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform));
-
-if (isIOSDevice) {
-    const handleViewportResize = () => {
-        if (isIpadOS()) {
-            // For iPad, allow natural viewport behavior
-            return;
-        }
-
-        // For iPhone, maintain viewport stability
-        const vh = window.innerHeight * 0.01;
-        document.documentElement.style.setProperty("--vh", `${vh}px`);
-    };
-
-    // Initial setup
-    handleViewportResize();
-
-    // Listen for viewport changes
-    window.addEventListener("resize", handleViewportResize);
-    if (window.visualViewport) {
-        window.visualViewport.addEventListener("resize", handleViewportResize);
-    }
-}
-
-// Simplified scroll control - let scrollable elements handle their own scrolling
-// Page scroll is already prevented by overflow: hidden on html/body
-
-// DOMMouseScroll handler removed - CSS overflow handles scroll prevention
-
-// Wheel and scroll handlers removed - CSS overflow: hidden on html/body prevents page scroll
-
-// Precise scroll control - only allow scrolling within specific scrollable elements
-window.addEventListener(
-    "touchmove",
-    function (event) {
-        // Check if we're touching a scrollable element directly
-        const isScrollableTextarea =
-            event.target.tagName === "TEXTAREA" &&
-            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
-
-        // Check if we're in a scrollable container
-        const isInScrollableContainer =
-            event.target.closest(".stop-pan") ||
-            event.target.closest(".overflow-y-auto") ||
-            event.target.closest(".vue-recycle-scroller") ||
-            event.target.closest(".scroller") ||
-            event.target.closest(".scrollable");
-
-        // Check if we're in a table but only allow scrolling on actual scrollable content
-        const isInTable = event.target.closest(".table-component");
-        const isScrollableTableContent =
-            isInTable &&
-            (event.target.closest(".grid") || // Table rows
-                event.target.closest(".table-row") ||
-                isInScrollableContainer ||
-                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
-
-        // Allow scrolling in navbar and modals (they handle their own boundaries)
-        const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
-        const isInModal = event.target.closest('[role="dialog"]');
-
-        // Only allow these specific cases
-        if (isScrollableTextarea || isScrollableTableContent || isInScrollableContainer || isInNavbar || isInModal) {
-            // For table content, ensure we stop propagation to prevent page scroll
-            if (isScrollableTableContent || isScrollableTextarea || isInScrollableContainer) {
-                event.stopPropagation();
-            }
-            return;
-        }
-
-        // Prevent everything else
-        event.preventDefault();
-    },
-    { passive: false }
-);
-
-// PERFECT notch handling - simple and bulletproof
-let notchTimeout;
-let isNotchBusy = false;
-let lastNotchState = null;
-let animationTimeout;
-let pendingUpdate = false;
-
-function isLandscapeMode() {
-    // Check orientation first
-    let orientationLandscape = false;
-
-    if (typeof window.orientation !== "undefined") {
-        orientationLandscape = Math.abs(window.orientation) === 90;
-    } else if (screen.orientation && typeof screen.orientation.angle !== "undefined") {
-        orientationLandscape = Math.abs(screen.orientation.angle) === 90;
-    }
-
-    // Always also check dimensions as backup
-    const dimensionLandscape = window.innerWidth > window.innerHeight;
-    const hasStrongLandscapeRatio = window.innerWidth / window.innerHeight > 1.5;
-
-    // For iPhones, if dimensions clearly indicate landscape, trust that
-    if (isIOS() && !isIpadOS() && dimensionLandscape && hasStrongLandscapeRatio) {
-        return true;
-    }
-
-    // Otherwise use orientation if available, fallback to dimensions
-    return orientationLandscape || (dimensionLandscape && hasStrongLandscapeRatio);
-}
-
-function hasDeviceNotch() {
-    // Only check for notch on actual devices that might have one
-    if (!isIOS() || isIpadOS()) return false;
-
-    return (
-        CSS.supports("padding-left: env(safe-area-inset-left)") &&
-        CSS.supports("padding-right: env(safe-area-inset-right)")
-    );
-}
-
-function handleNotch(force = false) {
-    // Simple debouncing
-    if (isNotchBusy && !force) return;
-
-    try {
-        // Only for iPhone (not iPad)
-        if (!isIOS() || isIpadOS()) return;
-
-        const wrappers = document.querySelectorAll(".ios-wrapper");
-        if (wrappers.length === 0) {
-            setTimeout(() => handleNotch(force), 100);
-            return;
-        }
-
-        const isLandscape = isLandscapeMode();
-        const hasNotch = hasDeviceNotch();
-
-        // Get orientation
-        let orientation = window.orientation;
-        if (typeof orientation === "undefined" && screen.orientation) {
-            orientation = screen.orientation.angle;
-        }
-
-        // Create state signature to prevent redundant updates
-        const currentState = `${isLandscape}-${hasNotch}-${orientation}-${window.innerWidth}x${window.innerHeight}`;
-        if (lastNotchState === currentState && !force) {
-            return;
-        }
-        lastNotchState = currentState;
-
-        isNotchBusy = true;
-
-        // Debug info
-        if (window.location.href.includes("localhost") || window.location.href.includes("5173")) {
-            console.log("🔥 Notch Debug:", {
-                isLandscape,
-                hasNotch,
-                orientation,
-                dimensions: `${window.innerWidth}x${window.innerHeight}`,
-                state: currentState
-            });
-        }
-
-        if (hasNotch && isLandscape) {
-            // Test actual safe area values to determine notch side
-            const testDiv = document.createElement("div");
-            testDiv.style.position = "fixed";
-            testDiv.style.top = "0";
-            testDiv.style.left = "0";
-            testDiv.style.visibility = "hidden";
-            testDiv.style.paddingLeft = "env(safe-area-inset-left)";
-            testDiv.style.paddingRight = "env(safe-area-inset-right)";
-            document.body.appendChild(testDiv);
-
-            const computedStyle = getComputedStyle(testDiv);
-            const leftInset = parseFloat(computedStyle.paddingLeft) || 0;
-            const rightInset = parseFloat(computedStyle.paddingRight) || 0;
-
-            document.body.removeChild(testDiv);
-
-            console.log("🔍 Safe area insets:", { leftInset, rightInset });
+// Start spinner unless in development
+if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
 
-            // Apply styles instantly - NO ANIMATION
-            wrappers.forEach((wrapper) => {
-                if (leftInset > 0) {
-                    // Notch on left
-                    wrapper.style.paddingLeft = "env(safe-area-inset-left)";
-                    wrapper.style.paddingRight = "0.5rem";
-                } else if (rightInset > 0) {
-                    // Notch on right
-                    wrapper.style.paddingLeft = "0.5rem";
-                    wrapper.style.paddingRight = "env(safe-area-inset-right)";
-                } else {
-                    // Fallback - no detectable notch
-                    wrapper.style.paddingLeft = "0.5rem";
-                    wrapper.style.paddingRight = "0.5rem";
-                }
-            });
-        } else {
-            // Portrait or no notch
-            const padding =
-                window.innerWidth > 1280
-                    ? "2.5rem"
-                    : window.innerWidth > 1030
-                    ? "1.5rem"
-                    : window.innerWidth > 768
-                    ? "0.5rem"
-                    : "0.5rem";
+const layout = computed(() => router.currentRoute.value.meta.layout);
+</script>
 
-            // Apply styles instantly - NO ANIMATION
-            wrappers.forEach((wrapper) => {
-                wrapper.style.paddingLeft = padding;
-                wrapper.style.paddingRight = padding;
-            });
-        }
+<style lang="scss">
+/* iPhone Landscape Lock Overlay */
+.iphone-landscape-lock {
+    @apply fixed inset-0 bg-dark-300 z-max hidden items-center justify-center;
 
-        isNotchBusy = false;
-    } catch (error) {
-        console.warn("Notch error:", error);
-        isNotchBusy = false;
+    @media (max-device-width: 430px) and (orientation: landscape) {
+        display: flex;
     }
 }
 
-function triggerNotch() {
-    clearTimeout(notchTimeout);
-    notchTimeout = setTimeout(handleNotch, 50);
+.rotate-message {
+    @apply text-center p-8;
 }
 
-// Event listeners
-window.addEventListener("orientationchange", triggerNotch);
-window.addEventListener("resize", triggerNotch);
-if (screen.orientation) {
-    screen.orientation.addEventListener("change", triggerNotch);
+.rotate-icon {
+    @apply w-16 h-16 mx-auto mb-4 text-accent-green;
+    animation: rotate-pulse 2s ease-in-out infinite;
 }
 
-// Aggressive initial setup to handle all scenarios
-function initNotchHandling() {
-    handleNotch(true); // Force first execution
-    setTimeout(() => handleNotch(true), 50);
-    setTimeout(() => handleNotch(true), 150);
-    setTimeout(() => handleNotch(true), 300);
-    setTimeout(() => handleNotch(true), 500);
-    setTimeout(() => handleNotch(true), 1000);
-    setTimeout(() => handleNotch(true), 2000); // Extra long delay for slow loads
+.rotate-text {
+    @apply text-white text-lg font-medium;
 }
 
-// Multiple initialization points
-if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initNotchHandling);
-} else {
-    initNotchHandling();
-}
-
-window.addEventListener("load", initNotchHandling);
-
-// Also run when page becomes visible (handles app switching)
-document.addEventListener("visibilitychange", () => {
-    if (!document.hidden) {
-        setTimeout(handleNotch, 100);
+@keyframes rotate-pulse {
+    0%, 100% {
+        transform: rotate(0deg) scale(1);
+        opacity: 1;
     }
-});
-
-// Run on focus (when returning to app)
-window.addEventListener("focus", () => {
-    setTimeout(handleNotch, 100);
-});
-
-// Watch for ios-wrapper elements appearing in DOM
-const observer = new MutationObserver((mutations) => {
-    let shouldTrigger = false;
-
-    mutations.forEach((mutation) => {
-        if (mutation.type === "childList") {
-            mutation.addedNodes.forEach((node) => {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                    if (node.classList?.contains("ios-wrapper") || node.querySelector?.(".ios-wrapper")) {
-                        shouldTrigger = true;
-                    }
-                }
-            });
-        }
-    });
-
-    if (shouldTrigger) {
-        setTimeout(() => handleNotch(true), 10);
-        setTimeout(() => handleNotch(true), 100);
+    50% {
+        transform: rotate(90deg) scale(1.1);
+        opacity: 0.8;
     }
-});
-
-// Start observing
-if (document.body) {
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true
-    });
-} else {
-    document.addEventListener("DOMContentLoaded", () => {
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true
-        });
-    });
 }
 
-// Navigation handling
-const originalPushState = history.pushState;
-const originalReplaceState = history.replaceState;
-
-history.pushState = function (...args) {
-    originalPushState.apply(this, args);
-    triggerNotch();
-};
-
-history.replaceState = function (...args) {
-    originalReplaceState.apply(this, args);
-    triggerNotch();
-};
-
-window.addEventListener("popstate", triggerNotch);
-
-// Expose for manual triggering
-window.simulateRotate = handleNotch;
-
-const pullStart = (e) => {
-    const { screenY } = e.targetTouches[0];
-    ui.setStartPoint(screenY);
-};
-const initLoading = () => {
-    // refreshCont.current.classList.add("loading");
-    setTimeout(() => {
-        isLoading.value = true;
-    }, 500);
-    setTimeout(() => {
-        window.location.reload();
-    }, 1500);
-};
-const pull = (e) => {
-    /**
-     * get the current user touch event data
-     */
-    const touch = e.targetTouches[0];
-    /**
-     * get the touch position on the screen's Y axis
-     */
-    const { screenY } = touch;
-    /**
-     * The length of the pull
-     *
-     * if the start touch position is lesser than the current touch position, calculate the difference, which gives the `pullLength`
-     *
-     * This tells us how much the user has pulled
-     */
-    let pullLength = ui.startPoint < screenY ? Math.abs(screenY - ui.startPoint) : 0;
-    ui.setPullChange(pullLength);
-};
-const endPull = (e) => {
-    if (ui.pullChange > 250) {
-        e.preventDefault();
-    }
-    if (ui.pullChange > 200) initLoading();
-    ui.setStartPoint(0);
-    ui.setPullChange(0);
-};
-window.addEventListener("touchstart", pullStart);
-window.addEventListener("touchmove", pull);
-window.addEventListener("touchend", endPull);
-
-function maxPull() {
-    if (ui.pullChange < 250) {
-        return ui.pullChange;
-    } else {
-        ui.setPullChange(250);
-        return 250;
-    }
-}
-// Vue router integration - aggressive triggering on route changes
-watch(
-    () => router.currentRoute.value.name,
-    () => {
-        // Immediate triggers
-        handleNotch();
-        triggerNotch();
-
-        // Staggered attempts
-        setTimeout(handleNotch, 10);
-        setTimeout(handleNotch, 50);
-        setTimeout(handleNotch, 150);
-        setTimeout(handleNotch, 300);
-        setTimeout(handleNotch, 500);
-    }
-);
-
-watch(
-    () => router.currentRoute.value.path,
-    () => {
-        // Immediate triggers
-        handleNotch();
-        triggerNotch();
-
-        // Staggered attempts
-        setTimeout(handleNotch, 25);
-        setTimeout(handleNotch, 100);
-        setTimeout(handleNotch, 250);
-    }
-);
-const layout = computed(() => router.currentRoute.value.meta.layout);
-</script>
-<style lang="scss">
-// Override for scrollable containers - allow proper touch scrolling
+/* Touch scrolling overrides for mobile */
 .table-component,
 .stop-pan,
-.scrollable,
 .overflow-y-auto,
 .vue-recycle-scroller,
 .console,
-[class*="scroll"] {
+[class*="scroll"]:not(.dropdown-menu-portal) {
     touch-action: pan-y !important;
 }
 
+/* Dropdown menus need both x/y panning */
+.dropdown-menu-portal {
+    touch-action: pan-x pan-y !important;
+}
+
 .table-component {
     touch-action: pan-x pan-y !important;
 }
 
+/* Dropdown positioning */
 .dropdown {
     position: relative;
     display: inline-block;
 }
 
 .dropdown-content {
-    @apply bg-dark-500 text-white shadow rounded-lg top-10 left-0;
+    @apply bg-dark-500 text-white shadow rounded-lg top-10 left-0 px-4 py-3;
     position: absolute;
     min-width: 160px;
-    padding: 12px 16px;
     z-index: 1;
 }
 
+/* Router wrapper */
 .router-wrapper {
-    @apply pt-5;
-    transition: margin 0.25s;
+    @apply pt-16 lg:pt-20;
     z-index: 0;
 }
 
-.refresh-container {
-    transition: margin 0.25s;
-}
-
-// Page navigation transitions
+/* Page transition animations */
 .page-transition-enter-active {
     transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }