improvement

apps/currencia/app/components/ThemeToggle.vue

@@ -1,13 +1,27 @@
 <script setup lang="ts">
+defineProps({
+  size: {
+    type: String,
+    default: 'size-4'
+  }
+})
+
 const colorMode = useColorMode()
+const reduceMotion = useCookie<boolean>('reduceMotion', {
+  watch: true,
+})
 
 const switchTheme = () => {
   colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
   colorMode.preference = colorMode.value
 }
 
-function startViewTransition(theme) {
+const startViewTransition = (theme) => {
   if (theme === colorMode.value) return
+  if (reduceMotion.value) {
+    switchTheme()
+    return
+  }
   if (!document.startViewTransition) {
     switchTheme()
     return
@@ -16,7 +30,16 @@ function startViewTransition(theme) {
     switchTheme()
     return
   }
-  document.startViewTransition(switchTheme)
+
+  document.documentElement.classList.add('theme-transitioning')
+
+  const transition = document.startViewTransition(() => {
+    switchTheme()
+  })
+
+  transition.finished.then(() => {
+    document.documentElement.classList.remove('theme-transitioning')
+  })
 }
 </script>
 
@@ -26,34 +49,36 @@ function startViewTransition(theme) {
       :icon="$colorMode.value === 'light' ? 'heroicons:moon-20-solid' : 'heroicons:sun-20-solid'"
       color="gray"
       variant="ghost"
+      square
       aria-label="Theme"
       @click="startViewTransition($colorMode.value === 'light' ? 'dark' : 'light')"
     />
     <template #fallback>
-      <div class="size-8" />
+      <div :class="size" />
     </template>
   </ClientOnly>
 </template>
 
 <style>
-/* Dark/Light reveal effect */
-::view-transition-group(root) {
+.theme-transitioning::view-transition-group(root) {
   animation-duration: 1.5s;
 }
-::view-transition-new(root),
-::view-transition-old(root) {
+
+.theme-transitioning::view-transition-new(root),
+.theme-transitioning::view-transition-old(root) {
   mix-blend-mode: normal;
 }
 
-::view-transition-new(root) {
+.theme-transitioning::view-transition-new(root) {
   animation-name: reveal-light;
 }
 
-::view-transition-old(root),
-.dark::view-transition-old(root) {
+.theme-transitioning::view-transition-old(root),
+.dark.theme-transitioning::view-transition-old(root) {
   animation: none;
 }
-.dark::view-transition-new(root) {
+
+.dark.theme-transitioning::view-transition-new(root) {
   animation-name: reveal-dark;
 }
 

apps/currencia/app/components/chart/Line.vue

@@ -1,16 +1,16 @@
 <!-- eslint-disable -->
 <script setup lang="ts">
-import type { ApexOptions, TimeFrame, Variations, ApexChartSeries } from '~~/types/ApexChart'
+import type { ApexOptions, TimeFrame, Variations } from '~~/types/ApexChart'
 
 type ChartLineProps = {
   showTooltip?: boolean
-  cryptoData?: ApexChartSeries['data']
+  data?: [number, number][]
 }
 
 const colorMode = useColorMode()
 const dayjs = useDayjs()
 
-const { showTooltip = false, cryptoData } = defineProps<ChartLineProps>()
+const { showTooltip = false, data } = defineProps<ChartLineProps>()
 const emit = defineEmits(['update:currentValue', 'update:variation'])
 
 const timeframe = ref<TimeFrame>({
@@ -49,7 +49,7 @@ const isPositive = computed(() => {
 
 const series = [
   {
-    data: cryptoData ? cryptoData : getRandomDailyData(),
+    data: data ? data : getRandomDailyData(),
   },
 ]
 
@@ -217,12 +217,11 @@ const chartOptions = {
   },
 } satisfies ApexOptions
 
-watch(() => cryptoData, () => {
-  const cryptoDataCopy = cryptoData
+watch(() => data, () => {
   // sort by timestamp
   chart.value.chart.updateSeries([
     {
-      data: cryptoDataCopy.sort((a, b) => a.timestamp - b.timestamp)
+      data: data.sort((a, b) => a.timestamp - b.timestamp)
     }
   ])
 })

apps/currencia/app/pages/app/crypto/[symbol].vue

@@ -6,30 +6,27 @@ import type { Crypto } from '~~/types/Crypto'
 const dayjs = useDayjs()
 
 const cryptos = usePublicCrypto()
-const { symbol } = useRoute().params
+const { symbol } = useRoute().params as { symbol: string }
 
 const crypto = cryptos.value.find((crypto: Crypto) => crypto.symbol === symbol) as Crypto
 
 if (!crypto) useRouter().push('/app/market')
 
-const cryptoData = ref(crypto.data)
-
 const variations = ref<Variations>({
   percent: -1,
   value: -1,
 })
 
-const price = ref(crypto.data[crypto.data.length - 1][1])
+const price = useCryptoPrice(symbol)
+const isHovered = ref(false)
 
-const dynamicData = ref({
-  number: -1,
-  suffix: '$'
-})
+const data = ref<[number, number][]>()
 
 const eventSource = new EventSource(`${location.origin}/api/crypto/${symbol}`)
 
 eventSource.onmessage = (event) => {
-  dynamicData.value.number = +event.data
+  if (!isHovered.value)
+    price.value = +event.data
 }
 
 onUnmounted(() => {
@@ -50,9 +47,11 @@ onUnmounted(() => {
         <div class="flex flex-row items-center">
           <span class="text-4xl font-semibold text-gray-700 dark:text-gray-200">
             <NumberFlow
-              v-if="dynamicData.number !== -1"
-              :value="dynamicData.number"
-              :suffix="dynamicData.suffix"
+              v-if="price"
+              :value="price"
+              suffix="$"
+              :locales="['fr-FR']"
+              :format="{ maximumFractionDigits: 2 }"
               continuous
               class="font-semibold tabular-nums"
             />
@@ -72,9 +71,11 @@ onUnmounted(() => {
     <ChartLine
       style="--stagger: 3; --delay: 100ms"
       data-animate
-      :crypto-data
+      :data
       @update:current-value="price = $event"
       @update:variation="variations = $event"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
     />
     <div v-if="crypto.description" style="--stagger: 4; --delay: 100ms" data-animate class="flex flex-col gap-2">
       <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">

apps/currencia/nuxt.config.ts

@@ -7,6 +7,10 @@ export default defineNuxtConfig({
     compatibilityVersion: 4,
   },
 
+  experimental: {
+    viewTransition: true,
+  },
+
   modules: [
     '@nuxt/image',
     '@nuxt/ui',
@@ -41,10 +45,6 @@ export default defineNuxtConfig({
     storageKey: 'currencia-color-mode',
   },
 
-  image: {
-    format: ['webp'],
-  },
-
   nitro: {
     preset: process.env.NITRO_PRESET || 'bun',
     prerender: {

apps/currencia/package.json

@@ -46,6 +46,8 @@
     "@shelve/cli": "^3.1.0"
   },
   "dependencies": {
-    "@number-flow/vue": "^0.4.1"
+    "@number-flow/vue": "^0.4.1",
+    "@unovis/ts": "^1.5.0",
+    "@unovis/vue": "^1.5.0"
   }
 }