eco_os/ecoos_daemon/ts_web/styles/shared.ts

/**
 * Shared styles for EcoOS UI components
 */

import { css } from '@design.estate/dees-element';

export const sharedStyles = css`
  :host {
    --ecoos-bg: #0a0a0a;
    --ecoos-card: #141414;
    --ecoos-border: #2a2a2a;
    --ecoos-text: #e0e0e0;
    --ecoos-text-dim: #888;
    --ecoos-accent: #3b82f6;
    --ecoos-success: #22c55e;
    --ecoos-warning: #f59e0b;
    --ecoos-error: #ef4444;

    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ecoos-text);
  }

  .card {
    background: var(--ecoos-card);
    border: 1px solid var(--ecoos-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .card-title {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--ecoos-text-dim);
    margin-bottom: 12px;
    font-weight: 500;
  }

  .stat {
    margin-bottom: 8px;
  }

  .stat-label {
    color: var(--ecoos-text-dim);
    font-size: 12px;
  }

  .stat-value {
    font-size: 18px;
    font-weight: 600;
  }

  .progress-bar {
    background: var(--ecoos-border);
    height: 6px;
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: var(--ecoos-accent);
    border-radius: 3px;
    transition: width 0.3s;
  }

  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .status-dot.running {
    background: var(--ecoos-success);
  }

  .status-dot.stopped {
    background: var(--ecoos-error);
  }

  .status-dot.starting {
    background: var(--ecoos-warning);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
  }

  .btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .btn:hover {
    opacity: 0.85;
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-primary {
    background: var(--ecoos-accent);
    color: white;
  }

  .btn-danger {
    background: var(--ecoos-error);
    color: white;
  }

  .device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ecoos-border);
  }

  .device-item:last-child {
    border-bottom: none;
  }

  .device-name {
    font-weight: 500;
  }

  .device-type {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ecoos-border);
    color: var(--ecoos-text-dim);
  }

  .device-default {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ecoos-success);
    color: white;
  }

  .logs {
    height: 400px;
    overflow-y: auto;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    line-height: 1.6;
    background: #0d0d0d;
    padding: 12px;
    border-radius: 4px;
  }

  .log-entry {
    white-space: pre-wrap;
    word-break: break-all;
  }

  .tabs {
    display: flex;
    border-bottom: 1px solid var(--ecoos-border);
    margin-bottom: 12px;
  }

  .tab {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--ecoos-text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 12px;
    text-transform: uppercase;
  }

  .tab:hover {
    color: var(--ecoos-text);
  }

  .tab.active {
    color: var(--ecoos-accent);
    border-bottom-color: var(--ecoos-accent);
  }
`;

/**
 * Format bytes to human readable string
 */
export function formatBytes(bytes: number): string {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

/**
 * Format uptime seconds to human readable string
 */
export function formatUptime(seconds: number): string {
  const days = Math.floor(seconds / 86400);
  const hours = Math.floor((seconds % 86400) / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  if (days > 0) return `${days}d ${hours}h ${mins}m`;
  if (hours > 0) return `${hours}h ${mins}m`;
  return `${mins}m`;
}

/**
 * Format age in hours to human readable string
 */
export function formatAge(hours: number): string {
  if (hours < 1) return `${Math.round(hours * 60)}m ago`;
  if (hours < 24) return `${Math.round(hours)}h ago`;
  return `${Math.round(hours / 24)}d ago`;
}