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

@@ -125,4 +125,9 @@ 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.  
+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/tl.css

@@ -284,7 +284,6 @@ iframe,
   position: relative;
   display: flex;
   justify-content: space-around;
-  width: 250px;
   max-width: 100%;
   grid-area: actions;
 }

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/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) {
+        ipc.send("itunes", e.data[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/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();
@@ -499,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/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)) {
@@ -193,7 +195,7 @@ function udg(user, acct_id) {
 			$("#his-emp-btn").hide();
 			$(".only-my-data").show();
 			$(".only-his-data").hide();
-			if(localStorage.getItem("main")==acct_id){
+			if (localStorage.getItem("main") == acct_id) {
 				$("#his-main-acct").hide();
 			}
 		} else {
@@ -296,7 +298,7 @@ function misskeyUdg(user, acct_id) {
 			$("#his-emp-btn").hide();
 			$(".only-my-data").show();
 			$(".only-his-data").hide();
-			if(localStorage.getItem("main")==acct_id){
+			if (localStorage.getItem("main") == acct_id) {
 				$("#his-main-acct").hide();
 			}
 		} else {
@@ -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) {
-	$(this).addClass("active-back");
+		$("#my-data-nav .anc-link").removeClass("active-back");
-	$(target).show();
+		$(this).addClass("active-back");
-	$(".tab-content:not(" + target + ")").hide();
+		$(target).show();
+		$(".his-var-content:not(" + target + ")").hide();
+	}
+
 });

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.1",
+  "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.1)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,187 +423,195 @@
 	<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 class="his-float" id="his-float-data">
+				<div id="his-data-wrap">
-					<div id="his-basic-prof">
+					<div class="his-float" id="his-float-data">
-						<img src="../../img/loading.svg" id="his-prof" draggable="false">
+						<div id="his-leftside">
-						<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
+							<div id="his-basic-prof">
-						<br>@
+								<img src="../../img/loading.svg" id="his-prof" draggable="false">
-						<span id="his-acct"></span><br>
+								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
-						<span class="gray" id="his-relation"></span>
+								<br>@
-						<br>
+								<span id="his-acct"></span><br>
-						<span class="cbadge">
+								<span class="gray" id="his-relation"></span>
-							<span id="his-sta"></span>Тоот
+								<br>
-						</span>
+								<span class="cbadge">
-						<span class="cbadge">Следвам:
+									<span id="his-sta"></span>Тоот
-							<span id="his-follow"></span>
+								</span>
-						</span>
+								<span class="cbadge">Следвам:
-						<span class="cbadge">Последователи:
+									<span id="his-follow"></span>
-							<span id="his-follower"></span>
+								</span>
-						</span><br>
+								<span class="cbadge">Последователи:
-						<span class="cbadge" style="max-width:150px; width:150px; ">Since:
+									<span id="his-follower"></span>
-							<span id="his-since"></span>
+								</span><br>
-						</span>
+								<span class="cbadge" style="max-width:150px; width:150px; ">Since:
-						<div id="his-proof-prof"></div>
+									<span id="his-since"></span>
-					</div>
+								</span>
-					<div id="his-des" data-acct=""></div><br>
+								<div id="his-proof-prof"></div>
-					<div id="his-plus-action">
+							</div>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
+							<div id="his-des" data-acct=""></div><br>
-							onclick="empUser()">Подчертайте този потребител</a>
+							<div id="his-plus-action">
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
-							id="his-end-btn" onclick="pinUser()">Функция в профила</a><br>
+									onclick="empUser()">Подчертайте този потребител</a>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
-							onclick="profbrws()">Отваряне в браузъра</a>
+									id="his-end-btn" onclick="pinUser()">Функция в профила</a><br>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									onclick="profbrws()">Отваряне в браузъра</a>
-					</div><br>
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-					<div id="his-matching-list">
+									id="his-main-acct" onclick="setMain()"
-						Намерете хора подобни на този потребител.<br>
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+							</div>
-						<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">
-							<li class="tab col my-data-width active-back column-first">
-								<a go="#his-tl" title="Времева линия"><i class="material-icons">timeline</i></a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follow-list" title="Следвам"><i class="material-icons">people</i>→</a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follower-list" title="Последователи"><i
-										class="material-icons">people</i>←</a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-action" title="Свързан-профил"><i
-										class="material-icons">account_box</i></a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-list" title="Списък"><i class="material-icons">list</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-fav-list" title="Любими"><i class="material-icons">star</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-blocking-list" title="Блокове"><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-muting-list" title="Заглуши"><i
-										class="material-icons">voice_over_off</i></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-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 class="his-float" id="his-float-timeline">
-						<div id="his-follow-list-contents" class="cont-series">
+						<div id="my-data-nav">
+							<a go="#his-tl" title="Времева линия" class="btn active-back column-first anc-link waves-effect"><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="anc-link only-my-data" go="#his-muting-list">
+									<a href="#" title="Заглуши"><i
+											class="material-icons">voice_over_off</i>Заглуши</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-domain-list">
+									<a href="#" title="Блок домейн"><i
+											class="material-icons">cancel_schedule_send</i>Блок домейн</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-prof-list">
+									<a href="#" title="Редактиране на профила"><i
+											class="material-icons">create</i>Редактиране на профила</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-request-list">
+									<a href="#" title="Следвайте исканията"><i
+											class="material-icons">how_to_reg</i>Следвайте исканията</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
+									<a href="#" title="Предложени"><i class="material-icons">recent_actors</i>Предложени</a>
+								</li>
+								<li class="anc-link only-his-data" go="#his-action">
+									<a href="#" title="Свързан-профил"><i
+											class="material-icons">account_box</i>Свързан-профил</a>
+								</li>
+								<li class="anc-link" go="#his-matching-list">
+									<a href="#" title="Намерете хора подобни на този потребител."><i
+											class="material-icons">group_work</i>User Matching</a>
+								</li>
+							</ul>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-tl" class="his-var-content">
-							onclick="flw('--now','more')">Още</button>
+							<div id="his-tl-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follower-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follower-list-contents" class="cont-series">
+								onclick="utl('--now','more')">Още</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-follow-list" class="his-var-content">
-							onclick="fer('--now','more')">Още</button>
+							<div id="his-follow-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-action" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						Използване на друг профил да се Следвам((Невъзможно да се спре на следването))<br>
+								onclick="flw('--now','more')">Още</button>
-						<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+						</div>
-						
+						<div id="his-follower-list" class="his-var-content">
-						<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Следвам</a><br>
+							<div id="his-follower-list-contents" class="cont-series">
-						или<br>
+							</div>
-						<a href="#!" class="waves-effect btn"
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-							onclick="udgEx('selector', 'selector')">Показване на профила</a><br>
+								onclick="fer('--now','more')">Още</button>
-					</div>
+						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-action" class="his-var-content">
-						<div id="his-lists-a">Следвайте, за да добавите този потребител към списъците.</div>
+							Използване на друг профил да се Следвам((Невъзможно да се спре на следването))<br>
+							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+							
+							<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Следвам</a><br>
+							или<br>
+							<a href="#!" class="waves-effect btn"
+								onclick="udgEx('selector', 'selector')">Показване на профила</a><br>
+						</div>
+						<div id="his-list" class="his-var-content">
+							<div id="his-lists-a">Следвайте, за да добавите този потребител към списъците.</div>
 
-						<div id="his-lists-b"></div>
+							<div id="his-lists-b"></div>
-					</div>
-					<div id="his-fav-list" class="tab-content">
-						<div id="his-fav-list-contents" class="cont-series">
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-fav-list" class="his-var-content">
-							onclick="showFav('more')">Още</button>
+							<div id="his-fav-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-blocking-list" class="tab-content">
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-						<div id="his-blocking-list-contents" class="cont-series">
+								onclick="showFav('more')">Още</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-blocking-list" class="his-var-content">
-							onclick="showBlo('more')">Още</button>
+							<div id="his-blocking-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-muting-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-muting-list-contents" class="cont-series">
+								onclick="showBlo('more')">Още</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-muting-list" class="his-var-content">
-							onclick="showMut('more')">Още</button>
+							<div id="his-muting-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-domain-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-domain-list-contents" class="cont-series">
+								onclick="showMut('more')">Още</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-domain-list" class="his-var-content">
-							onclick="showDom('more')">Още</button>Добавете домейн за блокиране
+							<div id="his-domain-list-contents" class="cont-series">
-						<br>
+							</div>
-						<input type="text" placeholder="example.com" id="domainblock">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<button class="btn waves-effect" onclick="addDomainblock()">Добави</button>
+								onclick="showDom('more')">Още</button>Добавете домейн за блокиране
-						<br>
+							<br>
-					</div>
+							<input type="text" placeholder="example.com" id="domainblock">
-					<div id="his-prof-list" class="tab-content">Показвано име
+							<button class="btn waves-effect" onclick="addDomainblock()">Добави</button>
-						<br>
+							<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>
-							<label for="his-des-val">Бележка</label>
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-prof-list" class="his-var-content">Показвано име
-							onclick="profedit()">Запази</button>
+							<br>
-						<br>Промяна на аватар:
+							<input type="text" placeholder="Показвано име" id="his-name-val" style="max-width:250px;">
-						<span id="prof-change">
+							<br>Бележка
-							<input type="file" onchange="imgChange(this,'avatar')">
+							<br>
-						</span>
+							<div class="input-field col s12">
-						<br>Промяна на снимката в заглавието:
+								<textarea placeholder="Бележка" id="his-des-val"
-						<span id="header-change">
+									class="materialize-textarea"></textarea>
-							<input type="file" onchange="imgChange(this,'header')">
+								<label for="his-des-val">Бележка</label>
-						</span>
+							</div>
-					</div>
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-					<div id="his-request-list" class="tab-content">
+								onclick="profedit()">Запази</button>
-						<div id="his-request-list-contents" class="cont-series">
+							<br>Промяна на аватар:
+							<span id="prof-change">
+								<input type="file" onchange="imgChange(this,'avatar')">
+							</span>
+							<br>Промяна на снимката в заглавието:
+							<span id="header-change">
+								<input type="file" onchange="imgChange(this,'header')">
+							</span>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-request-list" class="his-var-content">
-							onclick="showReq('more')">Още</button>
+							<div id="his-request-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follow-recom-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follow-recom-contents" class="cont-series">
+								onclick="showReq('more')">Още</button>
+						</div>
+						<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 id="his-float-blocked">
+							<div>Вие сте блокирани. Защо?</div>
 						</div>
 					</div>
 				</div>
-				<div class="his-float" id="his-float-blocked">
-					<div>Вие сте блокирани. Защо?</div>
-				</div>
 			</div>
 		</div>
 		<div class="modal-footer">
@@ -666,18 +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-1" 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.1)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・タイムライン上のトゥートのレイアウトを変更。より見やすく、多くの情報を表示するように。<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・タイムライン上の「グレー」の明度をあげた。<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・ブロック, ミュート時にダイアログを表示し誤爆を防ぐ。<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・CWボタンのデザイン変更<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・ミュート一覧が表示されなかった不具合を修正。<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・会話を表示ボタン(リプ元が指定されている場合)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>

app/view/cs/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.1)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,187 +423,195 @@
 	<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 class="his-float" id="his-float-data">
+				<div id="his-data-wrap">
-					<div id="his-basic-prof">
+					<div class="his-float" id="his-float-data">
-						<img src="../../img/loading.svg" id="his-prof" draggable="false">
+						<div id="his-leftside">
-						<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
+							<div id="his-basic-prof">
-						<br>@
+								<img src="../../img/loading.svg" id="his-prof" draggable="false">
-						<span id="his-acct"></span><br>
+								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
-						<span class="gray" id="his-relation"></span>
+								<br>@
-						<br>
+								<span id="his-acct"></span><br>
-						<span class="cbadge">
+								<span class="gray" id="his-relation"></span>
-							<span id="his-sta"></span>Tooty
+								<br>
-						</span>
+								<span class="cbadge">
-						<span class="cbadge">Sledovat:
+									<span id="his-sta"></span>Tooty
-							<span id="his-follow"></span>
+								</span>
-						</span>
+								<span class="cbadge">Sledovat:
-						<span class="cbadge">Sledující:
+									<span id="his-follow"></span>
-							<span id="his-follower"></span>
+								</span>
-						</span><br>
+								<span class="cbadge">Sledující:
-						<span class="cbadge" style="max-width:150px; width:150px; ">Since:
+									<span id="his-follower"></span>
-							<span id="his-since"></span>
+								</span><br>
-						</span>
+								<span class="cbadge" style="max-width:150px; width:150px; ">Since:
-						<div id="his-proof-prof"></div>
+									<span id="his-since"></span>
-					</div>
+								</span>
-					<div id="his-des" data-acct=""></div><br>
+								<div id="his-proof-prof"></div>
-					<div id="his-plus-action">
+							</div>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
+							<div id="his-des" data-acct=""></div><br>
-							onclick="empUser()">Zdůraznit tohoto uživatele</a>
+							<div id="his-plus-action">
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
-							id="his-end-btn" onclick="pinUser()">Feature on profile</a><br>
+									onclick="empUser()">Zdůraznit tohoto uživatele</a>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
-							onclick="profbrws()">Open in browser</a>
+									id="his-end-btn" onclick="pinUser()">Feature on profile</a><br>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									onclick="profbrws()">Open in browser</a>
-					</div><br>
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-					<div id="his-matching-list">
+									id="his-main-acct" onclick="setMain()"
-						Get people resembling this user.<br>
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+							</div>
-						<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">
-							<li class="tab col my-data-width active-back column-first">
-								<a go="#his-tl" title="Časová osa"><i class="material-icons">timeline</i></a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follow-list" title="Sledovat"><i class="material-icons">people</i>→</a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follower-list" title="Sledující"><i
-										class="material-icons">people</i>←</a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-action" title="Cross-account"><i
-										class="material-icons">account_box</i></a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-list" title="Seznam"><i class="material-icons">list</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-fav-list" title="Oblíbit"><i class="material-icons">star</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-blocking-list" title="Blocks"><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-muting-list" title="Mute"><i
-										class="material-icons">voice_over_off</i></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-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 class="his-float" id="his-float-timeline">
-						<div id="his-follow-list-contents" class="cont-series">
+						<div id="my-data-nav">
+							<a go="#his-tl" title="Časová osa" class="btn active-back column-first anc-link waves-effect"><i
+									class="material-icons">timeline</i>Časová osa</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="anc-link only-my-data" go="#his-muting-list">
+									<a href="#" title="Mute"><i
+											class="material-icons">voice_over_off</i>Mute</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-domain-list">
+									<a href="#" title="Domain block"><i
+											class="material-icons">cancel_schedule_send</i>Domain block</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-prof-list">
+									<a href="#" title="Edit profile"><i
+											class="material-icons">create</i>Edit profile</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-request-list">
+									<a href="#" title="Follow requests"><i
+											class="material-icons">how_to_reg</i>Follow requests</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
+									<a href="#" title="Suggest"><i class="material-icons">recent_actors</i>Suggest</a>
+								</li>
+								<li class="anc-link only-his-data" go="#his-action">
+									<a href="#" title="Cross-account"><i
+											class="material-icons">account_box</i>Cross-account</a>
+								</li>
+								<li class="anc-link" go="#his-matching-list">
+									<a href="#" title="Get people resembling this user."><i
+											class="material-icons">group_work</i>User Matching</a>
+								</li>
+							</ul>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-tl" class="his-var-content">
-							onclick="flw('--now','more')">More</button>
+							<div id="his-tl-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follower-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follower-list-contents" class="cont-series">
+								onclick="utl('--now','more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-follow-list" class="his-var-content">
-							onclick="fer('--now','more')">More</button>
+							<div id="his-follow-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-action" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						Použít jiný účet to Sledovat((Unable to unfollow))<br>
+								onclick="flw('--now','more')">More</button>
-						<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+						</div>
-						
+						<div id="his-follower-list" class="his-var-content">
-						<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Sledovat</a><br>
+							<div id="his-follower-list-contents" class="cont-series">
-						or<br>
+							</div>
-						<a href="#!" class="waves-effect btn"
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-							onclick="udgEx('selector', 'selector')">Show profile</a><br>
+								onclick="fer('--now','more')">More</button>
-					</div>
+						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-action" class="his-var-content">
-						<div id="his-lists-a">Follow to add this user to lists.</div>
+							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>
+							
+							<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Sledovat</a><br>
+							or<br>
+							<a href="#!" class="waves-effect btn"
+								onclick="udgEx('selector', 'selector')">Show profile</a><br>
+						</div>
+						<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 id="his-lists-b"></div>
-					</div>
-					<div id="his-fav-list" class="tab-content">
-						<div id="his-fav-list-contents" class="cont-series">
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-fav-list" class="his-var-content">
-							onclick="showFav('more')">More</button>
+							<div id="his-fav-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-blocking-list" class="tab-content">
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-						<div id="his-blocking-list-contents" class="cont-series">
+								onclick="showFav('more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-blocking-list" class="his-var-content">
-							onclick="showBlo('more')">More</button>
+							<div id="his-blocking-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-muting-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-muting-list-contents" class="cont-series">
+								onclick="showBlo('more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-muting-list" class="his-var-content">
-							onclick="showMut('more')">More</button>
+							<div id="his-muting-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-domain-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-domain-list-contents" class="cont-series">
+								onclick="showMut('more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-domain-list" class="his-var-content">
-							onclick="showDom('more')">More</button>Add blocking domain
+							<div id="his-domain-list-contents" class="cont-series">
-						<br>
+							</div>
-						<input type="text" placeholder="example.com" id="domainblock">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<button class="btn waves-effect" onclick="addDomainblock()">Přidat</button>
+								onclick="showDom('more')">More</button>Add blocking domain
-						<br>
+							<br>
-					</div>
+							<input type="text" placeholder="example.com" id="domainblock">
-					<div id="his-prof-list" class="tab-content">Display name
+							<button class="btn waves-effect" onclick="addDomainblock()">Přidat</button>
-						<br>
+							<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>
-							<label for="his-des-val">Note</label>
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-prof-list" class="his-var-content">Display name
-							onclick="profedit()">Uložit</button>
+							<br>
-						<br>Změnit avatar:
+							<input type="text" placeholder="Display name" id="his-name-val" style="max-width:250px;">
-						<span id="prof-change">
+							<br>Note
-							<input type="file" onchange="imgChange(this,'avatar')">
+							<br>
-						</span>
+							<div class="input-field col s12">
-						<br>Změnit obrázek záhlaví:
+								<textarea placeholder="Note" id="his-des-val"
-						<span id="header-change">
+									class="materialize-textarea"></textarea>
-							<input type="file" onchange="imgChange(this,'header')">
+								<label for="his-des-val">Note</label>
-						</span>
+							</div>
-					</div>
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-					<div id="his-request-list" class="tab-content">
+								onclick="profedit()">Uložit</button>
-						<div id="his-request-list-contents" class="cont-series">
+							<br>Změnit avatar:
+							<span id="prof-change">
+								<input type="file" onchange="imgChange(this,'avatar')">
+							</span>
+							<br>Změnit obrázek záhlaví:
+							<span id="header-change">
+								<input type="file" onchange="imgChange(this,'header')">
+							</span>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-request-list" class="his-var-content">
-							onclick="showReq('more')">More</button>
+							<div id="his-request-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follow-recom-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follow-recom-contents" class="cont-series">
+								onclick="showReq('more')">More</button>
+						</div>
+						<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 id="his-float-blocked">
+							<div>You are blocked. Why?</div>
 						</div>
 					</div>
 				</div>
-				<div class="his-float" id="his-float-blocked">
-					<div>You are blocked. Why?</div>
-				</div>
 			</div>
 		</div>
 		<div class="modal-footer">
@@ -666,18 +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-1" 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.1)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・タイムライン上のトゥートのレイアウトを変更。より見やすく、多くの情報を表示するように。<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・タイムライン上の「グレー」の明度をあげた。<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・ブロック, ミュート時にダイアログを表示し誤爆を防ぐ。<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・CWボタンのデザイン変更<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・ミュート一覧が表示されなかった不具合を修正。<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・会話を表示ボタン(リプ元が指定されている場合)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>

app/view/de/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.1)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,187 +423,195 @@
 	<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 class="his-float" id="his-float-data">
+				<div id="his-data-wrap">
-					<div id="his-basic-prof">
+					<div class="his-float" id="his-float-data">
-						<img src="../../img/loading.svg" id="his-prof" draggable="false">
+						<div id="his-leftside">
-						<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
+							<div id="his-basic-prof">
-						<br>@
+								<img src="../../img/loading.svg" id="his-prof" draggable="false">
-						<span id="his-acct"></span><br>
+								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
-						<span class="gray" id="his-relation"></span>
+								<br>@
-						<br>
+								<span id="his-acct"></span><br>
-						<span class="cbadge">
+								<span class="gray" id="his-relation"></span>
-							<span id="his-sta"></span>Tröts
+								<br>
-						</span>
+								<span class="cbadge">
-						<span class="cbadge">Folgen:
+									<span id="his-sta"></span>Tröts
-							<span id="his-follow"></span>
+								</span>
-						</span>
+								<span class="cbadge">Folgen:
-						<span class="cbadge">Abonnenten:
+									<span id="his-follow"></span>
-							<span id="his-follower"></span>
+								</span>
-						</span><br>
+								<span class="cbadge">Abonnenten:
-						<span class="cbadge" style="max-width:150px; width:150px; ">Since:
+									<span id="his-follower"></span>
-							<span id="his-since"></span>
+								</span><br>
-						</span>
+								<span class="cbadge" style="max-width:150px; width:150px; ">Since:
-						<div id="his-proof-prof"></div>
+									<span id="his-since"></span>
-					</div>
+								</span>
-					<div id="his-des" data-acct=""></div><br>
+								<div id="his-proof-prof"></div>
-					<div id="his-plus-action">
+							</div>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
+							<div id="his-des" data-acct=""></div><br>
-							onclick="empUser()">Diesen Benutzer hervorheben</a>
+							<div id="his-plus-action">
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
-							id="his-end-btn" onclick="pinUser()">Auf dem Profil zeigen</a><br>
+									onclick="empUser()">Diesen Benutzer hervorheben</a>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
-							onclick="profbrws()">Im Browser öffnen</a>
+									id="his-end-btn" onclick="pinUser()">Auf dem Profil zeigen</a><br>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Im Hauptkonto einstellen</a><br>
+									onclick="profbrws()">Im Browser öffnen</a>
-					</div><br>
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-					<div id="his-matching-list">
+									id="his-main-acct" onclick="setMain()"
-						Get people resembling this user.<br>
+									style="width: calc(100% - 10px)">Im Hauptkonto einstellen</a><br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+							</div>
-						<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">
-							<li class="tab col my-data-width active-back column-first">
-								<a go="#his-tl" title="Verlauf"><i class="material-icons">timeline</i></a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follow-list" title="Folgen"><i class="material-icons">people</i>→</a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follower-list" title="Abonnenten"><i
-										class="material-icons">people</i>←</a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-action" title="Cross-Account"><i
-										class="material-icons">account_box</i></a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-list" title="Liste"><i class="material-icons">list</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-fav-list" title="Favoriten"><i class="material-icons">star</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-blocking-list" title="Blockiert"><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-muting-list" title="Stummschalten"><i
-										class="material-icons">voice_over_off</i></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-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 class="his-float" id="his-float-timeline">
-						<div id="his-follow-list-contents" class="cont-series">
+						<div id="my-data-nav">
+							<a go="#his-tl" title="Verlauf" class="btn active-back column-first anc-link waves-effect"><i
+									class="material-icons">timeline</i>Verlauf</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="anc-link only-my-data" go="#his-muting-list">
+									<a href="#" title="Stummschalten"><i
+											class="material-icons">voice_over_off</i>Stummschalten</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-domain-list">
+									<a href="#" title="Domain block"><i
+											class="material-icons">cancel_schedule_send</i>Domain block</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-prof-list">
+									<a href="#" title="Profil bearbeiten"><i
+											class="material-icons">create</i>Profil bearbeiten</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-request-list">
+									<a href="#" title="Anfragen folgen"><i
+											class="material-icons">how_to_reg</i>Anfragen folgen</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
+									<a href="#" title="Vorschlagen"><i class="material-icons">recent_actors</i>Vorschlagen</a>
+								</li>
+								<li class="anc-link only-his-data" go="#his-action">
+									<a href="#" title="Cross-Account"><i
+											class="material-icons">account_box</i>Cross-Account</a>
+								</li>
+								<li class="anc-link" go="#his-matching-list">
+									<a href="#" title="Get people resembling this user."><i
+											class="material-icons">group_work</i>User Matching</a>
+								</li>
+							</ul>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-tl" class="his-var-content">
-							onclick="flw('--now','more')">Mehr</button>
+							<div id="his-tl-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follower-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follower-list-contents" class="cont-series">
+								onclick="utl('--now','more')">Mehr</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-follow-list" class="his-var-content">
-							onclick="fer('--now','more')">Mehr</button>
+							<div id="his-follow-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-action" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						Anderes Konto verwenden an Folgen((Unable to unfollow))<br>
+								onclick="flw('--now','more')">Mehr</button>
-						<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+						</div>
-						
+						<div id="his-follower-list" class="his-var-content">
-						<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Folgen</a><br>
+							<div id="his-follower-list-contents" class="cont-series">
-						oder<br>
+							</div>
-						<a href="#!" class="waves-effect btn"
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-							onclick="udgEx('selector', 'selector')">Benutzerprofil</a><br>
+								onclick="fer('--now','more')">Mehr</button>
-					</div>
+						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-action" class="his-var-content">
-						<div id="his-lists-a">Folgen, um diesen Benutzer zu Listen hinzuzufügen.</div>
+							Anderes Konto verwenden an Folgen((Unable to unfollow))<br>
+							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+							
+							<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Folgen</a><br>
+							oder<br>
+							<a href="#!" class="waves-effect btn"
+								onclick="udgEx('selector', 'selector')">Benutzerprofil</a><br>
+						</div>
+						<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 id="his-lists-b"></div>
-					</div>
-					<div id="his-fav-list" class="tab-content">
-						<div id="his-fav-list-contents" class="cont-series">
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-fav-list" class="his-var-content">
-							onclick="showFav('more')">Mehr</button>
+							<div id="his-fav-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-blocking-list" class="tab-content">
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-						<div id="his-blocking-list-contents" class="cont-series">
+								onclick="showFav('more')">Mehr</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-blocking-list" class="his-var-content">
-							onclick="showBlo('more')">Mehr</button>
+							<div id="his-blocking-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-muting-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-muting-list-contents" class="cont-series">
+								onclick="showBlo('more')">Mehr</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-muting-list" class="his-var-content">
-							onclick="showMut('more')">Mehr</button>
+							<div id="his-muting-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-domain-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-domain-list-contents" class="cont-series">
+								onclick="showMut('more')">Mehr</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-domain-list" class="his-var-content">
-							onclick="showDom('more')">Mehr</button>Add blocking domain
+							<div id="his-domain-list-contents" class="cont-series">
-						<br>
+							</div>
-						<input type="text" placeholder="example.com" id="domainblock">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<button class="btn waves-effect" onclick="addDomainblock()">Hinzufügen</button>
+								onclick="showDom('more')">Mehr</button>Add blocking domain
-						<br>
+							<br>
-					</div>
+							<input type="text" placeholder="example.com" id="domainblock">
-					<div id="his-prof-list" class="tab-content">Anzeigename
+							<button class="btn waves-effect" onclick="addDomainblock()">Hinzufügen</button>
-						<br>
+							<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>
-							<label for="his-des-val">Notiz</label>
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-prof-list" class="his-var-content">Anzeigename
-							onclick="profedit()">Speichern</button>
+							<br>
-						<br>Avatar ändern:
+							<input type="text" placeholder="Anzeigename" id="his-name-val" style="max-width:250px;">
-						<span id="prof-change">
+							<br>Notiz
-							<input type="file" onchange="imgChange(this,'avatar')">
+							<br>
-						</span>
+							<div class="input-field col s12">
-						<br>Change header image:
+								<textarea placeholder="Notiz" id="his-des-val"
-						<span id="header-change">
+									class="materialize-textarea"></textarea>
-							<input type="file" onchange="imgChange(this,'header')">
+								<label for="his-des-val">Notiz</label>
-						</span>
+							</div>
-					</div>
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-					<div id="his-request-list" class="tab-content">
+								onclick="profedit()">Speichern</button>
-						<div id="his-request-list-contents" class="cont-series">
+							<br>Avatar ändern:
+							<span id="prof-change">
+								<input type="file" onchange="imgChange(this,'avatar')">
+							</span>
+							<br>Change header image:
+							<span id="header-change">
+								<input type="file" onchange="imgChange(this,'header')">
+							</span>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-request-list" class="his-var-content">
-							onclick="showReq('more')">Mehr</button>
+							<div id="his-request-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follow-recom-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follow-recom-contents" class="cont-series">
+								onclick="showReq('more')">Mehr</button>
+						</div>
+						<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 id="his-float-blocked">
+							<div>Sie sind blockiert. Warum?</div>
 						</div>
 					</div>
 				</div>
-				<div class="his-float" id="his-float-blocked">
-					<div>Sie sind blockiert. Warum?</div>
-				</div>
 			</div>
 		</div>
 		<div class="modal-footer">
@@ -666,18 +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-1" 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.1)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・タイムライン上のトゥートのレイアウトを変更。より見やすく、多くの情報を表示するように。<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・タイムライン上の「グレー」の明度をあげた。<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・ブロック, ミュート時にダイアログを表示し誤爆を防ぐ。<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・CWボタンのデザイン変更<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・ミュート一覧が表示されなかった不具合を修正。<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・会話を表示ボタン(リプ元が指定されている場合)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>

app/view/en/index.html

@@ -24,7 +24,7 @@
 
 <body>
 	<script>
-		var ver = "Usamin (18.8.1)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,187 +423,195 @@
 	<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 class="his-float" id="his-float-data">
+				<div id="his-data-wrap">
-					<div id="his-basic-prof">
+					<div class="his-float" id="his-float-data">
-						<img src="../../img/loading.svg" id="his-prof" draggable="false">
+						<div id="his-leftside">
-						<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
+							<div id="his-basic-prof">
-						<br>@
+								<img src="../../img/loading.svg" id="his-prof" draggable="false">
-						<span id="his-acct"></span><br>
+								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
-						<span class="gray" id="his-relation"></span>
+								<br>@
-						<br>
+								<span id="his-acct"></span><br>
-						<span class="cbadge">
+								<span class="gray" id="his-relation"></span>
-							<span id="his-sta"></span>Toots
+								<br>
-						</span>
+								<span class="cbadge">
-						<span class="cbadge">Follow:
+									<span id="his-sta"></span>Toots
-							<span id="his-follow"></span>
+								</span>
-						</span>
+								<span class="cbadge">Follow:
-						<span class="cbadge">Follower:
+									<span id="his-follow"></span>
-							<span id="his-follower"></span>
+								</span>
-						</span><br>
+								<span class="cbadge">Follower:
-						<span class="cbadge" style="max-width:150px; width:150px; ">Since:
+									<span id="his-follower"></span>
-							<span id="his-since"></span>
+								</span><br>
-						</span>
+								<span class="cbadge" style="max-width:150px; width:150px; ">Since:
-						<div id="his-proof-prof"></div>
+									<span id="his-since"></span>
-					</div>
+								</span>
-					<div id="his-des" data-acct=""></div><br>
+								<div id="his-proof-prof"></div>
-					<div id="his-plus-action">
+							</div>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
+							<div id="his-des" data-acct=""></div><br>
-							onclick="empUser()">Emphasize this user</a>
+							<div id="his-plus-action">
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
-							id="his-end-btn" onclick="pinUser()">Feature on profile</a><br>
+									onclick="empUser()">Emphasize this user</a>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
-							onclick="profbrws()">Open in browser</a>
+									id="his-end-btn" onclick="pinUser()">Feature on profile</a><br>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									onclick="profbrws()">Open in browser</a>
-					</div><br>
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-					<div id="his-matching-list">
+									id="his-main-acct" onclick="setMain()"
-						Get people resembling this user.<br>
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+							</div>
-						<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">
-							<li class="tab col my-data-width active-back column-first">
-								<a go="#his-tl" title="Timeline"><i class="material-icons">timeline</i></a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follow-list" title="Follow"><i class="material-icons">people</i>→</a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follower-list" title="Follower"><i
-										class="material-icons">people</i>←</a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-action" title="Cross-account"><i
-										class="material-icons">account_box</i></a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-list" title="List"><i class="material-icons">list</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-fav-list" title="Favourite"><i class="material-icons">star</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-blocking-list" title="Blocks"><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-muting-list" title="Mute"><i
-										class="material-icons">voice_over_off</i></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-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 class="his-float" id="his-float-timeline">
-						<div id="his-follow-list-contents" class="cont-series">
+						<div id="my-data-nav">
+							<a go="#his-tl" title="Timeline" class="btn active-back column-first anc-link waves-effect"><i
+									class="material-icons">timeline</i>Timeline</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="anc-link only-my-data" go="#his-muting-list">
+									<a href="#" title="Mute"><i
+											class="material-icons">voice_over_off</i>Mute</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-domain-list">
+									<a href="#" title="Domain block"><i
+											class="material-icons">cancel_schedule_send</i>Domain block</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-prof-list">
+									<a href="#" title="Edit profile"><i
+											class="material-icons">create</i>Edit profile</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-request-list">
+									<a href="#" title="Follow requests"><i
+											class="material-icons">how_to_reg</i>Follow requests</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
+									<a href="#" title="Suggest"><i class="material-icons">recent_actors</i>Suggest</a>
+								</li>
+								<li class="anc-link only-his-data" go="#his-action">
+									<a href="#" title="Cross-account"><i
+											class="material-icons">account_box</i>Cross-account</a>
+								</li>
+								<li class="anc-link" go="#his-matching-list">
+									<a href="#" title="Get people resembling this user."><i
+											class="material-icons">group_work</i>User Matching</a>
+								</li>
+							</ul>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-tl" class="his-var-content">
-							onclick="flw('--now','more')">More</button>
+							<div id="his-tl-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follower-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follower-list-contents" class="cont-series">
+								onclick="utl('--now','more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-follow-list" class="his-var-content">
-							onclick="fer('--now','more')">More</button>
+							<div id="his-follow-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-action" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						Use other account to Follow((Unable to unfollow))<br>
+								onclick="flw('--now','more')">More</button>
-						<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+						</div>
-						
+						<div id="his-follower-list" class="his-var-content">
-						<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Follow</a><br>
+							<div id="his-follower-list-contents" class="cont-series">
-						or<br>
+							</div>
-						<a href="#!" class="waves-effect btn"
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-							onclick="udgEx('selector', 'selector')">Show profile</a><br>
+								onclick="fer('--now','more')">More</button>
-					</div>
+						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-action" class="his-var-content">
-						<div id="his-lists-a">Follow to add this user to lists.</div>
+							Use other account to Follow((Unable to unfollow))<br>
+							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+							
+							<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">Follow</a><br>
+							or<br>
+							<a href="#!" class="waves-effect btn"
+								onclick="udgEx('selector', 'selector')">Show profile</a><br>
+						</div>
+						<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 id="his-lists-b"></div>
-					</div>
-					<div id="his-fav-list" class="tab-content">
-						<div id="his-fav-list-contents" class="cont-series">
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-fav-list" class="his-var-content">
-							onclick="showFav('more')">More</button>
+							<div id="his-fav-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-blocking-list" class="tab-content">
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-						<div id="his-blocking-list-contents" class="cont-series">
+								onclick="showFav('more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-blocking-list" class="his-var-content">
-							onclick="showBlo('more')">More</button>
+							<div id="his-blocking-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-muting-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-muting-list-contents" class="cont-series">
+								onclick="showBlo('more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-muting-list" class="his-var-content">
-							onclick="showMut('more')">More</button>
+							<div id="his-muting-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-domain-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-domain-list-contents" class="cont-series">
+								onclick="showMut('more')">More</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-domain-list" class="his-var-content">
-							onclick="showDom('more')">More</button>Add blocking domain
+							<div id="his-domain-list-contents" class="cont-series">
-						<br>
+							</div>
-						<input type="text" placeholder="example.com" id="domainblock">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<button class="btn waves-effect" onclick="addDomainblock()">Add</button>
+								onclick="showDom('more')">More</button>Add blocking domain
-						<br>
+							<br>
-					</div>
+							<input type="text" placeholder="example.com" id="domainblock">
-					<div id="his-prof-list" class="tab-content">Display name
+							<button class="btn waves-effect" onclick="addDomainblock()">Add</button>
-						<br>
+							<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>
-							<label for="his-des-val">Note</label>
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-prof-list" class="his-var-content">Display name
-							onclick="profedit()">Save</button>
+							<br>
-						<br>Change avataor:
+							<input type="text" placeholder="Display name" id="his-name-val" style="max-width:250px;">
-						<span id="prof-change">
+							<br>Note
-							<input type="file" onchange="imgChange(this,'avatar')">
+							<br>
-						</span>
+							<div class="input-field col s12">
-						<br>Change header image:
+								<textarea placeholder="Note" id="his-des-val"
-						<span id="header-change">
+									class="materialize-textarea"></textarea>
-							<input type="file" onchange="imgChange(this,'header')">
+								<label for="his-des-val">Note</label>
-						</span>
+							</div>
-					</div>
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-					<div id="his-request-list" class="tab-content">
+								onclick="profedit()">Save</button>
-						<div id="his-request-list-contents" class="cont-series">
+							<br>Change avataor:
+							<span id="prof-change">
+								<input type="file" onchange="imgChange(this,'avatar')">
+							</span>
+							<br>Change header image:
+							<span id="header-change">
+								<input type="file" onchange="imgChange(this,'header')">
+							</span>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-request-list" class="his-var-content">
-							onclick="showReq('more')">More</button>
+							<div id="his-request-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follow-recom-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follow-recom-contents" class="cont-series">
+								onclick="showReq('more')">More</button>
+						</div>
+						<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 id="his-float-blocked">
+							<div>You are blocked. Why?</div>
 						</div>
 					</div>
 				</div>
-				<div class="his-float" id="his-float-blocked">
-					<div>You are blocked. Why?</div>
-				</div>
 			</div>
 		</div>
 		<div class="modal-footer">
@@ -666,18 +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-1" 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.1)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・タイムライン上のトゥートのレイアウトを変更。より見やすく、多くの情報を表示するように。<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・タイムライン上の「グレー」の明度をあげた。<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・ブロック, ミュート時にダイアログを表示し誤爆を防ぐ。<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・CWボタンのデザイン変更<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・ミュート一覧が表示されなかった不具合を修正。<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・会話を表示ボタン(リプ元が指定されている場合)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>

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.1)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,187 +423,195 @@
 	<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 class="his-float" id="his-float-data">
+				<div id="his-data-wrap">
-					<div id="his-basic-prof">
+					<div class="his-float" id="his-float-data">
-						<img src="../../img/loading.svg" id="his-prof" draggable="false">
+						<div id="his-leftside">
-						<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
+							<div id="his-basic-prof">
-						<br>@
+								<img src="../../img/loading.svg" id="his-prof" draggable="false">
-						<span id="his-acct"></span><br>
+								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
-						<span class="gray" id="his-relation"></span>
+								<br>@
-						<br>
+								<span id="his-acct"></span><br>
-						<span class="cbadge">
+								<span class="gray" id="his-relation"></span>
-							<span id="his-sta"></span>トゥート
+								<br>
-						</span>
+								<span class="cbadge">
-						<span class="cbadge">フォロー:
+									<span id="his-sta"></span>トゥート
-							<span id="his-follow"></span>
+								</span>
-						</span>
+								<span class="cbadge">フォロー:
-						<span class="cbadge">フォロワー:
+									<span id="his-follow"></span>
-							<span id="his-follower"></span>
+								</span>
-						</span><br>
+								<span class="cbadge">フォロワー:
-						<span class="cbadge" style="max-width:150px; width:150px; ">Since:
+									<span id="his-follower"></span>
-							<span id="his-since"></span>
+								</span><br>
-						</span>
+								<span class="cbadge" style="max-width:150px; width:150px; ">Since:
-						<div id="his-proof-prof"></div>
+									<span id="his-since"></span>
-					</div>
+								</span>
-					<div id="his-des" data-acct=""></div><br>
+								<div id="his-proof-prof"></div>
-					<div id="his-plus-action">
+							</div>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
+							<div id="his-des" data-acct=""></div><br>
-							onclick="empUser()">ユーザー強調</a>
+							<div id="his-plus-action">
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
-							id="his-end-btn" onclick="pinUser()">紹介する</a><br>
+									onclick="empUser()">ユーザー強調</a>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
-							onclick="profbrws()">ブラウザで開く</a>
+									id="his-end-btn" onclick="pinUser()">紹介する</a><br>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">メインアカウントに設定</a><br>
+									onclick="profbrws()">ブラウザで開く</a>
-					</div><br>
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-					<div id="his-matching-list">
+									id="his-main-acct" onclick="setMain()"
-						似ているユーザーを取得できます。<br>
+									style="width: calc(100% - 10px)">メインアカウントに設定</a><br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+							</div>
-						<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">
-							<li class="tab col my-data-width active-back column-first">
-								<a go="#his-tl" title="タイムライン"><i class="material-icons">timeline</i></a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follow-list" title="フォロー"><i class="material-icons">people</i>→</a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follower-list" title="フォロワー"><i
-										class="material-icons">people</i>←</a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-action" title="他のアカウントで操作"><i
-										class="material-icons">account_box</i></a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-list" title="リスト"><i class="material-icons">list</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-fav-list" title="お気に入り登録"><i class="material-icons">star</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-blocking-list" title="ブロック"><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-muting-list" title="ミュート"><i
-										class="material-icons">voice_over_off</i></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-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 class="his-float" id="his-float-timeline">
-						<div id="his-follow-list-contents" class="cont-series">
+						<div id="my-data-nav">
+							<a go="#his-tl" title="タイムライン" class="btn active-back column-first anc-link waves-effect"><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="anc-link only-my-data" go="#his-muting-list">
+									<a href="#" title="ミュート"><i
+											class="material-icons">voice_over_off</i>ミュート</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-domain-list">
+									<a href="#" title="ドメインブロック"><i
+											class="material-icons">cancel_schedule_send</i>ドメインブロック</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-prof-list">
+									<a href="#" title="プロフィール編集"><i
+											class="material-icons">create</i>プロフィール編集</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-request-list">
+									<a href="#" title="フォローリクエスト"><i
+											class="material-icons">how_to_reg</i>フォローリクエスト</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
+									<a href="#" title="おすすめ"><i class="material-icons">recent_actors</i>おすすめ</a>
+								</li>
+								<li class="anc-link only-his-data" go="#his-action">
+									<a href="#" title="他のアカウントで操作"><i
+											class="material-icons">account_box</i>他のアカウントで操作</a>
+								</li>
+								<li class="anc-link" go="#his-matching-list">
+									<a href="#" title="似ているユーザーを取得できます。"><i
+											class="material-icons">group_work</i>User Matching</a>
+								</li>
+							</ul>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-tl" class="his-var-content">
-							onclick="flw('--now','more')">もっと</button>
+							<div id="his-tl-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follower-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follower-list-contents" class="cont-series">
+								onclick="utl('--now','more')">もっと</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-follow-list" class="his-var-content">
-							onclick="fer('--now','more')">もっと</button>
+							<div id="his-follow-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-action" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						他のアカウントを使用するフォロー((解除はできません。))<br>
+								onclick="flw('--now','more')">もっと</button>
-						<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+						</div>
-						で
+						<div id="his-follower-list" class="his-var-content">
-						<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">フォロー</a><br>
+							<div id="his-follower-list-contents" class="cont-series">
-						または<br>
+							</div>
-						<a href="#!" class="waves-effect btn"
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-							onclick="udgEx('selector', 'selector')">プロフィールを表示</a><br>
+								onclick="fer('--now','more')">もっと</button>
-					</div>
+						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-action" class="his-var-content">
-						<div id="his-lists-a">リストに追加するためにはフォローが必要です。</div>
+							他のアカウントを使用するフォロー((解除はできません。))<br>
+							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+							で
+							<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">フォロー</a><br>
+							または<br>
+							<a href="#!" class="waves-effect btn"
+								onclick="udgEx('selector', 'selector')">プロフィールを表示</a><br>
+						</div>
+						<div id="his-list" class="his-var-content">
+							<div id="his-lists-a">リストに追加するためにはフォローが必要です。</div>
 
-						<div id="his-lists-b"></div>
+							<div id="his-lists-b"></div>
-					</div>
-					<div id="his-fav-list" class="tab-content">
-						<div id="his-fav-list-contents" class="cont-series">
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-fav-list" class="his-var-content">
-							onclick="showFav('more')">もっと</button>
+							<div id="his-fav-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-blocking-list" class="tab-content">
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-						<div id="his-blocking-list-contents" class="cont-series">
+								onclick="showFav('more')">もっと</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-blocking-list" class="his-var-content">
-							onclick="showBlo('more')">もっと</button>
+							<div id="his-blocking-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-muting-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-muting-list-contents" class="cont-series">
+								onclick="showBlo('more')">もっと</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-muting-list" class="his-var-content">
-							onclick="showMut('more')">もっと</button>
+							<div id="his-muting-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-domain-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-domain-list-contents" class="cont-series">
+								onclick="showMut('more')">もっと</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-domain-list" class="his-var-content">
-							onclick="showDom('more')">もっと</button>ブロックするドメイン
+							<div id="his-domain-list-contents" class="cont-series">
-						<br>
+							</div>
-						<input type="text" placeholder="example.com" id="domainblock">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<button class="btn waves-effect" onclick="addDomainblock()">追加</button>
+								onclick="showDom('more')">もっと</button>ブロックするドメイン
-						<br>
+							<br>
-					</div>
+							<input type="text" placeholder="example.com" id="domainblock">
-					<div id="his-prof-list" class="tab-content">名前
+							<button class="btn waves-effect" onclick="addDomainblock()">追加</button>
-						<br>
+							<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>
-							<label for="his-des-val">自己紹介</label>
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-prof-list" class="his-var-content">名前
-							onclick="profedit()">変更</button>
+							<br>
-						<br>アバターを変更:
+							<input type="text" placeholder="名前" id="his-name-val" style="max-width:250px;">
-						<span id="prof-change">
+							<br>自己紹介
-							<input type="file" onchange="imgChange(this,'avatar')">
+							<br>
-						</span>
+							<div class="input-field col s12">
-						<br>ヘッダーを変更:
+								<textarea placeholder="自己紹介" id="his-des-val"
-						<span id="header-change">
+									class="materialize-textarea"></textarea>
-							<input type="file" onchange="imgChange(this,'header')">
+								<label for="his-des-val">自己紹介</label>
-						</span>
+							</div>
-					</div>
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-					<div id="his-request-list" class="tab-content">
+								onclick="profedit()">変更</button>
-						<div id="his-request-list-contents" class="cont-series">
+							<br>アバターを変更:
+							<span id="prof-change">
+								<input type="file" onchange="imgChange(this,'avatar')">
+							</span>
+							<br>ヘッダーを変更:
+							<span id="header-change">
+								<input type="file" onchange="imgChange(this,'header')">
+							</span>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-request-list" class="his-var-content">
-							onclick="showReq('more')">もっと</button>
+							<div id="his-request-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follow-recom-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follow-recom-contents" class="cont-series">
+								onclick="showReq('more')">もっと</button>
+						</div>
+						<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 id="his-float-blocked">
+							<div>ブロックされています。なぜでしょう？</div>
 						</div>
 					</div>
 				</div>
-				<div class="his-float" id="his-float-blocked">
-					<div>ブロックされています。なぜでしょう？</div>
-				</div>
 			</div>
 		</div>
 		<div class="modal-footer">
@@ -666,18 +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-1" 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.1)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・タイムライン上のトゥートのレイアウトを変更。より見やすく、多くの情報を表示するように。<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・タイムライン上の「グレー」の明度をあげた。<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・ブロック, ミュート時にダイアログを表示し誤爆を防ぐ。<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・CWボタンのデザイン変更<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・ミュート一覧が表示されなかった不具合を修正。<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・会話を表示ボタン(リプ元が指定されている場合)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>

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,187 +423,195 @@
 	<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 class="his-float" id="his-float-data">
+				<div id="his-data-wrap">
-					<div id="his-basic-prof">
+					<div class="his-float" id="his-float-data">
-						<img src="../../img/loading.svg" id="his-prof" draggable="false">
+						<div id="his-leftside">
-						<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
+							<div id="his-basic-prof">
-						<br>@
+								<img src="../../img/loading.svg" id="his-prof" draggable="false">
-						<span id="his-acct"></span><br>
+								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
-						<span class="gray" id="his-relation"></span>
+								<br>@
-						<br>
+								<span id="his-acct"></span><br>
-						<span class="cbadge">
+								<span class="gray" id="his-relation"></span>
-							<span id="his-sta"></span>@@toots@@
+								<br>
-						</span>
+								<span class="cbadge">
-						<span class="cbadge">@@follow@@:
+									<span id="his-sta"></span>@@toots@@
-							<span id="his-follow"></span>
+								</span>
-						</span>
+								<span class="cbadge">@@follow@@:
-						<span class="cbadge">@@follower@@:
+									<span id="his-follow"></span>
-							<span id="his-follower"></span>
+								</span>
-						</span><br>
+								<span class="cbadge">@@follower@@:
-						<span class="cbadge" style="max-width:150px; width:150px; ">Since:
+									<span id="his-follower"></span>
-							<span id="his-since"></span>
+								</span><br>
-						</span>
+								<span class="cbadge" style="max-width:150px; width:150px; ">Since:
-						<div id="his-proof-prof"></div>
+									<span id="his-since"></span>
-					</div>
+								</span>
-					<div id="his-des" data-acct=""></div><br>
+								<div id="his-proof-prof"></div>
-					<div id="his-plus-action">
+							</div>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
+							<div id="his-des" data-acct=""></div><br>
-							onclick="empUser()">@@empUser@@</a>
+							<div id="his-plus-action">
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
-							id="his-end-btn" onclick="pinUser()">@@endorse@@</a><br>
+									onclick="empUser()">@@empUser@@</a>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
-							onclick="profbrws()">@@openinbrowser@@</a>
+									id="his-end-btn" onclick="pinUser()">@@endorse@@</a><br>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">@@mainacct@@</a><br>
+									onclick="profbrws()">@@openinbrowser@@</a>
-					</div><br>
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-					<div id="his-matching-list">
+									id="his-main-acct" onclick="setMain()"
-						@@likeUserDes@@<br>
+									style="width: calc(100% - 10px)">@@mainacct@@</a><br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+							</div>
-						<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">
-							<li class="tab col my-data-width active-back column-first">
-								<a go="#his-tl" title="@@timeline@@"><i class="material-icons">timeline</i></a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follow-list" title="@@follow@@"><i class="material-icons">people</i>→</a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follower-list" title="@@follower@@"><i
-										class="material-icons">people</i>←</a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-action" title="@@operateOtherAcct@@"><i
-										class="material-icons">account_box</i></a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-list" title="@@list@@"><i class="material-icons">list</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-fav-list" title="@@favRegist@@"><i class="material-icons">star</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-blocking-list" title="@@blocks@@"><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-muting-list" title="@@mute@@"><i
-										class="material-icons">voice_over_off</i></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-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 class="his-float" id="his-float-timeline">
-						<div id="his-follow-list-contents" class="cont-series">
+						<div id="my-data-nav">
+							<a go="#his-tl" title="@@timeline@@" class="btn active-back column-first anc-link waves-effect"><i
+									class="material-icons">timeline</i>@@timeline@@</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="anc-link only-my-data" go="#his-muting-list">
+									<a href="#" title="@@mute@@"><i
+											class="material-icons">voice_over_off</i>@@mute@@</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-domain-list">
+									<a href="#" title="@@domainBlock@@"><i
+											class="material-icons">cancel_schedule_send</i>@@domainBlock@@</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-prof-list">
+									<a href="#" title="@@editProf@@"><i
+											class="material-icons">create</i>@@editProf@@</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-request-list">
+									<a href="#" title="@@followReq@@"><i
+											class="material-icons">how_to_reg</i>@@followReq@@</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
+									<a href="#" title="@@frc@@"><i class="material-icons">recent_actors</i>@@frc@@</a>
+								</li>
+								<li class="anc-link only-his-data" go="#his-action">
+									<a href="#" title="@@operateOtherAcct@@"><i
+											class="material-icons">account_box</i>@@operateOtherAcct@@</a>
+								</li>
+								<li class="anc-link" go="#his-matching-list">
+									<a href="#" title="@@likeUserDes@@"><i
+											class="material-icons">group_work</i>User Matching</a>
+								</li>
+							</ul>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-tl" class="his-var-content">
-							onclick="flw('--now','more')">@@more@@</button>
+							<div id="his-tl-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follower-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follower-list-contents" class="cont-series">
+								onclick="utl('--now','more')">@@more@@</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-follow-list" class="his-var-content">
-							onclick="fer('--now','more')">@@more@@</button>
+							<div id="his-follow-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-action" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						@@useOtherAcct1@@@@revoverJP@@@@follow@@(@@warnUseOtherAcct@@)<br>
+								onclick="flw('--now','more')">@@more@@</button>
-						<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+						</div>
-						@@revoverJPde@@
+						<div id="his-follower-list" class="his-var-content">
-						<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">@@follow@@</a><br>
+							<div id="his-follower-list-contents" class="cont-series">
-						@@or@@<br>
+							</div>
-						<a href="#!" class="waves-effect btn"
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-							onclick="udgEx('selector', 'selector')">@@openProf@@</a><br>
+								onclick="fer('--now','more')">@@more@@</button>
-					</div>
+						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-action" class="his-var-content">
-						<div id="his-lists-a">@@warnListRegist@@</div>
+							@@useOtherAcct1@@@@revoverJP@@@@follow@@(@@warnUseOtherAcct@@)<br>
+							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+							@@revoverJPde@@
+							<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">@@follow@@</a><br>
+							@@or@@<br>
+							<a href="#!" class="waves-effect btn"
+								onclick="udgEx('selector', 'selector')">@@openProf@@</a><br>
+						</div>
+						<div id="his-list" class="his-var-content">
+							<div id="his-lists-a">@@warnListRegist@@</div>
 
-						<div id="his-lists-b"></div>
+							<div id="his-lists-b"></div>
-					</div>
-					<div id="his-fav-list" class="tab-content">
-						<div id="his-fav-list-contents" class="cont-series">
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-fav-list" class="his-var-content">
-							onclick="showFav('more')">@@more@@</button>
+							<div id="his-fav-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-blocking-list" class="tab-content">
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-						<div id="his-blocking-list-contents" class="cont-series">
+								onclick="showFav('more')">@@more@@</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-blocking-list" class="his-var-content">
-							onclick="showBlo('more')">@@more@@</button>
+							<div id="his-blocking-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-muting-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-muting-list-contents" class="cont-series">
+								onclick="showBlo('more')">@@more@@</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-muting-list" class="his-var-content">
-							onclick="showMut('more')">@@more@@</button>
+							<div id="his-muting-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-domain-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-domain-list-contents" class="cont-series">
+								onclick="showMut('more')">@@more@@</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-domain-list" class="his-var-content">
-							onclick="showDom('more')">@@more@@</button>@@blockDomain@@
+							<div id="his-domain-list-contents" class="cont-series">
-						<br>
+							</div>
-						<input type="text" placeholder="example.com" id="domainblock">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<button class="btn waves-effect" onclick="addDomainblock()">@@add@@</button>
+								onclick="showDom('more')">@@more@@</button>@@blockDomain@@
-						<br>
+							<br>
-					</div>
+							<input type="text" placeholder="example.com" id="domainblock">
-					<div id="his-prof-list" class="tab-content">@@name@@
+							<button class="btn waves-effect" onclick="addDomainblock()">@@add@@</button>
-						<br>
+							<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>
-							<label for="his-des-val">@@note@@</label>
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-prof-list" class="his-var-content">@@name@@
-							onclick="profedit()">@@change@@</button>
+							<br>
-						<br>@@editProfImg@@:
+							<input type="text" placeholder="@@name@@" id="his-name-val" style="max-width:250px;">
-						<span id="prof-change">
+							<br>@@note@@
-							<input type="file" onchange="imgChange(this,'avatar')">
+							<br>
-						</span>
+							<div class="input-field col s12">
-						<br>@@editHeader@@:
+								<textarea placeholder="@@note@@" id="his-des-val"
-						<span id="header-change">
+									class="materialize-textarea"></textarea>
-							<input type="file" onchange="imgChange(this,'header')">
+								<label for="his-des-val">@@note@@</label>
-						</span>
+							</div>
-					</div>
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-					<div id="his-request-list" class="tab-content">
+								onclick="profedit()">@@change@@</button>
-						<div id="his-request-list-contents" class="cont-series">
+							<br>@@editProfImg@@:
+							<span id="prof-change">
+								<input type="file" onchange="imgChange(this,'avatar')">
+							</span>
+							<br>@@editHeader@@:
+							<span id="header-change">
+								<input type="file" onchange="imgChange(this,'header')">
+							</span>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-request-list" class="his-var-content">
-							onclick="showReq('more')">@@more@@</button>
+							<div id="his-request-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follow-recom-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follow-recom-contents" class="cont-series">
+								onclick="showReq('more')">@@more@@</button>
+						</div>
+						<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 id="his-float-blocked">
+							<div>@@blocked@@</div>
 						</div>
 					</div>
 				</div>
-				<div class="his-float" id="his-float-blocked">
-					<div>@@blocked@@</div>
-				</div>
 			</div>
 		</div>
 		<div class="modal-footer">
@@ -666,18 +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-1" 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.1)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・タイムライン上のトゥートのレイアウトを変更。より見やすく、多くの情報を表示するように。<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・タイムライン上の「グレー」の明度をあげた。<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・ブロック, ミュート時にダイアログを表示し誤爆を防ぐ。<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・CWボタンのデザイン変更<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・ミュート一覧が表示されなかった不具合を修正。<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・会話を表示ボタン(リプ元が指定されている場合)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>

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.1)"
+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.1)";
+		var ver = "Usamin (18.8.3)";
 		//betaを入れるとバージョンチェックしない
 		//GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 		//var ver="beta";
@@ -423,187 +423,195 @@
 	<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 class="his-float" id="his-float-data">
+				<div id="his-data-wrap">
-					<div id="his-basic-prof">
+					<div class="his-float" id="his-float-data">
-						<img src="../../img/loading.svg" id="his-prof" draggable="false">
+						<div id="his-leftside">
-						<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
+							<div id="his-basic-prof">
-						<br>@
+								<img src="../../img/loading.svg" id="his-prof" draggable="false">
-						<span id="his-acct"></span><br>
+								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
-						<span class="gray" id="his-relation"></span>
+								<br>@
-						<br>
+								<span id="his-acct"></span><br>
-						<span class="cbadge">
+								<span class="gray" id="his-relation"></span>
-							<span id="his-sta"></span>crwdns439:0crwdne439:0
+								<br>
-						</span>
+								<span class="cbadge">
-						<span class="cbadge">crwdns440:0crwdne440:0:
+									<span id="his-sta"></span>crwdns439:0crwdne439:0
-							<span id="his-follow"></span>
+								</span>
-						</span>
+								<span class="cbadge">crwdns440:0crwdne440:0:
-						<span class="cbadge">crwdns441:0crwdne441:0:
+									<span id="his-follow"></span>
-							<span id="his-follower"></span>
+								</span>
-						</span><br>
+								<span class="cbadge">crwdns441:0crwdne441:0:
-						<span class="cbadge" style="max-width:150px; width:150px; ">Since:
+									<span id="his-follower"></span>
-							<span id="his-since"></span>
+								</span><br>
-						</span>
+								<span class="cbadge" style="max-width:150px; width:150px; ">Since:
-						<div id="his-proof-prof"></div>
+									<span id="his-since"></span>
-					</div>
+								</span>
-					<div id="his-des" data-acct=""></div><br>
+								<div id="his-proof-prof"></div>
-					<div id="his-plus-action">
+							</div>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
+							<div id="his-des" data-acct=""></div><br>
-							onclick="empUser()">crwdns472:0crwdne472:0</a>
+							<div id="his-plus-action">
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-emp-btn"
-							id="his-end-btn" onclick="pinUser()">crwdns454:0crwdne454:0</a><br>
+									onclick="empUser()">crwdns472:0crwdne472:0</a>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-his-data"
-							onclick="profbrws()">crwdns455:0crwdne455:0</a>
+									id="his-end-btn" onclick="pinUser()">crwdns454:0crwdne454:0</a><br>
-						<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">@@mainacct@@</a><br>
+									onclick="profbrws()">crwdns455:0crwdne455:0</a>
-					</div><br>
+								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-					<div id="his-matching-list">
+									id="his-main-acct" onclick="setMain()"
-						crwdns469:0crwdne469:0<br>
+									style="width: calc(100% - 10px)">@@mainacct@@</a><br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+							</div>
-						<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">
-							<li class="tab col my-data-width active-back column-first">
-								<a go="#his-tl" title="crwdns442:0crwdne442:0"><i class="material-icons">timeline</i></a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follow-list" title="crwdns440:0crwdne440:0"><i class="material-icons">people</i>→</a>
-							</li>
-							<li class="tab col my-data-width">
-								<a go="#his-follower-list" title="crwdns441:0crwdne441:0"><i
-										class="material-icons">people</i>←</a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-action" title="crwdns443:0crwdne443:0"><i
-										class="material-icons">account_box</i></a>
-							</li>
-							<li class="tab col my-data-width only-his-data">
-								<a go="#his-list" title="crwdns444:0crwdne444:0"><i class="material-icons">list</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-fav-list" title="crwdns434:0crwdne434:0"><i class="material-icons">star</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-blocking-list" title="crwdns446:0crwdne446:0"><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-muting-list" title="crwdns449:0crwdne449:0"><i
-										class="material-icons">voice_over_off</i></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-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 class="his-float" id="his-float-timeline">
-						<div id="his-follow-list-contents" class="cont-series">
+						<div id="my-data-nav">
+							<a go="#his-tl" title="crwdns442:0crwdne442:0" class="btn active-back column-first anc-link waves-effect"><i
+									class="material-icons">timeline</i>crwdns442:0crwdne442:0</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="anc-link only-my-data" go="#his-muting-list">
+									<a href="#" title="crwdns449:0crwdne449:0"><i
+											class="material-icons">voice_over_off</i>crwdns449:0crwdne449:0</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-domain-list">
+									<a href="#" title="crwdns450:0crwdne450:0"><i
+											class="material-icons">cancel_schedule_send</i>crwdns450:0crwdne450:0</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-prof-list">
+									<a href="#" title="crwdns451:0crwdne451:0"><i
+											class="material-icons">create</i>crwdns451:0crwdne451:0</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-request-list">
+									<a href="#" title="crwdns452:0crwdne452:0"><i
+											class="material-icons">how_to_reg</i>crwdns452:0crwdne452:0</a>
+								</li>
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
+									<a href="#" title="crwdns456:0crwdne456:0"><i class="material-icons">recent_actors</i>crwdns456:0crwdne456:0</a>
+								</li>
+								<li class="anc-link only-his-data" go="#his-action">
+									<a href="#" title="crwdns443:0crwdne443:0"><i
+											class="material-icons">account_box</i>crwdns443:0crwdne443:0</a>
+								</li>
+								<li class="anc-link" go="#his-matching-list">
+									<a href="#" title="crwdns469:0crwdne469:0"><i
+											class="material-icons">group_work</i>User Matching</a>
+								</li>
+							</ul>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-tl" class="his-var-content">
-							onclick="flw('--now','more')">crwdns457:0crwdne457:0</button>
+							<div id="his-tl-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follower-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follower-list-contents" class="cont-series">
+								onclick="utl('--now','more')">crwdns457:0crwdne457:0</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-follow-list" class="his-var-content">
-							onclick="fer('--now','more')">crwdns457:0crwdne457:0</button>
+							<div id="his-follow-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-action" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						crwdns430:0crwdne430:0crwdns458:0crwdne458:0crwdns440:0crwdne440:0(crwdns459:0crwdne459:0)<br>
+								onclick="flw('--now','more')">crwdns457:0crwdne457:0</button>
-						<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
+						</div>
-						crwdns460:0crwdne460:0
+						<div id="his-follower-list" class="his-var-content">
-						<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">crwdns440:0crwdne440:0</a><br>
+							<div id="his-follower-list-contents" class="cont-series">
-						crwdns461:0crwdne461:0<br>
+							</div>
-						<a href="#!" class="waves-effect btn"
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-							onclick="udgEx('selector', 'selector')">crwdns462:0crwdne462:0</a><br>
+								onclick="fer('--now','more')">crwdns457:0crwdne457:0</button>
-					</div>
+						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-action" class="his-var-content">
-						<div id="his-lists-a">crwdns463:0crwdne463:0</div>
+							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
+							<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">crwdns440:0crwdne440:0</a><br>
+							crwdns461:0crwdne461:0<br>
+							<a href="#!" class="waves-effect btn"
+								onclick="udgEx('selector', 'selector')">crwdns462:0crwdne462:0</a><br>
+						</div>
+						<div id="his-list" class="his-var-content">
+							<div id="his-lists-a">crwdns463:0crwdne463:0</div>
 
-						<div id="his-lists-b"></div>
+							<div id="his-lists-b"></div>
-					</div>
-					<div id="his-fav-list" class="tab-content">
-						<div id="his-fav-list-contents" class="cont-series">
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-fav-list" class="his-var-content">
-							onclick="showFav('more')">crwdns457:0crwdne457:0</button>
+							<div id="his-fav-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-blocking-list" class="tab-content">
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-						<div id="his-blocking-list-contents" class="cont-series">
+								onclick="showFav('more')">crwdns457:0crwdne457:0</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-blocking-list" class="his-var-content">
-							onclick="showBlo('more')">crwdns457:0crwdne457:0</button>
+							<div id="his-blocking-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-muting-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-muting-list-contents" class="cont-series">
+								onclick="showBlo('more')">crwdns457:0crwdne457:0</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-muting-list" class="his-var-content">
-							onclick="showMut('more')">crwdns457:0crwdne457:0</button>
+							<div id="his-muting-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-domain-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-domain-list-contents" class="cont-series">
+								onclick="showMut('more')">crwdns457:0crwdne457:0</button>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-domain-list" class="his-var-content">
-							onclick="showDom('more')">crwdns457:0crwdne457:0</button>crwdns464:0crwdne464:0
+							<div id="his-domain-list-contents" class="cont-series">
-						<br>
+							</div>
-						<input type="text" placeholder="example.com" id="domainblock">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<button class="btn waves-effect" onclick="addDomainblock()">crwdns491:0crwdne491:0</button>
+								onclick="showDom('more')">crwdns457:0crwdne457:0</button>crwdns464:0crwdne464:0
-						<br>
+							<br>
-					</div>
+							<input type="text" placeholder="example.com" id="domainblock">
-					<div id="his-prof-list" class="tab-content">crwdns465:0crwdne465:0
+							<button class="btn waves-effect" onclick="addDomainblock()">crwdns491:0crwdne491:0</button>
-						<br>
+							<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>
-							<label for="his-des-val">crwdns466:0crwdne466:0</label>
 						</div>
-						<button class="btn waves-effect" style="width:100%; padding:0;"
+						<div id="his-prof-list" class="his-var-content">crwdns465:0crwdne465:0
-							onclick="profedit()">crwdns1892:0crwdne1892:0</button>
+							<br>
-						<br>crwdns467:0crwdne467:0:
+							<input type="text" placeholder="crwdns465:0crwdne465:0" id="his-name-val" style="max-width:250px;">
-						<span id="prof-change">
+							<br>crwdns466:0crwdne466:0
-							<input type="file" onchange="imgChange(this,'avatar')">
+							<br>
-						</span>
+							<div class="input-field col s12">
-						<br>crwdns468:0crwdne468:0:
+								<textarea placeholder="crwdns466:0crwdne466:0" id="his-des-val"
-						<span id="header-change">
+									class="materialize-textarea"></textarea>
-							<input type="file" onchange="imgChange(this,'header')">
+								<label for="his-des-val">crwdns466:0crwdne466:0</label>
-						</span>
+							</div>
-					</div>
+							<button class="btn waves-effect" style="width:100%; padding:0;"
-					<div id="his-request-list" class="tab-content">
+								onclick="profedit()">crwdns1892:0crwdne1892:0</button>
-						<div id="his-request-list-contents" class="cont-series">
+							<br>crwdns467:0crwdne467:0:
+							<span id="prof-change">
+								<input type="file" onchange="imgChange(this,'avatar')">
+							</span>
+							<br>crwdns468:0crwdne468:0:
+							<span id="header-change">
+								<input type="file" onchange="imgChange(this,'header')">
+							</span>
 						</div>
-						<button class="btn waves-effect " style="width:100%; padding:0;"
+						<div id="his-request-list" class="his-var-content">
-							onclick="showReq('more')">crwdns457:0crwdne457:0</button>
+							<div id="his-request-list-contents" class="cont-series">
-					</div>
+							</div>
-					<div id="his-follow-recom-list" class="tab-content">
+							<button class="btn waves-effect " style="width:100%; padding:0;"
-						<div id="his-follow-recom-contents" class="cont-series">
+								onclick="showReq('more')">crwdns457:0crwdne457:0</button>
+						</div>
+						<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 id="his-float-blocked">
+							<div>@@blocked@@</div>
 						</div>
 					</div>
 				</div>
-				<div class="his-float" id="his-float-blocked">
-					<div>@@blocked@@</div>
-				</div>
 			</div>
 		</div>
 		<div class="modal-footer">
@@ -666,18 +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-1" 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.1)</h5>
+				<h5>Release Note Usamin (18.8.3)</h5>
-				・タイムライン上のトゥートのレイアウトを変更。より見やすく、多くの情報を表示するように。<br>
+				・Pawooでフォローできなかった不具合を修正。<br>
-				・タイムライン上の「グレー」の明度をあげた。<br>
+				・(macOS)iTunes NowPlayingでにの不具合を修正。<br>
-				・ブロック, ミュート時にダイアログを表示し誤爆を防ぐ。<br>
+				・トゥートのアクションが正しく切り替えれれない不具合を修正。<br>
-				・CWボタンのデザイン変更<br>
+				・アカウント画面のトゥートのカウントが上手くいってなかった不具合を修正。<br>
-				・ミュート一覧が表示されなかった不具合を修正。<br>
+				・アカウント画面のデザインを大幅に改善。<br>
-				・会話を表示ボタン(リプ元が指定されている場合)
 			</div>
 			<div id="release-en" style="display:none">
 				<h5>Let's make it native!</h5>