TheDesk Usamin (18.8.3)

.github/ISSUE_TEMPLATE/bug-report-english.md

@@ -0,0 +1,27 @@
+---
+name: Bug report English
+about: Create a report to help us improve
+title: ''
+labels: "\U0001F41Bbug"
+assignees: ''
+
+---
+
+Describe the bug: a clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Click on '....'
+2. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Environment**
+ - OS: [e.g. macOS High Sierra , Windows 10 Pro 1903, Ubuntu 19.04]
+ - Version: [e.g. Usamin (18.0.0)]  
+Check at 'Application,' 'About TheDesk' at top of the window.
+- Your instance: [e.g. mastodon.social]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug-report-japanese----------.md

@@ -0,0 +1,27 @@
+---
+name: Bug report Japanese(日本語のバグ報告)
+about: 迅速なバグ撲滅のために
+title: ''
+labels: "\U0001F41Bbug"
+assignees: ''
+
+---
+
+バグの簡単な説明を最初に入れます。
+
+**再現方法**
+このようにするとバグが発生しました。
+1. '....'をクリックすると
+2. エラーが出ます
+
+**本来の挙動**
+本来どのように動くのが望ましいかを記入
+
+**環境**
+ - OS: [例 macOS High Sierra , Windows 10 Pro 1903, Ubuntu 19.04]
+ - バージョン: [例 Usamin (18.0.0)]  
+TheDesk画面上部の「アプリケーション」から「TheDeskについて」で確認
+- インスタンス: [例. mastodon.social]
+
+**追記**
+追記

README.md

@@ -126,3 +126,8 @@ macOS
 Did you find a bug with Pleroma accounts?  
 Pleroma **does not** follow Mastodon API rules completely although Pleroma developers say so.  
 Please write issues to improve TheDesk affinity with Pleroma.
+
+## Vulnerabilities when `npm i`???
+
+No, if your npm says materialize-css has vulnerabilities(CVE-2019-11002/3/4), look at [here](https://github.com/Dogfalo/materialize/issues/6286) under discussion.
+

README_ja.md

@@ -131,3 +131,8 @@ Issuesに書いてある問題についてはなるべく対処しますので
 ## 詳しく
 
 [TheDesk - マストドン日本語ウィキ](https://ja.mstdn.wiki/TheDesk)
+
+## `npm i`したら脆弱性あるって言われた
+
+materialize-cssの脆弱性(CVE-2019-11002/3/4)については[こちら](https://github.com/Dogfalo/materialize/issues/6286)で本当に脆弱性かどうか議論しています。  
+実際には害が無いものと思われます。

app/css/themes.css

@@ -17,6 +17,7 @@
   --accentbtn: #009688;
   --selected: #c0c0c0;
   --selectedWithShare: #b2babd;
+  --gray: #757575;
 }
 #imagemodal {
   background: url("../img/pixel.white.svg");
@@ -40,6 +41,7 @@
   --accentbtn: #3f51b5;
   --selected: #3f3f3f;
   --selectedWithShare: #003a30;
+  --gray: #cccccc;
 }
 .blacktheme #imagemodal {
   background: url("../img/pixel.svg");
@@ -63,6 +65,7 @@
   --accentbtn: #00acc1;
   --selected: #214f8a;
   --selectedWithShare: #003a30;
+  --gray: #cccccc ;
 }
 .indigotheme #imagemodal {
   background: url("../img/pixel.svg");
@@ -86,6 +89,7 @@
   --accentbtn: #827717;
   --selected: #6d352b;
   --selectedWithShare: #003a30;
+  --gray: #cccccc;
 }
 .browntheme #imagemodal {
   background: url("../img/pixel.svg");
@@ -109,6 +113,7 @@
   --accentbtn: #33691e;
   --selected: #78c17a;
   --selectedWithShare: #caa266;
+  --gray: #757575;
 }
 .greentheme #imagemodal {
   background: url("../img/pixel.white.svg");
@@ -132,6 +137,7 @@
   --accentbtn: #2f7bb7;
   --selected: #9dcade;
   --selectedWithShare: #c1dac4;
+  --gray: #757575;
 }
 .bluetheme #imagemodal {
   background: url("../img/pixel.white.svg");

app/css/tl.css

@@ -94,7 +94,8 @@
     display: none;
   }
 }
-iframe {
+iframe,
+.cvo video {
   max-width: 100%;
   max-height: 300px;
 }
@@ -127,7 +128,7 @@ iframe {
 }
 .marquee {
   width: 100%;
-  padding: .5em 0;
+  padding: 0.5em 0;
   overflow: hidden;
   margin-bottom: 0;
   position: relative;
@@ -147,7 +148,8 @@ iframe {
     -webkit-transform: translate(0);
     transform: translate(0);
   }
-99%, 100% {
+  99%,
+  100% {
     -webkit-transform: translate(-100%);
     transform: translate(-100%);
   }
@@ -209,7 +211,8 @@ iframe {
   width: 100%;
   display: grid;
   grid-template-columns: 43px 2fr 1fr;
-  grid-template-areas: "notice notice notice" "icon display_name display_name" "icon toot toot" "vis additional additional" "actions actions side";
+  grid-template-rows: auto 1.6rem 1fr auto 2.5rem;
+  grid-template-areas: "notice notice notice" "icon display_name display_name" "space toot toot" "space additional additional" "vis actions side";
 }
 .cvo h1,
 .cvo h2,
@@ -254,7 +257,8 @@ iframe {
 .area-toot {
   cursor: text;
   user-select: auto;
-  margin: 2px;
+  margin-top: 5px;
+  margin-bottom: 5px;
   margin-left: 5px;
   grid-area: toot;
 }
@@ -276,19 +280,22 @@ iframe {
 .area-actions {
   padding: 0;
   margin: 0;
-  top: -20px;
+  top: -5px;
+  position: relative;
   display: flex;
   justify-content: space-around;
-  width: 250px;
   max-width: 100%;
   grid-area: actions;
 }
 .area-vis {
   margin: 2px;
   grid-area: vis;
+  text-align: center;
 }
 .area-side {
   display: flex;
+  top: -5px;
+  position: relative;
   justify-content: flex-end;
   margin: 2px;
   grid-area: side;
@@ -341,7 +348,7 @@ iframe {
 }
 
 .gray {
-  color: gray;
+  color: var(--gray);
 }
 .sml {
   font-size: 0.8em;
@@ -612,6 +619,19 @@ audio{
 .translate {
   white-space: normal;
 }
+.cw_btn {
+  margin: 3px;
+  background-color: var(--emphasized);
+  color: var(--color);
+  padding-left: 3px;
+  padding-right: 3px;
+  border-radius: 3px;
+  border: 1px solid var(--color);
+}
+.vis-data {
+  font-size: 1rem !important;
+  margin: 5px;
+}
 @keyframes jump {
   0% {
     transform: translateY(0);

app/css/userdata.css

@@ -4,6 +4,10 @@
   background-image: url("../../loading.svg");
   overflow-y: hidden;
 }
+#his-data-content {
+  display: flex;
+  justify-content: center;
+}
 #his-name {
   font-size: 1.5rem;
 }
@@ -13,16 +17,17 @@
   margin-right: 5px;
 }
 .his-float {
-  float: left;
   overflow-y: scroll;
   padding: 5px;
 }
 #his-float-data {
-  width: 400px;
   height: 100%;
 }
+#his-leftside {
+  width: 500px;
+}
 #his-float-timeline {
-  width: calc(100% - 400px);
+  max-width: 775px;
   height: 100%;
   overflow-y: hidden;
 }
@@ -61,21 +66,30 @@
 #his-data a:not(.mention) span:last-of-type {
   display: none;
 }
+#his-data a .rep_ct,
+#his-data a .rt_ct,
+#his-data a .fav_ct {
+  display: inline !important;
+}
 #his-data-show {
   margin: 20px;
+  margin-left: 50px;
+  margin-right: 50px;
   background-color: var(--his-data);
-  width: calc(100% - 20px);
   height: calc(100% - 20px);
   margin-bottom: 0;
   padding: 5px;
 }
-.tab-content {
+#his-data-wrap {
+  display: flex;
+}
+.his-var-content {
   overflow-y: scroll;
   overflow-x: hidden;
-  height: calc(100% - 240px);
+  height: calc(100% - 45px);
 }
-.my-data-width {
+#my-data-nav .btn {
-  width: 10%;
+  width: 140px;
 }
 .active-back {
   background-color: var(--active);
@@ -102,7 +116,11 @@
   justify-content: center;
   align-items: center;
   font-size: 2rem;
-  width: 90%;
   height: 100%;
-  position: absolute;
+}
+#hisdropdown{
+  background-color: var(--bg);
+}
+#hisdropdown li:hover{
+  background-color: var(--active);
 }

app/js/emoji/default-emoji.js

@@ -50,6 +50,10 @@ function customEmoji() {
     emojiList('home')
 }
 function defEmoji(target) {
+    var selin = $("#textarea").prop('selectionStart');
+    if (!selin) {
+        selin = 0;
+    }
     var emojiraw = newpack.filter(function (item, index) {
         if (item.short_name == target) return true;
     });
@@ -60,22 +64,11 @@ function defEmoji(target) {
         emoji = twemoji.convert.fromCodePoint(hex[0]);
     }
     var now = $("#textarea").val();
-    var selin = localStorage.getItem("cursor");
-    var now = $("#textarea").val();
-    if (selin > 0) {
     var before = now.substr(0, selin);
     var after = now.substr(selin, now.length);
     newt = before + emoji + after;
-    } else {
-        newt = emoji + now;
-    }
     $("#textarea").val(newt);
     $("#textarea").focus();
-    var selin = $("#textarea").prop('selectionStart');
-    if (!selin) {
-        selin = 0;
-    }
-    localStorage.setItem("cursor", selin);
 }
 function faicon() {
     var json = faicons;

app/js/lang/lang.en.js

@@ -201,7 +201,7 @@ var lang = {
     "lang_parse_endedvote": "Expired",
     "lang_parse_thread": "Show thread",
     "lang_parse_unknown": "Attached file",
-    "lang_parse_nsfw": "NSFW media",
+    "lang_parse_nsfw": "sensitive media",
     "lang_parse_notffilter":"Show this user's notifications",
     //misskey
     "lang_misskeyparse_renote": "Repost",
@@ -219,7 +219,7 @@ var lang = {
     //setting
     "lang_setting_time": "Time format:{{set}}",
     "lang_setting_theme": "Theme:{{set}}",
-    "lang_setting_nsfw": "NSFW:{{set}}",
+    "lang_setting_nsfw": "Sensitive media:{{set}}",
     "lang_setting_cw": "CW:{{set}}",
     "lang_setting_cwtext": "Default CW text:{{set}}",
     "lang_setting_cws": "Always CW on:{{set}}",

app/js/platform/preload.js

@@ -45,12 +45,8 @@ onmessage = function (e) {
     } else if (e.data[0] == "aboutData") {
         ipc.send('aboutData', "");
     } else if (e.data[0] == "itunes") {
-        console.log("NowPlaying" + ipc.listenerCount('itunes-np'))
+        console.log("NowPlaying")
-        if (ipc.listenerCount('itunes-np') > 1) {
-            return false;
-        } else {
         ipc.send("itunes", e.data[1])
-        }
     } else if (e.data[0] == "themeCSSRequest") {
         ipc.send('theme-css-request', e.data[1]);
     } else if (e.data[0] == "downloadButton") {
@@ -148,7 +144,7 @@ ipc.on('theme-json-create-complete', function (event, args) {
     postMessage(["ctLoad", ""], "*")
 });
 //spotify.js
-ipc.once('itunes-np', function (event, arg) {
+ipc.on('itunes-np', function (event, arg) {
     postMessage(["npCore", arg], "*")
 })
 //tips.js

app/js/post/emoji.js

@@ -10,8 +10,6 @@ function emojiToggle(reaction) {
 	if (!selin) {
 		selin = 0;
 	}
-	localStorage.setItem("cursor", selin);
-
 	if ($("#emoji").hasClass("hide")) {
 		$("#emoji").removeClass("hide")
 		$("#right-side").show()
@@ -173,35 +171,31 @@ function emojiList(target, reaction) {
 //絵文字など様々なものをテキストボックスに挿入
 function emojiInsert(code, del) {
 	var now = $("#textarea").val();
-	var selin = localStorage.getItem("cursor");
+	var selin = $("#textarea").prop('selectionStart');
 	if (localStorage.getItem("emoji-zero-width") == "yes") {
-		var brank = "​";
+		var blank = "​";
 	} else {
-		var brank = " ";
+		var blank = " ";
 	}
-	var now = $("#textarea").val();
-	if (selin > 0) {
 	var before = now.substr(0, selin);
-		var after = now.substr(selin, now.length);
+	if (before.slice(-1) != " ") {
-		newt = before + brank + code + brank + after;
+		before = before + blank
-	} else {
-		newt = code + brank;
 	}
+	var after = now.substr(selin, now.length);
+	if (after.slice(-1) != " ") {
+		after = blank + after
+	}
+	newt = before + code + after;
 	if (!del) {
 		$("#textarea").val(newt);
 		//emoji();
 	} else {
 		var regExp = new RegExp(del.replace(/[.*+?^=!:${}()|[\]\/\\]/g, "\\$&"), "g");
 		var now = now.replace(regExp, "");
-		$("#textarea").val(now + brank + code);
+		$("#textarea").val(now + blank + code);
 	}
 
 	$("#textarea").focus();
-	var selin = $("#textarea").prop('selectionStart');
-	if (!selin) {
-		selin = 0;
-	}
-	localStorage.setItem("cursor", selin);
 }
 //改行挿入
 function brInsert(code) {

app/js/post/status.js

@@ -117,11 +117,11 @@ function follow(acct_id, remote) {
 	var domain = localStorage.getItem("domain_" + acct_id);
 	var at = localStorage.getItem("acct_" + acct_id + "_at");
 	var user = $("#his-acct").text();
+	var start = "https://" + domain + "/api/v1/accounts/" + id + "/" + flag;
 	if (localStorage.getItem("mode_" + domain) == "misskey") {
 		var start = "https://" + domain + "/api/following/" + flagm;
 		var ent = { "i": at, "userId": id }
 	} else if (remote == "true" && flag == "follow") {
-		var start = "https://" + domain + "/api/v1/accounts/" + id + "/" + flag;
 		var ent = {}
 	}
 	var httpreq = new XMLHttpRequest();
@@ -147,15 +147,28 @@ function follow(acct_id, remote) {
 
 //ブロック
 function block(acct_id) {
+	if ($("#his-data").hasClass("blocking")) {
+		var flag = "unblock";
+		var txt = lang.lang_status_unmute
+	} else {
+		var flag = "block";
+		var txt = lang.lang_status_block
+	}
+	Swal.fire({
+		title: txt,
+		text: "",
+		type: 'warning',
+		showCancelButton: true,
+		confirmButtonColor: '#3085d6',
+		cancelButtonColor: '#d33',
+		confirmButtonText: lang.lang_yesno,
+		cancelButtonText: lang.lang_no
+	}).then((result) => {
+		if (result.value) {
 			if (!acct_id) {
 				var acct_id = $('#his-data').attr("use-acct");
 			}
 			var id = $("#his-data").attr("user-id");
-	if ($("#his-data").hasClass("blocking")) {
-		var flag = "unblock";
-	} else {
-		var flag = "block";
-	}
 			var domain = localStorage.getItem("domain_" + acct_id);
 			var at = localStorage.getItem("acct_" + acct_id + "_at");
 			var start = "https://" + domain + "/api/v1/accounts/" + id + "/" + flag;
@@ -177,20 +190,36 @@ function block(acct_id) {
 				}
 			}
 		}
+	});
+	
+}
 
 //ミュート
 function muteDo(acct_id) {
+	if ($("#his-data").hasClass("muting")) {
+		var flag = "unmute";
+		var flagm = "delete";
+		var txt = lang.lang_status_unmute
+	} else {
+		var flag = "mute";
+		var flagm = "create";
+		var txt = lang.lang_status_mute
+	}
+	Swal.fire({
+		title: txt,
+		text: "",
+		type: 'warning',
+		showCancelButton: true,
+		confirmButtonColor: '#3085d6',
+		cancelButtonColor: '#d33',
+		confirmButtonText: lang.lang_yesno,
+		cancelButtonText: lang.lang_no
+	}).then((result) => {
+		if (result.value) {
 			if (!acct_id) {
 				var acct_id = $('#his-data').attr("use-acct");
 			}
 			var id = $("#his-data").attr("user-id");
-	if ($("#his-data").hasClass("muting")) {
-		var flag = "unmute";
-		var flagm = "delete";
-	} else {
-		var flag = "mute";
-		var flagm = "create";
-	}
 			var domain = localStorage.getItem("domain_" + acct_id);
 			var at = localStorage.getItem("acct_" + acct_id + "_at");
 			if (localStorage.getItem("mode_" + domain) == "misskey") {
@@ -219,6 +248,9 @@ function muteDo(acct_id) {
 				}
 			}
 		}
+	});
+	
+}
 
 //投稿削除
 function del(id, acct_id) {
@@ -467,7 +499,9 @@ function staEx(mode) {
 }
 function toggleAction(id, tlid, acct_id) {
 	if (tlid == "notf") {
-		var tlide = "[data-notf=" + acct_id + "]";
+		var tlide = "[data-acct=" + acct_id + "] .notf-timeline";
+	} else if (tlid == "user") {
+		var tlide = "#his-tl-contents";
 	} else {
 		var tlide = "[tlid=" + tlid + "]";
 	}

app/js/post/suggest.js

@@ -8,6 +8,7 @@ var oldSuggest;
 var suggest;
 
 input.addEventListener("focus", function () {
+	localStorage.removeItem("cursor");
 	var acct_id = $("#post-acct-sel").val();
 	$("#suggest").html("");
 	window.clearInterval(timer);

app/js/tl/misskeyparse.js

@@ -184,9 +184,9 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 				noticeavatar = toot.user.avatarUrl;
 			}
 			noticeavatar = '<a onclick="udg(\'' + toot.user.id +
-				'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg">' +
+				'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg notf-icon">' +
 				'<img src="' + noticeavatar +
-				'" width="20" class="notf-icon prof-img" user="' + toot.user.username +
+				'" width="20" class="prof-img" user="' + toot.user.username +
 				'"></a>';
 			if (toot.type == "reply") {
 				var what = lang.lang_parse_mentioned;
@@ -375,7 +375,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			var spoiler = "cw cw_hide_" + toot.id;
 			var api_spoil = "gray";
 			var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-				'\')" class="nex parsed">' + lang.lang_parse_cwshow + '</a><br>';
+				'\')" class="nex parsed cw_btn">' + lang.lang_parse_cwshow + '</a><br>';
 		} else {
 			var ct1 = nl2br(toot.text).split('<br />').length - 2;
 			var ct2 = nl2br(toot.text).split('<br>').length - 2;
@@ -387,7 +387,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					'</span><span class="gray">' + lang.lang_parse_autofold + '</span>';
 				var spoiler = "cw cw_hide_" + toot.id;
 				var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-					'\')" class="nex parsed">' + lang.lang_parse_more + '</a><br>';
+					'\')" class="nex parsed cw_btn">' + lang.lang_parse_more + '</a><br>';
 			} else {
 				var content = escapeHTMLtemp(toot.text);
 				if (toot.cw) {
@@ -510,7 +510,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 						acct_id + ')" id="' + id + '-image-' + key2 + '" data-url="' + url +
 						'" data-type="image" class="img-parsed"><img src="' +
 						purl + '" class="' + sense +
-						' toot-img pointer" style="width:' + cwdt + '%; height:' + imh + 'px;"></a></span>';
+						' toot-img pointer" style="width:' + cwdt + '%; height:' + imh + 'px;" onerror="this.src=\'../../img/loading.svg\'"></a></span>';
 				}
 
 			});
@@ -788,7 +788,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg">' +
 			'<img src="' + avatar +
 			'" width="40" class="prof-img" user="' + toot.user.username +
-			'"></a></div>' +
+			'" onerror="this.src=\'../../img/loading.svg\'"></a></div>' +
 			'<div class="area-display_name"><div class="flex-name"><span class="user">' +
 			dis_name +
 			'</span><span class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:text;"> @' +

app/js/tl/notification.js

@@ -224,7 +224,7 @@ function notfWS(misskey, acct_id, tlid, domain, at) {
 
 		}
 		websocketNotf[acct_id].onmessage = function (mess) {
-			console.log(["Receive Streaming API(Notf):" + acct_id + "(" + domain + ")", JSON.parse(JSON.parse(mess.data).payload)]);
+			//console.log(["Receive Streaming API(Notf):" + acct_id + "(" + domain + ")", JSON.parse(JSON.parse(mess.data).payload)]);
 			var popup = localStorage.getItem("popup");
 			if (!popup) {
 				popup = 0;

app/js/tl/parse.js

@@ -359,10 +359,10 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					noticeavatar = toot.account.avatar_static;
 				}
 				noticeavatar = '<a onclick="udg(\'' + toot.account.id +
-					'\',' + acct_id + ');" user="' + toot.account.acct + '" class="udg">' +
+					'\',' + acct_id + ');" user="' + toot.account.acct + '" class="notf-icon udg">' +
 					'<img draggable="false" src="' + noticeavatar +
-					'" width="20" class="notf-icon prof-img" user="' + toot.account.acct +
+					'" width="20" class="prof-img" user="' + toot.account.acct +
-					'"></a>';
+					'" onerror="this.src=\'../../img/loading.svg\'"></a>';
 				var rebtxt = lang.lang_parse_btedsimple;
 				var rticon = "fa-retweet light-blue-text";
 				if (localStorage.getItem("domain_" + acct_id) == "imastodon.net" && !locale) {
@@ -376,6 +376,9 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				var uniqueid = toot.id;
 				var toot = toot.reblog;
 				var dis_name = escapeHTML(toot.account.display_name);
+				if(!dis_name){
+					dis_name = toot.account.acct
+				}
 				if (toot.account.emojis) {
 					var actemojick = toot.account.emojis[0];
 				} else {
@@ -460,7 +463,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			var spoiler = "cw cw_hide_" + toot.id;
 			var api_spoil = "gray";
 			var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-				'\')" class="nex parsed">' + lang.lang_parse_cwshow + '</a><br>';
+				'\')" class="nex parsed cw_btn">' + lang.lang_parse_cwshow + '</a><br>';
 		} else {
 			var ct1 = toot.content.split('</p>').length + toot.content.split('<br />').length - 2;
 			var ct2 = toot.content.split('</p>').length + toot.content.split('<br>').length - 2;
@@ -472,7 +475,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					'</span><span class="gray">' + lang.lang_parse_autofold + '</span>';
 				var spoiler = "cw cw_hide_" + toot.id;
 				var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-					'\')" class="nex parsed">' + lang.lang_parse_more + '</a><br>';
+					'\')" class="nex parsed cw_btn">' + lang.lang_parse_more + '</a><br>';
 			} else {
 				var content = toot.content;
 				var spoil = escapeHTML(toot.spoiler_text);
@@ -584,7 +587,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 							acct_id + '\')" id="' + id + '-image-' + key2 + '" data-url="' + url +
 							'" data-type="' + media.type + '" class="img-parsed img-link" style="width:calc(' + cwdt + '% - 1px); height:' + imh + ';"><img draggable="false" src="' +
 							purl + '" class="' + sense +
-							' toot-img pointer">' + nsfwmes + '</a>';
+							' toot-img pointer" onerror="this.src=\'../../img/loading.svg\'">' + nsfwmes + '</a>';
 					}
 				}
 
@@ -620,6 +623,11 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			mentions = '<div style="float:right">' + mentions + '</div>';
 		} else {
 			var to_mention = [toot.account.acct];
+			//メンションじゃなくてもlang_parse_thread
+			if(toot.in_reply_to_id){
+				mentions = '<div style="float:right"><a onclick="details(\'' + toot.id + '\',' + acct_id +
+				',\'' + tlid + '\')" class="pointer waves-effect">' + lang.lang_parse_thread + '</a></div>';
+			}
 		}
 		var tagck = toot.tags[0];
 		var tags = "";
@@ -647,19 +655,19 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 		var visen = toot.visibility;
 		if (visen == "public") {
 			var vis =
-				'<i class="text-darken-3 material-icons gray sml vis-data pointer" title="' + lang.lang_parse_public + '(' + lang.lang_parse_clickcopy + ')" data-vis="public" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">public</i>';
+				'<i class="text-darken-3 material-icons gray sml vis-data pointer" title="' + lang.lang_parse_public + '(' + lang.lang_parse_clickcopy + ')" data-vis="public" onclick="staCopy(\'' + id + '\')">public</i>';
 			var can_rt = "";
 		} else if (visen == "unlisted") {
 			var vis =
-				'<i class="text-darken-3 material-icons blue-text vis-data pointer" title="' + lang.lang_parse_unlisted + '(' + lang.lang_parse_clickcopy + ')" data-vis="unlisted" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">lock_open</i>';
+				'<i class="text-darken-3 material-icons blue-text vis-data pointer" title="' + lang.lang_parse_unlisted + '(' + lang.lang_parse_clickcopy + ')" data-vis="unlisted" onclick="staCopy(\'' + id + '\')">lock_open</i>';
 			var can_rt = "";
 		} else if (visen == "private") {
 			var vis =
-				'<i class="text-darken-3 material-icons orange-text vis-data pointer" title="' + lang.lang_parse_private + '(' + lang.lang_parse_clickcopy + ')" data-vis="private" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">lock</i>';
+				'<i class="text-darken-3 material-icons orange-text vis-data pointer" title="' + lang.lang_parse_private + '(' + lang.lang_parse_clickcopy + ')" data-vis="private" onclick="staCopy(\'' + id + '\')">lock</i>';
 			var can_rt = "unvisible";
 		} else if (visen == "direct") {
 			var vis =
-				'<i class="text-darken-3 material-icons red-text vis-data pointer" title="' + lang.lang_parse_direct + '(' + lang.lang_parse_clickcopy + ')" data-vis="direct" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">mail</i>';
+				'<i class="text-darken-3 material-icons red-text vis-data pointer" title="' + lang.lang_parse_direct + '(' + lang.lang_parse_clickcopy + ')" data-vis="direct" onclick="staCopy(\'' + id + '\')">mail</i>';
 			var can_rt = "unvisible";
 		}
 		if (toot.account.acct == localStorage.getItem("user_" + acct_id)) {
@@ -818,7 +826,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				for (var i = 0; i < tickerdata.length; i++) {
 					var value = tickerdata[i];
 					if (value.domain == thisdomain) {
-						var tickerdom = '<div style="background:linear-gradient(90deg, ' + value.bg + ', transparent 96%) !important; color:' + value.text + ';width:100%; height:0.9rem; font-size:0.8rem;"><img draggable="false" src="' + value.image + '" style="height:100%;"><span style="position:relative; top:-0.2rem;"> ' + escapeHTML(value.name) + '</span></div>';
+						var tickerdom = '<div style="background:linear-gradient(90deg, ' + value.bg + ', transparent 96%) !important; color:' + value.text + ';width:100%; height:0.9rem; font-size:0.8rem;"><img draggable="false" src="' + value.image + '" style="height:100%;" onerror="this.src=\'../../img/loading.svg\'"><span style="position:relative; top:-0.2rem;"> ' + escapeHTML(value.name) + '</span></div>';
 						break;
 					}
 				}
@@ -838,7 +846,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			'\',' + acct_id + ');" user="' + toot.account.acct + '" class="udg">' +
 			'<img draggable="false" src="' + avatar +
 			'" width="40" class="prof-img" user="' + toot.account.acct +
-			'"></a>' + noticeavatar + '</div>' +
+			'" onerror="this.src=\'../../img/loading.svg\'"></a>' + noticeavatar + '</div>' +
 			'<div class="area-display_name"><div class="flex-name"><span class="user">' +
 			dis_name +
 			'</span><span class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:text;"> @' +
@@ -856,9 +864,8 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			'</div><div class="area-additional"><span class="additional">' + analyze +
 			'</span>' +
 			'' + mentions + tags + '</div>' +
-			'<div class="area-vis"></div>' +
+			'<div class="area-vis">' + vis + '</div>' +
 			'<div class="area-actions ' + mouseover + '">' +
-			'<div class="action">' + vis + '</div>' +
 			'<div class="action ' + antinoauth + '"><a onclick="detEx(\'' + toot.url + '\',\'main\')" class="waves-effect waves-dark details" style="padding:0">' + lang.lang_parse_det + '</a></div>' +
 			'<div class="action ' + antidmHide + '"><a onclick="details(\'' + toot.id + '\',' + acct_id + ',\'' + tlid + '\',\'normal\')" class="waves-effect waves-dark details" style="padding:0">' + lang.lang_parse_thread + '</a></div>' +
 			'<div class="action ' + disp["re"] + ' ' + noauth + '"><a onclick="re(\'' + toot.id +
@@ -1014,14 +1021,14 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 				'</div><div class="area-icon"><a onclick="udg(\'' + toot.id + '\',' +
 				acct_id + ');" user="' + toot.acct + '" class="udg">' +
 				'<img draggable="false" src="' + avatar + '" width="40" class="prof-img" user="' + toot
-					.acct + '"></a></div>' +
+					.acct + '" onerror="this.src=\'../../img/loading.svg\'"></a></div>' +
 				'<div class="area-display_name"><div class="flex-name"><span class="user">' +
 				dis_name + '</span>' +
 				'<span class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;user-select:auto; cursor:text;"> @' +
 				toot.acct + locked + '</span>' +
 				'</div>' +
 				'</div>' +
-				'<div style="justify-content:space-around" class="area-toot"> <div class="cbadge" style="width:100px;">Follows:' +
+				'<div style="justify-content:space-around;top:5px" class="area-actions"> <div class="cbadge" style="width:100px;">Follows:' +
 				toot.following_count +
 				'</div><div class="cbadge" style="width:100px;">Followers:' + toot.followers_count +
 				'</div>' + authhtml +

app/js/tl/tag.js

@@ -10,7 +10,7 @@ if (location.search) {
 }
 //よく使うタグ
 function tagShow(tag) {
-    $("[data-tag=" + decodeURI(tag) + "]").toggleClass("hide");
+    $("[data-tag=" + decodeURI(tag).toLowerCase() + "]").toggleClass("hide");
 }
 //タグ追加
 function tagPin(tag) {

app/js/userdata/his-data.js

@@ -622,12 +622,17 @@ function showMat() {
 		var templete = "";
 		Object.keys(json).forEach(function (key) {
 			var user = json[key];
+			if (user.avatar) {
+				var avatar = user.avatar
+			} else {
+				var avatar = "../../img/loading.svg"
+			}
 			templete = templete +
 				'<div class="" style="padding-top:5px;">' +
 				'<div style="padding:0; margin:0; width:400px; max-width:100%; display:flex; align-items:flex-end;">' +
 				'<div style="flex-basis:40px;"><a onclick="udgEx(\'' + user.user + '\',' +
 				acct_id + ');" user="' + user.user + '" class="udg">' +
-				'<img src="' + user.avatar + '" width="40" class="prof-img" user="' + user.user + '"></a></div>' +
+				'<img src="' + avatar + '" width="40" class="prof-img" user="' + user.user + '"></a></div>' +
 				'<div style="flex-grow:3; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;user-select:auto; cursor:text;"><big>' +
 				escapeHTML(user.screen_name) + '</big></div>' +
 				'<div class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;user-select:auto; cursor:text;"> @' +

app/js/userdata/showOnTL.js

@@ -79,8 +79,10 @@ function udg(user, acct_id) {
 		}
 		//moved設定時
 		if (json.moved) {
-			M.toast({ html: lang.lang_showontl_movetxt + '<button class="btn-flat toast-action" onclick="udg(\'' +
+			M.toast({
-			json.moved.id + '\',\'' + acct_id + '\')">' + lang.lang_showontl_movebtn + '</button>', displayLength: 4000 })
+				html: lang.lang_showontl_movetxt + '<button class="btn-flat toast-action" onclick="udg(\'' +
+					json.moved.id + '\',\'' + acct_id + '\')">' + lang.lang_showontl_movebtn + '</button>', displayLength: 4000
+			})
 		}
 		$('#his-data').modal('open');
 		$('#his-data').attr("user-id", user);
@@ -164,7 +166,7 @@ function udg(user, acct_id) {
 		}
 		$("#his-des").attr("data-acct", acct_id);
 		$('#his-data').css('background-size', 'cover');
-		$("#his-data .tab-content").css("height", $("#his-float-timeline").height() - 70 + "px")
+		$("#his-float-timeline").css("height", $("#his-data-show").height() + "px")
 		localStorage.setItem("history", user);
 		//自分の時
 		if (json.acct == localStorage.getItem("user_" + acct_id)) {
@@ -403,8 +405,9 @@ function relations(user, acct_id) {
 		}
 		//Blocked
 		if (json.blocked_by) {
-			$("#his-float-timeline").hide();
+			$("#my-data-nav .btn").addClass("disabled")
-			$("#his-float-blocked").show();
+			$(".his-var-content").hide();
+			$("#his-float-blocked").show()
 			$("#his-follow-btn").hide()
 		}
 
@@ -428,8 +431,9 @@ function hisclose() {
 	localStorage.removeItem("history");
 }
 function reset() {
-	$(".tab-content:eq(0)").show();
+	$(".his-var-content:eq(0)").show();
-	$(".tab-content:gt(0)").hide();
+	$(".his-var-content:gt(0)").hide();
+	$("#my-data-nav .btn").removeClass("disabled")
 	$(".active-back").removeClass("active-back");
 	$(".column-first").addClass("active-back");
 	$("#his-name").text("Loading");
@@ -478,10 +482,13 @@ function reset() {
 	$("#his-main-acct").show();
 	$("#his-proof-prof").html("")
 }
-$('#my-data-nav .tab').on('click', function () {
+$('#my-data-nav .anc-link').on('click', function () {
-	var target = $(this).find("a").attr("go");
+	var target = $(this).attr("go");
-	$("#my-data-nav .tab").removeClass("active-back");
+	if (target) {
+		$("#my-data-nav .anc-link").removeClass("active-back");
 		$(this).addClass("active-back");
 		$(target).show();
-	$(".tab-content:not(" + target + ")").hide();
+		$(".his-var-content:not(" + target + ")").hide();
+	}
+
 });

app/main/css.js

@@ -55,11 +55,13 @@ function css(mainWindow) {
 				var beforehover = "#757575";
 				var selected = "#3f3f3f"
 				var selectedWithShare = "#b2babd"
+				var gray = "#757575"
 			} else {
 				var drag = "rgba(0, 0, 0, 0.8)";
 				var beforehover = "#9e9e9e";
 				var selected = "#c0c0c0"
 				var selectedWithShare = "#003a30"
+				var gray = "#cccccc"
 			}
 			if (json.props) {
 				if (json.props.TheDeskAccent) {
@@ -79,7 +81,9 @@ function css(mainWindow) {
 				secondary +
 				";--active:" + primary + ";--postbox:" + primary + ";--modalfooter:" +
 				primary +
-				";--accentbtn:" + primary + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}.customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
+				";--accentbtn:" + primary + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+
+				"--gray:" + gray + ";"+
+				".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
 			e.sender.webContents.send('theme-css-response', css);
 		} catch (e) {
 			var css = "";

app/main/np.js

@@ -22,6 +22,8 @@ function np(mainWindow) {
                     console.error(error);
                     e.sender.webContents.send('itunes-np', error);
                 }
+            } else {
+                
             }
         }
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thedesk",
-  "version": "18.8.0",
+  "version": "18.8.3",
   "description": "TheDesk is a Mastodon client for PC.",
   "repository": "https://github.com/cutls/TheDesk",
   "main": "main.js",

app/view/bg/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.0)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,78 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Отваряне в браузъра</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									id="his-main-acct" onclick="setMain()"
-					</div><br>
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
-					<div id="his-matching-list">
+							</div>
-						Намерете хора подобни на този потребител.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
-						<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Намери</button>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Времева линия" class="btn active-back column-first anc-link waves-effect"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Времева линия</a>
-								<a go="#his-tl" title="Времева линия"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Следвам" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>→Следвам</a>
+							<a go="#his-follower-list" title="Последователи" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>←Последователи</a>
+							<a go="#his-list" title="Списък" class="btn only-his-data anc-link waves-effect"><i
+									class="material-icons">list</i>Списък</a>
+							<a go="#his-fav-list" title="Любими" class="btn only-my-data anc-link waves-effect"><i
+									class="material-icons">star</i>Любими</a>
+							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>Още</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Блокове"><i class="material-icons">block</i>Блокове</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Следвам"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Заглуши"><i
+											class="material-icons">voice_over_off</i>Заглуши</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Последователи"><i
+									<a href="#" title="Блок домейн"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">cancel_schedule_send</i>Блок домейн</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Свързан-профил"><i
+									<a href="#" title="Редактиране на профила"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Редактиране на профила</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="Списък"><i class="material-icons">list</i></a>
+									<a href="#" title="Следвайте исканията"><i
+											class="material-icons">how_to_reg</i>Следвайте исканията</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Любими"><i class="material-icons">star</i></a>
+									<a href="#" title="Предложени"><i class="material-icons">recent_actors</i>Предложени</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Блокове"><i class="material-icons">block</i></a>
+									<a href="#" title="Свързан-профил"><i
+											class="material-icons">account_box</i>Свързан-профил</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link" go="#his-matching-list">
-								<a go="#his-blocking-list" title="Блокове"><i
+									<a href="#" title="Намерете хора подобни на този потребител."><i
-										class="material-icons">voice_over_off</i></a>
+											class="material-icons">group_work</i>User Matching</a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Блок домейн"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Редактиране на профила"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Следвайте исканията"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Предложени"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">Още</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">Още</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">Още</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Използване на друг профил да се Следвам((Невъзможно да се спре на следването))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +536,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Показване на профила</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Следвайте, за да добавите този потребител към списъците.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">Още</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">Още</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">Още</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +569,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Добави</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Показвано име
+						<div id="his-prof-list" class="his-var-content">Показвано име
 							<br>
 							<input type="text" placeholder="Показвано име" id="his-name-val" style="max-width:250px;">
 							<br>Бележка
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Бележка" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Бележка" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Бележка</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,22 +590,30 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">Още</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
+						<div id="his-matching-list" class="his-var-content">
+							Намерете хора подобни на този потребител.<br>
+							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
+								Matching</a><br>
+							<div id="his-matching-list-contents" class="cont-series"></div>
+							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">Намери</button>
 						</div>
-				<div class="his-float" id="his-float-blocked">
+						<div id="his-float-blocked">
 							<div>Вие сте блокирани. Защо?</div>
 						</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Назад</button>
@@ -666,24 +674,17 @@
 			<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-Usamin_18-8-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-8-3" class="release-do" style="display:none; ">
 				<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 				<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-				<h5>Release Note Usamin (18.8.0)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・トレンドタグに対応<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・チェコ語, ブルガリア語, ドイツ語に対応<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・TheDeskお知らせ機能の仕様更新<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・支援手段にLiberapayを追加<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・アイコンを描きなおした<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・#InstanceTicker の仕様変更に対応<br>
-				・起動がだいぶ速くなったと思う<br>
-				・一部master追従インスタンスでAPIが削除されたことに対する対応<br>
-				・アンケートの投票時のバグを修正<br>
-				・ストリーミング再接続機能をやめてカラムをリロードする機能を追加<br>
-				・カラムを追加, 削除するときに全体を再読込しないようになった<br>
-				・Windows向けNowPlayingを削除(実装的, ライセンス的問題です)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>
@@ -1004,7 +1005,7 @@
 			(これは支援の有無に関わらず定期的に出ます。)<br>
 			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
 			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
-			<br>
+			ご安心ください。インターネット上のフリー百科事典のような高圧的支援要求はいたしません。コーヒーも要求いたしません。<br>
 			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
 			それでも、あなたはTheDeskを使っています。<br>
 			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>

app/view/cs/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.0)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,78 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Open in browser</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									id="his-main-acct" onclick="setMain()"
-					</div><br>
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
-					<div id="his-matching-list">
+							</div>
-						Get people resembling this user.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
-						<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Get</button>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Časová osa" class="btn active-back column-first anc-link waves-effect"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Časová osa</a>
-								<a go="#his-tl" title="Časová osa"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Sledovat" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>→Sledovat</a>
+							<a go="#his-follower-list" title="Sledující" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>←Sledující</a>
+							<a go="#his-list" title="Seznam" class="btn only-his-data anc-link waves-effect"><i
+									class="material-icons">list</i>Seznam</a>
+							<a go="#his-fav-list" title="Oblíbit" class="btn only-my-data anc-link waves-effect"><i
+									class="material-icons">star</i>Oblíbit</a>
+							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>More</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Blocks"><i class="material-icons">block</i>Blocks</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Sledovat"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Mute"><i
+											class="material-icons">voice_over_off</i>Mute</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Sledující"><i
+									<a href="#" title="Domain block"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">cancel_schedule_send</i>Domain block</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Cross-account"><i
+									<a href="#" title="Edit profile"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Edit profile</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="Seznam"><i class="material-icons">list</i></a>
+									<a href="#" title="Follow requests"><i
+											class="material-icons">how_to_reg</i>Follow requests</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Oblíbit"><i class="material-icons">star</i></a>
+									<a href="#" title="Suggest"><i class="material-icons">recent_actors</i>Suggest</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Blocks"><i class="material-icons">block</i></a>
+									<a href="#" title="Cross-account"><i
+											class="material-icons">account_box</i>Cross-account</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link" go="#his-matching-list">
-								<a go="#his-blocking-list" title="Blocks"><i
+									<a href="#" title="Get people resembling this user."><i
-										class="material-icons">voice_over_off</i></a>
+											class="material-icons">group_work</i>User Matching</a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Domain block"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Edit profile"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Follow requests"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Suggest"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">More</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">More</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">More</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Použít jiný účet to Sledovat((Unable to unfollow))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +536,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Show profile</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Follow to add this user to lists.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">More</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">More</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">More</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +569,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Přidat</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Display name
+						<div id="his-prof-list" class="his-var-content">Display name
 							<br>
 							<input type="text" placeholder="Display name" id="his-name-val" style="max-width:250px;">
 							<br>Note
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Note" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Note" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Note</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,22 +590,30 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">More</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
+						<div id="his-matching-list" class="his-var-content">
+							Get people resembling this user.<br>
+							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
+								Matching</a><br>
+							<div id="his-matching-list-contents" class="cont-series"></div>
+							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">Get</button>
 						</div>
-				<div class="his-float" id="his-float-blocked">
+						<div id="his-float-blocked">
 							<div>You are blocked. Why?</div>
 						</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Zpět</button>
@@ -666,24 +674,17 @@
 			<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-Usamin_18-8-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-8-3" class="release-do" style="display:none; ">
 				<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 				<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-				<h5>Release Note Usamin (18.8.0)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・トレンドタグに対応<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・チェコ語, ブルガリア語, ドイツ語に対応<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・TheDeskお知らせ機能の仕様更新<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・支援手段にLiberapayを追加<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・アイコンを描きなおした<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・#InstanceTicker の仕様変更に対応<br>
-				・起動がだいぶ速くなったと思う<br>
-				・一部master追従インスタンスでAPIが削除されたことに対する対応<br>
-				・アンケートの投票時のバグを修正<br>
-				・ストリーミング再接続機能をやめてカラムをリロードする機能を追加<br>
-				・カラムを追加, 削除するときに全体を再読込しないようになった<br>
-				・Windows向けNowPlayingを削除(実装的, ライセンス的問題です)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>
@@ -1004,7 +1005,7 @@
 			(これは支援の有無に関わらず定期的に出ます。)<br>
 			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
 			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
-			<br>
+			ご安心ください。インターネット上のフリー百科事典のような高圧的支援要求はいたしません。コーヒーも要求いたしません。<br>
 			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
 			それでも、あなたはTheDeskを使っています。<br>
 			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>

app/view/de/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.0)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,78 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Im Browser öffnen</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Im Hauptkonto einstellen</a><br>
+									id="his-main-acct" onclick="setMain()"
-					</div><br>
+									style="width: calc(100% - 10px)">Im Hauptkonto einstellen</a><br>
-					<div id="his-matching-list">
+							</div>
-						Get people resembling this user.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
-						<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Holen</button>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Verlauf" class="btn active-back column-first anc-link waves-effect"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Verlauf</a>
-								<a go="#his-tl" title="Verlauf"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Folgen" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>→Folgen</a>
+							<a go="#his-follower-list" title="Abonnenten" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>←Abonnenten</a>
+							<a go="#his-list" title="Liste" class="btn only-his-data anc-link waves-effect"><i
+									class="material-icons">list</i>Liste</a>
+							<a go="#his-fav-list" title="Favoriten" class="btn only-my-data anc-link waves-effect"><i
+									class="material-icons">star</i>Favoriten</a>
+							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>Mehr</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Blockiert"><i class="material-icons">block</i>Blockiert</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Folgen"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Stummschalten"><i
+											class="material-icons">voice_over_off</i>Stummschalten</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Abonnenten"><i
+									<a href="#" title="Domain block"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">cancel_schedule_send</i>Domain block</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Cross-Account"><i
+									<a href="#" title="Profil bearbeiten"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Profil bearbeiten</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="Liste"><i class="material-icons">list</i></a>
+									<a href="#" title="Anfragen folgen"><i
+											class="material-icons">how_to_reg</i>Anfragen folgen</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Favoriten"><i class="material-icons">star</i></a>
+									<a href="#" title="Vorschlagen"><i class="material-icons">recent_actors</i>Vorschlagen</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Blockiert"><i class="material-icons">block</i></a>
+									<a href="#" title="Cross-Account"><i
+											class="material-icons">account_box</i>Cross-Account</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link" go="#his-matching-list">
-								<a go="#his-blocking-list" title="Blockiert"><i
+									<a href="#" title="Get people resembling this user."><i
-										class="material-icons">voice_over_off</i></a>
+											class="material-icons">group_work</i>User Matching</a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Domain block"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Profil bearbeiten"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Anfragen folgen"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Vorschlagen"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">Mehr</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">Mehr</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">Mehr</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Anderes Konto verwenden an Folgen((Unable to unfollow))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +536,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Benutzerprofil</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Folgen, um diesen Benutzer zu Listen hinzuzufügen.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">Mehr</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">Mehr</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">Mehr</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +569,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Hinzufügen</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Anzeigename
+						<div id="his-prof-list" class="his-var-content">Anzeigename
 							<br>
 							<input type="text" placeholder="Anzeigename" id="his-name-val" style="max-width:250px;">
 							<br>Notiz
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Notiz" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Notiz" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Notiz</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,22 +590,30 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">Mehr</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
+						<div id="his-matching-list" class="his-var-content">
+							Get people resembling this user.<br>
+							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
+								Matching</a><br>
+							<div id="his-matching-list-contents" class="cont-series"></div>
+							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">Holen</button>
 						</div>
-				<div class="his-float" id="his-float-blocked">
+						<div id="his-float-blocked">
 							<div>Sie sind blockiert. Warum?</div>
 						</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Zurück</button>
@@ -666,24 +674,17 @@
 			<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-Usamin_18-8-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-8-3" class="release-do" style="display:none; ">
 				<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 				<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-				<h5>Release Note Usamin (18.8.0)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・トレンドタグに対応<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・チェコ語, ブルガリア語, ドイツ語に対応<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・TheDeskお知らせ機能の仕様更新<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・支援手段にLiberapayを追加<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・アイコンを描きなおした<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・#InstanceTicker の仕様変更に対応<br>
-				・起動がだいぶ速くなったと思う<br>
-				・一部master追従インスタンスでAPIが削除されたことに対する対応<br>
-				・アンケートの投票時のバグを修正<br>
-				・ストリーミング再接続機能をやめてカラムをリロードする機能を追加<br>
-				・カラムを追加, 削除するときに全体を再読込しないようになった<br>
-				・Windows向けNowPlayingを削除(実装的, ライセンス的問題です)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>
@@ -1004,7 +1005,7 @@
 			(これは支援の有無に関わらず定期的に出ます。)<br>
 			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
 			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
-			<br>
+			ご安心ください。インターネット上のフリー百科事典のような高圧的支援要求はいたしません。コーヒーも要求いたしません。<br>
 			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
 			それでも、あなたはTheDeskを使っています。<br>
 			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>

app/view/en/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.0)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,78 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Open in browser</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									id="his-main-acct" onclick="setMain()"
-					</div><br>
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
-					<div id="his-matching-list">
+							</div>
-						Get people resembling this user.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
-						<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Get</button>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Timeline" class="btn active-back column-first anc-link waves-effect"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Timeline</a>
-								<a go="#his-tl" title="Timeline"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Follow" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>→Follow</a>
+							<a go="#his-follower-list" title="Follower" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>←Follower</a>
+							<a go="#his-list" title="List" class="btn only-his-data anc-link waves-effect"><i
+									class="material-icons">list</i>List</a>
+							<a go="#his-fav-list" title="Favourite" class="btn only-my-data anc-link waves-effect"><i
+									class="material-icons">star</i>Favourite</a>
+							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>More</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Blocks"><i class="material-icons">block</i>Blocks</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Follow"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Mute"><i
+											class="material-icons">voice_over_off</i>Mute</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Follower"><i
+									<a href="#" title="Domain block"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">cancel_schedule_send</i>Domain block</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Cross-account"><i
+									<a href="#" title="Edit profile"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Edit profile</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="List"><i class="material-icons">list</i></a>
+									<a href="#" title="Follow requests"><i
+											class="material-icons">how_to_reg</i>Follow requests</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Favourite"><i class="material-icons">star</i></a>
+									<a href="#" title="Suggest"><i class="material-icons">recent_actors</i>Suggest</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Blocks"><i class="material-icons">block</i></a>
+									<a href="#" title="Cross-account"><i
+											class="material-icons">account_box</i>Cross-account</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link" go="#his-matching-list">
-								<a go="#his-blocking-list" title="Blocks"><i
+									<a href="#" title="Get people resembling this user."><i
-										class="material-icons">voice_over_off</i></a>
+											class="material-icons">group_work</i>User Matching</a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Domain block"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Edit profile"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Follow requests"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Suggest"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">More</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">More</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">More</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Use other account to Follow((Unable to unfollow))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +536,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Show profile</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Follow to add this user to lists.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">More</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">More</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">More</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +569,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Add</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Display name
+						<div id="his-prof-list" class="his-var-content">Display name
 							<br>
 							<input type="text" placeholder="Display name" id="his-name-val" style="max-width:250px;">
 							<br>Note
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Note" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Note" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Note</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,22 +590,30 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">More</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
+						<div id="his-matching-list" class="his-var-content">
+							Get people resembling this user.<br>
+							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
+								Matching</a><br>
+							<div id="his-matching-list-contents" class="cont-series"></div>
+							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">Get</button>
 						</div>
-				<div class="his-float" id="his-float-blocked">
+						<div id="his-float-blocked">
 							<div>You are blocked. Why?</div>
 						</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Back</button>
@@ -666,24 +674,17 @@
 			<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-Usamin_18-8-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-8-3" class="release-do" style="display:none; ">
 				<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 				<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-				<h5>Release Note Usamin (18.8.0)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・トレンドタグに対応<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・チェコ語, ブルガリア語, ドイツ語に対応<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・TheDeskお知らせ機能の仕様更新<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・支援手段にLiberapayを追加<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・アイコンを描きなおした<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・#InstanceTicker の仕様変更に対応<br>
-				・起動がだいぶ速くなったと思う<br>
-				・一部master追従インスタンスでAPIが削除されたことに対する対応<br>
-				・アンケートの投票時のバグを修正<br>
-				・ストリーミング再接続機能をやめてカラムをリロードする機能を追加<br>
-				・カラムを追加, 削除するときに全体を再読込しないようになった<br>
-				・Windows向けNowPlayingを削除(実装的, ライセンス的問題です)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>
@@ -1004,7 +1005,7 @@
 			(これは支援の有無に関わらず定期的に出ます。)<br>
 			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
 			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
-			<br>
+			ご安心ください。インターネット上のフリー百科事典のような高圧的支援要求はいたしません。コーヒーも要求いたしません。<br>
 			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
 			それでも、あなたはTheDeskを使っています。<br>
 			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>

app/view/en/setting.vue.js

@@ -149,7 +149,7 @@ var tlConstruction = [
         checkbox: true,
         setValue: "yes",
         text: {
-            head: "Hide NSFW pictures",
+            head: "Hide Mark sensitive pictures",
             desc: "Strong blur effect",
             checkbox: yesno
         }

app/view/ja/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.0)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,78 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">ブラウザで開く</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">メインアカウントに設定</a><br>
+									id="his-main-acct" onclick="setMain()"
-					</div><br>
+									style="width: calc(100% - 10px)">メインアカウントに設定</a><br>
-					<div id="his-matching-list">
+							</div>
-						似ているユーザーを取得できます。<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
-						<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">取得</button>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="タイムライン" class="btn active-back column-first anc-link waves-effect"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>タイムライン</a>
-								<a go="#his-tl" title="タイムライン"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="フォロー" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>→フォロー</a>
+							<a go="#his-follower-list" title="フォロワー" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>←フォロワー</a>
+							<a go="#his-list" title="リスト" class="btn only-his-data anc-link waves-effect"><i
+									class="material-icons">list</i>リスト</a>
+							<a go="#his-fav-list" title="お気に入り" class="btn only-my-data anc-link waves-effect"><i
+									class="material-icons">star</i>お気に入り</a>
+							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>もっと</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="ブロック"><i class="material-icons">block</i>ブロック</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="フォロー"><i class="material-icons">people</i>→</a>
+									<a href="#" title="ミュート"><i
+											class="material-icons">voice_over_off</i>ミュート</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="フォロワー"><i
+									<a href="#" title="ドメインブロック"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">cancel_schedule_send</i>ドメインブロック</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="他のアカウントで操作"><i
+									<a href="#" title="プロフィール編集"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>プロフィール編集</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="リスト"><i class="material-icons">list</i></a>
+									<a href="#" title="フォローリクエスト"><i
+											class="material-icons">how_to_reg</i>フォローリクエスト</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="お気に入り登録"><i class="material-icons">star</i></a>
+									<a href="#" title="おすすめ"><i class="material-icons">recent_actors</i>おすすめ</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="ブロック"><i class="material-icons">block</i></a>
+									<a href="#" title="他のアカウントで操作"><i
+											class="material-icons">account_box</i>他のアカウントで操作</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link" go="#his-matching-list">
-								<a go="#his-blocking-list" title="ブロック"><i
+									<a href="#" title="似ているユーザーを取得できます。"><i
-										class="material-icons">voice_over_off</i></a>
+											class="material-icons">group_work</i>User Matching</a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="ドメインブロック"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="プロフィール編集"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="フォローリクエスト"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="おすすめ"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">もっと</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">もっと</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">もっと</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							他のアカウントを使用するフォロー((解除はできません。))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							で
@@ -537,30 +536,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">プロフィールを表示</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">リストに追加するためにはフォローが必要です。</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">もっと</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">もっと</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">もっと</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +569,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">追加</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">名前
+						<div id="his-prof-list" class="his-var-content">名前
 							<br>
 							<input type="text" placeholder="名前" id="his-name-val" style="max-width:250px;">
 							<br>自己紹介
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="自己紹介" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="自己紹介" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">自己紹介</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,22 +590,30 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">もっと</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
+						<div id="his-matching-list" class="his-var-content">
+							似ているユーザーを取得できます。<br>
+							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
+								Matching</a><br>
+							<div id="his-matching-list-contents" class="cont-series"></div>
+							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">取得</button>
 						</div>
-				<div class="his-float" id="his-float-blocked">
+						<div id="his-float-blocked">
 							<div>ブロックされています。なぜでしょう？</div>
 						</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">一つ前のユーザーデータ</button>
@@ -666,24 +674,17 @@
 			<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-Usamin_18-8-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-8-3" class="release-do" style="display:none; ">
 				<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 				<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-				<h5>Release Note Usamin (18.8.0)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・トレンドタグに対応<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・チェコ語, ブルガリア語, ドイツ語に対応<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・TheDeskお知らせ機能の仕様更新<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・支援手段にLiberapayを追加<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・アイコンを描きなおした<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・#InstanceTicker の仕様変更に対応<br>
-				・起動がだいぶ速くなったと思う<br>
-				・一部master追従インスタンスでAPIが削除されたことに対する対応<br>
-				・アンケートの投票時のバグを修正<br>
-				・ストリーミング再接続機能をやめてカラムをリロードする機能を追加<br>
-				・カラムを追加, 削除するときに全体を再読込しないようになった<br>
-				・Windows向けNowPlayingを削除(実装的, ライセンス的問題です)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>
@@ -1004,7 +1005,7 @@
 			(これは支援の有無に関わらず定期的に出ます。)<br>
 			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
 			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
-			<br>
+			ご安心ください。インターネット上のフリー百科事典のような高圧的支援要求はいたしません。コーヒーも要求いたしません。<br>
 			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
 			それでも、あなたはTheDeskを使っています。<br>
 			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>

app/view/ja/setting.vue.js

@@ -149,7 +149,7 @@ var tlConstruction = [
         checkbox: true,
         setValue: "yes",
         text: {
-            head: "非表示設定の画像(NSFW)を隠す",
+            head: "非表示設定の画像を隠す",
             desc: "きつめのぼかしがかかります。",
             checkbox: yesno
         }

app/view/make/index.sample.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,78 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">@@openinbrowser@@</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">@@mainacct@@</a><br>
+									id="his-main-acct" onclick="setMain()"
-					</div><br>
+									style="width: calc(100% - 10px)">@@mainacct@@</a><br>
-					<div id="his-matching-list">
+							</div>
-						@@likeUserDes@@<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
-						<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">@@get@@</button>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="@@timeline@@" class="btn active-back column-first anc-link waves-effect"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>@@timeline@@</a>
-								<a go="#his-tl" title="@@timeline@@"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="@@follow@@" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>→@@follow@@</a>
+							<a go="#his-follower-list" title="@@follower@@" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>←@@follower@@</a>
+							<a go="#his-list" title="@@list@@" class="btn only-his-data anc-link waves-effect"><i
+									class="material-icons">list</i>@@list@@</a>
+							<a go="#his-fav-list" title="@@favRegist@@" class="btn only-my-data anc-link waves-effect"><i
+									class="material-icons">star</i>@@favRegist@@</a>
+							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>@@more@@</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="@@blocks@@"><i class="material-icons">block</i>@@blocks@@</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="@@follow@@"><i class="material-icons">people</i>→</a>
+									<a href="#" title="@@mute@@"><i
+											class="material-icons">voice_over_off</i>@@mute@@</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="@@follower@@"><i
+									<a href="#" title="@@domainBlock@@"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">cancel_schedule_send</i>@@domainBlock@@</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="@@operateOtherAcct@@"><i
+									<a href="#" title="@@editProf@@"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>@@editProf@@</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="@@list@@"><i class="material-icons">list</i></a>
+									<a href="#" title="@@followReq@@"><i
+											class="material-icons">how_to_reg</i>@@followReq@@</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="@@favRegist@@"><i class="material-icons">star</i></a>
+									<a href="#" title="@@frc@@"><i class="material-icons">recent_actors</i>@@frc@@</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="@@blocks@@"><i class="material-icons">block</i></a>
+									<a href="#" title="@@operateOtherAcct@@"><i
+											class="material-icons">account_box</i>@@operateOtherAcct@@</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link" go="#his-matching-list">
-								<a go="#his-blocking-list" title="@@blocks@@"><i
+									<a href="#" title="@@likeUserDes@@"><i
-										class="material-icons">voice_over_off</i></a>
+											class="material-icons">group_work</i>User Matching</a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="@@domainBlock@@"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="@@editProf@@"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="@@followReq@@"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="@@frc@@"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">@@more@@</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">@@more@@</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">@@more@@</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							@@useOtherAcct1@@@@revoverJP@@@@follow@@(@@warnUseOtherAcct@@)<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							@@revoverJPde@@
@@ -537,30 +536,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">@@openProf@@</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">@@warnListRegist@@</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">@@more@@</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">@@more@@</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">@@more@@</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +569,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">@@add@@</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">@@name@@
+						<div id="his-prof-list" class="his-var-content">@@name@@
 							<br>
 							<input type="text" placeholder="@@name@@" id="his-name-val" style="max-width:250px;">
 							<br>@@note@@
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="@@note@@" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="@@note@@" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">@@note@@</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,22 +590,30 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">@@more@@</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
+						<div id="his-matching-list" class="his-var-content">
+							@@likeUserDes@@<br>
+							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
+								Matching</a><br>
+							<div id="his-matching-list-contents" class="cont-series"></div>
+							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">@@get@@</button>
 						</div>
-				<div class="his-float" id="his-float-blocked">
+						<div id="his-float-blocked">
 							<div>@@blocked@@</div>
 						</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">@@historyBack@@</button>
@@ -666,24 +674,17 @@
 			<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-Usamin_18-8-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-8-3" class="release-do" style="display:none; ">
 				<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 				<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-				<h5>Release Note Usamin (18.8.0)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・トレンドタグに対応<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・チェコ語, ブルガリア語, ドイツ語に対応<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・TheDeskお知らせ機能の仕様更新<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・支援手段にLiberapayを追加<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・アイコンを描きなおした<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・#InstanceTicker の仕様変更に対応<br>
-				・起動がだいぶ速くなったと思う<br>
-				・一部master追従インスタンスでAPIが削除されたことに対する対応<br>
-				・アンケートの投票時のバグを修正<br>
-				・ストリーミング再接続機能をやめてカラムをリロードする機能を追加<br>
-				・カラムを追加, 削除するときに全体を再読込しないようになった<br>
-				・Windows向けNowPlayingを削除(実装的, ライセンス的問題です)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>
@@ -1004,7 +1005,7 @@
 			(これは支援の有無に関わらず定期的に出ます。)<br>
 			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
 			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
-			<br>
+			ご安心ください。インターネット上のフリー百科事典のような高圧的支援要求はいたしません。コーヒーも要求いたしません。<br>
 			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
 			それでも、あなたはTheDeskを使っています。<br>
 			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>

app/view/make/language/en/setting.json

@@ -57,7 +57,7 @@
   "mixsel": "Mixed",
   "locale": "Server's unique locale",
   "localewarn": "This value is available on some Japanese servers",
-  "nswf": "Hide NSFW pictures",
+  "nswf": "Hide Mark sensitive pictures",
   "nsfwwarn": "Strong blur effect",
   "cw": "Hide CW contents",
   "replyct": "Reply counter style",

app/view/make/language/ja/index.json

@@ -64,7 +64,7 @@
     "useOtherAcct2":"の解除はできません",
     "reply":"返信",
     "bt":"ブースト",
-    "favRegist":"お気に入り登録",
+    "favRegist":"お気に入り",
     "openBrowser":"ブラウザで開く",
     "screenshot":"スクリーンショット",
     "copyURL":"URLをコピー",

app/view/make/language/ja/setting.json

@@ -57,7 +57,7 @@
   "mixsel": "混合表示",
   "locale": "独自ロケールを使用",
   "localewarn": "対応サーバーではそのサーバーにあわせた言語表示ができます。",
-  "nswf": "非表示設定の画像(NSFW)を隠す",
+  "nswf": "非表示設定の画像を隠す",
   "nsfwwarn": "きつめのぼかしがかかります。",
   "cw": "非表示設定のテキスト(CW)を隠す",
   "replyct": "リプライ数表示",

app/view/make/make.js

@@ -1,8 +1,9 @@
 const fs = require("fs")
 const readlineSync = require('readline-sync');
-let ver = readlineSync.question('version string (empty: default string)? ');
+let ver = "Usamin (18.8.3)"
-if (!ver) {
+let input = readlineSync.question('version string [empty: '+ ver +' (default)]? ');
-    ver = "Usamin (18.8.0)"
+if (input){
+    ver = input
 }
 console.log("Constructing view files " + ver + ": make sure to update package.json")
 const langs = ["ja", "en", "ps", "bg", "cs", "de"]

app/view/ps/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.0)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,78 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">crwdns455:0crwdne455:0</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">@@mainacct@@</a><br>
+									id="his-main-acct" onclick="setMain()"
-					</div><br>
+									style="width: calc(100% - 10px)">@@mainacct@@</a><br>
-					<div id="his-matching-list">
+							</div>
-						crwdns469:0crwdne469:0<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
-						<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">crwdns470:0crwdne470:0</button>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="crwdns442:0crwdne442:0" class="btn active-back column-first anc-link waves-effect"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>crwdns442:0crwdne442:0</a>
-								<a go="#his-tl" title="crwdns442:0crwdne442:0"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="crwdns440:0crwdne440:0" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>→crwdns440:0crwdne440:0</a>
+							<a go="#his-follower-list" title="crwdns441:0crwdne441:0" class="btn anc-link waves-effect"><i
+									class="material-icons">people</i>←crwdns441:0crwdne441:0</a>
+							<a go="#his-list" title="crwdns444:0crwdne444:0" class="btn only-his-data anc-link waves-effect"><i
+									class="material-icons">list</i>crwdns444:0crwdne444:0</a>
+							<a go="#his-fav-list" title="crwdns434:0crwdne434:0" class="btn only-my-data anc-link waves-effect"><i
+									class="material-icons">star</i>crwdns434:0crwdne434:0</a>
+							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>crwdns457:0crwdne457:0</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="crwdns446:0crwdne446:0"><i class="material-icons">block</i>crwdns446:0crwdne446:0</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="crwdns440:0crwdne440:0"><i class="material-icons">people</i>→</a>
+									<a href="#" title="crwdns449:0crwdne449:0"><i
+											class="material-icons">voice_over_off</i>crwdns449:0crwdne449:0</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="crwdns441:0crwdne441:0"><i
+									<a href="#" title="crwdns450:0crwdne450:0"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">cancel_schedule_send</i>crwdns450:0crwdne450:0</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="crwdns443:0crwdne443:0"><i
+									<a href="#" title="crwdns451:0crwdne451:0"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>crwdns451:0crwdne451:0</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="crwdns444:0crwdne444:0"><i class="material-icons">list</i></a>
+									<a href="#" title="crwdns452:0crwdne452:0"><i
+											class="material-icons">how_to_reg</i>crwdns452:0crwdne452:0</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="crwdns434:0crwdne434:0"><i class="material-icons">star</i></a>
+									<a href="#" title="crwdns456:0crwdne456:0"><i class="material-icons">recent_actors</i>crwdns456:0crwdne456:0</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="crwdns446:0crwdne446:0"><i class="material-icons">block</i></a>
+									<a href="#" title="crwdns443:0crwdne443:0"><i
+											class="material-icons">account_box</i>crwdns443:0crwdne443:0</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link" go="#his-matching-list">
-								<a go="#his-blocking-list" title="crwdns446:0crwdne446:0"><i
+									<a href="#" title="crwdns469:0crwdne469:0"><i
-										class="material-icons">voice_over_off</i></a>
+											class="material-icons">group_work</i>User Matching</a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="crwdns450:0crwdne450:0"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="crwdns451:0crwdne451:0"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="crwdns452:0crwdne452:0"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="crwdns456:0crwdne456:0"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							crwdns430:0crwdne430:0crwdns458:0crwdne458:0crwdns440:0crwdne440:0(crwdns459:0crwdne459:0)<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							crwdns460:0crwdne460:0
@@ -537,30 +536,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">crwdns462:0crwdne462:0</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">crwdns463:0crwdne463:0</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +569,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">crwdns491:0crwdne491:0</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">crwdns465:0crwdne465:0
+						<div id="his-prof-list" class="his-var-content">crwdns465:0crwdne465:0
 							<br>
 							<input type="text" placeholder="crwdns465:0crwdne465:0" id="his-name-val" style="max-width:250px;">
 							<br>crwdns466:0crwdne466:0
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="crwdns466:0crwdne466:0" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="crwdns466:0crwdne466:0" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">crwdns466:0crwdne466:0</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,22 +590,30 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
+						<div id="his-matching-list" class="his-var-content">
+							crwdns469:0crwdne469:0<br>
+							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
+								Matching</a><br>
+							<div id="his-matching-list-contents" class="cont-series"></div>
+							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">crwdns470:0crwdne470:0</button>
 						</div>
-				<div class="his-float" id="his-float-blocked">
+						<div id="his-float-blocked">
 							<div>@@blocked@@</div>
 						</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">crwdns471:0crwdne471:0</button>
@@ -666,24 +674,17 @@
 			<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-Usamin_18-8-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-8-3" class="release-do" style="display:none; ">
 				<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 				<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-				<h5>Release Note Usamin (18.8.0)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・トレンドタグに対応<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・チェコ語, ブルガリア語, ドイツ語に対応<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・TheDeskお知らせ機能の仕様更新<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・支援手段にLiberapayを追加<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・アイコンを描きなおした<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・#InstanceTicker の仕様変更に対応<br>
-				・起動がだいぶ速くなったと思う<br>
-				・一部master追従インスタンスでAPIが削除されたことに対する対応<br>
-				・アンケートの投票時のバグを修正<br>
-				・ストリーミング再接続機能をやめてカラムをリロードする機能を追加<br>
-				・カラムを追加, 削除するときに全体を再読込しないようになった<br>
-				・Windows向けNowPlayingを削除(実装的, ライセンス的問題です)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>
@@ -1004,7 +1005,7 @@
 			(これは支援の有無に関わらず定期的に出ます。)<br>
 			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
 			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
-			<br>
+			ご安心ください。インターネット上のフリー百科事典のような高圧的支援要求はいたしません。コーヒーも要求いたしません。<br>
 			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
 			それでも、あなたはTheDeskを使っています。<br>
 			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>