🌐 (app) init 18n in en and french

src/components/ChilledMusic.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chilled-music">
     <transition name="fade">
-      <img v-show="!ready" src="@/assets/loader.svg" alt="loading" />
+      <img v-show="!ready" src="@/assets/loader.svg" :alt="$t('loading')" />
     </transition>
     <section v-show="false">
       <div
@@ -114,3 +114,14 @@ img {
   animation: rotating 4s linear infinite;
 }
 </style>
+
+<i18n>
+{
+  "en": {
+    "loading": "loading..."
+  },
+  "fr": {
+    "loading": "chargement..."
+  }
+}
+</i18n>

src/components/IntervalInput.vue

@@ -1,23 +1,30 @@
 <template>
   <div class="interval-input">
-    <transition name="fade" mode="out-in">
-      <button v-if="editable" class="spacer" @click="minus">
-        <img key="minus" src="@/assets/minus.svg" alt="minus" />
-      </button>
-      <div v-else class="spacer"></div>
-    </transition>
-    <h3>{{ label }}</h3>
-    <transition name="fade" mode="out-in">
-      <button v-if="editable" class="spacer" @click="plus">
-        <img key="plus" src="@/assets/plus.svg" alt="plus" />
-      </button>
-      <div v-else class="spacer"></div>
-    </transition>
+    <div class="button-container minus">
+      <transition name="fade" mode="out-in">
+        <button v-if="editable" class="spacer" @click="minus">
+          <img key="minus" src="@/assets/minus.svg" alt="minus" />
+        </button>
+        <div v-else class="spacer"></div>
+      </transition>
+    </div>
+    <h3 v-if="isMinuteSession">
+      {{ $tc('minuteSession', interval, { interval }) }}
+    </h3>
+    <h3 v-else>{{ $t('secondSession') }}</h3>
+    <div class="button-container plus">
+      <transition name="fade" mode="out-in">
+        <button v-if="editable" class="spacer" @click="plus">
+          <img key="plus" src="@/assets/plus.svg" alt="plus" />
+        </button>
+        <div v-else class="spacer"></div>
+      </transition>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent } from '@vue/composition-api'
 import { useInterval } from '../hooks/useInterval'
 
 export default defineComponent({
@@ -26,20 +33,13 @@ export default defineComponent({
     editable: { type: Boolean, required: true }
   },
   setup() {
-    const { interval, minInterval, minus, plus } = useInterval()
-
-    const label = computed(() => {
-      if (interval.value === minInterval) {
-        return '30 second session'
-      }
-
-      return `${interval.value} minute session`
-    })
+    const { interval, isMinuteSession, minus, plus } = useInterval()
 
     return {
+      interval,
+      isMinuteSession,
       minus,
-      plus,
-      label
+      plus
     }
   }
 })
@@ -53,12 +53,25 @@ $button-size: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
 
   h3 {
-    flex: 1;
+    flex: 2;
     line-height: 2rem;
   }
 
+  .button-container {
+    flex: 1;
+    display: flex;
+
+    &.minus {
+      justify-content: flex-end;
+    }
+    &.plus {
+      justify-content: flex-start;
+    }
+  }
+
   button {
     display: flex;
     justify-content: center;
@@ -73,3 +86,16 @@ $button-size: 50px;
   }
 }
 </style>
+
+<i18n>
+{
+  "en": {
+    "minuteSession": "{interval} minute session",
+    "secondSession": "30 second session"
+  },
+  "fr": {
+    "minuteSession": "session de {interval} minute | session de {interval} minutes",
+    "secondSession": "session de 30 secondes"
+  }
+}
+</i18n>

src/components/ZoneMusic.vue

@@ -2,9 +2,11 @@
   <div class="zone-music plume" v-if="isMusicAvailable">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
-        <span class="focus" :class="{ selected: !hasMusic, disabled: hasMusic }"
-          >focus</span
-        >
+        <span
+          class="focus"
+          :class="{ selected: !hasMusic, disabled: hasMusic }"
+          v-t="'focus'"
+        ></span>
         <input
           type="checkbox"
           name="use-music"
@@ -17,7 +19,7 @@
           class="chill"
           :class="{ selected: hasMusic, disabled: !hasMusic }"
         >
-          chill
+          <span v-t="'chill'"></span>
           <ChilledMusic
             class="chilled-music"
             v-if="hasMusic"
@@ -92,6 +94,10 @@ label[data-pm-holder] {
       align-items: center;
       justify-content: flex-start;
 
+      span {
+        text-align: left;
+      }
+
       .chilled-music {
         margin-left: 0.5rem;
       }
@@ -105,3 +111,16 @@ label[data-pm-holder] {
   color: desaturate($color, 70%);
 }
 </style>
+
+<i18n>
+{
+  "en": {
+    "focus": "focus",
+    "chill": "chill"
+  },
+  "fr": {
+    "focus": "concentré",
+    "chill": "détendu"
+  }
+}
+</i18n>