feat(settings form): add exercise category tabs with corresponding multi-select exercise dropdowns

src/index.d.js

@@ -10,6 +10,8 @@
 
 /** @typedef {[ExerciseCategory, readonly string[]]} ExerciseEntries */
 
+/** @typedef {Partial<Record<ExerciseCategory, string[]>>} ExerciseByCategory */
+
 /**
  * @typedef {Record<string, string>} Exercise
  * @property {string} category
@@ -21,10 +23,10 @@
  * @property {boolean} showTimerInTitle
  * @property {boolean} showMotivationalQuote
  * @property {boolean} enableNotifications
- * @property {boolean} enableExerciseDisplay
+ * @property {boolean} showExercises
+ * @property {ExerciseByCategory} exercisesByCategory
  * @property {number} exerciseReps
  * @property {number} exerciseSets
- * @property {number} exercisesCount
  * @property {number} pomodoroMinutes
  * @property {number} shortBreakMinutes
  * @property {number} longBreakMinutes

src/pages/home.js

@@ -4,7 +4,6 @@ import { notificationApiService } from '../services/notification-api.service.js'
 import { webAudioApiService } from '../services/web-audio-api.service.js';
 import { buttonStyles } from '../shared/styles/buttonStyles.js';
 import { checkboxStyles } from '../shared/styles/checkboxStyles.js';
-import ExercisesStore from '../stores/exercises.js';
 import { DEFAULT_SETTINGS, settingsStore } from '../stores/settings.js';
 import {
   AUDIO_VOLUME,
@@ -137,7 +136,7 @@ export class HomePage extends LitElement {
     _motivationalQuote: { type: String, state: true },
     _selectedPomodoroMode: { type: String, state: true },
     _exercises: { type: Array, state: true },
-    _showExercises: { type: Array, state: true },
+    _showExercises: { type: Boolean, state: true },
     _settings: { type: Object, state: true },
     _minutes: { type: Number, state: true },
     _seconds: { type: Number, state: true },
@@ -212,12 +211,8 @@ export class HomePage extends LitElement {
   }
 
   render() {
-    const {
-      enableExerciseDisplay,
-      exerciseReps,
-      exerciseSets,
-      showMotivationalQuote,
-    } = this._settings;
+    const { showExercises, exerciseReps, exerciseSets, showMotivationalQuote } =
+      this._settings;
 
     return html` <div class="container">
       <section id="pomodoroModes">
@@ -257,7 +252,7 @@ export class HomePage extends LitElement {
             <h2 id="quote">${this._motivationalQuote}</h2>
           </section>`
         : nothing}
-      ${this._showExercises && enableExerciseDisplay
+      ${this._showExercises && showExercises
         ? html`<section id="exercises">
             <div class="exercise-container">
               <h2>Exercises</h2>
@@ -447,7 +442,6 @@ export class HomePage extends LitElement {
   #complete() {
     const {
       enableNotifications,
-      exercisesCount,
       showMotivationalQuote,
       audioSound,
       audioVolume,
@@ -475,7 +469,8 @@ export class HomePage extends LitElement {
 
     if (isPomodoroModeSelected) {
       this._showExercises = true;
-      this._exercises = ExercisesStore.getRandomExercises(exercisesCount);
+      // TODO: Exercises based on settings form selections
+      this._exercises = [{ category: 'fullBody', name: 'Jumping jacks' }];
     }
   }
 

src/shared/styles/tabStyles.js

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+
+const tabStyles = css`
+  .tabs {
+    display: flex;
+    width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .tabs button.tab-item {
+    flex: 1 1 0;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    border: none;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    background-color: #1f1f27;
+    color: #c0c0c8;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+    border-radius: 0;
+    border-right: 0.0625rem solid #2c2c35;
+  }
+
+  .tabs button.tab-item:last-child {
+    border-right: none;
+  }
+
+  .tabs button.tab-item[data-tab-active='true'] {
+    font-weight: 500;
+    background-color: #3b3b48;
+    color: #ffffff;
+  }
+
+  .tabs button.tab-item:hover {
+    background-color: #353540;
+  }
+`;
+
+export { tabStyles };

src/stores/settings.js

@@ -4,16 +4,19 @@ import {
   AUDIO_VOLUME,
   CLIENT_ERROR_MESSAGE,
   DEFAULT_POMODORO_TIMES,
+  EXERCISES_BY_CATEGORY_MAP,
   STORAGE_KEY_NAMESPACE,
 } from '../utils/constants.js';
-import { isBool, isNum } from '../utils/helpers.js';
+import { isBool, isNum, isPlainObject } from '../utils/helpers.js';
+
+/** @typedef {boolean | number | import('index.d.js').ExerciseByCategory} SettingsStorageValue */
 
 /** @type {import('index.d.js').Settings} */
 export const DEFAULT_SETTINGS = Object.freeze({
-  enableExerciseDisplay: true,
+  showExercises: true,
   exerciseReps: 5,
   exerciseSets: 1,
-  exercisesCount: 1,
+  exercisesByCategory: {},
   enableNotifications: false,
   showTimerInTitle: false,
   showMotivationalQuote: true,
@@ -40,33 +43,58 @@ class SettingsStore extends EventTarget {
     const settingsMap = new Map(Object.entries(this.#settings));
 
     for (const [key, defaultValue] of settingsMap.entries()) {
-      const storedValue = /** @type {boolean | number | null} */ (
-        this.#settingsStorage.get(key)
-      );
+      const storedValue = this.#settingsStorage.get(key);
 
-      let value = /** @type {boolean | number} */ (
+      let value = /** @type {SettingsStorageValue} */ (
         storedValue === null
           ? defaultValue
           : (isBool(defaultValue) && isBool(storedValue)) ||
-              (isNum(defaultValue) && isNum(storedValue))
+              (isNum(defaultValue) && isNum(storedValue)) ||
+              (isPlainObject(defaultValue) && isPlainObject(storedValue))
             ? storedValue
             : defaultValue
       );
 
-      if (key === 'audioSound' && typeof value === 'number') {
+      // Additional checks for specific settings
+      if (key === 'audioSound') {
         const matchingAudioSound = Object.values(AUDIO_SOUND).find(
           ({ ID }) => ID === value
         );
         if (matchingAudioSound === undefined) {
           value = defaultValue;
         }
-      } else if (key === 'audioVolume' && typeof value === 'number') {
+      } else if (key === 'audioVolume') {
         const matchingAudioVolume = Object.values(AUDIO_VOLUME).find(
           (volume) => volume === value
         );
         if (matchingAudioVolume === undefined) {
           value = defaultValue;
         }
+      } else if (key === 'exercises' && Object.keys(value).length > 0) {
+        const exercisesByCategoryValue =
+          /** @type {import('index.d.js').ExerciseByCategory} */ (value);
+
+        value = Object.fromEntries(
+          Object.entries(exercisesByCategoryValue)
+            .filter(
+              ([category, exercises]) =>
+                EXERCISES_BY_CATEGORY_MAP.has(
+                  /** @type {import('index.d.js').ExerciseCategory} */ (
+                    category
+                  )
+                ) && Array.isArray(exercises)
+            )
+            .map(([category, exercises]) => [
+              category,
+              exercises.filter((exercise) =>
+                EXERCISES_BY_CATEGORY_MAP.get(
+                  /** @type {import('index.d.js').ExerciseCategory} */ (
+                    category
+                  )
+                )?.includes(exercise)
+              ),
+            ])
+        );
       }
 
       settingsMap.set(key, value);
@@ -89,11 +117,11 @@ class SettingsStore extends EventTarget {
     const settingsMap = new Map(Object.entries(this.#settings));
 
     for (const [key, defaultValue] of Object.entries(DEFAULT_SETTINGS)) {
-      const val = /** @type {boolean | number} */ (
-        valueMap.has(key) ? valueMap.get(key) : defaultValue
-      );
+      const val = valueMap.has(key) ? valueMap.get(key) : defaultValue;
 
-      const newValue = isBool(val) || isNum(val) ? val : defaultValue;
+      const newValue = /** @type {SettingsStorageValue} */ (
+        isBool(val) || isNum(val) || isPlainObject(val) ? val : defaultValue
+      );
 
       settingsMap.set(key, newValue);
       this.#settingsStorage.set(key, newValue);