dawarich/app/views/maps_v2/index.html.erb

<% content_for :title, 'Map' %>

<%= render 'shared/map/date_navigation_v2', start_at: @start_at, end_at: @end_at %>

<div data-controller="maps-v2"
     data-maps-v2-api-key-value="<%= current_user.api_key %>"
     data-maps-v2-start-date-value="<%= @start_at.to_s %>"
     data-maps-v2-end-date-value="<%= @end_at.to_s %>"
     style="width: 100%; height: 100%; position: relative;">
  <!--
    Phase 7 Realtime Controller: Currently disabled pending initialization fix
    To enable: Add "maps-v2-realtime" to data-controller and add data-maps-v2-realtime-enabled-value="true"
  -->

  <!-- Map container takes full width and height -->
  <div data-maps-v2-target="container" class="maps-v2-container" style="width: 100%; height: 100%;"></div>

  <!-- Connection indicator -->
  <div class="connection-indicator disconnected">
    <span class="indicator-dot"></span>
    <span class="indicator-text"></span>
  </div>

  <!-- Layer Controls (top-left corner) -->
  <div class="absolute top-4 left-4 z-10 flex flex-col gap-2">
    <button data-action="click->maps-v2#toggleLayer"
            data-layer="points"
            class="btn btn-sm btn-primary">
      <%= icon 'map-pin' %>
      <span class="ml-1">Points</span>
    </button>

    <button data-action="click->maps-v2#toggleLayer"
            data-layer="routes"
            class="btn btn-sm btn-primary">
      <%= icon 'route' %>
      <span class="ml-1">Routes</span>
    </button>

    <!-- Cluster toggle -->
    <button data-action="click->maps-v2#toggleClustering"
            data-maps-v2-target="clusterToggle"
            class="btn btn-sm btn-primary"
            title="Toggle point clustering">
      <%= icon 'grid2x2' %>
      <span class="ml-1">Cluster</span>
    </button>

    <!-- Settings button -->
    <button data-action="click->maps-v2#toggleSettings"
            class="btn btn-sm btn-primary"
            title="Settings">
      <%= icon 'square-pen' %>
      <span class="ml-1">Settings</span>
    </button>
  </div>

  <!-- Loading overlay -->
  <div data-maps-v2-target="loading" class="loading-overlay hidden">
    <div class="loading-spinner"></div>
    <div class="loading-text" data-maps-v2-target="loadingText">Loading points...</div>
  </div>

  <!-- Settings panel -->
  <%= render 'maps_v2/settings_panel' %>
</div>

<style>
  .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .loading-overlay.hidden {
    display: none;
  }

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .loading-text {
    margin-top: 16px;
    font-size: 14px;
    color: #6b7280;
  }

  /* Popup styles */
  .point-popup {
    font-family: system-ui, -apple-system, sans-serif;
  }

  .popup-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
  }

  .popup-body {
    font-size: 13px;
  }

  .popup-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
  }

  .popup-row .label {
    color: #6b7280;
  }

  .popup-row .value {
    font-weight: 500;
    color: #111827;
  }

  /* Connection indicator styles */
  .connection-indicator {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default, shown when family sharing is active */
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 20;
    transition: all 0.3s;
  }

  /* Show connection indicator when family sharing is active */
  .connection-indicator.active {
    display: flex;
  }

  .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: pulse 2s ease-in-out infinite;
  }

  .connection-indicator.connected .indicator-dot {
    background: #22c55e;
  }

  .connection-indicator.connected .indicator-text::before {
    content: 'Connected';
  }

  .connection-indicator.disconnected .indicator-text::before {
    content: 'Connecting...';
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
</style>