Merge branch 'develop' into process-client

.gitignore

@@ -93,3 +93,6 @@ sw.*
 .output
 
 .yarn
+
+# Build output of modules
+.build

README.md

@@ -85,7 +85,7 @@ This is an open-source project that welcomes contributions. Please check the [**
   * [`nuxt/google-fonts`](https://github.com/nuxt-community/google-fonts-module) for Google Fonts support
   * [`pinia`](https://pinia.vuejs.org/) for state management
 * [**Tailwind CSS**](https://tailwindcss.com/)
-* [Tabler Icons](https://tabler-icons.io/) through [`vue-tabler-icons`](https://github.com/alex-oleshkevich/vue-tabler-icons)
+* [Tabler Icons](https://tabler-icons.io/)
 * [Workbox](https://github.com/GoogleChrome/workbox) as a PWA service worker
 * [`conventional-changelog/standard-version`](https://github.com/conventional-changelog/standard-version) for automatic changelog generation from [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
 

app.vue

@@ -1,6 +1,57 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import { useHead } from '#app'
+import { useI18n } from 'vue-i18n'
+import { useSchedule } from '~~/stores/schedule'
 import { useSettings } from '~~/stores/settings'
 
+import { useTicker } from '~~/components/ticker'
+import { useWeb } from '~~/platforms/web'
+import { useMobile } from '~~/platforms/mobile'
+
+import TimerSwitch from '@/components/timer/display/_timerSwitch.vue'
+import TimerProgress from '@/components/timer/timerProgress.vue'
+import TimerControls from '@/components/timer/controls/controlsNew.vue'
+import { AppPlatform } from '~~/platforms/platforms'
+
+import { useMobileSettings } from '~~/stores/platforms/mobileSettings'
+
+import Layout from '~/layouts/timer.vue'
+
+// components
+const AppBar = defineAsyncComponent(() => import('@/components/appBar.vue'))
+const TutorialView = defineAsyncComponent(() => import('@/components/tutorial/_tutorialView.vue'))
+
+
+const settingsStore = useSettings()
+const mobileSettingsStore = useMobileSettings()
+const scheduleStore = useSchedule()
+
+const runtimeConfig = useRuntimeConfig()
+
+const { t } = useI18n()
+
+const iconSvg = computed(() => `data:image/svg+xml,
+<svg
+  width="32"
+  height="32"
+  viewBox="0 0 32 32"
+  fill="none"
+  style="color: ${scheduleStore.currentScheduleColour};"
+  xmlns="http://www.w3.org/2000/svg"
+>
+<circle cx="16" cy="16" r="14" fill="currentColor" /></svg>`)
+
+useHead({
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/svg+xml',
+      href: iconSvg
+    }
+  ]
+})
+
 if (!import.meta.server) {
   useHead({
     link: [
@@ -36,20 +87,98 @@ if (!import.meta.server) {
   })
 }
 
-const settingsStore = useSettings()
-const isDarkMode = computed(() => settingsStore.visuals.darkMode)
+useTicker()
 
-watch(isDarkMode, (newDarkMode) => {
-  useHead({
-    bodyAttrs: {
-      class: newDarkMode ? 'dark' : undefined
-    }
-  })
+// Load appropriate platform module based on runtime config
+if (runtimeConfig.public.PLATFORM === AppPlatform.web) {
+  useWeb()
+} else if (runtimeConfig.public.PLATFORM === AppPlatform.mobile) {
+  useMobile()
+}
+
+const state = reactive({
+  timeString: ''
+})
+
+const remainingTimeString = computed(() => {
+  if (scheduleStore.getCurrentTimerState === 3) {
+    return settingsStore.pageTitle.useTickEmoji ? '✔' : t('ready').toLowerCase()
+  }
+
+  return state.timeString
+})
+
+const pageTitle = computed(() => {
+  return scheduleStore.getCurrentItem
+    ? t('section.' + scheduleStore.getCurrentItem.type).toLowerCase()
+    : 'Pomodoro'
+})
+
+const progressBarSchedules = computed(() => {
+  const numSchedules = settingsStore.performance.showProgressBar ? 2 : 1
+  return scheduleStore.getSchedule.slice(0, numSchedules)
 })
 </script>
 
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <Layout>
+    <section class="h-full overflow-hidden duration-300 ease-in dark:text-gray-50">
+      <Title>{{ (remainingTimeString ? `(${remainingTimeString}) ` : '') + pageTitle }}</Title>
+      <!-- Dark mode background override -->
+      <div class="absolute w-full h-full dark:bg-gray-900" />
+      <!-- Progress bar -->
+      <TransitionGroup name="progress-transition" :duration="1000">
+        <TimerProgress v-for="(scheduleItem, index) in progressBarSchedules" :key="scheduleItem.id" :colour="scheduleStore.getScheduleColour[index]"
+          :schedule-entry-id="scheduleItem.id" :background="index === 0" :time-elapsed="scheduleStore.getCurrentItem.timeElapsed"
+          :time-original="scheduleStore.getCurrentItem.length" />
+      </TransitionGroup>
+      <div class="relative flex flex-col items-center justify-center w-full h-full isolate" :style="{
+        'padding-top': `${mobileSettingsStore.padding.top}px`,
+        'padding-bottom': `${mobileSettingsStore.padding.bottom}px`
+      }">
+        <AppBar />
+        <TimerSwitch key="timerswitch" :time-elapsed="scheduleStore.getCurrentItem.timeElapsed"
+          :time-original="scheduleStore.getCurrentItem.length" :timer-state="scheduleStore.timerState"
+          :timer-widget="settingsStore.currentTimer" class="flex-grow" @tick="state.timeString = $event" />
+        <TimerControls class="mb-8" />
+      </div>
+      <client-only>
+        <TutorialView />
+      </client-only>
+    </section>
+  </Layout>
 </template>
+
+<style lang="scss" scoped>
+.timer-background {
+  transition: 300ms ease-in;
+  transition-property: background-color;
+  position: relative;
+  height: 100%;
+}
+
+.schedule-transition-enter-active,
+.schedule-transition-leave-active {
+  transition: transform 300ms ease-out, opacity 200ms ease-out;
+}
+
+.schedule-transition-enter,
+.schedule-transition-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+.progress-transition-leave-to {
+  @apply transform-gpu translate-x-0;
+}
+
+.progress-transition-enter {
+  @apply transform-gpu -translate-x-full;
+}
+</style>
+
+<style>
+body {
+  overscroll-behavior-y: contain;
+}
+</style>

components/appBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { SettingsIcon, ChecklistIcon } from 'vue-tabler-icons'
+import { IconSettings, IconChecklist } from '@tabler/icons-vue'
 import { ButtonImportance, ButtonTheme } from './base/types/button'
 import CButton from '~~/components/base/uiButton.vue'
 import ScheduleView from '@/components/schedule/scheduleDisplay.vue'
@@ -33,7 +33,7 @@ const settingsStore = useSettings()
       :aria-label="$t('appbar.todo')"
       @click="openPanels.todo = !openPanels.todo"
     >
-      <ChecklistIcon class="inline-block" />
+      <IconChecklist size="24" class="inline-block" />
     </CButton>
     <CButton
       circle
@@ -46,7 +46,7 @@ const settingsStore = useSettings()
       inner-class="p-1"
       @click="openPanels.settings = !openPanels.settings"
     >
-      <SettingsIcon class="inline-block" />
+      <IconSettings size="24" class="inline-block" />
     </CButton>
   </div>
 </template>

components/base/optionGroup.vue

@@ -4,7 +4,7 @@ import OptionControl from '~~/components/base/uiOption.vue'
 interface Props {
   choices: Record<string, unknown>,
   translationKey?: string,
-  value: keyof Props['choices'] | null,
+  value?: keyof Props['choices'],
   overrideText?: Record<'title'|'description', Record<string, string>>
 }
 

components/base/uiToggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CheckIcon, XIcon } from 'vue-tabler-icons'
+import { IconCheck, IconX } from '@tabler/icons-vue'
 
 const props = defineProps({
   value: {
@@ -36,14 +36,14 @@ const computedValue = computed({
       <!-- ON component -->
       <div class="transition" :class="[{ 'opacity-0': !props.value }]">
         <slot name="when-on">
-          <CheckIcon size="18" class="opacity-80" />
+          <IconCheck size="18" class="opacity-80" />
         </slot>
       </div>
 
       <!-- OFF component -->
       <div class="transition" :class="[{ 'opacity-0': !!props.value }]">
         <slot name="when-off">
-          <XIcon size="18" class="opacity-80" />
+          <IconX size="18" class="opacity-80" />
         </slot>
       </div>
     </div>

components/settings/aboutTab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CoffeeIcon, BrandGithubIcon, BrandTwitterIcon, BrandFacebookIcon, BrandRedditIcon } from 'vue-tabler-icons'
+import { IconCoffee, IconBrandGithub, IconBrandTwitter, IconBrandFacebook, IconBrandReddit } from '@tabler/icons-vue'
 import { ButtonImportance } from '../base/types/button'
 import Button from '~~/components/base/uiButton.vue'
 import { AppPlatform } from '~~/platforms/platforms'
@@ -39,7 +39,7 @@ const mainStore = useMain()
           inner-class="flex flex-row items-center gap-1 text-slate-50 text-gray-50"
           bg-class="bg-slate-900 dark:bg-slate-700"
         >
-          <BrandGithubIcon />
+          <IconBrandGithub />
           <span v-text="$t('settings.about.source')" />
         </Button>
         <Button
@@ -53,7 +53,7 @@ const mainStore = useMain()
           inner-class="flex flex-row items-center gap-1 text-black"
           bg-class="bg-yellow-300"
         >
-          <CoffeeIcon />
+          <IconCoffee />
           <span v-text="$t('settings.about.support')" />
         </Button>
         <Button
@@ -63,7 +63,7 @@ const mainStore = useMain()
           inner-class="flex flex-row items-center gap-1 text-black"
           bg-class="bg-yellow-300"
         >
-          <CoffeeIcon />
+          <IconCoffee />
           <span v-text="$t('settings.about.support')" />
         </Button>
       </div>
@@ -81,7 +81,7 @@ const mainStore = useMain()
           bg-class="bg-[#1da1f2]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandTwitterIcon :aria-label="$t('support.share.twitter')" size="24" />
+          <IconBrandTwitter :aria-label="$t('support.share.twitter')" size="24" />
         </Button>
         <Button
           link
@@ -94,7 +94,7 @@ const mainStore = useMain()
           bg-class="bg-[#1877f2]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandFacebookIcon :aria-label="$t('support.share.facebook')" size="24" class="translate-x-[-1px]" />
+          <IconBrandFacebook :aria-label="$t('support.share.facebook')" size="24" class="translate-x-[-1px]" />
         </Button>
         <Button
           link
@@ -107,7 +107,7 @@ const mainStore = useMain()
           bg-class="bg-[#ff4500]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandRedditIcon :aria-label="$t('support.share.reddit')" size="24" />
+          <IconBrandReddit :aria-label="$t('support.share.reddit')" size="24" />
         </Button>
       </div>
     </div>

components/settings/settingsPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XIcon as CloseIcon, AdjustmentsIcon as TabIconGeneral, AlarmIcon as TabIconSchedule, ArtboardIcon as TabIconVisuals, InfoCircleIcon as InfoIcon, InfoCircleIcon as TabIconAbout } from 'vue-tabler-icons'
+import { IconX as CloseIcon, IconAdjustments as TabIconGeneral, IconAlarm as TabIconSchedule, IconArtboard as TabIconVisuals, IconInfoCircle as InfoIcon, IconInfoCircle as TabIconAbout } from '@tabler/icons-vue'
 
 import { ButtonImportance } from '../base/types/button'
 import ThemeSettings from './theme/themeSettings.vue'
@@ -53,11 +53,11 @@ notificationsStore.updateEnabled()
           tabindex="0"
           @click="openPanels.settings = false"
         >
-          <CloseIcon :aria-label="$t('settings.buttons.close')" />
+          <CloseIcon size="24"  :aria-label="$t('settings.buttons.close')" />
         </ControlButton>
       </h1>
       <div class="flex-grow overflow-y-auto">
-        <Transition tag="div" name="tab-transition" mode="out-in" class="relative w-full">
+        <Transition tag="div" name="tab-transition" mode="out-in">
           <!-- Core settings -->
           <div v-if="state.activeTab === 1" :key="1" class="settings-tab">
             <OptionGroup
@@ -84,6 +84,7 @@ notificationsStore.updateEnabled()
                   }
                 }"
               />
+              <SettingsItem :type="Control.Option" :choices="{musical: SoundSet.Musical, sharp: SoundSet.Sharp}" path="audio.soundSet" />
             </template>
 
             <template v-if="isMobile">
@@ -137,7 +138,7 @@ notificationsStore.updateEnabled()
             <SettingsItem :type="Control.Time" path="schedule.lengths.shortpause" :min-ms="5000" />
             <SettingsItem :type="Control.Time" path="schedule.lengths.longpause" :min-ms="5000" />
             <div class="flex flex-row items-center px-3 py-4 space-x-2 rounded-lg ring-inset ring ring-primary bg-primary/20 dark:bg-gray-700 dark:text-gray-100">
-              <InfoIcon />
+              <InfoIcon size="24" />
               <span v-text="$t('settings.scheduleMinTime')" />
             </div>
           </div>
@@ -176,22 +177,22 @@ notificationsStore.updateEnabled()
       <div class="flex flex-row flex-none h-20 p-4">
         <TabHeader :active="state.activeTab === 1" :text="$t('settings.tabs.main')" @click="state.activeTab = 1">
           <template #icon>
-            <TabIconGeneral role="presentation" />
+            <TabIconGeneral size="24" role="presentation" />
           </template>
         </TabHeader>
         <TabHeader :active="state.activeTab === 2" :text="$t('settings.tabs.timer')" @click="state.activeTab = 2">
           <template #icon>
-            <TabIconSchedule role="presentation" />
+            <TabIconSchedule size="24" role="presentation" />
           </template>
         </TabHeader>
         <TabHeader :active="state.activeTab === 3" :text="$t('settings.tabs.display')" @click="state.activeTab = 3">
           <template #icon>
-            <TabIconVisuals role="presentation" />
+            <TabIconVisuals size="24" role="presentation" />
           </template>
         </TabHeader>
         <TabHeader :active="state.activeTab === 4" :text="$t('settings.tabs.about')" @click="state.activeTab = 4">
           <template #icon>
-            <TabIconAbout role="presentation" />
+            <TabIconAbout size="24" role="presentation" />
           </template>
         </TabHeader>
       </div>

components/setup/step.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { BellRingingIcon } from 'vue-tabler-icons'
+import { IconBellRinging } from '@tabler/icons-vue'
 
 export default {
   components: {
-    IconAlert: BellRingingIcon
+    IconAlert: IconBellRinging
   },
 
   props: {

components/socialButtons/supportButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Component, PropType } from 'vue'
+import type { Component, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { BrandGithubIcon as GitHub, CoffeeIcon as Coffee } from 'vue-tabler-icons'
+import { IconBrandGithub as GitHub, IconCoffee as Coffee } from '@tabler/icons-vue'
 
 const { t } = useI18n()