enhancement(axe-os): Add network tooltips

main/http_server/axe-os/src/app/components/network-edit/network.edit.component.html

@@ -1,7 +1,10 @@
 <form *ngIf="form" [formGroup]="form">
     <div class="card">
         <div class="field grid p-fluid">
-            <label htmlFor="hostname" class="col-12 md:col-2 md:m-0">Hostname</label>
+            <label htmlFor="hostname" class="col-12 md:col-2 md:m-0">
+                Hostname<i class="pi pi-info-circle text-xs px-1" 
+                         [pTooltip]="HOSTNAME_TOOLTIP"></i>
+            </label>
             <div class="col-12 md:col-10">
                 <input pInputText id="hostname" type="text" formControlName="hostname" />
             </div>

main/http_server/axe-os/src/app/components/network-edit/network.edit.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { finalize } from 'rxjs/operators';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { TOOLTIPS } from 'src/app/constants';
 import { DialogService } from 'src/app/services/dialog.service';
 import { LoadingService } from 'src/app/services/loading.service';
 import { SystemService } from 'src/app/services/system.service';
@@ -26,6 +27,8 @@ export class NetworkEditComponent implements OnInit {
   public form!: FormGroup;
   public savedChanges: boolean = false;
   public scanning: boolean = false;
+
+  public readonly HOSTNAME_TOOLTIP = TOOLTIPS.HOSTNAME;
 
   @Input() uri = '';
 

main/http_server/axe-os/src/app/components/swarm/swarm.component.html

@@ -105,7 +105,9 @@
                 },
             ]">
                 <div class="flex align-items-center cursor-pointer select-none h-full" (click)="sortBy(field.name)">
-                    <span class="flex-1">{{field.label}}</span>
+                    <span class="flex-1" 
+                          [pTooltip]="field.name === 'hostname' ? HOSTNAME_TOOLTIP : ''"
+                          tooltipPosition="top">{{field.label}}</span>
                     <i class="pi text-xs flex items-center" [ngClass]="{
                         'pi-sort-alt': sortField !== field.name,
                         'pi-sort-amount-up-alt': sortField === field.name && sortDirection === 'asc',

main/http_server/axe-os/src/app/components/swarm/swarm.component.ts

@@ -3,6 +3,7 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { forkJoin, catchError, from, map, mergeMap, of, take, timeout, toArray, Observable } from 'rxjs';
+import { TOOLTIPS } from 'src/app/constants';
 import { LocalStorageService } from 'src/app/local-storage.service';
 import { ModalComponent } from '../modal/modal.component';
 
@@ -42,6 +43,8 @@ export class SwarmComponent implements OnInit, OnDestroy {
   public sortField: string = '';
   public sortDirection: 'asc' | 'desc' = 'asc';
 
+  public readonly HOSTNAME_TOOLTIP = TOOLTIPS.HOSTNAME;
+
   constructor(
     private fb: FormBuilder,
     private toastr: ToastrService,

main/http_server/axe-os/src/app/constants.ts

@@ -0,0 +1,3 @@
+export const TOOLTIPS = {
+  HOSTNAME: "The name this miner will use on your local network. Choose a unique name to help you identify it easily (e.g., 'miner-01' or 'garage-miner'). This is useful when managing multiple miners."
+} as const;