feat: add membership popup on Access column hover in company members table

Shows a CDK overlay popup on hover of the check_circle icon listing each
connection (title + database name) and its groups for the member.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: lyubov-voloshko

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

@@ -112,6 +112,53 @@
 	color: var(--color-successPalette-500);
 }
 
+.access-popup {
+	background: var(--mat-menu-container-color, #fff);
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+	padding: 8px 12px;
+	min-width: 160px;
+	white-space: nowrap;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.access-popup__connection {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.access-popup__connection-title {
+	font-weight: 500;
+	font-size: 13px;
+}
+
+.access-popup__connection-db {
+	font-size: 11px;
+	color: rgba(0, 0, 0, 0.45);
+	padding-left: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.access-popup__connection-db {
+		color: rgba(255, 255, 255, 0.45);
+	}
+}
+
+.access-popup__group {
+	font-size: 12px;
+	color: rgba(0, 0, 0, 0.6);
+	padding-left: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.access-popup__group {
+		color: rgba(255, 255, 255, 0.6);
+	}
+}
+
 .company-member-cell_not-accessed {
 	color: var(--color-warnPalette-500);
 }

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

@@ -199,14 +199,42 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
             </td>
         </ng-container>
 
-        <!-- Active Column -->
+        <!-- Access Column -->
         <ng-container matColumnDef="access">
             <th mat-header-cell *matHeaderCellDef matTooltip="Access to connection">Access</th>
             <td mat-cell *matCellDef="let element; let i = index"
                 data-label="Access"
                 class="company-member-cell company-member-cell_content-center">
-                <mat-icon *ngIf="element.has_groups" class="company-member-cell_accessed" fontSet="material-symbols-outlined">check_circle</mat-icon>
-                <mat-icon *ngIf="!element.has_groups" class="company-member-cell_not-accessed" fontSet="material-symbols-outlined">cancel</mat-icon>
+                @if (element.has_groups) {
+                    <mat-icon class="company-member-cell_accessed" fontSet="material-symbols-outlined"
+                        #overlayOrigin="cdkOverlayOrigin"
+                        cdkOverlayOrigin
+                        (mouseenter)="element._popupOpen = true"
+                        (mouseleave)="element._popupOpen = false">check_circle</mat-icon>
+                    <ng-template
+                        cdkConnectedOverlay
+                        [cdkConnectedOverlayOrigin]="overlayOrigin"
+                        [cdkConnectedOverlayOpen]="element._popupOpen"
+                        [cdkConnectedOverlayPositions]="[
+                            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+                            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 }
+                        ]"
+                        [cdkConnectedOverlayHasBackdrop]="false">
+                        <div class="access-popup" (mouseleave)="element._popupOpen = false">
+                            @for (conn of element.user_membership; track conn.id) {
+                                <div class="access-popup__connection">
+                                    <span class="access-popup__connection-title">{{ conn.title }}</span>
+                                    <span class="access-popup__connection-db">{{ conn.database }}</span>
+                                    @for (group of conn.groups; track group.id) {
+                                        <span class="access-popup__group">{{ group.title }}</span>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    </ng-template>
+                } @else {
+                    <mat-icon class="company-member-cell_not-accessed" fontSet="material-symbols-outlined">cancel</mat-icon>
+                }
             </td>
         </ng-container>
 

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

@@ -1,4 +1,5 @@
 import { NgIf } from '@angular/common';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -37,6 +38,8 @@ import { RevokeInvitationDialogComponent } from './revoke-invitation-dialog/revo
 	styleUrls: ['./company.component.css'],
 	imports: [
 		NgIf,
+		CdkOverlayOrigin,
+		CdkConnectedOverlay,
 		FormsModule,
 		MatFormFieldModule,
 		MatInputModule,

frontend/src/app/models/company.ts

@@ -34,6 +34,18 @@ export interface Company {
 	show_test_connections: boolean;
 }
 
+export interface CompanyMembershipGroup {
+	id: string;
+	title: string;
+}
+
+export interface CompanyMembershipConnection {
+	id: string;
+	title: string;
+	database: string;
+	groups: CompanyMembershipGroup[];
+}
+
 export interface CompanyMember {
 	id: string;
 	isActive: boolean;
@@ -42,6 +54,7 @@ export interface CompanyMember {
 	is_2fa_enabled: boolean;
 	role: CompanyMemberRole;
 	has_groups: boolean;
+	user_membership: CompanyMembershipConnection[];
 }
 
 export enum CompanyMemberRole {

frontend/src/styles.scss

@@ -1,6 +1,7 @@
 // @import 'codemirror/lib/codemirror';
 // @import 'codemirror/theme/ttcn';
 
+
 * {
     margin: 0;
     padding: 0;