Updating read/star icons to SVGs

8 files changed, 89 insertions, 39 deletions

diff --git a/template/common.go b/template/common.go
index 79e7b7cf..1a85700f 100644
--- a/template/common.go
+++ b/template/common.go
@@ -149,6 +149,12 @@ SOFTWARE.
     <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
 </svg>
 {{ end }}
+{{ define "icon_unstar" }}
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-unstar" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z"/>
+    <path fill="currentColor" d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+</svg>
+{{ end }}
 {{ define "icon_save" }}
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -255,20 +261,20 @@ SOFTWARE.
             <a href="#"
                 title="{{ t "entry.status.title" }}"
                 data-toggle-status="true"
-                data-label-read="✔&nbsp;{{ t "entry.status.read" }}"
-                data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
+                data-label-read="{{ t "entry.status.read" }}"
+                data-label-unread="{{ t "entry.status.unread" }}"
                 data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
-                ><span class="icon-label">{{ if eq .entry.Status "read" }}✘&nbsp;{{ t "entry.status.unread" }}{{ else }}✔&nbsp;{{ t "entry.status.read" }}{{ end }}</span></a>
+                >{{ if eq .entry.Status "read" }}{{ template "icon_unread" }}{{ else }}{{ template "icon_read" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "read" }}{{ t "entry.status.unread" }}{{ else }}{{ t "entry.status.read" }}{{ end }}</span></a>
         </li>
         <li>
             <a href="#"
                 data-toggle-bookmark="true"
                 data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
                 data-label-loading="{{ t "entry.state.saving" }}"
-                data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
-                data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
+                data-label-star="{{ t "entry.bookmark.toggle.on" }}"
+                data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
                 data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
-                ><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
+                >{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
         </li>
         {{ if .entry.ShareCode }}
             <li>
@@ -468,6 +474,18 @@ SOFTWARE.
             </div>
         </div>
     </template>
+    <template id="icon_read">
+        {{ template "icon_read" }}
+    </template>
+    <template id="icon_unread">
+        {{ template "icon_unread" }}
+    </template>
+    <template id="icon_star">
+        {{ template "icon_star" }}
+    </template>
+    <template id="icon_unstar">
+        {{ template "icon_unstar" }}
+    </template>
 </body>
 </html>
 {{ end }}
@@ -522,9 +540,9 @@ var templateCommonMapChecksums = map[string]string{
 	"entry_pagination": "cdca9cf12586e41e5355190b06d9168f57f77b85924d1e63b13524bc15abcbf6",
 	"feed_list":        "931e43d328a116318c510de5658c688cd940b934c86b6ec82a472e1f81e020ae",
 	"feed_menu":        "318d8662dda5ca9dfc75b909c8461e79c86fb5082df1428f67aaf856f19f4b50",
-	"icons":            "9a41753778072f286216085d8712495e2ccca20c7a24f5c982775436a3d38579",
-	"item_meta":        "56ab09d7dd46eeb2e2ee11ddcec0c157a5832c896dbd2887d9e2b013680b2af6",
-	"layout":           "c4b8c65c0d85ed1aff0550f58b9dbf0768c74f2df6232952c0fe299d4c73d674",
+	"icons":            "7161afa4cce46245a99cb1e49a605d3ff30e907c3f568ef9c17218718d20e042",
+	"item_meta":        "fefa219c8296f0370632336ed59a2c8b0c2146ee77f3b10de1d9b87982219dc5",
+	"layout":           "03c77ed0163b790c0622ecec173119537087c66f6a3925a931ae83a9a94d32cf",
 	"pagination":       "7b61288e86283c4cf0dc83bcbf8bf1c00c7cb29e60201c8c0b633b2450d2911f",
 	"settings_menu":    "e2b777630c0efdbc529800303c01d6744ed3af80ec505ac5a5b3f99c9b989156",
 }
diff --git a/template/html/common/icons.html b/template/html/common/icons.html
index bf38b715..0b82a3b3 100644
--- a/template/html/common/icons.html
+++ b/template/html/common/icons.html
@@ -43,6 +43,12 @@ SOFTWARE.
     <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
 </svg>
 {{ end }}
+{{ define "icon_unstar" }}
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-unstar" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z"/>
+    <path fill="currentColor" d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+</svg>
+{{ end }}
 {{ define "icon_save" }}
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z"/>
diff --git a/template/html/common/item_meta.html b/template/html/common/item_meta.html
index f92e138e..e2991ff8 100644
--- a/template/html/common/item_meta.html
+++ b/template/html/common/item_meta.html
@@ -20,20 +20,20 @@
             <a href="#"
                 title="{{ t "entry.status.title" }}"
                 data-toggle-status="true"
-                data-label-read="✔&nbsp;{{ t "entry.status.read" }}"
-                data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
+                data-label-read="{{ t "entry.status.read" }}"
+                data-label-unread="{{ t "entry.status.unread" }}"
                 data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
-                ><span class="icon-label">{{ if eq .entry.Status "read" }}✘&nbsp;{{ t "entry.status.unread" }}{{ else }}✔&nbsp;{{ t "entry.status.read" }}{{ end }}</span></a>
+                >{{ if eq .entry.Status "read" }}{{ template "icon_unread" }}{{ else }}{{ template "icon_read" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "read" }}{{ t "entry.status.unread" }}{{ else }}{{ t "entry.status.read" }}{{ end }}</span></a>
         </li>
         <li>
             <a href="#"
                 data-toggle-bookmark="true"
                 data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
                 data-label-loading="{{ t "entry.state.saving" }}"
-                data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
-                data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
+                data-label-star="{{ t "entry.bookmark.toggle.on" }}"
+                data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
                 data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
-                ><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
+                >{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
         </li>
         {{ if .entry.ShareCode }}
             <li>
diff --git a/template/html/common/layout.html b/template/html/common/layout.html
index 695f5226..d56218be 100644
--- a/template/html/common/layout.html
+++ b/template/html/common/layout.html
@@ -157,6 +157,18 @@
             </div>
         </div>
     </template>
+    <template id="icon_read">
+        {{ template "icon_read" }}
+    </template>
+    <template id="icon_unread">
+        {{ template "icon_unread" }}
+    </template>
+    <template id="icon_star">
+        {{ template "icon_star" }}
+    </template>
+    <template id="icon_unstar">
+        {{ template "icon_unstar" }}
+    </template>
 </body>
 </html>
 {{ end }}
diff --git a/template/html/entry.html b/template/html/entry.html
index f3ecfd20..3688b304 100644
--- a/template/html/entry.html
+++ b/template/html/entry.html
@@ -13,24 +13,24 @@
                     <a href="#"
                         title="{{ t "entry.status.title" }}"
                         data-toggle-status="true"
-                        data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
-                        data-label-read="✔︎&nbsp;{{ t "entry.status.read" }}"
+                        data-label-unread="{{ t "entry.status.unread" }}"
+                        data-label-read="{{ t "entry.status.read" }}"
                         data-toast-unread="✘&nbsp;{{ t "entry.status.toast.unread" }}"
                         data-toast-read="✔︎&nbsp;{{ t "entry.status.toast.read" }}"
                         data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
-                        ><span class="icon-label">{{ if eq .entry.Status "unread" }}✔&nbsp;{{ t "entry.status.read" }}{{ else }}✘&nbsp;{{ t "entry.status.unread" }}{{ end }}</span></a>
+                        >{{ if eq .entry.Status "unread" }}{{ template "icon_read" }}{{ else }}{{ template "icon_unread" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "unread" }}{{ t "entry.status.read" }}{{ else }}{{ t "entry.status.unread" }}{{ end }}</span></a>
                 </li>
                 <li>
                     <a href="#"
                         data-toggle-bookmark="true"
                         data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
                         data-label-loading="{{ t "entry.state.saving" }}"
-                        data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
-                        data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
+                        data-label-star="{{ t "entry.bookmark.toggle.on" }}"
+                        data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
                         data-toast-star="★&nbsp;{{ t "entry.bookmark.toast.on" }}"
                         data-toast-unstar="☆&nbsp;{{ t "entry.bookmark.toast.off" }}"
                         data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
-                        ><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
+                        >{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
                 </li>
                 {{ if .hasSaveEntry }}
                     <li>
diff --git a/template/views.go b/template/views.go
index 7e25efed..011eb4d4 100644
--- a/template/views.go
+++ b/template/views.go
@@ -691,24 +691,24 @@ var templateViewsMap = map[string]string{
                     <a href="#"
                         title="{{ t "entry.status.title" }}"
                         data-toggle-status="true"
-                        data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
-                        data-label-read="✔︎&nbsp;{{ t "entry.status.read" }}"
+                        data-label-unread="{{ t "entry.status.unread" }}"
+                        data-label-read="{{ t "entry.status.read" }}"
                         data-toast-unread="✘&nbsp;{{ t "entry.status.toast.unread" }}"
                         data-toast-read="✔︎&nbsp;{{ t "entry.status.toast.read" }}"
                         data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
-                        ><span class="icon-label">{{ if eq .entry.Status "unread" }}✔&nbsp;{{ t "entry.status.read" }}{{ else }}✘&nbsp;{{ t "entry.status.unread" }}{{ end }}</span></a>
+                        >{{ if eq .entry.Status "unread" }}{{ template "icon_read" }}{{ else }}{{ template "icon_unread" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "unread" }}{{ t "entry.status.read" }}{{ else }}{{ t "entry.status.unread" }}{{ end }}</span></a>
                 </li>
                 <li>
                     <a href="#"
                         data-toggle-bookmark="true"
                         data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
                         data-label-loading="{{ t "entry.state.saving" }}"
-                        data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
-                        data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
+                        data-label-star="{{ t "entry.bookmark.toggle.on" }}"
+                        data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
                         data-toast-star="★&nbsp;{{ t "entry.bookmark.toast.on" }}"
                         data-toast-unstar="☆&nbsp;{{ t "entry.bookmark.toast.off" }}"
                         data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
-                        ><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
+                        >{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
                 </li>
                 {{ if .hasSaveEntry }}
                     <li>
@@ -1615,7 +1615,7 @@ var templateViewsMapChecksums = map[string]string{
 	"edit_category":       "b1c0b38f1b714c5d884edcd61e5b5295a5f1c8b71c469b35391e4dcc97cc6d36",
 	"edit_feed":           "5de7626448c48de384a0388227ab0c3b75b1ec19b5de440c91039180852cc5dc",
 	"edit_user":           "875292a3e84f700b17ae1e4b7cd40759a4e79a78daccc4e1214d1d22110b6def",
-	"entry":               "8fdecabc90354615cdf213542620e5ac16632a494fd6a87b3b2280ac879f6c34",
+	"entry":               "07ccdd5b9e99c63872bcab44b70b347cb59424fc8b69fd671b99b832c47277cc",
 	"feed_entries":        "89977ea86b8d43305d587b70e6d9c45c2c88249b3966f2d31051dc7a5f1c48b6",
 	"feeds":               "ec7d3fa96735bd8422ba69ef0927dcccddc1cc51327e0271f0312d3f881c64fd",
 	"history_entries":     "261b47e5f2f699a9cef1b3b690f80d7aabf585d05b77d67645d623f7ff6c0fbb",
diff --git a/ui/static/js.go b/ui/static/js.go
index e93fb36e..889e1872 100644
--- a/ui/static/js.go
+++ b/ui/static/js.go
@@ -3,11 +3,11 @@
 package static // import "miniflux.app/ui/static"
 
 var Javascripts = map[string]string{
-	"app":            `(function(){'use strict';class a{static isVisible(a){return a.offsetParent!==null}static openNewTab(b){let a=window.open("");a.opener=null,a.location=b,a.focus()}static scrollPageTo(a,d){let e=window.pageYOffset,b=document.documentElement.clientHeight,c=e+b,f=a.offsetTop+a.offsetHeight;(d||c-f<0||c-a.offsetTop>b)&&window.scrollTo(0,a.offsetTop-10)}static getVisibleElements(c){let a=document.querySelectorAll(c),b=[];for(let c=0;c<a.length;c++)this.isVisible(a[c])&&b.push(a[c]);return b}static findParent(a,b){for(;a&&a!==document;a=a.parentNode)if(a.classList.contains(b))return a;return null}static hasPassiveEventListenerOption(){var b=!1,a;try{a=Object.defineProperty({},"passive",{get:function(){b=!0}}),window.addEventListener("test",a,a),window.removeEventListener("test",a,a)}catch(a){b=!1}return b}}class N{constructor(){this.reset()}reset(){this.touch={start:{x:-1,y:-1},move:{x:-1,y:-1},element:null}}calculateDistance(){if(this.touch.start.x>=-1&&this.touch.move.x>=-1){let a=Math.abs(this.touch.move.x-this.touch.start.x),b=Math.abs(this.touch.move.y-this.touch.start.y);if(a>30&&b<70)return this.touch.move.x-this.touch.start.x}return 0}findElement(b){return b.classList.contains("touch-item")?b:a.findParent(b,"touch-item")}onTouchStart(a){if(a.touches===void 0||a.touches.length!==1)return;this.reset(),this.touch.start.x=a.touches[0].clientX,this.touch.start.y=a.touches[0].clientY,this.touch.element=this.findElement(a.touches[0].target)}onTouchMove(a){if(a.touches===void 0||a.touches.length!==1||this.element===null)return;this.touch.move.x=a.touches[0].clientX,this.touch.move.y=a.touches[0].clientY;let b=this.calculateDistance(),c=Math.abs(b);if(c>0){let d=1-(c>75?.9:c/75*.9),e=b>75?75:b<-75?-75:b;this.touch.element.style.opacity=d,this.touch.element.style.transform="translateX("+e+"px)",a.preventDefault()}}onTouchEnd(a){if(a.touches===void 0)return;if(this.touch.element!==null){let a=Math.abs(this.calculateDistance());a>75&&n(this.touch.element),this.touch.element.style.opacity=1,this.touch.element.style.transform="none"}this.reset()}listen(){let e=document.querySelectorAll(".touch-item"),c=a.hasPassiveEventListenerOption();e.forEach(a=>{a.addEventListener("touchstart",a=>this.onTouchStart(a),!!c&&{passive:!0}),a.addEventListener("touchmove",a=>this.onTouchMove(a),!!c&&{passive:!1}),a.addEventListener("touchend",a=>this.onTouchEnd(a),!!c&&{passive:!0}),a.addEventListener("touchcancel",()=>this.reset(),!!c&&{passive:!0})});let d=document.querySelector(".entry-content");if(d){let a={previous:null,next:null};const e=(c,d)=>{const e=a[c];e===null?a[c]=setTimeout(()=>{a[c]=null},200):(d.preventDefault(),b(c))};d.addEventListener("touchend",a=>{a.changedTouches[0].clientX>=d.offsetWidth/2?e("next",a):e("previous",a)},!!c&&{passive:!1}),d.addEventListener("touchmove",b=>{Object.keys(a).forEach(b=>a[b]=null)})}}}class M{constructor(){this.queue=[],this.shortcuts={},this.triggers=[]}on(a,b){this.shortcuts[a]=b,this.triggers.push(a.split(" ")[0])}listen(){document.onkeydown=a=>{let b=this.getKey(a);if(this.isEventIgnored(a,b)||this.isModifierKeyDown(a))return;a.preventDefault(),this.queue.push(b);for(let c in this.shortcuts){let d=c.split(" ");if(d.every((a,b)=>a===this.queue[b])){this.queue=[],this.shortcuts[c](a);return}if(d.length===1&&b===d[0]){this.queue=[],this.shortcuts[c](a);return}}this.queue.length>=2&&(this.queue=[])}}isEventIgnored(a,b){return a.target.tagName==="INPUT"||a.target.tagName==="TEXTAREA"||this.queue.length<1&&!this.triggers.includes(b)}isModifierKeyDown(a){return a.getModifierState("Control")||a.getModifierState("Alt")||a.getModifierState("Meta")}getKey(b){const a={Esc:'Escape',Up:'ArrowUp',Down:'ArrowDown',Left:'ArrowLeft',Right:'ArrowRight'};for(let c in a)if(a.hasOwnProperty(c)&&c===b.key)return a[c];return b.key}}class d{constructor(a){this.callback=null,this.url=a,this.options={method:"POST",cache:"no-cache",credentials:"include",body:null,headers:new Headers({"Content-Type":"application/json","X-Csrf-Token":this.getCsrfToken()})}}withHttpMethod(a){return this.options.method=a,this}withBody(a){return this.options.body=JSON.stringify(a),this}withCallback(a){return this.callback=a,this}getCsrfToken(){let a=document.querySelector("meta[name=X-CSRF-Token]");return a!==null?a.getAttribute("value"):""}execute(){fetch(new Request(this.url,this.options)).then(a=>{this.callback&&this.callback(a)})}}class g{static exists(){return document.getElementById("modal-container")!==null}static open(c){if(g.exists())return;let a=document.createElement("div");a.id="modal-container",a.appendChild(document.importNode(c,!0)),document.body.appendChild(a);let b=document.querySelector("a.btn-close-modal");b!==null&&(b.onclick=a=>{a.preventDefault(),g.close()})}static close(){let a=document.getElementById("modal-container");a!==null&&a.parentNode.removeChild(a)}}function c(a,b,c){let d=document.querySelectorAll(a);d.forEach(a=>{a.onclick=a=>{c||a.preventDefault(),b(a)}})}function K(){let b=document.querySelector(".header nav ul");a.isVisible(b)?b.style.display="none":b.style.display="block";let c=document.querySelector(".header .search");a.isVisible(c)?c.style.display="none":c.style.display="block"}function G(b){let a=b.target;a.tagName==="A"?window.location.href=a.getAttribute("href"):window.location.href=a.querySelector("a").getAttribute("href")}function C(){let a=document.querySelectorAll("form");a.forEach(a=>{a.onsubmit=()=>{let b=a.querySelector("button");b&&(b.innerHTML=b.dataset.labelLoading,b.disabled=!0)}})}function u(b){b.preventDefault(),b.stopPropagation();let c=document.querySelector(".search-toggle-switch");c&&(c.style.display="none");let d=document.querySelector(".search-form");d&&(d.style.display="block");let a=document.getElementById("search-input");a&&(a.focus(),a.value="")}function A(){let a=document.getElementById("keyboard-shortcuts");a!==null&&g.open(a.content)}function q(){let d=a.getVisibleElements(".items .item"),c=[];d.forEach(a=>{a.classList.add("item-status-read"),c.push(parseInt(a.dataset.id,10))}),c.length>0&&l(c,"read",()=>{let a=document.querySelector("a[data-action=markPageAsRead]"),c=!1;a&&(c=a.dataset.showOnlyUnread||!1),c?window.location.reload():b("next",!0)})}function x(b){let c=!b,a=h(b);a&&(n(a,c),e()&&a.classList.contains('current-item')&&i())}function n(b,d){let g=parseInt(b.dataset.id,10),a=b.querySelector("a[data-toggle-status]"),c=a.dataset.value,e=c==="read"?"unread":"read";l([g],e),c==="read"?(a.innerHTML='<span class="icon-label">'+a.dataset.labelRead+'</span>',a.dataset.value="unread",d&&f(a.dataset.toastUnread)):(a.innerHTML='<span class="icon-label">'+a.dataset.labelUnread+'</span>',a.dataset.value="read",d&&f(a.dataset.toastRead)),b.classList.contains("item-status-"+c)&&(b.classList.remove("item-status-"+c),b.classList.add("item-status-"+e))}function O(a){if(a.classList.contains("item-status-unread")){a.classList.remove("item-status-unread"),a.classList.add("item-status-read");let b=parseInt(a.dataset.id,10);l([b],"read")}}function L(){let b=document.body.dataset.refreshAllFeedsUrl,a=new d(b);a.withCallback(()=>{window.location.reload()}),a.withHttpMethod("GET"),a.execute()}function l(c,b,e){let f=document.body.dataset.entriesStatusUrl,a=new d(f);a.withBody({entry_ids:c,status:b}),a.withCallback(e),a.execute(),b==="read"?I(1):J(1)}function r(a){let c=!a,b=h(a);b&&E(b.querySelector("a[data-save-entry]"),c)}function E(a,c){if(!a)return;if(a.dataset.completed)return;let e=a.innerHTML;a.innerHTML='<span class="icon-label">'+a.dataset.labelLoading+'</span>';let b=new d(a.dataset.saveUrl);b.withCallback(()=>{a.innerHTML=e,a.dataset.completed=!0,c&&f(a.dataset.toastDone)}),b.execute()}function t(a){let c=!a,b=h(a);b&&B(b,c)}function B(e,b){let a=e.querySelector("a[data-toggle-bookmark]");if(!a)return;a.innerHTML='<span class="icon-label">'+a.dataset.labelLoading+'</span>';let c=new d(a.dataset.bookmarkUrl);c.withCallback(()=>{a.dataset.value==="star"?(a.innerHTML='<span class="icon-label">'+a.dataset.labelStar+'</span>',a.dataset.value="unstar",b&&f(a.dataset.toastUnstar)):(a.innerHTML='<span class="icon-label">'+a.dataset.labelUnstar+'</span>',a.dataset.value="star",b&&f(a.dataset.toastStar))}),c.execute()}function v(){if(e())return;let a=document.querySelector("a[data-fetch-content-entry]");if(!a)return;let c=a.innerHTML;a.innerHTML='<span class="icon-label">'+a.dataset.labelLoading+'</span>';let b=new d(a.dataset.fetchContentUrl);b.withCallback(b=>{a.innerHTML=c,b.json().then(a=>{a.hasOwnProperty("content")&&(document.querySelector(".entry-content").innerHTML=a.content)})}),b.execute()}function w(d){let b=document.querySelector(".entry h1 a");if(b!==null){d?window.location.href=b.getAttribute("href"):a.openNewTab(b.getAttribute("href"));return}let c=document.querySelector(".current-item a[data-original-link]");if(c!==null){a.openNewTab(c.getAttribute("href"));let b=document.querySelector(".current-item");document.location.href!=document.querySelector('a[data-page=starred]').href&&i(),O(b)}}function m(b){if(e()){let b=document.querySelector(".current-item a[data-comments-link]");b!==null&&a.openNewTab(b.getAttribute("href"))}else{let c=document.querySelector("a[data-comments-link]");if(c!==null){b?window.location.href=c.getAttribute("href"):a.openNewTab(c.getAttribute("href"));return}}}function P(){let a=document.querySelector(".current-item .item-title a");a!==null&&(window.location.href=a.getAttribute("href"))}function H(){let a=document.querySelectorAll("[data-action=remove-feed]");if(a.length===1){let b=a[0],c=new d(b.dataset.url);c.withCallback(()=>{b.dataset.redirectUrl?window.location.href=b.dataset.redirectUrl:window.location.reload()}),c.execute()}}function b(b,c){let a=document.querySelector("a[data-page="+b+"]");a?document.location.href=a.href:c&&window.location.reload()}function k(){e()?F():b("previous")}function j(){e()?i():b("next")}function D(){p()?s():b('feeds')}function s(){if(p()){let a=document.querySelector("span.entry-website a");a!==null&&(window.location.href=a.href)}else{let a=document.querySelector(".current-item a[data-feed-link]");a!==null&&(window.location.href=a.getAttribute("href"))}}function F(){let b=a.getVisibleElements(".items .item");if(b.length===0)return;if(document.querySelector(".current-item")===null){b[0].classList.add("current-item"),b[0].querySelector('.item-header a').focus();return}for(let c=0;c<b.length;c++)if(b[c].classList.contains("current-item")){b[c].classList.remove("current-item");let d;c-1>=0?d=b[c-1]:d=b[b.length-1],d.classList.add("current-item"),a.scrollPageTo(d),d.querySelector('.item-header a').focus();break}}function i(){let b=a.getVisibleElements(".items .item");if(b.length===0)return;if(document.querySelector(".current-item")===null){b[0].classList.add("current-item"),b[0].querySelector('.item-header a').focus();return}for(let c=0;c<b.length;c++)if(b[c].classList.contains("current-item")){b[c].classList.remove("current-item");let d;c+1<b.length?d=b[c+1]:d=b[0],d.classList.add("current-item"),a.scrollPageTo(d),d.querySelector('.item-header a').focus();break}}function z(){let b=document.querySelector(".current-item");b!==null&&a.scrollPageTo(b,!0)}function I(a){y(b=>b-a)}function J(a){y(b=>b+a)}function y(a){let b=document.querySelectorAll("span.unread-counter");if(b.forEach(b=>{let c=parseInt(b.textContent,10);b.innerHTML=a(c)}),window.location.href.endsWith('/unread')){let b=parseInt(document.title.split('(')[1],10),c=a(b);document.title=document.title.replace(/(.*?)\(\d+\)(.*?)/,function(d,a,b,e,f){return a+'('+c+')'+b})}}function p(){return document.querySelector("section.entry")!==null}function e(){return document.querySelector(".items")!==null}function h(b){return e()?b?a.findParent(b,"item"):document.querySelector(".current-item"):document.querySelector(".entry")}function o(a,f){a.tagName!='A'&&(a=a.parentNode),a.style.display="none";let e=a.parentNode,b=document.createElement("span"),c=document.createElement("a");c.href="#",c.appendChild(document.createTextNode(a.dataset.labelYes)),c.onclick=d=>{d.preventDefault();let c=document.createElement("span");c.className="loading",c.appendChild(document.createTextNode(a.dataset.labelLoading)),b.remove(),e.appendChild(c),f(a.dataset.url,a.dataset.redirectUrl)};let d=document.createElement("a");d.href="#",d.appendChild(document.createTextNode(a.dataset.labelNo)),d.onclick=c=>{c.preventDefault(),a.style.display="inline",b.remove()},b.className="confirm",b.appendChild(document.createTextNode(a.dataset.labelQuestion+" ")),b.appendChild(c),b.appendChild(document.createTextNode(", ")),b.appendChild(d),e.appendChild(b)}function f(a){if(!a)return;document.querySelector('.toast-wrap .toast-msg').innerHTML=a;let b=document.querySelector('.toast-wrap');b.classList.remove('toastAnimate'),setTimeout(function(){b.classList.add('toastAnimate')},100)}document.addEventListener("DOMContentLoaded",function(){if(C(),!document.querySelector("body[data-disable-keyboard-shortcuts=true]")){let a=new M;a.on("g u",()=>b("unread")),a.on("g b",()=>b("starred")),a.on("g h",()=>b("history")),a.on("g f",()=>D()),a.on("g c",()=>b("categories")),a.on("g s",()=>b("settings")),a.on("ArrowLeft",()=>k()),a.on("ArrowRight",()=>j()),a.on("k",()=>k()),a.on("p",()=>k()),a.on("j",()=>j()),a.on("n",()=>j()),a.on("h",()=>b("previous")),a.on("l",()=>b("next")),a.on("z t",()=>z()),a.on("o",()=>P()),a.on("v",()=>w()),a.on("V",()=>w(!0)),a.on("c",()=>m()),a.on("C",()=>m(!0)),a.on("m",()=>x()),a.on("A",()=>q()),a.on("s",()=>r()),a.on("d",()=>v()),a.on("f",()=>t()),a.on("F",()=>s()),a.on("R",()=>L()),a.on("?",()=>A()),a.on("#",()=>H()),a.on("/",a=>u(a)),a.on("Escape",()=>g.close()),a.listen()}let a=new N;if(a.listen(),c("a[data-save-entry]",a=>r(a.target)),c("a[data-toggle-bookmark]",a=>t(a.target)),c("a[data-fetch-content-entry]",()=>v()),c("a[data-action=search]",a=>u(a)),c("a[data-action=markPageAsRead]",()=>o(event.target,()=>q())),c("a[data-toggle-status]",a=>x(a.target)),c("a[data-confirm]",a=>o(a.target,(c,a)=>{let b=new d(c);b.withCallback(()=>{a?window.location.href=a:window.location.reload()}),b.execute()})),document.documentElement.clientWidth<600&&(c(".logo",()=>K()),c(".header nav li",a=>G(a))),"serviceWorker"in navigator){let a=document.getElementById("service-worker-script");a&&navigator.serviceWorker.register(a.src)}window.addEventListener('beforeinstallprompt',c=>{c.preventDefault();let a=c;const b=document.getElementById('prompt-home-screen');if(b){b.style.display="block";const c=document.getElementById('btn-add-to-home-screen');c&&c.addEventListener('click',c=>{c.preventDefault(),a.prompt(),a.userChoice.then(()=>{a=null,b.style.display="none"})})}})})})()`,
+	"app":            `(function(){'use strict';class a{static isVisible(a){return a.offsetParent!==null}static openNewTab(b){let a=window.open("");a.opener=null,a.location=b,a.focus()}static scrollPageTo(a,d){let e=window.pageYOffset,b=document.documentElement.clientHeight,c=e+b,f=a.offsetTop+a.offsetHeight;(d||c-f<0||c-a.offsetTop>b)&&window.scrollTo(0,a.offsetTop-10)}static getVisibleElements(c){let a=document.querySelectorAll(c),b=[];for(let c=0;c<a.length;c++)this.isVisible(a[c])&&b.push(a[c]);return b}static findParent(a,b){for(;a&&a!==document;a=a.parentNode)if(a.classList.contains(b))return a;return null}static hasPassiveEventListenerOption(){var b=!1,a;try{a=Object.defineProperty({},"passive",{get:function(){b=!0}}),window.addEventListener("test",a,a),window.removeEventListener("test",a,a)}catch(a){b=!1}return b}}class N{constructor(){this.reset()}reset(){this.touch={start:{x:-1,y:-1},move:{x:-1,y:-1},element:null}}calculateDistance(){if(this.touch.start.x>=-1&&this.touch.move.x>=-1){let a=Math.abs(this.touch.move.x-this.touch.start.x),b=Math.abs(this.touch.move.y-this.touch.start.y);if(a>30&&b<70)return this.touch.move.x-this.touch.start.x}return 0}findElement(b){return b.classList.contains("touch-item")?b:a.findParent(b,"touch-item")}onTouchStart(a){if(a.touches===void 0||a.touches.length!==1)return;this.reset(),this.touch.start.x=a.touches[0].clientX,this.touch.start.y=a.touches[0].clientY,this.touch.element=this.findElement(a.touches[0].target)}onTouchMove(a){if(a.touches===void 0||a.touches.length!==1||this.element===null)return;this.touch.move.x=a.touches[0].clientX,this.touch.move.y=a.touches[0].clientY;let b=this.calculateDistance(),c=Math.abs(b);if(c>0){let d=1-(c>75?.9:c/75*.9),e=b>75?75:b<-75?-75:b;this.touch.element.style.opacity=d,this.touch.element.style.transform="translateX("+e+"px)",a.preventDefault()}}onTouchEnd(a){if(a.touches===void 0)return;if(this.touch.element!==null){let a=Math.abs(this.calculateDistance());a>75&&n(this.touch.element),this.touch.element.style.opacity=1,this.touch.element.style.transform="none"}this.reset()}listen(){let e=document.querySelectorAll(".touch-item"),c=a.hasPassiveEventListenerOption();e.forEach(a=>{a.addEventListener("touchstart",a=>this.onTouchStart(a),!!c&&{passive:!0}),a.addEventListener("touchmove",a=>this.onTouchMove(a),!!c&&{passive:!1}),a.addEventListener("touchend",a=>this.onTouchEnd(a),!!c&&{passive:!0}),a.addEventListener("touchcancel",()=>this.reset(),!!c&&{passive:!0})});let d=document.querySelector(".entry-content");if(d){let a={previous:null,next:null};const e=(c,d)=>{const e=a[c];e===null?a[c]=setTimeout(()=>{a[c]=null},200):(d.preventDefault(),b(c))};d.addEventListener("touchend",a=>{a.changedTouches[0].clientX>=d.offsetWidth/2?e("next",a):e("previous",a)},!!c&&{passive:!1}),d.addEventListener("touchmove",b=>{Object.keys(a).forEach(b=>a[b]=null)})}}}class M{constructor(){this.queue=[],this.shortcuts={},this.triggers=[]}on(a,b){this.shortcuts[a]=b,this.triggers.push(a.split(" ")[0])}listen(){document.onkeydown=a=>{let b=this.getKey(a);if(this.isEventIgnored(a,b)||this.isModifierKeyDown(a))return;a.preventDefault(),this.queue.push(b);for(let c in this.shortcuts){let d=c.split(" ");if(d.every((a,b)=>a===this.queue[b])){this.queue=[],this.shortcuts[c](a);return}if(d.length===1&&b===d[0]){this.queue=[],this.shortcuts[c](a);return}}this.queue.length>=2&&(this.queue=[])}}isEventIgnored(a,b){return a.target.tagName==="INPUT"||a.target.tagName==="TEXTAREA"||this.queue.length<1&&!this.triggers.includes(b)}isModifierKeyDown(a){return a.getModifierState("Control")||a.getModifierState("Alt")||a.getModifierState("Meta")}getKey(b){const a={Esc:'Escape',Up:'ArrowUp',Down:'ArrowDown',Left:'ArrowLeft',Right:'ArrowRight'};for(let c in a)if(a.hasOwnProperty(c)&&c===b.key)return a[c];return b.key}}class d{constructor(a){this.callback=null,this.url=a,this.options={method:"POST",cache:"no-cache",credentials:"include",body:null,headers:new Headers({"Content-Type":"application/json","X-Csrf-Token":this.getCsrfToken()})}}withHttpMethod(a){return this.options.method=a,this}withBody(a){return this.options.body=JSON.stringify(a),this}withCallback(a){return this.callback=a,this}getCsrfToken(){let a=document.querySelector("meta[name=X-CSRF-Token]");return a!==null?a.getAttribute("value"):""}execute(){fetch(new Request(this.url,this.options)).then(a=>{this.callback&&this.callback(a)})}}class g{static exists(){return document.getElementById("modal-container")!==null}static open(c){if(g.exists())return;let a=document.createElement("div");a.id="modal-container",a.appendChild(document.importNode(c,!0)),document.body.appendChild(a);let b=document.querySelector("a.btn-close-modal");b!==null&&(b.onclick=a=>{a.preventDefault(),g.close()})}static close(){let a=document.getElementById("modal-container");a!==null&&a.parentNode.removeChild(a)}}function c(a,b,c){let d=document.querySelectorAll(a);d.forEach(a=>{a.onclick=a=>{c||a.preventDefault(),b(a)}})}function K(){let b=document.querySelector(".header nav ul");a.isVisible(b)?b.style.display="none":b.style.display="block";let c=document.querySelector(".header .search");a.isVisible(c)?c.style.display="none":c.style.display="block"}function G(b){let a=b.target;a.tagName==="A"?window.location.href=a.getAttribute("href"):window.location.href=a.querySelector("a").getAttribute("href")}function C(){let a=document.querySelectorAll("form");a.forEach(a=>{a.onsubmit=()=>{let b=a.querySelector("button");b&&(b.innerHTML=b.dataset.labelLoading,b.disabled=!0)}})}function u(b){b.preventDefault(),b.stopPropagation();let c=document.querySelector(".search-toggle-switch");c&&(c.style.display="none");let d=document.querySelector(".search-form");d&&(d.style.display="block");let a=document.getElementById("search-input");a&&(a.focus(),a.value="")}function A(){let a=document.getElementById("keyboard-shortcuts");a!==null&&g.open(a.content)}function q(){let d=a.getVisibleElements(".items .item"),c=[];d.forEach(a=>{a.classList.add("item-status-read"),c.push(parseInt(a.dataset.id,10))}),c.length>0&&l(c,"read",()=>{let a=document.querySelector("a[data-action=markPageAsRead]"),c=!1;a&&(c=a.dataset.showOnlyUnread||!1),c?window.location.reload():b("next",!0)})}function x(b){let c=!b,a=h(b);a&&(n(a,c),e()&&a.classList.contains('current-item')&&i())}function n(b,h){let i=parseInt(b.dataset.id,10),a=b.querySelector("a[data-toggle-status]"),c=a.dataset.value,e=c==="read"?"unread":"read";l([i],e);let g,d;c==="read"?(g=document.querySelector("template#icon_read"),d=a.dataset.labelRead,h&&f(a.dataset.toastUnread)):(g=document.querySelector("template#icon_unread"),d=a.dataset.labelUnread,h&&f(a.dataset.toastRead)),a.innerHTML=g.innerHTML+'<span class="icon-label">'+d+'</span>',a.dataset.value=e,b.classList.contains("item-status-"+c)&&(b.classList.remove("item-status-"+c),b.classList.add("item-status-"+e))}function O(a){if(a.classList.contains("item-status-unread")){a.classList.remove("item-status-unread"),a.classList.add("item-status-read");let b=parseInt(a.dataset.id,10);l([b],"read")}}function L(){let b=document.body.dataset.refreshAllFeedsUrl,a=new d(b);a.withCallback(()=>{window.location.reload()}),a.withHttpMethod("GET"),a.execute()}function l(c,b,e){let f=document.body.dataset.entriesStatusUrl,a=new d(f);a.withBody({entry_ids:c,status:b}),a.withCallback(e),a.execute(),b==="read"?I(1):J(1)}function r(a){let c=!a,b=h(a);b&&E(b.querySelector("a[data-save-entry]"),c)}function E(a,c){if(!a)return;if(a.dataset.completed)return;let e=a.innerHTML;a.innerHTML='<span class="icon-label">'+a.dataset.labelLoading+'</span>';let b=new d(a.dataset.saveUrl);b.withCallback(()=>{a.innerHTML=e,a.dataset.completed=!0,c&&f(a.dataset.toastDone)}),b.execute()}function t(a){let c=!a,b=h(a);b&&B(b,c)}function B(e,b){let a=e.querySelector("a[data-toggle-bookmark]");if(!a)return;a.innerHTML='<span class="icon-label">'+a.dataset.labelLoading+'</span>';let c=new d(a.dataset.bookmarkUrl);c.withCallback(()=>{let e=a.dataset.value,g=e==="star"?"unstar":"star",c,d;e==="star"?(c=document.querySelector("template#icon_star"),d=a.dataset.labelStar,b&&f(a.dataset.toastUnstar)):(c=document.querySelector("template#icon_unstar"),d=a.dataset.labelUnstar,b&&f(a.dataset.toastStar)),a.innerHTML=c.innerHTML+'<span class="icon-label">'+d+'</span>',a.dataset.value=g}),c.execute()}function v(){if(e())return;let a=document.querySelector("a[data-fetch-content-entry]");if(!a)return;let c=a.innerHTML;a.innerHTML='<span class="icon-label">'+a.dataset.labelLoading+'</span>';let b=new d(a.dataset.fetchContentUrl);b.withCallback(b=>{a.innerHTML=c,b.json().then(a=>{a.hasOwnProperty("content")&&(document.querySelector(".entry-content").innerHTML=a.content)})}),b.execute()}function w(d){let b=document.querySelector(".entry h1 a");if(b!==null){d?window.location.href=b.getAttribute("href"):a.openNewTab(b.getAttribute("href"));return}let c=document.querySelector(".current-item a[data-original-link]");if(c!==null){a.openNewTab(c.getAttribute("href"));let b=document.querySelector(".current-item");document.location.href!=document.querySelector('a[data-page=starred]').href&&i(),O(b)}}function m(b){if(e()){let b=document.querySelector(".current-item a[data-comments-link]");b!==null&&a.openNewTab(b.getAttribute("href"))}else{let c=document.querySelector("a[data-comments-link]");if(c!==null){b?window.location.href=c.getAttribute("href"):a.openNewTab(c.getAttribute("href"));return}}}function P(){let a=document.querySelector(".current-item .item-title a");a!==null&&(window.location.href=a.getAttribute("href"))}function H(){let a=document.querySelectorAll("[data-action=remove-feed]");if(a.length===1){let b=a[0],c=new d(b.dataset.url);c.withCallback(()=>{b.dataset.redirectUrl?window.location.href=b.dataset.redirectUrl:window.location.reload()}),c.execute()}}function b(b,c){let a=document.querySelector("a[data-page="+b+"]");a?document.location.href=a.href:c&&window.location.reload()}function k(){e()?F():b("previous")}function j(){e()?i():b("next")}function D(){p()?s():b('feeds')}function s(){if(p()){let a=document.querySelector("span.entry-website a");a!==null&&(window.location.href=a.href)}else{let a=document.querySelector(".current-item a[data-feed-link]");a!==null&&(window.location.href=a.getAttribute("href"))}}function F(){let b=a.getVisibleElements(".items .item");if(b.length===0)return;if(document.querySelector(".current-item")===null){b[0].classList.add("current-item"),b[0].querySelector('.item-header a').focus();return}for(let c=0;c<b.length;c++)if(b[c].classList.contains("current-item")){b[c].classList.remove("current-item");let d;c-1>=0?d=b[c-1]:d=b[b.length-1],d.classList.add("current-item"),a.scrollPageTo(d),d.querySelector('.item-header a').focus();break}}function i(){let b=a.getVisibleElements(".items .item");if(b.length===0)return;if(document.querySelector(".current-item")===null){b[0].classList.add("current-item"),b[0].querySelector('.item-header a').focus();return}for(let c=0;c<b.length;c++)if(b[c].classList.contains("current-item")){b[c].classList.remove("current-item");let d;c+1<b.length?d=b[c+1]:d=b[0],d.classList.add("current-item"),a.scrollPageTo(d),d.querySelector('.item-header a').focus();break}}function z(){let b=document.querySelector(".current-item");b!==null&&a.scrollPageTo(b,!0)}function I(a){y(b=>b-a)}function J(a){y(b=>b+a)}function y(a){let b=document.querySelectorAll("span.unread-counter");if(b.forEach(b=>{let c=parseInt(b.textContent,10);b.innerHTML=a(c)}),window.location.href.endsWith('/unread')){let b=parseInt(document.title.split('(')[1],10),c=a(b);document.title=document.title.replace(/(.*?)\(\d+\)(.*?)/,function(d,a,b,e,f){return a+'('+c+')'+b})}}function p(){return document.querySelector("section.entry")!==null}function e(){return document.querySelector(".items")!==null}function h(b){return e()?b?a.findParent(b,"item"):document.querySelector(".current-item"):document.querySelector(".entry")}function o(a,f){a.tagName!='A'&&(a=a.parentNode),a.style.display="none";let e=a.parentNode,b=document.createElement("span"),c=document.createElement("a");c.href="#",c.appendChild(document.createTextNode(a.dataset.labelYes)),c.onclick=d=>{d.preventDefault();let c=document.createElement("span");c.className="loading",c.appendChild(document.createTextNode(a.dataset.labelLoading)),b.remove(),e.appendChild(c),f(a.dataset.url,a.dataset.redirectUrl)};let d=document.createElement("a");d.href="#",d.appendChild(document.createTextNode(a.dataset.labelNo)),d.onclick=c=>{c.preventDefault(),a.style.display="inline",b.remove()},b.className="confirm",b.appendChild(document.createTextNode(a.dataset.labelQuestion+" ")),b.appendChild(c),b.appendChild(document.createTextNode(", ")),b.appendChild(d),e.appendChild(b)}function f(a){if(!a)return;document.querySelector('.toast-wrap .toast-msg').innerHTML=a;let b=document.querySelector('.toast-wrap');b.classList.remove('toastAnimate'),setTimeout(function(){b.classList.add('toastAnimate')},100)}document.addEventListener("DOMContentLoaded",function(){if(C(),!document.querySelector("body[data-disable-keyboard-shortcuts=true]")){let a=new M;a.on("g u",()=>b("unread")),a.on("g b",()=>b("starred")),a.on("g h",()=>b("history")),a.on("g f",()=>D()),a.on("g c",()=>b("categories")),a.on("g s",()=>b("settings")),a.on("ArrowLeft",()=>k()),a.on("ArrowRight",()=>j()),a.on("k",()=>k()),a.on("p",()=>k()),a.on("j",()=>j()),a.on("n",()=>j()),a.on("h",()=>b("previous")),a.on("l",()=>b("next")),a.on("z t",()=>z()),a.on("o",()=>P()),a.on("v",()=>w()),a.on("V",()=>w(!0)),a.on("c",()=>m()),a.on("C",()=>m(!0)),a.on("m",()=>x()),a.on("A",()=>q()),a.on("s",()=>r()),a.on("d",()=>v()),a.on("f",()=>t()),a.on("F",()=>s()),a.on("R",()=>L()),a.on("?",()=>A()),a.on("#",()=>H()),a.on("/",a=>u(a)),a.on("Escape",()=>g.close()),a.listen()}let a=new N;if(a.listen(),c("a[data-save-entry]",a=>r(a.target)),c("a[data-toggle-bookmark]",a=>t(a.target)),c("a[data-fetch-content-entry]",()=>v()),c("a[data-action=search]",a=>u(a)),c("a[data-action=markPageAsRead]",()=>o(event.target,()=>q())),c("a[data-toggle-status]",a=>x(a.target)),c("a[data-confirm]",a=>o(a.target,(c,a)=>{let b=new d(c);b.withCallback(()=>{a?window.location.href=a:window.location.reload()}),b.execute()})),document.documentElement.clientWidth<600&&(c(".logo",()=>K()),c(".header nav li",a=>G(a))),"serviceWorker"in navigator){let a=document.getElementById("service-worker-script");a&&navigator.serviceWorker.register(a.src)}window.addEventListener('beforeinstallprompt',c=>{c.preventDefault();let a=c;const b=document.getElementById('prompt-home-screen');if(b){b.style.display="block";const c=document.getElementById('btn-add-to-home-screen');c&&c.addEventListener('click',c=>{c.preventDefault(),a.prompt(),a.userChoice.then(()=>{a=null,b.style.display="none"})})}})})})()`,
 	"service-worker": `self.addEventListener("fetch",a=>{a.request.url.includes("/feed/icon/")&&a.respondWith(caches.open("feed_icons").then(b=>b.match(a.request).then(c=>c||fetch(a.request).then(c=>(b.put(a.request,c.clone()),c)))))})`,
 }
 
 var JavascriptsChecksums = map[string]string{
-	"app":            "f71831bafc4d63eac0f12de1827ada7fe2d11ae8f497265ade24614cd105bfc7",
+	"app":            "5b6e8e27bbde44b774c4575795ba9ebe514b06e8b3a3496adf4d9f5cf718a97a",
 	"service-worker": "730f10dc6a52e0bd9271da0c3b0103368893f3feb0a092fd585ac5b7abedb4ac",
 }
diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 8ff3fbd7..f944737f 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -136,20 +136,25 @@ function toggleEntryStatus(element, toasting) {
 
     updateEntriesStatus([entryID], newStatus);
 
+    let icon, label;
+
     if (currentStatus === "read") {
-        link.innerHTML = '<span class="icon-label">' + link.dataset.labelRead + '</span>';
-        link.dataset.value = "unread";
+        icon = document.querySelector("template#icon_read");
+        label = link.dataset.labelRead;
         if (toasting) {
             toast(link.dataset.toastUnread);
         }
     } else {
-        link.innerHTML = '<span class="icon-label">' + link.dataset.labelUnread + '</span>';
-        link.dataset.value = "read";
+        icon = document.querySelector("template#icon_unread");
+        label = link.dataset.labelUnread;
         if (toasting) {
             toast(link.dataset.toastRead);
         }
     }
 
+    link.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
+    link.dataset.value = newStatus;
+
     if (element.classList.contains("item-status-" + currentStatus)) {
         element.classList.remove("item-status-" + currentStatus);
         element.classList.add("item-status-" + newStatus);
@@ -248,19 +253,28 @@ function toggleBookmark(parentElement, toasting) {
 
     let request = new RequestBuilder(element.dataset.bookmarkUrl);
     request.withCallback(() => {
-        if (element.dataset.value === "star") {
-            element.innerHTML = '<span class="icon-label">' + element.dataset.labelStar + '</span>';
-            element.dataset.value = "unstar";
+
+        let currentStarStatus = element.dataset.value;
+        let newStarStatus = currentStarStatus === "star" ? "unstar" : "star";
+
+        let icon, label;
+
+        if (currentStarStatus === "star") {
+            icon = document.querySelector("template#icon_star");
+            label = element.dataset.labelStar;
             if (toasting) {
                 toast(element.dataset.toastUnstar);
             }
         } else {
-            element.innerHTML = '<span class="icon-label">' + element.dataset.labelUnstar + '</span>';
-            element.dataset.value = "star";
+            icon = document.querySelector("template#icon_unstar");
+            label = element.dataset.labelUnstar;
             if (toasting) {
                 toast(element.dataset.toastStar);
             }
         }
+
+        element.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
+        element.dataset.value = newStarStatus;
     });
     request.execute();
 }