From 35b80720f634bedc6885df690fd8b36428d3fae8 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Wed, 4 Jun 2025 12:08:25 +0300
Subject: [PATCH 1/6] fix(contributors): fixed add contributors dialog

---
 .../add-contributor-dialog.component.ts              | 12 ++++++++----
 .../add-unregistered-contributor-dialog.component.ts |  2 +-
 .../contributors/store/contributors.actions.ts       |  4 ++++
 .../project/contributors/store/contributors.state.ts |  6 ++++++
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.ts b/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.ts
index df5c944c7..5fdf93299 100644
--- a/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.ts
+++ b/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.ts
@@ -9,7 +9,7 @@ import { PaginatorState } from 'primeng/paginator';
 
 import { debounceTime, distinctUntilChanged, filter, switchMap } from 'rxjs';
 
-import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule } from '@angular/forms';
 
@@ -17,7 +17,7 @@ import { CustomPaginatorComponent, LoadingSpinnerComponent, SearchInputComponent
 
 import { AddContributorType, AddDialogState } from '../../enums';
 import { ContributorAddModel, ContributorDialogAddModel } from '../../models';
-import { ContributorsSelectors, SearchUsers } from '../../store';
+import { ClearUsers, ContributorsSelectors, SearchUsers } from '../../store';
 import { AddContributorItemComponent } from '../add-contributor-item/add-contributor-item.component';
 
 @Component({
@@ -36,7 +36,7 @@ import { AddContributorItemComponent } from '../add-contributor-item/add-contrib
   styleUrl: './add-contributor-dialog.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddContributorDialogComponent implements OnInit {
+export class AddContributorDialogComponent implements OnInit, OnDestroy {
   protected dialogRef = inject(DynamicDialogRef);
   private readonly destroyRef = inject(DestroyRef);
   readonly config = inject(DynamicDialogConfig);
@@ -53,7 +53,7 @@ export class AddContributorDialogComponent implements OnInit {
   protected selectedUsers = signal<ContributorAddModel[]>([]);
   protected searchControl = new FormControl<string>('');
 
-  protected actions = createDispatchMap({ searchUsers: SearchUsers });
+  protected actions = createDispatchMap({ searchUsers: SearchUsers, clearUsers: ClearUsers });
 
   get isSearchState() {
     return this.currentState() === AddDialogState.Search;
@@ -64,6 +64,10 @@ export class AddContributorDialogComponent implements OnInit {
     this.selectedUsers.set([]);
   }
 
+  ngOnDestroy(): void {
+    this.actions.clearUsers();
+  }
+
   addContributor(): void {
     if (this.currentState() === AddDialogState.Details) {
       const dialogData: ContributorDialogAddModel = { data: this.selectedUsers(), type: AddContributorType.Registered };
diff --git a/src/app/features/project/contributors/components/add-unregistered-contributor-dialog/add-unregistered-contributor-dialog.component.ts b/src/app/features/project/contributors/components/add-unregistered-contributor-dialog/add-unregistered-contributor-dialog.component.ts
index 3e315e92f..bc35f4864 100644
--- a/src/app/features/project/contributors/components/add-unregistered-contributor-dialog/add-unregistered-contributor-dialog.component.ts
+++ b/src/app/features/project/contributors/components/add-unregistered-contributor-dialog/add-unregistered-contributor-dialog.component.ts
@@ -48,7 +48,7 @@ export class AddUnregisteredContributorDialogComponent {
   }
 
   addRegistered() {
-    const data: ContributorDialogAddModel = { data: [], type: AddContributorType.Unregistered };
+    const data: ContributorDialogAddModel = { data: [], type: AddContributorType.Registered };
     this.dialogRef.close(data);
   }
 
diff --git a/src/app/features/project/contributors/store/contributors.actions.ts b/src/app/features/project/contributors/store/contributors.actions.ts
index ca10c32b1..eaca3b5b5 100644
--- a/src/app/features/project/contributors/store/contributors.actions.ts
+++ b/src/app/features/project/contributors/store/contributors.actions.ts
@@ -59,3 +59,7 @@ export class SearchUsers {
     public page: number
   ) {}
 }
+
+export class ClearUsers {
+  static readonly type = '[Contributors] Clear Users';
+}
diff --git a/src/app/features/project/contributors/store/contributors.state.ts b/src/app/features/project/contributors/store/contributors.state.ts
index 4b79e8f2a..7a69ff788 100644
--- a/src/app/features/project/contributors/store/contributors.state.ts
+++ b/src/app/features/project/contributors/store/contributors.state.ts
@@ -8,6 +8,7 @@ import { ContributorsService } from '../services';
 
 import {
   AddContributor,
+  ClearUsers,
   DeleteContributor,
   GetAllContributors,
   SearchUsers,
@@ -183,6 +184,11 @@ export class ContributorsState {
     );
   }
 
+  @Action(ClearUsers)
+  clearUsers(ctx: StateContext<ContributorsStateModel>) {
+    ctx.patchState({ users: { data: [], isLoading: false, error: null, totalCount: 0 } });
+  }
+
   private handleError(ctx: StateContext<ContributorsStateModel>, section: 'contributorsList' | 'users', error: Error) {
     ctx.patchState({
       [section]: {

From e2bc88df047a6b1bebb070af42705946059e9026 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Wed, 4 Jun 2025 16:49:35 +0300
Subject: [PATCH 2/6] fix(contributors): fixed contributors page

---
 .../contributors/contributors.component.html  | 14 ++--
 .../contributors/contributors.component.ts    |  1 +
 .../settings-project-form-card.component.html |  3 +-
 .../settings-project-form-card.component.ts   |  4 ++
 ...ttings-view-only-links-card.component.html |  6 +-
 ...settings-view-only-links-card.component.ts |  3 +-
 .../project/settings/settings.component.html  |  6 +-
 .../project/settings/settings.component.ts    | 26 +++++--
 .../settings/store/settings.selectors.ts      |  5 ++
 .../project/settings/store/settings.state.ts  |  6 ++
 .../copy-button/copy-button.component.html    |  8 +++
 .../copy-button/copy-button.component.scss    | 13 ++++
 .../copy-button/copy-button.component.spec.ts | 22 ++++++
 .../copy-button/copy-button.component.ts      | 29 ++++++++
 src/app/shared/components/index.ts            |  1 +
 .../components/toast/toast.component.html     |  2 +-
 .../view-only-table.component.html            | 69 +++++++++----------
 .../view-only-table.component.scss            |  7 +-
 .../view-only-table.component.ts              | 25 ++++---
 src/assets/i18n/en.json                       |  4 +-
 src/assets/styles/overrides/tooltip.scss      |  1 -
 21 files changed, 190 insertions(+), 65 deletions(-)
 create mode 100644 src/app/shared/components/copy-button/copy-button.component.html
 create mode 100644 src/app/shared/components/copy-button/copy-button.component.scss
 create mode 100644 src/app/shared/components/copy-button/copy-button.component.spec.ts
 create mode 100644 src/app/shared/components/copy-button/copy-button.component.ts

diff --git a/src/app/features/project/contributors/contributors.component.html b/src/app/features/project/contributors/contributors.component.html
index 17d550ea7..130383454 100644
--- a/src/app/features/project/contributors/contributors.component.html
+++ b/src/app/features/project/contributors/contributors.component.html
@@ -90,12 +90,14 @@ <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.project.contributors' | tra
     <h2>{{ 'project.contributors.viewOnly' | translate }}</h2>
 
     <p>{{ 'project.contributors.createLink' | translate }}</p>
-    <p-button
-      class="w-10rem"
-      [label]="'project.contributors.createButton' | translate"
-      (click)="createViewLink()"
-    ></p-button>
 
-    <osf-view-only-table (deleteLink)="deleteLinkItem($event)" [tableData]="viewOnlyLinks()" />
+    <p-button class="w-10rem" [label]="'project.contributors.createButton' | translate" (click)="createViewLink()">
+    </p-button>
+
+    <osf-view-only-table
+      [isLoading]="isViewOnlyLinksLoading()"
+      [tableData]="viewOnlyLinks()"
+      (deleteLink)="deleteLinkItem($event)"
+    />
   </div>
 </section>
diff --git a/src/app/features/project/contributors/contributors.component.ts b/src/app/features/project/contributors/contributors.component.ts
index 926b35860..ffa3c72a4 100644
--- a/src/app/features/project/contributors/contributors.component.ts
+++ b/src/app/features/project/contributors/contributors.component.ts
@@ -91,6 +91,7 @@ export class ContributorsComponent implements OnInit {
   protected initialContributors = select(ContributorsSelectors.getContributors);
   protected contributors = signal([]);
   protected readonly isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
+  protected readonly isViewOnlyLinksLoading = select(SettingsSelectors.isViewOnlyLinksLoading);
 
   protected actions = createDispatchMap({
     getViewOnlyLinks: GetViewOnlyLinksTable,
diff --git a/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html
index 697b2daf1..6cfef0955 100644
--- a/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html
+++ b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html
@@ -1,7 +1,7 @@
 <p-card>
   <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
 
-  <form [formGroup]="formGroup()" (ngSubmit)="submitForm.emit(formGroup().value)" class="flex flex-column gap-4">
+  <form [formGroup]="formGroup()" (ngSubmit)="submit()" class="flex flex-column gap-4">
     <div class="flex flex-column">
       <label class="input-label" for="project-title">
         {{ 'myProjects.createProject.title' | translate }}
@@ -38,6 +38,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
         severity="info"
         class="w-10rem btn-full-width"
       ></p-button>
+
       <p-button
         type="submit"
         class="w-10rem btn-full-width bg-primary-blue-second"
diff --git a/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts
index 0671c78bd..d5b24fd7e 100644
--- a/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts
+++ b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts
@@ -30,4 +30,8 @@ export class SettingsProjectFormCardComponent {
   resetForm(): void {
     this.formGroup().patchValue({ ...this.projectDetails().attributes });
   }
+
+  submit() {
+    this.submitForm.emit(this.formGroup().value);
+  }
 }
diff --git a/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html
index 0e0b8fba3..8d5156a5e 100644
--- a/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html
+++ b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html
@@ -3,5 +3,9 @@ <h3 class="text-xl pb-2">{{ 'myProjects.settings.viewOnlyLinks' | translate }}</
 
   <p class="pb-4">{{ 'myProjects.settings.viewOnlySubtitle' | translate }}</p>
 
-  <osf-view-only-table (deleteLink)="deleteTableItem.emit($event)" [tableData]="tableData()"></osf-view-only-table>
+  <osf-view-only-table
+    [tableData]="tableData()"
+    [isLoading]="isLoading()"
+    (deleteLink)="deleteTableItem.emit($event)"
+  ></osf-view-only-table>
 </p-card>
diff --git a/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts
index f496278b5..225168424 100644
--- a/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts
+++ b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts
@@ -15,6 +15,7 @@ import { ViewOnlyTableComponent } from '@shared/components';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SettingsViewOnlyLinksCardComponent {
-  deleteTableItem = output<ViewOnlyLinkModel>();
+  isLoading = input(false);
   tableData = input.required<PaginatedViewOnlyLinksModel>();
+  deleteTableItem = output<ViewOnlyLinkModel>();
 }
diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
index cc501100b..eae10c53d 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -15,7 +15,11 @@
         [locationText]="'Storage location cannot be changed after project is created.'"
       ></osf-settings-storage-location-card>
 
-      <osf-settings-view-only-links-card (deleteTableItem)="deleteLinkItem($event)" [tableData]="viewOnlyLinks()" />
+      <osf-settings-view-only-links-card
+        [tableData]="viewOnlyLinks()"
+        [isLoading]="isViewOnlyLinksLoading()"
+        (deleteTableItem)="deleteLinkItem($event)"
+      />
 
       <osf-settings-access-requests-card
         (accessRequestChange)="onAccessRequestChange($event)"
diff --git a/src/app/features/project/settings/settings.component.ts b/src/app/features/project/settings/settings.component.ts
index 52d6282c0..21737112c 100644
--- a/src/app/features/project/settings/settings.component.ts
+++ b/src/app/features/project/settings/settings.component.ts
@@ -1,4 +1,4 @@
-import { createDispatchMap, select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
@@ -45,6 +45,7 @@ import {
   NotificationSubscriptionSelectors,
   UpdateNotificationSubscriptionForNodeId,
 } from '@osf/features/settings/notifications/store';
+import { ToastService } from '@osf/shared/services';
 import { defaultConfirmationConfig } from '@osf/shared/utils';
 import { SubHeaderComponent } from '@shared/components';
 import { ProjectFormControls, SubscriptionEvent, SubscriptionFrequency } from '@shared/enums';
@@ -76,9 +77,9 @@ import { UpdateNodeRequestModel } from '@shared/models';
 })
 export class SettingsComponent implements OnInit {
   private readonly route = inject(ActivatedRoute);
-  private readonly store = inject(Store);
   private readonly translateService = inject(TranslateService);
   private readonly confirmationService = inject(ConfirmationService);
+  private readonly toastService = inject(ToastService);
 
   readonly projectId = toSignal(this.route.parent?.params.pipe(map((params) => params['id'])) ?? of(undefined));
 
@@ -86,12 +87,17 @@ export class SettingsComponent implements OnInit {
   protected notifications = select(NotificationSubscriptionSelectors.getNotificationSubscriptionsByNodeId);
   protected projectDetails = select(SettingsSelectors.getProjectDetails);
   protected viewOnlyLinks = select(SettingsSelectors.getViewOnlyLinks);
+  protected isViewOnlyLinksLoading = select(SettingsSelectors.isViewOnlyLinksLoading);
 
   protected actions = createDispatchMap({
     getSettings: GetProjectSettings,
     getNotifications: GetNotificationSubscriptionsByNodeId,
     getProjectDetails: GetProjectDetails,
     getViewOnlyLinks: GetViewOnlyLinksTable,
+    updateProjectDetails: UpdateProjectDetails,
+    updateProjectSettings: UpdateProjectSettings,
+    updateNotificationSubscriptionForNodeId: UpdateNotificationSubscriptionForNodeId,
+    deleteViewOnlyLink: DeleteViewOnlyLink,
   });
 
   projectForm = new FormGroup({
@@ -124,6 +130,7 @@ export class SettingsComponent implements OnInit {
 
   submitForm({ title, description }: ProjectDetailsModel): void {
     const current = this.projectDetails().attributes;
+
     if (title === current.title && description === current.description) return;
 
     const model: UpdateNodeRequestModel = {
@@ -133,7 +140,11 @@ export class SettingsComponent implements OnInit {
         attributes: { title, description },
       },
     } as UpdateNodeRequestModel;
-    this.store.dispatch(new UpdateProjectDetails(model)).subscribe();
+
+    this.actions.updateProjectDetails(model).subscribe(() => {
+      const message = this.translateService.instant('myProjects.settings.updateProjectDetailsMessage');
+      this.toastService.showSuccess(message);
+    });
   }
 
   onAccessRequestChange(newValue: boolean): void {
@@ -165,7 +176,7 @@ export class SettingsComponent implements OnInit {
     const id = `${'n5str'}_${data.event}`;
     const frequency = data.frequency;
 
-    this.store.dispatch(new UpdateNotificationSubscriptionForNodeId({ id, frequency })).subscribe();
+    this.actions.updateNotificationSubscriptionForNodeId({ id, frequency }).subscribe();
   }
 
   deleteLinkItem(link: ViewOnlyLinkModel): void {
@@ -181,7 +192,7 @@ export class SettingsComponent implements OnInit {
         label: this.translateService.instant('settings.developerApps.list.deleteButton'),
       },
       accept: () => {
-        this.store.dispatch(new DeleteViewOnlyLink(this.projectId(), link.id)).subscribe();
+        this.actions.deleteViewOnlyLink(this.projectId(), link.id).subscribe();
       },
     });
   }
@@ -216,7 +227,10 @@ export class SettingsComponent implements OnInit {
       attributes: { ...payload },
     } as ProjectSettingsData;
 
-    this.store.dispatch(new UpdateProjectSettings(model)).subscribe();
+    this.actions.updateProjectSettings(model).subscribe(() => {
+      const message = this.translateService.instant('myProjects.settings.updateProjectSettingsMessage');
+      this.toastService.showSuccess(message);
+    });
   }
 
   private setupEffects(): void {
diff --git a/src/app/features/project/settings/store/settings.selectors.ts b/src/app/features/project/settings/store/settings.selectors.ts
index ec264f9e1..27daf414b 100644
--- a/src/app/features/project/settings/store/settings.selectors.ts
+++ b/src/app/features/project/settings/store/settings.selectors.ts
@@ -18,4 +18,9 @@ export class SettingsSelectors {
   static getViewOnlyLinks(state: SettingsStateModel) {
     return state.viewOnlyLinks.data;
   }
+
+  @Selector([SettingsState])
+  static isViewOnlyLinksLoading(state: SettingsStateModel) {
+    return state.viewOnlyLinks.isLoading;
+  }
 }
diff --git a/src/app/features/project/settings/store/settings.state.ts b/src/app/features/project/settings/store/settings.state.ts
index 6e8c20604..5d4741d93 100644
--- a/src/app/features/project/settings/store/settings.state.ts
+++ b/src/app/features/project/settings/store/settings.state.ts
@@ -141,6 +141,12 @@ export class SettingsState {
 
   @Action(GetViewOnlyLinksTable)
   getViewOnlyLinksTable(ctx: StateContext<SettingsStateModel>, action: GetViewOnlyLinksTable) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      viewOnlyLinks: { ...state.viewOnlyLinks, isLoading: true, error: null },
+    });
+
     return this.viewOnlyLinksService.getViewOnlyLinksData(action.projectId).pipe(
       map((response) => response),
       tap((links) => {
diff --git a/src/app/shared/components/copy-button/copy-button.component.html b/src/app/shared/components/copy-button/copy-button.component.html
new file mode 100644
index 000000000..80aaaab98
--- /dev/null
+++ b/src/app/shared/components/copy-button/copy-button.component.html
@@ -0,0 +1,8 @@
+<p-button
+  class="old icon-copy-btn btn-icon-text form-btn button-shadow-none"
+  ariaLabel="Copy"
+  [pTooltip]="tooltip() | translate"
+  (click)="copy()"
+>
+  <i class="osf-icon-copy"></i>
+</p-button>
diff --git a/src/app/shared/components/copy-button/copy-button.component.scss b/src/app/shared/components/copy-button/copy-button.component.scss
new file mode 100644
index 000000000..3a6d12984
--- /dev/null
+++ b/src/app/shared/components/copy-button/copy-button.component.scss
@@ -0,0 +1,13 @@
+@use "assets/styles/variables" as var;
+
+:host {
+  display: flex;
+}
+
+.icon-copy-btn {
+  cursor: pointer;
+
+  &:hover {
+    color: var.$dark-blue-2;
+  }
+}
diff --git a/src/app/shared/components/copy-button/copy-button.component.spec.ts b/src/app/shared/components/copy-button/copy-button.component.spec.ts
new file mode 100644
index 000000000..529084403
--- /dev/null
+++ b/src/app/shared/components/copy-button/copy-button.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CopyButtonComponent } from './copy-button.component';
+
+describe('CopyButtonComponent', () => {
+  let component: CopyButtonComponent;
+  let fixture: ComponentFixture<CopyButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CopyButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CopyButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/copy-button/copy-button.component.ts b/src/app/shared/components/copy-button/copy-button.component.ts
new file mode 100644
index 000000000..0996dba5d
--- /dev/null
+++ b/src/app/shared/components/copy-button/copy-button.component.ts
@@ -0,0 +1,29 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Tooltip } from 'primeng/tooltip';
+
+import { Clipboard } from '@angular/cdk/clipboard';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+
+import { ToastService } from '@osf/shared/services';
+
+@Component({
+  selector: 'osf-copy-button',
+  imports: [Button, Tooltip, TranslatePipe],
+  templateUrl: './copy-button.component.html',
+  styleUrl: './copy-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CopyButtonComponent {
+  copyItem = input<string>('');
+  tooltip = input<string>('common.buttons.copy');
+
+  private readonly clipboard = inject(Clipboard);
+  private readonly toastService = inject(ToastService);
+
+  copy(): void {
+    this.clipboard.copy(this.copyItem());
+    this.toastService.showSuccess('Copied');
+  }
+}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 9772db0bb..5639b4131 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -1,5 +1,6 @@
 export { AddProjectFormComponent } from './add-project-form/add-project-form.component';
 export { BarChartComponent } from './bar-chart/bar-chart.component';
+export { CopyButtonComponent } from './copy-button/copy-button.component';
 export { CustomPaginatorComponent } from './custom-paginator/custom-paginator.component';
 export { EducationHistoryComponent } from './education-history/education-history.component';
 export { EmploymentHistoryComponent } from './employment-history/employment-history.component';
diff --git a/src/app/shared/components/toast/toast.component.html b/src/app/shared/components/toast/toast.component.html
index 3206359b2..66ba0b690 100644
--- a/src/app/shared/components/toast/toast.component.html
+++ b/src/app/shared/components/toast/toast.component.html
@@ -1 +1 @@
-<p-toast position="top-right" [baseZIndex]="2302" />
+<p-toast position="top-right" [baseZIndex]="2302" [preventOpenDuplicates]="true" />
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.html b/src/app/shared/components/view-only-table/view-only-table.component.html
index 51db3e580..19c7875c4 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.html
+++ b/src/app/shared/components/view-only-table/view-only-table.component.html
@@ -1,31 +1,31 @@
-@if (tableData().items && tableData().items.length) {
-  <p-table [value]="tableData().items" class="view-only-table">
-    <ng-template #header>
-      <tr>
-        <th>
-          {{ 'myProjects.settings.viewOnlyTable.linkName' | translate }}
-        </th>
-        <th>
-          {{ 'myProjects.settings.viewOnlyTable.sharedComponents' | translate }}
-        </th>
+<p-table [value]="isLoading() ? skeletonData : tableData().items" class="view-only-table">
+  <ng-template #header>
+    <tr>
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.linkName' | translate }}
+      </th>
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.sharedComponents' | translate }}
+      </th>
 
-        <th>
-          {{ 'myProjects.settings.viewOnlyTable.createdDate' | translate }}
-        </th>
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.createdDate' | translate }}
+      </th>
 
-        <th>
-          {{ 'myProjects.settings.viewOnlyTable.createdBy' | translate }}
-        </th>
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.createdBy' | translate }}
+      </th>
 
-        <th>
-          {{ 'myProjects.settings.viewOnlyTable.anonymous' | translate }}
-        </th>
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.anonymous' | translate }}
+      </th>
 
-        <th></th>
-      </tr>
-    </ng-template>
+      <th></th>
+    </tr>
+  </ng-template>
 
-    <ng-template #body let-item>
+  <ng-template #body let-item>
+    @if (item.id) {
       <tr>
         <td>
           <div class="flex align-items-center gap-2">
@@ -36,19 +36,12 @@
                 [id]="item.link"
                 [attr.aria-label]="'Link for ' + item.link"
                 pInputText
-                class="h-auto text-base w-max py-2 px-3"
+                class="h-auto text-base w-max py-2 pl-3 pr-5"
                 type="text"
                 [value]="item.link"
               />
 
-              <p-button
-                [ariaLabel]="'Copy link'"
-                type="button"
-                class="absolute btn-icon-text form-btn icon-copy-btn button-shadow-none"
-                (click)="copy(item.link)"
-              >
-                <i class="osf-icon-copy"></i>
-              </p-button>
+              <osf-copy-button class="icon-copy-btn absolute" [copyItem]="item.link"></osf-copy-button>
             </div>
           </div>
         </td>
@@ -66,6 +59,12 @@
           </p-button>
         </td>
       </tr>
-    </ng-template>
-  </p-table>
-}
+    } @else {
+      <tr class="loading-row">
+        <td colspan="7">
+          <p-skeleton width="100%" height="3.3rem" borderRadius="0" />
+        </td>
+      </tr>
+    }
+  </ng-template>
+</p-table>
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.scss b/src/app/shared/components/view-only-table/view-only-table.component.scss
index cd945c08e..da65d756c 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.scss
+++ b/src/app/shared/components/view-only-table/view-only-table.component.scss
@@ -1,9 +1,10 @@
 @use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
 
 .icon-copy-btn {
-  right: 1.5rem;
   top: 50%;
+  right: mix.rem(16px);
   transform: translateY(-50%);
-  width: 1.5rem;
-  cursor: pointer;
+  width: mix.rem(24px);
+  z-index: 1;
 }
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.ts b/src/app/shared/components/view-only-table/view-only-table.component.ts
index f62b0ab5b..61baa189a 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.ts
+++ b/src/app/shared/components/view-only-table/view-only-table.component.ts
@@ -2,29 +2,38 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { InputText } from 'primeng/inputtext';
+import { Skeleton } from 'primeng/skeleton';
 import { TableModule } from 'primeng/table';
 
-import { Clipboard } from '@angular/cdk/clipboard';
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { PaginatedViewOnlyLinksModel, ViewOnlyLinkModel } from '@osf/features/project/settings/models';
 
+import { CopyButtonComponent } from '../copy-button/copy-button.component';
+
 @Component({
   selector: 'osf-view-only-table',
-  imports: [TableModule, TranslatePipe, DatePipe, InputText, ReactiveFormsModule, Button],
+  imports: [
+    TableModule,
+    TranslatePipe,
+    DatePipe,
+    InputText,
+    ReactiveFormsModule,
+    Button,
+    CopyButtonComponent,
+    Skeleton,
+  ],
   templateUrl: './view-only-table.component.html',
   styleUrl: './view-only-table.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ViewOnlyTableComponent {
-  deleteLink = output<ViewOnlyLinkModel>();
   tableData = input.required<PaginatedViewOnlyLinksModel>();
+  isLoading = input(true);
 
-  readonly #clipboard = inject(Clipboard);
+  deleteLink = output<ViewOnlyLinkModel>();
 
-  copy(link: string): void {
-    this.#clipboard.copy(link);
-  }
+  skeletonData: ViewOnlyLinkModel[] = Array.from({ length: 3 }, () => ({}) as ViewOnlyLinkModel);
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index faf3cca31..1ff8aec96 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -302,7 +302,9 @@
           "daily": "You'll receive a daily summary of file updates.",
           "none": "You won't receive file update notifications."
         }
-      }
+      },
+      "updateProjectDetailsMessage": "Successfully updated project details.",
+      "updateProjectSettingsMessage": "Successfully updated project settings."
     }
   },
   "myProfile": {
diff --git a/src/assets/styles/overrides/tooltip.scss b/src/assets/styles/overrides/tooltip.scss
index 18e532846..e01a506d2 100644
--- a/src/assets/styles/overrides/tooltip.scss
+++ b/src/assets/styles/overrides/tooltip.scss
@@ -4,7 +4,6 @@
   display: flex !important;
   background: var.$white;
   color: var.$dark-blue-1;
-  min-width: 22rem;
   border: 1px solid var.$grey-3;
   padding: 1rem;
 }

From 8f8d4b79ca8142907c81437acf084e10b549191f Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Wed, 4 Jun 2025 16:59:08 +0300
Subject: [PATCH 3/6] fix(contributors): added sidenav

---
 src/app/core/components/index.ts              |   1 +
 .../nav-menu/nav-menu.component.html          | 110 +++++++++---------
 .../components/nav-menu/nav-menu.component.ts |   3 +-
 .../core/components/root/root.component.html  |   2 +-
 .../components/root/root.component.spec.ts    |  13 ++-
 .../core/components/root/root.component.ts    |   4 +-
 .../components/sidenav/sidenav.component.html |   4 +
 .../components/sidenav/sidenav.component.scss |   0
 .../sidenav/sidenav.component.spec.ts         |  26 +++++
 .../components/sidenav/sidenav.component.ts   |  13 +++
 10 files changed, 112 insertions(+), 64 deletions(-)
 create mode 100644 src/app/core/components/sidenav/sidenav.component.html
 create mode 100644 src/app/core/components/sidenav/sidenav.component.scss
 create mode 100644 src/app/core/components/sidenav/sidenav.component.spec.ts
 create mode 100644 src/app/core/components/sidenav/sidenav.component.ts

diff --git a/src/app/core/components/index.ts b/src/app/core/components/index.ts
index d20f23ab0..39b7327d8 100644
--- a/src/app/core/components/index.ts
+++ b/src/app/core/components/index.ts
@@ -2,4 +2,5 @@ export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 export { FooterComponent } from './footer/footer.component';
 export { HeaderComponent } from './header/header.component';
 export { RootComponent } from './root/root.component';
+export { SidenavComponent } from './sidenav/sidenav.component';
 export { TopnavComponent } from './topnav/topnav.component';
diff --git a/src/app/core/components/nav-menu/nav-menu.component.html b/src/app/core/components/nav-menu/nav-menu.component.html
index 617b482ba..5958a21cb 100644
--- a/src/app/core/components/nav-menu/nav-menu.component.html
+++ b/src/app/core/components/nav-menu/nav-menu.component.html
@@ -1,58 +1,54 @@
-<aside class="custom-scrollbar flex flex-column p-4 h-full">
-  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
-
-  <nav class="nav-menu m-t-36">
-    <p-panelMenu [model]="mainMenuItems" [multiple]="false">
-      <ng-template #item let-item>
-        <a
-          [routerLink]="item.routerLink"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{
-            exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
-          }"
-          class="nav-link flex align-items-center"
-          [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
-          (click)="goToLink(item)"
-        >
-          @if (item.icon) {
-            <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
-          }
-          <span>{{ item.label | translate }}</span>
-          @if (item.items) {
-            <osf-icon
-              class="ml-auto pt-1"
-              [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
-            ></osf-icon>
-          }
-        </a>
-
-        @if (item.label === 'navigation.myProjects' && isProjectRoute()) {
-          <div class="ml-4">
-            <p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
-              <ng-template #item let-item>
-                <a
-                  [routerLink]="item.routerLink ? ['/my-projects', currentProjectId(), item.routerLink] : null"
-                  [routerLinkActive]="item.routerLink ? 'active' : ''"
-                  [routerLinkActiveOptions]="{ exact: true }"
-                  class="nav-link flex align-items-center"
-                  (click)="goToLink(item)"
-                >
-                  @if (item.icon) {
-                    <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
-                  }
-                  <span>{{ item.label | translate }}</span>
-                  @if (item.items) {
-                    <osf-icon
-                      class="ml-auto pt-1"
-                      [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
-                    ></osf-icon>
-                  }
-                </a>
-              </ng-template>
-            </p-panelMenu>
-          </div>
+<nav class="nav-menu">
+  <p-panelMenu [model]="mainMenuItems" [multiple]="false">
+    <ng-template #item let-item>
+      <a
+        [routerLink]="item.routerLink"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{
+          exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
+        }"
+        class="nav-link flex align-items-center"
+        [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
+        (click)="goToLink(item)"
+      >
+        @if (item.icon) {
+          <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
         }
-      </ng-template>
-    </p-panelMenu>
-  </nav>
-</aside>
+        <span>{{ item.label | translate }}</span>
+        @if (item.items) {
+          <osf-icon
+            class="ml-auto pt-1"
+            [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
+          ></osf-icon>
+        }
+      </a>
+
+      @if (item.label === 'navigation.myProjects' && isProjectRoute()) {
+        <div class="ml-4">
+          <p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
+            <ng-template #item let-item>
+              <a
+                [routerLink]="item.routerLink ? ['/my-projects', currentProjectId(), item.routerLink] : null"
+                [routerLinkActive]="item.routerLink ? 'active' : ''"
+                [routerLinkActiveOptions]="{ exact: true }"
+                class="nav-link flex align-items-center"
+                (click)="goToLink(item)"
+              >
+                @if (item.icon) {
+                  <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
+                }
+                <span>{{ item.label | translate }}</span>
+                @if (item.items) {
+                  <osf-icon
+                    class="ml-auto pt-1"
+                    [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
+                  ></osf-icon>
+                }
+              </a>
+            </ng-template>
+          </p-panelMenu>
+        </div>
+      }
+    </ng-template>
+  </p-panelMenu>
+</nav>
diff --git a/src/app/core/components/nav-menu/nav-menu.component.ts b/src/app/core/components/nav-menu/nav-menu.component.ts
index fe71b525c..fc1502642 100644
--- a/src/app/core/components/nav-menu/nav-menu.component.ts
+++ b/src/app/core/components/nav-menu/nav-menu.component.ts
@@ -5,7 +5,6 @@ import { PanelMenuModule } from 'primeng/panelmenu';
 
 import { filter, map } from 'rxjs';
 
-import { NgOptimizedImage } from '@angular/common';
 import { Component, computed, inject, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
@@ -16,7 +15,7 @@ import { NavItem } from '@osf/shared/models';
 
 @Component({
   selector: 'osf-nav-menu',
-  imports: [NgOptimizedImage, RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent],
+  imports: [RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent],
   templateUrl: './nav-menu.component.html',
   styleUrl: './nav-menu.component.scss',
 })
diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html
index fdf2f30f1..9f9ace757 100644
--- a/src/app/core/components/root/root.component.html
+++ b/src/app/core/components/root/root.component.html
@@ -1,6 +1,6 @@
 @if (isWeb()) {
   <div class="layout-desktop">
-    <osf-nav-menu></osf-nav-menu>
+    <osf-sidenav></osf-sidenav>
 
     <div class="content-wrapper">
       <osf-header></osf-header>
diff --git a/src/app/core/components/root/root.component.spec.ts b/src/app/core/components/root/root.component.spec.ts
index a385fe1fe..8e1bb702c 100644
--- a/src/app/core/components/root/root.component.spec.ts
+++ b/src/app/core/components/root/root.component.spec.ts
@@ -11,7 +11,9 @@ import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.comp
 import { FooterComponent } from '@core/components/footer/footer.component';
 import { HeaderComponent } from '@core/components/header/header.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
-import { IS_WEB, IS_XSMALL } from '@osf/shared/utils/breakpoints.tokens';
+import { IS_WEB, IS_XSMALL } from '@osf/shared/utils';
+
+import { SidenavComponent } from '../sidenav/sidenav.component';
 
 import { RootComponent } from './root.component';
 
@@ -28,7 +30,14 @@ describe('RootComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         RootComponent,
-        ...MockComponents(HeaderComponent, FooterComponent, TopnavComponent, ConfirmDialog, BreadcrumbComponent),
+        ...MockComponents(
+          HeaderComponent,
+          FooterComponent,
+          TopnavComponent,
+          ConfirmDialog,
+          BreadcrumbComponent,
+          SidenavComponent
+        ),
       ],
       providers: [
         MockProvider(IS_WEB, isWebSubject),
diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts
index bd78eff74..243b76b63 100644
--- a/src/app/core/components/root/root.component.ts
+++ b/src/app/core/components/root/root.component.ts
@@ -11,7 +11,7 @@ import { HeaderComponent } from '@core/components/header/header.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
 import { IS_MEDIUM, IS_WEB } from '@shared/utils';
 
-import { NavMenuComponent } from '../nav-menu/nav-menu.component';
+import { SidenavComponent } from '../sidenav/sidenav.component';
 
 @Component({
   selector: 'osf-root',
@@ -23,7 +23,7 @@ import { NavMenuComponent } from '../nav-menu/nav-menu.component';
     ConfirmDialog,
     BreadcrumbComponent,
     RouterOutlet,
-    NavMenuComponent,
+    SidenavComponent,
   ],
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],
diff --git a/src/app/core/components/sidenav/sidenav.component.html b/src/app/core/components/sidenav/sidenav.component.html
new file mode 100644
index 000000000..dc22dbcb6
--- /dev/null
+++ b/src/app/core/components/sidenav/sidenav.component.html
@@ -0,0 +1,4 @@
+<aside class="custom-scrollbar flex flex-column p-4 h-full">
+  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
+  <osf-nav-menu class="m-t-36" />
+</aside>
diff --git a/src/app/core/components/sidenav/sidenav.component.scss b/src/app/core/components/sidenav/sidenav.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/core/components/sidenav/sidenav.component.spec.ts b/src/app/core/components/sidenav/sidenav.component.spec.ts
new file mode 100644
index 000000000..0f5064358
--- /dev/null
+++ b/src/app/core/components/sidenav/sidenav.component.spec.ts
@@ -0,0 +1,26 @@
+import { MockComponent } from 'ng-mocks';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavMenuComponent } from '../nav-menu/nav-menu.component';
+
+import { SidenavComponent } from './sidenav.component';
+
+describe('SidenavDComponent', () => {
+  let component: SidenavComponent;
+  let fixture: ComponentFixture<SidenavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SidenavComponent, MockComponent(NavMenuComponent)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SidenavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/components/sidenav/sidenav.component.ts b/src/app/core/components/sidenav/sidenav.component.ts
new file mode 100644
index 000000000..d33c9dc50
--- /dev/null
+++ b/src/app/core/components/sidenav/sidenav.component.ts
@@ -0,0 +1,13 @@
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { NavMenuComponent } from '@core/components/nav-menu/nav-menu.component';
+
+@Component({
+  selector: 'osf-sidenav',
+  imports: [NgOptimizedImage, NavMenuComponent],
+  templateUrl: './sidenav.component.html',
+  styleUrl: './sidenav.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidenavComponent {}

From fbb6e6ef40534e63d4e7048e54599a3cf99876a6 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 5 Jun 2025 10:47:04 +0300
Subject: [PATCH 4/6] fix(contributors): added full screen loader

---
 src/app/app.component.html                    |  1 +
 src/app/app.component.ts                      | 12 +++++-----
 .../full-screen-loader.component.html         | 12 ++++++++++
 .../full-screen-loader.component.scss         |  9 ++++++++
 .../full-screen-loader.component.spec.ts      | 22 +++++++++++++++++++
 .../full-screen-loader.component.ts           | 16 ++++++++++++++
 src/app/shared/components/index.ts            |  1 +
 src/app/shared/services/index.ts              |  1 +
 src/app/shared/services/loader.service.ts     | 17 ++++++++++++++
 9 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 src/app/shared/components/full-screen-loader/full-screen-loader.component.html
 create mode 100644 src/app/shared/components/full-screen-loader/full-screen-loader.component.scss
 create mode 100644 src/app/shared/components/full-screen-loader/full-screen-loader.component.spec.ts
 create mode 100644 src/app/shared/components/full-screen-loader/full-screen-loader.component.ts
 create mode 100644 src/app/shared/services/loader.service.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 94a21db1e..4997c5280 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,3 @@
 <router-outlet />
 <osf-toast></osf-toast>
+<osf-full-screen-loader></osf-full-screen-loader>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0bd55f7d1..a87b340a3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,23 +1,23 @@
-import { Store } from '@ngxs/store';
+import { createDispatchMap } from '@ngxs/store';
 
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { GetCurrentUser } from '@core/store/user';
 
-import { ToastComponent } from './shared/components';
+import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 
 @Component({
   selector: 'osf-root',
-  imports: [RouterOutlet, ToastComponent],
+  imports: [RouterOutlet, ToastComponent, FullScreenLoaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-  #store = inject(Store);
+  actions = createDispatchMap({ getCurrentUser: GetCurrentUser });
 
   ngOnInit(): void {
-    this.#store.dispatch(GetCurrentUser);
+    this.actions.getCurrentUser();
   }
 }
diff --git a/src/app/shared/components/full-screen-loader/full-screen-loader.component.html b/src/app/shared/components/full-screen-loader/full-screen-loader.component.html
new file mode 100644
index 000000000..04ca34a68
--- /dev/null
+++ b/src/app/shared/components/full-screen-loader/full-screen-loader.component.html
@@ -0,0 +1,12 @@
+@if (loaderService.isLoading()) {
+  <div class="container flex justify-content-center">
+    <div class="flex flex-1 align-items-center w-full h-full">
+      <p-progress-spinner
+        class="spinner flex flex-1 align-items-center h-full"
+        strokeWidth="5"
+        fill="transparent"
+        animationDuration=".8s"
+      />
+    </div>
+  </div>
+}
diff --git a/src/app/shared/components/full-screen-loader/full-screen-loader.component.scss b/src/app/shared/components/full-screen-loader/full-screen-loader.component.scss
new file mode 100644
index 000000000..6bb6d941f
--- /dev/null
+++ b/src/app/shared/components/full-screen-loader/full-screen-loader.component.scss
@@ -0,0 +1,9 @@
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--white-60);
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+}
diff --git a/src/app/shared/components/full-screen-loader/full-screen-loader.component.spec.ts b/src/app/shared/components/full-screen-loader/full-screen-loader.component.spec.ts
new file mode 100644
index 000000000..49502c614
--- /dev/null
+++ b/src/app/shared/components/full-screen-loader/full-screen-loader.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FullScreenLoaderComponent } from './full-screen-loader.component';
+
+describe('FullScreenLoaderComponent', () => {
+  let component: FullScreenLoaderComponent;
+  let fixture: ComponentFixture<FullScreenLoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FullScreenLoaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FullScreenLoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/full-screen-loader/full-screen-loader.component.ts b/src/app/shared/components/full-screen-loader/full-screen-loader.component.ts
new file mode 100644
index 000000000..eb7c7a579
--- /dev/null
+++ b/src/app/shared/components/full-screen-loader/full-screen-loader.component.ts
@@ -0,0 +1,16 @@
+import { ProgressSpinner } from 'primeng/progressspinner';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { LoaderService } from '@osf/shared/services';
+
+@Component({
+  selector: 'osf-full-screen-loader',
+  imports: [ProgressSpinner],
+  templateUrl: './full-screen-loader.component.html',
+  styleUrl: './full-screen-loader.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FullScreenLoaderComponent {
+  loaderService = inject(LoaderService);
+}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 3667e644b..9b3862021 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -4,6 +4,7 @@ export { CopyButtonComponent } from './copy-button/copy-button.component';
 export { CustomPaginatorComponent } from './custom-paginator/custom-paginator.component';
 export { EducationHistoryComponent } from './education-history/education-history.component';
 export { EmploymentHistoryComponent } from './employment-history/employment-history.component';
+export { FullScreenLoaderComponent } from './full-screen-loader/full-screen-loader.component';
 export { IconComponent } from './icon/icon.component';
 export { LineChartComponent } from './line-chart/line-chart.component';
 export { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
diff --git a/src/app/shared/services/index.ts b/src/app/shared/services/index.ts
index ecd67f72f..e3aa084cc 100644
--- a/src/app/shared/services/index.ts
+++ b/src/app/shared/services/index.ts
@@ -1,3 +1,4 @@
 export { FiltersOptionsService } from './filters-options.service';
+export { LoaderService } from './loader.service';
 export { SearchService } from './search.service';
 export { ToastService } from './toast.service';
diff --git a/src/app/shared/services/loader.service.ts b/src/app/shared/services/loader.service.ts
new file mode 100644
index 000000000..e86eccf49
--- /dev/null
+++ b/src/app/shared/services/loader.service.ts
@@ -0,0 +1,17 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoaderService {
+  private _isLoading = signal<boolean>(false);
+  readonly isLoading = this._isLoading.asReadonly();
+
+  show() {
+    this._isLoading.set(true);
+  }
+
+  hide() {
+    this._isLoading.set(false);
+  }
+}

From fe341bda62cfe0180847be9bbc180d1ddeb2a6fa Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 5 Jun 2025 10:49:37 +0300
Subject: [PATCH 5/6] fix(contributors): updated social icons

---
 .../components/footer/footer.component.html   |  8 +++--
 .../components/footer/footer.component.scss   | 14 +++++++++
 .../components/footer/footer.component.ts     | 29 +++----------------
 src/app/core/constants/index.ts               |  1 +
 .../core/constants/social-icons.constant.ts   | 28 ++++++++++++++++++
 src/app/shared/models/social-icon.model.ts    |  1 +
 6 files changed, 54 insertions(+), 27 deletions(-)
 create mode 100644 src/app/core/constants/social-icons.constant.ts

diff --git a/src/app/core/components/footer/footer.component.html b/src/app/core/components/footer/footer.component.html
index 521118f98..b11f9dd2b 100644
--- a/src/app/core/components/footer/footer.component.html
+++ b/src/app/core/components/footer/footer.component.html
@@ -8,8 +8,12 @@
 
     <div class="footer-socials flex justify-content-center align-items-center" [class]="isWeb() ? 'm-y-12' : 'm-y-24'">
       @for (icon of socialIcons; track icon.name) {
-        <a [href]="icon.url" [attr.aria-label]="'footer.socials.' + icon.name | translate">
-          <img width="37" height="37" [ngSrc]="'assets/icons/socials/' + icon.name + '.svg'" alt="Social" />
+        <a
+          class="social-link flex align-items-center justify-content-center"
+          [href]="icon.url"
+          [attr.aria-label]="'footer.socials.' + icon.name | translate"
+        >
+          <osf-icon [iconClass]="`${icon.iconName} fa-2xl`"></osf-icon>
         </a>
       }
     </div>
diff --git a/src/app/core/components/footer/footer.component.scss b/src/app/core/components/footer/footer.component.scss
index 35c12aa6b..c6b90a91a 100644
--- a/src/app/core/components/footer/footer.component.scss
+++ b/src/app/core/components/footer/footer.component.scss
@@ -18,6 +18,20 @@
       color: var.$dark-blue-1;
       text-align: center;
     }
+
+    .social-link {
+      background-color: var.$pr-blue-1;
+      border-radius: mix.rem(6px);
+      color: var.$white;
+      padding: mix.rem(6px);
+      width: mix.rem(36px);
+      height: mix.rem(36px);
+
+      &:hover {
+        background-color: var.$pr-blue-3;
+        text-decoration: none;
+      }
+    }
   }
 
   .footer-links {
diff --git a/src/app/core/components/footer/footer.component.ts b/src/app/core/components/footer/footer.component.ts
index 86029ce69..1c0b59ab7 100644
--- a/src/app/core/components/footer/footer.component.ts
+++ b/src/app/core/components/footer/footer.component.ts
@@ -1,16 +1,16 @@
 import { TranslateModule } from '@ngx-translate/core';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 
-import { SocialIcon } from '@osf/shared/models';
+import { SOCIAL_ICONS } from '@osf/core/constants';
+import { IconComponent } from '@osf/shared/components';
 import { IS_WEB } from '@shared/utils';
 
 @Component({
   selector: 'osf-footer',
-  imports: [RouterLink, NgOptimizedImage, TranslateModule],
+  imports: [RouterLink, TranslateModule, IconComponent],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,26 +18,5 @@ import { IS_WEB } from '@shared/utils';
 export class FooterComponent {
   isWeb = toSignal(inject(IS_WEB));
 
-  protected readonly socialIcons: SocialIcon[] = [
-    {
-      name: 'x',
-      url: 'https://x.com/OSFramework',
-      ariaLabel: 'X (formerly Twitter)',
-    },
-    {
-      name: 'facebook',
-      url: 'https://www.facebook.com/CenterForOpenScience/',
-      ariaLabel: 'Facebook',
-    },
-    {
-      name: 'group',
-      url: 'https://groups.google.com/g/openscienceframework',
-      ariaLabel: 'Group',
-    },
-    {
-      name: 'github',
-      url: 'https://github.com/centerforopenscience',
-      ariaLabel: 'GitHub',
-    },
-  ];
+  protected readonly socialIcons = SOCIAL_ICONS;
 }
diff --git a/src/app/core/constants/index.ts b/src/app/core/constants/index.ts
index bfcd12b9b..8547ff127 100644
--- a/src/app/core/constants/index.ts
+++ b/src/app/core/constants/index.ts
@@ -2,4 +2,5 @@ export * from './error-messages';
 export * from './my-projects-table.constants';
 export * from './nav-items.constant';
 export * from './ngxs-states.constant';
+export * from './social-icons.constant';
 export * from './storage-locations.constant';
diff --git a/src/app/core/constants/social-icons.constant.ts b/src/app/core/constants/social-icons.constant.ts
new file mode 100644
index 000000000..a9ffe0b0f
--- /dev/null
+++ b/src/app/core/constants/social-icons.constant.ts
@@ -0,0 +1,28 @@
+import { SocialIcon } from '@osf/shared/models';
+
+export const SOCIAL_ICONS: SocialIcon[] = [
+  {
+    name: 'github',
+    iconName: 'fab fa-github',
+    url: 'https://github.com/centerforopenscience',
+    ariaLabel: 'GitHub',
+  },
+  {
+    name: 'linkedIn',
+    iconName: 'fab fa-linkedin-in',
+    url: 'https://www.linkedin.com/company/center-for-open-science/',
+    ariaLabel: 'Linkedin',
+  },
+  {
+    name: 'bluesky',
+    iconName: 'fab fa-bluesky',
+    url: 'https://bsky.app/profile/cos.io',
+    ariaLabel: 'Bluesky',
+  },
+  {
+    name: 'mastodon',
+    iconName: 'fab fa-mastodon',
+    url: 'https://fosstodon.org/@CenterforOpenScience',
+    ariaLabel: 'Mastodon',
+  },
+];
diff --git a/src/app/shared/models/social-icon.model.ts b/src/app/shared/models/social-icon.model.ts
index 95355cec0..802f82940 100644
--- a/src/app/shared/models/social-icon.model.ts
+++ b/src/app/shared/models/social-icon.model.ts
@@ -1,5 +1,6 @@
 export interface SocialIcon {
   name: string;
   url: string;
+  iconName: string;
   ariaLabel: string;
 }

From 92fc2482f1451c3755951b3ffb0d8eef66894b3d Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 5 Jun 2025 11:02:45 +0300
Subject: [PATCH 6/6] fix(styles): fixed hover state

---
 .../components/header/header.component.html   |  1 +
 .../components/topnav/topnav.component.html   |  2 +-
 src/app/features/home/home.component.html     | 10 ++--
 src/app/features/home/home.component.scss     | 56 ++++++++-----------
 .../resources/resources.component.html        |  5 +-
 src/app/features/search/search.component.html |  2 +-
 src/app/features/search/search.component.scss |  4 ++
 .../my-projects-table.component.html          |  6 ++
 src/assets/i18n/en.json                       |  5 +-
 src/assets/styles/_common.scss                | 11 ++++
 src/assets/styles/overrides/input.scss        |  4 ++
 11 files changed, 63 insertions(+), 43 deletions(-)

diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index c0c26ab32..040f23473 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -3,6 +3,7 @@
 
   <div class="dropdown-button ml-auto">
     <p-button
+      class="custom-dark-hover"
       icon="fas fa-chevron-down"
       iconPos="right"
       [label]="currentUser()?.fullName"
diff --git a/src/app/core/components/topnav/topnav.component.html b/src/app/core/components/topnav/topnav.component.html
index fa4953dde..ef1dadeca 100644
--- a/src/app/core/components/topnav/topnav.component.html
+++ b/src/app/core/components/topnav/topnav.component.html
@@ -11,7 +11,7 @@
   </p-drawer>
 
   <p-button
-    class="topnav-btn flex"
+    class="topnav-btn custom-light-hover flex"
     [icon]="isDrawerVisible() ? 'fas fa-close fa-2xl' : 'fas fa-bars fa-2xl'"
     severity="contrast"
     (onClick)="toggleMenuVisibility()"
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
index a60a82965..75cf94d63 100644
--- a/src/app/features/home/home.component.html
+++ b/src/app/features/home/home.component.html
@@ -7,8 +7,8 @@
     (buttonClick)="createProject()"
   />
 
-  <div class="quick-search-container">
-    <p class="text-center m-b-24">
+  <div class="quick-search-container py-4 px-3 md:px-4">
+    <p class="text-center mb-4 xl:mb-6">
       {{ 'home.loggedIn.dashboard.quickSearch.goTo' | translate }}
       <a routerLink="/my-projects">
         {{ 'home.loggedIn.dashboard.quickSearch.myProjects' | translate }}
@@ -34,12 +34,12 @@
     />
   </div>
 
-  <div class="public-projects-container flex flex-row">
+  <div class="public-projects-container flex flex-row pt-6 pb-4 px-3 md:px-4 xl:py-6">
     <i class="osf-icon-search"></i>
     <h1>{{ 'home.loggedIn.publicProjects.title' | translate }}</h1>
   </div>
 
-  <div class="latest-research-container flex flex-column">
+  <div class="latest-research-container flex flex-column py-6 px-3 md:px-4">
     <div>
       <h1>{{ 'home.loggedIn.latestResearch.title' | translate }}</h1>
       <p class="m-t-12">{{ 'home.loggedIn.latestResearch.subtitle' | translate }}</p>
@@ -48,7 +48,7 @@ <h1>{{ 'home.loggedIn.latestResearch.title' | translate }}</h1>
     <p-button [label]="'home.loggedIn.latestResearch.button' | translate" severity="success" />
   </div>
 
-  <div class="hosting-container flex flex-column">
+  <div class="hosting-container flex flex-column py-6 px-3 md:px-4">
     <div class="text-container">
       <h1>{{ 'home.loggedIn.hosting.title' | translate }}</h1>
       <p class="m-t-12">{{ 'home.loggedIn.hosting.subtitle' | translate }}</p>
diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss
index c2028f374..7d101630f 100644
--- a/src/app/features/home/home.component.scss
+++ b/src/app/features/home/home.component.scss
@@ -4,46 +4,36 @@
 :host {
   display: flex;
   flex-direction: column;
+}
 
-  .home-container {
-    max-width: 100%;
-  }
+.home-container {
+  max-width: 100%;
+}
 
-  .quick-search-container {
-    background-color: var.$white;
-    padding: mix.rem(24px) mix.rem(16px);
+.quick-search-container {
+  background-color: var.$white;
 
-    .text-center {
-      color: var.$dark-blue-1;
-    }
+  .text-center {
+    color: var.$dark-blue-1;
   }
+}
 
-  .public-projects-container {
-    background-color: var.$gradient-1;
-    padding: mix.rem(48px) mix.rem(16px) mix.rem(24px);
-
-    .osf-icon-search {
-      color: var.$dark-blue-1;
-      font-size: mix.rem(32px);
-      margin-right: mix.rem(12px);
-    }
-  }
+.public-projects-container {
+  background-color: var.$gradient-1;
 
-  .latest-research-container {
-    background-color: var.$bg-blue-3;
-    row-gap: mix.rem(24px);
-    padding: mix.rem(48px) mix.rem(16px);
+  .osf-icon-search {
+    color: var.$dark-blue-1;
+    font-size: mix.rem(32px);
+    margin-right: mix.rem(12px);
   }
+}
 
-  .hosting-container {
-    background-color: var.$bg-blue-2;
-    row-gap: mix.rem(24px);
-    padding: mix.rem(48px) mix.rem(16px);
-  }
+.latest-research-container {
+  background-color: var.$bg-blue-3;
+  row-gap: mix.rem(24px);
+}
 
-  .medium {
-    .quick-search-container {
-      padding: mix.rem(12px) mix.rem(36px) mix.rem(24px);
-    }
-  }
+.hosting-container {
+  background-color: var.$bg-blue-2;
+  row-gap: mix.rem(24px);
 }
diff --git a/src/app/features/search/components/resources/resources.component.html b/src/app/features/search/components/resources/resources.component.html
index 4ce009f7a..6bd13ef2f 100644
--- a/src/app/features/search/components/resources/resources.component.html
+++ b/src/app/features/search/components/resources/resources.component.html
@@ -24,6 +24,7 @@ <h3>Sort by:</h3>
     } @else {
       @if (isAnyFilterOptions()) {
         <img
+          class="custom-dark-hover cursor-pointer"
           ngSrc="assets/icons/colored/filter.svg"
           tabindex="0"
           role="button"
@@ -35,13 +36,13 @@ <h3>Sort by:</h3>
         />
       }
       <img
+        class="custom-dark-hover cursor-pointer ml-2"
         ngSrc="assets/icons/colored/sort.svg"
         tabindex="0"
         role="button"
         alt="sort by"
         width="44"
         height="44"
-        class="ml-2"
         (keydown.enter)="openSorting()"
         (click)="openSorting()"
       />
@@ -96,7 +97,7 @@ <h3>Sort by:</h3>
                   tabindex="0"
                   role="button"
                   viewBox="0 0 10 10"
-                  class="switch-icon"
+                  class="switch-icon custom-dark-hover"
                   (click)="switchPage(first())"
                   (keydown.enter)="switchPage(first())"
                 >
diff --git a/src/app/features/search/search.component.html b/src/app/features/search/search.component.html
index c4de0f7e4..da3ae3636 100644
--- a/src/app/features/search/search.component.html
+++ b/src/app/features/search/search.component.html
@@ -1,7 +1,7 @@
 <div class="xl:mt-6 xl:pt-6">
   <div class="search-container mt-5 mx-3 md:mx-4">
     <img
-      class="cursor-pointer"
+      class="custom-dark-hover cursor-pointer"
       ngSrc="assets/icons/colored/question-mark.svg"
       tabindex="0"
       role="button"
diff --git a/src/app/features/search/search.component.scss b/src/app/features/search/search.component.scss
index 3fd6204e8..4af9792a5 100644
--- a/src/app/features/search/search.component.scss
+++ b/src/app/features/search/search.component.scss
@@ -1,6 +1,10 @@
 @use "assets/styles/variables" as var;
 @use "assets/styles/mixins" as mix;
 
+:host {
+  height: 100%;
+}
+
 .search-container {
   position: relative;
 
diff --git a/src/app/shared/components/my-projects-table/my-projects-table.component.html b/src/app/shared/components/my-projects-table/my-projects-table.component.html
index ce4987f97..d1a10600c 100644
--- a/src/app/shared/components/my-projects-table/my-projects-table.component.html
+++ b/src/app/shared/components/my-projects-table/my-projects-table.component.html
@@ -74,6 +74,12 @@
           <td>{{ item.dateModified | date: 'MMM d, y, h:mm a' }}</td>
         </tr>
       </ng-template>
+
+      <ng-template pTemplate="emptymessage">
+        <tr>
+          <td colspan="3" class="text-center">{{ 'project.contributors.table.emptyMessage' | translate }}</td>
+        </tr>
+      </ng-template>
     </p-table>
   }
 </div>
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 1ff8aec96..e54bb218b 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1270,7 +1270,10 @@
       "x": "X (formerly Twitter)",
       "facebook": "Facebook",
       "group": "Group",
-      "github": "GitHub"
+      "github": "GitHub",
+      "linkedin": "Linkedin",
+      "bluesky": "Bluesky",
+      "mastodon": "Mastodon"
     },
     "copyright": "Copyright © 2011-2025"
   },
diff --git a/src/assets/styles/_common.scss b/src/assets/styles/_common.scss
index 7642bd4ab..1f43ae817 100644
--- a/src/assets/styles/_common.scss
+++ b/src/assets/styles/_common.scss
@@ -78,8 +78,19 @@
     color: var.$pr-blue-3;
   }
 }
+
 // ------------------------- Text styles -------------------------
 
 .text-no-transform {
   text-transform: none;
 }
+
+// ------------------------- Universal custom hover state -------------------------
+
+.custom-dark-hover:hover:not(:disabled) {
+  filter: contrast(2);
+}
+
+.custom-light-hover:hover:not(:disabled) {
+  filter: opacity(80%);
+}
diff --git a/src/assets/styles/overrides/input.scss b/src/assets/styles/overrides/input.scss
index 02cee4695..a39511855 100644
--- a/src/assets/styles/overrides/input.scss
+++ b/src/assets/styles/overrides/input.scss
@@ -5,6 +5,10 @@
   color: var.$dark-blue-1;
   background: var.$white;
   border-color: var.$grey-2;
+
+  &:enabled:hover {
+    border-color: var.$pr-blue-1;
+  }
 }
 
 .p-password,