feat: Themes feature redesign

.agents/AGENTS.md

@@ -0,0 +1,3 @@
+# Project Rules
+
+- **Git Operations**: Always ask the user for explicit confirmation/permission before executing any `git push` command (including pushes to remote branches or pull requests).

pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+allowBuilds:
+  '@firebase/util': set this to true or false
+  '@parcel/watcher': set this to true or false
+  core-js: set this to true or false
+  esbuild: set this to true or false
+  lmdb: set this to true or false
+  msgpackr-extract: set this to true or false
+  protobufjs: set this to true or false

src/app/home/course/course.page.html

@@ -8,6 +8,9 @@
                 <small>{{ (courseProgress.duration - courseProgress.viewed) / 3600 | number:'1.0-1' }} hours left</small>
             }
         </ion-title>
+        <ion-buttons slot="end">
+            <app-theme-dropdown></app-theme-dropdown>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 

src/app/home/course/course.page.scss

@@ -3,7 +3,7 @@ span a {
 }
 
 ion-title small {
-  color: gray;
+  color: var(--flick-subtext-color, gray);
 }
 
 .e-learning-tag {
@@ -12,26 +12,17 @@ ion-title small {
 
 span.date {
   font-family: monospace, monospace;
-  color: darkblue;
-  @media (prefers-color-scheme: dark) {
-    color: lightblue;
-  }
+  color: var(--flick-date-color, darkblue);
 }
 
 span.date-divider {
   margin: 0 0.2rem 0 0.2rem;
   opacity: 0.5;
-  color: darkblue;
-  @media (prefers-color-scheme: dark) {
-    color: lightblue;
-  }
+  color: var(--flick-date-divider-color, darkblue);
 }
 
 .time-info {
-  color: darkgoldenrod;
-  @media (prefers-color-scheme: dark) {
-    color: yellow;
-  }
+  color: var(--flick-time-info-color, darkgoldenrod);
 }
 
 .ion-color .check-icon {

src/app/home/course/course.page.ts

@@ -10,6 +10,7 @@ import {
     AlertController,
     IonBackButton,
     IonButton,
+    IonButtons,
     IonCard,
     IonCardContent,
     IonCardHeader,
@@ -39,6 +40,8 @@ import type Player from 'video.js/dist/types/player';
 import {ulid} from 'ulid';
 import {AsyncPipe, DatePipe, DecimalPipe, NgClass} from '@angular/common';
 import {ModalEvaluationComponent} from './modal-evaluation.component';
+import {ThemeService} from '../../theme.service';
+import {ThemeDropdownComponent} from '../../shared/theme-dropdown.component';
 
 @Component({
     selector: 'app-course',
@@ -70,6 +73,8 @@ import {ModalEvaluationComponent} from './modal-evaluation.component';
         AsyncPipe,
         DecimalPipe,
         DatePipe,
+        IonButtons,
+        ThemeDropdownComponent,
     ]
 })
 export class CoursePage implements OnInit, AfterViewInit, OnDestroy {
@@ -79,6 +84,7 @@ export class CoursePage implements OnInit, AfterViewInit, OnDestroy {
     private alertController = inject(AlertController);
     private sanitizer = inject(DomSanitizer);
     private modalCtrl = inject(ModalController);
+    themeService = inject(ThemeService);
 
     @ViewChild('videoPlayer') videoPlayerElement: ElementRef;
     videoPlayer: Player;

src/app/home/home.page.html

@@ -4,9 +4,10 @@
             MDCU Recorded Lecture
         </ion-title>
         <ion-buttons slot="end">
+            <app-theme-dropdown></app-theme-dropdown>
             <ion-button fill="outline" color="secondary" (click)="logout()">
                 <span class="ion-hide-sm-down text-sign-out">Sign out</span>
-                <ion-icon name="log-out-outline"></ion-icon>
+                <ion-icon slot="end" name="log-out-outline"></ion-icon>
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -34,7 +35,7 @@ <h2>{{ response.last_played.video.course.name }}</h2>
                 <ion-row>
                     @for (folder of Object.keys(response.years); track folder) {
                         <ion-col size-xs="12" size-sm="6" size-md="4" size-lg="3" size-xl="2">
-                            <ion-card [routerLink]="folder" [ngStyle]="{'background-color': colorByFolderName(folder)}"
+                            <ion-card [routerLink]="folder" [ngStyle]="{'background-color': getCardColor(folder)}"
                                       class="ion-text-center hover-card">
                                 <ion-card-header>
                                     <ion-card-title>{{ folder }}</ion-card-title>

src/app/home/home.page.scss

@@ -14,13 +14,7 @@ ion-card-title {
 }
 
 .course-name {
-  color: #222222;
-}
-
-@media (prefers-color-scheme: dark) {
-  .course-name {
-    color: #cccccc;
-  }
+  color: var(--flick-card-title-color, #222222);
 }
 
 .center-text {
@@ -33,21 +27,14 @@ ion-card-title {
 }
 
 .small-text {
-  color: #aaaaaa;
+  color: var(--flick-subtext-color, #aaaaaa);
   a {
-    color: #bbbbbb;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    color: #555555;
-    a {
-      color: #666666;
-    }
+    color: var(--flick-subtext-link-color, #bbbbbb);
   }
 }
 
 .hover-card {
-  transition: transform 0.2s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
   cursor: pointer;
 }
 
@@ -57,12 +44,12 @@ ion-card-title {
 
 p {
   padding: 0 1.5rem 0 1.5rem;
-  color: gray;
+  color: var(--flick-subtext-color, gray);
   text-align: center;
 
   ion-icon {
     margin: 0 0.6em;
-    color: gray;
+    color: var(--flick-subtext-color, gray);
   }
 
   a {
@@ -72,4 +59,22 @@ p {
 
 .text-sign-out {
   margin-right: 0.5rem;
+}
+
+:host-context(body.pink-theme) {
+  ion-card-title {
+    text-shadow: 0 1px 3px rgba(136, 14, 79, 0.3);
+  }
+
+  .hover-card {
+    box-shadow: 0 2px 12px rgba(233, 30, 144, 0.2);
+
+    &:hover {
+      box-shadow: 0 6px 20px rgba(233, 30, 144, 0.35);
+    }
+  }
+
+  .center-spinner {
+    color: var(--ion-color-primary);
+  }
 }

src/app/home/home.page.ts

@@ -3,9 +3,11 @@ import {Observable} from 'rxjs';
 import {CourseListResponse, Lecture, ManService} from '../man.service';
 import {Router, RouterLink} from '@angular/router';
 import {AuthService} from '../auth.service';
-import {colorByFolderName} from '../../helpers';
+import {ThemeService} from '../theme.service';
+import {colorByFolderName, colorByFolderNamePink} from '../../helpers';
 import {addIcons} from "ionicons";
 import {logOutOutline} from "ionicons/icons";
+import {ThemeDropdownComponent} from '../shared/theme-dropdown.component';
 import {
     IonButton,
     IonButtons,
@@ -32,12 +34,13 @@ import {AsyncPipe, NgStyle} from '@angular/common';
     selector: 'app-home',
     templateUrl: 'home.page.html',
     styleUrls: ['home.page.scss'],
-    imports: [IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonGrid, IonRow, IonCol, IonCard, RouterLink, NgStyle, IonCardHeader, IonCardTitle, AsyncPipe, IonCardContent, IonItem, IonLabel, IonText, IonSpinner]
+    imports: [IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonGrid, IonRow, IonCol, IonCard, RouterLink, NgStyle, IonCardHeader, IonCardTitle, AsyncPipe, IonCardContent, IonItem, IonLabel, IonText, IonSpinner, ThemeDropdownComponent]
 })
 export class HomePage implements OnInit {
     private manService = inject(ManService);
     private router = inject(Router);
     private authService = inject(AuthService);
+    themeService = inject(ThemeService);
 
     response$: Observable<CourseListResponse>;
 
@@ -56,6 +59,13 @@ export class HomePage implements OnInit {
     }
 
     protected readonly colorByFolderName = colorByFolderName;
+    protected readonly colorByFolderNamePink = colorByFolderNamePink;
+
+    getCardColor(folder: string): string {
+        return this.themeService.isPinkMode ? colorByFolderNamePink(folder) : colorByFolderName(folder);
+    }
+
+
 
     goToLastVideo(lastVideo: Lecture) {
         return this.router.navigate(['home', 'course', lastVideo.course.id]);

src/app/home/list/list.page.html

@@ -2,8 +2,11 @@
   <ion-toolbar>
     <ion-back-button slot="start" defaultHref="/home"></ion-back-button>
     <ion-title>
-      <span [ngStyle]="{'background-color': colorByFolderName(year)}">{{ year || 'Loading'}}</span>
+      <span [ngStyle]="{'background-color': getYearColor()}">{{ year || 'Loading'}}</span>
     </ion-title>
+    <ion-buttons slot="end">
+      <app-theme-dropdown></app-theme-dropdown>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

src/app/home/list/list.page.scss

@@ -7,3 +7,18 @@ ion-label {
   text-overflow: initial !important;
   white-space: normal !important;
 }
+
+/* Pink Theme overrides */
+
+:host-context(body.pink-theme) {
+  ion-title > span {
+    text-shadow: 0 1px 3px rgba(136, 14, 79, 0.4);
+  }
+
+  ion-item {
+    --ion-item-border-color: #F48FB1;
+  }
+}
+
+
+

src/app/home/list/list.page.ts

@@ -3,24 +3,30 @@ import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import {EMPTY, Observable} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
 import {ManService} from '../../man.service';
-import {colorByFolderName} from '../../../helpers';
-import {IonBackButton, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar} from '@ionic/angular/standalone';
+import {colorByFolderName, colorByFolderNamePink} from '../../../helpers';
+import {ThemeService} from '../../theme.service';
+import {ThemeDropdownComponent} from '../../shared/theme-dropdown.component';
+import {IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar} from '@ionic/angular/standalone';
 import {AsyncPipe, NgStyle} from '@angular/common';
 
 @Component({
     selector: 'app-list',
     templateUrl: './list.page.html',
     styleUrls: ['./list.page.scss'],
-    imports: [IonHeader, IonToolbar, RouterLink, IonBackButton, IonTitle, NgStyle, IonContent, IonList, IonItem, IonLabel, AsyncPipe]
+    imports: [IonHeader, IonToolbar, RouterLink, IonBackButton, IonTitle, NgStyle, IonContent, IonList, IonItem, IonLabel, AsyncPipe, IonButtons, ThemeDropdownComponent]
 })
 export class ListPage implements OnInit {
     private route = inject(ActivatedRoute);
     private router = inject(Router);
     private manService = inject(ManService);
+    themeService = inject(ThemeService);
 
     year: string;
     list$: Observable<{ name: string, is_remote: boolean, id: number, link: string[] }[]>;
 
+    constructor() {
+    }
+
     ngOnInit() {
         this.list$ = this.route.paramMap.pipe(
             switchMap(s => {
@@ -40,5 +46,11 @@ export class ListPage implements OnInit {
         );
     }
 
+    getYearColor(): string {
+        return this.themeService.isPinkMode ? colorByFolderNamePink(this.year) : colorByFolderName(this.year);
+    }
+
+
+
     protected readonly colorByFolderName = colorByFolderName;
 }