19 files changed, 495 insertions, 37 deletions

diff --git a/themes/baggy/_display-mode.twig b/themes/baggy/_display-mode.twig
new file mode 100755
index 00000000..31f76581
--- /dev/null
+++ b/themes/baggy/_display-mode.twig
@@ -0,0 +1,5 @@
+<div id="display-mode">
+  <a href="javascript: void(null);" id="listmode" class="listmode">
+    <img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/blank.png" alt="{% trans "toggle view mode" %}" title="{% trans "toggle view mode" %}" width="16" height="16">
+  </a>
+</div>
diff --git a/themes/baggy/_head.twig b/themes/baggy/_head.twig
index 206d5aae..144bcaa6 100644..100755
--- a/themes/baggy/_head.twig
+++ b/themes/baggy/_head.twig
@@ -8,5 +8,7 @@
         <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/messages.css" media="all">
         <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/print.css" media="print">
         <script src="{{ poche_url }}/themes/{{theme}}/js/jquery-2.0.3.min.js"></script>
+        <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/autoClose.js"></script>
+        <script src="{{ poche_url }}/themes/{{theme}}/js/jquery.cookie.js"></script>
         <script src="{{ poche_url }}/themes/{{theme}}/js/init.js"></script>
         <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/closeMessage.js"></script>
diff --git a/themes/baggy/_menu.twig b/themes/baggy/_menu.twig
index e9cd9d4a..5226728b 100644
--- a/themes/baggy/_menu.twig
+++ b/themes/baggy/_menu.twig
@@ -4,9 +4,10 @@
                 <li><a href="./?view=fav" {% if view == 'fav' %}class="current"{% endif %}>{% trans "favorites" %}</a></li>
                 <li><a href="./?view=archive" {% if view == 'archive' %}class="current"{% endif %}>{% trans "archive" %}</a></li>
                 <li><a href="./?view=tags" {% if view == 'tags' %}class="current"{% endif %}>{% trans "tags" %}</a></li>
-                <li><a href="javascript: void(null);" id="pocheit">{% trans "save a link" %}</a></li>
+                <li style="position: relative;"><a href="javascript: void(null);" id="bagit">{% trans "save a link" %}</a>
+                    {% include '_pocheit-form.twig' %}
+                </li>
                 <li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
                 <li><a class="icon icon-power" href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>
             </ul>
 
-            {% include '_pocheit-form.twig' %}
diff --git a/themes/baggy/_pocheit-form.twig b/themes/baggy/_pocheit-form.twig
new file mode 100755
index 00000000..505ec368
--- /dev/null
+++ b/themes/baggy/_pocheit-form.twig
@@ -0,0 +1,10 @@
+<div id="bagit-form" class="messages info">
+    <form method="get" action="index.php" target="_blank" id="bagit-form-form">
+        <h2><a href="javascript: void(null);" id="bagit-form-close">X</a>
+        {% trans "Save a link" %}</h2>
+        <input type="hidden" name="autoclose" value="1" />
+        <input required placeholder="example.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
+        <input type="submit" value="{% trans "save link!" %}" />
+        <div id="add-link-result"></div>
+    </form>
+</div>
diff --git a/themes/baggy/_top.twig b/themes/baggy/_top.twig
index 4f476a37..d3e35aa3 100644
--- a/themes/baggy/_top.twig
+++ b/themes/baggy/_top.twig
@@ -1,6 +1,6 @@
         <header class="w600p center mbm">
             <h1 class="logo">
-                {% if view == 'home' %}{% block logo %}<img width="100" height="100" src="{{ poche_url }}/themes/{{theme}}/img/logo-w.png" alt="logo poche" />{% endblock %}
+                {% if view == 'home' %}{% block logo %}<img width="100" height="100" src="{{ poche_url }}/themes/{{theme}}/img/logo-w.png" alt="wallabag logo" />{% endblock %}
                 {% else %}<a href="./" title="{% trans "return home" %}" >{{ block('logo') }}</a>
                 {% endif %}
             </h1>
diff --git a/themes/baggy/config.twig b/themes/baggy/config.twig
index b37ac115..a13af0c8 100644
--- a/themes/baggy/config.twig
+++ b/themes/baggy/config.twig
@@ -8,10 +8,11 @@
             <h2>{% trans "Saving articles" %}</h2>
             <p>{% trans "There are several ways to save an article:" %} (<a href="http://doc.wallabag.org/" title="{% trans "read the documentation" %}">?</a>)</p>
             <ul>
-                <li>Firefox: <a href="https://addons.mozilla.org/firefox/addon/poche/" title="download the firefox extension">{% trans "download the extension" %}</a></li>
+                <li>Firefox: <a href="https://addons.mozilla.org/firefox/addon/wallabag/" title="download the firefox extension">{% trans "download the extension" %}</a></li>
                 <li>Chrome: <a href="http://doc.wallabag.org/doku.php?id=users:chrome_extension" title="download the chrome extension">{% trans "download the extension" %}</a></li>
-                <li>Android: <a href="https://f-droid.org/repository/browse/?fdid=fr.gaulupeau.apps.Poche" title="download the application">{% trans "via F-Droid" %}</a> {% trans " or " %} <a href="https://play.google.com/store/apps/details?id=fr.gaulupeau.apps.InThePoche" title="download the application">{% trans "via Google Play" %}</a></li>
-                <li>Windows Phone: <a href="https://www.windowsphone.com/en-us/store/app/poche/334de2f0-51b5-4826-8549-a3d805a37e83" title="download the window phone application">{% trans "download the application" %}</a></li>
+                <li>Android: <a href="https://f-droid.org/app/fr.gaulupeau.apps.InThePoche" title="download the application">{% trans "via F-Droid" %}</a> {% trans " or " %} <a href="https://play.google.com/store/apps/details?id=fr.gaulupeau.apps.InThePoche" title="download the application">{% trans "via Google Play" %}</a></li>
+                <li>iOS: <a href="https://itunes.apple.com/app/wallabag/id828331015?mt=8" title="download the iOS application">{% trans "download the application" %}</a></li>
+                <li>Windows Phone: <a href="http://www.windowsphone.com/en-us/store/app/wallabag/ff890514-348c-4d0b-9b43-153fff3f7450" title="download the window phone application">{% trans "download the application" %}</a></li>
                 <li>
                     <form method="get" action="index.php">
                         <label class="addurl" for="config_plainurl">{% trans "By filling this field" %}:</label>
@@ -25,9 +26,10 @@
             <h2>{% trans "Upgrading wallabag" %}</h2>
             <ul>
                 <li>{% trans "Installed version" %} : <strong>{{ constant('POCHE') }}</strong></li>
-                <li>{% trans "Latest stable version" %} : {{ prod }}. {% if compare_prod == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent stable version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %}</li>
-                {% if constant('DEBUG_POCHE') == 1 %}<li>{% trans "Latest dev version" %} : {{ dev }}. {% if compare_dev == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent development version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %}</li>{% endif %}
+                <li>{% trans "Latest stable version" %} : {{ prod }}. {% if compare_prod == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent stable version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %} ({% trans "Last check:" %} {{ check_time_prod }})</li>
+                {% if constant('DEBUG_POCHE') == 1 %}<li>{% trans "Latest dev version" %} : {{ dev }}. {% if compare_dev == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent development version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %} ({% trans "Last check:" %} {{ check_time_dev }}){% endif %}</li>
             </ul>
+            <p>{% trans "You can clear cache to check the latest release." %}</p>
 
             <h2>{% trans "Feeds" %}</h2>
             {% if token == '' %}
@@ -42,7 +44,7 @@
             <p>{% trans "Your user id:" %} <strong>{{user_id}}</strong></p>
             <p>{% trans "You can regenerate your token: <a href='?feed&amp;action=generate'>generate!</a>." %}</p>
             {% endif %}
-            
+
             <h2>{% trans "Change your theme" %}</h2>
             <form method="post" action="?updatetheme" name="changethemeform">
                 <fieldset class="w500p inline">
@@ -103,15 +105,37 @@
             {% endif %}
 
             <h2>{% trans "Import" %}</h2>
-            <p>{% trans "Please execute the import script locally as it can take a very long time." %}</p>
-            <p>{% trans "More info in the official documentation:" %} <a href="http://doc.wallabag.org/doku.php?id=users:migrate">wallabag.org</a></p>
+            <p>{% trans "Importing from other services can be quite long, and webservers default configuration often prevents long scripts execution time, so it must be done in multiple parts." %}</p>
+            <p>1. {% trans "First, select the export file on your computer and upload it." %}</p>
+            <form method="post" action="?uploadfile" name="uploadfile" enctype="multipart/form-data">
+                <fieldset class="w500p">
+                    <div class="row">
+                        <label class="col w150p" for="file">{% trans "File:" %}</label>
+                        <input class="col" type="file" id="file" name="file" tabindex="4">
+                    </div>
+                    <div class="row mts txtcenter">
+                        <button class="bouton" type="submit" tabindex="4">{% trans "Upload" %}</button>
+                    </div>
+                </fieldset>
+                <input type="hidden" name="MAX_FILE_SIZE" value="1048576">
+                <input type="hidden" name="returnurl" value="{{ referer }}">
+            </form>
+            <p>2. {% trans "Then, click on the right link below." %}</p>
             <ul>
-                <li><a href="./?import&amp;from=pocket">{% trans "Import from Pocket" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('POCKET_FILE')) }}</li>
-                <li><a href="./?import&amp;from=readability">{% trans "Import from Readability" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('READABILITY_FILE')) }}</li>
-                <li><a href="./?import&amp;from=instapaper">{% trans "Import from Instapaper" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('INSTAPAPER_FILE')) }}</li>
-                <li><a href="./?import&amp;from=poche">{% trans "Import from wallabag" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('POCHE_FILE')) }}</li>
+                <li><a href="./?import&amp;from=pocket">{% trans "Import from Pocket" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('POCKET_FILE')) }}</li>
+                <li><a href="./?import&amp;from=readability">{% trans "Import from Readability" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('READABILITY_FILE')) }}</li>
+                <li><a href="./?import&amp;from=instapaper">{% trans "Import from Instapaper" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('INSTAPAPER_FILE')) }}</li>
+                <li><a href="./?import&amp;from=poche">{% trans "Import from wallabag" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('POCHE_FILE')) }}</li>
             </ul>
 
+            {% if token == '' %}
+                <p>{% trans "3. Your feed token is currently empty and must first be generated to fetch content. Click <a href='?feed&amp;action=generate'>here to generate it</a>." %}</p>
+            {% else %}
+            <p>3. {% trans "Finally, you have to fetch content for imported items." %} <a href="cron.php?limit=10&amp;user-id={{ user_id }}&amp;token={{token}}" target="_blank">{% trans "Click here" %}</a> {% trans "to fetch content for 10 articles" %}.</p>
+            <p>{% trans "If you have console access to your server, you can also create a cron task:" %}</p>
+            <pre><code>0 */4 * * *  cd /path/to/wallabag && php cron.php --limit=10 --user-id={{user_id}} --token={{token}} >/dev/null 2>&1</code></pre>
+            {% endif %}
+
             <h2>{% trans "Export your wallabag data" %}</h2>
             {% if constant('STORAGE') == 'sqlite' %}
             <p><a href="?download" target="_blank">{% trans "Click here" %}</a> {% trans "to download your database." %}</p>{% endif %}
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index 3e128b08..61e0b47e 100755
--- a/themes/baggy/css/main.css
+++ b/themes/baggy/css/main.css
@@ -173,21 +173,22 @@ h2:after {
 #links {
   position: fixed;
   top: 0;
-  width: 9em;
+  width: 10em;
   left: 0;
   text-align: right;
   background: #333;
-  padding-top: 9em;
+  padding-top: 9.5em;
   height: 100%;
   box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
   z-index: 10;
 }
 
 #main {
-  margin-left: 12em;
+  margin-left: 13em;
   position: relative;
   z-index: 10;
   padding-right: 5%;
+  padding-bottom: 1em;
 }
 
   #links a {
@@ -227,7 +228,7 @@ h2:after {
   #links li:last-child {
     position: fixed;
     bottom: 1em;
-    width: 10%;
+    width: 10em;
   }
 
   #links li:last-child a:before {
@@ -237,6 +238,61 @@ h2:after {
   }
 
 
+#sort {
+    padding: 0;
+    list-style-type: none;
+    opacity: 0.5;
+    display: inline-block;
+}
+
+#sort li {
+    display: inline;
+    font-size: 0.9em;
+}
+
+#sort li + li {
+    margin-left: 10px;
+}
+
+#sort a {
+    padding: 2px 2px 0;
+    vertical-align: middle;
+}
+
+#sort img {
+    vertical-align: baseline;
+}
+#sort img:hover {
+    cursor: pointer;
+}
+
+#display-mode {
+  float: right;
+  vertical-align: middle;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  opacity: 0.5;
+}
+#listmode {
+  width: 16px;
+  display: inline-block;
+  text-decoration: none;
+}
+#listmode a:hover {
+  opacity: 1;
+}
+.tablemode {
+  background-image: url("../img/baggy/table.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+.listmode {
+  background-image: url("../img/baggy/list.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+
 /* ==========================================================================
    2 = Layout
    ========================================================================== */
@@ -248,7 +304,7 @@ h2:after {
 
 footer {
   text-align: right;
-  position: fixed;
+  position: relative;
   bottom: 0;
   right: 5em;
   color: #999;
@@ -266,6 +322,15 @@ footer a {
   letter-spacing:-5px;
 }
 
+.listmode .entrie {
+  width: 100%!important;
+  margin-left: 0!important;
+}
+
+.listmode .entrie p {
+  display: none;
+}
+
 .list-entries + .results {
   margin-bottom: 2em;
 }
@@ -287,10 +352,10 @@ footer a {
   letter-spacing:normal;
   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
   display: inline-block;
-  width: 32%;
+  width: 32%!important;
   margin-bottom: 1.5em;
   vertical-align: top;
-  margin-left: 1.5%;
+  margin-left: 1.5%!important;
   position: relative;
   overflow: hidden;
   padding: 1.5em 1.5em 3em 1.5em;
@@ -425,7 +490,7 @@ footer a {
   }
 
 .entrie:nth-child(3n+1) {
-  margin-left: 0;
+  margin-left: 0!important;
 }
 
 .results {
@@ -442,6 +507,7 @@ footer a {
 
 .pagination {
   text-align: right;
+  margin-bottom:50px;
 }
 
 .nb-results {
@@ -469,6 +535,84 @@ footer a {
 }
 
 /* ==========================================================================
+  2.1 = "save a link" popup div related styles
+  ========================================================================== */
+
+#bagit-form {
+  background: rgba(0,0,0,0.5);
+  position: absolute;
+  top: 0;
+  left: 10em;
+  z-index: 20;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  margin-top: -30%;
+  padding: 2em;
+  display: none;
+  border-left: 1px #EEE solid;
+}
+
+#bagit-form form {
+  background: #FFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  border: 10px solid #000;
+  width: 400px;
+  height: 200px;
+  /* margin: -150px 0 0 -300px; */
+  padding: 2em;
+}
+
+a#bagit-form-close {
+  background: #000;
+  color: #FFF;
+  padding: 0.2em 0.5em;
+  text-decoration: none;
+  display: inline-block;
+  float: right;
+  font-size: 0.6em;
+}
+a#bagit-form-close:hover {
+  background: #999;
+  color: #000;
+}
+
+.active-current {
+  background-color: #999;
+}
+
+.active-current:after {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-style: solid;
+  border-width: 10px;
+  border-color:  transparent #EEE transparent transparent;
+  right: 0;
+  top: 50%;
+  margin-top: -10px;
+}
+
+.opacity03 {
+  opacity: 0.3;
+}
+
+.add-to-wallabag-link-after {
+  background-color: #000;
+  color: #fff;
+  padding: 0 3px 2px 3px;
+}
+
+#add-link-result {
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+/* ==========================================================================
    3 = Pictos
    ========================================================================== */
    
@@ -602,6 +746,7 @@ footer a {
 #article {
   width: 70%;
   margin-bottom: 3em;
+  text-align: justify;
 }
 
 #article .tags {
@@ -731,6 +876,9 @@ blockquote {
     width: 100%;
     margin-left: 0;
   }
+  #display-mode {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 500px) {
@@ -820,4 +968,12 @@ blockquote {
   #article_toolbar a {
     padding: 0.3em 0.4em 0.2em;
   }
+  
+  #display-mode {
+    display: none;
+  }
+
+  #bagit-form {
+    left: 0;
+  }
 }
diff --git a/themes/baggy/edit-tags.twig b/themes/baggy/edit-tags.twig
index 9e9012ee..65ac996a 100644..100755
--- a/themes/baggy/edit-tags.twig
+++ b/themes/baggy/edit-tags.twig
@@ -4,6 +4,11 @@
 {% include '_menu.twig' %}
 {% endblock %}
 {% block content %}
+
+<script src="{{ poche_url }}/themes/default/js/jquery-ui-1.10.4.custom.min.js"></script>
+<script src="{{ poche_url }}/themes/default/js/autoCompleteTags.js"></script>
+<link rel="stylesheet" href="{{ poche_url }}/themes/default/css/jquery-ui-1.10.4.custom.min.css" media="all">
+
 <div id="article">
   <h2>{{ entry.title|raw }}</21>
 </div>
@@ -17,7 +22,8 @@
     <input type="hidden" name="entry_id" value="{{ entry_id }}" />
     <label for="value">Add tags: </label><input type="text" placeholder="interview, editorial, video" id="value" name="value" required="required" />
     <input type="submit" value="Tag" />
-    <p>{% trans "You can enter multiple tags, separated by commas." %}</p>
+    <p>{% trans "Start typing for auto complete." %}<br>
+    {% trans "You can enter multiple tags, separated by commas." %}</p>
 </form>
 <a class="icon icon-reply return" href="./?view=view&id={{ entry_id }}">{% trans "return to article" %}</a>
 {% endblock %}
diff --git a/themes/baggy/home.twig b/themes/baggy/home.twig
index 4f9db063..e34897fa 100644..100755
--- a/themes/baggy/home.twig
+++ b/themes/baggy/home.twig
@@ -18,6 +18,10 @@
             {% if entries is empty %}
             <div class="messages warning"><p>{% trans "No articles found." %}</p></div>
             {% else %}
+                 <div>
+                     {% include '_display-mode.twig' %}
+                     {% include '_sorting.twig' %}
+                 </div>
                 {% block pager %}
                     {% if nb_results > 1 %}
                 <div class="results">
@@ -26,9 +30,9 @@
                 </div>
                     {% endif %}
                 {% endblock %}
-            <div class="list-entries">
+            <div id="list-entries" class="list-entries">
                     {% for entry in entries %}
-                <div id="entry-{{ entry.id|e }}" class="entrie">
+                <div id="entry-{{ entry.id|e }}" class="entrie"{% if listmode %} style="width:100%; margin-left:0;"{% endif %}>
                     <h2><a href="index.php?view=view&amp;id={{ entry.id|e }}">{{ entry.title|raw }}</a></h2>
                     {% if entry.content| getReadingTime > 0 %}
                         <div class="estimatedTime"><a target="_blank" title="{% trans "estimated reading time:" %} {{ entry.content| getReadingTime }} min" class="tool reading-time"><span>{% trans "estimated reading time :" %} {{ entry.content| getReadingTime }} min</span></div>
diff --git a/themes/baggy/img/baggy/blank.png b/themes/baggy/img/baggy/blank.png
new file mode 100755
index 00000000..63e09844
--- /dev/null
+++ b/themes/baggy/img/baggy/blank.png
diff --git a/themes/baggy/img/baggy/down.png b/themes/baggy/img/baggy/down.png
new file mode 100644
index 00000000..b9d536a7
--- /dev/null
+++ b/themes/baggy/img/baggy/down.png
diff --git a/themes/baggy/img/baggy/list.png b/themes/baggy/img/baggy/list.png
new file mode 100755
index 00000000..bd5aff5a
--- /dev/null
+++ b/themes/baggy/img/baggy/list.png
diff --git a/themes/baggy/img/baggy/table.png b/themes/baggy/img/baggy/table.png
new file mode 100755
index 00000000..859c4cd8
--- /dev/null
+++ b/themes/baggy/img/baggy/table.png
diff --git a/themes/baggy/img/baggy/top.png b/themes/baggy/img/baggy/top.png
new file mode 100644
index 00000000..954a8c0a
--- /dev/null
+++ b/themes/baggy/img/baggy/top.png
diff --git a/themes/baggy/img/logo-other_themes.png b/themes/baggy/img/logo-other_themes.png
new file mode 100755
index 00000000..32543a44
--- /dev/null
+++ b/themes/baggy/img/logo-other_themes.png
diff --git a/themes/baggy/js/init.js b/themes/baggy/js/init.js
index c1d3c0ec..da644fbe 100755
--- a/themes/baggy/js/init.js
+++ b/themes/baggy/js/init.js
@@ -1,12 +1,126 @@
-document.addEventListener('DOMContentLoaded', function() {
-  var menu = document.getElementById('menu');
+$.fn.ready(function() {
 
-  menu.addEventListener('click', function(){
-    if(this.nextElementSibling.style.display === "block") {
-      this.nextElementSibling.style.display = "none";
-    }else {
-      this.nextElementSibling.style.display = "block";  
+  var $listmode = $('#listmode'),
+      $listentries = $("#list-entries"),
+      $bagit = $('#bagit'),
+      $bagitForm = $('#bagit-form');
+      $bagitFormForm = $('#bagit-form-form');
+
+  /* ==========================================================================
+     Menu
+     ========================================================================== */
+
+  $("#menu").click(function(){
+    $("#links").toggle();
+  });
+
+  /* ==========================================================================
+     List mode or Table Mode
+     ========================================================================== */
+
+  $listmode.click(function(){
+    if ( $.cookie("listmode") == 1 ) {
+      // Cookie
+      $.removeCookie("listmode");
+
+      $listentries.removeClass("listmode");
+      $listmode.removeClass("tablemode");
+      $listmode.addClass("listmode");
+    }
+    else {
+      // Cookie
+      $.cookie("listmode", 1, {expires: 365});
+
+      $listentries.addClass("listmode");
+      $listmode.removeClass("listmode");
+      $listmode.addClass("tablemode");
+    }
+
+  });
+
+  /* ==========================================================================
+     Cookie listmode
+     ========================================================================== */
+
+  if ( $.cookie("listmode") == 1 ) {
+    $listentries.addClass("listmode");
+    $listmode.removeClass("listmode");
+    $listmode.addClass("tablemode");
+  }
+
+  /* ==========================================================================
+    bag it link and close button
+    ========================================================================== */
+
+  function toggleSaveLinkForm(url) {
+    $bagit.toggleClass("active-current");
+    $bagitForm.toggle();
+    $('#content').toggleClass("opacity03");
+    if (url !== 'undefined' && url) {
+      $('#plainurl').val(url);
+    }
+    $('#plainurl').focus();
+  }
+
+  $bagit.click(function(){
+    toggleSaveLinkForm();
+  });
+
+  $("#bagit-form-close").click(function(){
+    toggleSaveLinkForm();
+  });
+
+
+  //send "bag it link" form request via ajax
+  $bagitFormForm.submit( function(event) {
+    $bagitFormForm.css("cursor", "wait");
+    $("#add-link-result").empty();
+
+    $.ajax({
+        type: $bagitFormForm.attr('method'),
+        url: $bagitFormForm.attr('action'),
+        data: $bagitFormForm.serialize(),
+        success: function(data) {
+          $('#add-link-result').html("Done!");
+          $('#plainurl').val('');
+          $('#plainurl').blur('');
+          $bagitFormForm.css("cursor", "auto");
+          //setTimeout( function() { toggleSaveLinkForm(); }, 1000); //close form after 1000 delay
+        },
+        error: function(data) {
+          $('#add-link-result').html("Failed!");
+          $bagitFormForm.css("cursor", "auto");
+        }
+    });
+
+    event.preventDefault();
+  });
+
+  /* ==========================================================================
+    Keyboard gestion
+    ========================================================================== */
+
+  $(window).keydown(function(e){
+    if ( ( e.target.tagName.toLowerCase() !== 'input' && e.keyCode == 83 ) || e.keyCode == 27 ) {
+      toggleSaveLinkForm();
+      return false;
     }
-    
   });
-});
\ No newline at end of file
+
+  /* ==========================================================================
+  Process all links inside an article
+  ========================================================================== */
+
+  $("article a[href^='http']").after(function() {
+        return " <a href=\"" + $(this).attr('href') + "\" class=\"add-to-wallabag-link-after\" alt=\"add to wallabag\" title=\"add to wallabag\">w</a> ";
+  });
+
+  $(".add-to-wallabag-link-after").click(function(event){
+    toggleSaveLinkForm($(this).attr('href'));
+    event.preventDefault();
+  });
+
+
+
+
+});
diff --git a/themes/baggy/js/jquery.cookie.js b/themes/baggy/js/jquery.cookie.js
new file mode 100755
index 00000000..92719000
--- /dev/null
+++ b/themes/baggy/js/jquery.cookie.js
@@ -0,0 +1,117 @@
+/*!
+ * jQuery Cookie Plugin v1.4.0
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2013 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+        if (typeof define === 'function' && define.amd) {
+                // AMD. Register as anonymous module.
+                define(['jquery'], factory);
+        } else {
+                // Browser globals.
+                factory(jQuery);
+        }
+}(function ($) {
+
+        var pluses = /\+/g;
+
+        function encode(s) {
+                return config.raw ? s : encodeURIComponent(s);
+        }
+
+        function decode(s) {
+                return config.raw ? s : decodeURIComponent(s);
+        }
+
+        function stringifyCookieValue(value) {
+                return encode(config.json ? JSON.stringify(value) : String(value));
+        }
+
+        function parseCookieValue(s) {
+                if (s.indexOf('"') === 0) {
+                        // This is a quoted cookie as according to RFC2068, unescape...
+                        s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+                }
+
+                try {
+                        // Replace server-side written pluses with spaces.
+                        // If we can't decode the cookie, ignore it, it's unusable.
+                        s = decodeURIComponent(s.replace(pluses, ' '));
+                } catch(e) {
+                        return;
+                }
+
+                try {
+                        // If we can't parse the cookie, ignore it, it's unusable.
+                        return config.json ? JSON.parse(s) : s;
+                } catch(e) {}
+        }
+
+        function read(s, converter) {
+                var value = config.raw ? s : parseCookieValue(s);
+                return $.isFunction(converter) ? converter(value) : value;
+        }
+
+        var config = $.cookie = function (key, value, options) {
+
+                // Write
+                if (value !== undefined && !$.isFunction(value)) {
+                        options = $.extend({}, config.defaults, options);
+
+                        if (typeof options.expires === 'number') {
+                                var days = options.expires, t = options.expires = new Date();
+                                t.setDate(t.getDate() + days);
+                        }
+
+                        return (document.cookie = [
+                                encode(key), '=', stringifyCookieValue(value),
+                                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+                                options.path    ? '; path=' + options.path : '',
+                                options.domain  ? '; domain=' + options.domain : '',
+                                options.secure  ? '; secure' : ''
+                        ].join(''));
+                }
+
+                // Read
+
+                var result = key ? undefined : {};
+
+                // To prevent the for loop in the first place assign an empty array
+                // in case there are no cookies at all. Also prevents odd result when
+                // calling $.cookie().
+                var cookies = document.cookie ? document.cookie.split('; ') : [];
+
+                for (var i = 0, l = cookies.length; i < l; i++) {
+                        var parts = cookies[i].split('=');
+                        var name = decode(parts.shift());
+                        var cookie = parts.join('=');
+
+                        if (key && key === name) {
+                                // If second argument (value) is a function it's a converter...
+                                result = read(cookie, value);
+                                break;
+                        }
+
+                        // Prevent storing a cookie that we couldn't decode.
+                        if (!key && (cookie = read(cookie)) !== undefined) {
+                                result[name] = cookie;
+                        }
+                }
+
+                return result;
+        };
+
+        config.defaults = {};
+
+        $.removeCookie = function (key, options) {
+                if ($.cookie(key) !== undefined) {
+                        // Must not alter options, thus extending a fresh object...
+                        $.cookie(key, '', $.extend({}, options, { expires: -1 }));
+                        return true;
+                }
+                return false;
+        };
+
+}));
diff --git a/themes/baggy/tags.twig b/themes/baggy/tags.twig
index 9df44bb7..9bb93a45 100644..100755
--- a/themes/baggy/tags.twig
+++ b/themes/baggy/tags.twig
@@ -6,7 +6,7 @@
 {% block content %}
 <h2>{% trans "Tags" %}</h2>
 <ul class="list-tags">
-{% for tag in tags %}<li>{% if token != '' %}<a class="icon icon-rss" href="?feed&amp;type=tag&amp;user_id={{ user_id }}&amp;tag_id={{ tag.id }}&amp;token={{ token }}" target="_blank"><span>rss</span></a>{% endif %} <a href="./?view=tag&amp;id={{ tag.id }}">{{ tag.value }}</a> 
+{% for tag in tags %}<li>{% if token != '' %}<a class="icon icon-rss" href="?feed&amp;type=tag&amp;user_id={{ user_id }}&amp;tag_id={{ tag.id }}&amp;token={{ token }}" target="_blank"><span>rss</span></a>{% endif %} <a href="./?view=tag&amp;id={{ tag.id }}">{{ tag.value }}</a> ({{ tag.entriescount }})
 </li>
 {% endfor %}
 </ul>
diff --git a/themes/baggy/view.twig b/themes/baggy/view.twig
index 4751c4cb..092be04e 100644
--- a/themes/baggy/view.twig
+++ b/themes/baggy/view.twig
@@ -14,7 +14,7 @@
                 {% if constant('SHARE_TWITTER') == 1 %}<li><a href="https://twitter.com/home?status={{entry.title|url_encode}}%20{{ entry.url|url_encode }}%20via%20@wallabagapp" target="_blank" class="tool twitter icon icon-twitter" title="{% trans "Tweet" %}"><span>{% trans "Tweet" %}</span></a></li>{% endif %}
                 {% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@wallabagapp" class="tool email icon icon-mail" title="{% trans "Email" %}"><span>{% trans "Email" %}</span></a></li>{% endif %}
                 {% if constant('SHARE_SHAARLI') == 1 %}<li><a href="{{ constant('SHAARLI_URL') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool shaarli" title="{% trans "shaarli" %}"><span>{% trans "shaarli" %}</span></a></li>{% endif %}
-                {% if constant('FLATTR') == 1 %}{% if flattr.status == constant('FLATTRABLE') %}<li><a href="http://flattr.com/submit/auto?url={{ entry.url }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span></a></li>{% elseif flattr.status == constant('FLATTRED') %}<li><a href="{{ flattr.flattrItemURL }}" class="tool flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span> ({{ flattr.numflattrs }})</a></li>{% endif %}{% endif %}
+                {% if constant('FLATTR') == 1 %}{% if flattr.status == constant('FLATTRABLE') %}<li><a href="http://flattr.com/submit/auto?url={{ entry.url }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span></a></li>{% elseif flattr.status == constant('FLATTRED') %}<li><a href="{{ flattr.flattrItemURL }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span> ({{ flattr.numflattrs }})</a></li>{% endif %}{% endif %}
                 <li><a href="mailto:hello@wallabag.org?subject=Wrong%20display%20in%20wallabag&amp;body={{ entry.url|url_encode }}" title="{% trans "Does this article appear wrong?" %}" class="tool bad-display icon icon-delete"><span>{% trans "Does this article appear wrong?" %}</span></a></li>
             </ul>
         </div>
@@ -29,4 +29,23 @@
                 {{ content | raw }}
             </article>
         </div>
+        <script src="{{ poche_url }}/themes/{{theme}}/js/restoreScroll.js"></script>
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+            $(window).scroll(function(e){
+                var scrollTop = $(window).scrollTop();
+                var docHeight = $(document).height();
+                var scrollPercent = (scrollTop) / (docHeight);
+                var scrollPercentRounded = Math.round(scrollPercent*100)/100;
+                savePercent({{ entry.id|e }}, scrollPercentRounded);
+            });
+
+            retrievePercent({{ entry.id|e }});
+
+            $(window).resize(function(){
+                retrievePercent({{ entry.id|e }});
+            });
+        });
+        </script>
 {% endblock %}