feat(ui): persistance for tree panel and refinement of RemotePC badge

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [1.12.0] - 2026-09-30
+
+### Added
+- **UI/UX**: Implementada persistencia en localStorage para el ancho del panel lateral del rbol de jerarquas, individualizada por usuario.
+- **RemotePC**: Aadida la insignia indicadora de conexin remota en la vista de lista (tabla) de clientes para unificar la experiencia con la vista de tarjetas.
+
+### Changed
+- **UI/UX**: Refinados los estilos visuales de la insignia de RemotePC (colores sutiles, bordes redondeados y tamao reducido) para armonizar con el resto de etiquetas (ej: velocidad de red).
+
+# Changelog
+
 ## [1.11.1] - 2026-09-24
 
 ### Fixed
@@ -556,3 +567,4 @@
 ### Fixed
 - Resolved an issue that prevented editing software profiles correctly.
 - Fixed a bug where newly created commands failed to execute in the commands section.
+

ogWebconsole/package.json

@@ -54,3 +54,4 @@
     "typescript": "~5.4.5"
   }
 }
+

ogWebconsole/src/app/components/groups/groups.component.css

@@ -915,21 +915,22 @@ mat-tree mat-tree-node.disabled:hover {
 .remote-pc-badge {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  background-color: #1976d2;
-  color: white;
-  padding: 2px 6px;
-  border-radius: 10px;
-  font-size: 10px;
-  font-weight: bold;
-  margin-top: 3px;
+  gap: 4px;
+  background-color: #e3f2fd;
+  color: #1976d2;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  width: fit-content;
+  margin-top: 4px;
 }
 
 .remote-pc-icon {
-  font-size: 12px;
-  height: 12px;
-  width: 12px;
-  line-height: 12px;
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
 }
 
 .clients-list {
@@ -2025,3 +2026,29 @@ mat-button-toggle-group {
   cursor: help;
 }
 
+
+.tree-resizer {
+  width: 12px;
+  cursor: col-resize;
+  display: flex;
+  justify-content: center;
+  background-color: transparent;
+  z-index: 10;
+  transition: background-color 0.2s;
+}
+
+.tree-resizer:hover, .tree-resizer.resizing {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.resizer-line {
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.12);
+  height: 100%;
+}
+
+.main-container.resizing {
+  user-select: none;
+}
+
+

ogWebconsole/src/app/components/groups/groups.component.html

@@ -70,9 +70,9 @@
       <app-loading [isLoading]="initialLoading"></app-loading>
     </div>
   } @else {
-    <div class="main-container">
+    <div class="main-container" [class.resizing]="isTreeResizing">
       <!-- FILTERS AND TREE VIEW -->
-      <div class="filters-and-tree-container">
+      <div class="filters-and-tree-container" [style.width]="treePanelWidth + 'px !important'" [style.minWidth]="treePanelWidth + 'px !important'" [style.maxWidth]="treePanelWidth + 'px !important'" style="flex: none !important;">
         <!-- Tree -->
       <div class="tree-container" joyrideStep="treePanelStep" text="{{ 'treePanelStepText' | translate }}">
         <div class="tree-header">
@@ -288,7 +288,9 @@
         </app-execute-command>
       </mat-menu>
     </div>
-    <mat-divider [vertical]="true"></mat-divider>
+    <div class="tree-resizer" (mousedown)="onTreeResizeStart($event)" [class.resizing]="isTreeResizing">
+      <div class="resizer-line"></div>
+    </div>
     <!-- CLIENTS -->
     <div class="clients-container">
       <mat-divider class="clients-mat-divider"></mat-divider>
@@ -536,6 +538,12 @@
                                 <mat-icon class="net-speed-icon">speed</mat-icon> {{ client.netSpeed }} Mbps
                               </span>
                             }
+                            @if (client.isRemotePcActive) {
+                              <span class="remote-pc-badge list-view-badge">
+                                <mat-icon class="remote-pc-icon">computer</mat-icon>
+                                RemotePC
+                              </span>
+                            }
                           </div>
                         </td>
                       </ng-container>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -1,6 +1,6 @@
 import { inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren, ChangeDetectorRef, HostListener } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -220,6 +220,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
 
   ngOnInit(): void {
+    const savedWidth = localStorage.getItem('oggui_tree_panel_width_' + (this.auth.username || 'default'));
+    if (savedWidth) {
+      this.treePanelWidth = parseInt(savedWidth, 10);
+    }
     this.updateGridCols();
     this.refreshData(localStorage.getItem('lastSelectedOU') ?? undefined);
     window.addEventListener('resize', this.updateGridCols);
@@ -1319,6 +1323,30 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
   // Métodos para el árbol mejorado
 
+  isTreeResizing: boolean = false;
+  treePanelWidth: number = 280; // width base original ajustado
+
+  onTreeResizeStart(event: MouseEvent) {
+    this.isTreeResizing = true;
+    event.preventDefault(); // Previene la selección de texto al arrastrar
+  }
+
+  @HostListener('window:mousemove', ['$event'])
+  onTreeResizeMove(event: MouseEvent) {
+    if (!this.isTreeResizing) return;
+    this.treePanelWidth += event.movementX;
+    if (this.treePanelWidth < 250) this.treePanelWidth = 250;
+    if (this.treePanelWidth > 800) this.treePanelWidth = 800;
+  }
+
+  @HostListener('window:mouseup', ['$event'])
+  onTreeResizeEnd(event: MouseEvent) {
+    if (this.isTreeResizing) {
+      this.isTreeResizing = false;
+      localStorage.setItem('oggui_tree_panel_width_' + (this.auth.username || 'default'), this.treePanelWidth.toString());
+    }
+  }
+
   isTreeExpanded: boolean = false;
 
   toggleExpandAll(): void {

ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.css

@@ -143,19 +143,21 @@ mat-dialog-content {
 .remote-pc-badge {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  background-color: #1976d2;
-  color: white;
-  padding: 2px 6px;
-  border-radius: 10px;
-  font-size: 10px;
-  font-weight: bold;
-  margin-top: 3px;
+  gap: 4px;
+  background-color: #e3f2fd;
+  color: #1976d2;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  width: fit-content;
+  margin-top: 4px;
 }
 
 .remote-pc-icon {
-  font-size: 12px;
-  height: 12px;
-  width: 12px;
-  line-height: 12px;
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
 }
+