feat: open in new tab for paginated dashboard lists

apps/web/src/app/features/account/connected-accounts/views/connected-accounts-list/connected-accounts-list.component.html

@@ -34,7 +34,7 @@ <h1>Connected Accounts</h1>
   [columns]="connectedAccountColumns"
   [limit]="20"
   [queryParams]="accountsQueryParams()"
-  (rowClick)="OnConnectedAccountClick($event)"
+  rowLinkPrefix="/account/connected-accounts"
 ></app-paginated-list>
 
 <app-create-connected-account-host

apps/web/src/app/features/account/connected-accounts/views/connected-accounts-list/connected-accounts-list.component.ts

@@ -129,11 +129,6 @@ export class ConnectedAccountsListComponent implements OnInit, OnDestroy {
     this.statusTab.set(tab);
   }
 
-  OnConnectedAccountClick(item: unknown): void {
-    const account = item as Account;
-    void this.router.navigate(['/account/connected-accounts', account.id]);
-  }
-
   OnViewCreatedAccount(accountId: string): void {
     void this.router.navigate(['/account/connected-accounts', accountId]);
   }

apps/web/src/app/features/account/customers/views/customer-detail/customer-detail.component.html

@@ -50,7 +50,7 @@ <h2 class="section-title">Subscriptions</h2>
         [expand]="subscriptionExpand()"
         [paginationEnabled]="false"
         [showResultCount]="true"
-        (rowClick)="OnSubscriptionClick($event)"
+        rowLinkPrefix="/account/subscriptions"
       ></app-paginated-list>
     </div>
     <div class="view-section">
@@ -61,7 +61,7 @@ <h2 class="section-title">Payments</h2>
         [limit]="5"
         [queryParams]="paymentQueryParams()"
         [paginationEnabled]="false"
-        (rowClick)="OnPaymentClick($event)"
+        rowLinkPrefix="/account/payments"
       ></app-paginated-list>
     </div>
     <div class="view-section">
@@ -91,7 +91,7 @@ <h2 class="section-title">Invoices</h2>
         [queryParams]="invoiceQueryParams()"
         [expand]="invoiceExpand()"
         [paginationEnabled]="false"
-        (rowClick)="OnInvoiceClick($event)"
+        rowLinkPrefix="/account/invoices"
       ></app-paginated-list>
     </div>
     <div class="view-section">

apps/web/src/app/features/account/customers/views/customer-detail/customer-detail.component.ts

@@ -277,18 +277,6 @@ export class CustomerDetailComponent implements OnInit, OnDestroy {
     this.invoiceQueryParams.set({ customer: customerId });
   }
 
-  OnSubscriptionClick(subscription: SubscriptionType): void {
-    void this.router.navigate(['/account/subscriptions', subscription.id]);
-  }
-
-  OnPaymentClick(paymentIntent: PaymentIntent): void {
-    void this.router.navigate(['/account/payments', paymentIntent.id]);
-  }
-
-  OnInvoiceClick(invoice: Invoice): void {
-    void this.router.navigate(['/account/invoices', invoice.id]);
-  }
-
   OnEdit(): void {
     const p = this.customer();
     if (p) this.actions.OpenEdit(p);

apps/web/src/app/features/account/customers/views/customer-list/customer-list.component.html

@@ -15,7 +15,7 @@ <h1>Customers</h1>
   [columns]="customerColumns"
   [limit]="10"
   [queryParams]="customersQueryParams()"
-  (rowClick)="OnCustomerListClick($event)"
+  rowLinkPrefix="/account/customers"
 ></app-paginated-list>
 
 <app-customer-actions-host></app-customer-actions-host>

apps/web/src/app/features/account/customers/views/customer-list/customer-list.component.ts

@@ -12,7 +12,6 @@ import {
   PaginatedListComponent,
   PaginatedListColumn,
 } from '../../../../../shared';
-import { Router, ActivatedRoute } from '@angular/router';
 import type { Customer } from '@zoneless/shared-types';
 
 import { Subscription } from 'rxjs';
@@ -28,8 +27,6 @@ import { MetaService } from '../../../../../core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomerListComponent implements OnInit, OnDestroy {
-  readonly router = inject(Router);
-  readonly route = inject(ActivatedRoute);
   private sub?: Subscription;
   private readonly metaService = inject(MetaService);
   readonly actions = inject(CustomerActionsService);
@@ -101,8 +98,4 @@ export class CustomerListComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.sub?.unsubscribe();
   }
-
-  OnCustomerListClick(customer: Customer): void {
-    this.router.navigate(['/account/customers', customer.id]);
-  }
 }

apps/web/src/app/features/account/invoices/views/invoice-list/invoice-list.component.html

@@ -65,5 +65,5 @@ <h1>Invoices</h1>
   [limit]="10"
   [queryParams]="invoicesQueryParams()"
   [expand]="invoicesExpand()"
-  (rowClick)="OnInvoiceClick($event)"
+  rowLinkPrefix="/account/invoices"
 ></app-paginated-list>

apps/web/src/app/features/account/invoices/views/invoice-list/invoice-list.component.ts

@@ -6,7 +6,6 @@ import {
   inject,
   OnInit,
 } from '@angular/core';
-import { Router } from '@angular/router';
 import {
   PaginatedListComponent,
   PaginatedListColumn,
@@ -31,7 +30,6 @@ type InvoicesStatusTab = 'all' | 'draft' | 'open' | 'paid';
 })
 export class InvoiceListComponent implements OnInit {
   private readonly metaService = inject(MetaService);
-  private readonly router = inject(Router);
 
   invoicesStatusTab: WritableSignal<InvoicesStatusTab> = signal('all');
 
@@ -131,10 +129,6 @@ export class InvoiceListComponent implements OnInit {
     this.invoicesQueryParams.set(params);
   }
 
-  OnInvoiceClick(invoice: Invoice): void {
-    void this.router.navigate(['/account/invoices', invoice.id]);
-  }
-
   private CopyInvoiceId(invoice: Invoice): void {
     void navigator.clipboard.writeText(invoice.id);
   }

apps/web/src/app/features/account/payment-intents/views/payment-intent-list/payment-intent-list.component.html

@@ -112,7 +112,7 @@ <h1>Transactions</h1>
   [limit]="20"
   [queryParams]="paymentIntentsQueryParams()"
   [expand]="paymentIntentsExpand()"
-  (rowClick)="OnPaymentIntentClick($event)"
+  rowLinkPrefix="/account/payments"
 ></app-paginated-list>
 } @if (transactionsTab() === 'payouts') {
 <app-transaction-list

apps/web/src/app/features/account/payment-intents/views/payment-intent-list/payment-intent-list.component.ts

@@ -10,7 +10,7 @@ import {
   PaginatedListComponent,
   PaginatedListColumn,
 } from '../../../../../shared';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import type { Customer, PaymentIntent } from '@zoneless/shared-types';
 import { GetPaymentIntentListStatus } from '@zoneless/shared-types';
 import { MetaService } from '../../../../../core';
@@ -37,7 +37,6 @@ type PaymentsStatusTab =
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PaymentIntentListComponent implements OnInit {
-  readonly router = inject(Router);
   readonly route = inject(ActivatedRoute);
   private readonly metaService = inject(MetaService);
 
@@ -172,10 +171,6 @@ export class PaymentIntentListComponent implements OnInit {
     this.SyncPaymentIntentsQueryParams();
   }
 
-  OnPaymentIntentClick(paymentIntent: PaymentIntent): void {
-    this.router.navigate(['/account/payments', paymentIntent.id]);
-  }
-
   private SyncPaymentIntentsQueryParams(): void {
     const params: Record<string, string> = {};
     if (this.customerFilter) {

apps/web/src/app/features/account/payment-links/views/payment-link-list/payment-link-list.component.html

@@ -15,7 +15,7 @@ <h1>Payment Links</h1>
   [columns]="paymentLinkColumns"
   [limit]="10"
   [queryParams]="paymentLinksQueryParams()"
-  (rowClick)="OnRowClick($event)"
+  rowLinkPrefix="/account/payment-links"
 ></app-paginated-list>
 
 <app-payment-link-actions-host></app-payment-link-actions-host>

apps/web/src/app/features/account/payment-links/views/payment-link-list/payment-link-list.component.ts

@@ -105,10 +105,6 @@ export class PaymentLinkListComponent implements OnInit, OnDestroy {
     this.sub?.unsubscribe();
   }
 
-  OnRowClick(paymentLink: PaymentLink): void {
-    void this.router.navigate(['/account/payment-links', paymentLink.id]);
-  }
-
   private CopyPaymentLinkUrl(paymentLink: PaymentLink): void {
     void navigator.clipboard.writeText(paymentLink.url);
   }

apps/web/src/app/features/account/products/views/product-catalogue/product-catalogue.component.html

@@ -65,7 +65,7 @@ <h1>Product Catalogue</h1>
   [limit]="10"
   [queryParams]="productsQueryParams()"
   [expand]="productsExpand()"
-  (rowClick)="OnProductListClick($event)"
+  rowLinkPrefix="/account/products"
 ></app-paginated-list>
 }
 

apps/web/src/app/features/account/products/views/product-catalogue/product-catalogue.component.ts

@@ -12,7 +12,6 @@ import {
   PaginatedListComponent,
   PaginatedListColumn,
 } from '../../../../../shared';
-import { Router, ActivatedRoute } from '@angular/router';
 import type { Product, Price } from '@zoneless/shared-types';
 
 import { ProductService } from '../../../../../data';
@@ -31,8 +30,6 @@ import { FormatPriceDisplay } from '../../util/price-display';
 })
 export class ProductCatalogueComponent implements OnInit, OnDestroy {
   readonly productService = inject(ProductService);
-  readonly router = inject(Router);
-  readonly route = inject(ActivatedRoute);
   readonly actions = inject(ProductActionsService);
   private sub?: Subscription;
   private readonly metaService = inject(MetaService);
@@ -126,10 +123,6 @@ export class ProductCatalogueComponent implements OnInit, OnDestroy {
     this.sub?.unsubscribe();
   }
 
-  OnProductListClick(product: Product): void {
-    this.router.navigate(['/account/products', product.id]);
-  }
-
   SetProductsTab(tab: 'all'): void {
     this.productsTab.set(tab);
   }

apps/web/src/app/features/account/products/views/product-detail/product-detail.component.html

@@ -83,7 +83,7 @@ <h2 class="section-title">Pricing</h2>
         [limit]="10"
         [queryParams]="priceQueryParams()"
         [paginationEnabled]="false"
-        (rowClick)="OnPriceListClick($event)"
+        rowLinkPrefix="/account/prices"
       ></app-paginated-list>
     </div>
     <div class="view-section">

apps/web/src/app/features/account/products/views/product-detail/product-detail.component.ts

@@ -260,8 +260,4 @@ export class ProductDetailComponent implements OnInit, OnDestroy {
     const p = this.product();
     if (p) this.priceActions.OpenCreate(p.id);
   }
-
-  OnPriceListClick(price: Price): void {
-    this.router.navigate(['/account/prices', price.id]);
-  }
 }

apps/web/src/app/features/account/subscriptions/views/subscription-detail/subscription-detail.component.html

@@ -247,7 +247,7 @@ <h2 class="section-title">Invoices</h2>
         [queryParams]="invoiceQueryParams()"
         [expand]="invoiceExpand()"
         [paginationEnabled]="false"
-        (rowClick)="OnInvoiceClick($event)"
+        rowLinkPrefix="/account/invoices"
       ></app-paginated-list>
     </div>
 

apps/web/src/app/features/account/subscriptions/views/subscription-detail/subscription-detail.component.ts

@@ -9,7 +9,7 @@ import {
   WritableSignal,
 } from '@angular/core';
 import { DatePipe, DecimalPipe } from '@angular/common';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import type { Invoice, Subscription } from '@zoneless/shared-types';
 import { Subscription as RxSubscription } from 'rxjs';
 import { SubscriptionService } from '../../../../../data';
@@ -76,7 +76,6 @@ import {
 })
 export class SubscriptionDetailComponent implements OnInit, OnDestroy {
   private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
   private readonly subscriptionService = inject(SubscriptionService);
   private readonly metaService = inject(MetaService);
   readonly actions = inject(SubscriptionActionsService);
@@ -289,10 +288,6 @@ export class SubscriptionDetailComponent implements OnInit, OnDestroy {
     this.invoiceQueryParams.set({ subscription: subscriptionId });
   }
 
-  OnInvoiceClick(invoice: Invoice): void {
-    this.router.navigate(['/account/invoices', invoice.id]);
-  }
-
   OnEditMetadata(): void {
     const subscription = this.subscription();
     if (subscription) this.actions.OpenEditMetadata(subscription);

apps/web/src/app/features/account/subscriptions/views/subscription-list/subscription-list.component.html

@@ -68,7 +68,7 @@ <h1>Subscriptions</h1>
   [limit]="10"
   [queryParams]="subscriptionsQueryParams()"
   [expand]="subscriptionsExpand()"
-  (rowClick)="OnSubscriptionClick($event)"
+  rowLinkPrefix="/account/subscriptions"
 ></app-paginated-list>
 
 <app-subscription-actions-host></app-subscription-actions-host>

apps/web/src/app/features/account/subscriptions/views/subscription-list/subscription-list.component.ts

@@ -8,7 +8,6 @@ import {
   OnDestroy,
   ViewChild,
 } from '@angular/core';
-import { Router } from '@angular/router';
 import {
   PaginatedListComponent,
   PaginatedListColumn,
@@ -37,7 +36,6 @@ type SubscriptionsStatusTab = 'active' | 'paused' | 'canceled' | 'all';
 })
 export class SubscriptionListComponent implements OnInit, OnDestroy {
   private readonly metaService = inject(MetaService);
-  private readonly router = inject(Router);
   private readonly actions = inject(SubscriptionActionsService);
   @ViewChild('subscriptionsList')
   subscriptionsList?: PaginatedListComponent<any>;
@@ -126,10 +124,6 @@ export class SubscriptionListComponent implements OnInit, OnDestroy {
     this.SyncSubscriptionsQueryParams();
   }
 
-  OnSubscriptionClick(subscription: Subscription): void {
-    this.router.navigate(['/account/subscriptions', subscription.id]);
-  }
-
   private SyncSubscriptionsQueryParams(): void {
     const params: Record<string, string> = {};
     switch (this.subscriptionsStatusTab()) {

apps/web/src/app/shared/ui/paginated-list/paginated-list.component.html

@@ -10,10 +10,26 @@
   }
   <tbody>
     @if (!loading() && items().length > 0) { @for (item of items(); track
-    item.id) {
-    <tr class="row more-icon-highlight" (click)="OnRowClick(item)">
-      @for (column of columns; track column.field) {
-      <td>
+    item.id) { @let rowLink = GetRowLink(item);
+    <tr
+      class="row more-icon-highlight"
+      [class.row-interactive]="IsRowInteractive()"
+      (click)="OnRowClick(item)"
+    >
+      @for (column of columns; track column.field; let isFirst = $first) {
+      <td
+        [class.row-cell]="rowLink != null && column.type !== 'actions'"
+        [class.actions-cell]="column.type === 'actions'"
+      >
+        @if (rowLink && column.type !== 'actions') {
+        <a
+          class="row-link"
+          [routerLink]="rowLink"
+          [attr.tabindex]="isFirst ? null : -1"
+          [attr.aria-hidden]="isFirst ? null : true"
+          [attr.aria-label]="isFirst ? 'Open ' + item.id : null"
+        ></a>
+        }
         <div
           class="data-cell"
           [class.bold-cell]="column.bolded"

apps/web/src/app/shared/ui/paginated-list/paginated-list.component.scss

@@ -35,11 +35,34 @@ th {
 .row {
   border-bottom: 1px solid $darker-background-color;
   transition: $transition-fast;
+}
+
+.row-interactive {
   cursor: pointer;
 }
 
-.row:hover {
+.row-interactive:hover {
   background-color: $dark-background-color;
+  position: relative;
+  z-index: 3;
+}
+
+.row-cell {
+  position: relative;
+}
+
+.row-link {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.actions-cell {
+  position: relative;
+  z-index: 2;
 }
 
 .row td {