Use composition for translation

app/pages/hunt/[huntSlug]/[questSlug]/index.vue

@@ -11,7 +11,7 @@ const app = useNuxtApp();
 const { user } = useUserSession();
 const { huntSlug, questSlug } = app.$slugData;
 
-const { t, locale } = useI18n();
+const { t, locale, d } = useI18n();
 
 const titleStore = useTitleStore();
 
@@ -110,7 +110,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
       icon="refresh"
       :loading="pending"
       color="success"
-      >{{ $t('layouts.refresh') }}</VaButton
+      >{{ t('layouts.refresh') }}</VaButton
     >
     <VaButton
       v-if="user && user.role === 'ADMIN'"
@@ -146,7 +146,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               {{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
             </p>
             <p v-if="data.question">
-              🖋: {{ $t(`enums.text_type.${data.textType}`) }}
+              🖋: {{ t(`enums.text_type.${data.textType}`) }}
             </p>
             <p v-if="data.extraText">
               <span class="uppercase">Extra points:</span> {{ data.extraText }}
@@ -163,7 +163,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             <span v-if="data.answer.review.reviewer" class="text-sm">
               by {{ data.answer.review.reviewer.name }} at
               {{
-                $d(data.answer.updatedAt, {
+                d(data.answer.updatedAt, {
                   dateStyle: 'medium',
                   timeStyle: 'medium'
                 })
@@ -193,7 +193,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               clearable-icon="replay"
               :type="textType[data.textType]"
               :messages="[
-                $t(`enums.text_type.${data.textType}`),
+                t(`enums.text_type.${data.textType}`),
                 data.textRequired ? 'Required Answer' : undefined
               ]"
             >
@@ -227,7 +227,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             <p v-if="data.answer?.updatedAt">
               Last update:
               {{
-                $d(
+                d(
                   data.answer.updatedAt,
                   {
                     dateStyle: 'medium',
@@ -249,7 +249,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               v-if="submitError.length > 0"
               color="danger"
               class="w-full text-center"
-              >{{ $t(submitError) }}</VaAlert
+              >{{ t(submitError) }}</VaAlert
             >
             <VaButton
               v-if="!data.answer?.final"
@@ -273,7 +273,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
     </div>
   </div>
   <div v-if="error" class="mt-8 text-3xl">
-    {{ $t(parseError(error)) }}
+    {{ t(parseError(error)) }}
   </div>
 </template>
 

app/pages/hunt/[huntSlug]/admin.vue

@@ -9,7 +9,7 @@ definePageMeta({
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
 const localePath = useLocalePath();
-const { t } = useI18n();
+const { t, d } = useI18n();
 const router = useRouter();
 
 const { confirm } = useModal();
@@ -227,7 +227,7 @@ async function addUser() {
     <p>
       Last update:
       {{
-        $d(data.updatedAt, {
+        d(data.updatedAt, {
           dateStyle: 'medium',
           timeStyle: 'medium'
         })

app/pages/hunt/[huntSlug]/index.vue

@@ -5,7 +5,7 @@ import { useTitleStore } from '~/stores/title';
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
 const localePath = useLocalePath();
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 const { name, id } = app.$slugData.huntSlug!;
 
@@ -43,6 +43,12 @@ async function invite() {
 <template>
   <h1 class="text-2xl">
     {{ data?.name || name }}
+    <VaButton
+      icon="replay"
+      @click="refresh"
+      :disabled="pending"
+      title="Refresh"
+    />
     <VaButtonGroup v-if="data?.isMember">
       <VaButton
         color="danger"
@@ -78,7 +84,7 @@ async function invite() {
     <p v-if="data.start">
       Start:
       {{
-        $d(data.start, {
+        d(data.start, {
           dateStyle: 'medium',
           timeStyle: 'medium'
         })
@@ -87,7 +93,7 @@ async function invite() {
     <p v-if="data.end">
       End:
       {{
-        $d(data.end, {
+        d(data.end, {
           dateStyle: 'medium',
           timeStyle: 'medium'
         })
@@ -176,6 +182,7 @@ async function invite() {
         <VaCardActions v-if="data.isMember">
           <VaButton
             color="danger"
+            :icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
             :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}/admin`)"
             >Admin ({{ quest.unreviewed || 0 }} unreviewed)</VaButton
           >
@@ -192,7 +199,7 @@ async function invite() {
   </div>
 
   <div v-if="error">
-    <h1 class="mt-8 text-3xl">{{ $t(parseError(error)) }}</h1>
+    <h1 class="mt-8 text-3xl">{{ t(parseError(error)) }}</h1>
     <VaButton icon="arrow_back" :to="$localePath(`/`)">Back home</VaButton>
   </div>
 </template>

app/pages/hunt/[huntSlug]/showcase.vue

@@ -7,6 +7,7 @@ definePageMeta({
   // middleware: ['admin'],
   layout: 'full'
 });
+const { t, d } = useI18n();
 
 const app = useNuxtApp();
 const { name, id } = app.$slugData.huntSlug!;
@@ -51,18 +52,18 @@ const columns = leaderboardColumns.map((c) =>
       <div
         class="flex flex-col items-center justify-center gap-8 bg-green-300 text-center"
       >
-        <h1 class="text-7xl">{{ $t('page.showcase.showcase_for') }}</h1>
+        <h1 class="text-7xl">{{ t('page.showcase.showcase_for') }}</h1>
         <h1 class="text-9xl font-bold">{{ data.name || name }}</h1>
         <p v-if="data.start || data.end" class="flex flex-row gap-4 text-4xl">
           <span v-if="data.start">{{
-            $d(data.start, {
+            d(data.start, {
               dateStyle: 'medium',
               timeStyle: 'medium'
             })
           }}</span
           ><span v-if="data.start && data.end"> – </span
           ><span v-if="data.end">{{
-            $d(data.end, {
+            d(data.end, {
               dateStyle: 'medium',
               timeStyle: 'medium'
             })
@@ -73,32 +74,32 @@ const columns = leaderboardColumns.map((c) =>
     <section id="numbers">
       <div class="grid grid-cols-3 gap-4 bg-red-100 p-4">
         <NumberCard
-          :title="$t('page.showcase.crew')"
+          :title="t('page.showcase.crew')"
           :count="data._count.members + 1"
           icon="support_agent"
         />
         <NumberCard
-          :title="$t('page.showcase.quests')"
+          :title="t('page.showcase.quests')"
           :count="data._count.quests"
           icon="home"
         />
         <NumberCard
-          :title="$t('page.showcase.users')"
+          :title="t('page.showcase.users')"
           :count="data.userCount"
           icon="person"
         />
         <NumberCard
-          :title="$t('page.showcase.teams')"
+          :title="t('page.showcase.teams')"
           :count="data._count.teams"
           icon="groups"
         />
         <NumberCard
-          :title="$t('page.showcase.total_points')"
+          :title="t('page.showcase.total_points')"
           :count="data.totalScore"
           icon="star"
         />
         <NumberCard
-          :title="$t('page.showcase.pictures')"
+          :title="t('page.showcase.pictures')"
           :count="data.pictureCount"
           icon="photo"
         />
@@ -141,7 +142,7 @@ const columns = leaderboardColumns.map((c) =>
     <section id="leaderboard" v-if="data.leaderboard.length > 3">
       <div class="flex flex-col gap-4 bg-indigo-100">
         <h1 class="mt-8 text-center text-6xl">
-          {{ $t('page.showcase.leaderboard') }}
+          {{ t('page.showcase.leaderboard') }}
         </h1>
         <VaDataTable
           class="h-full text-2xl"
@@ -152,7 +153,7 @@ const columns = leaderboardColumns.map((c) =>
           :columns="leaderboardColumns"
         >
           <template v-for="col in columns" #[col]
-            ><span>{{ $t(`page.showcase.table.${col}`) }}</span></template
+            ><span>{{ t(`page.showcase.table.${col}`) }}</span></template
           >
           <template #cell(place)="{ rowIndex }">
             <strong>{{ rowIndex + 4 }}</strong>
@@ -164,18 +165,18 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#AD8A56]">
         <div class="place-left">
           <VaIcon name="looks_3" size="10rem" />
-          <h2>{{ $t('page.showcase.third_place') }}</h2>
+          <h2>{{ t('page.showcase.third_place') }}</h2>
         </div>
         <div class="place-right">
           <h3>{{ data.leaderboard[2].name }}</h3>
           <p>{{ data.leaderboard[2].description }}</p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[2].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[2].answers"
             icon="question_mark"
           />
@@ -186,18 +187,18 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#B4B4B4]">
         <div class="place-left">
           <VaIcon name="looks_two" size="10rem" />
-          <h2>{{ $t('page.showcase.second_place') }}</h2>
+          <h2>{{ t('page.showcase.second_place') }}</h2>
         </div>
         <div class="place-right">
           <h3>{{ data.leaderboard[1].name }}</h3>
           <p>{{ data.leaderboard[1].description }}</p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[1].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[1].answers"
             icon="question_mark"
           />
@@ -208,7 +209,7 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#C9B037]">
         <div class="place-left">
           <VaIcon name="looks_one" size="10rem" />
-          <h2>{{ $t('page.showcase.first_place') }}</h2>
+          <h2>{{ t('page.showcase.first_place') }}</h2>
         </div>
         <div class="place-right">
           <h3 class="bg-white text-white">{{ data.leaderboard[0].name }}</h3>
@@ -216,12 +217,12 @@ const columns = leaderboardColumns.map((c) =>
             {{ data.leaderboard[0].description }}
           </p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[0].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[0].answers"
             icon="question_mark"
           />
@@ -232,18 +233,18 @@ const columns = leaderboardColumns.map((c) =>
       <div class="place bg-[#C9B037]">
         <div class="place-left">
           <VaIcon name="workspace_premium" size="10rem" />
-          <h2>{{ $t('page.showcase.first_place') }}</h2>
+          <h2>{{ t('page.showcase.first_place') }}</h2>
         </div>
         <div class="place-right">
           <h3>{{ data.leaderboard[0].name }}</h3>
           <p>{{ data.leaderboard[0].description }}</p>
           <NumberCard
-            :title="$t('page.showcase.points')"
+            :title="t('page.showcase.points')"
             :count="data.leaderboard[0].score"
             icon="star"
           />
           <NumberCard
-            :title="$t('page.showcase.answers')"
+            :title="t('page.showcase.answers')"
             :count="data.leaderboard[0].answers"
             icon="question_mark"
           />