Feat/responsive

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { RouterOutlet } from '@angular/router';
 
 import { GetCurrentUser } from '@core/store/user';
 
-import { ToastComponent } from './shared';
+import { ToastComponent } from './shared/components';
 
 @Component({
   selector: 'osf-root',

src/app/app.config.ts

@@ -12,8 +12,8 @@ import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideZoneChange
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
 
-import { STATES } from '@core/constants/ngxs-states.constant';
-import { provideTranslation } from '@core/helpers/i18n.helper';
+import { STATES } from '@core/constants';
+import { provideTranslation } from '@core/helpers';
 
 import { GlobalErrorHandler } from './core/handlers';
 import { authInterceptor, errorInterceptor } from './core/interceptors';

src/app/app.routes.ts

@@ -2,12 +2,12 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
-import { MyProfileResourceFiltersOptionsState } from '@osf/features/my-profile/components/resources/components/resource-filters/components/filters/store/my-profile-resource-filters-options.state';
-import { MyProfileResourceFiltersState } from '@osf/features/my-profile/components/resources/components/resource-filters/store/my-profile-resource-filters.state';
-import { MyProfileState } from '@osf/features/my-profile/store';
-import { ResourceFiltersOptionsState } from '@osf/features/search/components/resources/components/resource-filters/components/filters/store/resource-filters-options.state';
-import { ResourceFiltersState } from '@osf/features/search/components/resources/components/resource-filters/store/resource-filters.state';
-import { SearchState } from '@osf/features/search/store';
+import { MyProfileResourceFiltersOptionsState } from './features/my-profile/components/filters/store';
+import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
+import { MyProfileState } from './features/my-profile/store';
+import { ResourceFiltersOptionsState } from './features/search/components/filters/store';
+import { ResourceFiltersState } from './features/search/components/resource-filters/store';
+import { SearchState } from './features/search/store';
 
 export const routes: Routes = [
   {
@@ -21,19 +21,22 @@ export const routes: Routes = [
       },
       {
         path: 'sign-up',
-        loadComponent: () => import('./features/auth/sign-up/sign-up.component').then((mod) => mod.SignUpComponent),
+        loadComponent: () =>
+          import('./features/auth/pages/sign-up/sign-up.component').then((mod) => mod.SignUpComponent),
       },
       {
         path: 'forgot-password',
         loadComponent: () =>
-          import('./features/auth/forgot-password/forgot-password.component').then(
+          import('./features/auth/pages/forgot-password/forgot-password.component').then(
             (mod) => mod.ForgotPasswordComponent
           ),
       },
       {
         path: 'reset-password',
         loadComponent: () =>
-          import('./features/auth/reset-password/reset-password.component').then((mod) => mod.ResetPasswordComponent),
+          import('./features/auth/pages/reset-password/reset-password.component').then(
+            (mod) => mod.ResetPasswordComponent
+          ),
       },
       {
         path: 'home',
@@ -42,7 +45,7 @@ export const routes: Routes = [
       {
         path: 'home-logged-out',
         loadComponent: () =>
-          import('@osf/features/home/components/logged-out/home-logged-out.component').then(
+          import('@osf/features/home/pages/home-logged-out/home-logged-out.component').then(
             (mod) => mod.HomeLoggedOutComponent
           ),
       },
@@ -53,12 +56,12 @@ export const routes: Routes = [
       {
         path: 'terms-of-use',
         loadComponent: () =>
-          import('./features/terms-of-use/terms-of-use.component').then((mod) => mod.TermsOfUseComponent),
+          import('./features/static/terms-of-use/terms-of-use.component').then((mod) => mod.TermsOfUseComponent),
       },
       {
         path: 'privacy-policy',
         loadComponent: () =>
-          import('./features/privacy-policy/privacy-policy.component').then((mod) => mod.PrivacyPolicyComponent),
+          import('./features/static/privacy-policy/privacy-policy.component').then((mod) => mod.PrivacyPolicyComponent),
       },
       {
         path: 'meetings',
@@ -117,7 +120,7 @@ export const routes: Routes = [
           {
             path: 'files/:fileId',
             loadComponent: () =>
-              import('@osf/features/project/files/file-detail/file-detail.component').then(
+              import('@osf/features/project/files/components/file-detail/file-detail.component').then(
                 (mod) => mod.FileDetailComponent
               ),
           },
@@ -174,4 +177,8 @@ export const routes: Routes = [
       },
     ],
   },
+  {
+    path: '**',
+    redirectTo: 'home',
+  },
 ];

src/app/core/components/footer/footer.component.html

@@ -1,42 +1,52 @@
-<footer [class.portrait]="isPortrait()" [class.mobile]="isXSmall()">
-  <div class="footer-content">
-    <div class="footer-nav">
-      <div class="footer-links">
+<footer class="footer flex flex-column">
+  <div class="footer-nav flex flex-column-reverse xl:flex-row xl:justify-content-between">
+    <div class="footer-links flex flex-wrap justify-content-center align-items-center">
+      <div class="flex justify-content-center">
         <a href="https://cos.io/">{{ 'footer.links.centerForOpenScience' | translate }}</a>
         <span class="separator">|</span>
+      </div>
+
+      <div class="flex justify-content-center">
         <a>{{ 'footer.links.reproducibilityProjectPsychology' | translate }}</a>
         <span class="separator">|</span>
-        <a>{{ 'footer.links.reproducibilityProjectCancerBiology' | translate }}</a>
       </div>
 
-      <div class="footer-socials">
-        @for (icon of socialIcons; track icon.name) {
-          <a [href]="icon.url" [attr.aria-label]="'footer.socials.' + icon.name | translate">
-            <img
-              alt="social media icon"
-              width="37"
-              height="37"
-              [ngSrc]="'assets/icons/socials/' + icon.name + '.svg'"
-            />
-          </a>
-        }
-      </div>
+      <a>{{ 'footer.links.reproducibilityProjectCancerBiology' | translate }}</a>
     </div>
 
-    <div class="footer-secondary-nav">
-      <div class="footer-links">
-        <a routerLink="/terms-of-use">{{ 'footer.links.termsOfUse' | translate }}</a>
-        <span class="separator">|</span>
-        <a routerLink="/privacy-policy">{{ 'footer.links.privacyPolicy' | translate }}</a>
-        <span class="separator">|</span>
-        <a href="https://status.cos.io/">{{ 'footer.links.status' | translate }}</a>
-        <span class="separator">|</span>
-        <a href="https://developer.osf.io/">{{ 'footer.links.api' | translate }}</a>
-        <span class="separator">|</span>
-        <a href="https://www.cos.io/initiatives/top-guidelines">{{ 'footer.links.topGuidelines' | translate }}</a>
-      </div>
+    <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>
+      }
+    </div>
+  </div>
 
-      <div class="footer-copyright">{{ 'footer.copyright' | translate }}</div>
+  <div
+    class="footer-secondary-nav flex flex-column justify-content-center align-items-center md:flex-row md:justify-content-between"
+    [class.m-t-24]="!isWeb()"
+  >
+    <div class="footer-links flex flex-wrap justify-content-center m-t-4">
+      <a routerLink="/terms-of-use">{{ 'footer.links.termsOfUse' | translate }}</a>
+
+      <span class="separator">|</span>
+
+      <a routerLink="/privacy-policy">{{ 'footer.links.privacyPolicy' | translate }}</a>
+
+      <span class="separator">|</span>
+
+      <a href="https://status.cos.io/">{{ 'footer.links.status' | translate }}</a>
+
+      <span class="separator">|</span>
+
+      <a href="https://developer.osf.io/">{{ 'footer.links.api' | translate }}</a>
+
+      <span class="separator">|</span>
+
+      <a href="https://www.cos.io/initiatives/top-guidelines">{{ 'footer.links.topGuidelines' | translate }}</a>
     </div>
+
+    <div class="flex justify-content-center m-y-12">{{ 'footer.copyright' | translate }}</div>
   </div>
 </footer>

src/app/core/components/footer/footer.component.scss

@@ -2,91 +2,37 @@
 @use "assets/styles/variables" as var;
 
 :host {
-  height: auto;
   display: block;
+  height: auto;
 
   .footer-nav,
   .footer-secondary-nav {
-    @include mix.flex-center-between;
     color: var.$dark-blue-1;
     padding: 0 1.5rem;
 
-    .footer-links,
-    .footer-socials {
-      @include mix.flex-center;
-
-      a {
-        color: var.$dark-blue-1;
-        text-align: center;
-      }
+    .separator {
+      margin: 0 mix.rem(6px);
     }
 
-    .separator {
-      margin: 0 0.5rem;
+    a {
+      color: var.$dark-blue-1;
+      text-align: center;
     }
   }
 
+  .footer-links {
+    gap: mix.rem(6px);
+  }
+
   .footer-nav {
-    height: 4.2rem;
     background-color: var.$bg-blue-3;
 
     .footer-socials {
-      @include mix.flex-center;
-      gap: 0.4285rem;
+      gap: mix.rem(8px);
     }
   }
 
   .footer-secondary-nav {
-    height: 2.6rem;
     background: var.$bg-blue-2;
-
-    .footer-copyright {
-      @include mix.flex-center;
-      text-align: center;
-    }
-  }
-
-  .portrait {
-    .footer-nav {
-      flex-direction: column-reverse;
-      gap: 1.5rem;
-      height: auto;
-      padding: 2.5rem;
-
-      .footer-links {
-        justify-content: space-evenly;
-        width: 100%;
-
-        .separator {
-          margin: 0.1rem;
-        }
-      }
-    }
-
-    .footer-secondary-nav {
-      padding: 0.5rem 2.5rem;
-    }
-  }
-
-  .mobile {
-    .footer-nav {
-      .footer-links {
-        justify-content: center;
-        gap: 0.3rem;
-        flex-wrap: wrap;
-      }
-    }
-
-    .footer-secondary-nav {
-      flex-direction: column;
-      gap: 1rem;
-      height: auto;
-      padding: 1rem;
-
-      .footer-links {
-        row-gap: 1rem;
-        flex-wrap: wrap;
-      }
-    }
   }
 }

src/app/core/components/footer/footer.component.ts

@@ -5,8 +5,8 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 
-import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
-import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { SocialIcon } from '@osf/shared/models';
+import { IS_WEB } from '@shared/utils';
 
 @Component({
   selector: 'osf-footer',
@@ -16,10 +16,7 @@ import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
-  #isPortrait$ = inject(IS_PORTRAIT);
-  #isXSmall$ = inject(IS_XSMALL);
-  isPortrait = toSignal(this.#isPortrait$);
-  isXSmall = toSignal(this.#isXSmall$);
+  isWeb = toSignal(inject(IS_WEB));
 
   protected readonly socialIcons: SocialIcon[] = [
     {

src/app/core/components/index.ts

@@ -0,0 +1,7 @@
+export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+export { FooterComponent } from './footer/footer.component';
+export { HeaderComponent } from './header/header.component';
+export { MainContentComponent } from './main-content/main-content.component';
+export { RootComponent } from './root/root.component';
+export { SidenavComponent } from './sidenav/sidenav.component';
+export { TopnavComponent } from './topnav/topnav.component';

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -10,7 +10,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 
 import { NAV_ITEMS, PROJECT_MENU_ITEMS } from '@core/constants/nav-items.constant';
-import { NavItem } from '@shared/entities/nav-item.interface';
+import { NavItem } from '@osf/shared/models';
 
 @Component({
   selector: 'osf-nav-menu',

src/app/core/components/root/root.component.ts

@@ -10,7 +10,7 @@ import { HeaderComponent } from '@core/components/header/header.component';
 import { MainContentComponent } from '@core/components/main-content/main-content.component';
 import { SidenavComponent } from '@core/components/sidenav/sidenav.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
-import { IS_WEB, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { IS_WEB, IS_XSMALL } from '@shared/utils';
 
 @Component({
   selector: 'osf-root',

src/app/core/constants/index.ts

@@ -0,0 +1,5 @@
+export * from './error-messages';
+export * from './my-projects-table.constants';
+export * from './nav-items.constant';
+export * from './ngxs-states.constant';
+export * from './storage-locations.constant';

src/app/core/constants/my-projects-table.constants.ts

@@ -1,4 +1,4 @@
-import { TableParameters } from '@shared/entities/table-parameters.interface';
+import { TableParameters } from '@osf/shared/models/table-parameters.model';
 
 export const MY_PROJECTS_TABLE_PARAMS: TableParameters = {
   rows: 10,

src/app/core/constants/nav-items.constant.ts

@@ -1,6 +1,6 @@
 import { MenuItem } from 'primeng/api';
 
-import { NavItem } from '@shared/entities/nav-item.interface';
+import { NavItem } from '@osf/shared/models/nav-item.model';
 
 export const NAV_ITEMS: NavItem[] = [
   {

src/app/core/constants/ngxs-states.constant.ts

@@ -10,7 +10,7 @@ import { AccountSettingsState } from '@osf/features/settings/account-settings/st
 import { AddonsState } from '@osf/features/settings/addons/store';
 import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
-import { ProfileSettingsState } from '@osf/features/settings/profile-settings/profile-settings.state';
+import { ProfileSettingsState } from '@osf/features/settings/profile-settings/store/profile-settings.state';
 import { TokensState } from '@osf/features/settings/tokens/store';
 
 export const STATES = [

src/app/core/helpers/http.helper.ts

@@ -1,6 +1,6 @@
 import { Params } from '@angular/router';
 
-import { SortOrder } from '@shared/utils/sort-order.enum';
+import { SortOrder } from '@osf/shared/enums/sort-order.enum';
 
 export const parseQueryFilterParams = (
   params: Params

src/app/core/helpers/index.ts

@@ -0,0 +1,4 @@
+export * from './http.helper';
+export * from './i18n.helper';
+export * from './link-validator.helper';
+export * from './types.helper';

src/app/core/services/user/index.ts → src/app/core/models/index.ts

@@ -1,3 +1,3 @@
+export * from './json-api.model';
 export * from './user.mapper';
 export * from './user.models';
-export * from './user.service';

src/app/core/services/user/user.mapper.ts → src/app/core/models/user.mapper.ts

@@ -4,7 +4,7 @@ import {
   UserSettings,
   UserSettingsGetResponse,
   UserSettingsUpdateRequest,
-} from '@core/services/user/user.models';
+} from '@osf/core/models';
 
 export class UserMapper {
   static fromUserGetResponse(user: UserGetResponse): User {