From 5e29219e98ad3178331d7c43c9836794ac182bf0 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sun, 16 Nov 2025 15:44:00 +0200
Subject: [PATCH 1/8] table view: add export selected rows

---
 .../db-table-view.component.html              |  4 ++
 .../db-table-view/db-table-view.component.ts  | 58 +++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
index a52a55a2d..936f95c19 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
@@ -37,6 +37,10 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                     {{action.title}}
                 </button>
             </ng-container>
+            <button mat-button *ngIf="tableData && tableData.isExportAllowed"
+                (click)="exportData()">
+                Export to CSV
+            </button>
             <button mat-button *ngIf="tableData && tableData.permissions && tableData.permissions.delete && tableData.canDelete"
                 (click)="handleActions({title: 'Delete rows', type: 'multiple',  require_confirmation: true})">
                 Delete
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
index 42520567d..4a817a55d 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
@@ -522,4 +522,62 @@ export class DbTableViewComponent implements OnInit {
     console.log('table view fiers filterSelected:', $event)
     this.applyFilter.emit($event);
   }
+
+  exportData() {
+    console.log('export data');
+    console.log(this.selection.selected);
+
+    // Helper function to convert value to CSV-safe string
+    const convertToCSVValue = (value: any): string => {
+      // Handle null and undefined
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // Handle nested objects and arrays - convert to JSON string
+      if (typeof value === 'object') {
+        try {
+          // Convert object/array to JSON string
+          value = JSON.stringify(value);
+        } catch (e) {
+          // Handle circular references or other JSON stringify errors
+          value = '[Object]';
+        }
+      }
+
+      // Convert to string if not already
+      const stringValue = String(value);
+
+      // Check if value needs to be quoted (contains comma, double quote, or newline)
+      if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n') || stringValue.includes('\r')) {
+        // Escape double quotes by doubling them and wrap in quotes
+        return `"${stringValue.replace(/"/g, '""')}"`;
+      }
+
+      return stringValue;
+    };
+
+    const header = Object.keys(this.selection.selected[0]);
+
+    // Create CSV rows with proper handling of nested objects
+    const csv = this.selection.selected.map((row) =>
+      header
+        .map((fieldName) => convertToCSVValue(row[fieldName]))
+        .join(',')
+    );
+
+    // Add header row
+    csv.unshift(header.map(h => convertToCSVValue(h)).join(','));
+    const csvArray = csv.join('\r\n');
+
+    const a = document.createElement('a');
+    const blob = new Blob([csvArray], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+
+    a.href = url;
+    a.download = 'myFile.csv';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    a.remove();
+  }
 }

From 50cf5cc73ac165811f7f4937768335dce88c7d94 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sun, 16 Nov 2025 17:07:18 +0200
Subject: [PATCH 2/8] record view mode mobile version

---
 .../db-table-row-view/db-table-row-view.component.css    | 9 ++++++++-
 .../dashboard/db-table-view/db-table-view.component.css  | 4 ----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
index 3d8e26916..0fd0eaca7 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
@@ -25,7 +25,14 @@
 
 @media (width <= 600px) {
     .row-preview-sidebar_open {
-        width: 0;
+        position: fixed;
+        top: 44px;
+        bottom: 0;
+        left: 0;
+        min-height: initial;
+        max-height: initial;
+        width: calc(100vw - 24px);
+        z-index: 2;
     }
 }
 
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
index fc9b6586a..ab329f243 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -499,7 +499,3 @@ tr.mat-row:hover {
     padding: 8px 0;
     width: 100%;
 }
-
-.hidden {
-    display: none;
-}

From 813a82774221c12ba946ac3acd5442e3af541dae Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sun, 16 Nov 2025 17:29:07 +0200
Subject: [PATCH 3/8] fix foreign key hint mobile version

---
 .../foreign-key/foreign-key.component.css        | 16 ++++++++++++++++
 .../foreign-key/foreign-key.component.html       |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
index 7e45a5324..cf1ac1e68 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
@@ -22,6 +22,22 @@
     margin-bottom: 16px;
 }
 
+@media screen and (width <= 600px) {
+    .foreign-key ::ng-deep .mat-mdc-form-field-subscript-wrapper{
+        margin-bottom: 24px;
+    }
+
+    .foreign-key ::ng-deep .mat-mdc-form-field-hint-wrapper {
+        padding-right: 0;
+        width: calc(100% + 8px);
+    }
+
+    .foreign-key ::ng-deep .mat-mdc-form-field-bottom-align::before {
+        margin-left: 0;
+    }
+
+}
+
 .hint-link {
     color: var(--color-accentedPalette-500);
 }
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
index cb1b60249..11fa82c06 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
@@ -18,7 +18,7 @@
                 </mat-option>
             }
         </mat-autocomplete>
-        <mat-hint>Improve search performance by configuring <em>Foreign key search fields</em>&nbsp;
+        <mat-hint>Improve search performance by configuring <em>Searchable foreign key columns</em>&nbsp;
             <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/settings" class="hint-link">here</a>.
         </mat-hint>
     </mat-form-field>

From 8a687c9772b586cd58fcf97ec8d83a19199e66cd Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sun, 16 Nov 2025 17:33:43 +0200
Subject: [PATCH 4/8] foreign key: fix desktop version hint

---
 .../foreign-key/foreign-key.component.css              | 10 +++++-----
 .../foreign-key/foreign-key.component.html             |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
index cf1ac1e68..af4b5f51d 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
@@ -22,16 +22,16 @@
     margin-bottom: 16px;
 }
 
+.foreign-key ::ng-deep .mat-mdc-form-field-hint-wrapper {
+    padding-right: 0;
+    width: calc(100% + 8px);
+}
+
 @media screen and (width <= 600px) {
     .foreign-key ::ng-deep .mat-mdc-form-field-subscript-wrapper{
         margin-bottom: 24px;
     }
 
-    .foreign-key ::ng-deep .mat-mdc-form-field-hint-wrapper {
-        padding-right: 0;
-        width: calc(100% + 8px);
-    }
-
     .foreign-key ::ng-deep .mat-mdc-form-field-bottom-align::before {
         margin-left: 0;
     }
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
index 11fa82c06..1c1b2a961 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
@@ -19,7 +19,7 @@
             }
         </mat-autocomplete>
         <mat-hint>Improve search performance by configuring <em>Searchable foreign key columns</em>&nbsp;
-            <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/settings" class="hint-link">here</a>.
+            <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/settings" class="hint-link">here</a>
         </mat-hint>
     </mat-form-field>
     <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/entry"

From c499e7de1e1ae6a365bb6e2b8126bb890a80d397 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sun, 16 Nov 2025 22:48:24 +0200
Subject: [PATCH 5/8] folders: fix dark theme

---
 .../db-table-settings.component.css           | 33 +++++++++++++++++--
 .../db-table-settings.component.html          |  2 +-
 .../db-tables-list.component.css              | 33 +++++++++++--------
 .../db-tables-list.component.html             |  3 +-
 4 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
index d267f61af..fa12f4272 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
@@ -27,6 +27,23 @@
     }
 }
 
+.settings-fields__subheading {
+    margin-top: -4px !important;
+    margin-bottom: 0 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    .settings-fields__subheading {
+        color: rgba(255,255,255,0.64);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .settings-fields__subheading {
+        color: rgba(0,0,0,0.64);
+    }
+}
+
 .settings-table-display {
     display: flex;
     align-items: center;
@@ -94,13 +111,25 @@
     top: -12px;
     left: 8px;
     display: inline-block;
-    background: #fff;
-    color: rgba(0, 0, 0, 0.6);
     font-size: 0.75em;
     padding: 4px;
     z-index: 1;
 }
 
+@media (prefers-color-scheme: dark) {
+    .order__title {
+        background: transparent;
+        color: rgba(255, 255, 255, 0.6);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .order__title {
+        background: #fff;
+        color: rgba(0, 0, 0, 0.6);
+    }
+}
+
 .order-item {
     background: var(--mat-expansion-container-background-color);
     color: var(--mat-expansion-container-text-color);
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
index 5dbc53d66..6e3f7e20e 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
@@ -155,7 +155,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
             </mat-form-field>
 
             <h2 class="mat-heading-2" style="margin-bottom: -4px; margin-top: 12px">"Edit row" behavior</h2>
-            <p class="mat-body-1" style="margin-top: -16px; margin-bottom: 0; color: rgba(0,0,0,0.64)">You can edit a row by clicking on the "pencil" icon on the right.</p>
+            <p class="mat-body-1 settings-fields__subheading">You can edit a row by clicking on the "pencil" icon on the right.</p>
             <mat-form-field appearance="outline">
                 <mat-label>Searchable foreign key columns</mat-label>
                 <mat-select multiple
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
index d1fc2efe5..f4b793047 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
@@ -209,6 +209,11 @@
 
 /* Dark theme adaptations */
 @media (prefers-color-scheme: dark) {
+    .collapsed-tables-list {
+        background: #303030;
+        border: 1px solid #424242;
+    }
+
     .collapsed-folder-item {
         background-color: transparent;
         color: #ffffff;
@@ -463,16 +468,25 @@
     }
 
     .folder-header.expanded {
-        background-color: #212121;
-        color: #ffffff;
+        background-color: #212121 !important;
+        color: #ffffff !important;
     }
 
-    .folder-header.expanded .folder-icon {
-        color: #ffffff;
+    .folder-header .folder-icon {
+        color: #ffffff !important;
+    }
+
+    /* .folder-header.expanded .folder-name, */
+    .folder-header .folder-name {
+        color: #ffffff !important;
     }
 
     .folder-header.expanded .folder-expand-icon {
-        color: #ffffff;
+        color: #ffffff !important;
+    }
+
+    .folder-header:hover {
+        background-color: rgba(255, 255, 255, 0.05) !important;
     }
 }
 
@@ -548,15 +562,6 @@
 
 .add-folder-button {
     width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    font-weight: 500;
-    text-transform: none;
-    letter-spacing: 0.5px;
-    border-color: #e0e0e0 !important;
-    color: #616161 !important;
 }
 
 .add-folder-button:hover {
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
index 5ae7c8a97..9e63465f8 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
@@ -25,8 +25,7 @@
                         matTooltipPosition="right"
                         (click)="onCollapsedFolderClick(folder)">
                     <span *ngIf="folder.name === 'All Tables'"
-                        class="material-icons collapsed-folder-icon"
-                        [style.color]="getFolderIconColor(folder)">dehaze</span>
+                        class="material-icons collapsed-folder-icon">dehaze</span>
                         <span *ngIf="folder.name !== 'All Tables'"
                             class="material-icons collapsed-folder-icon"
                             [style.color]="getFolderIconColor(folder, currentCollapsedFolder === folder.id)">folder</span>

From 6b314805684b77b6208788f50c4980fc3e253f07 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sun, 16 Nov 2025 23:10:00 +0200
Subject: [PATCH 6/8] table list: move add folder button to the bottom when at
 least 1 custom button is added

---
 .../db-tables-list.component.css              |  50 ++++-
 .../db-tables-list.component.html             | 194 +++++++++---------
 .../db-tables-list.component.ts               |   5 +
 3 files changed, 150 insertions(+), 99 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
index f4b793047..d4011a6b0 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
@@ -29,6 +29,7 @@
     align-items: center;
     height: 100%;
     min-height: calc(100vh - 120px); /* Adjust based on header height */
+    position: relative;
 }
 
 .collapsed-top-section {
@@ -39,14 +40,20 @@
     flex: 1;
     justify-content: flex-start;
     padding-top: 8px;
+    overflow-y: auto;
+    width: 100%;
 }
 
 .collapsed-bottom-section {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: auto;
-    padding-bottom: 8px;
+    position: sticky;
+    bottom: 0;
+    background-color: #ffffff;
+    padding: 8px 0;
+    width: 100%;
+    z-index: 10;
 }
 
 .collapsed-folders {
@@ -214,6 +221,10 @@
         border: 1px solid #424242;
     }
 
+    .collapsed-bottom-section {
+        background-color: #303030;
+    }
+
     .collapsed-folder-item {
         background-color: transparent;
         color: #ffffff;
@@ -524,11 +535,32 @@
     margin-left: 16px;
 }
 
+/* Expanded state container */
+.expanded-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+/* Expanded content wrapper */
+.expanded-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.expanded-content-wrapper.custom-folders-exist {
+    flex-direction: column-reverse;
+}
+
 .search-input {
     background-color: transparent;
-    margin-top: 4px;
+    margin-top: 8px;
     margin-left: 16px;
-    /* margin-bottom: -24px; */
+    margin-bottom: 4px;
     width: calc(100% - 32px);
     max-width: calc(240px - 32px);
     box-sizing: border-box;
@@ -554,12 +586,18 @@
 .add-folder-button-container {
     margin-left: 16px;
     margin-right: 16px;
-    margin-top: -12px;
-    margin-bottom: 12px;
+    margin-top: 0;
+    margin-bottom: 8px;
     width: calc(100% - 32px);
     box-sizing: border-box;
 }
 
+/* Adjust margins when custom folders exist (button at bottom) */
+.expanded-content-wrapper.custom-folders-exist .add-folder-button-container {
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
 .add-folder-button {
     width: 100%;
 }
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
index 9e63465f8..0f0310cc4 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
@@ -70,103 +70,111 @@
             </div>
         </div>
 
-        <mat-form-field *ngIf="!collapsed" appearance="fill" class="search-input">
-            <input matInput name="search" #search="ngModel"
-                placeholder="Search"
-                [(ngModel)]="substringToSearch"
-                (keyup)="searchSubstring()">
-            <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
-        </mat-form-field>
-
-        <div *ngIf="!collapsed && accessLevel === 'edit'" class="add-folder-button-container">
-            <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
-                <mat-icon>add</mat-icon>
-                Add Folder
-            </button>
-        </div>
-
-        <!-- Collections Section -->
-        <div *ngIf="!collapsed && folders.length > 0" class="folders-section">
-            <ng-container *ngFor="let folder of folders; trackBy: trackByFolderId">
-                <div *ngIf="shouldShowFolder(folder)"
-                    class="folder-item"
-                    [class.expanded]="folder.expanded"
-                    [class.drag-over]="dragOverFolder === folder.id"
-                    (dragover)="onFolderDragOver($event, folder.id)"
-                    (dragleave)="onFolderDragLeave($event, folder.id)"
-                    (drop)="onFolderDrop($event, folder)">
-                    <div class="folder-header"
-                        [class.expanded]="folder.expanded"
-                        (click)="toggleFolder(folder.id)">
-                        <!-- Folder icon on the left -->
-                        <span *ngIf="folder.name === 'All Tables'"
-                            class="material-icons folder-icon"
-                            [style.color]="getFolderIconColor(folder)">dehaze</span>
-                        <span *ngIf="folder.name !== 'All Tables'"
-                            class="material-icons folder-icon"
-                            [style.color]="getFolderIconColor(folder)">folder</span>
-
-                        <div class="folder-name">
-                            {{folder.name}}
-                        </div>
+        <!-- Expanded state container -->
+        <div *ngIf="!collapsed" class="expanded-container">
+            <!-- Search field always at the top -->
+            <mat-form-field appearance="fill" class="search-input">
+                <input matInput name="search" #search="ngModel"
+                    placeholder="Search"
+                    [(ngModel)]="substringToSearch"
+                    (keyup)="searchSubstring()">
+                <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
+            </mat-form-field>
+
+            <!-- Wrapper for folders and add button with dynamic flex-direction -->
+            <div class="expanded-content-wrapper" [class.custom-folders-exist]="hasCustomFolders()">
+                <!-- Single Add Folder button -->
+                <div *ngIf="accessLevel === 'edit'" class="add-folder-button-container">
+                    <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
+                        <mat-icon>add</mat-icon>
+                        Add Folder
+                    </button>
+                </div>
 
-                        <div class="folder-actions">
-                            <button *ngIf="folder.name !== 'All Tables' && accessLevel === 'edit'"
-                                mat-icon-button class="more-folder-button"
-                                [matMenuTriggerFor]="folderMenu"
-                                (click)="$event.stopPropagation()"
-                                matTooltip="Folder options">
-                                <mat-icon>more_vert</mat-icon>
-                            </button>
-
-                            <!-- Expand/collapse icon on the right -->
-                            <mat-icon class="folder-expand-icon" [class.expanded]="folder.expanded">
-                                chevron_right
-                            </mat-icon>
-                            <mat-menu #folderMenu="matMenu">
-                                <button mat-menu-item (click)="showEditTablesDialog(folder)">
-                                    <mat-icon fontSet="material-icons-outlined">edit_note</mat-icon>
-                                    <span>Edit</span>
-                                </button>
-                                <button mat-menu-item (click)="deleteFolder(folder)">
-                                    <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
-                                    <span>Delete</span>
-                                </button>
-                            </mat-menu>
-                        </div>
-                    </div>
-                    <div *ngIf="folder.expanded" class="folder-tables">
-                        <div *ngIf="getFolderTables(folder).length > 0; else noTablesInCollection"
-                            class="selected-tables-list">
-                            <div *ngFor="let table of getFolderTables(folder)"
-                                class="selected-table-item"
-                                [draggable]="true"
-                                (dragstart)="onTableDragStart($event, table)"
-                                (dragend)="onTableDragEnd($event)">
-                                <a class="table-link"
-                                    routerLink="/dashboard/{{connectionID}}/{{table.table}}"
-                                    [queryParams]="{page_index: 0, page_size: 30}"
-                                    [ngClass]="{'table-link_active': selectedTable === table.table}"
-                                    (click)="closeSidebar()">
-                                    <span class="table-name">{{getTableName(table)}}</span>
-                                </a>
+                <!-- Collections Section -->
+                <div *ngIf="folders && folders.length > 0" class="folders-section">
+                    <ng-container *ngFor="let folder of folders; trackBy: trackByFolderId">
+                        <div *ngIf="shouldShowFolder(folder)"
+                            class="folder-item"
+                            [class.expanded]="folder.expanded"
+                            [class.drag-over]="dragOverFolder === folder.id"
+                            (dragover)="onFolderDragOver($event, folder.id)"
+                            (dragleave)="onFolderDragLeave($event, folder.id)"
+                            (drop)="onFolderDrop($event, folder)">
+                            <div class="folder-header"
+                                [class.expanded]="folder.expanded"
+                                (click)="toggleFolder(folder.id)">
+                                <!-- Folder icon on the left -->
+                                <span *ngIf="folder.name === 'All Tables'"
+                                    class="material-icons folder-icon"
+                                    [style.color]="getFolderIconColor(folder)">dehaze</span>
+                                <span *ngIf="folder.name !== 'All Tables'"
+                                    class="material-icons folder-icon"
+                                    [style.color]="getFolderIconColor(folder)">folder</span>
+
+                                <div class="folder-name">
+                                    {{folder.name}}
+                                </div>
+
+                                <div class="folder-actions">
+                                    <button *ngIf="folder.name !== 'All Tables' && accessLevel === 'edit'"
+                                        mat-icon-button class="more-folder-button"
+                                        [matMenuTriggerFor]="folderMenu"
+                                        (click)="$event.stopPropagation()"
+                                        matTooltip="Folder options">
+                                        <mat-icon>more_vert</mat-icon>
+                                    </button>
+
+                                    <!-- Expand/collapse icon on the right -->
+                                    <mat-icon class="folder-expand-icon" [class.expanded]="folder.expanded">
+                                        chevron_right
+                                    </mat-icon>
+                                    <mat-menu #folderMenu="matMenu">
+                                        <button mat-menu-item (click)="showEditTablesDialog(folder)">
+                                            <mat-icon fontSet="material-icons-outlined">edit_note</mat-icon>
+                                            <span>Edit</span>
+                                        </button>
+                                        <button mat-menu-item (click)="deleteFolder(folder)">
+                                            <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
+                                            <span>Delete</span>
+                                        </button>
+                                    </mat-menu>
+                                </div>
                             </div>
-
-                        </div>
-                        <ng-template #noTablesInCollection>
-                            <div class="no-tables-message" [class.empty-folder-message]="folder.isEmpty">
-                                <p *ngIf="!folder.isEmpty">No tables in this folder</p>
-                                <button mat-stroked-button
-                                    color="primary"
-                                    [class.empty-folder-button]="folder.isEmpty"
-                                    (click)="showEditTablesDialog(folder)">
-                                    {{folder.isEmpty ? 'Add or drag and drop tables' : 'Add Table'}}
-                                </button>
+                            <div *ngIf="folder.expanded" class="folder-tables">
+                                <div *ngIf="getFolderTables(folder).length > 0; else noTablesInCollection"
+                                    class="selected-tables-list">
+                                    <div *ngFor="let table of getFolderTables(folder)"
+                                        class="selected-table-item"
+                                        [draggable]="true"
+                                        (dragstart)="onTableDragStart($event, table)"
+                                        (dragend)="onTableDragEnd($event)">
+                                        <a class="table-link"
+                                            routerLink="/dashboard/{{connectionID}}/{{table.table}}"
+                                            [queryParams]="{page_index: 0, page_size: 30}"
+                                            [ngClass]="{'table-link_active': selectedTable === table.table}"
+                                            (click)="closeSidebar()">
+                                            <span class="table-name">{{getTableName(table)}}</span>
+                                        </a>
+                                    </div>
+
+                                </div>
+                                <ng-template #noTablesInCollection>
+                                    <div class="no-tables-message" [class.empty-folder-message]="folder.isEmpty">
+                                        <p *ngIf="!folder.isEmpty">No tables in this folder</p>
+                                        <button mat-stroked-button
+                                            color="primary"
+                                            [class.empty-folder-button]="folder.isEmpty"
+                                            (click)="showEditTablesDialog(folder)">
+                                            {{folder.isEmpty ? 'Add or drag and drop tables' : 'Add Table'}}
+                                        </button>
+                                    </div>
+                                </ng-template>
                             </div>
-                        </ng-template>
-                    </div>
+                        </div>
+                    </ng-container>
                 </div>
-            </ng-container>
+            </div>
         </div>
 
     </div>
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts
index c386cc20a..68b63c871 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts
@@ -429,6 +429,11 @@ export class DbTablesListComponent implements OnInit, OnChanges {
     return folder.id;
   }
 
+  hasCustomFolders(): boolean {
+    // Check if there are folders other than "All Tables"
+    return this.folders.some(folder => folder.name !== 'All Tables');
+  }
+
   private preserveFolderStates() {
     // Save expanded states of all folders
     this.folders.forEach(folder => {

From a48fcaee8562c2eee70d8f910f81ae66f9b820d9 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 17 Nov 2025 02:08:46 +0200
Subject: [PATCH 7/8] table view, side bar: fix scrolling and layout

---
 .../dashboard/dashboard.component.css         |  9 +++-
 .../db-tables-list.component.css              | 44 ++++++++++---------
 .../db-tables-list.component.html             | 36 +++++++--------
 3 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css
index bede3f5b8..3f9572788 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.css
+++ b/frontend/src/app/components/dashboard/dashboard.component.css
@@ -36,8 +36,14 @@
     }
 }
 
+.table-list-sidenav-container ::ng-deep .mat-drawer-inner-container,
+.side-bar_collapsed ::ng-deep .mat-drawer-inner-container {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+
 .table-list-sidenav-container ::ng-deep .mat-drawer:not(.mat-drawer-opened):not(.mat-drawer-animating) .mat-drawer-inner-container {
-    display: initial;
+    display: block;
 }
 
 .mat-list-item {
@@ -105,6 +111,7 @@
 .table-preview {
     display: flex;
     overflow-x: hidden;
+    height: calc(100vh - 44px);
 }
 
 .table-preview-content {
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
index d4011a6b0..d2e41612e 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
@@ -438,7 +438,8 @@
 .tables-list {
     width: 100%;
     box-sizing: border-box;
-    min-height: 0;
+    /* min-height: 0; */
+    height: calc(100vh - 100px); /* Adjust based on header height */
 }
 
 .tables-list ::ng-deep .table-list-item .mat-list-item-content {
@@ -541,10 +542,11 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    position: relative;
 }
 
-/* Expanded content wrapper */
-.expanded-content-wrapper {
+/* Expanded top section with search and folders */
+.expanded-top-section {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -552,8 +554,25 @@
     overflow-y: auto;
 }
 
-.expanded-content-wrapper.custom-folders-exist {
-    flex-direction: column-reverse;
+/* Expanded bottom section with add button */
+.expanded-bottom-section {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: sticky;
+    bottom: 0;
+    background-color: #ffffff;
+    padding: 8px 16px;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
+}
+
+/* Dark theme support for expanded bottom section */
+@media (prefers-color-scheme: dark) {
+    .expanded-bottom-section {
+        background-color: #303030;
+    }
 }
 
 .search-input {
@@ -583,21 +602,6 @@
     padding-bottom: 8px;
 }
 
-.add-folder-button-container {
-    margin-left: 16px;
-    margin-right: 16px;
-    margin-top: 0;
-    margin-bottom: 8px;
-    width: calc(100% - 32px);
-    box-sizing: border-box;
-}
-
-/* Adjust margins when custom folders exist (button at bottom) */
-.expanded-content-wrapper.custom-folders-exist .add-folder-button-container {
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
-
 .add-folder-button {
     width: 100%;
 }
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
index 0f0310cc4..92d3f0bab 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
@@ -72,24 +72,16 @@
 
         <!-- Expanded state container -->
         <div *ngIf="!collapsed" class="expanded-container">
-            <!-- Search field always at the top -->
-            <mat-form-field appearance="fill" class="search-input">
-                <input matInput name="search" #search="ngModel"
-                    placeholder="Search"
-                    [(ngModel)]="substringToSearch"
-                    (keyup)="searchSubstring()">
-                <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
-            </mat-form-field>
-
-            <!-- Wrapper for folders and add button with dynamic flex-direction -->
-            <div class="expanded-content-wrapper" [class.custom-folders-exist]="hasCustomFolders()">
-                <!-- Single Add Folder button -->
-                <div *ngIf="accessLevel === 'edit'" class="add-folder-button-container">
-                    <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
-                        <mat-icon>add</mat-icon>
-                        Add Folder
-                    </button>
-                </div>
+            <!-- Top section with search and folders -->
+            <div class="expanded-top-section">
+                <!-- Search field always at the top -->
+                <mat-form-field appearance="fill" class="search-input">
+                    <input matInput name="search" #search="ngModel"
+                        placeholder="Search"
+                        [(ngModel)]="substringToSearch"
+                        (keyup)="searchSubstring()">
+                    <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
+                </mat-form-field>
 
                 <!-- Collections Section -->
                 <div *ngIf="folders && folders.length > 0" class="folders-section">
@@ -175,6 +167,14 @@
                     </ng-container>
                 </div>
             </div>
+
+            <!-- Bottom section with add folder button (fixed at bottom) -->
+            <div *ngIf="accessLevel === 'edit'" class="expanded-bottom-section">
+                <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
+                    <mat-icon>add</mat-icon>
+                    Add Folder
+                </button>
+            </div>
         </div>
 
     </div>

From 51d8de507cf6d8ff203beeca9a298f9776a9307d Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 17 Nov 2025 02:18:22 +0200
Subject: [PATCH 8/8] table view, left side bar: fix add folder button position
 when no custom folders

---
 .../db-tables-list.component.css              | 56 ++++++++++---------
 .../db-tables-list.component.html             | 43 +++++++-------
 2 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
index d2e41612e..bb8824c20 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
@@ -543,48 +543,49 @@
     width: 100%;
     height: 100%;
     position: relative;
+    overflow-y: auto;
 }
 
-/* Expanded top section with search and folders */
-.expanded-top-section {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    flex: 1;
-    overflow-y: auto;
+.search-input {
+    background-color: transparent;
+    margin-top: 8px;
+    margin-left: 16px;
+    margin-bottom: -8px;
+    width: calc(100% - 32px);
+    max-width: calc(240px - 32px);
+    box-sizing: border-box;
+    order: 1; /* Always first */
 }
 
-/* Expanded bottom section with add button */
-.expanded-bottom-section {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
+/* Add folder button container */
+.add-folder-button-container {
+    order: 2; /* Default: after search when no custom folders */
+    margin-left: 16px;
+    margin-right: 16px;
+    margin-top: 4px;
+    margin-bottom: 8px;
+    width: calc(100% - 32px);
+    box-sizing: border-box;
+}
+
+/* When custom folders exist, move add button to bottom */
+.expanded-container.has-custom-folders .add-folder-button-container {
+    order: 4; /* After folders section */
     position: sticky;
     bottom: 0;
     background-color: #ffffff;
     padding: 8px 16px;
-    width: 100%;
-    box-sizing: border-box;
     z-index: 10;
+    margin-top: auto;
 }
 
-/* Dark theme support for expanded bottom section */
+/* Dark theme support for add button container when at bottom */
 @media (prefers-color-scheme: dark) {
-    .expanded-bottom-section {
+    .expanded-container.has-custom-folders .add-folder-button-container {
         background-color: #303030;
     }
 }
 
-.search-input {
-    background-color: transparent;
-    margin-top: 8px;
-    margin-left: 16px;
-    margin-bottom: 4px;
-    width: calc(100% - 32px);
-    max-width: calc(240px - 32px);
-    box-sizing: border-box;
-}
-
 .search-input ::ng-deep * {
     background-color: transparent !important;
 }
@@ -622,6 +623,9 @@
     margin-bottom: 8px;
     width: calc(100% - 32px);
     box-sizing: border-box;
+    order: 3; /* After search and (optionally) add button */
+    flex: 1;
+    overflow-y: auto;
 }
 
 .folder-item {
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
index 92d3f0bab..1897bdb94 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
@@ -71,20 +71,26 @@
         </div>
 
         <!-- Expanded state container -->
-        <div *ngIf="!collapsed" class="expanded-container">
-            <!-- Top section with search and folders -->
-            <div class="expanded-top-section">
-                <!-- Search field always at the top -->
-                <mat-form-field appearance="fill" class="search-input">
-                    <input matInput name="search" #search="ngModel"
-                        placeholder="Search"
-                        [(ngModel)]="substringToSearch"
-                        (keyup)="searchSubstring()">
-                    <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
-                </mat-form-field>
-
-                <!-- Collections Section -->
-                <div *ngIf="folders && folders.length > 0" class="folders-section">
+        <div *ngIf="!collapsed" class="expanded-container" [class.has-custom-folders]="hasCustomFolders()">
+            <!-- Search field always at the top -->
+            <mat-form-field appearance="fill" class="search-input">
+                <input matInput name="search" #search="ngModel"
+                    placeholder="Search"
+                    [(ngModel)]="substringToSearch"
+                    (keyup)="searchSubstring()">
+                <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
+            </mat-form-field>
+
+            <!-- Add Folder button (position controlled by CSS order) -->
+            <div *ngIf="accessLevel === 'edit'" class="add-folder-button-container">
+                <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
+                    <mat-icon>add</mat-icon>
+                    Add Folder
+                </button>
+            </div>
+
+            <!-- Collections Section -->
+            <div *ngIf="folders && folders.length > 0" class="folders-section">
                     <ng-container *ngFor="let folder of folders; trackBy: trackByFolderId">
                         <div *ngIf="shouldShowFolder(folder)"
                             class="folder-item"
@@ -165,15 +171,6 @@
                             </div>
                         </div>
                     </ng-container>
-                </div>
-            </div>
-
-            <!-- Bottom section with add folder button (fixed at bottom) -->
-            <div *ngIf="accessLevel === 'edit'" class="expanded-bottom-section">
-                <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
-                    <mat-icon>add</mat-icon>
-                    Add Folder
-                </button>
             </div>
         </div>