add dialog dropdown for hashtag and suggestion, add custom emojis suggestion

app/aiscript.js

@@ -1,4 +1,6 @@
 const { AiScript, parse, values, utils } = require('@syuilo/aiscript')
+const gcc = require('textarea-caret')
+global.getCaretCoordinates = gcc
 global.sanitizeHtml = require('sanitize-html')
 global.asValue = values
 global.AiScript = AiScript

app/css/acct.css

@@ -98,3 +98,12 @@ i.left {
 #add {
 	max-width: 1000px;
 }
+.autocomplete-content {
+	min-width: 450px;
+}
+.autocomplete-content li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    overflow: hidden;
+}

app/css/master.css

@@ -579,7 +579,7 @@ h2.swal2-title {
 	z-index: 501;
 }
 .pageSrcBtn:hover {
-	background-color: var(--active);
+	background-color: var(--selected);
 }
 .srcQ {
 	margin-top: 0.4rem;

app/css/post.css

@@ -69,6 +69,20 @@ textarea {
 	overflow-y: scroll;
 	overflow-x: hidden;
 }
+#suggest {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: var(--bg);
+	z-index: 2;
+	border-radius: 0.5rem;
+	display: none;
+	max-height: 10rem;
+}
+#suggest a {
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
 #emoji-list {
 	width: 100%;
 	height: 15.4rem;

app/css/tl.css

@@ -590,7 +590,29 @@ p:not(:last-child) {
 .small-header .area-sta::-webkit-scrollbar {
 	height: 5px;
 }
-
+#tagContextMenu {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: var(--subcolor);
+	z-index: 2;
+	border-radius: 0.4rem;
+}
+#tagContextMenu a {
+	display: block;
+	color: var(--text);
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+}
+#tagContextMenu a:hover {
+	background-color: var(--selected);
+}
+.firstTCM {
+	margin-top: 0.4rem;
+}
+.lastTCM {
+	margin-bottom: 0.4rem;
+}
 .area-notice_name {
 	grid-area: notice_name;
 	overflow: hidden;

app/js/post/emoji.js

@@ -126,8 +126,10 @@ function emojiGet(parse, started) {
 
 					md['if_categorized'] = if_categorized
 					localStorage.setItem('emojis_' + acct_id, JSON.stringify(md))
+					localStorage.setItem(`emojis_raw_${acct_id}`, JSON.stringify(json))
 				} else {
 					localStorage.setItem('emojis_' + acct_id, JSON.stringify(md))
+					localStorage.setItem(`emojis_raw_${acct_id}`, JSON.stringify(json))
 				}
 				localStorage.setItem('emojiseek', 0)
 				if (!started) {

app/js/post/suggest.js

@@ -9,183 +9,162 @@ var suggest
 
 input.addEventListener(
 	'focus',
-	function() {
+	function () {
 		localStorage.removeItem('cursor')
 		var acct_id = $('#post-acct-sel').val()
 		$('#suggest').html('')
+		$('#suggest').hide()
 		window.clearInterval(timer)
-		timer = window.setInterval(function() {
+		timer = window.setInterval(function () {
 			var new_val = input.value
 			if (new_val == '') {
 				$('#suggest').html('')
-				if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
+				$('#suggest').hide()
-					$('#right-side').hide()
-					$('#right-side').css('width', '300px')
-					$('#left-side').css('width', '100%')
-					var width = localStorage.getItem('postbox-width')
-					if (width) {
-						width = width.replace('px', '') * 1
-					} else {
-						width = 300
-					}
-					$('#post-box').css('width', width + 'px')
-				}
 				return
 			}
 			if (prev_val != new_val) {
-				var tag = new_val.match(/#(\S{3,})/)
+				const pos = input.selectionStart
-				var acct = new_val.match(/@(\S{3,})/)
+				let startI = pos - 1
-				if (tag && tag[1]) {
+				let hasDomain = false
-					var q = tag[1]
+				let hasDomainOnce = false
-				} else if (acct && acct[1]) {
+				for (startI = pos - 1; startI >= 0; startI--) {
-					var q = acct[1]
+					if (new_val[startI].match(/\./)) hasDomain = true
+					if (new_val[startI].match(/#|@|:/) && !hasDomain) break
+					if (new_val[startI].match(/@/) && hasDomainOnce) break
+					if (new_val[startI].match(/@/) && !hasDomainOnce) hasDomainOnce = true
+				}
+				const target = new_val.substr(startI, pos - startI)
+				var tag = target.match(/#(\S{3,})/g)
+				var acct = target.match(/@(\S{3,})(@(\S{3,}))?/g)
+				var emoji = target.match(/:(\S{1,})/g)
+				if (emoji && emoji[0]) {
+					const l = emoji[0]
+					const emojis = localStorage.getItem('emojis_raw_' + acct_id)
+					const json = emojis ? JSON.parse(emojis) : []
+					const reg = new RegExp(`${emoji[0]}`)
+					let listHtml = ''
+					for (const emoji of json) {
+						const { shortcode, url } = emoji
+						if (`:${shortcode}`.match(reg)) {
+							listHtml = listHtml + `${listHtml ? `<br>` : ``}<a onclick="tagInsert(':${shortcode}:','${l}')" class="pointer"><img src="${url}" width="15">:${shortcode}:</a>`
+						}
+					}
+					$('#suggest').html(listHtml)
+					$('#suggest').show()
+				} else if (tag && tag[0]) {
+					var q = tag[0]
+				} else if (acct && acct[0]) {
+					var q = acct[0]
 				} else {
 					$('#suggest').html('')
-					if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
+					$('#suggest').hide()
-						$('#right-side').hide()
-						$('#right-side').css('width', '300px')
-						$('#left-side').css('width', '100%')
-						var width = localStorage.getItem('postbox-width')
-						if (width) {
-							width = width.replace('px', '') * 1
-						} else {
-							width = 300
-						}
-						$('#post-box').css('width', width + 'px')
-					}
 					return
 				}
-				var domain = localStorage.getItem('domain_' + acct_id)
+				if (q) {
-				var at = localStorage.getItem('acct_' + acct_id + '_at')
+					var domain = localStorage.getItem('domain_' + acct_id)
-				suggest = 'https://' + domain + '/api/v2/search?q=' + q
+					var at = localStorage.getItem('acct_' + acct_id + '_at')
-				if (suggest != oldSuggest) {
+					suggest = 'https://' + domain + '/api/v2/search?q=' + encodeURIComponent(q)
-					console.log('Try to get suggest at ' + suggest)
+					if (suggest != oldSuggest) {
-					fetch(suggest, {
+						console.log('Try to get suggest at ' + suggest)
-						method: 'GET',
+						fetch(suggest, {
-						headers: {
+							method: 'GET',
-							'content-type': 'application/json',
+							headers: {
-							Authorization: 'Bearer ' + at
+								'content-type': 'application/json',
-						}
+								Authorization: 'Bearer ' + at
-					})
-						.then(function(response) {
-							if (!response.ok) {
-								response.text().then(function(text) {
-									setLog(response.url, response.status, text)
-								})
 							}
-							return response.json()
 						})
-						.catch(function(error) {
+							.then(function (response) {
-							todo(error)
+								if (!response.ok) {
-							setLog(start, 'JSON', error)
+									response.text().then(function (text) {
-							console.error(error)
+										setLog(response.url, response.status, text)
-						})
+									})
-						.then(function(json) {
+								}
-							console.log(['Search', json])
+								return response.json()
-							//ハッシュタグ
+							})
-							if (json.hashtags[0] && tag) {
+							.catch(function (error) {
-								if (tag[1]) {
+								todo(error)
-									var tags = []
+								setLog(start, 'JSON', error)
-									Object.keys(json.hashtags).forEach(function(key4) {
+								console.error(error)
-										var tag = json.hashtags[key4]
+							})
-										var his = tag.history
+							.then(function (json) {
-										var uses =
+								console.log(['Search', json])
-											his[0].uses * 1 +
+								//ハッシュタグ
-											his[1].uses * 1 +
+								if (json.hashtags[0] && tag) {
-											his[2].uses * 1 +
+									if (tag[0]) {
-											his[3].uses * 1 +
+										var tags = []
-											his[4].uses * 1 +
+										Object.keys(json.hashtags).forEach(function (key4) {
-											his[5].uses * 1 +
+											var tag = json.hashtags[key4]
-											his[6].uses * 1
+											var his = tag.history
-										tagHTML = `<br><a onclick="tagInsert('#${escapeHTML(
+											var uses =
-											tag.name
+												his[0].uses * 1 +
-										)}','#${q}')" class="pointer">#${escapeHTML(tag.name)}</a>&nbsp;${uses}toot(s)`
+												his[1].uses * 1 +
+												his[2].uses * 1 +
+												his[3].uses * 1 +
+												his[4].uses * 1 +
+												his[5].uses * 1 +
+												his[6].uses * 1
+											tagHTML = `<br><a onclick="tagInsert('#${escapeHTML(
+												tag.name
+											)}','${q}')" class="pointer">#${escapeHTML(tag.name)}</a>&nbsp;${uses}toot(s)`
 
-										var item = {
+											var item = {
-											uses: uses,
+												uses: uses,
-											html: tagHTML
+												html: tagHTML
-										}
+											}
-										tags.push(item)
+											tags.push(item)
-									})
+										})
-									var num_a = -1
+										var num_a = -1
-									var num_b = 1
+										var num_b = 1
-									tags = tags.sort(function(a, b) {
+										tags = tags.sort(function (a, b) {
-										var x = a['uses']
+											var x = a['uses']
-										var y = b['uses']
+											var y = b['uses']
-										if (x > y) return num_a
+											if (x > y) return num_a
-										if (x < y) return num_b
+											if (x < y) return num_b
-										return 0
+											return 0
-									})
+										})
-									var ins = ''
+										var ins = ''
-									var nev = false
+										var nev = false
-									Object.keys(tags).forEach(function(key7) {
+										Object.keys(tags).forEach(function (key7) {
-										ins = ins + tags[key7].html
+											ins = ins + tags[key7].html
-										if (key7 <= 0 && !nev) {
+											if (key7 <= 0 && !nev) {
-											ins = ins + '<br>'
+												//ins = ins + '<br>'
-											nev = true
+												nev = true
-										}
+											}
-									})
+										})
-									$('#suggest').html(ins)
+										$('#suggest').html(ins)
-									$('#right-side').show()
+										$('#suggest').show()
-									$('#right-side').css('width', '200px')
-									$('#left-side').css('width', 'calc(100% - 200px)')
-									var width = localStorage.getItem('postbox-width')
-									if (width) {
-										width = width.replace('px', '') * 1 + 200
-									} else {
-										width = 500
 									}
-									$('#post-box').css('width', width + 'px')
+								} else if (json.accounts[0] && acct[0]) {
-									$('#poll').addClass('hide')
+									var accts = ''
-									$('#emoji').addClass('hide')
+									Object.keys(json.accounts).forEach(function (key3) {
-									$('#draft').addClass('hide')
+										var acct = json.accounts[key3]
-								}
+										if (acct.acct != q) {
-							} else if (json.accounts[0] && acct[1]) {
+											//Instance Actorって…
-								var accts = ''
+											if (acct.username.indexOf('.') < 0) {
-								Object.keys(json.accounts).forEach(function(key3) {
+												accts =
-									var acct = json.accounts[key3]
+													accts +
-									if (acct.acct != q) {
+													`<a onclick="tagInsert('@${acct.acct}','${q}')" class="pointer">@${acct.acct}</a><br>`
-										//Instance Actorって…
+											}
-										if (acct.username.indexOf('.') < 0) {
-											accts =
-												accts +
-												`<a onclick="tagInsert('@${acct.acct}','@${q}')" class="pointer">@${acct.acct}</a><br>`
 										}
-									}
+									})
-								})
+									$('#suggest').html(accts)
-								$('#right-side').show()
+									$('#suggest').show()
-								$('#right-side').css('width', '200px')
-								$('#left-side').css('width', 'calc(100% - 200px)')
-								var width = localStorage.getItem('postbox-width')
-								if (width) {
-									width = width.replace('px', '') * 1 + 200
 								} else {
-									width = 500
+
 								}
-								$('#post-box').css('width', width + 'px')
+							})
-								$('#suggest').html(accts)
+					}
-								$('#poll').addClass('hide')
-								$('#emoji').addClass('hide')
-								$('#draft').addClass('hide')
-							} else {
-								if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
-									$('#right-side').hide()
-									$('#right-side').css('width', '300px')
-									$('#left-side').css('width', '100%')
-									var width = localStorage.getItem('postbox-width')
-									if (width) {
-										width = width.replace('px', '') * 1
-									} else {
-										width = 300
-									}
-									$('#post-box').css('width', width + 'px')
-								}
-							}
-						})
 				}
 			}
 			oldSuggest = suggest
-			prev_value = new_val
+			prev_val = new_val
+
+			const rectTextarea = document.querySelector('#textarea')
+			const rect = rectTextarea.getBoundingClientRect()
+			const caret = getCaretCoordinates(rectTextarea, rectTextarea.selectionEnd)
+			$('#suggest').css('top', `calc(${caret.top}px + 1rem)`)
+			const left = rect.width / 2 < caret.left ? rect.width / 2 : caret.left
+			$('#suggest').css('left', left)
 		}, 1000)
 	},
 	false
@@ -193,15 +172,20 @@ input.addEventListener(
 
 input.addEventListener(
 	'blur',
-	function() {
+	function () {
 		window.clearInterval(timer)
 		favTag()
 	},
 	false
 )
-function tagInsert(code, del) {
+function tagInsert(code, del, emoji) {
-	var blankBefore = ' '
+	if (localStorage.getItem('emoji-zero-width') == 'yes' && emoji) {
-	var blankAfter = ' '
+		var blankBefore = '​'
+		var blankAfter = '​'
+	} else {
+		var blankBefore = ' '
+		var blankAfter = ' '
+	}
 	var textarea = document.querySelector('#textarea')
 	var sentence = textarea.value
 	var len = sentence.length
@@ -217,10 +201,10 @@ function tagInsert(code, del) {
 	var after = sentence.substr(pos, len)
 	var start = after.substr(0, 1)
 	if (start == ' ') blankAfter = ''
-	if (len == 0) {
+	if (len === delLen) {
-		var word = code
+		var word = code + blankAfter
 	} else if (len == pos) {
-		var word = blankBefore + code
+		var word = blankBefore + code + blankAfter
 	} else if (pos == 0) {
 		var word = code + blankAfter
 	} else {
@@ -228,17 +212,9 @@ function tagInsert(code, del) {
 	}
 	sentence = before + word + after
 	textarea.value = sentence
-	if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
-		$('#right-side').hide()
-		$('#right-side').css('width', '300px')
-		$('#left-side').css('width', '50%')
-		var width = localStorage.getItem('postbox-width').replace('px', '') * 1
-		if (!width) {
-			width = 300
-		}
-		$('#post-box').css('width', width + 'px')
-	}
 	$('#suggest').html('')
+	$('#suggest').hide()
+	$('#textarea').focus()
 }
 function cgNPs(q) {
 	suggest = 'https://cg.toot.app/api/v1/search/light?q=' + q
@@ -250,23 +226,23 @@ function cgNPs(q) {
 				'content-type': 'application/json'
 			}
 		})
-			.then(function(response) {
+			.then(function (response) {
 				if (!response.ok) {
-					response.text().then(function(text) {
+					response.text().then(function (text) {
 						setLog(response.url, response.status, text)
 					})
 				}
 				return response.json()
 			})
-			.catch(function(error) {
+			.catch(function (error) {
 				todo(error)
 				setLog(start, 'JSON', error)
 				console.error(error)
 			})
-			.then(function(json) {
+			.then(function (json) {
 				if (json[0]) {
 					var tags = ''
-					Object.keys(json).forEach(function(key4) {
+					Object.keys(json).forEach(function (key4) {
 						var tag = json[key4]
 						tags =
 							tags +

app/js/tl/card.js

@@ -17,7 +17,8 @@ function additional(acct_id, tlid) {
 		}
 
 		if (tagThis) {
-			$(this).attr('href', "javascript:tagShow('" + tagThis + "')")
+			$(this).attr('href', "#")
+			$(this).attr('onclick', "tagShow('" + tagThis + "', this)")
 			
 		}
 	})

app/js/tl/misskeyparse.js

@@ -518,7 +518,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		if (tagck) {
 			Object.keys(toot.tags).forEach(function (key4) {
 				var tag = toot.tags[key4]
-				var tags = '<a onclick="tagShow(\'' + tag + '\')" class="pointer parsed">#' + tag + '</a><span class="hide" data-tag="' + tag + '" data-regTag="'+tag.toLowerCase()+'">#' + tag + ':<a onclick="tl(\'tag\',\'' + tag + '\',' + acct_id +
+				var tags = '<a onclick="tagShow(\'' + tag + '\', this)" class="pointer parsed">#' + tag + '</a><span class="hide" data-tag="' + tag + '" data-regTag="'+tag.toLowerCase()+'">#' + tag + ':<a onclick="tl(\'tag\',\'' + tag + '\',' + acct_id +
 					',\'add\')" class="pointer parsed" title="' + lang.lang_parse_tagTL.replace("{{tag}}", '#' + tag) + '">TL</a>　<a onclick="brInsert(\'#' + tag + '\')" class="pointer parsed" title="' + lang.lang_parse_tagtoot.replace("{{tag}}", '#' + tag) + '">Toot</a>　' +
 					'<a onclick="tagPin(\'' + tag + '\')" class="pointer parsed" title="' + lang.lang_parse_tagpin.replace("{{tag}}", '#' + tag) + '">Pin</a></span> '
 				content = content.replace("#" + tag, tags)

app/js/tl/parse.js

@@ -703,31 +703,6 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type, onlyContent) {
 							${lang.lang_parse_thread}
 						</a></div>`
 			}
-			var tagck = toot.tags[0]
-			var tags = ''
-			//タグであれば
-			if (tagck) {
-				Object.keys(toot.tags).forEach(function (key4) {
-					var tag = toot.tags[key4]
-					var featured = `　<a onclick="tagFeature('${tag.name}','${acct_id}')" class="pointer" title="add it to Featured tags">Feature</a>　`
-					tags =
-						tags +
-						`<span class="hide" data-tag="${tag.name}" data-regTag="${tag.name.toLowerCase()}">#${tag.name
-						}:
-							<a onclick="tl('tag','${tag.name}','${acct_id}','add')" class="pointer"
-							 title="${lang.lang_parse_tagTL.replace(
-							'{{tag}}',
-							'#' + tag.name
-						)}">TL</a>　<a onclick="brInsert('#${tag.name}')" 
-							 class="pointer" title="${lang.lang_parse_tagtoot.replace('{{tag}}', '#' + tag.name)}">Toot</a>　
-						<a onclick="tagPin('${tag.name}')" class="pointer" title="${lang.lang_parse_tagpin.replace(
-							'{{tag}}',
-							'#' + tag.name
-						)}
-						">Pin</a>${featured}</span> `
-				})
-				tags = '<div style="float:right" aria-hidden="true">' + tags + '</div>'
-			}
 			//リプ数
 			if (toot.replies_count || toot.replies_count === 0) {
 				var replyct = toot.replies_count
@@ -1077,7 +1052,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type, onlyContent) {
 				</div>
 				<div class="area-additional grid">
 					<span class="additional">${analyze}</span>
-					${mentions}${tags}
+					${mentions}
 				</div>
 				<div class="area-vis grid">${vis}</div>
 				<div class="area-actions grid">

app/js/tl/tag.js

@@ -9,9 +9,46 @@ if (location.search) {
 	}
 }
 //よく使うタグ
-function tagShow(tag) {
+function tagShow(tag, elm) {
-	console.log('[data-regTag=' + decodeURI(tag).toLowerCase() + ']')
+	const tagTL = lang.lang_parse_tagTL.replace('{{tag}}', '#' + tag)
-	$('[data-regTag=' + decodeURI(tag).toLowerCase() + ']').toggleClass('hide')
+	const tagPin = lang.lang_parse_tagpin.replace('{{tag}}', '#' + tag)
+	const tagToot = lang.lang_parse_tagtoot.replace('{{tag}}', '#' + tag)
+	$('#tagCMTL').text(tagTL)
+	$('#tagCMPin').text(tagPin)
+	$('#tagCMToot').text(tagToot)
+	const acct_id = $(elm).parents('.tl').attr('data-acct')
+	const rect = elm.getBoundingClientRect()
+	$('#tagContextMenu').css('top', `calc(${rect.top}px + 1rem)`)
+	$('#tagContextMenu').css('left', `${rect.left}px`)
+	$('#tagContextMenu').attr('data-tag', tag)
+	$('#tagContextMenu').attr('data-acct', acct_id)
+	$('#tagContextMenu').removeClass('hide')
+	setTimeout(() => tShowBox('open'), 500)
+}
+function tShowBox(mode) {
+	if (mode == 'open') {
+		$('#tagContextMenu').removeClass('hide')
+	} else if (mode == 'close') {
+		if (!$('#tagContextMenu').hasClass('hide')) $('#tagContextMenu').addClass('hide')
+		$('#tagContextMenu').removeClass('keep')
+	} else {
+		$('#tagContextMenu').toggleClass('hide')
+	}
+}
+function doTShowBox(type) {
+	$('#tagContextMenu').addClass('hide')
+	$('#tagContextMenu').removeClass('keep')
+	const q = $('#tagContextMenu').attr('data-tag')
+	const acct_id = $('#tagContextMenu').attr('data-acct')
+	if (type == 'tl') {
+		tl('tag', q, acct_id, 'add')
+	} else if (type == 'toot') {
+		brInsert(`#${q}`)
+	} else if (type == 'pin') {
+		tagPin(q)
+	} else if (type == 'f') {
+		tagFeature(q, acct_id)
+	}
 }
 //タグ追加
 function tagPin(tag) {
@@ -22,7 +59,7 @@ function tagPin(tag) {
 		var obj = JSON.parse(tags)
 	}
 	var can
-	Object.keys(obj).forEach(function(key) {
+	Object.keys(obj).forEach(function (key) {
 		var tagT = obj[key]
 		if (tagT == tag) {
 			can = true
@@ -56,7 +93,7 @@ function favTag() {
 	}
 	var tags = ''
 	var nowPT = localStorage.getItem('stable')
-	Object.keys(obj).forEach(function(key) {
+	Object.keys(obj).forEach(function (key) {
 		var tag = obj[key]
 		if (nowPT != tag) {
 			console.log('stable tags:' + nowPT + '/' + tag)
@@ -69,28 +106,31 @@ function favTag() {
 		tag = escapeHTML(tag)
 		tags =
 			tags +
-			`<a onclick="tagShow('${tag}')" class="pointer">#${tag}</a>
+			`<a onclick="tagShowHorizon('${tag}')" class="pointer">#${tag}</a>
 			${nowon}<span class="hide" data-tag="${tag}" data-regTag="${tag.toLowerCase()}">　
 			<a onclick=\"tagTL('tag','${tag}',false,'add')" class="pointer" title="${lang.lang_parse_tagTL.replace('{{tag}}', '#' + tag)}">
 				TL
-			</a>　
+			</a>
 			<a onclick="brInsert('#${tag}')" class="pointer" title="${lang.lang_parse_tagtoot.replace('{{tag}}', '#' + tag)}">
 				Toot
-			</a>　
+			</a>
 			<a onclick="autoToot('${tag}');" class="pointer" title="${lang.lang_tags_always}${lang.lang_parse_tagtoot.replace('{{tag}}', '#' + tag)}">
 				${ptt}
-			</a>　
+			</a>
 			<a onclick="tagRemove('${key}')" class="pointer" title="${lang.lang_tags_tagunpin.replace('{{tag}}', '#' + tag)}">
 				${lang.lang_del}
 			</a>
 			</span> `
 	})
 	if (obj.length > 0) {
-		$('#taglist').append('My Tags:' + tags)
+		$('#taglist').append('My Tags: ' + tags)
 	} else {
 		$('#taglist').append('')
 	}
 }
+function tagShowHorizon(tag) {
+	$('[data-regTag=' + decodeURI(tag).toLowerCase() + ']').toggleClass('hide')
+}
 function trendTag() {
 	$('.trendtag').remove()
 	var domain = 'imastodon.net'
@@ -103,28 +143,28 @@ function trendTag() {
 			Authorization: 'Bearer ' + at
 		}
 	})
-		.then(function(response) {
+		.then(function (response) {
 			if (!response.ok) {
-				response.text().then(function(text) {
+				response.text().then(function (text) {
 					setLog(response.url, response.status, text)
 				})
 			}
 			return response.json()
 		})
-		.catch(function(error) {
+		.catch(function (error) {
 			todo(error)
 			setLog(start, 'JSON', error)
 			console.error(error)
 		})
-		.then(function(json) {
+		.then(function (json) {
 			if (json) {
 				var tags = ''
 				json = json.score
-				Object.keys(json).forEach(function(tag) {
+				Object.keys(json).forEach(function (tag) {
 					tag = escapeHTML(tag)
 					tags =
 						tags +
-						`<a onclick="tagShow('${tag}')" class="pointer">#${tag}</a>
+						`<a onclick="tagShow('${tag}', this)" class="pointer">#${tag}</a>
 						<span class="hide" data-tag="${tag}" data-regTag="${tag.toLowerCase()}">　
 						<a onclick=\"tagTL('tag','${tag}',false,'add')" class="pointer" title="#${tag}のタイムライン">TL</a>　
 						<a onclick="show();brInsert('#${tag}')" class="pointer" title="#${tag}でトゥート">
@@ -134,8 +174,8 @@ function trendTag() {
 				})
 				$('#taglist').append(
 					'<div class="trendtag">アイマストドントレンドタグ<i class="material-icons pointer" onclick="trendTag()" style="font-size:12px">refresh</i>:' +
-						tags +
+					tags +
-						'</div>'
+					'</div>'
 				)
 				trendintervalset()
 			} else {
@@ -182,18 +222,18 @@ function tagFeature(name, acct_id) {
 			name: name
 		})
 	})
-		.then(function(response) {
+		.then(function (response) {
 			if (!response.ok) {
-				response.text().then(function(text) {
+				response.text().then(function (text) {
 					setLog(response.url, response.status, text)
 				})
 			}
 			return response.json()
 		})
-		.catch(function(error) {
+		.catch(function (error) {
 			return false
 		})
-		.then(function(json) {
+		.then(function (json) {
 			console.log(json)
 			M.toast({ html: 'Complete: ' + escapeHTML(name), displayLength: 3000 })
 		})
@@ -202,7 +242,7 @@ function tagFeature(name, acct_id) {
 function addTag(id) {
 	var columns = JSON.parse(localStorage.getItem('column'))
 	var column = columns[id]
-	if(!column.data.name) {
+	if (!column.data.name) {
 		var name = column.data
 	} else {
 		var name = column.data.name
@@ -219,7 +259,7 @@ function addTag(id) {
 	o[id] = obj
 	var json = JSON.stringify(o)
 	console.log(json)
-	localStorage.setItem('column',json)
+	localStorage.setItem('column', json)
 	columnReload(id, 'tag')
 }
 

app/js/ui/post-box.js

@@ -101,6 +101,7 @@ if (location.search) {
 		$('.mini-btn').text('expand_less')
 	}
 }
+
 function initPostbox() {
 	$('#posttgl').click(function (e) {
 		if (!$('#post-box').hasClass('appear')) {
@@ -124,6 +125,7 @@ function initPostbox() {
 		selectedToot = 0
 		localStorage.removeItem('nohide')
 		srcBox('close')
+		tShowBox('close')
 	})
 	$('#textarea,#cw-text').focusout(function (e) {
 		localStorage.setItem('nohide', true)

app/js/ui/tips.js

@@ -117,7 +117,7 @@ function trendTagonTip() {
 				Object.keys(json).forEach(function(tag) {
 					tags =
 						tags +
-						`<a onclick="tagShow('${tag}')" class="pointer">
+						`<a onclick="tagShow('${tag}', this)" class="pointer">
 							#${escapeHTML(tag)}
 						</a>
 						<span class="hide" data-tag="${tag}" data-regTag="${tag.toLowerCase()}">　

app/package.json

@@ -71,6 +71,7 @@
         "sumchecker": "^3.0.1",
         "sweetalert2": "^10.15.7",
         "system-font-families": "^0.4.1",
+        "textarea-caret": "^3.1.0",
         "vue": "^2.6.12"
     },
     "devDependencies": {

app/source/themes/white.thedesktheme

@@ -17,7 +17,7 @@
 		bottom: '#eeeeee',
 		emphasized: '#81c784',
 		postbox: '#fff',
-		active: '#009688',
+		active: '#66dacf',
 		selected: '#c0c0c0',
 		selectedWithShared: '#b2babd',
 	},

app/view/make/index.sample.html

@@ -35,13 +35,20 @@
 	</script>
 	<textarea id="copy" style="top:-100px; position:fixed;"></textarea>
 	<canvas id="canvas" style="top:-100px; position:fixed;width:32px;height:32px" width="32" height="32"></canvas>
-	<div id="pageSrc" class="hide z-depth-5">
+	<div id="pageSrc" class="hide z-depth-2">
 		<div class="srcQ"></div>
 		<div class="pageSrcBtn pointer" onclick="doSrc('web')">@@webSrc@@</div>
 		<div class="pageSrcBtn pointer" onclick="doSrc('ts')">@@tsSrc@@</div>
 		<div class="pageSrcBtn pointer" onclick="doSrc('copy')">@@copy@@</div>
 		<div class="pageSrcBtn pointer lastPSB" onclick="doSrc('toot')">@@toot@@</div>
 	</div>
+	<div class="hide  z-depth-2" id="tagContextMenu">
+		<a onclick="doTShowBox('tl')" class="pointer firstTCM" id="tagCMTL"></a>
+		<a onclick="doTShowBox('toot')" class="pointer" id="tagCMToot"></a>
+		<a onclick="doTShowBox('pin')" class="pointer" id="tagCMPin"></a>
+		<a onclick="doTShowBox('f')" class="pointer lastTCM" title="add it to Featured tags"
+			id="tagCMFeature">Feature</a>
+	</div>
 	<div id="offline" class="hide">
 		@@nowOffline@@
 	</div>
@@ -199,6 +206,8 @@
 					<div class="input-field col s12" id="toot-field" style="margin-top: 0;margin-bottom: 0;">
 						<textarea id="textarea" class="materialize-textarea unmize" style="margin-bottom:0;"
 							data-length="500"></textarea>
+
+						<div id="suggest"></div>
 						<label for="textarea" data-trans="toot">@@toot@@</label>
 						<br />
 						<span class="sml gray pointer markdown mize" id="preview-btn">
@@ -307,7 +316,6 @@
 			</div>
 		</div>
 		<div id="right-side">
-			<div id="suggest" class="right-side-content"></div>
 			<div id="draft" class="hide right-side-content"></div>
 			<!--絵文字ピッカー-->
 			<div id="emoji" class="hide right-side-content">
@@ -568,14 +576,14 @@
 									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-fav-list" title="@@favRegist@@"
+							<a go="#his-fav-list" title="@@favRegist@@" class="btn only-my-data anc-link waves-effect">
-								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>
 							<div id="his-data-title-wrap">
 								<span id="his-data-title"><i class="material-icons">timeline</i>@@timeline@@</span>
-								<button class="btn waves-effect grey darken-2" style="width: 180px" id="util-add" onclick="utlAdd()">
+								<button class="btn waves-effect grey darken-2" style="width: 180px" id="util-add"
+									onclick="utlAdd()">
 									<i class="material-icons">add</i>
 									@@utlColumn@@
 								</button>

app/view/pl-PL/acct.html

@@ -40,19 +40,28 @@
 		<div id="acct-list"></div>
 		<div class="divider"></div>
 	</div>
-	<div class="hide-second">
-		<a href="setting.html">Having the exported file of TheDesk, click here to jump setting page</a>
-	</div>
 	<div>
 		<h5>Dodaj konto</h5>
+
+		<div class="hide-second">
+			<a href="setting.html">Having the exported file of TheDesk, click here to jump setting page</a>
+		</div>
 		<br />
 		<div id="add">
 			<div class="row">
 				<div class="col s8">
-					Wprowadź domenę instancji (jak mastodon.social)<br />
+					Wprowadź domenę instancji (jak mastodon.social)
-					<input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp" />
+					<div class="row">
-					<div id="ins-suggest"></div>
+						<div class="input-field col s6">
-					<button class="btn waves-effect" onclick="instance()">Login</button><br />
+							<input type="text" id="autocomplete-input" class="autocomplete" placeholder="eg) mstdn.jp">
+							<label for="autocomplete-input">URL</label>
+						</div>
+						<div class="col s4 loginBtnWrap">
+							<button class="btn waves-effect" onclick="instance()"><i
+									class="material-icons left">login</i>Login</button>
+						</div>
+					</div>
+
 					<div class="pwa">
 						Uncheck it to skip pasiting code.(login to Mastodon on Windows or macOS) (Recommended: pcheck)<br />
 						<label>
@@ -129,6 +138,7 @@
 	<script type="text/javascript" src="../../js/login/manager.js"></script>
 	<script type="text/javascript" src="../../js/tl/date.js"></script>
 	<script>$('body').addClass(localStorage.getItem('platform'))</script>
+
 </body>
 
 </html>

app/view/pl-PL/index.html

@@ -27,7 +27,7 @@
 <body class="">
 	<script>
 		var ver = '22.2.0 (Koume)'
-		var gitHash = '2c3fc66b0f6e08205c2691b966253c60c246464c'
+		var gitHash = 'b047c8076821314419fdd11573d1f4337567b53d'
 		//betaを入れるとバージョンチェックしない
 		//var ver="beta";
 		var acct_id = 0
@@ -35,14 +35,19 @@
 	</script>
 	<textarea id="copy" style="top:-100px; position:fixed;"></textarea>
 	<canvas id="canvas" style="top:-100px; position:fixed;width:32px;height:32px" width="32" height="32"></canvas>
-	<div id="pageSrc" class="hide z-depth-5">
+	<div id="pageSrc" class="hide z-depth-2">
-		<input type="text" id="pageSrcInput" placeholder="Search" />
+		<div class="srcQ"></div>
-		<button class="btn waves-effect" onclick="doSrc('web')" title="Szukaj w Internecie">
+		<div class="pageSrcBtn pointer" onclick="doSrc('web')">Szukaj w Internecie</div>
-			<i class="material-icons">open_in_browser</i>
+		<div class="pageSrcBtn pointer" onclick="doSrc('ts')">Search on tootsearch</div>
-		</button>
+		<div class="pageSrcBtn pointer" onclick="doSrc('copy')">Copy</div>
-		<button class="btn waves-effect" onclick="doSrc('ts')" title="Search on tootsearch">
+		<div class="pageSrcBtn pointer lastPSB" onclick="doSrc('toot')">Toot</div>
-			<i class="material-icons">chat</i>
+	</div>
-		</button>
+	<div class="hide  z-depth-2" id="tagContextMenu">
+		<a onclick="doTShowBox('tl')" class="pointer firstTCM" id="tagCMTL"></a>
+		<a onclick="doTShowBox('toot')" class="pointer" id="tagCMToot"></a>
+		<a onclick="doTShowBox('pin')" class="pointer" id="tagCMPin"></a>
+		<a onclick="doTShowBox('f')" class="pointer lastTCM" title="add it to Featured tags"
+			id="tagCMFeature">Feature</a>
 	</div>
 	<div id="offline" class="hide">
 		OFFLINE: all of your post is in the draft box and you should reload after re-connect to the Internet
@@ -201,6 +206,8 @@
 					<div class="input-field col s12" id="toot-field" style="margin-top: 0;margin-bottom: 0;">
 						<textarea id="textarea" class="materialize-textarea unmize" style="margin-bottom:0;"
 							data-length="500"></textarea>
+
+						<div id="suggest"></div>
 						<label for="textarea" data-trans="toot">Toot</label>
 						<br />
 						<span class="sml gray pointer markdown mize" id="preview-btn">
@@ -309,7 +316,6 @@
 			</div>
 		</div>
 		<div id="right-side">
-			<div id="suggest" class="right-side-content"></div>
 			<div id="draft" class="hide right-side-content"></div>
 			<!--絵文字ピッカー-->
 			<div id="emoji" class="hide right-side-content">
@@ -570,12 +576,18 @@
 									class="material-icons">people</i>→Obserwuj</a>
 							<a go="#his-follower-list" title="Obserwujący" class="btn anc-link waves-effect"><i
 									class="material-icons">people</i>←Obserwujący</a>
-							<a go="#his-fav-list" title="Polub"
+							<a go="#his-fav-list" title="Polub" class="btn only-my-data anc-link waves-effect">
-								class="btn only-my-data anc-link waves-effect"><i
+								<i class="material-icons">star</i>Polub</a>
-									class="material-icons">star</i>Polub</a>
 							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
 									class="material-icons">more_vert</i>Więcej</a>
-							<div id="his-data-title"><i class="material-icons">timeline</i>Oś czasu</div>
+							<div id="his-data-title-wrap">
+								<span id="his-data-title"><i class="material-icons">timeline</i>Oś czasu</span>
+								<button class="btn waves-effect grey darken-2" style="width: 180px" id="util-add"
+									onclick="utlAdd()">
+									<i class="material-icons">add</i>
+									Pokaż jako kolumnę
+								</button>
+							</div>
 							<!-- Dropdown Structure -->
 							<ul id="hisdropdown" class="dropdown-content">
 								<li class="anc-link only-his-data" go="#his-list">
@@ -612,9 +624,6 @@
 							</ul>
 						</div>
 						<div id="his-tl" class="his-var-content">
-							<button class="btn waves-effect grey" style="width:100%; padding:0;" onclick="utlAdd()">
-								Pokaż jako kolumnę
-							</button>
 							<div id="his-tl-contents" class="cont-series"></div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utlShow('--now','more')">
@@ -893,43 +902,43 @@
 							<input type="hidden" value="local" id="type-sel" />
 							Show this TL:
 							<div id="tltype">
-								<a class="type waves-effect active" data-type="local">
+								<a class="type waves-effect active" data-type="local" title="Local">
 									<div><i class="material-icons" aria-hidden="true">people_outline</i></div>
 									<span>Local</span>
 								</a>
-								<a class="type waves-effect" data-type="local-media">
+								<a class="type waves-effect" data-type="local-media" title="Local(Media)">
 									<div><i class="material-icons" aria-hidden="true">perm_media</i></div>
 									<span>Local(Media)</span>
 								</a>
-								<a class="type waves-effect" data-type="home">
+								<a class="type waves-effect" data-type="home" title="Home">
 									<div><i class="material-icons" aria-hidden="true">home</i></div>
 									<span>Home</span>
 								</a>
-								<a class="type waves-effect" data-type="pub">
+								<a class="type waves-effect" data-type="pub" title="Federated">
 									<div><i class="material-icons" aria-hidden="true">language</i></div>
 									<span>Federated</span>
 								</a>
-								<a class="type waves-effect" data-type="pub-media">
+								<a class="type waves-effect" data-type="pub-media" title="Federated(Media)">
 									<div><i class="material-icons" aria-hidden="true">perm_media</i></div>
 									<span>Federated(Media)</span>
 								</a>
-								<a class="type waves-effect" data-type="dm">
+								<a class="type waves-effect" data-type="dm" title="Direct Message">
 									<div><i class="material-icons" aria-hidden="true">mail_outline</i></div>
 									<span>Direct Message</span>
 								</a>
-								<a class="type waves-effect" data-type="mix">
+								<a class="type waves-effect" data-type="mix" title="Integrated(Local/Home)">
 									<div><i class="material-icons" aria-hidden="true">merge_type</i></div>
 									<span>Integrated(Local/Home)</span>
 								</a>
-								<a class="type waves-effect" data-type="plus">
+								<a class="type waves-effect" data-type="plus" title="LTL+Reply+BT">
 									<div><i class="material-icons" aria-hidden="true">reply</i></div>
 									<span>LTL+Reply+BT</span>
 								</a>
-								<a class="type waves-effect" data-type="notf">
+								<a class="type waves-effect" data-type="notf" title="Notifications">
 									<div><i class="material-icons" aria-hidden="true">notifications</i></div>
 									<span>Notifications</span>
 								</a>
-								<a class="type waves-effect" data-type="bookmark">
+								<a class="type waves-effect" data-type="bookmark" title="Bookmarks">
 									<div><i class="material-icons" aria-hidden="true">bookmark</i></div>
 									<span>Bookmarks</span>
 								</a>
@@ -955,7 +964,7 @@
 						<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
 					</div>
 					<div class="input-field">
-						<input id="src" type="text" class="validate" style="width:57%" />
+						<input id="src" type="text" class="validate" style="width:calc(100% - 150px)" />
 						<label for="src" data-trans="src">Search</label>
 						<button class="btn waves-effect indigo" style="width: 36%;padding: 0;padding-left: 1.15rem;"
 							onclick="src()" data-trans-i="src">
@@ -1023,7 +1032,7 @@
 					<br /><br />
 					<div id="lists"></div>
 					<div id="lists-user"></div>
-					<input type="text" style="width:150px" id="list-add" placeholder="Wyświetlana nazwa" />
+					<input type="text" style="width: calc(100% - 143px)" id="list-add" placeholder="Wyświetlana nazwa" />
 					<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">
 						Zapisz
 					</button>

app/view/pl-PL/setting.html

@@ -690,7 +690,7 @@
 		style="width:100%; max-width:40rem;"><img src="../../img/desk_full.svg" class="left" width="25"
 			style="padding-top:5px;">Main author: Cutls@cutls.com</a>
 	<br>
-	TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/2c3fc66b0f6e08205c2691b966253c60c246464c">2c3fc66b0f6e08205c2691b966253c60c246464c</a> - <a
+	TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/b047c8076821314419fdd11573d1f4337567b53d">b047c8076821314419fdd11573d1f4337567b53d</a> - <a
 		onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
 		class="pointer pwa">Sprawdź aktualizacje</a><br>
 	<br>
@@ -700,7 +700,7 @@
 		<img src="https://status.cutls.com/badge-service?site=thedesk.top">
 	</a><br>
 	<h5>OSS License</h5>
-	<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/2c3fc66b0f6e08205c2691b966253c60c246464c"
+	<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/b047c8076821314419fdd11573d1f4337567b53d"
 		alt="FOSSA Status"><img
 			src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small" /></a>
 	<br>

app/yarn.lock

@@ -4986,6 +4986,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+textarea-caret@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/textarea-caret/-/textarea-caret-3.1.0.tgz#5d5a35bb035fd06b2ff0e25d5359e97f2655087f"
+  integrity sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==
+
 textextensions@^5.11.0:
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-5.12.0.tgz#b908120b5c1bd4bb9eba41423d75b176011ab68a"