Working on the tag system

app/Controllers/TagController.php

@@ -78,7 +78,7 @@ class TagController extends Controller
     public function removeTag(Request $request, Response $response): Response
     {
         $validator = $this->validateTag($request)
-            ->addRule('tag.exists', false);
+            ->addRule('tag.exists', false); // TODO: set correct rule, the tag must exists
 
         if ($validator->fails()) {
             throw new HttpBadRequestException($request);

resources/templates/dashboard/grid.twig

@@ -40,7 +40,10 @@
                                             </div>
                                         </a>
                                         <div class="overlay-rows-bottom pl-3 pr-3 pb-1">
-                                            <a href="javascript:void(0)" class="badge badge-pill badge-success shadow-sm tag-add" data-id="{{ media.id }}"><i class="fas fa-plus fa-sm fa-fw"></i></a>
+                                            {% for tag_id, tag_name in media.tags %}
+                                                <span class="badge badge-pill badge-light shadow-sm tag-item mr-1 d-inline-block" data-id="{{ tag_id }}" title="{{ tag_name }}">{{ tag_name }}</span>
+                                            {% endfor %}
+                                            <a href="javascript:void(0)" class="badge badge-pill badge-success shadow-sm tag-add mr-1" data-id="{{ media.id }}"><i class="fas fa-plus fa-sm fa-fw"></i></a>
                                         </div>
                                     </div>
                                 </div>
@@ -51,7 +54,7 @@
                                 {% endif %}
                             </div>
                             <div class="card-footer d-flex justify-content-between">
-                                <span class="user-title">{{ media.filename }}</span>
+                                <span class="user-title" title="{{ media.filename }}">{{ media.filename }}</span>
                                 <small>{{ media.timestamp|date("d/m/Y H:i") }}</small>
                             </div>
                         </div>

src/css/app.css

@@ -196,6 +196,8 @@ body {
 }
 
 .tag-item {
-    user-select: none;
     cursor: pointer;
+    max-width: 145px;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }

src/js/app.js

@@ -30,7 +30,13 @@ var app = {
         $('#bulk-delete').click(app.bulkDelete);
 
         $('.tag-add').click(app.addTag);
-        $('.tag-item').dblclick(app.removeTag);
+        $('.tag-item').popover({
+            html: true,
+            placement: 'top',
+            trigger: 'hover',
+            content: '<a href="javascript:void(0)" class="text-danger tag-delete" data-id=""><i class="fas fa-trash"></i></a>'
+        });
+
 
         $('.alert').fadeTo(10000, 500).slideUp(500, function () {
             $('.alert').slideUp(500);
@@ -152,6 +158,7 @@ var app = {
             .addClass('form-control form-control-verysm tag-input')
             .attr('data-id', $caller.data('id'))
             .attr('maxlength', 32)
+            .css('width', '90px')
             .keydown(function (e) {
                 if (e.keyCode === 13) { // enter -> save tag
                     app.saveTag.call($(this)); // change context