show snackbar counter

front/core/components/chip/style.scss

@@ -12,6 +12,15 @@ vn-chip {
     max-width: 100%;
     box-sizing: border-box;
 
+    &.small {
+        height: 1.5em;
+
+        & > div {
+            padding: 0.6em;
+            font-size: 0.8rem;
+        }
+    }
+
     &.colored {
         background-color: $color-main;
         color: $color-font-bg;

front/core/components/snackbar/snackbar.js

@@ -63,13 +63,54 @@ export default class Controller extends Component {
     show(data) {
         this.actionHandler = data.actionHandler;
 
-        let shape = this.createShape(data);
+        let shape;
 
-        setTimeout(() =>
-            this.hide(shape), data.timeout || 3000);
+        const lastShape = this.lastShape;
+        const lastShapeData = lastShape && lastShape.data;
+        const isEqual = lastShape && (lastShapeData.shapeType == data.shapeType && lastShapeData.message == data.message);
 
-        setTimeout(() =>
-            shape.classList.add('shown'), 30);
+        if (this.lastShape && isEqual) {
+            shape = this.lastShape.element;
+
+            const shapeText = shape.querySelector('.text');
+            let chip = shapeText.querySelector('vn-chip');
+
+            if (chip) {
+                const text = chip.querySelector('span');
+                const number = parseInt(text.innerHTML);
+
+                text.innerHTML = number + 1;
+            } else {
+                chip = document.createElement('vn-chip');
+                chip.setAttribute('class', 'warning small');
+                let parent = document.createElement('div');
+                let span = document.createElement('span');
+                let text = document.createTextNode(0);
+                span.append(text);
+                parent.append(span);
+                chip.append(parent);
+
+                shapeText.appendChild(chip);
+            }
+
+            if (this.hideTimeout)
+                clearTimeout(this.hideTimeout);
+        } else {
+            shape = this.createShape(data);
+
+            setTimeout(() =>
+                shape.classList.add('shown'), 30);
+        }
+
+        this.hideTimeout = setTimeout(() => {
+            this.hide(shape);
+            this.lastShape = null;
+        }, data.timeout || 3000);
+
+        this.lastShape = {
+            data: data,
+            element: shape
+        };
     }
 
     /**

front/core/components/snackbar/style.scss

@@ -19,10 +19,17 @@ vn-snackbar .shape {
     border-radius: .2em;
     margin-bottom: 15px;
     color: white;
-    padding: 1em;
+    padding: 0.8em;
     
-    &.text {
-        text-align: center
+    & > .text {
+        position: relative;
+        text-align: center;
+
+        vn-chip { 
+            position: absolute;
+            left: -1.5em;
+            top: -1.5em;
+        }
     }
 
     &.shown {