4.3.0

Replace "size" to "sizes"

.config/example.yml

@@ -1,3 +1,9 @@
+# インスタンス名
+name:
+
+# インスタンスの紹介
+description:
+
 # サーバーのメンテナ情報
 maintainer:
   # メンテナの名前

.gitattributes

@@ -1,3 +1,4 @@
 *.svg -diff -text
 *.psd -diff -text
 *.ai -diff -text
+yarn.lock -diff -text

.npmrc

@@ -1 +1,2 @@
 package-lock = false
+save-exact=true

CHANGELOG.md

@@ -0,0 +1,28 @@
+ChangeLog
+=========
+
+破壊的変更のみ記載。
+
+This document describes breaking changes only.
+
+4.0.0
+-----
+
+オセロがリバーシに変更されました。
+
+Othello is now Reversi.
+
+### Migration
+
+MongoDBの、`othelloGames`と`othelloMatchings`コレクションをそれぞれ`reversiGames`と`reversiMatchings`にリネームしてください。
+
+You need to rename `othelloGames` and `othelloMatchings` MongoDB collections to `reversiGames` and `reversiMatchings`.
+
+3.0.0
+-----
+
+### Migration
+
+起動する前に、`node cli/recount-stats`してください。
+
+Please run `node cli/recount-stats` before launch.

cli/recount-stats.js

@@ -0,0 +1,42 @@
+const { default: Note } = require('../built/models/note');
+const { default: Meta } = require('../built/models/meta');
+const { default: User } = require('../built/models/user');
+
+async function main() {
+	const meta = await Meta.findOne({});
+
+	const notesCount = await Note.count();
+
+	const usersCount = await User.count();
+
+	const originalNotesCount = await Note.count({
+		'_user.host': null
+	});
+
+	const originalUsersCount = await User.count({
+		host: null
+	});
+
+	const stats = {
+		notesCount,
+		usersCount,
+		originalNotesCount,
+		originalUsersCount
+	};
+
+	if (meta) {
+		await Meta.update({}, {
+			$set: {
+				stats
+			}
+		});
+	} else {
+		await Meta.insert({
+			stats
+		});
+	}
+}
+
+main().then(() => {
+	console.log('done');
+}).catch(console.error);

gulpfile.ts

@@ -8,12 +8,12 @@ import * as gutil from 'gulp-util';
 import * as ts from 'gulp-typescript';
 const sourcemaps = require('gulp-sourcemaps');
 import tslint from 'gulp-tslint';
-import cssnano = require('gulp-cssnano');
+const cssnano = require('gulp-cssnano');
 import * as uglifyComposer from 'gulp-uglify/composer';
 import pug = require('gulp-pug');
 import * as rimraf from 'rimraf';
 import chalk from 'chalk';
-import imagemin = require('gulp-imagemin');
+const imagemin = require('gulp-imagemin');
 import * as rename from 'gulp-rename';
 import * as mocha from 'gulp-mocha';
 import * as replace from 'gulp-replace';

locales/de.yml

@@ -3,7 +3,7 @@ meta:
   lang: "Deutsch"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
   time:
@@ -228,6 +228,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "Serverinformationen"
   toggle: "Sicht umschalten"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "Mehr"
   close: "Schließen"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Verbunden"
   add-widget: "Widget hinzufügen:"

locales/en.yml

@@ -3,7 +3,7 @@ meta:
   lang: "English"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Thanks for finding Misskey. Misskey is a <b>decentralized microblogging platform</b> born on Earth. Since it exists within Fediverse (a universe where various social media platforms are organized) it is mutually linked with other social media platforms. Why don't you take a short break from the hustle and bustle of the city, and dive into a new Internet?"
   time:
@@ -47,6 +47,7 @@ common:
   ok: "OK"
   update-available: "A new version of Misskey is now available({newer}, the current version is {current}). Reload the page to apply updates."
   my-token-regenerated: "Your token has been renewed so you will be signed out."
+  i-like-sushi: "I like sushi rather than pudding"
   widgets:
     analog-clock: "Analog clock"
     profile: "Profile"
@@ -228,6 +229,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "Hashtags"
   count: "{} users mentioned"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "Server info"
   toggle: "Toggle views"
@@ -333,7 +335,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "More"
   close: "Close"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Submit"
   add-widget: "Add widget:"
@@ -549,7 +551,7 @@ desktop/views/components/ui.header.nav.vue:
   home: "Home"
   deck: "Deck"
   messaging: "Messages"
-  game: "Play Othello"
+  game: "Play Reversi"
 desktop/views/components/ui.header.notifications.vue:
   title: "Notifications"
 desktop/views/components/ui.header.post.vue:

locales/es.yml

@@ -1,223 +1,223 @@
 ---
 meta:
-  lang: "日本語"
+  lang: "Español"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
-  about-title: "A ⭐ of fediverse."
-  about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
+  misskey: "Una ⭐️ del fediverso"
+  about-title: "Una ⭐️ del fediverso"
+  about: "Gracias por encontrae Misskey. Misskey es una <b>plataforma descentralizada de microblogging</b> nacida en la Tierra. Gracias a existir dentro del Fediverso (un universo donde se organizan varias plataformas sociales) se encuentra enlazada mutuamente con otras plataformas sociales. ¿Por què no te tomas un respiro del caos de la ciudad y te sumerges es una nueva manera de entender Internet?"
   time:
-    unknown: "なぞのじかん"
-    future: "未来"
-    just_now: "たった今"
-    seconds_ago: "{}秒前"
-    minutes_ago: "{}分前"
-    hours_ago: "{}時間前"
-    days_ago: "{}日前"
-    weeks_ago: "{}週間前"
-    months_ago: "{}ヶ月前"
-    years_ago: "{}年前"
+    unknown: "Desconocido"
+    future: "Futuro"
+    just_now: "Ahora mismo"
+    seconds_ago: "Hace {}"
+    minutes_ago: "Hace {} minuto(s)"
+    hours_ago: "Hace {} hora(s)"
+    days_ago: "Hace {} dia(s)"
+    weeks_ago: "Hace {} semana(s)"
+    months_ago: "Hace {} mes(es)"
+    years_ago: "Hace {} año(s)"
   weekday-short:
-    sunday: "日"
-    monday: "月"
-    tuesday: "火"
-    wednesday: "水"
-    thursday: "木"
-    friday: "金"
-    saturday: "土"
+    sunday: "domingo"
+    monday: "lunes"
+    tuesday: "martes"
+    wednesday: "miércoles"
+    thursday: "jueves"
+    friday: "viernes"
+    saturday: "sábado"
   reactions:
-    like: "いいね"
-    love: "しゅき"
-    laugh: "笑"
-    hmm: "ふぅ～む"
-    surprise: "わお"
-    congrats: "おめでとう"
-    angry: "おこ"
-    confused: "こまこまのこまり"
-    pudding: "Pudding"
+    like: "me gusta"
+    love: "amor"
+    laugh: "risa"
+    hmm: "hmm"
+    surprise: "sorpresa"
+    congrats: "felicidades"
+    angry: "enfadado"
+    confused: "confundido"
+    pudding: "Chafado"
   note-placeholders:
-    a: "今どうしてる？"
-    b: "何かありましたか？"
-    c: "何をお考えですか？"
-    d: "言いたいことは？"
-    e: "ここに書いてください"
-    f: "あなたが書くのを待っています..."
-  delete: "削除"
-  loading: "読み込み中"
-  ok: "わかった"
-  update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。"
-  my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
+    a: "¿Qué haces?"
+    b: "¿Qué está pasando?"
+    c: "¿Qué te pasa por la cabeza?"
+    d: "¿Quieres decir algo?"
+    e: "¡Escribe aquí!"
+    f: "Esperando a que escribas algo..."
+  delete: "eliminar"
+  loading: "cargando"
+  ok: "OK"
+  update-available: "Hay disponible una nueva versión de Misskey ({newer}, la versión actual es {current}). Refresca la página para aplicar las actualizaciones."
+  my-token-regenerated: "Tu token se ha regenerado vas a ser desconectado."
   widgets:
-    analog-clock: "アナログ時計"
-    profile: "プロフィール"
-    calendar: "カレンダー"
-    timemachine: "カレンダー(タイムマシン)"
-    activity: "アクティビティ"
-    rss: "RSSリーダー"
-    memo: "付箋"
-    trends: "トレンド"
-    photo-stream: "フォトストリーム"
-    posts-monitor: "投稿チャート"
-    slideshow: "スライドショー"
-    version: "バージョン"
-    broadcast: "ブロードキャスト"
-    notifications: "通知"
-    users: "おすすめユーザー"
-    polls: "アンケート"
-    post-form: "投稿フォーム"
-    messaging: "メッセージ"
-    server: "サーバー情報"
-    donation: "寄付のお願い"
-    nav: "ナビゲーション"
-    tips: "ヒント"
-    hashtags: "ハッシュタグ"
+    analog-clock: "Reloj analógico"
+    profile: "Perfil"
+    calendar: "Calendario"
+    timemachine: "Calendario (máquina del tiempo)"
+    activity: "Actividad"
+    rss: "Lector RSS"
+    memo: "Notas adhesivas"
+    trends: "Tendencias"
+    photo-stream: "Secuencia de fotos"
+    posts-monitor: "Gráfico de publicaciones"
+    slideshow: "Diapositivas"
+    version: "Versión"
+    broadcast: "Transmisión"
+    notifications: "Notificaciones"
+    users: "Usuarios destacados"
+    polls: "Encuestas"
+    post-form: "Formulario"
+    messaging: "Mensajes"
+    server: "Información del servidor"
+    donation: "Donaciones"
+    nav: "Navegación"
+    tips: "Consejos"
+    hashtags: "Etiquetas"
   deck:
-    widgets: "ウィジェット"
-    home: "ホーム"
-    local: "ローカル"
-    global: "グローバル"
-    notifications: "通知"
-    list: "リスト"
-    swap-left: "左に移動"
-    swap-right: "右に移動"
-    swap-up: "上に移動"
-    swap-down: "下に移動"
-    remove: "カラムを削除"
-    add-column: "カラムを追加"
-    rename: "名前を変更"
-    stack-left: "左に重ねる"
-    pop-right: "右に出す"
+    widgets: "Accesorios"
+    home: "Inicio"
+    local: "Local"
+    global: "Global"
+    notifications: "Notificaciones"
+    list: "Listado"
+    swap-left: "Desplazar a la izq."
+    swap-right: "Desplazar a la dcha."
+    swap-up: "Desplazar arriba"
+    swap-down: "Desplazar abajo"
+    remove: "Borrar"
+    add-column: "Añadir columna"
+    rename: "Renombrar"
+    stack-left: "A la izqda."
+    pop-right: "A la dcha."
 common/views/components/connect-failed.vue:
-  title: "サーバーに接続できません"
-  description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。"
-  thanks: "いつもMisskeyをご利用いただきありがとうございます。"
-  troubleshoot: "トラブルシュート"
+  title: "Imposible conectar al servidor"
+  description: "Hay un problema en tu conexió o puede que el servidor esté caido o en mantenimiento. Por favor {try again} más tarde."
+  thanks: "Gracias por usar Misskey."
+  troubleshoot: "Problemas más frecuentes"
 common/views/components/connect-failed.troubleshooter.vue:
-  title: "トラブルシューティング"
-  network: "ネットワーク接続"
-  checking-network: "ネットワーク接続を確認中"
-  internet: "インターネット接続"
-  checking-internet: "インターネット接続を確認中"
-  server: "サーバー接続"
-  checking-server: "サーバー接続を確認中"
-  finding: "問題を調べています"
-  no-network: "ネットワークに接続されていません"
-  no-network-desc: "お使いのPCのネットワーク接続が正常か確認してください。"
-  no-internet: "インターネットに接続されていません"
-  no-internet-desc: "ネットワークには接続されていますが、インターネットには接続されていないようです。お使いのPCのインターネット接続が正常か確認してください。"
-  no-server: "Misskeyのサーバーに接続できません"
-  no-server-desc: "お使いのPCのインターネット接続は正常ですが、Misskeyのサーバーには接続できませんでした。サーバーがダウンまたはメンテナンスしている可能性があるので、しばらくしてから再度御アクセスください。"
-  success: "Misskeyのサーバーに接続できました"
-  success-desc: "正常に接続できるようです。ページを再度読み込みしてください。"
-  flush: "キャッシュの削除"
-  set-version: "バージョン指定"
+  title: "Resolución de problemas"
+  network: "Conexión de red"
+  checking-network: "Verificar la conexión a la red"
+  internet: "Conexión a Internet"
+  checking-internet: "Comprobando la conexión a Internet"
+  server: "Conexión al servidor"
+  checking-server: "Probando la conexión al servidor"
+  finding: "Buscando cualquier problema"
+  no-network: "Sin conexión"
+  no-network-desc: "Por favor, asegurate que estás conectado a una red"
+  no-internet: "Sin conexión a Internet"
+  no-internet-desc: "Por favor, asegurate de estar conectado a Internet."
+  no-server: "Imposible conectarse al servidor de Misskey"
+  no-server-desc: "La conexión de red de tu PC es correcta, aún así no puedes conectarte al servidor de Misskey. Es posible que el servidor esté caido o en mantenimiento. Por favor vuelve a intentarlo más tarde."
+  success: "Conectado al servidor de Misskey de manera correcta"
+  success-desc: "Parece que la conexión ha sido posible. Por favor refresca la página."
+  flush: "Limpiar la memoria caché"
+  set-version: "Escoge la versión"
 common/views/components/messaging.vue:
-  search-user: "ユーザーを探す"
-  you: "あなた"
-  no-history: "履歴はありません"
+  search-user: "Encuentra un usuario"
+  you: "Tu"
+  no-history: "Sin historial"
 common/views/components/messaging-room.vue:
-  empty: "このユーザーと話したことはありません"
-  more: "もっと読む"
-  no-history: "これより過去の履歴はありません"
-  resize-form: "ドラッグしてフォームの広さを調整"
-  new-message: "新しいメッセージがあります"
+  empty: "Sin conversaciones"
+  more: "Leer más"
+  no-history: "El historial se ha acabado"
+  resize-form: "Arrastra para redimensionar"
+  new-message: "Nuevo mensaje"
 common/views/components/messaging-room.form.vue:
-  input-message-here: "ここにメッセージを入力"
-  send: "送信"
-  attach-from-local: "PCからファイルを添付する"
-  attach-from-drive: "ドライブからファイルを添付する"
+  input-message-here: "Escribe el mensaje aquí"
+  send: "Enviar"
+  attach-from-local: "Adjunta ficheros desde tu PC"
+  attach-from-drive: "Adjunta ficheros desde tu disco"
 common/views/components/messaging-room.message.vue:
-  is-read: "既読"
-  deleted: "このメッセージは削除されました"
+  is-read: "Leer"
+  deleted: "El mensaje se ha borrado"
 common/views/components/nav.vue:
-  about: "Misskeyについて"
-  stats: "統計"
-  status: "ステータス"
+  about: "Sobre"
+  stats: "Estadísticas"
+  status: "Estado"
   wiki: "Wiki"
-  donors: "ドナー"
-  repository: "リポジトリ"
-  develop: "開発者"
-  feedback: "フィードバック"
+  donors: "Donantes"
+  repository: "Repositorio"
+  develop: "Desarrolladores"
+  feedback: "Opiniones"
 common/views/components/note-menu.vue:
-  favorite: "お気に入り"
-  pin: "ピン留め"
-  delete: "削除"
-  delete-confirm: "この投稿を削除しますか？"
-  remote: "投稿元で見る"
+  favorite: "Me gusta esta nota"
+  pin: "Fijar en el perfil"
+  delete: "Borrar"
+  delete-confirm: "¿Seguro que quieres borrar la publicación?"
+  remote: "Ver el original"
 common/views/components/poll.vue:
-  vote-to: "「{}」に投票する"
-  vote-count: "{}票"
-  total-users: "{}人が投票"
-  vote: "投票する"
-  show-result: "結果を見る"
-  voted: "投票済み"
+  vote-to: "'{}' para votar"
+  vote-count: "{} votos"
+  total-users: "{} usuario(s) que ha(n) votado"
+  vote: "Vota"
+  show-result: "Mostrar resultados"
+  voted: "Votado"
 common/views/components/poll-editor.vue:
-  no-only-one-choice: "アンケートには、選択肢が最低2つ必要です"
-  choice-n: "選択肢{}"
-  remove: "この選択肢を削除"
-  add: "+選択肢を追加"
-  destroy: "アンケートを破棄"
+  no-only-one-choice: "Selecciona dos o más opciones."
+  choice-n: "{} opcion(es)"
+  remove: "Borra la opción"
+  add: "+ Añade una opción"
+  destroy: "Cancelar la encuesta"
 common/views/components/reaction-picker.vue:
-  choose-reaction: "リアクションを選択"
+  choose-reaction: "Escoge una reacción"
 common/views/components/signin.vue:
-  username: "ユーザー名"
-  password: "パスワード"
-  token: "トークン"
-  signing-in: "やってます..."
-  signin: "サインイン"
+  username: "Usuario"
+  password: "Contraseña"
+  token: "Identificador"
+  signing-in: "Entrando..."
+  signin: "Entra"
 common/views/components/signup.vue:
-  username: "ユーザー名"
-  checking: "確認しています..."
-  available: "利用できます"
-  unavailable: "既に利用されています"
-  error: "通信エラー"
-  invalid-format: "a~z、A~Z、0~9、_が使えます"
-  too-short: "1文字以上でお願いします！"
-  too-long: "20文字以内でお願いします"
-  password: "パスワード"
-  password-placeholder: "8文字以上を推奨します"
-  weak-password: "弱いパスワード"
-  normal-password: "まあまあのパスワード"
-  strong-password: "強いパスワード"
-  retype: "再入力"
-  retype-placeholder: "確認のため再入力してください"
-  password-matched: "確認されました"
-  password-not-matched: "一致していません"
-  recaptcha: "認証"
-  create: "アカウント作成"
-  some-error: "何らかの原因によりアカウントの作成に失敗しました。再度お試しください。"
+  username: "Usuario"
+  checking: "Comprobando..."
+  available: "Disponible"
+  unavailable: "Utilizado"
+  error: "Error de conexión"
+  invalid-format: "utiliza letras, números y/o -."
+  too-short: "¡Mínimo tienes que introducir un caracter!"
+  too-long: "No puedes usar más de 20 caracteres."
+  password: "Contraseña"
+  password-placeholder: "Te recomendamos más de 8 caracteres"
+  weak-password: "Contraseña débil"
+  normal-password: "No está mal"
+  strong-password: "Muy buena contraseña"
+  retype: "Inténtalo otra vez"
+  retype-placeholder: "Confirma la contraseña"
+  password-matched: "OK"
+  password-not-matched: "Las contraseñas no son las mismas"
+  recaptcha: "Verificar"
+  create: "Crea una cuenta"
+  some-error: "Por algún motivo no se ha podido crear la cuenta. Por favor inténtalo de nuevo."
 common/views/components/special-message.vue:
-  new-year: "Happy New Year!"
-  christmas: "Merry Christmas!"
+  new-year: "¡Feliz Año Nuevo!"
+  christmas: "¡Feliz Navidad!"
 common/views/components/stream-indicator.vue:
-  connecting: "接続中"
-  reconnecting: "再接続中"
-  connected: "接続完了"
+  connecting: "Conectando"
+  reconnecting: "Reconectando"
+  connected: "Conectado"
 common/views/components/twitter-setting.vue:
-  description: "お使いのTwitterアカウントをお使いのMisskeyアカウントに接続しておくと、プロフィールでTwitterアカウント情報が表示されるようになったり、Twitterを用いた便利なサインインを利用できるようになります。"
-  connected-to: "次のTwitterアカウントに接続されています"
-  detail: "詳細..."
-  reconnect: "再接続する"
-  connect: "Twitterと接続する"
-  disconnect: "切断する"
+  description: "Si comectas tu cuenta de Twitter con tu cuenta de Misskey podrás ver la información de tu cuemta de Twitter en tu perfil y además podrás entrar usando Twitter."
+  connected-to: "Estas comectado con las siguientes cuentas de Twitter"
+  detail: "Detalles..."
+  reconnect: "Conectar de nuevo"
+  connect: "Conectate usando Twitter"
+  disconnect: "Desconectado"
 common/views/components/uploader.vue:
-  waiting: "待機中"
+  waiting: "Un momento"
 common/views/components/visibility-chooser.vue:
-  public: "公開"
-  home: "ホーム"
-  home-desc: "ホームタイムラインにのみ公開"
-  followers: "フォロワー"
-  followers-desc: "自分のフォロワーにのみ公開"
-  specified: "ダイレクト"
-  specified-desc: "指定したユーザーにのみ公開"
-  private: "非公開"
+  public: "Público"
+  home: "Inicio"
+  home-desc: "Publica solo en la página de inicio"
+  followers: "Seguidores"
+  followers-desc: "Piblica solo para tus seguidores"
+  specified: "Directo"
+  specified-desc: "Publica solo para los seguidores que quieras"
+  private: "Privada"
 common/views/widgets/broadcast.vue:
-  fetching: "確認中"
-  no-broadcasts: "お知らせはありません"
-  have-a-nice-day: "良い一日を！"
-  next: "次"
+  fetching: "Recuperando"
+  no-broadcasts: "Sin emisión"
+  have-a-nice-day: "¡Buenos dias!"
+  next: "Siguiente"
 common/views/widgets/donation.vue:
-  title: "寄付のお願い"
+  title: "Donaciones"
   text: "Misskeyの運営にはドメイン、サーバー等のコストが掛かります。Misskeyは広告を掲載したりしないため、収入を皆様からの寄付に頼っています。もしご興味があれば、{}までご連絡ください。ご協力ありがとうございます。"
 common/views/widgets/photo-stream.vue:
   title: "フォトストリーム"
@@ -228,6 +228,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"
@@ -257,66 +258,66 @@ desktop/views/components/choose-file-from-drive-window.vue:
 desktop/views/components/choose-folder-from-drive-window.vue:
   cancel: "キャンセル"
   ok: "決定"
-  choose-prompt: "フォルダを選択"
+  choose-prompt: "Escoge una Carpeta"
 desktop/views/components/crop-window.vue:
   skip: "クロップをスキップ"
-  cancel: "キャンセル"
-  ok: "決定"
+  cancel: "Cancelar"
+  ok: "OK"
 desktop/views/components/drive-window.vue:
-  used: "使用中"
-  drive: "ドライブ"
+  used: "usado"
+  drive: "Disco"
 desktop/views/components/drive.file.vue:
-  avatar: "アイコン"
-  banner: "バナー"
+  avatar: "Avatar"
+  banner: "Banner"
   contextmenu:
-    rename: "名前を変更"
-    copy-url: "URLをコピー"
-    download: "ダウンロード"
-    else-files: "その他..."
-    set-as-avatar: "アイコンに設定"
-    set-as-banner: "バナーに設定"
-    open-in-app: "アプリで開く"
-    add-app: "アプリを追加"
-    rename-file: "ファイル名の変更"
-    input-new-file-name: "新しいファイル名を入力してください"
-    copied: "コピー完了"
-    copied-url-to-clipboard: "URLをクリップボードにコピーしました"
+    rename: "Renombrar"
+    copy-url: "Copia la URL"
+    download: "Descargar"
+    else-files: "Otros"
+    set-as-avatar: "Utilizar como avatar"
+    set-as-banner: "Utilizar como banner"
+    open-in-app: "Abrir en la aplicación"
+    add-app: "Añadir aplicación"
+    rename-file: "Renombra el fichero"
+    input-new-file-name: "Escribe el nombre nuevo"
+    copied: "Copiado"
+    copied-url-to-clipboard: "URL copiada al porta papeles"
 desktop/views/components/drive.folder.vue:
-  unable-to-process: "操作を完了できません"
-  circular-reference-detected: "移動先のフォルダーは、移動するフォルダーのサブフォルダーです。"
-  unhandled-error: "不明なエラー"
+  unable-to-process: "La operación no se puede llevar a cabo"
+  circular-reference-detected: "La carpeta de destino es una sub-carpeta de la carpeta que quieres mover."
+  unhandled-error: "Error desconocido"
   contextmenu:
-    move-to-this-folder: "このフォルダへ移動"
-    show-in-new-window: "新しいウィンドウで表示"
-    rename: "名前を変更"
-    rename-folder: "フォルダ名の変更"
-    input-new-folder-name: "新しいフォルダ名を入力してください"
+    move-to-this-folder: "Mover a esta carpeta"
+    show-in-new-window: "Abrir en una ventana nueva"
+    rename: "Renombrar"
+    rename-folder: "Renombrar carpeta"
+    input-new-folder-name: "Escribe el nombre nuevo"
 desktop/views/components/drive.nav-folder.vue:
-  drive: "ドライブ"
+  drive: "Disco"
 desktop/views/components/drive.vue:
-  search: "検索"
-  load-more: "もっと読み込む"
-  empty-draghover: "ドロップですか？いいですよ、ボクはカワイイですからね"
-  empty-drive: "ドライブには何もありません。"
-  empty-drive-description: "右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。"
-  empty-folder: "このフォルダーは空です"
-  unable-to-process: "操作を完了できません"
-  circular-reference-detected: "移動先のフォルダーは、移動するフォルダーのサブフォルダーです。"
-  unhandled-error: "不明なエラー"
-  url-upload: "URLアップロード"
-  url-of-file: "アップロードしたいファイルのURL"
-  url-upload-requested: "アップロードをリクエストしました"
-  may-take-time: "アップロードが完了するまで時間がかかる場合があります。"
-  create-folder: "フォルダー作成"
-  folder-name: "フォルダー名"
+  search: "Buscar"
+  load-more: "Cargar más"
+  empty-draghover: "¡Saluda!"
+  empty-drive: "Tu disco está vacio"
+  empty-drive-description: "También puedes subir archivos seleccionándolos y con el botón derecho selecciona \"Subir fichero\" o puedes arrastrarlo hasta la ventana."
+  empty-folder: "La carpeta está vacia"
+  unable-to-process: "La operación no se puede llevar a cabo."
+  circular-reference-detected: "La carpeta de destino es una sub-carpeta de la carpeta que quieres mover."
+  unhandled-error: "Errer desconocido"
+  url-upload: "Subir desde una URL"
+  url-of-file: "URL del fichero que quieres subir"
+  url-upload-requested: "Subida solicitada"
+  may-take-time: "Subir el fichero puede tardar un tiempo."
+  create-folder: "Crear una carpeta"
+  folder-name: "Nombre de la carpeta"
   contextmenu:
-    create-folder: "フォルダーを作成"
-    upload: "ファイルをアップロード"
-    url-upload: "URLからアップロード"
+    create-folder: "Crear una carpeta"
+    upload: "Subir fichero"
+    url-upload: "Subir desde una URL"
 desktop/views/components/follow-button.vue:
-  following: "フォロー中"
-  follow: "フォロー"
-  request-pending: "フォロー許可待ち"
+  following: "Siguiendo"
+  follow: "Sigue"
+  request-pending: "Pendiente de aprobación"
   follow-request: "フォロー申請"
 desktop/views/components/followers-window.vue:
   followers: "{} のフォロワー"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"
@@ -381,55 +382,55 @@ desktop/views/components/post-form.vue:
   renote-failed: "Renoteに失敗しました"
   posting: "投稿中"
   attach-media-from-local: "PCからメディアを添付"
-  attach-media-from-drive: "ドライブからメディアを添付"
-  attach-cancel: "添付取り消し"
+  attach-media-from-drive: "Adjunta multimedia desde tu Disco"
+  attach-cancel: "Quitar el archivo adjunto"
   insert-a-kao: "v(‘ω’)v"
-  create-poll: "アンケートを作成"
-  text-remain: "残り{}文字"
+  create-poll: "Crea una encuesta"
+  text-remain: "quedan {} caracteres"
 desktop/views/components/post-form-window.vue:
-  note: "新規投稿"
-  reply: "返信"
-  attaches: "添付: {}メディア"
-  uploading-media: "{}個のメディアをアップロード中"
+  note: "Nota nueva"
+  reply: "Responder"
+  attaches: "{} archivo(s) multimedia adjuntados"
+  uploading-media: "Subiendo {} archivo(s) multimedia"
 desktop/views/components/progress-dialog.vue:
-  waiting: "待機中"
+  waiting: "Un momento"
 desktop/views/components/renote-form.vue:
-  quote: "引用する..."
-  cancel: "キャンセル"
-  renote: "Renote"
-  reposting: "しています..."
-  success: "Renoteしました！"
-  failure: "Renoteに失敗しました"
+  quote: "Cita..."
+  cancel: "Cancelar"
+  renote: "Volver a publicar"
+  reposting: "Publicando de nuevo..."
+  success: "¡Publicado!"
+  failure: "La publicación ha fallado"
 desktop/views/components/renote-form-window.vue:
-  title: "この投稿をRenoteしますか？"
+  title: "¿Seguro qué quieres volver a publicarlo?"
 desktop/views/components/settings-window.vue:
-  settings: "設定"
+  settings: "Configuración"
 desktop/views/components/settings.vue:
-  profile: "プロフィール"
-  notification: "通知"
-  apps: "アプリ"
-  mute: "ミュート"
-  drive: "ドライブ"
-  security: "セキュリティ"
-  signin: "サインイン履歴"
-  password: "パスワード"
-  2fa: "二段階認証"
-  other: "その他"
-  license: "ライセンス"
-  behaviour: "動作"
-  fetch-on-scroll: "スクロールで自動読み込み"
-  fetch-on-scroll-desc: "ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。"
-  auto-popout: "ウィンドウの自動ポップアウト"
-  auto-popout-desc: "ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。"
-  advanced: "詳細設定"
-  api-via-stream: "ストリームを経由したAPIリクエスト"
-  api-via-stream-desc: "この設定をオンにすると、websocket接続を経由してAPIリクエストが行われます(パフォーマンス向上が期待できます)。オフにすると、ネイティブの fetch APIが利用されます。この設定はこのデバイスのみ有効です。"
-  display: "デザインと表示"
-  customize: "ホームをカスタマイズ"
-  dark-mode: "ダークモード"
-  circle-icons: "円形のアイコンを使用"
-  gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
-  post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
+  profile: "Perfil"
+  notification: "Notificación"
+  apps: "Aplicaciones"
+  mute: "Silenciar"
+  drive: "Disco"
+  security: "Seguridad"
+  signin: "Historial de inicios de sesión"
+  password: "Contraseña"
+  2fa: "Autenticación de Doble-Factor"
+  other: "Otros"
+  license: "Licencia"
+  behaviour: "Acciones"
+  fetch-on-scroll: "Desplazamiento infinito"
+  fetch-on-scroll-desc: "Cuando te deslizas al final de la página nuevo contenido se carga automáticamente."
+  auto-popout: "Ventana emergente automática"
+  auto-popout-desc: "Muestra una ventana emergente si es posible. Esta configuración depende del navegador."
+  advanced: "Configuración avanzada"
+  api-via-stream: "Solicitar API por medio de un stream"
+  api-via-stream-desc: "Las peticiones de las API se realizan por conexiones WebSocket en lugar de las tradicionales (para una mejora en el rendimiento). Esta función depende del navegador."
+  display: "Diseño y pantalla"
+  customize: "Personaliza la página principal"
+  dark-mode: "Modo Nocturno"
+  circle-icons: "Usar iconos circulares"
+  gradient-window-header: "Usar degradados en las cabeceras de las páginas"
+  post-form-on-timeline: "Mostrar el formulario de las entradas encima de la línea de tiempo"
   show-reply-target: "リプライ先を表示する"
   show-my-renotes: "自分の行ったRenoteをタイムラインに表示する"
   show-renoted-my-notes: "Renoteされた自分の投稿をタイムラインに表示する"

locales/fr.yml

@@ -3,20 +3,20 @@ meta:
   lang: "Français"
   divider: ""
 common:
-  misskey: "Une planète du fédiverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "Une ⭐ du fédiverse."
   about: "Merci d'avoir découvert Misskey. Misskey est une <b>plateforme de micro-blogging distribuée</b> née sur Terre. Parce qu'il fait partie du Fédiverse (un univers composé de diverses plateformes de réseaux sociaux organisées), il est mutuellement connecté avec d'autres plateformes de réseaux sociaux. Désirez-vous prendre une pause, pendant un instant, loin de l'agitation de la ville et plonger dans un nouvel Internet ?"
   time:
     unknown: "inconnu"
     future: "future"
-    just_now: "maintenant"
-    seconds_ago: "Il y a {}seconde(s)"
-    minutes_ago: "Il y a {}minute(s)"
-    hours_ago: "Il y a {}heure(s)"
-    days_ago: "Il y a {}jour(s)"
-    weeks_ago: "Il y a{}semaines(s)"
-    months_ago: "Il y a {}mois"
-    years_ago: "Il y a {}an(s)"
+    just_now: "à l'instant"
+    seconds_ago: "Il y a {} seconde·s"
+    minutes_ago: "Il y a {} minute·s"
+    hours_ago: "Il y a {} heure·s"
+    days_ago: "Il y a {} jour·s"
+    weeks_ago: "Il y a {} semaines·s"
+    months_ago: "Il y a {} mois"
+    years_ago: "Il y a {} an·s"
   weekday-short:
     sunday: "D"
     monday: "L"
@@ -29,14 +29,14 @@ common:
     like: "Aime"
     love: "Adore"
     laugh: "Rire"
-    hmm: "Hmm...?"
+    hmm: "Hmm ... ?"
     surprise: "Wow"
-    congrats: "Félicitations!"
-    angry: "En Colère"
+    congrats: "Félicitations !"
+    angry: "En colère"
     confused: "Confus"
     pudding: "Pudding"
   note-placeholders:
-    a: "Que faîtes vous à cet instant ?"
+    a: "Que faîtes vous maintenant ?"
     b: "Quoi de neuf ?"
     c: "Qu'avez-vous en tête ?"
     d: "Voulez-vous exprimer quelque chose ?"
@@ -45,7 +45,7 @@ common:
   delete: "Supprimer"
   loading: "Chargement"
   ok: "OK"
-  update-available: "Une nouvelle version de Misskey est disponible({newer}, version actuelle: {current}). Recharger la page pour appliquer la mise à jour."
+  update-available: "Une nouvelle version de Misskey est disponible ({newer}, version actuelle: {current}). Veuillez recharger la page pour appliquer la mise à jour."
   my-token-regenerated: "Votre token vient d'être généré, vous allez maintenant être déconnecté."
   widgets:
     analog-clock: "Horloge analogique"
@@ -70,7 +70,7 @@ common:
     donation: "Dons"
     nav: "Navigation"
     tips: "Conseils"
-    hashtags: "ハッシュタグ"
+    hashtags: "Étiquettes"
   deck:
     widgets: "Widgets"
     home: "Accueil"
@@ -226,8 +226,9 @@ common/views/widgets/posts-monitor.vue:
   title: "Graph des publications"
   toggle: "表示を切り替え"
 common/views/widgets/hashtags.vue:
-  title: "ハッシュタグ"
+  title: "Étiquettes"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "Info sur le serveur"
   toggle: "Afficher les vues"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "Plus"
   close: "Fermer"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Envoyer"
   add-widget: "Ajouter un widget"
@@ -463,7 +464,7 @@ desktop/views/components/settings.vue:
   update-checking: "Recherche de mises à jour"
   do-update: "Rechercher des mises à jour"
   update-settings: "Paramètres avancés"
-  prevent-update: "アップデートを延期する(非推奨)"
+  prevent-update: "Reporter les mises à jour (non recommandé)"
   prevent-update-desc: "この設定をオンにしてもアップデートが反映される場合があります。この設定はこのデバイスのみ有効です。"
   no-updates: "Aucune mise à jour disponible"
   no-updates-desc: "Votre Misskey est à jour."
@@ -578,7 +579,7 @@ desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "Fermer"
 desktop/views/pages/deck/deck.tl-column.vue:
-  is-media-only: "メディア投稿のみ"
+  is-media-only: "Les publications médias uniquement"
   is-media-view: "メディアビュー"
 desktop/views/pages/deck/deck.note.vue:
   reposted-by: "Reposté par {}"
@@ -678,7 +679,7 @@ mobile/views/components/drive.vue:
   folder-name: "Nom du dossier"
   root-rename-alert: "現在いる場所はルートで、フォルダではないため名前の変更はできません。名前を変更したいフォルダに移動してからやってください。"
   root-move-alert: "現在いる場所はルートで、フォルダではないため移動はできません。移動したいフォルダに移動してからやってください。"
-  url-prompt: "アップロードしたいファイルのURL"
+  url-prompt: "URL du fichier que vous souhaitez téléverser"
   uploading: "アップロードをリクエストしました。アップロードが完了するまで時間がかかる場合があります。"
 mobile/views/components/drive-file-detail.vue:
   rename: "Renommer"
@@ -693,9 +694,9 @@ mobile/views/components/drive.file-detail.vue:
   hash: "Hash (md5)"
   exif: "EXIF"
 mobile/views/components/follow-button.vue:
-  following: "フォロー中"
+  following: "Abonnements"
   follow: "Suivre"
-  request-pending: "フォロー許可待ち"
+  request-pending: "En attente d'approbation"
   follow-request: "Demande d'abonnement"
 mobile/views/components/friends-maker.vue:
   title: "Abonnez-vous aux utilisateurs"
@@ -746,7 +747,7 @@ mobile/views/components/sub-note-content.vue:
   private: "cette publication est privée"
   deleted: "cette publication a été supprimée"
   media-count: "{} médias attachés"
-  poll: "アンケート"
+  poll: "Sondage"
 mobile/views/components/timeline.vue:
   empty: "Pas de notes"
   load-more: "Afficher plus"

locales/index.ts

@@ -5,12 +5,15 @@
 import * as fs from 'fs';
 import * as yaml from 'js-yaml';
 
-const loadLang = lang => yaml.safeLoad(
-	fs.readFileSync(`./locales/${lang}.yml`, 'utf-8'));
+export type LangKey = 'de' | 'en' | 'fr' | 'ja' | 'pl';
+export type LocaleObject = { [key: string]: any };
+
+const loadLang = (lang: LangKey) => yaml.safeLoad(
+	fs.readFileSync(`./locales/${lang}.yml`, 'utf-8')) as LocaleObject;
 
 const native = loadLang('ja');
 
-const langs = {
+const langs: { [key: string]: LocaleObject } = {
 	'de': loadLang('de'),
 	'en': loadLang('en'),
 	'fr': loadLang('fr'),
@@ -23,4 +26,8 @@ Object.entries(langs).map(([, locale]) => {
 	locale = Object.assign({}, native, locale);
 });
 
+export function isAvailableLanguage(lang: string): lang is LangKey {
+	return lang in langs;
+}
+
 export default langs;

locales/it.yml

@@ -3,7 +3,7 @@ meta:
   lang: "日本語"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
   time:
@@ -228,6 +228,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"

locales/ja.yml

@@ -3,7 +3,7 @@ meta:
   divider: ""
 
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
 
@@ -52,6 +52,7 @@ common:
   ok: "わかった"
   update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。"
   my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
+  i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
 
   widgets:
     analog-clock: "アナログ時計"
@@ -258,6 +259,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 
 common/views/widgets/server.vue:
   title: "サーバー情報"
@@ -383,7 +385,7 @@ desktop/views/components/friends-maker.vue:
   close: "閉じる"
 
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 
 desktop/views/components/home.vue:
   done: "完了"

locales/ko.yml

@@ -3,7 +3,7 @@ meta:
   lang: "日本語"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
   time:
@@ -228,6 +228,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"

locales/pl.yml

@@ -3,7 +3,7 @@ meta:
   lang: "język polski"
   divider: ""
 common:
-  misskey: "Planeta Fediwersum"
+  misskey: "⭐ Fediwersum"
   about-title: "⭐ Fediwersum"
   about: "Dziękujemy za znalezienie Misskey. Misskey jest <b>zdecentralizowaną platformą mikroblogową</b> powstałą na Ziemi. Ponieważ działa ona w Fediwersum (uniwersum, w którego skład wchodzi wiele sieci społecznościowych), jest ona połączona z innymi platformami społecznościowymi. Spróbujesz odpocząć od zatłoczoneo miasta i zanurzyć się w nowym Internecie?"
   time:
@@ -70,7 +70,7 @@ common:
     donation: "Dotacje"
     nav: "Nawigacja"
     tips: "Wskazówki"
-    hashtags: "ハッシュタグ"
+    hashtags: "Hashtagi"
   deck:
     widgets: "Widżety"
     home: "Strona główna"
@@ -226,8 +226,9 @@ common/views/widgets/posts-monitor.vue:
   title: "Wykres wpisów"
   toggle: "Przełącz widok"
 common/views/widgets/hashtags.vue:
-  title: "ハッシュタグ"
-  count: "{}人が投稿"
+  title: "Hashtagi"
+  count: "Wspomniany przez {} użytkowników"
+  empty: "Brak popularnych hashtagów"
 common/views/widgets/server.vue:
   title: "Informacje o serwerze"
   toggle: "Przełącz widok"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "Więcej"
   close: "Zamknij"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Wyślij"
   add-widget: "Dodaj widżet:"

locales/pt.yml

@@ -3,7 +3,7 @@ meta:
   lang: "Português"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
   time:
@@ -228,6 +228,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"

locales/ru.yml

@@ -3,7 +3,7 @@ meta:
   lang: "Русский язык"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
   time:
@@ -228,6 +228,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"

locales/zh.yml

@@ -3,7 +3,7 @@ meta:
   lang: "中文(简体)"
   divider: ""
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
   time:
@@ -228,6 +228,7 @@ common/views/widgets/posts-monitor.vue:
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
   count: "{}人が投稿"
+  empty: "トレンドなし"
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"
@@ -333,7 +334,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "2.37.3",
-	"clientVersion": "1.0.6453",
+	"version": "4.3.0",
+	"clientVersion": "1.0.6630",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -23,72 +23,12 @@
 		"format": "gulp format"
 	},
 	"dependencies": {
-		"@fortawesome/fontawesome": "1.0.1",
-		"@fortawesome/fontawesome-free-brands": "5.0.2",
-		"@fortawesome/fontawesome-free-regular": "5.0.2",
-		"@fortawesome/fontawesome-free-solid": "5.0.2",
+		"@fortawesome/fontawesome": "1.1.8",
+		"@fortawesome/fontawesome-free-brands": "5.0.13",
+		"@fortawesome/fontawesome-free-regular": "5.0.13",
+		"@fortawesome/fontawesome-free-solid": "5.0.13",
 		"@koa/cors": "2.2.1",
 		"@prezzemolo/rap": "0.1.2",
-		"autwh": "0.1.0",
-		"bcryptjs": "2.4.3",
-		"cafy": "8.0.0",
-		"chalk": "2.4.1",
-		"crc-32": "1.2.0",
-		"debug": "3.1.0",
-		"deepcopy": "0.6.3",
-		"diskusage": "0.2.4",
-		"elasticsearch": "15.0.0",
-		"emojilib": "2.2.12",
-		"escape-regexp": "0.0.1",
-		"file-type": "8.0.0",
-		"gm": "1.23.1",
-		"http-signature": "1.2.0",
-		"is-root": "2.0.0",
-		"is-url": "1.2.4",
-		"js-yaml": "3.11.0",
-		"jsdom": "11.11.0",
-		"koa": "2.5.1",
-		"koa-bodyparser": "4.2.1",
-		"koa-compress": "3.0.0",
-		"koa-favicon": "2.0.1",
-		"koa-json-body": "5.3.0",
-		"koa-logger": "3.2.0",
-		"koa-mount": "3.0.0",
-		"koa-multer": "1.0.2",
-		"koa-router": "7.4.0",
-		"koa-send": "4.1.3",
-		"koa-slow": "2.1.0",
-		"koa-views": "6.1.4",
-		"kue": "0.11.6",
-		"mongodb": "3.0.10",
-		"monk": "6.0.6",
-		"ms": "2.1.1",
-		"nopt": "4.0.1",
-		"os-utils": "0.0.14",
-		"parse5": "5.0.0",
-		"prominence": "0.2.0",
-		"promise-sequential": "1.1.1",
-		"punycode": "2.1.1",
-		"qrcode": "1.2.0",
-		"ratelimiter": "3.0.3",
-		"recaptcha-promise": "0.1.3",
-		"reconnecting-websocket": "3.2.2",
-		"redis": "2.8.0",
-		"request": "2.87.0",
-		"request-promise-native": "1.0.5",
-		"rndstr": "1.0.0",
-		"speakeasy": "2.0.0",
-		"summaly": "2.0.6",
-		"tcp-port-used": "0.1.2",
-		"tmp": "0.0.33",
-		"uuid": "3.2.1",
-		"web-push": "3.3.1",
-		"webfinger.js": "2.6.6",
-		"websocket": "1.0.26",
-		"ws": "5.2.0",
-		"xev": "2.0.1"
-	},
-	"devDependencies": {
 		"@prezzemolo/zip": "0.0.3",
 		"@types/bcryptjs": "2.4.1",
 		"@types/debug": "0.0.30",
@@ -144,17 +84,30 @@
 		"@types/ws": "5.1.1",
 		"animejs": "2.2.0",
 		"autosize": "4.0.2",
+		"autwh": "0.1.0",
+		"bcryptjs": "2.4.3",
 		"bootstrap-vue": "2.0.0-rc.6",
+		"cafy": "8.0.0",
+		"chalk": "2.4.1",
+		"crc-32": "1.2.0",
 		"css-loader": "0.28.11",
+		"debug": "3.1.0",
 		"deep-equal": "1.0.1",
+		"deepcopy": "0.6.3",
+		"diskusage": "0.2.4",
 		"dompurify": "1.0.4",
+		"elasticsearch": "15.0.0",
 		"element-ui": "2.3.9",
+		"emojilib": "2.2.12",
+		"escape-regexp": "0.0.1",
 		"eslint": "4.19.1",
 		"eslint-plugin-vue": "4.5.0",
 		"eventemitter3": "3.1.0",
 		"exif-js": "2.3.0",
 		"file-loader": "1.1.11",
+		"file-type": "8.0.0",
 		"fuckadblock": "3.2.1",
+		"gm": "1.23.1",
 		"gulp": "3.9.1",
 		"gulp-cssnano": "2.1.3",
 		"gulp-htmlmin": "4.0.0",
@@ -172,32 +125,71 @@
 		"hard-source-webpack-plugin": "0.6.10",
 		"highlight.js": "9.12.0",
 		"html-minifier": "3.5.16",
+		"http-signature": "1.2.0",
 		"inquirer": "5.2.0",
+		"is-root": "2.0.0",
+		"is-url": "1.2.4",
+		"js-yaml": "3.11.0",
+		"jsdom": "11.11.0",
+		"koa": "2.5.1",
+		"koa-bodyparser": "4.2.1",
+		"koa-compress": "3.0.0",
+		"koa-favicon": "2.0.1",
+		"koa-json-body": "5.3.0",
+		"koa-logger": "3.2.0",
+		"koa-mount": "3.0.0",
+		"koa-multer": "1.0.2",
+		"koa-router": "7.4.0",
+		"koa-send": "4.1.3",
+		"koa-slow": "2.1.0",
+		"koa-views": "6.1.4",
+		"kue": "0.11.6",
 		"license-checker": "20.0.0",
 		"loader-utils": "1.1.0",
 		"mecab-async": "0.1.2",
 		"mkdirp": "0.5.1",
 		"mocha": "5.2.0",
 		"moji": "0.5.1",
+		"mongodb": "3.0.10",
+		"monk": "6.0.6",
+		"ms": "2.1.1",
 		"nan": "2.10.0",
 		"node-sass": "4.9.0",
 		"node-sass-json-importer": "3.2.0",
+		"nopt": "4.0.1",
 		"nprogress": "0.2.0",
 		"object-assign-deep": "0.4.0",
 		"on-build-webpack": "0.1.0",
+		"os-utils": "0.0.14",
+		"parse5": "5.0.0",
 		"progress-bar-webpack-plugin": "1.11.0",
+		"prominence": "0.2.0",
+		"promise-sequential": "1.1.1",
 		"pug": "2.0.3",
+		"punycode": "2.1.1",
+		"qrcode": "1.2.0",
+		"ratelimiter": "3.0.3",
+		"recaptcha-promise": "0.1.3",
+		"reconnecting-websocket": "3.2.2",
+		"redis": "2.8.0",
+		"request": "2.87.0",
+		"request-promise-native": "1.0.5",
 		"rimraf": "2.6.2",
+		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
 		"sass-loader": "7.0.1",
 		"seedrandom": "2.4.3",
 		"single-line-log": "1.1.2",
+		"speakeasy": "2.0.0",
 		"style-loader": "0.21.0",
 		"stylus": "0.54.5",
 		"stylus-loader": "3.0.2",
+		"summaly": "2.0.6",
 		"swagger-jsdoc": "1.9.7",
 		"syuilo-password-strength": "0.0.1",
+		"tcp-port-used": "0.1.2",
 		"textarea-caret": "3.1.0",
+		"tmp": "0.0.33",
 		"ts-loader": "4.3.0",
 		"ts-node": "6.0.4",
 		"tslint": "5.10.0",
@@ -205,19 +197,26 @@
 		"typescript-eslint-parser": "15.0.0",
 		"uglify-es": "3.3.9",
 		"url-loader": "1.0.1",
+		"uuid": "3.2.1",
 		"v-animate-css": "0.0.2",
 		"vue": "2.5.16",
 		"vue-cropperjs": "2.2.0",
 		"vue-js-modal": "1.3.13",
 		"vue-json-tree-view": "2.1.4",
 		"vue-loader": "15.2.1",
-		"vue-material": "^1.0.0-beta-10.2",
 		"vue-router": "3.0.1",
 		"vue-template-compiler": "2.5.16",
 		"vuedraggable": "2.16.0",
 		"vuex": "3.0.1",
 		"vuex-persistedstate": "^2.5.4",
+		"web-push": "3.3.1",
+		"webfinger.js": "2.6.6",
 		"webpack": "4.9.1",
-		"webpack-cli": "2.1.4"
+		"webpack-cli": "2.1.4",
+		"websocket": "1.0.26",
+		"ws": "5.2.0",
+		"xev": "2.0.1",
+		"@types/file-type": "5.2.1",
+		"@types/jsdom": "11.0.5"
 	}
 }

src/acct/parse.ts

@@ -1,4 +1,4 @@
-export default acct => {
+export default (acct: string) => {
 	const splitted = acct.split('@', 2);
 	return { username: splitted[0], host: splitted[1] || null };
 };

src/acct/render.ts

@@ -1,3 +1,5 @@
-export default user => {
+import { IUser } from '../models/user';
+
+export default (user: IUser) => {
 	return user.host === null ? user.username : `${user.username}@${user.host}`;
 };

src/build/fa.ts

@@ -3,18 +3,18 @@
  */
 
 import * as fontawesome from '@fortawesome/fontawesome';
-import * as regular from '@fortawesome/fontawesome-free-regular';
-import * as solid from '@fortawesome/fontawesome-free-solid';
-import * as brands from '@fortawesome/fontawesome-free-brands';
+import regular from '@fortawesome/fontawesome-free-regular';
+import solid from '@fortawesome/fontawesome-free-solid';
+import brands from '@fortawesome/fontawesome-free-brands';
 
 fontawesome.library.add(regular, solid, brands);
 
 export const pattern = /%fa:(.+?)%/g;
 
-export const replacement = (match, key) => {
+export const replacement = (match: string, key: string) => {
 	const args = key.split(' ');
 	let prefix = 'fas';
-	const classes = [];
+	const classes: string[] = [];
 	let transform = '';
 	let name;
 
@@ -34,12 +34,12 @@ export const replacement = (match, key) => {
 		}
 	});
 
-	const icon = fontawesome.icon({ prefix, iconName: name }, {
-		classes: classes
+	const icon = fontawesome.icon({ prefix, iconName: name } as fontawesome.IconLookup, {
+		classes: classes,
+		transform: fontawesome.parse.transform(transform)
 	});
 
 	if (icon) {
-		icon.transform = fontawesome.parse.transform(transform);
 		return `<i data-fa class="${name}">${icon.html[0]}</i>`;
 	} else {
 		console.warn(`'${name}' not found in fa`);

src/build/i18n.ts

@@ -2,7 +2,7 @@
  * Replace i18n texts
  */
 
-import locale from '../../locales';
+import locale, { isAvailableLanguage, LocaleObject } from '../../locales';
 
 export default class Replacer {
 	private lang: string;
@@ -16,19 +16,19 @@ export default class Replacer {
 		this.replacement = this.replacement.bind(this);
 	}
 
-	private get(path: string, key: string) {
-		const texts = locale[this.lang];
-
-		if (texts == null) {
+	private get(path: string, key: string): string {
+		if (!isAvailableLanguage(this.lang)) {
 			console.warn(`lang '${this.lang}' is not supported`);
 			return key; // Fallback
 		}
 
+		const texts = locale[this.lang];
+
 		let text = texts;
 
 		if (path) {
 			if (text.hasOwnProperty(path)) {
-				text = text[path];
+				text = text[path] as LocaleObject;
 			} else {
 				console.warn(`path '${path}' not found in '${this.lang}'`);
 				return key; // Fallback
@@ -38,7 +38,7 @@ export default class Replacer {
 		// Check the key existance
 		const error = key.split('.').some(k => {
 			if (text.hasOwnProperty(k)) {
-				text = text[k];
+				text = (text as LocaleObject)[k];
 				return false;
 			} else {
 				return true;
@@ -48,12 +48,15 @@ export default class Replacer {
 		if (error) {
 			console.warn(`key '${key}' not found in '${path}' of '${this.lang}'`);
 			return key; // Fallback
+		} else if (typeof text !== 'string') {
+			console.warn(`key '${key}' is not string in '${path}' of '${this.lang}'`);
+			return key; // Fallback
 		} else {
 			return text;
 		}
 	}
 
-	public replacement(match, key) {
+	public replacement(match: string, key: string) {
 		let path = null;
 
 		if (key.indexOf('|') != -1) {

src/cafy-id.ts

@@ -1,8 +1,8 @@
 import * as mongo from 'mongodb';
 import { Query } from 'cafy';
 
-export const isAnId = x => mongo.ObjectID.isValid(x);
-export const isNotAnId = x => !isAnId(x);
+export const isAnId = (x: any) => mongo.ObjectID.isValid(x);
+export const isNotAnId = (x: any) => !isAnId(x);
 
 /**
  * ID

src/client/app/app.styl

@@ -7,11 +7,6 @@ html
 			cursor progress !important
 
 body
-	// for md
-	font-size 16px !important
-	line-height initial !important
-	letter-spacing initial !important
-
 	overflow-wrap break-word
 
 #error

src/client/app/common/scripts/compose-notification.ts

@@ -55,7 +55,7 @@ export default function(type, data): Notification {
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
-		case 'othello_invited':
+		case 'reversi_invited':
 			return {
 				title: '対局への招待があります',
 				body: `${getUserName(data.parent)}さんから`,

src/client/app/common/scripts/streaming/reversi-game.ts

@@ -1,9 +1,9 @@
 import Stream from './stream';
 import MiOS from '../../../mios';
 
-export class OthelloGameStream extends Stream {
+export class ReversiGameStream extends Stream {
 	constructor(os: MiOS, me, game) {
-		super(os, 'othello-game', {
+		super(os, 'reversi-game', {
 			i: me ? me.token : null,
 			game: game.id
 		});

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

@@ -2,15 +2,15 @@ import StreamManager from './stream-manager';
 import Stream from './stream';
 import MiOS from '../../../mios';
 
-export class OthelloStream extends Stream {
+export class ReversiStream extends Stream {
 	constructor(os: MiOS, me) {
-		super(os, 'othello', {
+		super(os, 'reversi', {
 			i: me.token
 		});
 	}
 }
 
-export class OthelloStreamManager extends StreamManager<OthelloStream> {
+export class ReversiStreamManager extends StreamManager<ReversiStream> {
 	private me;
 	private os: MiOS;
 
@@ -23,7 +23,7 @@ export class OthelloStreamManager extends StreamManager<OthelloStream> {
 
 	public getConnection() {
 		if (this.connection == null) {
-			this.connection = new OthelloStream(this.os, this.me);
+			this.connection = new ReversiStream(this.os, this.me);
 		}
 
 		return this.connection;

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

@@ -13,9 +13,6 @@
 
 .a
 	display block
-	position fixed
-	top 0
-	right 0
 
 	> svg
 		display block

src/client/app/common/views/components/index.ts

@@ -27,8 +27,16 @@ import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import Switch from './switch.vue';
-import Othello from './othello.vue';
+import Reversi from './reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
+import uiInput from './ui/input.vue';
+import uiButton from './ui/button.vue';
+import uiCard from './ui/card.vue';
+import uiForm from './ui/form.vue';
+import uiTextarea from './ui/textarea.vue';
+import uiSwitch from './ui/switch.vue';
+import uiRadio from './ui/radio.vue';
+import uiSelect from './ui/select.vue';
 
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
@@ -57,5 +65,13 @@ Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-switch', Switch);
-Vue.component('mk-othello', Othello);
+Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
+Vue.component('ui-input', uiInput);
+Vue.component('ui-button', uiButton);
+Vue.component('ui-card', uiCard);
+Vue.component('ui-form', uiForm);
+Vue.component('ui-textarea', uiTextarea);
+Vue.component('ui-switch', uiSwitch);
+Vue.component('ui-radio', uiRadio);
+Vue.component('ui-select', uiSelect);

src/client/app/common/views/components/note-html.ts

@@ -40,6 +40,17 @@ export default Vue.component('mk-note-html', {
 			ast = this.ast;
 		}
 
+		if (ast.filter(x => x.type != 'hashtag').length == 0) {
+			return;
+		}
+
+		while (ast[ast.length - 1] && (
+			ast[ast.length - 1].type == 'hashtag' ||
+			(ast[ast.length - 1].type == 'text' && ast[ast.length - 1].content == ' ') ||
+			(ast[ast.length - 1].type == 'text' && ast[ast.length - 1].content == '\n'))) {
+			ast.pop();
+		}
+
 		// Parse ast to DOM
 		const els = flatten(ast.map(token => {
 			switch (token.type) {
@@ -92,7 +103,7 @@ export default Vue.component('mk-note-html', {
 				case 'hashtag':
 					return createElement('a', {
 						attrs: {
-							href: `${url}/search?q=${token.content}`,
+							href: `${url}/tags/${token.hashtag}`,
 							target: '_blank'
 						}
 					}, token.content);

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

@@ -8,7 +8,10 @@
 	<img v-if="reaction == 'congrats'" src="/assets/reactions/congrats.png" alt="%i18n:common.reactions.congrats%">
 	<img v-if="reaction == 'angry'" src="/assets/reactions/angry.png" alt="%i18n:common.reactions.angry%">
 	<img v-if="reaction == 'confused'" src="/assets/reactions/confused.png" alt="%i18n:common.reactions.confused%">
-	<img v-if="reaction == 'pudding'" src="/assets/reactions/pudding.png" alt="%i18n:common.reactions.pudding%">
+	<template v-if="reaction == 'pudding'">
+		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="/assets/reactions/sushi.png" alt="%i18n:common.reactions.pudding%">
+		<img v-else src="/assets/reactions/pudding.png" alt="%i18n:common.reactions.pudding%">
+	</template>
 </span>
 </template>
 

src/client/app/common/views/components/reversi.game.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as CRC32 from 'crc-32';
-import Othello, { Color } from '../../../../../othello/core';
+import Reversi, { Color } from '../../../../../reversi/core';
 import { url } from '../../../config';
 
 export default Vue.extend({
@@ -52,7 +52,7 @@ export default Vue.extend({
 	data() {
 		return {
 			game: null,
-			o: null as Othello,
+			o: null as Reversi,
 			logs: [],
 			logPos: 0,
 			pollingClock: null
@@ -98,7 +98,7 @@ export default Vue.extend({
 	watch: {
 		logPos(v) {
 			if (!this.game.isEnded) return;
-			this.o = new Othello(this.game.settings.map, {
+			this.o = new Reversi(this.game.settings.map, {
 				isLlotheo: this.game.settings.isLlotheo,
 				canPutEverywhere: this.game.settings.canPutEverywhere,
 				loopedBoard: this.game.settings.loopedBoard
@@ -115,7 +115,7 @@ export default Vue.extend({
 	created() {
 		this.game = this.initGame;
 
-		this.o = new Othello(this.game.settings.map, {
+		this.o = new Reversi(this.game.settings.map, {
 			isLlotheo: this.game.settings.isLlotheo,
 			canPutEverywhere: this.game.settings.canPutEverywhere,
 			loopedBoard: this.game.settings.loopedBoard
@@ -163,7 +163,7 @@ export default Vue.extend({
 
 			// サウンドを再生する
 			if (this.$store.state.device.enableSounds) {
-				const sound = new Audio(`${url}/assets/othello-put-me.mp3`);
+				const sound = new Audio(`${url}/assets/reversi-put-me.mp3`);
 				sound.volume = this.$store.state.device.soundVolume;
 				sound.play();
 			}
@@ -187,7 +187,7 @@ export default Vue.extend({
 
 			// サウンドを再生する
 			if (this.$store.state.device.enableSounds && x.color != this.myColor) {
-				const sound = new Audio(`${url}/assets/othello-put-you.mp3`);
+				const sound = new Audio(`${url}/assets/reversi-put-you.mp3`);
 				sound.volume = this.$store.state.device.soundVolume;
 				sound.play();
 			}
@@ -213,7 +213,7 @@ export default Vue.extend({
 		onRescue(game) {
 			this.game = game;
 
-			this.o = new Othello(this.game.settings.map, {
+			this.o = new Reversi(this.game.settings.map, {
 				isLlotheo: this.game.settings.isLlotheo,
 				canPutEverywhere: this.game.settings.canPutEverywhere,
 				loopedBoard: this.game.settings.loopedBoard

src/client/app/common/views/components/reversi.gameroom.vue

@@ -7,9 +7,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import XGame from './othello.game.vue';
-import XRoom from './othello.room.vue';
-import { OthelloGameStream } from '../../scripts/streaming/othello-game';
+import XGame from './reversi.game.vue';
+import XRoom from './reversi.room.vue';
+import { ReversiGameStream } from '../../scripts/streaming/reversi-game';
 
 export default Vue.extend({
 	components: {
@@ -25,7 +25,7 @@ export default Vue.extend({
 	},
 	created() {
 		this.g = this.game;
-		this.connection = new OthelloGameStream((this as any).os, this.$store.state.i, this.game);
+		this.connection = new ReversiGameStream((this as any).os, this.$store.state.i, this.game);
 		this.connection.on('started', this.onStarted);
 	},
 	beforeDestroy() {

src/client/app/common/views/components/reversi.room.vue

@@ -94,7 +94,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import * as maps from '../../../../../othello/maps';
+import * as maps from '../../../../../reversi/maps';
 
 export default Vue.extend({
 	props: ['game', 'connection'],

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

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-othello">
+<div class="mk-reversi">
 	<div v-if="game">
 		<x-gameroom :game="game"/>
 	</div>
@@ -11,14 +11,14 @@
 	</div>
 	<div class="index" v-else>
 		<h1>Misskey %fa:circle%thell%fa:circle R%</h1>
-		<p>他のMisskeyユーザーとオセロで対戦しよう</p>
+		<p>他のMisskeyユーザーとリバーシで対戦しよう</p>
 		<div class="play">
 			<el-button round>フリーマッチ(準備中)</el-button>
 			<el-button type="primary" round @click="match">指名</el-button>
 			<details>
 				<summary>遊び方</summary>
 				<div>
-					<p>オセロは、相手と交互に石をボードに置いてゆき、相手の石を挟んでひっくり返しながら、最終的に残った石が多い方が勝ちというボードゲームです。</p>
+					<p>リバーシは、相手と交互に石をボードに置いてゆき、相手の石を挟んでひっくり返しながら、最終的に残った石が多い方が勝ちというボードゲームです。</p>
 					<dl>
 						<dt><b>フリーマッチ</b></dt>
 						<dd>ランダムなユーザーと対戦するモードです。</dd>
@@ -39,7 +39,7 @@
 		</section>
 		<section v-if="myGames.length > 0">
 			<h2>自分の対局</h2>
-			<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
+			<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
 				<mk-avatar class="avatar" :user="g.user1"/>
 				<mk-avatar class="avatar" :user="g.user2"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
@@ -48,7 +48,7 @@
 		</section>
 		<section v-if="games.length > 0">
 			<h2>みんなの対局</h2>
-			<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
+			<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
 				<mk-avatar class="avatar" :user="g.user1"/>
 				<mk-avatar class="avatar" :user="g.user2"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
@@ -61,7 +61,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import XGameroom from './othello.gameroom.vue';
+import XGameroom from './reversi.gameroom.vue';
 
 export default Vue.extend({
 	components: {
@@ -93,24 +93,24 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.connection = (this as any).os.streams.othelloStream.getConnection();
-		this.connectionId = (this as any).os.streams.othelloStream.use();
+		this.connection = (this as any).os.streams.reversiStream.getConnection();
+		this.connectionId = (this as any).os.streams.reversiStream.use();
 
 		this.connection.on('matched', this.onMatched);
 		this.connection.on('invited', this.onInvited);
 
-		(this as any).api('othello/games', {
+		(this as any).api('reversi/games', {
 			my: true
 		}).then(games => {
 			this.myGames = games;
 		});
 
-		(this as any).api('othello/games').then(games => {
+		(this as any).api('reversi/games').then(games => {
 			this.games = games;
 			this.gamesFetching = false;
 		});
 
-		(this as any).api('othello/invitations').then(invitations => {
+		(this as any).api('reversi/invitations').then(invitations => {
 			this.invitations = this.invitations.concat(invitations);
 		});
 
@@ -126,13 +126,13 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('matched', this.onMatched);
 		this.connection.off('invited', this.onInvited);
-		(this as any).os.streams.othelloStream.dispose(this.connectionId);
+		(this as any).os.streams.reversiStream.dispose(this.connectionId);
 
 		clearInterval(this.pingClock);
 	},
 	methods: {
 		go(game) {
-			(this as any).api('othello/games/show', {
+			(this as any).api('reversi/games/show', {
 				gameId: game.id
 			}).then(game => {
 				this.matching = null;
@@ -146,7 +146,7 @@ export default Vue.extend({
 				(this as any).api('users/show', {
 					username
 				}).then(user => {
-					(this as any).api('othello/match', {
+					(this as any).api('reversi/match', {
 						userId: user.id
 					}).then(res => {
 						if (res == null) {
@@ -160,10 +160,10 @@ export default Vue.extend({
 		},
 		cancel() {
 			this.matching = null;
-			(this as any).api('othello/match/cancel');
+			(this as any).api('reversi/match/cancel');
 		},
 		accept(invitation) {
-			(this as any).api('othello/match', {
+			(this as any).api('reversi/match', {
 				userId: invitation.parent.id
 			}).then(game => {
 				if (game) {
@@ -186,7 +186,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-othello
+.mk-reversi
 	color #677f84
 	background #fff
 

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

@@ -1,24 +1,33 @@
 <template>
 <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
-	<label class="user-name">
-		<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="%i18n:@username%" autofocus required @change="onUsernameChange"/>%fa:at%
-	</label>
-	<label class="password">
-		<input v-model="password" type="password" placeholder="%i18n:@password%" required/>%fa:lock%
-	</label>
-	<label class="token" v-if="user && user.twoFactorEnabled">
-		<input v-model="token" type="number" placeholder="%i18n:@token%" required/>%fa:lock%
-	</label>
-	<button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</button>
-	もしくは <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
+	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
+	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
+		<span>%i18n:@username%</span>
+		<span slot="prefix">@</span>
+		<span slot="suffix">@{{ host }}</span>
+	</ui-input>
+	<ui-input v-model="password" type="password" required>
+		<span>%i18n:@password%</span>
+		<span slot="prefix">%fa:lock%</span>
+	</ui-input>
+	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
+	<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
+	<p style="margin: 8px 0;">または<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a></p>
 </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl } from '../../../config';
+import { apiUrl, host } from '../../../config';
 
 export default Vue.extend({
+	props: {
+		withAvatar: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
 	data() {
 		return {
 			signing: false,
@@ -27,6 +36,7 @@ export default Vue.extend({
 			password: '',
 			token: '',
 			apiUrl,
+			host
 		};
 	},
 	methods: {
@@ -35,6 +45,8 @@ export default Vue.extend({
 				username: this.username
 			}).then(user => {
 				this.user = user;
+			}, () => {
+				this.user = null;
 			});
 		},
 		onSubmit() {
@@ -59,84 +71,19 @@ export default Vue.extend({
 @import '~const.styl'
 
 .mk-signin
+	color #555
+
 	&.signing
 		&, *
 			cursor wait !important
 
-	label
-		display block
-		margin 12px 0
-
-		[data-fa]
-			display block
-			pointer-events none
-			position absolute
-			bottom 0
-			top 0
-			left 0
-			z-index 1
-			margin auto
-			padding 0 16px
-			height 1em
-			color #898786
-
-		input[type=text]
-		input[type=password]
-		input[type=number]
-			user-select text
-			display inline-block
-			cursor auto
-			padding 0 0 0 38px
-			margin 0
-			width 100%
-			line-height 44px
-			font-size 1em
-			color rgba(#000, 0.7)
-			background #fff
-			outline none
-			border solid 1px #eee
-			border-radius 4px
-
-			&:hover
-				background rgba(255, 255, 255, 0.7)
-				border-color #ddd
-
-				& + i
-					color #797776
-
-			&:focus
-				background #fff
-				border-color #ccc
-
-				& + i
-					color #797776
-
-	[type=submit]
-		cursor pointer
-		padding 16px
-		margin -6px 0 0 0
-		width 100%
-		font-size 1.2em
-		color rgba(#000, 0.5)
-		outline none
-		border none
-		border-radius 0
-		background transparent
-		transition all .5s ease
-
-		&:hover
-			color $theme-color
-			transition all .2s ease
-
-		&:focus
-			color $theme-color
-			transition all .2s ease
-
-		&:active
-			color darken($theme-color, 30%)
-			transition all .2s ease
-
-		&:disabled
-			opacity 0.7
+	> .avatar
+		margin 16px auto 0 auto
+		width 64px
+		height 64px
+		background #ddd
+		background-position center
+		background-size cover
+		border-radius 100%
 
 </style>

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

@@ -1,60 +1,58 @@
 <template>
-<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
-	<label class="username">
-		<p class="caption">%fa:at%%i18n:@username%</p>
-		<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @input="onChangeUsername"/>
-		<p class="profile-page-url-preview" v-if="shouldShowProfileUrl">{{ `${url}/@${username}` }}</p>
-		<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p>
-		<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p>
-		<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p>
-		<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p>
-		<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p>
-		<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-short%</p>
-		<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-long%</p>
-	</label>
-	<label class="password">
-		<p class="caption">%fa:lock%%i18n:@password%</p>
-		<input v-model="password" type="password" placeholder="%i18n:@password-placeholder%" autocomplete="off" required @input="onChangePassword"/>
-		<div class="meter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
-			<div class="value" ref="passwordMetar"></div>
+<form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
+	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername">
+		<span>%i18n:@username%</span>
+		<span slot="prefix">@</span>
+		<span slot="suffix">@{{ host }}</span>
+		<p slot="text" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw% %i18n:@checking%</p>
+		<p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw% %i18n:@available%</p>
+		<p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@unavailable%</p>
+		<p slot="text" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@error%</p>
+		<p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@invalid-format%</p>
+		<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-short%</p>
+		<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p>
+	</ui-input>
+	<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true">
+		<span>%i18n:@password%</span>
+		<span slot="prefix">%fa:lock%</span>
+		<div slot="text">
+			<p slot="text" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@weak-password%</p>
+			<p slot="text" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw% %i18n:@normal-password%</p>
+			<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p>
 		</div>
-		<p class="info" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@weak-password%</p>
-		<p class="info" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw%%i18n:@normal-password%</p>
-		<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:@strong-password%</p>
-	</label>
-	<label class="retype-password">
-		<p class="caption">%fa:lock%%i18n:@password%(%i18n:@retype%)</p>
-		<input v-model="retypedPassword" type="password" placeholder="%i18n:@retype-placeholder%" autocomplete="off" required @input="onChangePasswordRetype"/>
-		<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:@password-matched%</p>
-		<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@password-not-matched%</p>
-	</label>
-	<label class="recaptcha">
-		<p class="caption"><template v-if="recaptchaed">%fa:toggle-on%</template><template v-if="!recaptchaed">%fa:toggle-off%</template>%i18n:@recaptcha%</p>
-		<div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" :data-sitekey="recaptchaSitekey"></div>
-	</label>
-	<label class="agree-tou">
-		<input name="agree-tou" type="checkbox" autocomplete="off" required/>
+	</ui-input>
+	<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
+		<span>%i18n:@password% (%i18n:@retype%)</span>
+		<span slot="prefix">%fa:lock%</span>
+		<div slot="text">
+			<p slot="text" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw% %i18n:@password-matched%</p>
+			<p slot="text" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@password-not-matched%</p>
+		</div>
+	</ui-input>
+	<div class="g-recaptcha" :data-sitekey="recaptchaSitekey" style="margin: 16px 0;"></div>
+	<label class="agree-tou" style="display: block; margin: 16px 0;">
+		<input name="agree-tou" type="checkbox" required/>
 		<p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p>
 	</label>
-	<button type="submit">%i18n:@create%</button>
+	<ui-button type="submit">%i18n:@create%</ui-button>
 </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 const getPasswordStrength = require('syuilo-password-strength');
-import { url, docsUrl, lang, recaptchaSitekey } from '../../../config';
+import { host, url, docsUrl, lang, recaptchaSitekey } from '../../../config';
 
 export default Vue.extend({
 	data() {
 		return {
+			host,
 			username: '',
 			password: '',
 			retypedPassword: '',
 			url,
 			touUrl: `${docsUrl}/${lang}/tou`,
 			recaptchaSitekey,
-			recaptchaed: false,
 			usernameState: null,
 			passwordStrength: '',
 			passwordRetypeState: null
@@ -104,7 +102,6 @@ export default Vue.extend({
 
 			const strength = getPasswordStrength(this.password);
 			this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
-			(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
 		},
 		onChangePasswordRetype() {
 			if (this.retypedPassword == '') {
@@ -130,19 +127,9 @@ export default Vue.extend({
 				alert('%i18n:@some-error%');
 
 				(window as any).grecaptcha.reset();
-				this.recaptchaed = false;
 			});
 		}
 	},
-	created() {
-		(window as any).onRecaptchaed = () => {
-			this.recaptchaed = true;
-		};
-
-		(window as any).onRecaptchaExpired = () => {
-			this.recaptchaed = false;
-		};
-	},
 	mounted() {
 		const head = document.getElementsByTagName('head')[0];
 		const script = document.createElement('script');
@@ -158,100 +145,6 @@ export default Vue.extend({
 .mk-signup
 	min-width 302px
 
-	label
-		display block
-		margin 0 0 16px 0
-
-		> .caption
-			margin 0 0 4px 0
-			color #828888
-			font-size 0.95em
-
-			> [data-fa]
-				margin-right 0.25em
-				color #96adac
-
-		> .info
-			display block
-			margin 4px 0
-			font-size 0.8em
-
-			> [data-fa]
-				margin-right 0.3em
-
-		&.username
-			.profile-page-url-preview
-				display block
-				margin 4px 8px 0 4px
-				font-size 0.8em
-				color #888
-
-				&:empty
-					display none
-
-				&:not(:empty) + .info
-					margin-top 0
-
-		&.password
-			.meter
-				display block
-				margin-top 8px
-				width 100%
-				height 8px
-
-				&[data-strength='']
-					display none
-
-				&[data-strength='low']
-					> .value
-						background #d73612
-
-				&[data-strength='medium']
-					> .value
-						background #d7ca12
-
-				&[data-strength='high']
-					> .value
-						background #61bb22
-
-				> .value
-					display block
-					width 0%
-					height 100%
-					background transparent
-					border-radius 4px
-					transition all 0.1s ease
-
-	[type=text], [type=password]
-		user-select text
-		display inline-block
-		cursor auto
-		padding 0 12px
-		margin 0
-		width 100%
-		line-height 44px
-		font-size 1em
-		color #333 !important
-		background #fff !important
-		outline none
-		border solid 1px rgba(#000, 0.1)
-		border-radius 4px
-		box-shadow 0 0 0 114514px #fff inset
-		transition all .3s ease
-
-		&:hover
-			border-color rgba(#000, 0.2)
-			transition all .1s ease
-
-		&:focus
-			color $theme-color !important
-			border-color $theme-color
-			box-shadow 0 0 0 1024px #fff inset, 0 0 0 4px rgba($theme-color, 10%)
-			transition all 0s ease
-
-		&:disabled
-			opacity 0.5
-
 	.agree-tou
 		padding 4px
 		border-radius 4px
@@ -269,19 +162,4 @@ export default Vue.extend({
 			display inline
 			color #555
 
-	button
-		margin 0
-		padding 16px
-		width 100%
-		font-size 1em
-		color #fff
-		background $theme-color
-		border-radius 3px
-
-		&:hover
-			background lighten($theme-color, 5%)
-
-		&:active
-			background darken($theme-color, 5%)
-
 </style>

src/client/app/common/views/components/ui/button.vue

@@ -0,0 +1,82 @@
+<template>
+<div class="ui-button" :class="[styl]">
+	<button :type="type" @click="$emit('click')">
+		<slot></slot>
+	</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		type: {
+			type: String,
+			required: false
+		}
+	},
+	data() {
+		return {
+			styl: 'fill'
+		};
+	},
+	inject: {
+		isCardChild: { default: false }
+	},
+	created() {
+		if (this.isCardChild) {
+			this.styl = 'line';
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark, fill)
+	> button
+		display block
+		width 100%
+		margin 0
+		padding 0
+		font-weight bold
+		font-size 16px
+		line-height 44px
+		border none
+		border-radius 6px
+		outline none
+		box-shadow none
+
+		if fill
+			color $theme-color-foreground
+			background $theme-color
+
+			&:hover
+				background lighten($theme-color, 5%)
+
+			&:active
+				background darken($theme-color, 5%)
+		else
+			color $theme-color
+			background none
+
+			&:hover
+				color darken($theme-color, 5%)
+
+			&:active
+				background rgba($theme-color, 0.3)
+
+.ui-button[data-darkmode]
+	&.fill
+		root(true, true)
+	&:not(.fill)
+		root(true, false)
+
+.ui-button:not([data-darkmode])
+	&.fill
+		root(false, true)
+	&:not(.fill)
+		root(false, false)
+
+</style>

src/client/app/common/views/components/ui/card.vue

@@ -0,0 +1,46 @@
+<template>
+<div class="ui-card">
+	<header>
+		<slot name="title"></slot>
+	</header>
+
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	provide() {
+		return {
+			isCardChild: true
+		};
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	margin 16px
+	padding 16px
+	color isDark ? #fff : #000
+	background isDark ? #282C37 : #fff
+	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
+	@media (min-width 500px)
+		padding 32px
+
+	> header
+		font-weight normal
+		font-size 24px
+		color isDark ? #fff : #444
+
+.ui-card[data-darkmode]
+	root(true)
+
+.ui-card:not([data-darkmode])
+	root(false)
+
+</style>

src/client/app/common/views/components/ui/form.vue

@@ -0,0 +1,30 @@
+<template>
+<div class="ui-form">
+	<fieldset :disabled="disabled">
+		<slot></slot>
+	</fieldset>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.ui-form
+	> fieldset
+		margin 0
+		padding 0
+		border none
+
+</style>

src/client/app/common/views/components/ui/input.vue

@@ -0,0 +1,350 @@
+<template>
+<div class="ui-input" :class="[{ focused, filled }, styl]">
+	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div class="input">
+		<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
+			<div class="value" ref="passwordMetar"></div>
+		</div>
+		<span class="label" ref="label"><slot></slot></span>
+		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+		<template v-if="type != 'file'">
+			<input ref="input"
+					:type="type"
+					v-model="v"
+					:required="required"
+					:readonly="readonly"
+					:pattern="pattern"
+					:autocomplete="autocomplete"
+					:spellcheck="spellcheck"
+					@focus="focused = true"
+					@blur="focused = false">
+		</template>
+		<template v-else>
+			<input ref="input"
+					type="text"
+					:value="placeholder"
+					readonly
+					@click="chooseFile">
+			<input ref="file"
+					type="file"
+					:value="value"
+					@change="onChangeFile">
+		</template>
+		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
+	</div>
+	<div class="text"><slot name="text"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+const getPasswordStrength = require('syuilo-password-strength');
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		pattern: {
+			type: String,
+			required: false
+		},
+		autocomplete: {
+			required: false
+		},
+		spellcheck: {
+			required: false
+		},
+		withPasswordMeter: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	data() {
+		return {
+			v: this.value,
+			focused: false,
+			passwordStrength: '',
+			styl: 'fill'
+		};
+	},
+	computed: {
+		filled(): boolean {
+			return this.v != '' && this.v != null;
+		},
+		placeholder(): string {
+			if (this.type != 'file') return null;
+			if (this.v == null) return null;
+
+			if (typeof this.v == 'string') return this.v;
+
+			if (Array.isArray(this.v)) {
+				return this.v.map(file => file.name).join(', ');
+			} else {
+				return this.v.name;
+			}
+		}
+	},
+	watch: {
+		value(v) {
+			this.v = v;
+		},
+		v(v) {
+			this.$emit('input', v);
+
+			if (this.withPasswordMeter) {
+				if (v == '') {
+					this.passwordStrength = '';
+					return;
+				}
+
+				const strength = getPasswordStrength(v);
+				this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
+				(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
+			}
+		}
+	},
+	inject: {
+		isCardChild: { default: false }
+	},
+	created() {
+		if (this.isCardChild) {
+			this.styl = 'line';
+		}
+	},
+	mounted() {
+		if (this.$refs.prefix) {
+			this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
+			if (this.$refs.prefix.offsetWidth) {
+				this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
+			}
+		}
+		if (this.$refs.suffix) {
+			if (this.$refs.suffix.offsetWidth) {
+				this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
+			}
+		}
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		},
+		chooseFile() {
+			this.$refs.file.click();
+		},
+		onChangeFile() {
+			this.v = Array.from((this.$refs.file as any).files);
+			this.$emit('input', this.v);
+			this.$emit('change', this.v);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark, fill)
+	margin 32px 0
+
+	> .icon
+		position absolute
+		top 0
+		left 0
+		width 24px
+		text-align center
+		line-height 32px
+		color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+
+		&:not(:empty) + .input
+			margin-left 28px
+
+	> .input
+
+		if !fill
+			&:before
+				content ''
+				display block
+				position absolute
+				bottom 0
+				left 0
+				right 0
+				height 1px
+				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+
+			&:after
+				content ''
+				display block
+				position absolute
+				bottom 0
+				left 0
+				right 0
+				height 2px
+				background $theme-color
+				opacity 0
+				transform scaleX(0.12)
+				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+				will-change border opacity transform
+
+		> .password-meter
+			position absolute
+			top 0
+			left 0
+			width 100%
+			height 100%
+			border-radius 6px
+			overflow hidden
+			opacity 0.3
+
+			&[data-strength='']
+				display none
+
+			&[data-strength='low']
+				> .value
+					background #d73612
+
+			&[data-strength='medium']
+				> .value
+					background #d7ca12
+
+			&[data-strength='high']
+				> .value
+					background #61bb22
+
+			> .value
+				display block
+				width 0%
+				height 100%
+				background transparent
+				border-radius 6px
+				transition all 0.1s ease
+
+		> .label
+			position absolute
+			z-index 1
+			top fill ? 6px : 0
+			left 0
+			pointer-events none
+			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
+			transition-duration 0.3s
+			font-size 16px
+			line-height 32px
+			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			pointer-events none
+			//will-change transform
+			transform-origin top left
+			transform scale(1)
+
+		> input
+			display block
+			width 100%
+			margin 0
+			padding 0
+			font inherit
+			font-weight fill ? bold : normal
+			font-size 16px
+			line-height 32px
+			color isDark ? #fff : #000
+			background transparent
+			border none
+			border-radius 0
+			outline none
+			box-shadow none
+
+			if fill
+				padding 6px 12px
+				background rgba(#000, 0.035)
+				border-radius 6px
+
+			&[type='file']
+				display none
+
+		> .prefix
+		> .suffix
+			display block
+			position absolute
+			z-index 1
+			top 0
+			font-size 16px
+			line-height fill ? 44px : 32px
+			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			pointer-events none
+
+			&:empty
+				display none
+
+			> *
+				display block
+				min-width 16px
+				max-width 150px
+				overflow hidden
+				white-space nowrap
+				text-overflow ellipsis
+
+		> .prefix
+			left 0
+			padding-right 4px
+
+			if fill
+				padding-left 12px
+
+		> .suffix
+			right 0
+			padding-left 4px
+
+			if fill
+				padding-right 12px
+
+	> .text
+		margin 6px 0
+		font-size 13px
+
+		*
+			margin 0
+
+	&.focused
+		> .input
+			if fill
+				background rgba(#000, 0.05)
+			else
+				&:after
+					opacity 1
+					transform scaleX(1)
+
+			> .label
+				color $theme-color
+
+	&.focused
+	&.filled
+		> .input
+			> .label
+				top fill ? -24px : -17px
+				left 0 !important
+				transform scale(0.75)
+
+.ui-input[data-darkmode]
+	&.fill
+		root(true, true)
+	&:not(.fill)
+		root(true, false)
+
+.ui-input:not([data-darkmode])
+	&.fill
+		root(false, true)
+	&:not(.fill)
+		root(false, false)
+
+</style>

src/client/app/common/views/components/ui/radio.vue

@@ -0,0 +1,120 @@
+<template>
+<div
+	class="ui-radio"
+	:class="{ disabled, checked }"
+	:aria-checked="checked"
+	:aria-disabled="disabled"
+	@click="toggle"
+>
+	<input type="radio"
+		:disabled="disabled"
+	>
+	<span class="button">
+		<span></span>
+	</span>
+	<span class="label"><slot></slot></span>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	model: {
+		prop: 'model',
+		event: 'change'
+	},
+	props: {
+		model: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		checked(): boolean {
+			return this.model === this.value;
+		}
+	},
+	methods: {
+		toggle() {
+			this.$emit('change', this.value);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	display inline-block
+	margin 32px 32px 32px 0
+	cursor pointer
+	transition all 0.3s
+
+	> *
+		user-select none
+
+	&.disabled
+		opacity 0.6
+		cursor not-allowed
+
+	&.checked
+		> .button
+			border-color $theme-color
+
+			&:after
+				background-color $theme-color
+				transform scale(1)
+				opacity 1
+
+	> input
+		position absolute
+		width 0
+		height 0
+		opacity 0
+		margin 0
+
+	> .button
+		position absolute
+		width 20px
+		height 20px
+		background none
+		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		border-radius 100%
+		transition inherit
+
+		&:after
+			content ''
+			display block
+			position absolute
+			top 3px
+			right 3px
+			bottom 3px
+			left 3px
+			border-radius 100%
+			opacity 0
+			transform scale(0)
+			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
+
+	> .label
+		margin-left 28px
+		display block
+		font-size 16px
+		line-height 20px
+		cursor pointer
+
+.ui-radio[data-darkmode]
+	root(true)
+
+.ui-radio:not([data-darkmode])
+	root(false)
+
+</style>

src/client/app/common/views/components/ui/select.vue

@@ -0,0 +1,215 @@
+<template>
+<div class="ui-select" :class="[{ focused, filled }, styl]">
+	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div class="input" @click="focus">
+		<span class="label" ref="label"><slot name="label"></slot></span>
+		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+		<select ref="input"
+				:value="v"
+				:required="required"
+				@input="$emit('input', $event.target.value)"
+				@focus="focused = true"
+				@blur="focused = false">
+			<slot></slot>
+		</select>
+		<div class="suffix"><slot name="suffix"></slot></div>
+	</div>
+	<div class="text"><slot name="text"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	data() {
+		return {
+			v: this.value,
+			focused: false,
+			styl: 'fill'
+		};
+	},
+	computed: {
+		filled(): boolean {
+			return this.v != '' && this.v != null;
+		}
+	},
+	watch: {
+		value(v) {
+			this.v = v;
+		}
+	},
+	inject: {
+		isCardChild: { default: false }
+	},
+	created() {
+		if (this.isCardChild) {
+			this.styl = 'line';
+		}
+	},
+	mounted() {
+		if (this.$refs.prefix) {
+			this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
+		}
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark, fill)
+	margin 32px 0
+
+	> .icon
+		position absolute
+		top 0
+		left 0
+		width 24px
+		text-align center
+		line-height 32px
+		color rgba(#000, 0.54)
+
+		&:not(:empty) + .input
+			margin-left 28px
+
+	> .input
+		display flex
+
+		if fill
+			padding 6px 12px
+			background rgba(#000, 0.035)
+			border-radius 6px
+		else
+			&:before
+				content ''
+				display block
+				position absolute
+				bottom 0
+				left 0
+				right 0
+				height 1px
+				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+
+			&:after
+				content ''
+				display block
+				position absolute
+				bottom 0
+				left 0
+				right 0
+				height 2px
+				background $theme-color
+				opacity 0
+				transform scaleX(0.12)
+				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+				will-change border opacity transform
+
+		> .label
+			position absolute
+			top fill ? 6px : 0
+			left 0
+			pointer-events none
+			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
+			transition-duration 0.3s
+			font-size 16px
+			line-height 32px
+			color rgba(#000, 0.54)
+			pointer-events none
+			//will-change transform
+			transform-origin top left
+			transform scale(1)
+
+		> select
+			display block
+			flex 1
+			width 100%
+			padding 0
+			font inherit
+			font-weight fill ? bold : normal
+			font-size 16px
+			height 32px
+			color isDark ? #fff : #000
+			background transparent
+			border none
+			border-radius 0
+			outline none
+			box-shadow none
+
+			*
+				color #000
+
+		> .prefix
+		> .suffix
+			display block
+			align-self center
+			justify-self center
+			font-size 16px
+			line-height 32px
+			color rgba(#000, 0.54)
+			pointer-events none
+
+			> *
+				display block
+				min-width 16px
+
+		> .prefix
+			padding-right 4px
+
+		> .suffix
+			padding-left 4px
+
+	> .text
+		margin 6px 0
+		font-size 13px
+
+		*
+			margin 0
+
+	&.focused
+		> .input
+			if fill
+				background rgba(#000, 0.05)
+			else
+				&:after
+					opacity 1
+					transform scaleX(1)
+
+			> .label
+				color $theme-color
+
+	&.focused
+	&.filled
+		> .input
+			> .label
+				top fill ? -24px : -17px
+				left 0 !important
+				transform scale(0.75)
+
+.ui-select[data-darkmode]
+	&.fill
+		root(true, true)
+	&:not(.fill)
+		root(true, false)
+
+.ui-select:not([data-darkmode])
+	&.fill
+		root(false, true)
+	&:not(.fill)
+		root(false, false)
+
+</style>

src/client/app/common/views/components/ui/switch.vue

@@ -0,0 +1,135 @@
+<template>
+<div
+	class="ui-switch"
+	:class="{ disabled, checked }"
+	role="switch"
+	:aria-checked="checked"
+	:aria-disabled="disabled"
+	@click="toggle"
+>
+	<input
+		type="checkbox"
+		ref="input"
+		:disabled="disabled"
+		@keydown.enter="toggle"
+	>
+	<span class="button">
+		<span></span>
+	</span>
+	<span class="label">
+		<span :aria-hidden="!checked"><slot></slot></span>
+		<p :aria-hidden="!checked">
+			<slot name="text"></slot>
+		</p>
+	</span>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	model: {
+		prop: 'value',
+		event: 'change'
+	},
+	props: {
+		value: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		checked(): boolean {
+			return this.value;
+		}
+	},
+	methods: {
+		toggle() {
+			this.$emit('change', !this.checked);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	display flex
+	margin 32px 0
+	cursor pointer
+	transition all 0.3s
+
+	> *
+		user-select none
+
+	&.disabled
+		opacity 0.6
+		cursor not-allowed
+
+	&.checked
+		> .button
+			background-color rgba($theme-color, 0.4)
+			border-color rgba($theme-color, 0.4)
+
+			> *
+				background-color $theme-color
+				transform translateX(14px)
+
+	> input
+		position absolute
+		width 0
+		height 0
+		opacity 0
+		margin 0
+
+	> .button
+		display inline-block
+		margin 3px 0 0 0
+		width 34px
+		height 14px
+		background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
+		outline none
+		border-radius 14px
+		transition inherit
+
+		> *
+			position absolute
+			top -3px
+			left 0
+			border-radius 100%
+			transition background-color 0.3s, transform 0.3s
+			width 20px
+			height 20px
+			background-color #fff
+			box-shadow 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12)
+
+	> .label
+		margin-left 8px
+		display block
+		font-size 16px
+		cursor pointer
+		transition inherit
+
+		> span
+			display block
+			line-height 20px
+			color isDark ? #c4ccd2 : rgba(#000, 0.75)
+			transition inherit
+
+		> p
+			margin 0
+			//font-size 90%
+			color isDark ? #78858e : #9daab3
+
+.ui-switch[data-darkmode]
+	root(true)
+
+.ui-switch:not([data-darkmode])
+	root(false)
+
+</style>

src/client/app/common/views/components/ui/textarea.vue

@@ -0,0 +1,174 @@
+<template>
+<div class="ui-textarea" :class="{ focused, filled }">
+	<div class="input">
+		<span class="label" ref="label"><slot></slot></span>
+		<textarea ref="input"
+				:value="value"
+				:required="required"
+				:readonly="readonly"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				@input="$emit('input', $event.target.value)"
+				@focus="focused = true"
+				@blur="focused = false">
+		</textarea>
+	</div>
+	<div class="text"><slot name="text"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+const getPasswordStrength = require('syuilo-password-strength');
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		pattern: {
+			type: String,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		}
+	},
+	data() {
+		return {
+			focused: false,
+			passwordStrength: ''
+		}
+	},
+	computed: {
+		filled(): boolean {
+			return this.value != '' && this.value != null;
+		}
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark, fill)
+	margin 42px 0 32px 0
+
+	> .input
+		padding 12px
+
+		if fill
+			background rgba(#000, 0.035)
+			border-radius 6px
+		else
+			&:before
+				content ''
+				display block
+				position absolute
+				top 0
+				bottom 0
+				left 0
+				right 0
+				background none
+				border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				border-radius 3px
+				pointer-events none
+
+			&:after
+				content ''
+				display block
+				position absolute
+				top 0
+				bottom 0
+				left 0
+				right 0
+				background none
+				border solid 2px $theme-color
+				border-radius 3px
+				opacity 0
+				transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+				pointer-events none
+
+		> .label
+			position absolute
+			top 6px
+			left 12px
+			pointer-events none
+			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
+			transition-duration 0.3s
+			font-size 16px
+			line-height 32px
+			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			pointer-events none
+			//will-change transform
+			transform-origin top left
+			transform scale(1)
+
+		> textarea
+			display block
+			width 100%
+			min-height 100px
+			padding 0
+			font inherit
+			font-weight fill ? bold : normal
+			font-size 16px
+			color isDark ? #fff : #000
+			background transparent
+			border none
+			border-radius 0
+			outline none
+			box-shadow none
+
+	> .text
+		margin 6px 0
+		font-size 13px
+
+		*
+			margin 0
+
+	&.focused
+		> .input
+			if fill
+				background rgba(#000, 0.05)
+			else
+				&:after
+					opacity 1
+
+			> .label
+				color $theme-color
+
+	&.focused
+	&.filled
+		> .input
+			> .label
+				top -24px
+				left 0 !important
+				transform scale(0.75)
+
+.ui-textarea[data-darkmode]
+	&.fill
+		root(true, true)
+	&:not(.fill)
+		root(true, false)
+
+.ui-textarea:not([data-darkmode])
+	&.fill
+		root(false, true)
+	&:not(.fill)
+		root(false, false)
+
+</style>

src/client/app/common/views/components/welcome-timeline.vue

@@ -109,6 +109,9 @@ root(isDark)
 					> .created-at
 						color isDark ? #606984 : #c0c0c0
 
+			> .text
+				text-align left
+
 .mk-welcome-timeline[data-darkmode]
 	root(true)
 

src/client/app/common/views/widgets/hashtags.chart.vue

@@ -49,7 +49,8 @@ export default Vue.extend({
 			polylinePoints: '',
 			polygonPoints: '',
 			headX: null,
-			headY: null
+			headY: null,
+			clock: null
 		};
 	},
 	watch: {
@@ -59,6 +60,12 @@ export default Vue.extend({
 	},
 	created() {
 		this.draw();
+
+		// Vueが何故かWatchを発動させない場合があるので
+		this.clock = setInterval(this.draw, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
 	},
 	methods: {
 		draw() {

src/client/app/common/views/widgets/hashtags.vue

@@ -5,7 +5,8 @@
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
 			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-			<div v-else>
+			<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
+			<transition-group v-else tag="div" name="chart">
 				<div v-for="stat in stats" :key="stat.tag">
 					<div class="tag">
 						<router-link :to="`/tags/${ stat.tag }`" :title="stat.tag">#{{ stat.tag }}</router-link>
@@ -13,7 +14,7 @@
 					</div>
 					<x-chart class="chart" :src="stat.chart"/>
 				</div>
-			</div>
+			</transition-group>
 		</div>
 	</mk-widget-container>
 </div>
@@ -65,8 +66,9 @@ export default define({
 root(isDark)
 	.mkw-hashtags--body
 		> .fetching
+		> .empty
 			margin 0
-			padding 12px 16px
+			padding 16px
 			text-align center
 			color #aaa
 
@@ -74,10 +76,13 @@ root(isDark)
 				margin-right 4px
 
 		> div
+			.chart-move
+				transition transform 1s ease
+
 			> div
 				display flex
 				align-items center
-				padding 16px
+				padding 14px 16px
 
 				&:not(:last-child)
 					border-bottom solid 1px isDark ? #393f4f : #eee

src/client/app/config.ts

@@ -1,6 +1,8 @@
 declare const _HOST_: string;
 declare const _HOSTNAME_: string;
 declare const _URL_: string;
+declare const _NAME_: string;
+declare const _DESCRIPTION_: string;
 declare const _API_URL_: string;
 declare const _WS_URL_: string;
 declare const _DOCS_URL_: string;
@@ -17,10 +19,13 @@ declare const _VERSION_: string;
 declare const _CODENAME_: string;
 declare const _LICENSE_: string;
 declare const _GOOGLE_MAPS_API_KEY_: string;
+declare const _WELCOME_BG_URL_: string;
 
 export const host = _HOST_;
 export const hostname = _HOSTNAME_;
 export const url = _URL_;
+export const name = _NAME_;
+export const description = _DESCRIPTION_;
 export const apiUrl = _API_URL_;
 export const wsUrl = _WS_URL_;
 export const docsUrl = _DOCS_URL_;
@@ -37,3 +42,4 @@ export const version = _VERSION_;
 export const codename = _CODENAME_;
 export const license = _LICENSE_;
 export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;
+export const welcomeBgUrl = _WELCOME_BG_URL_;

src/client/app/desktop/api/choose-drive-file.ts

@@ -21,7 +21,7 @@ export default (os: OS) => opts => {
 				res(file);
 			};
 
-			window.open(url + '/selectdrive',
+			window.open(url + `/selectdrive?multiple=${o.multiple}`,
 				'choose_drive_window',
 				'height=500, width=800');
 		}

src/client/app/desktop/script.ts

@@ -34,7 +34,8 @@ import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
 import MkTag from './views/pages/tag.vue';
-import MkOthello from './views/pages/othello.vue';
+import MkReversi from './views/pages/reversi.vue';
+import MkShare from './views/pages/share.vue';
 
 /**
  * init
@@ -62,8 +63,9 @@ init(async (launch) => {
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
-			{ path: '/othello', component: MkOthello },
-			{ path: '/othello/:game', component: MkOthello },
+			{ path: '/share', component: MkShare },
+			{ path: '/reversi', component: MkReversi },
+			{ path: '/reversi/:game', component: MkReversi },
 			{ path: '/@:user', component: MkUser },
 			{ path: '/notes/:note', component: MkNote }
 		]
@@ -164,8 +166,8 @@ function registerNotifications(stream: HomeStreamManager) {
 			setTimeout(n.close.bind(n), 7000);
 		});
 
-		connection.on('othello_invited', matching => {
-			const _n = composeNotification('othello_invited', matching);
+		connection.on('reversi_invited', matching => {
+			const _n = composeNotification('reversi_invited', matching);
 			const n = new Notification(_n.title, {
 				body: _n.body,
 				icon: _n.icon

src/client/app/desktop/views/components/drive.file.vue

@@ -145,7 +145,7 @@ export default Vue.extend({
 				(this as any).api('drive/files/update', {
 					fileId: this.file.id,
 					name: name
-				})
+				});
 			});
 		},
 
@@ -173,7 +173,9 @@ export default Vue.extend({
 		},
 
 		deleteFile() {
-			alert('not implemented yet');
+			(this as any).api('drive/files/delete', {
+				fileId: this.file.id
+			});
 		}
 	}
 });

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

@@ -118,6 +118,7 @@ export default Vue.extend({
 
 		this.connection.on('file_created', this.onStreamDriveFileCreated);
 		this.connection.on('file_updated', this.onStreamDriveFileUpdated);
+		this.connection.on('file_deleted', this.onStreamDriveFileDeleted);
 		this.connection.on('folder_created', this.onStreamDriveFolderCreated);
 		this.connection.on('folder_updated', this.onStreamDriveFolderUpdated);
 
@@ -130,6 +131,7 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('file_created', this.onStreamDriveFileCreated);
 		this.connection.off('file_updated', this.onStreamDriveFileUpdated);
+		this.connection.off('file_deleted', this.onStreamDriveFileDeleted);
 		this.connection.off('folder_created', this.onStreamDriveFolderCreated);
 		this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
 		(this as any).os.streams.driveStream.dispose(this.connectionId);
@@ -167,6 +169,10 @@ export default Vue.extend({
 			}
 		},
 
+		onStreamDriveFileDeleted(fileId) {
+			this.removeFile(fileId);
+		},
+
 		onStreamDriveFolderCreated(folder) {
 			this.addFolder(folder, true);
 		},

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

@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
 	<span slot="header" :class="$style.header">%fa:gamepad%%i18n:@game%</span>
-	<mk-othello :class="$style.content" @gamed="g => game = g"/>
+	<mk-reversi :class="$style.content" @gamed="g => game = g"/>
 </mk-window>
 </template>
 
@@ -18,8 +18,8 @@ export default Vue.extend({
 	computed: {
 		popout(): string {
 			return this.game
-				? `${url}/othello/${this.game.id}`
-				: `${url}/othello`;
+				? `${url}/reversi/${this.game.id}`
+				: `${url}/reversi`;
 		}
 	}
 });

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

@@ -84,7 +84,7 @@ const defaultDesktopHomeWidgets = {
 		'calendar',
 		'activity',
 		'rss',
-		'trends',
+		'hashtags',
 		'photo-stream',
 		'version'
 	],

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

@@ -50,6 +50,7 @@ import * as XDraggable from 'vuedraggable';
 import getKao from '../../../common/scripts/get-kao';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import parse from '../../../../../text/parse';
+import { host } from '../../../config';
 
 export default Vue.extend({
 	components: {
@@ -57,7 +58,25 @@ export default Vue.extend({
 		MkVisibilityChooser
 	},
 
-	props: ['reply', 'renote'],
+	props: {
+		reply: {
+			type: Object,
+			required: false
+		},
+		renote: {
+			type: Object,
+			required: false
+		},
+		initialText: {
+			type: String,
+			required: false
+		},
+		instant: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
 
 	data() {
 		return {
@@ -117,6 +136,10 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		if (this.initialText) {
+			this.text = this.initialText;
+		}
+
 		if (this.reply && this.reply.user.host != null) {
 			this.text = `@${this.reply.user.username}@${this.reply.user.host} `;
 		}
@@ -129,6 +152,7 @@ export default Vue.extend({
 
 				// 自分は除外
 				if (this.$store.state.i.username == x.username && x.host == null) return;
+				if (this.$store.state.i.username == x.username && x.host == host) return;
 
 				// 重複は除外
 				if (this.text.indexOf(`${mention} `) != -1) return;
@@ -139,17 +163,19 @@ export default Vue.extend({
 
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
-			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
-			if (draft) {
-				this.text = draft.data.text;
-				this.files = draft.data.files;
-				if (draft.data.poll) {
-					this.poll = true;
-					this.$nextTick(() => {
-						(this.$refs.poll as any).set(draft.data.poll);
-					});
+			if (!this.instant) {
+				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
+				if (draft) {
+					this.text = draft.data.text;
+					this.files = draft.data.files;
+					if (draft.data.poll) {
+						this.poll = true;
+						this.$nextTick(() => {
+							(this.$refs.poll as any).set(draft.data.poll);
+						});
+					}
+					this.$emit('change-attached-media', this.files);
 				}
-				this.$emit('change-attached-media', this.files);
 			}
 
 			this.$nextTick(() => this.watch());
@@ -347,6 +373,8 @@ export default Vue.extend({
 		},
 
 		saveDraft() {
+			if (this.instant) return;
+
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
 			data[this.draftId] = {

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

@@ -45,6 +45,7 @@
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 				<mk-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons" text="%i18n:@circle-icons%"/>
 				<mk-switch v-model="$store.state.settings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="%i18n:@gradient-window-header%"/>
+				<mk-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi" text="%i18n:common.i-like-sushi%"/>
 			</div>
 			<mk-switch v-model="$store.state.settings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
 			<mk-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget" text="%i18n:@show-reply-target%"/>
@@ -362,6 +363,12 @@ export default Vue.extend({
 				value: v
 			});
 		},
+		onChangeILikeSushi(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'iLikeSushi',
+				value: v
+			});
+		},
 		onChangeGradientWindowHeader(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'gradientWindowHeader',

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

@@ -56,23 +56,23 @@ export default Vue.extend({
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('othello_invited', this.onOthelloInvited);
-			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('othello_invited', this.onOthelloInvited);
-			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.off('reversi_invited', this.onReversiInvited);
+			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {
-		onOthelloInvited() {
+		onReversiInvited() {
 			this.hasGameInvitations = true;
 		},
 
-		onOthelloNoInvites() {
+		onReversiNoInvites() {
 			this.hasGameInvitations = false;
 		},
 

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

@@ -5,7 +5,7 @@
 	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
 		<template v-if="edit">
 			<header>
-				<select v-model="widgetAdderSelected">
+				<select v-model="widgetAdderSelected" @change="addWidget">
 					<option value="profile">%i18n:common.widgets.profile%</option>
 					<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
 					<option value="calendar">%i18n:common.widgets.calendar%</option>
@@ -30,20 +30,15 @@
 					<option value="nav">%i18n:common.widgets.nav%</option>
 					<option value="tips">%i18n:common.widgets.tips%</option>
 				</select>
-				<button @click="addWidget">%i18n:@add%</button>
 			</header>
 			<x-draggable
 				:list="column.widgets"
-				:options="{ handle: '.handle', animation: 150 }"
+				:options="{ animation: 150 }"
 				@sort="onWidgetSort"
 			>
-				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id">
-					<header>
-						<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
-					</header>
-					<div @click="widgetFunc(widget.id)">
-						<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
-					</div>
+				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
+					<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
 				</div>
 			</x-draggable>
 		</template>
@@ -121,6 +116,8 @@ export default Vue.extend({
 					data: {}
 				}
 			});
+
+			this.widgetAdderSelected = null;
 		},
 
 		removeWidget(widget) {
@@ -142,6 +139,13 @@ export default Vue.extend({
 
 root(isDark)
 	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
+		> header
+			padding 16px
+
+			> *
+				width 100%
+				padding 4px
+
 		.widget, .customize-container
 			margin 8px
 
@@ -149,7 +153,21 @@ root(isDark)
 				margin-top 0
 
 		.customize-container
-			background #fff
+			cursor move
+
+			> *:not(.remove)
+				pointer-events none
+
+			> .remove
+				position absolute
+				z-index 1
+				top 8px
+				right 8px
+				width 32px
+				height 32px
+				color #fff
+				background rgba(#000, 0.7)
+				border-radius 4px
 
 		> header
 			color isDark ? #fff : #000

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

@@ -1,6 +1,6 @@
 <template>
 <component :is="ui ? 'mk-ui' : 'div'">
-	<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
+	<mk-reversi v-if="!fetching" :init-game="game" @gamed="onGamed"/>
 </component>
 </template>
 
@@ -33,7 +33,7 @@ export default Vue.extend({
 			Progress.start();
 			this.fetching = true;
 
-			(this as any).api('othello/games/show', {
+			(this as any).api('reversi/games/show', {
 				gameId: this.$route.params.game
 			}).then(game => {
 				this.game = game;
@@ -43,7 +43,7 @@ export default Vue.extend({
 			});
 		},
 		onGamed(game) {
-			history.pushState(null, null, '/othello/' + game.id);
+			history.pushState(null, null, '/reversi/' + game.id);
 		}
 	}
 });

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

@@ -0,0 +1,58 @@
+<template>
+<div class="pptjhabgjtt7kwskbfv4y3uml6fpuhmr">
+	<h1>Misskeyで共有</h1>
+	<div>
+		<mk-signin v-if="!$store.getters.isSignedIn"/>
+		<mk-post-form v-else-if="!posted" :initial-text="text" :instant="true" @posted="posted = true"/>
+		<p v-if="posted" class="posted">%fa:check%</p>
+	</div>
+	<button v-if="posted" class="ui button" @click="close">閉じる</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			posted: false,
+			text: new URLSearchParams(location.search).get('text')
+		};
+	},
+	methods: {
+		close() {
+			window.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.pptjhabgjtt7kwskbfv4y3uml6fpuhmr
+	padding 16px
+
+	> h1
+		margin 0 0 8px 0
+		color #555
+		font-size 20px
+		text-align center
+
+	> div
+		max-width 500px
+		margin 0 auto
+		background #fff
+		border solid 1px rgba(#000, 0.1)
+		border-radius 6px
+		overflow hidden
+
+		> .posted
+			display block
+			margin 0
+			padding 64px
+			text-align center
+
+	> button
+		display block
+		margin 16px auto
+</style>

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

@@ -1,59 +1,80 @@
 <template>
 <div class="mk-welcome">
+	<img ref="pointer" class="pointer" src="/assets/pointer.png" alt="">
 	<button @click="dark">
 		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
 		<template v-else>%fa:R moon%</template>
 	</button>
-	<main v-if="about" class="about">
-		<article>
-			<h1>%i18n:common.about-title%</h1>
-			<p v-html="'%i18n:common.about%'"></p>
-			<span class="gotit" @click="about = false">%i18n:@gotit%</span>
-		</article>
-	</main>
-	<main v-else class="index">
-		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
-		<p class="desc"><b>%i18n:common.misskey%</b> - <span @click="about = true">%i18n:@about%</span></p>
-		<p class="account">
-			<button class="signup" @click="signup">%i18n:@signup-button%</button>
-			<button class="signin" @click="signin">%i18n:@signin-button%</button>
-		</p>
-
-		<div class="tl">
-			<header>%fa:comments R% %i18n:@timeline%<div><span></span><span></span><span></span></div></header>
-			<mk-welcome-timeline/>
+	<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
+		<div class="container">
+			<main>
+				<div class="about">
+					<h1 v-if="name">{{ name }}</h1>
+					<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"></h1>
+					<p class="powerd-by" v-if="name">powerd by <b>Misskey</b></p>
+					<p class="desc" v-html="description || '%i18n:common.about%'"></p>
+					<a ref="signup" @click="signup">📦 %i18n:@signup%</a>
+				</div>
+				<div class="login">
+					<mk-signin/>
+				</div>
+			</main>
+			<div class="info">
+				<span>%i18n:common.misskey% <b>{{ host }}</b></span>
+				<span class="stats" v-if="stats">
+					<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
+					<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
+				</span>
+			</div>
+			<mk-nav class="nav"/>
 		</div>
-	</main>
-	<mk-forkit/>
-	<footer>
-		<div>
-			<mk-nav :class="$style.nav"/>
-			<p class="c">{{ copyright }}</p>
-		</div>
-	</footer>
+		<mk-forkit class="forkit"/>
+		<img src="assets/title.dark.svg" alt="Misskey">
+	</div>
+	<div class="tl">
+		<mk-welcome-timeline/>
+	</div>
 	<modal name="signup" width="500px" height="auto" scrollable>
 		<header :class="$style.signupFormHeader">%i18n:@signup%</header>
 		<mk-signup :class="$style.signupForm"/>
 	</modal>
-	<modal name="signin" width="500px" height="auto" scrollable>
-		<header :class="$style.signinFormHeader">%i18n:@signin%</header>
-		<mk-signin :class="$style.signinForm"/>
-	</modal>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { copyright } from '../../../config';
+import { host, name, description, copyright, welcomeBgUrl } from '../../../config';
 
 export default Vue.extend({
 	data() {
 		return {
-			about: false,
-			copyright
+			stats: null,
+			copyright,
+			welcomeBgUrl,
+			host,
+			name,
+			description,
+			pointerInterval: null
 		};
 	},
+	created() {
+		(this as any).api('stats').then(stats => {
+			this.stats = stats;
+		});
+	},
+	mounted() {
+		this.point();
+		this.pointerInterval = setInterval(this.point, 100);
+	},
+	beforeDestroy() {
+		clearInterval(this.pointerInterval);
+	},
 	methods: {
+		point() {
+			const x = this.$refs.signup.getBoundingClientRect();
+			this.$refs.pointer.style.top = x.top + x.height + 'px';
+			this.$refs.pointer.style.left = x.left + 'px';
+		},
 		signup() {
 			this.$modal.show('signup');
 		},
@@ -80,13 +101,20 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
-
 root(isDark)
+	display flex
 	min-height 100vh
-	background-image isDark ? url('/assets/welcome-bg.dark.svg') : url('/assets/welcome-bg.light.svg')
-	background-size cover
-	background-position center
+
+	> .pointer
+		display block
+		position absolute
+		z-index 1
+		top 0
+		right 0
+		width 180px
+		margin 0 0 0 -180px
+		transform rotateY(180deg) translateX(-10px) translateY(-48px)
+		pointer-events none
 
 	> button
 		position fixed
@@ -95,140 +123,117 @@ root(isDark)
 		left 0
 		padding 16px
 		font-size 18px
-		color isDark ? #fff : #555
+		color #fff
 
-	> main
+		display none // TODO
+
+	> .body
 		flex 1
 		padding 64px 0 0 0
 		text-align center
+		background #578394
+		background-position center
+		background-size cover
 
-		&.about
-			font-family 'Noto Sans JP'
-			color isDark ? #fff : #627574
+		&:before
+			content ''
+			display block
+			position absolute
+			top 0
+			left 0
+			right 0
+			bottom 0
+			background rgba(#000, 0.5)
 
-			> article
-				max-width 700px
-				margin 42px auto 0 auto
-				padding 64px 82px
-				background isDark ? #282C37 : #fff
-				box-shadow 0 8px 32px rgba(#000, 0.15)
+		> .forkit
+			position absolute
+			top 0
+			right 0
 
-				> h1
-					margin 0
-					font-weight 900
+		> img
+			position absolute
+			bottom 16px
+			right 16px
+			width 150px
 
-				> p
-					margin 20px 0
-					line-height 2em
+		> .container
+			$aboutWidth = 380px
+			$loginWidth = 340px
+			$width = $aboutWidth + $loginWidth
 
-				> .gotit
-					color $theme-color
-					cursor pointer
-
-					&:hover
-						text-decoration underline
-
-		&.index
-			color isDark ? #9aa4b3 : #555
-
-			> img
-				width 350px
-
-			> .desc
-				margin -12px 0 24px 0
-				color isDark ? #fff : #555
-
-				> span
-					color $theme-color
-					cursor pointer
-
-					&:hover
-						text-decoration underline
-
-			> .account
-				margin 8px 0
-				line-height 2em
-
-				button
-					padding 8px 16px
-					font-size inherit
-
-				.signup
-					color $theme-color
-					border solid 2px $theme-color
-					border-radius 4px
-
-					&:focus
-						box-shadow 0 0 0 3px rgba($theme-color, 0.2)
-
-					&:hover
-						color $theme-color-foreground
-						background $theme-color
-
-					&:active
-						color $theme-color-foreground
-						background darken($theme-color, 10%)
-						border-color darken($theme-color, 10%)
-
-				.signin
-					&:hover
-						color isDark ? #fff : #000
-
-			> .tl
-				margin 32px auto 0 auto
-				width 410px
-				text-align left
-				background isDark ? #313543 : #fff
+			> main
+				display flex
+				margin auto
+				width $width
 				border-radius 8px
-				box-shadow 0 8px 32px rgba(#000, 0.15)
 				overflow hidden
+				box-shadow 0 2px 8px rgba(#000, 0.3)
 
-				> header
-					z-index 1
-					padding 12px 16px
-					color isDark ? #e3e5e8 : #888d94
-					box-shadow 0 1px 0px rgba(#000, 0.1)
+				> .about
+					width $aboutWidth
+					color #444
+					background #fff
 
-					> div
-						position absolute
-						top 0
-						right 0
-						padding inherit
+					> h1
+						margin 0 0 16px 0
+						padding 32px 32px 0 32px
+						color #444
 
-						> span
-							display inline-block
-							height 11px
-							width 11px
-							margin-left 6px
-							border-radius 100%
-							vertical-align middle
+						> img
+							width 170px
+							vertical-align bottom
 
-							&:nth-child(1)
-								background #5BCC8B
+					> .powerd-by
+						margin 16px
+						opacity 0.7
 
-							&:nth-child(2)
-								background #E6BB46
+					> .desc
+						margin 0
+						padding 0 32px 16px 32px
 
-							&:nth-child(3)
-								background #DF7065
+					> a
+						display inline-block
+						margin 0 0 32px 0
+						font-weight bold
 
-				> .mk-welcome-timeline
-					max-height 350px
-					overflow auto
+				> .login
+					width $loginWidth
+					padding 16px 32px 32px 32px
+					background #f5f5f5
 
-	> footer
-		font-size 12px
-		color isDark ? #949ea5 : #737c82
+			> .info
+				margin 16px auto
+				padding 12px
+				width $width
+				font-size 14px
+				color #fff
+				background rgba(#000, 0.2)
+				border-radius 8px
 
-		> div
-			margin 0 auto
-			padding 64px
-			text-align center
+				> .stats
+					margin-left 16px
+					padding-left 16px
+					border-left solid 1px #fff
 
-			> .c
-				margin 16px 0 0 0
-				font-size 10px
-				opacity 0.7
+					> *
+						margin-right 16px
+
+			> .nav
+				display block
+				margin 16px 0
+				font-size 14px
+				color #fff
+
+	> .tl
+		margin 0
+		width 410px
+		height 100vh
+		text-align left
+		background isDark ? #313543 : #fff
+
+		> *
+			max-height 100%
+			overflow auto
 
 .mk-welcome[data-darkmode]
 	root(true)

src/client/app/mios.ts

@@ -11,7 +11,7 @@ import { DriveStreamManager } from './common/scripts/streaming/drive';
 import { ServerStatsStreamManager } from './common/scripts/streaming/server-stats';
 import { NotesStatsStreamManager } from './common/scripts/streaming/notes-stats';
 import { MessagingIndexStreamManager } from './common/scripts/streaming/messaging-index';
-import { OthelloStreamManager } from './common/scripts/streaming/othello';
+import { ReversiStreamManager } from './common/scripts/streaming/reversi';
 
 import Err from './common/views/components/connect-failed.vue';
 import { LocalTimelineStreamManager } from './common/scripts/streaming/local-timeline';
@@ -108,7 +108,7 @@ export default class MiOS extends EventEmitter {
 		serverStatsStream: ServerStatsStreamManager;
 		notesStatsStream: NotesStatsStreamManager;
 		messagingIndexStream: MessagingIndexStreamManager;
-		othelloStream: OthelloStreamManager;
+		reversiStream: ReversiStreamManager;
 	} = {
 		localTimelineStream: null,
 		globalTimelineStream: null,
@@ -116,7 +116,7 @@ export default class MiOS extends EventEmitter {
 		serverStatsStream: null,
 		notesStatsStream: null,
 		messagingIndexStream: null,
-		othelloStream: null
+		reversiStream: null
 	};
 
 	/**
@@ -233,7 +233,7 @@ export default class MiOS extends EventEmitter {
 			this.streams.globalTimelineStream = new GlobalTimelineStreamManager(this, this.store.state.i);
 			this.streams.driveStream = new DriveStreamManager(this, this.store.state.i);
 			this.streams.messagingIndexStream = new MessagingIndexStreamManager(this, this.store.state.i);
-			this.streams.othelloStream = new OthelloStreamManager(this, this.store.state.i);
+			this.streams.reversiStream = new ReversiStreamManager(this, this.store.state.i);
 		});
 		//#endregion
 

src/client/app/mobile/api/post.ts

@@ -18,7 +18,7 @@ export default (os) => (opts) => {
 		}
 	}).$mount();
 	vm.$once('cancel', recover);
-	vm.$once('note', recover);
+	vm.$once('posted', recover);
 	document.body.appendChild(vm.$el);
 	(vm as any).focus();
 };

src/client/app/mobile/script.ts

@@ -2,17 +2,11 @@
  * Mobile Client
  */
 
-import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader, MdDialog, MdDialogAlert, MdRadio } from 'vue-material/dist/components';
-import 'vue-material/dist/vue-material.min.css';
-import 'vue-material/dist/theme/default.css';
-
 // Style
 import './style.styl';
 import '../../element.scss';
-import '../../md.scss';
 
 import init from '../init';
 
@@ -41,18 +35,9 @@ import MkFavorites from './views/pages/favorites.vue';
 import MkUserLists from './views/pages/user-lists.vue';
 import MkUserList from './views/pages/user-list.vue';
 import MkSettings from './views/pages/settings.vue';
-import MkOthello from './views/pages/othello.vue';
-
-Vue.use(MdCard);
-Vue.use(MdButton);
-Vue.use(MdField);
-Vue.use(MdMenu);
-Vue.use(MdList);
-Vue.use(MdSwitch);
-Vue.use(MdSubheader);
-Vue.use(MdDialog);
-Vue.use(MdDialogAlert);
-Vue.use(MdRadio);
+import MkReversi from './views/pages/reversi.vue';
+import MkTag from './views/pages/tag.vue';
+import MkShare from './views/pages/share.vue';
 
 /**
  * init
@@ -88,8 +73,10 @@ init((launch) => {
 			{ path: '/i/drive/file/:file', component: MkDrive },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
-			{ path: '/othello', name: 'othello', component: MkOthello },
-			{ path: '/othello/:game', component: MkOthello },
+			{ path: '/tags/:tag', component: MkTag },
+			{ path: '/share', component: MkShare },
+			{ path: '/reversi', name: 'reversi', component: MkReversi },
+			{ path: '/reversi/:game', component: MkReversi },
 			{ path: '/@:user', component: MkUser },
 			{ path: '/@:user/followers', component: MkFollowers },
 			{ path: '/@:user/following', component: MkFollowing },

src/client/app/mobile/style.styl

@@ -10,9 +10,6 @@ html
 	height 100%
 	background #ececed !important
 
-	// for md
-	transition none !important
-
 	&[data-darkmode]
 		background #191B22 !important
 

src/client/app/mobile/views/components/drive.file-detail.vue

@@ -34,15 +34,10 @@
 	</div>
 	<div class="menu">
 		<div>
-			<a :href="`${file.url}?download`" :download="file.name">
-				%fa:download%%i18n:@download%
-			</a>
-			<button @click="rename">
-				%fa:pencil-alt%%i18n:@rename%
-			</button>
-			<button @click="move">
-				%fa:R folder-open%%i18n:@move%
-			</button>
+			<a :href="`${file.url}?download`" :download="file.name">%fa:download%%i18n:@download%</a>
+			<button @click="rename">%fa:pencil-alt%%i18n:@rename%</button>
+			<button @click="move">%fa:R folder-open%%i18n:@move%</button>
+			<button @click="del">%fa:trash-alt R%%i18n:@delete%</button>
 		</div>
 	</div>
 	<div class="exif" v-show="exif">
@@ -112,6 +107,13 @@ export default Vue.extend({
 				});
 			});
 		},
+		del() {
+			(this as any).api('drive/files/delete', {
+				fileId: this.file.id
+			}).then(() => {
+				this.browser.cd(this.file.folderId, true);
+			});
+		},
 		showCreatedAt() {
 			alert(new Date(this.file.createdAt).toLocaleString());
 		},

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

@@ -100,6 +100,7 @@ export default Vue.extend({
 
 		this.connection.on('file_created', this.onStreamDriveFileCreated);
 		this.connection.on('file_updated', this.onStreamDriveFileUpdated);
+		this.connection.on('file_deleted', this.onStreamDriveFileDeleted);
 		this.connection.on('folder_created', this.onStreamDriveFolderCreated);
 		this.connection.on('folder_updated', this.onStreamDriveFolderUpdated);
 
@@ -118,6 +119,7 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('file_created', this.onStreamDriveFileCreated);
 		this.connection.off('file_updated', this.onStreamDriveFileUpdated);
+		this.connection.off('file_deleted', this.onStreamDriveFileDeleted);
 		this.connection.off('folder_created', this.onStreamDriveFolderCreated);
 		this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
 		(this as any).os.streams.driveStream.dispose(this.connectionId);
@@ -136,6 +138,10 @@ export default Vue.extend({
 			}
 		},
 
+		onStreamDriveFileDeleted(fileId) {
+			this.removeFile(fileId);
+		},
+
 		onStreamDriveFolderCreated(folder) {
 			this.addFolder(folder, true);
 		},

src/client/app/mobile/views/components/index.ts

@@ -22,6 +22,7 @@ import userTimeline from './user-timeline.vue';
 import userListTimeline from './user-list-timeline.vue';
 import activity from './activity.vue';
 import widgetContainer from './widget-container.vue';
+import postForm from './post-form.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-note', note);
@@ -45,3 +46,4 @@ Vue.component('mk-user-timeline', userTimeline);
 Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('mk-activity', activity);
 Vue.component('mk-widget-container', widgetContainer);
+Vue.component('mk-post-form', postForm);

src/client/app/mobile/views/components/post-form.vue

@@ -46,6 +46,7 @@ import * as XDraggable from 'vuedraggable';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import getKao from '../../../common/scripts/get-kao';
 import parse from '../../../../../text/parse';
+import { host } from '../../../config';
 
 export default Vue.extend({
 	components: {
@@ -53,7 +54,25 @@ export default Vue.extend({
 		MkVisibilityChooser
 	},
 
-	props: ['reply', 'renote'],
+	props: {
+		reply: {
+			type: Object,
+			required: false
+		},
+		renote: {
+			type: Object,
+			required: false
+		},
+		initialText: {
+			type: String,
+			required: false
+		},
+		instant: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
 
 	data() {
 		return {
@@ -111,6 +130,10 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		if (this.initialText) {
+			this.text = this.initialText;
+		}
+
 		if (this.reply && this.reply.user.host != null) {
 			this.text = `@${this.reply.user.username}@${this.reply.user.host} `;
 		}
@@ -123,6 +146,7 @@ export default Vue.extend({
 
 				// 自分は除外
 				if (this.$store.state.i.username == x.username && x.host == null) return;
+				if (this.$store.state.i.username == x.username && x.host == host) return;
 
 				// 重複は除外
 				if (this.text.indexOf(`${mention} `) != -1) return;
@@ -250,8 +274,10 @@ export default Vue.extend({
 				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
 				viaMobile: viaMobile
 			}).then(data => {
-				this.$emit('note');
-				this.$destroy();
+				this.$emit('posted');
+				this.$nextTick(() => {
+					this.$destroy();
+				});
 			}).catch(err => {
 				this.posting = false;
 			});

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

@@ -45,8 +45,8 @@ export default Vue.extend({
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('othello_invited', this.onOthelloInvited);
-			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 
 			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
 			const isHisasiburi = ago >= 3600;
@@ -98,16 +98,16 @@ export default Vue.extend({
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('othello_invited', this.onOthelloInvited);
-			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.off('reversi_invited', this.onReversiInvited);
+			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {
-		onOthelloInvited() {
+		onReversiInvited() {
 			this.hasGameInvitation = true;
 		},
-		onOthelloNoInvites() {
+		onReversiNoInvites() {
 			this.hasGameInvitation = false;
 		}
 	}

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

@@ -19,7 +19,7 @@
 					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotification">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li v-if="$store.getters.isSignedIn && $store.state.i.isLocked"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'">%fa:R envelope%%i18n:@follow-requests%<template v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount">%fa:circle%</template>%fa:angle-right%</router-link></li>
-					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/reversi" :data-active="$route.name == 'reversi'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
 					<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:R calendar-alt%%i18n:@widgets%%fa:angle-right%</router-link></li>
@@ -66,14 +66,14 @@ export default Vue.extend({
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('othello_invited', this.onOthelloInvited);
-			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('othello_invited', this.onOthelloInvited);
-			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.off('reversi_invited', this.onReversiInvited);
+			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
@@ -83,10 +83,10 @@ export default Vue.extend({
 			if (query == null || query == '') return;
 			this.$router.push('/search?q=' + encodeURIComponent(query));
 		},
-		onOthelloInvited() {
+		onReversiInvited() {
 			this.hasGameInvitation = true;
 		},
-		onOthelloNoInvites() {
+		onReversiNoInvites() {
 			this.hasGameInvitation = false;
 		},
 		dark() {

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

@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:gamepad%オセロ</span>
-	<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
+	<span slot="header">%fa:gamepad%リバーシ</span>
+	<mk-reversi v-if="!fetching" :init-game="game" @gamed="onGamed"/>
 </mk-ui>
 </template>
 
@@ -23,7 +23,7 @@ export default Vue.extend({
 		this.fetch();
 	},
 	mounted() {
-		document.title = 'Misskey オセロ';
+		document.title = 'Misskey リバーシ';
 		document.documentElement.style.background = '#fff';
 	},
 	methods: {
@@ -33,7 +33,7 @@ export default Vue.extend({
 			Progress.start();
 			this.fetching = true;
 
-			(this as any).api('othello/games/show', {
+			(this as any).api('reversi/games/show', {
 				gameId: this.$route.params.game
 			}).then(game => {
 				this.game = game;
@@ -43,7 +43,7 @@ export default Vue.extend({
 			});
 		},
 		onGamed(game) {
-			history.pushState(null, null, '/othello/' + game.id);
+			history.pushState(null, null, '/reversi/' + game.id);
 		}
 	}
 });

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

@@ -1,132 +1,85 @@
 <template>
 <mk-ui>
 	<span slot="header">%fa:cog%%i18n:@settings%</span>
-	<main>
-		<p v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></p>
+	<main :data-darkmode="$store.state.device.darkmode">
+		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div>
+
 		<div>
 			<x-profile/>
 
-			<md-card>
-				<md-card-header>
-					<div class="md-title">%fa:palette% %i18n:@design%</div>
-				</md-card-header>
+			<ui-card>
+				<div slot="title">%fa:palette% %i18n:@design%</div>
 
-				<md-card-content>
-					<div>
-						<md-switch v-model="darkmode">%i18n:@dark-mode%</md-switch>
-					</div>
+				<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
+				<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
+				<ui-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 
-					<div>
-						<md-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</md-switch>
-					</div>
+				<div>
+					<div>%i18n:@timeline%</div>
+					<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
+					<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
+					<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
+				</div>
 
-					<div>
-						<div class="md-body-2">%i18n:@timeline%</div>
+				<div>
+					<div>%i18n:@post-style%</div>
+					<ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio>
+					<ui-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</ui-radio>
+				</div>
+			</ui-card>
 
-						<div>
-							<md-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</md-switch>
-						</div>
+			<ui-card>
+				<div slot="title">%fa:cog% %i18n:@behavior%</div>
+				<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
+				<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
+				<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
+				<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
+				<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
+			</ui-card>
 
-						<div>
-							<md-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</md-switch>
-						</div>
+			<ui-card>
+				<div slot="title">%fa:language% %i18n:@lang%</div>
 
-						<div>
-							<md-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</md-switch>
-						</div>
-					</div>
+				<ui-select v-model="lang" placeholder="%i18n:@auto%">
+					<optgroup label="%i18n:@recommended%">
+						<option value="">%i18n:@auto%</option>
+					</optgroup>
 
-					<div>
-						<div class="md-body-2">%i18n:@post-style%</div>
+					<optgroup label="%i18n:@specify-language%">
+						<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+					</optgroup>
+				</ui-select>
+				<span>%fa:info-circle% %i18n:@lang-tip%</span>
+			</ui-card>
 
-						<md-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</md-radio>
-						<md-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</md-radio>
-					</div>
-				</md-card-content>
-			</md-card>
+			<ui-card>
+				<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
 
-			<md-card>
-				<md-card-header>
-					<div class="md-title">%fa:cog% %i18n:@behavior%</div>
-				</md-card-header>
+				<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
+				<p>
+					<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a>
+					<span v-if="$store.state.i.twitter"> or </span>
+					<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
+				</p>
+			</ui-card>
 
-				<md-card-content>
-					<div>
-						<md-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</md-switch>
-					</div>
+			<ui-card>
+				<div slot="title">%fa:sync-alt% %i18n:@update%</div>
 
-					<div>
-						<md-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</md-switch>
-					</div>
-
-					<div>
-						<md-switch v-model="loadRawImages">%i18n:@load-raw-images%</md-switch>
-					</div>
-
-					<div>
-						<md-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</md-switch>
-					</div>
-
-					<div>
-						<md-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</md-switch>
-					</div>
-				</md-card-content>
-			</md-card>
-
-			<md-card>
-				<md-card-header>
-					<div class="md-title">%fa:language% %i18n:@lang%</div>
-				</md-card-header>
-
-				<md-card-content>
-					<md-field>
-						<md-select v-model="lang" placeholder="%i18n:@auto%">
-							<md-optgroup label="%i18n:@recommended%">
-								<md-option value="">%i18n:@auto%</md-option>
-							</md-optgroup>
-
-							<md-optgroup label="%i18n:@specify-language%">
-								<md-option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</md-option>
-							</md-optgroup>
-						</md-select>
-					</md-field>
-					<span class="md-helper-text">%fa:info-circle% %i18n:@lang-tip%</span>
-				</md-card-content>
-			</md-card>
-
-			<md-card>
-				<md-card-header>
-					<div class="md-title">%fa:B twitter% %i18n:@twitter%</div>
-				</md-card-header>
-
-				<md-card-content>
-					<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
-					<p>
-						<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a>
-						<span v-if="$store.state.i.twitter"> or </span>
-						<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
-					</p>
-				</md-card-content>
-			</md-card>
-
-			<md-card>
-				<md-card-header>
-					<div class="md-title">%fa:sync-alt% %i18n:@update%</div>
-				</md-card-header>
-
-				<md-card-content>
-					<div>%i18n:@version% <i>{{ version }}</i></div>
-					<template v-if="latestVersion !== undefined">
-						<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
-					</template>
-					<md-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate">
-						<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
-						<template v-else>%i18n:@check-for-updates%</template>
-					</md-button>
-				</md-card-content>
-			</md-card>
+				<div>%i18n:@version% <i>{{ version }}</i></div>
+				<template v-if="latestVersion !== undefined">
+					<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
+				</template>
+				<ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
+					<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
+					<template v-else>%i18n:@check-for-updates%</template>
+				</ui-button>
+			</ui-card>
 		</div>
-		<p><small>ver {{ version }} ({{ codename }})</small></p>
+
+		<footer>
+			<small>ver {{ version }} ({{ codename }})</small>
+		</footer>
 	</main>
 </mk-ui>
 </template>
@@ -222,6 +175,13 @@ export default Vue.extend({
 			});
 		},
 
+		onChangeILikeSushi(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'iLikeSushi',
+				value: v
+			});
+		},
+
 		onChangeShowReplyTarget(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'showReplyTarget',
@@ -267,20 +227,22 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	padding 0 16px
 	margin 0 auto
 	max-width 500px
 	width 100%
 
-	> div
-		> *
-			margin-bottom 16px
-
-	> p
-		display block
-		margin 24px
+	> .signin-as
+		margin 16px
+		padding 16px
 		text-align center
-		color isDark ? #cad2da : #a2a9b1
+		color isDark ? #49ab63 : #2c662d
+		background isDark ? #273c34 : #fcfff5
+		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
+	> footer
+		margin 16px
+		text-align center
+		color isDark ? #c9d2e0 : #888
 
 main[data-darkmode]
 	root(true)

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

@@ -1,62 +1,49 @@
 <template>
-	<md-card>
-		<md-card-header>
-			<div class="md-title">%fa:pencil-alt% %i18n:@title%</div>
-		</md-card-header>
+<ui-card>
+	<div slot="title">%fa:user% %i18n:@title%</div>
 
-		<md-card-content>
-			<md-field>
-				<label>%i18n:@name%</label>
-				<md-input v-model="name" :disabled="saving" md-counter="30"/>
-			</md-field>
+	<ui-form :disabled="saving">
+		<ui-input v-model="name" :max="30">
+			<span>%i18n:@name%</span>
+		</ui-input>
 
-			<md-field>
-				<label>%i18n:@account%</label>
-				<span class="md-prefix">@</span>
-				<md-input v-model="username" readonly></md-input>
-				<span class="md-suffix">@{{ host }}</span>
-			</md-field>
+		<ui-input v-model="username" readonly>
+			<span>%i18n:@account%</span>
+			<span slot="prefix">@</span>
+			<span slot="suffix">@{{ host }}</span>
+		</ui-input>
 
-			<md-field>
-				<md-icon>%fa:map-marker-alt%</md-icon>
-				<label>%i18n:@location%</label>
-				<md-input v-model="location" :disabled="saving"/>
-			</md-field>
+		<ui-input v-model="location">
+			<span>%i18n:@location%</span>
+			<span slot="prefix">%fa:map-marker-alt%</span>
+		</ui-input>
 
-			<md-field>
-				<md-icon>%fa:birthday-cake%</md-icon>
-				<label>%i18n:@birthday%</label>
-				<md-input type="date" v-model="birthday" :disabled="saving"/>
-			</md-field>
+		<ui-input v-model="birthday" type="date">
+			<span>%i18n:@birthday%</span>
+			<span slot="prefix">%fa:birthday-cake%</span>
+		</ui-input>
 
-			<md-field>
-				<label>%i18n:@description%</label>
-				<md-textarea v-model="description" :disabled="saving" md-counter="500"/>
-			</md-field>
+		<ui-textarea v-model="description" :max="500">
+			<span>%i18n:@description%</span>
+		</ui-textarea>
 
-			<md-field>
-				<label>%i18n:@avatar%</label>
-				<md-file @md-change="onAvatarChange"/>
-			</md-field>
+		<ui-input type="file" @change="onAvatarChange">
+			<span>%i18n:@avatar%</span>
+			<span slot="icon">%fa:image%</span>
+			<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
+		</ui-input>
 
-			<md-field>
-				<label>%i18n:@banner%</label>
-				<md-file @md-change="onBannerChange"/>
-			</md-field>
+		<ui-input type="file" @change="onBannerChange">
+			<span>%i18n:@banner%</span>
+			<span slot="icon">%fa:image%</span>
+			<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
+		</ui-input>
 
-			<md-dialog-alert
-					:md-active.sync="uploading"
-					md-content="%18n:!@uploading%"/>
+		<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
 
-			<div>
-				<md-switch v-model="isCat">%i18n:@is-cat%</md-switch>
-			</div>
-		</md-card-content>
-
-		<md-card-actions>
-			<md-button class="md-primary" :disabled="saving" @click="save">%i18n:@save%</md-button>
-		</md-card-actions>
-	</md-card>
+		<ui-button @click="save">%i18n:@save%</ui-button>
+	</ui-form>
+</ui-card>
 </template>
 
 <script lang="ts">
@@ -77,7 +64,8 @@ export default Vue.extend({
 			isBot: false,
 			isCat: false,
 			saving: false,
-			uploading: false
+			avatarUploading: false,
+			bannerUploading: false
 		};
 	},
 
@@ -95,7 +83,7 @@ export default Vue.extend({
 
 	methods: {
 		onAvatarChange([file]) {
-			this.uploading = true;
+			this.avatarUploading = true;
 
 			const data = new FormData();
 			data.append('file', file);
@@ -108,16 +96,16 @@ export default Vue.extend({
 			.then(response => response.json())
 			.then(f => {
 				this.avatarId = f.id;
-				this.uploading = false;
+				this.avatarUploading = false;
 			})
 			.catch(e => {
-				this.uploading = false;
+				this.avatarUploading = false;
 				alert('%18n:!@upload-failed%');
 			});
 		},
 
 		onBannerChange([file]) {
-			this.uploading = true;
+			this.bannerUploading = true;
 
 			const data = new FormData();
 			data.append('file', file);
@@ -130,10 +118,10 @@ export default Vue.extend({
 			.then(response => response.json())
 			.then(f => {
 				this.bannerId = f.id;
-				this.uploading = false;
+				this.bannerUploading = false;
 			})
 			.catch(e => {
-				this.uploading = false;
+				this.bannerUploading = false;
 				alert('%18n:!@upload-failed%');
 			});
 		},

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

@@ -0,0 +1,56 @@
+<template>
+<div class="azibmfpleajagva420swmu4c3r7ni7iw">
+	<h1>Misskeyで共有</h1>
+	<div>
+		<mk-signin v-if="!$store.getters.isSignedIn"/>
+		<mk-post-form v-else-if="!posted" :initial-text="text" :instant="true" @posted="posted = true"/>
+		<p v-if="posted" class="posted">%fa:check%</p>
+	</div>
+	<ui-button class="close" v-if="posted" @click="close">閉じる</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			posted: false,
+			text: new URLSearchParams(location.search).get('text')
+		};
+	},
+	methods: {
+		close() {
+			window.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.azibmfpleajagva420swmu4c3r7ni7iw
+	> h1
+		margin 8px 0
+		color #555
+		font-size 20px
+		text-align center
+
+	> div
+		max-width 500px
+		margin 0 auto
+
+		> .posted
+			display block
+			margin 0 auto
+			padding 64px
+			text-align center
+			background #fff
+			border-radius 6px
+			width calc(100% - 32px)
+
+	> .close
+		display block
+		margin 16px auto
+		width calc(100% - 32px)
+</style>

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

@@ -1,57 +1,26 @@
 <template>
 <div class="signup">
-	<h1>Misskeyをはじめる</h1>
-	<p>いつでも、どこからでもMisskeyを利用できます。もちろん、無料です。</p>
-	<div class="form">
-		<p>新規登録</p>
-		<div>
-			<mk-signup/>
-		</div>
-	</div>
+	<h1>📦 始めましょう</h1>
+	<mk-signup/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-export default Vue.extend({
-	mounted() {
-		document.documentElement.style.background = '#293946';
-	}
-});
+export default Vue.extend({});
 </script>
 
 <style lang="stylus" scoped>
 .signup
-	padding 16px
+	padding 32px
 	margin 0 auto
 	max-width 500px
 
 	h1
 		margin 0
-		padding 8px
+		padding 8px 0 0 0
 		font-size 1.5em
-		font-weight normal
-		color #c3c6ca
-
-		& + p
-			margin 0 0 16px 0
-			padding 0 8px 0 8px
-			color #949fa9
-
-	.form
-		background #fff
-		border solid 1px rgba(#000, 0.2)
-		border-radius 8px
-		overflow hidden
-
-		> p
-			margin 0
-			padding 12px 20px
-			color #555
-			background #f5f5f5
-			border-bottom solid 1px #ddd
-
-		> div
-			padding 16px
+		font-weight bold
+		color #444
 
 </style>

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

@@ -0,0 +1,81 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:hashtag%{{ $route.params.tag }}</span>
+
+	<main>
+		<p v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p>
+		<mk-notes ref="timeline" :more="existMore ? more : null"/>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+const limit = 20;
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			offset: 0,
+			empty: false
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.fetch();
+		});
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/search_by_tag', {
+					limit: limit + 1,
+					offset: this.offset,
+					tag: this.$route.params.tag
+				}).then(notes => {
+					if (notes.length == 0) this.empty = true;
+					if (notes.length == limit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					Progress.done();
+				}, rej);
+			}));
+		},
+		more() {
+			this.offset += limit;
+
+			const promise = (this as any).api('notes/search_by_tag', {
+				limit: limit + 1,
+				offset: this.offset,
+				tag: this.$route.params.tag
+			});
+
+			promise.then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+
+			return promise;
+		}
+	}
+});
+</script>

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

@@ -1,28 +1,22 @@
 <template>
 <div class="welcome">
 	<div>
-		<h1><b>Misskey</b>へようこそ</h1>
-		<p>Twitter風ミニブログSNS、Misskeyへようこそ。共有したいことを投稿したり、タイムラインでみんなの投稿を読むこともできます。<br><a href="/signup">アカウントを作成する</a></p>
-		<div class="form">
-			<p>%fa:lock% ログイン</p>
-			<div>
-				<form @submit.prevent="onSubmit">
-					<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
-					<input v-model="password" type="password" placeholder="パスワード" required/>
-					<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
-					<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
-				</form>
-				<div>
-					<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
-				</div>
-			</div>
+		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
+		<p class="host">{{ host }}</p>
+		<div class="about">
+			<h2>{{ name || 'unidentified' }}</h2>
+			<p v-html="description || '%i18n:common.about%'"></p>
+			<router-link class="signup" to="/signup">新規登録</router-link>
+		</div>
+		<div class="login">
+			<mk-signin :with-avatar="false"/>
 		</div>
 		<div class="tl">
-			<p>%fa:comments R% タイムラインを見てみる</p>
 			<mk-welcome-timeline/>
 		</div>
-		<div class="users">
-			<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
+		<div class="stats" v-if="stats">
+			<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
+			<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
 		</div>
 		<footer>
 			<small>{{ copyright }}</small>
@@ -33,163 +27,115 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl, copyright } from '../../../config';
+import { apiUrl, copyright, host, name, description } from '../../../config';
 
 export default Vue.extend({
 	data() {
 		return {
-			signing: false,
-			user: null,
-			username: '',
-			password: '',
-			token: '',
 			apiUrl,
 			copyright,
-			users: []
+			stats: null,
+			host,
+			name,
+			description
 		};
 	},
-	mounted() {
-		(this as any).api('users', {
-			sort: '+follower',
-			limit: 20
-		}).then(users => {
-			this.users = users;
+	created() {
+		(this as any).api('stats').then(stats => {
+			this.stats = stats;
 		});
-	},
-	methods: {
-		onUsernameChange() {
-			(this as any).api('users/show', {
-				username: this.username
-			}).then(user => {
-				this.user = user;
-			});
-		},
-		onSubmit() {
-			this.signing = true;
-
-			(this as any).api('signin', {
-				username: this.username,
-				password: this.password,
-				token: this.user && this.user.twoFactorEnabled ? this.token : undefined
-			}).then(() => {
-				location.reload();
-			}).catch(() => {
-				alert('something happened');
-				this.signing = false;
-			});
-		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
 .welcome
-	background linear-gradient(to bottom, #1e1d65, #bd6659)
+	text-align center
+	//background #fff
 
 	> div
-		padding 16px
+		padding 32px
 		margin 0 auto
 		max-width 500px
 
-		h1
-			margin 0
-			padding 8px
-			font-size 1.5em
-			font-weight normal
-			color #cacac3
+		> img
+			display block
+			max-width 200px
+			margin 0 auto
 
-			& + p
-				margin 0 0 16px 0
-				padding 0 8px 0 8px
-				color #949fa9
+		> .host
+			display block
+			text-align center
+			padding 6px 12px
+			line-height 32px
+			font-weight bold
+			color #333
+			background rgba(#000, 0.035)
+			border-radius 6px
 
-		.form
-			margin-bottom 16px
+		> .about
+			margin-top 16px
+			padding 16px
+			color #555
 			background #fff
-			border solid 1px rgba(#000, 0.2)
-			border-radius 8px
-			overflow hidden
+			border-radius 6px
+
+			> h2
+				margin 0
 
 			> p
-				margin 0
-				padding 12px 20px
-				color #555
-				background #f5f5f5
-				border-bottom solid 1px #ddd
+				margin 8px
 
-			> div
+			> .signup
+				font-weight bold
 
-				> form
-					padding 16px
-					border-bottom solid 1px #ddd
+		> .login
+			margin 16px 0
 
-					input
-						display block
-						padding 12px
-						margin 0 0 16px 0
-						width 100%
-						font-size 1em
-						color rgba(#000, 0.7)
-						background #fff
-						outline none
-						border solid 1px #ddd
-						border-radius 4px
+			> form
 
-					button
-						display block
-						width 100%
-						padding 10px
-						margin 0
-						color #333
-						font-size 1em
-						text-align center
-						text-decoration none
-						text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
-						background-image linear-gradient(#fafafa, #eaeaea)
-						border 1px solid #ddd
-						border-bottom-color #cecece
-						border-radius 4px
-
-						&:active
-							background-color #767676
-							background-image none
-							border-color #444
-							box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
-
-				> div
-					padding 16px
+				button
+					display block
+					width 100%
+					padding 10px
+					margin 0
+					color #333
+					font-size 1em
 					text-align center
+					text-decoration none
+					text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
+					background-image linear-gradient(#fafafa, #eaeaea)
+					border 1px solid #ddd
+					border-bottom-color #cecece
+					border-radius 4px
+
+					&:active
+						background-color #767676
+						background-image none
+						border-color #444
+						box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
 
 		> .tl
-			background #fff
-			border solid 1px rgba(#000, 0.2)
-			border-radius 8px
-			overflow hidden
-
-			> p
-				margin 0
-				padding 12px 20px
-				color #555
-				background #f5f5f5
-				border-bottom solid 1px #ddd
-
-			> .mk-welcome-timeline
+			> *
 				max-height 300px
+				border-radius 6px
 				overflow auto
+				-webkit-overflow-scrolling touch
 
-		> .users
-			margin 12px 0 0 0
+		> .stats
+			margin 16px 0
+			padding 8px
+			font-size 14px
+			color #444
+			background rgba(#000, 0.1)
+			border-radius 6px
 
 			> *
-				display inline-block
-				margin 4px
-				width 38px
-				height 38px
-				border-radius 6px
+				margin 0 8px
 
 		> footer
 			text-align center
-			color #fff
+			color #444
 
 			> small
 				display block

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

@@ -56,7 +56,7 @@ export default define({
 	left 92px
 	margin 0
 	line-height 100px
-	color #fff !important // !important is for md
+	color #fff
 	font-weight bold
 	text-shadow 0 0 8px rgba(#000, 0.5)
 

src/client/app/store.ts

@@ -18,7 +18,8 @@ const defaultSettings = {
 	showRenotedMyNotes: true,
 	loadRemoteMedia: true,
 	disableViaMobile: false,
-	memo: null
+	memo: null,
+	iLikeSushi: false
 };
 
 const defaultDeviceSettings = {

src/client/assets/manifest.json

@@ -4,11 +4,39 @@
 	"start_url": "/",
 	"display": "standalone",
 	"background_color": "#313a42",
-	"icons": {
-		"16": "/assets/favicon/16.png",
-		"32": "/assets/favicon/32.png",
-		"64": "/assets/favicon/64.png",
-		"128": "/assets/favicon/128.png",
-		"256": "/assets/favicon/256.png"
+	"icons": [
+		{
+			"src": "/assets/icons/16.png",
+			"sizes": "16x16",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/icons/32.png",
+			"sizes": "32x32",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/icons/64.png",
+			"sizes": "64x64",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/icons/128.png",
+			"sizes": "128x128",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/icons/192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/icons/256.png",
+			"sizes": "256x256",
+			"type": "image/png"
+		}
+	],
+	"share_target": {
+		"url_template": "share?text={title}%20-%20{text}%20-%20{url}"
 	}
 }

src/client/docs/api/gulpfile.ts

@@ -19,9 +19,10 @@ import generateVars from '../vars';
 
 const langs = Object.keys(locales);
 
-const kebab = string => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
+const kebab = (string: string) => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
 
-const parseParam = param => {
+// WIP type
+const parseParam = (param: any) => {
 	const id = param.type.match(/^id\((.+?)\)|^id/);
 	const entity = param.type.match(/^entity\((.+?)\)/);
 	const isObject = /^object/.test(param.type);
@@ -57,7 +58,7 @@ const parseParam = param => {
 	return param;
 };
 
-const sortParams = params => {
+const sortParams = (params: Array<{name: string}>) => {
 	params.sort((a, b) => {
 		if (a.name < b.name)
 			return -1;
@@ -68,14 +69,15 @@ const sortParams = params => {
 	return params;
 };
 
-const extractDefs = params => {
-	let defs = [];
+// WIP type
+const extractDefs = (params: any[]) => {
+	let defs: any[] = [];
 
 	params.forEach(param => {
 		if (param.def) {
 			defs.push({
 				name: param.defName,
-				params: sortParams(param.def.map(p => parseParam(p)))
+				params: sortParams(param.def.map((p: any) => parseParam(p)))
 			});
 
 			const childDefs = extractDefs(param.def);
@@ -109,8 +111,10 @@ gulp.task('doc:api:endpoints', async () => {
 					path: ep.endpoint
 				},
 				desc: ep.desc,
+				// @ts-ignore
 				params: sortParams(ep.params.map(p => parseParam(p))),
 				paramDefs: extractDefs(ep.params),
+				// @ts-ignore
 				res: ep.res ? sortParams(ep.res.map(p => parseParam(p))) : null,
 				resDefs: ep.res ? extractDefs(ep.res) : null,
 			};
@@ -155,7 +159,8 @@ gulp.task('doc:api:entities', async () => {
 			const vars = {
 				name: entity.name,
 				desc: entity.desc,
-				props: sortParams(entity.props.map(p => parseParam(p))),
+				// WIP type
+				props: sortParams(entity.props.map((p: any) => parseParam(p))),
 				propDefs: extractDefs(entity.props),
 			};
 			langs.forEach(lang => {

src/client/docs/gulpfile.ts

@@ -8,8 +8,8 @@ import * as glob from 'glob';
 import * as gulp from 'gulp';
 import * as pug from 'pug';
 import * as mkdirp from 'mkdirp';
-import stylus = require('gulp-stylus');
-import cssnano = require('gulp-cssnano');
+const stylus = require('gulp-stylus');
+const cssnano = require('gulp-cssnano');
 
 import I18nReplacer from '../../build/i18n';
 import fa from '../../build/fa';

src/client/docs/vars.ts

@@ -38,7 +38,7 @@ export default async function(): Promise<{ [key: string]: any }> {
 		vars['docs'][name]['title'][lang] = fs.readFileSync(x, 'utf-8').match(/^h1 (.+?)\r?\n/)[1];
 	});
 
-	vars['kebab'] = string => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
+	vars['kebab'] = (string: string) => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
 
 	vars['config'] = config;
 

src/client/md.scss

@@ -1,13 +0,0 @@
-/* SEE: https://vuematerial.io/themes/configuration */
-
-@import '../const.json';
-
-@import "~vue-material/dist/theme/engine";
-
-@include md-register-theme("default", (
-	primary: $themeColor,
-	accent: $themeColor
-));
-
-@import "~vue-material/dist/components/MdButton/theme";
-@import "~vue-material/dist/components/MdField/theme";

src/config/types.ts

@@ -15,6 +15,9 @@ export type Source = {
 		 */
 		url: string;
 	};
+	name?: string;
+	description?: string;
+	welcome_bg_url?: string;
 	url: string;
 	port: number;
 	https?: { [x: string]: string };
@@ -57,7 +60,7 @@ export type Source = {
 		hook_secret: string;
 		username: string;
 	};
-	othello_ai?: {
+	reversi_ai?: {
 		id: string;
 		i: string;
 	};

src/daemons/hashtags-stats-child.ts

@@ -1,60 +0,0 @@
-import Note from '../models/note';
-
-// 10分
-const interval = 1000 * 60 * 10;
-
-async function tick() {
-	const res = await Note.aggregate([{
-		$match: {
-			createdAt: {
-				$gt: new Date(Date.now() - interval)
-			},
-			tags: {
-				$exists: true,
-				$ne: []
-			}
-		}
-	}, {
-		$unwind: '$tags'
-	}, {
-		$group: {
-			_id: '$tags',
-			count: {
-				$sum: 1
-			}
-		}
-	}, {
-		$group: {
-			_id: null,
-			tags: {
-				$push: {
-					tag: '$_id',
-					count: '$count'
-				}
-			}
-		}
-	}, {
-		$project: {
-			_id: false,
-			tags: true
-		}
-	}]) as {
-		tags: Array<{
-			tag: string;
-			count: number;
-		}>
-	};
-
-	const stats = res.tags
-		.sort((a, b) => a.count - b.count)
-		.map(tag => [tag.tag, tag.count])
-		.slice(0, 10);
-
-	console.log(stats);
-
-	process.send(stats);
-}
-
-tick();
-
-setInterval(tick, interval);

src/daemons/hashtags-stats.ts

@@ -1,20 +0,0 @@
-import * as childProcess from 'child_process';
-import Xev from 'xev';
-
-const ev = new Xev();
-
-export default function() {
-	const log = [];
-
-	const p = childProcess.fork(__dirname + '/hashtags-stats-child.js');
-
-	p.on('message', stats => {
-		ev.emit('hashtagsStats', stats);
-		log.push(stats);
-		if (log.length > 30) log.shift();
-	});
-
-	ev.on('requestHashTagsStatsLog', id => {
-		ev.emit('hashtagsStatsLog:' + id, log);
-	});
-}