Add deployment list page

packages/playground/src/App.vue

@@ -320,6 +320,12 @@ const routes: AppRoute[] = [
         route: DashboardRoutes.Deploy.YourContracts,
         tooltip: "Explore and modify your TFChain contracts.",
       },
+      {
+        title: "Your Deployments",
+        icon: "mdi-file-document-edit",
+        route: DashboardRoutes.Deploy.YourDeployments,
+        tooltip: "Explore and modify your TFChain contracts.",
+      },
       {
         title: "Images",
         icon: "mdi-open-in-new",

packages/playground/src/dashboard/deployment_list.vue

@@ -0,0 +1,41 @@
+<template>
+  <view-layout>
+    <template #list>
+      <div>
+        <div v-for="(project, index) in projects" :key="index">
+          <TfDeploymentList :title="`${project.name} Instances`" :project-name="project.value" />
+        </div>
+      </div>
+    </template>
+  </view-layout>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+
+import { ProjectName } from "../types";
+import TfDeploymentList from "../weblets/tf_deployment_list.vue";
+import Subsquid from "../weblets/tf_subsquid.vue";
+
+export default {
+  name: "DeploymentsList",
+  components: {
+    TfDeploymentList,
+  },
+
+  setup() {
+    const projects = ref();
+
+    // Convert enum to array of objects
+    projects.value = Object.keys(ProjectName).map(key => ({
+      name: key,
+      value: ProjectName[key as keyof typeof ProjectName],
+    }));
+    Object.keys(ProjectName).forEach(key => {
+      const enumValue = ProjectName[key as keyof typeof ProjectName];
+      console.log(`${key} = ${enumValue}`);
+    });
+    return { projects };
+  },
+};
+</script>

packages/playground/src/router/index.ts

@@ -675,6 +675,22 @@ function createDeployRoutes(): RouteRecordRaw[] {
             info: { page: "info/contracts_list.md" },
           },
         },
+        {
+          path: DashboardRoutes.Deploy.YourContracts,
+          component: () => import("../dashboard/contracts_list.vue"),
+          meta: {
+            title: "Your Contracts List",
+            info: { page: "info/deployment_list.md" },
+          },
+        },
+        {
+          path: DashboardRoutes.Deploy.YourDeployments,
+          component: () => import("../dashboard/deployment_list.vue"),
+          meta: {
+            title: "Your Contracts List",
+            info: { page: "info/deployment_list.md" },
+          },
+        },
 
         {
           path: DashboardRoutes.Deploy.SSHKey,

packages/playground/src/router/routes.ts

@@ -6,6 +6,8 @@ enum DeployRoutes {
   Orchestrators = "/deploy/orchestrators/",
   Applications = "/deploy/applications/",
   YourContracts = "/deploy/your-contracts/",
+  YourDeployments = "/deploy/your-deployments/",
+
   Images = "https://hub.grid.tf/",
   SSHKey = "/deploy/sshkey/",
 }