From 2db60511a235596dc50d14ac6019ec1b28453e57 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 12 Aug 2024 17:48:36 +0300
Subject: [PATCH 01/23] Add new key word for new apps

---
 .../applications/ApplicationCards.vue         | 45 +++++++++++++++++--
 packages/playground/src/utils/types.ts        |  1 +
 .../playground/src/views/solutions_view.vue   |  1 +
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 1200609d46..847c814ab4 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -1,6 +1,14 @@
 <template>
   <v-row>
-    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6" :xl="cards.length > 3 ? 4 : 6">
+    <v-col
+      v-for="card in filteredCards"
+      :key="card.title"
+      cols="12"
+      sm="12"
+      md="12"
+      lg="6"
+      :xl="filteredCards.length > 3 ? 4 : 6"
+    >
       <router-link :to="card.route">
         <v-hover>
           <template v-slot:default="{ isHovering, props }">
@@ -20,8 +28,11 @@
                 <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
                   {{ tag }}
                 </v-chip>
+                <v-chip v-if="card.isNew" class="scale_beat ml-2 text-white" color="secondary"> New </v-chip>
               </v-card-title>
-              <v-card-text class="mt-2" v-bind="props"> {{ card.excerpt }} </v-card-text>
+              <v-card-text class="mt-2" v-bind="props">
+                {{ card.excerpt }}
+              </v-card-text>
             </v-card>
           </template></v-hover
         >
@@ -31,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, onMounted, type PropType, ref } from "vue";
 
 import type { ApplicationCard } from "@/utils/types";
 
@@ -43,10 +54,23 @@ export default defineComponent({
       required: true,
     },
   },
-  setup() {
+  setup(props) {
     const baseURL = import.meta.env.BASE_URL;
+    const filteredCards = ref(props.cards);
+    const createdAt = 1723471170046; // Update time now in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
+
+    onMounted(() => {
+      const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
+      const next30DaysFromNow = createdAt + next30DaysInMs;
+      filteredCards.value.forEach(card => {
+        if (card.isNew === true) {
+          card.isNew = Date.now() < next30DaysFromNow;
+        }
+      });
+    });
     return {
       baseURL,
+      filteredCards,
     };
   },
 });
@@ -60,4 +84,17 @@ a {
 .card-opacity {
   background-color: rgba(125, 227, 200, 0.12);
 }
+
+.scale_beat {
+  animation: crescendo 0.5s alternate infinite ease-in;
+}
+
+@keyframes crescendo {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.2);
+  }
+}
 </style>
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index da82544b2c..8d2161c682 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -21,4 +21,5 @@ export interface ApplicationCard {
   icon: string;
   route: string;
   tags?: string[];
+  isNew?: boolean;
 }
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 00e297f78b..c4f3fc423a 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -30,6 +30,7 @@ export default {
           "Nostr is a simple, open protocol that enables global, decentralized, and censorship-resistant social media.",
         icon: "nostr.png",
         route: DashboardRoutes.Applications.Nostr,
+        // isNew: true, for new apps
       },
       {
         title: "Gitea",

From ac6fdc3026d6c232cba0fa398c171e82e119545c Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sun, 25 Aug 2024 14:01:15 +0300
Subject: [PATCH 02/23] add ribben for new

---
 .../applications/ApplicationCards.vue         | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 847c814ab4..c4dfabdea0 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -12,7 +12,12 @@
       <router-link :to="card.route">
         <v-hover>
           <template v-slot:default="{ isHovering, props }">
-            <v-card :height="200" class="pa-3 pt-6" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
+            <v-card
+              :height="200"
+              class="ribben pa-3 pt-6"
+              v-bind="props"
+              :class="isHovering ? 'card-opacity' : undefined"
+            >
               <v-img
                 class="d-inline-block ml-3 mb-2"
                 width="35"
@@ -77,6 +82,45 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.ribben {
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+}
+
+.ribben:before {
+  content: "NEW";
+  animation-name: new;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease;
+  position: absolute;
+  top: -11px;
+  right: -37px;
+  width: 110px;
+  text-align: center;
+  transform: rotate(45deg);
+  background: #1aa18f;
+  padding-top: 28px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  padding-bottom: 9px;
+  letter-spacing: 2px;
+}
+
+@keyframes new {
+  0% {
+    background: #1aa18f;
+  }
+  50% {
+    background: rgb(22, 129, 114);
+  }
+  100% {
+    background: #1aa18f;
+  }
+}
+
 a {
   text-decoration: none !important;
 }

From 214e336cddc943d1c48f905ee3711d3311de8505 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 26 Aug 2024 16:10:47 +0300
Subject: [PATCH 03/23] Apply new label for new apps/version

---
 .../applications/ApplicationCards.vue          |  4 ++--
 .../playground/src/views/solutions_view.vue    | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index c4dfabdea0..62ee15ae40 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -14,9 +14,9 @@
           <template v-slot:default="{ isHovering, props }">
             <v-card
               :height="200"
-              class="ribben pa-3 pt-6"
+              class="pa-3 pt-6"
               v-bind="props"
-              :class="isHovering ? 'card-opacity' : undefined"
+              :class="[isHovering ? 'card-opacity' : undefined, card.isNew ? 'ribben' : '']"
             >
               <v-img
                 class="d-inline-block ml-3 mb-2"
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index c4f3fc423a..1073f1ceec 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -30,7 +30,7 @@ export default {
           "Nostr is a simple, open protocol that enables global, decentralized, and censorship-resistant social media.",
         icon: "nostr.png",
         route: DashboardRoutes.Applications.Nostr,
-        // isNew: true, for new apps
+        isNew: false, //for new apps/version
       },
       {
         title: "Gitea",
@@ -38,6 +38,7 @@ export default {
           "Gitea is a forge software package for hosting software development version control using Git as well as other collaborative features like bug tracking, code review, continuous integration, kanban boards, tickets, and wikis. It supports self-hosting but also provides a free public first-party instance.",
         icon: "gitea.png",
         route: DashboardRoutes.Applications.Gitea,
+        isNew: false, //for new apps/version
       },
       {
         title: "TFRobot",
@@ -45,12 +46,14 @@ export default {
           "TFRobot is a command line interface tool that offers simultaneous mass deployment of groups of VMs on the ThreeFold Grid, with support of multiple retries for failed deployments, and customizable configurations.",
         icon: "tfrobot.png",
         route: DashboardRoutes.Applications.TFRobot,
+        isNew: false, //for new apps/version
       },
       {
         title: "Peertube",
         excerpt: "Peertube aspires to be a decentralized and free/libre alternative to video broadcasting services.",
         icon: "peertube.png",
         route: DashboardRoutes.Applications.Peertube,
+        isNew: false, //for new apps/version
       },
       {
         title: "Funkwhale",
@@ -58,6 +61,7 @@ export default {
           "Funkwhale is social platform to enjoy and share music. Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.",
         icon: "funkwhale.png",
         route: DashboardRoutes.Applications.Funkwhale,
+        isNew: false, //for new apps/version
       },
       {
         title: "Mattermost",
@@ -66,6 +70,7 @@ export default {
         icon: "mattermost.png",
         route: DashboardRoutes.Applications.Mattermost,
         tags: ["Alpha"],
+        isNew: false, //for new apps/version
       },
       {
         title: "Discourse",
@@ -73,6 +78,7 @@ export default {
           "Discourse is the 100% open source discussion platform built for the next decade of the Internet. Use it as a mailing list, discussion forum, long-form chat room, and more!",
         icon: "discourse.png",
         route: DashboardRoutes.Applications.Discourse,
+        isNew: false, //for new apps/version
       },
       {
         title: "Taiga",
@@ -80,6 +86,7 @@ export default {
           "Taiga is a project management application that can handle both simple and complex projects for startups, software developers, and other target teams. It tracks the progress of a project.",
         icon: "taiga.png",
         route: DashboardRoutes.Applications.Taiga,
+        isNew: false, //for new apps/version
       },
       {
         title: "Static Website",
@@ -87,6 +94,7 @@ export default {
           "Static Website is an application where a user provides a Github repository url and it's automatically served using Caddy.",
         icon: "static_website.png",
         route: DashboardRoutes.Applications.StaticWebsite,
+        isNew: false, //for new apps/version
       },
       {
         title: "Nextcloud",
@@ -95,6 +103,7 @@ export default {
         icon: "nextcloud.png",
         route: DashboardRoutes.Applications.Nextcloud,
         tags: ["Community"],
+        isNew: false, //for new apps/version
       },
       {
         title: "Presearch",
@@ -102,6 +111,7 @@ export default {
           "Presearch is a community-powered, decentralized search engine that provides better results while protecting your privacy and rewarding you when you search. This weblet deploys a Presearch node. ",
         icon: "presearch.png",
         route: DashboardRoutes.Applications.Presearch,
+        isNew: false, //for new apps/version
       },
       {
         title: "Subsquid",
@@ -109,6 +119,7 @@ export default {
           "Subsquid indexer is a piece of software that reads all the blocks from a Substrate based blockchain, decodes and stores them for processing in a later stage.",
         icon: "subsquid.png",
         route: DashboardRoutes.Applications.Subsquid,
+        isNew: false, //for new apps/version
       },
       {
         title: "Casperlabs",
@@ -116,6 +127,7 @@ export default {
           "Casper Network is a blockchain protocol built from the ground up to remain true to core Web3 principles and adapt to the needs of our evolving world.",
         icon: "casperlabs.png",
         route: DashboardRoutes.Applications.Casperlabs,
+        isNew: false, //for new apps/version
       },
       {
         title: "Algorand",
@@ -123,6 +135,7 @@ export default {
           "Algorand builds technology that accelerates the convergence between decentralized and traditional finance by enabling the simple creation of next-generation financial products, protocols, and exchange of value.",
         icon: "algorand.png",
         route: DashboardRoutes.Applications.Algorand,
+        isNew: false, //for new apps/version
       },
       {
         title: "Node Pilot",
@@ -130,6 +143,7 @@ export default {
           "Deploy, manage, and monetize crypto nodes with a few clicks. Seamless Docker integration brings enterprise-level security and scalability.",
         icon: "vm.png",
         route: DashboardRoutes.Applications.Nodepilot,
+        isNew: false, //for new apps/version
       },
       {
         title: "Umbrel",
@@ -137,6 +151,7 @@ export default {
           "Umbrel is an OS for running a personal server in your home. Self-host open source apps like Nextcloud, Bitcoin node, and more.",
         icon: "umbrel.png",
         route: DashboardRoutes.Applications.Umbrel,
+        isNew: false, //for new apps/version
       },
       {
         title: "Wordpress",
@@ -144,6 +159,7 @@ export default {
           "Wordpress is the most popular CMS on the market, powering 65.2% of websites whose CMS we know. That translates to 42.4% of all websites – nearly half of the internet. It is a popular option for those who want to build a website or blog.",
         icon: "wordpress.png",
         route: DashboardRoutes.Applications.Wordpress,
+        isNew: false, //for new apps/version
       },
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));

From 39bd6208402ad5c24f8f2a7270192b34b15ffcc7 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 26 Aug 2024 16:13:55 +0300
Subject: [PATCH 04/23] rm dublicated new tag

---
 .../playground/src/components/applications/ApplicationCards.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 62ee15ae40..84d2dc4e1a 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -33,7 +33,6 @@
                 <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
                   {{ tag }}
                 </v-chip>
-                <v-chip v-if="card.isNew" class="scale_beat ml-2 text-white" color="secondary"> New </v-chip>
               </v-card-title>
               <v-card-text class="mt-2" v-bind="props">
                 {{ card.excerpt }}

From ea39a2f51ba9b283f77346c6b0f18b25dfddb8ed Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 27 Aug 2024 18:11:37 +0300
Subject: [PATCH 05/23] - Update the sidebar with badge for new updates - Check
 the day of appliction creation to determind when it will expire

---
 packages/playground/src/App.vue               | 19 ++++++-
 .../applications/ApplicationCards.vue         | 15 ++++--
 packages/playground/src/utils/types.ts        |  1 +
 .../playground/src/views/solutions_view.vue   | 51 ++++++++++++-------
 4 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 3bb673370a..168bf099f8 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -57,6 +57,7 @@
                           <span v-bind="props">
                             {{ item.title }}
                           </span>
+                          <v-badge dot inline color="primary" v-if="item.hasUpdate"></v-badge>
                         </template>
                       </v-tooltip>
                     </v-list-item-title>
@@ -88,6 +89,7 @@
                         <span v-bind="props">
                           {{ item.title }}
                         </span>
+                        <v-badge dot inline color="primary" v-if="item.hasUpdate"></v-badge>
                       </template>
                     </v-tooltip>
                   </v-list-item-title>
@@ -248,7 +250,20 @@ function navigateToHome() {
   return $router.push(DashboardRoutes.Other.HomePage);
 }
 
-onMounted(window.$$appLoader || noop);
+onMounted(() => {
+  window.$$appLoader || noop();
+  routes.map(route => {
+    route.items.map(item => {
+      const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
+      const timestamp = 1724769030739; // Update with the time of creation
+      const next30DaysFromNow = timestamp + next30DaysInMs;
+
+      if (item.hasUpdate == true) {
+        item.hasUpdate = Date.now() < next30DaysFromNow;
+      }
+    });
+  });
+});
 
 // eslint-disable-next-line no-undef
 const version = process.env.VERSION as any;
@@ -313,6 +328,7 @@ const routes: AppRoute[] = [
         icon: "mdi-lightbulb-on-outline",
         route: DashboardRoutes.Deploy.Applications,
         tooltip: "Deploy ready applications on the ThreeFold grid.",
+        hasUpdate: false, // Change to true and update the timestamp in onMounted hook
       },
       {
         title: "Your Contracts",
@@ -454,6 +470,7 @@ interface AppRouteItem {
   url?: string;
   icon?: string;
   tooltip?: string;
+  hasUpdate?: boolean;
 }
 
 export default {
diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 84d2dc4e1a..4a6102a3a3 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -61,13 +61,20 @@ export default defineComponent({
   setup(props) {
     const baseURL = import.meta.env.BASE_URL;
     const filteredCards = ref(props.cards);
-    const createdAt = 1723471170046; // Update time now in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
 
+    function isCreatedToday(timestamp: number) {
+      const today = new Date();
+      const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999);
+
+      return timestamp >= startOfDay.getTime() && timestamp <= endOfDay.getTime();
+    }
     onMounted(() => {
-      const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
-      const next30DaysFromNow = createdAt + next30DaysInMs;
       filteredCards.value.forEach(card => {
-        if (card.isNew === true) {
+        const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
+        const next30DaysFromNow = card.createdAt ? card.createdAt + next30DaysInMs : 0;
+
+        if (isCreatedToday(card.createdAt ?? 0)) {
           card.isNew = Date.now() < next30DaysFromNow;
         }
       });
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index 8d2161c682..f03f498eac 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -22,4 +22,5 @@ export interface ApplicationCard {
   route: string;
   tags?: string[];
   isNew?: boolean;
+  createdAt?: number;
 }
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 1073f1ceec..10181967f5 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -30,7 +30,8 @@ export default {
           "Nostr is a simple, open protocol that enables global, decentralized, and censorship-resistant social media.",
         icon: "nostr.png",
         route: DashboardRoutes.Applications.Nostr,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
       {
         title: "Gitea",
@@ -38,7 +39,8 @@ export default {
           "Gitea is a forge software package for hosting software development version control using Git as well as other collaborative features like bug tracking, code review, continuous integration, kanban boards, tickets, and wikis. It supports self-hosting but also provides a free public first-party instance.",
         icon: "gitea.png",
         route: DashboardRoutes.Applications.Gitea,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "TFRobot",
@@ -46,14 +48,16 @@ export default {
           "TFRobot is a command line interface tool that offers simultaneous mass deployment of groups of VMs on the ThreeFold Grid, with support of multiple retries for failed deployments, and customizable configurations.",
         icon: "tfrobot.png",
         route: DashboardRoutes.Applications.TFRobot,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Peertube",
         excerpt: "Peertube aspires to be a decentralized and free/libre alternative to video broadcasting services.",
         icon: "peertube.png",
         route: DashboardRoutes.Applications.Peertube,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Funkwhale",
@@ -61,7 +65,8 @@ export default {
           "Funkwhale is social platform to enjoy and share music. Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.",
         icon: "funkwhale.png",
         route: DashboardRoutes.Applications.Funkwhale,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Mattermost",
@@ -70,7 +75,8 @@ export default {
         icon: "mattermost.png",
         route: DashboardRoutes.Applications.Mattermost,
         tags: ["Alpha"],
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Discourse",
@@ -78,7 +84,8 @@ export default {
           "Discourse is the 100% open source discussion platform built for the next decade of the Internet. Use it as a mailing list, discussion forum, long-form chat room, and more!",
         icon: "discourse.png",
         route: DashboardRoutes.Applications.Discourse,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Taiga",
@@ -86,7 +93,8 @@ export default {
           "Taiga is a project management application that can handle both simple and complex projects for startups, software developers, and other target teams. It tracks the progress of a project.",
         icon: "taiga.png",
         route: DashboardRoutes.Applications.Taiga,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Static Website",
@@ -94,7 +102,8 @@ export default {
           "Static Website is an application where a user provides a Github repository url and it's automatically served using Caddy.",
         icon: "static_website.png",
         route: DashboardRoutes.Applications.StaticWebsite,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Nextcloud",
@@ -103,7 +112,8 @@ export default {
         icon: "nextcloud.png",
         route: DashboardRoutes.Applications.Nextcloud,
         tags: ["Community"],
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Presearch",
@@ -111,7 +121,8 @@ export default {
           "Presearch is a community-powered, decentralized search engine that provides better results while protecting your privacy and rewarding you when you search. This weblet deploys a Presearch node. ",
         icon: "presearch.png",
         route: DashboardRoutes.Applications.Presearch,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Subsquid",
@@ -119,7 +130,8 @@ export default {
           "Subsquid indexer is a piece of software that reads all the blocks from a Substrate based blockchain, decodes and stores them for processing in a later stage.",
         icon: "subsquid.png",
         route: DashboardRoutes.Applications.Subsquid,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Casperlabs",
@@ -127,7 +139,8 @@ export default {
           "Casper Network is a blockchain protocol built from the ground up to remain true to core Web3 principles and adapt to the needs of our evolving world.",
         icon: "casperlabs.png",
         route: DashboardRoutes.Applications.Casperlabs,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Algorand",
@@ -135,7 +148,8 @@ export default {
           "Algorand builds technology that accelerates the convergence between decentralized and traditional finance by enabling the simple creation of next-generation financial products, protocols, and exchange of value.",
         icon: "algorand.png",
         route: DashboardRoutes.Applications.Algorand,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Node Pilot",
@@ -143,7 +157,8 @@ export default {
           "Deploy, manage, and monetize crypto nodes with a few clicks. Seamless Docker integration brings enterprise-level security and scalability.",
         icon: "vm.png",
         route: DashboardRoutes.Applications.Nodepilot,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Umbrel",
@@ -151,7 +166,8 @@ export default {
           "Umbrel is an OS for running a personal server in your home. Self-host open source apps like Nextcloud, Bitcoin node, and more.",
         icon: "umbrel.png",
         route: DashboardRoutes.Applications.Umbrel,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
       {
         title: "Wordpress",
@@ -159,7 +175,8 @@ export default {
           "Wordpress is the most popular CMS on the market, powering 65.2% of websites whose CMS we know. That translates to 42.4% of all websites – nearly half of the internet. It is a popular option for those who want to build a website or blog.",
         icon: "wordpress.png",
         route: DashboardRoutes.Applications.Wordpress,
-        isNew: false, //for new apps/version
+        isNew: false,
+        createdAt: 0,
       },
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));

From 85f68113128385386dba84f1ed4980c0638ad1fc Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 2 Sep 2024 14:58:40 +0300
Subject: [PATCH 06/23] Fix the page lag

---
 packages/playground/src/App.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 8151f5a477..13914ad435 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -250,8 +250,12 @@ function navigateToHome() {
   return $router.push(DashboardRoutes.Other.HomePage);
 }
 
+onMounted(async () => {
+  await (window.$$appLoader || noop)();
+  openProfile.value = true;
+});
+
 onMounted(() => {
-  window.$$appLoader || noop();
   routes.map(route => {
     route.items.map(item => {
       const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;

From 1259e9c8f91c5ca2a0610184db53d4f5fe5b5fbb Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 2 Sep 2024 16:51:34 +0300
Subject: [PATCH 07/23] - Refactor apps release functions

---
 packages/playground/src/App.vue               |  1 -
 .../applications/ApplicationCards.vue         | 16 +++-----
 packages/playground/src/utils/types.ts        |  4 +-
 .../src/views/orchestrators_view.vue          |  4 ++
 .../playground/src/views/solutions_view.vue   | 38 ++++++++++---------
 packages/playground/src/views/vms_view.vue    |  4 ++
 6 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 13914ad435..74461dd742 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -261,7 +261,6 @@ onMounted(() => {
       const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
       const timestamp = 1724769030739; // Update with the time of creation
       const next30DaysFromNow = timestamp + next30DaysInMs;
-
       if (item.hasUpdate == true) {
         item.hasUpdate = Date.now() < next30DaysFromNow;
       }
diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 4a6102a3a3..479ffe6945 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -62,19 +62,13 @@ export default defineComponent({
     const baseURL = import.meta.env.BASE_URL;
     const filteredCards = ref(props.cards);
 
-    function isCreatedToday(timestamp: number) {
-      const today = new Date();
-      const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-      const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999);
-
-      return timestamp >= startOfDay.getTime() && timestamp <= endOfDay.getTime();
-    }
     onMounted(() => {
+      const today = new Date().toDateString();
+      const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
       filteredCards.value.forEach(card => {
-        const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
-        const next30DaysFromNow = card.createdAt ? card.createdAt + next30DaysInMs : 0;
-
-        if (isCreatedToday(card.createdAt ?? 0)) {
+        const next30DaysFromNow = card.createdAt + next30DaysInMs;
+        const createdAt = new Date(card.createdAt).toDateString();
+        if (createdAt == today) {
           card.isNew = Date.now() < next30DaysFromNow;
         }
       });
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index f03f498eac..627ff99cda 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -21,6 +21,6 @@ export interface ApplicationCard {
   icon: string;
   route: string;
   tags?: string[];
-  isNew?: boolean;
-  createdAt?: number;
+  isNew: boolean;
+  createdAt: number;
 }
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index c1ce6aea26..8b513d8b48 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -25,6 +25,8 @@ export default {
           "Kubernetes is the standard container orchestration tool. On the TF grid, Kubernetes clusters can be deployed out of the box. We have implemented K3S, a full-blown Kubernetes offering that uses only half of the memory footprint.",
         icon: "kubernetes.png",
         route: DashboardRoutes.Orchestrators.Kubernetes,
+        isNew: false,
+        createdAt: 1723468996310,
       },
       {
         title: "CapRover",
@@ -32,6 +34,8 @@ export default {
           "CapRover is an extremely easy to use app/database deployment & web server manager for your NodeJS, Python, PHP, ASP.NET, Ruby, MySQL, MongoDB, Postgres, WordPress (and etc…) applications!",
         icon: "caprover.png",
         route: DashboardRoutes.Orchestrators.CapRover,
+        isNew: false,
+        createdAt: 1723468996310,
       },
     ];
 
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 454bb68fb7..eb6327f54d 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -31,7 +31,7 @@ export default {
         icon: "nostr.png",
         route: DashboardRoutes.Applications.Nostr,
         isNew: false,
-        createdAt: 0, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
+        createdAt: 1725283777169, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
       {
         title: "Gitea",
@@ -40,7 +40,7 @@ export default {
         icon: "gitea.png",
         route: DashboardRoutes.Applications.Gitea,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "TFRobot",
@@ -49,7 +49,7 @@ export default {
         icon: "tfrobot.png",
         route: DashboardRoutes.Applications.TFRobot,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Jenkins",
@@ -57,6 +57,8 @@ export default {
           "Jenkins is a popular open-source automation server that enables developers to build, test, and deploy their applications continuously.",
         icon: "jenkins.png",
         route: DashboardRoutes.Applications.Jenkins,
+        isNew: false,
+        createdAt: 1723468996310,
       },
       {
         title: "Peertube",
@@ -64,7 +66,7 @@ export default {
         icon: "peertube.png",
         route: DashboardRoutes.Applications.Peertube,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Funkwhale",
@@ -73,7 +75,7 @@ export default {
         icon: "funkwhale.png",
         route: DashboardRoutes.Applications.Funkwhale,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Mattermost",
@@ -83,7 +85,7 @@ export default {
         route: DashboardRoutes.Applications.Mattermost,
         tags: ["Alpha"],
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Discourse",
@@ -92,7 +94,7 @@ export default {
         icon: "discourse.png",
         route: DashboardRoutes.Applications.Discourse,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Taiga",
@@ -101,7 +103,7 @@ export default {
         icon: "taiga.png",
         route: DashboardRoutes.Applications.Taiga,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Static Website",
@@ -110,7 +112,7 @@ export default {
         icon: "static_website.png",
         route: DashboardRoutes.Applications.StaticWebsite,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Nextcloud",
@@ -120,7 +122,7 @@ export default {
         route: DashboardRoutes.Applications.Nextcloud,
         tags: ["Community"],
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Presearch",
@@ -129,7 +131,7 @@ export default {
         icon: "presearch.png",
         route: DashboardRoutes.Applications.Presearch,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Subsquid",
@@ -138,7 +140,7 @@ export default {
         icon: "subsquid.png",
         route: DashboardRoutes.Applications.Subsquid,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Casperlabs",
@@ -147,7 +149,7 @@ export default {
         icon: "casperlabs.png",
         route: DashboardRoutes.Applications.Casperlabs,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Algorand",
@@ -156,7 +158,7 @@ export default {
         icon: "algorand.png",
         route: DashboardRoutes.Applications.Algorand,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Node Pilot",
@@ -165,7 +167,7 @@ export default {
         icon: "vm.png",
         route: DashboardRoutes.Applications.Nodepilot,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Umbrel",
@@ -174,7 +176,7 @@ export default {
         icon: "umbrel.png",
         route: DashboardRoutes.Applications.Umbrel,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Wordpress",
@@ -183,7 +185,7 @@ export default {
         icon: "wordpress.png",
         route: DashboardRoutes.Applications.Wordpress,
         isNew: false,
-        createdAt: 0,
+        createdAt: 1723468996310,
       },
       {
         title: "Domains",
@@ -191,6 +193,8 @@ export default {
           "Domains allow users to securely expose servers hosted on local machines or VMs to the public internet.",
         icon: "domains.png",
         route: DashboardRoutes.Applications.Domains,
+        isNew: false,
+        createdAt: 1723468996310,
       },
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index bbb348944d..135ea5fddf 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -26,6 +26,8 @@ export default {
           "Deploy a full virtual machine on Threefold Grid. Full VM allows you to have a complete image with a custom kernel optimized for your own usecase.",
         icon: "vm.png",
         route: DashboardRoutes.VirtualMachines.FullVirtualMachine,
+        isNew: false,
+        createdAt: 1723468996310,
       },
       {
         title: "Micro Virtual Machine",
@@ -33,6 +35,8 @@ export default {
           "Deploy a micro virtual machine on Threefold Grid. We provide few images managed by Threefold like Ubuntu 22.04, and NixOS, but you can still use a custom one.",
         icon: "vm.png",
         route: DashboardRoutes.VirtualMachines.MicroVirtualMachine,
+        isNew: false,
+        createdAt: 1723468996310,
       },
     ];
 

From 1a8cabfb5619d40d9807ec7575e4f87561e3904b Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 2 Sep 2024 18:03:35 +0300
Subject: [PATCH 08/23] Add timestamp prop to sidebar

---
 packages/playground/src/App.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 74461dd742..eaf3def9fe 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -256,11 +256,10 @@ onMounted(async () => {
 });
 
 onMounted(() => {
+  const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
   routes.map(route => {
     route.items.map(item => {
-      const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
-      const timestamp = 1724769030739; // Update with the time of creation
-      const next30DaysFromNow = timestamp + next30DaysInMs;
+      const next30DaysFromNow = item.timestamp ? item.timestamp + next30DaysInMs : 0;
       if (item.hasUpdate == true) {
         item.hasUpdate = Date.now() < next30DaysFromNow;
       }
@@ -319,12 +318,16 @@ const routes: AppRoute[] = [
         icon: "mdi-television",
         route: DashboardRoutes.Deploy.VirtualMachines,
         tooltip: "Deploy your Virtal Machine instances.",
+        hasUpdate: true,
+        timestamp: 1724769030739,
       },
       {
         title: "Orchestrators",
         icon: "mdi-group",
         route: DashboardRoutes.Deploy.Orchestrators,
         tooltip: "Deploy your orchestrator instances.",
+        hasUpdate: false,
+        timestamp: 1724769030739,
       },
       {
         title: "Applications",
@@ -332,6 +335,7 @@ const routes: AppRoute[] = [
         route: DashboardRoutes.Deploy.Applications,
         tooltip: "Deploy ready applications on the ThreeFold grid.",
         hasUpdate: false, // Change to true and update the timestamp in onMounted hook
+        timestamp: 1724769030739,
       },
       {
         title: "Your Contracts",
@@ -474,6 +478,7 @@ interface AppRouteItem {
   icon?: string;
   tooltip?: string;
   hasUpdate?: boolean;
+  timestamp?: number;
 }
 
 export default {

From 8ab38c831f27326ebdaeecf8294855f150d604f4 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 2 Sep 2024 18:28:33 +0300
Subject: [PATCH 09/23] create docstring for checking release function

---
 packages/playground/src/App.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index eaf3def9fe..b4e1a36ed0 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -255,6 +255,15 @@ onMounted(async () => {
   openProfile.value = true;
 });
 
+/**
+ * Initializes the routes with update information.
+ *
+ * This function is called when the component is mounted.
+ * It iterates over the routes and their items, checking if the item has an update.
+ * If the item has an update, it calculates the next 30 days from the item's timestamp
+ * and sets the hasUpdate property to true if the current time is less than the calculated timestamp.
+ */
+
 onMounted(() => {
   const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
   routes.map(route => {

From 3ec05003450ff3da5ec257b83d3c97fc2862d037 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 3 Sep 2024 15:14:43 +0300
Subject: [PATCH 10/23] make releaseDate optional

---
 .../applications/ApplicationCards.vue         | 12 +--
 packages/playground/src/utils/types.ts        |  4 +-
 .../src/views/orchestrators_view.vue          |  8 +-
 .../playground/src/views/solutions_view.vue   | 76 +++++++++----------
 packages/playground/src/views/vms_view.vue    |  8 +-
 5 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 479ffe6945..87b0a34d5e 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -16,7 +16,7 @@
               :height="200"
               class="pa-3 pt-6"
               v-bind="props"
-              :class="[isHovering ? 'card-opacity' : undefined, card.isNew ? 'ribben' : '']"
+              :class="[isHovering ? 'card-opacity' : undefined, card.hasUpdate && card.releaseDate ? 'ribben' : '']"
             >
               <v-img
                 class="d-inline-block ml-3 mb-2"
@@ -66,10 +66,12 @@ export default defineComponent({
       const today = new Date().toDateString();
       const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
       filteredCards.value.forEach(card => {
-        const next30DaysFromNow = card.createdAt + next30DaysInMs;
-        const createdAt = new Date(card.createdAt).toDateString();
-        if (createdAt == today) {
-          card.isNew = Date.now() < next30DaysFromNow;
+        if (card.hasUpdate && card.releaseDate) {
+          const next30DaysFromNow = card.releaseDate + next30DaysInMs;
+          const createdAt = new Date(card.releaseDate).toDateString();
+          if (createdAt == today) {
+            card.hasUpdate = card.releaseDate < next30DaysFromNow;
+          }
         }
       });
     });
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index 627ff99cda..aeb5992e17 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -21,6 +21,6 @@ export interface ApplicationCard {
   icon: string;
   route: string;
   tags?: string[];
-  isNew: boolean;
-  createdAt: number;
+  hasUpdate: boolean;
+  releaseDate?: number;
 }
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index 8b513d8b48..42fdec1f68 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -25,8 +25,8 @@ export default {
           "Kubernetes is the standard container orchestration tool. On the TF grid, Kubernetes clusters can be deployed out of the box. We have implemented K3S, a full-blown Kubernetes offering that uses only half of the memory footprint.",
         icon: "kubernetes.png",
         route: DashboardRoutes.Orchestrators.Kubernetes,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false, // change to `true` if the app has an update.
+        // releaseDate: undefined, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
       {
         title: "CapRover",
@@ -34,8 +34,8 @@ export default {
           "CapRover is an extremely easy to use app/database deployment & web server manager for your NodeJS, Python, PHP, ASP.NET, Ruby, MySQL, MongoDB, Postgres, WordPress (and etc…) applications!",
         icon: "caprover.png",
         route: DashboardRoutes.Orchestrators.CapRover,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false, // change to `true` if the app has an update.
+        // releaseDate: undefined, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
     ];
 
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index eb6327f54d..7b782f20c4 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -30,8 +30,8 @@ export default {
           "Nostr is a simple, open protocol that enables global, decentralized, and censorship-resistant social media.",
         icon: "nostr.png",
         route: DashboardRoutes.Applications.Nostr,
-        isNew: false,
-        createdAt: 1725283777169, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
+        hasUpdate: false, // change to `true` if the app has an update.
+        // releaseDate: 1723468996310, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
       {
         title: "Gitea",
@@ -39,8 +39,8 @@ export default {
           "Gitea is a forge software package for hosting software development version control using Git as well as other collaborative features like bug tracking, code review, continuous integration, kanban boards, tickets, and wikis. It supports self-hosting but also provides a free public first-party instance.",
         icon: "gitea.png",
         route: DashboardRoutes.Applications.Gitea,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "TFRobot",
@@ -48,8 +48,8 @@ export default {
           "TFRobot is a command line interface tool that offers simultaneous mass deployment of groups of VMs on the ThreeFold Grid, with support of multiple retries for failed deployments, and customizable configurations.",
         icon: "tfrobot.png",
         route: DashboardRoutes.Applications.TFRobot,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Jenkins",
@@ -57,16 +57,16 @@ export default {
           "Jenkins is a popular open-source automation server that enables developers to build, test, and deploy their applications continuously.",
         icon: "jenkins.png",
         route: DashboardRoutes.Applications.Jenkins,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Peertube",
         excerpt: "Peertube aspires to be a decentralized and free/libre alternative to video broadcasting services.",
         icon: "peertube.png",
         route: DashboardRoutes.Applications.Peertube,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Funkwhale",
@@ -74,8 +74,8 @@ export default {
           "Funkwhale is social platform to enjoy and share music. Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.",
         icon: "funkwhale.png",
         route: DashboardRoutes.Applications.Funkwhale,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Mattermost",
@@ -84,8 +84,8 @@ export default {
         icon: "mattermost.png",
         route: DashboardRoutes.Applications.Mattermost,
         tags: ["Alpha"],
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Discourse",
@@ -93,8 +93,8 @@ export default {
           "Discourse is the 100% open source discussion platform built for the next decade of the Internet. Use it as a mailing list, discussion forum, long-form chat room, and more!",
         icon: "discourse.png",
         route: DashboardRoutes.Applications.Discourse,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Taiga",
@@ -102,8 +102,8 @@ export default {
           "Taiga is a project management application that can handle both simple and complex projects for startups, software developers, and other target teams. It tracks the progress of a project.",
         icon: "taiga.png",
         route: DashboardRoutes.Applications.Taiga,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Static Website",
@@ -111,8 +111,8 @@ export default {
           "Static Website is an application where a user provides a Github repository url and it's automatically served using Caddy.",
         icon: "static_website.png",
         route: DashboardRoutes.Applications.StaticWebsite,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Nextcloud",
@@ -121,8 +121,8 @@ export default {
         icon: "nextcloud.png",
         route: DashboardRoutes.Applications.Nextcloud,
         tags: ["Community"],
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Presearch",
@@ -130,8 +130,8 @@ export default {
           "Presearch is a community-powered, decentralized search engine that provides better results while protecting your privacy and rewarding you when you search. This weblet deploys a Presearch node. ",
         icon: "presearch.png",
         route: DashboardRoutes.Applications.Presearch,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Subsquid",
@@ -139,8 +139,8 @@ export default {
           "Subsquid indexer is a piece of software that reads all the blocks from a Substrate based blockchain, decodes and stores them for processing in a later stage.",
         icon: "subsquid.png",
         route: DashboardRoutes.Applications.Subsquid,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Casperlabs",
@@ -148,8 +148,8 @@ export default {
           "Casper Network is a blockchain protocol built from the ground up to remain true to core Web3 principles and adapt to the needs of our evolving world.",
         icon: "casperlabs.png",
         route: DashboardRoutes.Applications.Casperlabs,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Algorand",
@@ -157,8 +157,8 @@ export default {
           "Algorand builds technology that accelerates the convergence between decentralized and traditional finance by enabling the simple creation of next-generation financial products, protocols, and exchange of value.",
         icon: "algorand.png",
         route: DashboardRoutes.Applications.Algorand,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Node Pilot",
@@ -166,8 +166,8 @@ export default {
           "Deploy, manage, and monetize crypto nodes with a few clicks. Seamless Docker integration brings enterprise-level security and scalability.",
         icon: "vm.png",
         route: DashboardRoutes.Applications.Nodepilot,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Umbrel",
@@ -175,8 +175,8 @@ export default {
           "Umbrel is an OS for running a personal server in your home. Self-host open source apps like Nextcloud, Bitcoin node, and more.",
         icon: "umbrel.png",
         route: DashboardRoutes.Applications.Umbrel,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Wordpress",
@@ -184,8 +184,8 @@ export default {
           "Wordpress is the most popular CMS on the market, powering 65.2% of websites whose CMS we know. That translates to 42.4% of all websites – nearly half of the internet. It is a popular option for those who want to build a website or blog.",
         icon: "wordpress.png",
         route: DashboardRoutes.Applications.Wordpress,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
       {
         title: "Domains",
@@ -193,8 +193,8 @@ export default {
           "Domains allow users to securely expose servers hosted on local machines or VMs to the public internet.",
         icon: "domains.png",
         route: DashboardRoutes.Applications.Domains,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false,
+        // releaseDate: 1723468996310,
       },
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index 135ea5fddf..f19f5a2d35 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -26,8 +26,8 @@ export default {
           "Deploy a full virtual machine on Threefold Grid. Full VM allows you to have a complete image with a custom kernel optimized for your own usecase.",
         icon: "vm.png",
         route: DashboardRoutes.VirtualMachines.FullVirtualMachine,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false, // change to `true` if the app has an update.
+        // releaseDate: 1723468996310, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
       {
         title: "Micro Virtual Machine",
@@ -35,8 +35,8 @@ export default {
           "Deploy a micro virtual machine on Threefold Grid. We provide few images managed by Threefold like Ubuntu 22.04, and NixOS, but you can still use a custom one.",
         icon: "vm.png",
         route: DashboardRoutes.VirtualMachines.MicroVirtualMachine,
-        isNew: false,
-        createdAt: 1723468996310,
+        hasUpdate: false, // change to `true` if the app has an update.
+        // releaseDate: 1723468996310, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
     ];
 

From 14c2b98901b49470480f45af04022847e60a2370 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 3 Sep 2024 15:19:06 +0300
Subject: [PATCH 11/23] update the changes on the sidebar

---
 packages/playground/src/App.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index b4e1a36ed0..afbbc1bf9f 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -327,8 +327,8 @@ const routes: AppRoute[] = [
         icon: "mdi-television",
         route: DashboardRoutes.Deploy.VirtualMachines,
         tooltip: "Deploy your Virtal Machine instances.",
-        hasUpdate: true,
-        timestamp: 1724769030739,
+        hasUpdate: false, // Change to true and update the timestamp in onMounted hook
+        // timestamp: undefined,
       },
       {
         title: "Orchestrators",
@@ -336,7 +336,7 @@ const routes: AppRoute[] = [
         route: DashboardRoutes.Deploy.Orchestrators,
         tooltip: "Deploy your orchestrator instances.",
         hasUpdate: false,
-        timestamp: 1724769030739,
+        // timestamp: undefined,
       },
       {
         title: "Applications",
@@ -344,7 +344,7 @@ const routes: AppRoute[] = [
         route: DashboardRoutes.Deploy.Applications,
         tooltip: "Deploy ready applications on the ThreeFold grid.",
         hasUpdate: false, // Change to true and update the timestamp in onMounted hook
-        timestamp: 1724769030739,
+        // timestamp: undefined,
       },
       {
         title: "Your Contracts",

From 21a0103a944da3592a91702bc3c0bfafb9753030 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 5 Sep 2024 22:16:53 +0300
Subject: [PATCH 12/23] Refactor checking apps release date function

---
 .../applications/ApplicationCards.vue         | 31 +++++++--------
 packages/playground/src/utils/types.ts        |  9 ++++-
 .../src/views/orchestrators_view.vue          |  6 +--
 .../playground/src/views/solutions_view.vue   | 39 +------------------
 packages/playground/src/views/vms_view.vue    |  5 +--
 5 files changed, 26 insertions(+), 64 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 87b0a34d5e..7ebb2dccb8 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -16,7 +16,10 @@
               :height="200"
               class="pa-3 pt-6"
               v-bind="props"
-              :class="[isHovering ? 'card-opacity' : undefined, card.hasUpdate && card.releaseDate ? 'ribben' : '']"
+              :class="[
+                isHovering ? 'card-opacity' : undefined,
+                card.releaseDate && isReleasedOverMon(card.releaseDate) ? 'ribben' : '',
+              ]"
             >
               <v-img
                 class="d-inline-block ml-3 mb-2"
@@ -46,9 +49,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, type PropType, ref } from "vue";
+import { defineComponent, type PropType, ref } from "vue";
 
-import type { ApplicationCard } from "@/utils/types";
+import type { ApplicationCard, Date } from "@/utils/types";
 
 export default defineComponent({
   name: "ApplicationCards",
@@ -62,22 +65,18 @@ export default defineComponent({
     const baseURL = import.meta.env.BASE_URL;
     const filteredCards = ref(props.cards);
 
-    onMounted(() => {
-      const today = new Date().toDateString();
-      const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
-      filteredCards.value.forEach(card => {
-        if (card.hasUpdate && card.releaseDate) {
-          const next30DaysFromNow = card.releaseDate + next30DaysInMs;
-          const createdAt = new Date(card.releaseDate).toDateString();
-          if (createdAt == today) {
-            card.hasUpdate = card.releaseDate < next30DaysFromNow;
-          }
-        }
-      });
-    });
+    function isReleasedOverMon(date: Date): boolean {
+      const releaseDate = new Date(date.year, date.month - 1, date.day);
+      const currentDate = new Date();
+      const next30Days = 24 * 60 * 60 * 1000;
+
+      const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / next30Days);
+      return diff <= 30;
+    }
     return {
       baseURL,
       filteredCards,
+      isReleasedOverMon,
     };
   },
 });
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index aeb5992e17..90260192a4 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -15,12 +15,17 @@ export interface IPublicConfig {
   domain?: string;
 }
 
+export interface Date {
+  day: number;
+  month: number;
+  year: number;
+}
+
 export interface ApplicationCard {
   title: string;
   excerpt: string;
   icon: string;
   route: string;
   tags?: string[];
-  hasUpdate: boolean;
-  releaseDate?: number;
+  releaseDate?: Date;
 }
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index 42fdec1f68..7802acfae4 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -25,8 +25,7 @@ export default {
           "Kubernetes is the standard container orchestration tool. On the TF grid, Kubernetes clusters can be deployed out of the box. We have implemented K3S, a full-blown Kubernetes offering that uses only half of the memory footprint.",
         icon: "kubernetes.png",
         route: DashboardRoutes.Orchestrators.Kubernetes,
-        hasUpdate: false, // change to `true` if the app has an update.
-        // releaseDate: undefined, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
+        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "CapRover",
@@ -34,8 +33,7 @@ export default {
           "CapRover is an extremely easy to use app/database deployment & web server manager for your NodeJS, Python, PHP, ASP.NET, Ruby, MySQL, MongoDB, Postgres, WordPress (and etc…) applications!",
         icon: "caprover.png",
         route: DashboardRoutes.Orchestrators.CapRover,
-        hasUpdate: false, // change to `true` if the app has an update.
-        // releaseDate: undefined, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
+        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
     ];
 
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 7b782f20c4..c775b8c3f4 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -30,8 +30,6 @@ export default {
           "Nostr is a simple, open protocol that enables global, decentralized, and censorship-resistant social media.",
         icon: "nostr.png",
         route: DashboardRoutes.Applications.Nostr,
-        hasUpdate: false, // change to `true` if the app has an update.
-        // releaseDate: 1723468996310, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
       {
         title: "Gitea",
@@ -39,8 +37,7 @@ export default {
           "Gitea is a forge software package for hosting software development version control using Git as well as other collaborative features like bug tracking, code review, continuous integration, kanban boards, tickets, and wikis. It supports self-hosting but also provides a free public first-party instance.",
         icon: "gitea.png",
         route: DashboardRoutes.Applications.Gitea,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
+        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "TFRobot",
@@ -48,8 +45,6 @@ export default {
           "TFRobot is a command line interface tool that offers simultaneous mass deployment of groups of VMs on the ThreeFold Grid, with support of multiple retries for failed deployments, and customizable configurations.",
         icon: "tfrobot.png",
         route: DashboardRoutes.Applications.TFRobot,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Jenkins",
@@ -57,16 +52,12 @@ export default {
           "Jenkins is a popular open-source automation server that enables developers to build, test, and deploy their applications continuously.",
         icon: "jenkins.png",
         route: DashboardRoutes.Applications.Jenkins,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Peertube",
         excerpt: "Peertube aspires to be a decentralized and free/libre alternative to video broadcasting services.",
         icon: "peertube.png",
         route: DashboardRoutes.Applications.Peertube,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Funkwhale",
@@ -74,8 +65,6 @@ export default {
           "Funkwhale is social platform to enjoy and share music. Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.",
         icon: "funkwhale.png",
         route: DashboardRoutes.Applications.Funkwhale,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Mattermost",
@@ -84,8 +73,6 @@ export default {
         icon: "mattermost.png",
         route: DashboardRoutes.Applications.Mattermost,
         tags: ["Alpha"],
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Discourse",
@@ -93,8 +80,6 @@ export default {
           "Discourse is the 100% open source discussion platform built for the next decade of the Internet. Use it as a mailing list, discussion forum, long-form chat room, and more!",
         icon: "discourse.png",
         route: DashboardRoutes.Applications.Discourse,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Taiga",
@@ -102,8 +87,6 @@ export default {
           "Taiga is a project management application that can handle both simple and complex projects for startups, software developers, and other target teams. It tracks the progress of a project.",
         icon: "taiga.png",
         route: DashboardRoutes.Applications.Taiga,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Static Website",
@@ -111,8 +94,6 @@ export default {
           "Static Website is an application where a user provides a Github repository url and it's automatically served using Caddy.",
         icon: "static_website.png",
         route: DashboardRoutes.Applications.StaticWebsite,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Nextcloud",
@@ -121,8 +102,6 @@ export default {
         icon: "nextcloud.png",
         route: DashboardRoutes.Applications.Nextcloud,
         tags: ["Community"],
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Presearch",
@@ -130,8 +109,6 @@ export default {
           "Presearch is a community-powered, decentralized search engine that provides better results while protecting your privacy and rewarding you when you search. This weblet deploys a Presearch node. ",
         icon: "presearch.png",
         route: DashboardRoutes.Applications.Presearch,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Subsquid",
@@ -139,8 +116,6 @@ export default {
           "Subsquid indexer is a piece of software that reads all the blocks from a Substrate based blockchain, decodes and stores them for processing in a later stage.",
         icon: "subsquid.png",
         route: DashboardRoutes.Applications.Subsquid,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Casperlabs",
@@ -148,8 +123,6 @@ export default {
           "Casper Network is a blockchain protocol built from the ground up to remain true to core Web3 principles and adapt to the needs of our evolving world.",
         icon: "casperlabs.png",
         route: DashboardRoutes.Applications.Casperlabs,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Algorand",
@@ -157,8 +130,6 @@ export default {
           "Algorand builds technology that accelerates the convergence between decentralized and traditional finance by enabling the simple creation of next-generation financial products, protocols, and exchange of value.",
         icon: "algorand.png",
         route: DashboardRoutes.Applications.Algorand,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Node Pilot",
@@ -166,8 +137,6 @@ export default {
           "Deploy, manage, and monetize crypto nodes with a few clicks. Seamless Docker integration brings enterprise-level security and scalability.",
         icon: "vm.png",
         route: DashboardRoutes.Applications.Nodepilot,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Umbrel",
@@ -175,8 +144,6 @@ export default {
           "Umbrel is an OS for running a personal server in your home. Self-host open source apps like Nextcloud, Bitcoin node, and more.",
         icon: "umbrel.png",
         route: DashboardRoutes.Applications.Umbrel,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Wordpress",
@@ -184,8 +151,6 @@ export default {
           "Wordpress is the most popular CMS on the market, powering 65.2% of websites whose CMS we know. That translates to 42.4% of all websites – nearly half of the internet. It is a popular option for those who want to build a website or blog.",
         icon: "wordpress.png",
         route: DashboardRoutes.Applications.Wordpress,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
       {
         title: "Domains",
@@ -193,8 +158,6 @@ export default {
           "Domains allow users to securely expose servers hosted on local machines or VMs to the public internet.",
         icon: "domains.png",
         route: DashboardRoutes.Applications.Domains,
-        hasUpdate: false,
-        // releaseDate: 1723468996310,
       },
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index f19f5a2d35..01582eb576 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -26,8 +26,7 @@ export default {
           "Deploy a full virtual machine on Threefold Grid. Full VM allows you to have a complete image with a custom kernel optimized for your own usecase.",
         icon: "vm.png",
         route: DashboardRoutes.VirtualMachines.FullVirtualMachine,
-        hasUpdate: false, // change to `true` if the app has an update.
-        // releaseDate: 1723468996310, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
+        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "Micro Virtual Machine",
@@ -35,8 +34,6 @@ export default {
           "Deploy a micro virtual machine on Threefold Grid. We provide few images managed by Threefold like Ubuntu 22.04, and NixOS, but you can still use a custom one.",
         icon: "vm.png",
         route: DashboardRoutes.VirtualMachines.MicroVirtualMachine,
-        hasUpdate: false, // change to `true` if the app has an update.
-        // releaseDate: 1723468996310, // Update creation time in milliseconds ex: 1723468996310 is 'Mon Aug 12 2024 16:23:16'
       },
     ];
 

From 346ea5b7a17be380c2b8f8a15aee73d6345a0443 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 5 Sep 2024 22:53:19 +0300
Subject: [PATCH 13/23] - Create util for checking release date expiration -
 Apply the util on sidebar

---
 packages/playground/src/App.vue               | 48 +++++++------------
 .../applications/ApplicationCards.vue         | 13 +----
 packages/playground/src/utils/date.ts         | 10 ++++
 3 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index afbbc1bf9f..e126706c34 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -57,7 +57,12 @@
                           <span v-bind="props">
                             {{ item.title }}
                           </span>
-                          <v-badge dot inline color="primary" v-if="item.hasUpdate"></v-badge>
+                          <v-badge
+                            dot
+                            inline
+                            color="primary"
+                            v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
+                          ></v-badge>
                         </template>
                       </v-tooltip>
                     </v-list-item-title>
@@ -89,7 +94,12 @@
                         <span v-bind="props">
                           {{ item.title }}
                         </span>
-                        <v-badge dot inline color="primary" v-if="item.hasUpdate"></v-badge>
+                        <v-badge
+                          dot
+                          inline
+                          color="primary"
+                          v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
+                        ></v-badge>
                       </template>
                     </v-tooltip>
                   </v-list-item-title>
@@ -207,6 +217,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useTheme } from "vuetify";
 
 import TfLogger from "@/components/logger.vue";
+import { isReleasedOverMon } from "@/utils/date";
 
 import { useProfileManager } from "./stores/profile_manager";
 const $route = useRoute();
@@ -255,27 +266,6 @@ onMounted(async () => {
   openProfile.value = true;
 });
 
-/**
- * Initializes the routes with update information.
- *
- * This function is called when the component is mounted.
- * It iterates over the routes and their items, checking if the item has an update.
- * If the item has an update, it calculates the next 30 days from the item's timestamp
- * and sets the hasUpdate property to true if the current time is less than the calculated timestamp.
- */
-
-onMounted(() => {
-  const next30DaysInMs = 30 * 24 * 60 * 60 * 1000;
-  routes.map(route => {
-    route.items.map(item => {
-      const next30DaysFromNow = item.timestamp ? item.timestamp + next30DaysInMs : 0;
-      if (item.hasUpdate == true) {
-        item.hasUpdate = Date.now() < next30DaysFromNow;
-      }
-    });
-  });
-});
-
 // eslint-disable-next-line no-undef
 const version = process.env.VERSION as any;
 
@@ -327,24 +317,19 @@ const routes: AppRoute[] = [
         icon: "mdi-television",
         route: DashboardRoutes.Deploy.VirtualMachines,
         tooltip: "Deploy your Virtal Machine instances.",
-        hasUpdate: false, // Change to true and update the timestamp in onMounted hook
-        // timestamp: undefined,
+        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "Orchestrators",
         icon: "mdi-group",
         route: DashboardRoutes.Deploy.Orchestrators,
         tooltip: "Deploy your orchestrator instances.",
-        hasUpdate: false,
-        // timestamp: undefined,
       },
       {
         title: "Applications",
         icon: "mdi-lightbulb-on-outline",
         route: DashboardRoutes.Deploy.Applications,
         tooltip: "Deploy ready applications on the ThreeFold grid.",
-        hasUpdate: false, // Change to true and update the timestamp in onMounted hook
-        // timestamp: undefined,
       },
       {
         title: "Your Contracts",
@@ -459,6 +444,7 @@ function clickHandler({ route, url }: AppRouteItem): void {
 <script lang="ts">
 import { DashboardRoutes } from "@/router/routes";
 import { AppThemeSelection } from "@/utils/app_theme";
+import type { Date } from "@/utils/types";
 
 import AppTheme from "./components/app_theme.vue";
 import DeploymentListManager from "./components/deployment_list_manager.vue";
@@ -472,7 +458,6 @@ import TfRouterView from "./components/TfRouterView.vue";
 import TfSwapPrice from "./components/TfSwapPrice.vue";
 import { useGrid } from "./stores";
 import ProfileManager from "./weblets/profile_manager.vue";
-
 interface AppRoute {
   title: string;
   items: AppRouteItem[];
@@ -486,8 +471,7 @@ interface AppRouteItem {
   url?: string;
   icon?: string;
   tooltip?: string;
-  hasUpdate?: boolean;
-  timestamp?: number;
+  releaseDate?: Date;
 }
 
 export default {
diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 7ebb2dccb8..d94d6febcd 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -5,7 +5,6 @@
       :key="card.title"
       cols="12"
       sm="12"
-      md="12"
       lg="6"
       :xl="filteredCards.length > 3 ? 4 : 6"
     >
@@ -51,8 +50,8 @@
 <script lang="ts">
 import { defineComponent, type PropType, ref } from "vue";
 
-import type { ApplicationCard, Date } from "@/utils/types";
-
+import { isReleasedOverMon } from "@/utils/date";
+import type { ApplicationCard } from "@/utils/types";
 export default defineComponent({
   name: "ApplicationCards",
   props: {
@@ -65,14 +64,6 @@ export default defineComponent({
     const baseURL = import.meta.env.BASE_URL;
     const filteredCards = ref(props.cards);
 
-    function isReleasedOverMon(date: Date): boolean {
-      const releaseDate = new Date(date.year, date.month - 1, date.day);
-      const currentDate = new Date();
-      const next30Days = 24 * 60 * 60 * 1000;
-
-      const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / next30Days);
-      return diff <= 30;
-    }
     return {
       baseURL,
       filteredCards,
diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index 24e9df9171..b524c46f69 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -1,5 +1,15 @@
 import moment from "moment";
 
+import { type Date } from "./types";
 export default function toHumanDate(timeInSeconds: number): string {
   return moment(timeInSeconds * 1000).format("DD MMM YYYY, hh:mm A");
 }
+
+export function isReleasedOverMon(date: Date): boolean {
+  const releaseDate = new Date(date.year, date.month - 1, date.day);
+  const currentDate = new Date();
+  const next30Days = 24 * 60 * 60 * 1000;
+
+  const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / next30Days);
+  return diff <= 30;
+}

From dc3a6e31dc10270c38c69b7aca46dc8ab497850c Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 5 Sep 2024 22:58:30 +0300
Subject: [PATCH 14/23] Remove filtered cards from vars

---
 .../components/applications/ApplicationCards.vue    | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index d94d6febcd..79e7cee2bf 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -1,13 +1,6 @@
 <template>
   <v-row>
-    <v-col
-      v-for="card in filteredCards"
-      :key="card.title"
-      cols="12"
-      sm="12"
-      lg="6"
-      :xl="filteredCards.length > 3 ? 4 : 6"
-    >
+    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" lg="6" :xl="cards.length > 3 ? 4 : 6">
       <router-link :to="card.route">
         <v-hover>
           <template v-slot:default="{ isHovering, props }">
@@ -60,13 +53,11 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  setup() {
     const baseURL = import.meta.env.BASE_URL;
-    const filteredCards = ref(props.cards);
 
     return {
       baseURL,
-      filteredCards,
       isReleasedOverMon,
     };
   },

From a83f223270ced78b30192d5a0008903939f35252 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 8 Sep 2024 10:17:42 +0300
Subject: [PATCH 15/23] fix build

---
 packages/playground/src/utils/date.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index b524c46f69..e8afca8c1f 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -1,6 +1,6 @@
 import moment from "moment";
 
-import { type Date } from "./types";
+import type { Date } from "./types";
 export default function toHumanDate(timeInSeconds: number): string {
   return moment(timeInSeconds * 1000).format("DD MMM YYYY, hh:mm A");
 }

From d7f49eca8c0155acd0df88b4fb824c1db2880452 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 18 Sep 2024 15:03:41 +0300
Subject: [PATCH 16/23] Remove the guide comments

---
 packages/playground/src/App.vue                      | 1 -
 packages/playground/src/views/orchestrators_view.vue | 2 --
 packages/playground/src/views/solutions_view.vue     | 1 -
 packages/playground/src/views/vms_view.vue           | 1 -
 4 files changed, 5 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index e126706c34..a274dd70ce 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -317,7 +317,6 @@ const routes: AppRoute[] = [
         icon: "mdi-television",
         route: DashboardRoutes.Deploy.VirtualMachines,
         tooltip: "Deploy your Virtal Machine instances.",
-        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "Orchestrators",
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index 7802acfae4..c1ce6aea26 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -25,7 +25,6 @@ export default {
           "Kubernetes is the standard container orchestration tool. On the TF grid, Kubernetes clusters can be deployed out of the box. We have implemented K3S, a full-blown Kubernetes offering that uses only half of the memory footprint.",
         icon: "kubernetes.png",
         route: DashboardRoutes.Orchestrators.Kubernetes,
-        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "CapRover",
@@ -33,7 +32,6 @@ export default {
           "CapRover is an extremely easy to use app/database deployment & web server manager for your NodeJS, Python, PHP, ASP.NET, Ruby, MySQL, MongoDB, Postgres, WordPress (and etc…) applications!",
         icon: "caprover.png",
         route: DashboardRoutes.Orchestrators.CapRover,
-        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
     ];
 
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index c775b8c3f4..39567a0266 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -37,7 +37,6 @@ export default {
           "Gitea is a forge software package for hosting software development version control using Git as well as other collaborative features like bug tracking, code review, continuous integration, kanban boards, tickets, and wikis. It supports self-hosting but also provides a free public first-party instance.",
         icon: "gitea.png",
         route: DashboardRoutes.Applications.Gitea,
-        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "TFRobot",
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index 01582eb576..bbb348944d 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -26,7 +26,6 @@ export default {
           "Deploy a full virtual machine on Threefold Grid. Full VM allows you to have a complete image with a custom kernel optimized for your own usecase.",
         icon: "vm.png",
         route: DashboardRoutes.VirtualMachines.FullVirtualMachine,
-        // releaseDate: { year: 2024, month: 9, day: 4 },
       },
       {
         title: "Micro Virtual Machine",

From 5cddbf8a982f7ddbfdfaa0b9d89162104ee7fe47 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 18 Sep 2024 15:16:18 +0300
Subject: [PATCH 17/23] Fix all-fixable problem

---
 packages/playground/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index b181e1fa3d..17691dec19 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -560,8 +560,8 @@ import { nextTick } from "process";
 
 import { DashboardRoutes } from "@/router/routes";
 import { AppThemeSelection } from "@/utils/app_theme";
-import type { Date } from "@/utils/types";
 import { ThemeSettingsInterface } from "@/utils/settings";
+import type { Date } from "@/utils/types";
 
 import AppTheme from "./components/app_theme.vue";
 import DeploymentListManager from "./components/deployment_list_manager.vue";

From bcdc2da2b80d467b03bc6946d1e306ff9cc5d7ae Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 18 Sep 2024 15:49:10 +0300
Subject: [PATCH 18/23] Generate doc string for the used interfaces

---
 packages/playground/src/utils/types.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index 90260192a4..4338ac3395 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -15,12 +15,32 @@ export interface IPublicConfig {
   domain?: string;
 }
 
+/**
+ * Represents a date object with day, month, and year properties.
+ *
+ * @interface Date
+ * @property {number} day - The day of the month (1-31).
+ * @property {number} month - The month of the year (1-12).
+ * @property {number} year - The year.
+ */
 export interface Date {
   day: number;
   month: number;
   year: number;
 }
 
+/**
+ * Represents an application card with metadata and optional release date.
+ *
+ * @interface ApplicationCard
+ * @property {string} title - The title of the application.
+ * @property {string} excerpt - A brief description of the application.
+ * @property {string} icon - The icon associated with the application.
+ * @property {string} route - The route or URL of the application.
+ * @property {string[]} [tags] - Optional list of tags or keywords for the application.
+ * @property {Date} [releaseDate] - Optional release date of the application.
+ */
+
 export interface ApplicationCard {
   title: string;
   excerpt: string;

From f461e21c9f447a826042dd4c1dde881da5a78cf9 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 19 Sep 2024 14:29:22 +0300
Subject: [PATCH 19/23] Fix type Date and rename release function

---
 packages/playground/src/App.vue               |  7 +++----
 .../applications/ApplicationCards.vue         |  8 ++++----
 packages/playground/src/utils/date.ts         | 20 ++++++++++++++++---
 packages/playground/src/utils/types.ts        | 14 -------------
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 17691dec19..ff4f144786 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -61,7 +61,7 @@
                             dot
                             inline
                             color="primary"
-                            v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
+                            v-if="item.releaseDate && thirtyDaysInMilliseconds(item.releaseDate)"
                           ></v-badge>
                         </template>
                       </v-tooltip>
@@ -98,7 +98,7 @@
                           dot
                           inline
                           color="primary"
-                          v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
+                          v-if="item.releaseDate && thirtyDaysInMilliseconds(item.releaseDate)"
                         ></v-badge>
                       </template>
                     </v-tooltip>
@@ -263,7 +263,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useTheme } from "vuetify";
 
 import TfLogger from "@/components/logger.vue";
-import { isReleasedOverMon } from "@/utils/date";
+import { thirtyDaysInMilliseconds } from "@/utils/date";
 import { LocalStorageSettingsKey } from "@/utils/settings";
 
 import { useProfileManager } from "./stores/profile_manager";
@@ -561,7 +561,6 @@ import { nextTick } from "process";
 import { DashboardRoutes } from "@/router/routes";
 import { AppThemeSelection } from "@/utils/app_theme";
 import { ThemeSettingsInterface } from "@/utils/settings";
-import type { Date } from "@/utils/types";
 
 import AppTheme from "./components/app_theme.vue";
 import DeploymentListManager from "./components/deployment_list_manager.vue";
diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 79e7cee2bf..00f95a6c80 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -10,7 +10,7 @@
               v-bind="props"
               :class="[
                 isHovering ? 'card-opacity' : undefined,
-                card.releaseDate && isReleasedOverMon(card.releaseDate) ? 'ribben' : '',
+                card.releaseDate && thirtyDaysInMilliseconds(card.releaseDate) ? 'ribben' : '',
               ]"
             >
               <v-img
@@ -41,9 +41,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { isReleasedOverMon } from "@/utils/date";
+import { thirtyDaysInMilliseconds } from "@/utils/date";
 import type { ApplicationCard } from "@/utils/types";
 export default defineComponent({
   name: "ApplicationCards",
@@ -58,7 +58,7 @@ export default defineComponent({
 
     return {
       baseURL,
-      isReleasedOverMon,
+      thirtyDaysInMilliseconds,
     };
   },
 });
diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index e8afca8c1f..0461ecbf4d 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -1,12 +1,26 @@
 import moment from "moment";
 
-import type { Date } from "./types";
 export default function toHumanDate(timeInSeconds: number): string {
   return moment(timeInSeconds * 1000).format("DD MMM YYYY, hh:mm A");
 }
 
-export function isReleasedOverMon(date: Date): boolean {
-  const releaseDate = new Date(date.year, date.month - 1, date.day);
+/**
+ * Checks if the provided date is within the last 30 days.
+ *
+ * @param {Date} date - The date to check.
+ * @returns {boolean} True if the date is within the last 30 days, false otherwise.
+ *
+ * @description
+ * This function calculates the difference in days between the provided date and the current date.
+ * It then checks if this difference is less than or equal to 30 days.
+ *
+ * @example
+ * const date = new Date('2022-01-01');
+ * console.log(thirtyDaysInMilliseconds(date)); // Output: true or false depending on the current date
+ */
+
+export function thirtyDaysInMilliseconds(date: Date): boolean {
+  const releaseDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
   const currentDate = new Date();
   const next30Days = 24 * 60 * 60 * 1000;
 
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index 4338ac3395..5d68f53a8d 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -15,20 +15,6 @@ export interface IPublicConfig {
   domain?: string;
 }
 
-/**
- * Represents a date object with day, month, and year properties.
- *
- * @interface Date
- * @property {number} day - The day of the month (1-31).
- * @property {number} month - The month of the year (1-12).
- * @property {number} year - The year.
- */
-export interface Date {
-  day: number;
-  month: number;
-  year: number;
-}
-
 /**
  * Represents an application card with metadata and optional release date.
  *

From dc89fcb956e026e94687bf3833b86d2d81960334 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 19 Sep 2024 17:19:40 +0300
Subject: [PATCH 20/23] Format code and add unit test for the release function

---
 packages/playground/src/App.vue               |  6 ++--
 .../applications/ApplicationCards.vue         |  6 ++--
 packages/playground/src/utils/date.ts         | 30 ++++++++-----------
 .../tests/utils/isReleasedOverMon.test.ts     | 28 +++++++++++++++++
 4 files changed, 47 insertions(+), 23 deletions(-)
 create mode 100644 packages/playground/tests/utils/isReleasedOverMon.test.ts

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index ff4f144786..f04a086476 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -61,7 +61,7 @@
                             dot
                             inline
                             color="primary"
-                            v-if="item.releaseDate && thirtyDaysInMilliseconds(item.releaseDate)"
+                            v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
                           ></v-badge>
                         </template>
                       </v-tooltip>
@@ -98,7 +98,7 @@
                           dot
                           inline
                           color="primary"
-                          v-if="item.releaseDate && thirtyDaysInMilliseconds(item.releaseDate)"
+                          v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
                         ></v-badge>
                       </template>
                     </v-tooltip>
@@ -263,7 +263,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useTheme } from "vuetify";
 
 import TfLogger from "@/components/logger.vue";
-import { thirtyDaysInMilliseconds } from "@/utils/date";
+import { isReleasedOverMon } from "@/utils/date";
 import { LocalStorageSettingsKey } from "@/utils/settings";
 
 import { useProfileManager } from "./stores/profile_manager";
diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 00f95a6c80..1176f5d03b 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -10,7 +10,7 @@
               v-bind="props"
               :class="[
                 isHovering ? 'card-opacity' : undefined,
-                card.releaseDate && thirtyDaysInMilliseconds(card.releaseDate) ? 'ribben' : '',
+                card.releaseDate && isReleasedOverMon(card.releaseDate) ? 'ribben' : '',
               ]"
             >
               <v-img
@@ -43,7 +43,7 @@
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
-import { thirtyDaysInMilliseconds } from "@/utils/date";
+import { isReleasedOverMon } from "@/utils/date";
 import type { ApplicationCard } from "@/utils/types";
 export default defineComponent({
   name: "ApplicationCards",
@@ -58,7 +58,7 @@ export default defineComponent({
 
     return {
       baseURL,
-      thirtyDaysInMilliseconds,
+      isReleasedOverMon,
     };
   },
 });
diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index 0461ecbf4d..5808959194 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -5,25 +5,21 @@ export default function toHumanDate(timeInSeconds: number): string {
 }
 
 /**
- * Checks if the provided date is within the last 30 days.
+ * Checks if a release date is within the last 30 days from a given current date.
  *
- * @param {Date} date - The date to check.
- * @returns {boolean} True if the date is within the last 30 days, false otherwise.
- *
- * @description
- * This function calculates the difference in days between the provided date and the current date.
- * It then checks if this difference is less than or equal to 30 days.
- *
- * @example
- * const date = new Date('2022-01-01');
- * console.log(thirtyDaysInMilliseconds(date)); // Output: true or false depending on the current date
+ * @param {Date} releaseDate - The date of release.
+ * @param {Date} [currentDate] - The current date to compare with. Defaults to the current date.
+ * @returns {boolean} True if the release date is within the last 30 days, false otherwise.
  */
 
-export function thirtyDaysInMilliseconds(date: Date): boolean {
-  const releaseDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-  const currentDate = new Date();
-  const next30Days = 24 * 60 * 60 * 1000;
-
-  const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / next30Days);
+export function isReleasedOverMon(releaseDate: Date, currentDate?: Date): boolean {
+  const thirtyDaysInMilliseconds = 24 * 60 * 60 * 1000;
+  let diff = 0;
+  if (currentDate) {
+    diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / thirtyDaysInMilliseconds);
+  } else {
+    const date = new Date();
+    diff = Math.abs((date.getTime() - releaseDate.getTime()) / thirtyDaysInMilliseconds);
+  }
   return diff <= 30;
 }
diff --git a/packages/playground/tests/utils/isReleasedOverMon.test.ts b/packages/playground/tests/utils/isReleasedOverMon.test.ts
new file mode 100644
index 0000000000..4510f014cc
--- /dev/null
+++ b/packages/playground/tests/utils/isReleasedOverMon.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { isReleasedOverMon } from "../../src/utils/date";
+
+describe("isReleasedOverMon", () => {
+  it("return true if the releaseDate is within 30 days", () => {
+    const releaseDate = new Date("2024-09-1");
+    const currentDate = new Date("2024-09-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
+  });
+
+  it("return false if the releaseDate was from more than 30 days", () => {
+    const releaseDate = new Date("2024-09-1");
+    const currentDate = new Date("2024-11-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(false);
+  });
+
+  it("return true if releaseDate is today", () => {
+    const releaseDate = new Date("2024-09-19");
+    const currentDate = new Date("2024-09-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
+  });
+
+  it("return true if the releaseDate is within 30 days and the currentDate wasn't provided", () => {
+    const releaseDate = new Date("2024-09-1");
+    expect(isReleasedOverMon(releaseDate)).toBe(true);
+  });
+});

From 8fb3e983ca8f95f5631c48b6bec939fbeab0b1c5 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 19 Sep 2024 17:57:11 +0300
Subject: [PATCH 21/23] pass the date of now instead of optional current date

---
 packages/playground/src/App.vue                        |  4 ++--
 .../src/components/applications/ApplicationCards.vue   |  2 +-
 packages/playground/src/utils/date.ts                  | 10 ++--------
 .../playground/tests/utils/isReleasedOverMon.test.ts   |  5 -----
 4 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index f04a086476..a0db7749c9 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -61,7 +61,7 @@
                             dot
                             inline
                             color="primary"
-                            v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
+                            v-if="item.releaseDate && isReleasedOverMon(item.releaseDate, new Date())"
                           ></v-badge>
                         </template>
                       </v-tooltip>
@@ -98,7 +98,7 @@
                           dot
                           inline
                           color="primary"
-                          v-if="item.releaseDate && isReleasedOverMon(item.releaseDate)"
+                          v-if="item.releaseDate && isReleasedOverMon(item.releaseDate, new Date())"
                         ></v-badge>
                       </template>
                     </v-tooltip>
diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 1176f5d03b..0f791c4a70 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -10,7 +10,7 @@
               v-bind="props"
               :class="[
                 isHovering ? 'card-opacity' : undefined,
-                card.releaseDate && isReleasedOverMon(card.releaseDate) ? 'ribben' : '',
+                card.releaseDate && isReleasedOverMon(card.releaseDate, new Date()) ? 'ribben' : '',
               ]"
             >
               <v-img
diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index 5808959194..ac5bafdd04 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -12,14 +12,8 @@ export default function toHumanDate(timeInSeconds: number): string {
  * @returns {boolean} True if the release date is within the last 30 days, false otherwise.
  */
 
-export function isReleasedOverMon(releaseDate: Date, currentDate?: Date): boolean {
+export function isReleasedOverMon(releaseDate: Date, currentDate: Date): boolean {
   const thirtyDaysInMilliseconds = 24 * 60 * 60 * 1000;
-  let diff = 0;
-  if (currentDate) {
-    diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / thirtyDaysInMilliseconds);
-  } else {
-    const date = new Date();
-    diff = Math.abs((date.getTime() - releaseDate.getTime()) / thirtyDaysInMilliseconds);
-  }
+  const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / thirtyDaysInMilliseconds);
   return diff <= 30;
 }
diff --git a/packages/playground/tests/utils/isReleasedOverMon.test.ts b/packages/playground/tests/utils/isReleasedOverMon.test.ts
index 4510f014cc..4617f24f3b 100644
--- a/packages/playground/tests/utils/isReleasedOverMon.test.ts
+++ b/packages/playground/tests/utils/isReleasedOverMon.test.ts
@@ -20,9 +20,4 @@ describe("isReleasedOverMon", () => {
     const currentDate = new Date("2024-09-19");
     expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
   });
-
-  it("return true if the releaseDate is within 30 days and the currentDate wasn't provided", () => {
-    const releaseDate = new Date("2024-09-1");
-    expect(isReleasedOverMon(releaseDate)).toBe(true);
-  });
 });

From 6d779af47ffdc43f79c26ef8b0e49e9df85b0296 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 19 Sep 2024 18:04:33 +0300
Subject: [PATCH 22/23] format test cases to be more generic

---
 .../tests/utils/isReleasedOverMon.test.ts        | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/playground/tests/utils/isReleasedOverMon.test.ts b/packages/playground/tests/utils/isReleasedOverMon.test.ts
index 4617f24f3b..9efbfed725 100644
--- a/packages/playground/tests/utils/isReleasedOverMon.test.ts
+++ b/packages/playground/tests/utils/isReleasedOverMon.test.ts
@@ -4,20 +4,18 @@ import { isReleasedOverMon } from "../../src/utils/date";
 
 describe("isReleasedOverMon", () => {
   it("return true if the releaseDate is within 30 days", () => {
-    const releaseDate = new Date("2024-09-1");
-    const currentDate = new Date("2024-09-19");
-    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
+    const releaseDate = new Date(Date.now() - 20 * 24 * 60 * 60 * 1000);
+    expect(isReleasedOverMon(releaseDate, new Date())).toBe(true);
   });
 
   it("return false if the releaseDate was from more than 30 days", () => {
-    const releaseDate = new Date("2024-09-1");
-    const currentDate = new Date("2024-11-19");
-    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(false);
+    const releaseDate = new Date(Date.now() - 50 * 24 * 60 * 60 * 1000);
+
+    expect(isReleasedOverMon(releaseDate, new Date())).toBe(false);
   });
 
   it("return true if releaseDate is today", () => {
-    const releaseDate = new Date("2024-09-19");
-    const currentDate = new Date("2024-09-19");
-    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
+    const releaseDate = new Date();
+    expect(isReleasedOverMon(releaseDate, new Date())).toBe(true);
   });
 });

From c07a53bf4d1c29efb2d95e2826d0e6e4be453ec3 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 19 Sep 2024 18:23:12 +0300
Subject: [PATCH 23/23] determind the dates in test cases

---
 packages/playground/src/utils/date.ts            | 12 ++++++------
 .../tests/utils/isReleasedOverMon.test.ts        | 16 +++++++++-------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index ac5bafdd04..3732b29f14 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -5,15 +5,15 @@ export default function toHumanDate(timeInSeconds: number): string {
 }
 
 /**
- * Checks if a release date is within the last 30 days from a given current date.
+ * Checks if a release date is within the last 30 days from the current date.
  *
- * @param {Date} releaseDate - The date of release.
- * @param {Date} [currentDate] - The current date to compare with. Defaults to the current date.
- * @returns {boolean} True if the release date is within the last 30 days, false otherwise.
+ * @param {Date} releaseDate - The date of release
+ * @param {Date} currentDate - The current date
+ * @returns {boolean} True if the release date is within the last 30 days, false otherwise
  */
 
 export function isReleasedOverMon(releaseDate: Date, currentDate: Date): boolean {
-  const thirtyDaysInMilliseconds = 24 * 60 * 60 * 1000;
-  const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / thirtyDaysInMilliseconds);
+  const millisecondsInADay = 24 * 60 * 60 * 1000;
+  const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / millisecondsInADay);
   return diff <= 30;
 }
diff --git a/packages/playground/tests/utils/isReleasedOverMon.test.ts b/packages/playground/tests/utils/isReleasedOverMon.test.ts
index 9efbfed725..4617f24f3b 100644
--- a/packages/playground/tests/utils/isReleasedOverMon.test.ts
+++ b/packages/playground/tests/utils/isReleasedOverMon.test.ts
@@ -4,18 +4,20 @@ import { isReleasedOverMon } from "../../src/utils/date";
 
 describe("isReleasedOverMon", () => {
   it("return true if the releaseDate is within 30 days", () => {
-    const releaseDate = new Date(Date.now() - 20 * 24 * 60 * 60 * 1000);
-    expect(isReleasedOverMon(releaseDate, new Date())).toBe(true);
+    const releaseDate = new Date("2024-09-1");
+    const currentDate = new Date("2024-09-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
   });
 
   it("return false if the releaseDate was from more than 30 days", () => {
-    const releaseDate = new Date(Date.now() - 50 * 24 * 60 * 60 * 1000);
-
-    expect(isReleasedOverMon(releaseDate, new Date())).toBe(false);
+    const releaseDate = new Date("2024-09-1");
+    const currentDate = new Date("2024-11-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(false);
   });
 
   it("return true if releaseDate is today", () => {
-    const releaseDate = new Date();
-    expect(isReleasedOverMon(releaseDate, new Date())).toBe(true);
+    const releaseDate = new Date("2024-09-19");
+    const currentDate = new Date("2024-09-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
   });
 });