fix: removes empty containers (#3511)

assets/components/ContainerViewer/ContainerTitle.vue

@@ -12,10 +12,12 @@
             {{ container.hostLabel }}
           </li>
           <li>
-            <div class="wrapper" ref="wrapper">
+            <div v-if="otherContainers.length === 0" class="font-mono">{{ container.name }}</div>
+            <div class="wrapper" ref="wrapper" v-else>
               <button popovertarget="popover-container-list" class="btn btn-xs md:btn-sm anchor font-mono">
                 {{ container.name }} <carbon:caret-down />
               </button>
+
               <ul popover id="popover-container-list" class="dropdown menu rounded-box bg-base-100 tethered shadow-sm">
                 <li v-for="other in otherContainers">
                   <router-link :to="{ name: '/container/[id]', params: { id: other.id } }">

assets/components/HostMenu.vue

@@ -80,8 +80,12 @@
                     active-class="menu-active"
                     @click.alt.stop.prevent="pinnedStore.pinContainer(item)"
                     :title="item.name"
-                    class="group auto-cols-[auto_max-content_max-content]"
+                    class="group auto-cols-[content_max_auto_max-content_max-content]"
                   >
+                    <div
+                      class="status data-[state=exited]:status-error data-[state=running]:status-success"
+                      :data-state="item.state"
+                    ></div>
                     <div class="truncate">
                       {{ item.name }}
                     </div>
@@ -215,7 +219,7 @@ const toggleShowAllContainers = () => (showAllContainers.value = !showAllContain
 }
 
 li.exited {
-  @apply opacity-50;
+  @apply opacity-75;
 }
 
 li.deleted {