8.57.0

Update @types/node to the latest version 🚀

gulpfile.ts

@@ -78,7 +78,7 @@ gulp.task('build:copy', ['build:copy:views', 'build:copy:lang'], () =>
 	]).pipe(gulp.dest('./built/'))
 );
 
-gulp.task('test', ['lint', 'mocha']);
+gulp.task('test', ['mocha']);
 
 gulp.task('lint', () =>
 	gulp.src('./src/**/*.ts')

locales/ca-ES.yml

@@ -155,8 +155,10 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/de-DE.yml

@@ -155,8 +155,10 @@ common:
     home: "Startseite"
     local: "Lokal"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "Global"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "Mitteilungen"
     list: "Listen"
     swap-left: "Nach links"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "Global"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "Listen"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/en-US.yml

@@ -110,7 +110,7 @@ common:
   verified-user: "Verified account"
   disable-animated-mfm: "Disable animated texts in a post"
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
-  always-mark-nsfw: "常にメディアを閲覧注意として投稿"
+  always-mark-nsfw: "Always post with a warning about media attachment"
   show-full-acct: "Do not omit the hostname from the username"
   reduce-motion: "Reduce motion in UI"
   this-setting-is-this-device-only: "Only for this device"
@@ -155,8 +155,10 @@ common:
     home: "Home"
     local: "Local"
     hybrid: "Social"
+    hashtag: "Hashtag"
     global: "Global"
     mentions: "Mentions"
+    direct: "ダイレクト投稿"
     notifications: "Notifications"
     list: "Lists"
     swap-left: "Move to the left"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "Social"
   global: "Global"
   mentions: "Mentions"
+  messages: "Messages"
   list: "Lists"
+  hashtag: "Hashtag"
+  add-tag-timeline: "Add hashtag tl"
+  add-list: "Add list"
+  list-name: "List name"
 desktop/views/components/ui.header.vue:
   welcome-back: "Welcome back,"
   adjective: "-san"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "Social"
   global: "Global"
   mentions: "Mentions"
+  messages: "Messages"
 mobile/views/pages/tag.vue:
   no-posts-found: "No posts \"{}\" found."
 mobile/views/pages/welcome.vue:

locales/es-ES.yml

@@ -155,8 +155,10 @@ common:
     home: "Inicio"
     local: "Local"
     hybrid: "Social"
+    hashtag: "ハッシュタグ"
     global: "Global"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "Notificaciones"
     list: "Listado"
     swap-left: "Desplazar a la izq."
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "Bienvenido/a de vuelta,"
   adjective: "-san"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/fr-FR.yml

@@ -112,7 +112,7 @@ common:
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
   always-mark-nsfw: "常にメディアを閲覧注意として投稿"
   show-full-acct: "ユーザー名のホストを省略しない"
-  reduce-motion: "UIの動きを減らす"
+  reduce-motion: "Réduire les animations dans l’interface utilisateur"
   this-setting-is-this-device-only: "Uniquement sur cet appareil"
   do-not-use-in-production: 'Il s’agit d’une version de développement. Ne pas utiliser dans un environnement de production.'
   reversi:
@@ -155,8 +155,10 @@ common:
     home: "Accueil"
     local: "Local"
     hybrid: "Social"
+    hashtag: "ハッシュタグ"
     global: "Global"
-    mentions: "あなた宛て"
+    mentions: "Mentions"
+    direct: "ダイレクト投稿"
     notifications: "Notifications"
     list: "Liste"
     swap-left: "Déplacer à gauche"
@@ -260,8 +262,8 @@ common/views/components/connect-failed.troubleshooter.vue:
   flush: "Vider le cache"
   set-version: "Choisissez une version"
 common/views/components/media-banner.vue:
-  sensitive: "閲覧注意"
-  click-to-show: "クリックして表示"
+  sensitive: "Contenu sensible"
+  click-to-show: "Cliquer pour afficher"
 common/views/components/cw-button.vue:
   hide: "Masquer"
   show: "Voir plus"
@@ -484,7 +486,7 @@ desktop/views/components/charts.vue:
     drive-files-total: "ドライブのファイル数の累計"
     network-requests: "Requêtes"
     network-time: "Temps de réponse"
-    network-usage: "通信量"
+    network-usage: "Traffic"
 desktop/views/components/choose-file-from-drive-window.vue:
   choose-file: "Sélection de fichiers"
   upload: "Téléverser des fichiers à partir de votre ordinateur"
@@ -791,7 +793,7 @@ desktop/views/components/settings.profile.vue:
   birthday: "Date de naissance"
   save: "Mettre à jour le profil"
   locked-account: "Protéger votre compte"
-  is-locked: "フォローを承認制にする"
+  is-locked: "Demande d’abonnement en attente d’approbation"
   other: "Autre"
   is-bot: "Ce compte est un Bot"
   is-cat: "Ce compte est un Chat"
@@ -808,8 +810,13 @@ desktop/views/components/timeline.vue:
   local: "Local"
   hybrid: "Social"
   global: "Global"
-  mentions: "あなた宛て"
+  mentions: "Mentions"
+  messages: "メッセージ"
   list: "Listes"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "Content de vous revoir !"
   adjective: "さん"
@@ -1134,7 +1141,8 @@ mobile/views/pages/home.vue:
   local: "Local"
   hybrid: "Social"
   global: "Global"
-  mentions: "あなた宛て"
+  mentions: "Mentions"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "Pas de message avec un hashtag {} trouvé."
 mobile/views/pages/welcome.vue:
@@ -1175,7 +1183,7 @@ mobile/views/pages/settings/settings.profile.vue:
   avatar: "Avatar"
   banner: "Bannière"
   is-cat: "Ce compte est un Bot"
-  is-locked: "フォローを承認制にする"
+  is-locked: "Demande d’abonnement en attente d’approbation"
   advanced: "Avancé"
   privacy: "Vie privée"
   save: "Mettre à jour le profil"

locales/it-IT.yml

@@ -155,8 +155,10 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/ja-JP.yml

@@ -166,8 +166,10 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -915,7 +917,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
@@ -1317,6 +1324,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"

locales/ja-KS.yml

@@ -155,8 +155,10 @@ common:
     home: "うち"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動や！"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえり、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿はあらへんで。"
 mobile/views/pages/welcome.vue:

locales/ko-KR.yml

@@ -155,8 +155,10 @@ common:
     home: "홈"
     local: "로컬"
     hybrid: "소셜"
+    hashtag: "ハッシュタグ"
     global: "글로벌"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "통지"
     list: "목록"
     swap-left: "左に移動"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/nl-NL.yml

@@ -155,8 +155,10 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "Algemeen"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "Lijsten"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/no-NO.yml

@@ -155,8 +155,10 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/pl-PL.yml

@@ -155,8 +155,10 @@ common:
     home: "Strona główna"
     local: "Lokalne"
     hybrid: "Społeczność"
+    hashtag: "ハッシュタグ"
     global: "Globalne"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "Powiadomienia"
     list: "Listy"
     swap-left: "Przesuń w lewo"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "Społeczność"
   global: "Globalne"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "Listy"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "Witaj ponownie,"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "Społeczność"
   global: "Globalne"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "Nie znaleziono wpisów zawierających „{}”."
 mobile/views/pages/welcome.vue:

locales/pt-PT.yml

@@ -155,8 +155,10 @@ common:
     home: "Início"
     local: "Local"
     hybrid: "Social"
+    hashtag: "ハッシュタグ"
     global: "Global"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "Notificações"
     list: "Listas"
     swap-left: "Mover para a esquerda"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/ru-RU.yml

@@ -155,8 +155,10 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

locales/zh-CN.yml

@@ -155,8 +155,10 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -809,7 +811,12 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
   adjective: "さん"
@@ -1135,6 +1142,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
 mobile/views/pages/welcome.vue:

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "8.44.0",
-	"clientVersion": "1.0.9813",
+	"version": "8.57.0",
+	"clientVersion": "1.0.9922",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -51,7 +51,7 @@
 		"@types/koa-logger": "3.1.0",
 		"@types/koa-mount": "3.0.1",
 		"@types/koa-multer": "1.0.0",
-		"@types/koa-router": "7.0.31",
+		"@types/koa-router": "7.0.32",
 		"@types/koa-send": "4.1.1",
 		"@types/koa-views": "2.0.3",
 		"@types/koa__cors": "2.2.3",
@@ -60,7 +60,7 @@
 		"@types/mocha": "5.2.3",
 		"@types/mongodb": "3.1.7",
 		"@types/ms": "0.7.30",
-		"@types/node": "10.9.4",
+		"@types/node": "10.10.1",
 		"@types/portscanner": "2.1.0",
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "1.2.0",
@@ -77,7 +77,7 @@
 		"@types/systeminformation": "3.23.0",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.4",
-		"@types/webpack": "4.4.11",
+		"@types/webpack": "4.4.12",
 		"@types/webpack-stream": "3.2.10",
 		"@types/websocket": "0.0.40",
 		"@types/ws": "6.0.1",
@@ -217,9 +217,9 @@
 		"vuewordcloud": "18.7.11",
 		"vuex": "3.0.1",
 		"vuex-persistedstate": "2.5.4",
-		"web-push": "3.3.2",
+		"web-push": "3.3.3",
 		"webfinger.js": "2.6.6",
-		"webpack": "4.19.0",
+		"webpack": "4.19.1",
 		"webpack-cli": "3.1.0",
 		"websocket": "1.0.26",
 		"ws": "6.0.0",

src/client/app/app.vue

@@ -1,3 +1,24 @@
 <template>
-<router-view id="app"></router-view>
+<router-view id="app" v-hotkey.global="keymap"></router-view>
 </template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url, lang } from './config';
+
+export default Vue.extend({
+	computed: {
+		keymap(): any {
+			return {
+				'h|slash': this.help
+			};
+		}
+	},
+
+	methods: {
+		help() {
+			window.open(`${url}/docs/${lang}/keyboard-shortcut`, '_blank');
+		}
+	}
+});
+</script>

src/client/app/common/hotkey.ts

@@ -0,0 +1,109 @@
+import keyCode from './keycode';
+import { concat } from '../../../prelude/array';
+
+type pattern = {
+	which: string[];
+	ctrl?: boolean;
+	shift?: boolean;
+	alt?: boolean;
+};
+
+type action = {
+	patterns: pattern[];
+
+	callback: Function;
+};
+
+const getKeyMap = keymap => Object.entries(keymap).map(([patterns, callback]): action => {
+	const result = {
+		patterns: [],
+		callback: callback
+	} as action;
+
+	result.patterns = patterns.split('|').map(part => {
+		const pattern = {
+			which: [],
+			ctrl: false,
+			alt: false,
+			shift: false
+		} as pattern;
+
+		part.trim().split('+').forEach(key => {
+			key = key.trim().toLowerCase();
+			switch (key) {
+				case 'ctrl': pattern.ctrl = true; break;
+				case 'alt': pattern.alt = true; break;
+				case 'shift': pattern.shift = true; break;
+				default: pattern.which = keyCode(key).map(k => k.toLowerCase());
+			}
+		});
+
+		return pattern;
+	});
+
+	return result;
+});
+
+const ignoreElemens = ['input', 'textarea'];
+
+export default {
+	install(Vue) {
+		Vue.directive('hotkey', {
+			bind(el, binding) {
+				el._hotkey_global = binding.modifiers.global === true;
+
+				const actions = getKeyMap(binding.value);
+
+				// flatten
+				const reservedKeys = concat(concat(actions.map(a => a.patterns.map(p => p.which))));
+
+				el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');
+
+				el._keyHandler = e => {
+					const key = e.code.toLowerCase();
+
+					const targetReservedKeys = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeys || '' : '';
+					if (document.activeElement && ignoreElemens.some(el => document.activeElement.matches(el))) return;
+
+					for (const action of actions) {
+						if (el._hotkey_global && targetReservedKeys.includes(`'${key}'`)) break;
+
+						const matched = action.patterns.some(pattern => {
+							const matched = pattern.which.includes(key) &&
+								pattern.ctrl == e.ctrlKey &&
+								pattern.shift == e.shiftKey &&
+								pattern.alt == e.altKey;
+
+							if (matched) {
+								e.preventDefault();
+								e.stopPropagation();
+								action.callback(e);
+								return true;
+							} else {
+								return false;
+							}
+						});
+
+						if (matched) {
+							break;
+						}
+					}
+				};
+
+				if (el._hotkey_global) {
+					document.addEventListener('keydown', el._keyHandler);
+				} else {
+					el.addEventListener('keydown', el._keyHandler);
+				}
+			},
+
+			unbind(el) {
+				if (el._hotkey_global) {
+					document.removeEventListener('keydown', el._keyHandler);
+				} else {
+					el.removeEventListener('keydown', el._keyHandler);
+				}
+			}
+		});
+	}
+};

src/client/app/common/keycode.ts

@@ -0,0 +1,33 @@
+export default (input: string): string[] => {
+	if (Object.keys(aliases).some(a => a.toLowerCase() == input.toLowerCase())) {
+		const codes = aliases[input];
+		return Array.isArray(codes) ? codes : [codes];
+	} else {
+		return [input];
+	}
+};
+
+export const aliases = {
+	'esc': 'Escape',
+	'enter': ['Enter', 'NumpadEnter'],
+	'up': 'ArrowUp',
+	'down': 'ArrowDown',
+	'left': 'ArrowLeft',
+	'right': 'ArrowRight',
+	'plus': ['NumpadAdd', 'Semicolon'],
+};
+
+/*!
+* Programatically add the following
+*/
+
+// lower case chars
+for (let i = 97; i < 123; i++) {
+	const char = String.fromCharCode(i);
+	aliases[char] = `Key${char.toUpperCase()}`;
+}
+
+// numbers
+for (let i = 0; i < 10; i++) {
+	aliases[i] = [`Numpad${i}`, `Digit${i}`];
+}

src/client/app/common/scripts/streaming/hashtag.ts

@@ -0,0 +1,13 @@
+import Stream from './stream';
+import MiOS from '../../../mios';
+
+export class HashtagStream extends Stream {
+	constructor(os: MiOS, me, q) {
+		super(os, 'hashtag', me ? {
+			i: me.token,
+			q: JSON.stringify(q)
+		} : {
+			q: JSON.stringify(q)
+		});
+	}
+}

src/client/app/common/scripts/streaming/home.ts

@@ -50,6 +50,30 @@ export class HomeStream extends Stream {
 			});
 		});
 
+		this.on('unreadMention', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadMentions: true
+			});
+		});
+
+		this.on('readAllUnreadMentions', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadMentions: false
+			});
+		});
+
+		this.on('unreadSpecifiedNote', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadSpecifiedNotes: true
+			});
+		});
+
+		this.on('readAllUnreadSpecifiedNotes', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadSpecifiedNotes: false
+			});
+		});
+
 		this.on('clientSettingUpdated', x => {
 			os.store.commit('settings/set', {
 				key: x.key,

src/client/app/common/views/components/menu.vue

@@ -2,9 +2,9 @@
 <div class="onchrpzrvnoruiaenfcqvccjfuupzzwv">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ hukidasi }" ref="popover">
-		<template v-for="item in items">
+		<template v-for="item, i in items">
 			<div v-if="item === null"></div>
-			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text"></button>
+			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text" :tabindex="i"></button>
 		</template>
 	</div>
 </div>

src/client/app/common/views/components/note-menu.vue

@@ -33,12 +33,16 @@ export default Vue.extend({
 					text: '%i18n:@pin%',
 					action: this.pin
 				});
+			}
+
+			if (this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin) {
 				items.push({
 					icon: '%fa:trash-alt R%',
 					text: '%i18n:@delete%',
 					action: this.del
 				});
 			}
+
 			if (this.note.uri) {
 				items.push({
 					icon: '%fa:external-link-square-alt%',
@@ -48,6 +52,7 @@ export default Vue.extend({
 					}
 				});
 			}
+
 			return items;
 		}
 	},

src/client/app/common/views/components/reaction-picker.vue

@@ -1,9 +1,9 @@
 <template>
-<div class="mk-reaction-picker">
+<div class="mk-reaction-picker" v-hotkey.global="keymap">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact, big }" ref="popover">
 		<p v-if="!compact">{{ title }}</p>
-		<div>
+		<div ref="buttons" :class="{ showFocus }">
 			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
 			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
 			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
@@ -31,30 +31,84 @@ export default Vue.extend({
 			type: Object,
 			required: true
 		},
+
 		source: {
 			required: true
 		},
+
 		compact: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
+
 		cb: {
 			required: false
 		},
+
 		big: {
 			type: Boolean,
 			required: false,
 			default: false
+		},
+
+		showFocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
 		}
 	},
+
 	data() {
 		return {
-			title: placeholder
+			title: placeholder,
+			focus: null
 		};
 	},
+
+	computed: {
+		keymap(): any {
+			return {
+				'esc': this.close,
+				'enter|space|plus': this.choose,
+				'up|k': this.focusUp,
+				'left|h|shift+tab': this.focusLeft,
+				'right|l|tab': this.focusRight,
+				'down|j': this.focusDown,
+				'1': () => this.react('like'),
+				'2': () => this.react('love'),
+				'3': () => this.react('laugh'),
+				'4': () => this.react('hmm'),
+				'5': () => this.react('surprise'),
+				'6': () => this.react('congrats'),
+				'7': () => this.react('angry'),
+				'8': () => this.react('confused'),
+				'9': () => this.react('rip'),
+				'0': () => this.react('pudding'),
+			};
+		}
+	},
+
+	watch: {
+		focus(i) {
+			this.$refs.buttons.children[i].focus();
+
+			if (this.showFocus) {
+				this.title = this.$refs.buttons.children[i].title;
+			}
+		}
+	},
+
 	mounted() {
 		this.$nextTick(() => {
+			this.focus = 0;
+
 			const popover = this.$refs.popover as any;
 
 			const rect = this.source.getBoundingClientRect();
@@ -76,7 +130,7 @@ export default Vue.extend({
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 1,
-				duration: 100,
+				duration: this.animation ? 100 : 0,
 				easing: 'linear'
 			});
 
@@ -84,10 +138,11 @@ export default Vue.extend({
 				targets: this.$refs.popover,
 				opacity: 1,
 				scale: [0.5, 1],
-				duration: 500
+				duration: this.animation ? 500 : 0
 			});
 		});
 	},
+
 	methods: {
 		react(reaction) {
 			(this as any).api('notes/reactions/create', {
@@ -95,21 +150,25 @@ export default Vue.extend({
 				reaction: reaction
 			}).then(() => {
 				if (this.cb) this.cb();
+				this.$emit('closed');
 				this.destroyDom();
 			});
 		},
+
 		onMouseover(e) {
 			this.title = e.target.title;
 		},
+
 		onMouseout(e) {
 			this.title = placeholder;
 		},
+
 		close() {
 			(this.$refs.backdrop as any).style.pointerEvents = 'none';
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 0,
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'linear'
 			});
 
@@ -118,10 +177,33 @@ export default Vue.extend({
 				targets: this.$refs.popover,
 				opacity: 0,
 				scale: 0.5,
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'easeInBack',
-				complete: () => this.destroyDom()
+				complete: () => {
+					this.$emit('closed');
+					this.destroyDom();
+				}
 			});
+		},
+
+		focusUp() {
+			this.focus = this.focus == 0 ? 9 : this.focus < 5 ? (this.focus + 4) : (this.focus - 5);
+		},
+
+		focusDown() {
+			this.focus = this.focus == 9 ? 0 : this.focus >= 5 ? (this.focus - 4) : (this.focus + 5);
+		},
+
+		focusRight() {
+			this.focus = this.focus == 9 ? 0 : (this.focus + 1);
+		},
+
+		focusLeft() {
+			this.focus = this.focus == 0 ? 9 : (this.focus - 1);
+		},
+
+		choose() {
+			this.$refs.buttons.childNodes[this.focus].click();
 		}
 	}
 });
@@ -207,6 +289,21 @@ root(isDark)
 			width 240px
 			text-align center
 
+			&.showFocus
+				> button:focus
+					z-index 1
+
+					&:after
+						content ""
+						pointer-events none
+						position absolute
+						top 0
+						right 0
+						bottom 0
+						left 0
+						border 2px solid rgba($theme-color, 0.3)
+						border-radius 4px
+
 			> button
 				padding 0
 				width 40px

src/client/app/desktop/views/components/choose-file-from-drive-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="800px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
 	<span slot="header">
 		<span v-html="title" :class="$style.title"></span>
 		<span :class="$style.count" v-if="multiple && files.length > 0">({{ files.length }}%i18n:@choose-file%)</span>

src/client/app/desktop/views/components/choose-folder-from-drive-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="800px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
 	<span slot="header">
 		<span v-html="title" :class="$style.title"></span>
 	</span>

src/client/app/desktop/views/components/drive-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" @closed="$destroy" width="800px" height="500px" :popout-url="popout">
+<mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
 	<template slot="header">
 		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:@used%</p>
 		<span :class="$style.title">%fa:cloud%%i18n:@drive%</span>

src/client/app/desktop/views/components/followers-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window width="400px" height="550px" @closed="$destroy">
+<mk-window width="400px" height="550px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">
 		<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@followers%'.replace('{}', name) }}
 	</span>

src/client/app/desktop/views/components/following-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window width="400px" height="550px" @closed="$destroy">
+<mk-window width="400px" height="550px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">
 		<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@following%'.replace('{}', name) }}
 	</span>

src/client/app/desktop/views/components/game-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:gamepad%%i18n:@game%</span>
 	<mk-reversi :class="$style.content" @gamed="g => game = g"/>
 </mk-window>

src/client/app/desktop/views/components/home.vue

@@ -38,7 +38,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="main">
+	<div class="main" :class="{ withBg: $store.state.i.wallpaperUrl != null }">
 		<template v-if="customize">
 			<x-draggable v-for="place in ['left', 'right']"
 				:list="widgets[place]"
@@ -237,6 +237,10 @@ export default Vue.extend({
 
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
+		},
+
+		focus() {
+			(this.$refs.tl as any).focus();
 		}
 	}
 });
@@ -336,7 +340,10 @@ root(isDark)
 		display flex
 		justify-content center
 		margin 0 auto
-		max-width 1220px
+		max-width 1240px
+
+		&.withBg
+			background rgba(isDark ? #000 : #fff, 0.5)
 
 		> *
 			.customize-container
@@ -351,7 +358,7 @@ root(isDark)
 
 		> .main
 			padding 16px
-			width calc(100% - 275px * 2)
+			width calc(100% - 280px * 2)
 			order 2
 
 			> .form
@@ -367,7 +374,7 @@ root(isDark)
 					border-radius 0
 
 		> *:not(.main)
-			width 275px
+			width 280px
 			padding 16px 0 16px 0
 
 			> *:not(:last-child)

src/client/app/desktop/views/components/input-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="$destroy">
+<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="destroyDom">
 	<span slot="header" :class="$style.header">
 		%fa:i-cursor%{{ title }}
 	</span>

src/client/app/desktop/views/components/messaging-room-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:comments%%i18n:@title% {{ user | userName }}</span>
 	<mk-messaging-room :user="user" :class="$style.content"/>
 </mk-window>

src/client/app/desktop/views/components/messaging-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:comments%%i18n:@title%</span>
 	<mk-messaging :class="$style.content" @navigate="navigate"/>
 </mk-window>

src/client/app/desktop/views/components/notes.note.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
+<div class="note" tabindex="-1" v-hotkey="keymap" :title="title">
 	<div class="reply-to" v-if="p.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
 		<x-sub :note="p.reply"/>
 	</div>
@@ -40,18 +40,18 @@
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button class="replyButton" @click="reply" title="%i18n:@reply%">
+				<button class="replyButton" @click="reply()" title="%i18n:@reply%">
 					<template v-if="p.reply">%fa:reply-all%</template>
 					<template v-else>%fa:reply%</template>
 					<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 				</button>
-				<button class="renoteButton" @click="renote" title="%i18n:@renote%">
+				<button class="renoteButton" @click="renote()" title="%i18n:@renote%">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
-				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
+				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 				</button>
-				<button @click="menu" ref="menuButton">
+				<button @click="menu()" ref="menuButton">
 					%fa:ellipsis-h%
 				</button>
 				<!-- <button title="%i18n:@detail">
@@ -111,6 +111,30 @@ export default Vue.extend({
 	},
 
 	computed: {
+		keymap(): any {
+			return {
+				'r|left': () => this.reply(true),
+				'e|a|plus': () => this.react(true),
+				'q|right': () => this.renote(true),
+				'ctrl+q|ctrl+right': this.renoteDirectly,
+				'up|k|shift+tab': this.focusBefore,
+				'down|j|tab': this.focusAfter,
+				'esc': this.blur,
+				'm|o': () => this.menu(true),
+				's': this.toggleShowContent,
+				'1': () => this.reactDirectly('like'),
+				'2': () => this.reactDirectly('love'),
+				'3': () => this.reactDirectly('laugh'),
+				'4': () => this.reactDirectly('hmm'),
+				'5': () => this.reactDirectly('surprise'),
+				'6': () => this.reactDirectly('congrats'),
+				'7': () => this.reactDirectly('angry'),
+				'8': () => this.reactDirectly('confused'),
+				'9': () => this.reactDirectly('rip'),
+				'0': () => this.reactDirectly('pudding'),
+			};
+		},
+
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
@@ -189,10 +213,14 @@ export default Vue.extend({
 	methods: {
 		capture(withHandler = false) {
 			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
+				const data = {
 					type: 'capture',
 					id: this.p.id
-				});
+				} as any;
+				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
+					data.read = true;
+				}
+				this.connection.send(data);
 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},
@@ -220,67 +248,69 @@ export default Vue.extend({
 			}
 		},
 
-		reply() {
+		reply(viaKeyboard = false) {
 			(this as any).os.new(MkPostFormWindow, {
-				reply: this.p
-			});
+				reply: this.p,
+				animation: !viaKeyboard
+			}).$once('closed', this.focus);
 		},
 
-		renote() {
+		renote(viaKeyboard = false) {
 			(this as any).os.new(MkRenoteFormWindow, {
-				note: this.p
+				note: this.p,
+				animation: !viaKeyboard
+			}).$once('closed', this.focus);
+		},
+
+		renoteDirectly() {
+			(this as any).api('notes/create', {
+				renoteId: this.p.id
 			});
 		},
 
-		react() {
+		react(viaKeyboard = false) {
+			this.blur();
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				note: this.p
+				note: this.p,
+				showFocus: viaKeyboard,
+				animation: !viaKeyboard
+			}).$once('closed', this.focus);
+		},
+
+		reactDirectly(reaction) {
+			(this as any).api('notes/reactions/create', {
+				noteId: this.p.id,
+				reaction: reaction
 			});
 		},
 
-		menu() {
+		menu(viaKeyboard = false) {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				note: this.p
-			});
+				note: this.p,
+				animation: !viaKeyboard
+			}).$once('closed', this.focus);
 		},
 
-		onKeydown(e) {
-			let shouldBeCancel = true;
+		toggleShowContent() {
+			this.showContent = !this.showContent;
+		},
 
-			switch (true) {
-				case e.which == 38: // [↑]
-				case e.which == 74: // [j]
-				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
-					focus(this.$el, e => e.previousElementSibling);
-					break;
+		focus() {
+			this.$el.focus();
+		},
 
-				case e.which == 40: // [↓]
-				case e.which == 75: // [k]
-				case e.which == 9: // [Tab]
-					focus(this.$el, e => e.nextElementSibling);
-					break;
+		blur() {
+			this.$el.blur();
+		},
 
-				case e.which == 81: // [q]
-				case e.which == 69: // [e]
-					this.renote();
-					break;
+		focusBefore() {
+			focus(this.$el, e => e.previousElementSibling);
+		},
 
-				case e.which == 70: // [f]
-				case e.which == 76: // [l]
-					//this.like();
-					break;
-
-				case e.which == 82: // [r]
-					this.reply();
-					break;
-
-				default:
-					shouldBeCancel = false;
-			}
-
-			if (shouldBeCancel) e.preventDefault();
+		focusAfter() {
+			focus(this.$el, e => e.nextElementSibling);
 		}
 	}
 });

src/client/app/desktop/views/components/notes.vue

@@ -10,9 +10,9 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div" ref="notes">
 		<template v-for="(note, i) in _notes">
-			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
 				<span>%fa:angle-up%{{ note._datetext }}</span>
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
@@ -89,7 +89,7 @@ export default Vue.extend({
 		},
 
 		focus() {
-			(this.$el as any).children[0].focus();
+			(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
 		},
 
 		onNoteUpdated(i, note) {

src/client/app/desktop/views/components/post-form-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window class="mk-post-form-window" ref="window" is-modal @closed="$destroy">
+<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation">
 	<span slot="header" class="mk-post-form-window--header">
 		<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
 		<span v-if="!reply">%i18n:@note%</span>
@@ -25,7 +25,19 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['reply'],
+	props: {
+		reply: {
+			type: Object,
+			required: false
+		},
+
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+
 	data() {
 		return {
 			uploadings: [],
@@ -33,11 +45,13 @@ export default Vue.extend({
 			geo: null
 		};
 	},
+
 	mounted() {
 		this.$nextTick(() => {
 			(this.$refs.form as any).focus();
 		});
 	},
+
 	methods: {
 		onChangeUploadings(files) {
 			this.uploadings = files;
@@ -53,6 +67,10 @@ export default Vue.extend({
 		},
 		onPosted() {
 			(this.$refs.window as any).close();
+		},
+		onWindowClosed() {
+			this.$emit('closed');
+			this.destroyDom();
 		}
 	}
 });

src/client/app/desktop/views/components/progress-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="$destroy">
+<mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="destroyDom">
 	<span slot="header">{{ title }}<mk-ellipsis/></span>
 	<div :class="$style.body">
 		<p :class="$style.init" v-if="isNaN(value)">%i18n:@waiting%<mk-ellipsis/></p>

src/client/app/desktop/views/components/received-follow-requests-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:envelope R% %i18n:@title%</span>
 
 	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode">

src/client/app/desktop/views/components/renote-form-window.vue

@@ -1,7 +1,7 @@
 <template>
-<mk-window ref="window" is-modal @closed="$destroy">
+<mk-window ref="window" is-modal @closed="onWindowClosed" :animation="animation">
 	<span slot="header" :class="$style.header">%fa:retweet%%i18n:@title%</span>
-	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled"/>
+	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
 </mk-window>
 </template>
 
@@ -9,26 +9,48 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['note'],
-	mounted() {
-		document.addEventListener('keydown', this.onDocumentKeydown);
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
 	},
-	beforeDestroy() {
-		document.removeEventListener('keydown', this.onDocumentKeydown);
+
+	computed: {
+		keymap(): any {
+			return {
+				'esc': this.close,
+				'enter': this.post,
+				'q': this.quote,
+			};
+		}
 	},
+
 	methods: {
-		onDocumentKeydown(e) {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 27) { // Esc
-					(this.$refs.window as any).close();
-				}
-			}
+		post() {
+			(this.$refs.form as any).ok();
+		},
+		quote() {
+			(this.$refs.form as any).onQuote();
+		},
+		close() {
+			(this.$refs.window as any).close();
 		},
 		onPosted() {
 			(this.$refs.window as any).close();
 		},
 		onCanceled() {
 			(this.$refs.window as any).close();
+		},
+		onWindowClosed() {
+			this.$emit('closed');
+			this.destroyDom();
 		}
 	}
 });

src/client/app/desktop/views/components/settings-window.vue

@@ -1,13 +1,19 @@
 <template>
-<mk-window ref="window" is-modal width="700px" height="550px" @closed="$destroy">
+<mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:cog%%i18n:@settings%</span>
-	<mk-settings @done="close"/>
+	<mk-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
+	props: {
+		initialPage: {
+			type: String,
+			required: false
+		}
+	},
 	methods: {
 		close() {
 			(this as any).$refs.window.close();

src/client/app/desktop/views/components/settings.tags.vue

@@ -0,0 +1,65 @@
+<template>
+<div class="vfcitkilproprqtbnpoertpsziierwzi">
+	<div v-for="timeline in timelines" class="timeline">
+		<ui-input v-model="timeline.title" @change="save">
+			<span>%i18n:@title%</span>
+		</ui-input>
+		<ui-textarea :value="timeline.query ? timeline.query.map(tags => tags.join(' ')).join('\n') : ''" @input="onQueryChange(timeline, $event)">
+			<span>%i18n:@query%</span>
+		</ui-textarea>
+		<ui-button class="save" @click="save">%i18n:@save%</ui-button>
+	</div>
+	<ui-button class="add" @click="add">%i18n:@add%</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	data() {
+		return {
+			timelines: this.$store.state.settings.tagTimelines
+		};
+	},
+
+	methods: {
+		add() {
+			this.timelines.push({
+				id: uuid(),
+				title: '',
+				query: ''
+			});
+
+			this.save();
+		},
+
+		save() {
+			this.$store.dispatch('settings/set', { key: 'tagTimelines', value: this.timelines });
+		},
+
+		onQueryChange(timeline, value) {
+			timeline.query = value.split('\n').map(tags => tags.split(' '));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+
+root(isDark)
+	> .timeline
+		padding-bottom 16px
+		border-bottom solid 1px rgba(#000, 0.1)
+
+	> .add
+		margin-top 16px
+
+.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
+	root(true)
+
+.vfcitkilproprqtbnpoertpsziierwzi:not([data-darkmode])
+	root(false)
+
+</style>

src/client/app/desktop/views/components/settings.vue

@@ -5,6 +5,7 @@
 		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
 		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
 		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:@drive%</p>
+		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
 		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:@mute%</p>
 		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
 		<p :class="{ active: page == 'twitter' }" @mousedown="page = 'twitter'">%fa:B twitter .fw%Twitter</p>
@@ -138,6 +139,11 @@
 			<x-drive/>
 		</section>
 
+		<section class="hashtags" v-show="page == 'hashtags'">
+			<h1>%i18n:@tags%</h1>
+			<x-tags/>
+		</section>
+
 		<section class="mute" v-show="page == 'mute'">
 			<h1>%i18n:@mute%</h1>
 			<x-mute/>
@@ -222,6 +228,7 @@ import XApi from './settings.api.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
 import XDrive from './settings.drive.vue';
+import XTags from './settings.tags.vue';
 import { url, langs, version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
 
@@ -234,11 +241,18 @@ export default Vue.extend({
 		XApi,
 		XApps,
 		XSignins,
-		XDrive
+		XDrive,
+		XTags
+	},
+	props: {
+		initialPage: {
+			type: String,
+			required: false
+		}
 	},
 	data() {
 		return {
-			page: 'profile',
+			page: this.initialPage || 'profile',
 			meta: null,
 			version,
 			langs,

src/client/app/desktop/views/components/timeline.core.vue

@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { HashtagStream } from '../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -23,6 +24,9 @@ export default Vue.extend({
 		src: {
 			type: String,
 			required: true
+		},
+		tagTl: {
+			required: false
 		}
 	},
 
@@ -31,9 +35,17 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
+			streamManager: null,
 			connection: null,
 			connectionId: null,
-			date: null
+			date: null,
+			baseQuery: {
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			},
+			query: {},
+			endpoint: null
 		};
 	},
 
@@ -42,55 +54,109 @@ export default Vue.extend({
 			return this.$store.state.i.followingCount == 0;
 		},
 
-		stream(): any {
-			switch (this.src) {
-				case 'home': return (this as any).os.stream;
-				case 'local': return (this as any).os.streams.localTimelineStream;
-				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
-				case 'global': return (this as any).os.streams.globalTimelineStream;
-				case 'mentions': return (this as any).os.stream;
-			}
-		},
-
-		endpoint(): string {
-			switch (this.src) {
-				case 'home': return 'notes/timeline';
-				case 'local': return 'notes/local-timeline';
-				case 'hybrid': return 'notes/hybrid-timeline';
-				case 'global': return 'notes/global-timeline';
-				case 'mentions': return 'notes/mentions';
-			}
-		},
-
 		canFetchMore(): boolean {
 			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
 	mounted() {
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
+		const prepend = note => {
+			(this.$refs.timeline as any).prepend(note);
+		};
 
-		this.connection.on(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
-			this.connection.on('follow', this.onChangeFollowing);
-			this.connection.on('unfollow', this.onChangeFollowing);
+		if (this.src == 'tag') {
+			this.endpoint = 'notes/search_by_tag';
+			this.query = {
+				query: this.tagTl.query
+			};
+			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.close();
+			});
+		} else if (this.src == 'home') {
+			this.endpoint = 'notes/timeline';
+			const onChangeFollowing = () => {
+				this.fetch();
+			};
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.connection.on('follow', onChangeFollowing);
+			this.connection.on('unfollow', onChangeFollowing);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.off('follow', onChangeFollowing);
+				this.connection.off('unfollow', onChangeFollowing);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'local') {
+			this.endpoint = 'notes/local-timeline';
+			this.streamManager = (this as any).os.streams.localTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'hybrid') {
+			this.endpoint = 'notes/hybrid-timeline';
+			this.streamManager = (this as any).os.streams.hybridTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'global') {
+			this.endpoint = 'notes/global-timeline';
+			this.streamManager = (this as any).os.streams.globalTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'mentions') {
+			this.endpoint = 'notes/mentions';
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'messages') {
+			this.endpoint = 'notes/mentions';
+			this.query = {
+				visibility: 'specified'
+			};
+			const onNote = note => {
+				if (note.visibility == 'specified') {
+					prepend(note);
+				}
+			};
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', onNote);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', onNote);
+				this.streamManager.dispose(this.connectionId);
+			});
 		}
 
-		document.addEventListener('keydown', this.onKeydown);
-
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.connection.off(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
-			this.connection.off('follow', this.onChangeFollowing);
-			this.connection.off('unfollow', this.onChangeFollowing);
-		}
-		this.stream.dispose(this.connectionId);
-
-		document.removeEventListener('keydown', this.onKeydown);
+		this.$emit('beforeDestroy');
 	},
 
 	methods: {
@@ -98,13 +164,10 @@ export default Vue.extend({
 			this.fetching = true;
 
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				(this as any).api(this.endpoint, {
+				(this as any).api(this.endpoint, Object.assign({
 					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : undefined,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
+					untilDate: this.date ? this.date.getTime() : undefined
+				}, this.baseQuery, this.query)).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
 						this.existMore = true;
@@ -121,13 +184,10 @@ export default Vue.extend({
 
 			this.moreFetching = true;
 
-			const promise = (this as any).api(this.endpoint, {
+			const promise = (this as any).api(this.endpoint, Object.assign({
 				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
+				untilId: (this.$refs.timeline as any).tail().id
+			}, this.baseQuery, this.query));
 
 			promise.then(notes => {
 				if (notes.length == fetchLimit + 1) {
@@ -142,15 +202,6 @@ export default Vue.extend({
 			return promise;
 		},
 
-		onNote(note) {
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		onChangeFollowing() {
-			this.fetch();
-		},
-
 		focus() {
 			(this.$refs.timeline as any).focus();
 		},
@@ -158,14 +209,6 @@ export default Vue.extend({
 		warp(date) {
 			this.date = date;
 			this.fetch();
-		},
-
-		onKeydown(e) {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 84) { // t
-					this.focus();
-				}
-			}
 		}
 	}
 });

src/client/app/desktop/views/components/timeline.vue

@@ -5,15 +5,22 @@
 		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
 		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
-		<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
+		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span>
 		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
-		<button @click="chooseList" title="%i18n:@list%">%fa:list%</button>
+		<div class="buttons">
+			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></button>
+			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></button>
+			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button>
+			<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button>
+		</div>
 	</header>
 	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
 	<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
 	<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
 	<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+	<x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
+	<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
 	<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 </div>
 </template>
@@ -21,7 +28,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import XCore from './timeline.core.vue';
-import MkUserListsWindow from './user-lists-window.vue';
+import Menu from '../../../common/views/components/menu.vue';
+import MkSettingsWindow from './settings-window.vue';
 
 export default Vue.extend({
 	components: {
@@ -32,6 +40,7 @@ export default Vue.extend({
 		return {
 			src: 'home',
 			list: null,
+			tagTl: null,
 			enableLocalTimeline: false
 		};
 	},
@@ -41,8 +50,14 @@ export default Vue.extend({
 			this.saveSrc();
 		},
 
-		list() {
+		list(x) {
 			this.saveSrc();
+			if (x != null) this.tagTl = null;
+		},
+
+		tagTl(x) {
+			this.saveSrc();
+			if (x != null) this.list = null;
 		}
 	},
 
@@ -55,6 +70,8 @@ export default Vue.extend({
 			this.src = this.$store.state.device.tl.src;
 			if (this.src == 'list') {
 				this.list = this.$store.state.device.tl.arg;
+			} else if (this.src == 'tag') {
+				this.tagTl = this.$store.state.device.tl.arg;
 			}
 		} else if (this.$store.state.i.followingCount == 0) {
 			this.src = 'hybrid';
@@ -71,20 +88,86 @@ export default Vue.extend({
 		saveSrc() {
 			this.$store.commit('device/setTl', {
 				src: this.src,
-				arg: this.list
+				arg: this.src == 'list' ? this.list : this.tagTl
 			});
 		},
 
+		focus() {
+			(this.$refs.tl as any).focus();
+		},
+
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
 		},
 
-		chooseList() {
-			const w = (this as any).os.new(MkUserListsWindow);
-			w.$once('choosen', list => {
-				this.list = list;
-				this.src = 'list';
-				w.close();
+		async chooseList() {
+			const lists = await (this as any).api('users/lists/list');
+
+			let menu = [{
+				icon: '%fa:plus%',
+				text: '%i18n:@add-list%',
+				action: () => {
+					(this as any).apis.input({
+						title: '%i18n:@list-name%',
+					}).then(async title => {
+						const list = await (this as any).api('users/lists/create', {
+							title
+						});
+
+						this.list = list;
+						this.src = 'list';
+					});
+				}
+			}];
+
+			if (lists.length > 0) {
+				menu.push(null);
+			}
+
+			menu = menu.concat(lists.map(list => ({
+				icon: '%fa:list%',
+				text: list.title,
+				action: () => {
+					this.list = list;
+					this.src = 'list';
+				}
+			})));
+
+			this.os.new(Menu, {
+				source: this.$refs.listButton,
+				compact: false,
+				items: menu
+			});
+		},
+
+		chooseTag() {
+			let menu = [{
+				icon: '%fa:plus%',
+				text: '%i18n:@add-tag-timeline%',
+				action: () => {
+					(this as any).os.new(MkSettingsWindow, {
+						initialPage: 'hashtags'
+					});
+				}
+			}];
+
+			if (this.$store.state.settings.tagTimelines.length > 0) {
+				menu.push(null);
+			}
+
+			menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({
+				icon: '%fa:hashtag%',
+				text: t.title,
+				action: () => {
+					this.tagTl = t;
+					this.src = 'tag';
+				}
+			})));
+
+			this.os.new(Menu, {
+				source: this.$refs.tagButton,
+				compact: false,
+				items: menu
 			});
 		}
 	}
@@ -106,22 +189,45 @@ root(isDark)
 		border-radius 6px 6px 0 0
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
-		> button
+		> .buttons
 			position absolute
 			z-index 2
 			top 0
 			right 0
-			padding 0
-			width 42px
-			font-size 0.9em
-			line-height 42px
-			color isDark ? #9baec8 : #ccc
+			padding-right 8px
 
-			&:hover
-				color isDark ? #b2c1d5 : #aaa
+			> button
+				padding 0 8px
+				font-size 0.9em
+				line-height 42px
+				color isDark ? #9baec8 : #ccc
 
-			&:active
-				color isDark ? #b2c1d5 : #999
+				> .badge
+					position absolute
+					top -4px
+					right 4px
+					font-size 10px
+					color $theme-color
+
+				&:hover
+					color isDark ? #b2c1d5 : #aaa
+
+				&:active
+					color isDark ? #b2c1d5 : #999
+
+				&[data-active]
+					color $theme-color
+					cursor default
+
+					&:before
+						content ""
+						display block
+						position absolute
+						bottom 0
+						left 0
+						width 100%
+						height 2px
+						background $theme-color
 
 		> span
 			display inline-block

src/client/app/desktop/views/components/ui.header.account.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="account">
+<div class="account" v-hotkey.global="keymap">
 	<button class="header" :data-active="isOpen" @click="toggle">
 		<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
 		<mk-avatar class="avatar" :user="$store.state.i"/>
@@ -63,6 +63,13 @@ export default Vue.extend({
 			isOpen: false
 		};
 	},
+	computed: {
+		keymap(): any {
+			return {
+				'a|m': this.toggle
+			};
+		}
+	},
 	beforeDestroy() {
 		this.close();
 	},

src/client/app/desktop/views/components/ui.header.notifications.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="notifications">
+<div class="notifications" v-hotkey.global="keymap">
 	<button :data-active="isOpen" @click="toggle" title="%i18n:@title%">
 		%fa:R bell%<template v-if="hasUnreadNotification">%fa:circle%</template>
 	</button>
@@ -19,11 +19,19 @@ export default Vue.extend({
 			isOpen: false
 		};
 	},
+
 	computed: {
 		hasUnreadNotification(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
+		},
+
+		keymap(): any {
+			return {
+				'shift+n': this.toggle
+			};
 		}
 	},
+
 	methods: {
 		toggle() {
 			this.isOpen ? this.close() : this.open();

src/client/app/desktop/views/components/ui.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-ui" :style="style">
+<div class="mk-ui" :style="style" v-hotkey.global="keymap">
 	<x-header class="header" v-show="!zenMode"/>
 	<div class="content">
 		<slot></slot>
@@ -16,11 +16,13 @@ export default Vue.extend({
 	components: {
 		XHeader
 	},
+
 	data() {
 		return {
 			zenMode: false
 		};
 	},
+
 	computed: {
 		style(): any {
 			if (!this.$store.getters.isSignedIn || this.$store.state.i.wallpaperUrl == null) return {};
@@ -28,27 +30,24 @@ export default Vue.extend({
 				backgroundColor: this.$store.state.i.wallpaperColor && this.$store.state.i.wallpaperColor.length == 3 ? `rgb(${ this.$store.state.i.wallpaperColor.join(',') })` : null,
 				backgroundImage: `url(${ this.$store.state.i.wallpaperUrl })`
 			};
+		},
+
+		keymap(): any {
+			return {
+				'p': this.post,
+				'n': this.post,
+				'z': this.toggleZenMode
+			};
 		}
 	},
-	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
-	},
-	beforeDestroy() {
-		document.removeEventListener('keydown', this.onKeydown);
-	},
+
 	methods: {
-		onKeydown(e) {
-			if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return;
+		post() {
+			(this as any).apis.post();
+		},
 
-			if (e.which == 80 || e.which == 78) { // p or n
-				e.preventDefault();
-				(this as any).apis.post();
-			}
-
-			if (e.which == 90) { // z
-				e.preventDefault();
-				this.zenMode = !this.zenMode;
-			}
+		toggleZenMode() {
+			this.zenMode = !this.zenMode;
 		}
 	}
 });

src/client/app/desktop/views/components/user-lists-window.vue

@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:list% %i18n:@title%</span>
 
 	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp" :data-darkmode="$store.state.device.darkmode">

src/client/app/desktop/views/components/window.vue

@@ -76,6 +76,11 @@ export default Vue.extend({
 		name: {
 			type: String,
 			default: null
+		},
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
 		}
 	},
 
@@ -142,7 +147,7 @@ export default Vue.extend({
 				anime({
 					targets: bg,
 					opacity: 1,
-					duration: 100,
+					duration: this.animation ? 100 : 0,
 					easing: 'linear'
 				});
 			}
@@ -152,7 +157,7 @@ export default Vue.extend({
 				targets: main,
 				opacity: 1,
 				scale: [1.1, 1],
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'easeOutQuad'
 			});
 
@@ -160,7 +165,7 @@ export default Vue.extend({
 
 			setTimeout(() => {
 				this.$emit('opened');
-			}, 300);
+			}, this.animation ? 300 : 0);
 		},
 
 		close() {
@@ -174,7 +179,7 @@ export default Vue.extend({
 				anime({
 					targets: bg,
 					opacity: 0,
-					duration: 300,
+					duration: this.animation ? 300 : 0,
 					easing: 'linear'
 				});
 			}
@@ -185,14 +190,14 @@ export default Vue.extend({
 				targets: main,
 				opacity: 0,
 				scale: 0.8,
-				duration: 300,
+				duration: this.animation ? 300 : 0,
 				easing: [0.5, -0.5, 1, 0.5]
 			});
 
 			setTimeout(() => {
-				this.destroyDom();
 				this.$emit('closed');
-			}, 300);
+				this.destroyDom();
+			}, this.animation ? 300 : 0);
 		},
 
 		popout() {

src/client/app/desktop/views/pages/admin/admin.dashboard.vue

@@ -14,6 +14,14 @@
 	</div>
 
 	<div class="form">
+		<div>
+			<label>
+				<p>%i18n:@banner-url%</p>
+				<input v-model="bannerUrl">
+			</label>
+			<button class="ui" @click="updateMeta">%i18n:@save%</button>
+		</div>
+
 		<div>
 			<label>
 				<input type="checkbox" v-model="disableRegistration" @change="updateMeta">
@@ -46,6 +54,7 @@ export default Vue.extend({
 			stats: null,
 			disableRegistration: false,
 			disableLocalTimeline: false,
+			bannerUrl: null,
 			inviteCode: null,
 			connection: null,
 			connectionId: null
@@ -58,6 +67,7 @@ export default Vue.extend({
 		(this as any).os.getMeta().then(meta => {
 			this.disableRegistration = meta.disableRegistration;
 			this.disableLocalTimeline = meta.disableLocalTimeline;
+			this.bannerUrl = meta.bannerUrl;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -76,7 +86,8 @@ export default Vue.extend({
 		updateMeta() {
 			(this as any).api('admin/update-meta', {
 				disableRegistration: this.disableRegistration,
-				disableLocalTimeline: this.disableLocalTimeline
+				disableLocalTimeline: this.disableLocalTimeline,
+				bannerUrl: this.bannerUrl
 			});
 		}
 	}
@@ -114,6 +125,7 @@ export default Vue.extend({
 
 	> .form
 		> div
+			padding 16px
 			border-bottom solid 1px #eee
 
 </style>

src/client/app/desktop/views/pages/deck/deck.column-core.vue

@@ -6,7 +6,9 @@
 <x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked"/>
 <x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked"/>
 <x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked"/>
 <x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked"/>
+<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked"/>
 </template>
 
 <script lang="ts">
@@ -15,13 +17,15 @@ import XTlColumn from './deck.tl-column.vue';
 import XNotificationsColumn from './deck.notifications-column.vue';
 import XWidgetsColumn from './deck.widgets-column.vue';
 import XMentionsColumn from './deck.mentions-column.vue';
+import XDirectColumn from './deck.direct-column.vue';
 
 export default Vue.extend({
 	components: {
 		XTlColumn,
 		XNotificationsColumn,
 		XWidgetsColumn,
-		XMentionsColumn
+		XMentionsColumn,
+		XDirectColumn
 	},
 
 	props: {

src/client/app/desktop/views/pages/deck/deck.direct-column.vue

@@ -0,0 +1,38 @@
+<template>
+<x-column :name="name" :column="column" :is-stacked="isStacked">
+	<span slot="header">%fa:envelope R%{{ name }}</span>
+
+	<x-direct/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XColumn from './deck.column.vue';
+import XDirect from './deck.direct.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XDirect
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+			return '%i18n:common.deck.direct%';
+		}
+	},
+});
+</script>

src/client/app/desktop/views/pages/deck/deck.direct.vue

@@ -0,0 +1,97 @@
+<template>
+	<x-notes ref="timeline" :more="existMore ? more : null"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+
+	mounted() {
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('mention', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.off('mention', this.onNote);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/mentions', {
+					limit: fetchLimit + 1,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					visibility: 'specified'
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+		more() {
+			this.moreFetching = true;
+
+			const promise = (this as any).api('notes/mentions', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				visibility: 'specified'
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+		onNote(note) {
+			// Prepend a note
+			if (note.visibility == 'specified') {
+				(this.$refs.timeline as any).prepend(note);
+			}
+		}
+	}
+});
+</script>

src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue

@@ -0,0 +1,117 @@
+<template>
+	<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+import { HashtagStream } from '../../../../common/scripts/streaming/hashtag';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+		tagTl: {
+			type: Object,
+			required: true
+		},
+		mediaOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		mediaView: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			this.fetch();
+		}
+	},
+
+	mounted() {
+		if (this.connection) this.connection.close();
+		this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+		this.connection.on('note', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.close();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/search_by_tag', {
+					limit: fetchLimit + 1,
+					withFiles: this.mediaOnly,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					query: this.tagTl.query
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+		more() {
+			this.moreFetching = true;
+
+			const promise = (this as any).api('notes/search_by_tag', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				withFiles: this.mediaOnly,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				query: this.tagTl.query
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+		onNote(note) {
+			if (this.mediaOnly && note.files.length == 0) return;
+
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		}
+	}
+});
+</script>

src/client/app/desktop/views/pages/deck/deck.note.vue

@@ -147,10 +147,14 @@ export default Vue.extend({
 	methods: {
 		capture(withHandler = false) {
 			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
+				const data = {
 					type: 'capture',
 					id: this.p.id
-				});
+				} as any;
+				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
+					data.read = true;
+				}
+				this.connection.send(data);
 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},

src/client/app/desktop/views/pages/deck/deck.tl-column.vue

@@ -6,6 +6,7 @@
 		<template v-if="column.type == 'hybrid'">%fa:share-alt%</template>
 		<template v-if="column.type == 'global'">%fa:globe%</template>
 		<template v-if="column.type == 'list'">%fa:list%</template>
+		<template v-if="column.type == 'hashtag'">%fa:hashtag%</template>
 		<span>{{ name }}</span>
 	</span>
 
@@ -14,6 +15,7 @@
 		<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
 	</div>
 	<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
+	<x-hashtag-tl v-if="column.type == 'hashtag'" :tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
 	<x-tl v-else :src="column.type" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
 </x-column>
 </template>
@@ -23,12 +25,14 @@ import Vue from 'vue';
 import XColumn from './deck.column.vue';
 import XTl from './deck.tl.vue';
 import XListTl from './deck.list-tl.vue';
+import XHashtagTl from './deck.hashtag-tl.vue';
 
 export default Vue.extend({
 	components: {
 		XColumn,
 		XTl,
-		XListTl
+		XListTl,
+		XHashtagTl
 	},
 
 	props: {
@@ -65,6 +69,7 @@ export default Vue.extend({
 				case 'hybrid': return '%i18n:common.deck.hybrid%';
 				case 'global': return '%i18n:common.deck.global%';
 				case 'list': return this.column.list.title;
+				case 'hashtag': return this.$store.state.settings.tagTimelines.find(x => x.id == this.column.tagTlId).title;
 			}
 		}
 	},

src/client/app/desktop/views/pages/deck/deck.vue

@@ -147,6 +147,15 @@ export default Vue.extend({
 							type: 'mentions'
 						});
 					}
+				}, {
+					icon: '%fa:envelope R%',
+					text: '%i18n:common.deck.direct%',
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'direct'
+						});
+					}
 				}, {
 					icon: '%fa:list%',
 					text: '%i18n:common.deck.list%',
@@ -161,6 +170,20 @@ export default Vue.extend({
 							w.close();
 						});
 					}
+				}, {
+					icon: '%fa:hashtag%',
+					text: '%i18n:common.deck.hashtag%',
+					action: () => {
+						(this as any).apis.input({
+							title: '%i18n:@enter-hashtag-tl-title%'
+						}).then(title => {
+							this.$store.dispatch('settings/addDeckColumn', {
+								id: uuid(),
+								type: 'hashtag',
+								tagTlId: this.$store.state.settings.tagTimelines.find(x => x.title == title).id
+							});
+						});
+					}
 				}, {
 					icon: '%fa:bell R%',
 					text: '%i18n:common.deck.notifications%',

src/client/app/desktop/views/pages/home.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<mk-home :mode="mode" @loaded="loaded"/>
+	<mk-home :mode="mode" @loaded="loaded" ref="home" v-hotkey.global="keymap"/>
 </mk-ui>
 </template>
 
@@ -15,6 +15,13 @@ export default Vue.extend({
 			default: 'timeline'
 		}
 	},
+	computed: {
+		keymap(): any {
+			return {
+				't': this.focus
+			};
+		}
+	},
 	mounted() {
 		document.title = (this as any).os.instanceName;
 
@@ -23,6 +30,9 @@ export default Vue.extend({
 	methods: {
 		loaded() {
 			Progress.done();
+		},
+		focus() {
+			this.$refs.home.focus();
 		}
 	}
 });

src/client/app/desktop/views/pages/user/user.vue

@@ -6,7 +6,7 @@
 		<main>
 			<div class="main">
 				<x-header :user="user"/>
-				<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
+				<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
 				<x-timeline class="timeline" ref="tl" :user="user"/>
 			</div>
 			<div class="side">
@@ -28,7 +28,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../../misc/acct/parse';
-import getUserName from '../../../../../../misc/get-user-name';
 import Progress from '../../../../common/scripts/loading';
 import XHeader from './user.header.vue';
 import XTimeline from './user.timeline.vue';

src/client/app/desktop/views/pages/welcome.vue

@@ -1,5 +1,7 @@
 <template>
 <div class="mk-welcome">
+	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
+
 	<button @click="dark">
 		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
 		<template v-else>%fa:R moon%</template>
@@ -154,6 +156,7 @@ export default Vue.extend({
 		return {
 			meta: null,
 			stats: null,
+			banner: null,
 			copyright,
 			host,
 			name: 'Misskey',
@@ -169,6 +172,7 @@ export default Vue.extend({
 			this.name = meta.name;
 			this.description = meta.description;
 			this.announcements = meta.broadcasts;
+			this.banner = meta.bannerUrl;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -308,6 +312,26 @@ root(isDark)
 	//background-position center
 	//background-size cover
 
+	> .banner
+		position absolute
+		top 0
+		left 0
+		width 100%
+		height 400px
+		background-position center
+		background-size cover
+		opacity 0.7
+
+		&:after
+			content ""
+			display block
+			position absolute
+			bottom 0
+			left 0
+			width 100%
+			height 100px
+			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+
 	> .forkit
 		position absolute
 		top 0

src/client/app/init.ts

@@ -8,6 +8,7 @@ import VueRouter from 'vue-router';
 import * as TreeView from 'vue-json-tree-view';
 import VAnimateCss from 'v-animate-css';
 import VModal from 'vue-js-modal';
+import VueHotkey from './common/hotkey';
 
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
@@ -19,6 +20,7 @@ Vue.use(VueRouter);
 Vue.use(TreeView);
 Vue.use(VAnimateCss);
 Vue.use(VModal);
+Vue.use(VueHotkey);
 
 // Register global directives
 require('./common/views/directives');

src/client/app/mobile/views/components/note.vue

@@ -160,10 +160,14 @@ export default Vue.extend({
 	methods: {
 		capture(withHandler = false) {
 			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
+				const data = {
 					type: 'capture',
 					id: this.p.id
-				});
+				} as any;
+				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
+					data.read = true;
+				}
+				this.connection.send(data);
 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},

src/client/app/mobile/views/components/ui.header.vue

@@ -188,9 +188,6 @@ root(isDark)
 				overflow hidden
 				text-overflow ellipsis
 
-				[data-fa], [data-icon]
-					margin-right 4px
-
 				> img
 					display inline-block
 					vertical-align bottom

src/client/app/mobile/views/pages/drive.vue

@@ -1,9 +1,9 @@
 <template>
 <mk-ui>
 	<span slot="header">
-		<template v-if="folder">%fa:R folder-open%{{ folder.name }}</template>
-		<template v-if="file"><mk-file-type-icon data-icon :type="file.type"/>{{ file.name }}</template>
-		<template v-if="!folder && !file">%fa:cloud%%i18n:@drive%</template>
+		<template v-if="folder"><span style="margin-right:4px;">%fa:R folder-open%</span>{{ folder.name }}</template>
+		<template v-if="file"><mk-file-type-icon data-icon :type="file.type" style="margin-right:4px;"/>{{ file.name }}</template>
+		<template v-if="!folder && !file"><span style="margin-right:4px;">%fa:cloud%</span>%i18n:@drive%</template>
 	</span>
 	<template slot="func"><button @click="fn">%fa:ellipsis-h%</button></template>
 	<mk-drive

src/client/app/mobile/views/pages/favorites.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:star%%i18n:@title%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:star%</span>%i18n:@title%</span>
 
 	<main>
 		<template v-for="favorite in favorites">

src/client/app/mobile/views/pages/games/reversi.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:gamepad%%i18n:@reversi%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:gamepad%</span>%i18n:@reversi%</span>
 	<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
 </mk-ui>
 </template>

src/client/app/mobile/views/pages/home.timeline.vue

@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { HashtagStream } from '../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -21,6 +22,9 @@ export default Vue.extend({
 		src: {
 			type: String,
 			required: true
+		},
+		tagTl: {
+			required: false
 		}
 	},
 
@@ -29,10 +33,18 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
+			streamManager: null,
 			connection: null,
 			connectionId: null,
 			unreadCount: 0,
-			date: null
+			date: null,
+			baseQuery: {
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			},
+			query: {},
+			endpoint: null
 		};
 	},
 
@@ -41,51 +53,109 @@ export default Vue.extend({
 			return this.$store.state.i.followingCount == 0;
 		},
 
-		stream(): any {
-			switch (this.src) {
-				case 'home': return (this as any).os.stream;
-				case 'local': return (this as any).os.streams.localTimelineStream;
-				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
-				case 'global': return (this as any).os.streams.globalTimelineStream;
-				case 'mentions': return (this as any).os.stream;
-			}
-		},
-
-		endpoint(): string {
-			switch (this.src) {
-				case 'home': return 'notes/timeline';
-				case 'local': return 'notes/local-timeline';
-				case 'hybrid': return 'notes/hybrid-timeline';
-				case 'global': return 'notes/global-timeline';
-				case 'mentions': return 'notes/mentions';
-			}
-		},
-
 		canFetchMore(): boolean {
 			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
 	mounted() {
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
+		const prepend = note => {
+			(this.$refs.timeline as any).prepend(note);
+		};
 
-		this.connection.on(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
-			this.connection.on('follow', this.onChangeFollowing);
-			this.connection.on('unfollow', this.onChangeFollowing);
+		if (this.src == 'tag') {
+			this.endpoint = 'notes/search_by_tag';
+			this.query = {
+				query: this.tagTl.query
+			};
+			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.close();
+			});
+		} else if (this.src == 'home') {
+			this.endpoint = 'notes/timeline';
+			const onChangeFollowing = () => {
+				this.fetch();
+			};
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.connection.on('follow', onChangeFollowing);
+			this.connection.on('unfollow', onChangeFollowing);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.off('follow', onChangeFollowing);
+				this.connection.off('unfollow', onChangeFollowing);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'local') {
+			this.endpoint = 'notes/local-timeline';
+			this.streamManager = (this as any).os.streams.localTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'hybrid') {
+			this.endpoint = 'notes/hybrid-timeline';
+			this.streamManager = (this as any).os.streams.hybridTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'global') {
+			this.endpoint = 'notes/global-timeline';
+			this.streamManager = (this as any).os.streams.globalTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'mentions') {
+			this.endpoint = 'notes/mentions';
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'messages') {
+			this.endpoint = 'notes/mentions';
+			this.query = {
+				visibility: 'specified'
+			};
+			const onNote = note => {
+				if (note.visibility == 'specified') {
+					prepend(note);
+				}
+			};
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', onNote);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', onNote);
+				this.streamManager.dispose(this.connectionId);
+			});
 		}
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.connection.off(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
-			this.connection.off('follow', this.onChangeFollowing);
-			this.connection.off('unfollow', this.onChangeFollowing);
-		}
-		this.stream.dispose(this.connectionId);
+		this.$emit('beforeDestroy');
 	},
 
 	methods: {
@@ -93,13 +163,10 @@ export default Vue.extend({
 			this.fetching = true;
 
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				(this as any).api(this.endpoint, {
+				(this as any).api(this.endpoint, Object.assign({
 					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : undefined,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
+					untilDate: this.date ? this.date.getTime() : undefined
+				}, this.baseQuery, this.query)).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
 						this.existMore = true;
@@ -116,13 +183,10 @@ export default Vue.extend({
 
 			this.moreFetching = true;
 
-			const promise = (this as any).api(this.endpoint, {
+			const promise = (this as any).api(this.endpoint, Object.assign({
 				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
+				untilId: (this.$refs.timeline as any).tail().id
+			}, this.baseQuery, this.query));
 
 			promise.then(notes => {
 				if (notes.length == fetchLimit + 1) {
@@ -137,15 +201,6 @@ export default Vue.extend({
 			return promise;
 		},
 
-		onNote(note) {
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		onChangeFollowing() {
-			this.fetch();
-		},
-
 		focus() {
 			(this.$refs.timeline as any).focus();
 		},

src/client/app/mobile/views/pages/home.vue

@@ -1,18 +1,21 @@
 <template>
 <mk-ui>
 	<span slot="header" @click="showNav = true">
-		<span>
+		<span :class="$style.title">
 			<span v-if="src == 'home'">%fa:home%%i18n:@home%</span>
 			<span v-if="src == 'local'">%fa:R comments%%i18n:@local%</span>
 			<span v-if="src == 'hybrid'">%fa:share-alt%%i18n:@hybrid%</span>
 			<span v-if="src == 'global'">%fa:globe%%i18n:@global%</span>
 			<span v-if="src == 'mentions'">%fa:at%%i18n:@mentions%</span>
+			<span v-if="src == 'messages'">%fa:envelope R%%i18n:@messages%</span>
 			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
+			<span v-if="src == 'tag'">%fa:hashtag%{{ tagTl.title }}</span>
 		</span>
 		<span style="margin-left:8px">
 			<template v-if="!showNav">%fa:angle-down%</template>
 			<template v-else>%fa:angle-up%</template>
 		</span>
+		<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i>
 	</span>
 
 	<template slot="func">
@@ -22,16 +25,22 @@
 	<main :data-darkmode="$store.state.device.darkmode">
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
+			<div class="pointer"></div>
 			<div class="body">
 				<div>
 					<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span>
 					<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
 					<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 					<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
-					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
+					<div class="hr"></div>
+					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></span>
+					<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></span>
 					<template v-if="lists">
+						<div class="hr" v-if="lists.length > 0"></div>
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
 					</template>
+					<div class="hr" v-if="$store.state.settings.tagTimelines && $store.state.settings.tagTimelines.length > 0"></div>
+					<span v-for="tl in $store.state.settings.tagTimelines" :data-active="src == 'tag' && tagTl == tl" @click="src = 'tag'; tagTl = tl" :key="tl.id">%fa:hashtag% {{ tl.title }}</span>
 				</div>
 			</div>
 		</div>
@@ -42,6 +51,8 @@
 			<x-tl v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
 			<x-tl v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+			<x-tl v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
+			<x-tl v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
@@ -63,6 +74,7 @@ export default Vue.extend({
 			src: 'home',
 			list: null,
 			lists: null,
+			tagTl: null,
 			showNav: false,
 			enableLocalTimeline: false
 		};
@@ -74,9 +86,16 @@ export default Vue.extend({
 			this.saveSrc();
 		},
 
-		list() {
+		list(x) {
 			this.showNav = false;
 			this.saveSrc();
+			if (x != null) this.tagTl = null;
+		},
+
+		tagTl(x) {
+			this.showNav = false;
+			this.saveSrc();
+			if (x != null) this.list = null;
 		},
 
 		showNav(v) {
@@ -97,6 +116,8 @@ export default Vue.extend({
 			this.src = this.$store.state.device.tl.src;
 			if (this.src == 'list') {
 				this.list = this.$store.state.device.tl.arg;
+			} else if (this.src == 'tag') {
+				this.tagTl = this.$store.state.device.tl.arg;
 			}
 		} else if (this.$store.state.i.followingCount == 0) {
 			this.src = 'hybrid';
@@ -121,7 +142,7 @@ export default Vue.extend({
 		saveSrc() {
 			this.$store.commit('device/setTl', {
 				src: this.src,
-				arg: this.list
+				arg: this.src == 'list' ? this.list : this.tagTl
 			});
 		},
 
@@ -137,6 +158,26 @@ export default Vue.extend({
 
 root(isDark)
 	> .nav
+		> .pointer
+			position fixed
+			z-index 10002
+			top 56px
+			left 0
+			right 0
+
+			$size = 16px
+
+			&:after
+				content ""
+				display block
+				position absolute
+				top -($size * 2)
+				left s('calc(50% - %s)', $size)
+				border-top solid $size transparent
+				border-left solid $size transparent
+				border-right solid $size transparent
+				border-bottom solid $size isDark ? #272f3a : #fff
+
 		> .bg
 			position fixed
 			z-index 10000
@@ -153,28 +194,22 @@ root(isDark)
 			left 0
 			right 0
 			width 300px
+			max-height calc(100% - 70px)
 			margin 0 auto
+			overflow auto
+			-webkit-overflow-scrolling touch
 			background isDark ? #272f3a : #fff
 			border-radius 8px
 			box-shadow 0 0 16px rgba(#000, 0.1)
 
-			$balloon-size = 16px
-
-			&:after
-				content ""
-				display block
-				position absolute
-				top -($balloon-size * 2) + 1.5px
-				left s('calc(50% - %s)', $balloon-size)
-				border-top solid $balloon-size transparent
-				border-left solid $balloon-size transparent
-				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size isDark ? #272f3a : #fff
-
 			> div
 				padding 8px 0
 
-				> *
+				> .hr
+					margin 8px 0
+					border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+
+				> *:not(.hr)
 					display block
 					padding 8px 16px
 					color isDark ? #cdd0d8 : #666
@@ -186,6 +221,11 @@ root(isDark)
 					&:not([data-active]):hover
 						background isDark ? #353e4a : #eee
 
+					> .badge
+						margin-left 6px
+						font-size 10px
+						color $theme-color
+
 	> .tl
 		max-width 680px
 		margin 0 auto
@@ -204,3 +244,18 @@ main:not([data-darkmode])
 	root(false)
 
 </style>
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.title
+	i
+		margin-right 4px
+
+.badge
+	margin-left 6px
+	font-size 10px
+	color $theme-color
+	vertical-align middle
+
+</style>

src/client/app/mobile/views/pages/messaging-room.vue

@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header">
-		<template v-if="user">%fa:R comments%{{ user | userName }}</template>
+		<template v-if="user"><span style="margin-right:4px;">%fa:R comments%</span>{{ user | userName }}</template>
 		<template v-else><mk-ellipsis/></template>
 	</span>
 	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>

src/client/app/mobile/views/pages/messaging.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:R comments%%i18n:@messaging%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:R comments%</span>%i18n:@messaging%</span>
 	<mk-messaging @navigate="navigate" :header-top="48"/>
 </mk-ui>
 </template>

src/client/app/mobile/views/pages/note.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:R sticky-note%%i18n:@title%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:R sticky-note%</span>%i18n:@title%</span>
 	<main v-if="!fetching">
 		<div>
 			<mk-note-detail :note="note"/>

src/client/app/mobile/views/pages/notifications.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:R bell%%i18n:@notifications%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:R bell%</span>%i18n:@notifications%</span>
 	<template slot="func"><button @click="fn">%fa:check%</button></template>
 
 	<main>

src/client/app/mobile/views/pages/settings.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:cog%%i18n:@settings%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span>
 	<main :data-darkmode="$store.state.device.darkmode">
 		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
 

src/client/app/mobile/views/pages/tag.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:hashtag%{{ $route.params.tag }}</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:hashtag%</span>{{ $route.params.tag }}</span>
 
 	<main>
 		<p v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>

src/client/app/mobile/views/pages/user/home.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="root home">
-	<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
+	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
 	<section class="recent-notes">
 		<h2>%fa:R comments%%i18n:@recent-notes%</h2>
 		<div>

src/client/app/mobile/views/pages/welcome.vue

@@ -1,5 +1,7 @@
 <template>
 <div class="wgwfgvvimdjvhjfwxropcwksnzftjqes">
+	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
+
 	<div>
 		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
 		<p class="host">{{ host }}</p>
@@ -80,6 +82,7 @@ export default Vue.extend({
 			meta: null,
 			copyright,
 			stats: null,
+			banner: null,
 			host,
 			name: 'Misskey',
 			description: '',
@@ -93,6 +96,7 @@ export default Vue.extend({
 			this.name = meta.name;
 			this.description = meta.description;
 			this.announcements = meta.broadcasts;
+			this.banner = meta.bannerUrl;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -121,7 +125,27 @@ root(isDark)
 	text-align center
 	//background #fff
 
-	> div
+	> .banner
+		position absolute
+		top 0
+		left 0
+		width 100%
+		height 300px
+		background-position center
+		background-size cover
+		opacity 0.7
+
+		&:after
+			content ""
+			display block
+			position absolute
+			bottom 0
+			left 0
+			width 100%
+			height 100px
+			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+
+	> div:not(.banner)
 		padding 32px
 		margin 0 auto
 		max-width 500px

src/client/app/mobile/views/pages/widgets.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:home%%i18n:@dashboard%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:home%</span>%i18n:@dashboard%</span>
 	<template slot="func">
 		<button @click="customizing = !customizing">%fa:cog%</button>
 	</template>

src/client/app/store.ts

@@ -10,6 +10,7 @@ const defaultSettings = {
 	home: null,
 	mobileHome: [],
 	deck: null,
+	tagTimelines: [],
 	fetchOnScroll: true,
 	showMaps: true,
 	showPostFormOnTopOfTl: false,

src/docs/api/entities/user.yaml

@@ -101,15 +101,15 @@ props:
       ja-JP: "投稿の数"
       en-US: "The number of the notes of this user"
 
-  pinnedNote:
-    type: "entity(Note)"
+  pinnedNotes:
+    type: "entity(Note)[]"
     optional: true
     desc:
       ja-JP: "ピン留めされた投稿"
       en-US: "The pinned note of this user"
 
-  pinnedNoteId:
-    type: "id(Note)"
+  pinnedNoteIds:
+    type: "id(Note)[]"
     optional: true
     desc:
       ja-JP: "ピン留めされた投稿のID"

src/docs/keyboard-shortcut.ja-JP.md

@@ -0,0 +1,96 @@
+# Misskeyキーボードショートカットまとめ
+
+## グローバル
+これらのショートカットは基本的にどこでも使えます。
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>新規投稿</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
+		<tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
+		<tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
+		<tr><td><kbd class="key">A</kbd>, <kbd class="key">M</kbd></td><td>アカウントメニューを表示/隠す</td><td><b>A</b>ccount, <b>M</b>y, <b>M</b>e, <b>M</b>enu</td></tr>
+		<tr><td><kbd class="key">Z</kbd></td><td>上部のバーを隠す</td><td><b>Z</b>en</td></tr>
+		<tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>ヘルプを表示</td><td><b>H</b>elp</td></tr>
+	</tbody>
+</table>
+
+## 投稿にフォーカスされた状態
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>下の投稿にフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">←</kbd>, <kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
+		<tr><td><kbd class="key">→</kbd>, <kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
+		<tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">→</kbd></kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
+		<tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>リアクションフォームを開く</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
+		<tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションをする(対応については後述)</td><td>-</td></tr>
+		<tr><td><kbd class="key">M</kbd>, <kbd class="key">O</kbd></td><td>投稿に対するメニューを開く</td><td><b>M</b>ore, <b>O</b>ther</td></tr>
+		<tr><td><kbd class="key">S</kbd></td><td>CWで隠された部分を表示 or 隠す</td><td><b>S</b>how, <b>S</b>ee</td></tr>
+		<tr><td><kbd class="key">Esc</kbd></td><td>フォーカスを外す</td><td>-</td></tr>
+	</tbody>
+</table>
+
+## Renoteフォーム
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">Enter</kbd></td><td>Renoteする</td><td>-</td></tr>
+		<tr><td><kbd class="key">Q</kbd></td><td>フォームを展開する</td><td><b>Q</b>uote</td></tr>
+		<tr><td><kbd class="key">Esc</kbd></td><td>フォームを閉じる</td><td>-</td></tr>
+	</tbody>
+</table>
+
+## リアクションフォーム
+デフォルトで「👍」にフォーカスが当たっている状態です。
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>上のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd></td><td>下のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">←</kbd>, <kbd class="key">H</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>左のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">→</kbd>, <kbd class="key">L</kbd>, <kbd class="key">Tab</kbd></td><td>右のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">Enter</kbd>, <kbd class="key">Space</kbd>, <kbd class="key">+</kbd></td><td>リアクション確定</td><td>-</td></tr>
+		<tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションで確定(対応については後述)</td><td>-</td></tr>
+		<tr><td><kbd class="key">Esc</kbd></td><td>リアクションするのをやめる</td><td>-</td></tr>
+	</tbody>
+</table>
+
+## リアクションと数字キーの対応
+<table>
+	<thead>
+		<tr><th>数字キー</th><th>リアクション</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">1</kbd></td><td>👍</td></tr>
+		<tr><td><kbd class="key">2</kbd></td><td>❤️</td></tr>
+		<tr><td><kbd class="key">3</kbd></td><td>😆</td></tr>
+		<tr><td><kbd class="key">4</kbd></td><td>🤔</td></tr>
+		<tr><td><kbd class="key">5</kbd></td><td>😮</td></tr>
+		<tr><td><kbd class="key">6</kbd></td><td>🎉</td></tr>
+		<tr><td><kbd class="key">7</kbd></td><td>💢</td></tr>
+		<tr><td><kbd class="key">8</kbd></td><td>😥</td></tr>
+		<tr><td><kbd class="key">9</kbd></td><td>😇</td></tr>
+		<tr><td><kbd class="key">0</kbd></td><td>🍮 or 🍣</td></tr>
+	</tbody>
+</table>
+
+# 例
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>動作</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">t</kbd><kbd class="key">+</kbd><kbd class="key">+</kbd></td><td>タイムラインの最新の投稿に👍する</td></tr>
+		<tr><td><kbd class="key">t</kbd><kbd class="key">1</kbd></td><td>タイムラインの最新の投稿に👍する</td></tr>
+		<tr><td><kbd class="key">t</kbd><kbd class="key">0</kbd></td><td>タイムラインの最新の投稿に🍮する</td></tr>
+	</tbody>
+</table>

src/docs/style.styl

@@ -128,3 +128,24 @@ pre
 	> code
 		display block
 		padding 16px
+
+kbd.group
+	display inline-block
+	padding 4px
+	background #fbfbfb
+	border 1px solid #d6d6d6
+	border-radius 4px
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)
+
+kbd.key
+	display inline-block
+	padding 6px 8px
+	background #fff
+	border solid 1px #cecece
+	border-radius 4px
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)
+
+td
+	> kbd.group,
+	> kbd.key
+		margin 4px

src/mfm/parse/elements/hashtag.ts

@@ -9,9 +9,9 @@ export type TextElementHashtag = {
 };
 
 export default function(text: string, i: number) {
-	if (!(/^\s#[^\s]+/.test(text) || (i == 0 && /^#[^\s]+/.test(text)))) return null;
+	if (!(/^\s#[^\s\.,]+/.test(text) || (i == 0 && /^#[^\s\.,]+/.test(text)))) return null;
 	const isHead = text.startsWith('#');
-	const hashtag = text.match(/^\s?#[^\s]+/)[0];
+	const hashtag = text.match(/^\s?#[^\s\.,]+/)[0];
 	const res: any[] = !isHead ? [{
 		type: 'text',
 		content: text[0]

src/mfm/parse/elements/quote.ts

@@ -9,7 +9,7 @@ export type TextElementQuote = {
 };
 
 export default function(text: string) {
-	const match = text.match(/^"([\s\S]+?)\n"/);
+	const match = text.match(/^"([\s\S]+?)\n"/) || text.match(/^>([\s\S]+?)\n\n/) || text.match(/^\n>([\s\S]+?)\n\n/) || text.match(/^>([\s\S]+?)$/);
 	if (!match) return null;
 	const quote = match[0];
 	return {

src/misc/should-mute-this-note.ts

@@ -0,0 +1,21 @@
+import * as mongo from 'mongodb';
+
+function toString(id: any) {
+	return mongo.ObjectID.prototype.isPrototypeOf(id) ? (id as mongo.ObjectID).toHexString() : id;
+}
+
+export default function(note: any, mutedUserIds: string[]): boolean {
+	if (mutedUserIds.includes(toString(note.userId))) {
+		return true;
+	}
+
+	if (note.reply != null && mutedUserIds.includes(toString(note.reply.userId))) {
+		return true;
+	}
+
+	if (note.renote != null && mutedUserIds.includes(toString(note.renote.userId))) {
+		return true;
+	}
+
+	return false;
+}

src/models/meta.ts

@@ -14,4 +14,5 @@ export type IMeta = {
 	disableRegistration?: boolean;
 	disableLocalTimeline?: boolean;
 	hidedTags?: string[];
+	bannerUrl?: string;
 };

src/models/note-unread.ts

@@ -0,0 +1,17 @@
+import * as mongo from 'mongodb';
+import db from '../db/mongodb';
+
+const NoteUnread = db.get<INoteUnread>('noteUnreads');
+NoteUnread.createIndex(['userId', 'noteId'], { unique: true });
+export default NoteUnread;
+
+export interface INoteUnread {
+	_id: mongo.ObjectID;
+	noteId: mongo.ObjectID;
+	userId: mongo.ObjectID;
+	isSpecified: boolean;
+
+	_note: {
+		userId: mongo.ObjectID;
+	};
+}

src/models/note.ts

@@ -196,7 +196,7 @@ export const hideNote = async (packedNote: any, meId: mongo.ObjectID) => {
 			hide = false;
 		} else {
 			// 指定されているかどうか
-			const specified = packedNote.visibleUserIds.some((id: mongo.ObjectID) => id.equals(meId));
+			const specified = packedNote.visibleUserIds.some((id: any) => meId.equals(id));
 
 			if (specified) {
 				hide = false;
@@ -295,8 +295,8 @@ export const pack = async (
 
 	delete _note._user;
 	delete _note._reply;
-	delete _note.repost;
-	delete _note.mentions;
+	delete _note._renote;
+	delete _note._files;
 	if (_note.geo) delete _note.geo.type;
 
 	// Populate user

src/models/user.ts

@@ -35,6 +35,28 @@ User.createIndex('uri', { sparse: true, unique: true });
 
 export default User;
 
+// 後方互換性のため
+User.findOne({
+	pinnedNoteId: { $exists: true }
+}).then(async x => {
+	if (x == null) return;
+
+	const users = await User.find({
+		pinnedNoteId: { $exists: true }
+	});
+
+	users.forEach(u => {
+		User.update({ _id: u._id }, {
+			$set: {
+				pinnedNoteIds: [(u as any).pinnedNoteId]
+			},
+			$unset: {
+				pinnedNoteId: ''
+			}
+		});
+	});
+});
+
 type IUserBase = {
 	_id: mongo.ObjectID;
 	createdAt: Date;
@@ -53,7 +75,7 @@ type IUserBase = {
 	wallpaperUrl?: string;
 	data: any;
 	description: string;
-	pinnedNoteId: mongo.ObjectID;
+	pinnedNoteIds: mongo.ObjectID[];
 
 	/**
 	 * 凍結されているか否か
@@ -326,7 +348,8 @@ export const pack = (
 	me?: string | mongo.ObjectID | IUser,
 	options?: {
 		detail?: boolean,
-		includeSecrets?: boolean
+		includeSecrets?: boolean,
+		includeHasUnreadNotes?: boolean
 	}
 ) => new Promise<any>(async (resolve, reject) => {
 
@@ -464,11 +487,11 @@ export const pack = (
 	}
 
 	if (opts.detail) {
-		if (_user.pinnedNoteId) {
-			// Populate pinned note
-			_user.pinnedNote = packNote(_user.pinnedNoteId, meId, {
+		if (_user.pinnedNoteIds) {
+			// Populate pinned notes
+			_user.pinnedNotes = Promise.all(_user.pinnedNoteIds.map((id: mongo.ObjectId) => packNote(id, meId, {
 				detail: true
-			});
+			})));
 		}
 
 		if (meId && !meId.equals(_user.id)) {
@@ -488,6 +511,11 @@ export const pack = (
 		}
 	}
 
+	if (!opts.includeHasUnreadNotes) {
+		delete _user.hasUnreadSpecifiedNotes;
+		delete _user.hasUnreadMentions;
+	}
+
 	// resolve promises in _user object
 	_user = await rap(_user);
 

src/remote/activitypub/misc/get-note-html.ts

@@ -1,22 +1,10 @@
 import { INote } from '../../../models/note';
 import toHtml from '../../../mfm/html';
 import parse from '../../../mfm/parse';
-import config from '../../../config';
 
 export default function(note: INote) {
 	let html = toHtml(parse(note.text), note.mentionedRemoteUsers);
 	if (html == null) html = '';
 
-	if (note.poll != null) {
-		const url = `${config.url}/notes/${note._id}`;
-		// TODO: i18n
-		html += `<p><a href="${url}">【Misskeyで投票を見る】</a></p>`;
-	}
-
-	if (note.renoteId != null) {
-		const url = `${config.url}/notes/${note.renoteId}`;
-		html += `<p>RE: <a href="${url}">${url}</a></p>`;
-	}
-
 	return html;
 }

src/remote/activitypub/renderer/add.ts

@@ -0,0 +1,9 @@
+import config from '../../../config';
+import { ILocalUser } from '../../../models/user';
+
+export default (user: ILocalUser, target: any, object: any) => ({
+	type: 'Add',
+	actor: `${config.url}/users/${user._id}`,
+	target,
+	object
+});

src/remote/activitypub/renderer/note.ts

@@ -6,6 +6,7 @@ import DriveFile, { IDriveFile } from '../../../models/drive-file';
 import Note, { INote } from '../../../models/note';
 import User from '../../../models/user';
 import toHtml from '../misc/get-note-html';
+import parseMfm from '../../../mfm/parse';
 
 export default async function renderNote(note: INote, dive = true): Promise<any> {
 	const promisedFiles: Promise<IDriveFile[]> = note.fileIds
@@ -81,13 +82,39 @@ export default async function renderNote(note: INote, dive = true): Promise<any>
 
 	const files = await promisedFiles;
 
+	let text = note.text;
+
+	if (note.poll != null) {
+		if (text == null) text = '';
+		const url = `${config.url}/notes/${note._id}`;
+		// TODO: i18n
+		text += `\n\n[投票を見る](${url})`;
+	}
+
+	if (note.renoteId != null) {
+		if (text == null) text = '';
+		const url = `${config.url}/notes/${note.renoteId}`;
+		text += `\n\nRE: ${url}`;
+	}
+
+	// 省略されたメンションのホストを復元する
+	if (text != null) {
+		text = parseMfm(text).map(x => {
+			if (x.type == 'mention' && x.host == null) {
+				return `${x.content}@${config.host}`;
+			} else {
+				return x.content;
+			}
+		}).join('');
+	}
+
 	return {
 		id: `${config.url}/notes/${note._id}`,
 		type: 'Note',
 		attributedTo,
 		summary: note.cw,
-		content: toHtml(note),
-		_misskey_content: note.text,
+		content: toHtml(Object.assign({}, note, { text })),
+		_misskey_content: text,
 		published: note.createdAt.toISOString(),
 		to,
 		cc,

src/remote/activitypub/renderer/ordered-collection.ts

@@ -4,8 +4,9 @@
  * @param totalItems Total number of items
  * @param first URL of first page (optional)
  * @param last URL of last page (optional)
+ * @param orderedItems attached objects (optional)
  */
-export default function(id: string, totalItems: any, first: string, last: string) {
+export default function(id: string, totalItems: any, first?: string, last?: string, orderedItems?: object) {
 	const page: any = {
 		id,
 		type: 'OrderedCollection',
@@ -14,6 +15,7 @@ export default function(id: string, totalItems: any, first: string, last: string
 
 	if (first) page.first = first;
 	if (last) page.last = last;
+	if (orderedItems) page.orderedItems = orderedItems;
 
 	return page;
 }

src/remote/activitypub/renderer/person.ts

@@ -21,6 +21,7 @@ export default async (user: ILocalUser) => {
 		outbox: `${id}/outbox`,
 		followers: `${id}/followers`,
 		following: `${id}/following`,
+		featured: `${id}/collections/featured`,
 		sharedInbox: `${config.url}/inbox`,
 		url: `${config.url}/@${user.username}`,
 		preferredUsername: user.username,

src/remote/activitypub/renderer/remove.ts

@@ -0,0 +1,9 @@
+import config from '../../../config';
+import { ILocalUser } from '../../../models/user';
+
+export default (user: ILocalUser, target: any, object: any) => ({
+	type: 'Remove',
+	actor: `${config.url}/users/${user._id}`,
+	target,
+	object
+});

src/remote/activitypub/type.ts

@@ -53,6 +53,7 @@ export interface IPerson extends IObject {
 	publicKey: any;
 	followers: any;
 	following: any;
+	featured?: any;
 	outbox: any;
 	endpoints: string[];
 }

src/server/activitypub.ts

@@ -13,6 +13,7 @@ import renderPerson from '../remote/activitypub/renderer/person';
 import Outbox, { packActivity } from './activitypub/outbox';
 import Followers from './activitypub/followers';
 import Following from './activitypub/following';
+import Featured from './activitypub/featured';
 
 // Init router
 const router = new Router();
@@ -74,6 +75,7 @@ router.get('/notes/:note', async (ctx, next) => {
 	}
 
 	ctx.body = pack(await renderNote(note, false));
+	ctx.set('Cache-Control', 'public, max-age=180');
 	setResponseType(ctx);
 });
 
@@ -90,6 +92,7 @@ router.get('/notes/:note/activity', async ctx => {
 	}
 
 	ctx.body = pack(await packActivity(note));
+	ctx.set('Cache-Control', 'public, max-age=180');
 	setResponseType(ctx);
 });
 
@@ -102,6 +105,9 @@ router.get('/users/:user/followers', Followers);
 // following
 router.get('/users/:user/following', Following);
 
+// featured
+router.get('/users/:user/collections/featured', Featured);
+
 // publickey
 router.get('/users/:user/publickey', async ctx => {
 	const userId = new mongo.ObjectID(ctx.params.user);
@@ -118,6 +124,7 @@ router.get('/users/:user/publickey', async ctx => {
 
 	if (isLocalUser(user)) {
 		ctx.body = pack(renderKey(user));
+		ctx.set('Cache-Control', 'public, max-age=180');
 		setResponseType(ctx);
 	} else {
 		ctx.status = 400;
@@ -132,6 +139,7 @@ async function userInfo(ctx: Router.IRouterContext, user: IUser) {
 	}
 
 	ctx.body = pack(await renderPerson(user as ILocalUser));
+	ctx.set('Cache-Control', 'public, max-age=180');
 	setResponseType(ctx);
 }
 

src/server/activitypub/featured.ts

@@ -0,0 +1,39 @@
+import * as mongo from 'mongodb';
+import * as Router from 'koa-router';
+import config from '../../config';
+import User from '../../models/user';
+import pack from '../../remote/activitypub/renderer';
+import renderOrderedCollection from '../../remote/activitypub/renderer/ordered-collection';
+import { setResponseType } from '../activitypub';
+import Note from '../../models/note';
+import renderNote from '../../remote/activitypub/renderer/note';
+
+export default async (ctx: Router.IRouterContext) => {
+	const userId = new mongo.ObjectID(ctx.params.user);
+
+	// Verify user
+	const user = await User.findOne({
+		_id: userId,
+		host: null
+	});
+
+	if (user === null) {
+		ctx.status = 404;
+		return;
+	}
+
+	const pinnedNoteIds = user.pinnedNoteIds || [];
+
+	const pinnedNotes = await Promise.all(pinnedNoteIds.map(id => Note.findOne({ _id: id })));
+
+	const renderedNotes = await Promise.all(pinnedNotes.map(note => renderNote(note)));
+
+	const rendered = renderOrderedCollection(
+		`${config.url}/users/${userId}/collections/featured`,
+		renderedNotes.length, null, null, renderedNotes
+	);
+
+	ctx.body = pack(rendered);
+	ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
+	setResponseType(ctx);
+};

src/server/activitypub/followers.ts

@@ -78,6 +78,7 @@ export default async (ctx: Router.IRouterContext) => {
 		// index page
 		const rendered = renderOrderedCollection(partOf, user.followersCount, `${partOf}?page=true`, null);
 		ctx.body = pack(rendered);
+		ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
 		setResponseType(ctx);
 	}
 };