From 118269a8c9492e649d481181c91aad604c33f84f Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Tue, 16 Jun 2026 20:42:59 +0200
Subject: [PATCH] feat(magic): add IosStarRating and CooldownCountdown
 components

---
 .../app/components/CooldownCountdown.vue      | 37 +++++++++++++++++++
 .../app/components/IosStarRating.vue          | 25 +++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 apps/rebreak-magic/app/components/CooldownCountdown.vue
 create mode 100644 apps/rebreak-magic/app/components/IosStarRating.vue

diff --git a/apps/rebreak-magic/app/components/CooldownCountdown.vue b/apps/rebreak-magic/app/components/CooldownCountdown.vue
new file mode 100644
index 0000000..034b32a
--- /dev/null
+++ b/apps/rebreak-magic/app/components/CooldownCountdown.vue
@@ -0,0 +1,37 @@
+<template>
+  <span class="text-amber-700 font-semibold tabular-nums">
+    {{ display }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+
+const props = defineProps<{
+  until: string;
+}>();
+
+const now = ref(Date.now());
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const remainingMs = computed(() => Math.max(0, new Date(props.until).getTime() - now.value));
+
+const display = computed(() => {
+  const totalSec = Math.floor(remainingMs.value / 1000);
+  const h = Math.floor(totalSec / 3600);
+  const m = Math.floor((totalSec % 3600) / 60);
+  const s = totalSec % 60;
+  if (h > 0) return `${h}h ${String(m).padStart(2, "0")}m`;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+});
+
+onMounted(() => {
+  timer = setInterval(() => {
+    now.value = Date.now();
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+</script>
diff --git a/apps/rebreak-magic/app/components/IosStarRating.vue b/apps/rebreak-magic/app/components/IosStarRating.vue
new file mode 100644
index 0000000..34ea2b2
--- /dev/null
+++ b/apps/rebreak-magic/app/components/IosStarRating.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex items-center gap-1" :title="tooltip">
+    <UIcon
+      v-for="(star, i) in stars"
+      :key="i"
+      name="i-heroicons-star"
+      class="w-4 h-4"
+      :class="star ? 'text-amber-400' : 'text-gray-200'"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  enrollment: boolean;
+  sideload: boolean;
+  app: boolean;
+}>();
+
+const stars = computed(() => [props.enrollment, props.sideload, props.app]);
+const tooltip = computed(() => {
+  const labels = ["Enrollment", "Sideload", "ReBreak App"];
+  return stars.value.map((ok, i) => `${labels[i]}: ${ok ? "✓" : "✗"}`).join(" · ");
+});
+</script>