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>

Author: lyubov-voloshko

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;
 }

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