From a026e3586dbd04279b26b5baa2d94b49f60a2424 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Jun 2026 09:20:23 +0000
Subject: [PATCH 1/5] feat(related-records): add "add record" action and empty
 indicator

Add an icon button to each related-records panel header that links to the
new-record form for the referenced table. Replace the "Absent" text with an
"Empty" badge next to the table name, and truncate long table names with an
ellipsis and tooltip.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../db-table-row-view.component.css           | 40 ++++++++++++++++++-
 .../db-table-row-view.component.html          | 20 ++++++++--
 2 files changed, 54 insertions(+), 6 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 c0dbacf53..64f5a2f75 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
@@ -175,14 +175,50 @@
 }
 
 .related-records__table-name {
-	flex: 1 0 auto;
+	flex: 1 1 auto;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-right: 8px;
+}
+
+.related-records__table-name-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
 }
 
 .related-records__actions {
-	flex-grow: 0;
+	flex: 0 0 auto;
 	justify-content: flex-end;
 }
 
+.related-records__empty-mark {
+	flex: 0 0 auto;
+	font-size: 11px;
+	line-height: 16px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	padding: 1px 6px;
+	border-radius: 8px;
+	color: rgba(0, 0, 0, 0.5);
+	background: rgba(0, 0, 0, 0.06);
+}
+
+.related-records__add-button {
+	flex: 0 0 auto;
+	white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__empty-mark {
+		color: rgba(255, 255, 255, 0.6);
+		background: rgba(255, 255, 255, 0.1);
+	}
+}
+
 .related-record {
 	--mat-list-list-item-two-line-container-height: 60px;
 
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index 572a39908..a8833492a 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -33,17 +33,29 @@ <h3 class="related-records-section__title">Related records</h3>
         <mat-accordion multi="true">
             <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
                 <mat-expansion-panel-header class="related-records__header">
-                    <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
+                    <mat-panel-title class="related-records__table-name">
+                        <span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>
+                        <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length"
+                            class="related-records__empty-mark">
+                            Empty
+                        </span>
+                    </mat-panel-title>
                     <mat-panel-description class="related-records__actions">
                         <mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
-                        <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">Absent</span>
-                        <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length"
+                        <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
+                            class="related-records__add-button"
+                            routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}/entry"
+                            matTooltip="Add a new record to {{referencedTable.displayTableName}}"
+                            (click)="handleClose(); $event.stopPropagation()">
+                            <mat-icon>add</mat-icon>
+                        </a>
+                        <!--<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length"
                             target="_blank"
                             [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']"
                             matTooltip="Set up records view"
                             (click)="handleClose()">
                             <mat-icon>settings</mat-icon>
-                        </a>
+                        </a>-->
                         <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
                             routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}"
                             [queryParams]="referencedTablesURLParams[i]"

From f0a10a340d6f7874d2efde3416d4765cb3eaa5dd Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Jun 2026 09:24:01 +0000
Subject: [PATCH 2/5] feat(related-records): apply add-record action and empty
 badge to row edit

Mirror the row-view related-records changes in the row-edit view: add an
icon button linking to the new-record form, replace "Absent" with an
"Empty" badge next to the table name, and truncate long table names.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../db-table-row-edit.component.css           | 39 ++++++++++++++++++-
 .../db-table-row-edit.component.html          | 19 ++++++---
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
index f3f9fe005..f222a3ace 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
@@ -156,14 +156,49 @@
 }
 
 .related-records__table-name {
-	flex: 1 0 auto;
+	flex: 1 1 auto;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-right: 8px;
+}
+
+.related-records__table-name-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
 }
 
 .related-records__actions {
-	flex-grow: 0;
+	flex: 0 0 auto;
 	justify-content: flex-end;
 }
 
+.related-records__empty-mark {
+	flex: 0 0 auto;
+	font-size: 11px;
+	line-height: 16px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	padding: 1px 6px;
+	border-radius: 8px;
+	color: rgba(0, 0, 0, 0.5);
+	background: rgba(0, 0, 0, 0.06);
+}
+
+.related-records__add-button {
+	flex: 0 0 auto;
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__empty-mark {
+		color: rgba(255, 255, 255, 0.6);
+		background: rgba(255, 255, 255, 0.1);
+	}
+}
+
 .related-record {
 	--mat-list-list-item-two-line-container-height: 60px;
 }
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
index 2507bf608..ec2830a1a 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
@@ -79,14 +79,21 @@ <h3>
             <mat-accordion multi="true">
                 <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
                     <mat-expansion-panel-header>
-                        <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
+                        <mat-panel-title class="related-records__table-name">
+                            <span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>
+                            <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length"
+                                class="related-records__empty-mark">
+                                Empty
+                            </span>
+                        </mat-panel-title>
                         <mat-panel-description class="related-records__actions">
                             <mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
-                            <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length">Absent</span>
-                            <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rawRows.length"
-                                [routerLink]="['/dashboard', connectionID, referencedTable.table_name, 'settings']"
-                                matTooltip="Set up records view">
-                                <mat-icon>settings</mat-icon>
+                            <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
+                                class="related-records__add-button"
+                                routerLink="/dashboard/{{connectionID}}/{{referencedTable.table_name}}/entry"
+                                matTooltip="Add a new record to {{referencedTable.displayTableName}}"
+                                (click)="$event.stopPropagation()">
+                                <mat-icon>add</mat-icon>
                             </a>
                             <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]"
                                 routerLink="/dashboard/{{connectionID}}/{{referencedTable.table_name}}"

From c56b8275fb39c5fd1eddc451ea69c73de7537b0f Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Jun 2026 09:30:54 +0000
Subject: [PATCH 3/5] feat(related-records): disable panel expansion when table
 has no records

Mark empty related-records panels as disabled with no expand toggle, while
keeping the header actions (add / open in table view) clickable.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../db-table-row-view/db-table-row-view.component.css    | 9 +++++++++
 .../db-table-row-view/db-table-row-view.component.html   | 4 +++-
 .../db-table-row-edit/db-table-row-edit.component.css    | 9 +++++++++
 .../db-table-row-edit/db-table-row-edit.component.html   | 4 +++-
 4 files changed, 24 insertions(+), 2 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 64f5a2f75..dc6cf8524 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
@@ -193,6 +193,8 @@
 .related-records__actions {
 	flex: 0 0 auto;
 	justify-content: flex-end;
+	/* Stay clickable even when the panel is disabled (no related records). */
+	pointer-events: auto;
 }
 
 .related-records__empty-mark {
@@ -212,6 +214,13 @@
 	white-space: nowrap;
 }
 
+/* Keep header content legible when the panel is disabled (no related
+   records) — disabling only blocks expand/collapse, not the actions. */
+.related-records__panel ::ng-deep .mat-expansion-panel-header[aria-disabled='true'] {
+	color: inherit;
+	cursor: default;
+}
+
 @media (prefers-color-scheme: dark) {
 	.related-records__empty-mark {
 		color: rgba(255, 255, 255, 0.6);
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index a8833492a..32b14db42 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -31,7 +31,9 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
         <h3 class="related-records-section__title">Related records</h3>
 
         <mat-accordion multi="true">
-            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
+            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel"
+                [disabled]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length"
+                [hideToggle]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">
                 <mat-expansion-panel-header class="related-records__header">
                     <mat-panel-title class="related-records__table-name">
                         <span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
index f222a3ace..84d7c7af5 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
@@ -174,6 +174,15 @@
 .related-records__actions {
 	flex: 0 0 auto;
 	justify-content: flex-end;
+	/* Stay clickable even when the panel is disabled (no related records). */
+	pointer-events: auto;
+}
+
+/* Keep header content legible when the panel is disabled (no related
+   records) — disabling only blocks expand/collapse, not the actions. */
+.related-records__panel ::ng-deep .mat-expansion-panel-header[aria-disabled='true'] {
+	color: inherit;
+	cursor: default;
 }
 
 .related-records__empty-mark {
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
index ec2830a1a..ee21e4224 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
@@ -77,7 +77,9 @@ <h3>
             </h3>
 
             <mat-accordion multi="true">
-                <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
+                <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel"
+                    [disabled]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length"
+                    [hideToggle]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length">
                     <mat-expansion-panel-header>
                         <mat-panel-title class="related-records__table-name">
                             <span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>

From 7d0117b38d3cce410681e32741c0463e114c6aef Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Jun 2026 09:38:57 +0000
Subject: [PATCH 4/5] style(related-records): darken header action icons
 consistently

Give the related-records header action icons a full-strength color in both
enabled and disabled panel states, replacing Material's lighter default.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../db-table-row-view.component.css                  | 12 ++++++++++++
 .../db-table-row-edit.component.css                  | 12 ++++++++++++
 2 files changed, 24 insertions(+)

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 dc6cf8524..74d74cf6a 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
@@ -197,6 +197,18 @@
 	pointer-events: auto;
 }
 
+/* Keep the action icons fully dark in every panel state (enabled or
+   disabled), instead of Material's lighter default icon color. */
+.related-records__actions .mat-icon {
+	color: rgba(0, 0, 0, 0.87);
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__actions .mat-icon {
+		color: rgba(255, 255, 255, 0.87);
+	}
+}
+
 .related-records__empty-mark {
 	flex: 0 0 auto;
 	font-size: 11px;
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
index 84d7c7af5..b909bbf76 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
@@ -178,6 +178,18 @@
 	pointer-events: auto;
 }
 
+/* Keep the action icons fully dark in every panel state (enabled or
+   disabled), instead of Material's lighter default icon color. */
+.related-records__actions .mat-icon {
+	color: rgba(0, 0, 0, 0.87);
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__actions .mat-icon {
+		color: rgba(255, 255, 255, 0.87);
+	}
+}
+
 /* Keep header content legible when the panel is disabled (no related
    records) — disabling only blocks expand/collapse, not the actions. */
 .related-records__panel ::ng-deep .mat-expansion-panel-header[aria-disabled='true'] {

From a6f769c811bbe0412435b130890cf2f5247ee515 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Jun 2026 11:56:10 +0000
Subject: [PATCH 5/5] style(related-records): fix trailing-meta spacing in
 row-view list

Correct the `.mdc-list-item__end` selector so margins actually apply (the
trailing-meta class lives on the host, not a descendant) and wrap the
open-record link in a meta container for consistent alignment.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../db-table-row-view.component.css           |  4 ++++
 .../db-table-row-view.component.html          | 19 +++++++++++--------
 2 files changed, 15 insertions(+), 8 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 74d74cf6a..a8a412789 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
@@ -264,3 +264,7 @@
 .related-records__panel ::ng-deep .mat-expansion-panel-body {
 	padding: 0 8px;
 }
+.related-record ::ng-deep .mdc-list-item__end {
+	margin-right: -8px !important;
+	margin-left: 4px !important;
+}
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index 32b14db42..f765fdc64 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -84,14 +84,17 @@ <h3 class="related-records-section__title">Related records</h3>
                             </span>
                         </span>
 
-                        <a matListItemMeta mat-icon-button
-                            class="related-record__open"
-                            matTooltip="Open record"
-                            [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
-                            [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
-                            (click)="handleClose()">
-                            <mat-icon>chevron_right</mat-icon>
-                        </a>
+                        <div matListItemMeta>
+                            <a mat-icon-button
+                                class="related-record__open"
+                                matTooltip="Open record"
+                                [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
+                                [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
+                                (click)="handleClose()">
+                                <mat-icon>chevron_right</mat-icon>
+                            </a>
+                        </div>
+                        
                     </mat-list-item>
                 </mat-list>
             </mat-expansion-panel>