2 files changed, 24 insertions, 2 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 73fade5f..ef9ee23b 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -211,7 +211,7 @@ body, .pure-g [class*="pure-u"] {
     }
 }
 
-#search, #search-linklist {
+#search, #search-linklist, #search-tagcloud {
     text-align: center;
     width: 100%;
 }
@@ -234,6 +234,7 @@ body, .pure-g [class*="pure-u"] {
 }
 
 #search button,
+#search-tagcloud button,
 #search-linklist button {
     background: transparent;
     border: none;
@@ -251,6 +252,9 @@ body, .pure-g [class*="pure-u"] {
 #search-linklist button:hover {
     color: #fff;
 }
+#search-tagcloud button:hover {
+    color: #d0d0d0;
+}
 
 #search-linklist {
     padding: 5px 0;
diff --git a/tpl/default/tagcloud.html b/tpl/default/tagcloud.html
index 53c31748..efe6e937 100644
--- a/tpl/default/tagcloud.html
+++ b/tpl/default/tagcloud.html
@@ -12,6 +12,24 @@
     {$countTags=count($tags)}
     <h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2>
 
+    <div id="search-tagcloud" class="pure-g">
+      <div class="pure-u-lg-1-4"></div>
+      <div class="pure-u-1 pure-u-lg-1-2">
+        <form method="GET">
+          <input type="hidden" name="do" value="tagcloud">
+          <input type="text" name="searchtags" placeholder="{'Filter by tag'|t}"
+                 {if="!empty($search_tags)"}
+                 value="{$search_tags}"
+                 {/if}
+          autocomplete="off" data-multiple data-autofirst data-minChars="1"
+          data-list="{loop="$tags"}{$key}, {/loop}"
+          >
+          <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+        </form>
+      </div>
+      <div class="pure-u-lg-1-4"></div>
+    </div>
+
     <div id="plugin_zone_start_tagcloud" class="plugin_zone">
       {loop="$plugin_start_zone"}
         {$value}
@@ -21,7 +39,7 @@
     <div id="cloudtag">
       {loop="tags"}
         <a href="?searchtags={$key|urlencode}" style="font-size:{$value.size}em;">{$key}</a
-        ><span class="count">{$value.count}</span>
+        ><a href="?addtag={$key|urlencode}" title="{'Filter by tag'|t}" class="count">{$value.count}</a>
         {loop="$value.tag_plugin"}
           {$value}
         {/loop}