From 4ee7d0d1c4fb93c0bc0e8233944f329a00888a7d Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Tue, 26 Nov 2024 15:54:23 +0200
Subject: [PATCH 1/6] Improve template usage

---
 src/components/QAComponent.vue                |  29 ++--
 src/components/VeggieSearchOption.vue         |   2 +-
 src/components/__tests__/QAComponent.spec.ts  |   2 +-
 .../__snapshots__/QAComponent.spec.ts.snap    | 144 +++++++++++-------
 .../__snapshots__/SettingsView.spec.ts.snap   |  58 ++++---
 5 files changed, 133 insertions(+), 102 deletions(-)

diff --git a/src/components/QAComponent.vue b/src/components/QAComponent.vue
index 76d1939..bf9a2e2 100644
--- a/src/components/QAComponent.vue
+++ b/src/components/QAComponent.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue';
-import IconComponent from './IconComponent.vue';
+import IconComponent from '@/components/IconComponent.vue';
+import ButtonComponent from '@/components/ButtonComponent.vue';
 
 const questions = [
   'appPurpose',
@@ -18,8 +19,12 @@ const keysWithLinks = ['contact', 'studyDetails'];
   <ContentElement :title="$t('qa.title')" class="min-h-0" labelTag="label">
     <div class="flex-container flex-col has-scroll">
       <Disclosure v-for="key in questions" :key="key" v-slot="{open}">
-        <DisclosureButton class="QA__button" :data-test-id="`qa-button-${key}`">
-          <span>{{ $t(`qa.${key}.title`) }}</span>
+        <DisclosureButton
+          :as="ButtonComponent"
+          :data-test-id="`qa-button-${key}`"
+          class="w-full justify-between"
+        >
+          {{ $t(`qa.${key}.title`) }}
           <IconComponent :class="open ? 'rotate-180 transform' : ''" icon="chevron" />
         </DisclosureButton>
         <transition
@@ -30,7 +35,7 @@ const keysWithLinks = ['contact', 'studyDetails'];
           leave-from-class="transform h-full opacity-100"
           leave-to-class="transform h-0 opacity-0"
         >
-          <DisclosurePanel class="QA__panel" :data-test-id="`qa-panel-${key}`">
+          <DisclosurePanel class="p-2" :data-test-id="`qa-panel-${key}`">
             <i18n-t :keypath="`qa.${key}.text`" tag="div" scope="global">
               <a
                 v-if="keysWithLinks.includes(key)"
@@ -47,19 +52,3 @@ const keysWithLinks = ['contact', 'studyDetails'];
     </div>
   </ContentElement>
 </template>
-<style lang="scss" scoped>
-.QA__button {
-  @apply w-full button-like;
-  @apply flex-container justify-between;
-  @apply bg-sky-500;
-
-  &:hover,
-  &:focus {
-    @apply bg-sky-600;
-  }
-}
-
-.QA__panel {
-  @apply p-2;
-}
-</style>
diff --git a/src/components/VeggieSearchOption.vue b/src/components/VeggieSearchOption.vue
index 6a4e100..d8a63df 100644
--- a/src/components/VeggieSearchOption.vue
+++ b/src/components/VeggieSearchOption.vue
@@ -13,8 +13,8 @@ const dropdownOptions = inject(KEYS.dropdownOptions)!;
   <ComboboxOption v-slot="{active, selected}" as="template" :key="veggie" :value="veggie">
     <li
       :class="[dropdownOptions(active, selected), 'veggie-search__option']"
-      role="menuitem"
       :data-test-id="`veggie-search-option-${veggie}`"
+      role="menuitem"
     >
       <span>
         {{ translation || $t(`veggies.${veggie}`) }}
diff --git a/src/components/__tests__/QAComponent.spec.ts b/src/components/__tests__/QAComponent.spec.ts
index af7ac7a..92ed4a2 100644
--- a/src/components/__tests__/QAComponent.spec.ts
+++ b/src/components/__tests__/QAComponent.spec.ts
@@ -12,7 +12,7 @@ describe('QAComponent', () => {
 
   it('renders answers', async () => {
     const wrapper = mount(QAComponent);
-    wrapper.findAll('.QA__button').forEach(async (button) => {
+    wrapper.findAll('button').forEach(async (button) => {
       await button.trigger('click');
     });
     await nextTick();
diff --git a/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap b/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
index d4c6022..eb89a97 100644
--- a/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
@@ -1,41 +1,55 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`QAComponent > renders 1`] = `
-"<div data-v-bcc04aab="" class="flex-container flex-col min-h-0"><label class="label-like">Common Questions</label>
-  <div data-v-bcc04aab="" class="flex-container flex-col has-scroll"><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-0" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-appPurpose"><span data-v-bcc04aab="">What's this app for?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+"<div class="flex-container flex-col min-h-0"><label class="label-like">Common Questions</label>
+  <div class="flex-container flex-col has-scroll"><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-0" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-appPurpose">
+      <!--v-if-->What's this app for? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-2" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-studyDetails"><span data-v-bcc04aab="">What's the science?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-2" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-studyDetails">
+      <!--v-if-->What's the science? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-4" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-whatCounts"><span data-v-bcc04aab="">What counts as a portion?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-4" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-whatCounts">
+      <!--v-if-->What counts as a portion? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-6" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-categories"><span data-v-bcc04aab="">But strawberry is a...</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-6" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-categories">
+      <!--v-if-->But strawberry is a... <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-8" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-isItFree"><span data-v-bcc04aab="">Is the app monetized?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-8" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-isItFree">
+      <!--v-if-->Is the app monetized? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-10" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-isMyDataSafe"><span data-v-bcc04aab="">Is my data safe?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-10" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-isMyDataSafe">
+      <!--v-if-->Is my data safe? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-12" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-contact"><span data-v-bcc04aab="">How to get in touch?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-12" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-contact">
+      <!--v-if-->How to get in touch? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
     </transition-stub>
   </div>
@@ -43,55 +57,69 @@ exports[`QAComponent > renders 1`] = `
 `;
 
 exports[`QAComponent > renders answers 1`] = `
-"<div data-v-bcc04aab="" class="flex-container flex-col min-h-0"><label class="label-like">Common Questions</label>
-  <div data-v-bcc04aab="" class="flex-container flex-col has-scroll"><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-0" type="button" aria-expanded="true" data-headlessui-state="open" class="QA__button" data-test-id="qa-button-appPurpose" aria-controls="headlessui-disclosure-panel-v-1"><span data-v-bcc04aab="">What's this app for?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+"<div class="flex-container flex-col min-h-0"><label class="label-like">Common Questions</label>
+  <div class="flex-container flex-col has-scroll"><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-0" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-appPurpose" type="button" aria-controls="headlessui-disclosure-panel-v-1">
+      <!--v-if-->What's this app for? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div data-v-bcc04aab="" id="headlessui-disclosure-panel-v-1" data-headlessui-state="open" class="QA__panel" data-test-id="qa-panel-appPurpose">
-        <div data-v-bcc04aab="">Eat Your Veggies is a free app for tracking plant-based ingredients on weekly basis in your diet. According to a study, consuming 30 or more veggies weekly has multiple health benefits over a less versatile diet. The key, according to study, is not as much in the amounts you consume, but in variation.</div>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-1" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-appPurpose">
+        <div>Eat Your Veggies is a free app for tracking plant-based ingredients on weekly basis in your diet. According to a study, consuming 30 or more veggies weekly has multiple health benefits over a less versatile diet. The key, according to study, is not as much in the amounts you consume, but in variation.</div>
       </div>
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-2" type="button" aria-expanded="true" data-headlessui-state="open" class="QA__button" data-test-id="qa-button-studyDetails" aria-controls="headlessui-disclosure-panel-v-3"><span data-v-bcc04aab="">What's the science?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-2" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-studyDetails" type="button" aria-controls="headlessui-disclosure-panel-v-3">
+      <!--v-if-->What's the science? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div data-v-bcc04aab="" id="headlessui-disclosure-panel-v-3" data-headlessui-state="open" class="QA__panel" data-test-id="qa-panel-studyDetails">
-        <div data-v-bcc04aab="">I'm neither a nutritian nor a biologist, so I don't want to make exaggerated claims or interpretations. I'm not affiliated with the study in any way, but if you want to read more about the study, look up The American Gut Project from the journal of <a data-v-bcc04aab="" href="https://doi.org/10.1128/msystems.00031-18" target="_blank" noreferrer="" noopener="">American Society for Microbiology (ASM)</a>.</div>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-3" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-studyDetails">
+        <div>I'm neither a nutritian nor a biologist, so I don't want to make exaggerated claims or interpretations. I'm not affiliated with the study in any way, but if you want to read more about the study, look up The American Gut Project from the journal of <a href="https://doi.org/10.1128/msystems.00031-18" target="_blank" noreferrer="" noopener="">American Society for Microbiology (ASM)</a>.</div>
       </div>
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-4" type="button" aria-expanded="true" data-headlessui-state="open" class="QA__button" data-test-id="qa-button-whatCounts" aria-controls="headlessui-disclosure-panel-v-5"><span data-v-bcc04aab="">What counts as a portion?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-4" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-whatCounts" type="button" aria-controls="headlessui-disclosure-panel-v-5">
+      <!--v-if-->What counts as a portion? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div data-v-bcc04aab="" id="headlessui-disclosure-panel-v-5" data-headlessui-state="open" class="QA__panel" data-test-id="qa-panel-whatCounts">
-        <div data-v-bcc04aab="">Ultimately, how you use the app is up to your discretion. However, consider that minuscule amounts might not be of any nutritional value. Therefore I personally consider only portions of a heaping tablespoon or larger adequate. It is also worth noting that very processed foods don't count towards a portion. So ketchup should not equal a tomato.</div>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-5" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-whatCounts">
+        <div>Ultimately, how you use the app is up to your discretion. However, consider that minuscule amounts might not be of any nutritional value. Therefore I personally consider only portions of a heaping tablespoon or larger adequate. It is also worth noting that very processed foods don't count towards a portion. So ketchup should not equal a tomato.</div>
       </div>
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-6" type="button" aria-expanded="true" data-headlessui-state="open" class="QA__button" data-test-id="qa-button-categories" aria-controls="headlessui-disclosure-panel-v-7"><span data-v-bcc04aab="">But strawberry is a...</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-6" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-categories" type="button" aria-controls="headlessui-disclosure-panel-v-7">
+      <!--v-if-->But strawberry is a... <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div data-v-bcc04aab="" id="headlessui-disclosure-panel-v-7" data-headlessui-state="open" class="QA__panel" data-test-id="qa-panel-categories">
-        <div data-v-bcc04aab="">...false fruit, I know. Also tomato is not a vegetable in biological sense, so the app takes some liberties in its categories. Still, please report any major inaccuracies you come across! You can also request missing veggies to be added. They should be such that are commercially available globally.</div>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-7" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-categories">
+        <div>...false fruit, I know. Also tomato is not a vegetable in biological sense, so the app takes some liberties in its categories. Still, please report any major inaccuracies you come across! You can also request missing veggies to be added. They should be such that are commercially available globally.</div>
       </div>
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-8" type="button" aria-expanded="true" data-headlessui-state="open" class="QA__button" data-test-id="qa-button-isItFree" aria-controls="headlessui-disclosure-panel-v-9"><span data-v-bcc04aab="">Is the app monetized?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-8" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-isItFree" type="button" aria-controls="headlessui-disclosure-panel-v-9">
+      <!--v-if-->Is the app monetized? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div data-v-bcc04aab="" id="headlessui-disclosure-panel-v-9" data-headlessui-state="open" class="QA__panel" data-test-id="qa-panel-isItFree">
-        <div data-v-bcc04aab="">The app is free to use, and it has no advertisements. There will be a possibility to donate, but don't feel obliged.</div>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-9" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-isItFree">
+        <div>The app is free to use, and it has no advertisements. There will be a possibility to donate, but don't feel obliged.</div>
       </div>
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-10" type="button" aria-expanded="true" data-headlessui-state="open" class="QA__button" data-test-id="qa-button-isMyDataSafe" aria-controls="headlessui-disclosure-panel-v-11"><span data-v-bcc04aab="">Is my data safe?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-10" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-isMyDataSafe" type="button" aria-controls="headlessui-disclosure-panel-v-11">
+      <!--v-if-->Is my data safe? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div data-v-bcc04aab="" id="headlessui-disclosure-panel-v-11" data-headlessui-state="open" class="QA__panel" data-test-id="qa-panel-isMyDataSafe">
-        <div data-v-bcc04aab="">The data is stored in your browser's local storage and is not shared with any third parties. You can at any time you wish reset the app using the button below.</div>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-11" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-isMyDataSafe">
+        <div>The data is stored in your browser's local storage and is not shared with any third parties. You can at any time you wish reset the app using the button below.</div>
       </div>
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-12" type="button" aria-expanded="true" data-headlessui-state="open" class="QA__button" data-test-id="qa-button-contact" aria-controls="headlessui-disclosure-panel-v-13"><span data-v-bcc04aab="">How to get in touch?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-12" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-contact" type="button" aria-controls="headlessui-disclosure-panel-v-13">
+      <!--v-if-->How to get in touch? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div data-v-bcc04aab="" id="headlessui-disclosure-panel-v-13" data-headlessui-state="open" class="QA__panel" data-test-id="qa-panel-contact">
-        <div data-v-bcc04aab="">You can find the project page in <a data-v-bcc04aab="" href="https://github.com/ajuvonen/veggies/" target="_blank" noreferrer="" noopener="">GitHub</a>. The page has separate boards for reporting issues and engaging in other discussion. Thank you for your interest towards the project!</div>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-13" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-contact">
+        <div>You can find the project page in <a href="https://github.com/ajuvonen/veggies/" target="_blank" noreferrer="" noopener="">GitHub</a>. The page has separate boards for reporting issues and engaging in other discussion. Thank you for your interest towards the project!</div>
       </div>
     </transition-stub>
   </div>
diff --git a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
index e790dd4..a3c174b 100644
--- a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
@@ -12,41 +12,55 @@ exports[`SettingsView > renders 1`] = `
       </svg><span data-v-7747040a="" id="headlessui-label-v-5">Suomi</span></div>
   </div>
 </div>
-<div data-v-bcc04aab="" class="flex-container flex-col min-h-0"><label class="label-like">Common Questions</label>
-  <div data-v-bcc04aab="" class="flex-container flex-col has-scroll"><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-6" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-appPurpose"><span data-v-bcc04aab="">What's this app for?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+<div class="flex-container flex-col min-h-0"><label class="label-like">Common Questions</label>
+  <div class="flex-container flex-col has-scroll"><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-6" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-appPurpose">
+      <!--v-if-->What's this app for? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-8" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-studyDetails"><span data-v-bcc04aab="">What's the science?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-8" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-studyDetails">
+      <!--v-if-->What's the science? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-10" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-whatCounts"><span data-v-bcc04aab="">What counts as a portion?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-10" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-whatCounts">
+      <!--v-if-->What counts as a portion? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-12" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-categories"><span data-v-bcc04aab="">But strawberry is a...</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-12" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-categories">
+      <!--v-if-->But strawberry is a... <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-14" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-isItFree"><span data-v-bcc04aab="">Is the app monetized?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-14" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-isItFree">
+      <!--v-if-->Is the app monetized? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-16" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-isMyDataSafe"><span data-v-bcc04aab="">Is my data safe?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-16" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-isMyDataSafe">
+      <!--v-if-->Is my data safe? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-18" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button" data-test-id="qa-button-contact"><span data-v-bcc04aab="">How to get in touch?</span><svg data-v-bcc04aab="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-18" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-contact">
+      <!--v-if-->How to get in touch? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button>
-    <transition-stub data-v-bcc04aab="" enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
     </transition-stub>
   </div>

From f6846f75b880d9bd259d8f28ef292088578a160c Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Tue, 26 Nov 2024 15:54:35 +0200
Subject: [PATCH 2/6] Use helper shadow colors

---
 src/components/charts/CategoryStatusChart.vue | 2 --
 src/utils/helpers.ts                          | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/charts/CategoryStatusChart.vue b/src/components/charts/CategoryStatusChart.vue
index 46f5d40..54945b1 100644
--- a/src/components/charts/CategoryStatusChart.vue
+++ b/src/components/charts/CategoryStatusChart.vue
@@ -82,8 +82,6 @@ const chartOptions = computed(() => {
       },
       datalabels: {
         ...defaultOptions.plugins?.datalabels,
-        textShadowColor: COLORS.offWhite,
-        textShadowBlur: 10,
         formatter: (_, context: Context) =>
           CATEGORY_EMOJI[context.chart.data.labels![context.dataIndex] as Category],
       },
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 338dba4..da0b60a 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -76,7 +76,7 @@ export const getChartOptions = <T extends keyof ChartTypeRegistry>(
                 size: 25,
               },
               textShadowColor: '#fff',
-              textShadowBlur: 3,
+              textShadowBlur: 5,
               formatter: (value, {dataset: {label}}: Context) =>
                 value ? CATEGORY_EMOJI[label as Category] : '',
             }

From b376c91da3f2d69f9dd1ede615f76a20e521d166 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Tue, 26 Nov 2024 15:55:35 +0200
Subject: [PATCH 3/6] Prevent animation text selection

---
 src/components/FrontPageAnimation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FrontPageAnimation.vue b/src/components/FrontPageAnimation.vue
index 7c69a32..f0a0820 100644
--- a/src/components/FrontPageAnimation.vue
+++ b/src/components/FrontPageAnimation.vue
@@ -39,7 +39,7 @@ let emojis = getRandomEmojis(4);
 }
 
 .front-page-animation__icon-container {
-  @apply relative;
+  @apply relative select-none;
   @apply flex flex-col items-center;
 }
 

From c7e33b5eb3b02d9a102217a0909db92f80e56d57 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Tue, 26 Nov 2024 16:31:10 +0200
Subject: [PATCH 4/6] Use template

---
 src/views/StatsView.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/views/StatsView.vue b/src/views/StatsView.vue
index a40c4f7..c0b04cc 100644
--- a/src/views/StatsView.vue
+++ b/src/views/StatsView.vue
@@ -56,9 +56,7 @@ const icons = ['calendarWeekOutline', 'chartLine', 'history', 'formatListChecks'
       <TabPanel as="template">
         <VeggieList :uniqueVeggies="uniqueVeggies" />
       </TabPanel>
-      <TabPanel as="template">
-        <AchievementList />
-      </TabPanel>
+      <TabPanel :as="AchievementList" />
     </TabPanels>
   </TabGroup>
 </template>

From b433a500f4dff180fc2e3d44df931bf859ab2e6c Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Tue, 26 Nov 2024 16:32:14 +0200
Subject: [PATCH 5/6] Add bluesky link; Fix link styles

---
 src/assets/main.scss                          | 20 +++++++++++++------
 src/components/BlueskyLink.vue                | 19 ++++++++++++++++++
 src/components/IconComponent.vue              |  3 +++
 src/components/NavBar.vue                     |  6 +-----
 src/components/QAComponent.vue                |  1 +
 .../__snapshots__/HomeView.spec.ts.snap       |  4 +++-
 .../__snapshots__/LogView.spec.ts.snap        | 10 ++++++++--
 .../__snapshots__/QAComponent.spec.ts.snap    |  4 ++--
 src/i18n/en.json                              |  1 +
 src/i18n/fi.json                              |  1 +
 src/views/HomeView.vue                        |  2 ++
 src/views/LogView.vue                         |  2 ++
 12 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 src/components/BlueskyLink.vue

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 86c680f..42e786e 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -30,14 +30,22 @@
     @apply flex-grow;
     scrollbar-width: thin;
   }
+
+  .text-link {
+    @apply underline;
+    @apply text-slate-300;
+    &:hover,
+    &:focus {
+      @apply text-slate-50;
+    }
+  }
 }
 
-main a {
-  @apply underline rounded-md;
-  @apply text-slate-300;
-  &:hover,
-  &:focus {
-    @apply text-slate-50;
+a {
+  @apply rounded-md;
+  @apply fill-slate-50;
+  &:hover {
+    @apply text-slate-200 fill-slate-200;
   }
 }
 
diff --git a/src/components/BlueskyLink.vue b/src/components/BlueskyLink.vue
new file mode 100644
index 0000000..af3b1da
--- /dev/null
+++ b/src/components/BlueskyLink.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup></script>
+<template>
+  <a
+    class="bluesky-link"
+    href="https://bsky.app/profile/eatyourveggies.app"
+    target="_blank"
+    noreferrer
+    noopener
+  >
+    <IconComponent icon="butterflyOutline" />
+    {{ $t('general.follow', ['Bluesky']) }}
+  </a>
+</template>
+<style lang="scss" scoped>
+.bluesky-link {
+  @apply uppercase text-xs !w-fit;
+  @apply flex-container items-center;
+}
+</style>
diff --git a/src/components/IconComponent.vue b/src/components/IconComponent.vue
index ca8ff34..d61cb70 100644
--- a/src/components/IconComponent.vue
+++ b/src/components/IconComponent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  mdiButterflyOutline,
   mdiCalendarWeekOutline,
   mdiChartBar,
   mdiChartLine,
@@ -21,6 +22,7 @@ import {
 } from '@mdi/js';
 
 export type IconString =
+  | 'butterflyOutline'
   | 'calendarWeekOutline'
   | 'chart'
   | 'chartLine'
@@ -51,6 +53,7 @@ withDefaults(
 );
 
 const icons = {
+  butterflyOutline: mdiButterflyOutline,
   calendarWeekOutline: mdiCalendarWeekOutline,
   chart: mdiChartBar,
   chartLine: mdiChartLine,
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 8ec531e..bbe79e7 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -55,11 +55,7 @@ const isHome = computed(() => route.name === 'home');
 }
 
 .nav__link {
-  @apply rounded-md leading-[1.2];
-  @apply fill-slate-50;
-  &:hover {
-    @apply text-slate-200 fill-slate-200;
-  }
+  @apply leading-[1.2];
 }
 
 .nav__link--log {
diff --git a/src/components/QAComponent.vue b/src/components/QAComponent.vue
index bf9a2e2..9cd4da3 100644
--- a/src/components/QAComponent.vue
+++ b/src/components/QAComponent.vue
@@ -40,6 +40,7 @@ const keysWithLinks = ['contact', 'studyDetails'];
               <a
                 v-if="keysWithLinks.includes(key)"
                 :href="$t(`qa.${key}.link.url`)"
+                class="text-link"
                 target="_blank"
                 noreferrer
                 noopener
diff --git a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
index 398be89..74ec096 100644
--- a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
@@ -8,7 +8,9 @@ exports[`HomeView > renders 1`] = `
       <!--v-if-->Learn more
     </button><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary" data-test-id="home-start-button">
       <!--v-if-->Start
-    </button></div>
+    </button></div><a data-v-ba48d2a1="" data-v-b4e148ca="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M13 21H11V6L9.03 3.97L10 3L12 5L14 3L15 4L13 6V21M14 9H14V7C14.84 6.37 15.88 6 17 6C19.76 6 22 8.24 22 11C22 12.64 21.21 14.09 20 15H20V17C20 19.21 18.21 21 16 21C15.27 21 14.59 20.81 14 20.46V18.46C14.59 18.81 15.27 19 16 19C17.1 19 18 18.1 18 17V13.83C19.17 13.42 20 12.31 20 11C20 9.35 18.67 8 17 8H17C15.88 8 14.84 8.37 14 9M10 9H10C9.16 8.37 8.13 8 7 8H7C5.33 8 4 9.35 4 11C4 12.31 4.84 13.42 6 13.83V17C6 18.1 6.9 19 8 19C8.73 19 9.41 18.81 10 18.46V20.46C9.41 20.81 8.73 21 8 21C5.79 21 4 19.21 4 17V15H4C2.79 14.09 2 12.64 2 11C2 8.24 4.24 6 7 6C8.13 6 9.16 6.37 10 7V9M9 11L7.5 9.5L6 11L7.5 12.5L9 11M18 11L16.5 9.5L15 11L16.5 12.5L18 11Z" class="transition-all"></path>
+    </svg> Follow on Bluesky</a>
   <!---->
 </div>"
 `;
diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
index b619556..6636409 100644
--- a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -8,7 +8,10 @@ exports[`LogView > renders 1`] = `
   <!---->
 </div>
 <front-page-animation-stub></front-page-animation-stub>
-<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>"
+<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>
+<a data-v-ba48d2a1="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M13 21H11V6L9.03 3.97L10 3L12 5L14 3L15 4L13 6V21M14 9H14V7C14.84 6.37 15.88 6 17 6C19.76 6 22 8.24 22 11C22 12.64 21.21 14.09 20 15H20V17C20 19.21 18.21 21 16 21C15.27 21 14.59 20.81 14 20.46V18.46C14.59 18.81 15.27 19 16 19C17.1 19 18 18.1 18 17V13.83C19.17 13.42 20 12.31 20 11C20 9.35 18.67 8 17 8H17C15.88 8 14.84 8.37 14 9M10 9H10C9.16 8.37 8.13 8 7 8H7C5.33 8 4 9.35 4 11C4 12.31 4.84 13.42 6 13.83V17C6 18.1 6.9 19 8 19C8.73 19 9.41 18.81 10 18.46V20.46C9.41 20.81 8.73 21 8 21C5.79 21 4 19.21 4 17V15H4C2.79 14.09 2 12.64 2 11C2 8.24 4.24 6 7 6C8.13 6 9.16 6.37 10 7V9M9 11L7.5 9.5L6 11L7.5 12.5L9 11M18 11L16.5 9.5L15 11L16.5 12.5L18 11Z" class="transition-all"></path>
+  </svg> Follow on Bluesky</a>"
 `;
 
 exports[`LogView > renders with data 1`] = `
@@ -47,5 +50,8 @@ exports[`LogView > renders with data 1`] = `
         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
       </svg> rye
     </button></li>
-</transition-group-stub>"
+</transition-group-stub>
+<a data-v-ba48d2a1="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M13 21H11V6L9.03 3.97L10 3L12 5L14 3L15 4L13 6V21M14 9H14V7C14.84 6.37 15.88 6 17 6C19.76 6 22 8.24 22 11C22 12.64 21.21 14.09 20 15H20V17C20 19.21 18.21 21 16 21C15.27 21 14.59 20.81 14 20.46V18.46C14.59 18.81 15.27 19 16 19C17.1 19 18 18.1 18 17V13.83C19.17 13.42 20 12.31 20 11C20 9.35 18.67 8 17 8H17C15.88 8 14.84 8.37 14 9M10 9H10C9.16 8.37 8.13 8 7 8H7C5.33 8 4 9.35 4 11C4 12.31 4.84 13.42 6 13.83V17C6 18.1 6.9 19 8 19C8.73 19 9.41 18.81 10 18.46V20.46C9.41 20.81 8.73 21 8 21C5.79 21 4 19.21 4 17V15H4C2.79 14.09 2 12.64 2 11C2 8.24 4.24 6 7 6C8.13 6 9.16 6.37 10 7V9M9 11L7.5 9.5L6 11L7.5 12.5L9 11M18 11L16.5 9.5L15 11L16.5 12.5L18 11Z" class="transition-all"></path>
+  </svg> Follow on Bluesky</a>"
 `;
diff --git a/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap b/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
index eb89a97..9fe22da 100644
--- a/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
@@ -74,7 +74,7 @@ exports[`QAComponent > renders answers 1`] = `
     </button>
     <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <div id="headlessui-disclosure-panel-v-3" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-studyDetails">
-        <div>I'm neither a nutritian nor a biologist, so I don't want to make exaggerated claims or interpretations. I'm not affiliated with the study in any way, but if you want to read more about the study, look up The American Gut Project from the journal of <a href="https://doi.org/10.1128/msystems.00031-18" target="_blank" noreferrer="" noopener="">American Society for Microbiology (ASM)</a>.</div>
+        <div>I'm neither a nutritian nor a biologist, so I don't want to make exaggerated claims or interpretations. I'm not affiliated with the study in any way, but if you want to read more about the study, look up The American Gut Project from the journal of <a href="https://doi.org/10.1128/msystems.00031-18" class="text-link" target="_blank" noreferrer="" noopener="">American Society for Microbiology (ASM)</a>.</div>
       </div>
     </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-4" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-whatCounts" type="button" aria-controls="headlessui-disclosure-panel-v-5">
       <!--v-if-->What counts as a portion? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
@@ -119,7 +119,7 @@ exports[`QAComponent > renders answers 1`] = `
     </button>
     <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <div id="headlessui-disclosure-panel-v-13" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-contact">
-        <div>You can find the project page in <a href="https://github.com/ajuvonen/veggies/" target="_blank" noreferrer="" noopener="">GitHub</a>. The page has separate boards for reporting issues and engaging in other discussion. Thank you for your interest towards the project!</div>
+        <div>You can find the project page in <a href="https://github.com/ajuvonen/veggies/" class="text-link" target="_blank" noreferrer="" noopener="">GitHub</a>. The page has separate boards for reporting issues and engaging in other discussion. Thank you for your interest towards the project!</div>
       </div>
     </transition-stub>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ac0b89c..f2b237e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -679,6 +679,7 @@
     "clickToAdd": "Add {0}",
     "clickToRemove": "Remove {0}",
     "close": "Close",
+    "follow": "Follow on {0}",
     "start": "Start"
   },
   "home": {
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 4673fe7..38ebb0f 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -687,6 +687,7 @@
     "clickToAdd": "Lisää {0}",
     "clickToRemove": "Poista {0}",
     "close": "Sulje",
+    "follow": "Seuraa palvelussa {0}",
     "start": "Aloita"
   },
   "home": {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8406783..8b5b2bb 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,7 @@ import {storeToRefs} from 'pinia';
 import {DateTime} from 'luxon';
 import {useActivityStore} from '@/stores/activityStore';
 import ModalDialog from '@/components/ModalDialog.vue';
+import BlueskyLink from '@/components/BlueskyLink.vue';
 
 const router = useRouter();
 
@@ -31,6 +32,7 @@ const start = () => {
         $t('general.start')
       }}</ButtonComponent>
     </div>
+    <BlueskyLink />
     <ModalDialog v-model="dialogOpen" :title="$t('home.infoTitle')">
       <template #content>
         <p>{{ $t('home.infoP1') }}</p>
diff --git a/src/views/LogView.vue b/src/views/LogView.vue
index ff0c041..5a5c16d 100644
--- a/src/views/LogView.vue
+++ b/src/views/LogView.vue
@@ -14,6 +14,7 @@ import TagsComponent from '@/components/TagsComponent.vue';
 import FrontPageAnimation from '@/components/FrontPageAnimation.vue';
 import ModalDialog from '@/components/ModalDialog.vue';
 import AchievementBadge from '@/components/AchievementBadge.vue';
+import BlueskyLink from '@/components/BlueskyLink.vue';
 
 const {t, tm} = useI18n();
 
@@ -80,6 +81,7 @@ provide(KEYS.challenge, currentChallenge);
     icon="plus"
     @click="(veggie) => toggleVeggie(veggie)"
   />
+  <BlueskyLink />
   <ModalDialog v-model="dialogOpen" :title="$t('achievements.newAchievements')">
     <template #content>
       <ul class="log-view__achievement-container">

From f5c0ba311b5ddb9b639acd86a10987b6dfd537da Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Wed, 27 Nov 2024 15:21:10 +0200
Subject: [PATCH 6/6] Use proper Bluesky link

---
 package-lock.json                             | 340 ++++++++++--------
 package.json                                  |  21 +-
 src/components/BlueskyLink.vue                |   4 +-
 src/components/IconComponent.vue              |   6 +-
 .../__snapshots__/HomeView.spec.ts.snap       |   2 +-
 .../__snapshots__/LogView.spec.ts.snap        |   8 +-
 .../__snapshots__/NavBar.spec.ts.snap         |   2 +-
 src/i18n/en.json                              |   4 +-
 src/i18n/fi.json                              |   6 +-
 9 files changed, 216 insertions(+), 177 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ddb0e99..52e0a8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,18 +12,19 @@
         "@fontsource/nunito": "^5.1.0",
         "@headlessui/vue": "^1.7.23",
         "@mdi/js": "^7.4.47",
-        "@vueuse/core": "^11.2.0",
+        "@vueuse/core": "^11.3.0",
         "@xstate/vue": "^4.0.0",
         "canvas-confetti": "^1.9.3",
         "chart.js": "^4.4.6",
         "chartjs-plugin-datalabels": "^2.2.0",
         "luxon": "^3.5.0",
         "pinia": "^2.2.6",
-        "remeda": "^2.17.3",
+        "remeda": "^2.17.4",
+        "simple-icons": "^13.18.0",
         "vue": "3.5.13",
         "vue-chartjs": "^5.3.2",
         "vue-i18n": "^10.0.4",
-        "vue-router": "^4.4.5",
+        "vue-router": "^4.5.0",
         "xstate": "^5.19.0"
       },
       "devDependencies": {
@@ -34,12 +35,12 @@
         "@types/canvas-confetti": "^1.6.4",
         "@types/jsdom": "^21.1.7",
         "@types/luxon": "^3.4.2",
-        "@types/node": "^22.9.1",
-        "@vitejs/plugin-vue": "^5.2.0",
-        "@vitest/coverage-istanbul": "^2.1.5",
-        "@vitest/eslint-plugin": "^1.1.10",
+        "@types/node": "^22.10.0",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "@vitest/coverage-istanbul": "^2.1.6",
+        "@vitest/eslint-plugin": "^1.1.11",
         "@vue/eslint-config-prettier": "^10.1.0",
-        "@vue/eslint-config-typescript": "^14.1.3",
+        "@vue/eslint-config-typescript": "^14.1.4",
         "@vue/test-utils": "^2.4.6",
         "@vue/tsconfig": "^0.6.0",
         "autoprefixer": "^10.4.20",
@@ -50,13 +51,13 @@
         "jsdom": "^25.0.1",
         "npm-run-all2": "^7.0.1",
         "postcss": "^8.4.49",
-        "prettier": "^3.3.3",
+        "prettier": "^3.4.1",
         "sass-embedded": "^1.81.0",
         "tailwindcss": "^3.4.15",
         "typescript": "^5.6.3",
         "vite": "^5.4.11",
         "vite-plugin-pwa": "^0.21.0",
-        "vitest": "^2.1.5",
+        "vitest": "^2.1.6",
         "vue-tsc": "^2.1.10"
       },
       "engines": {
@@ -3035,13 +3036,13 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.9.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-      "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+      "version": "22.10.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.0.tgz",
+      "integrity": "sha512-XC70cRZVElFHfIUB40FgZOBbgJYFKKMa5nb9lxcwYstFG/Mi+/Y0bGS+rs6Dmhmkpq4pnNiLiuZAbc02YCOnmA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "undici-types": "~6.20.0"
       }
     },
     "node_modules/@types/resolve": {
@@ -3072,17 +3073,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.11.0.tgz",
-      "integrity": "sha512-KhGn2LjW1PJT2A/GfDpiyOfS4a8xHQv2myUagTM5+zsormOmBlYsnQ6pobJ8XxJmh6hnHwa2Mbe3fPrDJoDhbA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.16.0.tgz",
+      "integrity": "sha512-5YTHKV8MYlyMI6BaEG7crQ9BhSc8RxzshOReKwZwRWN0+XvvTOm+L/UYLCYxFpfwYuAAqhxiq4yae0CMFwbL7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.11.0",
-        "@typescript-eslint/type-utils": "8.11.0",
-        "@typescript-eslint/utils": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/type-utils": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -3106,16 +3107,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.11.0.tgz",
-      "integrity": "sha512-lmt73NeHdy1Q/2ul295Qy3uninSqi6wQI18XwSpm8w0ZbQXUpjCAWP1Vlv/obudoBiIjJVjlztjQ+d/Md98Yxg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.16.0.tgz",
+      "integrity": "sha512-D7DbgGFtsqIPIFMPJwCad9Gfi/hC0PWErRRHFnaCWoEDYi5tQUDiJCTmGUbBiLzjqAck4KcXt9Ayj0CNlIrF+w==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.11.0",
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/typescript-estree": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -3135,14 +3136,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
-      "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz",
+      "integrity": "sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0"
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3153,14 +3154,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.11.0.tgz",
-      "integrity": "sha512-ItiMfJS6pQU0NIKAaybBKkuVzo6IdnAhPFZA/2Mba/uBjuPQPet/8+zh5GtLHwmuFRShZx+8lhIs7/QeDHflOg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.16.0.tgz",
+      "integrity": "sha512-IqZHGG+g1XCWX9NyqnI/0CX5LL8/18awQqmkZSl2ynn8F76j579dByc0jhfVSnSnhf7zv76mKBQv9HQFKvDCgg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.11.0",
-        "@typescript-eslint/utils": "8.11.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -3171,6 +3172,9 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
@@ -3178,9 +3182,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.16.0.tgz",
+      "integrity": "sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3192,14 +3196,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
-      "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz",
+      "integrity": "sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -3221,16 +3225,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.11.0.tgz",
-      "integrity": "sha512-CYiX6WZcbXNJV7UNB4PLDIBtSdRmRI/nb0FMyqHPTQD1rMjA0foPLaPUV39C/MxkTd/QKSeX+Gb34PPsDVC35g==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.16.0.tgz",
+      "integrity": "sha512-C1zRy/mOL8Pj157GiX4kaw7iyRLKfJXBR3L82hk5kS/GyHcOFmy4YUq/zfZti72I9wnuQtA/+xzft4wCC8PJdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.11.0",
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/typescript-estree": "8.11.0"
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3241,17 +3245,22 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz",
+      "integrity": "sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "eslint-visitor-keys": "^3.4.3"
+        "@typescript-eslint/types": "8.16.0",
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3261,24 +3270,37 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.0.tgz",
-      "integrity": "sha512-7n7KdUEtx/7Yl7I/WVAMZ1bEb0eVvXF3ummWTeLcs/9gvo9pJhuLdouSXGjdZ/MKD1acf1I272+X0RMua4/R3g==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
+      "integrity": "sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.0.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "vite": "^5.0.0",
+        "vite": "^5.0.0 || ^6.0.0",
         "vue": "^3.2.25"
       }
     },
     "node_modules/@vitest/coverage-istanbul": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-istanbul/-/coverage-istanbul-2.1.5.tgz",
-      "integrity": "sha512-jJsS5jeHncmSvzMNE03F1pk8F9etmjzGmGyQnGMkdHdVek/bxK/3vo8Qr3e9XmVuDM3UZKOy1ObeQHgC2OxvHg==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-istanbul/-/coverage-istanbul-2.1.6.tgz",
+      "integrity": "sha512-tJBsODJ8acDxwt4J+HERV0+FxOhjOXn+yVYWHQ25iFqcbQNyvptQLBFxEoRvaMbqJqSaYatGOg0/ctiQdB3mSg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3297,13 +3319,13 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "2.1.5"
+        "vitest": "2.1.6"
       }
     },
     "node_modules/@vitest/eslint-plugin": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.1.10.tgz",
-      "integrity": "sha512-uScH5Kz5v32vvtQYB2iodpoPg2mGASK+VKpjlc2IUgE0+16uZKqVKi2vQxjxJ6sMCQLBs4xhBFZlmZBszsmfKQ==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.1.11.tgz",
+      "integrity": "sha512-f24vqvW1GE94Qs1qIelMdhTaYoVS6TbNz7V/1xc1A7gggoz21Lon3bDh8SRoesRpXSJ+23fXUc9cOUAKoGgZ8g==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -3322,14 +3344,14 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.5.tgz",
-      "integrity": "sha512-nZSBTW1XIdpZvEJyoP/Sy8fUg0b8od7ZpGDkTUcfJ7wz/VoZAFzFfLyxVxGFhUjJzhYqSbIpfMtl/+k/dpWa3Q==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.6.tgz",
+      "integrity": "sha512-9M1UR9CAmrhJOMoSwVnPh2rELPKhYo0m/CSgqw9PyStpxtkwhmdM6XYlXGKeYyERY1N6EIuzkQ7e3Lm1WKCoUg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.1.5",
-        "@vitest/utils": "2.1.5",
+        "@vitest/spy": "2.1.6",
+        "@vitest/utils": "2.1.6",
         "chai": "^5.1.2",
         "tinyrainbow": "^1.2.0"
       },
@@ -3338,13 +3360,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.5.tgz",
-      "integrity": "sha512-XYW6l3UuBmitWqSUXTNXcVBUCRytDogBsWuNXQijc00dtnU/9OqpXWp4OJroVrad/gLIomAq9aW8yWDBtMthhQ==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.6.tgz",
+      "integrity": "sha512-MHZp2Z+Q/A3am5oD4WSH04f9B0T7UvwEb+v5W0kCYMhtXGYbdyl2NUk1wdSMqGthmhpiThPDp/hEoVwu16+u1A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.1.5",
+        "@vitest/spy": "2.1.6",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.12"
       },
@@ -3353,7 +3375,7 @@
       },
       "peerDependencies": {
         "msw": "^2.4.9",
-        "vite": "^5.0.0"
+        "vite": "^5.0.0 || ^6.0.0"
       },
       "peerDependenciesMeta": {
         "msw": {
@@ -3365,9 +3387,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.5.tgz",
-      "integrity": "sha512-4ZOwtk2bqG5Y6xRGHcveZVr+6txkH7M2e+nPFd6guSoN638v/1XQ0K06eOpi0ptVU/2tW/pIU4IoPotY/GZ9fw==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.6.tgz",
+      "integrity": "sha512-exZyLcEnHgDMKc54TtHca4McV4sKT+NKAe9ix/yhd/qkYb/TP8HTyXRFDijV19qKqTZM0hPL4753zU/U8L/gAA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3378,13 +3400,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.5.tgz",
-      "integrity": "sha512-pKHKy3uaUdh7X6p1pxOkgkVAFW7r2I818vHDthYLvUyjRfkKOU6P45PztOch4DZarWQne+VOaIMwA/erSSpB9g==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.6.tgz",
+      "integrity": "sha512-SjkRGSFyrA82m5nz7To4CkRSEVWn/rwQISHoia/DB8c6IHIhaE/UNAo+7UfeaeJRE979XceGl00LNkIz09RFsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "2.1.5",
+        "@vitest/utils": "2.1.6",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -3392,13 +3414,13 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.5.tgz",
-      "integrity": "sha512-zmYw47mhfdfnYbuhkQvkkzYroXUumrwWDGlMjpdUr4jBd3HZiV2w7CQHj+z7AAS4VOtWxI4Zt4bWt4/sKcoIjg==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.6.tgz",
+      "integrity": "sha512-5JTWHw8iS9l3v4/VSuthCndw1lN/hpPB+mlgn1BUhFbobeIUj1J1V/Bj2t2ovGEmkXLTckFjQddsxS5T6LuVWw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.5",
+        "@vitest/pretty-format": "2.1.6",
         "magic-string": "^0.30.12",
         "pathe": "^1.1.2"
       },
@@ -3407,9 +3429,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.5.tgz",
-      "integrity": "sha512-aWZF3P0r3w6DiYTVskOYuhBc7EMc3jvn1TkBg8ttylFFRqNN2XGD7V5a4aQdk6QiUzZQ4klNBSpCLJgWNdIiNw==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.6.tgz",
+      "integrity": "sha512-oTFObV8bd4SDdRka5O+mSh5w9irgx5IetrD5i+OsUUsk/shsBoHifwCzy45SAORzAhtNiprUVaK3hSCCzZh1jQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3420,13 +3442,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.5.tgz",
-      "integrity": "sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.6.tgz",
+      "integrity": "sha512-ixNkFy3k4vokOUTU2blIUvOgKq/N2PW8vKIjZZYsGJCMX69MRa9J2sKqX5hY/k5O5Gty3YJChepkqZ3KM9LyIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.5",
+        "@vitest/pretty-format": "2.1.6",
         "loupe": "^3.1.2",
         "tinyrainbow": "^1.2.0"
       },
@@ -3558,15 +3580,15 @@
       }
     },
     "node_modules/@vue/eslint-config-typescript": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.1.3.tgz",
-      "integrity": "sha512-L4NUJQz/0We2QYtrNwRAGRy4KfpOagl5V3MpZZ+rQ51a+bKjlKYYrugi7lp7PIX8LolRgu06ZwDoswnSGWnAmA==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.1.4.tgz",
+      "integrity": "sha512-NcG1adLFde+t+TCaXlL38PHuZlBEuwDahgrPVyB052m9QeHOswVIAplMD2cXgH8vXieAVNF1+mXvyilpIO3+kg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "^8.8.1",
+        "@typescript-eslint/eslint-plugin": "^8.15.0",
         "fast-glob": "^3.3.2",
-        "typescript-eslint": "^8.8.1",
+        "typescript-eslint": "^8.15.0",
         "vue-eslint-parser": "^9.4.3"
       },
       "engines": {
@@ -3689,14 +3711,14 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.2.0.tgz",
-      "integrity": "sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==",
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.3.0.tgz",
+      "integrity": "sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "11.2.0",
-        "@vueuse/shared": "11.2.0",
+        "@vueuse/metadata": "11.3.0",
+        "@vueuse/shared": "11.3.0",
         "vue-demi": ">=0.14.10"
       },
       "funding": {
@@ -3730,18 +3752,18 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.2.0.tgz",
-      "integrity": "sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==",
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.3.0.tgz",
+      "integrity": "sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.2.0.tgz",
-      "integrity": "sha512-VxFjie0EanOudYSgMErxXfq6fo8vhr5ICI+BuE3I9FnX7ePllEsVrRQ7O6Q1TLgApeLuPKcHQxAXpP+KnlrJsg==",
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.3.0.tgz",
+      "integrity": "sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==",
       "license": "MIT",
       "dependencies": {
         "vue-demi": ">=0.14.10"
@@ -7775,9 +7797,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz",
+      "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -7996,9 +8018,9 @@
       }
     },
     "node_modules/remeda": {
-      "version": "2.17.3",
-      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.17.3.tgz",
-      "integrity": "sha512-xyi2rCQkz2j4BEWbWxPw6JCapv1yBuSwr4Uf9BX00AkesAJaiKvc6Il6thsBidwVZAtNiSaCIXvslkKL0ybz8w==",
+      "version": "2.17.4",
+      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.17.4.tgz",
+      "integrity": "sha512-pviU2Ag7Qx9mOCAKO4voxDx/scfLzdhp3v85qDO4xxntQsU76uE9sgrAAdK1ATn4zzaOJqCXYMMNRP+O9F4Wiw==",
       "license": "MIT",
       "dependencies": {
         "type-fest": "^4.27.0"
@@ -8738,6 +8760,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-icons": {
+      "version": "13.18.0",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-13.18.0.tgz",
+      "integrity": "sha512-nxG6XOUKWgt0K7eochrIn46tLBvOcUhcSpVUwWpo8WRkS4RHxreRIRosScDm4KmmTeDuNbW114GjviHlOSWyTg==",
+      "license": "CC0-1.0",
+      "engines": {
+        "node": ">=0.12.18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/simple-icons"
+      }
+    },
     "node_modules/smob": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
@@ -9606,15 +9641,15 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.11.0.tgz",
-      "integrity": "sha512-cBRGnW3FSlxaYwU8KfAewxFK5uzeOAp0l2KebIlPDOT5olVi65KDG/yjBooPBG0kGW/HLkoz1c/iuBFehcS3IA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.16.0.tgz",
+      "integrity": "sha512-wDkVmlY6O2do4V+lZd0GtRfbtXbeD0q9WygwXXSJnC1xorE8eqyC2L1tJimqpSeFrOzRlYtWnUp/uzgHQOgfBQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.11.0",
-        "@typescript-eslint/parser": "8.11.0",
-        "@typescript-eslint/utils": "8.11.0"
+        "@typescript-eslint/eslint-plugin": "8.16.0",
+        "@typescript-eslint/parser": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -9623,6 +9658,9 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
@@ -9646,9 +9684,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
       "dev": true,
       "license": "MIT"
     },
@@ -9846,9 +9884,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.5.tgz",
-      "integrity": "sha512-rd0QIgx74q4S1Rd56XIiL2cYEdyWn13cunYBIuqh9mpmQr7gGS0IxXoP8R6OaZtNQQLyXSWbd4rXKYUbhFpK5w==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.6.tgz",
+      "integrity": "sha512-DBfJY0n9JUwnyLxPSSUmEePT21j8JZp/sR9n+/gBwQU6DcQOioPdb8/pibWfXForbirSagZCilseYIwaL3f95A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9856,13 +9894,13 @@
         "debug": "^4.3.7",
         "es-module-lexer": "^1.5.4",
         "pathe": "^1.1.2",
-        "vite": "^5.0.0"
+        "vite": "^5.0.0 || ^6.0.0"
       },
       "bin": {
         "vite-node": "vite-node.mjs"
       },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -9915,19 +9953,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.5.tgz",
-      "integrity": "sha512-P4ljsdpuzRTPI/kbND2sDZ4VmieerR2c9szEZpjc+98Z9ebvnXmM5+0tHEKqYZumXqlvnmfWsjeFOjXVriDG7A==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.6.tgz",
+      "integrity": "sha512-isUCkvPL30J4c5O5hgONeFRsDmlw6kzFEdLQHLezmDdKQHy8Ke/B/dgdTMEgU0vm+iZ0TjW8GuK83DiahBoKWQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "2.1.5",
-        "@vitest/mocker": "2.1.5",
-        "@vitest/pretty-format": "^2.1.5",
-        "@vitest/runner": "2.1.5",
-        "@vitest/snapshot": "2.1.5",
-        "@vitest/spy": "2.1.5",
-        "@vitest/utils": "2.1.5",
+        "@vitest/expect": "2.1.6",
+        "@vitest/mocker": "2.1.6",
+        "@vitest/pretty-format": "^2.1.6",
+        "@vitest/runner": "2.1.6",
+        "@vitest/snapshot": "2.1.6",
+        "@vitest/spy": "2.1.6",
+        "@vitest/utils": "2.1.6",
         "chai": "^5.1.2",
         "debug": "^4.3.7",
         "expect-type": "^1.1.0",
@@ -9938,24 +9976,24 @@
         "tinyexec": "^0.3.1",
         "tinypool": "^1.0.1",
         "tinyrainbow": "^1.2.0",
-        "vite": "^5.0.0",
-        "vite-node": "2.1.5",
+        "vite": "^5.0.0 || ^6.0.0",
+        "vite-node": "2.1.6",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
         "vitest": "vitest.mjs"
       },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
         "@edge-runtime/vm": "*",
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.1.5",
-        "@vitest/ui": "2.1.5",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "2.1.6",
+        "@vitest/ui": "2.1.6",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -10106,9 +10144,9 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
-      "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
diff --git a/package.json b/package.json
index ba450e9..cbacb2b 100644
--- a/package.json
+++ b/package.json
@@ -21,18 +21,19 @@
     "@fontsource/nunito": "^5.1.0",
     "@headlessui/vue": "^1.7.23",
     "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^11.2.0",
+    "@vueuse/core": "^11.3.0",
     "@xstate/vue": "^4.0.0",
     "canvas-confetti": "^1.9.3",
     "chart.js": "^4.4.6",
     "chartjs-plugin-datalabels": "^2.2.0",
     "luxon": "^3.5.0",
     "pinia": "^2.2.6",
-    "remeda": "^2.17.3",
+    "remeda": "^2.17.4",
+    "simple-icons": "^13.18.0",
     "vue": "3.5.13",
     "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.4",
-    "vue-router": "^4.4.5",
+    "vue-router": "^4.5.0",
     "xstate": "^5.19.0"
   },
   "devDependencies": {
@@ -43,12 +44,12 @@
     "@types/canvas-confetti": "^1.6.4",
     "@types/jsdom": "^21.1.7",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.9.1",
-    "@vitejs/plugin-vue": "^5.2.0",
-    "@vitest/coverage-istanbul": "^2.1.5",
-    "@vitest/eslint-plugin": "^1.1.10",
+    "@types/node": "^22.10.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-istanbul": "^2.1.6",
+    "@vitest/eslint-plugin": "^1.1.11",
     "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/eslint-config-typescript": "^14.1.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.6.0",
     "autoprefixer": "^10.4.20",
@@ -59,13 +60,13 @@
     "jsdom": "^25.0.1",
     "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "sass-embedded": "^1.81.0",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-pwa": "^0.21.0",
-    "vitest": "^2.1.5",
+    "vitest": "^2.1.6",
     "vue-tsc": "^2.1.10"
   },
   "engines": {
diff --git a/src/components/BlueskyLink.vue b/src/components/BlueskyLink.vue
index af3b1da..17d3d87 100644
--- a/src/components/BlueskyLink.vue
+++ b/src/components/BlueskyLink.vue
@@ -7,8 +7,8 @@
     noreferrer
     noopener
   >
-    <IconComponent icon="butterflyOutline" />
-    {{ $t('general.follow', ['Bluesky']) }}
+    <IconComponent icon="bluesky" />
+    {{ $t('general.follow') }}
   </a>
 </template>
 <style lang="scss" scoped>
diff --git a/src/components/IconComponent.vue b/src/components/IconComponent.vue
index d61cb70..c755f39 100644
--- a/src/components/IconComponent.vue
+++ b/src/components/IconComponent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  mdiButterflyOutline,
   mdiCalendarWeekOutline,
   mdiChartBar,
   mdiChartLine,
@@ -20,9 +19,10 @@ import {
   mdiTrashCan,
   mdiTrophyOutline,
 } from '@mdi/js';
+import {siBluesky} from 'simple-icons';
 
 export type IconString =
-  | 'butterflyOutline'
+  | 'bluesky'
   | 'calendarWeekOutline'
   | 'chart'
   | 'chartLine'
@@ -53,7 +53,7 @@ withDefaults(
 );
 
 const icons = {
-  butterflyOutline: mdiButterflyOutline,
+  bluesky: siBluesky.path,
   calendarWeekOutline: mdiCalendarWeekOutline,
   chart: mdiChartBar,
   chartLine: mdiChartLine,
diff --git a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
index 74ec096..fd74e3b 100644
--- a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`HomeView > renders 1`] = `
     </button><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary" data-test-id="home-start-button">
       <!--v-if-->Start
     </button></div><a data-v-ba48d2a1="" data-v-b4e148ca="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M13 21H11V6L9.03 3.97L10 3L12 5L14 3L15 4L13 6V21M14 9H14V7C14.84 6.37 15.88 6 17 6C19.76 6 22 8.24 22 11C22 12.64 21.21 14.09 20 15H20V17C20 19.21 18.21 21 16 21C15.27 21 14.59 20.81 14 20.46V18.46C14.59 18.81 15.27 19 16 19C17.1 19 18 18.1 18 17V13.83C19.17 13.42 20 12.31 20 11C20 9.35 18.67 8 17 8H17C15.88 8 14.84 8.37 14 9M10 9H10C9.16 8.37 8.13 8 7 8H7C5.33 8 4 9.35 4 11C4 12.31 4.84 13.42 6 13.83V17C6 18.1 6.9 19 8 19C8.73 19 9.41 18.81 10 18.46V20.46C9.41 20.81 8.73 21 8 21C5.79 21 4 19.21 4 17V15H4C2.79 14.09 2 12.64 2 11C2 8.24 4.24 6 7 6C8.13 6 9.16 6.37 10 7V9M9 11L7.5 9.5L6 11L7.5 12.5L9 11M18 11L16.5 9.5L15 11L16.5 12.5L18 11Z" class="transition-all"></path>
+      <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" class="transition-all"></path>
     </svg> Follow on Bluesky</a>
   <!---->
 </div>"
diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
index 6636409..f18d988 100644
--- a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LogView > renders 1`] = `
-"<h1 class="sr-only">Track Progress</h1>
+"<h1 class="sr-only">Weekly Progress</h1>
 <div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Track Weekly Veggies" placeholder="Track Weekly Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
@@ -10,12 +10,12 @@ exports[`LogView > renders 1`] = `
 <front-page-animation-stub></front-page-animation-stub>
 <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>
 <a data-v-ba48d2a1="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-    <path d="M13 21H11V6L9.03 3.97L10 3L12 5L14 3L15 4L13 6V21M14 9H14V7C14.84 6.37 15.88 6 17 6C19.76 6 22 8.24 22 11C22 12.64 21.21 14.09 20 15H20V17C20 19.21 18.21 21 16 21C15.27 21 14.59 20.81 14 20.46V18.46C14.59 18.81 15.27 19 16 19C17.1 19 18 18.1 18 17V13.83C19.17 13.42 20 12.31 20 11C20 9.35 18.67 8 17 8H17C15.88 8 14.84 8.37 14 9M10 9H10C9.16 8.37 8.13 8 7 8H7C5.33 8 4 9.35 4 11C4 12.31 4.84 13.42 6 13.83V17C6 18.1 6.9 19 8 19C8.73 19 9.41 18.81 10 18.46V20.46C9.41 20.81 8.73 21 8 21C5.79 21 4 19.21 4 17V15H4C2.79 14.09 2 12.64 2 11C2 8.24 4.24 6 7 6C8.13 6 9.16 6.37 10 7V9M9 11L7.5 9.5L6 11L7.5 12.5L9 11M18 11L16.5 9.5L15 11L16.5 12.5L18 11Z" class="transition-all"></path>
+    <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" class="transition-all"></path>
   </svg> Follow on Bluesky</a>"
 `;
 
 exports[`LogView > renders with data 1`] = `
-"<h1 class="sr-only">Track Progress</h1>
+"<h1 class="sr-only">Weekly Progress</h1>
 <div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Track Weekly Veggies" placeholder="Track Weekly Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
@@ -52,6 +52,6 @@ exports[`LogView > renders with data 1`] = `
     </button></li>
 </transition-group-stub>
 <a data-v-ba48d2a1="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-    <path d="M13 21H11V6L9.03 3.97L10 3L12 5L14 3L15 4L13 6V21M14 9H14V7C14.84 6.37 15.88 6 17 6C19.76 6 22 8.24 22 11C22 12.64 21.21 14.09 20 15H20V17C20 19.21 18.21 21 16 21C15.27 21 14.59 20.81 14 20.46V18.46C14.59 18.81 15.27 19 16 19C17.1 19 18 18.1 18 17V13.83C19.17 13.42 20 12.31 20 11C20 9.35 18.67 8 17 8H17C15.88 8 14.84 8.37 14 9M10 9H10C9.16 8.37 8.13 8 7 8H7C5.33 8 4 9.35 4 11C4 12.31 4.84 13.42 6 13.83V17C6 18.1 6.9 19 8 19C8.73 19 9.41 18.81 10 18.46V20.46C9.41 20.81 8.73 21 8 21C5.79 21 4 19.21 4 17V15H4C2.79 14.09 2 12.64 2 11C2 8.24 4.24 6 7 6C8.13 6 9.16 6.37 10 7V9M9 11L7.5 9.5L6 11L7.5 12.5L9 11M18 11L16.5 9.5L15 11L16.5 12.5L18 11Z" class="transition-all"></path>
+    <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" class="transition-all"></path>
   </svg> Follow on Bluesky</a>"
 `;
diff --git a/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap b/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap
index 96d4de7..9996d98 100644
--- a/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavBar > renders 1`] = `
-"<nav data-v-c3ceb15a="" class="navbar"><a data-v-c3ceb15a="" href="/veggies/log" class="nav__link nav__link--log" aria-label="Track Progress" data-test-id="navbar-link-log">Eat Your Veggies</a>
+"<nav data-v-c3ceb15a="" class="navbar"><a data-v-c3ceb15a="" href="/veggies/log" class="nav__link nav__link--log" aria-label="Weekly Progress" data-test-id="navbar-link-log">Eat Your Veggies</a>
   <div data-v-c3ceb15a="" class="flex-container">
     <!--v-if--><a data-v-c3ceb15a="" href="/veggies/settings" class="nav__link" title="Settings" aria-label="Settings" data-test-id="navbar-link-settings"><svg data-v-c3ceb15a="" style="width: 6vw; height: 6vw;" class="flex-shrink-0 nav__link-icon" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" class="transition-all"></path>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f2b237e..9818344 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -679,7 +679,7 @@
     "clickToAdd": "Add {0}",
     "clickToRemove": "Remove {0}",
     "close": "Close",
-    "follow": "Follow on {0}",
+    "follow": "Follow on Bluesky",
     "start": "Start"
   },
   "home": {
@@ -1021,7 +1021,7 @@
   },
   "views": {
     "home": "Home",
-    "log": "Track Progress",
+    "log": "Weekly Progress",
     "settings": "Settings",
     "stats": "Statistics"
   }
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 38ebb0f..47c183f 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -87,7 +87,7 @@
   },
   "categoryStatus": {
     "bottomLabel": "Kasvista",
-    "bottomLabelTotal": "Toimintoa",
+    "bottomLabelTotal": "Lisäystä",
     "centerLabel": "{0} {1} {2}",
     "entry": "{0} {1} ({2})",
     "topLabel": "Tällä Viikolla",
@@ -687,7 +687,7 @@
     "clickToAdd": "Lisää {0}",
     "clickToRemove": "Poista {0}",
     "close": "Sulje",
-    "follow": "Seuraa palvelussa {0}",
+    "follow": "Seuraa Blueskyssä",
     "start": "Aloita"
   },
   "home": {
@@ -1029,7 +1029,7 @@
   },
   "views": {
     "home": "Etusivu",
-    "log": "Seuraa Edistymistäsi",
+    "log": "Viikkoseuranta",
     "settings": "Asetukset",
     "stats": "Tilastot"
   }