28 files changed, 659 insertions, 70 deletions

diff --git a/tpl/default/changetag.html b/tpl/default/changetag.html
index 8d263a16..49dd20d9 100644
--- a/tpl/default/changetag.html
+++ b/tpl/default/changetag.html
@@ -11,7 +11,7 @@
     <h2 class="window-title">{"Manage tags"|t}</h2>
     <form method="POST" action="#" name="changetag" id="changetag">
       <div>
-        <input type="text" name="fromtag" placeholder="{'Tag'|t}"
+        <input type="text" name="fromtag" placeholder="{'Tag'|t}" value="{$fromtag}"
                list="tagsList" autocomplete="off" class="awesomplete autofocus" data-minChars="1">
         <datalist id="tagsList">
           {loop="$tags"}<option>{$key}</option>{/loop}
@@ -31,6 +31,8 @@
         <input type="submit" value="{'Delete'|t}" name="deletetag" class="button button-red confirm-delete">
       </div>
     </form>
+
+    <p>You can also edit tags in the <a href="?do=taglist&sort=usage">tag list</a>.</p>
   </div>
 </div>
 {include="page.footer"}
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index 12261487..76a1b9fd 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -34,7 +34,7 @@
         <div class="pure-u-lg-{$ratioLabel} pure-u-1">
           <div class="form-label">
             <label for="titleLink">
-              <span class="label-name">{'Title link'|t}</span><br>
+              <span class="label-name">{'Home link'|t}</span><br>
               <span class="label-desc">{'Default value'|t}: ?</span>
             </label>
           </div>
@@ -73,15 +73,35 @@
         <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
           <div class="form-label">
             <label>
-              <span class="label-name">{'Timezone'|t}</span>
+              <span class="label-name">{'Timezone'|t}</span><br>
+              <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
             </label>
           </div>
         </div>
         <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
           <div class="form-input">
-            {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
-            <div class="timezone" id="timezone-remove">{$timezone_form}</div>
-            <div class="timezone" id="timezone-add"></div>
+            <div class="timezone">
+              <select id="continent" name="continent">
+                {loop="$continents"}
+                  {if="$key !== 'selected'"}
+                    <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                      {$value}
+                    </option>
+                  {/if}
+                {/loop}
+              </select>
+              <select id="city" name="city">
+                {loop="$cities"}
+                  {if="$key !== 'selected'"}
+                    <option value="{$value.city}"
+                            {if="$cities.selected === $value.city"}selected{/if}
+                            data-continent="{$value.continent}">
+                      {$value.city}
+                    </option>
+                  {/if}
+                {/loop}
+              </select>
+            </div>
           </div>
         </div>
       </div>
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 8fcd13af..28920648 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -35,14 +35,29 @@ pre {
 }
 
 @font-face {
-    font-family: 'Roboto Slab';
+    font-family: 'Roboto';
     font-weight: 400;
     font-style: normal;
     src:
-    local('Fira Sans'),
-    local('Fira-Sans-regular'),
-    url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
-    url('../fonts/Fira-Sans-regular.woff') format('woff');
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url('../fonts/Roboto-Regular.woff2') format('woff2'),
+    url('../fonts/Roboto-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-weight: 700;
+    font-style: normal;
+    src:
+    local('Roboto'),
+    local('Roboto-Bold'),
+    url('../fonts/Roboto-Bold.woff2') format('woff2'),
+    url('../fonts/Roboto-Bold.woff') format('woff');
+}
+
+body, .pure-g [class*="pure-u"] {
+    font-family: Roboto, Arial, sans-serif;
 }
 
 /**
@@ -68,10 +83,6 @@ pre {
     .pure-u-xl-visible { display: inline-block !important; }
 }
 
-.pure-g [class*="pure-u"]{
-    font-family: Roboto Slab, Arial, sans-serif;
-}
-
 /**
  * Make pure-extras alert closable.
  */
@@ -200,7 +211,7 @@ pre {
     }
 }
 
-#search, #search-linklist {
+#search, #search-linklist, #search-tagcloud {
     text-align: center;
     width: 100%;
 }
@@ -223,6 +234,7 @@ pre {
 }
 
 #search button,
+#search-tagcloud button,
 #search-linklist button {
     background: transparent;
     border: none;
@@ -240,6 +252,9 @@ pre {
 #search-linklist button:hover {
     color: #fff;
 }
+#search-tagcloud button:hover {
+    color: #d0d0d0;
+}
 
 #search-linklist {
     padding: 5px 0;
@@ -264,6 +279,19 @@ pre {
     }
 }
 
+.subheader-form a.button {
+    color: #f5f5f5;
+    font-weight: bold;
+    text-decoration: none;
+    border: 2px solid #f5f5f5;
+    border-radius: 5px;
+    padding: 3px 10px;
+}
+
+.linklist-item-editbuttons .delete-checkbox {
+    display: none;
+}
+
 #header-login-form input[type="text"], #header-login-form input[type="password"] {
     width: 200px;
 }
@@ -504,7 +532,6 @@ pre {
     color: #252525;
     text-decoration: none;
     vertical-align: middle;
-    font-family: Roboto Slab, Arial, sans-serif;
 }
 
 .linklist-item-title .linklist-link {
@@ -560,7 +587,6 @@ pre {
 .linklist-item-description {
     position: relative;
     padding: 10px;
-    font-family: Roboto Slab, Arial, sans-serif;
     word-wrap: break-word;
     color: #252525;
     line-height: 1.3em;
@@ -725,10 +751,11 @@ pre {
 .page-form a {
     color: #1b926c;
     font-weight: bold;
+    text-decoration: none;
 }
 
 .page-form p {
-    padding: 0 10px;
+    padding: 5px 10px;
     margin: 0;
 }
 
@@ -1044,7 +1071,7 @@ form[name="linkform"].page-form {
 }
 
 #cloudtag, #cloudtag a {
-    color: #000;
+    color: #252525;
     text-decoration: none;
 }
 
@@ -1053,6 +1080,42 @@ form[name="linkform"].page-form {
 }
 
 /**
+ * TAG LIST
+ */
+#taglist {
+    padding: 0 10px;
+}
+
+#taglist a {
+    color: #252525;
+    text-decoration: none;
+}
+
+#taglist .count {
+    display: inline-block;
+    width: 35px;
+    text-align: right;
+    color: #7f7f7f;
+}
+
+#taglist .rename-tag-form {
+    display: none;
+}
+
+#taglist .delete-tag {
+    color: #ac2925;
+    display: none;
+}
+
+#taglist .rename-tag {
+    color: #0b5ea6;
+}
+
+#taglist .validate-rename-tag {
+    color: #1b926c;
+}
+
+/**
  * Picture wall CSS
  */
 #picwall_container {
@@ -1201,3 +1264,16 @@ form[name="linkform"].page-form {
 .pure-button {
     -moz-user-select: auto;
 }
+
+.tag-sort {
+    margin-top: 30px;
+    text-align: center;
+}
+
+.tag-sort a {
+    display: inline-block;
+    margin: 0 15px;
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+}
diff --git a/tpl/default/daily.html b/tpl/default/daily.html
index d8c91078..29d845d5 100644
--- a/tpl/default/daily.html
+++ b/tpl/default/daily.html
@@ -44,7 +44,7 @@
         </div>
       </div>
       <div>
-        <h3 class="window-subtitle">{function="strftime('%A %d, %B %Y', $day)"}</h3>
+        <h3 class="window-subtitle">{function="format_date($dayDate, false)"}</h3>
 
         <div id="plugin_zone_about_daily" class="plugin_zone">
           {loop="$daily_about_plugin"}
diff --git a/tpl/default/fonts/Fira-Sans-regular.woff b/tpl/default/fonts/Fira-Sans-regular.woff
deleted file mode 100644
index 014ac317..00000000
--- a/tpl/default/fonts/Fira-Sans-regular.woff
+++ /dev/null
diff --git a/tpl/default/fonts/Fira-Sans-regular.woff2 b/tpl/default/fonts/Fira-Sans-regular.woff2
deleted file mode 100644
index bf3ad9a4..00000000
--- a/tpl/default/fonts/Fira-Sans-regular.woff2
+++ /dev/null
diff --git a/tpl/default/fonts/Roboto-Bold.woff b/tpl/default/fonts/Roboto-Bold.woff
new file mode 100644
index 00000000..3d86753b
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Bold.woff
diff --git a/tpl/default/fonts/Roboto-Bold.woff2 b/tpl/default/fonts/Roboto-Bold.woff2
new file mode 100644
index 00000000..bd05e2ea
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Bold.woff2
diff --git a/tpl/default/fonts/Roboto-Regular.woff b/tpl/default/fonts/Roboto-Regular.woff
new file mode 100644
index 00000000..464d2062
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Regular.woff
diff --git a/tpl/default/fonts/Roboto-Regular.woff2 b/tpl/default/fonts/Roboto-Regular.woff2
new file mode 100644
index 00000000..f9661967
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Regular.woff2
diff --git a/tpl/default/import.html b/tpl/default/import.html
index e6e521e8..1f040685 100644
--- a/tpl/default/import.html
+++ b/tpl/default/import.html
@@ -18,6 +18,7 @@
       <div class="center" id="import-field">
         <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
         <input type="file" name="filetoupload">
+        <p><br>Maximum size allowed: <strong>{$maxfilesizeHuman}</strong></p>
       </div>
 
       <div class="pure-g">
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index 91c6ca3b..0350ef66 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -11,7 +11,7 @@
 <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
 <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
 <link type="text/css" rel="stylesheet" href="css/shaarli.css" />
-{if="is_file('inc/user.css')"}
+{if="is_file('data/user.css')"}
   <link type="text/css" rel="stylesheet" href="data/user.css#" />
 {/if}
 {loop="$plugins_includes.css_files"}
diff --git a/tpl/default/install.html b/tpl/default/install.html
index 663397ac..164d453b 100644
--- a/tpl/default/install.html
+++ b/tpl/default/install.html
@@ -45,24 +45,22 @@
       </div>
       <div class="pure-u-lg-{$ratioInput} pure-u-1">
         <div class="form-input">
-          <input type="text" name="setpassword" id="password">
+          <input type="password" name="setpassword" id="password">
         </div>
       </div>
     </div>
 
     <div class="pure-g">
-      <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
         <div class="form-label">
-          <label>
-            <span class="label-name">{'Timezone'|t}</span>
+          <label for="title">
+            <span class="label-name">{'Shaarli title'|t}</span>
           </label>
         </div>
       </div>
-      <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
         <div class="form-input">
-          {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
-          <div class="timezone" id="timezone-remove">{$timezone_html}</div>
-          <div class="timezone" id="timezone-add"></div>
+          <input type="text" name="title" id="title" placeholder="{'My links'|t}">
         </div>
       </div>
     </div>
@@ -70,14 +68,36 @@
     <div class="pure-g">
       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
         <div class="form-label">
-          <label for="title">
-            <span class="label-name">{'Shaarli title'|t}</span>
+          <label>
+            <span class="label-name">{'Timezone'|t}</span><br>
+            <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
           </label>
         </div>
       </div>
       <div class="pure-u-lg-{$ratioInput} pure-u-1">
         <div class="form-input">
-          <input type="text" name="title" id="title" placeholder="{'My links'|t}">
+          <div class="timezone">
+            <select id="continent" name="continent">
+              {loop="$continents"}
+                {if="$key !== 'selected'"}
+                  <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                    {$value}
+                  </option>
+                {/if}
+              {/loop}
+            </select>
+            <select id="city" name="city">
+              {loop="$cities"}
+                {if="$key !== 'selected'"}
+                  <option value="{$value.city}"
+                          {if="$cities.selected === $value.city"}selected{/if}
+                          data-continent="{$value.continent}">
+                    {$value.city}
+                  </option>
+                {/if}
+              {/loop}
+            </select>
+          </div>
         </div>
       </div>
     </div>
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 30d8ed6f..4ebb7815 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -76,9 +76,12 @@ window.onload = function () {
             }
         }
 
-        document.getElementById('menu-toggle').addEventListener('click', function (e) {
-            toggleMenu();
-        });
+        var menuToggle = document.getElementById('menu-toggle');
+        if (menuToggle != null) {
+            menuToggle.addEventListener('click', function (e) {
+                toggleMenu();
+            });
+        }
 
         window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
     })(this, this.document);
@@ -213,14 +216,14 @@ window.onload = function () {
     /**
      * Autofocus text fields
      */
-    // ES6 syntax
-    let autofocusElements = document.querySelectorAll('.autofocus');
-    for (let autofocusElement of autofocusElements) {
-        if (autofocusElement.value == '') {
+    var autofocusElements = document.querySelectorAll('.autofocus');
+    var breakLoop = false;
+    [].forEach.call(autofocusElements, function(autofocusElement) {
+        if (autofocusElement.value == '' && ! breakLoop) {
             autofocusElement.focus();
-            break;
+            breakLoop = true;
         }
-    }
+    });
 
     /**
      * Handle sub menus/forms
@@ -255,10 +258,9 @@ window.onload = function () {
      * Remove CSS target padding (for fixed bar)
      */
     if (location.hash != '') {
-        var anchor = document.querySelector(location.hash);
+        var anchor = document.getElementById(location.hash.substr(1));
         if (anchor != null) {
             var padsize = anchor.clientHeight;
-            console.log(document.querySelector(location.hash).clientHeight);
             this.window.scroll(0, this.window.scrollY - padsize);
             anchor.style.paddingTop = 0;
         }
@@ -300,21 +302,6 @@ window.onload = function () {
     }
 
     /**
-     * TimeZome select
-     * FIXME! way too hackish
-     */
-    var toRemove = document.getElementById('timezone-remove');
-    if (toRemove != null) {
-        var firstSelect = toRemove.getElementsByTagName('select')[0];
-        var secondSelect = toRemove.getElementsByTagName('select')[1];
-        toRemove.parentNode.removeChild(toRemove);
-        var toAdd = document.getElementById('timezone-add');
-        var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
-        newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
-        toAdd.innerHTML = newTimezone;
-    }
-
-    /**
      * Awesomplete trigger.
      */
     var tags = document.getElementById('lf_tags');
@@ -366,8 +353,256 @@ window.onload = function () {
             }
         });
     });
+
+    var continent = document.getElementById('continent');
+    var city = document.getElementById('city');
+    if (continent != null && city != null) {
+        continent.addEventListener('change', function (event) {
+            hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
+        });
+        hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
+    }
+
+    /**
+     * Bulk actions
+     */
+    var linkCheckboxes = document.querySelectorAll('.delete-checkbox');
+    var bar = document.getElementById('actions');
+    [].forEach.call(linkCheckboxes, function(checkbox) {
+        checkbox.style.display = 'block';
+        checkbox.addEventListener('click', function(event) {
+            var count = 0;
+            var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
+            [].forEach.call(linkCheckedCheckboxes, function(checkbox) {
+                count++;
+            });
+            if (count == 0 && bar.classList.contains('open')) {
+                bar.classList.toggle('open');
+            } else if (count > 0 && ! bar.classList.contains('open')) {
+                bar.classList.toggle('open');
+            }
+        });
+    });
+
+    var deleteButton = document.getElementById('actions-delete');
+    var token = document.querySelector('input[type="hidden"][name="token"]');
+    if (deleteButton != null && token != null) {
+        deleteButton.addEventListener('click', function(event) {
+            event.preventDefault();
+
+            var links = [];
+            var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
+            [].forEach.call(linkCheckedCheckboxes, function(checkbox) {
+                links.push({
+                    'id': checkbox.value,
+                    'title': document.querySelector('.linklist-item[data-id="'+ checkbox.value +'"] .linklist-link').innerHTML
+                });
+            });
+
+            var message = 'Are you sure you want to delete '+ links.length +' links?\n';
+            message += 'This action is IRREVERSIBLE!\n\nTitles:\n';
+            var ids = '';
+            links.forEach(function(item) {
+                message += '  - '+ item['title'] +'\n';
+                ids += item['id'] +'+';
+            });
+
+            if (window.confirm(message)) {
+                window.location = '?delete_link&lf_linkdate='+ ids +'&token='+ token.value;
+            }
+        });
+    }
+
+    /**
+     * Tag list operations
+     *
+     * TODO: support error code in the backend for AJAX requests
+     */
+    var existingTags = document.querySelector('input[name="taglist"]').value.split(' ');
+    var awesomepletes = [];
+
+    // Display/Hide rename form
+    var renameTagButtons = document.querySelectorAll('.rename-tag');
+    [].forEach.call(renameTagButtons, function(rename) {
+        rename.addEventListener('click', function(event) {
+            event.preventDefault();
+            var block = findParent(event.target, 'div', {'class': 'tag-list-item'});
+            var form = block.querySelector('.rename-tag-form');
+            if (form.style.display == 'none' || form.style.display == '') {
+                form.style.display = 'block';
+            } else {
+                form.style.display = 'none';
+            }
+            block.querySelector('input').focus();
+        });
+    });
+
+    // Rename a tag with an AJAX request
+    var renameTagSubmits = document.querySelectorAll('.validate-rename-tag');
+    [].forEach.call(renameTagSubmits, function(rename) {
+        rename.addEventListener('click', function(event) {
+            event.preventDefault();
+            var block = findParent(event.target, 'div', {'class': 'tag-list-item'});
+            var input = block.querySelector('.rename-tag-input');
+            var totag = input.value.replace('/"/g', '\\"');
+            if (totag.trim() == '') {
+                return;
+            }
+            var fromtag = block.getAttribute('data-tag');
+            var token = document.getElementById('token').value;
+
+            xhr = new XMLHttpRequest();
+            xhr.open('POST', '?do=changetag');
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+            xhr.onload = function() {
+                if (xhr.status !== 200) {
+                    alert('An error occurred. Return code: '+ xhr.status);
+                    location.reload();
+                } else {
+                    block.setAttribute('data-tag', totag);
+                    input.setAttribute('name', totag);
+                    input.setAttribute('value', totag);
+                    findParent(input, 'div', {'class': 'rename-tag-form'}).style.display = 'none';
+                    block.querySelector('a.tag-link').innerHTML = htmlEntities(totag);
+                    block.querySelector('a.tag-link').setAttribute('href', '?searchtags='+ encodeURIComponent(totag));
+                    block.querySelector('a.rename-tag').setAttribute('href', '?do=changetag&fromtag='+ encodeURIComponent(totag));
+
+                    // Refresh awesomplete values
+                    for (var key in existingTags) {
+                        if (existingTags[key] == fromtag) {
+                            existingTags[key] = totag;
+                        }
+                    }
+                    awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes);
+                }
+            };
+            xhr.send('renametag=1&fromtag='+ encodeURIComponent(fromtag) +'&totag='+ encodeURIComponent(totag) +'&token='+ token);
+            refreshToken();
+        });
+    });
+
+    // Validate input with enter key
+    var renameTagInputs = document.querySelectorAll('.rename-tag-input');
+    [].forEach.call(renameTagInputs, function(rename) {
+
+        rename.addEventListener('keypress', function(event) {
+            if (event.keyCode === 13) { // enter
+                findParent(event.target, 'div', {'class': 'tag-list-item'}).querySelector('.validate-rename-tag').click();
+            }
+        });
+    });
+
+    // Delete a tag with an AJAX query (alert popup confirmation)
+    var deleteTagButtons = document.querySelectorAll('.delete-tag');
+    [].forEach.call(deleteTagButtons, function(rename) {
+        rename.style.display = 'inline';
+        rename.addEventListener('click', function(event) {
+            event.preventDefault();
+            var block = findParent(event.target, 'div', {'class': 'tag-list-item'});
+            var tag = block.getAttribute('data-tag');
+            var token = document.getElementById('token').value;
+
+            if (confirm('Are you sure you want to delete the tag "'+ tag +'"?')) {
+                xhr = new XMLHttpRequest();
+                xhr.open('POST', '?do=changetag');
+                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+                xhr.onload = function() {
+                    block.remove();
+                };
+                xhr.send(encodeURI('deletetag=1&fromtag='+ tag +'&token='+ token));
+                refreshToken();
+            }
+        });
+    });
+
+    updateAwesompleteList('.rename-tag-input', document.querySelector('input[name="taglist"]').value.split(' '), awesomepletes);
 };
 
+/**
+ * Find a parent element according to its tag and its attributes
+ *
+ * @param element    Element where to start the search
+ * @param tagName    Expected parent tag name
+ * @param attributes Associative array of expected attributes (name=>value).
+ *
+ * @returns Found element or null.
+ */
+function findParent(element, tagName, attributes)
+{
+    while (element) {
+        if (element.tagName.toLowerCase() == tagName) {
+            var match = true;
+            for (var key in attributes) {
+                if (! element.hasAttribute(key)
+                    || (attributes[key] != '' && element.getAttribute(key).indexOf(attributes[key]) == -1)
+                ) {
+                    match = false;
+                    break;
+                }
+            }
+
+            if (match) {
+                return element;
+            }
+        }
+        element = element.parentElement;
+    }
+    return null;
+}
+
+/**
+ * Ajax request to refresh the CSRF token.
+ */
+function refreshToken()
+{
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', '?do=token');
+    xhr.onload = function() {
+        var token = document.getElementById('token');
+        token.setAttribute('value', xhr.responseText);
+    };
+    xhr.send();
+}
+
+/**
+ * Update awesomplete list of tag for all elements matching the given selector
+ *
+ * @param selector  CSS selector
+ * @param tags      Array of tags
+ * @param instances List of existing awesomplete instances
+ */
+function updateAwesompleteList(selector, tags, instances)
+{
+    // First load: create Awesomplete instances
+    if (instances.length == 0) {
+        var elements = document.querySelectorAll(selector);
+        [].forEach.call(elements, function (element) {
+            instances.push(new Awesomplete(
+                element,
+                {'list': tags}
+            ));
+        });
+    } else {
+        // Update awesomplete tag list
+        for (var key in instances) {
+            instances[key].list = tags;
+        }
+    }
+    return instances;
+}
+
+/**
+ * html_entities in JS
+ *
+ * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
+ */
+function htmlEntities(str)
+{
+    return str.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
+        return '&#'+i.charCodeAt(0)+';';
+    });
+}
+
 function activateFirefoxSocial(node) {
     var loc = location.href;
     var baseURL = loc.substring(0, loc.lastIndexOf("/"));
@@ -391,3 +626,28 @@ function activateFirefoxSocial(node) {
     var activate = new CustomEvent("ActivateSocialFeature");
     node.dispatchEvent(activate);
 }
+
+/**
+ * Add the class 'hidden' to city options not attached to the current selected continent.
+ *
+ * @param cities           List of <option> elements
+ * @param currentContinent Current selected continent
+ * @param reset            Set to true to reset the selected value
+ */
+function hideTimezoneCities(cities, currentContinent) {
+    var first = true;
+    if (reset == null) {
+        reset = false;
+    }
+    [].forEach.call(cities, function (option) {
+        if (option.getAttribute('data-continent') != currentContinent) {
+            option.className = 'hidden';
+        } else {
+            option.className = '';
+            if (reset === true && first === true) {
+                option.setAttribute('selected', 'selected');
+                first = false;
+            }
+        }
+    });
+}
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 57ef4567..6a4e14a6 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -15,6 +15,8 @@
   {/if}
 </div>
 
+<input type="hidden" name="token" value="{$token}">
+
 <div id="search-linklist">
 
   <div class="pure-g">
@@ -121,7 +123,7 @@
     <div class="pure-u-lg-20-24 pure-u-22-24">
       {loop="links"}
         <div class="anchor" id="{$value.shorturl}"></div>
-        <div class="linklist-item{if="$value.class"} {$value.class}{/if}">
+        <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
 
           <div class="linklist-item-title">
             {if="isLoggedIn()"}
@@ -129,6 +131,7 @@
                 {if="$value.private"}
                   <span class="label label-private">{'Private'|t}</span>
                 {/if}
+                <input type="checkbox" class="delete-checkbox" value="{$value.id}">
                 <!-- FIXME! JS translation -->
                 <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a>
                 <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index 77fc65dd..02fc7642 100644
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -16,6 +16,9 @@
   </div>
   <div class="pure-u-2-24"></div>
 </div>
+
+<input type="hidden" name="token" value="{$token}" id="token" />
+
 {loop="$plugins_footer.endofpage"}
     {$value}
 {/loop}
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 9388ef79..6c71a718 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -122,6 +122,13 @@
       </div>
     </div>
   </div>
+  <div id="actions" class="subheader-form">
+    <div class="pure-g">
+      <div class="pure-u-1">
+        <a href="" id="actions-delete" class="button">Delete</a>
+      </div>
+    </div>
+  </div>
   {if="!isLoggedIn()"}
     <form method="post" name="loginform">
       <div class="subheader-form" id="header-login-form">
diff --git a/tpl/default/tagcloud.html b/tpl/default/tag.cloud.html
index 53c31748..59aa2ee0 100644
--- a/tpl/default/tagcloud.html
+++ b/tpl/default/tag.cloud.html
@@ -6,12 +6,32 @@
 <body>
 {include="page.header"}
 
+{include="tag.sort"}
+
 <div class="pure-g">
   <div class="pure-u-lg-1-6 pure-u-1-24"></div>
   <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
     {$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 +41,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}
@@ -36,6 +56,8 @@
   </div>
 </div>
 
+{include="tag.sort"}
+
 {include="page.footer"}
 </body>
 </html>
diff --git a/tpl/default/tag.list.html b/tpl/default/tag.list.html
new file mode 100644
index 00000000..62e2e7c6
--- /dev/null
+++ b/tpl/default/tag.list.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+{include="tag.sort"}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
+    {$countTags=count($tags)}
+    <h2 class="window-title">{'Tag list'|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="taglist">
+          <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}
+      {/loop}
+    </div>
+
+    <div id="taglist">
+      {loop="tags"}
+        <div class="tag-list-item pure-g" data-tag="{$key}">
+          <div class="pure-u-1">
+            {if="isLoggedIn()===true"}
+              <a href="#" class="delete-tag"><i class="fa fa-trash"></i></a>&nbsp;&nbsp;
+              <a href="?do=changetag&fromtag={$key|urlencode}" class="rename-tag">
+                <i class="fa fa-pencil-square-o {$key}"></i>
+              </a>
+            {/if}
+
+            <a href="?addtag={$key|urlencode}" title="{'Filter by tag'|t}" class="count">{$value}</a>
+            <a href="?searchtags={$key|urlencode}" class="tag-link">{$key}</a>
+
+            {loop="$value.tag_plugin"}
+              {$value}
+            {/loop}
+          </div>
+          {if="isLoggedIn()===true"}
+            <div class="rename-tag-form pure-u-1">
+              <input type="text" name="{$key}" value="{$key}" class="rename-tag-input" />
+              <a href="#" class="validate-rename-tag"><i class="fa fa-check"></i></a>
+            </div>
+          {/if}
+        </div>
+      {/loop}
+    </div>
+
+    <div id="plugin_zone_end_tagcloud" class="plugin_zone">
+      {loop="$plugin_end_zone"}
+      {$value}
+      {/loop}
+    </div>
+  </div>
+</div>
+
+{if="isLoggedIn()===true"}
+  <input type="hidden" name="taglist" value="{loop="$tags"}{$key} {/loop}"
+{/if}
+
+{include="tag.sort"}
+
+{include="page.footer"}
+</body>
+</html>
+
diff --git a/tpl/default/tag.sort.html b/tpl/default/tag.sort.html
new file mode 100644
index 00000000..89acda0d
--- /dev/null
+++ b/tpl/default/tag.sort.html
@@ -0,0 +1,8 @@
+<div class="pure-g">
+  <div class="pure-u-1 pure-alert pure-alert-success tag-sort">
+    {'Sort by:'|t}
+    <a href="?do=tagcloud" title="cloud">{'Cloud'|t}</a> &middot;
+    <a href="?do=taglist&sort=usage" title="cloud">{'Most used'|t}</a> &middot;
+    <a href="?do=taglist&sort=alpha" title="cloud">{'Alphabetical'|t}</a>
+  </div>
+</div>
\ No newline at end of file
diff --git a/tpl/vintage/configure.html b/tpl/vintage/configure.html
index 704389c5..479284eb 100644
--- a/tpl/vintage/configure.html
+++ b/tpl/vintage/configure.html
@@ -4,7 +4,6 @@
 <body onload="document.configform.title.focus();">
 <div id="pageheader">
   {include="page.header"}
-  {$timezone_js}
   <form method="POST" action="#" name="configform" id="configform">
     <input type="hidden" name="token" value="{$token}">
     <table id="configuration_table">
@@ -15,7 +14,7 @@
       </tr>
 
       <tr>
-        <td><b>Title link:</b></td>
+        <td><b>Home link:</b></td>
         <td><input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}"><br/><label
             for="titleLink">(default value is: ?)</label></td>
       </tr>
@@ -35,7 +34,28 @@
 
       <tr>
         <td><b>Timezone:</b></td>
-        <td>{$timezone_form}</td>
+        <td>
+          <select id="continent" name="continent">
+            {loop="$continents"}
+              {if="$key !== 'selected'"}
+                <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                  {$value}
+                </option>
+              {/if}
+            {/loop}
+          </select>
+          <select id="city" name="city">
+            {loop="$cities"}
+              {if="$key !== 'selected'"}
+                <option value="{$value.city}"
+                        {if="$cities.selected === $value.city"}selected{/if}
+                        data-continent="{$value.continent}">
+                  {$value.city}
+                </option>
+              {/if}
+            {/loop}
+          </select>
+        </td>
       </tr>
 
       <tr>
diff --git a/tpl/vintage/css/shaarli.css b/tpl/vintage/css/shaarli.css
index 7ca567e7..9c72d993 100644
--- a/tpl/vintage/css/shaarli.css
+++ b/tpl/vintage/css/shaarli.css
@@ -41,6 +41,10 @@ strong {
     font-weight: bold;
 }
 
+.hidden {
+    display: none;
+}
+
 /* Buttons */
 .bigbutton, #pageheader a.bigbutton  {
     background-color: #c0c0c0;
diff --git a/tpl/vintage/import.html b/tpl/vintage/import.html
index 071e1160..bb9e4a56 100644
--- a/tpl/vintage/import.html
+++ b/tpl/vintage/import.html
@@ -5,7 +5,7 @@
 <div id="pageheader">
   {include="page.header"}
   <div id="uploaddiv">
-    Import Netscape HTML bookmarks (as exported from Firefox/Chrome/Opera/Delicious/Diigo...) (Max: {$maxfilesize} bytes).
+    Import Netscape HTML bookmarks (as exported from Firefox/Chrome/Opera/Delicious/Diigo...) (Max: {$maxfilesize}).
     <form method="POST" action="?do=import" enctype="multipart/form-data"
           name="uploadform" id="uploadform">
       <input type="hidden" name="token" value="{$token}">
diff --git a/tpl/vintage/install.html b/tpl/vintage/install.html
index 42874dcd..aca890d6 100644
--- a/tpl/vintage/install.html
+++ b/tpl/vintage/install.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}{$timezone_js}</head>
+<head>{include="includes"}</head>
 <body onload="document.installform.setlogin.focus();">
 <div id="install">
     <h1>Shaarli</h1>
@@ -9,7 +9,31 @@
         <table>
             <tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr>
             <tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr>
-            {$timezone_html}
+            <tr>
+                <td><b>Timezone:</b></td>
+                <td>
+                    <select id="continent" name="continent">
+                        {loop="$continents"}
+                        {if="$key !== 'selected'"}
+                        <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                        {$value}
+                        </option>
+                        {/if}
+                        {/loop}
+                    </select>
+                    <select id="city" name="city">
+                        {loop="$cities"}
+                        {if="$key !== 'selected'"}
+                        <option value="{$value.city}"
+                                {if="$cities.selected === $value.city"}selected{/if}
+                        data-continent="{$value.continent}">
+                        {$value.city}
+                        </option>
+                        {/if}
+                        {/loop}
+                    </select>
+                </td>
+            </tr>
             <tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr>
             <tr><td valign="top"><b>Update:</b></td><td>
                 <input type="checkbox" name="updateCheck" id="updateCheck" checked="checked"><label for="updateCheck">&nbsp;Notify me when a new release is ready</label></td>
diff --git a/tpl/vintage/js/shaarli.js b/tpl/vintage/js/shaarli.js
new file mode 100644
index 00000000..9bcc96fb
--- /dev/null
+++ b/tpl/vintage/js/shaarli.js
@@ -0,0 +1,32 @@
+window.onload = function () {
+    var continent = document.getElementById('continent');
+    var city = document.getElementById('city');
+    if (continent != null && city != null) {
+        continent.addEventListener('change', function(event) {
+            hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
+        });
+        hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
+    }
+};
+
+/**
+ * Add the class 'hidden' to city options not attached to the current selected continent.
+ *
+ * @param cities           List of <option> elements
+ * @param currentContinent Current selected continent
+ * @param reset            Set to true to reset the selected value
+ */
+function hideTimezoneCities(cities, currentContinent, reset = false) {
+    var first = true;
+    [].forEach.call(cities, function(option) {
+        if (option.getAttribute('data-continent') != currentContinent) {
+            option.className = 'hidden';
+        } else {
+            option.className = '';
+            if (reset === true && first === true) {
+                option.setAttribute('selected', 'selected');
+                first = false;
+            }
+        }
+    });
+}
diff --git a/tpl/vintage/page.footer.html b/tpl/vintage/page.footer.html
index 006d1d68..4ce0803a 100644
--- a/tpl/vintage/page.footer.html
+++ b/tpl/vintage/page.footer.html
@@ -26,6 +26,7 @@
 <script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
 {/if}
 
+<script src="js/shaarli.js"></script>
 {loop="$plugins_footer.js_files"}
         <script src="{$value}#"></script>
 {/loop}
diff --git a/tpl/vintage/page.header.html b/tpl/vintage/page.header.html
index cce61ec4..8a58844e 100644
--- a/tpl/vintage/page.header.html
+++ b/tpl/vintage/page.header.html
@@ -1,5 +1,5 @@
 
-<div id="logo" title="Share your links !" onclick="document.location='?';"></div>
+<div id="logo" title="Share your links !" onclick="document.location='{$titleLink}';"></div>
 
 <div id="linkcount" class="nomobile">
     {if="!empty($linkcount)"}{$linkcount} links{/if}<br>
@@ -16,7 +16,7 @@
 {if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
     {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
 {else}
-<li><a href="?" class="nomobile">Home</a></li>
+<li><a href="{$titleLink}" class="nomobile">Home</a></li>
     {if="isLoggedIn()"}
     <li><a href="?do=logout">Logout</a></li>
     <li><a href="?do=tools">Tools</a></li>
diff --git a/tpl/vintage/tagcloud.html b/tpl/vintage/tag.cloud.html
index 05e45273..d93bf4f9 100644
--- a/tpl/vintage/tagcloud.html
+++ b/tpl/vintage/tag.cloud.html
@@ -12,7 +12,7 @@
 
     <div id="cloudtag">
         {loop="$tags"}
-            <span class="count">{$value.count}</span><a
+            <a href="?addtag={$key|urlencode}" class="count">{$value.count}</a><a
                 href="?searchtags={$key|urlencode}" style="font-size:{$value.size}em;">{$key}</a>
             {loop="$value.tag_plugin"}
                 {$value}