update refactor code

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "vsicons.presets.angular": true
+  "editor.formatOnSave": true
 }

apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss

@@ -1,47 +1,5 @@
-:host {
-  display: block;
-  padding: 1rem;
-}
-
-// Target the parent panel
-:host-context(.mat-tab-nav-panel) {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-
-  &::-webkit-scrollbar {
-    /* Chrome, Safari and Opera */
-    display: none;
-  }
-}
-
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-}
+@import '../shared/resource-page';
 
-h1 {
-  margin-bottom: 2rem;
-}
-
-.glossary-list {
-  .mb-4 {
-    margin-bottom: 2rem;
-  }
-
-  h3 {
-    margin-bottom: 0.5rem;
-  }
-
-  p {
-    margin-bottom: 0.5rem;
-  }
-
-  a {
-    color: #007bff;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
+:host {
+  @include resource-page;
 }

apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'gf-resources-glossary',
-  templateUrl: './resources-glossary.component.html',
-  styleUrls: ['./resources-glossary.component.scss']
+  styleUrls: ['./resources-glossary.component.scss'],
+  templateUrl: './resources-glossary.component.html'
 })
 export class ResourcesGlossaryPageComponent {
   public glossaryItems = [

apps/client/src/app/pages/resources/guides/resources-guides.component.scss

@@ -1,43 +1,5 @@
-:host {
-  display: block;
-  color: rgb(var(--dark-primary-text));
-
-  .container {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
-  h1 {
-    margin-bottom: 2rem;
-  }
-
-  .guides-list {
-    .mb-4 {
-      margin-bottom: 2rem;
-    }
-
-    h3 {
-      margin-top: 0;
-      margin-bottom: 0.5rem;
-    }
+@import '../shared/resource-page';
 
-    p {
-      margin-bottom: 0.5rem;
-    }
-
-    a {
-      color: rgba(var(--palette-primary-500), 1);
-      font-weight: 500;
-      text-decoration: none;
-
-      &:hover {
-        color: rgba(var(--palette-primary-300), 1);
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
-:host-context(.theme-dark) {
-  color: rgb(var(--light-primary-text));
+:host {
+  @include resource-page;
 }

apps/client/src/app/pages/resources/guides/resources-guides.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'gf-resources-guides',
-  templateUrl: './resources-guides.component.html',
-  styleUrls: ['./resources-guides.component.scss']
+  styleUrls: ['./resources-guides.component.scss'],
+  templateUrl: './resources-guides.component.html'
 })
 export class ResourcesGuidesComponent {
   public guides = [

apps/client/src/app/pages/resources/markets/resources-markets.component.html

@@ -1,8 +1,6 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
   <h1 class="h3 mb-4 text-center" i18n>Markets</h1>
-      <div class="market-resources-list">
+  <div class="market-resources">
     @for (resource of marketResources; track resource) {
       <div class="mb-4">
         <h3 class="h5 mt-0">{{ resource.title }}</h3>
@@ -11,6 +9,4 @@
       </div>
     }
   </div>
-    </div>
-  </div>
 </div>

apps/client/src/app/pages/resources/markets/resources-markets.component.scss

@@ -1,54 +1,5 @@
-:host {
-  color: rgb(var(--dark-primary-text));
-  display: block;
-
-  .market-resources {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-
-    .mat-mdc-card {
-      height: 100%;
-      transition: border-color 0.3s ease;
-
-      &:hover {
-        border-color: var(--gf-theme-primary-500);
-      }
-
-      .mat-mdc-card-header {
-        .mat-mdc-card-title {
-          font-size: 1.1rem;
-        }
-      }
-
-      .mat-mdc-card-content {
-        font-size: 0.9rem;
-      }
+@import '../shared/resource-page';
 
-      .mat-mdc-card-actions {
-        padding: 0 1rem 1rem;
-      }
-
-      a {
-        color: rgba(var(--palette-primary-500), 1);
-        font-weight: 500;
-        text-decoration: none;
-
-        &:hover {
-          color: rgba(var(--palette-primary-300), 1);
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
-
-:host-context(.theme-dark) {
-  color: rgb(var(--light-primary-text));
-
-  .market-resources {
-    .mat-mdc-card {
-      background-color: rgba(var(--palette-background-card-dark), 1);
-    }
-  }
+:host {
+  @include resource-page;
 }

apps/client/src/app/pages/resources/markets/resources-markets.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'gf-resources-markets',
-  templateUrl: './resources-markets.component.html',
-  styleUrls: ['./resources-markets.component.scss']
+  styleUrls: ['./resources-markets.component.scss'],
+  templateUrl: './resources-markets.component.html'
 })
 export class ResourcesMarketsComponent {
   public marketResources = [

apps/client/src/app/pages/resources/overview/resources-overview.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h1 class="h3 mb-4 text-center" i18n>Resources Overview</h1>
+      <h1 class="h3 mb-4 text-center" i18n>Resources</h1>
       <div class="overview-list">
         @for (item of overviewItems; track item) {
           <div class="mb-4">

apps/client/src/app/pages/resources/overview/resources-overview.component.scss

@@ -1,41 +1,7 @@
-:host {
-  display: block;
-  color: rgb(var(--dark-primary-text));
-}
-
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-h1 {
-  margin-bottom: 2rem;
-}
+@import '../shared/resource-page';
 
-.overview-list {
-  .mb-4 {
-    margin-bottom: 2rem;
-  }
-
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-  }
-
-  p {
-    margin-bottom: 0.5rem;
-  }
-
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-    font-weight: 500;
-    text-decoration: none;
-
-    &:hover {
-      color: rgba(var(--palette-primary-300), 1);
-      text-decoration: underline;
-    }
-  }
+:host {
+  @include resource-page;
 }
 
 :host-context(.theme-dark) {

apps/client/src/app/pages/resources/overview/resources-overview.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'gf-resources-overview',
-  templateUrl: './resources-overview.component.html',
-  styleUrls: ['./resources-overview.component.scss']
+  styleUrls: ['./resources-overview.component.scss'],
+  templateUrl: './resources-overview.component.html'
 })
 export class ResourcesOverviewComponent {
   public overviewItems = [

apps/client/src/app/pages/resources/resources-page-routing.module.ts

@@ -3,10 +3,6 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-// import { ResourcesGlossaryPageComponent } from './glossary/resources-glossary.component';
-// import { ResourcesGuidesComponent } from './guides/resources-guides.component';
-// import { ResourcesMarketsComponent } from './markets/resources-markets.component';
-// import { ResourcesOverviewComponent } from './overview/resources-overview.component';
 import { ResourcesPageComponent } from './resources-page.component';
 
 const routes: Routes = [
@@ -15,6 +11,13 @@ const routes: Routes = [
     component: ResourcesPageComponent,
     canActivate: [AuthGuard],
     children: [
+      {
+        path: '',
+        loadChildren: () =>
+          import('./overview/resources-overview.module').then(
+            (m) => m.ResourcesOverviewModule
+          )
+      },
       {
         path: 'guides',
         loadChildren: () =>
@@ -35,13 +38,6 @@ const routes: Routes = [
           import('./glossary/resources-glossary.module').then(
             (m) => m.ResourcesGlossaryPageModule
           )
-      },
-      {
-        path: '',
-        loadChildren: () =>
-          import('./overview/resources-overview.module').then(
-            (m) => m.ResourcesOverviewModule
-          )
       }
     ]
   }

apps/client/src/app/pages/resources/resources-page.component.ts

@@ -25,13 +25,21 @@ export class ResourcesPageComponent implements OnInit {
       label: $localize`Overview`,
       iconName: 'information-circle-outline'
     },
-    { path: 'guides', label: $localize`Guides`, iconName: 'book-outline' },
+    {
+      path: 'guides',
+      label: $localize`Guides`,
+      iconName: 'book-outline'
+    },
+    {
+      path: 'glossary',
+      label: $localize`Glossary`,
+      iconName: 'list-outline'
+    },
     {
       path: 'markets',
       label: $localize`Markets`,
       iconName: 'trending-up-outline'
-    },
-    { path: 'glossary', label: $localize`Glossary`, iconName: 'list-outline' }
+    }
   ];
 
   private unsubscribeSubject = new Subject<void>();

apps/client/src/app/pages/resources/resources-page.module.ts

@@ -10,8 +10,8 @@ import { ResourcesPageComponent } from './resources-page.component';
   declarations: [ResourcesPageComponent],
   imports: [
     CommonModule,
-    ResourcesPageRoutingModule,
     MatTabsModule,
+    ResourcesPageRoutingModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

apps/client/src/app/pages/resources/resources-page.scss

@@ -1,77 +1,17 @@
+@import './shared/resource-page';
+
 :host {
-  color: rgb(var(--dark-primary-text));
   display: flex;
   flex-direction: row;
   height: 100%;
-
-  // Add this to ensure proper ordering
-  nav {
-    order: 1; // This will force the nav to be first
-  }
-
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-    font-weight: 500;
-
-    &:hover {
-      color: rgba(var(--palette-primary-300), 1);
-    }
-  }
 }
 
-:host-context(.theme-dark) {
-  color: rgb(var(--light-primary-text));
-}
-
-.mat-tab-nav-bar {
-  border-top: none;
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
-  flex-direction: column;
-  width: 240px;
-}
-
-.mat-tab-link {
-  flex-direction: row;
-  justify-content: flex-start;
-  height: 48px;
-  padding: 0 16px;
-  min-width: auto;
-
-  ion-icon {
-    font-size: 24px;
-  }
-
-  .d-none {
-    margin-left: 8px;
-  }
+::ng-deep .resource-content {
+  @include resource-page;
 }
 
 @media (max-width: 599px) {
   :host {
     flex-direction: column-reverse;
   }
-
-  .mat-tab-nav-bar {
-    width: 100%;
-    border-right: none;
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
-  .mat-tab-link {
-    flex-direction: column;
-    height: auto;
-    padding: 8px 16px;
-
-    ion-icon {
-      font-size: 28px;
-    }
-  }
-}
-
-.flex-grow-1 {
-  flex-grow: 1;
-}
-
-.overflow-auto {
-  overflow: auto;
 }

apps/client/src/app/pages/resources/shared/resource-page.scss

@@ -0,0 +1,25 @@
+@mixin resource-page {
+  display: block;
+  padding: 1rem;
+  color: rgb(var(--dark-primary-text));
+
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+      text-decoration: underline;
+    }
+  }
+
+  :host-context(.theme-dark) & {
+    color: rgb(var(--light-primary-text));
+  }
+}