@virtengine/openfleet 0.25.0

package/ui/components/shared.js

@@ -0,0 +1,473 @@
+/* ─────────────────────────────────────────────────────────────
+ *  VirtEngine Control Center – Shared UI Components
+ *  Card, Badge, StatCard, Modal, Toast, EmptyState, etc.
+ * ────────────────────────────────────────────────────────────── */
+
+import { h } from "preact";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+} from "preact/hooks";
+import htm from "htm";
+
+const html = htm.bind(h);
+
+import { ICONS } from "../modules/icons.js";
+import { toasts, showToast, shouldShowToast } from "../modules/state.js";
+import {
+  haptic,
+  showBackButton,
+  hideBackButton,
+  getTg,
+} from "../modules/telegram.js";
+import { classNames } from "../modules/utils.js";
+
+/* ═══════════════════════════════════════════════
+ *  Card
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Card container with optional title / subtitle.
+ * @param {{title?: string, subtitle?: string, children?: any, className?: string, onClick?: () => void}} props
+ */
+export function Card({ title, subtitle, children, className = "", onClick }) {
+  return html`
+    <div class="card ${className}" onClick=${onClick}>
+      ${title ? html`<div class="card-title">${title}</div>` : null}
+      ${subtitle ? html`<div class="card-subtitle">${subtitle}</div>` : null}
+      ${children}
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Badge
+ * ═══════════════════════════════════════════════ */
+
+const BADGE_STATUS_MAP = new Set([
+  "draft",
+  "todo",
+  "inprogress",
+  "inreview",
+  "done",
+  "error",
+  "cancelled",
+  "critical",
+  "high",
+  "medium",
+  "low",
+  "log",
+  "info",
+  "warning",
+]);
+
+/**
+ * Status badge pill.
+ * @param {{status?: string, text?: string, className?: string}} props
+ */
+export function Badge({ status, text, className = "" }) {
+  const label = text || status || "";
+  const normalized = (status || "").toLowerCase().replace(/\s+/g, "");
+  const statusClass = BADGE_STATUS_MAP.has(normalized)
+    ? `badge-${normalized}`
+    : "";
+  return html`<span class="badge ${statusClass} ${className}">${label}</span>`;
+}
+
+/* ═══════════════════════════════════════════════
+ *  StatCard
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Stat display card with large value and small label.
+ * @param {{value: any, label: string, trend?: 'up'|'down', color?: string}} props
+ */
+export function StatCard({ value, label, trend, color }) {
+  const valueStyle = color ? `color: ${color}` : "";
+  const trendIcon =
+    trend === "up"
+      ? html`<span class="stat-trend stat-trend-up">↑</span>`
+      : trend === "down"
+        ? html`<span class="stat-trend stat-trend-down">↓</span>`
+        : null;
+
+  return html`
+    <div class="stat-card">
+      <div class="stat-value" style=${valueStyle}>
+        ${value ?? "—"}${trendIcon}
+      </div>
+      <div class="stat-label">${label}</div>
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  SkeletonCard
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Animated loading placeholder.
+ * @param {{height?: string, className?: string}} props
+ */
+export function SkeletonCard({ height = "80px", className = "" }) {
+  return html`
+    <div
+      class="skeleton skeleton-card ${className}"
+      style="height: ${height}"
+    ></div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Modal (Bottom Sheet)
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Bottom-sheet modal with drag handle, title, swipe-to-dismiss, and TG BackButton integration.
+ * @param {{title?: string, open?: boolean, onClose: () => void, children?: any}} props
+ */
+export function Modal({ title, open = true, onClose, children }) {
+  const [visible, setVisible] = useState(false);
+  const contentRef = useRef(null);
+  const dragState = useRef({ startY: 0, startRect: 0, dragging: false });
+  const [dragY, setDragY] = useState(0);
+
+  useEffect(() => {
+    requestAnimationFrame(() => setVisible(open));
+  }, [open]);
+
+  // BackButton integration
+  useEffect(() => {
+    const tg = getTg();
+    if (!tg?.BackButton) return;
+
+    const handler = () => {
+      onClose();
+      tg.BackButton.hide();
+      tg.BackButton.offClick(handler);
+    };
+    tg.BackButton.show();
+    tg.BackButton.onClick(handler);
+
+    return () => {
+      tg.BackButton.hide();
+      tg.BackButton.offClick(handler);
+    };
+  }, [onClose]);
+
+  // Prevent body scroll while dragging
+  useEffect(() => {
+    if (dragState.current.dragging) {
+      document.body.style.overflow = "hidden";
+      return () => { document.body.style.overflow = ""; };
+    }
+  });
+
+  const handleTouchStart = useCallback((e) => {
+    const el = contentRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const touchY = e.touches[0].clientY;
+    // Only start drag if touch is within top 60px of the modal content
+    if (touchY - rect.top > 60) return;
+    dragState.current = { startY: touchY, startRect: rect.top, dragging: true };
+    // Disable transition during active drag
+    el.style.transition = "none";
+  }, []);
+
+  const handleTouchMove = useCallback((e) => {
+    if (!dragState.current.dragging) return;
+    const deltaY = e.touches[0].clientY - dragState.current.startY;
+    if (deltaY < 0) {
+      setDragY(0);
+      return;
+    }
+    // Diminishing returns past 100px
+    const translated = deltaY <= 100 ? deltaY : 100 + (deltaY - 100) * 0.3;
+    setDragY(translated);
+    e.preventDefault();
+  }, []);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!dragState.current.dragging) return;
+    dragState.current.dragging = false;
+    const el = contentRef.current;
+    if (el) el.style.transition = "";
+    if (dragY > 150) {
+      getTg()?.HapticFeedback?.impactOccurred("light");
+      onClose();
+    }
+    setDragY(0);
+  }, [dragY, onClose]);
+
+  const handleTouchCancel = useCallback(() => {
+    if (!dragState.current.dragging) return;
+    dragState.current.dragging = false;
+    const el = contentRef.current;
+    if (el) el.style.transition = "";
+    setDragY(0);
+  }, []);
+
+  if (!open) return null;
+
+  const dragStyle = dragY > 0
+    ? `transform: translateY(${dragY}px); opacity: ${Math.max(0.2, 1 - dragY / 400)}`
+    : "";
+
+  return html`
+    <div
+      class="modal-overlay ${visible ? "modal-overlay-visible" : ""}"
+      onClick=${(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref=${contentRef}
+        class="modal-content ${visible ? "modal-content-visible" : ""} ${dragY > 0 ? "modal-dragging" : ""}"
+        style=${dragStyle}
+        onClick=${(e) => e.stopPropagation()}
+        onTouchStart=${handleTouchStart}
+        onTouchMove=${handleTouchMove}
+        onTouchEnd=${handleTouchEnd}
+        onTouchCancel=${handleTouchCancel}
+      >
+        <div class="modal-handle"></div>
+        ${title ? html`<div class="modal-title">${title}</div>` : null}
+        ${children}
+      </div>
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  ConfirmDialog
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Confirmation dialog — tries Telegram native showConfirm first, falls back to styled modal.
+ * @param {{title?: string, message: string, confirmText?: string, cancelText?: string, onConfirm: () => void, onCancel: () => void, destructive?: boolean}} props
+ */
+export function ConfirmDialog({
+  title = "Confirm",
+  message,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  destructive = false,
+}) {
+  const [tried, setTried] = useState(false);
+
+  // Try Telegram native confirm first
+  useEffect(() => {
+    const tg = getTg();
+    if (tg?.showConfirm && !tried) {
+      setTried(true);
+      tg.showConfirm(message, (ok) => {
+        if (ok) onConfirm();
+        else onCancel();
+      });
+    }
+  }, [message, onConfirm, onCancel, tried]);
+
+  // If Telegram native is available, render nothing (native dialog handles it)
+  if (getTg()?.showConfirm) return null;
+
+  const confirmBtnStyle = destructive
+    ? "background: var(--destructive); color: #fff;"
+    : "";
+
+  return html`
+    <div class="modal-overlay modal-overlay-visible" onClick=${onCancel}>
+      <div
+        class="confirm-dialog"
+        onClick=${(e) => e.stopPropagation()}
+      >
+        <div class="confirm-dialog-title">${title}</div>
+        <div class="confirm-dialog-message">${message}</div>
+        <div class="confirm-dialog-actions">
+          <button class="btn btn-secondary" onClick=${onCancel}>
+            ${cancelText}
+          </button>
+          <button
+            class="btn btn-primary ${destructive ? "btn-destructive" : ""}"
+            style=${confirmBtnStyle}
+            onClick=${onConfirm}
+          >
+            ${confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  confirmAction (Promise-based utility)
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Quick inline confirmation — returns a Promise<boolean>.
+ * Uses Telegram native confirm if available, otherwise browser confirm().
+ * @param {string} message
+ * @returns {Promise<boolean>}
+ */
+export function confirmAction(message) {
+  const tg = getTg();
+  if (tg?.showConfirm) {
+    return new Promise((resolve) => tg.showConfirm(message, resolve));
+  }
+  return Promise.resolve(window.confirm(message));
+}
+
+/* ═══════════════════════════════════════════════
+ *  Toast / ToastContainer
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Renders all active toasts from the toasts signal.
+ * Each toast auto-dismisses (handled by showToast in state.js).
+ */
+export function ToastContainer() {
+  const items = toasts.value;
+  if (!items.length) return null;
+
+  const visible = items.filter(shouldShowToast);
+  if (!visible.length) return null;
+
+  return html`
+    <div class="toast-container">
+      ${visible.map(
+        (t) => html`
+          <div key=${t.id} class="toast toast-${t.type}">
+            <span class="toast-message">${t.message}</span>
+            <button
+              class="toast-close"
+              onClick=${() => {
+                toasts.value = toasts.value.filter((x) => x.id !== t.id);
+              }}
+            >
+              ×
+            </button>
+          </div>
+        `,
+      )}
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  EmptyState
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Empty state display.
+ * @param {{icon?: string, title?: string, message?: string, description?: string, action?: {label: string, onClick: () => void}}} props
+ */
+export function EmptyState({ icon, title, message, description, action }) {
+  const iconSvg = icon && ICONS[icon] ? ICONS[icon] : null;
+  const displayIcon = iconSvg ? html`<div class="empty-state-icon">${iconSvg}</div>`
+    : icon ? html`<div class="empty-state-icon">${icon}</div>`
+    : null;
+  const displayTitle = title || message || null;
+  return html`
+    <div class="empty-state">
+      ${displayIcon}
+      ${displayTitle ? html`<div class="empty-state-title">${displayTitle}</div>` : null}
+      ${description
+        ? html`<div class="empty-state-description">${description}</div>`
+        : null}
+      ${action
+        ? html`<button class="btn btn-primary btn-sm" onClick=${action.onClick}>
+            ${action.label}
+          </button>`
+        : null}
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Divider
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Section divider with optional centered label.
+ * @param {{label?: string}} props
+ */
+export function Divider({ label }) {
+  if (!label) return html`<div class="divider"></div>`;
+  return html`
+    <div class="divider divider-label">
+      <span>${label}</span>
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Avatar
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Circle avatar with initials fallback.
+ * @param {{name?: string, size?: number, src?: string}} props
+ */
+export function Avatar({ name = "", size = 36, src }) {
+  const initials = name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w.charAt(0).toUpperCase())
+    .join("");
+
+  const style = `width:${size}px;height:${size}px;border-radius:50%;overflow:hidden;
+    display:flex;align-items:center;justify-content:center;
+    background:var(--accent,#5b6eae);color:var(--accent-text,#fff);
+    font-size:${Math.round(size * 0.4)}px;font-weight:600;flex-shrink:0`;
+
+  if (src) {
+    return html`
+      <div style=${style}>
+        <img
+          src=${src}
+          alt=${name}
+          style="width:100%;height:100%;object-fit:cover"
+          onError=${(e) => {
+            e.target.style.display = "none";
+          }}
+        />
+      </div>
+    `;
+  }
+
+  return html`<div style=${style}>${initials || "?"}</div>`;
+}
+
+/* ═══════════════════════════════════════════════
+ *  ListItem
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Generic list item for settings-style lists.
+ * @param {{title: string, subtitle?: string, trailing?: any, onClick?: () => void, icon?: string}} props
+ */
+export function ListItem({ title, subtitle, trailing, onClick, icon }) {
+  const iconSvg = icon && ICONS[icon] ? ICONS[icon] : null;
+  return html`
+    <div
+      class=${classNames("list-item", { "list-item-clickable": !!onClick })}
+      onClick=${onClick}
+    >
+      ${iconSvg ? html`<div class="list-item-icon">${iconSvg}</div>` : null}
+      <div class="list-item-body">
+        <div class="list-item-title">${title}</div>
+        ${subtitle
+          ? html`<div class="list-item-subtitle">${subtitle}</div>`
+          : null}
+      </div>
+      ${trailing != null
+        ? html`<div class="list-item-trailing">${trailing}</div>`
+        : null}
+    </div>
+  `;
+}

package/ui/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+  <meta name="color-scheme" content="dark light" />
+  <title>VirtEngine Control Center</title>
+  <script src="https://telegram.org/js/telegram-web-app.js"></script>
+  <link rel="preconnect" href="https://esm.sh" crossorigin />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="styles/kanban.css" />
+  <link rel="stylesheet" href="styles/sessions.css" />
+  <!-- Import map: ensures all modules share a single Preact instance
+       (required for @preact/signals auto-subscription to work) -->
+  <script type="importmap">
+  {
+    "imports": {
+      "preact": "https://esm.sh/preact@10.25.4",
+      "preact/hooks": "https://esm.sh/preact@10.25.4/hooks",
+      "htm": "https://esm.sh/htm@3.1.1",
+      "@preact/signals": "https://esm.sh/@preact/signals@1.3.1?deps=preact@10.25.4"
+    }
+  }
+  </script>
+</head>
+<body>
+  <div id="app">
+    <div id="boot-loader" style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:'Sora',sans-serif;color:#9aa3b2;background:#0b0f14;background-image:radial-gradient(circle at 20% 10%,rgba(76,201,240,.18),transparent 55%),radial-gradient(circle at 80% 0%,rgba(94,234,212,.12),transparent 45%),radial-gradient(circle at 50% 100%,rgba(59,130,246,.12),transparent 60%);overflow:hidden">
+      <style>
+        .boot-logo{position:relative;width:80px;height:80px;margin-bottom:24px}
+        .boot-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(99,102,241,.15);animation:boot-spin 3s linear infinite}
+        .boot-ring-inner{position:absolute;inset:8px;border-radius:50%;border:2px solid transparent;border-top-color:#6366f1;border-right-color:rgba(99,102,241,.4);animation:boot-spin 1.5s linear infinite reverse}
+        .boot-dot{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a78bfa);box-shadow:0 0 20px rgba(99,102,241,.5),0 0 40px rgba(99,102,241,.2);animation:boot-pulse 2s ease-in-out infinite}
+        .boot-title{font-size:22px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#f1f5f9,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;animation:boot-fadeUp .6s ease .2s both}
+        .boot-subtitle{font-size:13px;color:#64748b;animation:boot-fadeUp .6s ease .4s both}
+        .boot-progress{width:120px;height:2px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:20px;overflow:hidden;animation:boot-fadeUp .6s ease .6s both}
+        .boot-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#6366f1,#a78bfa);border-radius:2px;animation:boot-load 2s ease-in-out .8s forwards}
+        @keyframes boot-spin{to{transform:rotate(360deg)}}
+        @keyframes boot-pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.2);opacity:1}}
+        @keyframes boot-fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+        @keyframes boot-load{0%{width:0}60%{width:70%}100%{width:100%}}
+      </style>
+      <div class="boot-logo">
+        <div class="boot-ring"></div>
+        <div class="boot-ring-inner"></div>
+        <div class="boot-dot"></div>
+      </div>
+      <div class="boot-title">VirtEngine</div>
+      <div class="boot-subtitle" id="boot-status">Initializing Control Center…</div>
+      <div class="boot-progress"><div class="boot-progress-bar"></div></div>
+    </div>
+  </div>
+  <script type="module" src="app.js"></script>
+  <script>
+    // Signal Telegram that the page has loaded (before ES modules finish loading)
+    try { if (window.Telegram && Telegram.WebApp) Telegram.WebApp.ready(); } catch(e) {}
+    // Fallback: if the ES module fails to load within 12s, show an error
+    setTimeout(function() {
+      var el = document.getElementById('boot-loader');
+      if (el) {
+        var s = document.getElementById('boot-status');
+        if (s) s.innerHTML = '⚠️ Failed to load app modules.<br><small style="color:#888">Check your internet connection (CDN: esm.sh) or try refreshing.</small>';
+      }
+    }, 12000);
+  </script>
+</body>
+</html>