Improved entity collapse logic

- Toggle collapsed state also if clicked on the gap between the entity
  name and the right edge, instead of opening the entity modal. The
  entity configuration modal should open only when clicking on the
  entity name or icon (and these should be highlighted on hover as links
  as well).

- The collapsed state update should be propagated to the wrapped
  component as well, if applicable.

platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue

@@ -4,16 +4,19 @@
     <div class="row item entity-container"
         :class="{blink: justUpdated, 'with-children': hasChildren, collapsed: isCollapsed}">
       <div class="adjuster" :class="{'col-12': !hasChildren, 'col-11': hasChildren}">
-        <component :is="component"
+        <component
+          :is="component"
           :value="value"
           :loading="loading"
+          ref="instance"
           :error="error || value?.reachable == false"
+          @click="onClick"
           @input="$emit('input', $event)"
           @loading="$emit('loading', $event)"
         />
       </div>
 
-      <div class="col-1 collapse-toggler" @click.stop="collapsed = !collapsed" v-if="hasChildren">
+      <div class="col-1 collapse-toggler" @click.stop="toggleCollapsed" v-if="hasChildren">
         <i class="fas"
           :class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" />
       </div>
@@ -63,6 +66,10 @@ export default {
 
       return this.collapsed
     },
+
+    instance() {
+      return this.$refs.instance
+    },
   },
 
   methods: {
@@ -76,6 +83,20 @@ export default {
 
       return this.objectsEqual(a, b)
     },
+
+    onClick(event) {
+      if (event.target.classList.contains('label')) {
+        event.stopPropagation()
+        this.toggleCollapsed()
+      }
+    },
+
+    toggleCollapsed() {
+      this.collapsed = !this.collapsed
+      // Propagate the collapsed state to the wrapped component if applicable
+      if ('collapsed' in this.instance)
+        this.instance.collapsed = !this.instance.collapsed
+    }
   },
 
   mounted() {
@@ -152,6 +173,22 @@ export default {
   }
 }
 
+:deep(.entity-container) {
+  .head {
+    .name {
+      display: inline-flex;
+
+      &:hover {
+        color: $hover-fg;
+      }
+    }
+
+    .icon:hover {
+      color: $hover-fg;
+    }
+  }
+}
+
 .blink {
   animation: blink-animation 1s steps(20, start);
 }

platypush/backend/http/webapp/src/style/themes/light.scss

@@ -79,6 +79,7 @@ $active-glow-bg-2: #9cdfb0 !default;
 /// Hover
 $default-hover-fg: #35b870 !default;
 $default-hover-fg-2: #38cf80 !default;
+$hover-fg: $default-hover-fg !default;
 $hover-bg: linear-gradient(90deg, rgba(190,246,218,1) 0%, rgba(229,251,240,1) 100%) !default;
 $active-bg: #8fefb7 !default;