feat(rating): display the percent the 24h score and 1h score value changed compared to the previous one (+5%; +10%, -7% etc)

components/RatingTable.vue

@@ -140,10 +140,16 @@ const maxValues = computed(() => {
                 {{ userRating.score7days }}
               </td>
               <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
-                {{ userRating.score24hours }}
+                <ScoreWithChange
+                  v-if="userRating.score24hours"
+                  :score="userRating.score24hours"
+                />
               </td>
               <td class="px-6 py-4">
-                {{ userRating.score1hour }}
+                <ScoreWithChange
+                  v-if="userRating.score1hour"
+                  :score="userRating.score1hour"
+                />
               </td>
               <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
                 {{ userRating.wins }}

components/ScoreWithChange.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{
+  score: {
+    value: number;
+    change: number | null;
+  };
+}>();
+
+const changeColorClass = computed(() => {
+  if (props.score.change === null || props.score.change === 0) {
+    return "text-gray-500 dark:text-gray-400";
+  }
+  return props.score.change > 0 ? "text-green-500" : "text-red-500";
+});
+
+const formattedChange = computed(() => {
+  if (props.score.change === null) {
+    return "new"; // Display for changes from 0
+  }
+  const sign = props.score.change > 0 ? "+" : "";
+  // Use toFixed(0) for cleaner percentages unless you need decimals
+  return `${sign}${props.score.change.toFixed(0)}%`;
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-2 justify-start">
+    <span>{{ score.value }}</span>
+    <span
+      v-if="score.change !== 0"
+      :class="changeColorClass"
+      class="text-xs font-semibold"
+    >
+      ({{ formattedChange }})
+    </span>
+  </div>
+</template>