Collection of tables

frontend/src/app/components/dashboard/dashboard.component.css

@@ -53,6 +53,22 @@
     margin-left: 12px;
 }
 
+.toggle-button-position button {
+    border-radius: 4px;
+}
+
+.toggle-button-position button mat-icon {
+    border-radius: 4px;
+}
+
+.toggle-button-position button:hover {
+    border-radius: 4px;
+}
+
+.toggle-button-position button:hover mat-icon {
+    border-radius: 4px;
+}
+
 .dashboard {
     display: flex;
     flex-direction: column;

frontend/src/app/components/dashboard/dashboard.component.html

@@ -69,9 +69,13 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
             </ng-template>
             <app-db-tables-list
                 [collapsed]="!shownTableTitles"
+                [connectionTitle]="connectionTitle"
                 [tables]="tablesList"
                 [connectionID]="connectionID"
-                [selectedTable]="selectedTableName">
+                [selectedTable]="selectedTableName"
+                [uiSettings]="uiSettings"
+                [accessLevel]="currentConnectionAccessLevel"
+                (expandSidebar)="toggleSideBar()">
             </app-db-tables-list>
         </mat-sidenav>
         <mat-sidenav-content class="table-preview">

frontend/src/app/components/dashboard/dashboard.component.ts

@@ -124,6 +124,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
     return this._connections.currentConnection.isTestConnection
   }
 
+  get connectionTitle() {
+    return this._connections.currentConnection?.title || 'Database';
+  }
+
   get defaultTableToOpen () {
     return this._connections.defaultTableToOpen;
   }

frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css

@@ -0,0 +1,124 @@
+.confirmation-message {
+    margin: 0 0 20px 0;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #424242;
+}
+
+.confirmation-message strong {
+    color: #212121;
+    font-weight: 600;
+}
+
+.folder-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 16px;
+    background-color: #e3f2fd;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+
+.info-icon {
+    color: #1976d2;
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    margin-top: 2px;
+}
+
+.info-text {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #424242;
+    flex: 1;
+}
+
+.warning-note {
+    padding: 12px 16px;
+    background-color: #fff3e0;
+    border-radius: 4px;
+    border-left: 4px solid #ff9800;
+}
+
+.warning-note p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #424242;
+}
+
+.warning-note strong {
+    color: #e65100;
+    font-weight: 600;
+}
+
+.cancel-button {
+    color: #666;
+}
+
+.delete-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.delete-button mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .dialog-title {
+        border-bottom-color: #424242;
+    }
+
+    .dialog-content {
+        background-color: #303030;
+    }
+
+    .confirmation-message {
+        color: #e0e0e0;
+    }
+
+    .confirmation-message strong {
+        color: #fff;
+    }
+
+    .folder-info {
+        background-color: #1a3a52;
+    }
+
+    .info-icon {
+        color: #64b5f6;
+    }
+
+    .info-text {
+        color: #e0e0e0;
+    }
+
+    .warning-note {
+        background-color: #4a3c28;
+        border-left-color: #ffb74d;
+    }
+
+    .warning-note p {
+        color: #e0e0e0;
+    }
+
+    .warning-note strong {
+        color: #ffb74d;
+    }
+
+    .dialog-actions {
+        border-top-color: #424242;
+    }
+
+    .cancel-button {
+        color: #aaa;
+    }
+}

frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.html

@@ -0,0 +1,35 @@
+<h1 mat-dialog-title>
+    Delete Folder
+</h1>
+
+<mat-dialog-content>
+    <p class="confirmation-message">
+        Are you sure you want to delete the folder <strong>"{{data.folderName}}"</strong>?
+    </p>
+
+    <div class="folder-info" *ngIf="data.tableCount > 0">
+        <mat-icon class="info-icon">info</mat-icon>
+        <p class="info-text">
+            This folder contains {{data.tableCount}} table{{data.tableCount > 1 ? 's' : ''}}.
+            The tables will not be deleted, only removed from this folder.
+        </p>
+    </div>
+
+    <div class="warning-note">
+        <p><strong>Note:</strong> This action cannot be undone.</p>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button
+            (click)="onCancel()"
+            class="cancel-button">
+        Cancel
+    </button>
+    <button mat-flat-button
+            color="warn"
+            (click)="onDelete()"
+            class="delete-button">
+        Delete Folder
+    </button>
+</mat-dialog-actions>

frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.ts

@@ -0,0 +1,37 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface DbFolderDeleteDialogData {
+  folderName: string;
+  tableCount: number;
+}
+
+@Component({
+  selector: 'app-db-folder-delete-dialog',
+  templateUrl: './db-folder-delete-dialog.component.html',
+  styleUrls: ['./db-folder-delete-dialog.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatIconModule
+  ]
+})
+export class DbFolderDeleteDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<DbFolderDeleteDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DbFolderDeleteDialogData
+  ) {}
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  onDelete(): void {
+    this.dialogRef.close(true);
+  }
+}