@necrolab/dashboard 0.4.61 → 0.4.208

package/src/App.vue

@@ -9,23 +9,27 @@
                 :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>
@@ -34,7 +38,8 @@
                 :class="{
                     'opacity-100': ui.pullChange > 250,
                     'opacity-0': ui.pullChange < 250
-                }">
+                }"
+            >
                 Release to refresh
             </h2>
         </div>
@@ -44,17 +49,12 @@
             </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 pb-2 mt-0 lg:mt-4 ios-wrapper',
-                                { 'w-full': landscapeIos }
-                            ]" />
-                    </transition>
+                <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' : ''}`"
+                    />
                 </router-view>
             </div>
         </transition>
@@ -63,7 +63,7 @@
 
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed, watch } from "vue";
 import { useRouter } from "vue-router";
 import Navbar from "@/components/ui/Navbar.vue";
 import { useUIStore } from "@/stores/ui";
@@ -88,50 +88,13 @@ function isIpadOS() {
     return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
 }
 
-// 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);
+window.matchMedia("(orientation: portrait)").addEventListener("change", (e) => {
+    if (!e.matches && isIOS() && !isIpadOS()) landscapeIos.value = true;
+    else landscapeIos.value = false;
+});
 
 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;
@@ -159,64 +122,13 @@ document.addEventListener("keydown", function (event) {
         event.preventDefault();
     }
 });
-// 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
+// prevent zoom
 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"));
-
-        // 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;
+        if (event.ctrlKey == true) {
+            event.preventDefault();
         }
-
-        event.preventDefault();
     },
     { passive: false }
 );
@@ -224,349 +136,69 @@ window.addEventListener(
 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 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;
+        if (event.ctrlKey == true) {
+            event.preventDefault();
         }
-
-        // 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;
+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);
     }
+    handleNotch();
+};
 
-    // 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.addEventListener("DOMContentLoaded", handleNotch, false);
+window.simulateRotate = handleNotch;
 
-            document.body.removeChild(testDiv);
+function handleNotch() {
+    const wrappers = [...document.querySelectorAll(".ios-wrapper")];
 
-            console.log("🔍 Safe area insets:", { leftInset, rightInset });
+    // Check if the device is an iPhone with a notch
+    const hasNotch = CSS.supports("padding-left: env(safe-area-inset-left)");
 
-            // Apply styles instantly - NO ANIMATION
-            wrappers.forEach((wrapper) => {
-                if (leftInset > 0) {
-                    // Notch on left
+    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) => {
                     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";
+                });
+            } else if (orientation === -90) {
+                // Notch is on the right
+                wrappers.forEach((wrapper) => {
                     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) => {
-                wrapper.style.paddingLeft = padding;
-                wrapper.style.paddingRight = padding;
+                // 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;
             });
         }
-
-        isNotchBusy = false;
-    } catch (error) {
-        console.warn("Notch error:", error);
-        isNotchBusy = false;
     }
 }
 
-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;
+// Call the function initially
+window.addEventListener("orientationchange", handleNotch);
 
 const pullStart = (e) => {
     const { screenY } = e.targetTouches[0];
@@ -620,57 +252,33 @@ function maxPull() {
         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);
+        setTimeout(() => handleNotch(), 5);
     }
 );
 const layout = computed(() => router.currentRoute.value.meta.layout);
 </script>
 <style lang="scss">
-// Ultra bulletproof scroll prevention
-html,
-body {
-    overflow: hidden !important;
-    overscroll-behavior: none !important;
-    width: 100% !important;
-    height: 100% !important;
-    touch-action: none !important;
+.task-buttons {
+    @apply flex mx-auto gap-x-4;
+    svg {
+        width: 15px;
+        height: 15px;
+    }
 }
 
-#app {
-    overflow: hidden !important;
-    overscroll-behavior: none !important;
-    width: 100% !important;
-    height: 100vh !important;
-    touch-action: none !important;
+.hidden-scrollbars::-webkit-scrollbar
+        /* Hide scrollbar for Chrome, Safari and Opera */ {
+    display: none;
 }
 
+/* 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;
@@ -684,19 +292,19 @@ body {
     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;
 }
@@ -704,25 +312,4 @@ body {
 .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>