From fcd6184357cda35697f99ea9d5cebae9459c7463 Mon Sep 17 00:00:00 2001 From: brysonbw Date: Fri, 19 Dec 2025 06:29:01 -0700 Subject: [PATCH 1/2] feat(settings form): add exercise category tabs with corresponding multi-select exercise dropdowns --- src/app.js | 240 ++++++++++++++++++++++++--------- src/index.d.js | 6 +- src/pages/home.js | 19 ++- src/shared/styles/tabStyles.js | 45 +++++++ src/stores/exercises.js | 155 --------------------- src/stores/settings.js | 68 ++++++++-- src/utils/constants.js | 112 +++++++++++++++ src/utils/helpers.js | 14 +- 8 files changed, 413 insertions(+), 246 deletions(-) create mode 100644 src/shared/styles/tabStyles.js delete mode 100644 src/stores/exercises.js diff --git a/src/app.js b/src/app.js index d5ae5ca..abcb687 100644 --- a/src/app.js +++ b/src/app.js @@ -7,24 +7,37 @@ import { buttonStyles } from './shared/styles/buttonStyles.js'; import { captionTextStyles } from './shared/styles/captionTextStyles.js'; import { linkStyles } from './shared/styles/linkStyles.js'; import { modalStyles } from './shared/styles/modalStyles.js'; +import { tabStyles } from './shared/styles/tabStyles.js'; import { tooltipStyles } from './shared/styles/tooltipStyles.js'; import { appStore } from './stores/app.js'; -import { DEFAULT_SETTINGS, settingsStore } from './stores/settings.js'; +import { + DEFAULT_SETTINGS, + SETTINGS_KEY, + settingsStore, +} from './stores/settings.js'; import { AUDIO_SOUND, AUDIO_VOLUME, + EXERCISES_BY_CATEGORY_MAP, CLIENT_ERROR_MESSAGE, + EXERCISE_CATEGORY, NOTIFICATION_PERMISSION, SETTINGS_EVENT, STORAGE_KEY_NAMESPACE, } from './utils/constants.js'; -import { isBool, isNum, toSentenceCase } from './utils/helpers.js'; +import { + isBool, + isNum, + isPlainObject, + toSentenceCase, +} from './utils/helpers.js'; import './components/app-top-bar.js'; import './components/header.js'; const AUDIO_SOUNDS = Object.freeze(Object.values(AUDIO_SOUND)); const AUDIO_VOLUMES = Object.freeze(Object.values(AUDIO_VOLUME)); +const EXERCISE_CATEGORIES = Object.freeze(Object.values(EXERCISE_CATEGORY)); const POMODORO_RESOURCE_LINKS = Object.freeze({ WIKI: 'https://en.wikipedia.org/wiki/Pomodoro_Technique', @@ -47,6 +60,7 @@ export class App extends LitElement { _enableNotificationsModalOpen: { type: Boolean, state: true }, _faqModalOpen: { type: Boolean, state: true }, _settingsModalOpen: { type: Boolean, state: true }, + _activeCategoryTab: { type: String, state: true }, }; #router = new Router(this, [ @@ -88,6 +102,8 @@ export class App extends LitElement { this._faqModalOpen = false; /** @type {boolean} */ this._settingsModalOpen = false; + /** @type {import("index.d.js").ExerciseCategory} */ + this._activeCategoryTab = EXERCISE_CATEGORY.UPPER_BODY; } connectedCallback() { @@ -262,8 +278,8 @@ export class App extends LitElement { showTimerInTitle, showMotivationalQuote, enableNotifications, - enableExerciseDisplay, - exercisesCount, + showExercises, + exercisesByCategory, exerciseReps, exerciseSets, pomodoroMinutes, @@ -272,6 +288,14 @@ export class App extends LitElement { audioSound, audioVolume, } = this._settingsFormValues; + const activeCategoryExercises = + EXERCISES_BY_CATEGORY_MAP.get( + /** @type {import("index.d.js").ExerciseCategory} */ ( + this._activeCategoryTab + ) + ) ?? []; + const selectedCategoryExercises = + exercisesByCategory[this._activeCategoryTab] ?? []; return html`