update.

Author: xuang7

frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html

@@ -39,7 +39,7 @@
     <!-- Placeholder or Preview Image -->
     <img
       class="card-preview-image"
-      [src]="previewImage"
+      [src]="coverImageSrc"
       (error)="onCoverError()"
       alt="Workflow Preview" />
   </div>

frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts

@@ -185,42 +185,42 @@ describe("CardItemComponent", () => {
     component.ngOnChanges({ entry: { currentValue: component.entry } as any });
 
     expect(datasetService.getDatasetCoverUrl).toHaveBeenCalledWith(5);
-    expect(component.previewImage).toBe("https://cover.example/img.png");
+    expect(component.coverImageSrc).toBe("https://cover.example/img.png");
   });
 
   it("should fall back to the default preview when the cover fetch fails", () => {
     datasetService.getDatasetCoverUrl.mockReturnValue(throwError(() => new Error("cover fetch failed")));
     component.entry = makeDatasetEntry({ coverImageUrl: "cover/path.png" });
     component.ngOnChanges({ entry: { currentValue: component.entry } as any });
 
-    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+    expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
   });
 
   it("should reset the preview to the default image on cover load error", () => {
     component.coverImageSrc = "https://cover.example/img.png";
     component.onCoverError();
-    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+    expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
   });
 
   it("should keep the default preview for non-dataset entries", () => {
     component.entry = makeWorkflowEntry();
     component.ngOnChanges({ entry: { currentValue: component.entry } as any });
-    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+    expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
   });
 
   it("should not fetch a cover when the dataset has no cover image", () => {
     component.entry = makeDatasetEntry({ coverImageUrl: undefined });
     component.ngOnChanges({ entry: { currentValue: component.entry } as any });
 
     expect(datasetService.getDatasetCoverUrl).not.toHaveBeenCalled();
-    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+    expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
   });
 
   it("should use the default preview when the cover url resolves to null", () => {
     datasetService.getDatasetCoverUrl.mockReturnValue(of({ url: null }));
     component.entry = makeDatasetEntry({ coverImageUrl: "cover/path.png" });
     component.ngOnChanges({ entry: { currentValue: component.entry } as any });
 
-    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+    expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
   });
 });

frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts

@@ -136,13 +136,7 @@ export class CardItemComponent implements OnChanges {
     private notificationService: NotificationService
   ) {}
 
-  /** The top image src for the card preview. */
-  get previewImage(): string {
-    return this.coverImageSrc;
-  }
-
   initializeEntry() {
-    this.coverImageSrc = CardItemComponent.DEFAULT_PREVIEW_IMAGE;
     if (this.entry.type === "workflow") {
       if (typeof this.entry.id === "number") {
         this.disableDelete = !this.entry.workflow.isOwner;

frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts

@@ -316,36 +316,48 @@ describe("UserDatasetComponent", () => {
     afterEach(() => localStorage.removeItem(VIEW_MODE_KEY));
 
     it("setViewType updates viewType, persists it, and is a no-op when unchanged", () => {
-      component.setViewType("card");
-      expect(component.viewType).toBe("card");
-      expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("card");
+      // viewType defaults to "card", so switching to "list" is the real change
+      component.setViewType("list");
+      expect(component.viewType).toBe("list");
+      expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("list");
 
       // setting the same value should not write again
       localStorage.removeItem(VIEW_MODE_KEY);
-      component.setViewType("card");
+      component.setViewType("list");
       expect(localStorage.getItem(VIEW_MODE_KEY)).toBeNull();
 
-      component.setViewType("list");
-      expect(component.viewType).toBe("list");
-      expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("list");
+      component.setViewType("card");
+      expect(component.viewType).toBe("card");
+      expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("card");
     });
 
-    it("initializes viewType from localStorage", () => {
-      localStorage.setItem(VIEW_MODE_KEY, "card");
+    const makeFreshComponent = () => {
       const userServiceMock = {
         userChanged: () => new Subject<User | undefined>().asObservable(),
         isLogin: () => true,
         getCurrentUser: () => ({ uid: 42 }) as User,
       };
-      const fresh = new UserDatasetComponent(
+      return new UserDatasetComponent(
         modalServiceMock as any,
         userServiceMock as any,
         routerMock as any,
         searchServiceMock as any,
         datasetServiceMock as any,
         messageMock as any
       );
-      expect(fresh.viewType).toBe("card");
+    };
+
+    it("defaults viewType to card when nothing is stored", () => {
+      localStorage.removeItem(VIEW_MODE_KEY);
+      expect(makeFreshComponent().viewType).toBe("card");
+    });
+
+    it("initializes viewType to list only when explicitly stored", () => {
+      localStorage.setItem(VIEW_MODE_KEY, "list");
+      expect(makeFreshComponent().viewType).toBe("list");
+
+      localStorage.setItem(VIEW_MODE_KEY, "card");
+      expect(makeFreshComponent().viewType).toBe("card");
     });
   });
 });

frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts

@@ -73,7 +73,7 @@ export class UserDatasetComponent implements AfterViewInit {
   public currentUid = this.userService.getCurrentUser()?.uid;
   public hasMismatch = false; // Display warning when there are mismatched datasets
   public viewType: "list" | "card" =
-    localStorage.getItem(UserDatasetComponent.VIEW_MODE_STORAGE_KEY) === "card" ? "card" : "list";
+    localStorage.getItem(UserDatasetComponent.VIEW_MODE_STORAGE_KEY) === "list" ? "list" : "card";
 
   private _searchResultsComponent?: SearchResultsComponent;
   @ViewChild(SearchResultsComponent) get searchResultsComponent(): SearchResultsComponent {