added mini btn mode

ui-ngx/src/app/core/auth/auth.reducer.ts

@@ -31,8 +31,8 @@ const emptyUserAuthState: AuthPayload = {
   persistDeviceStateToTelemetry: false,
   mobileQrEnabled: false,
   maxResourceSize: 0,
-  userSettings: initialUserSettings,
   maxDebugModeDurationMinutes: 0,
+  userSettings: initialUserSettings
 };
 
 export const initialState: AuthState = {

ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.html

@@ -16,6 +16,7 @@
 
 -->
 <button mat-stroked-button
+        *ngIf="!minifyMode else minifiedButton"
         class="tb-rounded-btn flex-1 w-36"
         color="primary"
         #matButton
@@ -28,3 +29,16 @@
   <span *ngIf="(isDebugAllActive$ | async) && !debugFailures">{{ debugAllUntil | durationLeft }}</span>
   <span *ngIf="!(isDebugAllActive$ | async) && debugFailures" translate>debug-config.failures</span>
 </button>
+<ng-template #minifiedButton>
+  <button mat-icon-button
+          class="mini-debug-btn"
+          [disabled]="disabled"
+          #matButton
+          [matTooltip]="(isDebugAllActive$ | async) ? (debugAllUntil | durationLeft) : null"
+          matTooltipPosition="above"
+          (click)="openDebugStrategyPanel($event, matButton)">
+    <mat-icon class="material-icons" [color]="((isDebugAllActive$ | async) || debugFailures) && !disabled ? 'primary' : 'inherit'">
+      bug_report
+    </mat-icon>
+  </button>
+</ng-template>

ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  .mini-debug-btn {
+    color: rgba(0, 0, 0, 0.6);
+  }
+}

ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.ts

@@ -42,6 +42,7 @@ import { Store } from '@ngrx/store';
 @Component({
   selector: 'tb-debug-config-button',
   templateUrl: './debug-config-button.component.html',
+  styleUrls: ['./debug-config-button.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
@@ -56,6 +57,7 @@ export class DebugConfigButtonComponent {
   @Input() debugAll = false;
   @Input() debugAllUntil = 0;
   @Input() disabled = false;
+  @Input() minifyMode = false;
   @Input() debugLimitsConfiguration: string;
 
   @Output() onDebugConfigChanged = new EventEmitter<HasDebugConfig>();