From de68638d7c2bc80f591039f147cfcb3aa7552372 Mon Sep 17 00:00:00 2001
From: javier <javier.bgutierrez@gmail.com>
Date: Wed, 17 Jun 2026 11:44:48 +0200
Subject: [PATCH] feat(project-map): rework right panel per feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Hide the project navigation bar (kept in DOM via 'hidden', not deleted)
2. Move the tabs into the panel header where the 'Map' title was
3. (tabs setActiveTab logic already correct — recompiled)
4. Make the phases/layers panel collapsible via an Alpine toggle button
5. Replace all emoji icons with blade-heroicons (<x-heroicon-o-*>)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../livewire/projects/project-map.blade.php   | 105 ++++++++++--------
 1 file changed, 56 insertions(+), 49 deletions(-)

diff --git a/resources/views/livewire/projects/project-map.blade.php b/resources/views/livewire/projects/project-map.blade.php
index 894d137..6ef5f3d 100644
--- a/resources/views/livewire/projects/project-map.blade.php
+++ b/resources/views/livewire/projects/project-map.blade.php
@@ -1,11 +1,20 @@
 <div x-data="{ formFullscreen: $wire.entangle('formFullscreen') }"
      class="flex flex-col lg:flex-row gap-0 h-screen p-1">
     <!-- Columna izquierda: Mapa -->
-    <div x-show="!formFullscreen" x-cloak class="w-full lg:w-2/3 flex-1 relative">
+    <div x-show="!formFullscreen" x-cloak x-data="{ showLayers: true }" class="w-full lg:w-2/3 flex-1 relative">
         <div id="map" style="height: 100%; min-height: 500px; width: 100%;" wire:ignore></div>
 
+        <!-- Toggle del panel de fases/capas -->
+        <button @click="showLayers = !showLayers"
+                class="absolute top-2 right-2 z-[1001] btn btn-sm btn-circle shadow-lg"
+                title="{{ __('Show/hide panel') }}">
+            <x-heroicon-o-x-mark class="w-5 h-5" x-show="showLayers" />
+            <x-heroicon-o-bars-3 class="w-5 h-5" x-show="!showLayers" x-cloak />
+        </button>
+
         <!-- Panel lateral de capas -->
-        <div class="absolute top-2 right-2 z-[1000] bg-base-100 rounded-box shadow-xl p-4 w-72 border border-base-300 text-sm max-h-[calc(100vh-4rem)] overflow-y-auto">
+        <div x-show="showLayers" x-transition
+             class="absolute top-14 right-2 z-[1000] bg-base-100 rounded-box shadow-xl p-4 w-72 border border-base-300 text-sm max-h-[calc(100vh-4rem)] overflow-y-auto">
             <h3 class="font-semibold text-base mb-2">{{ __('Phases and layers') }}</h3>
             <div class="space-y-3">
                 @foreach($phases as $phase)
@@ -35,11 +44,11 @@
 
                         {{-- Botón para ir a gestión de capas de esta fase --}}
                         <div class="mt-1 ml-7">
-                            <a href="{{ route('layers.manage', [$project, $phase]) }}" class="btn btn-xs btn-outline btn-primary">
-                                ✏️ {{ __('Manage Layers') }}
+                            <a href="{{ route('layers.manage', [$project, $phase]) }}" class="btn btn-xs btn-outline btn-primary gap-1">
+                                <x-heroicon-o-pencil-square class="w-3.5 h-3.5" /> {{ __('Manage Layers') }}
                             </a>
-                            <a href="{{ route('phases.progress', $phase) }}" class="btn btn-xs btn-outline">
-                                📊 {{ __('Progress') }}
+                            <a href="{{ route('phases.progress', $phase) }}" class="btn btn-xs btn-outline gap-1">
+                                <x-heroicon-o-chart-bar class="w-3.5 h-3.5" /> {{ __('Progress') }}
                             </a>
                         </div>
                     </div>
@@ -50,7 +59,7 @@
             <div class="mt-3">
                 <label class="flex items-center gap-2 text-xs cursor-pointer">
                     <input type="checkbox" wire:change="toggleFeatureImages" @if($showFeatureImages) checked @endif class="checkbox checkbox-xs checkbox-primary" />
-                    🖼️ {{ __('Show images on map') }}
+                    <x-heroicon-o-photo class="w-4 h-4" /> {{ __('Show images on map') }}
                     @if($featureImageMarkers)
                         <span class="badge badge-xs">{{ count($featureImageMarkers) }}</span>
                     @endif
@@ -59,14 +68,14 @@
 
             {{-- Botones generales --}}
             <div class="mt-2 space-y-1">
-                <a href="{{ route('projects.media', $project) }}" class="btn btn-sm btn-outline w-full">
-                    📁 {{ __('Project files') }}
+                <a href="{{ route('projects.media', $project) }}" class="btn btn-sm btn-outline w-full gap-1">
+                    <x-heroicon-o-folder class="w-4 h-4" /> {{ __('Project files') }}
                 </a>
-                <button wire:click="$dispatch('centerMap')" class="btn btn-sm btn-outline w-full">
-                    📍 {{ __('Centered in project') }}
+                <button wire:click="$dispatch('centerMap')" class="btn btn-sm btn-outline w-full gap-1">
+                    <x-heroicon-o-map-pin class="w-4 h-4" /> {{ __('Centered in project') }}
                 </button>
-                <button onclick="getUserLocation()" class="btn btn-sm btn-outline w-full">
-                    🧭 {{ __('My location') }}
+                <button onclick="getUserLocation()" class="btn btn-sm btn-outline w-full gap-1">
+                    <x-heroicon-o-viewfinder-circle class="w-4 h-4" /> {{ __('My location') }}
                 </button>
             </div>
         </div>
@@ -76,53 +85,51 @@
 <div class="w-full lg:w-1/3 transition-all duration-300" :class="{'lg:w-full': formFullscreen}">
     <div class="card bg-base-100 shadow-xl h-full flex flex-col">
         <div class="card-body overflow-y-auto flex-1">
-            <div class="flex justify-between items-center mb-2">
-                <h2 class="card-title">{{ __('Map') }}</h2>
-                <button wire:click="toggleFullscreen" class="btn btn-circle btn-sm" title="{{ __('Fullscreen') }}">
+            <div class="flex justify-between items-center gap-2 mb-4">
+                <!-- Tabs -->
+                <div class="tabs tabs-boxed flex-wrap">
+                    <button wire:click="setActiveTab('edit')" class="tab {{ $activeTab === 'edit' ? 'tab-active' : '' }}">{{ __('Edit') }}</button>
+                    <button wire:click="setActiveTab('features')" class="tab {{ $activeTab === 'features' ? 'tab-active' : '' }}">{{ __('Features') }}</button>
+                    <button wire:click="setActiveTab('inspections')" class="tab {{ $activeTab === 'inspections' ? 'tab-active' : '' }}">{{ __('Inspections') }}</button>
+                    <button wire:click="setActiveTab('issues')" class="tab {{ $activeTab === 'issues' ? 'tab-active' : '' }} gap-1">
+                        {{ __('Issues') }}
+                        @if($openIssuesCount > 0)
+                            <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
+                        @endif
+                    </button>
+                </div>
+                <button wire:click="toggleFullscreen" class="btn btn-circle btn-sm shrink-0" title="{{ __('Fullscreen') }}">
                     <span x-text="formFullscreen ? '✕' : '⤢'"></span>
                 </button>
             </div>
 
-            <!-- Project navigation bar -->
-            <div class="flex flex-wrap gap-1 mb-3">
+            <!-- Project navigation bar (hidden for now, kept for later) -->
+            <div class="hidden flex-wrap gap-1 mb-3">
                 <a href="{{ route('projects.dashboard', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.dashboard') ? 'btn-primary' : 'btn-outline' }}">
-                    📊 {{ __('Dashboard') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.dashboard') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-squares-2x2 class="w-3.5 h-3.5" /> {{ __('Dashboard') }}
                 </a>
                 <a href="{{ route('projects.map', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.map') ? 'btn-primary' : 'btn-outline' }}">
-                    🗺️ {{ __('Map') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.map') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-map class="w-3.5 h-3.5" /> {{ __('Map') }}
                 </a>
                 <a href="{{ route('projects.gantt', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.gantt') ? 'btn-primary' : 'btn-outline' }}">
-                    📅 {{ __('Gantt') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.gantt') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-calendar-days class="w-3.5 h-3.5" /> {{ __('Gantt') }}
                 </a>
                 <a href="{{ route('projects.report', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.report') ? 'btn-primary' : 'btn-outline' }}">
-                    📄 {{ __('Report') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.report') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-document-text class="w-3.5 h-3.5" /> {{ __('Report') }}
                 </a>
                 <a href="{{ route('projects.issues', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.issues') ? 'btn-error' : 'btn-outline' }} gap-1">
-                    ⚠️ {{ __('Issues') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.issues') ? 'btn-error' : 'btn-outline' }}">
+                    <x-heroicon-o-exclamation-triangle class="w-3.5 h-3.5" /> {{ __('Issues') }}
                     @if($openIssuesCount > 0)
                         <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
                     @endif
                 </a>
             </div>
 
-            <!-- Tabs -->
-            <div class="tabs box mb-4">
-                <button wire:click="setActiveTab('edit')" class="tab {{ $activeTab === 'edit' ? 'tab-active' : '' }}">{{ __('Edit') }}</button>
-                <button wire:click="setActiveTab('features')" class="tab {{ $activeTab === 'features' ? 'tab-active' : '' }}">{{ __('Features') }}</button>
-                <button wire:click="setActiveTab('inspections')" class="tab {{ $activeTab === 'inspections' ? 'tab-active' : '' }}">{{ __('Inspections') }}</button>
-                <button wire:click="setActiveTab('issues')" class="tab {{ $activeTab === 'issues' ? 'tab-active' : '' }} gap-1">
-                    {{ __('Issues') }}
-                    @if($openIssuesCount > 0)
-                        <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
-                    @endif
-                </button>
-            </div>
-
             <!-- Tab Content -->
             <div class="tab-content">
                 @if($activeTab === 'edit')
@@ -148,14 +155,14 @@
                             <input type="text" wire:model="editResponsible" class="input input-bordered input-sm" placeholder="{{ __('Name of responsible') }}" />
                         </div>
 
-                        <button wire:click="saveFeatureProgress" class="btn btn-primary btn-sm w-full mb-3">
-                            💾 {{ __('Save progress') }}
+                        <button wire:click="saveFeatureProgress" class="btn btn-primary btn-sm w-full mb-3 gap-1">
+                            <x-heroicon-o-check-circle class="w-4 h-4" /> {{ __('Save progress') }}
                         </button>
 
                         {{-- Gestor de archivos del feature --}}
                         <details class="mb-3 border rounded-lg">
                             <summary class="text-xs font-semibold cursor-pointer p-2 bg-base-200 rounded-t-lg">
-                                📎 {{ __('Files of element') }}
+                                <x-heroicon-o-paper-clip class="w-4 h-4 inline" /> {{ __('Files of element') }}
                             </summary>
                             <div class="p-2">
                                 @livewire('media-manager', [
@@ -244,7 +251,7 @@
                         @endif
                     @else
                         <div class="text-center text-gray-400 py-8">
-                            <p class="text-lg">👆</p>
+                            <x-heroicon-o-cursor-arrow-rays class="w-10 h-10 mx-auto opacity-30" />
                             <p>{{ __('Click on a map element or search above to edit it') }}</p>
                         </div>
                     @endif
@@ -274,7 +281,7 @@
                                             <td>{{ $feature->responsible ?? '-' }}</td>
                                             <td>{{ $feature->template?->name ?? '-' }}</td>
                                             <td class="justify-end">
-                                                <button class="btn btn-xs btn-outline btn-primary">✏️</button>
+                                                <button class="btn btn-xs btn-outline btn-primary"><x-heroicon-o-pencil class="w-3.5 h-3.5" /></button>
                                             </td>
                                         </tr>
                                     @endforeach
@@ -283,7 +290,7 @@
                         </div>
                     @else
                         <div class="text-center text-gray-400 py-8">
-                            <p class="text-lg">📋</p>
+                            <x-heroicon-o-clipboard-document-list class="w-10 h-10 mx-auto opacity-30" />
                             <p>{{ __('No elements in this project') }}</p>
                         </div>
                     @endif
@@ -309,7 +316,7 @@
                                             <td>{{ $inspection->template->name }}</td>
                                             <td>{{ $inspection->user->name }}</td>
                                             <td class="justify-end">
-                                                <button class="btn btn-xs btn-outline btn-info">👁️</button>
+                                                <button class="btn btn-xs btn-outline btn-info"><x-heroicon-o-eye class="w-3.5 h-3.5" /></button>
                                             </td>
                                         </tr>
                                     @endforeach
@@ -318,7 +325,7 @@
                         </div>
                     @else
                         <div class="text-center text-gray-400 py-8">
-                            <p class="text-lg">📋</p>
+                            <x-heroicon-o-clipboard-document-list class="w-10 h-10 mx-auto opacity-30" />
                             <p>{{ __('No inspections registered') }}</p>
                         </div>
                     @endif