agatha
7d49c12ce2
Detail page now has a "Copy URL" button that copies the image's direct file URL to the clipboard. A toast service (BehaviorSubject-backed, auto-dismissing after 3s) confirms success or failure. ToastComponent is registered at the app root and available to all future features. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { ToastService } from '../services/toast.service';
|
|
|
|
@Component({
|
|
selector: 'app-toast',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<div
|
|
*ngIf="toastService.current$ | async as toast"
|
|
class="toast"
|
|
[class.success]="toast.type === 'success'"
|
|
[class.error]="toast.type === 'error'"
|
|
>{{ toast.message }}</div>
|
|
`,
|
|
styles: [`
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 10px 20px;
|
|
border-radius: var(--radius);
|
|
font-size: 0.9rem;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
white-space: nowrap;
|
|
}
|
|
.success {
|
|
background: var(--surface-raised);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.error {
|
|
background: var(--danger);
|
|
color: var(--danger-text);
|
|
}
|
|
`],
|
|
})
|
|
export class ToastComponent {
|
|
constructor(public toastService: ToastService) {}
|
|
}
|