Actually fix the thumbnail bug

frontend/package.json

@@ -34,10 +34,12 @@
     "@ng-web-apis/common": "^4.11.1",
     "@ng-web-apis/resize-observer": "^4.11.1",
     "@ngui/common": "^1.0.0",
+    "@ngx-dropzone/cdk": "^18.1.1",
     "@popperjs/core": "^2.11.8",
     "@types/ackee-tracker": "^5.0.4",
     "@types/node": "^22.8.4",
     "@types/resize-observer-browser": "^0.1.11",
+    "@types/uuid": "^10.0.0",
     "@types/validator": "^13.12.2",
     "ackee-tracker": "^5.1.0",
     "axios": "^1.7.7",
@@ -55,9 +57,9 @@
     "rxjs": "^7.8.1",
     "tslib": "^2.8.0",
     "typescript": "~5.5.4",
+    "uuid": "^11.0.2",
     "webpack": "^5.95.0",
     "webpack-bundle-analyzer": "^4.10.2",
-    "@ngx-dropzone/cdk": "^18.1.1",
     "zod": "^3.23.8",
     "zone.js": "~0.14.10"
   }

frontend/src/app/components/picsur-img/picsur-img.component.ts

@@ -5,7 +5,7 @@ import {
   ElementRef,
   Input,
   OnChanges,
-  ViewChild,
+  ViewChild
 } from '@angular/core';
 import { FileType, ImageFileType } from 'picsur-shared/dist/dto/mimes.dto';
 import { AsyncFailable, HasFailed } from 'picsur-shared/dist/types/failable';
@@ -115,6 +115,8 @@ export class PicsurImgComponent implements OnChanges {
 
     if (this.state === PicsurImgState.Init) {
       this.state = PicsurImgState.Loading;
+      this.changeDetector.markForCheck();
+
       this.reload();
     }
   }

frontend/src/app/workers/qoi-worker.dto.ts

@@ -7,13 +7,13 @@ export interface QOIImage {
 }
 
 export interface QOIWorkerIn {
-  id: number;
+  id: string;
   url: string;
   authorization: string;
 }
 
 export interface QOIWorkerOut {
-  id: number;
+  id: string;
   result: Failable<QOIImage>;
 }
 

frontend/src/app/workers/qoi-worker.service.ts

@@ -4,6 +4,7 @@ import {
   Failure,
   HasFailed,
 } from 'picsur-shared/dist/types/failable';
+import { v4 as uuidv4 } from 'uuid';
 import { KeyStorageService } from '../services/storage/key-storage.service';
 import { QOIImage, QOIJob, QOIWorkerOut } from './qoi-worker.dto';
 
@@ -27,7 +28,7 @@ export class QoiWorkerService {
 
     if (this.worker && !this.job) {
       return new Promise((resolve) => {
-        const id = Date.now();
+        const id = uuidv4().toString();
         const listener = ({ data }: { data: QOIWorkerOut }) => {
           if (data.id !== id) return;
           this.worker?.removeEventListener('message', listener);

pnpm-lock.yaml

@@ -291,6 +291,9 @@ importers:
       '@types/resize-observer-browser':
         specifier: ^0.1.11
         version: 0.1.11
+      '@types/uuid':
+        specifier: ^10.0.0
+        version: 10.0.0
       '@types/validator':
         specifier: ^13.12.2
         version: 13.12.2
@@ -342,6 +345,9 @@ importers:
       typescript:
         specifier: ~5.5.4
         version: 5.5.4
+      uuid:
+        specifier: ^11.0.2
+        version: 11.0.2
       webpack:
         specifier: ^5.95.0
         version: 5.95.0
@@ -2492,6 +2498,9 @@ packages:
   '@types/supertest@6.0.2':
     resolution: {integrity: sha512-137ypx2lk/wTQbW6An6safu9hXmajAifU/s7szAHLN/FeIm5w7yR0Wkl9fdJMRSHwOn4HLAI0DaB2TOORuhPDg==}
 
+  '@types/uuid@10.0.0':
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+
   '@types/validator@13.12.2':
     resolution: {integrity: sha512-6SlHBzUW8Jhf3liqrGGXyTJSIFe4nqlJ5A5KaMZ2l/vbM3Wh3KSybots/wfWVzNLK4D1NZluDlSQIbIEPx6oyA==}
 
@@ -5708,6 +5717,10 @@ packages:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
 
+  uuid@11.0.2:
+    resolution: {integrity: sha512-14FfcOJmqdjbBPdDjFQyk/SdT4NySW4eM0zcG+HqbHP5jzuH56xO3J1DGhgs/cEMCfwYi3HQI1gnTO62iaG+tQ==}
+    hasBin: true
+
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -8310,6 +8323,8 @@ snapshots:
       '@types/methods': 1.1.4
       '@types/superagent': 8.1.9
 
+  '@types/uuid@10.0.0': {}
+
   '@types/validator@13.12.2': {}
 
   '@types/wrap-ansi@3.0.0': {}
@@ -11736,6 +11751,8 @@ snapshots:
 
   uuid@10.0.0: {}
 
+  uuid@11.0.2: {}
+
   uuid@8.3.2: {}
 
   uuid@9.0.1: {}