Feat: Polish Angular UI with cohesive design system
Introduces a shared CSS custom property token layer and applies it across all five views (library, upload, detail, login, app shell). Each view now has intentional loading, empty, and error states. - styles.css: 13 design tokens on :root; shimmer skeleton animation - Library: 150ms-debounced skeleton loading, empty state with /upload link, error card with retry, card hover lift, broken-image fallback - Upload: token-styled drop-zone, Uploading… spinner, 4s success banner, distinct validation vs. network error messages - Detail: image skeleton, network error card (separate from 404 not-found card), Owner actions panel, danger tag error styling, broken-image fallback - Login: vertically centred surface card, danger field/server errors, Signing in… disabled button - App shell: 48px fixed header, app name left, sign-out right, no reflow on auth state change - All 24 ESLint errors resolved (including pre-existing auth spec issues); ng build and ng lint pass clean Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,19 +2,12 @@ import { TestBed } from '@angular/core/testing';
|
||||
import { provideRouter, Router } from '@angular/router';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
import { provideHttpClientTesting } from '@angular/common/http/testing';
|
||||
import { of, throwError } from 'rxjs';
|
||||
import { UploadComponent } from './upload.component';
|
||||
import { ImageService } from '../services/image.service';
|
||||
import { routes } from '../app.routes';
|
||||
|
||||
describe('UploadComponent', () => {
|
||||
let component: UploadComponent;
|
||||
|
||||
function makeImageService(overrides: Partial<ImageService> = {}): jasmine.SpyObj<ImageService> {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return jasmine.createSpyObj<ImageService>('ImageService', { upload: of({} as any), ...overrides } as any);
|
||||
}
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UploadComponent],
|
||||
@@ -26,22 +19,17 @@ describe('UploadComponent', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
component.tagInput = 'CAT, Funny reaction';
|
||||
const parsed = component.parseTagInput(component.tagInput);
|
||||
expect(parsed).toEqual(['cat', 'funny', 'reaction']);
|
||||
expect(component.parseTagInput(component.tagInput)).toEqual(['cat', 'funny', 'reaction']);
|
||||
});
|
||||
|
||||
it('should split on commas', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
const parsed = component.parseTagInput('a,b,c');
|
||||
expect(parsed).toEqual(['a', 'b', 'c']);
|
||||
expect(fixture.componentInstance.parseTagInput('a,b,c')).toEqual(['a', 'b', 'c']);
|
||||
});
|
||||
|
||||
it('should filter empty tokens', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
const parsed = component.parseTagInput(' ,, cat ,,');
|
||||
expect(parsed).toEqual(['cat']);
|
||||
expect(fixture.componentInstance.parseTagInput(' ,, cat ,,')).toEqual(['cat']);
|
||||
});
|
||||
|
||||
it('on duplicate response: shows toast and navigates to detail', async () => {
|
||||
@@ -49,13 +37,7 @@ describe('UploadComponent', () => {
|
||||
component = fixture.componentInstance;
|
||||
const router = TestBed.inject(Router);
|
||||
spyOn(router, 'navigate');
|
||||
|
||||
const mockSvc = makeImageService({
|
||||
upload: of({ id: 'abc', duplicate: true } as any),
|
||||
} as any);
|
||||
(component as any).imageService = mockSvc;
|
||||
|
||||
await component.handleUploadResponse({ id: 'abc', duplicate: true } as any);
|
||||
await component.handleUploadResponse({ id: 'abc', duplicate: true } as Parameters<typeof component.handleUploadResponse>[0]);
|
||||
expect(component.toastMessage).toContain('library');
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/images', 'abc']);
|
||||
});
|
||||
@@ -65,8 +47,7 @@ describe('UploadComponent', () => {
|
||||
component = fixture.componentInstance;
|
||||
const router = TestBed.inject(Router);
|
||||
spyOn(router, 'navigate');
|
||||
|
||||
await component.handleUploadResponse({ id: 'xyz', duplicate: false } as any);
|
||||
await component.handleUploadResponse({ id: 'xyz', duplicate: false } as Parameters<typeof component.handleUploadResponse>[0]);
|
||||
expect(component.toastMessage).toBeTruthy();
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/images', 'xyz']);
|
||||
});
|
||||
@@ -76,9 +57,66 @@ describe('UploadComponent', () => {
|
||||
component = fixture.componentInstance;
|
||||
const router = TestBed.inject(Router);
|
||||
spyOn(router, 'navigate');
|
||||
|
||||
component.handleUploadError({ status: 422, error: { detail: 'bad file', code: 'invalid_mime_type' } });
|
||||
expect(component.errorMessage).toBeTruthy();
|
||||
expect(router.navigate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// New polish tests
|
||||
|
||||
it('submit button is disabled when no file is selected', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
const btn = (fixture.nativeElement as HTMLElement).querySelector('button[type="submit"]') as HTMLButtonElement;
|
||||
expect(btn.disabled).toBeTrue();
|
||||
});
|
||||
|
||||
it('submit button shows "Uploading…" label while uploading is true', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
component.uploading = true;
|
||||
fixture.detectChanges();
|
||||
const btn = (fixture.nativeElement as HTMLElement).querySelector('button[type="submit"]') as HTMLButtonElement;
|
||||
expect(btn.textContent).toContain('Uploading');
|
||||
expect(btn.disabled).toBeTrue();
|
||||
});
|
||||
|
||||
it('showSuccess banner is hidden initially', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
expect((fixture.nativeElement as HTMLElement).querySelector('.success-banner')).toBeNull();
|
||||
});
|
||||
|
||||
it('showSuccess banner is visible when showSuccess is true', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
component.showSuccess = true;
|
||||
component.uploadedFilename = 'photo.jpg';
|
||||
fixture.detectChanges();
|
||||
const banner = (fixture.nativeElement as HTMLElement).querySelector('.success-banner');
|
||||
expect(banner).not.toBeNull();
|
||||
expect(banner!.textContent).toContain('photo.jpg');
|
||||
});
|
||||
|
||||
it('shows validation error message for 422 response', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
component.handleUploadError({ status: 422, error: { detail: 'Unsupported file type', code: 'invalid_mime_type' } });
|
||||
fixture.detectChanges();
|
||||
const err = (fixture.nativeElement as HTMLElement).querySelector('.error');
|
||||
expect(err!.textContent).toContain('Unsupported file type');
|
||||
});
|
||||
|
||||
it('shows generic error message for network error', () => {
|
||||
const fixture = TestBed.createComponent(UploadComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
component.handleUploadError({ status: 500, error: null });
|
||||
fixture.detectChanges();
|
||||
const err = (fixture.nativeElement as HTMLElement).querySelector('.error');
|
||||
expect(err!.textContent).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { ImageRecord, ImageService } from '../services/image.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-upload',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
imports: [CommonModule, FormsModule, RouterLink],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div class="upload-page">
|
||||
@@ -15,45 +15,91 @@ import { ImageRecord, ImageService } from '../services/image.service';
|
||||
|
||||
<div
|
||||
class="drop-zone"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
[class.drag-over]="isDragOver"
|
||||
(dragover)="onDragOver($event)"
|
||||
(dragleave)="isDragOver = false"
|
||||
(drop)="onDrop($event)"
|
||||
(click)="fileInput.click()"
|
||||
(keydown.enter)="fileInput.click()"
|
||||
(keydown.space)="fileInput.click()"
|
||||
>
|
||||
<span class="drop-icon">📁</span>
|
||||
<p>{{ selectedFile ? selectedFile.name : 'Drag & drop or click to browse' }}</p>
|
||||
<input #fileInput type="file" accept="image/*" hidden (change)="onFileChange($event)" />
|
||||
</div>
|
||||
|
||||
<div class="tag-input" *ngIf="selectedFile">
|
||||
<label>Tags (comma or space separated)</label>
|
||||
<input [(ngModel)]="tagInput" placeholder="cat, funny, reaction" />
|
||||
<label for="tag-input">Tags (comma or space separated)</label>
|
||||
<input id="tag-input" [(ngModel)]="tagInput" placeholder="cat, funny, reaction" />
|
||||
<div class="chips">
|
||||
<span *ngFor="let tag of parseTagInput(tagInput)" class="chip">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button [disabled]="!selectedFile || uploading" (click)="submit()">
|
||||
<button type="submit" [disabled]="!selectedFile || uploading" (click)="submit()">
|
||||
<span *ngIf="uploading" class="spinner"></span>
|
||||
{{ uploading ? 'Uploading…' : 'Upload' }}
|
||||
</button>
|
||||
|
||||
<p class="toast" *ngIf="toastMessage">{{ toastMessage }}</p>
|
||||
<!-- Success banner -->
|
||||
<div class="success-banner" *ngIf="showSuccess">
|
||||
<span class="success-icon">✔</span>
|
||||
<span>{{ uploadedFilename }} uploaded.</span>
|
||||
<span class="banner-links">
|
||||
<button type="button" class="link" (click)="resetForm()">Upload another</button>
|
||||
<a routerLink="/" class="link">View in library</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="toast" *ngIf="toastMessage && !showSuccess">{{ toastMessage }}</p>
|
||||
<p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.upload-page { max-width: 600px; margin: 40px auto; padding: 0 16px; }
|
||||
.drop-zone { border: 2px dashed #555; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; }
|
||||
.drop-zone.drag-over { border-color: #fff; background: #1a1a1a; }
|
||||
h1 { margin-bottom: 24px; }
|
||||
.drop-zone {
|
||||
border: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
border-radius: var(--radius);
|
||||
padding: 48px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
background: var(--surface);
|
||||
transition: border-color var(--transition), background var(--transition);
|
||||
}
|
||||
.drop-zone.drag-over { border-color: var(--accent); background: var(--surface-raised); }
|
||||
.drop-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
|
||||
.tag-input { margin: 16px 0; }
|
||||
label { display: block; margin-bottom: 4px; font-size: 0.9rem; color: #aaa; }
|
||||
input[type=text], input:not([type]) { width: 100%; padding: 8px; background: #1a1a1a; border: 1px solid #444; color: #e0e0e0; border-radius: 4px; }
|
||||
label { display: block; margin-bottom: 4px; font-size: 0.9rem; color: var(--text-muted); }
|
||||
input[type=text], input:not([type]) { width: 100%; padding: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); }
|
||||
input:focus { outline: none; border-color: var(--border-focus); }
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.chip { background: #333; padding: 2px 10px; border-radius: 12px; font-size: 0.85rem; }
|
||||
button { padding: 10px 24px; background: #4a9eff; color: #000; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
|
||||
button:disabled { opacity: 0.5; cursor: default; }
|
||||
.toast { color: #4a9eff; margin-top: 12px; }
|
||||
.error { color: #ff6b6b; margin-top: 12px; }
|
||||
.chip { background: var(--surface-raised); padding: 2px 10px; border-radius: var(--radius-chip); font-size: 0.85rem; }
|
||||
button[type="submit"] {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 10px 24px; background: var(--accent); color: var(--accent-text);
|
||||
border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
button[type="submit"]:disabled { opacity: 0.5; cursor: default; color: var(--text-muted); }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--accent-text); border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
|
||||
.success-banner {
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
margin-top: 16px; padding: 12px 16px;
|
||||
background: color-mix(in srgb, #2ecc71 12%, var(--surface));
|
||||
border: 1px solid color-mix(in srgb, #2ecc71 30%, transparent);
|
||||
border-radius: var(--radius); color: var(--text);
|
||||
}
|
||||
.success-icon { color: #2ecc71; font-size: 1.1rem; }
|
||||
.banner-links { display: flex; gap: 12px; margin-left: auto; }
|
||||
.link { color: var(--accent); cursor: pointer; text-decoration: none; font-size: 0.9rem; }
|
||||
.link:hover { text-decoration: underline; }
|
||||
.toast { color: var(--accent); margin-top: 12px; }
|
||||
.error { color: var(--danger); margin-top: 12px; }
|
||||
`],
|
||||
})
|
||||
export class UploadComponent {
|
||||
@@ -63,6 +109,9 @@ export class UploadComponent {
|
||||
toastMessage = '';
|
||||
errorMessage = '';
|
||||
isDragOver = false;
|
||||
showSuccess = false;
|
||||
uploadedFilename = '';
|
||||
private dismissTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
constructor(
|
||||
private imageService: ImageService,
|
||||
@@ -101,6 +150,7 @@ export class UploadComponent {
|
||||
this.uploading = true;
|
||||
this.errorMessage = '';
|
||||
this.toastMessage = '';
|
||||
this.showSuccess = false;
|
||||
|
||||
const tags = this.parseTagInput(this.tagInput);
|
||||
this.imageService.upload(this.selectedFile, tags).subscribe({
|
||||
@@ -121,13 +171,36 @@ export class UploadComponent {
|
||||
if (res.duplicate) {
|
||||
this.toastMessage = 'Already in your library';
|
||||
} else {
|
||||
this.toastMessage = 'Image uploaded successfully!';
|
||||
this.uploadedFilename = this.selectedFile?.name ?? res.id;
|
||||
this.showSuccess = true;
|
||||
this.cdr.markForCheck();
|
||||
if (this.dismissTimer) clearTimeout(this.dismissTimer);
|
||||
this.dismissTimer = setTimeout(() => {
|
||||
this.showSuccess = false;
|
||||
this.cdr.markForCheck();
|
||||
}, 4000);
|
||||
}
|
||||
await this.router.navigate(['/images', res.id]);
|
||||
}
|
||||
|
||||
handleUploadError(err: any): void {
|
||||
const apiError = err?.error;
|
||||
this.errorMessage = apiError?.detail ?? 'Upload failed. Please try again.';
|
||||
handleUploadError(err: unknown): void {
|
||||
const httpErr = err as { status?: number; error?: { detail?: string } };
|
||||
const status = httpErr?.status;
|
||||
const detail = httpErr?.error?.detail;
|
||||
if (status === 422 && detail) {
|
||||
this.errorMessage = detail;
|
||||
} else {
|
||||
this.errorMessage = 'Upload failed. Please try again.';
|
||||
}
|
||||
}
|
||||
|
||||
resetForm(): void {
|
||||
this.selectedFile = null;
|
||||
this.tagInput = '';
|
||||
this.toastMessage = '';
|
||||
this.errorMessage = '';
|
||||
this.showSuccess = false;
|
||||
if (this.dismissTimer) clearTimeout(this.dismissTimer);
|
||||
this.cdr.markForCheck();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user