@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/ui/Modal.vue

@@ -1,9 +1,17 @@
 <template>
-    <div class="modal-mask fixed inset-0 z-modal bg-overlay-dark backdrop-blur-xs flex scrollable overflow-y-auto" role="dialog" @touchmove.stop>
-        <div class="component-modal" ref="target">
+    <div
+        class="modal-mask"
+        :class="{ 'fade-in': !isClosing, 'fade-out': isClosing }"
+        role="dialog"
+        aria-modal="true"
+        @touchmove.stop>
+        <div
+            class="modal-content"
+            :class="{ 'modal-slide-in': !isClosing, 'modal-slide-out': isClosing }"
+            ref="target">
             <div class="modal-header">
                 <slot name="header" />
-                <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
+                <button @click="closeModal" class="btn-icon border-none hover:bg-dark-400 ml-auto" aria-label="Close modal">
                     <CloseIcon />
                 </button>
             </div>
@@ -21,106 +29,205 @@ import { CloseIcon } from "@/components/icons";
 
 const ui = useUIStore();
 const target = ref(null);
+const isClosing = ref(false);
+
+const closeModal = () => {
+    isClosing.value = true;
+    setTimeout(() => {
+        ui.toggleModal();
+        isClosing.value = false; // Reset for next modal
+    }, 150); // Match the animation duration
+};
 
 // Store original body styles
 let originalOverflow = "";
+let originalPosition = "";
+let originalTop = "";
+let scrollY = 0;
 
 onMounted(() => {
-    // Lock body scroll - simple overflow approach
+    isClosing.value = false; // Ensure clean state on mount
+    scrollY = window.scrollY;
     originalOverflow = document.body.style.overflow;
+    originalPosition = document.body.style.position;
+    originalTop = document.body.style.top;
+
     document.body.style.overflow = "hidden";
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.width = "100%";
 });
 
 onUnmounted(() => {
-    // Restore body scroll
-    document.body.style.overflow = originalOverflow || "";
+    document.body.style.overflow = originalOverflow;
+    document.body.style.position = originalPosition;
+    document.body.style.top = originalTop;
+    document.body.style.width = "";
+    window.scrollTo(0, scrollY);
 });
 
 onClickOutside(target, (event) => {
-    if (event.target.classList.contains("modal-mask")) ui.toggleModal();
+    if (event.target.classList.contains("modal-mask")) closeModal();
 });
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .modal-mask {
-    @apply w-screen duration-300 ease-in-out;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 2rem 1rem 4rem 1rem !important; /* More bottom padding for scrollable space */
+    @apply fixed left-0 top-0;
+    @apply flex w-screen overflow-y-auto;
+    @apply items-start justify-center;
+    @apply p-4 pt-14;
+    @apply duration-300 ease-in-out;
+    @apply z-modal-mask;
+
+    /* Background with opacity */
+    background-color: oklch(0 0 0 / 0.85);
+    backdrop-filter: blur(8px);
+
+    /* Height with modern viewport units and fallback */
     height: 100dvh;
-    overflow-y: auto;
+
+    /* Touch handling for mobile */
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y !important;
+}
 
-    @supports not (height: 100dvh) {
-        height: 100vh;
+@supports (height: 100dvh) {
+    .modal-mask {
+        height: 100dvh;
     }
 }
 
-.component-modal {
-    width: 640px;
-    overflow-y: visible;
-    @apply flex flex-col rounded-lg bg-dark-300 px-5 py-5;
-
-    .modal-header {
-        @apply flex font-bold text-white;
-
-        button {
-            @apply ml-auto;
-        }
+@supports not (height: 100dvh) {
+    .modal-mask {
+        height: 100vh;
     }
+}
 
-    .modal-body {
-        @apply flex flex-col pb-6 md:pb-4;
-        flex: 1;
+/* Tablet breakpoint */
+@media (max-width: 810px) {
+    .modal-mask {
+        @apply items-start justify-center;
+        @apply p-4 pt-12;
+        padding-bottom: 15rem !important;
     }
 }
 
-/* Desktop - extra bottom padding for scrollable space */
-@media (min-width: 811px) {
+/* Mobile portrait breakpoint */
+@media (max-width: 480px) and (orientation: portrait) {
     .modal-mask {
-        padding: 2rem 1rem 6rem 1rem !important;
+        padding-bottom: 3rem !important;
     }
 }
 
-@media (max-width: 810px) {
-    .modal-mask {
-        padding: 3rem 1rem !important; /* Mobile: more padding */
+.modal-content {
+    @apply flex flex-col rounded-lg;
+    @apply bg-dark-400 px-5 py-5;
+    @apply w-160 mb-80;
+    @apply overflow-y-visible;
+    box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.8),
+                0 0 0 1px oklch(1 0 0 / 0.05);
+}
+
+/* Mobile breakpoint for modal-content */
+@media (max-width: 480px) {
+    .modal-content {
+        margin-bottom: 25rem;
     }
+}
 
-    .component-modal {
+/* Tablet breakpoint for modal-content */
+@media (max-width: 810px) {
+    .modal-content {
         width: calc(100vw - 2rem);
+        margin-bottom: 10rem;
+    }
+}
+
+/* Mobile portrait overrides */
+@media (max-width: 480px) and (orientation: portrait) {
+    .modal-content {
+        margin-bottom: 3rem !important;
+        max-height: none !important;
     }
+}
 
+.modal-header {
+    @apply flex font-bold text-white;
+}
+
+.modal-body {
+    @apply flex flex-col flex-1;
+}
+
+/* Tablet breakpoint for modal-body */
+@media (max-width: 810px) {
     .modal-body {
-        overflow-y: visible;
-        flex: 1;
-        min-height: 0;
+        @apply pb-16 overflow-y-visible min-h-0;
     }
 }
 
-/* iPhone portrait mode - extra bottom spacing */
+/* Mobile portrait breakpoint for modal-body */
 @media (max-width: 480px) and (orientation: portrait) {
-    .modal-mask {
-        padding-bottom: 4rem !important;
+    .modal-body {
+        padding-bottom: 1rem !important;
     }
+}
+
+/* Modal animations */
+.fade-in {
+    animation: fadeIn 0.15s ease-out;
+}
 
-    .component-modal {
-        max-height: none;
+.modal-slide-in {
+    animation: slideIn 0.15s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
     }
 }
 
-/* PWA mode - extra spacing for iPhone status bar and home indicator */
-@media (display-mode: standalone) {
-    .modal-mask {
-        padding-top: 3rem !important;
-        padding-bottom: 6rem !important;
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Exit animations */
+.fade-out {
+    animation: fadeOut 0.15s ease-in forwards;
+}
+
+.modal-slide-out {
+    animation: slideOut 0.15s ease-in forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
     }
+    to {
+        opacity: 0;
+    }
+}
 
-    @media (max-width: 810px) {
-        .modal-mask {
-            padding-top: 4rem !important;
-            padding-bottom: 5rem !important;
-        }
+@keyframes slideOut {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-10px) scale(0.98);
     }
 }
 </style>

package/src/components/ui/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="navbar" :class="{ 'z-max': menuOpen }">
-        <div :class="['component-container ios-wrapper flex items-center relative px-2 sm:px-3 lg:px-4', { 'ios-wrapper': landscapeIos }]">
+    <div class="navbar" :class="{ 'force-z': menuOpen }">
+        <div :class="['component-container ios-wrapper flex items-center relative px-3 lg:px-4', { 'ios-wrapper': landscapeIos }]">
             <router-link to="/">
                 <img src="@/assets/img/logo_trans.png" class="h-6 lg:h-8 mr-4 z-30 object-cover cursor-pointer" alt="Logo: Necro" />
             </router-link>
@@ -31,7 +31,7 @@
                 </li>
             </ul>
 
-            <button class="hidden lg:block ml-auto mr-4 smooth-hover" @click="logout()">
+            <button class="hidden lg:block ml-auto mr-4 smooth-hover" @click="logout()" aria-label="Logout">
                 <LogoutIcon />
             </button>
             <h4 v-if="ui.profile?.name" class="hidden lg:block text-white text-sm font-medium">
@@ -45,12 +45,12 @@
                 v-if="ui.profile?.profilePicture"
                 :src="ui.profile?.profilePicture"
                 alt="Profile Picture"
-                class="h-10 w-10 rounded-full hidden lg:block mx-4"
+                class="size-10 rounded-full hidden lg:block mx-4"
             />
-            <div v-else class="h-10 w-10 rounded-full hidden lg:block mx-4 bg-dark-400" />
+            <div v-else class="size-10 rounded-full hidden lg:block mx-4 bg-dark-400" />
             <CountryChooser class="hidden lg:block" />
 
-            <button class="flex lg:hidden ml-auto z-30" @click="toggleMenu">
+            <button class="flex lg:hidden ml-auto z-30" @click="toggleMenu" aria-label="Toggle navigation menu" :aria-expanded="menuOpen">
                 <MenuIcon />
             </button>
         </div>
@@ -85,14 +85,14 @@
                 </ul>
                 <CountryChooser class="mx-auto block landscape:hidden mb-auto" />
                 <div class="flex mx-auto items-center landscape:mb-0">
-                    <button class="mr-4" @click="logout()">
+                    <button class="mr-4" @click="logout()" aria-label="Logout">
                         <LogoutIcon />
                     </button>
                     <h4 class="text-white text-sm font-medium mr-4">
                         <span class="text-lightgray">Logged in as </span>
                         <span class="font-black"> {{ ui.profile?.name }}</span>
                     </h4>
-                    <img :src="ui.profile?.profilePicture" alt="" class="h-10 w-10 rounded-full" />
+                    <img :src="ui.profile?.profilePicture" alt="" class="size-10 rounded-full" />
                 </div>
 
                 <div class="mx-auto mt-6 mb-14 flex gap-3 items-center">
@@ -111,15 +111,19 @@
 </template>
 <style lang="scss" scoped>
 .navbar {
-    @apply border-b py-5 fixed w-full bg-dark-300/95 backdrop-blur border-dark-600;
+    @apply border-b py-5 fixed w-full;
     top: 0;
     left: 0;
     z-index: 1000;
+    background: theme('colors.dark.300 / 0.95');
+    backdrop-filter: blur(23px);
+    -webkit-backdrop-filter: blur(23px);
+    border-color: theme('colors.border');
 
     // Consistent padding base
     padding-top: 1.25rem;
     padding-bottom: 1.25rem;
-    
+
     // Only add safe area top padding for portrait notch devices
     @supports (padding-top: env(safe-area-inset-top)) {
         @media (max-device-width: 430px) and (orientation: portrait) {
@@ -135,7 +139,7 @@
         left: 0;
         right: 0;
         height: 100px;
-        background: oklch(0.1822 0 0);
+        background: theme('colors.dark.300');
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         z-index: -1;
@@ -144,27 +148,38 @@
     ul {
         @apply gap-x-4;
 
+        // Global SVG normalization - force all icons to be identical
+        svg {
+            width: 20px !important;
+            height: 20px !important;
+            display: block !important;
+            flex-shrink: 0 !important;
+            box-sizing: border-box !important;
+        }
+
         li a {
-            @apply flex text-white text-sm items-center rounded-lg h-10 border-b-2 border-transparent;
+            @apply flex text-white text-sm items-center rounded-lg;
+            height: 40px;
+            border: 1px solid transparent;
             border-left: 3px solid transparent;
             transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
 
             svg {
-                @apply mr-2 w-5 h-5;
+                @apply mr-2;
             }
 
             &.router-link-exact-active {
-                border-bottom: 2px solid oklch(0.72 0.15 145);
-                color: oklch(0.72 0.15 145);
-                background: oklch(0.72 0.15 145 / 0.08);
+                border-bottom: 2px solid theme('colors.primary');
+                color: theme('colors.primary');
+                background: theme('colors.primary / 0.08');
                 margin-bottom: -2px;
 
                 // Mobile styling
                 @media (max-width: 1023px) {
-                    border: 2px solid oklch(0.72 0.15 145);
-                    color: oklch(0.72 0.15 145);
-                    background: oklch(0.72 0.15 145 / 0.08);
+                    border: 2px solid theme('colors.primary');
+                    color: theme('colors.primary');
+                    background: theme('colors.primary / 0.08');
                     padding: 0.5rem 0.75rem;
                     border-radius: 0.5rem;
                     margin-bottom: 0;
@@ -175,26 +190,35 @@
         // Desktop mode (lg to xl): icon-only view with perfect centering
         @media (min-width: 1024px) and (max-width: 1279px) {
             li a {
-                @apply w-10 h-10 flex items-center justify-center;
-                padding: 0;
+                width: 40px;
+                height: 40px;
+                padding: 0 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
                 position: relative;
 
                 // Hide text completely in icon-only mode
                 span {
-                    display: none;
+                    display: none !important;
                 }
 
                 svg {
-                    @apply m-0 absolute top-1/2 left-1/2;
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
                     transform: translate(-50%, -50%);
-                    padding: 0;
                 }
 
                 &.router-link-exact-active {
-                    @apply border-2 w-10 h-10 rounded-lg;
-                    border-color: oklch(0.72 0.15 145);
-                    color: oklch(0.72 0.15 145);
-                    background: oklch(0.72 0.15 145 / 0.08);
+                    border: 2px solid theme('colors.primary') !important;
+                    color: theme('colors.primary') !important;
+                    background: theme('colors.primary / 0.08') !important;
+                    border-radius: 0.5rem !important;
+                    width: 40px !important;
+                    height: 40px !important;
                 }
             }
         }
@@ -202,7 +226,8 @@
         // XL and above: full width with text
         @media (min-width: 1280px) {
             li a {
-                @apply px-4 h-10;
+                @apply px-4;
+                height: 40px;
 
                 svg {
                     @apply mr-2;
@@ -212,6 +237,9 @@
     }
 }
 
+.force-z {
+    z-index: 20000;
+}
 
 .mobile-menu {
     margin-top: 0;
@@ -231,17 +259,17 @@
 
 .version-badge {
     @apply flex items-center gap-x-2 px-3 py-2 rounded-lg border;
-    background: oklch(0.2046 0 0);
-    border-color: oklch(0.2809 0 0);
+    background: theme('colors.bg-elevated');
+    border-color: theme('colors.dark.550');
 
     .version-label {
         @apply text-xs font-medium;
-        color: oklch(0.65 0 0);
+        color: theme('colors.text-muted');
     }
 
     .version-number {
         @apply text-xs font-bold;
-        color: oklch(0.72 0.15 145);
+        color: theme('colors.primary');
     }
 }
 </style>
@@ -263,20 +291,11 @@ import { useUIStore } from "@/stores/ui";
 import router from "@/router/index";
 import CountryChooser from "@/components/ui/controls/CountryChooser.vue";
 import { sendLogout } from "@/stores/requests";
+import { useDeviceDetection } from "@/composables/useDeviceDetection";
 
 const landscapeIos = ref(false);
 
-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);
-}
+const { isIOS, isIpadOS } = useDeviceDetection();
 
 window.matchMedia("(orientation: portrait)").addEventListener("change", (e) => {
     if (!e.matches && isIOS() && !isIpadOS()) landscapeIos.value = true;

package/src/components/ui/ReadonlyFieldsSection.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mt-6 grid grid-cols-12 gap-3 pt-4 border-t border-dark-550">
+        <div v-if="data.tags && data.tags.length > 0" class="col-span-6">
+            <label class="flex items-center mb-2 text-light-200 font-medium">Tags</label>
+            <div class="flex gap-2 flex-wrap">
+                <TagLabel v-for="tag in data.tags" :key="tag" :text="tag" />
+            </div>
+        </div>
+        <div class="col-span-6">
+            <label class="flex items-center mb-2 text-light-200 font-medium">Status</label>
+            <div class="flex-gap-3 items-center h-10">
+                <StatusBadge :enabled="data.enabled" size="large" />
+                <span class="text-sm font-medium" :class="data.enabled ? 'text-green-400' : 'text-red-400'">
+                    {{ data.enabled ? 'Enabled' : 'Disabled' }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import StatusBadge from "@/components/ui/StatusBadge.vue";
+import TagLabel from "@/components/Editors/TagLabel.vue";
+
+defineProps({
+    data: {
+        type: Object,
+        required: true
+    }
+});
+</script>