@necrolab/dashboard 0.4.221 → 0.5.2

package/static/offline.html

@@ -4,37 +4,37 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <title>Site Offline</title>
-        <meta name="theme-color" content="rgba(28, 28, 49, 1)" />
+        <meta name="theme-color" content="#0f1012" />
         <style>
+            :root {
+                --bg-primary: #0f1012;
+                --bg-secondary: #1a1b1e;
+                --bg-tertiary: #2e2f34;
+                --text-primary: #ffffff;
+                --text-secondary: #9ca3af;
+                --accent: #ef4444;
+                --border: #1f2937;
+                --glow: rgba(239, 68, 68, 0.15);
+            }
+
             body,
             html {
                 margin: 0;
                 padding: 0;
                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-                background-color: rgba(28, 28, 49, 1);
-                color: #fff;
+                background-color: var(--bg-primary);
+                color: var(--text-primary);
                 height: 100%;
-            }
-
-            html,
-            body {
-                /* Prevent scrolling on both axes */
                 overflow: hidden;
                 position: fixed;
                 width: 100%;
                 height: 100%;
-
-                /* Prevent touch actions except for buttons */
                 touch-action: none;
                 -ms-touch-action: none;
-
-                /* Prevent text selection */
                 -webkit-user-select: none;
                 -moz-user-select: none;
                 -ms-user-select: none;
                 user-select: none;
-
-                /* Prevent pinch zoom */
                 -webkit-touch-callout: none;
                 -webkit-text-size-adjust: none;
             }
@@ -44,73 +44,220 @@
                 justify-content: center;
                 align-items: center;
                 min-height: 100vh;
+                background: radial-gradient(circle at center, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+                position: relative;
             }
+
+            .container::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a1b1e' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+                opacity: 0.1;
+            }
+
             .error-card {
-                background-color: rgba(39, 39, 67, 0.4);
-                border-radius: 0.5rem;
-                padding: 2rem;
-                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                background-color: var(--bg-secondary);
+                border: 1px solid var(--border);
+                border-radius: 1rem;
+                padding: 2.5rem;
+                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
                 text-align: center;
-                max-width: 20rem;
+                max-width: 24rem;
                 width: 100%;
                 margin: auto;
+                animation: slideUp 0.5s ease-out;
+                position: relative;
+                overflow: hidden;
+                backdrop-filter: blur(10px);
             }
+
+            .error-card::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: 1px;
+                background: linear-gradient(90deg, transparent, var(--accent), transparent);
+                opacity: 0.5;
+            }
+
+            .error-card::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                border-radius: 1rem;
+                padding: 1px;
+                background: linear-gradient(135deg, var(--accent), transparent);
+                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+                -webkit-mask-composite: xor;
+                mask-composite: exclude;
+                pointer-events: none;
+            }
+
             .icon-wrapper {
-                background-color: #4a4a61;
-                width: 4rem;
-                height: 4rem;
+                background-color: var(--bg-tertiary);
+                width: 5rem;
+                height: 5rem;
                 border-radius: 50%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                margin: 0 auto 1rem;
-                font-size: 2rem;
-                color: #ee8282;
+                margin: 0 auto 1.5rem;
+                font-size: 2.5rem;
+                color: var(--accent);
+                position: relative;
+                animation: pulse 2s infinite;
+                box-shadow: 0 0 20px var(--glow);
+            }
+
+            .icon-wrapper::after {
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 1px solid var(--accent);
+                opacity: 0.3;
+                animation: ripple 2s infinite;
             }
+
             h1 {
-                font-size: 1.5rem;
-                margin-bottom: 0.5rem;
+                font-size: 1.75rem;
+                font-weight: 600;
+                margin-bottom: 0.75rem;
+                background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                text-shadow: 0 0 20px var(--glow);
             }
+
             p {
-                color: rgba(255, 255, 255, 0.7);
-                margin-bottom: 1.5rem;
+                color: var(--text-secondary);
+                margin-bottom: 2rem;
+                font-size: 1.1rem;
+                line-height: 1.5;
             }
+
             .refresh-button {
-                background-color: #4a4a61;
-                color: white;
+                background-color: var(--bg-tertiary);
+                color: var(--text-primary);
                 border: none;
-                padding: 0.5rem 1rem;
-                border-radius: 0.25rem;
+                padding: 0.75rem 1.5rem;
+                border-radius: 0.5rem;
                 font-size: 1rem;
+                font-weight: 500;
                 cursor: pointer;
-                transition: background-color 0.3s ease;
-                /* Enable touch actions specifically for the button */
+                transition: all 0.3s ease;
                 touch-action: manipulation;
                 -webkit-tap-highlight-color: transparent;
-                touch-action: auto;
-                -webkit-touch-callout: none;
-                cursor: pointer;
+                position: relative;
+                overflow: hidden;
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            }
+
+            .refresh-button::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+                transform: translateX(-100%);
             }
+
             .refresh-button:hover {
-                background-color: rgba(255, 255, 255, 0.2);
+                background-color: var(--bg-tertiary);
+                transform: translateY(-1px);
+                box-shadow: 0 0 15px var(--glow);
             }
+
+            .refresh-button:hover::before {
+                transform: translateX(100%);
+                transition: transform 0.6s ease;
+            }
+
             .refresh-button:focus {
                 outline: none;
-                box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
+                box-shadow: 0 0 0 3px var(--glow);
             }
-            /* Add active state for better touch feedback */
+
             .refresh-button:active {
-                background-color: rgba(255, 255, 255, 0.3);
-                transform: scale(0.98);
+                transform: translateY(1px);
+                background-color: var(--bg-tertiary);
+            }
+
+            @keyframes slideUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+
+            @keyframes pulse {
+                0% {
+                    transform: scale(1);
+                    box-shadow: 0 0 20px var(--glow);
+                }
+                50% {
+                    transform: scale(1.05);
+                    box-shadow: 0 0 30px var(--glow);
+                }
+                100% {
+                    transform: scale(1);
+                    box-shadow: 0 0 20px var(--glow);
+                }
+            }
+
+            @keyframes ripple {
+                0% {
+                    transform: scale(1);
+                    opacity: 0.3;
+                }
+                100% {
+                    transform: scale(1.5);
+                    opacity: 0;
+                }
+            }
+
+            @media (max-width: 640px) {
+                .error-card {
+                    margin: 1rem;
+                    padding: 1.5rem;
+                }
+
+                .icon-wrapper {
+                    width: 4rem;
+                    height: 4rem;
+                    font-size: 2rem;
+                }
+
+                h1 {
+                    font-size: 1.5rem;
+                }
+
+                p {
+                    font-size: 1rem;
+                }
             }
         </style>
     </head>
     <body>
         <div class="container">
             <div class="error-card">
-                <div class="icon-wrapper"><span style="margin-bottom: 0.2rem">&#9888;</span></div>
+                <div class="icon-wrapper">⚠️</div>
                 <h1>Site Offline</h1>
-                <p>We're down. Please try again.</p>
+                <p>We're experiencing technical difficulties. Please try again in a moment.</p>
                 <button class="refresh-button" id="refreshButton">Refresh Page</button>
             </div>
         </div>
@@ -118,12 +265,10 @@
             document.addEventListener("DOMContentLoaded", function () {
                 const button = document.getElementById("refreshButton");
 
-                // Handle button click/touch
                 button.addEventListener("click", function (e) {
                     window.location.reload();
                 });
 
-                // Prevent zoom and scroll on the page but allow button interaction
                 document.addEventListener(
                     "touchstart",
                     function (e) {
@@ -152,12 +297,10 @@
                     { passive: false }
                 );
 
-                // Prevent zoom via gesture
                 document.addEventListener("gesturestart", function (e) {
                     e.preventDefault();
                 });
 
-                // Prevent zoom via mousewheel/trackpad
                 document.addEventListener(
                     "wheel",
                     function (e) {
@@ -168,7 +311,6 @@
                     { passive: false }
                 );
 
-                // Prevent double-tap zoom
                 let lastTap = 0;
                 document.addEventListener("touchend", function (e) {
                     const currentTime = new Date().getTime();

package/switch-branch.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+# USAGE: ./git-force-switch.sh target-branch-name
+
+set -e
+
+TARGET_BRANCH="$1"
+
+if [ -z "$TARGET_BRANCH" ]; then
+  echo "❌ Usage: $0 <branch-name>"
+  exit 1
+fi
+
+echo "🔧 Forcing checkout to '$TARGET_BRANCH'..."
+
+# Step 1: Make sure Git respects case differences
+git config core.ignoreCase false
+
+# Step 2: Try checkout to see if it fails and capture errors
+ERROR_OUTPUT=$(git checkout "$TARGET_BRANCH" 2>&1) || true
+
+# Step 3: Check if it failed due to untracked files
+if echo "$ERROR_OUTPUT" | grep -q "would be overwritten by checkout"; then
+  echo "⚠️ Conflicting untracked files detected. Cleaning them up..."
+
+  # Extract file paths and delete them
+  echo "$ERROR_OUTPUT" |
+    grep "^\s" |
+    sed 's/^[ \t]*//' |
+    while read -r FILE; do
+      if [ -f "$FILE" ] || [ -d "$FILE" ]; then
+        echo "🗑️ Removing $FILE"
+        rm -rf "$FILE"
+      fi
+    done
+
+  echo "🔁 Retrying checkout..."
+  git checkout "$TARGET_BRANCH"
+else
+  echo "✅ Switched to $TARGET_BRANCH successfully."
+fi

package/tailwind.config.js

@@ -1,48 +1,140 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
     content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
     theme: {
         colors: {
-            white: "#FFFFFF",
-            lightgray: "#e5e7eb",
+            transparent: "transparent",
+            white: "oklch(1 0 0)",
+            pure: "oklch(1 0 0)",
+            lightgray: "oklch(0.93 0 0)",
             green: {
-                400: "#44b744"
+                300: "oklch(0.75 0.15 145 / <alpha-value>)",
+                400: "oklch(0.68 0.18 145 / <alpha-value>)",
+                500: "oklch(0.60 0.20 145 / <alpha-value>)"
             },
             red: {
-                400: "#EE8282"
+                300: "oklch(0.68 0.18 25 / <alpha-value>)",
+                400: "oklch(0.62 0.22 25 / <alpha-value>)",
+                500: "oklch(0.58 0.24 25 / <alpha-value>)"
+            },
+            blue: {
+                300: "oklch(0.68 0.14 250 / <alpha-value>)",
+                400: "oklch(0.60 0.18 250 / <alpha-value>)",
+                500: "oklch(0.54 0.22 250 / <alpha-value>)"
+            },
+            yellow: {
+                300: "oklch(0.82 0.12 85 / <alpha-value>)",
+                400: "oklch(0.76 0.14 75 / <alpha-value>)",
+                500: "oklch(0.70 0.16 70 / <alpha-value>)"
             },
             dark: {
-                300: "#1B1C2B",
-                400: "#2D2F4A",
-                500: "#202036",
-                550: "#292a43",
-                600: "#25263c"
+                50: "oklch(0.98 0 0 / <alpha-value>)",
+                100: "oklch(0.96 0 0 / <alpha-value>)",
+                200: "oklch(0.93 0 0 / <alpha-value>)",
+                300: "oklch(0.1822 0 0 / <alpha-value>)", // Base background (Supabase dark)
+                400: "oklch(0.2046 0 0 / <alpha-value>)", // Card backgrounds
+                500: "oklch(0.2603 0 0 / <alpha-value>)", // Input backgrounds
+                550: "oklch(0.2809 0 0 / <alpha-value>)", // Subtle elevation
+                600: "oklch(0.2809 0 0 / <alpha-value>)", // Borders
+                650: "oklch(0.3132 0 0 / <alpha-value>)", // Hover states
+                700: "oklch(0.31 0 0 / <alpha-value>)", // Active states
+                750: "oklch(0.33 0 0 / <alpha-value>)", // Selected states
+                800: "oklch(0.08 0 0 / <alpha-value>)", // Deep background
+                850: "oklch(0.06 0 0 / <alpha-value>)", // Deepest background
+                900: "oklch(0.03 0 0 / <alpha-value>)" // Ultra deep
             },
             light: {
-                300: "#4A4A61",
-                400: "#A7A8AF"
+                100: "oklch(0.98 0 0 / <alpha-value>)",
+                200: "oklch(0.92 0 0 / <alpha-value>)",
+                300: "oklch(0.90 0 0 / <alpha-value>)", // Primary text (text-primary)
+                400: "oklch(0.82 0 0 / <alpha-value>)", // Secondary text (text-secondary)
+                500: "oklch(0.65 0 0 / <alpha-value>)", // Muted text (text-muted)
+                600: "oklch(0.50 0 0 / <alpha-value>)", // Disabled text
+                700: "oklch(0.38 0 0 / <alpha-value>)", // Very muted
+                800: "oklch(0.28 0 0 / <alpha-value>)", // Dark muted
+                900: "oklch(0.18 0 0 / <alpha-value>)" // Darkest muted
+            },
+            gray: {
+                50: "oklch(0.99 0 0 / <alpha-value>)",
+                100: "oklch(0.97 0 0 / <alpha-value>)",
+                200: "oklch(0.93 0 0 / <alpha-value>)",
+                300: "oklch(0.85 0 0 / <alpha-value>)",
+                400: "oklch(0.68 0 0 / <alpha-value>)",
+                500: "oklch(0.52 0 0 / <alpha-value>)",
+                600: "oklch(0.40 0 0 / <alpha-value>)",
+                700: "oklch(0.32 0 0 / <alpha-value>)",
+                800: "oklch(0.22 0 0 / <alpha-value>)",
+                900: "oklch(0.14 0 0 / <alpha-value>)"
             },
-            border: "#29293F"
+            accent: {
+                blue: "oklch(0.56 0.08 264 / <alpha-value>)",
+                green: "oklch(0.72 0.15 145 / <alpha-value>)", // Primary accent (#88c999 mint green)
+                purple: "oklch(0.65 0.12 305 / <alpha-value>)",
+                pink: "oklch(0.62 0.15 350 / <alpha-value>)",
+                orange: "oklch(0.70 0.10 55 / <alpha-value>)",
+                yellow: "oklch(0.85 0.10 95 / <alpha-value>)"
+            },
+            border: "oklch(0.26 0 0 / <alpha-value>)"
         },
         screens: {
-            xs: "500px",
-            sm: "640px",
-            // => @media (min-width: 640px) { ... }
-
-            md: "768px",
-            // => @media (min-width: 768px) { ... }
+            // Mobile first approach
+            xs: "480px", // Small mobile landscape / large mobile portrait
+            sm: "640px", // Tablet portrait
+            md: "768px", // Tablet landscape / small desktop
+            lg: "1024px", // Desktop
+            xl: "1280px", // Large desktop
 
-            ipadlg: "1000px",
-            lg: "1030px",
-            // => @media (min-width: 1024px) { ... }
+            // Device-specific breakpoints
+            tablet: "768px", // Tablet-specific styling
+            desktop: "1024px", // Desktop-specific styling
 
-            xl: "1280px",
-            // => @media (min-width: 1280px) { ... }
-
-            "2xl": "1536px",
-            // => @media (min-width: 1536px) { ... }
+            // Orientation-based breakpoints
             landscape: {
                 raw: "(orientation: landscape)"
+            },
+            portrait: {
+                raw: "(orientation: portrait)"
+            },
+
+            // Height-based breakpoints for better mobile experience
+            "h-sm": {
+                raw: "(max-height: 500px)"
+            },
+            "h-md": {
+                raw: "(min-height: 600px)"
+            },
+            "h-lg": {
+                raw: "(min-height: 900px)"
+            },
+
+            // Combined orientation and size breakpoints
+            "mobile-landscape": {
+                raw: "(max-width: 896px) and (orientation: landscape) and (max-height: 500px)"
+            },
+            "mobile-portrait": {
+                raw: "(max-width: 480px) and (orientation: portrait)"
+            },
+
+            // Touch device detection
+            touch: {
+                raw: "(hover: none) and (pointer: coarse)"
+            },
+            "no-touch": {
+                raw: "(hover: hover) and (pointer: fine)"
+            }
+        },
+        extend: {
+            zIndex: {
+                'dropdown': '100',
+                'dropdown-high': '200',
+                'modal': '1000',
+                'tooltip': '2000',
+                'overlay': '3000',
+                'max': '9999',
+            },
+            boxShadow: {
+                'card': '0 4px 12px rgba(0, 0, 0, 0.2)',
+                'button': '0 1px 2px rgba(0, 0, 0, 0.2)',
             }
         }
     },

package/vite.config.js

@@ -1,39 +1,96 @@
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import pkg from "./package.json";
+import { readFileSync } from "node:fs";
+
+const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    cacheDir: './node_modules/.vite',
     build: {
         rollupOptions: {
-            external: []
-        }
+            output: {
+                manualChunks: {
+                    vue: ["vue", "vue-router", "pinia"],
+                    ui: ["@vueuse/core", "vue-virtual-scroller"],
+                    utils: ["@msgpack/msgpack", "websocket-heartbeat-js"]
+                }
+            }
+        },
+        target: "esnext",
+        cssCodeSplit: true,
+        sourcemap: false,
+        minify: "esbuild",
+        emptyOutDir: false
     },
     optimizeDeps: {
-        exclude: ["sharp"] // Exclude 'sharp' from dependency optimization
+        include: ["vue", "vue-router", "pinia", "@vueuse/core"],
+        exclude: ["sharp"]
     },
     define: {
-        __APP_VERSION__: JSON.stringify(pkg.version) // Inject app version from package.json
+        __APP_VERSION__: JSON.stringify(pkg.version),
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
     },
-    plugins: [vue()], // Use Vue plugin
+    plugins: [
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: (tag) => tag.startsWith("necro-")
+                }
+            }
+        })
+    ],
     resolve: {
         alias: {
-            "@": fileURLToPath(new URL("./src", import.meta.url)) // Alias for src directory
-        },
-        fallback: {
-            "node-persist": false,
-            redis: false,
-            sharp: false,
-            fs: false,
-            path: false,
-            os: false
+            "@": fileURLToPath(new URL("./src", import.meta.url))
         }
     },
     css: {
         preprocessorOptions: {
             scss: {
-                api: "modern-compiler" // Use modern SCSS compiler
+                api: "modern-compiler",
+                silenceDeprecations: ["legacy-js-api"]
+            }
+        },
+        devSourcemap: true
+    },
+    server: {
+        port: 5173,
+        strictPort: true,
+        host: true,
+        cors: true,
+        hmr: {
+            overlay: false
+        },
+        // Handle iOS connection resets gracefully
+        watch: {
+            usePolling: false,
+            interval: 1000
+        },
+        proxy: {
+            "/api": {
+                target: "http://localhost:8081",
+                changeOrigin: true,
+                secure: false,
+                configure: (proxy) => {
+                    proxy.on("error", (err, req, res) => {
+                        res.writeHead(503, {
+                            "Content-Type": "application/json"
+                        });
+                        res.end(JSON.stringify({ error: "Backend starting up, please wait..." }));
+                    });
+                }
+            },
+            "/ws": {
+                target: "ws://localhost:8081",
+                ws: true,
+                changeOrigin: true,
+                configure: (proxy) => {
+                    proxy.on("error", () => {
+                        // Silently handle WebSocket connection errors
+                    });
+                }
             }
         }
     }