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>

Author: lyubov-voloshko

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;
 

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]"