From bf634382e516453e5e33a3e596eb305855cf6437 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sat, 22 Apr 2023 13:04:52 -0700
Subject: [PATCH] feat: sorts running conttainers at top (#2142)

---
 assets/components/SideMenu.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index a1c2638c..16de1cf5 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -56,7 +56,7 @@
     </div>
     <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" v-if="ready">
-      <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
+      <li v-for="item in sortedContainers" :key="item.id" :class="item.state">
         <router-link
           :to="{ name: 'container-id', params: { id: item.id } }"
           active-class="is-active"
@@ -101,6 +101,18 @@ const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);
 
+const sortedContainers = computed(() =>
+  visibleContainers.value.sort((a, b) => {
+    if (a.state === "running" && b.state !== "running") {
+      return -1;
+    } else if (a.state !== "running" && b.state === "running") {
+      return 1;
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  })
+);
+
 const activeContainersById = computed(() =>
   activeContainers.value.reduce((acc, item) => {
     acc[item.id] = item;