From eabad44fead796b38ca93f9d2cba48eb1a7879fc Mon Sep 17 00:00:00 2001
From: nipos <ni.pos@yandex.com>
Date: Sun, 29 Mar 2020 20:17:40 +0200
Subject: [PATCH] Add support for bookmarks,add support for announcements,add
 support for emoji reactions

---
 .htaccess                             |   4 +
 Caddyfile                             |   6 +
 README.md                             |   1 +
 assets/css/dark.css                   |  34 +++++-
 assets/css/emojipicker.css            |   1 +
 assets/css/style.css                  | 123 +++++++++++++++++--
 assets/js/emojipicker/emojipicker.js  |  24 ++--
 assets/js/halcyon/halcyonFunctions.js |  52 +++++++-
 assets/js/halcyon/halcyonTemplates.js |  85 +++++++++++++
 assets/js/halcyon/halcyonUI.js        | 170 ++++++++++++++++++++++----
 assets/js/mastodon.js/mastodon.js     |   8 --
 bookmarks.php                         |  43 +++++++
 header.php                            |   3 +
 lighttpd.conf                         |   1 +
 nginx.conf                            |   3 +
 version.txt                           |   2 +-
 16 files changed, 506 insertions(+), 54 deletions(-)
 create mode 100644 bookmarks.php

diff --git a/.htaccess b/.htaccess
index c007a2a..ed21754 100644
--- a/.htaccess
+++ b/.htaccess
@@ -31,6 +31,10 @@ RewriteRule ^federated/?$ federated\.php [NC,L]
 RewriteBase /notifications
 RewriteRule ^notifications/?$ notifications\.php [NC,L]
 
+# Bookmarks
+RewriteBase /bookmarks
+RewriteRule ^bookmarks/?$ bookmarks\.php [NC,L]
+
 # Who to follow
 RewriteBase /whotofollow
 RewriteRule ^whotofollow/?$ who_to_follow\.php [NC,L]
diff --git a/Caddyfile b/Caddyfile
index 95051de..cf85cd9 100644
--- a/Caddyfile
+++ b/Caddyfile
@@ -67,6 +67,12 @@ halcyon.domain.tld {
     r ^/notifications/?$
     to /notifications.php
   }
+  
+  # Bookmarks
+  rewrite {
+    r ^/bookmarks/?$
+    to /bookmarks.php
+  }
 
   # Who to follow
   rewrite {
diff --git a/README.md b/README.md
index 1fca52b..f58002c 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ We moved our instances list to our webpage: https://www.halcyon.social/instances
 or read our new documentation pages to install it manually: https://www.halcyon.social/documentation.php?page=install
 
 ## Blog
+- Release of Version 2.4.8 - Add support for bookmarks,add support for announcements,add support for emoji reactions
 - Release of Version 2.4.7 - Repair emoji autocomplete,repair YouPlay,improve Invidious embed,change Vinayaka instance,add Bibliogram and NoFB redirects
 - Release of Version 2.4.6 - Replace some removed Mastodon APIs,fix Toot button not locking on CTRL+Enter,make navbar a bit more responsive
 - Release of Version 2.4.5 - Support for emoji categories,added links to admin panel,rewrite links to Invidious and Nitter at compose,bugfixes
diff --git a/assets/css/dark.css b/assets/css/dark.css
index 1689428..2811cb5 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -587,7 +587,7 @@ border-bottom:0 solid #E6ECF0;
 background-color:#189EFC;
 color:#fff;
 }
-.toot_entry .toot_entry_body .toot_content .toot_article a,#main .article_wrap .left_column .profile_section_wrap > .profile_bio a {
+.toot_entry .toot_entry_body .toot_content .toot_article a,#main .article_wrap .left_column .profile_section_wrap > .profile_bio a,.announcement .announcement_content .announcement_text a {
 color:#189EFC;
 }
 .toot_entry .toot_entry_body .toot_content .toot_reaction button,.toot_detail .toot_footer .toot_reaction button {
@@ -690,3 +690,35 @@ color:#189EFC;
 background-color:#189EFC;
 color:#1B2836;
 }
+.announcement {
+background-color:#243447;
+border:1px solid #000;
+}
+.announcement_icon {
+color:#AAB8C2;
+}
+.announcement_text {
+color:#EEE;
+}
+.emoreact {
+border:1px solid #189EFC;
+}
+.emoreact .emoreact_count {
+color:#189EFC;
+}
+.emoreact.active,
+.emoreact:hover {
+background-color:#189EFC;
+}
+.emoreact.active .emoreact_count,
+.emoreact:hover .emoreact_count {
+color:#FFFFFF;
+}
+.emoreact_add {
+border:1px solid #189EFC;
+color:#189EFC;
+}
+.emoreact_add:hover {
+background-color:#189EFC;
+color:#FFFFFF;
+}
diff --git a/assets/css/emojipicker.css b/assets/css/emojipicker.css
index febbdd7..f9b5775 100644
--- a/assets/css/emojipicker.css
+++ b/assets/css/emojipicker.css
@@ -26,6 +26,7 @@ transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 display: none;
 font-family:"apple color emoji","segoe ui emoji",notocoloremoji,"segoe ui symbol","android emoji",emojisymbols,"emojione mozilla";
+color:initial;
 }
 ul.lsx-emojipicker-tabs {
 margin: 0;
diff --git a/assets/css/style.css b/assets/css/style.css
index 1a2aea2..dfa03eb 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -915,7 +915,9 @@ font-size: 14px;
 line-height: 20px;
 margin-top: 4px;
 }
-.toot_entry .toot_entry_body .toot_content .toot_article a,.halcyon_link {
+.toot_entry .toot_entry_body .toot_content .toot_article a,
+.announcement .announcement_content .announcement_text a,
+.halcyon_link {
 color: #2588D0;
 }
 .toot_entry .toot_entry_body .toot_content .toot_article.content_warning .status_content {
@@ -925,7 +927,7 @@ display: none;
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
-width: 240px;
+width: 320px;
 height: 21px;
 margin-top: 8px;
 }
@@ -956,18 +958,22 @@ font-weight: 600;
 .toot_entry .toot_entry_body .toot_content .toot_reaction .reply_button:hover {
 color: #1DA1F2;
 }
-.toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="null"]:hover,
+.toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="false"]:hover,
 .toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="true"],
-.toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="null"]:hover .reaction_count,
+.toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="false"]:hover .reaction_count,
 .toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="true"] .reaction_count {
 color: #17BF63;
 }
-.toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="null"]:hover,
+.toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="false"]:hover,
 .toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="true"],
-.toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="null"]:hover .reaction_count,
+.toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="false"]:hover .reaction_count,
 .toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="true"] .reaction_count {
 color: #FFAD1A;
 }
+.toot_entry .toot_entry_body .toot_content .toot_reaction .bookmark_button[bookmarked="false"]:hover,
+.toot_entry .toot_entry_body .toot_content .toot_reaction .bookmark_button[bookmarked="true"] {
+color: #FF5050;
+}
 .media_views {
 margin: 8px 0;
 height: 336px;
@@ -1112,6 +1118,15 @@ border: 1px solid #E6ECF0;
 border-radius: 5px;
 padding: 8px 12px;
 }
+.timeline .notice_entry .notice_entry_body .notice_emoji {
+float:left;
+margin-left:-3px;
+margin-right:5px;
+}
+.timeline .notice_entry .notice_entry_body .notice_emoji img {
+height:34px;
+width:unset;
+}
 .timeline .notice_entry .notice_entry_body .toot_header {
 height: 17px;
 }
@@ -1148,6 +1163,9 @@ background: #17BF63;
 .timeline .toot_entry .font-icon.favourite {
 background: #FFAD1A;
 }
+.timeline .toot_entry .font-icon.reaction {
+background: #FBA457;
+}
 .timeline .toot_entry .font-icon.poll {
 background: #FF4040;
 top:0;
@@ -2535,7 +2553,7 @@ font-weight: 300;
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
-width: 230px;
+width: 320px;
 height: 21px;
 margin-top: 12px;
 }
@@ -2578,6 +2596,10 @@ color: #17BF63;
 .toot_detail .toot_footer .toot_reaction .fav_button[favourited="true"] .reaction_count {
 color: #FFAD1A;
 }
+.toot_detail .toot_footer .toot_reaction .bookmark_button[bookmarked="false"]:hover,
+.toot_detail .toot_footer .toot_reaction .bookmark_button[bookmarked="true"] {
+color: #FF5050;
+}
 .toot_detail .status_form {
 border-top: 1px solid #E6ECF0;
 border-bottom: 1px solid #E6ECF0;
@@ -2746,6 +2768,90 @@ border:0 solid #189EFC;
 border-left-width:5px;
 border-right-width:5px;
 }
+.announcement_wrap {
+display:flex;
+flex-wrap:wrap;
+width:1200px;
+margin:auto;
+margin-top:2px;
+}
+.announcement {
+margin-left:5px;
+margin-right:5px;
+margin-top:10px;
+width:100%;
+padding:15px;
+border-radius: 5px;
+background-color:#fff;
+border:1px solid #E6ECF0;
+}
+.announcement_icon {
+float:left;
+color:rgb(101,119,134);
+}
+.announcement_content {
+float:left;
+margin-left:10px;
+width:calc(100% - 58px);
+}
+.announcement_text {
+color:#333;
+font-size:14px;
+padding:5px;
+}
+.announcement_reactions {
+float:left;
+}
+.announcement_date {
+float:right;
+}
+.emoreact {
+margin:3px;
+padding:3px;
+border-radius:3px;
+border:1px solid #189EFC;
+cursor:pointer;
+}
+.emoreact .emoji {
+vertical-align:-4px;
+}
+.emoreact .emoreact_count {
+margin-left:3px;
+vertical-align:-2px;
+color:#189EFC;
+}
+.emoreact.active,
+.emoreact:hover {
+background-color:#189EFC;
+}
+.emoreact.active .emoreact_count,
+.emoreact:hover .emoreact_count {
+color:#FFFFFF;
+}
+.emoreact_add {
+margin:3px;
+border-radius:3px;
+border:1px solid #189EFC;
+cursor:pointer;
+color:#189EFC;
+font-size:18px;
+padding-left:5px;
+padding-right:5px;
+padding-top:4px;
+vertical-align:-3px;
+}
+.emoreact_add:hover {
+background-color:#189EFC;
+color:#FFFFFF;
+}
+.emoreact_add .lsx-emojipicker-appender {
+display:inline-block;
+left:15px;
+}
+.status_reactions {
+margin-left:-3px;
+margin-top:5px;
+}
 @media(max-width:1199px) {
 #main .profile_nav_wrap .profile_nav {
 width:900px;
@@ -2756,7 +2862,8 @@ width:590px;
 #js-follows_profile {
 width:600px;
 }
-#main .article_wrap {
+#main .article_wrap,
+#main .announcement {
 width:900px;
 }
 }
diff --git a/assets/js/emojipicker/emojipicker.js b/assets/js/emojipicker/emojipicker.js
index 72ba50c..e0acddd 100644
--- a/assets/js/emojipicker/emojipicker.js
+++ b/assets/js/emojipicker/emojipicker.js
@@ -6,7 +6,7 @@ var settings = {};
 $.fn.lsxEmojiPicker = function(options) {
 if(options == "destroy") {
 $(this).off("click");
-$(this).children().remove();
+$(this).children(".lsx-emojipicker-appender").remove();
 }
 else {
 settings = $.extend({
@@ -14,7 +14,9 @@ width: 280,
 height: 200,
 twemoji: false,
 closeOnSelect: true,
-onSelect: function(em){}
+customEmojis: true,
+onSelect: function(em){},
+onClose: function(){}
 }, options);
 var appender = $('<div></div>')
 .addClass('lsx-emojipicker-appender');
@@ -29,7 +31,7 @@ var spinner = $('<div></div>')
 spinnerContainer.append(spinner);
 var customemojis = JSON.parse(localStorage.current_custom_emojis);
 var addhide = "";
-if(customemojis.length > 0) {
+if(customemojis.length > 0 && settings.customEmojis) {
 addhide = " hidden";
 var emojiCustomContainer = $('<div></div>')
 .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-custom')
@@ -61,7 +63,7 @@ var emojiFlagsContainer = $('<div></div>')
 .css({'width': settings.width, 'height': settings.height});
 var tabs = $('<ul></ul>')
 .addClass('lsx-emojipicker-tabs');
-if(customemojis.length > 0) {
+if(customemojis.length > 0 && settings.customEmojis) {
 var customEmoji = $('<li></li>')
 .addClass('selected')
 .html("&#x2A;&#x20E3")
@@ -82,7 +84,7 @@ $(this).addClass('selected');
 $('.lsx-emoji-tab').addClass('hidden');
 emojiPeopleContainer.removeClass('hidden');
 });
-if(customemojis.length == 0) {
+if(customemojis.length == 0 || !settings.customEmojis) {
 peopleEmoji.addClass("selected");
 }
 var natureEmoji = $('<li></li>')
@@ -148,7 +150,7 @@ $(this).addClass('selected');
 $('.lsx-emoji-tab').addClass('hidden');
 emojiFlagsContainer.removeClass('hidden');
 });
-if(customemojis.length > 0) {
+if(customemojis.length > 0 && settings.customEmojis) {
 tabs.append(customEmoji);
 }
 tabs.append(peopleEmoji)
@@ -159,7 +161,7 @@ tabs.append(peopleEmoji)
 .append(objectsEmoji)
 .append(symbolsEmoji)
 .append(flagsEmoji);
-if(customemojis.length > 0) {
+if(customemojis.length > 0 && settings.customEmojis) {
 createCustomEmojiTab(emojiCustomContainer,container);
 }
 createEmojiTab('people',emojiPeopleContainer,container);
@@ -172,7 +174,7 @@ createEmojiTab('symbols',emojiSymbolsContainer,container);
 createEmojiTab('flags',emojiFlagsContainer,container);
 //wrapper.append(spinnerContainer);
 wrapper.append(tabs);
-if(customemojis.length > 0) {
+if(customemojis.length > 0 && settings.customEmojis) {
 wrapper.append(emojiCustomContainer);
 }
 wrapper.append(emojiPeopleContainer)
@@ -205,6 +207,7 @@ if(!$(e.target).parent().hasClass('lsx-emojipicker-tabs')
 && !$(e.target).parent().parent().hasClass('lsx-emoji-tab')){
 if(container.is(':visible')){
 container.hide();
+settings.onClose();
 } else {
 container.show();
 }
@@ -228,6 +231,7 @@ settings.onSelect({
 });
 if(settings.closeOnSelect){
 wrapper.hide();
+settings.onClose();
 }
 });
 container.append(emoticon);
@@ -247,17 +251,17 @@ if(Object.keys(sortedemojis).length != 1 || !sortedemojis.hasOwnProperty(__("Gen
 for(var i=0;i < sortedemojis[category].length;i++) {
 var selectedEmoji = sortedemojis[category][i];
 var emoticon = $('<span></span>')
-.data('value',selectedEmoji.url)
 .attr('title',selectedEmoji.code)
 .html($("<img>").addClass("emoji").attr("src",selectedEmoji.url));
 emoticon.click(function(e){
 e.preventDefault();
 settings.onSelect({
 'name':$(this).attr('title'),
-'value':$(this).data('value')
+'value':$(this).attr('title')
 });
 if(settings.closeOnSelect){
 wrapper.hide();
+settings.onClose();
 }
 });
 container.append(emoticon);
diff --git a/assets/js/halcyon/halcyonFunctions.js b/assets/js/halcyon/halcyonFunctions.js
index 985729a..c66e268 100644
--- a/assets/js/halcyon/halcyonFunctions.js
+++ b/assets/js/halcyon/halcyonFunctions.js
@@ -60,7 +60,7 @@ di[re[4]] = re[3];
 return di;
 }
 function replaceInternalLink() {
-$(".toot_article a,.profile_bio a,.follows_profile_bio a").each(function(i) {
+$(".toot_article a,.profile_bio a,.follows_profile_bio a,.announcement_text a").each(function(i) {
 const pltags = $(this).attr('href').match(/https?:\/\/.+..+\/tag\/([a-zA-Z\d_%]+)\/?$/);
 if(pltags) $(this).attr('target','_self').attr('href','/search?q='+pltags[1]);
 const mstags = $(this).attr('href').match(/https?:\/\/.+..+\/tags\/([a-zA-Z\d_%]+)\/?$/);
@@ -745,7 +745,7 @@ case "private":status.halcyon.privacy_mode=__("Followers-only");status.halcyon.p
 case "direct":status.halcyon.privacy_mode=__("Direct");status.halcyon.privacy_icon="envelope";status.halcyon.checked_direct=" checked";break;
 }
 if(status.halcyon.privacy_icon == "globe" || status.halcyon.privacy_icon == "unlock-alt") {
-status.halcyon.footer_width = " style='width:320px'";
+status.halcyon.footer_width = " style='width:400px'";
 status.halcyon.reblog_button = (`<div class="toot_reaction">
 <button class="boost_button" tid="${status.id}" reblogged="${status.reblogged}">
 <i class="fa fa-fw fa-retweet"></i>
@@ -775,6 +775,8 @@ status.halcyon.own_toot_buttons += (`</ul><ul><li><a href="https://${current_ins
 status.halcyon.account_state_icons = "";
 if(status.account.locked == true) status.halcyon.account_state_icons += " <i class='fa fa-lock'></i>";
 if(status.account.bot == true) status.halcyon.account_state_icons += " <img src='/assets/images/robot.svg' class='emoji'>";
+status.halcyon.reactions = "";
+if(status.pleroma && status.pleroma.emoji_reactions) status.halcyon.reactions = (`<div class="status_reactions">${parse_reactions(status.pleroma.emoji_reactions)}</div>`);
 status.content = checkStatusLinks(status.content);
 return status;
 }
@@ -836,3 +838,49 @@ replace_emoji();
 }
 }
 }
+function prepareAnnouncement(announcement) {
+for(i=0;i<announcement.emojis.length;i++) {
+announcement.content = announcement.content.replace(new RegExp(":"+announcement.emojis[i].shortcode+":","g"),"<img src='"+announcement.emojis[i].url+"' class='emoji'>");
+}
+for(var i=0;i<announcement.mentions.length;i++) {
+if(announcement.mentions[i].acct.indexOf("@") == -1) announcement.content = announcement.content.replace(new RegExp('href="'+announcement.mentions[i].url+'"',"g"),'href="/@'+announcement.mentions[i].acct+'@'+current_instance+'?mid='+announcement.mentions[i].id+'" data-mid="'+announcement.mentions[i].id+'"');
+else announcement.content = announcement.content.replace(new RegExp('href="'+announcement.mentions[i].url+'"',"g"),'href="/@'+announcement.mentions[i].acct+'?mid='+announcement.mentions[i].id+'" data-mid="'+announcement.mentions[i].id+'"');
+}
+return announcement;
+}
+function parse_reactions(reaction_data) {
+var reactions = (`<div class="emoreact_wrap">`);
+for(var i=0;i<reaction_data.length;i++) {
+var is_active = "";
+if(reaction_data[i].me) is_active = " active";
+var emoji;
+if(reaction_data[i].url) emoji = (`<span><img class="emoji" src="${reaction_data[i].url}"></span>`);
+else emoji = (`<span class="emoji_poss">${reaction_data[i].name}</span>`);
+reactions += (`<span class="emoreact${is_active}" emoji="${reaction_data[i].name}">${emoji}<span class="emoreact_count">${reaction_data[i].count}</span></span>`);
+}
+reactions += (`<span class="emoreact_add"><i class="fa fa-smile-o"></i></span>`);
+reactions += (`</div>`);
+return reactions;
+}
+function enableReactionPicker(that) {
+$(that).find(".emoreact_add").click(function() {
+$(this).off("click");
+(function(that) {
+$(that).lsxEmojiPicker({
+closeOnSelect:true,
+twemoji:!checkEmojiSupport(),
+onSelect:function(emoji) {
+api.put("announcements/"+$(that).closest(".announcement").attr("aid")+"/reactions/"+emoji.value,function() {});
+},
+onClose:function() {
+$(that).lsxEmojiPicker("destroy");
+setTimeout(function() {enableReactionPicker($(that).closest(".announcement"))},0);
+}
+}).click();
+})(this);
+});
+}
+function addZero(num) {
+if(num < 10) return "0"+num;
+else return num;
+}
diff --git a/assets/js/halcyon/halcyonTemplates.js b/assets/js/halcyon/halcyonTemplates.js
index 39edbb1..bbd4af9 100644
--- a/assets/js/halcyon/halcyonTemplates.js
+++ b/assets/js/halcyon/halcyonTemplates.js
@@ -226,6 +226,7 @@ ${status.content}
 </span>
 ${status.halcyon.preview_object}
 </article>
+${status.halcyon.reactions}
 <footer class="toot_footer"${status.halcyon.footer_width}>
 <div class="toot_reaction">
 <button class="reply_button" tid="${status.id}" mentions='${JSON.stringify(status.mentions)}' display_name="${status.account.display_name}" privacy="${status.visibility}" content_warning="${htmlEscape(status.spoiler_text)}">
@@ -241,6 +242,11 @@ ${status.halcyon.reblog_button}
 </button>
 </div>
 <div class="toot_reaction">
+<button class="bookmark_button" tid="${status.id}" bookmarked="${status.bookmarked}">
+<i class="fa fa-fw fa-bookmark"></i>
+</button>
+</div>
+<div class="toot_reaction">
 <button>
 <i class="fa fa-fw fa-${status.halcyon.privacy_icon}" title="${status.halcyon.privacy_mode}"></i>
 </button>
@@ -340,6 +346,45 @@ ${NotificationObj.status.account.display_name}
 </li>`);
 return $(html);
 }
+else if(NotificationObj.type === 'pleroma:emoji_reaction') {
+NotificationObj.status = prepareStatus(NotificationObj.status);
+const html = (`
+<li sid="${NotificationObj.status.id}" class="notice_entry emoji_reaction toot_entry">
+<div class="notice_author_box">
+<a href="${notice_author_link}">
+<div class="icon_box">
+<img src="${NotificationObj.account.avatar}">
+</div>
+</a>
+<i class="fa fa-fw fa-smile-o font-icon reaction"></i>
+<a class="notice_author" href="${notice_author_link}">
+<span class="emoji_poss">${NotificationObj.account.display_name}</span> ${__('reacted to Your Toot')}
+</a>
+</div>
+<div class="notice_entry_body">
+<span class="notice_emoji emoji_poss">${NotificationObj.emoji}</span>
+<section class="toot_content">
+<header class="toot_header">
+<div class="text_ellipsis">
+<a href="${NotificationObj.status.halcyon.author_link}">
+<span class="displayname emoji_poss">
+${NotificationObj.status.account.display_name}
+</span>
+<span class="username">
+@${NotificationObj.status.account.acct}${NotificationObj.status.halcyon.account_state_icons}
+</span>
+</a>
+</div>
+</header>
+<article class="toot_article emoji_poss">
+<p>${NotificationObj.status.content}</p>
+</article>
+<footer class="toot_footer"></footer>
+</section>
+</div>
+</li>`);
+return $(html);
+}
 else if(NotificationObj.type === 'mention' || NotificationObj.type === 'poll') {
 NotificationObj.status = prepareStatus(NotificationObj.status);
 var poll_notify = "";
@@ -395,6 +440,7 @@ ${NotificationObj.status.content}
 </span>
 ${NotificationObj.status.halcyon.preview_object}
 </article>
+${NotificationObj.status.halcyon.reactions}
 <footer class="toot_footer"${NotificationObj.status.halcyon.footer_width}>
 <div class="toot_reaction">
 <button class="reply_button" tid="${NotificationObj.status.id}" mentions='${JSON.stringify(NotificationObj.status.mentions)}' display_name="${NotificationObj.account.display_name}" privacy="${NotificationObj.status.visibility}" content_warning="${htmlEscape(NotificationObj.status.spoiler_text)}">
@@ -410,6 +456,11 @@ ${NotificationObj.status.halcyon.reblog_button}
 </button>
 </div>
 <div class="toot_reaction">
+<button class="bookmark_button" tid="${NotificationObj.status.id}" bookmarked="${NotificationObj.status.bookmarked}">
+<i class="fa fa-fw fa-bookmark"></i>
+</button>
+</div>
+<div class="toot_reaction">
 <button>
 <i class="fa fa-fw fa-${NotificationObj.status.halcyon.privacy_icon}" title="${NotificationObj.status.halcyon.privacy_mode}"></i>
 </button>
@@ -526,6 +577,7 @@ ${status.content}
 ${status.halcyon.preview_object}
 </article>
 <time datetime="${status.halcyon.attr_datetime}">${status.halcyon.attr_datetime}</time>
+${status.halcyon.reactions}
 </section>
 <footer class="toot_footer"${status.halcyon.footer_width}>
 <div class="toot_reaction">
@@ -542,6 +594,11 @@ ${status.halcyon.reblog_button}
 </button>
 </div>
 <div class="toot_reaction">
+<button class="bookmark_button" tid="${status.id}" bookmarked="${status.bookmarked}">
+<i class="fa fa-fw fa-bookmark"></i>
+</button>
+</div>
+<div class="toot_reaction">
 <button>
 <i class="fa fa-fw fa-${status.halcyon.privacy_icon}" title="${status.halcyon.privacy_mode}"></i>
 </button>
@@ -749,6 +806,7 @@ ${status.halcyon.alert_text}
 ${status.content}
 </span>
 </article>
+${status.halcyon.reactions}
 <footer class="toot_footer"${status.halcyon.footer_width}>
 <div class="toot_reaction">
 <button class="reply_button" tid="${status.id}" mentions='${JSON.stringify(status.mentions)}' display_name="${status.account.display_name}" privacy="${status.visibility}" content_warning="${htmlEscape(status.spoiler_text)}">
@@ -764,6 +822,11 @@ ${status.halcyon.reblog_button}
 </button>
 </div>
 <div class="toot_reaction">
+<button class="bookmark_button" tid="${status.id}" bookmarked="${status.bookmarked}">
+<i class="fa fa-fw fa-bookmark"></i>
+</button>
+</div>
+<div class="toot_reaction">
 <button>
 <i class="fa fa-fw fa-${status.halcyon.privacy_icon}" title="${status.halcyon.privacy_mode}"></i>
 </button>
@@ -776,3 +839,25 @@ html.find(".toot_article").append(status.halcyon.media_views);
 html.find(".toot_article").append(status.halcyon.poll_object);
 return html;
 }
+function announcement_template(announcement) {
+var reactions;
+var datetime = "";
+reactions = parse_reactions(announcement.reactions);
+if(announcement.starts_at && announcement.ends_at) {
+var start = new Date(announcement.starts_at);
+var end = new Date(announcement.ends_at);
+datetime = (`<i class="fa fa-calendar"></i> ${start.getFullYear()}-${addZero(start.getMonth()+1)}-${addZero(start.getDate())}`);
+if(!announcement.all_day) datetime += (` <i class="fa fa-clock-o"></i> ${addZero(start.getHours())}:${addZero(start.getMinutes())}`);
+datetime += (` - <i class="fa fa-calendar"></i> ${end.getFullYear()}-${addZero(end.getMonth()+1)}-${addZero(end.getDate())}`);
+if(!announcement.all_day) datetime += (` <i class="fa fa-clock-o"></i> ${addZero(end.getHours())}:${addZero(end.getMinutes())}`);
+}
+announcement = prepareAnnouncement(announcement);
+const html=(`<div class="announcement" aid="${announcement.id}">
+<div class="announcement_icon"><i class="fa fa-3x fa-exclamation-triangle"></i></div>
+<div class="announcement_content">
+<div class="announcement_text emoji_poss">${announcement.content}</div>
+<div class="announcement_reactions">${reactions}</div>
+<div class="announcement_date">${datetime}</div>
+</div></div>`);
+return html;
+}
diff --git a/assets/js/halcyon/halcyonUI.js b/assets/js/halcyon/halcyonUI.js
index 08549f5..52dd64d 100644
--- a/assets/js/halcyon/halcyonUI.js
+++ b/assets/js/halcyon/halcyonUI.js
@@ -100,44 +100,132 @@ $(this).html('<i class="fa fa-fw fa-user-plus"></i><span>'+__('Follow')+'</span>
 putMessage(__("Unblocked this user"));
 return false;
 });
-$(document).on('click','.boost_button', function(e) {
+$(document).on('click','.boost_button',function(e) {
 e.stopPropagation();
 if($(this).attr('reblogged') !== 'true'){
-api.post("statuses/"+$(this).attr('tid')+"/reblog", function (data) {
+api.post("statuses/"+$(this).attr('tid')+"/reblog",function(data) {
 });
-$(this).attr('reblogged', "true");
-$(this).toggleClass('active');
+$(this).attr('reblogged',"true");
+$(this).addClass('active');
 $(".js_current_toots_count").html(++localStorage.current_statuses_count);
-} else {
-api.post("statuses/"+$(this).attr('tid')+"/unreblog", function (data) {
+}
+else {
+api.post("statuses/"+$(this).attr('tid')+"/unreblog",function(data) {
 });
-$(this).attr('reblogged', "hold");
-$(this).toggleClass('active');
+$(this).attr('reblogged',"null");
+$(this).removeClass('active');
 $(".js_current_toots_count").html(--localStorage.current_statuses_count);
-$(this).mouseout(function(e) {
-$(this).attr('reblogged', "null");
-});
 }
 return false;
 });
-$(document).on('click','.fav_button', function(e) {
+$(document).on('click','.fav_button',function(e) {
 e.stopPropagation();
 if($(this).attr('favourited') !== 'true'){
-api.post("statuses/"+$(this).attr('tid')+"/favourite", function (data) {
+api.post("statuses/"+$(this).attr('tid')+"/favourite",function(data) {
 });
-$(this).attr('favourited', "true");
-$(this).toggleClass('active');
-} else {
-api.post("statuses/"+$(this).attr('tid')+"/unfavourite", function (data) {
-});
-$(this).attr('favourited', "hold");
-$(this).toggleClass('active');
-$(this).mouseout(function(e) {
-$(this).attr('favourited', "null");
+$(this).attr('favourited',"true");
+$(this).addClass('active');
+}
+else {
+api.post("statuses/"+$(this).attr('tid')+"/unfavourite",function(data) {
 });
+$(this).attr('favourited',"null");
+$(this).removeClass('active');
 }
 return false;
 });
+$(document).on('click','.bookmark_button',function(e) {
+e.stopPropagation();
+if($(this).attr('bookmarked') !== 'true') {
+api.post("statuses/"+$(this).attr('tid')+"/bookmark",function(data) {
+});
+$(this).attr('bookmarked',"true");
+$(this).addClass('active');
+}
+else {
+api.post("statuses/"+$(this).attr('tid')+"/unbookmark",function(data) {
+});
+$(this).attr('bookmarked',"null");
+$(this).removeClass('active');
+}
+return false;
+});
+$(document).on('click','.announcement .emoreact',function(e) {
+e.stopPropagation();
+if($(this).hasClass('active')) {
+(function(that) {
+api.delete("announcements/"+$(that).closest('.announcement').attr("aid")+"/reactions/"+$(that).attr("emoji"),function(data) {
+$(that).removeClass('active');
+});
+})(this);
+}
+else {
+(function(that) {
+api.put("announcements/"+$(that).closest('.announcement').attr("aid")+"/reactions/"+$(that).attr("emoji"),function(data) {
+$(that).addClass('active');
+});
+})(this);
+}
+return false;
+});
+$(document).on('click','.status_reactions .emoreact',function(e) {
+e.stopPropagation();
+if($(this).hasClass('active')) {
+(function(that) {
+if($(that).closest('.toot_detail.main_status').length == 1) var sid = $(that).closest('.toot_detail.main_status').attr("sid");
+else var sid = $(that).closest('.toot_entry').attr("sid");
+api.delete("pleroma/statuses/"+sid+"/reactions/"+$(that).attr("emoji"),function(status) {
+$(".toot_entry[sid="+sid+"]").find(".status_reactions").children().remove();
+$(".toot_entry[sid="+sid+"]").find(".status_reactions").append(parse_reactions(status.pleroma.emoji_reactions));
+$(".toot_detail.main_status[sid="+sid+"]").find(".status_reactions").children().remove();
+$(".toot_detail.main_status[sid="+sid+"]").find(".status_reactions").append(parse_reactions(status.pleroma.emoji_reactions));
+replace_emoji();
+});
+})(this);
+}
+else {
+(function(that) {
+if($(that).closest('.toot_detail.main_status').length == 1) var sid = $(that).closest('.toot_detail.main_status').attr("sid");
+else var sid = $(that).closest('.toot_entry').attr("sid");
+api.put("pleroma/statuses/"+sid+"/reactions/"+$(that).attr("emoji"),function(status) {
+$(".toot_entry[sid="+sid+"]").find(".status_reactions").children().remove();
+$(".toot_entry[sid="+sid+"]").find(".status_reactions").append(parse_reactions(status.pleroma.emoji_reactions));
+$(".toot_detail.main_status[sid="+sid+"]").find(".status_reactions").children().remove();
+$(".toot_detail.main_status[sid="+sid+"]").find(".status_reactions").append(parse_reactions(status.pleroma.emoji_reactions));
+replace_emoji();
+});
+})(this);
+}
+return false;
+});
+$(document).on('click','.status_reactions .emoreact_add',function(e) {
+e.stopPropagation();
+});
+$(document).on('click','.status_reactions .emoreact_add:not(.active)',function() {
+$(this).addClass("active");
+(function(that) {
+if($(that).closest('.toot_detail.main_status').length == 1) var sid = $(that).closest('.toot_detail.main_status').attr("sid");
+else var sid = $(that).closest('.toot_entry').attr("sid");
+$(that).lsxEmojiPicker({
+closeOnSelect:true,
+customEmojis:false,
+twemoji:!checkEmojiSupport(),
+onSelect:function(emoji) {
+api.put("pleroma/statuses/"+sid+"/reactions/"+emoji.value,function(status) {
+$(".toot_entry[sid="+sid+"]").find(".status_reactions").children().remove();
+$(".toot_entry[sid="+sid+"]").find(".status_reactions").append(parse_reactions(status.pleroma.emoji_reactions));
+$(".toot_detail.main_status[sid="+sid+"]").find(".status_reactions").children().remove();
+$(".toot_detail.main_status[sid="+sid+"]").find(".status_reactions").append(parse_reactions(status.pleroma.emoji_reactions));
+replace_emoji();
+});
+},
+onClose:function() {
+$(that).lsxEmojiPicker("destroy");
+setTimeout(function() {$(that).removeClass("active")},0);
+}
+}).click();
+})(this);
+});
 $(document).on('click','.delete_button', function(e) {
 const sid = $(this).attr('tid');
 e.stopPropagation();
@@ -1097,8 +1185,28 @@ if ( current_count ) {
 $('#header .header_nav_list .notification_badge').removeClass('invisible');
 $('#header .header_nav_list .notification_badge').text( current_count );
 }
-api.stream("user", function(userstream) {
-if(userstream.event === "update" & location.pathname !== "/") {
+api.stream("user",function(userstream) {
+if(userstream.event == "filters_changed") {
+api.get("filters",function(data) {
+localStorage.setItem("current_filters",JSON.stringify(data));
+current_filters = data;
+});
+}
+else if(userstream.event == "announcement.reaction") {
+if($(".announcement[aid="+userstream.payload.announcement_id+"]").find(".emoreact[emoji="+userstream.payload.name+"]").length == 1) {
+if(userstream.payload.count == 0) $(".announcement[aid="+userstream.payload.announcement_id+"]").find(".emoreact[emoji="+userstream.payload.name+"]").remove();
+else $(".announcement[aid="+userstream.payload.announcement_id+"]").find(".emoreact[emoji="+userstream.payload.name+"]").find(".emoreact_count").text(userstream.payload.count);
+}
+else {
+var emoji;
+if(userstream.payload.url) emoji = (`<span><img class="emoji" src="${userstream.payload.url}"></span>`);
+else emoji = (`<span class="emoji_poss">${userstream.payload.name}</span>`);
+var reaction = (`<span class="emoreact" emoji="${userstream.payload.name}">${emoji}<span class="emoreact_count">${userstream.payload.count}</span></span>`);
+$(".announcement[aid="+userstream.payload.announcement_id+"]").find(".emoreact_add").before(reaction);
+replace_emoji();
+}
+}
+else if(userstream.event === "update" & location.pathname !== "/") {
 $('#header .header_nav_list .home_badge').removeClass('invisible');
 }
 else if(userstream.event === "notification" & location.pathname !== "/notifications") {
@@ -1116,6 +1224,7 @@ userstream.payload.account.display_name = userstream.payload.account.username;
 switch(userstream.payload.type) {
 case "favourite":pushNotification(__("New favourite"),userstream.payload.account.display_name+" "+__("favourited your toot"));break;
 case "reblog":pushNotification(__("New boost"),userstream.payload.account.display_name+" "+__("boosted your toot"));break;
+case "pleroma:emoji_reaction":pushNotification(__("New reaction"),userstream.payload.account.display_name+" "+__("reacted to your toot"));break;
 case "follow":pushNotification(__("New follower"),userstream.payload.account.display_name+" "+__("followed you"));$(".js_current_followers_count").html(++localStorage.current_followers_count);break;
 case "mention":pushNotification(__("New mention"),userstream.payload.account.display_name+" "+__("mentioned you"));break;
 case "poll":pushNotification(__("Poll finished"),__("A poll you participated in has ended"));break;
@@ -2327,3 +2436,16 @@ shortcut.add("esc",function() {
 $("#js-overlay_content_wrap").click();
 });
 });
+$(document).ready(function() {
+api.get("announcements",function(data) {
+if(data.length > 0) {
+$(".article_wrap").before($("<div>").addClass("announcement_wrap"));
+for(var i=0;i<data.length;i++) {
+$(".announcement_wrap").append(announcement_template(data[i]));
+}
+replace_emoji();
+replaceInternalLink();
+$(".announcement").each(function() {enableReactionPicker(this)});
+}
+});
+});
diff --git a/assets/js/mastodon.js/mastodon.js b/assets/js/mastodon.js/mastodon.js
index 97d6db7..c066909 100644
--- a/assets/js/mastodon.js/mastodon.js
+++ b/assets/js/mastodon.js/mastodon.js
@@ -386,19 +386,11 @@ var listener = function(event) {
 console.log("Got Data from Stream " + streamType);
 if(event.data.length != 0) {
 event = JSON.parse(event.data);
-if(event.event == "filters_changed") {
-api.get("filters",function(data) {
-localStorage.setItem("current_filters",JSON.stringify(data));
-current_filters = data;
-});
-}
-else {
 if(!Number.isInteger(JSON.parse(event.payload))) {
 event.payload = JSON.parse(event.payload);
 }
 onData(event);
 }
-}
 };
 es.onmessage = listener;
 es.onclose = function(event) {
diff --git a/bookmarks.php b/bookmarks.php
new file mode 100644
index 0000000..b3aeb71
--- /dev/null
+++ b/bookmarks.php
@@ -0,0 +1,43 @@
+<?php include ('header.php'); ?>
+<main id="main" class="home">
+<div class="article_wrap">
+<aside class="left_column">
+<?php include dirname(__FILE__).('/widgets/side_current_user.php'); ?>
+</aside>
+<article class="center_column">
+<header class="timeline_header">
+<ul class="header_items">
+<li class="item toots view">
+<a href="#">
+<?=_('All')?>
+</a>
+</li>
+</ul>
+</header>
+<div id="js-stream_update">
+<button>
+View <span></span> new Toots
+</button>
+</div>
+<ul id="js-timeline" class="timeline">
+</ul>
+<footer id="js-timeline_footer" class="timeline_footer">
+<i class="fa fa-spin fa-circle-o-notch" aria-hidden="true"></i>
+</footer>
+</article>
+<aside class="right_column">
+<section class="side_widgets_wrap">
+<?php include dirname(__FILE__).('/widgets/side_who_to_follow.php'); ?>
+<?php include dirname(__FILE__).('/widgets/side_trending.php'); ?>
+<?php include dirname(__FILE__).('/widgets/side_firefox_addon.php'); ?>
+</section>
+<?php include dirname(__FILE__).('/widgets/side_footer.php'); ?>
+</aside>
+</div>
+</main>
+<script>
+current_file = location.pathname;
+setTimeline("bookmarks");
+$('title').text('Halcyon / Bookmarks');
+</script>
+<?php include ('footer.php'); ?>
diff --git a/header.php b/header.php
index 44e7027..e4d8301 100644
--- a/header.php
+++ b/header.php
@@ -154,6 +154,9 @@ server_setting_bibliogram = <?=$config["Media"]["bibliogram"] ? "'".$config["Med
 <a href="/direct"><?=_('Direct')?></a>
 </li>
 <li>
+<a href="/bookmarks"><?=_('Bookmarks')?></a>
+</li>
+<li>
 <a href="/settings"><?=_('Settings')?></a>
 </li>
 <li>
diff --git a/lighttpd.conf b/lighttpd.conf
index 154ef5d..54dd37a 100644
--- a/lighttpd.conf
+++ b/lighttpd.conf
@@ -41,6 +41,7 @@ url.rewrite = (
 "^/local/?$" => "/local.php",
 "^/federated/?$" => "/federated.php",
 "^/notifications/?$" => "/notifications.php",
+"^/bookmarks/?$" => "/bookmarks.php",
 "^/whotofollow/?$" => "/who_to_follow.php",
 "^/direct/?$" => "/direct.php",
 "^/instance/?$" => "/instance.php",
diff --git a/nginx.conf b/nginx.conf
index cbebab7..a038032 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -49,6 +49,9 @@ rewrite ^/federated/?$ /federated.php break;
 # Notice
 rewrite ^/notifications/?$ /notifications.php break;
 
+# Bookmarks
+rewrite ^/bookmarks/?$ /bookmarks.php break;
+
 # Who to follow
 rewrite ^/whotofollow/?$ /who_to_follow.php break;
 
diff --git a/version.txt b/version.txt
index e30309f..f041bc6 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-2.4.7
+2.4.8