feat: shows a subtle background affect when a new container is added (#4494)

Author: amir20

assets/components/HostMenu.vue

@@ -79,7 +79,12 @@
               </router-link>
             </summary>
             <ul>
-              <li v-for="item in containers" :class="item.state" :key="item.id">
+              <li
+                v-for="item in containers"
+                :class="[item.state, { 'highlight-new': item.isNew }]"
+                :key="item.id"
+                @animationend="item.isNew = false"
+              >
                 <Popup>
                   <router-link
                     :to="{ name: '/container/[id]', params: { id: item.id } }"
@@ -248,4 +253,17 @@ li.exited {
 li.deleted {
   @apply hidden;
 }
+
+li.highlight-new {
+  animation: highlight-fade 3s ease-out;
+}
+
+@keyframes highlight-fade {
+  from {
+    background-color: oklch(from var(--color-secondary) l c h / 0.25);
+  }
+  to {
+    background-color: transparent;
+  }
+}
 </style>

assets/models/Container.ts

@@ -49,6 +49,7 @@ export class Container {
     stats: Stat[],
     public readonly group?: string,
     public health?: ContainerHealth,
+    public isNew: boolean = false,
   ) {
     const defaultStat = { cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 } as Stat;
     this._stat = ref(stats.at(-1) || defaultStat);

assets/stores/container.ts

@@ -135,12 +135,23 @@ export const useContainerStore = defineStore("container", () => {
 
     existingContainers.forEach((c) => {
       const existing = allContainersById.value[c.id];
+      if (ready.value && existing.state !== "running" && c.state === "running") {
+        existing.isNew = true;
+      }
       existing.state = c.state;
       existing.health = c.health;
       existing.name = c.name;
     });
 
-    containers.value = [...containers.value, ...newContainers.map(Container.fromJSON)];
+    const mapped = newContainers.map((c) => {
+      const container = Container.fromJSON(c);
+      if (ready.value) {
+        container.isNew = true;
+      }
+      return container;
+    });
+
+    containers.value = [...containers.value, ...mapped];
   };
 
   const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);