Moved navigation to sub nav

components/calendar/CalendarCurrentDate.vue

@@ -4,26 +4,29 @@ import { computed } from "vue"
 
 import { PhMapPin } from "@phosphor-icons/vue"
 
-const { defaultDate, getFormattedDateTitle, getRelativeString } = useCalendar()
+const { defaultDate, getFormattedDateTitle, getRelativeString, getDifferenceInDays } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
 
 const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
 // const mainDateTitle = computed(() => convertDateToDays(selectedDate.value))
 
 const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
+const isToday = computed(() => getDifferenceInDays(defaultDate, selectedDate.value) === 0)
 </script>
 
 <template>
   <ClientOnly>
-    <h1 class="text-2xl font-bold flex items-center gap-1">
-      <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
-    </h1>
-    <h2 class="text-lg italic opacity-75">
-      {{ dateDifference }}
-    </h2>
+    <div class="flex gap-2 items-center">
+      <h1 class="text-2xl font-bold flex items-center gap-1">
+        <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
+      </h1>
+      <h2 v-if="!isToday" class="text-xl italic opacity-75">
+        – {{ dateDifference }}
+      </h2>
+    </div>
 
     <template #fallback>
-      <div class="grid gap-1">
+      <div class="flex items-center gap-1">
         <UiSkeleton class="h-8 w-64" />
         <UiSkeleton class="h-6 w-28" />
       </div>

components/calendar/CalendarMenu.vue

@@ -8,8 +8,8 @@ const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <header class="border-slate-200 contrast-more:border-slate-500 dark:border-slate-700 border-b-[1px]">
-    <div class="px-8 flex justify-between">
+  <header class="mt-2 grid gap-4 border-slate-200 contrast-more:border-slate-500 dark:border-slate-700 border-b-[1px]">
+    <div class="px-8 flex items-center justify-between gap-2">
       <menu class="flex items-center gap-2">
         <li v-if="!isReadOnly">
           <CalendarDialogQuickCreateEvent />
@@ -17,9 +17,6 @@ const { isReadOnly } = storeToRefs(useCalendar())
         <li>
           <CalendarMenuToday />
         </li>
-        <li>
-          <CalendarMenuNav />
-        </li>
         <li class="ml-4">
           <CalendarCurrentDate />
         </li>

components/calendar/CalendarMenuNav.vue

@@ -1,200 +0,0 @@
-<script lang="ts" setup>
-import { computed, type ComputedRef } from "vue"
-import { useCalendar } from "@/stores/CalendarStore"
-
-import {
-  PhCaretDoubleLeft,
-  PhCaretDoubleRight,
-  PhCaretLeft,
-  PhCaretRight
-} from "@phosphor-icons/vue"
-
-const { t } = useI18n()
-
-interface DirectionLabels {
-  pastFar: string
-  pastNear: string
-  futureNear: string
-  futureFar: string
-}
-
-const { currentConfig, decrementViewMonth, incrementViewMonth, decrementViewYear, incrementViewYear } =
-  useCalendar()
-
-const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
-  switch (currentConfig.viewType) {
-    case "month":
-      return {
-        pastFar: t("entity.calendar.years.prevSingular"),
-        pastNear: t("entity.calendar.months.prevSingular"),
-        futureNear: t("entity.calendar.months.nextSingular"),
-        futureFar: t("entity.calendar.years.nextSingular")
-      }
-
-    case "year":
-      return {
-        pastFar: t("entity.calendar.decades.prevSingular"),
-        pastNear: t("entity.calendar.years.prevSingular"),
-        futureNear: t("entity.calendar.years.nextSingular"),
-        futureFar: t("entity.calendar.decades.nextSingular")
-      }
-
-    case "decade":
-      return {
-        pastFar: t("entity.calendar.centuries.prevSingular"),
-        pastNear: t("entity.calendar.decades.prevSingular"),
-        futureNear: t("entity.calendar.decades.nextSingular"),
-        futureFar: t("entity.calendar.centuries.nextSingular")
-      }
-
-    case "century":
-    default:
-      return {
-        pastFar: t("entity.calendar.millenias.prevSingular"),
-        pastNear: t("entity.calendar.centuries.prevSingular"),
-        futureNear: t("entity.calendar.centuries.nextSingular"),
-        futureFar: t("entity.calendar.millenias.nextSingular")
-      }
-  }
-})
-
-function toPastFar(): void {
-  switch (currentConfig.viewType) {
-    case "month":
-      decrementViewYear()
-      break
-
-    case "year":
-      decrementViewYear(10)
-      break
-
-    case "decade":
-      decrementViewYear(100)
-      break
-
-    case "century":
-    default:
-      decrementViewYear(1000)
-      break
-  }
-}
-
-function toPastNear(): void {
-  switch (currentConfig.viewType) {
-    case "month":
-      decrementViewMonth()
-      break
-
-    case "year":
-      decrementViewYear()
-      break
-
-    case "decade":
-      decrementViewYear(10)
-      break
-
-    case "century":
-    default:
-      decrementViewYear(100)
-      break
-  }
-}
-
-function toFutureNear(): void {
-  switch (currentConfig.viewType) {
-    case "month":
-      incrementViewMonth()
-      break
-
-    case "year":
-      incrementViewYear()
-      break
-
-    case "decade":
-      incrementViewYear(10)
-      break
-
-    case "century":
-    default:
-      incrementViewYear(100)
-      break
-  }
-}
-
-function toFutureFar(): void {
-  switch (currentConfig.viewType) {
-    case "month":
-      incrementViewYear()
-      break
-
-    case "year":
-      incrementViewYear(10)
-      break
-
-    case "decade":
-      incrementViewYear(100)
-      break
-
-    case "century":
-    default:
-      incrementViewYear(1000)
-      break
-  }
-}
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-    <UiTooltipProvider :delay-duration="250">
-      <UiTooltip>
-        <UiTooltipTrigger as-child>
-          <UiButton variant="outline" size="icon" @click="toPastFar()">
-            <PhCaretDoubleLeft size="18" />
-          </UiButton>
-        </UiTooltipTrigger>
-        <UiTooltipContent>
-          <p>{{ activeDirectionLabels.pastFar }}</p>
-        </UiTooltipContent>
-      </UiTooltip>
-    </UiTooltipProvider>
-
-    <UiTooltipProvider :delay-duration="250">
-      <UiTooltip>
-        <UiTooltipTrigger as-child>
-          <UiButton variant="outline" size="icon" @click="toPastNear()">
-            <PhCaretLeft size="18" />
-          </UiButton>
-        </UiTooltipTrigger>
-        <UiTooltipContent>
-          <p>{{ activeDirectionLabels.pastNear }}</p>
-        </UiTooltipContent>
-      </UiTooltip>
-    </UiTooltipProvider>
-
-    <UiTooltipProvider :delay-duration="250">
-      <UiTooltip>
-        <UiTooltipTrigger as-child>
-          <UiButton variant="outline" size="icon" @click="toFutureNear()">
-            <PhCaretRight size="18" />
-          </UiButton>
-        </UiTooltipTrigger>
-        <UiTooltipContent>
-          <p>{{ activeDirectionLabels.futureNear }}</p>
-        </UiTooltipContent>
-      </UiTooltip>
-    </UiTooltipProvider>
-
-    <UiTooltipProvider :delay-duration="250">
-      <UiTooltip>
-        <UiTooltipTrigger as-child>
-          <UiButton variant="outline" size="icon" @click="toFutureFar()">
-            <PhCaretDoubleRight size="18" />
-          </UiButton>
-        </UiTooltipTrigger>
-        <UiTooltipContent>
-          <p>{{ activeDirectionLabels.futureFar }}</p>
-        </UiTooltipContent>
-      </UiTooltip>
-    </UiTooltipProvider>
-  </div>
-</template>

components/calendar/CalendarMenuSubnav.vue

@@ -1,66 +1,140 @@
 <script lang="ts" setup>
+import { PhCaretDoubleLeft, PhCaretDoubleRight, PhCaretLeft, PhCaretRight } from "@phosphor-icons/vue"
+
 const { currentDate } = useCalendar()
 
-// const { toast } = useToast()
-// const { t } = useI18n()
+const { t } = useI18n()
 
-// function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
-//   let fromDate: RPGDate
+interface DirectionLabels {
+  pastFar: string
+  pastNear: string
+  futureNear: string
+  futureFar: string
+}
 
-//   // To modify, obviously
-//   const daysPerMonth = 32
+const { currentConfig, decrementViewMonth, incrementViewMonth, decrementViewYear, incrementViewYear } =
+  useCalendar()
 
-//   const toDay = position === "next" ? daysPerMonth : 1
-//   const toMonth = position === "next" ? monthsPerYear : 0
+const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
+  switch (currentConfig.viewType) {
+    case "month":
+      return {
+        pastFar: t("entity.calendar.years.prevSingular"),
+        pastNear: t("entity.calendar.months.prevSingular"),
+        futureNear: t("entity.calendar.months.nextSingular"),
+        futureFar: t("entity.calendar.years.nextSingular")
+      }
 
-//   switch (currentConfig.viewType) {
-//     case "month":
-//       fromDate = {
-//         day: toDay,
-//         month: currentDate.currentMonth,
-//         year: currentDate.currentYear
-//       }
-//       break
+    case "year":
+      return {
+        pastFar: t("entity.calendar.decades.prevSingular"),
+        pastNear: t("entity.calendar.years.prevSingular"),
+        futureNear: t("entity.calendar.years.nextSingular"),
+        futureFar: t("entity.calendar.decades.nextSingular")
+      }
 
-//     case "year":
-//       fromDate = {
-//         day: toDay,
-//         month: toMonth,
-//         year: currentDate.currentYear
-//       }
-//       break
+    case "decade":
+      return {
+        pastFar: t("entity.calendar.centuries.prevSingular"),
+        pastNear: t("entity.calendar.decades.prevSingular"),
+        futureNear: t("entity.calendar.decades.nextSingular"),
+        futureFar: t("entity.calendar.centuries.nextSingular")
+      }
 
-//     case "decade":
-//       fromDate = {
-//         day: toDay,
-//         month: currentDate.currentMonth,
-//         year: currentDate.currentYear
-//       }
-//       break
+    case "century":
+    default:
+      return {
+        pastFar: t("entity.calendar.millenias.prevSingular"),
+        pastNear: t("entity.calendar.centuries.prevSingular"),
+        futureNear: t("entity.calendar.centuries.nextSingular"),
+        futureFar: t("entity.calendar.millenias.nextSingular")
+      }
+  }
+})
 
-//     case "century":
-//     default:
-//       fromDate = {
-//         day: toDay,
-//         month: currentDate.currentMonth,
-//         year: currentDate.currentYear
-//       }
-//       break
-//   }
+function toPastFar(): void {
+  switch (currentConfig.viewType) {
+    case "month":
+      decrementViewYear()
+      break
 
-//   try {
-//     const { targetDate } = getRelativeEventFromDate(fromDate, position)
+    case "year":
+      decrementViewYear(10)
+      break
 
-//     jumpToDate(targetDate)
-//   } catch (err) {
-//     toast({
-//       title: t("entity.calendar.event.outOfBoundsTitle"),
-//       variant: "default",
-//       description: t("entity.calendar.event.outOfBoundsMessage"),
-//       duration: 4000,
-//     })
-//   }
-// }
+    case "decade":
+      decrementViewYear(100)
+      break
+
+    case "century":
+    default:
+      decrementViewYear(1000)
+      break
+  }
+}
+
+function toPastNear(): void {
+  switch (currentConfig.viewType) {
+    case "month":
+      decrementViewMonth()
+      break
+
+    case "year":
+      decrementViewYear()
+      break
+
+    case "decade":
+      decrementViewYear(10)
+      break
+
+    case "century":
+    default:
+      decrementViewYear(100)
+      break
+  }
+}
+
+function toFutureNear(): void {
+  switch (currentConfig.viewType) {
+    case "month":
+      incrementViewMonth()
+      break
+
+    case "year":
+      incrementViewYear()
+      break
+
+    case "decade":
+      incrementViewYear(10)
+      break
+
+    case "century":
+    default:
+      incrementViewYear(100)
+      break
+  }
+}
+
+function toFutureFar(): void {
+  switch (currentConfig.viewType) {
+    case "month":
+      incrementViewYear()
+      break
+
+    case "year":
+      incrementViewYear(10)
+      break
+
+    case "decade":
+      incrementViewYear(100)
+      break
+
+    case "century":
+    default:
+      incrementViewYear(1000)
+      break
+  }
+}
 </script>
 
 <template>
@@ -76,7 +150,7 @@ const { currentDate } = useCalendar()
         </template>
       </ClientOnly>
     </div>
-    <!-- <div>
+    <div>
       <UiTooltipProvider :delay-duration="250">
         <UiTooltip>
           <UiTooltipTrigger as-child>
@@ -84,15 +158,13 @@ const { currentDate } = useCalendar()
               variant="outline"
               size="icon"
               class="rounded-t-sm rounded-b-none border-b-0"
-              @click="handleGotoPreviousEventPage('prev')"
+              @click="toPastFar()"
             >
-              <PhArrowLineLeft size="22" />
+              <PhCaretDoubleLeft size="18" />
             </UiButton>
           </UiTooltipTrigger>
           <UiTooltipContent>
-            <p>
-              {{ $t('entity.calendar.event.prevPage') }}
-            </p>
+            <p>{{ activeDirectionLabels.pastFar }}</p>
           </UiTooltipContent>
         </UiTooltip>
       </UiTooltipProvider>
@@ -105,18 +177,54 @@ const { currentDate } = useCalendar()
               variant="outline"
               size="icon"
               class="rounded-t-sm rounded-b-none border-b-0"
-              @click="handleGotoPreviousEventPage('next')"
+              @click="toPastNear()"
             >
-              <PhArrowLineRight size="22" />
+              <PhCaretLeft size="18" />
             </UiButton>
           </UiTooltipTrigger>
           <UiTooltipContent>
-            <p>
-              {{ $t('entity.calendar.event.nextPage') }}
-            </p>
+            <p>{{ activeDirectionLabels.pastNear }}</p>
           </UiTooltipContent>
         </UiTooltip>
       </UiTooltipProvider>
-    </div> -->
+    </div>
+    <div>
+      <UiTooltipProvider :delay-duration="250">
+        <UiTooltip>
+          <UiTooltipTrigger as-child>
+            <UiButton
+              variant="outline"
+              size="icon"
+              class="rounded-t-sm rounded-b-none border-b-0"
+              @click="toFutureNear()"
+            >
+              <PhCaretRight size="18" />
+            </UiButton>
+          </UiTooltipTrigger>
+          <UiTooltipContent>
+            <p>{{ activeDirectionLabels.futureNear }}</p>
+          </UiTooltipContent>
+        </UiTooltip>
+      </UiTooltipProvider>
+    </div>
+    <div>
+      <UiTooltipProvider :delay-duration="250">
+        <UiTooltip>
+          <UiTooltipTrigger as-child>
+            <UiButton
+              variant="outline"
+              size="icon"
+              class="rounded-t-sm rounded-b-none border-b-0"
+              @click="toFutureFar()"
+            >
+              <PhCaretDoubleRight size="18" />
+            </UiButton>
+          </UiTooltipTrigger>
+          <UiTooltipContent>
+            <p>{{ activeDirectionLabels.futureFar }}</p>
+          </UiTooltipContent>
+        </UiTooltip>
+      </UiTooltipProvider>
+    </div>
   </div>
 </template>

i18n.config.ts

@@ -99,7 +99,7 @@ export default defineI18nConfig(() => ({
         addDescription: "Add a description",
         deleteOne: "Delete \"{entity}\"",
         advancedSearch: {
-          title: "Advanced search",
+          title: "Search",
           subtitle: "Search through calendar and world data",
           older: "Older",
           newer: "Newer",
@@ -395,7 +395,7 @@ export default defineI18nConfig(() => ({
         addDescription: "Ajouter une description",
         deleteOne: "Supprimer \"{entity}\"",
         advancedSearch: {
-          title: "Recherche avancée",
+          title: "Rechercher",
           subtitle: "Rechercher les données disponibles sur le calendrier",
           older: "Plus ancien",
           newer: "Plus récent",