Move the share link bundle dialog into its own component

src-ui/src/app/components/manage/share-links/share-link-bundle-list/share-link-bundle-list.component.html

@@ -1,9 +1,4 @@
-<div class="modal-header">
-  <h4 class="modal-title">{{ title }}</h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
-</div>
-
-<div class="modal-body">
+<div class="border border-top-0 rounded-bottom p-3">
   @if (loading()) {
     <div class="d-flex align-items-center gap-2">
       <div class="spinner-border spinner-border-sm" role="status"></div>
@@ -150,7 +145,3 @@
     }
   }
 </div>
-
-<div class="modal-footer">
-  <button type="button" class="btn btn-outline-secondary btn-sm" (click)="close()" i18n>Close</button>
-</div>

src-ui/src/app/components/manage/share-links/share-link-bundle-list/share-link-bundle-list.component.spec.ts

@@ -1,6 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { FileVersion } from 'src/app/data/share-link'
@@ -11,7 +10,7 @@ import {
 import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
-import { ShareLinkBundleManageDialogComponent } from './share-link-bundle-manage-dialog.component'
+import { ShareLinkBundleListComponent } from './share-link-bundle-list.component'
 
 class MockShareLinkBundleService {
   listAllBundles = jest.fn()
@@ -24,13 +23,12 @@ class MockToastService {
   showError = jest.fn()
 }
 
-describe('ShareLinkBundleManageDialogComponent', () => {
-  let component: ShareLinkBundleManageDialogComponent
-  let fixture: ComponentFixture<ShareLinkBundleManageDialogComponent>
+describe('ShareLinkBundleListComponent', () => {
+  let component: ShareLinkBundleListComponent
+  let fixture: ComponentFixture<ShareLinkBundleListComponent>
   let service: MockShareLinkBundleService
   let toastService: MockToastService
   let clipboard: Clipboard
-  let activeModal: NgbActiveModal
   let originalApiBaseUrl: string
 
   beforeEach(() => {
@@ -44,20 +42,18 @@ describe('ShareLinkBundleManageDialogComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [
-        ShareLinkBundleManageDialogComponent,
+        ShareLinkBundleListComponent,
         NgxBootstrapIconsModule.pick(allIcons),
       ],
       providers: [
-        NgbActiveModal,
         { provide: ShareLinkBundleService, useValue: service },
         { provide: ToastService, useValue: toastService },
       ],
     })
 
-    fixture = TestBed.createComponent(ShareLinkBundleManageDialogComponent)
+    fixture = TestBed.createComponent(ShareLinkBundleListComponent)
     component = fixture.componentInstance
     clipboard = TestBed.inject(Clipboard)
-    activeModal = TestBed.inject(NgbActiveModal)
   })
 
   afterEach(() => {
@@ -213,7 +209,7 @@ describe('ShareLinkBundleManageDialogComponent', () => {
     expect(toastService.showError).toHaveBeenCalled()
   })
 
-  it('maps helpers and closes dialog', () => {
+  it('maps status and file version helpers', () => {
     service.listAllBundles.mockReturnValue(of([]))
     fixture.detectChanges()
 
@@ -227,9 +223,5 @@ describe('ShareLinkBundleManageDialogComponent', () => {
     environment.apiBaseUrl = 'https://example.com/api/'
     const url = component.getShareUrl(sampleBundle({ slug: 'sluggy' }))
     expect(url).toBe('https://example.com/share/sluggy')
-
-    const closeSpy = jest.spyOn(activeModal, 'close')
-    component.close()
-    expect(closeSpy).toHaveBeenCalled()
   })
 })

src-ui/src/app/components/manage/share-links/share-link-bundle-list/share-link-bundle-list.component.ts

@@ -1,7 +1,7 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { CommonModule } from '@angular/common'
 import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
-import { NgbActiveModal, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, catchError, of, switchMap, takeUntil, timer } from 'rxjs'
 import { FileVersion } from 'src/app/data/share-link'
@@ -15,13 +15,13 @@ import { FileSizePipe } from 'src/app/pipes/file-size.pipe'
 import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
-import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
-import { ConfirmButtonComponent } from '../confirm-button/confirm-button.component'
+import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
+import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 
 @Component({
-  selector: 'pngx-share-link-bundle-manage-dialog',
-  templateUrl: './share-link-bundle-manage-dialog.component.html',
-  styleUrls: ['./share-link-bundle-manage-dialog.component.scss'],
+  selector: 'pngx-share-link-bundle-list',
+  templateUrl: './share-link-bundle-list.component.html',
+  styleUrls: ['./share-link-bundle-list.component.scss'],
   imports: [
     ConfirmButtonComponent,
     CommonModule,
@@ -30,16 +30,14 @@ import { ConfirmButtonComponent } from '../confirm-button/confirm-button.compone
     FileSizePipe,
   ],
 })
-export class ShareLinkBundleManageDialogComponent
+export class ShareLinkBundleListComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  private readonly activeModal = inject(NgbActiveModal)
   private readonly shareLinkBundleService = inject(ShareLinkBundleService)
   private readonly toastService = inject(ToastService)
   private readonly clipboard = inject(Clipboard)
 
-  title = $localize`Share link bundles`
   readonly bundles = signal<ShareLinkBundleSummary[]>([])
   readonly error = signal<string | null>(null)
   readonly copiedSlug = signal<string | null>(null)
@@ -153,10 +151,6 @@ export class ShareLinkBundleManageDialogComponent
     return SHARE_LINK_BUNDLE_FILE_VERSION_LABELS[version] ?? version
   }
 
-  close(): void {
-    this.activeModal.close()
-  }
-
   private replaceBundle(updated: ShareLinkBundleSummary): void {
     const bundles = this.bundles()
     const index = bundles.findIndex((bundle) => bundle.id === updated.id)