From c5151f6db0c9dd879143ca05b857bafd344beb68 Mon Sep 17 00:00:00 2001
From: cutls <cutls>
Date: Fri, 17 Aug 2018 02:21:40 +0900
Subject: [PATCH] TheDesk Akane (16.0.8)

---
 README.md                    |   8 +-
 app/css/master.css           |  22 +++-
 app/index.sample.html        |  24 ++--
 app/js/lang/lang.js          |   8 ++
 app/js/lang/setting.lang.js  |   8 +-
 app/js/login/login.js        |  92 ++++++++++++--
 app/js/login/manager.js      |  78 ++++++------
 app/js/post/misskeystatus.js |  48 +++++++
 app/js/tl/card.js            | 237 ++++++++++++++++++++++-------------
 app/js/tl/misskeyparse.js    |  41 ++++--
 app/js/tl/mix.js             |   4 +-
 app/js/tl/notification.js    |  34 ++---
 app/js/tl/parse.js           |  54 ++++----
 app/js/tl/tag.js             |   1 -
 app/js/tl/tl.js              | 121 +++++++++++++++++-
 app/js/ui/layout.js          |  11 +-
 app/js/ui/settings.js        |  13 ++
 app/language/setting.en.json |   5 +-
 app/language/setting.ja.json |   7 +-
 app/package.json             |   2 +-
 app/setting.html             |  12 +-
 app/setting.sample.html      |  10 +-
 22 files changed, 633 insertions(+), 207 deletions(-)

diff --git a/README.md b/README.md
index fdb86f88..52e10b79 100644
--- a/README.md
+++ b/README.md
@@ -69,4 +69,10 @@ macOS
 
 ## See also/詳しく
 
-[TheDesk - マストドン日本語ウィキ](https://ja.mstdn.wiki/TheDesk)
\ No newline at end of file
+[TheDesk - マストドン日本語ウィキ](https://ja.mstdn.wiki/TheDesk)
+
+## How to use Misskey on TheDesk/MisskeyをTheDeskで使う
+
+1. Make `.tkn` on 'app' folder.(/TheDesk/app/.tkn) (If you use build-ver TheDesk, you make it on 'resources' folder./ `.tkn`というファイルを「app」フォルダ内に作成してください。(もしビルド済みのものを利用されている場合、resourcesフォルダになります。)
+
+1. Access https://misskey.xyz/dev and make your app!! (Callback URL: https://thedesk.top/misskey.html / all permitions must be allowed.)
\ No newline at end of file
diff --git a/app/css/master.css b/app/css/master.css
index d75e3152..ee5c24b0 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -175,7 +175,27 @@ blockquote:before, .quote:before {
   content: "From Twitter";
   font-size: 1.8rem;
   line-height: 1em;
-  font-family: Open Sans, cursive;
+  font-family: Open Sans;
+  color: #999;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.pixiv-post {
+  color: black;
+  background-color: #fff;
+  padding: 1em 1em 1em;
+  position: relative;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-left: 5px solid #0096fa;
+}
+.pixiv-post :before {
+  content: "From Pixiv";
+  font-size: 1.8rem;
+  line-height: 1em;
+  font-family: Open Sans;
   color: #999;
   position: absolute;
   right: 0;
diff --git a/app/index.sample.html b/app/index.sample.html
index 72a21fa6..4363bb45 100644
--- a/app/index.sample.html
+++ b/app/index.sample.html
@@ -26,7 +26,7 @@
 <script type="text/javascript" src="./js/common/modal.js"></script>
 <script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
 <script>
-var ver="Akane (16.0.6)";
+var ver="Akane (16.0.8)";
 //betaを入れるとバージョンチェックしない
 //GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 //var ver="beta";
@@ -521,14 +521,20 @@ var lang="{{lang}}";
 		<h3>TheDesk</h3>
 		<a href="https://thedesk.top" target="_blank">HP</a><br>
 		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br><br>
-			<div id="release-Akane_16-0-6" style="display:none">
-				<h5>Release Note Akane (16.0.6)</h5>
-					<b>Mio->AkaneアップデートでTLが表示できなくなったユーザー様へ</b><br>
-					16.0.1で設定のインポート/エクスポートを実装いたしました。<br>
-					設定より一度エクスポートしていただき、もう一度インポートすることにより正常に動作すると思われます。<br>
-					<u>開発環境でこのバグが再現できなかったため、あくまでも憶測による対処です。</u><br>
-					<br>
-					ご迷惑をおかけいたしましたことを深くお詫び申し上げます。<br>
+			<div id="release-Akane_16-0-8" style="display:none">
+				<h5>Release Note Akane (16.0.8)</h5>
+					16.0.7<br>
+					<ul>
+						<li>ログインできない問題を修正。</li>
+						<li>ストリーミングが切れることがある不具合を修正。</li>
+						<li>通知カラムが存在するときにベルアイコンが赤くならないようにする設定を追加。</li>
+					</ul>
+					16.0.7<br>
+					<ul>
+						<li>Pixiv埋め込み</li>
+						<li>Misskey(URL Analyzer/Realtime Reaction)</li>
+						<li>その他修正</li>
+					</ul>
 					16.0.6/16.0.5<br>
 					<ul>
 						<li>開けっ放し設定時にズレるバグ</li>
diff --git a/app/js/lang/lang.js b/app/js/lang/lang.js
index 97bc42f2..1e739cb1 100644
--- a/app/js/lang/lang.js
+++ b/app/js/lang/lang.js
@@ -300,6 +300,10 @@ var lang_tl_media={
     "ja":"メディア",
     "en":"Media"
 }
+var lang_tl_reconnect={
+    "ja":"Streamingに再接続しました",
+    "en":"Reconnect to streaming API"
+}
 //ui/layout.js
 var lang_layout_gotop={
     "ja":"一番上へ。アイコンが赤のときはストリーミングに接続できていません。F5等で再読込をお試し下さい。",
@@ -333,6 +337,10 @@ var lang_layout_tts={
     "ja":"読み上げ",
     "en":"Text to speech "
 }
+var lang_layout_reconnect={
+    "ja":"ストリーミング再接続",
+    "en":"Reconnect to streaming API"
+}
 var lang_layout_headercolor={
     "ja":"TLヘッダーカラー",
     "en":"Header color of this column"
diff --git a/app/js/lang/setting.lang.js b/app/js/lang/setting.lang.js
index 6cbff841..c48c8733 100644
--- a/app/js/lang/setting.lang.js
+++ b/app/js/lang/setting.lang.js
@@ -99,8 +99,12 @@ var lang_setting_via={
     "en":"Via:{{set}}"
 }
 var lang_setting_mov={
-    "ja":"マウスオーバー・ヒディングを{{set}}に設定しました。",
-    "en":"Mouseover:{{set}}"
+    "ja":"アクションボタン非表示を{{set}}に設定しました。",
+    "en":"Action buttons hiding:{{set}}"
+}
+var lang_setting_setasread={
+    "ja":"通知カラム存在時新着非表示を{{set}}に設定しました。",
+    "en":"Notification markers:{{set}}"
 }
 var lang_setting_main={
     "ja":"起動時・投稿時のアカウントを{{set}}に設定しました。",
diff --git a/app/js/login/login.js b/app/js/login/login.js
index 743c824c..3a1fb934 100644
--- a/app/js/login/login.js
+++ b/app/js/login/login.js
@@ -259,8 +259,65 @@ function getdataAdv(domain, at) {
 		location.href="index.html";
 	});
 }
+//ユーザーデータ更新
+function refresh(target) {
+	var multi = localStorage.getItem("multi");
+	var obj = JSON.parse(multi);
+	if(obj[target].domain=="misskey.xyz"){
+		return
+	}
+	var start = "https://" + obj[target].domain +
+		"/api/v1/accounts/verify_credentials";
+		console.log(start);
+	fetch(start, {
+		method: 'GET',
+		headers: {
+			'content-type': 'application/json',
+			'Authorization': 'Bearer ' + obj[target].at
+		},
+	}).then(function(response) {
+		return response.json();
+	}).catch(function(error) {
+		todo(error);
+		console.error(error);
+	}).then(function(json) {
+		console.log(json);
+		if (json.error) {
+			console.error("Error:" + json.error);
+			Materialize.toast(lang_fatalerroroccured[lang]+"Error:" + json.error,
+				5000);
+			return;
+		}
+		var avatar=json["avatar"];
+		//missingがmissingなやつ
+		if(avatar=="/avatars/original/missing.png" || !avatar){
+			avatar="./img/missing.svg";
+		}
+		var ref = {
+			at: obj[target].at,
+			name: json["display_name"],
+			domain: obj[target].domain,
+			user: json["acct"],
+			prof: avatar,
+			id: json["id"],
+			vis: json["source"]["privacy"]
+		};
+		localStorage.setItem("name_" + target, json["display_name"]);
+		localStorage.setItem("user_" + target, json["acct"]);
+		localStorage.setItem("user-id_" + target, json["id"]);
+		console.log("user-id_" + target+":"+json["id"])
+		console.log(localStorage.getItem("user-id_"+target));
+		localStorage.setItem("prof_" + target, avatar);
+		localStorage.setItem("follow_" + target, json["following_count"]);
+		obj[target] = ref;
+		var json = JSON.stringify(obj);
+		localStorage.setItem("multi", json);
 
+		load();
+	});
+}
 //MarkdownやBBCodeの対応、文字数制限をチェック
+//絶対ストリーミングを閉じさせないマン
 function ckdb(acct_id) {
 	var domain = localStorage.getItem("domain_" + acct_id);
 	if(domain=="kirishima.cloud"){
@@ -323,20 +380,31 @@ function ckdb(acct_id) {
 				localStorage.setItem("follow_" + acct_id, json[domain + "_follow"]);
 			}
 	}
-	
-}
-//サポートインスタンス取得
-function support() {
-	var json=JSON.parse(localStorage.getItem("instance"));
-		console.log(json);
-		Object.keys(json).forEach(function(key) {
-			var instance = json[key];
-			if (instance == "instance") {
-				templete = '<button class="btn waves-effect" onclick="login(\'' + key +
-					'\')">' + json[key + "_name"] + '(' + key + ')</button>';
-				$("#support").append(templete);
+	if(domain!="misskey.xyz"){
+		var start = "https://" + domain + "/api/v1/instance/activity";
+		fetch(start, {
+			method: 'GET',
+			headers: {
+				'content-type': 'application/json'
+			},
+		}).then(function(response) {
+			return response.json();
+		}).catch(function(error) {
+			console.error(error);
+		}).then(function(json) {
+			console.log(json);
+			if (json.error) {
+				return;
+			}
+			if(json){
+				localStorage.setItem("users_" + acct_id, json["logins"]);
+				localStorage.setItem("statuses_" + acct_id, json["statuses"]);
 			}
 		});
+		
+	}
+	
+
 }
 
 //アカウントを選択…を実装
diff --git a/app/js/login/manager.js b/app/js/login/manager.js
index 80804f0e..d2d06f5c 100644
--- a/app/js/login/manager.js
+++ b/app/js/login/manager.js
@@ -12,19 +12,17 @@ function load() {
 	$(".now-domain").text(domain);
 	var multi = localStorage.getItem("multi");
 	if (!multi) {
-		var obj = [{
-			at: localStorage.getItem("acct_0_at"),
-			name: localStorage.getItem("name_0"),
-			domain: localStorage.getItem("domain_0"),
-			user: localStorage.getItem("user_0"),
-			prof: localStorage.getItem("prof_0"),
-			id: localStorage.getItem("user-id_0")
-		}];
-		var json = JSON.stringify(obj);
-		localStorage.setItem("multi", json);
+		var obj = [];
 	} else {
 		var obj = JSON.parse(multi);
 	}
+	if(obj[0]){
+		if(!obj[0].at){
+			obj=[];
+			localStorage.removeItem("multi");
+		}
+	}
+	
 	console.log(obj);
 	var templete;
 	Object.keys(obj).forEach(function(key) {
@@ -251,7 +249,7 @@ function login(url) {
 		return;
 	}
 	if($('#linux:checked').val()=="on"){
-		var red = "urn:ietf:wg:oauth:2.0:oob"
+		var red = "https://thedesk.top/hello.html"
 	}else{
 		var red = 'thedesk://manager';
 	}
@@ -274,7 +272,7 @@ function login(url) {
 			console.log(json);
 			var auth = "https://" + url + "/oauth/authorize?client_id=" + json[
 					"client_id"] + "&client_secret=" + json["client_secret"] +
-				"&response_type=code&scope=read+write+follow&redirect_uri=" + red;
+				"&response_type=code&scope=read+write+follow&redirect_uri=" + encodeURIComponent(red);
 			localStorage.setItem("domain_tmp", url);
 			localStorage.setItem("client_id", json["client_id"]);
 			localStorage.setItem("client_secret", json["client_secret"]);
@@ -385,34 +383,42 @@ function code(code) {
 			}
 		}	
 		return;
-	}
-	var start = "https://" + url + "/oauth/token";
-	var id = localStorage.getItem("client_id");
-	var secret = localStorage.getItem("client_secret");
-	var httpreq = new XMLHttpRequest();
-	httpreq.open('POST', start, true);
-	httpreq.setRequestHeader('Content-Type', 'application/json');
-	httpreq.responseType = 'json';
-	httpreq.send(JSON.stringify({
-		grant_type: "authorization_code",
-		redirect_uri: "urn:ietf:wg:oauth:2.0:oob",
-		client_id: id,
-		client_secret: secret,
-		code: code
-	}));
-    httpreq.onreadystatechange = function() {
-		if (httpreq.readyState == 4) {
-			var json = httpreq.response;
-			console.log(json);
-			if (json["access_token"]) {
-				$("#auth").hide();
-				$("#add").show();
-				getdata(url, json["access_token"]);
+	}else{
+		var start = "https://" + url + "/oauth/token";
+		var id = localStorage.getItem("client_id");
+		var secret = localStorage.getItem("client_secret");
+		var httpreq = new XMLHttpRequest();
+		httpreq.open('POST', start, true);
+		httpreq.setRequestHeader('Content-Type', 'application/json');
+		httpreq.responseType = 'json';
+		httpreq.send(JSON.stringify({
+			grant_type: "authorization_code",
+			redirect_uri: "https://thedesk.top/hello.html",
+			client_id: id,
+			client_secret: secret,
+			code: code
+		}));
+		console.log({
+			grant_type: "authorization_code",
+			redirect_uri: "urn:ietf:wg:oauth:2.0:oob",
+			client_id: id,
+			client_secret: secret,
+			code: code
+		})
+		httpreq.onreadystatechange = function() {
+			if (httpreq.readyState == 4) {
+				var json = httpreq.response;
+				console.log(json);
+				if (json["access_token"]) {
+					$("#auth").hide();
+					$("#add").show();
+					getdata(url, json["access_token"]);
+				}
 			}
 		}
 	}
+	
 }
-
 //ユーザーデータ取得
 function getdata(domain, at) {
 	var start = "https://" + domain + "/api/v1/accounts/verify_credentials";
diff --git a/app/js/post/misskeystatus.js b/app/js/post/misskeystatus.js
index 351efe87..b6364fbd 100644
--- a/app/js/post/misskeystatus.js
+++ b/app/js/post/misskeystatus.js
@@ -95,6 +95,54 @@ function reactiontoggle(id,acct_id,tlid){
 		}
 	}
 }
+function reactRefresh(acct_id,id){
+    var domain = localStorage.getItem("domain_" + acct_id);
+    var at = localStorage.getItem("acct_"+ acct_id + "_at");
+    var start = "https://" + domain + "/api/notes/show";
+   
+    var req={};
+    req.i=at;
+    req.noteId=id;
+    var i={
+        method: "POST",
+        body: JSON.stringify(req),
+    }
+    console.log(req)
+    fetch(start, i,
+    ).then(function(response) {
+        return response.json();
+    }).catch(function(error) {
+        todo(error);
+        console.error(error);
+    }).then(function(json) {
+        if(!json){
+            return false;
+        }
+        var poll="";
+        console.log(json);
+        reactRefreshCore(json)
+    });
+}
+function reactRefreshCore(json){
+    var id=json.id;
+    if(json.reactionCounts){
+        var reactions=["like","love","laugh","hmm","surprise","congrats","angry","confused","pudding"];
+        $("#pub_" + id +" .reactions").removeClass("hide")
+        for(var i=0;i<reactions.length;i++){
+            if(json.reactionCounts[reactions[i]]){
+                console.log(json.reactionCounts[reactions[i]])
+                $("#pub_" + id +" .re-"+reactions[i]+"ct").text(json.reactionCounts[reactions[i]])
+                $("#pub_" + id +" .re-"+reactions[i]).removeClass("hide")
+            }else{
+                $("#pub_" + id +" .re-"+reactions[i]+"ct").text(0)
+                if($("#pub_" + id +" .reactions").hasClass("fullreact")){
+                    $("#pub_" + id +" .re-"+reactions[i]).addClass("hide")
+                }
+                $("#pub_" + id +" .re-"+reactions[i]+"ct").text(json.reactionCounts[reactions[i]])
+            }
+        }
+    }
+}
 function reaction(mode,id,acct_id,tlid){
     var domain = localStorage.getItem("domain_" + acct_id);
     var at = localStorage.getItem("acct_"+ acct_id + "_at");
diff --git a/app/js/tl/card.js b/app/js/tl/card.js
index fb570cf5..219d48c1 100644
--- a/app/js/tl/card.js
+++ b/app/js/tl/card.js
@@ -1,9 +1,6 @@
 //カード処理やメンション、ハッシュタグの別途表示
 //全てのTL処理で呼び出し
 function additional(acct_id, tlid) {
-	if(localStorage.getItem("domain_" + acct_id)=="misskey.xyz"){
-		return false;
-	}
 	//メンション系
 	//$(".mention").attr("href", "");
 	
@@ -31,9 +28,14 @@ function additional(acct_id, tlid) {
 		var at = localStorage.getItem("acct_"+ acct_id + "_at");
 		var card = localStorage.getItem("card_" + tlid);
 		var text = $(this).attr('href');
-		var urls = text.match(
-			/https?:\/\/([-a-zA-Z0-9@.]+)\/media\/([-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/
-		);
+		if(text){
+			var urls = text.match(
+				/https?:\/\/([-a-zA-Z0-9@.]+)\/media\/([-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/
+			);
+		}else{
+			var urls =[]
+		}
+		
 		//トゥートのURLぽかったら
 		toot = text.match(/https:\/\/([a-zA-Z0-9.-]+)\/@([a-zA-Z0-9_]+)\/([0-9]+)/);
 		if(toot){
@@ -44,46 +46,70 @@ function additional(acct_id, tlid) {
 		if (urls) {
 			$(this).remove();
 		} else if (!card) {
-
 			var id = $(this).parents('.cvo').attr("toot-id");
-			var start = "https://" + domain + "/api/v1/statuses/" + id + "/card";
-			fetch(start, {
-				method: 'GET',
-				headers: {
-					'content-type': 'application/json',
-					'Authorization': 'Bearer ' + at
-				},
-				//body: JSON.stringify({})
-			}).then(function(response) {
-				return response.json();
-			}).catch(function(error) {
-				todo(error);
-				console.error(error);
-			}).then(function(json) {
-				console.log(json);
-				//このリンク鳥やんけ、ってとき
-				if (json.provider_name=="Twitter"){
-					if(json.image){
-						var twiImg='<br><img src="'+json.image+'">';
-					}else{
-						var twiImg='';
+			if(localStorage.getItem("domain_" + acct_id)=="misskey.xyz"){
+				var start = "https://" + domain + "/url?url="+text;
+				fetch(start, {
+					method: 'GET',
+					headers: {
+						'content-type': 'application/json'
+					},
+					//body: JSON.stringify({})
+				}).then(function(response) {
+					return response.json();
+				}).catch(function(error) {
+					todo(error);
+					console.error(error);
+				}).then(function(json) {
+					if (json.title) {
+						$("[toot-id=" + id + "] .additional").html(
+							"<span class=\"gray\">URL"+lang_cards_check[lang]+":<br>Title:" + json.title + "<br>" +
+							json.description + "</span>");
+						$("[toot-id=" + id + "] a:not(.parsed)").addClass("parsed");
+						$("[toot-id=" + id + "]").addClass("parsed");
 					}
-					$("[toot-id=" + id + "] .additional").html(
-						'<blockquote class="twitter-tweet"><b>'+json.author_name+'</b><br>'+json.description+twiImg+'</blockquote>');
-				}
-				if (json.title) {
-					$("[toot-id=" + id + "] .additional").html(
-						"<span class=\"gray\">URL"+lang_cards_check[lang]+":<br>Title:" + json.title + "<br>" +
-						json.description + "</span>");
-				}
-				if (json.html) {
-					$("[toot-id=" + id + "] .additional").html(json.html+'<i class="material-icons" onclick="pip('+id+')" title="'+lang_cards_pip[lang]+'">picture_in_picture_alt</i>');
-				}
-				if (json.title) {
-					$("[toot-id=" + id + "] a:not(.parsed)").addClass("parsed");
-					$("[toot-id=" + id + "]").addClass("parsed");
-				}
-			});
+				});
+			}else{
+				var start = "https://" + domain + "/api/v1/statuses/" + id + "/card";
+				fetch(start, {
+					method: 'GET',
+					headers: {
+						'content-type': 'application/json',
+						'Authorization': 'Bearer ' + at
+					},
+					//body: JSON.stringify({})
+				}).then(function(response) {
+					return response.json();
+				}).catch(function(error) {
+					todo(error);
+					console.error(error);
+				}).then(function(json) {
+					console.log(json);
+					//このリンク鳥やんけ、ってとき
+					if (json.provider_name=="Twitter"){
+						if(json.image){
+							var twiImg='<br><img src="'+json.image+'">';
+						}else{
+							var twiImg='';
+						}
+						$("[toot-id=" + id + "] .additional").html(
+							'<blockquote class="twitter-tweet"><b>'+json.author_name+'</b><br>'+json.description+twiImg+'</blockquote>');
+					}
+					if (json.title) {
+						$("[toot-id=" + id + "] .additional").html(
+							"<span class=\"gray\">URL"+lang_cards_check[lang]+":<br>Title:" + json.title + "<br>" +
+							json.description + "</span>");
+					}
+					if (json.html) {
+						$("[toot-id=" + id + "] .additional").html(json.html+'<i class="material-icons" onclick="pip('+id+')" title="'+lang_cards_pip[lang]+'">picture_in_picture_alt</i>');
+					}
+					if (json.title) {
+						$("[toot-id=" + id + "] a:not(.parsed)").addClass("parsed");
+						$("[toot-id=" + id + "]").addClass("parsed");
+					}
+				});
+			}
+		
 		}else{
 			$(this).attr("title",text);
 		}
@@ -145,49 +171,81 @@ function additionalIndv(tlid, acct_id, id) {
 		if (urls) {
 			$("[toot-id="+id+"] .toot a").remove();
 		} else {
-
-			var id = $("[toot-id="+id+"] .toot a").parents('.cvo').attr("toot-id");
-			var start = "https://" + domain + "/api/v1/statuses/" + id + "/card";
-			fetch(start, {
-				method: 'GET',
-				headers: {
-					'content-type': 'application/json',
-					'Authorization': 'Bearer ' + at
-				},
-				//body: JSON.stringify({})
-			}).then(function(response) {
-				return response.json();
-			}).catch(function(error) {
-				todo(error);
-				console.error(error);
-			}).then(function(json) {
-				console.log(json);
-				//このリンク鳥やんけ、ってとき
-				console.log(json.provider_name);
-				if (json.provider_name=="Twitter"){
-					if(json.image){
-						var twiImg='<br><img src="'+json.image+'" style="max-width:100%">';
-					}else{
-						var twiImg='';
-					}
-					$("[toot-id=" + id + "] .additional").html(
-						'<div class="twitter-tweet"><b>'+json.author_name+'</b><br>'+json.description+twiImg+'</div>');
-				}else{
+			if(localStorage.getItem("domain_" + acct_id)=="misskey.xyz"){
+				var start = "https://" + domain + "/url?url="+text;
+				fetch(start, {
+					method: 'GET',
+					headers: {
+						'content-type': 'application/json'
+					},
+					//body: JSON.stringify({})
+				}).then(function(response) {
+					return response.json();
+				}).catch(function(error) {
+					todo(error);
+					console.error(error);
+				}).then(function(json) {
 					if (json.title) {
 						$("[toot-id=" + id + "] .additional").html(
 							"<span class=\"gray\">URL"+lang_cards_check[lang]+":<br>Title:" + json.title + "<br>" +
 							json.description + "</span>");
+						$("[toot-id=" + id + "] a:not(.parsed)").addClass("parsed");
+						$("[toot-id=" + id + "]").addClass("parsed");
 					}
-					if (json.html) {
-						$("[toot-id=" + id + "] .additional").html(json.html+'<i class="material-icons sml pointer" onclick="pip(\''+id+'\')" title="'+lang_cards_pip[lang]+'">picture_in_picture_alt</i>');
-	
+				});
+			}else{
+				var id = $("[toot-id="+id+"] .toot a").parents('.cvo').attr("toot-id");
+				var start = "https://" + domain + "/api/v1/statuses/" + id + "/card";
+				fetch(start, {
+					method: 'GET',
+					headers: {
+						'content-type': 'application/json',
+						'Authorization': 'Bearer ' + at
+					},
+					//body: JSON.stringify({})
+				}).then(function(response) {
+					return response.json();
+				}).catch(function(error) {
+					todo(error);
+					console.error(error);
+				}).then(function(json) {
+					console.log(json);
+					//このリンク鳥やんけ、ってとき
+					console.log(json.provider_name);
+					if (json.provider_name=="Twitter"){
+						if(json.image){
+							var twiImg='<br><img src="'+json.image+'" style="max-width:100%" onclick="imgv(\'twi_'+id+'\', 0, \'twitter\');" id="twi_'+id+'-image-0" data-url="'+json.image+'" data-type="image">';
+						}else{
+							var twiImg='';
+						}
+						$("[toot-id=" + id + "] .additional").html(
+							'<div class="twitter-tweet"><b>'+json.author_name+'</b><br>'+json.description+twiImg+'</div>');
+					}else if (json.provider_name=="pixiv"){	
+						if(json.image){
+							var pxvImg='<br><img src="'+json.image+'" style="max-width:100%" onclick="imgv(\'pixiv_'+id+'\', 0, \'pixiv\');" id="pixiv_'+id+'-image-0" data-url="'+json.embed_url+'" data-type="image">';
+						}else{
+							var pxvImg='';
+						}
+						$("[toot-id=" + id + "] .additional").html(
+							'<div class="pixiv-post"><b><a href="'+json.author_url+'" target="_blank">'+json.author_name+'</a></b><br>'+json.title+pxvImg+'</div>');
+					}else{
+						if (json.title) {
+							$("[toot-id=" + id + "] .additional").html(
+								"<span class=\"gray\">URL"+lang_cards_check[lang]+":<br>Title:" + json.title + "<br>" +
+								json.description + "</span>");
+						}
+						if (json.html) {
+							$("[toot-id=" + id + "] .additional").html(json.html+'<i class="material-icons sml pointer" onclick="pip(\''+id+'\')" title="'+lang_cards_pip[lang]+'">picture_in_picture_alt</i>');
+		
+						}
 					}
-				}
-				if (json.title) {
-					$("[toot-id=" + id + "] a:not(.parsed)").addClass("parsed");
-					$("[toot-id=" + id + "]").addClass("parsed");
-				}
-			});
+					if (json.title) {
+						$("[toot-id=" + id + "] a:not(.parsed)").addClass("parsed");
+						$("[toot-id=" + id + "]").addClass("parsed");
+					}
+				});
+			}
+			
 		}
 }
 
@@ -216,7 +274,7 @@ function cardCheck(tlid) {
 	}
 }
 
-function mov(id,tlid){
+function mov(id,tlid,type){
 	if(tlid=="notf"){
 		var tlide="[data-notf="+acct_id+"]";
 	}else{
@@ -225,17 +283,24 @@ function mov(id,tlid){
 	var mouseover=localStorage.getItem("mouseover");
 	if(!mouseover){
 		mouseover="";
-	}else if(mouseover=="yes"){
+	}
+	if(mouseover=="yes"){
 		mouseover="hide";
+	}else if(mouseover=="click"){
+		if(type=="mv"){
+			mouseover="";
+		}else{
+			mouseover="hide";
+		}
 	}else if(mouseover=="no"){
 		mouseover="";
 	}
 	if(mouseover=="hide"){
-		$(tlide+" [toot-id="+id+"] .area-actions").removeClass("hide")
+		$(tlide+" [toot-id="+id+"] .area-actions").toggleClass("hide")
 	}
 }
 
-function resetmv(){
+function resetmv(type){
 	var mouseover=localStorage.getItem("mouseover");
 	if(!mouseover){
 		mouseover="";
@@ -243,6 +308,8 @@ function resetmv(){
 		mouseover="hide";
 	}else if(mouseover=="no"){
 		mouseover="";
+	}else if(mouseover=="click" && type!="mv"){
+		mouseover="hide";
 	}
 	if(mouseover=="hide"){
 		$(".area-actions").addClass("hide");
diff --git a/app/js/tl/misskeyparse.js b/app/js/tl/misskeyparse.js
index 10c7a786..fa5bfd0f 100644
--- a/app/js/tl/misskeyparse.js
+++ b/app/js/tl/misskeyparse.js
@@ -1,6 +1,7 @@
 //オブジェクトパーサー(トゥート)
 function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 	var templete = '';
+	localStorage.setItem("lastunix_"+ tlid,date(obj[0].createdAt, 'unix'));
 	var actb = localStorage.getItem("action_btns");
 	var actb='re,rt,fav,qt,del,pin,red';
 	if(actb){
@@ -115,7 +116,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 	var mouseover=localStorage.getItem("mouseover");
 	if(!mouseover){
 		mouseover="";
-	}else if(mouseover=="yes"){
+	}else if(mouseover=="yes" || mouseover=="click"){
 		mouseover="hide";
 	}else if(mouseover=="no"){
 		mouseover="";
@@ -167,6 +168,8 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
                         $("#pub_" + id +" .re-"+reactions[i]+"ct").text(toot.note.reactionCounts[reactions[i]])
                     }
                 }
+			}else{
+				var icon = '<i class="big-text material-icons indigo-text" style="font-size:17px">info</i>';
 			}
 			var noticetext = '<span class="cbadge cbadge-hover"title="' + date(toot.createdAt,
 				'absolute') + '('+lang_parse_notftime[lang]+')"><i class="fa fa-clock-o"></i>' + date(toot.createdAt,
@@ -178,6 +181,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			var notice = noticetext;
 			var memory = localStorage.getItem("notice-mem");
 			if (popup >= 0 && obj.length < 5 && noticetext != memory) {
+				if(localStorage.getItem("hasNotfC_" + acct_id)!="true"){
 				if (toot.type == "reply") {
 					var replyct=localStorage.getItem("notf-reply_" + acct_id)
 					$(".notf-reply_" + acct_id).text(replyct*1-(-1));
@@ -194,6 +198,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					localStorage.setItem("notf-fav_" + acct_id,favct*1-(-1))
 					$(".notf-fav_" + acct_id).removeClass("hide")
 				}
+				}
 				var domain = localStorage.getItem("domain_" + acct_id);
 				if(popup>0){
 					Materialize.toast("["+domain+"]"+escapeHTML(toot.user.name)+what, popup * 1000);
@@ -212,7 +217,9 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 						ipc.send('native-notf', ['TheDesk:'+domain,toot.user.name+"(" + toot.user.acct +")"+what+"\n\n"+$.strip_tags(toot.note.text),toot.user.avatarUrl]);
 					}
 				}
-				$(".notf-icon_" + acct_id).addClass("red-text");
+				if(localStorage.getItem("hasNotfC_" + acct_id)!="true"){
+					$(".notf-icon_" + acct_id).addClass("red-text");
+				}
 				localStorage.setItem("notice-mem", noticetext);
 				noticetext = "";
 			}
@@ -323,6 +330,15 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			}
 		}
 		var analyze = '';
+		var urls = $.strip_tags(content).replace(/\n/g, " ").match(
+			/https?:\/\/([-a-zA-Z0-9@.]+)\/?(?!.*((media|tags)|mentions)).*([-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)?/
+		);
+		if (urls) {
+			var analyze = '<a onclick="additionalIndv(\'' + tlid + '\',' + acct_id +
+				',\'' + id + '\')" class="add-show pointer">'+lang_parse_url[lang]+'</a><br>';
+		} else {
+			var analyze = '';
+		}
 		var viewer = "";
 		var hasmedia = "";
 		var youtube = "";
@@ -363,7 +379,12 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		if(notice){
 			notice=twemoji.parse(notice);
 		}
-		var mediack = toot.media[0];
+		if(toot.media){
+			var mediack = toot.media[0];
+		}else{
+			var mediack=false;
+		}
+		
 		//メディアがあれば
 		var media_ids="";
 		if (mediack) {
@@ -412,9 +433,9 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		if (tagck) {
 			Object.keys(toot.tags).forEach(function(key4) {
 				var tag = toot.tags[key4];
-				var tags =  '<a onclick="tagShow(\'' + tag + '\')" class="pointer">#' + tag + '</a><span class="hide" data-tag="' + tag + '">#' + tag + ':<a onclick="tl(\'tag\',\'' + tag + '\',' + acct_id +
-					',\'add\')" class="pointer" title="' +lang_parse_tagTL[lang].replace("{{tag}}" ,'#'+tag)+ '">TL</a>　<a onclick="brInsert(\'#' + tag + '\')" class="pointer" title="' + lang_parse_tagtoot[lang].replace("{{tag}}" ,'#'+tag) + '">Toot</a>　'+
-                    '<a onclick="tagPin(\'' + tag + '\')" class="pointer" title="' +lang_parse_tagpin[lang].replace("{{tag}}" ,'#'+tag)+ '">Pin</a></span> ';
+				var tags =  '<a onclick="tagShow(\'' + tag + '\')" class="pointer parsed">#' + tag + '</a><span class="hide" data-tag="' + tag + '">#' + tag + ':<a onclick="tl(\'tag\',\'' + tag + '\',' + acct_id +
+					',\'add\')" class="pointer parsed" title="' +lang_parse_tagTL[lang].replace("{{tag}}" ,'#'+tag)+ '">TL</a>　<a onclick="brInsert(\'#' + tag + '\')" class="pointer parsed" title="' + lang_parse_tagtoot[lang].replace("{{tag}}" ,'#'+tag) + '">Toot</a>　'+
+                    '<a onclick="tagPin(\'' + tag + '\')" class="pointer parsed" title="' +lang_parse_tagpin[lang].replace("{{tag}}" ,'#'+tag)+ '">Pin</a></span> ';
                 content=content.replace("#"+tag,tags);
 			});
 			//tags = '<div style="float:right">' + tags + '</div>';
@@ -596,7 +617,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		var trans="";
 		templete = templete + '<div id="pub_' + toot.id + '" class="cvo ' +
 			boostback + ' ' + fav_app + ' ' + rt_app + '  ' + hasmedia + '" toot-id="' + id + '" unique-id="' + uniqueid + '" data-medias="'+media_ids+' " unixtime="' + date(obj[
-				key].created_at, 'unix') + '" '+if_notf+' onmouseover="mov(\'' + toot.id + '\',\''+tlid+'\')" onmouseout="resetmv()" reacted="'+reacted+'">' +
+				key].created_at, 'unix') + '" '+if_notf+' onmouseover="mov(\'' + toot.id + '\',\''+tlid+'\',\'mv\')" onclick="mov(\'' + toot.id + '\',\''+tlid+'\',\'cl\')" onmouseout="resetmv(\'mv\')" reacted="'+reacted+'">' +
 			'<div class="area-notice"><span class="gray sharesta">' + notice + home +
 			'</span></div>' +
 			'<div class="area-icon"><a onclick="udg(\'' + toot.user.id +
@@ -618,8 +639,8 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			api_spoil + ' cw_text_' + toot.id + '">' + spoil + spoiler_show +
 			'</span>' +
 			'' + viewer + '' +
-            '</div><div class="area-additional"><span class="additional">'+
-            '<div class="reactions '+fullhide+'" style="height: 20px;"><span class="'+likehide+' reaction re-like"><a onclick="reaction(\'like\',\'' + toot.id + '\',' + acct_id +
+            '</div><div class="area-additional"><span class="additional">'+analyze+
+            '<div class="reactions '+fullhide+'" style="height: 25px;"><span class="'+likehide+' reaction re-like"><a onclick="reaction(\'like\',\'' + toot.id + '\',' + acct_id +
             ',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat" style="padding:0">'+twemoji.parse("👍")+'</a><span class="re-likect">'+like+
             '</span></span><span class="'+lovehide+' reaction re-love"><a onclick="reaction(\'love\',\'' + toot.id + '\',' + acct_id +
             ',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat pointer" style="padding:0">'+twemoji.parse("💓")+'</a><span class="re-lovect">'+love+
@@ -668,7 +689,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'<span class="cbadge viabadge waves-effect '+viashow+' '+mine_via+'" onclick="client(\''+$.strip_tags(via)+'\')" title="via ' + $.strip_tags(via) + '">via ' +
 			via +
 			'</span>'+
-			'</div><div class="area-side"><div class="action ' + if_mine + ' '+noauth+'"><a onclick="toggleAction(\'' + toot.id + '\',\''+tlid+'\',\''+acct_id+'\')" class="waves-effect waves-dark btn-flat" style="padding:0"><i class="text-darken-3 material-icons act-icon">expand_more</i></a></div>' +
+			'</div><div class="area-side '+mouseover+'"><div class="action ' + if_mine + ' '+noauth+'"><a onclick="toggleAction(\'' + toot.id + '\',\''+tlid+'\',\''+acct_id+'\')" class="waves-effect waves-dark btn-flat" style="padding:0"><i class="text-darken-3 material-icons act-icon">expand_more</i></a></div>' +
 			'<div class="action '+noauth+'"><a onclick="details(\'' + toot.id + '\',' + acct_id +
 			',\''+tlid+'\')" class="waves-effect waves-dark btn-flat details" style="padding:0"><i class="text-darken-3 material-icons">more_vert</i></a></div>' +
 			'</div></div>' +
diff --git a/app/js/tl/mix.js b/app/js/tl/mix.js
index 11175d1d..87eedcc5 100644
--- a/app/js/tl/mix.js
+++ b/app/js/tl/mix.js
@@ -65,7 +65,7 @@ function mixtl(acct_id, tlid, type,delc,voice) {
                 }
 
             });
-            
+            $("#landing_" + tlid).hide();
              $("#timeline_" + tlid).html(templete);
             mixre(acct_id, tlid, type, mute,delc,voice);
 			additional(acct_id, tlid);
@@ -90,10 +90,12 @@ function mixre(acct_id, tlid, TLtype, mute,delc,voice) {
 	websocketHome[wshid] = new WebSocket(startHome);
 	websocketLocal[wslid] = new WebSocket(startLocal);
 	websocketHome[wshid].onopen = function(mess) {
+		localStorage.setItem("wssH_" + tlid, wshid);
 		console.log("Connect Streaming API(Integrated:Home)");
 		$("#notice_icon_" + tlid).removeClass("red-text");
 	}
 	websocketLocal[wslid].onopen = function(mess) {
+		localStorage.setItem("wssL_" + tlid, wslid);
 		console.log("Connect Streaming API(Integrated:Local)");
 		$("#notice_icon_" + tlid).removeClass("red-text");
 	}
diff --git a/app/js/tl/notification.js b/app/js/tl/notification.js
index b5722d6a..8ef03a7c 100644
--- a/app/js/tl/notification.js
+++ b/app/js/tl/notification.js
@@ -86,7 +86,7 @@ function notf(acct_id, tlid, sys) {
 		} else {
 			$("div[data-notf=" + acct_id +"]").html(templete);
 		}
-
+		$("#landing_" + tlid).hide();
 		jQuery("time.timeago").timeago();
 		}
 		$("#notf-box").addClass("fetched");
@@ -102,33 +102,44 @@ function notf(acct_id, tlid, sys) {
 
 	console.log(start);
 	var wsid = websocketNotf.length;
-	websocketNotf[wsid] = new WebSocket(start);
+	websocketNotf[acct_id] = new WebSocket(start);
 	console.log(websocketNotf);
-	websocketNotf[wsid].onopen = function(mess) {
+	websocketNotf[acct_id].onopen = function(mess) {
 		console.log("Connect Streaming API(Notf):");
 		console.log(mess);
 		$("i[data-notf=" + acct_id +"]").removeClass("red-text");
+
 	}
-	websocketNotf[wsid].onmessage = function(mess) {
+	websocketNotf[acct_id].onmessage = function(mess) {
 		console.log("Receive Streaming API(Notf):"+acct_id);
 		var popup = localStorage.getItem("popup");
 			if (!popup) {
 				popup = 0;
 			}
+			console.log(domain)
 		if(domain=="misskey.xyz"){
+			console.log("misskey")
 			console.log(JSON.parse(mess.data));
 			if (JSON.parse(mess.data).type == "notification") {
 				var obj = JSON.parse(mess.data).body;
 				console.log(obj);
 				if(obj.type!="follow"){
+					
 					templete = misskeyParse([obj], 'notf', acct_id, 'notf', popup);
 				}else{
 					templete = misskeyUserparse([obj], 'notf', acct_id, 'notf', popup);
 				}
+				if(obj.type=="reaction"){
+					console.log("refresh")
+					reactRefresh(acct_id,obj.note.id)
+				}
 				if(!$("div[data-notfIndv=" + acct_id +"_"+obj.id+"]").length){
 					$("div[data-notf=" + acct_id +"]").prepend(templete);
 				}
 				jQuery("time.timeago").timeago();
+			}else if(JSON.parse(mess.data).type == "note-updated"){
+				var obj = JSON.parse(mess.data).body.note;
+				reactRefreshCore(obj)
 			}
 		}else{
 		var obj = JSON.parse(JSON.parse(mess.data).payload);
@@ -152,7 +163,7 @@ function notf(acct_id, tlid, sys) {
 		}
 		}
 	}
-	websocketNotf[wsid].onerror = function(error) {
+	websocketNotf[acct_id].onerror = function(error) {
 		console.error('WebSocket Error ' + error);
 	};
 }
@@ -174,7 +185,7 @@ function notfmore(tlid) {
 		todo("Notfication TL MoreLoading");
 		var domain = localStorage.getItem("domain_" + acct_id);
 		var at = localStorage.getItem("acct_"+ acct_id + "_at");
-		
+
 			if(domain=="misskey.xyz"){
 				var start = "https://" + domain + "/api/i/notifications";
 				var i={
@@ -198,13 +209,8 @@ function notfmore(tlid) {
 					},
 				}
 			}
-		fetch(start, {
-			method: 'GET',
-			headers: {
-				'content-type': 'application/json',
-				'Authorization': 'Bearer ' + at
-			},
-		}).then(function(response) {
+		fetch(start, i,
+		).then(function(response) {
 			return response.json();
 		}).catch(function(error) {
 			todo(error);
@@ -215,7 +221,7 @@ function notfmore(tlid) {
 				var obj = json[key];
 				if(obj.type!="follow"){
 					if(domain=="misskey.xyz"){
-						templete = templete+misskeyParse([obj], '', acct_id, tlid, -1);
+						templete = templete+misskeyParse([obj.note], '', acct_id, tlid, -1);
 					}else{
 						templete = templete+parse([obj], '', acct_id, tlid, -1);
 					}
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index 6d25df1e..8eb5d409 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -1,6 +1,13 @@
 //オブジェクトパーサー(トゥート)
 function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 	var templete = '';
+	if(obj[0]){
+		if(tlid==1){
+			console.log("testalive:"+"lastunix_"+ tlid+":"+date(obj[0].created_at, 'unix'))
+		}
+		localStorage.setItem("lastunix_"+ tlid,date(obj[0].created_at, 'unix'));
+	}
+	
 	var actb = localStorage.getItem("action_btns");
 	var actb='re,rt,fav,qt,del,pin,red';
 	if(actb){
@@ -123,7 +130,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 	var mouseover=localStorage.getItem("mouseover");
 	if(!mouseover){
 		mouseover="";
-	}else if(mouseover=="yes"){
+	}else if(mouseover=="yes" || mouseover=="click"){
 		mouseover="hide";
 	}else if(mouseover=="no"){
 		mouseover="";
@@ -177,22 +184,25 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			var notice = noticetext;
 			var memory = localStorage.getItem("notice-mem");
 			if (popup >= 0 && obj.length < 5 && noticetext != memory) {
-				if (toot.type == "mention") {
-					var replyct=localStorage.getItem("notf-reply_" + acct_id)
-					$(".notf-reply_" + acct_id).text(replyct*1-(-1));
-					localStorage.setItem("notf-reply_" + acct_id,replyct*1-(-1))
-					$(".notf-reply_" + acct_id).removeClass("hide")
-				}else if (toot.type == "reblog") {
-					var btct=localStorage.getItem("notf-bt_" + acct_id)
-					$(".notf-bt_" + acct_id).text(btct*1-(-1));
-					localStorage.setItem("notf-bt_" + acct_id,btct*1-(-1))
-					$(".notf-bt_" + acct_id).removeClass("hide")
-				}else if (toot.type == "favourite") {
-					var favct=localStorage.getItem("notf-fav_" + acct_id)
-					$(".notf-fav_" + acct_id).text(favct*1-(-1));
-					localStorage.setItem("notf-fav_" + acct_id,favct*1-(-1))
-					$(".notf-fav_" + acct_id).removeClass("hide")
+				if(localStorage.getItem("hasNotfC_" + acct_id)!="true"){
+					if (toot.type == "mention") {
+						var replyct=localStorage.getItem("notf-reply_" + acct_id)
+						$(".notf-reply_" + acct_id).text(replyct*1-(-1));
+						localStorage.setItem("notf-reply_" + acct_id,replyct*1-(-1))
+						$(".notf-reply_" + acct_id).removeClass("hide")
+					}else if (toot.type == "reblog") {
+						var btct=localStorage.getItem("notf-bt_" + acct_id)
+						$(".notf-bt_" + acct_id).text(btct*1-(-1));
+						localStorage.setItem("notf-bt_" + acct_id,btct*1-(-1))
+						$(".notf-bt_" + acct_id).removeClass("hide")
+					}else if (toot.type == "favourite") {
+						var favct=localStorage.getItem("notf-fav_" + acct_id)
+						$(".notf-fav_" + acct_id).text(favct*1-(-1));
+						localStorage.setItem("notf-fav_" + acct_id,favct*1-(-1))
+						$(".notf-fav_" + acct_id).removeClass("hide")
+					}
 				}
+				
 				var domain = localStorage.getItem("domain_" + acct_id);
 				if(popup>0){
 					Materialize.toast("["+domain+"]"+escapeHTML(toot.account.display_name)+what, popup * 1000);
@@ -211,7 +221,9 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 						ipc.send('native-notf', ['TheDesk:'+domain,toot.account.display_name+"(" + toot.account.acct +")"+what+"\n\n"+$.strip_tags(toot.status.content),toot.account.avatar]);
 					}
 				}
-				$(".notf-icon_" + acct_id).addClass("red-text");
+				if(localStorage.getItem("hasNotfC_" + acct_id)!="true"){
+					$(".notf-icon_" + acct_id).addClass("red-text");
+				}
 				localStorage.setItem("notice-mem", noticetext);
 				noticetext = "";
 			}
@@ -406,8 +418,8 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 				} else {
 					var sense = ""
 				}
-				viewer = viewer + '<a onclick="imgv(\'' + id + '\',\'' + key2 + '\',' +
-					acct_id + ')" id="' + id + '-image-' + key2 + '" data-url="' + url +
+				viewer = viewer + '<a onclick="imgv(\'' + id + '\',\'' + key2 + '\',\'' +
+					acct_id + '\')" id="' + id + '-image-' + key2 + '" data-url="' + url +
 					'" data-type="' + media.type + '" class="img-parsed"><img src="' +
 					purl + '" class="' + sense +
 					' toot-img pointer" style="width:' + cwdt + '%; height:'+imh+'px;"></a></span>';
@@ -532,7 +544,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		templete = templete + '<div id="pub_' + toot.id + '" class="cvo ' +
 			boostback + ' ' + fav_app + ' ' + rt_app + ' ' + pin_app +
 			' ' + hasmedia + '" toot-id="' + id + '" unique-id="' + uniqueid + '" data-medias="'+media_ids+' " unixtime="' + date(obj[
-				key].created_at, 'unix') + '" '+if_notf+' onmouseover="mov(\'' + toot.id + '\',\''+tlid+'\')" onmouseout="resetmv()">' +
+				key].created_at, 'unix') + '" '+if_notf+' onmouseover="mov(\'' + toot.id + '\',\''+tlid+'\',\'mv\')" onclick="mov(\'' + toot.id + '\',\''+tlid+'\',\'cl\')" onmouseout="resetmv(\'mv\')">' +
 			'<div class="area-notice"><span class="gray sharesta">' + notice + home +
 			'</span></div>' +
 			'<div class="area-icon"><a onclick="udg(\'' + toot.account.id +
@@ -590,7 +602,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'<span class="cbadge viabadge waves-effect '+viashow+' '+mine_via+'" onclick="client(\''+$.strip_tags(via)+'\')" title="via ' + $.strip_tags(via) + '">via ' +
 			via +
 			'</span>'+
-			'</div><div class="area-side"><div class="action ' + if_mine + ' '+noauth+'"><a onclick="toggleAction(\'' + toot.id + '\',\''+tlid+'\',\''+acct_id+'\')" class="waves-effect waves-dark btn-flat" style="padding:0"><i class="text-darken-3 material-icons act-icon">expand_more</i></a></div>' +
+			'</div><div class="area-side '+mouseover+'"><div class="action ' + if_mine + ' '+noauth+'"><a onclick="toggleAction(\'' + toot.id + '\',\''+tlid+'\',\''+acct_id+'\')" class="waves-effect waves-dark btn-flat" style="padding:0"><i class="text-darken-3 material-icons act-icon">expand_more</i></a></div>' +
 			'<div class="action '+noauth+'"><a onclick="details(\'' + toot.id + '\',' + acct_id +
 			',\''+tlid+'\')" class="waves-effect waves-dark btn-flat details" style="padding:0"><i class="text-darken-3 material-icons">more_vert</i></a></div>' +
 			'</div></div>' +
diff --git a/app/js/tl/tag.js b/app/js/tl/tag.js
index 3e58997c..a98f962a 100644
--- a/app/js/tl/tag.js
+++ b/app/js/tl/tag.js
@@ -100,7 +100,6 @@ function trendTag(){
 
 function trendintervalset(){
     setTimeout(trendTag, 6000000);
-
 }
 function tagTL(a,b,c,d){
     var acct_id = $("#post-acct-sel").val();
diff --git a/app/js/tl/tl.js b/app/js/tl/tl.js
index e603cd1c..bb8820d4 100644
--- a/app/js/tl/tl.js
+++ b/app/js/tl/tl.js
@@ -117,7 +117,8 @@ function tl(type, data, acct_id, tlid, delc, voice) {
 		todo(error);
 		console.error(error);
 	}).then(function(json) {
-		console.log(json);
+		console.log(json)
+		$("#landing_" + tlid).hide();
 		if(localStorage.getItem("filter_"+ acct_id)!="undefined"){
 			var mute=getFilterType(JSON.parse(localStorage.getItem("filter_"+ acct_id)),type);
 		}else{
@@ -127,6 +128,7 @@ function tl(type, data, acct_id, tlid, delc, voice) {
 			var templete = misskeyParse(json, type, acct_id, tlid, "", mute);
 		}else{
 			var templete = parse(json, type, acct_id, tlid, "", mute);
+			localStorage.setItem("lastobj_"+ tlid,json[0].id)
 		}
 		$("#timeline_" + tlid).html(templete);
 		additional(acct_id, tlid);
@@ -211,6 +213,7 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice) {
 	
 	console.log(start);
 	var wsid = websocket.length;
+	localStorage.setItem("wss_" + tlid, wsid);
 	websocket[wsid] = new WebSocket(start);
 	websocket[wsid].onopen = function(mess) {
 		console.log(tlid + ":Connect Streaming API:" + type);
@@ -226,6 +229,10 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice) {
 				if(voice){
 					say(obj.text)
 				}
+				websocketNotf[acct_id].send(JSON.stringify({
+					type: 'capture',
+					id: obj.id
+				}))
 				var templete = misskeyParse([obj], type, acct_id, tlid,"",mute);
 				var pool = localStorage.getItem("pool_" + tlid);
 				if (pool) {
@@ -306,7 +313,7 @@ function moreload(type, tlid) {
 		var data=obj[tlid].data;
 	}
 	var sid = $("#timeline_" + tlid + " .cvo").last().attr("unique-id");
-	if (localStorage.getItem("morelock") != sid) {
+	if (sid && localStorage.getItem("morelock") != sid) {
 		localStorage.setItem("morelock", sid);
 		if (type == "mix" && localStorage.getItem("domain_" + acct_id)!="misskey.xyz") {
 			mixmore(tlid,"integrated");
@@ -429,7 +436,7 @@ function tlCloser() {
 		}
 
 	});
-	websocketLocal = [];
+	websocketNotf = [];
 }
 
 //TLのタイトル
@@ -555,4 +562,110 @@ function icon(type) {
 	}else if (type == "mix") {
 		return "share"
 	}
-}
\ No newline at end of file
+}
+function strAlive(){
+    var date = new Date() ;
+	var a = date.getTime() ;
+	var unix = Math.floor( a / 1000 ) ;
+	var col = localStorage.getItem("column");
+	if(col){
+		var obj = JSON.parse(col);
+		Object.keys(obj).forEach(function(key) {
+			var type=obj[key].type;
+			var lastunix=localStorage.getItem("lastunix_"+ key);
+			if(obj[key].type=="pub" || obj[key].type=="pub-media"){
+				//連合[連合数100超 or not]
+				if(localStorage.getItem("connects_" + obj[key].domain)>100){
+					var should=30;
+				}else{
+					var should=120;
+				}
+			}else if(obj[key].type=="local" || obj[key].type=="local-media"){
+				//連合[週間トゥ数10000超 or not]
+				if(localStorage.getItem("statuses_" + obj[key].domain)>10000){
+					var should=10;
+				}else if(localStorage.getItem("statuses_" + obj[key].domain)>1000){
+					var should=120;
+				}else{
+					var should=600;
+				}
+			}else{
+				if(type=="local" || type=="local-media" || type=="mix" || type=="plus"){
+				//ローカル[週間トゥ数10000超 or not]
+				if(localStorage.getItem("statuses_" + obj[key].domain)>10000){
+					var should=10;
+				}else if(localStorage.getItem("statuses_" + obj[key].domain)>1000){
+					var should=120;
+				}else{
+					var should=600;
+				}
+				}
+				if(type=="home" || type=="mix"){
+				//ホーム[フォロー数]
+				var flw=localStorage.getItem("follow_" + obj[key].domain)
+				if(flw>1000){
+					var should=10;
+				}else if(flw>500){
+					var should=20;
+				}else if(flw>100){
+					var should=30;
+				}else if(flw>50){
+					var should=45;
+				}else{
+					var should=60;
+				}
+			}
+			}
+			if (obj[key].data) {
+				var data = obj[key].data;
+			} else {
+				var data = "";
+			}
+			if(unix*1>lastunix*1+should*1 && should){
+				reconnector(tlid,type,obj[key].domain,data);
+			}
+		});
+	}
+}
+
+function strAliveInt(){
+    setTimeout(strAlive, 10000);
+}
+function reconnector(tlid,type,acct_id,data){
+	console.log("Reconnector")
+	if(type=="mix" || type=="plus"){
+		if(localStorage.getItem("voice_" + tlid)){
+			var voice=true;
+		}else{
+			var voice=false;
+		}
+		if(localStorage.getItem("filter_"+ acct_id)!="undefined"){
+			var mute=getFilterType(JSON.parse(localStorage.getItem("filter_"+ acct_id)),type);
+		}else{
+			var mute=[];
+		}
+		var wssh=localStorage.getItem("wssH_" + tlid);
+		websocketHome[wssh].close();
+		var wssh=localStorage.getItem("wssL_" + tlid);
+		websocketLocal[wssl].close();
+		mixre(acct_id, tlid, type, mute,"",voice);
+	}else if(type=="notf"){
+	}else{
+		var wss=localStorage.getItem("wss_" + tlid);
+		websocket[wss].close();
+		if(localStorage.getItem("voice_" + tlid)){
+			var voice=true;
+		}else{
+			var voice=false;
+		}
+		if(localStorage.getItem("filter_"+ acct_id)!="undefined"){
+			var mute=getFilterType(JSON.parse(localStorage.getItem("filter_"+ acct_id)),type);
+		}else{
+			var mute=[];
+		}
+		reload(type, '', acct_id, tlid, data, mute, "",voice);
+	}
+	Materialize.toast(lang_tl_reconnect[lang], 2000);
+}
+
+strAliveInt()
\ No newline at end of file
diff --git a/app/js/ui/layout.js b/app/js/ui/layout.js
index e373c214..ea0c0111 100644
--- a/app/js/ui/layout.js
+++ b/app/js/ui/layout.js
@@ -110,7 +110,11 @@ function parseColumn() {
 				insert=insert+" border-bottom:medium solid #"+acctlist[acct.domain].background;
 			}
 		}
-
+		if(acct.type=="notf" && localStorage.getItem("setasread")=="no"){
+			localStorage.setItem("hasNotfC_" + acct.domain,"true");
+		}else{
+			localStorage.removeItem("hasNotfC_" + acct.domain);
+		}
 		var html = '<div class="box" id="timeline_box_' + key + '_box" tlid="' + key +
 			'" data-acct="'+acct.domain+'"><div class="notice-box z-depth-2" id="menu_'+key+'" style="'+insert+'">'+
 			'<div class="area-notice"><i class="material-icons waves-effect red-text" id="notice_icon_' + key + '"'+notf_attr+' style="font-size:40px; padding-top:25%;" onclick="goTop(' + key + ')" title="'+lang_layout_gotop[lang]+'"></i></div>'+
@@ -131,8 +135,9 @@ function parseColumn() {
 		  ')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang_layout_linkanades[lang]+'">link</i><span id="sta-card-' +
 		  key + '">On</span></a>'+lang_layout_linkana[lang]+'<br><a onclick="voiceToggle(' + key +
 		  ')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang_layout_tts[lang]+'">hearing</i><span id="sta-voice-' +
-		  key + '">On</span></a>'+lang_layout_tts[lang]+'TL<br>'+lang_layout_headercolor[lang]+'<br><div id="picker_'+key+'" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
-			'" class="tl" tlid="' + key + '"'+notf_attr+' data-type="' + acct.type + '"><div style="text-align:center">'+lang_layout_nodata[lang]+'</div></div></div></div>';
+		  key + '">On</span></a>'+lang_layout_tts[lang]+'TL<br><a onclick="reconnector(' + key +
+		  ',\''+acct.type+'\',\''+acct.domain+'\',\''+acct.data+'\')" class="setting nex '+if_notf+'"><i class="material-icons waves-effect nex '+if_notf+'" title="'+lang_layout_reconnect[lang]+'">low_priority</i></a><span class="'+if_notf+'">'+lang_layout_reconnect[lang]+'</span><br>'+lang_layout_headercolor[lang]+'<br><div id="picker_'+key+'" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
+			'" class="tl" tlid="' + key + '"'+notf_attr+' data-type="' + acct.type + '"><div id="landing_'+key+'" style="text-align:center">'+lang_layout_nodata[lang]+'</div></div></div></div>';
 		$("#timeline-container").append(html);
 		localStorage.removeItem("pool_" + key);
 		if (acct.data) {
diff --git a/app/js/ui/settings.js b/app/js/ui/settings.js
index be977799..e3af4384 100644
--- a/app/js/ui/settings.js
+++ b/app/js/ui/settings.js
@@ -157,6 +157,13 @@ function settings() {
 	}
 	localStorage.setItem("viashow", viad);
 
+	var notfmd = $("[name=notfm]:checked").val();
+	var notfmt = $("[for=notfm_"+notfmd+"]").text();
+	if (notfmd != localStorage.getItem("setasread")) {
+		Materialize.toast(lang_setting_setasread[lang].replace("{{set}}" ,notfmt), 3000);
+	}
+	localStorage.setItem("setasread", notfmd);
+
 	var movd = $("[name=mov]:checked").val();
 	var movt = $("[for=mov_"+movd+"]").text();
 	if (movd != localStorage.getItem("mouseover")) {
@@ -334,6 +341,12 @@ function load() {
 	}
 	$("#mov_" + movt).prop("checked", true);
 
+	var notfmt = localStorage.getItem("setasread");
+	if (!notfmt) {
+		var notfmt = "yes";
+	}
+	$("#notfm_" + notfmt).prop("checked", true);
+
 	var maint = localStorage.getItem("mainuse");
 	if (!maint) {
 		var maint = "remain";
diff --git a/app/language/setting.en.json b/app/language/setting.en.json
index 5b9754f2..47d64959 100644
--- a/app/language/setting.en.json
+++ b/app/language/setting.en.json
@@ -47,7 +47,10 @@
     "taglocal":"Use local network",
     "via":"Show via",
     "mouseover":"Hide action buttons without mouseover",
-    "mouseoverwarn":"You may feel unconfortable:(",
+    "mouseoverwarn":"You may feel 'mouseover' is unconfortable:(",
+    "mv":"Mouseover to show",
+    "mvclick":"Click to show",
+    "notfmarker":"Show Notification marker, red colored bell and counter(if you show a notification column.)",
     "autofold":"Auto folding",
     "autofoldwarn":"TheDesk does not collapse totes of 5 characters or less. Also, when collapsing, newlines are not shown. TheDesk count only newlines as the number of lines.",
     "lines":"lines",
diff --git a/app/language/setting.ja.json b/app/language/setting.ja.json
index 73830d25..b31e2755 100644
--- a/app/language/setting.ja.json
+++ b/app/language/setting.ja.json
@@ -46,8 +46,11 @@
     "tagfed":"接続しているインスタンス",
     "taglocal":"検索対象のインスタンスのみ",
     "via":"viaを表示する",
-    "mouseover":"マウスオーバーするまでアクションメニューを非表示",
-    "mouseoverwarn":"1画面で得られる情報量が格段にアップしますが、すこし鬱陶しいと思うかもしれません。",
+    "mouseover":"アクションメニューを非表示",
+    "mouseoverwarn":"「マウスオーバー」はすこし鬱陶しいと思うかもしれません。",
+    "mv":"マウスオーバーで表示",
+    "mvclick":"クリックで表示",
+    "notfmarker":"通知を開いているとき、通知新着お知らせを表示する",
     "autofold":"指定行数以上を折りたたむ",
     "autofoldwarn":"5文字以下のトゥートは折りたたみません。また、折りたたみ時は改行が描画されません。改行のみを行数とカウントします。",
     "lines":"行",
diff --git a/app/package.json b/app/package.json
index 544557fa..9b1fd913 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "thedesk",
-  "version": "16.0.6",
+  "version": "16.0.8",
   "description": "TheDesk is a Mastodon client for PC.",
   "main": "main.js",
   "scripts": {
diff --git a/app/setting.html b/app/setting.html
index 2ca512e9..7c2592d6 100644
--- a/app/setting.html
+++ b/app/setting.html
@@ -126,12 +126,20 @@
 		<label for="via_hide">No</label>
 		<br>
 		<h5>Hide action buttons without mouseover</h5>
-		You may feel unconfortable:(<br>
+		You may feel 'mouseover' is unconfortable:(<br>
 		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
-		<label for="mov_yes">Yes</label>
+		<label for="mov_yes">Mouseover to show</label>
+		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
+		<label for="mov_click">Click to show</label>
 		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
 		<label for="mov_no">No</label>
 		<br>
+		<h5>Show Notification marker, red colored bell and counter(if you show a notification column.)</h5>
+		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
+		<label for="notfm_yes">Yes</label>
+		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
+		<label for="notfm_no">No</label>
+		<br>
 		<h5>Auto folding</h5>
 		TheDesk does not collapse totes of 5 characters or less. Also, when collapsing, newlines are not shown. TheDesk count only newlines as the number of lines.
 		<br>
diff --git a/app/setting.sample.html b/app/setting.sample.html
index 44092622..7774abf8 100644
--- a/app/setting.sample.html
+++ b/app/setting.sample.html
@@ -128,10 +128,18 @@
 		<h5>{{mouseover}}</h5>
 		{{mouseoverwarn}}<br>
 		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
-		<label for="mov_yes">{{yes}}</label>
+		<label for="mov_yes">{{mv}}</label>
+		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
+		<label for="mov_click">{{mvclick}}</label>
 		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
 		<label for="mov_no">{{no}}</label>
 		<br>
+		<h5>{{notfmarker}}</h5>
+		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
+		<label for="notfm_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
+		<label for="notfm_no">{{no}}</label>
+		<br>
 		<h5>{{autofold}}</h5>
 		{{autofoldwarn}}
 		<br>