@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/ui/ReconnectIndicator.vue

@@ -5,31 +5,31 @@
         </transition>
         <transition name="reconnect-content" appear>
             <div class="reconnect-container">
-        <div class="loading-system">
-            <!-- Geometric loading rings -->
-            <div class="ring-system">
-                <div class="ring ring-outer"></div>
-                <div class="ring ring-middle"></div>
-                <div class="ring ring-inner"></div>
-                <!-- Central logo -->
-                <img :src="logoIcon" alt="Logo" class="logo" />
-            </div>
-            
-            <!-- Progress indicators -->
-            <div class="progress-dots">
-                <div class="dot" :class="{ active: dotIndex >= 0 }"></div>
-                <div class="dot" :class="{ active: dotIndex >= 1 }"></div>
-                <div class="dot" :class="{ active: dotIndex >= 2 }"></div>
-                <div class="dot" :class="{ active: dotIndex >= 3 }"></div>
-            </div>
-        </div>
-        
-        <div class="message-container">
-            <h2 class="message-text">{{ props.message }}</h2>
-            <div class="status-bar">
-                <div class="status-fill"></div>
-            </div>
-        </div>
+                <div class="loading-system">
+                    <!-- Geometric loading rings -->
+                    <div class="ring-system">
+                        <div class="ring-outer ring"></div>
+                        <div class="ring-middle ring"></div>
+                        <div class="ring-inner ring"></div>
+                        <!-- Central logo -->
+                        <img :src="logoIcon" alt="Logo" class="logo" />
+                    </div>
+
+                    <!-- Progress indicators -->
+                    <div class="progress-dots">
+                        <div class="dot" :class="{ active: dotIndex >= 0 }"></div>
+                        <div class="dot" :class="{ active: dotIndex >= 1 }"></div>
+                        <div class="dot" :class="{ active: dotIndex >= 2 }"></div>
+                        <div class="dot" :class="{ active: dotIndex >= 3 }"></div>
+                    </div>
+                </div>
+
+                <div class="message-container">
+                    <h2 class="message-text">{{ props.message }}</h2>
+                    <div class="status-bar">
+                        <div class="status-fill"></div>
+                    </div>
+                </div>
             </div>
         </transition>
     </div>
@@ -37,12 +37,10 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import logoIcon from "/reconnect-logo.png";
+import logoIcon from "/img/reconnect-logo.png";
 
 const dotIndex = ref(0);
-const progressWidth = ref(0);
 let dotInterval;
-let progressInterval;
 
 // Animate progress dots
 const animateDots = () => {
@@ -57,7 +55,7 @@ onMounted(() => {
 // Add page fade-in effect when modal closes
 const addPageFadeIn = () => {
     // Add global style for underlying page fade-in
-    const style = document.createElement('style');
+    const style = document.createElement("style");
     style.textContent = `
         .page-fade-in {
             animation: pageReveal 0.6s ease-out forwards;
@@ -76,13 +74,13 @@ const addPageFadeIn = () => {
         }
     `;
     document.head.appendChild(style);
-    
+
     // Apply the class to the body
-    document.body.classList.add('page-fade-in');
-    
+    document.body.classList.add("page-fade-in");
+
     // Remove the class and style after animation
     setTimeout(() => {
-        document.body.classList.remove('page-fade-in');
+        document.body.classList.remove("page-fade-in");
         if (document.head.contains(style)) {
             document.head.removeChild(style);
         }
@@ -104,59 +102,32 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 .reconnect-overlay {
-    position: fixed;
-    top: -100vh;
-    left: -100vw;
-    right: -100vw;
-    bottom: -100vh;
-    z-index: 9999;
+    @apply fixed inset-0 z-max;
     --tw-ring-color: transparent !important;
 }
 
 .background-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @apply absolute inset-0;
     background: oklch(0.1822 0 0 / 0.98);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
 }
 
 .reconnect-container {
-    position: absolute;
-    top: 100vh;
-    left: 100vw;
-    right: 100vw;
-    bottom: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 3rem;
+    @apply absolute inset-0 flex flex-col items-center justify-center gap-12;
     --tw-ring-color: transparent !important;
 }
 
 .loading-system {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @apply relative flex items-center justify-center;
 }
 
 .ring-system {
-    position: relative;
-    width: 160px;
-    height: 160px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @apply relative flex h-40 w-40 items-center justify-center;
 }
 
 .ring {
-    position: absolute;
-    border-radius: 50%;
+    @apply absolute rounded-full;
     background: transparent !important;
     --tw-ring-color: transparent !important;
     border: 4px solid transparent;
@@ -177,7 +148,7 @@ const props = defineProps({
 .ring-middle {
     width: 120px;
     height: 120px;
-    border-top: 4px solid oklch(0.72 0.15 145);
+    @apply border-t-4 border-accent-green;
     @apply border-r-4 border-r-accent-green/40;
     border-bottom: 4px solid transparent;
     border-left: 4px solid transparent;
@@ -199,109 +170,125 @@ const props = defineProps({
 }
 
 .logo {
-    width: 72px;
-    height: 72px;
-    border-radius: 50%;
+    @apply h-20 w-20 rounded-full border-2 border-accent-green/30 shadow-sm;
     object-fit: cover;
     z-index: 10;
-    @apply border-2 border-accent-green/30;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .progress-dots {
-    position: absolute;
+    @apply absolute flex gap-2;
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%);
-    display: flex;
-    gap: 8px;
 }
 
 .dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
+    @apply h-2 w-2 rounded-full transition-all;
     background: oklch(0.28 0 0);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    
+
     &.active {
-        background: oklch(0.72 0.15 145);
+        @apply bg-accent-green;
         transform: scale(1.2);
     }
 }
 
 .message-container {
-    text-align: center;
-    max-width: 400px;
+    @apply max-w-96 text-center;
 }
 
 .message-text {
-    color: oklch(0.90 0 0);
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    letter-spacing: 0.025em;
+    @apply mb-4 text-2xl font-medium tracking-wide;
+    color: oklch(0.9 0 0);
 }
 
 .status-bar {
-    width: 300px;
-    height: 8px;
+    @apply relative h-2 w-80 overflow-hidden rounded;
     background: oklch(0.22 0 0);
-    border-radius: 4px;
-    overflow: hidden;
-    position: relative;
 }
 
 .status-fill {
-    height: 100%;
-    background: linear-gradient(90deg, oklch(0.72 0.15 145) 0%, oklch(0.78 0.12 145) 50%, oklch(0.72 0.15 145) 100%);
-    border-radius: 4px;
+    @apply relative h-full overflow-hidden rounded;
     width: 30%;
+    background: linear-gradient(90deg, oklch(0.72 0.15 145) 0%, oklch(0.78 0.12 145) 50%, oklch(0.72 0.15 145) 100%);
     animation: infinite-slide 2s ease-in-out infinite;
-    position: relative;
-    overflow: hidden;
 }
 
 .status-fill::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
+    @apply absolute -left-full top-0 h-full w-full;
+    content: "";
     background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.2), transparent);
     animation: shimmer 2s ease-in-out infinite;
 }
 
 // Smooth beautiful animations
 @keyframes breathe-slow {
-    0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
-    50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
-    100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
+    0% {
+        transform: rotate(0deg) scale(1);
+        opacity: 0.8;
+    }
+    50% {
+        transform: rotate(180deg) scale(1.05);
+        opacity: 1;
+    }
+    100% {
+        transform: rotate(360deg) scale(1);
+        opacity: 0.8;
+    }
 }
 
 @keyframes breathe-medium {
-    0% { transform: rotate(0deg) scale(1); opacity: 0.9; }
-    50% { transform: rotate(-180deg) scale(0.95); opacity: 1; }
-    100% { transform: rotate(-360deg) scale(1); opacity: 0.9; }
+    0% {
+        transform: rotate(0deg) scale(1);
+        opacity: 0.9;
+    }
+    50% {
+        transform: rotate(-180deg) scale(0.95);
+        opacity: 1;
+    }
+    100% {
+        transform: rotate(-360deg) scale(1);
+        opacity: 0.9;
+    }
 }
 
 @keyframes breathe-fast {
-    0% { transform: rotate(0deg) scale(1); opacity: 1; }
-    50% { transform: rotate(180deg) scale(1.08); opacity: 0.7; }
-    100% { transform: rotate(360deg) scale(1); opacity: 1; }
+    0% {
+        transform: rotate(0deg) scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: rotate(180deg) scale(1.08);
+        opacity: 0.7;
+    }
+    100% {
+        transform: rotate(360deg) scale(1);
+        opacity: 1;
+    }
 }
 
 @keyframes infinite-slide {
-    0% { transform: translateX(-100%); }
-    50% { transform: translateX(250%); }
-    100% { transform: translateX(-100%); }
+    0% {
+        transform: translateX(-100%);
+    }
+    50% {
+        transform: translateX(250%);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
 }
 
 @keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    50% { transform: translateX(100%); }
-    100% { transform: translateX(300%); }
+    0% {
+        transform: translateX(-100%);
+    }
+    50% {
+        transform: translateX(100%);
+    }
+    100% {
+        transform: translateX(300%);
+    }
 }
 
 // Staged beautiful transitions
@@ -350,35 +337,35 @@ const props = defineProps({
         width: 120px;
         height: 120px;
     }
-    
+
     .ring-outer {
         width: 120px;
         height: 120px;
     }
-    
+
     .ring-middle {
         width: 90px;
         height: 90px;
         top: 15px;
         left: 15px;
     }
-    
+
     .ring-inner {
         width: 60px;
         height: 60px;
         top: 30px;
         left: 30px;
     }
-    
+
     .logo {
         width: 54px;
         height: 54px;
     }
-    
+
     .message-text {
         font-size: 1.25rem;
     }
-    
+
     .status-bar {
         width: 250px;
     }

package/src/components/ui/SectionCard.vue

@@ -1,24 +1,16 @@
 <template>
-    <div class="section-card">
-        <h3 v-if="title" class="section-title">{{ title }}</h3>
+    <div class="rounded-lg border-2 shadow-sm bg-dark-400 p-4" style="border-color: var(--color-border);">
+        <h3 v-if="title" class="mb-3 text-sm font-semibold text-light-300">{{ title }}</h3>
         <slot />
     </div>
 </template>
 
 <script setup>
 defineProps({
-    title: { type: String, default: '' }
+    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,6 +1,6 @@
 <template>
-    <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" />
+    <div class="bg-dark-300 h-screen w-screen z-splash fixed flex items-center flex-col justify-center gap-y-3">
+        <img src="@/assets/img/logo_trans.png" class="w-75 mx-auto transition-transform duration-300 hover:scale-110" />
         <SpinnerIcon />
     </div>
 </template>
@@ -9,11 +9,3 @@
 import { SpinnerIcon } from "@/components/icons";
 </script>
 
-<style>
-img {
-    transition: 0.3s;
-}
-img:hover {
-    transform: scale(1.1);
-}
-</style>

package/src/components/ui/StatusBadge.vue

@@ -1,37 +1,35 @@
 <script setup>
-import { defineProps } from 'vue'
-import { CheckmarkIcon, CloseXIcon } from '@/components/icons'
+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)
-  }
-})
+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]'
-}
+    small: "w-6 h-6",
+    large: "w-6.5 h-6.5"
+};
 
-const enabledClasses = 'bg-accent-green/20 border-accent-green/30'
-const disabledClasses = 'bg-red-500/20 border-red-500/30'
+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>
+    <div
+        :class="[
+            'flex-center rounded-full border-2 transition-all duration-200',
+            enabled ? enabledClasses : disabledClasses,
+            sizeClasses[size]
+        ]">
+        <CheckmarkIcon v-if="enabled" class="h-3 w-3 text-accent-green" />
+        <CloseXIcon v-else class="h-3 w-3 text-red-500" />
+    </div>
 </template>

package/src/components/ui/TaskToggle.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="flex flex-col gap-y-2 form-field-icons">
+        <h4 class="mx-auto flex items-center gap-x-2 text-center text-xs text-light-500 max-tablet-lg:!text-xs">
+            <template v-if="responsiveLabel">
+                <span class="hidden xs:block">{{ label }}</span>
+                <span class="block xs:hidden">{{ responsiveLabel }}</span>
+            </template>
+            <template v-else>
+                {{ label }}
+            </template>
+            <component :is="icon" :class="iconClass" />
+        </h4>
+        <Switch class="mx-auto" v-model="model" :disabled="disabled" />
+    </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
+
+const props = defineProps({
+    icon: {
+        type: Object,
+        required: true
+    },
+    label: {
+        type: String,
+        required: true
+    },
+    responsiveLabel: {
+        type: String,
+        default: ""
+    },
+    modelValue: {
+        type: Boolean,
+        required: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    iconClass: {
+        type: String,
+        default: "scale-90"
+    }
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const model = computed({
+    get: () => props.modelValue,
+    set: (value) => emit("update:modelValue", value)
+});
+</script>