@necrolab/dashboard 0.4.50 → 0.4.52

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>
@@ -58,8 +53,7 @@
                             :class="[
                                 'component-container pb-2 mt-0 lg:mt-4 ios-wrapper',
                                 { 'w-full': landscapeIos }
-                            ]"
-                        />
+                            ]" />
                     </transition>
                 </router-view>
             </div>
@@ -94,10 +88,27 @@ 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...");
 
@@ -109,7 +120,7 @@ onMounted(() => {
     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(() => {
@@ -149,64 +160,30 @@ document.addEventListener("keydown", function (event) {
     }
 });
 // Nuclear iOS keyboard prevention - lock everything down
-let isIOSDevice = /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform));
+let isIOSDevice =
+    /iPad|iPhone|iPod/.test(navigator.platform) ||
+    (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform));
 
 if (isIOSDevice) {
-    const originalViewportHeight = window.innerHeight;
-    const originalScrollY = window.scrollY || 0;
-    
-    // Nuclear viewport lock
-    const lockViewport = () => {
-        document.documentElement.style.setProperty('height', `${originalViewportHeight}px`, 'important');
-        document.documentElement.style.setProperty('width', '100vw', 'important');
-        document.documentElement.style.setProperty('position', 'fixed', 'important');
-        document.documentElement.style.setProperty('top', `${-originalScrollY}px`, 'important');
-        document.documentElement.style.setProperty('left', '0px', 'important');
-        document.documentElement.style.setProperty('overflow', 'hidden', 'important');
-        
-        document.body.style.setProperty('height', `${originalViewportHeight}px`, 'important');
-        document.body.style.setProperty('width', '100vw', 'important');
-        document.body.style.setProperty('position', 'fixed', 'important');
-        document.body.style.setProperty('top', '0px', 'important');
-        document.body.style.setProperty('left', '0px', 'important');
-        document.body.style.setProperty('overflow', 'hidden', 'important');
-        
-        const app = document.getElementById('app');
-        if (app) {
-            app.style.setProperty('height', `${originalViewportHeight}px`, 'important');
-            app.style.setProperty('width', '100vw', 'important');
-            app.style.setProperty('overflow', 'hidden', 'important');
+    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`);
     };
-    
-    // Lock immediately
-    lockViewport();
-    
-    // Prevent ALL viewport events
-    window.addEventListener('resize', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        lockViewport();
-        return false;
-    }, { passive: false, capture: true });
-    
+
+    // Initial setup
+    handleViewportResize();
+
+    // Listen for viewport changes
+    window.addEventListener("resize", handleViewportResize);
     if (window.visualViewport) {
-        window.visualViewport.addEventListener('resize', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            lockViewport();
-            return false;
-        }, { passive: false });
+        window.visualViewport.addEventListener("resize", handleViewportResize);
     }
-    
-    // Override window.innerHeight
-    Object.defineProperty(window, 'innerHeight', {
-        get: () => originalViewportHeight,
-        configurable: false
-    });
-    
-    // Continuous enforcement
-    setInterval(lockViewport, 200);
 }
 
 // Precise mouse wheel control - only allow scrolling within specific scrollable elements
@@ -214,22 +191,22 @@ window.addEventListener(
     "mousewheel",
     function (event) {
         // 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'));
-        
+        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'))
-        );
-        
+        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 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
@@ -238,7 +215,7 @@ window.addEventListener(
             }
             return;
         }
-        
+
         event.preventDefault();
     },
     { passive: false }
@@ -248,27 +225,27 @@ window.addEventListener(
     "DOMMouseScroll",
     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 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 }
@@ -278,27 +255,27 @@ 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 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 }
@@ -317,22 +294,22 @@ 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'));
-        
+        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'))
-        );
-        
+        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 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
@@ -341,7 +318,7 @@ window.addEventListener(
             }
             return;
         }
-        
+
         // Prevent everything else
         event.preventDefault();
     },
@@ -358,22 +335,22 @@ let pendingUpdate = false;
 function isLandscapeMode() {
     // Check orientation first
     let orientationLandscape = false;
-    
-    if (typeof window.orientation !== 'undefined') {
+
+    if (typeof window.orientation !== "undefined") {
         orientationLandscape = Math.abs(window.orientation) === 90;
-    } else if (screen.orientation && typeof screen.orientation.angle !== 'undefined') {
+    } 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;
-    
+    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);
 }
@@ -381,46 +358,48 @@ function isLandscapeMode() {
 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)");
+
+    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) {
+        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:', {
+        if (window.location.href.includes("localhost") || window.location.href.includes("5173")) {
+            console.log("🔥 Notch Debug:", {
                 isLandscape,
                 hasNotch,
                 orientation,
@@ -428,34 +407,34 @@ function handleNotch(force = false) {
                 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)';
+            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 });
-            
+
+            console.log("🔍 Safe area insets:", { leftInset, rightInset });
+
             // Apply styles instantly - NO ANIMATION
-            wrappers.forEach(wrapper => {
+            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  
+                    // Notch on right
                     wrapper.style.paddingLeft = "0.5rem";
                     wrapper.style.paddingRight = "env(safe-area-inset-right)";
                 } else {
@@ -466,21 +445,25 @@ function handleNotch(force = false) {
             });
         } 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 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 => {
+            wrappers.forEach((wrapper) => {
                 wrapper.style.paddingLeft = padding;
                 wrapper.style.paddingRight = padding;
             });
         }
-        
+
         isNotchBusy = false;
-        
     } catch (error) {
-        console.warn('Notch error:', error);
+        console.warn("Notch error:", error);
         isNotchBusy = false;
     }
 }
@@ -491,10 +474,10 @@ function triggerNotch() {
 }
 
 // Event listeners
-window.addEventListener('orientationchange', triggerNotch);
-window.addEventListener('resize', triggerNotch);
+window.addEventListener("orientationchange", triggerNotch);
+window.addEventListener("resize", triggerNotch);
 if (screen.orientation) {
-    screen.orientation.addEventListener('change', triggerNotch);
+    screen.orientation.addEventListener("change", triggerNotch);
 }
 
 // Aggressive initial setup to handle all scenarios
@@ -509,43 +492,42 @@ function initNotchHandling() {
 }
 
 // Multiple initialization points
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initNotchHandling);
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initNotchHandling);
 } else {
     initNotchHandling();
 }
 
-window.addEventListener('load', initNotchHandling);
+window.addEventListener("load", initNotchHandling);
 
 // Also run when page becomes visible (handles app switching)
-document.addEventListener('visibilitychange', () => {
+document.addEventListener("visibilitychange", () => {
     if (!document.hidden) {
         setTimeout(handleNotch, 100);
     }
 });
 
 // Run on focus (when returning to app)
-window.addEventListener('focus', () => {
+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') {
+        if (mutation.type === "childList") {
             mutation.addedNodes.forEach((node) => {
                 if (node.nodeType === Node.ELEMENT_NODE) {
-                    if (node.classList?.contains('ios-wrapper') || 
-                        node.querySelector?.('.ios-wrapper')) {
+                    if (node.classList?.contains("ios-wrapper") || node.querySelector?.(".ios-wrapper")) {
                         shouldTrigger = true;
                     }
                 }
             });
         }
     });
-    
+
     if (shouldTrigger) {
         setTimeout(() => handleNotch(true), 10);
         setTimeout(() => handleNotch(true), 100);
@@ -554,15 +536,15 @@ const observer = new MutationObserver((mutations) => {
 
 // Start observing
 if (document.body) {
-    observer.observe(document.body, { 
-        childList: true, 
-        subtree: true 
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
     });
 } else {
-    document.addEventListener('DOMContentLoaded', () => {
-        observer.observe(document.body, { 
-            childList: true, 
-            subtree: true 
+    document.addEventListener("DOMContentLoaded", () => {
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
         });
     });
 }
@@ -571,17 +553,17 @@ if (document.body) {
 const originalPushState = history.pushState;
 const originalReplaceState = history.replaceState;
 
-history.pushState = function(...args) {
+history.pushState = function (...args) {
     originalPushState.apply(this, args);
     triggerNotch();
 };
 
-history.replaceState = function(...args) {
+history.replaceState = function (...args) {
     originalReplaceState.apply(this, args);
     triggerNotch();
 };
 
-window.addEventListener('popstate', triggerNotch);
+window.addEventListener("popstate", triggerNotch);
 
 // Expose for manual triggering
 window.simulateRotate = handleNotch;
@@ -645,7 +627,7 @@ watch(
         // Immediate triggers
         handleNotch();
         triggerNotch();
-        
+
         // Staggered attempts
         setTimeout(handleNotch, 10);
         setTimeout(handleNotch, 50);
@@ -658,10 +640,10 @@ watch(
 watch(
     () => router.currentRoute.value.path,
     () => {
-        // Immediate triggers  
+        // Immediate triggers
         handleNotch();
         triggerNotch();
-        
+
         // Staggered attempts
         setTimeout(handleNotch, 25);
         setTimeout(handleNotch, 100);
@@ -672,7 +654,8 @@ const layout = computed(() => router.currentRoute.value.meta.layout);
 </script>
 <style lang="scss">
 // Ultra bulletproof scroll prevention
-html, body {
+html,
+body {
     overflow: hidden !important;
     overscroll-behavior: none !important;
     width: 100% !important;