@necrolab/dashboard 0.4.220 → 0.5.1

package/src/App.vue

@@ -9,27 +9,23 @@
                 :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 }"
-                    >
+                        :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"
-                        />
+                            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>
@@ -38,8 +34,7 @@
                 :class="{
                     'opacity-100': ui.pullChange > 250,
                     'opacity-0': ui.pullChange < 250
-                }"
-            >
+                }">
                 Release to refresh
             </h2>
         </div>
@@ -49,12 +44,17 @@
             </div>
             <div v-else key="main-components" class="flex">
                 <Navbar v-if="layout == 'dashboard'" class="fixed" />
-                <div :class="`router-wrapper ${ui.pullChange > 1 ? '-mt-[60px]' : ''}`"></div>
-                <router-view v-slot="{ Component }">
-                    <component
-                        :is="Component"
-                        :class="`component-container pb-2 mt-0 lg:mt-4 ios-wrapper ${landscapeIos ? 'w-full' : ''}`"
-                    />
+                <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 pb-2 mt-0 lg:mt-4 ios-wrapper',
+                                { 'w-full': landscapeIos }
+                            ]" />
+                    </transition>
                 </router-view>
             </div>
         </transition>
@@ -63,7 +63,7 @@
 
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import Navbar from "@/components/ui/Navbar.vue";
 import { useUIStore } from "@/stores/ui";
@@ -88,13 +88,50 @@ function isIpadOS() {
     return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
 }
 
-window.matchMedia("(orientation: portrait)").addEventListener("change", (e) => {
-    if (!e.matches && isIOS() && !isIpadOS()) landscapeIos.value = true;
-    else landscapeIos.value = false;
-});
+// Handle orientation changes for iOS devices
+const handleOrientationChange = () => {
+    if (isIOS()) {
+        if (isIpadOS()) {
+            // For iPad, we want to allow proper viewport resizing
+            landscapeIos.value = window.matchMedia("(orientation: landscape)").matches;
+            document.documentElement.style.setProperty("width", "100%", "important");
+            document.body.style.setProperty("width", "100%", "important");
+        } else {
+            // For iPhone, maintain the current behavior
+            landscapeIos.value = window.matchMedia("(orientation: landscape)").matches;
+        }
+    }
+};
+
+// Initial orientation check
+handleOrientationChange();
+
+// Listen for orientation changes
+window.matchMedia("(orientation: portrait)").addEventListener("change", handleOrientationChange);
+window.matchMedia("(orientation: landscape)").addEventListener("change", handleOrientationChange);
 
 if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
 
+// 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);
+
+    // Set up a recurring check for the first few seconds
+    let attempts = 0;
+    const recurringCheck = setInterval(() => {
+        if (attempts++ > 10) {
+            clearInterval(recurringCheck);
+            return;
+        }
+        handleNotch();
+    }, 200);
+});
+
 // close modals on esc
 document.onkeydown = function (evt) {
     evt = evt || window.event;
@@ -122,13 +159,64 @@ document.addEventListener("keydown", function (event) {
         event.preventDefault();
     }
 });
-// prevent zoom
+// 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);
+    }
+}
+
+// Precise mouse wheel control - only allow scrolling within specific scrollable elements
 window.addEventListener(
     "mousewheel",
     function (event) {
-        if (event.ctrlKey == true) {
-            event.preventDefault();
+        // Check if we're on a scrollable textarea
+        const isScrollableTextarea =
+            event.target.tagName === "TEXTAREA" &&
+            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
+
+        // 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") ||
+                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
+
+        // Allow scrolling in navbar and modals
+        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 || isInNavbar || isInModal) {
+            // Stop propagation to prevent page scroll
+            if (isScrollableTableContent || isScrollableTextarea) {
+                event.stopPropagation();
+            }
+            return;
         }
+
+        event.preventDefault();
     },
     { passive: false }
 );
@@ -136,69 +224,349 @@ window.addEventListener(
 window.addEventListener(
     "DOMMouseScroll",
     function (event) {
-        if (event.ctrlKey == true) {
-            event.preventDefault();
+        // Use same logic as mousewheel
+        const isScrollableTextarea =
+            event.target.tagName === "TEXTAREA" &&
+            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
+
+        const isInTable = event.target.closest(".table-component");
+        const isScrollableTableContent =
+            isInTable &&
+            (event.target.closest(".grid") ||
+                event.target.closest(".table-row") ||
+                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
+
+        const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
+        const isInModal = event.target.closest('[role="dialog"]');
+
+        if (isScrollableTextarea || isScrollableTableContent || isInNavbar || isInModal) {
+            if (isScrollableTableContent || isScrollableTextarea) {
+                event.stopPropagation();
+            }
+            return;
+        }
+
+        event.preventDefault();
+    },
+    { passive: false }
+);
+
+window.addEventListener(
+    "wheel",
+    function (event) {
+        // Use same logic as mousewheel
+        const isScrollableTextarea =
+            event.target.tagName === "TEXTAREA" &&
+            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
+
+        const isInTable = event.target.closest(".table-component");
+        const isScrollableTableContent =
+            isInTable &&
+            (event.target.closest(".grid") ||
+                event.target.closest(".table-row") ||
+                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
+
+        const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
+        const isInModal = event.target.closest('[role="dialog"]');
+
+        if (isScrollableTextarea || isScrollableTableContent || isInNavbar || isInModal) {
+            if (isScrollableTableContent || isScrollableTextarea) {
+                event.stopPropagation();
+            }
+            return;
+        }
+
+        event.preventDefault();
+    },
+    { passive: false }
+);
+
+window.addEventListener(
+    "scroll",
+    function (event) {
+        event.preventDefault();
+    },
+    { passive: false }
+);
+
+// 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 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") ||
+                (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 || isInNavbar || isInModal) {
+            // For table content, ensure we stop propagation to prevent page scroll
+            if (isScrollableTableContent || isScrollableTextarea) {
+                event.stopPropagation();
+            }
+            return;
         }
+
+        // Prevent everything else
+        event.preventDefault();
     },
     { passive: false }
 );
 
-window.screen.orientation.onchange = () => {
-    if (document.body.classList.contains("overflow-hidden")) {
-        document.body.classList.remove("overflow-hidden");
-        setTimeout(() => {
-            document.body.classList.add("overflow-hidden");
-        }, 5);
+// 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;
     }
-    handleNotch();
-};
 
-document.addEventListener("DOMContentLoaded", handleNotch, false);
-window.simulateRotate = handleNotch;
+    // Always also check dimensions as backup
+    const dimensionLandscape = window.innerWidth > window.innerHeight;
+    const hasStrongLandscapeRatio = window.innerWidth / window.innerHeight > 1.5;
 
-function handleNotch() {
-    const wrappers = [...document.querySelectorAll(".ios-wrapper")];
+    // For iPhones, if dimensions clearly indicate landscape, trust that
+    if (isIOS() && !isIpadOS() && dimensionLandscape && hasStrongLandscapeRatio) {
+        return true;
+    }
 
-    // Check if the device is an iPhone with a notch
-    const hasNotch = CSS.supports("padding-left: env(safe-area-inset-left)");
+    // 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)")
+    );
+}
 
-    const orientation = window.orientation; //window.screen.orientation.angle;
-    if (!isIpadOS() && isIOS()) {
-        if (hasNotch && orientation !== 0) {
-            // Landscape mode
-            if (orientation === 90) {
-                // Notch is on the left
-                wrappers.forEach((wrapper) => {
+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 });
+
+            // 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 (orientation === -90) {
-                // Notch is on the right
-                wrappers.forEach((wrapper) => {
+                } 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";
+
+            // Apply styles instantly - NO ANIMATION
             wrappers.forEach((wrapper) => {
-                // Portrait mode or no notch
-                const amount =
-                    window.innerWidth > 1280
-                        ? "2.5rem"
-                        : window.innerWidth > 1030
-                        ? "1.5rem"
-                        : window.innerWidth > 768
-                        ? "0.5rem"
-                        : "0.5rem";
-                wrapper.style.paddingLeft = amount;
-                wrapper.style.paddingRight = amount;
+                wrapper.style.paddingLeft = padding;
+                wrapper.style.paddingRight = padding;
             });
         }
+
+        isNotchBusy = false;
+    } catch (error) {
+        console.warn("Notch error:", error);
+        isNotchBusy = false;
     }
 }
 
-// Call the function initially
-window.addEventListener("orientationchange", handleNotch);
+function triggerNotch() {
+    clearTimeout(notchTimeout);
+    notchTimeout = setTimeout(handleNotch, 50);
+}
+
+// Event listeners
+window.addEventListener("orientationchange", triggerNotch);
+window.addEventListener("resize", triggerNotch);
+if (screen.orientation) {
+    screen.orientation.addEventListener("change", triggerNotch);
+}
+
+// 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
+}
+
+// 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);
+    }
+});
+
+// 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);
+    }
+});
+
+// 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];
@@ -252,33 +620,57 @@ function maxPull() {
         return 250;
     }
 }
+// Vue router integration - aggressive triggering on route changes
 watch(
     () => router.currentRoute.value.name,
     () => {
-        setTimeout(() => handleNotch(), 5);
+        // 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">
-.task-buttons {
-    @apply flex mx-auto gap-x-4;
-    svg {
-        width: 15px;
-        height: 15px;
-    }
+// Ultra bulletproof scroll prevention
+html,
+body {
+    overflow: hidden !important;
+    overscroll-behavior: none !important;
+    width: 100% !important;
+    height: 100% !important;
+    touch-action: none !important;
 }
 
-.hidden-scrollbars::-webkit-scrollbar
-        /* Hide scrollbar for Chrome, Safari and Opera */ {
-    display: none;
+#app {
+    overflow: hidden !important;
+    overscroll-behavior: none !important;
+    width: 100% !important;
+    height: 100vh !important;
+    touch-action: none !important;
 }
 
-/* Hide scrollbar for IE, Edge and Firefox */
-.hidden-scrollbars {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-}
 .dropdown {
     position: relative;
     display: inline-block;
@@ -292,19 +684,19 @@ const layout = computed(() => router.currentRoute.value.meta.layout);
     z-index: 1;
 }
 
-.smooth-hover {
-    @apply hover:opacity-70 active:opacity-50 duration-150;
-}
-
 .layout {
     @apply flex flex-col;
     min-height: 90vh;
+    overflow: hidden !important;
+    height: 100vh !important;
 }
+
 .router-wrapper {
     @apply pt-5;
     transition: margin 0.25s;
     z-index: 0;
 }
+
 .refresh-container {
     transition: margin 0.25s;
 }
@@ -312,4 +704,25 @@ const layout = computed(() => router.currentRoute.value.meta.layout);
 .component-container {
     @apply w-full mx-auto px-4 xs:px-4 md:px-2 lg:px-6 xl:px-10;
 }
+
+// Page navigation transitions
+.page-transition-enter-active {
+    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.page-transition-leave-active {
+    transition: all 0.15s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+
+.page-transition-enter-from {
+    opacity: 0;
+    transform: translateX(15px) scale(0.98);
+    filter: blur(1px);
+}
+
+.page-transition-leave-to {
+    opacity: 0;
+    transform: translateX(-10px) scale(1.02);
+    filter: blur(0.5px);
+}
 </style>