@necrolab/dashboard 0.5.12 → 0.5.14

package/src/components/ui/FormField.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="input-wrapper" :class="{ 'relative-positioned': zIndex, [`z-${zIndex}`]: zIndex }">
+        <slot name="label">
+            <label v-if="label" class="label-override mb-2">
+                {{ label }}
+                <component v-if="icon" :is="icon" />
+            </label>
+        </slot>
+        <div :class="`input-default ${required ? 'required' : ''} ${error ? 'error' : ''}`">
+            <slot />
+            <div v-if="incrementer" class="input-incrementer">
+                <button @click="$emit('increment')" type="button">
+                    <UpIcon />
+                </button>
+                <button @click="$emit('decrement')" type="button">
+                    <DownIcon />
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { UpIcon, DownIcon } from '@/components/icons';
+
+defineProps({
+    label: { type: String, default: '' },
+    icon: { type: Object, default: null },
+    required: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    incrementer: { type: Boolean, default: false },
+    zIndex: { type: String, default: '' }
+});
+
+defineEmits(['increment', 'decrement']);
+</script>
+
+<style lang="scss" scoped>
+.input-wrapper {
+    label {
+        @apply flex items-center;
+    }
+}
+
+.relative-positioned {
+    @apply relative;
+}
+
+.z-0 {
+    z-index: 0;
+}
+
+.z-1 {
+    z-index: 1;
+}
+
+.z-2 {
+    z-index: 2;
+}
+
+.z-dropdown {
+    z-index: 100;
+}
+
+.z-tooltip {
+    z-index: 2000;
+}
+
+.error {
+    @apply border-2 border-error-300;
+}
+
+// Incrementer styles handled by forms.scss
+</style>

package/src/components/ui/InfoRow.vue

@@ -0,0 +1,100 @@
+<template>
+    <div
+        class="info-row"
+        :class="{ 'items-start': alignStart, [customClass]: customClass }">
+        <component v-if="icon" :is="icon" class="info-icon" :class="{ 'flex-shrink-0': alignStart }" />
+        <span v-if="iconText" class="info-icon flex items-center justify-center text-base font-bold" :class="{ 'flex-shrink-0': alignStart }">
+            {{ iconText }}
+        </span>
+        <span class="info-label" :class="{ 'flex-shrink-0': alignStart }">{{ label }}</span>
+        <span class="info-value" :class="valueClass">
+            <slot>{{ value }}</slot>
+        </span>
+        <button
+            v-if="copyable"
+            @click="handleCopy"
+            class="copy-button"
+            :class="{ 'copied': showCopied }">
+            <component :is="showCopied ? CheckIcon : CopyIcon" class="w-4 h-4" />
+        </button>
+        <slot name="action" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { CopyIcon, CheckIcon } from '@/components/icons';
+
+const props = defineProps({
+    icon: { type: Object, default: null },
+    iconText: { type: String, default: '' },
+    label: { type: String, required: true },
+    value: { type: String, default: '' },
+    copyable: { type: Boolean, default: false },
+    copyValue: { type: String, default: '' },
+    copyMessage: { type: String, default: 'Copied' },
+    customClass: { type: String, default: '' },
+    valueClass: { type: String, default: '' },
+    alignStart: { type: Boolean, default: false }
+});
+
+const showCopied = ref(false);
+
+const handleCopy = () => {
+    const textToCopy = props.copyValue || props.value;
+    navigator.clipboard.writeText(textToCopy);
+
+    // Show checkmark for 2 seconds
+    showCopied.value = true;
+    setTimeout(() => {
+        showCopied.value = false;
+    }, 2000);
+};
+</script>
+
+<style lang="scss" scoped>
+.info-row {
+    @apply flex items-center gap-3 px-3 py-2 rounded-lg;
+    @apply bg-dark-500 border border-dark-600;
+    @apply min-h-10;
+}
+
+.info-icon {
+    @apply w-4 h-4 flex-shrink-0 text-light-300;
+
+    svg {
+        @apply text-light-300 w-4 h-4;
+    }
+}
+
+.info-label {
+    @apply text-xs font-medium flex-shrink-0 text-light-500;
+    @apply min-w-[100px];
+
+    @media (max-width: 768px) {
+        @apply min-w-20 text-[11px];
+    }
+}
+
+.info-value {
+    @apply text-sm flex-1 text-light-300;
+    @apply break-words overflow-hidden;
+    min-width: 0; // Allow flex item to shrink below content size
+
+    @media (max-width: 768px) {
+        @apply text-[13px];
+    }
+}
+
+.copy-button {
+    @apply flex items-center justify-center;
+    @apply w-8 h-8 rounded transition-all duration-150;
+    @apply bg-transparent text-light-500 hover:text-light-300 hover:bg-dark-600;
+    @apply flex-shrink-0;
+    @apply ml-2; // Ensure spacing from value
+
+    &.copied {
+        @apply text-accent-green;
+    }
+}
+</style>

package/src/components/ui/Modal.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="modal-mask scrollable overflow-y-auto" role="dialog" @touchmove.stop>
-        <div class="component-modal" ref="target">
+    <div class="modal-mask fixed inset-0 z-modal bg-overlay-dark backdrop-blur-xs flex pt-14 scrollable overflow-y-auto" role="dialog" @touchmove.stop>
+        <div class="component-modal mb-8 mobile-portrait:mb-16" ref="target">
             <div class="modal-header">
                 <slot name="header" />
                 <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
@@ -56,14 +56,10 @@ onClickOutside(target, (event) => {
 </script>
 <style lang="scss" scoped>
 .modal-mask {
-    @apply fixed left-0 top-0 flex w-screen duration-300 ease-in-out;
-    z-index: 25000;
+    @apply w-screen duration-300 ease-in-out;
     align-items: flex-start;
     justify-content: center;
     padding: 1rem;
-    padding-top: 3.5rem;
-    background-color: rgba(17, 17, 17, 0.85);
-    backdrop-filter: blur(4px);
     height: 100dvh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -76,14 +72,9 @@ onClickOutside(target, (event) => {
 
 .component-modal {
     width: 640px;
-    margin-bottom: 20rem;
     overflow-y: visible;
     @apply flex flex-col rounded-lg bg-dark-300 px-5 py-5;
 
-    @media (max-width: 480px) {
-        margin-bottom: 25rem;
-    }
-
     .modal-header {
         @apply flex font-bold text-white;
 
@@ -93,7 +84,7 @@ onClickOutside(target, (event) => {
     }
 
     .modal-body {
-        @apply flex flex-col;
+        @apply flex flex-col pb-6 md:pb-4;
         flex: 1;
     }
 }
@@ -104,16 +95,14 @@ onClickOutside(target, (event) => {
         justify-content: center;
         padding: 1rem;
         padding-top: 3rem;
-        padding-bottom: 15rem !important;
     }
 
     .component-modal {
         width: calc(100vw - 2rem);
-        margin-bottom: 10rem;
+        margin-bottom: 3rem;
     }
 
     .modal-body {
-        padding-bottom: 4rem;
         overflow-y: visible;
         flex: 1;
         min-height: 0;
@@ -122,38 +111,8 @@ onClickOutside(target, (event) => {
 
 /* iPhone portrait mode - extra spacing for create button */
 @media (max-width: 480px) and (orientation: portrait) {
-    .modal-mask {
-        padding-bottom: 3rem !important;
-    }
-
     .component-modal {
-        margin-bottom: 3rem !important;
-        max-height: none !important;
-    }
-
-    .modal-body {
-        padding-bottom: 1rem !important;
+        max-height: none;
     }
 }
-
-// iPhone landscape mode - proper modal centering with consistent spacing
-// @media (max-height: 500px) and (orientation: landscape) {
-//     .modal-mask {
-//         padding: 1rem 1rem 4rem 1rem !important;
-//         align-items: center !important;
-//         justify-content: center !important;
-//         padding-bottom: 3rem !important; // Extra padding for create button on iPhone
-//     }
-
-//     .component-modal {
-//         max-height: calc(100vh - 10rem) !important;
-//         overflow-y: auto !important;
-//         margin: 0 !important;
-//         margin-bottom: 30px;
-//     }
-
-//     .modal-body {
-//         padding-bottom: 1rem !important;
-//     }
-// }
 </style>

package/src/components/ui/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="navbar" :class="{ 'force-z': menuOpen }">
-        <div :class="['component-container ios-wrapper flex items-center relative', { 'ios-wrapper': landscapeIos }]">
+    <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 }]">
             <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>
@@ -111,14 +111,10 @@
 </template>
 <style lang="scss" scoped>
 .navbar {
-    @apply border-b py-5 fixed w-full;
+    @apply border-b py-5 fixed w-full bg-dark-300/95 backdrop-blur border-dark-600;
     top: 0;
     left: 0;
     z-index: 1000;
-    background: oklch(0.1822 0 0 / 0.95);
-    backdrop-filter: blur(23px);
-    -webkit-backdrop-filter: blur(23px);
-    border-color: oklch(0.26 0 0);
 
     // Consistent padding base
     padding-top: 1.25rem;
@@ -148,25 +144,14 @@
     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;
-            height: 40px;
-            border: 1px solid transparent;
+            @apply flex text-white text-sm items-center rounded-lg h-10 border-b-2 border-transparent;
             border-left: 3px solid transparent;
             transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
 
             svg {
-                @apply mr-2;
+                @apply mr-2 w-5 h-5;
             }
 
             &.router-link-exact-active {
@@ -190,35 +175,26 @@
         // Desktop mode (lg to xl): icon-only view with perfect centering
         @media (min-width: 1024px) and (max-width: 1279px) {
             li a {
-                width: 40px;
-                height: 40px;
-                padding: 0 !important;
-                display: flex !important;
-                align-items: center !important;
-                justify-content: center !important;
+                @apply w-10 h-10 flex items-center justify-center;
+                padding: 0;
                 position: relative;
 
                 // Hide text completely in icon-only mode
                 span {
-                    display: none !important;
+                    display: none;
                 }
 
                 svg {
-                    margin: 0 !important;
-                    padding: 0 !important;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
+                    @apply m-0 absolute top-1/2 left-1/2;
                     transform: translate(-50%, -50%);
+                    padding: 0;
                 }
 
                 &.router-link-exact-active {
-                    border: 2px solid oklch(0.72 0.15 145) !important;
-                    color: oklch(0.72 0.15 145) !important;
-                    background: oklch(0.72 0.15 145 / 0.08) !important;
-                    border-radius: 0.5rem !important;
-                    width: 40px !important;
-                    height: 40px !important;
+                    @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);
                 }
             }
         }
@@ -226,8 +202,7 @@
         // XL and above: full width with text
         @media (min-width: 1280px) {
             li a {
-                @apply px-4;
-                height: 40px;
+                @apply px-4 h-10;
 
                 svg {
                     @apply mr-2;
@@ -237,9 +212,6 @@
     }
 }
 
-.force-z {
-    z-index: 20000;
-}
 
 .mobile-menu {
     margin-top: 0;

package/src/components/ui/ReconnectIndicator.vue

@@ -166,7 +166,7 @@ const props = defineProps({
     width: 160px;
     height: 160px;
     border-top: 4px solid oklch(0.78 0.12 145);
-    border-right: 4px solid rgba(157, 211, 168, 0.3);
+    @apply border-r-4 border-r-accent-green/30;
     border-bottom: 4px solid transparent;
     border-left: 4px solid transparent;
     animation: breathe-slow 3s ease-in-out infinite;
@@ -178,7 +178,7 @@ const props = defineProps({
     width: 120px;
     height: 120px;
     border-top: 4px solid oklch(0.72 0.15 145);
-    border-right: 4px solid rgba(136, 201, 153, 0.4);
+    @apply border-r-4 border-r-accent-green/40;
     border-bottom: 4px solid transparent;
     border-left: 4px solid transparent;
     animation: breathe-medium 2.5s ease-in-out infinite reverse;
@@ -190,7 +190,7 @@ const props = defineProps({
     width: 80px;
     height: 80px;
     border-top: 4px solid oklch(0.68 0.15 145);
-    border-right: 4px solid rgba(123, 193, 135, 0.5);
+    @apply border-r-4 border-r-accent-green/50;
     border-bottom: 4px solid transparent;
     border-left: 4px solid transparent;
     animation: breathe-fast 2s ease-in-out infinite;
@@ -204,7 +204,7 @@ const props = defineProps({
     border-radius: 50%;
     object-fit: cover;
     z-index: 10;
-    border: 2px solid rgba(136, 201, 153, 0.3);
+    @apply border-2 border-accent-green/30;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 

package/src/components/ui/SectionCard.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="section-card">
+        <h3 v-if="title" class="section-title">{{ title }}</h3>
+        <slot />
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    title: { type: String, default: '' }
+});
+</script>
+
+<style lang="scss" scoped>
+.section-card {
+    @apply rounded-lg border p-4;
+    @apply bg-dark-400 border-dark-600;
+}
+
+.section-title {
+    @apply text-sm font-semibold mb-3;
+    @apply text-light-300;
+}
+</style>

package/src/components/ui/Splash.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="darkBG h-screen w-screen z-[1000] fixed flex items-center flex-col justify-center gap-y-3">
+    <div class="bg-dark-300 h-screen w-screen z-[1000] fixed flex items-center flex-col justify-center gap-y-3">
         <img src="@/assets/img/logo_trans.png" class="w-[300px] mx-auto" />
         <SpinnerIcon />
     </div>
@@ -8,11 +8,6 @@
 <script setup>
 import { SpinnerIcon } from "@/components/icons";
 </script>
-<style lang="scss" scoped>
-.darkBG {
-    background-color: rgba(28, 28, 49, 100%);
-}
-</style>
 
 <style>
 img {

package/src/components/ui/StatusBadge.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { defineProps } from 'vue'
+import { CheckmarkIcon, CloseXIcon } from '@/components/icons'
+
+const props = defineProps({
+  enabled: {
+    type: Boolean,
+    required: true
+  },
+  size: {
+    type: String,
+    default: 'small',
+    validator: (value) => ['small', 'large'].includes(value)
+  }
+})
+
+const sizeClasses = {
+  small: 'w-6 h-6',
+  large: 'w-[26px] h-[26px]'
+}
+
+const enabledClasses = 'bg-accent-green/20 border-accent-green/30'
+const disabledClasses = 'bg-red-500/20 border-red-500/30'
+</script>
+
+<template>
+  <div
+    :class="[
+      'flex items-center justify-center rounded-full border-2 transition-all duration-200',
+      enabled ? enabledClasses : disabledClasses,
+      sizeClasses[size]
+    ]"
+  >
+    <CheckmarkIcon v-if="enabled" class="w-3 h-3 text-accent-green" />
+    <CloseXIcon v-else class="w-3 h-3 text-red-500" />
+  </div>
+</template>

package/src/components/ui/controls/CountryChooser.vue

@@ -113,24 +113,16 @@ const selectCountry = (country, module) => {
 }
 
 .small-dropdown {
-  background-clip: border-box !important;
-  border-radius: 100% !important;
+  @apply bg-clip-border rounded-full w-12 h-12 flex justify-center items-center;
   padding: 0;
-  width: 3em !important;
-  height: 3em !important;
-  display: flex;
-  justify-items: center;
-  justify-content: center;
 }
 
 .dropdown-content-portal {
   @apply bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50;
+  @apply max-h-52 overflow-y-auto touch-pan-y;
   padding: 0.5rem;
-  max-height: 208px !important;
-  overflow-y: auto !important;
-  overscroll-behavior: contain !important;
-  touch-action: pan-y !important;
-  -webkit-overflow-scrolling: touch !important;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
   min-width: 100px;
@@ -142,32 +134,24 @@ const selectCountry = (country, module) => {
 }
 
 .header-item {
-  text-align: center !important;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: white;
-  padding: 8px 4px;
-  cursor: default;
-  pointer-events: none;
-  margin: 4px 2px;
-  position: relative;
+  @apply text-center text-xs font-bold text-white;
+  @apply py-2 px-1 mx-0.5 my-1 rounded-md;
+  @apply flex items-center justify-center;
+  @apply pointer-events-none cursor-default;
+  @apply relative;
   background: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.08) 0%,
     rgba(255, 255, 255, 0.04) 100%
   );
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
   letter-spacing: 0.5px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .header-item:first-child {
-  margin-top: 2px;
+  @apply mt-0.5;
 }
 
 .header-item::before {
@@ -187,39 +171,11 @@ const selectCountry = (country, module) => {
 }
 
 .country-item {
-  padding: 8px 4px;
-  font-size: 0.875rem;
-  color: white;
-  cursor: pointer;
-  border-radius: 6px;
-  margin: 1px 2px;
+  @apply py-2 px-1 mx-0.5 my-px text-sm text-white;
+  @apply cursor-pointer rounded-md min-h-8;
+  @apply flex items-center justify-center;
   transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 32px;
 }
 
-.country-item .flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  flex-wrap: nowrap;
-}
-
-.country-item .flex span {
-  font-size: 0.75rem;
-  font-weight: 500;
-  white-space: nowrap;
-  flex-shrink: 0;
-  text-align: center;
-}
-
-.country-item .flex img {
-  width: 18px;
-  height: 14px;
-  flex-shrink: 0;
-}
+/* Flex layout already defined in template with Tailwind classes */
 </style>