Add a filter to only display public links

When the key filter is clicked once, it only displays private link. When it is clicked on again, it becomes red and only public links are displayed. Another click and all links are displayed. The current visibility status is shown in the search banner

Fixes #1030

tpl/default/css/shaarli.css

@@ -453,6 +453,11 @@ body, .pure-g [class*="pure-u"] {
     background: #1b926c;
 }
 
+.linklist-filters .filter-block {
+    color: #f5f5f5;
+    background: #ac2925;
+}
+
 .linklist-pages {
     margin: 5px 0;
     color: #252525;

tpl/default/linklist.paging.html

@@ -6,8 +6,8 @@
           {'Filters'|t}
         </span>
         {if="isLoggedIn()"}
-        <a href="?privateonly" title="{'Filter private links'|t}"
-           class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+        <a href="?visibility={$nextVisibility}" title="{'Filter links by visibility'|t}"
+           class="{if="$visibility=='private'"}filter-on{elseif="$visibility=='public'"}filter-block{else}filter-off{/if}"
         ><i class="fa fa-key"></i></a>
         {/if}
         <a href="?untaggedonly" title="{'Filter untagged links'|t}"

tpl/vintage/linklist.paging.html

@@ -1,11 +1,11 @@
 <div class="paging">
 {if="isLoggedIn()"}
     <div class="paging_privatelinks">
-        <a href="?privateonly">
-		{if="$privateonly"}
-		<img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links">
+        <a href="?visibility={$nextVisibility}">
+		{if="$visibility=='private' || $visibility=='public'"}
+		<img src="images/private_16x16_active.png#" width="16" height="16" title="Filter links by visibility" alt="Filter links by visibility">
 		{else}
-		<img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links">
+		<img src="images/private_16x16.png#" width="16" height="16" title="Filter links by visibility" alt="Filter links by visibility">
 		{/if}
 		</a>