From a45d2b2293fd6aa35b8509d22e9b67df052341c8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 9 Feb 2018 13:20:45 +0900
Subject: wip

---
 src/web/app/common/-tags/activity-table.tag        |  57 ++
 src/web/app/common/-tags/authorized-apps.tag       |  35 +
 src/web/app/common/-tags/ellipsis.tag              |  24 +
 src/web/app/common/-tags/error.tag                 | 215 +++++
 src/web/app/common/-tags/file-type-icon.tag        |  10 +
 src/web/app/common/-tags/forkit.tag                |  40 +
 src/web/app/common/-tags/index.ts                  |  30 +
 src/web/app/common/-tags/introduction.tag          |  25 +
 src/web/app/common/-tags/messaging/form.tag        | 175 ++++
 src/web/app/common/-tags/messaging/index.tag       | 456 +++++++++++
 src/web/app/common/-tags/messaging/message.tag     | 238 ++++++
 src/web/app/common/-tags/messaging/room.tag        | 319 ++++++++
 src/web/app/common/-tags/nav-links.tag             |  10 +
 src/web/app/common/-tags/number.tag                |  16 +
 src/web/app/common/-tags/poll-editor.tag           | 121 +++
 src/web/app/common/-tags/post-menu.tag             | 157 ++++
 src/web/app/common/-tags/raw.tag                   |  13 +
 src/web/app/common/-tags/signin-history.tag        | 116 +++
 src/web/app/common/-tags/signin.tag                | 155 ++++
 src/web/app/common/-tags/signup.tag                | 307 +++++++
 src/web/app/common/-tags/special-message.tag       |  27 +
 src/web/app/common/-tags/twitter-setting.tag       |  62 ++
 src/web/app/common/-tags/uploader.tag              | 199 +++++
 src/web/app/common/tags/activity-table.tag         |  57 --
 src/web/app/common/tags/authorized-apps.tag        |  35 -
 src/web/app/common/tags/ellipsis.tag               |  24 -
 src/web/app/common/tags/error.tag                  | 215 -----
 src/web/app/common/tags/file-type-icon.tag         |  10 -
 src/web/app/common/tags/forkit.tag                 |  40 -
 src/web/app/common/tags/index.ts                   |  30 -
 src/web/app/common/tags/introduction.tag           |  25 -
 src/web/app/common/tags/messaging/form.tag         | 175 ----
 src/web/app/common/tags/messaging/index.tag        | 456 -----------
 src/web/app/common/tags/messaging/message.tag      | 238 ------
 src/web/app/common/tags/messaging/room.tag         | 319 --------
 src/web/app/common/tags/nav-links.tag              |  10 -
 src/web/app/common/tags/number.tag                 |  16 -
 src/web/app/common/tags/poll-editor.tag            | 121 ---
 src/web/app/common/tags/post-menu.tag              | 157 ----
 src/web/app/common/tags/raw.tag                    |  13 -
 src/web/app/common/tags/signin-history.tag         | 116 ---
 src/web/app/common/tags/signin.tag                 | 155 ----
 src/web/app/common/tags/signup.tag                 | 307 -------
 src/web/app/common/tags/special-message.tag        |  27 -
 src/web/app/common/tags/twitter-setting.tag        |  62 --
 src/web/app/common/tags/uploader.tag               | 199 -----
 src/web/app/desktop/-tags/analog-clock.tag         |  95 +++
 .../app/desktop/-tags/autocomplete-suggestion.tag  | 197 +++++
 src/web/app/desktop/-tags/big-follow-button.tag    | 153 ++++
 src/web/app/desktop/-tags/contextmenu.tag          | 138 ++++
 src/web/app/desktop/-tags/crop-window.tag          | 196 +++++
 src/web/app/desktop/-tags/detailed-post-window.tag |  80 ++
 src/web/app/desktop/-tags/dialog.tag               | 144 ++++
 src/web/app/desktop/-tags/donation.tag             |  66 ++
 .../app/desktop/-tags/drive/base-contextmenu.tag   |  44 +
 src/web/app/desktop/-tags/drive/browser-window.tag |  60 ++
 src/web/app/desktop/-tags/drive/browser.tag        | 736 +++++++++++++++++
 .../app/desktop/-tags/drive/file-contextmenu.tag   |  99 +++
 src/web/app/desktop/-tags/drive/file.tag           | 217 +++++
 .../app/desktop/-tags/drive/folder-contextmenu.tag |  63 ++
 src/web/app/desktop/-tags/drive/folder.tag         | 202 +++++
 src/web/app/desktop/-tags/drive/nav-folder.tag     |  96 +++
 src/web/app/desktop/-tags/ellipsis-icon.tag        |  37 +
 src/web/app/desktop/-tags/follow-button.tag        | 150 ++++
 src/web/app/desktop/-tags/following-setuper.tag    | 169 ++++
 .../app/desktop/-tags/home-widgets/access-log.tag  |  95 +++
 .../app/desktop/-tags/home-widgets/activity.tag    |  32 +
 .../app/desktop/-tags/home-widgets/broadcast.tag   | 143 ++++
 .../app/desktop/-tags/home-widgets/calendar.tag    | 167 ++++
 src/web/app/desktop/-tags/home-widgets/channel.tag | 318 ++++++++
 .../app/desktop/-tags/home-widgets/donation.tag    |  36 +
 .../app/desktop/-tags/home-widgets/mentions.tag    | 125 +++
 .../app/desktop/-tags/home-widgets/messaging.tag   |  52 ++
 src/web/app/desktop/-tags/home-widgets/nav.tag     |  23 +
 .../desktop/-tags/home-widgets/notifications.tag   |  66 ++
 .../desktop/-tags/home-widgets/photo-stream.tag    | 118 +++
 .../app/desktop/-tags/home-widgets/post-form.tag   | 103 +++
 src/web/app/desktop/-tags/home-widgets/profile.tag | 116 +++
 .../-tags/home-widgets/recommended-polls.tag       | 119 +++
 .../app/desktop/-tags/home-widgets/rss-reader.tag  | 109 +++
 src/web/app/desktop/-tags/home-widgets/server.tag  | 533 ++++++++++++
 .../app/desktop/-tags/home-widgets/slideshow.tag   | 151 ++++
 .../app/desktop/-tags/home-widgets/timeline.tag    | 143 ++++
 .../app/desktop/-tags/home-widgets/timemachine.tag |  23 +
 src/web/app/desktop/-tags/home-widgets/tips.tag    |  94 +++
 src/web/app/desktop/-tags/home-widgets/trends.tag  | 125 +++
 .../-tags/home-widgets/user-recommendation.tag     | 165 ++++
 src/web/app/desktop/-tags/home-widgets/version.tag |  20 +
 src/web/app/desktop/-tags/images.tag               | 172 ++++
 src/web/app/desktop/-tags/index.ts                 |  89 ++
 src/web/app/desktop/-tags/input-dialog.tag         | 172 ++++
 src/web/app/desktop/-tags/list-user.tag            |  93 +++
 .../app/desktop/-tags/messaging/room-window.tag    |  32 +
 src/web/app/desktop/-tags/messaging/window.tag     |  34 +
 src/web/app/desktop/-tags/notifications.tag        | 301 +++++++
 src/web/app/desktop/-tags/pages/drive.tag          |  37 +
 src/web/app/desktop/-tags/pages/entrance.tag       | 342 ++++++++
 src/web/app/desktop/-tags/pages/home-customize.tag |  12 +
 src/web/app/desktop/-tags/pages/home.tag           |  54 ++
 src/web/app/desktop/-tags/pages/messaging-room.tag |  37 +
 src/web/app/desktop/-tags/pages/not-found.tag      |  11 +
 src/web/app/desktop/-tags/pages/post.tag           |  58 ++
 src/web/app/desktop/-tags/pages/search.tag         |  20 +
 src/web/app/desktop/-tags/pages/selectdrive.tag    | 161 ++++
 src/web/app/desktop/-tags/pages/user.tag           |  27 +
 src/web/app/desktop/-tags/post-detail-sub.tag      | 149 ++++
 src/web/app/desktop/-tags/post-detail.tag          | 328 ++++++++
 src/web/app/desktop/-tags/post-form-window.tag     |  68 ++
 src/web/app/desktop/-tags/post-form.tag            | 540 +++++++++++++
 src/web/app/desktop/-tags/post-preview.tag         |  94 +++
 src/web/app/desktop/-tags/progress-dialog.tag      |  97 +++
 src/web/app/desktop/-tags/repost-form-window.tag   |  47 ++
 src/web/app/desktop/-tags/repost-form.tag          | 127 +++
 src/web/app/desktop/-tags/search-posts.tag         |  96 +++
 src/web/app/desktop/-tags/search.tag               |  34 +
 .../-tags/select-file-from-drive-window.tag        | 173 ++++
 .../-tags/select-folder-from-drive-window.tag      | 112 +++
 .../app/desktop/-tags/set-avatar-suggestion.tag    |  48 ++
 .../app/desktop/-tags/set-banner-suggestion.tag    |  48 ++
 src/web/app/desktop/-tags/settings-window.tag      |  30 +
 src/web/app/desktop/-tags/settings.tag             | 426 ++++++++++
 src/web/app/desktop/-tags/sub-post-content.tag     |  54 ++
 src/web/app/desktop/-tags/timeline.tag             | 704 ++++++++++++++++
 src/web/app/desktop/-tags/ui.tag                   | 896 +++++++++++++++++++++
 .../app/desktop/-tags/user-followers-window.tag    |  19 +
 src/web/app/desktop/-tags/user-followers.tag       |  23 +
 .../app/desktop/-tags/user-following-window.tag    |  19 +
 src/web/app/desktop/-tags/user-following.tag       |  23 +
 src/web/app/desktop/-tags/user-preview.tag         | 149 ++++
 src/web/app/desktop/-tags/user-timeline.tag        | 150 ++++
 src/web/app/desktop/-tags/user.tag                 | 852 ++++++++++++++++++++
 src/web/app/desktop/-tags/users-list.tag           | 138 ++++
 src/web/app/desktop/-tags/widgets/activity.tag     | 246 ++++++
 src/web/app/desktop/-tags/widgets/calendar.tag     | 241 ++++++
 src/web/app/desktop/-tags/window.tag               | 549 +++++++++++++
 src/web/app/desktop/tags/analog-clock.tag          |  95 ---
 .../app/desktop/tags/autocomplete-suggestion.tag   | 197 -----
 src/web/app/desktop/tags/big-follow-button.tag     | 153 ----
 src/web/app/desktop/tags/contextmenu.tag           | 138 ----
 src/web/app/desktop/tags/crop-window.tag           | 196 -----
 src/web/app/desktop/tags/detailed-post-window.tag  |  80 --
 src/web/app/desktop/tags/dialog.tag                | 144 ----
 src/web/app/desktop/tags/donation.tag              |  66 --
 .../app/desktop/tags/drive/base-contextmenu.tag    |  44 -
 src/web/app/desktop/tags/drive/browser-window.tag  |  60 --
 src/web/app/desktop/tags/drive/browser.tag         | 736 -----------------
 .../app/desktop/tags/drive/file-contextmenu.tag    |  99 ---
 src/web/app/desktop/tags/drive/file.tag            | 217 -----
 .../app/desktop/tags/drive/folder-contextmenu.tag  |  63 --
 src/web/app/desktop/tags/drive/folder.tag          | 202 -----
 src/web/app/desktop/tags/drive/nav-folder.tag      |  96 ---
 src/web/app/desktop/tags/ellipsis-icon.tag         |  37 -
 src/web/app/desktop/tags/follow-button.tag         | 150 ----
 src/web/app/desktop/tags/following-setuper.tag     | 169 ----
 .../app/desktop/tags/home-widgets/access-log.tag   |  95 ---
 src/web/app/desktop/tags/home-widgets/activity.tag |  32 -
 .../app/desktop/tags/home-widgets/broadcast.tag    | 143 ----
 src/web/app/desktop/tags/home-widgets/calendar.tag | 167 ----
 src/web/app/desktop/tags/home-widgets/channel.tag  | 318 --------
 src/web/app/desktop/tags/home-widgets/donation.tag |  36 -
 src/web/app/desktop/tags/home-widgets/mentions.tag | 125 ---
 .../app/desktop/tags/home-widgets/messaging.tag    |  52 --
 src/web/app/desktop/tags/home-widgets/nav.tag      |  23 -
 .../desktop/tags/home-widgets/notifications.tag    |  66 --
 .../app/desktop/tags/home-widgets/photo-stream.tag | 118 ---
 .../app/desktop/tags/home-widgets/post-form.tag    | 103 ---
 src/web/app/desktop/tags/home-widgets/profile.tag  | 116 ---
 .../tags/home-widgets/recommended-polls.tag        | 119 ---
 .../app/desktop/tags/home-widgets/rss-reader.tag   | 109 ---
 src/web/app/desktop/tags/home-widgets/server.tag   | 533 ------------
 .../app/desktop/tags/home-widgets/slideshow.tag    | 151 ----
 src/web/app/desktop/tags/home-widgets/timeline.tag | 143 ----
 .../app/desktop/tags/home-widgets/timemachine.tag  |  23 -
 src/web/app/desktop/tags/home-widgets/tips.tag     |  94 ---
 src/web/app/desktop/tags/home-widgets/trends.tag   | 125 ---
 .../tags/home-widgets/user-recommendation.tag      | 165 ----
 src/web/app/desktop/tags/home-widgets/version.tag  |  20 -
 src/web/app/desktop/tags/images.tag                | 172 ----
 src/web/app/desktop/tags/index.ts                  |  89 --
 src/web/app/desktop/tags/input-dialog.tag          | 172 ----
 src/web/app/desktop/tags/list-user.tag             |  93 ---
 src/web/app/desktop/tags/messaging/room-window.tag |  32 -
 src/web/app/desktop/tags/messaging/window.tag      |  34 -
 src/web/app/desktop/tags/notifications.tag         | 301 -------
 src/web/app/desktop/tags/pages/drive.tag           |  37 -
 src/web/app/desktop/tags/pages/entrance.tag        | 342 --------
 src/web/app/desktop/tags/pages/home-customize.tag  |  12 -
 src/web/app/desktop/tags/pages/home.tag            |  54 --
 src/web/app/desktop/tags/pages/messaging-room.tag  |  37 -
 src/web/app/desktop/tags/pages/not-found.tag       |  11 -
 src/web/app/desktop/tags/pages/post.tag            |  58 --
 src/web/app/desktop/tags/pages/search.tag          |  20 -
 src/web/app/desktop/tags/pages/selectdrive.tag     | 161 ----
 src/web/app/desktop/tags/pages/user.tag            |  27 -
 src/web/app/desktop/tags/post-detail-sub.tag       | 149 ----
 src/web/app/desktop/tags/post-detail.tag           | 328 --------
 src/web/app/desktop/tags/post-form-window.tag      |  68 --
 src/web/app/desktop/tags/post-form.tag             | 540 -------------
 src/web/app/desktop/tags/post-preview.tag          |  94 ---
 src/web/app/desktop/tags/progress-dialog.tag       |  97 ---
 src/web/app/desktop/tags/repost-form-window.tag    |  47 --
 src/web/app/desktop/tags/repost-form.tag           | 127 ---
 src/web/app/desktop/tags/search-posts.tag          |  96 ---
 src/web/app/desktop/tags/search.tag                |  34 -
 .../desktop/tags/select-file-from-drive-window.tag | 173 ----
 .../tags/select-folder-from-drive-window.tag       | 112 ---
 src/web/app/desktop/tags/set-avatar-suggestion.tag |  48 --
 src/web/app/desktop/tags/set-banner-suggestion.tag |  48 --
 src/web/app/desktop/tags/settings-window.tag       |  30 -
 src/web/app/desktop/tags/settings.tag              | 426 ----------
 src/web/app/desktop/tags/sub-post-content.tag      |  54 --
 src/web/app/desktop/tags/timeline.tag              | 704 ----------------
 src/web/app/desktop/tags/ui.tag                    | 896 ---------------------
 src/web/app/desktop/tags/user-followers-window.tag |  19 -
 src/web/app/desktop/tags/user-followers.tag        |  23 -
 src/web/app/desktop/tags/user-following-window.tag |  19 -
 src/web/app/desktop/tags/user-following.tag        |  23 -
 src/web/app/desktop/tags/user-preview.tag          | 149 ----
 src/web/app/desktop/tags/user-timeline.tag         | 150 ----
 src/web/app/desktop/tags/user.tag                  | 852 --------------------
 src/web/app/desktop/tags/users-list.tag            | 138 ----
 src/web/app/desktop/tags/widgets/activity.tag      | 246 ------
 src/web/app/desktop/tags/widgets/calendar.tag      | 241 ------
 src/web/app/desktop/tags/window.tag                | 549 -------------
 224 files changed, 16757 insertions(+), 16757 deletions(-)
 create mode 100644 src/web/app/common/-tags/activity-table.tag
 create mode 100644 src/web/app/common/-tags/authorized-apps.tag
 create mode 100644 src/web/app/common/-tags/ellipsis.tag
 create mode 100644 src/web/app/common/-tags/error.tag
 create mode 100644 src/web/app/common/-tags/file-type-icon.tag
 create mode 100644 src/web/app/common/-tags/forkit.tag
 create mode 100644 src/web/app/common/-tags/index.ts
 create mode 100644 src/web/app/common/-tags/introduction.tag
 create mode 100644 src/web/app/common/-tags/messaging/form.tag
 create mode 100644 src/web/app/common/-tags/messaging/index.tag
 create mode 100644 src/web/app/common/-tags/messaging/message.tag
 create mode 100644 src/web/app/common/-tags/messaging/room.tag
 create mode 100644 src/web/app/common/-tags/nav-links.tag
 create mode 100644 src/web/app/common/-tags/number.tag
 create mode 100644 src/web/app/common/-tags/poll-editor.tag
 create mode 100644 src/web/app/common/-tags/post-menu.tag
 create mode 100644 src/web/app/common/-tags/raw.tag
 create mode 100644 src/web/app/common/-tags/signin-history.tag
 create mode 100644 src/web/app/common/-tags/signin.tag
 create mode 100644 src/web/app/common/-tags/signup.tag
 create mode 100644 src/web/app/common/-tags/special-message.tag
 create mode 100644 src/web/app/common/-tags/twitter-setting.tag
 create mode 100644 src/web/app/common/-tags/uploader.tag
 delete mode 100644 src/web/app/common/tags/activity-table.tag
 delete mode 100644 src/web/app/common/tags/authorized-apps.tag
 delete mode 100644 src/web/app/common/tags/ellipsis.tag
 delete mode 100644 src/web/app/common/tags/error.tag
 delete mode 100644 src/web/app/common/tags/file-type-icon.tag
 delete mode 100644 src/web/app/common/tags/forkit.tag
 delete mode 100644 src/web/app/common/tags/index.ts
 delete mode 100644 src/web/app/common/tags/introduction.tag
 delete mode 100644 src/web/app/common/tags/messaging/form.tag
 delete mode 100644 src/web/app/common/tags/messaging/index.tag
 delete mode 100644 src/web/app/common/tags/messaging/message.tag
 delete mode 100644 src/web/app/common/tags/messaging/room.tag
 delete mode 100644 src/web/app/common/tags/nav-links.tag
 delete mode 100644 src/web/app/common/tags/number.tag
 delete mode 100644 src/web/app/common/tags/poll-editor.tag
 delete mode 100644 src/web/app/common/tags/post-menu.tag
 delete mode 100644 src/web/app/common/tags/raw.tag
 delete mode 100644 src/web/app/common/tags/signin-history.tag
 delete mode 100644 src/web/app/common/tags/signin.tag
 delete mode 100644 src/web/app/common/tags/signup.tag
 delete mode 100644 src/web/app/common/tags/special-message.tag
 delete mode 100644 src/web/app/common/tags/twitter-setting.tag
 delete mode 100644 src/web/app/common/tags/uploader.tag
 create mode 100644 src/web/app/desktop/-tags/analog-clock.tag
 create mode 100644 src/web/app/desktop/-tags/autocomplete-suggestion.tag
 create mode 100644 src/web/app/desktop/-tags/big-follow-button.tag
 create mode 100644 src/web/app/desktop/-tags/contextmenu.tag
 create mode 100644 src/web/app/desktop/-tags/crop-window.tag
 create mode 100644 src/web/app/desktop/-tags/detailed-post-window.tag
 create mode 100644 src/web/app/desktop/-tags/dialog.tag
 create mode 100644 src/web/app/desktop/-tags/donation.tag
 create mode 100644 src/web/app/desktop/-tags/drive/base-contextmenu.tag
 create mode 100644 src/web/app/desktop/-tags/drive/browser-window.tag
 create mode 100644 src/web/app/desktop/-tags/drive/browser.tag
 create mode 100644 src/web/app/desktop/-tags/drive/file-contextmenu.tag
 create mode 100644 src/web/app/desktop/-tags/drive/file.tag
 create mode 100644 src/web/app/desktop/-tags/drive/folder-contextmenu.tag
 create mode 100644 src/web/app/desktop/-tags/drive/folder.tag
 create mode 100644 src/web/app/desktop/-tags/drive/nav-folder.tag
 create mode 100644 src/web/app/desktop/-tags/ellipsis-icon.tag
 create mode 100644 src/web/app/desktop/-tags/follow-button.tag
 create mode 100644 src/web/app/desktop/-tags/following-setuper.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/access-log.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/activity.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/broadcast.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/calendar.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/channel.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/donation.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/mentions.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/messaging.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/nav.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/notifications.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/photo-stream.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/post-form.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/profile.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/recommended-polls.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/rss-reader.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/server.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/slideshow.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/timeline.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/timemachine.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/tips.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/trends.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/user-recommendation.tag
 create mode 100644 src/web/app/desktop/-tags/home-widgets/version.tag
 create mode 100644 src/web/app/desktop/-tags/images.tag
 create mode 100644 src/web/app/desktop/-tags/index.ts
 create mode 100644 src/web/app/desktop/-tags/input-dialog.tag
 create mode 100644 src/web/app/desktop/-tags/list-user.tag
 create mode 100644 src/web/app/desktop/-tags/messaging/room-window.tag
 create mode 100644 src/web/app/desktop/-tags/messaging/window.tag
 create mode 100644 src/web/app/desktop/-tags/notifications.tag
 create mode 100644 src/web/app/desktop/-tags/pages/drive.tag
 create mode 100644 src/web/app/desktop/-tags/pages/entrance.tag
 create mode 100644 src/web/app/desktop/-tags/pages/home-customize.tag
 create mode 100644 src/web/app/desktop/-tags/pages/home.tag
 create mode 100644 src/web/app/desktop/-tags/pages/messaging-room.tag
 create mode 100644 src/web/app/desktop/-tags/pages/not-found.tag
 create mode 100644 src/web/app/desktop/-tags/pages/post.tag
 create mode 100644 src/web/app/desktop/-tags/pages/search.tag
 create mode 100644 src/web/app/desktop/-tags/pages/selectdrive.tag
 create mode 100644 src/web/app/desktop/-tags/pages/user.tag
 create mode 100644 src/web/app/desktop/-tags/post-detail-sub.tag
 create mode 100644 src/web/app/desktop/-tags/post-detail.tag
 create mode 100644 src/web/app/desktop/-tags/post-form-window.tag
 create mode 100644 src/web/app/desktop/-tags/post-form.tag
 create mode 100644 src/web/app/desktop/-tags/post-preview.tag
 create mode 100644 src/web/app/desktop/-tags/progress-dialog.tag
 create mode 100644 src/web/app/desktop/-tags/repost-form-window.tag
 create mode 100644 src/web/app/desktop/-tags/repost-form.tag
 create mode 100644 src/web/app/desktop/-tags/search-posts.tag
 create mode 100644 src/web/app/desktop/-tags/search.tag
 create mode 100644 src/web/app/desktop/-tags/select-file-from-drive-window.tag
 create mode 100644 src/web/app/desktop/-tags/select-folder-from-drive-window.tag
 create mode 100644 src/web/app/desktop/-tags/set-avatar-suggestion.tag
 create mode 100644 src/web/app/desktop/-tags/set-banner-suggestion.tag
 create mode 100644 src/web/app/desktop/-tags/settings-window.tag
 create mode 100644 src/web/app/desktop/-tags/settings.tag
 create mode 100644 src/web/app/desktop/-tags/sub-post-content.tag
 create mode 100644 src/web/app/desktop/-tags/timeline.tag
 create mode 100644 src/web/app/desktop/-tags/ui.tag
 create mode 100644 src/web/app/desktop/-tags/user-followers-window.tag
 create mode 100644 src/web/app/desktop/-tags/user-followers.tag
 create mode 100644 src/web/app/desktop/-tags/user-following-window.tag
 create mode 100644 src/web/app/desktop/-tags/user-following.tag
 create mode 100644 src/web/app/desktop/-tags/user-preview.tag
 create mode 100644 src/web/app/desktop/-tags/user-timeline.tag
 create mode 100644 src/web/app/desktop/-tags/user.tag
 create mode 100644 src/web/app/desktop/-tags/users-list.tag
 create mode 100644 src/web/app/desktop/-tags/widgets/activity.tag
 create mode 100644 src/web/app/desktop/-tags/widgets/calendar.tag
 create mode 100644 src/web/app/desktop/-tags/window.tag
 delete mode 100644 src/web/app/desktop/tags/analog-clock.tag
 delete mode 100644 src/web/app/desktop/tags/autocomplete-suggestion.tag
 delete mode 100644 src/web/app/desktop/tags/big-follow-button.tag
 delete mode 100644 src/web/app/desktop/tags/contextmenu.tag
 delete mode 100644 src/web/app/desktop/tags/crop-window.tag
 delete mode 100644 src/web/app/desktop/tags/detailed-post-window.tag
 delete mode 100644 src/web/app/desktop/tags/dialog.tag
 delete mode 100644 src/web/app/desktop/tags/donation.tag
 delete mode 100644 src/web/app/desktop/tags/drive/base-contextmenu.tag
 delete mode 100644 src/web/app/desktop/tags/drive/browser-window.tag
 delete mode 100644 src/web/app/desktop/tags/drive/browser.tag
 delete mode 100644 src/web/app/desktop/tags/drive/file-contextmenu.tag
 delete mode 100644 src/web/app/desktop/tags/drive/file.tag
 delete mode 100644 src/web/app/desktop/tags/drive/folder-contextmenu.tag
 delete mode 100644 src/web/app/desktop/tags/drive/folder.tag
 delete mode 100644 src/web/app/desktop/tags/drive/nav-folder.tag
 delete mode 100644 src/web/app/desktop/tags/ellipsis-icon.tag
 delete mode 100644 src/web/app/desktop/tags/follow-button.tag
 delete mode 100644 src/web/app/desktop/tags/following-setuper.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/access-log.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/activity.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/broadcast.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/calendar.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/channel.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/donation.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/mentions.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/messaging.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/nav.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/notifications.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/photo-stream.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/post-form.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/profile.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/recommended-polls.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/rss-reader.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/server.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/slideshow.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/timeline.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/timemachine.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/tips.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/trends.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/user-recommendation.tag
 delete mode 100644 src/web/app/desktop/tags/home-widgets/version.tag
 delete mode 100644 src/web/app/desktop/tags/images.tag
 delete mode 100644 src/web/app/desktop/tags/index.ts
 delete mode 100644 src/web/app/desktop/tags/input-dialog.tag
 delete mode 100644 src/web/app/desktop/tags/list-user.tag
 delete mode 100644 src/web/app/desktop/tags/messaging/room-window.tag
 delete mode 100644 src/web/app/desktop/tags/messaging/window.tag
 delete mode 100644 src/web/app/desktop/tags/notifications.tag
 delete mode 100644 src/web/app/desktop/tags/pages/drive.tag
 delete mode 100644 src/web/app/desktop/tags/pages/entrance.tag
 delete mode 100644 src/web/app/desktop/tags/pages/home-customize.tag
 delete mode 100644 src/web/app/desktop/tags/pages/home.tag
 delete mode 100644 src/web/app/desktop/tags/pages/messaging-room.tag
 delete mode 100644 src/web/app/desktop/tags/pages/not-found.tag
 delete mode 100644 src/web/app/desktop/tags/pages/post.tag
 delete mode 100644 src/web/app/desktop/tags/pages/search.tag
 delete mode 100644 src/web/app/desktop/tags/pages/selectdrive.tag
 delete mode 100644 src/web/app/desktop/tags/pages/user.tag
 delete mode 100644 src/web/app/desktop/tags/post-detail-sub.tag
 delete mode 100644 src/web/app/desktop/tags/post-detail.tag
 delete mode 100644 src/web/app/desktop/tags/post-form-window.tag
 delete mode 100644 src/web/app/desktop/tags/post-form.tag
 delete mode 100644 src/web/app/desktop/tags/post-preview.tag
 delete mode 100644 src/web/app/desktop/tags/progress-dialog.tag
 delete mode 100644 src/web/app/desktop/tags/repost-form-window.tag
 delete mode 100644 src/web/app/desktop/tags/repost-form.tag
 delete mode 100644 src/web/app/desktop/tags/search-posts.tag
 delete mode 100644 src/web/app/desktop/tags/search.tag
 delete mode 100644 src/web/app/desktop/tags/select-file-from-drive-window.tag
 delete mode 100644 src/web/app/desktop/tags/select-folder-from-drive-window.tag
 delete mode 100644 src/web/app/desktop/tags/set-avatar-suggestion.tag
 delete mode 100644 src/web/app/desktop/tags/set-banner-suggestion.tag
 delete mode 100644 src/web/app/desktop/tags/settings-window.tag
 delete mode 100644 src/web/app/desktop/tags/settings.tag
 delete mode 100644 src/web/app/desktop/tags/sub-post-content.tag
 delete mode 100644 src/web/app/desktop/tags/timeline.tag
 delete mode 100644 src/web/app/desktop/tags/ui.tag
 delete mode 100644 src/web/app/desktop/tags/user-followers-window.tag
 delete mode 100644 src/web/app/desktop/tags/user-followers.tag
 delete mode 100644 src/web/app/desktop/tags/user-following-window.tag
 delete mode 100644 src/web/app/desktop/tags/user-following.tag
 delete mode 100644 src/web/app/desktop/tags/user-preview.tag
 delete mode 100644 src/web/app/desktop/tags/user-timeline.tag
 delete mode 100644 src/web/app/desktop/tags/user.tag
 delete mode 100644 src/web/app/desktop/tags/users-list.tag
 delete mode 100644 src/web/app/desktop/tags/widgets/activity.tag
 delete mode 100644 src/web/app/desktop/tags/widgets/calendar.tag
 delete mode 100644 src/web/app/desktop/tags/window.tag

(limited to 'src')

diff --git a/src/web/app/common/-tags/activity-table.tag b/src/web/app/common/-tags/activity-table.tag
new file mode 100644
index 0000000000..2f716912f3
--- /dev/null
+++ b/src/web/app/common/-tags/activity-table.tag
@@ -0,0 +1,57 @@
+<mk-activity-table>
+	<svg v-if="data" ref="canvas" viewBox="0 0 53 7" preserveAspectRatio="none">
+		<rect each={ data } width="1" height="1"
+			riot-x={ x } riot-y={ date.weekday }
+			rx="1" ry="1"
+			fill={ color }
+			style="transform: scale({ v });"/>
+		<rect class="today" width="1" height="1"
+			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
+			rx="1" ry="1"
+			fill="none"
+			stroke-width="0.1"
+			stroke="#f73520"/>
+	</svg>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			max-width 600px
+			margin 0 auto
+
+			> svg
+				display block
+
+				> rect
+					transform-origin center
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = this.opts.user;
+
+		this.on('mount', () => {
+			this.api('aggregation/users/activity', {
+				user_id: this.user.id
+			}).then(data => {
+				data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+				this.peak = Math.max.apply(null, data.map(d => d.total)) / 2;
+				let x = 0;
+				data.reverse().forEach(d => {
+					d.x = x;
+					d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
+
+					d.v = d.total / this.peak;
+					if (d.v > 1) d.v = 1;
+					const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
+					const cs = d.v * 100;
+					const cl = 15 + ((1 - d.v) * 80);
+					d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
+
+					if (d.date.weekday == 6) x++;
+				});
+				this.update({ data });
+			});
+		});
+	</script>
+</mk-activity-table>
diff --git a/src/web/app/common/-tags/authorized-apps.tag b/src/web/app/common/-tags/authorized-apps.tag
new file mode 100644
index 0000000000..26efa1316f
--- /dev/null
+++ b/src/web/app/common/-tags/authorized-apps.tag
@@ -0,0 +1,35 @@
+<mk-authorized-apps>
+	<div class="none ui info" v-if="!fetching && apps.length == 0">
+		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+	</div>
+	<div class="apps" v-if="apps.length != 0">
+		<div each={ app in apps }>
+			<p><b>{ app.name }</b></p>
+			<p>{ app.description }</p>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .apps
+				> div
+					padding 16px 0 0 0
+					border-bottom solid 1px #eee
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.apps = [];
+		this.fetching = true;
+
+		this.on('mount', () => {
+			this.api('i/authorized_apps').then(apps => {
+				this.apps = apps;
+				this.fetching = false;
+				this.update();
+			});
+		});
+	</script>
+</mk-authorized-apps>
diff --git a/src/web/app/common/-tags/ellipsis.tag b/src/web/app/common/-tags/ellipsis.tag
new file mode 100644
index 0000000000..734454e4a0
--- /dev/null
+++ b/src/web/app/common/-tags/ellipsis.tag
@@ -0,0 +1,24 @@
+<mk-ellipsis><span>.</span><span>.</span><span>.</span>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+
+			> span
+				animation ellipsis 1.4s infinite ease-in-out both
+
+				&:nth-child(1)
+					animation-delay 0s
+
+				&:nth-child(2)
+					animation-delay 0.16s
+
+				&:nth-child(3)
+					animation-delay 0.32s
+
+			@keyframes ellipsis
+				0%, 80%, 100%
+					opacity 1
+				40%
+					opacity 0
+	</style>
+</mk-ellipsis>
diff --git a/src/web/app/common/-tags/error.tag b/src/web/app/common/-tags/error.tag
new file mode 100644
index 0000000000..f09c0ce955
--- /dev/null
+++ b/src/web/app/common/-tags/error.tag
@@ -0,0 +1,215 @@
+<mk-error>
+	<img src="data:image/jpeg;base64,%base64:/assets/error.jpg%" alt=""/>
+	<h1>%i18n:common.tags.mk-error.title%</h1>
+	<p class="text">{
+		'%i18n:common.tags.mk-error.description%'.substr(0, '%i18n:common.tags.mk-error.description%'.indexOf('{'))
+	}<a @click="reload">{
+		'%i18n:common.tags.mk-error.description%'.match(/\{(.+?)\}/)[1]
+	}</a>{
+		'%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1)
+	}</p>
+	<button v-if="!troubleshooting" @click="troubleshoot">%i18n:common.tags.mk-error.troubleshoot%</button>
+	<mk-troubleshooter v-if="troubleshooting"/>
+	<p class="thanks">%i18n:common.tags.mk-error.thanks%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 100%
+			padding 32px 18px
+			text-align center
+
+			> img
+				display block
+				height 200px
+				margin 0 auto
+				pointer-events none
+				user-select none
+
+			> h1
+				display block
+				margin 1.25em auto 0.65em auto
+				font-size 1.5em
+				color #555
+
+			> .text
+				display block
+				margin 0 auto
+				max-width 600px
+				font-size 1em
+				color #666
+
+			> button
+				display block
+				margin 1em auto 0 auto
+				padding 8px 10px
+				color $theme-color-foreground
+				background $theme-color
+
+				&:focus
+					outline solid 3px rgba($theme-color, 0.3)
+
+				&:hover
+					background lighten($theme-color, 10%)
+
+				&:active
+					background darken($theme-color, 10%)
+
+			> mk-troubleshooter
+				margin 1em auto 0 auto
+
+			> .thanks
+				display block
+				margin 2em auto 0 auto
+				padding 2em 0 0 0
+				max-width 600px
+				font-size 0.9em
+				font-style oblique
+				color #aaa
+				border-top solid 1px #eee
+
+			@media (max-width 500px)
+				padding 24px 18px
+				font-size 80%
+
+				> img
+					height 150px
+
+	</style>
+	<script lang="typescript">
+		this.troubleshooting = false;
+
+		this.on('mount', () => {
+			document.title = 'Oops!';
+			document.documentElement.style.background = '#f8f8f8';
+		});
+
+		this.reload = () => {
+			location.reload();
+		};
+
+		this.troubleshoot = () => {
+			this.update({
+				troubleshooting: true
+			});
+		};
+	</script>
+</mk-error>
+
+<mk-troubleshooter>
+	<h1>%fa:wrench%%i18n:common.tags.mk-error.troubleshooter.title%</h1>
+	<div>
+		<p data-wip={ network == null }><template v-if="network != null"><template v-if="network">%fa:check%</template><template v-if="!network">%fa:times%</template></template>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis v-if="network == null"/></p>
+		<p v-if="network == true" data-wip={ internet == null }><template v-if="internet != null"><template v-if="internet">%fa:check%</template><template v-if="!internet">%fa:times%</template></template>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis v-if="internet == null"/></p>
+		<p v-if="internet == true" data-wip={ server == null }><template v-if="server != null"><template v-if="server">%fa:check%</template><template v-if="!server">%fa:times%</template></template>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis v-if="server == null"/></p>
+	</div>
+	<p v-if="!end">%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p>
+	<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>
+	<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p>
+	<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p>
+	<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 100%
+			max-width 500px
+			text-align left
+			background #fff
+			border-radius 8px
+			border solid 1px #ddd
+
+			> h1
+				margin 0
+				padding 0.6em 1.2em
+				font-size 1em
+				color #444
+				border-bottom solid 1px #eee
+
+				> [data-fa]
+					margin-right 0.25em
+
+			> div
+				overflow hidden
+				padding 0.6em 1.2em
+
+				> p
+					margin 0.5em 0
+					font-size 0.9em
+					color #444
+
+					&[data-wip]
+						color #888
+
+					> [data-fa]
+						margin-right 0.25em
+
+						&.times
+							color #e03524
+
+						&.check
+							color #84c32f
+
+			> p
+				margin 0
+				padding 0.6em 1.2em
+				font-size 1em
+				color #444
+				border-top solid 1px #eee
+
+				> b
+					> [data-fa]
+						margin-right 0.25em
+
+				&.success
+					> b
+						color #39adad
+
+				&:not(.success)
+					> b
+						color #ad4339
+
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			this.update({
+				network: navigator.onLine
+			});
+
+			if (!this.network) {
+				this.update({
+					end: true
+				});
+				return;
+			}
+
+			// Check internet connection
+			fetch('https://google.com?rand=' + Math.random(), {
+				mode: 'no-cors'
+			}).then(() => {
+				this.update({
+					internet: true
+				});
+
+				// Check misskey server is available
+				fetch(`${_API_URL_}/meta`).then(() => {
+					this.update({
+						end: true,
+						server: true
+					});
+				})
+				.catch(() => {
+					this.update({
+						end: true,
+						server: false
+					});
+				});
+			})
+			.catch(() => {
+				this.update({
+					end: true,
+					internet: false
+				});
+			});
+		});
+	</script>
+</mk-troubleshooter>
diff --git a/src/web/app/common/-tags/file-type-icon.tag b/src/web/app/common/-tags/file-type-icon.tag
new file mode 100644
index 0000000000..f630efe118
--- /dev/null
+++ b/src/web/app/common/-tags/file-type-icon.tag
@@ -0,0 +1,10 @@
+<mk-file-type-icon>
+	<template v-if="kind == 'image'">%fa:file-image%</template>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.kind = this.opts.type.split('/')[0];
+	</script>
+</mk-file-type-icon>
diff --git a/src/web/app/common/-tags/forkit.tag b/src/web/app/common/-tags/forkit.tag
new file mode 100644
index 0000000000..6a8d06e564
--- /dev/null
+++ b/src/web/app/common/-tags/forkit.tag
@@ -0,0 +1,40 @@
+<mk-forkit><a href="https://github.com/syuilo/misskey" target="_blank" title="%i18n:common.tags.mk-forkit.open-github-link%" aria-label="%i18n:common.tags.mk-forkit.open-github-link%">
+		<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="aria-hidden">
+			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+			<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>
+			<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
+		</svg></a>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position absolute
+			top 0
+			right 0
+
+			> a
+				display block
+
+				> svg
+					display block
+					//fill #151513
+					//color #fff
+					fill $theme-color
+					color $theme-color-foreground
+
+			.octo-arm
+				transform-origin 130px 106px
+
+			&:hover
+				.octo-arm
+					animation octocat-wave 560ms ease-in-out
+
+			@keyframes octocat-wave
+				0%, 100%
+					transform rotate(0)
+				20%, 60%
+					transform rotate(-25deg)
+				40%, 80%
+					transform rotate(10deg)
+
+	</style>
+</mk-forkit>
diff --git a/src/web/app/common/-tags/index.ts b/src/web/app/common/-tags/index.ts
new file mode 100644
index 0000000000..df99d93cc5
--- /dev/null
+++ b/src/web/app/common/-tags/index.ts
@@ -0,0 +1,30 @@
+require('./error.tag');
+require('./url.tag');
+require('./url-preview.tag');
+require('./time.tag');
+require('./file-type-icon.tag');
+require('./uploader.tag');
+require('./ellipsis.tag');
+require('./raw.tag');
+require('./number.tag');
+require('./special-message.tag');
+require('./signin.tag');
+require('./signup.tag');
+require('./forkit.tag');
+require('./introduction.tag');
+require('./signin-history.tag');
+require('./twitter-setting.tag');
+require('./authorized-apps.tag');
+require('./poll.tag');
+require('./poll-editor.tag');
+require('./messaging/room.tag');
+require('./messaging/message.tag');
+require('./messaging/index.tag');
+require('./messaging/form.tag');
+require('./stream-indicator.tag');
+require('./activity-table.tag');
+require('./reaction-picker.tag');
+require('./reactions-viewer.tag');
+require('./reaction-icon.tag');
+require('./post-menu.tag');
+require('./nav-links.tag');
diff --git a/src/web/app/common/-tags/introduction.tag b/src/web/app/common/-tags/introduction.tag
new file mode 100644
index 0000000000..c92cff0d1d
--- /dev/null
+++ b/src/web/app/common/-tags/introduction.tag
@@ -0,0 +1,25 @@
+<mk-introduction>
+	<article>
+		<h1>Misskeyとは？</h1>
+		<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
+		<p>無料で誰でも利用でき、広告も掲載していません。</p>
+		<p><a href={ _DOCS_URL_ } target="_blank">もっと知りたい方はこちら</a></p>
+	</article>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			h1
+				margin 0
+				text-align center
+				font-size 1.2em
+
+			p
+				margin 16px 0
+
+				&:last-child
+					margin 0
+					text-align center
+
+	</style>
+</mk-introduction>
diff --git a/src/web/app/common/-tags/messaging/form.tag b/src/web/app/common/-tags/messaging/form.tag
new file mode 100644
index 0000000000..9a58dc0ce7
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/form.tag
@@ -0,0 +1,175 @@
+<mk-messaging-form>
+	<textarea ref="text" onkeypress={ onkeypress } onpaste={ onpaste } placeholder="%i18n:common.input-message-here%"></textarea>
+	<div class="files"></div>
+	<mk-uploader ref="uploader"/>
+	<button class="send" @click="send" disabled={ sending } title="%i18n:common.send%">
+		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
+	</button>
+	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
+		%fa:upload%
+	</button>
+	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
+		%fa:R folder-open%
+	</button>
+	<input name="file" type="file" accept="image/*"/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> textarea
+				cursor auto
+				display block
+				width 100%
+				min-width 100%
+				max-width 100%
+				height 64px
+				margin 0
+				padding 8px
+				font-size 1em
+				color #000
+				outline none
+				border none
+				border-top solid 1px #eee
+				border-radius 0
+				box-shadow none
+				background transparent
+
+			> .send
+				position absolute
+				bottom 0
+				right 0
+				margin 0
+				padding 10px 14px
+				line-height 1em
+				font-size 1em
+				color #aaa
+				transition color 0.1s ease
+
+				&:hover
+					color $theme-color
+
+				&:active
+					color darken($theme-color, 10%)
+					transition color 0s ease
+
+			.files
+				display block
+				margin 0
+				padding 0 8px
+				list-style none
+
+				&:after
+					content ''
+					display block
+					clear both
+
+				> li
+					display block
+					float left
+					margin 4px
+					padding 0
+					width 64px
+					height 64px
+					background-color #eee
+					background-repeat no-repeat
+					background-position center center
+					background-size cover
+					cursor move
+
+					&:hover
+						> .remove
+							display block
+
+					> .remove
+						display none
+						position absolute
+						right -6px
+						top -6px
+						margin 0
+						padding 0
+						background transparent
+						outline none
+						border none
+						border-radius 0
+						box-shadow none
+						cursor pointer
+
+			.attach-from-local
+			.attach-from-drive
+				margin 0
+				padding 10px 14px
+				line-height 1em
+				font-size 1em
+				font-weight normal
+				text-decoration none
+				color #aaa
+				transition color 0.1s ease
+
+				&:hover
+					color $theme-color
+
+				&:active
+					color darken($theme-color, 10%)
+					transition color 0s ease
+
+			input[type=file]
+				display none
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.onpaste = e => {
+			const data = e.clipboardData;
+			const items = data.items;
+			for (const item of items) {
+				if (item.kind == 'file') {
+					this.upload(item.getAsFile());
+				}
+			}
+		};
+
+		this.onkeypress = e => {
+			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
+				this.send();
+			}
+		};
+
+		this.selectFile = () => {
+			this.$refs.file.click();
+		};
+
+		this.selectFileFromDrive = () => {
+			const browser = document.body.appendChild(document.createElement('mk-select-file-from-drive-window'));
+			const event = riot.observable();
+			riot.mount(browser, {
+				multiple: true,
+				event: event
+			});
+			event.one('selected', files => {
+				files.forEach(this.addFile);
+			});
+		};
+
+		this.send = () => {
+			this.sending = true;
+			this.api('messaging/messages/create', {
+				user_id: this.opts.user.id,
+				text: this.$refs.text.value
+			}).then(message => {
+				this.clear();
+			}).catch(err => {
+				console.error(err);
+			}).then(() => {
+				this.sending = false;
+				this.update();
+			});
+		};
+
+		this.clear = () => {
+			this.$refs.text.value = '';
+			this.files = [];
+			this.update();
+		};
+	</script>
+</mk-messaging-form>
diff --git a/src/web/app/common/-tags/messaging/index.tag b/src/web/app/common/-tags/messaging/index.tag
new file mode 100644
index 0000000000..0432f7e30f
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/index.tag
@@ -0,0 +1,456 @@
+<mk-messaging data-compact={ opts.compact }>
+	<div class="search" v-if="!opts.compact">
+		<div class="form">
+			<label for="search-input">%fa:search%</label>
+			<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
+		</div>
+		<div class="result">
+			<ol class="users" v-if="searchResult.length > 0" ref="searchResult">
+				<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } @click="user._click" tabindex="-1">
+					<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
+					<span class="name">{ user.name }</span>
+					<span class="username">@{ user.username }</span>
+				</li>
+			</ol>
+		</div>
+	</div>
+	<div class="history" v-if="history.length > 0">
+		<template each={ history }>
+			<a class="user" data-is-me={ is_me } data-is-read={ is_read } @click="_click">
+				<div>
+					<img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/>
+					<header>
+						<span class="name">{ is_me ? recipient.name : user.name }</span>
+						<span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
+						<mk-time time={ created_at }/>
+					</header>
+					<div class="body">
+						<p class="text"><span class="me" v-if="is_me">%i18n:common.tags.mk-messaging.you%:</span>{ text }</p>
+					</div>
+				</div>
+			</a>
+		</template>
+	</div>
+	<p class="no-history" v-if="!fetching && history.length == 0">%i18n:common.tags.mk-messaging.no-history%</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			&[data-compact]
+				font-size 0.8em
+
+				> .history
+					> a
+						&:last-child
+							border-bottom none
+
+						&:not([data-is-me]):not([data-is-read])
+							> div
+								background-image none
+								border-left solid 4px #3aa2dc
+
+						> div
+							padding 16px
+
+							> header
+								> mk-time
+									font-size 1em
+
+							> .avatar
+								width 42px
+								height 42px
+								margin 0 12px 0 0
+
+			> .search
+				display block
+				position -webkit-sticky
+				position sticky
+				top 0
+				left 0
+				z-index 1
+				width 100%
+				background #fff
+				box-shadow 0 0px 2px rgba(0, 0, 0, 0.2)
+
+				> .form
+					padding 8px
+					background #f7f7f7
+
+					> label
+						display block
+						position absolute
+						top 0
+						left 8px
+						z-index 1
+						height 100%
+						width 38px
+						pointer-events none
+
+						> [data-fa]
+							display block
+							position absolute
+							top 0
+							right 0
+							bottom 0
+							left 0
+							width 1em
+							height 1em
+							margin auto
+							color #555
+
+					> input
+						margin 0
+						padding 0 0 0 38px
+						width 100%
+						font-size 1em
+						line-height 38px
+						color #000
+						outline none
+						border solid 1px #eee
+						border-radius 5px
+						box-shadow none
+						transition color 0.5s ease, border 0.5s ease
+
+						&:hover
+							border solid 1px #ddd
+							transition border 0.2s ease
+
+						&:focus
+							color darken($theme-color, 20%)
+							border solid 1px $theme-color
+							transition color 0, border 0
+
+				> .result
+					display block
+					top 0
+					left 0
+					z-index 2
+					width 100%
+					margin 0
+					padding 0
+					background #fff
+
+					> .users
+						margin 0
+						padding 0
+						list-style none
+
+						> li
+							display inline-block
+							z-index 1
+							width 100%
+							padding 8px 32px
+							vertical-align top
+							white-space nowrap
+							overflow hidden
+							color rgba(0, 0, 0, 0.8)
+							text-decoration none
+							transition none
+							cursor pointer
+
+							&:hover
+							&:focus
+								color #fff
+								background $theme-color
+
+								.name
+									color #fff
+
+								.username
+									color #fff
+
+							&:active
+								color #fff
+								background darken($theme-color, 10%)
+
+								.name
+									color #fff
+
+								.username
+									color #fff
+
+							.avatar
+								vertical-align middle
+								min-width 32px
+								min-height 32px
+								max-width 32px
+								max-height 32px
+								margin 0 8px 0 0
+								border-radius 6px
+
+							.name
+								margin 0 8px 0 0
+								/*font-weight bold*/
+								font-weight normal
+								color rgba(0, 0, 0, 0.8)
+
+							.username
+								font-weight normal
+								color rgba(0, 0, 0, 0.3)
+
+			> .history
+
+				> a
+					display block
+					text-decoration none
+					background #fff
+					border-bottom solid 1px #eee
+
+					*
+						pointer-events none
+						user-select none
+
+					&:hover
+						background #fafafa
+
+						> .avatar
+							filter saturate(200%)
+
+					&:active
+						background #eee
+
+					&[data-is-read]
+					&[data-is-me]
+						opacity 0.8
+
+					&:not([data-is-me]):not([data-is-read])
+						> div
+							background-image url("/assets/unread.svg")
+							background-repeat no-repeat
+							background-position 0 center
+
+					&:after
+						content ""
+						display block
+						clear both
+
+					> div
+						max-width 500px
+						margin 0 auto
+						padding 20px 30px
+
+						&:after
+							content ""
+							display block
+							clear both
+
+						> header
+							margin-bottom 2px
+							white-space nowrap
+							overflow hidden
+
+							> .name
+								text-align left
+								display inline
+								margin 0
+								padding 0
+								font-size 1em
+								color rgba(0, 0, 0, 0.9)
+								font-weight bold
+								transition all 0.1s ease
+
+							> .username
+								text-align left
+								margin 0 0 0 8px
+								color rgba(0, 0, 0, 0.5)
+
+							> mk-time
+								position absolute
+								top 0
+								right 0
+								display inline
+								color rgba(0, 0, 0, 0.5)
+								font-size 80%
+
+						> .avatar
+							float left
+							width 54px
+							height 54px
+							margin 0 16px 0 0
+							border-radius 8px
+							transition all 0.1s ease
+
+						> .body
+
+							> .text
+								display block
+								margin 0 0 0 0
+								padding 0
+								overflow hidden
+								overflow-wrap break-word
+								font-size 1.1em
+								color rgba(0, 0, 0, 0.8)
+
+								.me
+									color rgba(0, 0, 0, 0.4)
+
+							> .image
+								display block
+								max-width 100%
+								max-height 512px
+
+			> .no-history
+				margin 0
+				padding 2em 1em
+				text-align center
+				color #999
+				font-weight 500
+
+			> .fetching
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+			// TODO: element base media query
+			@media (max-width 400px)
+				> .search
+					> .result
+						> .users
+							> li
+								padding 8px 16px
+
+				> .history
+					> a
+						&:not([data-is-me]):not([data-is-read])
+							> div
+								background-image none
+								border-left solid 4px #3aa2dc
+
+						> div
+							padding 16px
+							font-size 14px
+
+							> .avatar
+								margin 0 12px 0 0
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('messaging-index-stream');
+		this.connection = this.messagingIndexStream.getConnection();
+		this.connectionId = this.messagingIndexStream.use();
+
+		this.searchResult = [];
+		this.history = [];
+		this.fetching = true;
+
+		this.registerMessage = message => {
+			message.is_me = message.user_id == this.I.id;
+			message._click = () => {
+				this.$emit('navigate-user', message.is_me ? message.recipient : message.user);
+			};
+		};
+
+		this.on('mount', () => {
+			this.connection.on('message', this.onMessage);
+			this.connection.on('read', this.onRead);
+
+			this.api('messaging/history').then(history => {
+				this.fetching = false;
+				history.forEach(message => {
+					this.registerMessage(message);
+				});
+				this.history = history;
+				this.update();
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('message', this.onMessage);
+			this.connection.off('read', this.onRead);
+			this.messagingIndexStream.dispose(this.connectionId);
+		});
+
+		this.onMessage = message => {
+			this.history = this.history.filter(m => !(
+				(m.recipient_id == message.recipient_id && m.user_id == message.user_id) ||
+				(m.recipient_id == message.user_id && m.user_id == message.recipient_id)));
+
+			this.registerMessage(message);
+
+			this.history.unshift(message);
+			this.update();
+		};
+
+		this.onRead = ids => {
+			ids.forEach(id => {
+				const found = this.history.find(m => m.id == id);
+				if (found) found.is_read = true;
+			});
+
+			this.update();
+		};
+
+		this.search = () => {
+			const q = this.$refs.search.value;
+			if (q == '') {
+				this.searchResult = [];
+				return;
+			}
+			this.api('users/search', {
+				query: q,
+				max: 5
+			}).then(users => {
+				users.forEach(user => {
+					user._click = () => {
+						this.$emit('navigate-user', user);
+						this.searchResult = [];
+					};
+				});
+				this.update({
+					searchResult: users
+				});
+			});
+		};
+
+		this.onSearchKeydown = e => {
+			switch (e.which) {
+				case 9: // [TAB]
+				case 40: // [↓]
+					e.preventDefault();
+					e.stopPropagation();
+					this.$refs.searchResult.childNodes[0].focus();
+					break;
+			}
+		};
+
+		this.onSearchResultKeydown = (i, e) => {
+			const cancel = () => {
+				e.preventDefault();
+				e.stopPropagation();
+			};
+			switch (true) {
+				case e.which == 10: // [ENTER]
+				case e.which == 13: // [ENTER]
+					cancel();
+					this.searchResult[i]._click();
+					break;
+
+				case e.which == 27: // [ESC]
+					cancel();
+					this.$refs.search.focus();
+					break;
+
+				case e.which == 9 && e.shiftKey: // [TAB] + [Shift]
+				case e.which == 38: // [↑]
+					cancel();
+					(this.$refs.searchResult.childNodes[i].previousElementSibling || this.$refs.searchResult.childNodes[this.searchResult.length - 1]).focus();
+					break;
+
+				case e.which == 9: // [TAB]
+				case e.which == 40: // [↓]
+					cancel();
+					(this.$refs.searchResult.childNodes[i].nextElementSibling || this.$refs.searchResult.childNodes[0]).focus();
+					break;
+			}
+		};
+
+	</script>
+</mk-messaging>
diff --git a/src/web/app/common/-tags/messaging/message.tag b/src/web/app/common/-tags/messaging/message.tag
new file mode 100644
index 0000000000..ba6d26a184
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/message.tag
@@ -0,0 +1,238 @@
+<mk-messaging-message data-is-me={ message.is_me }>
+	<a class="avatar-anchor" href={ '/' + message.user.username } title={ message.user.username } target="_blank">
+		<img class="avatar" src={ message.user.avatar_url + '?thumbnail&size=80' } alt=""/>
+	</a>
+	<div class="content-container">
+		<div class="balloon">
+			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
+			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%"><img src="/assets/desktop/messaging/delete.png" alt="Delete"/></button>
+			<div class="content" v-if="!message.is_deleted">
+				<div ref="text"></div>
+				<div class="image" v-if="message.file"><img src={ message.file.url } alt="image" title={ message.file.name }/></div>
+			</div>
+			<div class="content" v-if="message.is_deleted">
+				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
+			</div>
+		</div>
+		<footer>
+			<mk-time time={ message.created_at }/><template v-if="message.is_edited">%fa:pencil-alt%</template>
+		</footer>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			$me-balloon-color = #23A7B6
+
+			display block
+			padding 10px 12px 10px 12px
+			background-color transparent
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .avatar-anchor
+				display block
+
+				> .avatar
+					display block
+					min-width 54px
+					min-height 54px
+					max-width 54px
+					max-height 54px
+					margin 0
+					border-radius 8px
+					transition all 0.1s ease
+
+			> .content-container
+				display block
+				margin 0 12px
+				padding 0
+				max-width calc(100% - 78px)
+
+				> .balloon
+					display block
+					float inherit
+					margin 0
+					padding 0
+					max-width 100%
+					min-height 38px
+					border-radius 16px
+
+					&:before
+						content ""
+						pointer-events none
+						display block
+						position absolute
+						top 12px
+
+					&:hover
+						> .delete-button
+							display block
+
+					> .delete-button
+						display none
+						position absolute
+						z-index 1
+						top -4px
+						right -4px
+						margin 0
+						padding 0
+						cursor pointer
+						outline none
+						border none
+						border-radius 0
+						box-shadow none
+						background transparent
+
+						> img
+							vertical-align bottom
+							width 16px
+							height 16px
+							cursor pointer
+
+					> .read
+						user-select none
+						display block
+						position absolute
+						z-index 1
+						bottom -4px
+						left -12px
+						margin 0
+						color rgba(0, 0, 0, 0.5)
+						font-size 11px
+
+					> .content
+
+						> .is-deleted
+							display block
+							margin 0
+							padding 0
+							overflow hidden
+							overflow-wrap break-word
+							font-size 1em
+							color rgba(0, 0, 0, 0.5)
+
+						> [ref='text']
+							display block
+							margin 0
+							padding 8px 16px
+							overflow hidden
+							overflow-wrap break-word
+							font-size 1em
+							color rgba(0, 0, 0, 0.8)
+
+							&, *
+								user-select text
+								cursor auto
+
+							& + .file
+								&.image
+									> img
+										border-radius 0 0 16px 16px
+
+						> .file
+							&.image
+								> img
+									display block
+									max-width 100%
+									max-height 512px
+									border-radius 16px
+
+				> footer
+					display block
+					clear both
+					margin 0
+					padding 2px
+					font-size 10px
+					color rgba(0, 0, 0, 0.4)
+
+					> [data-fa]
+						margin-left 4px
+
+			&:not([data-is-me='true'])
+				> .avatar-anchor
+					float left
+
+				> .content-container
+					float left
+
+					> .balloon
+						background #eee
+
+						&:before
+							left -14px
+							border-top solid 8px transparent
+							border-right solid 8px #eee
+							border-bottom solid 8px transparent
+							border-left solid 8px transparent
+
+					> footer
+						text-align left
+
+			&[data-is-me='true']
+				> .avatar-anchor
+					float right
+
+				> .content-container
+					float right
+
+					> .balloon
+						background $me-balloon-color
+
+						&:before
+							right -14px
+							left auto
+							border-top solid 8px transparent
+							border-right solid 8px transparent
+							border-bottom solid 8px transparent
+							border-left solid 8px $me-balloon-color
+
+						> .content
+
+							> p.is-deleted
+								color rgba(255, 255, 255, 0.5)
+
+							> [ref='text']
+								&, *
+									color #fff !important
+
+					> footer
+						text-align right
+
+			&[data-is-deleted='true']
+					> .content-container
+						opacity 0.5
+
+	</style>
+	<script lang="typescript">
+		import compile from '../../../common/scripts/text-compiler';
+
+		this.mixin('i');
+
+		this.message = this.opts.message;
+		this.message.is_me = this.message.user.id == this.I.id;
+
+		this.on('mount', () => {
+			if (this.message.text) {
+				const tokens = this.message.ast;
+
+				this.$refs.text.innerHTML = compile(tokens);
+
+				Array.from(this.$refs.text.children).forEach(e => {
+					if (e.tagName == 'MK-URL') riot.mount(e);
+				});
+
+				// URLをプレビュー
+				tokens
+					.filter(t => t.type == 'link')
+					.map(t => {
+						const el = this.$refs.text.appendChild(document.createElement('mk-url-preview'));
+						riot.mount(el, {
+							url: t.content
+						});
+					});
+			}
+		});
+	</script>
+</mk-messaging-message>
diff --git a/src/web/app/common/-tags/messaging/room.tag b/src/web/app/common/-tags/messaging/room.tag
new file mode 100644
index 0000000000..990f20a8e3
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/room.tag
@@ -0,0 +1,319 @@
+<mk-messaging-room>
+	<div class="stream">
+		<p class="init" v-if="init">%fa:spinner .spin%%i18n:common.loading%</p>
+		<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
+		<p class="no-history" v-if="!init && messages.length > 0 && !moreMessagesIsInStock">%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
+		<button class="more { fetching: fetchingMoreMessages }" v-if="moreMessagesIsInStock" @click="fetchMoreMessages" disabled={ fetchingMoreMessages }>
+			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
+		</button>
+		<template each={ message, i in messages }>
+			<mk-messaging-message message={ message }/>
+			<p class="date" v-if="i != messages.length - 1 && message._date != messages[i + 1]._date"><span>{ messages[i + 1]._datetext }</span></p>
+		</template>
+	</div>
+	<footer>
+		<div ref="notifications"></div>
+		<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
+		<mk-messaging-form user={ user }/>
+	</footer>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .stream
+				max-width 600px
+				margin 0 auto
+
+				> .init
+					width 100%
+					margin 0
+					padding 16px 8px 8px 8px
+					text-align center
+					font-size 0.8em
+					color rgba(0, 0, 0, 0.4)
+
+					[data-fa]
+						margin-right 4px
+
+				> .empty
+					width 100%
+					margin 0
+					padding 16px 8px 8px 8px
+					text-align center
+					font-size 0.8em
+					color rgba(0, 0, 0, 0.4)
+
+					[data-fa]
+						margin-right 4px
+
+				> .no-history
+					display block
+					margin 0
+					padding 16px
+					text-align center
+					font-size 0.8em
+					color rgba(0, 0, 0, 0.4)
+
+					[data-fa]
+						margin-right 4px
+
+				> .more
+					display block
+					margin 16px auto
+					padding 0 12px
+					line-height 24px
+					color #fff
+					background rgba(0, 0, 0, 0.3)
+					border-radius 12px
+
+					&:hover
+						background rgba(0, 0, 0, 0.4)
+
+					&:active
+						background rgba(0, 0, 0, 0.5)
+
+					&.fetching
+						cursor wait
+
+					> [data-fa]
+						margin-right 4px
+
+				> .message
+					// something
+
+				> .date
+					display block
+					margin 8px 0
+					text-align center
+
+					&:before
+						content ''
+						display block
+						position absolute
+						height 1px
+						width 90%
+						top 16px
+						left 0
+						right 0
+						margin 0 auto
+						background rgba(0, 0, 0, 0.1)
+
+					> span
+						display inline-block
+						margin 0
+						padding 0 16px
+						//font-weight bold
+						line-height 32px
+						color rgba(0, 0, 0, 0.3)
+						background #fff
+
+			> footer
+				position -webkit-sticky
+				position sticky
+				z-index 2
+				bottom 0
+				width 100%
+				max-width 600px
+				margin 0 auto
+				padding 0
+				background rgba(255, 255, 255, 0.95)
+				background-clip content-box
+
+				> [ref='notifications']
+					position absolute
+					top -48px
+					width 100%
+					padding 8px 0
+					text-align center
+
+					&:empty
+						display none
+
+					> p
+						display inline-block
+						margin 0
+						padding 0 12px 0 28px
+						cursor pointer
+						line-height 32px
+						font-size 12px
+						color $theme-color-foreground
+						background $theme-color
+						border-radius 16px
+						transition opacity 1s ease
+
+						> [data-fa]
+							position absolute
+							top 0
+							left 10px
+							line-height 32px
+							font-size 16px
+
+				> .grippie
+					height 10px
+					margin-top -10px
+					background transparent
+					cursor ns-resize
+
+					&:hover
+						//background rgba(0, 0, 0, 0.1)
+
+					&:active
+						//background rgba(0, 0, 0, 0.2)
+
+	</style>
+	<script lang="typescript">
+		import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.user = this.opts.user;
+		this.init = true;
+		this.sending = false;
+		this.messages = [];
+		this.isNaked = this.opts.isNaked;
+
+		this.connection = new MessagingStreamConnection(this.I, this.user.id);
+
+		this.on('mount', () => {
+			this.connection.on('message', this.onMessage);
+			this.connection.on('read', this.onRead);
+
+			document.addEventListener('visibilitychange', this.onVisibilitychange);
+
+			this.fetchMessages().then(() => {
+				this.init = false;
+				this.update();
+				this.scrollToBottom();
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('message', this.onMessage);
+			this.connection.off('read', this.onRead);
+			this.connection.close();
+
+			document.removeEventListener('visibilitychange', this.onVisibilitychange);
+		});
+
+		this.on('update', () => {
+			this.messages.forEach(message => {
+				const date = (new Date(message.created_at)).getDate();
+				const month = (new Date(message.created_at)).getMonth() + 1;
+				message._date = date;
+				message._datetext = month + '月 ' + date + '日';
+			});
+		});
+
+		this.onMessage = (message) => {
+			const isBottom = this.isBottom();
+
+			this.messages.push(message);
+			if (message.user_id != this.I.id && !document.hidden) {
+				this.connection.send({
+					type: 'read',
+					id: message.id
+				});
+			}
+			this.update();
+
+			if (isBottom) {
+				// Scroll to bottom
+				this.scrollToBottom();
+			} else if (message.user_id != this.I.id) {
+				// Notify
+				this.notify('%i18n:common.tags.mk-messaging-room.new-message%');
+			}
+		};
+
+		this.onRead = ids => {
+			if (!Array.isArray(ids)) ids = [ids];
+			ids.forEach(id => {
+				if (this.messages.some(x => x.id == id)) {
+					const exist = this.messages.map(x => x.id).indexOf(id);
+					this.messages[exist].is_read = true;
+					this.update();
+				}
+			});
+		};
+
+		this.fetchMoreMessages = () => {
+			this.update({
+				fetchingMoreMessages: true
+			});
+			this.fetchMessages().then(() => {
+				this.update({
+					fetchingMoreMessages: false
+				});
+			});
+		};
+
+		this.fetchMessages = () => new Promise((resolve, reject) => {
+			const max = this.moreMessagesIsInStock ? 20 : 10;
+
+			this.api('messaging/messages', {
+				user_id: this.user.id,
+				limit: max + 1,
+				until_id: this.moreMessagesIsInStock ? this.messages[0].id : undefined
+			}).then(messages => {
+				if (messages.length == max + 1) {
+					this.moreMessagesIsInStock = true;
+					messages.pop();
+				} else {
+					this.moreMessagesIsInStock = false;
+				}
+
+				this.messages.unshift.apply(this.messages, messages.reverse());
+				this.update();
+
+				resolve();
+			});
+		});
+
+		this.isBottom = () => {
+			const asobi = 32;
+			const current = this.isNaked
+				? window.scrollY + window.innerHeight
+				: this.root.scrollTop + this.root.offsetHeight;
+			const max = this.isNaked
+				? document.body.offsetHeight
+				: this.root.scrollHeight;
+			return current > (max - asobi);
+		};
+
+		this.scrollToBottom = () => {
+			if (this.isNaked) {
+				window.scroll(0, document.body.offsetHeight);
+			} else {
+				this.root.scrollTop = this.root.scrollHeight;
+			}
+		};
+
+		this.notify = message => {
+			const n = document.createElement('p');
+			n.innerHTML = '%fa:arrow-circle-down%' + message;
+			n.onclick = () => {
+				this.scrollToBottom();
+				n.parentNode.removeChild(n);
+			};
+			this.$refs.notifications.appendChild(n);
+
+			setTimeout(() => {
+				n.style.opacity = 0;
+				setTimeout(() => n.parentNode.removeChild(n), 1000);
+			}, 4000);
+		};
+
+		this.onVisibilitychange = () => {
+			if (document.hidden) return;
+			this.messages.forEach(message => {
+				if (message.user_id !== this.I.id && !message.is_read) {
+					this.connection.send({
+						type: 'read',
+						id: message.id
+					});
+				}
+			});
+		};
+	</script>
+</mk-messaging-room>
diff --git a/src/web/app/common/-tags/nav-links.tag b/src/web/app/common/-tags/nav-links.tag
new file mode 100644
index 0000000000..3f2613c16d
--- /dev/null
+++ b/src/web/app/common/-tags/nav-links.tag
@@ -0,0 +1,10 @@
+<mk-nav-links>
+	<a href={ aboutUrl }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/about`;
+	</script>
+</mk-nav-links>
diff --git a/src/web/app/common/-tags/number.tag b/src/web/app/common/-tags/number.tag
new file mode 100644
index 0000000000..9cbbacd2c7
--- /dev/null
+++ b/src/web/app/common/-tags/number.tag
@@ -0,0 +1,16 @@
+<mk-number>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			let value = this.opts.value;
+			const max = this.opts.max;
+
+			if (max != null && value > max) value = max;
+
+			this.root.innerHTML = value.toLocaleString();
+		});
+	</script>
+</mk-number>
diff --git a/src/web/app/common/-tags/poll-editor.tag b/src/web/app/common/-tags/poll-editor.tag
new file mode 100644
index 0000000000..0de26f6547
--- /dev/null
+++ b/src/web/app/common/-tags/poll-editor.tag
@@ -0,0 +1,121 @@
+<mk-poll-editor>
+	<p class="caution" v-if="choices.length < 2">
+		%fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
+	</p>
+	<ul ref="choices">
+		<li each={ choice, i in choices }>
+			<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
+			<button @click="remove.bind(null, i)" title="%i18n:common.tags.mk-poll-editor.remove%">
+				%fa:times%
+			</button>
+		</li>
+	</ul>
+	<button class="add" v-if="choices.length < 10" @click="add">%i18n:common.tags.mk-poll-editor.add%</button>
+	<button class="destroy" @click="destroy" title="%i18n:common.tags.mk-poll-editor.destroy%">
+		%fa:times%
+	</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 8px
+
+			> .caution
+				margin 0 0 8px 0
+				font-size 0.8em
+				color #f00
+
+				> [data-fa]
+					margin-right 4px
+
+			> ul
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 8px 0
+					padding 0
+					width 100%
+
+					&:first-child
+						margin-top 0
+
+					&:last-child
+						margin-bottom 0
+
+					> input
+						padding 6px
+						border solid 1px rgba($theme-color, 0.1)
+						border-radius 4px
+
+						&:hover
+							border-color rgba($theme-color, 0.2)
+
+						&:focus
+							border-color rgba($theme-color, 0.5)
+
+					> button
+						padding 4px 8px
+						color rgba($theme-color, 0.4)
+
+						&:hover
+							color rgba($theme-color, 0.6)
+
+						&:active
+							color darken($theme-color, 30%)
+
+			> .add
+				margin 8px 0 0 0
+				vertical-align top
+				color $theme-color
+
+			> .destroy
+				position absolute
+				top 0
+				right 0
+				padding 4px 8px
+				color rgba($theme-color, 0.4)
+
+				&:hover
+					color rgba($theme-color, 0.6)
+
+				&:active
+					color darken($theme-color, 30%)
+
+	</style>
+	<script lang="typescript">
+		this.choices = ['', ''];
+
+		this.oninput = (i, e) => {
+			this.choices[i] = e.target.value;
+		};
+
+		this.add = () => {
+			this.choices.push('');
+			this.update();
+			this.$refs.choices.childNodes[this.choices.length - 1].childNodes[0].focus();
+		};
+
+		this.remove = (i) => {
+			this.choices = this.choices.filter((_, _i) => _i != i);
+			this.update();
+		};
+
+		this.destroy = () => {
+			this.opts.ondestroy();
+		};
+
+		this.get = () => {
+			return {
+				choices: this.choices.filter(choice => choice != '')
+			}
+		};
+
+		this.set = data => {
+			if (data.choices.length == 0) return;
+			this.choices = data.choices;
+		};
+	</script>
+</mk-poll-editor>
diff --git a/src/web/app/common/-tags/post-menu.tag b/src/web/app/common/-tags/post-menu.tag
new file mode 100644
index 0000000000..c2b362e8b5
--- /dev/null
+++ b/src/web/app/common/-tags/post-menu.tag
@@ -0,0 +1,157 @@
+<mk-post-menu>
+	<div class="backdrop" ref="backdrop" @click="close"></div>
+	<div class="popover { compact: opts.compact }" ref="popover">
+		<button v-if="post.user_id === I.id" @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
+		<div v-if="I.is_pro && !post.is_category_verified">
+			<select ref="categorySelect">
+				<option value="">%i18n:common.tags.mk-post-menu.select%</option>
+				<option value="music">%i18n:common.post_categories.music%</option>
+				<option value="game">%i18n:common.post_categories.game%</option>
+				<option value="anime">%i18n:common.post_categories.anime%</option>
+				<option value="it">%i18n:common.post_categories.it%</option>
+				<option value="gadgets">%i18n:common.post_categories.gadgets%</option>
+				<option value="photography">%i18n:common.post_categories.photography%</option>
+			</select>
+			<button @click="categorize">%i18n:common.tags.mk-post-menu.categorize%</button>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		$border-color = rgba(27, 31, 35, 0.15)
+
+		:scope
+			display block
+			position initial
+
+			> .backdrop
+				position fixed
+				top 0
+				left 0
+				z-index 10000
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.1)
+				opacity 0
+
+			> .popover
+				position absolute
+				z-index 10001
+				background #fff
+				border 1px solid $border-color
+				border-radius 4px
+				box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
+				transform scale(0.5)
+				opacity 0
+
+				$balloon-size = 16px
+
+				&:not(.compact)
+					margin-top $balloon-size
+					transform-origin center -($balloon-size)
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top -($balloon-size * 2)
+						left s('calc(50% - %s)', $balloon-size)
+						border-top solid $balloon-size transparent
+						border-left solid $balloon-size transparent
+						border-right solid $balloon-size transparent
+						border-bottom solid $balloon-size $border-color
+
+					&:after
+						content ""
+						display block
+						position absolute
+						top -($balloon-size * 2) + 1.5px
+						left s('calc(50% - %s)', $balloon-size)
+						border-top solid $balloon-size transparent
+						border-left solid $balloon-size transparent
+						border-right solid $balloon-size transparent
+						border-bottom solid $balloon-size #fff
+
+				> button
+					display block
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.post = this.opts.post;
+		this.source = this.opts.source;
+
+		this.on('mount', () => {
+			const rect = this.source.getBoundingClientRect();
+			const width = this.$refs.popover.offsetWidth;
+			const height = this.$refs.popover.offsetHeight;
+			if (this.opts.compact) {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
+				this.$refs.popover.style.top = (y - (height / 2)) + 'px';
+			} else {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
+				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
+				this.$refs.popover.style.top = y + 'px';
+			}
+
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.popover,
+				opacity: 1,
+				scale: [0.5, 1],
+				duration: 500
+			});
+		});
+
+		this.pin = () => {
+			this.api('i/pin', {
+				post_id: this.post.id
+			}).then(() => {
+				if (this.opts.cb) this.opts.cb('pinned', '%i18n:common.tags.mk-post-menu.pinned%');
+				this.$destroy();
+			});
+		};
+
+		this.categorize = () => {
+			const category = this.$refs.categorySelect.options[this.$refs.categorySelect.selectedIndex].value;
+			this.api('posts/categorize', {
+				post_id: this.post.id,
+				category: category
+			}).then(() => {
+				if (this.opts.cb) this.opts.cb('categorized', '%i18n:common.tags.mk-post-menu.categorized%');
+				this.$destroy();
+			});
+		};
+
+		this.close = () => {
+			this.$refs.backdrop.style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 0,
+				duration: 200,
+				easing: 'linear'
+			});
+
+			this.$refs.popover.style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.popover,
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: () => this.$destroy()
+			});
+		};
+	</script>
+</mk-post-menu>
diff --git a/src/web/app/common/-tags/raw.tag b/src/web/app/common/-tags/raw.tag
new file mode 100644
index 0000000000..149ac6c4bf
--- /dev/null
+++ b/src/web/app/common/-tags/raw.tag
@@ -0,0 +1,13 @@
+<mk-raw>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.root.innerHTML = this.opts.content;
+
+		this.on('updated', () => {
+			this.root.innerHTML = this.opts.content;
+		});
+	</script>
+</mk-raw>
diff --git a/src/web/app/common/-tags/signin-history.tag b/src/web/app/common/-tags/signin-history.tag
new file mode 100644
index 0000000000..57ac5ec979
--- /dev/null
+++ b/src/web/app/common/-tags/signin-history.tag
@@ -0,0 +1,116 @@
+<mk-signin-history>
+	<div class="records" v-if="history.length != 0">
+		<mk-signin-record each={ rec in history } rec={ rec }/>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.history = [];
+		this.fetching = true;
+
+		this.on('mount', () => {
+			this.api('i/signin_history').then(history => {
+				this.update({
+					fetching: false,
+					history: history
+				});
+			});
+
+			this.connection.on('signin', this.onSignin);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('signin', this.onSignin);
+			this.stream.dispose(this.connectionId);
+		});
+
+		this.onSignin = signin => {
+			this.history.unshift(signin);
+			this.update();
+		};
+	</script>
+</mk-signin-history>
+
+<mk-signin-record>
+	<header @click="toggle">
+		<template v-if="rec.success">%fa:check%</template>
+		<template v-if="!rec.success">%fa:times%</template>
+		<span class="ip">{ rec.ip }</span>
+		<mk-time time={ rec.created_at }/>
+	</header>
+	<pre ref="headers" class="json" show={ show }>{ JSON.stringify(rec.headers, null, 2) }</pre>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			border-bottom solid 1px #eee
+
+			> header
+				display flex
+				padding 8px 0
+				line-height 32px
+				cursor pointer
+
+				> [data-fa]
+					margin-right 8px
+					text-align left
+
+					&.check
+						color #0fda82
+
+					&.times
+						color #ff3100
+
+				> .ip
+					display inline-block
+					text-align left
+					padding 8px
+					line-height 16px
+					font-family monospace
+					font-size 14px
+					color #444
+					background #f8f8f8
+					border-radius 4px
+
+				> mk-time
+					margin-left auto
+					text-align right
+					color #777
+
+			> pre
+				overflow auto
+				margin 0 0 16px 0
+				max-height 100px
+				white-space pre-wrap
+				word-break break-all
+				color #4a535a
+
+	</style>
+
+	<script lang="typescript">
+		import hljs from 'highlight.js';
+
+		this.rec = this.opts.rec;
+		this.show = false;
+
+		this.on('mount', () => {
+			hljs.highlightBlock(this.$refs.headers);
+		});
+
+		this.toggle = () => {
+			this.update({
+				show: !this.show
+			});
+		};
+	</script>
+</mk-signin-record>
diff --git a/src/web/app/common/-tags/signin.tag b/src/web/app/common/-tags/signin.tag
new file mode 100644
index 0000000000..89213d1f73
--- /dev/null
+++ b/src/web/app/common/-tags/signin.tag
@@ -0,0 +1,155 @@
+<mk-signin>
+	<form :class="{ signing: signing }" onsubmit={ onsubmit }>
+		<label class="user-name">
+			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/>%fa:at%
+		</label>
+		<label class="password">
+			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/>%fa:lock%
+		</label>
+		<label class="token" v-if="user && user.two_factor_enabled">
+			<input ref="token" type="number" placeholder="%i18n:common.tags.mk-signin.token%" required="required"/>%fa:lock%
+		</label>
+		<button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button>
+	</form>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> form
+				display block
+				z-index 2
+
+				&.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(0, 0, 0, 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(0, 0, 0, 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
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = null;
+		this.signing = false;
+
+		this.oninput = () => {
+			this.api('users/show', {
+				username: this.$refs.username.value
+			}).then(user => {
+				this.user = user;
+				this.$emit('user', user);
+				this.update();
+			});
+		};
+
+		this.onsubmit = e => {
+			e.preventDefault();
+
+			if (this.$refs.username.value == '') {
+				this.$refs.username.focus();
+				return false;
+			}
+			if (this.$refs.password.value == '') {
+				this.$refs.password.focus();
+				return false;
+			}
+			if (this.user && this.user.two_factor_enabled && this.$refs.token.value == '') {
+				this.$refs.token.focus();
+				return false;
+			}
+
+			this.update({
+				signing: true
+			});
+
+			this.api('signin', {
+				username: this.$refs.username.value,
+				password: this.$refs.password.value,
+				token: this.user && this.user.two_factor_enabled ? this.$refs.token.value : undefined
+			}).then(() => {
+				location.reload();
+			}).catch(() => {
+				alert('something happened');
+				this.update({
+					signing: false
+				});
+			});
+
+			return false;
+		};
+	</script>
+</mk-signin>
diff --git a/src/web/app/common/-tags/signup.tag b/src/web/app/common/-tags/signup.tag
new file mode 100644
index 0000000000..99be10609b
--- /dev/null
+++ b/src/web/app/common/-tags/signup.tag
@@ -0,0 +1,307 @@
+<mk-signup>
+	<form onsubmit={ onsubmit } autocomplete="off">
+		<label class="username">
+			<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
+			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup={ onChangeUsername }/>
+			<p class="profile-page-url-preview" v-if="refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange'">{ _URL_ + '/' + refs.username.value }</p>
+			<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:common.tags.mk-signup.checking%</p>
+			<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.available%</p>
+			<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.unavailable%</p>
+			<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.error%</p>
+			<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.invalid-format%</p>
+			<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-short%</p>
+			<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-long%</p>
+		</label>
+		<label class="password">
+			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%</p>
+			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePassword }/>
+			<div class="meter" v-if="passwordStrength != ''" data-strength={ passwordStrength }>
+				<div class="value" ref="passwordMetar"></div>
+			</div>
+			<p class="info" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.weak-password%</p>
+			<p class="info" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.normal-password%</p>
+			<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.strong-password%</p>
+		</label>
+		<label class="retype-password">
+			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
+			<input ref="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePasswordRetype }/>
+			<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
+			<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.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:common.tags.mk-signup.recaptcha%</p>
+			<div v-if="recaptcha" class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div>
+		</label>
+		<label class="agree-tou">
+			<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
+			<p><a href={ touUrl } target="_blank">利用規約</a>に同意する</p>
+		</label>
+		<button @click="onsubmit">%i18n:common.tags.mk-signup.create%</button>
+	</form>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			min-width 302px
+			overflow hidden
+
+			> form
+
+				label
+					display block
+					margin 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(0, 0, 0, 0.1)
+					border-radius 4px
+					box-shadow 0 0 0 114514px #fff inset
+					transition all .3s ease
+
+					&:hover
+						border-color rgba(0, 0, 0, 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
+
+					&:hover
+						background #f4f4f4
+
+					&:active
+						background #eee
+
+					&, *
+						cursor pointer
+
+					p
+						display inline
+						color #555
+
+				button
+					margin 0 0 32px 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>
+	<script lang="typescript">
+		this.mixin('api');
+		const getPasswordStrength = require('syuilo-password-strength');
+
+		this.usernameState = null;
+		this.passwordStrength = '';
+		this.passwordRetypeState = null;
+		this.recaptchaed = false;
+
+		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/tou`;
+
+		window.onRecaptchaed = () => {
+			this.recaptchaed = true;
+			this.update();
+		};
+
+		window.onRecaptchaExpired = () => {
+			this.recaptchaed = false;
+			this.update();
+		};
+
+		this.on('mount', () => {
+			this.update({
+				recaptcha: {
+					site_key: _RECAPTCHA_SITEKEY_
+				}
+			});
+
+			const head = document.getElementsByTagName('head')[0];
+			const script = document.createElement('script');
+			script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
+			head.appendChild(script);
+		});
+
+		this.onChangeUsername = () => {
+			const username = this.$refs.username.value;
+
+			if (username == '') {
+				this.update({
+					usernameState: null
+				});
+				return;
+			}
+
+			const err =
+				!username.match(/^[a-zA-Z0-9\-]+$/) ? 'invalid-format' :
+				username.length < 3 ? 'min-range' :
+				username.length > 20 ? 'max-range' :
+				null;
+
+			if (err) {
+				this.update({
+					usernameState: err
+				});
+				return;
+			}
+
+			this.update({
+				usernameState: 'wait'
+			});
+
+			this.api('username/available', {
+				username: username
+			}).then(result => {
+				this.update({
+					usernameState: result.available ? 'ok' : 'unavailable'
+				});
+			}).catch(err => {
+				this.update({
+					usernameState: 'error'
+				});
+			});
+		};
+
+		this.onChangePassword = () => {
+			const password = this.$refs.password.value;
+
+			if (password == '') {
+				this.passwordStrength = '';
+				return;
+			}
+
+			const strength = getPasswordStrength(password);
+			this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
+			this.update();
+			this.$refs.passwordMetar.style.width = `${strength * 100}%`;
+		};
+
+		this.onChangePasswordRetype = () => {
+			const password = this.$refs.password.value;
+			const retypedPassword = this.$refs.passwordRetype.value;
+
+			if (retypedPassword == '') {
+				this.passwordRetypeState = null;
+				return;
+			}
+
+			this.passwordRetypeState = password == retypedPassword ? 'match' : 'not-match';
+		};
+
+		this.onsubmit = e => {
+			e.preventDefault();
+
+			const username = this.$refs.username.value;
+			const password = this.$refs.password.value;
+
+			const locker = document.body.appendChild(document.createElement('mk-locker'));
+
+			this.api('signup', {
+				username: username,
+				password: password,
+				'g-recaptcha-response': grecaptcha.getResponse()
+			}).then(() => {
+				this.api('signin', {
+					username: username,
+					password: password
+				}).then(() => {
+					location.href = '/';
+				});
+			}).catch(() => {
+				alert('%i18n:common.tags.mk-signup.some-error%');
+
+				grecaptcha.reset();
+				this.recaptchaed = false;
+
+				locker.parentNode.removeChild(locker);
+			});
+
+			return false;
+		};
+	</script>
+</mk-signup>
diff --git a/src/web/app/common/-tags/special-message.tag b/src/web/app/common/-tags/special-message.tag
new file mode 100644
index 0000000000..da903c6325
--- /dev/null
+++ b/src/web/app/common/-tags/special-message.tag
@@ -0,0 +1,27 @@
+<mk-special-message>
+	<p v-if="m == 1 && d == 1">%i18n:common.tags.mk-special-message.new-year%</p>
+	<p v-if="m == 12 && d == 25">%i18n:common.tags.mk-special-message.christmas%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			&:empty
+				display none
+
+			> p
+				margin 0
+				padding 4px
+				text-align center
+				font-size 14px
+				font-weight bold
+				text-transform uppercase
+				color #fff
+				background #ff1036
+
+	</style>
+	<script lang="typescript">
+		const now = new Date();
+		this.d = now.getDate();
+		this.m = now.getMonth() + 1;
+	</script>
+</mk-special-message>
diff --git a/src/web/app/common/-tags/twitter-setting.tag b/src/web/app/common/-tags/twitter-setting.tag
new file mode 100644
index 0000000000..935239f44e
--- /dev/null
+++ b/src/web/app/common/-tags/twitter-setting.tag
@@ -0,0 +1,62 @@
+<mk-twitter-setting>
+	<p>%i18n:common.tags.mk-twitter-setting.description%<a href={ _DOCS_URL_ + '/link-to-twitter' } target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
+	<p class="account" v-if="I.twitter" title={ 'Twitter ID: ' + I.twitter.user_id }>%i18n:common.tags.mk-twitter-setting.connected-to%: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
+	<p>
+		<a href={ _API_URL_ + '/connect/twitter' } target="_blank" @click="connect">{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
+		<span v-if="I.twitter"> or </span>
+		<a href={ _API_URL_ + '/disconnect/twitter' } target="_blank" v-if="I.twitter" @click="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
+	</p>
+	<p class="id" v-if="I.twitter">Twitter ID: { I.twitter.user_id }</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #4a535a
+
+			.account
+				border solid 1px #e1e8ed
+				border-radius 4px
+				padding 16px
+
+				a
+					font-weight bold
+					color inherit
+
+			.id
+				color #8899a6
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+
+		this.form = null;
+
+		this.on('mount', () => {
+			this.I.on('updated', this.onMeUpdated);
+		});
+
+		this.on('unmount', () => {
+			this.I.off('updated', this.onMeUpdated);
+		});
+
+		this.onMeUpdated = () => {
+			if (this.I.twitter) {
+				if (this.form) this.form.close();
+			}
+		};
+
+		this.connect = e => {
+			e.preventDefault();
+			this.form = window.open(_API_URL_ + '/connect/twitter',
+				'twitter_connect_window',
+				'height=570,width=520');
+			return false;
+		};
+
+		this.disconnect = e => {
+			e.preventDefault();
+			window.open(_API_URL_ + '/disconnect/twitter',
+				'twitter_disconnect_window',
+				'height=570,width=520');
+			return false;
+		};
+	</script>
+</mk-twitter-setting>
diff --git a/src/web/app/common/-tags/uploader.tag b/src/web/app/common/-tags/uploader.tag
new file mode 100644
index 0000000000..519b063fac
--- /dev/null
+++ b/src/web/app/common/-tags/uploader.tag
@@ -0,0 +1,199 @@
+<mk-uploader>
+	<ol v-if="uploads.length > 0">
+		<li each={ uploads }>
+			<div class="img" style="background-image: url({ img })"></div>
+			<p class="name">%fa:spinner .pulse%{ name }</p>
+			<p class="status"><span class="initing" v-if="progress == undefined">%i18n:common.tags.mk-uploader.waiting%<mk-ellipsis/></span><span class="kb" v-if="progress != undefined">{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" v-if="progress != undefined">{ Math.floor((progress.value / progress.max) * 100) }</span></p>
+			<progress v-if="progress != undefined && progress.value != progress.max" value={ progress.value } max={ progress.max }></progress>
+			<div class="progress initing" v-if="progress == undefined"></div>
+			<div class="progress waiting" v-if="progress != undefined && progress.value == progress.max"></div>
+		</li>
+	</ol>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow auto
+
+			&:empty
+				display none
+
+			> ol
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 8px 0 0 0
+					padding 0
+					height 36px
+					box-shadow 0 -1px 0 rgba($theme-color, 0.1)
+					border-top solid 8px transparent
+
+					&:first-child
+						margin 0
+						box-shadow none
+						border-top none
+
+					> .img
+						display block
+						position absolute
+						top 0
+						left 0
+						width 36px
+						height 36px
+						background-size cover
+						background-position center center
+
+					> .name
+						display block
+						position absolute
+						top 0
+						left 44px
+						margin 0
+						padding 0
+						max-width 256px
+						font-size 0.8em
+						color rgba($theme-color, 0.7)
+						white-space nowrap
+						text-overflow ellipsis
+						overflow hidden
+
+						> [data-fa]
+							margin-right 4px
+
+					> .status
+						display block
+						position absolute
+						top 0
+						right 0
+						margin 0
+						padding 0
+						font-size 0.8em
+
+						> .initing
+							color rgba($theme-color, 0.5)
+
+						> .kb
+							color rgba($theme-color, 0.5)
+
+						> .percentage
+							display inline-block
+							width 48px
+							text-align right
+
+							color rgba($theme-color, 0.7)
+
+							&:after
+								content '%'
+
+					> progress
+						display block
+						position absolute
+						bottom 0
+						right 0
+						margin 0
+						width calc(100% - 44px)
+						height 8px
+						background transparent
+						border none
+						border-radius 4px
+						overflow hidden
+
+						&::-webkit-progress-value
+							background $theme-color
+
+						&::-webkit-progress-bar
+							background rgba($theme-color, 0.1)
+
+					> .progress
+						display block
+						position absolute
+						bottom 0
+						right 0
+						margin 0
+						width calc(100% - 44px)
+						height 8px
+						border none
+						border-radius 4px
+						background linear-gradient(
+							45deg,
+							lighten($theme-color, 30%) 25%,
+							$theme-color               25%,
+							$theme-color               50%,
+							lighten($theme-color, 30%) 50%,
+							lighten($theme-color, 30%) 75%,
+							$theme-color               75%,
+							$theme-color
+						)
+						background-size 32px 32px
+						animation bg 1.5s linear infinite
+
+						&.initing
+							opacity 0.3
+
+						@keyframes bg
+							from {background-position: 0 0;}
+							to   {background-position: -64px 32px;}
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+
+		this.uploads = [];
+
+		this.upload = (file, folder) => {
+			if (folder && typeof folder == 'object') folder = folder.id;
+
+			const id = Math.random();
+
+			const ctx = {
+				id: id,
+				name: file.name || 'untitled',
+				progress: undefined
+			};
+
+			this.uploads.push(ctx);
+			this.$emit('change-uploads', this.uploads);
+			this.update();
+
+			const reader = new FileReader();
+			reader.onload = e => {
+				ctx.img = e.target.result;
+				this.update();
+			};
+			reader.readAsDataURL(file);
+
+			const data = new FormData();
+			data.append('i', this.I.token);
+			data.append('file', file);
+
+			if (folder) data.append('folder_id', folder);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', _API_URL_ + '/drive/files/create', true);
+			xhr.onload = e => {
+				const driveFile = JSON.parse(e.target.response);
+
+				this.$emit('uploaded', driveFile);
+
+				this.uploads = this.uploads.filter(x => x.id != id);
+				this.$emit('change-uploads', this.uploads);
+
+				this.update();
+			};
+
+			xhr.upload.onprogress = e => {
+				if (e.lengthComputable) {
+					if (ctx.progress == undefined) ctx.progress = {};
+					ctx.progress.max = e.total;
+					ctx.progress.value = e.loaded;
+					this.update();
+				}
+			};
+
+			xhr.send(data);
+		};
+	</script>
+</mk-uploader>
diff --git a/src/web/app/common/tags/activity-table.tag b/src/web/app/common/tags/activity-table.tag
deleted file mode 100644
index 2f716912f3..0000000000
--- a/src/web/app/common/tags/activity-table.tag
+++ /dev/null
@@ -1,57 +0,0 @@
-<mk-activity-table>
-	<svg v-if="data" ref="canvas" viewBox="0 0 53 7" preserveAspectRatio="none">
-		<rect each={ data } width="1" height="1"
-			riot-x={ x } riot-y={ date.weekday }
-			rx="1" ry="1"
-			fill={ color }
-			style="transform: scale({ v });"/>
-		<rect class="today" width="1" height="1"
-			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
-			rx="1" ry="1"
-			fill="none"
-			stroke-width="0.1"
-			stroke="#f73520"/>
-	</svg>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			max-width 600px
-			margin 0 auto
-
-			> svg
-				display block
-
-				> rect
-					transform-origin center
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.on('mount', () => {
-			this.api('aggregation/users/activity', {
-				user_id: this.user.id
-			}).then(data => {
-				data.forEach(d => d.total = d.posts + d.replies + d.reposts);
-				this.peak = Math.max.apply(null, data.map(d => d.total)) / 2;
-				let x = 0;
-				data.reverse().forEach(d => {
-					d.x = x;
-					d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
-
-					d.v = d.total / this.peak;
-					if (d.v > 1) d.v = 1;
-					const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
-					const cs = d.v * 100;
-					const cl = 15 + ((1 - d.v) * 80);
-					d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
-
-					if (d.date.weekday == 6) x++;
-				});
-				this.update({ data });
-			});
-		});
-	</script>
-</mk-activity-table>
diff --git a/src/web/app/common/tags/authorized-apps.tag b/src/web/app/common/tags/authorized-apps.tag
deleted file mode 100644
index 26efa1316f..0000000000
--- a/src/web/app/common/tags/authorized-apps.tag
+++ /dev/null
@@ -1,35 +0,0 @@
-<mk-authorized-apps>
-	<div class="none ui info" v-if="!fetching && apps.length == 0">
-		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
-	</div>
-	<div class="apps" v-if="apps.length != 0">
-		<div each={ app in apps }>
-			<p><b>{ app.name }</b></p>
-			<p>{ app.description }</p>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .apps
-				> div
-					padding 16px 0 0 0
-					border-bottom solid 1px #eee
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.apps = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.api('i/authorized_apps').then(apps => {
-				this.apps = apps;
-				this.fetching = false;
-				this.update();
-			});
-		});
-	</script>
-</mk-authorized-apps>
diff --git a/src/web/app/common/tags/ellipsis.tag b/src/web/app/common/tags/ellipsis.tag
deleted file mode 100644
index 734454e4a0..0000000000
--- a/src/web/app/common/tags/ellipsis.tag
+++ /dev/null
@@ -1,24 +0,0 @@
-<mk-ellipsis><span>.</span><span>.</span><span>.</span>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-
-			> span
-				animation ellipsis 1.4s infinite ease-in-out both
-
-				&:nth-child(1)
-					animation-delay 0s
-
-				&:nth-child(2)
-					animation-delay 0.16s
-
-				&:nth-child(3)
-					animation-delay 0.32s
-
-			@keyframes ellipsis
-				0%, 80%, 100%
-					opacity 1
-				40%
-					opacity 0
-	</style>
-</mk-ellipsis>
diff --git a/src/web/app/common/tags/error.tag b/src/web/app/common/tags/error.tag
deleted file mode 100644
index f09c0ce955..0000000000
--- a/src/web/app/common/tags/error.tag
+++ /dev/null
@@ -1,215 +0,0 @@
-<mk-error>
-	<img src="data:image/jpeg;base64,%base64:/assets/error.jpg%" alt=""/>
-	<h1>%i18n:common.tags.mk-error.title%</h1>
-	<p class="text">{
-		'%i18n:common.tags.mk-error.description%'.substr(0, '%i18n:common.tags.mk-error.description%'.indexOf('{'))
-	}<a @click="reload">{
-		'%i18n:common.tags.mk-error.description%'.match(/\{(.+?)\}/)[1]
-	}</a>{
-		'%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1)
-	}</p>
-	<button v-if="!troubleshooting" @click="troubleshoot">%i18n:common.tags.mk-error.troubleshoot%</button>
-	<mk-troubleshooter v-if="troubleshooting"/>
-	<p class="thanks">%i18n:common.tags.mk-error.thanks%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 100%
-			padding 32px 18px
-			text-align center
-
-			> img
-				display block
-				height 200px
-				margin 0 auto
-				pointer-events none
-				user-select none
-
-			> h1
-				display block
-				margin 1.25em auto 0.65em auto
-				font-size 1.5em
-				color #555
-
-			> .text
-				display block
-				margin 0 auto
-				max-width 600px
-				font-size 1em
-				color #666
-
-			> button
-				display block
-				margin 1em auto 0 auto
-				padding 8px 10px
-				color $theme-color-foreground
-				background $theme-color
-
-				&:focus
-					outline solid 3px rgba($theme-color, 0.3)
-
-				&:hover
-					background lighten($theme-color, 10%)
-
-				&:active
-					background darken($theme-color, 10%)
-
-			> mk-troubleshooter
-				margin 1em auto 0 auto
-
-			> .thanks
-				display block
-				margin 2em auto 0 auto
-				padding 2em 0 0 0
-				max-width 600px
-				font-size 0.9em
-				font-style oblique
-				color #aaa
-				border-top solid 1px #eee
-
-			@media (max-width 500px)
-				padding 24px 18px
-				font-size 80%
-
-				> img
-					height 150px
-
-	</style>
-	<script lang="typescript">
-		this.troubleshooting = false;
-
-		this.on('mount', () => {
-			document.title = 'Oops!';
-			document.documentElement.style.background = '#f8f8f8';
-		});
-
-		this.reload = () => {
-			location.reload();
-		};
-
-		this.troubleshoot = () => {
-			this.update({
-				troubleshooting: true
-			});
-		};
-	</script>
-</mk-error>
-
-<mk-troubleshooter>
-	<h1>%fa:wrench%%i18n:common.tags.mk-error.troubleshooter.title%</h1>
-	<div>
-		<p data-wip={ network == null }><template v-if="network != null"><template v-if="network">%fa:check%</template><template v-if="!network">%fa:times%</template></template>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis v-if="network == null"/></p>
-		<p v-if="network == true" data-wip={ internet == null }><template v-if="internet != null"><template v-if="internet">%fa:check%</template><template v-if="!internet">%fa:times%</template></template>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis v-if="internet == null"/></p>
-		<p v-if="internet == true" data-wip={ server == null }><template v-if="server != null"><template v-if="server">%fa:check%</template><template v-if="!server">%fa:times%</template></template>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis v-if="server == null"/></p>
-	</div>
-	<p v-if="!end">%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p>
-	<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>
-	<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p>
-	<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p>
-	<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 100%
-			max-width 500px
-			text-align left
-			background #fff
-			border-radius 8px
-			border solid 1px #ddd
-
-			> h1
-				margin 0
-				padding 0.6em 1.2em
-				font-size 1em
-				color #444
-				border-bottom solid 1px #eee
-
-				> [data-fa]
-					margin-right 0.25em
-
-			> div
-				overflow hidden
-				padding 0.6em 1.2em
-
-				> p
-					margin 0.5em 0
-					font-size 0.9em
-					color #444
-
-					&[data-wip]
-						color #888
-
-					> [data-fa]
-						margin-right 0.25em
-
-						&.times
-							color #e03524
-
-						&.check
-							color #84c32f
-
-			> p
-				margin 0
-				padding 0.6em 1.2em
-				font-size 1em
-				color #444
-				border-top solid 1px #eee
-
-				> b
-					> [data-fa]
-						margin-right 0.25em
-
-				&.success
-					> b
-						color #39adad
-
-				&:not(.success)
-					> b
-						color #ad4339
-
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			this.update({
-				network: navigator.onLine
-			});
-
-			if (!this.network) {
-				this.update({
-					end: true
-				});
-				return;
-			}
-
-			// Check internet connection
-			fetch('https://google.com?rand=' + Math.random(), {
-				mode: 'no-cors'
-			}).then(() => {
-				this.update({
-					internet: true
-				});
-
-				// Check misskey server is available
-				fetch(`${_API_URL_}/meta`).then(() => {
-					this.update({
-						end: true,
-						server: true
-					});
-				})
-				.catch(() => {
-					this.update({
-						end: true,
-						server: false
-					});
-				});
-			})
-			.catch(() => {
-				this.update({
-					end: true,
-					internet: false
-				});
-			});
-		});
-	</script>
-</mk-troubleshooter>
diff --git a/src/web/app/common/tags/file-type-icon.tag b/src/web/app/common/tags/file-type-icon.tag
deleted file mode 100644
index f630efe118..0000000000
--- a/src/web/app/common/tags/file-type-icon.tag
+++ /dev/null
@@ -1,10 +0,0 @@
-<mk-file-type-icon>
-	<template v-if="kind == 'image'">%fa:file-image%</template>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.kind = this.opts.type.split('/')[0];
-	</script>
-</mk-file-type-icon>
diff --git a/src/web/app/common/tags/forkit.tag b/src/web/app/common/tags/forkit.tag
deleted file mode 100644
index 6a8d06e564..0000000000
--- a/src/web/app/common/tags/forkit.tag
+++ /dev/null
@@ -1,40 +0,0 @@
-<mk-forkit><a href="https://github.com/syuilo/misskey" target="_blank" title="%i18n:common.tags.mk-forkit.open-github-link%" aria-label="%i18n:common.tags.mk-forkit.open-github-link%">
-		<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="aria-hidden">
-			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-			<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>
-			<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
-		</svg></a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position absolute
-			top 0
-			right 0
-
-			> a
-				display block
-
-				> svg
-					display block
-					//fill #151513
-					//color #fff
-					fill $theme-color
-					color $theme-color-foreground
-
-			.octo-arm
-				transform-origin 130px 106px
-
-			&:hover
-				.octo-arm
-					animation octocat-wave 560ms ease-in-out
-
-			@keyframes octocat-wave
-				0%, 100%
-					transform rotate(0)
-				20%, 60%
-					transform rotate(-25deg)
-				40%, 80%
-					transform rotate(10deg)
-
-	</style>
-</mk-forkit>
diff --git a/src/web/app/common/tags/index.ts b/src/web/app/common/tags/index.ts
deleted file mode 100644
index df99d93cc5..0000000000
--- a/src/web/app/common/tags/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-require('./error.tag');
-require('./url.tag');
-require('./url-preview.tag');
-require('./time.tag');
-require('./file-type-icon.tag');
-require('./uploader.tag');
-require('./ellipsis.tag');
-require('./raw.tag');
-require('./number.tag');
-require('./special-message.tag');
-require('./signin.tag');
-require('./signup.tag');
-require('./forkit.tag');
-require('./introduction.tag');
-require('./signin-history.tag');
-require('./twitter-setting.tag');
-require('./authorized-apps.tag');
-require('./poll.tag');
-require('./poll-editor.tag');
-require('./messaging/room.tag');
-require('./messaging/message.tag');
-require('./messaging/index.tag');
-require('./messaging/form.tag');
-require('./stream-indicator.tag');
-require('./activity-table.tag');
-require('./reaction-picker.tag');
-require('./reactions-viewer.tag');
-require('./reaction-icon.tag');
-require('./post-menu.tag');
-require('./nav-links.tag');
diff --git a/src/web/app/common/tags/introduction.tag b/src/web/app/common/tags/introduction.tag
deleted file mode 100644
index c92cff0d1d..0000000000
--- a/src/web/app/common/tags/introduction.tag
+++ /dev/null
@@ -1,25 +0,0 @@
-<mk-introduction>
-	<article>
-		<h1>Misskeyとは？</h1>
-		<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
-		<p>無料で誰でも利用でき、広告も掲載していません。</p>
-		<p><a href={ _DOCS_URL_ } target="_blank">もっと知りたい方はこちら</a></p>
-	</article>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			h1
-				margin 0
-				text-align center
-				font-size 1.2em
-
-			p
-				margin 16px 0
-
-				&:last-child
-					margin 0
-					text-align center
-
-	</style>
-</mk-introduction>
diff --git a/src/web/app/common/tags/messaging/form.tag b/src/web/app/common/tags/messaging/form.tag
deleted file mode 100644
index 9a58dc0ce7..0000000000
--- a/src/web/app/common/tags/messaging/form.tag
+++ /dev/null
@@ -1,175 +0,0 @@
-<mk-messaging-form>
-	<textarea ref="text" onkeypress={ onkeypress } onpaste={ onpaste } placeholder="%i18n:common.input-message-here%"></textarea>
-	<div class="files"></div>
-	<mk-uploader ref="uploader"/>
-	<button class="send" @click="send" disabled={ sending } title="%i18n:common.send%">
-		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
-	</button>
-	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
-		%fa:upload%
-	</button>
-	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
-		%fa:R folder-open%
-	</button>
-	<input name="file" type="file" accept="image/*"/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> textarea
-				cursor auto
-				display block
-				width 100%
-				min-width 100%
-				max-width 100%
-				height 64px
-				margin 0
-				padding 8px
-				font-size 1em
-				color #000
-				outline none
-				border none
-				border-top solid 1px #eee
-				border-radius 0
-				box-shadow none
-				background transparent
-
-			> .send
-				position absolute
-				bottom 0
-				right 0
-				margin 0
-				padding 10px 14px
-				line-height 1em
-				font-size 1em
-				color #aaa
-				transition color 0.1s ease
-
-				&:hover
-					color $theme-color
-
-				&:active
-					color darken($theme-color, 10%)
-					transition color 0s ease
-
-			.files
-				display block
-				margin 0
-				padding 0 8px
-				list-style none
-
-				&:after
-					content ''
-					display block
-					clear both
-
-				> li
-					display block
-					float left
-					margin 4px
-					padding 0
-					width 64px
-					height 64px
-					background-color #eee
-					background-repeat no-repeat
-					background-position center center
-					background-size cover
-					cursor move
-
-					&:hover
-						> .remove
-							display block
-
-					> .remove
-						display none
-						position absolute
-						right -6px
-						top -6px
-						margin 0
-						padding 0
-						background transparent
-						outline none
-						border none
-						border-radius 0
-						box-shadow none
-						cursor pointer
-
-			.attach-from-local
-			.attach-from-drive
-				margin 0
-				padding 10px 14px
-				line-height 1em
-				font-size 1em
-				font-weight normal
-				text-decoration none
-				color #aaa
-				transition color 0.1s ease
-
-				&:hover
-					color $theme-color
-
-				&:active
-					color darken($theme-color, 10%)
-					transition color 0s ease
-
-			input[type=file]
-				display none
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.onpaste = e => {
-			const data = e.clipboardData;
-			const items = data.items;
-			for (const item of items) {
-				if (item.kind == 'file') {
-					this.upload(item.getAsFile());
-				}
-			}
-		};
-
-		this.onkeypress = e => {
-			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
-				this.send();
-			}
-		};
-
-		this.selectFile = () => {
-			this.$refs.file.click();
-		};
-
-		this.selectFileFromDrive = () => {
-			const browser = document.body.appendChild(document.createElement('mk-select-file-from-drive-window'));
-			const event = riot.observable();
-			riot.mount(browser, {
-				multiple: true,
-				event: event
-			});
-			event.one('selected', files => {
-				files.forEach(this.addFile);
-			});
-		};
-
-		this.send = () => {
-			this.sending = true;
-			this.api('messaging/messages/create', {
-				user_id: this.opts.user.id,
-				text: this.$refs.text.value
-			}).then(message => {
-				this.clear();
-			}).catch(err => {
-				console.error(err);
-			}).then(() => {
-				this.sending = false;
-				this.update();
-			});
-		};
-
-		this.clear = () => {
-			this.$refs.text.value = '';
-			this.files = [];
-			this.update();
-		};
-	</script>
-</mk-messaging-form>
diff --git a/src/web/app/common/tags/messaging/index.tag b/src/web/app/common/tags/messaging/index.tag
deleted file mode 100644
index 0432f7e30f..0000000000
--- a/src/web/app/common/tags/messaging/index.tag
+++ /dev/null
@@ -1,456 +0,0 @@
-<mk-messaging data-compact={ opts.compact }>
-	<div class="search" v-if="!opts.compact">
-		<div class="form">
-			<label for="search-input">%fa:search%</label>
-			<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
-		</div>
-		<div class="result">
-			<ol class="users" v-if="searchResult.length > 0" ref="searchResult">
-				<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } @click="user._click" tabindex="-1">
-					<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
-					<span class="name">{ user.name }</span>
-					<span class="username">@{ user.username }</span>
-				</li>
-			</ol>
-		</div>
-	</div>
-	<div class="history" v-if="history.length > 0">
-		<template each={ history }>
-			<a class="user" data-is-me={ is_me } data-is-read={ is_read } @click="_click">
-				<div>
-					<img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/>
-					<header>
-						<span class="name">{ is_me ? recipient.name : user.name }</span>
-						<span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
-						<mk-time time={ created_at }/>
-					</header>
-					<div class="body">
-						<p class="text"><span class="me" v-if="is_me">%i18n:common.tags.mk-messaging.you%:</span>{ text }</p>
-					</div>
-				</div>
-			</a>
-		</template>
-	</div>
-	<p class="no-history" v-if="!fetching && history.length == 0">%i18n:common.tags.mk-messaging.no-history%</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			&[data-compact]
-				font-size 0.8em
-
-				> .history
-					> a
-						&:last-child
-							border-bottom none
-
-						&:not([data-is-me]):not([data-is-read])
-							> div
-								background-image none
-								border-left solid 4px #3aa2dc
-
-						> div
-							padding 16px
-
-							> header
-								> mk-time
-									font-size 1em
-
-							> .avatar
-								width 42px
-								height 42px
-								margin 0 12px 0 0
-
-			> .search
-				display block
-				position -webkit-sticky
-				position sticky
-				top 0
-				left 0
-				z-index 1
-				width 100%
-				background #fff
-				box-shadow 0 0px 2px rgba(0, 0, 0, 0.2)
-
-				> .form
-					padding 8px
-					background #f7f7f7
-
-					> label
-						display block
-						position absolute
-						top 0
-						left 8px
-						z-index 1
-						height 100%
-						width 38px
-						pointer-events none
-
-						> [data-fa]
-							display block
-							position absolute
-							top 0
-							right 0
-							bottom 0
-							left 0
-							width 1em
-							height 1em
-							margin auto
-							color #555
-
-					> input
-						margin 0
-						padding 0 0 0 38px
-						width 100%
-						font-size 1em
-						line-height 38px
-						color #000
-						outline none
-						border solid 1px #eee
-						border-radius 5px
-						box-shadow none
-						transition color 0.5s ease, border 0.5s ease
-
-						&:hover
-							border solid 1px #ddd
-							transition border 0.2s ease
-
-						&:focus
-							color darken($theme-color, 20%)
-							border solid 1px $theme-color
-							transition color 0, border 0
-
-				> .result
-					display block
-					top 0
-					left 0
-					z-index 2
-					width 100%
-					margin 0
-					padding 0
-					background #fff
-
-					> .users
-						margin 0
-						padding 0
-						list-style none
-
-						> li
-							display inline-block
-							z-index 1
-							width 100%
-							padding 8px 32px
-							vertical-align top
-							white-space nowrap
-							overflow hidden
-							color rgba(0, 0, 0, 0.8)
-							text-decoration none
-							transition none
-							cursor pointer
-
-							&:hover
-							&:focus
-								color #fff
-								background $theme-color
-
-								.name
-									color #fff
-
-								.username
-									color #fff
-
-							&:active
-								color #fff
-								background darken($theme-color, 10%)
-
-								.name
-									color #fff
-
-								.username
-									color #fff
-
-							.avatar
-								vertical-align middle
-								min-width 32px
-								min-height 32px
-								max-width 32px
-								max-height 32px
-								margin 0 8px 0 0
-								border-radius 6px
-
-							.name
-								margin 0 8px 0 0
-								/*font-weight bold*/
-								font-weight normal
-								color rgba(0, 0, 0, 0.8)
-
-							.username
-								font-weight normal
-								color rgba(0, 0, 0, 0.3)
-
-			> .history
-
-				> a
-					display block
-					text-decoration none
-					background #fff
-					border-bottom solid 1px #eee
-
-					*
-						pointer-events none
-						user-select none
-
-					&:hover
-						background #fafafa
-
-						> .avatar
-							filter saturate(200%)
-
-					&:active
-						background #eee
-
-					&[data-is-read]
-					&[data-is-me]
-						opacity 0.8
-
-					&:not([data-is-me]):not([data-is-read])
-						> div
-							background-image url("/assets/unread.svg")
-							background-repeat no-repeat
-							background-position 0 center
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> div
-						max-width 500px
-						margin 0 auto
-						padding 20px 30px
-
-						&:after
-							content ""
-							display block
-							clear both
-
-						> header
-							margin-bottom 2px
-							white-space nowrap
-							overflow hidden
-
-							> .name
-								text-align left
-								display inline
-								margin 0
-								padding 0
-								font-size 1em
-								color rgba(0, 0, 0, 0.9)
-								font-weight bold
-								transition all 0.1s ease
-
-							> .username
-								text-align left
-								margin 0 0 0 8px
-								color rgba(0, 0, 0, 0.5)
-
-							> mk-time
-								position absolute
-								top 0
-								right 0
-								display inline
-								color rgba(0, 0, 0, 0.5)
-								font-size 80%
-
-						> .avatar
-							float left
-							width 54px
-							height 54px
-							margin 0 16px 0 0
-							border-radius 8px
-							transition all 0.1s ease
-
-						> .body
-
-							> .text
-								display block
-								margin 0 0 0 0
-								padding 0
-								overflow hidden
-								overflow-wrap break-word
-								font-size 1.1em
-								color rgba(0, 0, 0, 0.8)
-
-								.me
-									color rgba(0, 0, 0, 0.4)
-
-							> .image
-								display block
-								max-width 100%
-								max-height 512px
-
-			> .no-history
-				margin 0
-				padding 2em 1em
-				text-align center
-				color #999
-				font-weight 500
-
-			> .fetching
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-			// TODO: element base media query
-			@media (max-width 400px)
-				> .search
-					> .result
-						> .users
-							> li
-								padding 8px 16px
-
-				> .history
-					> a
-						&:not([data-is-me]):not([data-is-read])
-							> div
-								background-image none
-								border-left solid 4px #3aa2dc
-
-						> div
-							padding 16px
-							font-size 14px
-
-							> .avatar
-								margin 0 12px 0 0
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('messaging-index-stream');
-		this.connection = this.messagingIndexStream.getConnection();
-		this.connectionId = this.messagingIndexStream.use();
-
-		this.searchResult = [];
-		this.history = [];
-		this.fetching = true;
-
-		this.registerMessage = message => {
-			message.is_me = message.user_id == this.I.id;
-			message._click = () => {
-				this.$emit('navigate-user', message.is_me ? message.recipient : message.user);
-			};
-		};
-
-		this.on('mount', () => {
-			this.connection.on('message', this.onMessage);
-			this.connection.on('read', this.onRead);
-
-			this.api('messaging/history').then(history => {
-				this.fetching = false;
-				history.forEach(message => {
-					this.registerMessage(message);
-				});
-				this.history = history;
-				this.update();
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('message', this.onMessage);
-			this.connection.off('read', this.onRead);
-			this.messagingIndexStream.dispose(this.connectionId);
-		});
-
-		this.onMessage = message => {
-			this.history = this.history.filter(m => !(
-				(m.recipient_id == message.recipient_id && m.user_id == message.user_id) ||
-				(m.recipient_id == message.user_id && m.user_id == message.recipient_id)));
-
-			this.registerMessage(message);
-
-			this.history.unshift(message);
-			this.update();
-		};
-
-		this.onRead = ids => {
-			ids.forEach(id => {
-				const found = this.history.find(m => m.id == id);
-				if (found) found.is_read = true;
-			});
-
-			this.update();
-		};
-
-		this.search = () => {
-			const q = this.$refs.search.value;
-			if (q == '') {
-				this.searchResult = [];
-				return;
-			}
-			this.api('users/search', {
-				query: q,
-				max: 5
-			}).then(users => {
-				users.forEach(user => {
-					user._click = () => {
-						this.$emit('navigate-user', user);
-						this.searchResult = [];
-					};
-				});
-				this.update({
-					searchResult: users
-				});
-			});
-		};
-
-		this.onSearchKeydown = e => {
-			switch (e.which) {
-				case 9: // [TAB]
-				case 40: // [↓]
-					e.preventDefault();
-					e.stopPropagation();
-					this.$refs.searchResult.childNodes[0].focus();
-					break;
-			}
-		};
-
-		this.onSearchResultKeydown = (i, e) => {
-			const cancel = () => {
-				e.preventDefault();
-				e.stopPropagation();
-			};
-			switch (true) {
-				case e.which == 10: // [ENTER]
-				case e.which == 13: // [ENTER]
-					cancel();
-					this.searchResult[i]._click();
-					break;
-
-				case e.which == 27: // [ESC]
-					cancel();
-					this.$refs.search.focus();
-					break;
-
-				case e.which == 9 && e.shiftKey: // [TAB] + [Shift]
-				case e.which == 38: // [↑]
-					cancel();
-					(this.$refs.searchResult.childNodes[i].previousElementSibling || this.$refs.searchResult.childNodes[this.searchResult.length - 1]).focus();
-					break;
-
-				case e.which == 9: // [TAB]
-				case e.which == 40: // [↓]
-					cancel();
-					(this.$refs.searchResult.childNodes[i].nextElementSibling || this.$refs.searchResult.childNodes[0]).focus();
-					break;
-			}
-		};
-
-	</script>
-</mk-messaging>
diff --git a/src/web/app/common/tags/messaging/message.tag b/src/web/app/common/tags/messaging/message.tag
deleted file mode 100644
index ba6d26a184..0000000000
--- a/src/web/app/common/tags/messaging/message.tag
+++ /dev/null
@@ -1,238 +0,0 @@
-<mk-messaging-message data-is-me={ message.is_me }>
-	<a class="avatar-anchor" href={ '/' + message.user.username } title={ message.user.username } target="_blank">
-		<img class="avatar" src={ message.user.avatar_url + '?thumbnail&size=80' } alt=""/>
-	</a>
-	<div class="content-container">
-		<div class="balloon">
-			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
-			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%"><img src="/assets/desktop/messaging/delete.png" alt="Delete"/></button>
-			<div class="content" v-if="!message.is_deleted">
-				<div ref="text"></div>
-				<div class="image" v-if="message.file"><img src={ message.file.url } alt="image" title={ message.file.name }/></div>
-			</div>
-			<div class="content" v-if="message.is_deleted">
-				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
-			</div>
-		</div>
-		<footer>
-			<mk-time time={ message.created_at }/><template v-if="message.is_edited">%fa:pencil-alt%</template>
-		</footer>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			$me-balloon-color = #23A7B6
-
-			display block
-			padding 10px 12px 10px 12px
-			background-color transparent
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .avatar-anchor
-				display block
-
-				> .avatar
-					display block
-					min-width 54px
-					min-height 54px
-					max-width 54px
-					max-height 54px
-					margin 0
-					border-radius 8px
-					transition all 0.1s ease
-
-			> .content-container
-				display block
-				margin 0 12px
-				padding 0
-				max-width calc(100% - 78px)
-
-				> .balloon
-					display block
-					float inherit
-					margin 0
-					padding 0
-					max-width 100%
-					min-height 38px
-					border-radius 16px
-
-					&:before
-						content ""
-						pointer-events none
-						display block
-						position absolute
-						top 12px
-
-					&:hover
-						> .delete-button
-							display block
-
-					> .delete-button
-						display none
-						position absolute
-						z-index 1
-						top -4px
-						right -4px
-						margin 0
-						padding 0
-						cursor pointer
-						outline none
-						border none
-						border-radius 0
-						box-shadow none
-						background transparent
-
-						> img
-							vertical-align bottom
-							width 16px
-							height 16px
-							cursor pointer
-
-					> .read
-						user-select none
-						display block
-						position absolute
-						z-index 1
-						bottom -4px
-						left -12px
-						margin 0
-						color rgba(0, 0, 0, 0.5)
-						font-size 11px
-
-					> .content
-
-						> .is-deleted
-							display block
-							margin 0
-							padding 0
-							overflow hidden
-							overflow-wrap break-word
-							font-size 1em
-							color rgba(0, 0, 0, 0.5)
-
-						> [ref='text']
-							display block
-							margin 0
-							padding 8px 16px
-							overflow hidden
-							overflow-wrap break-word
-							font-size 1em
-							color rgba(0, 0, 0, 0.8)
-
-							&, *
-								user-select text
-								cursor auto
-
-							& + .file
-								&.image
-									> img
-										border-radius 0 0 16px 16px
-
-						> .file
-							&.image
-								> img
-									display block
-									max-width 100%
-									max-height 512px
-									border-radius 16px
-
-				> footer
-					display block
-					clear both
-					margin 0
-					padding 2px
-					font-size 10px
-					color rgba(0, 0, 0, 0.4)
-
-					> [data-fa]
-						margin-left 4px
-
-			&:not([data-is-me='true'])
-				> .avatar-anchor
-					float left
-
-				> .content-container
-					float left
-
-					> .balloon
-						background #eee
-
-						&:before
-							left -14px
-							border-top solid 8px transparent
-							border-right solid 8px #eee
-							border-bottom solid 8px transparent
-							border-left solid 8px transparent
-
-					> footer
-						text-align left
-
-			&[data-is-me='true']
-				> .avatar-anchor
-					float right
-
-				> .content-container
-					float right
-
-					> .balloon
-						background $me-balloon-color
-
-						&:before
-							right -14px
-							left auto
-							border-top solid 8px transparent
-							border-right solid 8px transparent
-							border-bottom solid 8px transparent
-							border-left solid 8px $me-balloon-color
-
-						> .content
-
-							> p.is-deleted
-								color rgba(255, 255, 255, 0.5)
-
-							> [ref='text']
-								&, *
-									color #fff !important
-
-					> footer
-						text-align right
-
-			&[data-is-deleted='true']
-					> .content-container
-						opacity 0.5
-
-	</style>
-	<script lang="typescript">
-		import compile from '../../../common/scripts/text-compiler';
-
-		this.mixin('i');
-
-		this.message = this.opts.message;
-		this.message.is_me = this.message.user.id == this.I.id;
-
-		this.on('mount', () => {
-			if (this.message.text) {
-				const tokens = this.message.ast;
-
-				this.$refs.text.innerHTML = compile(tokens);
-
-				Array.from(this.$refs.text.children).forEach(e => {
-					if (e.tagName == 'MK-URL') riot.mount(e);
-				});
-
-				// URLをプレビュー
-				tokens
-					.filter(t => t.type == 'link')
-					.map(t => {
-						const el = this.$refs.text.appendChild(document.createElement('mk-url-preview'));
-						riot.mount(el, {
-							url: t.content
-						});
-					});
-			}
-		});
-	</script>
-</mk-messaging-message>
diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag
deleted file mode 100644
index 990f20a8e3..0000000000
--- a/src/web/app/common/tags/messaging/room.tag
+++ /dev/null
@@ -1,319 +0,0 @@
-<mk-messaging-room>
-	<div class="stream">
-		<p class="init" v-if="init">%fa:spinner .spin%%i18n:common.loading%</p>
-		<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
-		<p class="no-history" v-if="!init && messages.length > 0 && !moreMessagesIsInStock">%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
-		<button class="more { fetching: fetchingMoreMessages }" v-if="moreMessagesIsInStock" @click="fetchMoreMessages" disabled={ fetchingMoreMessages }>
-			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
-		</button>
-		<template each={ message, i in messages }>
-			<mk-messaging-message message={ message }/>
-			<p class="date" v-if="i != messages.length - 1 && message._date != messages[i + 1]._date"><span>{ messages[i + 1]._datetext }</span></p>
-		</template>
-	</div>
-	<footer>
-		<div ref="notifications"></div>
-		<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
-		<mk-messaging-form user={ user }/>
-	</footer>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .stream
-				max-width 600px
-				margin 0 auto
-
-				> .init
-					width 100%
-					margin 0
-					padding 16px 8px 8px 8px
-					text-align center
-					font-size 0.8em
-					color rgba(0, 0, 0, 0.4)
-
-					[data-fa]
-						margin-right 4px
-
-				> .empty
-					width 100%
-					margin 0
-					padding 16px 8px 8px 8px
-					text-align center
-					font-size 0.8em
-					color rgba(0, 0, 0, 0.4)
-
-					[data-fa]
-						margin-right 4px
-
-				> .no-history
-					display block
-					margin 0
-					padding 16px
-					text-align center
-					font-size 0.8em
-					color rgba(0, 0, 0, 0.4)
-
-					[data-fa]
-						margin-right 4px
-
-				> .more
-					display block
-					margin 16px auto
-					padding 0 12px
-					line-height 24px
-					color #fff
-					background rgba(0, 0, 0, 0.3)
-					border-radius 12px
-
-					&:hover
-						background rgba(0, 0, 0, 0.4)
-
-					&:active
-						background rgba(0, 0, 0, 0.5)
-
-					&.fetching
-						cursor wait
-
-					> [data-fa]
-						margin-right 4px
-
-				> .message
-					// something
-
-				> .date
-					display block
-					margin 8px 0
-					text-align center
-
-					&:before
-						content ''
-						display block
-						position absolute
-						height 1px
-						width 90%
-						top 16px
-						left 0
-						right 0
-						margin 0 auto
-						background rgba(0, 0, 0, 0.1)
-
-					> span
-						display inline-block
-						margin 0
-						padding 0 16px
-						//font-weight bold
-						line-height 32px
-						color rgba(0, 0, 0, 0.3)
-						background #fff
-
-			> footer
-				position -webkit-sticky
-				position sticky
-				z-index 2
-				bottom 0
-				width 100%
-				max-width 600px
-				margin 0 auto
-				padding 0
-				background rgba(255, 255, 255, 0.95)
-				background-clip content-box
-
-				> [ref='notifications']
-					position absolute
-					top -48px
-					width 100%
-					padding 8px 0
-					text-align center
-
-					&:empty
-						display none
-
-					> p
-						display inline-block
-						margin 0
-						padding 0 12px 0 28px
-						cursor pointer
-						line-height 32px
-						font-size 12px
-						color $theme-color-foreground
-						background $theme-color
-						border-radius 16px
-						transition opacity 1s ease
-
-						> [data-fa]
-							position absolute
-							top 0
-							left 10px
-							line-height 32px
-							font-size 16px
-
-				> .grippie
-					height 10px
-					margin-top -10px
-					background transparent
-					cursor ns-resize
-
-					&:hover
-						//background rgba(0, 0, 0, 0.1)
-
-					&:active
-						//background rgba(0, 0, 0, 0.2)
-
-	</style>
-	<script lang="typescript">
-		import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.user = this.opts.user;
-		this.init = true;
-		this.sending = false;
-		this.messages = [];
-		this.isNaked = this.opts.isNaked;
-
-		this.connection = new MessagingStreamConnection(this.I, this.user.id);
-
-		this.on('mount', () => {
-			this.connection.on('message', this.onMessage);
-			this.connection.on('read', this.onRead);
-
-			document.addEventListener('visibilitychange', this.onVisibilitychange);
-
-			this.fetchMessages().then(() => {
-				this.init = false;
-				this.update();
-				this.scrollToBottom();
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('message', this.onMessage);
-			this.connection.off('read', this.onRead);
-			this.connection.close();
-
-			document.removeEventListener('visibilitychange', this.onVisibilitychange);
-		});
-
-		this.on('update', () => {
-			this.messages.forEach(message => {
-				const date = (new Date(message.created_at)).getDate();
-				const month = (new Date(message.created_at)).getMonth() + 1;
-				message._date = date;
-				message._datetext = month + '月 ' + date + '日';
-			});
-		});
-
-		this.onMessage = (message) => {
-			const isBottom = this.isBottom();
-
-			this.messages.push(message);
-			if (message.user_id != this.I.id && !document.hidden) {
-				this.connection.send({
-					type: 'read',
-					id: message.id
-				});
-			}
-			this.update();
-
-			if (isBottom) {
-				// Scroll to bottom
-				this.scrollToBottom();
-			} else if (message.user_id != this.I.id) {
-				// Notify
-				this.notify('%i18n:common.tags.mk-messaging-room.new-message%');
-			}
-		};
-
-		this.onRead = ids => {
-			if (!Array.isArray(ids)) ids = [ids];
-			ids.forEach(id => {
-				if (this.messages.some(x => x.id == id)) {
-					const exist = this.messages.map(x => x.id).indexOf(id);
-					this.messages[exist].is_read = true;
-					this.update();
-				}
-			});
-		};
-
-		this.fetchMoreMessages = () => {
-			this.update({
-				fetchingMoreMessages: true
-			});
-			this.fetchMessages().then(() => {
-				this.update({
-					fetchingMoreMessages: false
-				});
-			});
-		};
-
-		this.fetchMessages = () => new Promise((resolve, reject) => {
-			const max = this.moreMessagesIsInStock ? 20 : 10;
-
-			this.api('messaging/messages', {
-				user_id: this.user.id,
-				limit: max + 1,
-				until_id: this.moreMessagesIsInStock ? this.messages[0].id : undefined
-			}).then(messages => {
-				if (messages.length == max + 1) {
-					this.moreMessagesIsInStock = true;
-					messages.pop();
-				} else {
-					this.moreMessagesIsInStock = false;
-				}
-
-				this.messages.unshift.apply(this.messages, messages.reverse());
-				this.update();
-
-				resolve();
-			});
-		});
-
-		this.isBottom = () => {
-			const asobi = 32;
-			const current = this.isNaked
-				? window.scrollY + window.innerHeight
-				: this.root.scrollTop + this.root.offsetHeight;
-			const max = this.isNaked
-				? document.body.offsetHeight
-				: this.root.scrollHeight;
-			return current > (max - asobi);
-		};
-
-		this.scrollToBottom = () => {
-			if (this.isNaked) {
-				window.scroll(0, document.body.offsetHeight);
-			} else {
-				this.root.scrollTop = this.root.scrollHeight;
-			}
-		};
-
-		this.notify = message => {
-			const n = document.createElement('p');
-			n.innerHTML = '%fa:arrow-circle-down%' + message;
-			n.onclick = () => {
-				this.scrollToBottom();
-				n.parentNode.removeChild(n);
-			};
-			this.$refs.notifications.appendChild(n);
-
-			setTimeout(() => {
-				n.style.opacity = 0;
-				setTimeout(() => n.parentNode.removeChild(n), 1000);
-			}, 4000);
-		};
-
-		this.onVisibilitychange = () => {
-			if (document.hidden) return;
-			this.messages.forEach(message => {
-				if (message.user_id !== this.I.id && !message.is_read) {
-					this.connection.send({
-						type: 'read',
-						id: message.id
-					});
-				}
-			});
-		};
-	</script>
-</mk-messaging-room>
diff --git a/src/web/app/common/tags/nav-links.tag b/src/web/app/common/tags/nav-links.tag
deleted file mode 100644
index 3f2613c16d..0000000000
--- a/src/web/app/common/tags/nav-links.tag
+++ /dev/null
@@ -1,10 +0,0 @@
-<mk-nav-links>
-	<a href={ aboutUrl }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/about`;
-	</script>
-</mk-nav-links>
diff --git a/src/web/app/common/tags/number.tag b/src/web/app/common/tags/number.tag
deleted file mode 100644
index 9cbbacd2c7..0000000000
--- a/src/web/app/common/tags/number.tag
+++ /dev/null
@@ -1,16 +0,0 @@
-<mk-number>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			let value = this.opts.value;
-			const max = this.opts.max;
-
-			if (max != null && value > max) value = max;
-
-			this.root.innerHTML = value.toLocaleString();
-		});
-	</script>
-</mk-number>
diff --git a/src/web/app/common/tags/poll-editor.tag b/src/web/app/common/tags/poll-editor.tag
deleted file mode 100644
index 0de26f6547..0000000000
--- a/src/web/app/common/tags/poll-editor.tag
+++ /dev/null
@@ -1,121 +0,0 @@
-<mk-poll-editor>
-	<p class="caution" v-if="choices.length < 2">
-		%fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
-	</p>
-	<ul ref="choices">
-		<li each={ choice, i in choices }>
-			<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
-			<button @click="remove.bind(null, i)" title="%i18n:common.tags.mk-poll-editor.remove%">
-				%fa:times%
-			</button>
-		</li>
-	</ul>
-	<button class="add" v-if="choices.length < 10" @click="add">%i18n:common.tags.mk-poll-editor.add%</button>
-	<button class="destroy" @click="destroy" title="%i18n:common.tags.mk-poll-editor.destroy%">
-		%fa:times%
-	</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 8px
-
-			> .caution
-				margin 0 0 8px 0
-				font-size 0.8em
-				color #f00
-
-				> [data-fa]
-					margin-right 4px
-
-			> ul
-				display block
-				margin 0
-				padding 0
-				list-style none
-
-				> li
-					display block
-					margin 8px 0
-					padding 0
-					width 100%
-
-					&:first-child
-						margin-top 0
-
-					&:last-child
-						margin-bottom 0
-
-					> input
-						padding 6px
-						border solid 1px rgba($theme-color, 0.1)
-						border-radius 4px
-
-						&:hover
-							border-color rgba($theme-color, 0.2)
-
-						&:focus
-							border-color rgba($theme-color, 0.5)
-
-					> button
-						padding 4px 8px
-						color rgba($theme-color, 0.4)
-
-						&:hover
-							color rgba($theme-color, 0.6)
-
-						&:active
-							color darken($theme-color, 30%)
-
-			> .add
-				margin 8px 0 0 0
-				vertical-align top
-				color $theme-color
-
-			> .destroy
-				position absolute
-				top 0
-				right 0
-				padding 4px 8px
-				color rgba($theme-color, 0.4)
-
-				&:hover
-					color rgba($theme-color, 0.6)
-
-				&:active
-					color darken($theme-color, 30%)
-
-	</style>
-	<script lang="typescript">
-		this.choices = ['', ''];
-
-		this.oninput = (i, e) => {
-			this.choices[i] = e.target.value;
-		};
-
-		this.add = () => {
-			this.choices.push('');
-			this.update();
-			this.$refs.choices.childNodes[this.choices.length - 1].childNodes[0].focus();
-		};
-
-		this.remove = (i) => {
-			this.choices = this.choices.filter((_, _i) => _i != i);
-			this.update();
-		};
-
-		this.destroy = () => {
-			this.opts.ondestroy();
-		};
-
-		this.get = () => {
-			return {
-				choices: this.choices.filter(choice => choice != '')
-			}
-		};
-
-		this.set = data => {
-			if (data.choices.length == 0) return;
-			this.choices = data.choices;
-		};
-	</script>
-</mk-poll-editor>
diff --git a/src/web/app/common/tags/post-menu.tag b/src/web/app/common/tags/post-menu.tag
deleted file mode 100644
index c2b362e8b5..0000000000
--- a/src/web/app/common/tags/post-menu.tag
+++ /dev/null
@@ -1,157 +0,0 @@
-<mk-post-menu>
-	<div class="backdrop" ref="backdrop" @click="close"></div>
-	<div class="popover { compact: opts.compact }" ref="popover">
-		<button v-if="post.user_id === I.id" @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
-		<div v-if="I.is_pro && !post.is_category_verified">
-			<select ref="categorySelect">
-				<option value="">%i18n:common.tags.mk-post-menu.select%</option>
-				<option value="music">%i18n:common.post_categories.music%</option>
-				<option value="game">%i18n:common.post_categories.game%</option>
-				<option value="anime">%i18n:common.post_categories.anime%</option>
-				<option value="it">%i18n:common.post_categories.it%</option>
-				<option value="gadgets">%i18n:common.post_categories.gadgets%</option>
-				<option value="photography">%i18n:common.post_categories.photography%</option>
-			</select>
-			<button @click="categorize">%i18n:common.tags.mk-post-menu.categorize%</button>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		$border-color = rgba(27, 31, 35, 0.15)
-
-		:scope
-			display block
-			position initial
-
-			> .backdrop
-				position fixed
-				top 0
-				left 0
-				z-index 10000
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.1)
-				opacity 0
-
-			> .popover
-				position absolute
-				z-index 10001
-				background #fff
-				border 1px solid $border-color
-				border-radius 4px
-				box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
-				transform scale(0.5)
-				opacity 0
-
-				$balloon-size = 16px
-
-				&:not(.compact)
-					margin-top $balloon-size
-					transform-origin center -($balloon-size)
-
-					&:before
-						content ""
-						display block
-						position absolute
-						top -($balloon-size * 2)
-						left s('calc(50% - %s)', $balloon-size)
-						border-top solid $balloon-size transparent
-						border-left solid $balloon-size transparent
-						border-right solid $balloon-size transparent
-						border-bottom solid $balloon-size $border-color
-
-					&:after
-						content ""
-						display block
-						position absolute
-						top -($balloon-size * 2) + 1.5px
-						left s('calc(50% - %s)', $balloon-size)
-						border-top solid $balloon-size transparent
-						border-left solid $balloon-size transparent
-						border-right solid $balloon-size transparent
-						border-bottom solid $balloon-size #fff
-
-				> button
-					display block
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.post = this.opts.post;
-		this.source = this.opts.source;
-
-		this.on('mount', () => {
-			const rect = this.source.getBoundingClientRect();
-			const width = this.$refs.popover.offsetWidth;
-			const height = this.$refs.popover.offsetHeight;
-			if (this.opts.compact) {
-				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
-				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
-				this.$refs.popover.style.top = (y - (height / 2)) + 'px';
-			} else {
-				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
-				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
-				this.$refs.popover.style.top = y + 'px';
-			}
-
-			anime({
-				targets: this.$refs.backdrop,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.popover,
-				opacity: 1,
-				scale: [0.5, 1],
-				duration: 500
-			});
-		});
-
-		this.pin = () => {
-			this.api('i/pin', {
-				post_id: this.post.id
-			}).then(() => {
-				if (this.opts.cb) this.opts.cb('pinned', '%i18n:common.tags.mk-post-menu.pinned%');
-				this.$destroy();
-			});
-		};
-
-		this.categorize = () => {
-			const category = this.$refs.categorySelect.options[this.$refs.categorySelect.selectedIndex].value;
-			this.api('posts/categorize', {
-				post_id: this.post.id,
-				category: category
-			}).then(() => {
-				if (this.opts.cb) this.opts.cb('categorized', '%i18n:common.tags.mk-post-menu.categorized%');
-				this.$destroy();
-			});
-		};
-
-		this.close = () => {
-			this.$refs.backdrop.style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.backdrop,
-				opacity: 0,
-				duration: 200,
-				easing: 'linear'
-			});
-
-			this.$refs.popover.style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.popover,
-				opacity: 0,
-				scale: 0.5,
-				duration: 200,
-				easing: 'easeInBack',
-				complete: () => this.$destroy()
-			});
-		};
-	</script>
-</mk-post-menu>
diff --git a/src/web/app/common/tags/raw.tag b/src/web/app/common/tags/raw.tag
deleted file mode 100644
index 149ac6c4bf..0000000000
--- a/src/web/app/common/tags/raw.tag
+++ /dev/null
@@ -1,13 +0,0 @@
-<mk-raw>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.root.innerHTML = this.opts.content;
-
-		this.on('updated', () => {
-			this.root.innerHTML = this.opts.content;
-		});
-	</script>
-</mk-raw>
diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag
deleted file mode 100644
index 57ac5ec979..0000000000
--- a/src/web/app/common/tags/signin-history.tag
+++ /dev/null
@@ -1,116 +0,0 @@
-<mk-signin-history>
-	<div class="records" v-if="history.length != 0">
-		<mk-signin-record each={ rec in history } rec={ rec }/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.history = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.api('i/signin_history').then(history => {
-				this.update({
-					fetching: false,
-					history: history
-				});
-			});
-
-			this.connection.on('signin', this.onSignin);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('signin', this.onSignin);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.onSignin = signin => {
-			this.history.unshift(signin);
-			this.update();
-		};
-	</script>
-</mk-signin-history>
-
-<mk-signin-record>
-	<header @click="toggle">
-		<template v-if="rec.success">%fa:check%</template>
-		<template v-if="!rec.success">%fa:times%</template>
-		<span class="ip">{ rec.ip }</span>
-		<mk-time time={ rec.created_at }/>
-	</header>
-	<pre ref="headers" class="json" show={ show }>{ JSON.stringify(rec.headers, null, 2) }</pre>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			border-bottom solid 1px #eee
-
-			> header
-				display flex
-				padding 8px 0
-				line-height 32px
-				cursor pointer
-
-				> [data-fa]
-					margin-right 8px
-					text-align left
-
-					&.check
-						color #0fda82
-
-					&.times
-						color #ff3100
-
-				> .ip
-					display inline-block
-					text-align left
-					padding 8px
-					line-height 16px
-					font-family monospace
-					font-size 14px
-					color #444
-					background #f8f8f8
-					border-radius 4px
-
-				> mk-time
-					margin-left auto
-					text-align right
-					color #777
-
-			> pre
-				overflow auto
-				margin 0 0 16px 0
-				max-height 100px
-				white-space pre-wrap
-				word-break break-all
-				color #4a535a
-
-	</style>
-
-	<script lang="typescript">
-		import hljs from 'highlight.js';
-
-		this.rec = this.opts.rec;
-		this.show = false;
-
-		this.on('mount', () => {
-			hljs.highlightBlock(this.$refs.headers);
-		});
-
-		this.toggle = () => {
-			this.update({
-				show: !this.show
-			});
-		};
-	</script>
-</mk-signin-record>
diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag
deleted file mode 100644
index 89213d1f73..0000000000
--- a/src/web/app/common/tags/signin.tag
+++ /dev/null
@@ -1,155 +0,0 @@
-<mk-signin>
-	<form :class="{ signing: signing }" onsubmit={ onsubmit }>
-		<label class="user-name">
-			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/>%fa:at%
-		</label>
-		<label class="password">
-			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/>%fa:lock%
-		</label>
-		<label class="token" v-if="user && user.two_factor_enabled">
-			<input ref="token" type="number" placeholder="%i18n:common.tags.mk-signin.token%" required="required"/>%fa:lock%
-		</label>
-		<button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button>
-	</form>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> form
-				display block
-				z-index 2
-
-				&.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(0, 0, 0, 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(0, 0, 0, 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
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = null;
-		this.signing = false;
-
-		this.oninput = () => {
-			this.api('users/show', {
-				username: this.$refs.username.value
-			}).then(user => {
-				this.user = user;
-				this.$emit('user', user);
-				this.update();
-			});
-		};
-
-		this.onsubmit = e => {
-			e.preventDefault();
-
-			if (this.$refs.username.value == '') {
-				this.$refs.username.focus();
-				return false;
-			}
-			if (this.$refs.password.value == '') {
-				this.$refs.password.focus();
-				return false;
-			}
-			if (this.user && this.user.two_factor_enabled && this.$refs.token.value == '') {
-				this.$refs.token.focus();
-				return false;
-			}
-
-			this.update({
-				signing: true
-			});
-
-			this.api('signin', {
-				username: this.$refs.username.value,
-				password: this.$refs.password.value,
-				token: this.user && this.user.two_factor_enabled ? this.$refs.token.value : undefined
-			}).then(() => {
-				location.reload();
-			}).catch(() => {
-				alert('something happened');
-				this.update({
-					signing: false
-				});
-			});
-
-			return false;
-		};
-	</script>
-</mk-signin>
diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag
deleted file mode 100644
index 99be10609b..0000000000
--- a/src/web/app/common/tags/signup.tag
+++ /dev/null
@@ -1,307 +0,0 @@
-<mk-signup>
-	<form onsubmit={ onsubmit } autocomplete="off">
-		<label class="username">
-			<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
-			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup={ onChangeUsername }/>
-			<p class="profile-page-url-preview" v-if="refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange'">{ _URL_ + '/' + refs.username.value }</p>
-			<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:common.tags.mk-signup.checking%</p>
-			<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.available%</p>
-			<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.unavailable%</p>
-			<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.error%</p>
-			<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.invalid-format%</p>
-			<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-short%</p>
-			<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-long%</p>
-		</label>
-		<label class="password">
-			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%</p>
-			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePassword }/>
-			<div class="meter" v-if="passwordStrength != ''" data-strength={ passwordStrength }>
-				<div class="value" ref="passwordMetar"></div>
-			</div>
-			<p class="info" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.weak-password%</p>
-			<p class="info" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.normal-password%</p>
-			<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.strong-password%</p>
-		</label>
-		<label class="retype-password">
-			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
-			<input ref="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePasswordRetype }/>
-			<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
-			<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.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:common.tags.mk-signup.recaptcha%</p>
-			<div v-if="recaptcha" class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div>
-		</label>
-		<label class="agree-tou">
-			<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
-			<p><a href={ touUrl } target="_blank">利用規約</a>に同意する</p>
-		</label>
-		<button @click="onsubmit">%i18n:common.tags.mk-signup.create%</button>
-	</form>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			min-width 302px
-			overflow hidden
-
-			> form
-
-				label
-					display block
-					margin 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(0, 0, 0, 0.1)
-					border-radius 4px
-					box-shadow 0 0 0 114514px #fff inset
-					transition all .3s ease
-
-					&:hover
-						border-color rgba(0, 0, 0, 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
-
-					&:hover
-						background #f4f4f4
-
-					&:active
-						background #eee
-
-					&, *
-						cursor pointer
-
-					p
-						display inline
-						color #555
-
-				button
-					margin 0 0 32px 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>
-	<script lang="typescript">
-		this.mixin('api');
-		const getPasswordStrength = require('syuilo-password-strength');
-
-		this.usernameState = null;
-		this.passwordStrength = '';
-		this.passwordRetypeState = null;
-		this.recaptchaed = false;
-
-		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/tou`;
-
-		window.onRecaptchaed = () => {
-			this.recaptchaed = true;
-			this.update();
-		};
-
-		window.onRecaptchaExpired = () => {
-			this.recaptchaed = false;
-			this.update();
-		};
-
-		this.on('mount', () => {
-			this.update({
-				recaptcha: {
-					site_key: _RECAPTCHA_SITEKEY_
-				}
-			});
-
-			const head = document.getElementsByTagName('head')[0];
-			const script = document.createElement('script');
-			script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
-			head.appendChild(script);
-		});
-
-		this.onChangeUsername = () => {
-			const username = this.$refs.username.value;
-
-			if (username == '') {
-				this.update({
-					usernameState: null
-				});
-				return;
-			}
-
-			const err =
-				!username.match(/^[a-zA-Z0-9\-]+$/) ? 'invalid-format' :
-				username.length < 3 ? 'min-range' :
-				username.length > 20 ? 'max-range' :
-				null;
-
-			if (err) {
-				this.update({
-					usernameState: err
-				});
-				return;
-			}
-
-			this.update({
-				usernameState: 'wait'
-			});
-
-			this.api('username/available', {
-				username: username
-			}).then(result => {
-				this.update({
-					usernameState: result.available ? 'ok' : 'unavailable'
-				});
-			}).catch(err => {
-				this.update({
-					usernameState: 'error'
-				});
-			});
-		};
-
-		this.onChangePassword = () => {
-			const password = this.$refs.password.value;
-
-			if (password == '') {
-				this.passwordStrength = '';
-				return;
-			}
-
-			const strength = getPasswordStrength(password);
-			this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
-			this.update();
-			this.$refs.passwordMetar.style.width = `${strength * 100}%`;
-		};
-
-		this.onChangePasswordRetype = () => {
-			const password = this.$refs.password.value;
-			const retypedPassword = this.$refs.passwordRetype.value;
-
-			if (retypedPassword == '') {
-				this.passwordRetypeState = null;
-				return;
-			}
-
-			this.passwordRetypeState = password == retypedPassword ? 'match' : 'not-match';
-		};
-
-		this.onsubmit = e => {
-			e.preventDefault();
-
-			const username = this.$refs.username.value;
-			const password = this.$refs.password.value;
-
-			const locker = document.body.appendChild(document.createElement('mk-locker'));
-
-			this.api('signup', {
-				username: username,
-				password: password,
-				'g-recaptcha-response': grecaptcha.getResponse()
-			}).then(() => {
-				this.api('signin', {
-					username: username,
-					password: password
-				}).then(() => {
-					location.href = '/';
-				});
-			}).catch(() => {
-				alert('%i18n:common.tags.mk-signup.some-error%');
-
-				grecaptcha.reset();
-				this.recaptchaed = false;
-
-				locker.parentNode.removeChild(locker);
-			});
-
-			return false;
-		};
-	</script>
-</mk-signup>
diff --git a/src/web/app/common/tags/special-message.tag b/src/web/app/common/tags/special-message.tag
deleted file mode 100644
index da903c6325..0000000000
--- a/src/web/app/common/tags/special-message.tag
+++ /dev/null
@@ -1,27 +0,0 @@
-<mk-special-message>
-	<p v-if="m == 1 && d == 1">%i18n:common.tags.mk-special-message.new-year%</p>
-	<p v-if="m == 12 && d == 25">%i18n:common.tags.mk-special-message.christmas%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			&:empty
-				display none
-
-			> p
-				margin 0
-				padding 4px
-				text-align center
-				font-size 14px
-				font-weight bold
-				text-transform uppercase
-				color #fff
-				background #ff1036
-
-	</style>
-	<script lang="typescript">
-		const now = new Date();
-		this.d = now.getDate();
-		this.m = now.getMonth() + 1;
-	</script>
-</mk-special-message>
diff --git a/src/web/app/common/tags/twitter-setting.tag b/src/web/app/common/tags/twitter-setting.tag
deleted file mode 100644
index 935239f44e..0000000000
--- a/src/web/app/common/tags/twitter-setting.tag
+++ /dev/null
@@ -1,62 +0,0 @@
-<mk-twitter-setting>
-	<p>%i18n:common.tags.mk-twitter-setting.description%<a href={ _DOCS_URL_ + '/link-to-twitter' } target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
-	<p class="account" v-if="I.twitter" title={ 'Twitter ID: ' + I.twitter.user_id }>%i18n:common.tags.mk-twitter-setting.connected-to%: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
-	<p>
-		<a href={ _API_URL_ + '/connect/twitter' } target="_blank" @click="connect">{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
-		<span v-if="I.twitter"> or </span>
-		<a href={ _API_URL_ + '/disconnect/twitter' } target="_blank" v-if="I.twitter" @click="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
-	</p>
-	<p class="id" v-if="I.twitter">Twitter ID: { I.twitter.user_id }</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #4a535a
-
-			.account
-				border solid 1px #e1e8ed
-				border-radius 4px
-				padding 16px
-
-				a
-					font-weight bold
-					color inherit
-
-			.id
-				color #8899a6
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-
-		this.form = null;
-
-		this.on('mount', () => {
-			this.I.on('updated', this.onMeUpdated);
-		});
-
-		this.on('unmount', () => {
-			this.I.off('updated', this.onMeUpdated);
-		});
-
-		this.onMeUpdated = () => {
-			if (this.I.twitter) {
-				if (this.form) this.form.close();
-			}
-		};
-
-		this.connect = e => {
-			e.preventDefault();
-			this.form = window.open(_API_URL_ + '/connect/twitter',
-				'twitter_connect_window',
-				'height=570,width=520');
-			return false;
-		};
-
-		this.disconnect = e => {
-			e.preventDefault();
-			window.open(_API_URL_ + '/disconnect/twitter',
-				'twitter_disconnect_window',
-				'height=570,width=520');
-			return false;
-		};
-	</script>
-</mk-twitter-setting>
diff --git a/src/web/app/common/tags/uploader.tag b/src/web/app/common/tags/uploader.tag
deleted file mode 100644
index 519b063fac..0000000000
--- a/src/web/app/common/tags/uploader.tag
+++ /dev/null
@@ -1,199 +0,0 @@
-<mk-uploader>
-	<ol v-if="uploads.length > 0">
-		<li each={ uploads }>
-			<div class="img" style="background-image: url({ img })"></div>
-			<p class="name">%fa:spinner .pulse%{ name }</p>
-			<p class="status"><span class="initing" v-if="progress == undefined">%i18n:common.tags.mk-uploader.waiting%<mk-ellipsis/></span><span class="kb" v-if="progress != undefined">{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" v-if="progress != undefined">{ Math.floor((progress.value / progress.max) * 100) }</span></p>
-			<progress v-if="progress != undefined && progress.value != progress.max" value={ progress.value } max={ progress.max }></progress>
-			<div class="progress initing" v-if="progress == undefined"></div>
-			<div class="progress waiting" v-if="progress != undefined && progress.value == progress.max"></div>
-		</li>
-	</ol>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow auto
-
-			&:empty
-				display none
-
-			> ol
-				display block
-				margin 0
-				padding 0
-				list-style none
-
-				> li
-					display block
-					margin 8px 0 0 0
-					padding 0
-					height 36px
-					box-shadow 0 -1px 0 rgba($theme-color, 0.1)
-					border-top solid 8px transparent
-
-					&:first-child
-						margin 0
-						box-shadow none
-						border-top none
-
-					> .img
-						display block
-						position absolute
-						top 0
-						left 0
-						width 36px
-						height 36px
-						background-size cover
-						background-position center center
-
-					> .name
-						display block
-						position absolute
-						top 0
-						left 44px
-						margin 0
-						padding 0
-						max-width 256px
-						font-size 0.8em
-						color rgba($theme-color, 0.7)
-						white-space nowrap
-						text-overflow ellipsis
-						overflow hidden
-
-						> [data-fa]
-							margin-right 4px
-
-					> .status
-						display block
-						position absolute
-						top 0
-						right 0
-						margin 0
-						padding 0
-						font-size 0.8em
-
-						> .initing
-							color rgba($theme-color, 0.5)
-
-						> .kb
-							color rgba($theme-color, 0.5)
-
-						> .percentage
-							display inline-block
-							width 48px
-							text-align right
-
-							color rgba($theme-color, 0.7)
-
-							&:after
-								content '%'
-
-					> progress
-						display block
-						position absolute
-						bottom 0
-						right 0
-						margin 0
-						width calc(100% - 44px)
-						height 8px
-						background transparent
-						border none
-						border-radius 4px
-						overflow hidden
-
-						&::-webkit-progress-value
-							background $theme-color
-
-						&::-webkit-progress-bar
-							background rgba($theme-color, 0.1)
-
-					> .progress
-						display block
-						position absolute
-						bottom 0
-						right 0
-						margin 0
-						width calc(100% - 44px)
-						height 8px
-						border none
-						border-radius 4px
-						background linear-gradient(
-							45deg,
-							lighten($theme-color, 30%) 25%,
-							$theme-color               25%,
-							$theme-color               50%,
-							lighten($theme-color, 30%) 50%,
-							lighten($theme-color, 30%) 75%,
-							$theme-color               75%,
-							$theme-color
-						)
-						background-size 32px 32px
-						animation bg 1.5s linear infinite
-
-						&.initing
-							opacity 0.3
-
-						@keyframes bg
-							from {background-position: 0 0;}
-							to   {background-position: -64px 32px;}
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-
-		this.uploads = [];
-
-		this.upload = (file, folder) => {
-			if (folder && typeof folder == 'object') folder = folder.id;
-
-			const id = Math.random();
-
-			const ctx = {
-				id: id,
-				name: file.name || 'untitled',
-				progress: undefined
-			};
-
-			this.uploads.push(ctx);
-			this.$emit('change-uploads', this.uploads);
-			this.update();
-
-			const reader = new FileReader();
-			reader.onload = e => {
-				ctx.img = e.target.result;
-				this.update();
-			};
-			reader.readAsDataURL(file);
-
-			const data = new FormData();
-			data.append('i', this.I.token);
-			data.append('file', file);
-
-			if (folder) data.append('folder_id', folder);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', _API_URL_ + '/drive/files/create', true);
-			xhr.onload = e => {
-				const driveFile = JSON.parse(e.target.response);
-
-				this.$emit('uploaded', driveFile);
-
-				this.uploads = this.uploads.filter(x => x.id != id);
-				this.$emit('change-uploads', this.uploads);
-
-				this.update();
-			};
-
-			xhr.upload.onprogress = e => {
-				if (e.lengthComputable) {
-					if (ctx.progress == undefined) ctx.progress = {};
-					ctx.progress.max = e.total;
-					ctx.progress.value = e.loaded;
-					this.update();
-				}
-			};
-
-			xhr.send(data);
-		};
-	</script>
-</mk-uploader>
diff --git a/src/web/app/desktop/-tags/analog-clock.tag b/src/web/app/desktop/-tags/analog-clock.tag
new file mode 100644
index 0000000000..6b2bce3b2c
--- /dev/null
+++ b/src/web/app/desktop/-tags/analog-clock.tag
@@ -0,0 +1,95 @@
+<mk-analog-clock>
+	<canvas ref="canvas" width="256" height="256"></canvas>
+	<style lang="stylus" scoped>
+		:scope
+			> canvas
+				display block
+				width 256px
+				height 256px
+	</style>
+	<script lang="typescript">
+		const Vec2 = function(x, y) {
+			this.x = x;
+			this.y = y;
+		};
+
+		this.on('mount', () => {
+			this.draw()
+			this.clock = setInterval(this.draw, 1000);
+		});
+
+		this.on('unmount', () => {
+			clearInterval(this.clock);
+		});
+
+		this.draw = () => {
+			const now = new Date();
+			const s = now.getSeconds();
+			const m = now.getMinutes();
+			const h = now.getHours();
+
+			const ctx = this.$refs.canvas.getContext('2d');
+			const canvW = this.$refs.canvas.width;
+			const canvH = this.$refs.canvas.height;
+			ctx.clearRect(0, 0, canvW, canvH);
+
+			{ // 背景
+				const center = Math.min((canvW / 2), (canvH / 2));
+				const lineStart =    center * 0.90;
+				const shortLineEnd = center * 0.87;
+				const longLineEnd =  center * 0.84;
+				for (let i = 0; i < 60; i++) {
+					const angle = Math.PI * i / 30;
+					const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+					ctx.beginPath();
+					ctx.lineWidth = 1;
+					ctx.moveTo((canvW / 2) + uv.x * lineStart, (canvH / 2) + uv.y * lineStart);
+					if (i % 5 == 0) {
+						ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+						ctx.lineTo((canvW / 2) + uv.x * longLineEnd, (canvH / 2) + uv.y * longLineEnd);
+					} else {
+						ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+						ctx.lineTo((canvW / 2) + uv.x * shortLineEnd, (canvH / 2) + uv.y * shortLineEnd);
+					}
+					ctx.stroke();
+				}
+			}
+
+			{ // 分
+				const angle = Math.PI * (m + s / 60) / 30;
+				const length = Math.min(canvW, canvH) / 2.6;
+				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+				ctx.beginPath();
+				ctx.strokeStyle = '#ffffff';
+				ctx.lineWidth = 2;
+				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
+				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
+				ctx.stroke();
+			}
+
+			{ // 時
+				const angle = Math.PI * (h % 12 + m / 60) / 6;
+				const length = Math.min(canvW, canvH) / 4;
+				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+				ctx.beginPath();
+				ctx.strokeStyle = _THEME_COLOR_;
+				ctx.lineWidth = 2;
+				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
+				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
+				ctx.stroke();
+			}
+
+			{ // 秒
+				const angle = Math.PI * s / 30;
+				const length = Math.min(canvW, canvH) / 2.6;
+				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+				ctx.beginPath();
+				ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+				ctx.lineWidth = 1;
+				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
+				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
+				ctx.stroke();
+			}
+		};
+	</script>
+</mk-analog-clock>
diff --git a/src/web/app/desktop/-tags/autocomplete-suggestion.tag b/src/web/app/desktop/-tags/autocomplete-suggestion.tag
new file mode 100644
index 0000000000..a0215666c0
--- /dev/null
+++ b/src/web/app/desktop/-tags/autocomplete-suggestion.tag
@@ -0,0 +1,197 @@
+<mk-autocomplete-suggestion>
+	<ol class="users" ref="users" v-if="users.length > 0">
+		<li each={ users } @click="parent.onClick" onkeydown={ parent.onKeydown } tabindex="-1">
+			<img class="avatar" src={ avatar_url + '?thumbnail&size=32' } alt=""/>
+			<span class="name">{ name }</span>
+			<span class="username">@{ username }</span>
+		</li>
+	</ol>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position absolute
+			z-index 65535
+			margin-top calc(1em + 8px)
+			overflow hidden
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.1)
+			border-radius 4px
+
+			> .users
+				display block
+				margin 0
+				padding 4px 0
+				max-height 190px
+				max-width 500px
+				overflow auto
+				list-style none
+
+				> li
+					display block
+					padding 4px 12px
+					white-space nowrap
+					overflow hidden
+					font-size 0.9em
+					color rgba(0, 0, 0, 0.8)
+					cursor default
+
+					&, *
+						user-select none
+
+					&:hover
+					&[data-selected='true']
+						color #fff
+						background $theme-color
+
+						.name
+							color #fff
+
+						.username
+							color #fff
+
+					&:active
+						color #fff
+						background darken($theme-color, 10%)
+
+						.name
+							color #fff
+
+						.username
+							color #fff
+
+					.avatar
+						vertical-align middle
+						min-width 28px
+						min-height 28px
+						max-width 28px
+						max-height 28px
+						margin 0 8px 0 0
+						border-radius 100%
+
+					.name
+						margin 0 8px 0 0
+						/*font-weight bold*/
+						font-weight normal
+						color rgba(0, 0, 0, 0.8)
+
+					.username
+						font-weight normal
+						color rgba(0, 0, 0, 0.3)
+
+	</style>
+	<script lang="typescript">
+		import contains from '../../common/scripts/contains';
+
+		this.mixin('api');
+
+		this.q = this.opts.q;
+		this.textarea = this.opts.textarea;
+		this.fetching = true;
+		this.users = [];
+		this.select = -1;
+
+		this.on('mount', () => {
+			this.textarea.addEventListener('keydown', this.onKeydown);
+
+			document.querySelectorAll('body *').forEach(el => {
+				el.addEventListener('mousedown', this.mousedown);
+			});
+
+			this.api('users/search_by_username', {
+				query: this.q,
+				limit: 30
+			}).then(users => {
+				this.update({
+					fetching: false,
+					users: users
+				});
+			});
+		});
+
+		this.on('unmount', () => {
+			this.textarea.removeEventListener('keydown', this.onKeydown);
+
+			document.querySelectorAll('body *').forEach(el => {
+				el.removeEventListener('mousedown', this.mousedown);
+			});
+		});
+
+		this.mousedown = e => {
+			if (!contains(this.root, e.target) && (this.root != e.target)) this.close();
+		};
+
+		this.onClick = e => {
+			this.complete(e.item);
+		};
+
+		this.onKeydown = e => {
+			const cancel = () => {
+				e.preventDefault();
+				e.stopPropagation();
+			};
+
+			switch (e.which) {
+				case 10: // [ENTER]
+				case 13: // [ENTER]
+					if (this.select !== -1) {
+						cancel();
+						this.complete(this.users[this.select]);
+					} else {
+						this.close();
+					}
+					break;
+
+				case 27: // [ESC]
+					cancel();
+					this.close();
+					break;
+
+				case 38: // [↑]
+					if (this.select !== -1) {
+						cancel();
+						this.selectPrev();
+					} else {
+						this.close();
+					}
+					break;
+
+				case 9: // [TAB]
+				case 40: // [↓]
+					cancel();
+					this.selectNext();
+					break;
+
+				default:
+					this.close();
+			}
+		};
+
+		this.selectNext = () => {
+			if (++this.select >= this.users.length) this.select = 0;
+			this.applySelect();
+		};
+
+		this.selectPrev = () => {
+			if (--this.select < 0) this.select = this.users.length - 1;
+			this.applySelect();
+		};
+
+		this.applySelect = () => {
+			Array.from(this.$refs.users.children).forEach(el => {
+				el.removeAttribute('data-selected');
+			});
+
+			this.$refs.users.children[this.select].setAttribute('data-selected', 'true');
+			this.$refs.users.children[this.select].focus();
+		};
+
+		this.complete = user => {
+			this.opts.complete(user);
+		};
+
+		this.close = () => {
+			this.opts.close();
+		};
+
+	</script>
+</mk-autocomplete-suggestion>
diff --git a/src/web/app/desktop/-tags/big-follow-button.tag b/src/web/app/desktop/-tags/big-follow-button.tag
new file mode 100644
index 0000000000..5ea09fdfc8
--- /dev/null
+++ b/src/web/app/desktop/-tags/big-follow-button.tag
@@ -0,0 +1,153 @@
+<mk-big-follow-button>
+	<button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
+		<span v-if="!wait && user.is_following">%fa:minus%フォロー解除</span>
+		<span v-if="!wait && !user.is_following">%fa:plus%フォロー</span>
+		<template v-if="wait">%fa:spinner .pulse .fw%</template>
+	</button>
+	<div class="init" v-if="init">%fa:spinner .pulse .fw%</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> button
+			> .init
+				display block
+				cursor pointer
+				padding 0
+				margin 0
+				width 100%
+				line-height 38px
+				font-size 1em
+				outline none
+				border-radius 4px
+
+				*
+					pointer-events none
+
+				i
+					margin-right 8px
+
+				&:focus
+					&:after
+						content ""
+						pointer-events none
+						position absolute
+						top -5px
+						right -5px
+						bottom -5px
+						left -5px
+						border 2px solid rgba($theme-color, 0.3)
+						border-radius 8px
+
+				&.follow
+					color #888
+					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+					border solid 1px #e2e2e2
+
+					&:hover
+						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+						border-color #dcdcdc
+
+					&:active
+						background #ececec
+						border-color #dcdcdc
+
+				&.unfollow
+					color $theme-color-foreground
+					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+					border solid 1px lighten($theme-color, 15%)
+
+					&:not(:disabled)
+						font-weight bold
+
+					&:hover:not(:disabled)
+						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+						border-color $theme-color
+
+					&:active:not(:disabled)
+						background $theme-color
+						border-color $theme-color
+
+				&.wait
+					cursor wait !important
+					opacity 0.7
+
+	</style>
+	<script lang="typescript">
+		import isPromise from '../../common/scripts/is-promise';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.user = null;
+		this.userPromise = isPromise(this.opts.user)
+			? this.opts.user
+			: Promise.resolve(this.opts.user);
+		this.init = true;
+		this.wait = false;
+
+		this.on('mount', () => {
+			this.userPromise.then(user => {
+				this.update({
+					init: false,
+					user: user
+				});
+				this.connection.on('follow', this.onStreamFollow);
+				this.connection.on('unfollow', this.onStreamUnfollow);
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('follow', this.onStreamFollow);
+			this.connection.off('unfollow', this.onStreamUnfollow);
+			this.stream.dispose(this.connectionId);
+		});
+
+		this.onStreamFollow = user => {
+			if (user.id == this.user.id) {
+				this.update({
+					user: user
+				});
+			}
+		};
+
+		this.onStreamUnfollow = user => {
+			if (user.id == this.user.id) {
+				this.update({
+					user: user
+				});
+			}
+		};
+
+		this.onclick = () => {
+			this.wait = true;
+			if (this.user.is_following) {
+				this.api('following/delete', {
+					user_id: this.user.id
+				}).then(() => {
+					this.user.is_following = false;
+				}).catch(err => {
+					console.error(err);
+				}).then(() => {
+					this.wait = false;
+					this.update();
+				});
+			} else {
+				this.api('following/create', {
+					user_id: this.user.id
+				}).then(() => {
+					this.user.is_following = true;
+				}).catch(err => {
+					console.error(err);
+				}).then(() => {
+					this.wait = false;
+					this.update();
+				});
+			}
+		};
+	</script>
+</mk-big-follow-button>
diff --git a/src/web/app/desktop/-tags/contextmenu.tag b/src/web/app/desktop/-tags/contextmenu.tag
new file mode 100644
index 0000000000..ee4c48fbde
--- /dev/null
+++ b/src/web/app/desktop/-tags/contextmenu.tag
@@ -0,0 +1,138 @@
+<mk-contextmenu>
+	<yield />
+	<style lang="stylus" scoped>
+		:scope
+			$width = 240px
+			$item-height = 38px
+			$padding = 10px
+
+			display none
+			position fixed
+			top 0
+			left 0
+			z-index 4096
+			width $width
+			font-size 0.8em
+			background #fff
+			border-radius 0 4px 4px 4px
+			box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+			opacity 0
+
+			ul
+				display block
+				margin 0
+				padding $padding 0
+				list-style none
+
+			li
+				display block
+
+				&.separator
+					margin-top $padding
+					padding-top $padding
+					border-top solid 1px #eee
+
+				&.has-child
+					> p
+						cursor default
+
+						> [data-fa]:last-child
+							position absolute
+							top 0
+							right 8px
+							line-height $item-height
+
+					&:hover > ul
+						visibility visible
+
+					&:active
+						> p, a
+							background $theme-color
+
+				> p, a
+					display block
+					z-index 1
+					margin 0
+					padding 0 32px 0 38px
+					line-height $item-height
+					color #868C8C
+					text-decoration none
+					cursor pointer
+
+					&:hover
+						text-decoration none
+
+					*
+						pointer-events none
+
+					> i
+						width 28px
+						margin-left -28px
+						text-align center
+
+				&:hover
+					> p, a
+						text-decoration none
+						background $theme-color
+						color $theme-color-foreground
+
+				&:active
+					> p, a
+						text-decoration none
+						background darken($theme-color, 10%)
+						color $theme-color-foreground
+
+			li > ul
+				visibility hidden
+				position absolute
+				top 0
+				left $width
+				margin-top -($padding)
+				width $width
+				background #fff
+				border-radius 0 4px 4px 4px
+				box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+				transition visibility 0s linear 0.2s
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+		import contains from '../../common/scripts/contains';
+
+		this.root.addEventListener('contextmenu', e => {
+			e.preventDefault();
+		});
+
+		this.mousedown = e => {
+			e.preventDefault();
+			if (!contains(this.root, e.target) && (this.root != e.target)) this.close();
+			return false;
+		};
+
+		this.open = pos => {
+			document.querySelectorAll('body *').forEach(el => {
+				el.addEventListener('mousedown', this.mousedown);
+			});
+
+			this.root.style.display = 'block';
+			this.root.style.left = pos.x + 'px';
+			this.root.style.top = pos.y + 'px';
+
+			anime({
+				targets: this.root,
+				opacity: [0, 1],
+				duration: 100,
+				easing: 'linear'
+			});
+		};
+
+		this.close = () => {
+			document.querySelectorAll('body *').forEach(el => {
+				el.removeEventListener('mousedown', this.mousedown);
+			});
+
+			this.$emit('closed');
+			this.$destroy();
+		};
+	</script>
+</mk-contextmenu>
diff --git a/src/web/app/desktop/-tags/crop-window.tag b/src/web/app/desktop/-tags/crop-window.tag
new file mode 100644
index 0000000000..c26f74b121
--- /dev/null
+++ b/src/web/app/desktop/-tags/crop-window.tag
@@ -0,0 +1,196 @@
+<mk-crop-window>
+	<mk-window ref="window" is-modal={ true } width={ '800px' }>
+		<yield to="header">%fa:crop%{ parent.title }</yield>
+		<yield to="content">
+			<div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div>
+			<div class="action">
+				<button class="skip" @click="parent.skip">クロップをスキップ</button>
+				<button class="cancel" @click="parent.cancel">キャンセル</button>
+				<button class="ok" @click="parent.ok">決定</button>
+			</div>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> mk-window
+				[data-yield='header']
+					> [data-fa]
+						margin-right 4px
+
+				[data-yield='content']
+
+					> .body
+						> img
+							width 100%
+							max-height 400px
+
+					.cropper-modal {
+						opacity: 0.8;
+					}
+
+					.cropper-view-box {
+						outline-color: $theme-color;
+					}
+
+					.cropper-line, .cropper-point {
+						background-color: $theme-color;
+					}
+
+					.cropper-bg {
+						animation: cropper-bg 0.5s linear infinite;
+					}
+
+					@-webkit-keyframes cropper-bg {
+						0% {
+							background-position: 0 0;
+						}
+
+						100% {
+							background-position: -8px -8px;
+						}
+					}
+
+					@-moz-keyframes cropper-bg {
+						0% {
+							background-position: 0 0;
+						}
+
+						100% {
+							background-position: -8px -8px;
+						}
+					}
+
+					@-ms-keyframes cropper-bg {
+						0% {
+							background-position: 0 0;
+						}
+
+						100% {
+							background-position: -8px -8px;
+						}
+					}
+
+					@keyframes cropper-bg {
+						0% {
+							background-position: 0 0;
+						}
+
+						100% {
+							background-position: -8px -8px;
+						}
+					}
+
+					> .action
+						height 72px
+						background lighten($theme-color, 95%)
+
+						.ok
+						.cancel
+						.skip
+							display block
+							position absolute
+							bottom 16px
+							cursor pointer
+							padding 0
+							margin 0
+							height 40px
+							font-size 1em
+							outline none
+							border-radius 4px
+
+							&:focus
+								&:after
+									content ""
+									pointer-events none
+									position absolute
+									top -5px
+									right -5px
+									bottom -5px
+									left -5px
+									border 2px solid rgba($theme-color, 0.3)
+									border-radius 8px
+
+							&:disabled
+								opacity 0.7
+								cursor default
+
+						.ok
+						.cancel
+							width 120px
+
+						.ok
+							right 16px
+							color $theme-color-foreground
+							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+							border solid 1px lighten($theme-color, 15%)
+
+							&:not(:disabled)
+								font-weight bold
+
+							&:hover:not(:disabled)
+								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+								border-color $theme-color
+
+							&:active:not(:disabled)
+								background $theme-color
+								border-color $theme-color
+
+						.cancel
+						.skip
+							color #888
+							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+							border solid 1px #e2e2e2
+
+							&:hover
+								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+								border-color #dcdcdc
+
+							&:active
+								background #ececec
+								border-color #dcdcdc
+
+						.cancel
+							right 148px
+
+						.skip
+							left 16px
+							width 150px
+
+	</style>
+	<script lang="typescript">
+		const Cropper = require('cropperjs');
+
+		this.image = this.opts.file;
+		this.title = this.opts.title;
+		this.aspectRatio = this.opts.aspectRatio;
+		this.cropper = null;
+
+		this.on('mount', () => {
+			this.img = this.$refs.window.refs.img;
+			this.cropper = new Cropper(this.img, {
+				aspectRatio: this.aspectRatio,
+				highlight: false,
+				viewMode: 1
+			});
+		});
+
+		this.ok = () => {
+			this.cropper.getCroppedCanvas().toBlob(blob => {
+				this.$emit('cropped', blob);
+				this.$refs.window.close();
+			});
+		};
+
+		this.skip = () => {
+			this.$emit('skipped');
+			this.$refs.window.close();
+		};
+
+		this.cancel = () => {
+			this.$emit('canceled');
+			this.$refs.window.close();
+		};
+	</script>
+</mk-crop-window>
diff --git a/src/web/app/desktop/-tags/detailed-post-window.tag b/src/web/app/desktop/-tags/detailed-post-window.tag
new file mode 100644
index 0000000000..57e390d50d
--- /dev/null
+++ b/src/web/app/desktop/-tags/detailed-post-window.tag
@@ -0,0 +1,80 @@
+<mk-detailed-post-window>
+	<div class="bg" ref="bg" @click="bgClick"></div>
+	<div class="main" ref="main" v-if="!fetching">
+		<mk-post-detail ref="detail" post={ post }/>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			opacity 0
+
+			> .bg
+				display block
+				position fixed
+				z-index 1000
+				top 0
+				left 0
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.7)
+
+			> .main
+				display block
+				position fixed
+				z-index 1000
+				top 20%
+				left 0
+				right 0
+				margin 0 auto 0 auto
+				padding 0
+				width 638px
+				text-align center
+
+				> mk-post-detail
+					margin 0 auto
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.mixin('api');
+
+		this.fetching = true;
+		this.post = null;
+
+		this.on('mount', () => {
+			anime({
+				targets: this.root,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			this.api('posts/show', {
+				post_id: this.opts.post
+			}).then(post => {
+
+				this.update({
+					fetching: false,
+					post: post
+				});
+			});
+		});
+
+		this.close = () => {
+			this.$refs.bg.style.pointerEvents = 'none';
+			this.$refs.main.style.pointerEvents = 'none';
+			anime({
+				targets: this.root,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear',
+				complete: () => this.$destroy()
+			});
+		};
+
+		this.bgClick = () => {
+			this.close();
+		};
+	</script>
+</mk-detailed-post-window>
diff --git a/src/web/app/desktop/-tags/dialog.tag b/src/web/app/desktop/-tags/dialog.tag
new file mode 100644
index 0000000000..ba2fa514d1
--- /dev/null
+++ b/src/web/app/desktop/-tags/dialog.tag
@@ -0,0 +1,144 @@
+<mk-dialog>
+	<div class="bg" ref="bg" @click="bgClick"></div>
+	<div class="main" ref="main">
+		<header ref="header"></header>
+		<div class="body" ref="body"></div>
+		<div class="buttons">
+			<template each={ opts.buttons }>
+				<button @click="_onclick">{ text }</button>
+			</template>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .bg
+				display block
+				position fixed
+				z-index 8192
+				top 0
+				left 0
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.7)
+				opacity 0
+				pointer-events none
+
+			> .main
+				display block
+				position fixed
+				z-index 8192
+				top 20%
+				left 0
+				right 0
+				margin 0 auto 0 auto
+				padding 32px 42px
+				width 480px
+				background #fff
+				opacity 0
+
+				> header
+					margin 1em 0
+					color $theme-color
+					// color #43A4EC
+					font-weight bold
+
+					&:empty
+						display none
+
+					> i
+						margin-right 0.5em
+
+				> .body
+					margin 1em 0
+					color #888
+
+				> .buttons
+					> button
+						display inline-block
+						float right
+						margin 0
+						padding 10px 10px
+						font-size 1.1em
+						font-weight normal
+						text-decoration none
+						color #888
+						background transparent
+						outline none
+						border none
+						border-radius 0
+						cursor pointer
+						transition color 0.1s ease
+
+						i
+							margin 0 0.375em
+
+						&:hover
+							color $theme-color
+
+						&:active
+							color darken($theme-color, 10%)
+							transition color 0s ease
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.canThrough = opts.canThrough != null ? opts.canThrough : true;
+		this.opts.buttons.forEach(button => {
+			button._onclick = () => {
+				if (button.onclick) button.onclick();
+				this.close();
+			};
+		});
+
+		this.on('mount', () => {
+			this.$refs.header.innerHTML = this.opts.title;
+			this.$refs.body.innerHTML = this.opts.text;
+
+			this.$refs.bg.style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				scale: [1.2, 1],
+				duration: 300,
+				easing: [ 0, 0.5, 0.5, 1 ]
+			});
+		});
+
+		this.close = () => {
+			this.$refs.bg.style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			this.$refs.main.style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				scale: 0.8,
+				duration: 300,
+				easing: [ 0.5, -0.5, 1, 0.5 ],
+				complete: () => this.$destroy()
+			});
+		};
+
+		this.bgClick = () => {
+			if (this.canThrough) {
+				if (this.opts.onThrough) this.opts.onThrough();
+				this.close();
+			}
+		};
+	</script>
+</mk-dialog>
diff --git a/src/web/app/desktop/-tags/donation.tag b/src/web/app/desktop/-tags/donation.tag
new file mode 100644
index 0000000000..fe446f2e61
--- /dev/null
+++ b/src/web/app/desktop/-tags/donation.tag
@@ -0,0 +1,66 @@
+<mk-donation>
+	<button class="close" @click="close">閉じる x</button>
+	<div class="message">
+		<p>利用者の皆さま、</p>
+		<p>
+			今日は、日本の皆さまにお知らせがあります。
+			Misskeyの援助をお願いいたします。
+			私は独立性を守るため、一切の広告を掲載いたしません。
+			平均で約¥1,500の寄付をいただき、運営しております。
+			援助をしてくださる利用者はほんの少数です。
+			お願いいたします。
+			今日、利用者の皆さまが¥300ご援助くだされば、募金活動を一時間で終了することができます。
+			コーヒー1杯ほどの金額です。
+			Misskeyを活用しておられるのでしたら、広告を掲載せずにもう1年活動できるよう、どうか1分だけお時間をください。
+			私は小さな非営利個人ですが、サーバー、プログラム、人件費など、世界でトップクラスのウェブサイト同等のコストがかかります。
+			利用者は何億人といますが、他の大きなサイトに比べてほんの少額の費用で運営しているのです。
+			人間の可能性、自由、そして機会。知識こそ、これらの基盤を成すものです。
+			私は、誰もが無料かつ制限なく知識に触れられるべきだと信じています。
+			募金活動を終了し、Misskeyの改善に戻れるようご援助ください。
+			よろしくお願いいたします。
+		</p>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #fff
+			background #03072C
+
+			> .close
+				position absolute
+				top 16px
+				right 16px
+				z-index 1
+
+			> .message
+				padding 32px
+				font-size 1.4em
+				font-family serif
+
+				> p
+					display block
+					margin 0 auto
+					max-width 1200px
+
+				> p:first-child
+					margin-bottom 16px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		this.close = e => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.I.client_settings.show_donation = false;
+			this.I.update();
+			this.api('i/update', {
+				show_donation: false
+			});
+
+			this.$destroy();
+		};
+	</script>
+</mk-donation>
diff --git a/src/web/app/desktop/-tags/drive/base-contextmenu.tag b/src/web/app/desktop/-tags/drive/base-contextmenu.tag
new file mode 100644
index 0000000000..c93d630263
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/base-contextmenu.tag
@@ -0,0 +1,44 @@
+<mk-drive-browser-base-contextmenu>
+	<mk-contextmenu ref="ctx">
+		<ul>
+			<li @click="parent.createFolder">
+				<p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
+			</li>
+			<li @click="parent.upload">
+				<p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
+			</li>
+			<li @click="parent.urlUpload">
+				<p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
+			</li>
+		</ul>
+	</mk-contextmenu>
+	<script lang="typescript">
+		this.browser = this.opts.browser;
+
+		this.on('mount', () => {
+			this.$refs.ctx.on('closed', () => {
+				this.$emit('closed');
+				this.$destroy();
+			});
+		});
+
+		this.open = pos => {
+			this.$refs.ctx.open(pos);
+		};
+
+		this.createFolder = () => {
+			this.browser.createFolder();
+			this.$refs.ctx.close();
+		};
+
+		this.upload = () => {
+			this.browser.selectLocalFile();
+			this.$refs.ctx.close();
+		};
+
+		this.urlUpload = () => {
+			this.browser.urlUpload();
+			this.$refs.ctx.close();
+		};
+	</script>
+</mk-drive-browser-base-contextmenu>
diff --git a/src/web/app/desktop/-tags/drive/browser-window.tag b/src/web/app/desktop/-tags/drive/browser-window.tag
new file mode 100644
index 0000000000..db7b898341
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/browser-window.tag
@@ -0,0 +1,60 @@
+<mk-drive-browser-window>
+	<mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' } popout={ popout }>
+		<yield to="header">
+			<p class="info" v-if="parent.usage"><b>{ parent.usage.toFixed(1) }%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
+			%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%
+		</yield>
+		<yield to="content">
+			<mk-drive-browser multiple={ true } folder={ parent.folder } ref="browser"/>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> .info
+						position absolute
+						top 0
+						left 16px
+						margin 0
+						font-size 80%
+
+					> [data-fa]
+						margin-right 4px
+
+				[data-yield='content']
+					> mk-drive-browser
+						height 100%
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.folder = this.opts.folder ? this.opts.folder : null;
+
+		this.popout = () => {
+			const folder = this.$refs.window.refs.browser.folder;
+			if (folder) {
+				return `${_URL_}/i/drive/folder/${folder.id}`;
+			} else {
+				return `${_URL_}/i/drive`;
+			}
+		};
+
+		this.on('mount', () => {
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+
+			this.api('drive').then(info => {
+				this.update({
+					usage: info.usage / info.capacity * 100
+				});
+			});
+		});
+
+		this.close = () => {
+			this.$refs.window.close();
+		};
+	</script>
+</mk-drive-browser-window>
diff --git a/src/web/app/desktop/-tags/drive/browser.tag b/src/web/app/desktop/-tags/drive/browser.tag
new file mode 100644
index 0000000000..7aaedab822
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/browser.tag
@@ -0,0 +1,736 @@
+<mk-drive-browser>
+	<nav>
+		<div class="path" oncontextmenu={ pathOncontextmenu }>
+			<mk-drive-browser-nav-folder :class="{ current: folder == null }" folder={ null }/>
+			<template each={ folder in hierarchyFolders }>
+				<span class="separator">%fa:angle-right%</span>
+				<mk-drive-browser-nav-folder folder={ folder }/>
+			</template>
+			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
+			<span class="folder current" v-if="folder != null">{ folder.name }</span>
+		</div>
+		<input class="search" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-drive-browser.search%"/>
+	</nav>
+	<div class="main { uploading: uploads.length > 0, fetching: fetching }" ref="main" onmousedown={ onmousedown } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu }>
+		<div class="selection" ref="selection"></div>
+		<div class="contents" ref="contents">
+			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
+				<template each={ folder in folders }>
+					<mk-drive-browser-folder class="folder" folder={ folder }/>
+				</template>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div class="padding" each={ Array(10).fill(16) }></div>
+				<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
+			</div>
+			<div class="files" ref="filesContainer" v-if="files.length > 0">
+				<template each={ file in files }>
+					<mk-drive-browser-file class="file" file={ file }/>
+				</template>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div class="padding" each={ Array(10).fill(16) }></div>
+				<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
+			</div>
+			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
+				<p v-if="draghover">%i18n:desktop.tags.mk-drive-browser.empty-draghover%</p>
+				<p v-if="!draghover && folder == null"><strong>%i18n:desktop.tags.mk-drive-browser.empty-drive%</strong><br/>%i18n:desktop.tags.mk-drive-browser.empty-drive-description%</p>
+				<p v-if="!draghover && folder != null">%i18n:desktop.tags.mk-drive-browser.empty-folder%</p>
+			</div>
+		</div>
+		<div class="fetching" v-if="fetching">
+			<div class="spinner">
+				<div class="dot1"></div>
+				<div class="dot2"></div>
+			</div>
+		</div>
+	</div>
+	<div class="dropzone" v-if="draghover"></div>
+	<mk-uploader ref="uploader"/>
+	<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" onchange={ changeFileInput }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> nav
+				display block
+				z-index 2
+				width 100%
+				overflow auto
+				font-size 0.9em
+				color #555
+				background #fff
+				//border-bottom 1px solid #dfdfdf
+				box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
+
+				&, *
+					user-select none
+
+				> .path
+					display inline-block
+					vertical-align bottom
+					margin 0
+					padding 0 8px
+					width calc(100% - 200px)
+					line-height 38px
+					white-space nowrap
+
+					> *
+						display inline-block
+						margin 0
+						padding 0 8px
+						line-height 38px
+						cursor pointer
+
+						i
+							margin-right 4px
+
+						*
+							pointer-events none
+
+						&:hover
+							text-decoration underline
+
+						&.current
+							font-weight bold
+							cursor default
+
+							&:hover
+								text-decoration none
+
+						&.separator
+							margin 0
+							padding 0
+							opacity 0.5
+							cursor default
+
+							> [data-fa]
+								margin 0
+
+				> .search
+					display inline-block
+					vertical-align bottom
+					user-select text
+					cursor auto
+					margin 0
+					padding 0 18px
+					width 200px
+					font-size 1em
+					line-height 38px
+					background transparent
+					outline none
+					//border solid 1px #ddd
+					border none
+					border-radius 0
+					box-shadow none
+					transition color 0.5s ease, border 0.5s ease
+					font-family FontAwesome, sans-serif
+
+					&[data-active='true']
+						background #fff
+
+					&::-webkit-input-placeholder,
+					&:-ms-input-placeholder,
+					&:-moz-placeholder
+						color $ui-control-foreground-color
+
+			> .main
+				padding 8px
+				height calc(100% - 38px)
+				overflow auto
+
+				&, *
+					user-select none
+
+				&.fetching
+					cursor wait !important
+
+					*
+						pointer-events none
+
+					> .contents
+						opacity 0.5
+
+				&.uploading
+					height calc(100% - 38px - 100px)
+
+				> .selection
+					display none
+					position absolute
+					z-index 128
+					top 0
+					left 0
+					border solid 1px $theme-color
+					background rgba($theme-color, 0.5)
+					pointer-events none
+
+				> .contents
+
+					> .folders
+					> .files
+						display flex
+						flex-wrap wrap
+
+						> .folder
+						> .file
+							flex-grow 1
+							width 144px
+							margin 4px
+
+						> .padding
+							flex-grow 1
+							pointer-events none
+							width 144px + 8px // 8px is margin
+
+					> .empty
+						padding 16px
+						text-align center
+						color #999
+						pointer-events none
+
+						> p
+							margin 0
+
+				> .fetching
+					.spinner
+						margin 100px auto
+						width 40px
+						height 40px
+						text-align center
+
+						animation sk-rotate 2.0s infinite linear
+
+					.dot1, .dot2
+						width 60%
+						height 60%
+						display inline-block
+						position absolute
+						top 0
+						background-color rgba(0, 0, 0, 0.3)
+						border-radius 100%
+
+						animation sk-bounce 2.0s infinite ease-in-out
+
+					.dot2
+						top auto
+						bottom 0
+						animation-delay -1.0s
+
+					@keyframes sk-rotate { 100% { transform: rotate(360deg); }}
+
+					@keyframes sk-bounce {
+						0%, 100% {
+							transform: scale(0.0);
+						} 50% {
+							transform: scale(1.0);
+						}
+					}
+
+			> .dropzone
+				position absolute
+				left 0
+				top 38px
+				width 100%
+				height calc(100% - 38px)
+				border dashed 2px rgba($theme-color, 0.5)
+				pointer-events none
+
+			> mk-uploader
+				height 100px
+				padding 16px
+				background #fff
+
+			> input
+				display none
+
+	</style>
+	<script lang="typescript">
+		import contains from '../../../common/scripts/contains';
+		import dialog from '../../scripts/dialog';
+		import inputDialog from '../../scripts/input-dialog';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('drive-stream');
+		this.connection = this.driveStream.getConnection();
+		this.connectionId = this.driveStream.use();
+
+		this.files = [];
+		this.folders = [];
+		this.hierarchyFolders = [];
+		this.selectedFiles = [];
+
+		this.uploads = [];
+
+		// 現在の階層(フォルダ)
+		// * null でルートを表す
+		this.folder = null;
+
+		this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
+
+		// ドロップされようとしているか
+		this.draghover = false;
+
+		// 自信の所有するアイテムがドラッグをスタートさせたか
+		// (自分自身の階層にドロップできないようにするためのフラグ)
+		this.isDragSource = false;
+
+		this.on('mount', () => {
+			this.$refs.uploader.on('uploaded', file => {
+				this.addFile(file, true);
+			});
+
+			this.$refs.uploader.on('change-uploads', uploads => {
+				this.update({
+					uploads: uploads
+				});
+			});
+
+			this.connection.on('file_created', this.onStreamDriveFileCreated);
+			this.connection.on('file_updated', this.onStreamDriveFileUpdated);
+			this.connection.on('folder_created', this.onStreamDriveFolderCreated);
+			this.connection.on('folder_updated', this.onStreamDriveFolderUpdated);
+
+			if (this.opts.folder) {
+				this.move(this.opts.folder);
+			} else {
+				this.fetch();
+			}
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('file_created', this.onStreamDriveFileCreated);
+			this.connection.off('file_updated', this.onStreamDriveFileUpdated);
+			this.connection.off('folder_created', this.onStreamDriveFolderCreated);
+			this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
+			this.driveStream.dispose(this.connectionId);
+		});
+
+		this.onStreamDriveFileCreated = file => {
+			this.addFile(file, true);
+		};
+
+		this.onStreamDriveFileUpdated = file => {
+			const current = this.folder ? this.folder.id : null;
+			if (current != file.folder_id) {
+				this.removeFile(file);
+			} else {
+				this.addFile(file, true);
+			}
+		};
+
+		this.onStreamDriveFolderCreated = folder => {
+			this.addFolder(folder, true);
+		};
+
+		this.onStreamDriveFolderUpdated = folder => {
+			const current = this.folder ? this.folder.id : null;
+			if (current != folder.parent_id) {
+				this.removeFolder(folder);
+			} else {
+				this.addFolder(folder, true);
+			}
+		};
+
+		this.onmousedown = e => {
+			if (contains(this.$refs.foldersContainer, e.target) || contains(this.$refs.filesContainer, e.target)) return true;
+
+			const rect = this.$refs.main.getBoundingClientRect();
+
+			const left = e.pageX + this.$refs.main.scrollLeft - rect.left - window.pageXOffset
+			const top = e.pageY + this.$refs.main.scrollTop - rect.top - window.pageYOffset
+
+			const move = e => {
+				this.$refs.selection.style.display = 'block';
+
+				const cursorX = e.pageX + this.$refs.main.scrollLeft - rect.left - window.pageXOffset;
+				const cursorY = e.pageY + this.$refs.main.scrollTop - rect.top - window.pageYOffset;
+				const w = cursorX - left;
+				const h = cursorY - top;
+
+				if (w > 0) {
+					this.$refs.selection.style.width = w + 'px';
+					this.$refs.selection.style.left = left + 'px';
+				} else {
+					this.$refs.selection.style.width = -w + 'px';
+					this.$refs.selection.style.left = cursorX + 'px';
+				}
+
+				if (h > 0) {
+					this.$refs.selection.style.height = h + 'px';
+					this.$refs.selection.style.top = top + 'px';
+				} else {
+					this.$refs.selection.style.height = -h + 'px';
+					this.$refs.selection.style.top = cursorY + 'px';
+				}
+			};
+
+			const up = e => {
+				document.documentElement.removeEventListener('mousemove', move);
+				document.documentElement.removeEventListener('mouseup', up);
+
+				this.$refs.selection.style.display = 'none';
+			};
+
+			document.documentElement.addEventListener('mousemove', move);
+			document.documentElement.addEventListener('mouseup', up);
+		};
+
+		this.pathOncontextmenu = e => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			return false;
+		};
+
+		this.ondragover = e => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			// ドラッグ元が自分自身の所有するアイテムかどうか
+			if (!this.isDragSource) {
+				// ドラッグされてきたものがファイルだったら
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+				this.draghover = true;
+			} else {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+				return false;
+			}
+		};
+
+		this.ondragenter = e => {
+			e.preventDefault();
+			if (!this.isDragSource) this.draghover = true;
+		};
+
+		this.ondragleave = e => {
+			this.draghover = false;
+		};
+
+		this.ondrop = e => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.draghover = false;
+
+			// ドロップされてきたものがファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.upload(file, this.folder);
+				});
+				return false;
+			}
+
+			// データ取得
+			const data = e.dataTransfer.getData('text');
+			if (data == null) return false;
+
+			// パース
+			// TODO: JSONじゃなかったら中断
+			const obj = JSON.parse(data);
+
+			// (ドライブの)ファイルだったら
+			if (obj.type == 'file') {
+				const file = obj.id;
+				if (this.files.some(f => f.id == file)) return false;
+				this.removeFile(file);
+				this.api('drive/files/update', {
+					file_id: file,
+					folder_id: this.folder ? this.folder.id : null
+				});
+			// (ドライブの)フォルダーだったら
+			} else if (obj.type == 'folder') {
+				const folder = obj.id;
+				// 移動先が自分自身ならreject
+				if (this.folder && folder == this.folder.id) return false;
+				if (this.folders.some(f => f.id == folder)) return false;
+				this.removeFolder(folder);
+				this.api('drive/folders/update', {
+					folder_id: folder,
+					parent_id: this.folder ? this.folder.id : null
+				}).then(() => {
+					// something
+				}).catch(err => {
+					switch (err) {
+						case 'detected-circular-definition':
+							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
+								'%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%', [{
+								text: '%i18n:common.ok%'
+							}]);
+							break;
+						default:
+							alert('%i18n:desktop.tags.mk-drive-browser.unhandled-error% ' + err);
+					}
+				});
+			}
+
+			return false;
+		};
+
+		this.oncontextmenu = e => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+
+			const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-base-contextmenu')), {
+				browser: this
+			})[0];
+			ctx.open({
+				x: e.pageX - window.pageXOffset,
+				y: e.pageY - window.pageYOffset
+			});
+
+			return false;
+		};
+
+		this.selectLocalFile = () => {
+			this.$refs.fileInput.click();
+		};
+
+		this.urlUpload = () => {
+			inputDialog('%i18n:desktop.tags.mk-drive-browser.url-upload%',
+				'%i18n:desktop.tags.mk-drive-browser.url-of-file%', null, url => {
+
+				this.api('drive/files/upload_from_url', {
+					url: url,
+					folder_id: this.folder ? this.folder.id : undefined
+				});
+
+				dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
+					'%i18n:desktop.tags.mk-drive-browser.may-take-time%', [{
+					text: '%i18n:common.ok%'
+				}]);
+			});
+		};
+
+		this.createFolder = () => {
+			inputDialog('%i18n:desktop.tags.mk-drive-browser.create-folder%',
+				'%i18n:desktop.tags.mk-drive-browser.folder-name%', null, name => {
+
+				this.api('drive/folders/create', {
+					name: name,
+					folder_id: this.folder ? this.folder.id : undefined
+				}).then(folder => {
+					this.addFolder(folder, true);
+					this.update();
+				});
+			});
+		};
+
+		this.changeFileInput = () => {
+			Array.from(this.$refs.fileInput.files).forEach(file => {
+				this.upload(file, this.folder);
+			});
+		};
+
+		this.upload = (file, folder) => {
+			if (folder && typeof folder == 'object') folder = folder.id;
+			this.$refs.uploader.upload(file, folder);
+		};
+
+		this.chooseFile = file => {
+			const isAlreadySelected = this.selectedFiles.some(f => f.id == file.id);
+			if (this.multiple) {
+				if (isAlreadySelected) {
+					this.selectedFiles = this.selectedFiles.filter(f => f.id != file.id);
+				} else {
+					this.selectedFiles.push(file);
+				}
+				this.update();
+				this.$emit('change-selection', this.selectedFiles);
+			} else {
+				if (isAlreadySelected) {
+					this.$emit('selected', file);
+				} else {
+					this.selectedFiles = [file];
+					this.$emit('change-selection', [file]);
+				}
+			}
+		};
+
+		this.newWindow = folderId => {
+			riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-window')), {
+				folder: folderId
+			});
+		};
+
+		this.move = target => {
+			if (target == null) {
+				this.goRoot();
+				return;
+			} else if (typeof target == 'object') {
+				target = target.id;
+			}
+
+			this.update({
+				fetching: true
+			});
+
+			this.api('drive/folders/show', {
+				folder_id: target
+			}).then(folder => {
+				this.folder = folder;
+				this.hierarchyFolders = [];
+
+				const dive = folder => {
+					this.hierarchyFolders.unshift(folder);
+					if (folder.parent) dive(folder.parent);
+				};
+
+				if (folder.parent) dive(folder.parent);
+
+				this.update();
+				this.$emit('open-folder', folder);
+				this.fetch();
+			});
+		};
+
+		this.addFolder = (folder, unshift = false) => {
+			const current = this.folder ? this.folder.id : null;
+			if (current != folder.parent_id) return;
+
+			if (this.folders.some(f => f.id == folder.id)) {
+				const exist = this.folders.map(f => f.id).indexOf(folder.id);
+				this.folders[exist] = folder;
+				this.update();
+				return;
+			}
+
+			if (unshift) {
+				this.folders.unshift(folder);
+			} else {
+				this.folders.push(folder);
+			}
+
+			this.update();
+		};
+
+		this.addFile = (file, unshift = false) => {
+			const current = this.folder ? this.folder.id : null;
+			if (current != file.folder_id) return;
+
+			if (this.files.some(f => f.id == file.id)) {
+				const exist = this.files.map(f => f.id).indexOf(file.id);
+				this.files[exist] = file;
+				this.update();
+				return;
+			}
+
+			if (unshift) {
+				this.files.unshift(file);
+			} else {
+				this.files.push(file);
+			}
+
+			this.update();
+		};
+
+		this.removeFolder = folder => {
+			if (typeof folder == 'object') folder = folder.id;
+			this.folders = this.folders.filter(f => f.id != folder);
+			this.update();
+		};
+
+		this.removeFile = file => {
+			if (typeof file == 'object') file = file.id;
+			this.files = this.files.filter(f => f.id != file);
+			this.update();
+		};
+
+		this.appendFile = file => this.addFile(file);
+		this.appendFolder = file => this.addFolder(file);
+		this.prependFile = file => this.addFile(file, true);
+		this.prependFolder = file => this.addFolder(file, true);
+
+		this.goRoot = () => {
+			// 既にrootにいるなら何もしない
+			if (this.folder == null) return;
+
+			this.update({
+				folder: null,
+				hierarchyFolders: []
+			});
+			this.$emit('move-root');
+			this.fetch();
+		};
+
+		this.fetch = () => {
+			this.update({
+				folders: [],
+				files: [],
+				moreFolders: false,
+				moreFiles: false,
+				fetching: true
+			});
+
+			let fetchedFolders = null;
+			let fetchedFiles = null;
+
+			const foldersMax = 30;
+			const filesMax = 30;
+
+			// フォルダ一覧取得
+			this.api('drive/folders', {
+				folder_id: this.folder ? this.folder.id : null,
+				limit: foldersMax + 1
+			}).then(folders => {
+				if (folders.length == foldersMax + 1) {
+					this.moreFolders = true;
+					folders.pop();
+				}
+				fetchedFolders = folders;
+				complete();
+			});
+
+			// ファイル一覧取得
+			this.api('drive/files', {
+				folder_id: this.folder ? this.folder.id : null,
+				limit: filesMax + 1
+			}).then(files => {
+				if (files.length == filesMax + 1) {
+					this.moreFiles = true;
+					files.pop();
+				}
+				fetchedFiles = files;
+				complete();
+			});
+
+			let flag = false;
+			const complete = () => {
+				if (flag) {
+					fetchedFolders.forEach(this.appendFolder);
+					fetchedFiles.forEach(this.appendFile);
+					this.update({
+						fetching: false
+					});
+				} else {
+					flag = true;
+				}
+			};
+		};
+
+		this.fetchMoreFiles = () => {
+			this.update({
+				fetching: true
+			});
+
+			const max = 30;
+
+			// ファイル一覧取得
+			this.api('drive/files', {
+				folder_id: this.folder ? this.folder.id : null,
+				limit: max + 1
+			}).then(files => {
+				if (files.length == max + 1) {
+					this.moreFiles = true;
+					files.pop();
+				} else {
+					this.moreFiles = false;
+				}
+				files.forEach(this.appendFile);
+				this.update({
+					fetching: false
+				});
+			});
+		};
+
+	</script>
+</mk-drive-browser>
diff --git a/src/web/app/desktop/-tags/drive/file-contextmenu.tag b/src/web/app/desktop/-tags/drive/file-contextmenu.tag
new file mode 100644
index 0000000000..125f70b614
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/file-contextmenu.tag
@@ -0,0 +1,99 @@
+<mk-drive-browser-file-contextmenu>
+	<mk-contextmenu ref="ctx">
+		<ul>
+			<li @click="parent.rename">
+				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p>
+			</li>
+			<li @click="parent.copyUrl">
+				<p>%fa:link%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p>
+			</li>
+			<li><a href={ parent.file.url + '?download' } download={ parent.file.name } @click="parent.download">%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
+			<li class="separator"></li>
+			<li @click="parent.delete">
+				<p>%fa:R trash-alt%%i18n:common.delete%</p>
+			</li>
+			<li class="separator"></li>
+			<li class="has-child">
+				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%%fa:caret-right%</p>
+				<ul>
+					<li @click="parent.setAvatar">
+						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%</p>
+					</li>
+					<li @click="parent.setBanner">
+						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%</p>
+					</li>
+				</ul>
+			</li>
+			<li class="has-child">
+				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...%fa:caret-right%</p>
+				<ul>
+					<li @click="parent.addApp">
+						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...</p>
+					</li>
+				</ul>
+			</li>
+		</ul>
+	</mk-contextmenu>
+	<script lang="typescript">
+		import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
+		import dialog from '../../scripts/dialog';
+		import inputDialog from '../../scripts/input-dialog';
+		import updateAvatar from '../../scripts/update-avatar';
+		import NotImplementedException from '../../scripts/not-implemented-exception';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.browser = this.opts.browser;
+		this.file = this.opts.file;
+
+		this.on('mount', () => {
+			this.$refs.ctx.on('closed', () => {
+				this.$emit('closed');
+				this.$destroy();
+			});
+		});
+
+		this.open = pos => {
+			this.$refs.ctx.open(pos);
+		};
+
+		this.rename = () => {
+			this.$refs.ctx.close();
+
+			inputDialog('%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename-file%', '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.input-new-file-name%', this.file.name, name => {
+				this.api('drive/files/update', {
+					file_id: this.file.id,
+					name: name
+				})
+			});
+		};
+
+		this.copyUrl = () => {
+			copyToClipboard(this.file.url);
+			this.$refs.ctx.close();
+			dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
+				'%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%', [{
+				text: '%i18n:common.ok%'
+			}]);
+		};
+
+		this.download = () => {
+			this.$refs.ctx.close();
+		};
+
+		this.setAvatar = () => {
+			this.$refs.ctx.close();
+			updateAvatar(this.I, null, this.file);
+		};
+
+		this.setBanner = () => {
+			this.$refs.ctx.close();
+			updateBanner(this.I, null, this.file);
+		};
+
+		this.addApp = () => {
+			NotImplementedException();
+		};
+	</script>
+</mk-drive-browser-file-contextmenu>
diff --git a/src/web/app/desktop/-tags/drive/file.tag b/src/web/app/desktop/-tags/drive/file.tag
new file mode 100644
index 0000000000..a669f5fff4
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/file.tag
@@ -0,0 +1,217 @@
+<mk-drive-browser-file data-is-selected={ isSelected } data-is-contextmenu-showing={ isContextmenuShowing.toString() } @click="onclick" oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
+	<div class="label" v-if="I.avatar_id == file.id"><img src="/assets/label.svg"/>
+		<p>%i18n:desktop.tags.mk-drive-browser-file.avatar%</p>
+	</div>
+	<div class="label" v-if="I.banner_id == file.id"><img src="/assets/label.svg"/>
+		<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
+	</div>
+	<div class="thumbnail" ref="thumbnail" style="background-color:{ file.properties.average_color ? 'rgb(' + file.properties.average_color.join(',') + ')' : 'transparent' }">
+		<img src={ file.url + '?thumbnail&size=128' } alt="" onload={ onload }/>
+	</div>
+	<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" v-if="file.name.lastIndexOf('.') != -1">{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 8px 0 0 0
+			height 180px
+			border-radius 4px
+
+			&, *
+				cursor pointer
+
+			&:hover
+				background rgba(0, 0, 0, 0.05)
+
+				> .label
+					&:before
+					&:after
+						background #0b65a5
+
+			&:active
+				background rgba(0, 0, 0, 0.1)
+
+				> .label
+					&:before
+					&:after
+						background #0b588c
+
+			&[data-is-selected]
+				background $theme-color
+
+				&:hover
+					background lighten($theme-color, 10%)
+
+				&:active
+					background darken($theme-color, 10%)
+
+				> .label
+					&:before
+					&:after
+						display none
+
+				> .name
+					color $theme-color-foreground
+
+			&[data-is-contextmenu-showing='true']
+				&:after
+					content ""
+					pointer-events none
+					position absolute
+					top -4px
+					right -4px
+					bottom -4px
+					left -4px
+					border 2px dashed rgba($theme-color, 0.3)
+					border-radius 4px
+
+			> .label
+				position absolute
+				top 0
+				left 0
+				pointer-events none
+
+				&:before
+					content ""
+					display block
+					position absolute
+					z-index 1
+					top 0
+					left 57px
+					width 28px
+					height 8px
+					background #0c7ac9
+
+				&:after
+					content ""
+					display block
+					position absolute
+					z-index 1
+					top 57px
+					left 0
+					width 8px
+					height 28px
+					background #0c7ac9
+
+				> img
+					position absolute
+					z-index 2
+					top 0
+					left 0
+
+				> p
+					position absolute
+					z-index 3
+					top 19px
+					left -28px
+					width 120px
+					margin 0
+					text-align center
+					line-height 28px
+					color #fff
+					transform rotate(-45deg)
+
+			> .thumbnail
+				width 128px
+				height 128px
+				margin auto
+
+				> img
+					display block
+					position absolute
+					top 0
+					left 0
+					right 0
+					bottom 0
+					margin auto
+					max-width 128px
+					max-height 128px
+					pointer-events none
+
+			> .name
+				display block
+				margin 4px 0 0 0
+				font-size 0.8em
+				text-align center
+				word-break break-all
+				color #444
+				overflow hidden
+
+				> .ext
+					opacity 0.5
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+		import bytesToSize from '../../../common/scripts/bytes-to-size';
+
+		this.mixin('i');
+
+		this.file = this.opts.file;
+		this.browser = this.parent;
+		this.title = `${this.file.name}\n${this.file.type} ${bytesToSize(this.file.datasize)}`;
+		this.isContextmenuShowing = false;
+		this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id);
+
+		this.browser.on('change-selection', selections => {
+			this.isSelected = selections.some(f => f.id == this.file.id);
+			this.update();
+		});
+
+		this.onclick = () => {
+			this.browser.chooseFile(this.file);
+		};
+
+		this.oncontextmenu = e => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+
+			this.update({
+				isContextmenuShowing: true
+			});
+			const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-file-contextmenu')), {
+				browser: this.browser,
+				file: this.file
+			})[0];
+			ctx.open({
+				x: e.pageX - window.pageXOffset,
+				y: e.pageY - window.pageYOffset
+			});
+			ctx.on('closed', () => {
+				this.update({
+					isContextmenuShowing: false
+				});
+			});
+			return false;
+		};
+
+		this.ondragstart = e => {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text', JSON.stringify({
+				type: 'file',
+				id: this.file.id,
+				file: this.file
+			}));
+			this.isDragging = true;
+
+			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
+			// (=あなたの子供が、ドラッグを開始しましたよ)
+			this.browser.isDragSource = true;
+		};
+
+		this.ondragend = e => {
+			this.isDragging = false;
+			this.browser.isDragSource = false;
+		};
+
+		this.onload = () => {
+			if (this.file.properties.average_color) {
+				anime({
+					targets: this.$refs.thumbnail,
+					backgroundColor: `rgba(${this.file.properties.average_color.join(',')}, 0)`,
+					duration: 100,
+					easing: 'linear'
+				});
+			}
+		};
+	</script>
+</mk-drive-browser-file>
diff --git a/src/web/app/desktop/-tags/drive/folder-contextmenu.tag b/src/web/app/desktop/-tags/drive/folder-contextmenu.tag
new file mode 100644
index 0000000000..0cb7f6eb80
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/folder-contextmenu.tag
@@ -0,0 +1,63 @@
+<mk-drive-browser-folder-contextmenu>
+	<mk-contextmenu ref="ctx">
+		<ul>
+			<li @click="parent.move">
+				<p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
+			</li>
+			<li @click="parent.newWindow">
+				<p>%fa:R window-restore%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
+			</li>
+			<li class="separator"></li>
+			<li @click="parent.rename">
+				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p>
+			</li>
+			<li class="separator"></li>
+			<li @click="parent.delete">
+				<p>%fa:R trash-alt%%i18n:common.delete%</p>
+			</li>
+		</ul>
+	</mk-contextmenu>
+	<script lang="typescript">
+		import inputDialog from '../../scripts/input-dialog';
+
+		this.mixin('api');
+
+		this.browser = this.opts.browser;
+		this.folder = this.opts.folder;
+
+		this.open = pos => {
+			this.$refs.ctx.open(pos);
+
+			this.$refs.ctx.on('closed', () => {
+				this.$emit('closed');
+				this.$destroy();
+			});
+		};
+
+		this.move = () => {
+			this.browser.move(this.folder.id);
+			this.$refs.ctx.close();
+		};
+
+		this.newWindow = () => {
+			this.browser.newWindow(this.folder.id);
+			this.$refs.ctx.close();
+		};
+
+		this.createFolder = () => {
+			this.browser.createFolder();
+			this.$refs.ctx.close();
+		};
+
+		this.rename = () => {
+			this.$refs.ctx.close();
+
+			inputDialog('%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename-folder%', '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.input-new-folder-name%', this.folder.name, name => {
+				this.api('drive/folders/update', {
+					folder_id: this.folder.id,
+					name: name
+				});
+			});
+		};
+	</script>
+</mk-drive-browser-folder-contextmenu>
diff --git a/src/web/app/desktop/-tags/drive/folder.tag b/src/web/app/desktop/-tags/drive/folder.tag
new file mode 100644
index 0000000000..ed16bfb0d7
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/folder.tag
@@ -0,0 +1,202 @@
+<mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } @click="onclick" onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
+	<p class="name"><template v-if="hover">%fa:R folder-open .fw%</template><template v-if="!hover">%fa:R folder .fw%</template>{ folder.name }</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 8px
+			height 64px
+			background lighten($theme-color, 95%)
+			border-radius 4px
+
+			&, *
+				cursor pointer
+
+			*
+				pointer-events none
+
+			&:hover
+				background lighten($theme-color, 90%)
+
+			&:active
+				background lighten($theme-color, 85%)
+
+			&[data-is-contextmenu-showing='true']
+			&[data-draghover='true']
+				&:after
+					content ""
+					pointer-events none
+					position absolute
+					top -4px
+					right -4px
+					bottom -4px
+					left -4px
+					border 2px dashed rgba($theme-color, 0.3)
+					border-radius 4px
+
+			&[data-draghover='true']
+				background lighten($theme-color, 90%)
+
+			> .name
+				margin 0
+				font-size 0.9em
+				color darken($theme-color, 30%)
+
+				> [data-fa]
+					margin-right 4px
+				  margin-left 2px
+					text-align left
+
+	</style>
+	<script lang="typescript">
+		import dialog from '../../scripts/dialog';
+
+		this.mixin('api');
+
+		this.folder = this.opts.folder;
+		this.browser = this.parent;
+
+		this.title = this.folder.name;
+		this.hover = false;
+		this.draghover = false;
+		this.isContextmenuShowing = false;
+
+		this.onclick = () => {
+			this.browser.move(this.folder);
+		};
+
+		this.onmouseover = () => {
+			this.hover = true;
+		};
+
+		this.onmouseout = () => {
+			this.hover = false
+		};
+
+		this.ondragover = e => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			// 自分自身がドラッグされていない場合
+			if (!this.isDragging) {
+				// ドラッグされてきたものがファイルだったら
+				if (e.dataTransfer.effectAllowed === 'all') {
+					e.dataTransfer.dropEffect = 'copy';
+				} else {
+					e.dataTransfer.dropEffect = 'move';
+				}
+			} else {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+			}
+			return false;
+		};
+
+		this.ondragenter = e => {
+			e.preventDefault();
+			if (!this.isDragging) this.draghover = true;
+		};
+
+		this.ondragleave = () => {
+			this.draghover = false;
+		};
+
+		this.ondrop = e => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.browser.upload(file, this.folder);
+				});
+				return false;
+			};
+
+			// データ取得
+			const data = e.dataTransfer.getData('text');
+			if (data == null) return false;
+
+			// パース
+			// TODO: Validate JSON
+			const obj = JSON.parse(data);
+
+			// (ドライブの)ファイルだったら
+			if (obj.type == 'file') {
+				const file = obj.id;
+				this.browser.removeFile(file);
+				this.api('drive/files/update', {
+					file_id: file,
+					folder_id: this.folder.id
+				});
+			// (ドライブの)フォルダーだったら
+			} else if (obj.type == 'folder') {
+				const folder = obj.id;
+				// 移動先が自分自身ならreject
+				if (folder == this.folder.id) return false;
+				this.browser.removeFolder(folder);
+				this.api('drive/folders/update', {
+					folder_id: folder,
+					parent_id: this.folder.id
+				}).then(() => {
+					// something
+				}).catch(err => {
+					switch (err) {
+						case 'detected-circular-definition':
+							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
+								'%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%', [{
+								text: '%i18n:common.ok%'
+							}]);
+							break;
+						default:
+							alert('%i18n:desktop.tags.mk-drive-browser-folder.unhandled-error% ' + err);
+					}
+				});
+			}
+
+			return false;
+		};
+
+		this.ondragstart = e => {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text', JSON.stringify({
+				type: 'folder',
+				id: this.folder.id
+			}));
+			this.isDragging = true;
+
+			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
+			// (=あなたの子供が、ドラッグを開始しましたよ)
+			this.browser.isDragSource = true;
+		};
+
+		this.ondragend = e => {
+			this.isDragging = false;
+			this.browser.isDragSource = false;
+		};
+
+		this.oncontextmenu = e => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+
+			this.update({
+				isContextmenuShowing: true
+			});
+			const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-folder-contextmenu')), {
+				browser: this.browser,
+				folder: this.folder
+			})[0];
+			ctx.open({
+				x: e.pageX - window.pageXOffset,
+				y: e.pageY - window.pageYOffset
+			});
+			ctx.on('closed', () => {
+				this.update({
+					isContextmenuShowing: false
+				});
+			});
+
+			return false;
+		};
+	</script>
+</mk-drive-browser-folder>
diff --git a/src/web/app/desktop/-tags/drive/nav-folder.tag b/src/web/app/desktop/-tags/drive/nav-folder.tag
new file mode 100644
index 0000000000..4bca80f683
--- /dev/null
+++ b/src/web/app/desktop/-tags/drive/nav-folder.tag
@@ -0,0 +1,96 @@
+<mk-drive-browser-nav-folder data-draghover={ draghover } @click="onclick" ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
+	<template v-if="folder == null">%fa:cloud%</template><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
+	<style lang="stylus" scoped>
+		:scope
+			&[data-draghover]
+				background #eee
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.folder = this.opts.folder ? this.opts.folder : null;
+		this.browser = this.parent;
+
+		this.hover = false;
+
+		this.onclick = () => {
+			this.browser.move(this.folder);
+		};
+
+		this.onmouseover = () => {
+			this.hover = true
+		};
+
+		this.onmouseout = () => {
+			this.hover = false
+		};
+
+		this.ondragover = e => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			// このフォルダがルートかつカレントディレクトリならドロップ禁止
+			if (this.folder == null && this.browser.folder == null) {
+				e.dataTransfer.dropEffect = 'none';
+			// ドラッグされてきたものがファイルだったら
+			} else if (e.dataTransfer.effectAllowed == 'all') {
+				e.dataTransfer.dropEffect = 'copy';
+			} else {
+				e.dataTransfer.dropEffect = 'move';
+			}
+			return false;
+		};
+
+		this.ondragenter = () => {
+			if (this.folder || this.browser.folder) this.draghover = true;
+		};
+
+		this.ondragleave = () => {
+			if (this.folder || this.browser.folder) this.draghover = false;
+		};
+
+		this.ondrop = e => {
+			e.stopPropagation();
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.browser.upload(file, this.folder);
+				});
+				return false;
+			};
+
+			// データ取得
+			const data = e.dataTransfer.getData('text');
+			if (data == null) return false;
+
+			// パース
+			// TODO: Validate JSON
+			const obj = JSON.parse(data);
+
+			// (ドライブの)ファイルだったら
+			if (obj.type == 'file') {
+				const file = obj.id;
+				this.browser.removeFile(file);
+				this.api('drive/files/update', {
+					file_id: file,
+					folder_id: this.folder ? this.folder.id : null
+				});
+			// (ドライブの)フォルダーだったら
+			} else if (obj.type == 'folder') {
+				const folder = obj.id;
+				// 移動先が自分自身ならreject
+				if (this.folder && folder == this.folder.id) return false;
+				this.browser.removeFolder(folder);
+				this.api('drive/folders/update', {
+					folder_id: folder,
+					parent_id: this.folder ? this.folder.id : null
+				});
+			}
+
+			return false;
+		};
+	</script>
+</mk-drive-browser-nav-folder>
diff --git a/src/web/app/desktop/-tags/ellipsis-icon.tag b/src/web/app/desktop/-tags/ellipsis-icon.tag
new file mode 100644
index 0000000000..619f0d84f7
--- /dev/null
+++ b/src/web/app/desktop/-tags/ellipsis-icon.tag
@@ -0,0 +1,37 @@
+<mk-ellipsis-icon>
+	<div></div>
+	<div></div>
+	<div></div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 70px
+			margin 0 auto
+			text-align center
+
+			> div
+				display inline-block
+				width 18px
+				height 18px
+				background-color rgba(0, 0, 0, 0.3)
+				border-radius 100%
+				animation bounce 1.4s infinite ease-in-out both
+
+				&:nth-child(1)
+					animation-delay 0s
+
+				&:nth-child(2)
+					margin 0 6px
+					animation-delay 0.16s
+
+				&:nth-child(3)
+					animation-delay 0.32s
+
+			@keyframes bounce
+				0%, 80%, 100%
+					transform scale(0)
+				40%
+					transform scale(1)
+
+	</style>
+</mk-ellipsis-icon>
diff --git a/src/web/app/desktop/-tags/follow-button.tag b/src/web/app/desktop/-tags/follow-button.tag
new file mode 100644
index 0000000000..fa7d43e039
--- /dev/null
+++ b/src/web/app/desktop/-tags/follow-button.tag
@@ -0,0 +1,150 @@
+<mk-follow-button>
+	<button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
+		<template v-if="!wait && user.is_following">%fa:minus%</template>
+		<template v-if="!wait && !user.is_following">%fa:plus%</template>
+		<template v-if="wait">%fa:spinner .pulse .fw%</template>
+	</button>
+	<div class="init" v-if="init">%fa:spinner .pulse .fw%</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> button
+			> .init
+				display block
+				cursor pointer
+				padding 0
+				margin 0
+				width 32px
+				height 32px
+				font-size 1em
+				outline none
+				border-radius 4px
+
+				*
+					pointer-events none
+
+				&:focus
+					&:after
+						content ""
+						pointer-events none
+						position absolute
+						top -5px
+						right -5px
+						bottom -5px
+						left -5px
+						border 2px solid rgba($theme-color, 0.3)
+						border-radius 8px
+
+				&.follow
+					color #888
+					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+					border solid 1px #e2e2e2
+
+					&:hover
+						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+						border-color #dcdcdc
+
+					&:active
+						background #ececec
+						border-color #dcdcdc
+
+				&.unfollow
+					color $theme-color-foreground
+					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+					border solid 1px lighten($theme-color, 15%)
+
+					&:not(:disabled)
+						font-weight bold
+
+					&:hover:not(:disabled)
+						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+						border-color $theme-color
+
+					&:active:not(:disabled)
+						background $theme-color
+						border-color $theme-color
+
+				&.wait
+					cursor wait !important
+					opacity 0.7
+
+	</style>
+	<script lang="typescript">
+		import isPromise from '../../common/scripts/is-promise';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.user = null;
+		this.userPromise = isPromise(this.opts.user)
+			? this.opts.user
+			: Promise.resolve(this.opts.user);
+		this.init = true;
+		this.wait = false;
+
+		this.on('mount', () => {
+			this.userPromise.then(user => {
+				this.update({
+					init: false,
+					user: user
+				});
+				this.connection.on('follow', this.onStreamFollow);
+				this.connection.on('unfollow', this.onStreamUnfollow);
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('follow', this.onStreamFollow);
+			this.connection.off('unfollow', this.onStreamUnfollow);
+			this.stream.dispose(this.connectionId);
+		});
+
+		this.onStreamFollow = user => {
+			if (user.id == this.user.id) {
+				this.update({
+					user: user
+				});
+			}
+		};
+
+		this.onStreamUnfollow = user => {
+			if (user.id == this.user.id) {
+				this.update({
+					user: user
+				});
+			}
+		};
+
+		this.onclick = () => {
+			this.wait = true;
+			if (this.user.is_following) {
+				this.api('following/delete', {
+					user_id: this.user.id
+				}).then(() => {
+					this.user.is_following = false;
+				}).catch(err => {
+					console.error(err);
+				}).then(() => {
+					this.wait = false;
+					this.update();
+				});
+			} else {
+				this.api('following/create', {
+					user_id: this.user.id
+				}).then(() => {
+					this.user.is_following = true;
+				}).catch(err => {
+					console.error(err);
+				}).then(() => {
+					this.wait = false;
+					this.update();
+				});
+			}
+		};
+	</script>
+</mk-follow-button>
diff --git a/src/web/app/desktop/-tags/following-setuper.tag b/src/web/app/desktop/-tags/following-setuper.tag
new file mode 100644
index 0000000000..75ce76ae53
--- /dev/null
+++ b/src/web/app/desktop/-tags/following-setuper.tag
@@ -0,0 +1,169 @@
+<mk-following-setuper>
+	<p class="title">気になるユーザーをフォロー:</p>
+	<div class="users" v-if="!fetching && users.length > 0">
+		<div class="user" each={ users }><a class="avatar-anchor" href={ '/' + username }><img class="avatar" src={ avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ id }/></a>
+			<div class="body"><a class="name" href={ '/' + username } target="_blank" data-user-preview={ id }>{ name }</a>
+				<p class="username">@{ username }</p>
+			</div>
+			<mk-follow-button user={ this }/>
+		</div>
+	</div>
+	<p class="empty" v-if="!fetching && users.length == 0">おすすめのユーザーは見つかりませんでした。</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
+	<a class="refresh" @click="refresh">もっと見る</a>
+	<button class="close" @click="close" title="閉じる">%fa:times%</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 24px
+
+			> .title
+				margin 0 0 12px 0
+				font-size 1em
+				font-weight bold
+				color #888
+
+			> .users
+				&:after
+					content ""
+					display block
+					clear both
+
+				> .user
+					padding 16px
+					width 238px
+					float left
+
+					&:after
+						content ""
+						display block
+						clear both
+
+					> .avatar-anchor
+						display block
+						float left
+						margin 0 12px 0 0
+
+						> .avatar
+							display block
+							width 42px
+							height 42px
+							margin 0
+							border-radius 8px
+							vertical-align bottom
+
+					> .body
+						float left
+						width calc(100% - 54px)
+
+						> .name
+							margin 0
+							font-size 16px
+							line-height 24px
+							color #555
+
+						> .username
+							margin 0
+							font-size 15px
+							line-height 16px
+							color #ccc
+
+					> mk-follow-button
+						position absolute
+						top 16px
+						right 16px
+
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .fetching
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+			> .refresh
+				display block
+				margin 0 8px 0 0
+				text-align right
+				font-size 0.9em
+				color #999
+
+			> .close
+				cursor pointer
+				display block
+				position absolute
+				top 6px
+				right 6px
+				z-index 1
+				margin 0
+				padding 0
+				font-size 1.2em
+				color #999
+				border none
+				outline none
+				background transparent
+
+				&:hover
+					color #555
+
+				&:active
+					color #222
+
+				> [data-fa]
+					padding 14px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+		this.mixin('user-preview');
+
+		this.users = null;
+		this.fetching = true;
+
+		this.limit = 6;
+		this.page = 0;
+
+		this.on('mount', () => {
+			this.fetch();
+		});
+
+		this.fetch = () => {
+			this.update({
+				fetching: true,
+				users: null
+			});
+
+			this.api('users/recommendation', {
+				limit: this.limit,
+				offset: this.limit * this.page
+			}).then(users => {
+				this.fetching = false
+				this.users = users
+				this.update({
+					fetching: false,
+					users: users
+				});
+			});
+		};
+
+		this.refresh = () => {
+			if (this.users.length < this.limit) {
+				this.page = 0;
+			} else {
+				this.page++;
+			}
+			this.fetch();
+		};
+
+		this.close = () => {
+			this.$destroy();
+		};
+	</script>
+</mk-following-setuper>
diff --git a/src/web/app/desktop/-tags/home-widgets/access-log.tag b/src/web/app/desktop/-tags/home-widgets/access-log.tag
new file mode 100644
index 0000000000..fea18299e8
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/access-log.tag
@@ -0,0 +1,95 @@
+<mk-access-log-home-widget>
+	<template v-if="data.design == 0">
+		<p class="title">%fa:server%%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
+	</template>
+	<div ref="log">
+		<p each={ requests }>
+			<span class="ip" style="color:{ fg }; background:{ bg }">{ ip }</span>
+			<span>{ method }</span>
+			<span>{ path }</span>
+		</p>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow hidden
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> div
+				max-height 250px
+				overflow auto
+
+				> p
+					margin 0
+					padding 8px
+					font-size 0.8em
+					color #555
+
+					&:nth-child(odd)
+						background rgba(0, 0, 0, 0.025)
+
+					> .ip
+						margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		import seedrandom from 'seedrandom';
+
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.mixin('requests-stream');
+		this.connection = this.requestsStream.getConnection();
+		this.connectionId = this.requestsStream.use();
+
+		this.requests = [];
+
+		this.on('mount', () => {
+			this.connection.on('request', this.onRequest);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('request', this.onRequest);
+			this.requestsStream.dispose(this.connectionId);
+		});
+
+		this.onRequest = request => {
+			const random = seedrandom(request.ip);
+			const r = Math.floor(random() * 255);
+			const g = Math.floor(random() * 255);
+			const b = Math.floor(random() * 255);
+			const luma = (0.2126 * r) + (0.7152 * g) + (0.0722 * b); // SMPTE C, Rec. 709 weightings
+			request.bg = `rgb(${r}, ${g}, ${b})`;
+			request.fg = luma >= 165 ? '#000' : '#fff';
+
+			this.requests.push(request);
+			if (this.requests.length > 30) this.requests.shift();
+			this.update();
+
+			this.$refs.log.scrollTop = this.$refs.log.scrollHeight;
+		};
+
+		this.func = () => {
+			if (++this.data.design == 2) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-access-log-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/activity.tag b/src/web/app/desktop/-tags/home-widgets/activity.tag
new file mode 100644
index 0000000000..878de6d13a
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/activity.tag
@@ -0,0 +1,32 @@
+<mk-activity-home-widget>
+	<mk-activity-widget design={ data.design } view={ data.view } user={ I } ref="activity"/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+	<script lang="typescript">
+		this.data = {
+			view: 0,
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.$refs.activity.on('view-changed', view => {
+				this.data.view = view;
+				this.save();
+			});
+		});
+
+		this.func = () => {
+			if (++this.data.design == 3) this.data.design = 0;
+			this.$refs.activity.update({
+				design: this.data.design
+			});
+			this.save();
+		};
+	</script>
+</mk-activity-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/broadcast.tag b/src/web/app/desktop/-tags/home-widgets/broadcast.tag
new file mode 100644
index 0000000000..91ddbb4ab4
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/broadcast.tag
@@ -0,0 +1,143 @@
+<mk-broadcast-home-widget data-found={ broadcasts.length != 0 } data-melt={ data.design == 1 }>
+	<div class="icon">
+		<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
+			<path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
+			<path class="wave a" d="M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z"></path>
+			<path class="wave b" d="M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z"></path>
+			<path class="wave c" d="M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z"></path>
+			<path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
+		</svg>
+	</div>
+	<p class="fetching" v-if="fetching">%i18n:desktop.tags.mk-broadcast-home-widget.fetching%<mk-ellipsis/></p>
+	<h1 v-if="!fetching">{
+		broadcasts.length == 0 ? '%i18n:desktop.tags.mk-broadcast-home-widget.no-broadcasts%' : broadcasts[i].title
+	}</h1>
+	<p v-if="!fetching"><mk-raw v-if="broadcasts.length != 0" content={ broadcasts[i].text }/><template v-if="broadcasts.length == 0">%i18n:desktop.tags.mk-broadcast-home-widget.have-a-nice-day%</template></p>
+	<a v-if="broadcasts.length > 1" @click="next">%i18n:desktop.tags.mk-broadcast-home-widget.next% &gt;&gt;</a>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 10px
+			border solid 1px #4078c0
+			border-radius 6px
+
+			&[data-melt]
+				border none
+
+			&[data-found]
+				padding-left 50px
+
+				> .icon
+					display block
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .icon
+				display none
+				float left
+				margin-left -40px
+
+				> svg
+					fill currentColor
+					color #4078c0
+
+					> .wave
+						opacity 1
+
+						&.a
+							animation wave 20s ease-in-out 2.1s infinite
+						&.b
+							animation wave 20s ease-in-out 2s infinite
+						&.c
+							animation wave 20s ease-in-out 2s infinite
+						&.d
+							animation wave 20s ease-in-out 2.1s infinite
+
+						@keyframes wave
+							0%
+								opacity 1
+							1.5%
+								opacity 0
+							3.5%
+								opacity 0
+							5%
+								opacity 1
+							6.5%
+								opacity 0
+							8.5%
+								opacity 0
+							10%
+								opacity 1
+
+			> h1
+				margin 0
+				font-size 0.95em
+				font-weight normal
+				color #4078c0
+
+			> p
+				display block
+				z-index 1
+				margin 0
+				font-size 0.7em
+				color #555
+
+				&.fetching
+					text-align center
+
+				a
+					color #555
+					text-decoration underline
+
+			> a
+				display block
+				font-size 0.7em
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+		this.mixin('os');
+
+		this.i = 0;
+		this.fetching = true;
+		this.broadcasts = [];
+
+		this.on('mount', () => {
+			this.mios.getMeta().then(meta => {
+				let broadcasts = [];
+				if (meta.broadcasts) {
+					meta.broadcasts.forEach(broadcast => {
+						if (broadcast[_LANG_]) {
+							broadcasts.push(broadcast[_LANG_]);
+						}
+					});
+				}
+				this.update({
+					fetching: false,
+					broadcasts: broadcasts
+				});
+			});
+		});
+
+		this.next = () => {
+			if (this.i == this.broadcasts.length - 1) {
+				this.i = 0;
+			} else {
+				this.i++;
+			}
+			this.update();
+		};
+
+		this.func = () => {
+			if (++this.data.design == 2) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-broadcast-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/calendar.tag b/src/web/app/desktop/-tags/home-widgets/calendar.tag
new file mode 100644
index 0000000000..46d47662b9
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/calendar.tag
@@ -0,0 +1,167 @@
+<mk-calendar-home-widget data-melt={ data.design == 1 } data-special={ special }>
+	<div class="calendar" data-is-holiday={ isHoliday }>
+		<p class="month-and-year"><span class="year">{ year }年</span><span class="month">{ month }月</span></p>
+		<p class="day">{ day }日</p>
+		<p class="week-day">{ weekDay }曜日</p>
+	</div>
+	<div class="info">
+		<div>
+			<p>今日:<b>{ dayP.toFixed(1) }%</b></p>
+			<div class="meter">
+				<div class="val" style={ 'width:' + dayP + '%' }></div>
+			</div>
+		</div>
+		<div>
+			<p>今月:<b>{ monthP.toFixed(1) }%</b></p>
+			<div class="meter">
+				<div class="val" style={ 'width:' + monthP + '%' }></div>
+			</div>
+		</div>
+		<div>
+			<p>今年:<b>{ yearP.toFixed(1) }%</b></p>
+			<div class="meter">
+				<div class="val" style={ 'width:' + yearP + '%' }></div>
+			</div>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 16px 0
+			color #777
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			&[data-special='on-new-years-day']
+				border-color #ef95a0
+
+			&[data-melt]
+				background transparent
+				border none
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .calendar
+				float left
+				width 60%
+				text-align center
+
+				&[data-is-holiday]
+					> .day
+						color #ef95a0
+
+				> p
+					margin 0
+					line-height 18px
+					font-size 14px
+
+					> span
+						margin 0 4px
+
+				> .day
+					margin 10px 0
+					line-height 32px
+					font-size 28px
+
+			> .info
+				display block
+				float left
+				width 40%
+				padding 0 16px 0 0
+
+				> div
+					margin-bottom 8px
+
+					&:last-child
+						margin-bottom 4px
+
+					> p
+						margin 0 0 2px 0
+						font-size 12px
+						line-height 18px
+						color #888
+
+						> b
+							margin-left 2px
+
+					> .meter
+						width 100%
+						overflow hidden
+						background #eee
+						border-radius 8px
+
+						> .val
+							height 4px
+							background $theme-color
+
+					&:nth-child(1)
+						> .meter > .val
+							background #f7796c
+
+					&:nth-child(2)
+						> .meter > .val
+							background #a1de41
+
+					&:nth-child(3)
+						> .meter > .val
+							background #41ddde
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.draw = () => {
+			const now = new Date();
+			const nd = now.getDate();
+			const nm = now.getMonth();
+			const ny = now.getFullYear();
+
+			this.year = ny;
+			this.month = nm + 1;
+			this.day = nd;
+			this.weekDay = ['日', '月', '火', '水', '木', '金', '土'][now.getDay()];
+
+			this.dayNumer   = now - new Date(ny, nm, nd);
+			this.dayDenom   = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
+			this.monthNumer = now - new Date(ny, nm, 1);
+			this.monthDenom = new Date(ny, nm + 1, 1) - new Date(ny, nm, 1);
+			this.yearNumer  = now - new Date(ny, 0, 1);
+			this.yearDenom  = new Date(ny + 1, 0, 1) - new Date(ny, 0, 1);
+
+			this.dayP   = this.dayNumer   / this.dayDenom   * 100;
+			this.monthP = this.monthNumer / this.monthDenom * 100;
+			this.yearP  = this.yearNumer  / this.yearDenom  * 100;
+
+			this.isHoliday = now.getDay() == 0 || now.getDay() == 6;
+
+			this.special =
+				nm == 0 && nd == 1 ? 'on-new-years-day' :
+				false;
+
+			this.update();
+		};
+
+		this.draw();
+
+		this.on('mount', () => {
+			this.clock = setInterval(this.draw, 1000);
+		});
+
+		this.on('unmount', () => {
+			clearInterval(this.clock);
+		});
+
+		this.func = () => {
+			if (++this.data.design == 2) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-calendar-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/channel.tag b/src/web/app/desktop/-tags/home-widgets/channel.tag
new file mode 100644
index 0000000000..98bf6bf7ec
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/channel.tag
@@ -0,0 +1,318 @@
+<mk-channel-home-widget>
+	<template v-if="!data.compact">
+		<p class="title">%fa:tv%{
+			channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
+		}</p>
+		<button @click="settings" title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
+	</template>
+	<p class="get-started" v-if="this.data.channel == null">%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
+	<mk-channel ref="channel" show={ this.data.channel }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+			overflow hidden
+
+			> .title
+				z-index 2
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .get-started
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> mk-channel
+				height 200px
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			channel: null,
+			compact: false
+		};
+
+		this.mixin('widget');
+
+		this.on('mount', () => {
+			if (this.data.channel) {
+				this.zap();
+			}
+		});
+
+		this.zap = () => {
+			this.update({
+				fetching: true
+			});
+
+			this.api('channels/show', {
+				channel_id: this.data.channel
+			}).then(channel => {
+				this.update({
+					fetching: false,
+					channel: channel
+				});
+
+				this.$refs.channel.zap(channel);
+			});
+		};
+
+		this.settings = () => {
+			const id = window.prompt('チャンネルID');
+			if (!id) return;
+			this.data.channel = id;
+			this.zap();
+
+			// Save state
+			this.save();
+		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
+	</script>
+</mk-channel-home-widget>
+
+<mk-channel>
+	<p v-if="fetching">読み込み中<mk-ellipsis/></p>
+	<div v-if="!fetching" ref="posts">
+		<p v-if="posts.length == 0">まだ投稿がありません</p>
+		<mk-channel-post each={ post in posts.slice().reverse() } post={ post } form={ parent.refs.form }/>
+	</div>
+	<mk-channel-form ref="form"/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> p
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> div
+				height calc(100% - 38px)
+				overflow auto
+				font-size 0.9em
+
+				> mk-channel-post
+					border-bottom solid 1px #eee
+
+					&:last-child
+						border-bottom none
+
+			> mk-channel-form
+				position absolute
+				left 0
+				bottom 0
+
+	</style>
+	<script lang="typescript">
+		import ChannelStream from '../../../common/scripts/streaming/channel-stream';
+
+		this.mixin('api');
+
+		this.fetching = true;
+		this.channel = null;
+		this.posts = [];
+
+		this.on('unmount', () => {
+			if (this.connection) {
+				this.connection.off('post', this.onPost);
+				this.connection.close();
+			}
+		});
+
+		this.zap = channel => {
+			this.update({
+				fetching: true,
+				channel: channel
+			});
+
+			this.api('channels/posts', {
+				channel_id: channel.id
+			}).then(posts => {
+				this.update({
+					fetching: false,
+					posts: posts
+				});
+
+				this.scrollToBottom();
+
+				if (this.connection) {
+					this.connection.off('post', this.onPost);
+					this.connection.close();
+				}
+				this.connection = new ChannelStream(this.channel.id);
+				this.connection.on('post', this.onPost);
+			});
+		};
+
+		this.onPost = post => {
+			this.posts.unshift(post);
+			this.update();
+			this.scrollToBottom();
+		};
+
+		this.scrollToBottom = () => {
+			this.$refs.posts.scrollTop = this.$refs.posts.scrollHeight;
+		};
+	</script>
+</mk-channel>
+
+<mk-channel-post>
+	<header>
+		<a class="index" @click="reply">{ post.index }:</a>
+		<a class="name" href={ _URL_ + '/' + post.user.username }><b>{ post.user.name }</b></a>
+		<span>ID:<i>{ post.user.username }</i></span>
+	</header>
+	<div>
+		<a v-if="post.reply">&gt;&gt;{ post.reply.index }</a>
+		{ post.text }
+		<div class="media" v-if="post.media">
+			<template each={ file in post.media }>
+				<a href={ file.url } target="_blank">
+					<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
+				</a>
+			</template>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			margin 0
+			padding 0
+			color #444
+
+			> header
+				position -webkit-sticky
+				position sticky
+				z-index 1
+				top 0
+				padding 8px 4px 4px 16px
+				background rgba(255, 255, 255, 0.9)
+
+				> .index
+					margin-right 0.25em
+
+				> .name
+					margin-right 0.5em
+					color #008000
+
+			> div
+				padding 0 16px 16px 16px
+
+				> .media
+					> a
+						display inline-block
+
+						> img
+							max-width 100%
+							vertical-align bottom
+
+	</style>
+	<script lang="typescript">
+		this.post = this.opts.post;
+		this.form = this.opts.form;
+
+		this.reply = () => {
+			this.form.refs.text.value = `>>${ this.post.index } `;
+		};
+	</script>
+</mk-channel-post>
+
+<mk-channel-form>
+	<input ref="text" disabled={ wait } onkeydown={ onkeydown } placeholder="書いて">
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 100%
+			height 38px
+			padding 4px
+			border-top solid 1px #ddd
+
+			> input
+				padding 0 8px
+				width 100%
+				height 100%
+				font-size 14px
+				color #55595c
+				border solid 1px #dadada
+				border-radius 4px
+
+				&:hover
+				&:focus
+					border-color #aeaeae
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.clear = () => {
+			this.$refs.text.value = '';
+		};
+
+		this.onkeydown = e => {
+			if (e.which == 10 || e.which == 13) this.post();
+		};
+
+		this.post = () => {
+			this.update({
+				wait: true
+			});
+
+			let text = this.$refs.text.value;
+			let reply = null;
+
+			if (/^>>([0-9]+) /.test(text)) {
+				const index = text.match(/^>>([0-9]+) /)[1];
+				reply = this.parent.posts.find(p => p.index.toString() == index);
+				text = text.replace(/^>>([0-9]+) /, '');
+			}
+
+			this.api('posts/create', {
+				text: text,
+				reply_id: reply ? reply.id : undefined,
+				channel_id: this.parent.channel.id
+			}).then(data => {
+				this.clear();
+			}).catch(err => {
+				alert('失敗した');
+			}).then(() => {
+				this.update({
+					wait: false
+				});
+			});
+		};
+	</script>
+</mk-channel-form>
diff --git a/src/web/app/desktop/-tags/home-widgets/donation.tag b/src/web/app/desktop/-tags/home-widgets/donation.tag
new file mode 100644
index 0000000000..5ed5c137b5
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/donation.tag
@@ -0,0 +1,36 @@
+<mk-donation-home-widget>
+	<article>
+		<h1>%fa:heart%%i18n:desktop.tags.mk-donation-home-widget.title%</h1>
+		<p>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr(0, '%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('{'))}<a href="/syuilo" data-user-preview="@syuilo">@syuilo</a>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr('%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('}') + 1)}</p>
+	</article>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px #ead8bb
+			border-radius 6px
+
+			> article
+				padding 20px
+
+				> h1
+					margin 0 0 5px 0
+					font-size 1em
+					color #888
+
+					> [data-fa]
+						margin-right 0.25em
+
+				> p
+					display block
+					z-index 1
+					margin 0
+					font-size 0.8em
+					color #999
+
+	</style>
+	<script lang="typescript">
+		this.mixin('widget');
+		this.mixin('user-preview');
+	</script>
+</mk-donation-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/mentions.tag b/src/web/app/desktop/-tags/home-widgets/mentions.tag
new file mode 100644
index 0000000000..81f9b2875e
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/mentions.tag
@@ -0,0 +1,125 @@
+<mk-mentions-home-widget>
+	<header><span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて</span><span data-is-active={ mode == 'following' } @click="setMode.bind(this, 'following')">フォロー中</span></header>
+	<div class="loading" v-if="isLoading">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="isEmpty">%fa:R comments%<span v-if="mode == 'all'">あなた宛ての投稿はありません。</span><span v-if="mode == 'following'">あなたがフォローしているユーザーからの言及はありません。</span></p>
+	<mk-timeline ref="timeline">
+		<yield to="footer">
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
+		</yield/>
+	</mk-timeline>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> header
+				padding 8px 16px
+				border-bottom solid 1px #eee
+
+				> span
+					margin-right 16px
+					line-height 27px
+					font-size 18px
+					color #555
+
+					&:not([data-is-active])
+						color $theme-color
+						cursor pointer
+
+						&:hover
+							text-decoration underline
+
+			> .loading
+				padding 64px 0
+
+			> .empty
+				display block
+				margin 0 auto
+				padding 32px
+				max-width 400px
+				text-align center
+				color #999
+
+				> [data-fa]
+					display block
+					margin-bottom 16px
+					font-size 3em
+					color #ccc
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		this.isLoading = true;
+		this.isEmpty = false;
+		this.moreLoading = false;
+		this.mode = 'all';
+
+		this.on('mount', () => {
+			document.addEventListener('keydown', this.onDocumentKeydown);
+			window.addEventListener('scroll', this.onScroll);
+
+			this.fetch(() => this.$emit('loaded'));
+		});
+
+		this.on('unmount', () => {
+			document.removeEventListener('keydown', this.onDocumentKeydown);
+			window.removeEventListener('scroll', this.onScroll);
+		});
+
+		this.onDocumentKeydown = e => {
+			if (e.target.tagName != 'INPUT' && tag != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					this.$refs.timeline.focus();
+				}
+			}
+		};
+
+		this.fetch = cb => {
+			this.api('posts/mentions', {
+				following: this.mode == 'following'
+			}).then(posts => {
+				this.update({
+					isLoading: false,
+					isEmpty: posts.length == 0
+				});
+				this.$refs.timeline.setPosts(posts);
+				if (cb) cb();
+			});
+		};
+
+		this.more = () => {
+			if (this.moreLoading || this.isLoading || this.$refs.timeline.posts.length == 0) return;
+			this.update({
+				moreLoading: true
+			});
+			this.api('posts/mentions', {
+				following: this.mode == 'following',
+				until_id: this.$refs.timeline.tail().id
+			}).then(posts => {
+				this.update({
+					moreLoading: false
+				});
+				this.$refs.timeline.prependPosts(posts);
+			});
+		};
+
+		this.onScroll = () => {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 8) this.more();
+		};
+
+		this.setMode = mode => {
+			this.update({
+				mode: mode
+			});
+			this.fetch();
+		};
+	</script>
+</mk-mentions-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/messaging.tag b/src/web/app/desktop/-tags/home-widgets/messaging.tag
new file mode 100644
index 0000000000..d3b77b58cc
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/messaging.tag
@@ -0,0 +1,52 @@
+<mk-messaging-home-widget>
+	<template v-if="data.design == 0">
+		<p class="title">%fa:comments%%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
+	</template>
+	<mk-messaging ref="index" compact={ true }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow hidden
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				z-index 2
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> mk-messaging
+				max-height 250px
+				overflow auto
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.on('mount', () => {
+			this.$refs.index.on('navigate-user', user => {
+				riot.mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
+					user: user
+				});
+			});
+		});
+
+		this.func = () => {
+			if (++this.data.design == 2) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-messaging-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/nav.tag b/src/web/app/desktop/-tags/home-widgets/nav.tag
new file mode 100644
index 0000000000..890fb4d8f7
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/nav.tag
@@ -0,0 +1,23 @@
+<mk-nav-home-widget>
+	<mk-nav-links/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 16px
+			font-size 12px
+			color #aaa
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			a
+				color #999
+
+			i
+				color #ccc
+
+	</style>
+	<script lang="typescript">
+		this.mixin('widget');
+	</script>
+</mk-nav-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/notifications.tag b/src/web/app/desktop/-tags/home-widgets/notifications.tag
new file mode 100644
index 0000000000..bd915b197b
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/notifications.tag
@@ -0,0 +1,66 @@
+<mk-notifications-home-widget>
+	<template v-if="!data.compact">
+		<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
+		<button @click="settings" title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
+	</template>
+	<mk-notifications/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> mk-notifications
+				max-height 300px
+				overflow auto
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			compact: false
+		};
+
+		this.mixin('widget');
+
+		this.settings = () => {
+			const w = riot.mount(document.body.appendChild(document.createElement('mk-settings-window')))[0];
+			w.switch('notification');
+		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
+	</script>
+</mk-notifications-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/photo-stream.tag b/src/web/app/desktop/-tags/home-widgets/photo-stream.tag
new file mode 100644
index 0000000000..a2d95dede3
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/photo-stream.tag
@@ -0,0 +1,118 @@
+<mk-photo-stream-home-widget data-melt={ data.design == 2 }>
+	<template v-if="data.design == 0">
+		<p class="title">%fa:camera%%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
+	</template>
+	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<div class="stream" v-if="!initializing && images.length > 0">
+		<template each={ image in images }>
+			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
+		</template>
+	</div>
+	<p class="empty" v-if="!initializing && images.length == 0">%i18n:desktop.tags.mk-photo-stream-home-widget.no-photos%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			&[data-melt]
+				background transparent !important
+				border none !important
+
+				> .stream
+					padding 0
+
+					> .img
+						border solid 4px transparent
+						border-radius 8px
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> .stream
+				display -webkit-flex
+				display -moz-flex
+				display -ms-flex
+				display flex
+				justify-content center
+				flex-wrap wrap
+				padding 8px
+
+				> .img
+					flex 1 1 33%
+					width 33%
+					height 80px
+					background-position center center
+					background-size cover
+					border solid 2px transparent
+					border-radius 4px
+
+			> .initializing
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.images = [];
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.connection.on('drive_file_created', this.onStreamDriveFileCreated);
+
+			this.api('drive/stream', {
+				type: 'image/*',
+				limit: 9
+			}).then(images => {
+				this.update({
+					initializing: false,
+					images: images
+				});
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('drive_file_created', this.onStreamDriveFileCreated);
+			this.stream.dispose(this.connectionId);
+		});
+
+		this.onStreamDriveFileCreated = file => {
+			if (/^image\/.+$/.test(file.type)) {
+				this.images.unshift(file);
+				if (this.images.length > 9) this.images.pop();
+				this.update();
+			}
+		};
+
+		this.func = () => {
+			if (++this.data.design == 3) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-photo-stream-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/post-form.tag b/src/web/app/desktop/-tags/home-widgets/post-form.tag
new file mode 100644
index 0000000000..d5824477b9
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/post-form.tag
@@ -0,0 +1,103 @@
+<mk-post-form-home-widget>
+	<mk-post-form v-if="place == 'main'"/>
+	<template v-if="place != 'main'">
+		<template v-if="data.design == 0">
+			<p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
+		</template>
+		<textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
+		<button @click="post" disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
+	</template>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			overflow hidden
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> textarea
+				display block
+				width 100%
+				max-width 100%
+				min-width 100%
+				padding 16px
+				margin-bottom 28px + 16px
+				border none
+				border-bottom solid 1px #eee
+
+			> button
+				display block
+				position absolute
+				bottom 8px
+				right 8px
+				margin 0
+				padding 0 10px
+				height 28px
+				color $theme-color-foreground
+				background $theme-color !important
+				outline none
+				border none
+				border-radius 4px
+				transition background 0.1s ease
+				cursor pointer
+
+				&:hover
+					background lighten($theme-color, 10%) !important
+
+				&:active
+					background darken($theme-color, 10%) !important
+					transition background 0s ease
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.func = () => {
+			if (++this.data.design == 2) this.data.design = 0;
+			this.save();
+		};
+
+		this.onkeydown = e => {
+			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
+		};
+
+		this.post = () => {
+			this.update({
+				posting: true
+			});
+
+			this.api('posts/create', {
+				text: this.$refs.text.value
+			}).then(data => {
+				this.clear();
+			}).catch(err => {
+				alert('失敗した');
+			}).then(() => {
+				this.update({
+					posting: false
+				});
+			});
+		};
+
+		this.clear = () => {
+			this.$refs.text.value = '';
+		};
+	</script>
+</mk-post-form-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/profile.tag b/src/web/app/desktop/-tags/home-widgets/profile.tag
new file mode 100644
index 0000000000..02a1f0d5a3
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/profile.tag
@@ -0,0 +1,116 @@
+<mk-profile-home-widget data-compact={ data.design == 1 || data.design == 2 } data-melt={ data.design == 2 }>
+	<div class="banner" style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' } title="クリックでバナー編集" @click="setBanner"></div>
+	<img class="avatar" src={ I.avatar_url + '?thumbnail&size=96' } @click="setAvatar" alt="avatar" title="クリックでアバター編集" data-user-preview={ I.id }/>
+	<a class="name" href={ '/' + I.username }>{ I.name }</a>
+	<p class="username">@{ I.username }</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow hidden
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			&[data-compact]
+				> .banner:before
+					content ""
+					display block
+					width 100%
+					height 100%
+					background rgba(0, 0, 0, 0.5)
+
+				> .avatar
+					top ((100px - 58px) / 2)
+					left ((100px - 58px) / 2)
+					border none
+					border-radius 100%
+					box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
+
+				> .name
+					position absolute
+					top 0
+					left 92px
+					margin 0
+					line-height 100px
+					color #fff
+					text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
+
+				> .username
+					display none
+
+			&[data-melt]
+				background transparent !important
+				border none !important
+
+				> .banner
+					visibility hidden
+
+				> .avatar
+					box-shadow none
+
+				> .name
+					color #666
+					text-shadow none
+
+			> .banner
+				height 100px
+				background-color #f5f5f5
+				background-size cover
+				background-position center
+				cursor pointer
+
+			> .avatar
+				display block
+				position absolute
+				top 76px
+				left 16px
+				width 58px
+				height 58px
+				margin 0
+				border solid 3px #fff
+				border-radius 8px
+				vertical-align bottom
+				cursor pointer
+
+			> .name
+				display block
+				margin 10px 0 0 84px
+				line-height 16px
+				font-weight bold
+				color #555
+
+			> .username
+				display block
+				margin 4px 0 8px 84px
+				line-height 16px
+				font-size 0.9em
+				color #999
+
+	</style>
+	<script lang="typescript">
+		import inputDialog from '../../scripts/input-dialog';
+		import updateAvatar from '../../scripts/update-avatar';
+		import updateBanner from '../../scripts/update-banner';
+
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.mixin('user-preview');
+
+		this.setAvatar = () => {
+			updateAvatar(this.I);
+		};
+
+		this.setBanner = () => {
+			updateBanner(this.I);
+		};
+
+		this.func = () => {
+			if (++this.data.design == 3) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-profile-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/recommended-polls.tag b/src/web/app/desktop/-tags/home-widgets/recommended-polls.tag
new file mode 100644
index 0000000000..cfbcd1e929
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/recommended-polls.tag
@@ -0,0 +1,119 @@
+<mk-recommended-polls-home-widget>
+	<template v-if="!data.compact">
+		<p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
+		<button @click="fetch" title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
+	</template>
+	<div class="poll" v-if="!loading && poll != null">
+		<p v-if="poll.text"><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
+		<p v-if="!poll.text"><a href="/{ poll.user.username }/{ poll.id }">%fa:link%</a></p>
+		<mk-poll post={ poll }/>
+	</div>
+	<p class="empty" v-if="!loading && poll == null">%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p>
+	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				border-bottom solid 1px #eee
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .poll
+				padding 16px
+				font-size 12px
+				color #555
+
+				> p
+					margin 0 0 8px 0
+
+					> a
+						color inherit
+
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .loading
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			compact: false
+		};
+
+		this.mixin('widget');
+
+		this.poll = null;
+		this.loading = true;
+
+		this.offset = 0;
+
+		this.on('mount', () => {
+			this.fetch();
+		});
+
+		this.fetch = () => {
+			this.update({
+				loading: true,
+				poll: null
+			});
+			this.api('posts/polls/recommendation', {
+				limit: 1,
+				offset: this.offset
+			}).then(posts => {
+				const poll = posts ? posts[0] : null;
+				if (poll == null) {
+					this.offset = 0;
+				} else {
+					this.offset++;
+				}
+				this.update({
+					loading: false,
+					poll: poll
+				});
+			});
+		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
+	</script>
+</mk-recommended-polls-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/rss-reader.tag b/src/web/app/desktop/-tags/home-widgets/rss-reader.tag
new file mode 100644
index 0000000000..4e0ed702e2
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/rss-reader.tag
@@ -0,0 +1,109 @@
+<mk-rss-reader-home-widget>
+	<template v-if="!data.compact">
+		<p class="title">%fa:rss-square%RSS</p>
+		<button @click="settings" title="設定">%fa:cog%</button>
+	</template>
+	<div class="feed" v-if="!initializing">
+		<template each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></template>
+	</div>
+	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .feed
+				padding 12px 16px
+				font-size 0.9em
+
+				> a
+					display block
+					padding 4px 0
+					color #666
+					border-bottom dashed 1px #eee
+
+					&:last-child
+						border-bottom none
+
+			> .initializing
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			compact: false
+		};
+
+		this.mixin('widget');
+
+		this.url = 'http://news.yahoo.co.jp/pickup/rss.xml';
+		this.items = [];
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.fetch();
+			this.clock = setInterval(this.fetch, 60000);
+		});
+
+		this.on('unmount', () => {
+			clearInterval(this.clock);
+		});
+
+		this.fetch = () => {
+			fetch(`https://api.rss2json.com/v1/api.json?rss_url=${this.url}`, {
+				cache: 'no-cache'
+			}).then(res => {
+				res.json().then(feed => {
+					this.update({
+						initializing: false,
+						items: feed.items
+					});
+				});
+			});
+		};
+
+		this.settings = () => {
+		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
+	</script>
+</mk-rss-reader-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/server.tag b/src/web/app/desktop/-tags/home-widgets/server.tag
new file mode 100644
index 0000000000..992517163a
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/server.tag
@@ -0,0 +1,533 @@
+<mk-server-home-widget data-melt={ data.design == 2 }>
+	<template v-if="data.design == 0">
+		<p class="title">%fa:server%%i18n:desktop.tags.mk-server-home-widget.title%</p>
+		<button @click="toggle" title="%i18n:desktop.tags.mk-server-home-widget.toggle%">%fa:sort%</button>
+	</template>
+	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<mk-server-home-widget-cpu-and-memory-usage v-if="!initializing" show={ data.view == 0 } connection={ connection }/>
+	<mk-server-home-widget-cpu v-if="!initializing" show={ data.view == 1 } connection={ connection } meta={ meta }/>
+	<mk-server-home-widget-memory v-if="!initializing" show={ data.view == 2 } connection={ connection }/>
+	<mk-server-home-widget-disk v-if="!initializing" show={ data.view == 3 } connection={ connection }/>
+	<mk-server-home-widget-uptimes v-if="!initializing" show={ data.view == 4 } connection={ connection }/>
+	<mk-server-home-widget-info v-if="!initializing" show={ data.view == 5 } connection={ connection } meta={ meta }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			&[data-melt]
+				background transparent !important
+				border none !important
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .initializing
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('os');
+
+		this.data = {
+			view: 0,
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.mixin('server-stream');
+		this.connection = this.serverStream.getConnection();
+		this.connectionId = this.serverStream.use();
+
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.mios.getMeta().then(meta => {
+				this.update({
+					initializing: false,
+					meta
+				});
+			});
+		});
+
+		this.on('unmount', () => {
+			this.serverStream.dispose(this.connectionId);
+		});
+
+		this.toggle = () => {
+			this.data.view++;
+			if (this.data.view == 6) this.data.view = 0;
+
+			// Save widget state
+			this.save();
+		};
+
+		this.func = () => {
+			if (++this.data.design == 3) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-server-home-widget>
+
+<mk-server-home-widget-cpu-and-memory-usage>
+	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
+		<defs>
+			<linearGradient id={ cpuGradientId } x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+				<stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
+				<stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
+				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+			</linearGradient>
+			<mask id={ cpuMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
+				<polygon
+					riot-points={ cpuPolygonPoints }
+					fill="#fff"
+					fill-opacity="0.5"/>
+				<polyline
+					riot-points={ cpuPolylinePoints }
+					fill="none"
+					stroke="#fff"
+					stroke-width="1"/>
+			</mask>
+		</defs>
+		<rect
+			x="-1" y="-1"
+			riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 }
+			style="stroke: none; fill: url(#{ cpuGradientId }); mask: url(#{ cpuMaskId })"/>
+		<text x="1" y="5">CPU <tspan>{ cpuP }%</tspan></text>
+	</svg>
+	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
+		<defs>
+			<linearGradient id={ memGradientId } x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+				<stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
+				<stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
+				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+			</linearGradient>
+			<mask id={ memMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
+				<polygon
+					riot-points={ memPolygonPoints }
+					fill="#fff"
+					fill-opacity="0.5"/>
+				<polyline
+					riot-points={ memPolylinePoints }
+					fill="none"
+					stroke="#fff"
+					stroke-width="1"/>
+			</mask>
+		</defs>
+		<rect
+			x="-1" y="-1"
+			riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 }
+			style="stroke: none; fill: url(#{ memGradientId }); mask: url(#{ memMaskId })"/>
+		<text x="1" y="5">MEM <tspan>{ memP }%</tspan></text>
+	</svg>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> svg
+				display block
+				padding 10px
+				width 50%
+				float left
+
+				&:first-child
+					padding-right 5px
+
+				&:last-child
+					padding-left 5px
+
+				> text
+					font-size 5px
+					fill rgba(0, 0, 0, 0.55)
+
+					> tspan
+						opacity 0.5
+
+			&:after
+				content ""
+				display block
+				clear both
+	</style>
+	<script lang="typescript">
+		import uuid from 'uuid';
+
+		this.viewBoxX = 50;
+		this.viewBoxY = 30;
+		this.stats = [];
+		this.connection = this.opts.connection;
+		this.cpuGradientId = uuid();
+		this.cpuMaskId = uuid();
+		this.memGradientId = uuid();
+		this.memMaskId = uuid();
+
+		this.on('mount', () => {
+			this.connection.on('stats', this.onStats);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('stats', this.onStats);
+		});
+
+		this.onStats = stats => {
+			stats.mem.used = stats.mem.total - stats.mem.free;
+			this.stats.push(stats);
+			if (this.stats.length > 50) this.stats.shift();
+
+			const cpuPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - s.cpu_usage) * this.viewBoxY}`).join(' ');
+			const memPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - (s.mem.used / s.mem.total)) * this.viewBoxY}`).join(' ');
+
+			const cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ cpuPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+			const memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ memPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+
+			const cpuP = (stats.cpu_usage * 100).toFixed(0);
+			const memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
+
+			this.update({
+				cpuPolylinePoints,
+				memPolylinePoints,
+				cpuPolygonPoints,
+				memPolygonPoints,
+				cpuP,
+				memP
+			});
+		};
+	</script>
+</mk-server-home-widget-cpu-and-memory-usage>
+
+<mk-server-home-widget-cpu>
+	<mk-server-home-widget-pie ref="pie"/>
+	<div>
+		<p>%fa:microchip%CPU</p>
+		<p>{ cores } Cores</p>
+		<p>{ model }</p>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> mk-server-home-widget-pie
+				padding 10px
+				height 100px
+				float left
+
+			> div
+				float left
+				width calc(100% - 100px)
+				padding 10px 10px 10px 0
+
+				> p
+					margin 0
+					font-size 12px
+					color #505050
+
+					&:first-child
+						font-weight bold
+
+						> [data-fa]
+							margin-right 4px
+
+			&:after
+				content ""
+				display block
+				clear both
+
+	</style>
+	<script lang="typescript">
+		this.cores = this.opts.meta.cpu.cores;
+		this.model = this.opts.meta.cpu.model;
+		this.connection = this.opts.connection;
+
+		this.on('mount', () => {
+			this.connection.on('stats', this.onStats);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('stats', this.onStats);
+		});
+
+		this.onStats = stats => {
+			this.$refs.pie.render(stats.cpu_usage);
+		};
+	</script>
+</mk-server-home-widget-cpu>
+
+<mk-server-home-widget-memory>
+	<mk-server-home-widget-pie ref="pie"/>
+	<div>
+		<p>%fa:flask%Memory</p>
+		<p>Total: { bytesToSize(total, 1) }</p>
+		<p>Used: { bytesToSize(used, 1) }</p>
+		<p>Free: { bytesToSize(free, 1) }</p>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> mk-server-home-widget-pie
+				padding 10px
+				height 100px
+				float left
+
+			> div
+				float left
+				width calc(100% - 100px)
+				padding 10px 10px 10px 0
+
+				> p
+					margin 0
+					font-size 12px
+					color #505050
+
+					&:first-child
+						font-weight bold
+
+						> [data-fa]
+							margin-right 4px
+
+			&:after
+				content ""
+				display block
+				clear both
+
+	</style>
+	<script lang="typescript">
+		import bytesToSize from '../../../common/scripts/bytes-to-size';
+
+		this.connection = this.opts.connection;
+		this.bytesToSize = bytesToSize;
+
+		this.on('mount', () => {
+			this.connection.on('stats', this.onStats);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('stats', this.onStats);
+		});
+
+		this.onStats = stats => {
+			stats.mem.used = stats.mem.total - stats.mem.free;
+			this.$refs.pie.render(stats.mem.used / stats.mem.total);
+
+			this.update({
+				total: stats.mem.total,
+				used: stats.mem.used,
+				free: stats.mem.free
+			});
+		};
+	</script>
+</mk-server-home-widget-memory>
+
+<mk-server-home-widget-disk>
+	<mk-server-home-widget-pie ref="pie"/>
+	<div>
+		<p>%fa:R hdd%Storage</p>
+		<p>Total: { bytesToSize(total, 1) }</p>
+		<p>Available: { bytesToSize(available, 1) }</p>
+		<p>Used: { bytesToSize(used, 1) }</p>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> mk-server-home-widget-pie
+				padding 10px
+				height 100px
+				float left
+
+			> div
+				float left
+				width calc(100% - 100px)
+				padding 10px 10px 10px 0
+
+				> p
+					margin 0
+					font-size 12px
+					color #505050
+
+					&:first-child
+						font-weight bold
+
+						> [data-fa]
+							margin-right 4px
+
+			&:after
+				content ""
+				display block
+				clear both
+
+	</style>
+	<script lang="typescript">
+		import bytesToSize from '../../../common/scripts/bytes-to-size';
+
+		this.connection = this.opts.connection;
+		this.bytesToSize = bytesToSize;
+
+		this.on('mount', () => {
+			this.connection.on('stats', this.onStats);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('stats', this.onStats);
+		});
+
+		this.onStats = stats => {
+			stats.disk.used = stats.disk.total - stats.disk.free;
+
+			this.$refs.pie.render(stats.disk.used / stats.disk.total);
+
+			this.update({
+				total: stats.disk.total,
+				used: stats.disk.used,
+				available: stats.disk.available
+			});
+		};
+	</script>
+</mk-server-home-widget-disk>
+
+<mk-server-home-widget-uptimes>
+	<p>Uptimes</p>
+	<p>Process: { process ? process.toFixed(0) : '---' }s</p>
+	<p>OS: { os ? os.toFixed(0) : '---' }s</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 10px 14px
+
+			> p
+				margin 0
+				font-size 12px
+				color #505050
+
+				&:first-child
+					font-weight bold
+
+	</style>
+	<script lang="typescript">
+		this.connection = this.opts.connection;
+
+		this.on('mount', () => {
+			this.connection.on('stats', this.onStats);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('stats', this.onStats);
+		});
+
+		this.onStats = stats => {
+			this.update({
+				process: stats.process_uptime,
+				os: stats.os_uptime
+			});
+		};
+	</script>
+</mk-server-home-widget-uptimes>
+
+<mk-server-home-widget-info>
+	<p>Maintainer: <b>{ meta.maintainer }</b></p>
+	<p>Machine: { meta.machine }</p>
+	<p>Node: { meta.node }</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 10px 14px
+
+			> p
+				margin 0
+				font-size 12px
+				color #505050
+
+	</style>
+	<script lang="typescript">
+		this.meta = this.opts.meta;
+	</script>
+</mk-server-home-widget-info>
+
+<mk-server-home-widget-pie>
+	<svg viewBox="0 0 1 1" preserveAspectRatio="none">
+		<circle
+			riot-r={ r }
+			cx="50%" cy="50%"
+			fill="none"
+			stroke-width="0.1"
+			stroke="rgba(0, 0, 0, 0.05)"/>
+		<circle
+			riot-r={ r }
+			cx="50%" cy="50%"
+			riot-stroke-dasharray={ Math.PI * (r * 2) }
+			riot-stroke-dashoffset={ strokeDashoffset }
+			fill="none"
+			stroke-width="0.1"
+			riot-stroke={ color }/>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle">{ (p * 100).toFixed(0) }%</text>
+	</svg>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> svg
+				display block
+				height 100%
+
+				> circle
+					transform-origin center
+					transform rotate(-90deg)
+					transition stroke-dashoffset 0.5s ease
+
+				> text
+					font-size 0.15px
+					fill rgba(0, 0, 0, 0.6)
+
+	</style>
+	<script lang="typescript">
+		this.r = 0.4;
+
+		this.render = p => {
+			const color = `hsl(${180 - (p * 180)}, 80%, 70%)`;
+			const strokeDashoffset = (1 - p) * (Math.PI * (this.r * 2));
+
+			this.update({
+				p,
+				color,
+				strokeDashoffset
+			});
+		};
+	</script>
+</mk-server-home-widget-pie>
diff --git a/src/web/app/desktop/-tags/home-widgets/slideshow.tag b/src/web/app/desktop/-tags/home-widgets/slideshow.tag
new file mode 100644
index 0000000000..817b138d31
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/slideshow.tag
@@ -0,0 +1,151 @@
+<mk-slideshow-home-widget>
+	<div @click="choose">
+		<p v-if="data.folder === undefined">クリックしてフォルダを指定してください</p>
+		<p v-if="data.folder !== undefined && images.length == 0 && !fetching">このフォルダには画像がありません</p>
+		<div ref="slideA" class="slide a"></div>
+		<div ref="slideB" class="slide b"></div>
+	</div>
+	<button @click="resize">%fa:expand%</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow hidden
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			&:hover > button
+				display block
+
+			> button
+				position absolute
+				left 0
+				bottom 0
+				display none
+				padding 4px
+				font-size 24px
+				color #fff
+				text-shadow 0 0 8px #000
+
+			> div
+				width 100%
+				height 100%
+				cursor pointer
+
+				> *
+					pointer-events none
+
+				> .slide
+					position absolute
+					top 0
+					left 0
+					width 100%
+					height 100%
+					background-size cover
+					background-position center
+
+					&.b
+						opacity 0
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.data = {
+			folder: undefined,
+			size: 0
+		};
+
+		this.mixin('widget');
+
+		this.images = [];
+		this.fetching = true;
+
+		this.on('mount', () => {
+			this.applySize();
+
+			if (this.data.folder !== undefined) {
+				this.fetch();
+			}
+
+			this.clock = setInterval(this.change, 10000);
+		});
+
+		this.on('unmount', () => {
+			clearInterval(this.clock);
+		});
+
+		this.applySize = () => {
+			let h;
+
+			if (this.data.size == 1) {
+				h = 250;
+			} else {
+				h = 170;
+			}
+
+			this.root.style.height = `${h}px`;
+		};
+
+		this.resize = () => {
+			this.data.size++;
+			if (this.data.size == 2) this.data.size = 0;
+
+			this.applySize();
+			this.save();
+		};
+
+		this.change = () => {
+			if (this.images.length == 0) return;
+
+			const index = Math.floor(Math.random() * this.images.length);
+			const img = `url(${ this.images[index].url }?thumbnail&size=1024)`;
+
+			this.$refs.slideB.style.backgroundImage = img;
+
+			anime({
+				targets: this.$refs.slideB,
+				opacity: 1,
+				duration: 1000,
+				easing: 'linear',
+				complete: () => {
+					this.$refs.slideA.style.backgroundImage = img;
+					anime({
+						targets: this.$refs.slideB,
+						opacity: 0,
+						duration: 0
+					});
+				}
+			});
+		};
+
+		this.fetch = () => {
+			this.update({
+				fetching: true
+			});
+
+			this.api('drive/files', {
+				folder_id: this.data.folder,
+				type: 'image/*',
+				limit: 100
+			}).then(images => {
+				this.update({
+					fetching: false,
+					images: images
+				});
+				this.$refs.slideA.style.backgroundImage = '';
+				this.$refs.slideB.style.backgroundImage = '';
+				this.change();
+			});
+		};
+
+		this.choose = () => {
+			const i = riot.mount(document.body.appendChild(document.createElement('mk-select-folder-from-drive-window')))[0];
+			i.one('selected', folder => {
+				this.data.folder = folder ? folder.id : null;
+				this.fetch();
+				this.save();
+			});
+		};
+	</script>
+</mk-slideshow-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/timeline.tag b/src/web/app/desktop/-tags/home-widgets/timeline.tag
new file mode 100644
index 0000000000..4668ebfa87
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/timeline.tag
@@ -0,0 +1,143 @@
+<mk-timeline-home-widget>
+	<mk-following-setuper v-if="noFollowing"/>
+	<div class="loading" v-if="isLoading">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="isEmpty && !isLoading">%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p>
+	<mk-timeline ref="timeline" hide={ isLoading }>
+		<yield to="footer">
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
+		</yield/>
+	</mk-timeline>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> mk-following-setuper
+				border-bottom solid 1px #eee
+
+			> .loading
+				padding 64px 0
+
+			> .empty
+				display block
+				margin 0 auto
+				padding 32px
+				max-width 400px
+				text-align center
+				color #999
+
+				> [data-fa]
+					display block
+					margin-bottom 16px
+					font-size 3em
+					color #ccc
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.isLoading = true;
+		this.isEmpty = false;
+		this.moreLoading = false;
+		this.noFollowing = this.I.following_count == 0;
+
+		this.on('mount', () => {
+			this.connection.on('post', this.onStreamPost);
+			this.connection.on('follow', this.onStreamFollow);
+			this.connection.on('unfollow', this.onStreamUnfollow);
+
+			document.addEventListener('keydown', this.onDocumentKeydown);
+			window.addEventListener('scroll', this.onScroll);
+
+			this.load(() => this.$emit('loaded'));
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('post', this.onStreamPost);
+			this.connection.off('follow', this.onStreamFollow);
+			this.connection.off('unfollow', this.onStreamUnfollow);
+			this.stream.dispose(this.connectionId);
+
+			document.removeEventListener('keydown', this.onDocumentKeydown);
+			window.removeEventListener('scroll', this.onScroll);
+		});
+
+		this.onDocumentKeydown = e => {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					this.$refs.timeline.focus();
+				}
+			}
+		};
+
+		this.load = (cb) => {
+			this.update({
+				isLoading: true
+			});
+
+			this.api('posts/timeline', {
+				until_date: this.date ? this.date.getTime() : undefined
+			}).then(posts => {
+				this.update({
+					isLoading: false,
+					isEmpty: posts.length == 0
+				});
+				this.$refs.timeline.setPosts(posts);
+				if (cb) cb();
+			});
+		};
+
+		this.more = () => {
+			if (this.moreLoading || this.isLoading || this.$refs.timeline.posts.length == 0) return;
+			this.update({
+				moreLoading: true
+			});
+			this.api('posts/timeline', {
+				until_id: this.$refs.timeline.tail().id
+			}).then(posts => {
+				this.update({
+					moreLoading: false
+				});
+				this.$refs.timeline.prependPosts(posts);
+			});
+		};
+
+		this.onStreamPost = post => {
+			this.update({
+				isEmpty: false
+			});
+			this.$refs.timeline.addPost(post);
+		};
+
+		this.onStreamFollow = () => {
+			this.load();
+		};
+
+		this.onStreamUnfollow = () => {
+			this.load();
+		};
+
+		this.onScroll = () => {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 8) this.more();
+		};
+
+		this.warp = date => {
+			this.update({
+				date: date
+			});
+
+			this.load();
+		};
+	</script>
+</mk-timeline-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/timemachine.tag b/src/web/app/desktop/-tags/home-widgets/timemachine.tag
new file mode 100644
index 0000000000..43f59fe674
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/timemachine.tag
@@ -0,0 +1,23 @@
+<mk-timemachine-home-widget>
+	<mk-calendar-widget design={ data.design } warp={ warp }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+	<script lang="typescript">
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.warp = date => {
+			this.opts.tl.warp(date);
+		};
+
+		this.func = () => {
+			if (++this.data.design == 6) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-timemachine-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/tips.tag b/src/web/app/desktop/-tags/home-widgets/tips.tag
new file mode 100644
index 0000000000..a352253cef
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/tips.tag
@@ -0,0 +1,94 @@
+<mk-tips-home-widget>
+	<p ref="tip">%fa:R lightbulb%<span ref="text"></span></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow visible !important
+
+			> p
+				display block
+				margin 0
+				padding 0 12px
+				text-align center
+				font-size 0.7em
+				color #999
+
+				> [data-fa]
+					margin-right 4px
+
+				kbd
+					display inline
+					padding 0 6px
+					margin 0 2px
+					font-size 1em
+					font-family inherit
+					border solid 1px #999
+					border-radius 2px
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.mixin('widget');
+
+		this.tips = [
+			'<kbd>t</kbd>でタイムラインにフォーカスできます',
+			'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
+			'投稿フォームにはファイルをドラッグ&ドロップできます',
+			'投稿フォームにクリップボードにある画像データをペーストできます',
+			'ドライブにファイルをドラッグ&ドロップしてアップロードできます',
+			'ドライブでファイルをドラッグしてフォルダ移動できます',
+			'ドライブでフォルダをドラッグしてフォルダ移動できます',
+			'ホームは設定からカスタマイズできます',
+			'MisskeyはMIT Licenseです',
+			'タイムマシンウィジェットを利用すると、簡単に過去のタイムラインに遡れます',
+			'投稿の ... をクリックして、投稿をユーザーページにピン留めできます',
+			'ドライブの容量は(デフォルトで)1GBです',
+			'投稿に添付したファイルは全てドライブに保存されます',
+			'ホームのカスタマイズ中、ウィジェットを右クリックしてデザインを変更できます',
+			'タイムライン上部にもウィジェットを設置できます',
+			'投稿をダブルクリックすると詳細が見れます',
+			'「**」でテキストを囲むと**強調表示**されます',
+			'チャンネルウィジェットを利用すると、よく利用するチャンネルを素早く確認できます',
+			'いくつかのウィンドウはブラウザの外に切り離すことができます',
+			'カレンダーウィジェットのパーセンテージは、経過の割合を示しています',
+			'APIを利用してbotの開発なども行えます',
+			'MisskeyはLINEを通じてでも利用できます',
+			'まゆかわいいよまゆ',
+			'Misskeyは2014年にサービスを開始しました',
+			'対応ブラウザではMisskeyを開いていなくても通知を受け取れます'
+		]
+
+		this.on('mount', () => {
+			this.set();
+			this.clock = setInterval(this.change, 20000);
+		});
+
+		this.on('unmount', () => {
+			clearInterval(this.clock);
+		});
+
+		this.set = () => {
+			this.$refs.text.innerHTML = this.tips[Math.floor(Math.random() * this.tips.length)];
+		};
+
+		this.change = () => {
+			anime({
+				targets: this.$refs.tip,
+				opacity: 0,
+				duration: 500,
+				easing: 'linear',
+				complete: this.set
+			});
+
+			setTimeout(() => {
+				anime({
+					targets: this.$refs.tip,
+					opacity: 1,
+					duration: 500,
+					easing: 'linear'
+				});
+			}, 500);
+		};
+	</script>
+</mk-tips-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/trends.tag b/src/web/app/desktop/-tags/home-widgets/trends.tag
new file mode 100644
index 0000000000..5e297ebc7b
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/trends.tag
@@ -0,0 +1,125 @@
+<mk-trends-home-widget>
+	<template v-if="!data.compact">
+		<p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
+		<button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
+	</template>
+	<div class="post" v-if="!loading && post != null">
+		<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
+		<p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p>
+	</div>
+	<p class="empty" v-if="!loading && post == null">%i18n:desktop.tags.mk-trends-home-widget.nothing%</p>
+	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				border-bottom solid 1px #eee
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .post
+				padding 16px
+				font-size 12px
+				font-style oblique
+				color #555
+
+				> p
+					margin 0
+
+				> .text,
+				> .author
+					> a
+						color inherit
+
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .loading
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			compact: false
+		};
+
+		this.mixin('widget');
+
+		this.post = null;
+		this.loading = true;
+
+		this.offset = 0;
+
+		this.on('mount', () => {
+			this.fetch();
+		});
+
+		this.fetch = () => {
+			this.update({
+				loading: true,
+				post: null
+			});
+			this.api('posts/trend', {
+				limit: 1,
+				offset: this.offset,
+				repost: false,
+				reply: false,
+				media: false,
+				poll: false
+			}).then(posts => {
+				const post = posts ? posts[0] : null;
+				if (post == null) {
+					this.offset = 0;
+				} else {
+					this.offset++;
+				}
+				this.update({
+					loading: false,
+					post: post
+				});
+			});
+		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
+	</script>
+</mk-trends-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/user-recommendation.tag b/src/web/app/desktop/-tags/home-widgets/user-recommendation.tag
new file mode 100644
index 0000000000..5344da1f2b
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/user-recommendation.tag
@@ -0,0 +1,165 @@
+<mk-user-recommendation-home-widget>
+	<template v-if="!data.compact">
+		<p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
+		<button @click="refresh" title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
+	</template>
+	<div class="user" v-if="!loading && users.length != 0" each={ _user in users }>
+		<a class="avatar-anchor" href={ '/' + _user.username }>
+			<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>
+		</a>
+		<div class="body">
+			<a class="name" href={ '/' + _user.username } data-user-preview={ _user.id }>{ _user.name }</a>
+			<p class="username">@{ _user.username }</p>
+		</div>
+		<mk-follow-button user={ _user }/>
+	</div>
+	<p class="empty" v-if="!loading && users.length == 0">%i18n:desktop.tags.mk-user-recommendation-home-widget.no-one%</p>
+	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				border-bottom solid 1px #eee
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .user
+				padding 16px
+				border-bottom solid 1px #eee
+
+				&:last-child
+					border-bottom none
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				> .avatar-anchor
+					display block
+					float left
+					margin 0 12px 0 0
+
+					> .avatar
+						display block
+						width 42px
+						height 42px
+						margin 0
+						border-radius 8px
+						vertical-align bottom
+
+				> .body
+					float left
+					width calc(100% - 54px)
+
+					> .name
+						margin 0
+						font-size 16px
+						line-height 24px
+						color #555
+
+					> .username
+						display block
+						margin 0
+						font-size 15px
+						line-height 16px
+						color #ccc
+
+				> mk-follow-button
+					position absolute
+					top 16px
+					right 16px
+
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .loading
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.data = {
+			compact: false
+		};
+
+		this.mixin('widget');
+		this.mixin('user-preview');
+
+		this.users = null;
+		this.loading = true;
+
+		this.limit = 3;
+		this.page = 0;
+
+		this.on('mount', () => {
+			this.fetch();
+		});
+
+		this.fetch = () => {
+			this.update({
+				loading: true,
+				users: null
+			});
+			this.api('users/recommendation', {
+				limit: this.limit,
+				offset: this.limit * this.page
+			}).then(users => {
+				this.update({
+					loading: false,
+					users: users
+				});
+			});
+		};
+
+		this.refresh = () => {
+			if (this.users.length < this.limit) {
+				this.page = 0;
+			} else {
+				this.page++;
+			}
+			this.fetch();
+		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
+	</script>
+</mk-user-recommendation-home-widget>
diff --git a/src/web/app/desktop/-tags/home-widgets/version.tag b/src/web/app/desktop/-tags/home-widgets/version.tag
new file mode 100644
index 0000000000..6dd8ad6444
--- /dev/null
+++ b/src/web/app/desktop/-tags/home-widgets/version.tag
@@ -0,0 +1,20 @@
+<mk-version-home-widget>
+	<p>ver { _VERSION_ } (葵 aoi)</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow visible !important
+
+			> p
+				display block
+				margin 0
+				padding 0 12px
+				text-align center
+				font-size 0.7em
+				color #aaa
+
+	</style>
+	<script lang="typescript">
+		this.mixin('widget');
+	</script>
+</mk-version-home-widget>
diff --git a/src/web/app/desktop/-tags/images.tag b/src/web/app/desktop/-tags/images.tag
new file mode 100644
index 0000000000..1094e0d968
--- /dev/null
+++ b/src/web/app/desktop/-tags/images.tag
@@ -0,0 +1,172 @@
+<mk-images>
+	<template each={ image in images }>
+		<mk-images-image image={ image }/>
+	</template>
+	<style lang="stylus" scoped>
+		:scope
+			display grid
+			grid-gap 4px
+			height 256px
+	</style>
+	<script lang="typescript">
+		this.images = this.opts.images;
+
+		this.on('mount', () => {
+			if (this.images.length == 1) {
+				this.root.style.gridTemplateRows = '1fr';
+
+				this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 2) {
+				this.root.style.gridTemplateColumns = '1fr 1fr';
+				this.root.style.gridTemplateRows = '1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 3) {
+				this.root.style.gridTemplateColumns = '1fr 0.5fr';
+				this.root.style.gridTemplateRows = '1fr 1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+			} else if (this.images.length == 4) {
+				this.root.style.gridTemplateColumns = '1fr 1fr';
+				this.root.style.gridTemplateRows = '1fr 1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+				this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
+			}
+		});
+	</script>
+</mk-images>
+
+<mk-images-image>
+	<a ref="view"
+		href={ image.url }
+		onmousemove={ mousemove }
+		onmouseleave={ mouseleave }
+		style={ styles }
+		@click="click"
+		title={ image.name }></a>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow hidden
+			border-radius 4px
+
+			> a
+				display block
+				cursor zoom-in
+				overflow hidden
+				width 100%
+				height 100%
+				background-position center
+
+				&:not(:hover)
+					background-size cover
+
+	</style>
+	<script lang="typescript">
+		this.image = this.opts.image;
+		this.styles = {
+			'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
+			'background-image': `url(${this.image.url}?thumbnail&size=512)`
+		};
+
+		this.mousemove = e => {
+			const rect = this.$refs.view.getBoundingClientRect();
+			const mouseX = e.clientX - rect.left;
+			const mouseY = e.clientY - rect.top;
+			const xp = mouseX / this.$refs.view.offsetWidth * 100;
+			const yp = mouseY / this.$refs.view.offsetHeight * 100;
+			this.$refs.view.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.$refs.view.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
+		};
+
+		this.mouseleave = () => {
+			this.$refs.view.style.backgroundPosition = '';
+		};
+
+		this.click = ev => {
+			ev.preventDefault();
+			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
+				image: this.image
+			});
+			return false;
+		};
+	</script>
+</mk-images-image>
+
+<mk-image-dialog>
+	<div class="bg" ref="bg" @click="close"></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } @click="close"/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position fixed
+			z-index 2048
+			top 0
+			left 0
+			width 100%
+			height 100%
+			opacity 0
+
+			> .bg
+				display block
+				position fixed
+				z-index 1
+				top 0
+				left 0
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.7)
+
+			> img
+				position fixed
+				z-index 2
+				top 0
+				right 0
+				bottom 0
+				left 0
+				max-width 100%
+				max-height 100%
+				margin auto
+				cursor zoom-out
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.image = this.opts.image;
+
+		this.on('mount', () => {
+			anime({
+				targets: this.root,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+		});
+
+		this.close = () => {
+			anime({
+				targets: this.root,
+				opacity: 0,
+				duration: 100,
+				easing: 'linear',
+				complete: () => this.$destroy()
+			});
+		};
+	</script>
+</mk-image-dialog>
diff --git a/src/web/app/desktop/-tags/index.ts b/src/web/app/desktop/-tags/index.ts
new file mode 100644
index 0000000000..4edda83534
--- /dev/null
+++ b/src/web/app/desktop/-tags/index.ts
@@ -0,0 +1,89 @@
+require('./contextmenu.tag');
+require('./dialog.tag');
+require('./window.tag');
+require('./input-dialog.tag');
+require('./follow-button.tag');
+require('./drive/base-contextmenu.tag');
+require('./drive/file-contextmenu.tag');
+require('./drive/folder-contextmenu.tag');
+require('./drive/file.tag');
+require('./drive/folder.tag');
+require('./drive/nav-folder.tag');
+require('./drive/browser-window.tag');
+require('./drive/browser.tag');
+require('./select-file-from-drive-window.tag');
+require('./select-folder-from-drive-window.tag');
+require('./crop-window.tag');
+require('./settings.tag');
+require('./settings-window.tag');
+require('./analog-clock.tag');
+require('./notifications.tag');
+require('./post-form-window.tag');
+require('./post-form.tag');
+require('./post-preview.tag');
+require('./repost-form-window.tag');
+require('./home-widgets/user-recommendation.tag');
+require('./home-widgets/timeline.tag');
+require('./home-widgets/mentions.tag');
+require('./home-widgets/calendar.tag');
+require('./home-widgets/donation.tag');
+require('./home-widgets/tips.tag');
+require('./home-widgets/nav.tag');
+require('./home-widgets/profile.tag');
+require('./home-widgets/notifications.tag');
+require('./home-widgets/rss-reader.tag');
+require('./home-widgets/photo-stream.tag');
+require('./home-widgets/broadcast.tag');
+require('./home-widgets/version.tag');
+require('./home-widgets/recommended-polls.tag');
+require('./home-widgets/trends.tag');
+require('./home-widgets/activity.tag');
+require('./home-widgets/server.tag');
+require('./home-widgets/slideshow.tag');
+require('./home-widgets/channel.tag');
+require('./home-widgets/timemachine.tag');
+require('./home-widgets/post-form.tag');
+require('./home-widgets/access-log.tag');
+require('./home-widgets/messaging.tag');
+require('./timeline.tag');
+require('./messaging/window.tag');
+require('./messaging/room-window.tag');
+require('./following-setuper.tag');
+require('./ellipsis-icon.tag');
+require('./ui.tag');
+require('./home.tag');
+require('./user-timeline.tag');
+require('./user.tag');
+require('./big-follow-button.tag');
+require('./pages/entrance.tag');
+require('./pages/home.tag');
+require('./pages/home-customize.tag');
+require('./pages/user.tag');
+require('./pages/post.tag');
+require('./pages/search.tag');
+require('./pages/not-found.tag');
+require('./pages/selectdrive.tag');
+require('./pages/drive.tag');
+require('./pages/messaging-room.tag');
+require('./autocomplete-suggestion.tag');
+require('./progress-dialog.tag');
+require('./user-preview.tag');
+require('./post-detail.tag');
+require('./post-detail-sub.tag');
+require('./search.tag');
+require('./search-posts.tag');
+require('./set-avatar-suggestion.tag');
+require('./set-banner-suggestion.tag');
+require('./repost-form.tag');
+require('./sub-post-content.tag');
+require('./images.tag');
+require('./donation.tag');
+require('./users-list.tag');
+require('./user-following.tag');
+require('./user-followers.tag');
+require('./user-following-window.tag');
+require('./user-followers-window.tag');
+require('./list-user.tag');
+require('./detailed-post-window.tag');
+require('./widgets/calendar.tag');
+require('./widgets/activity.tag');
diff --git a/src/web/app/desktop/-tags/input-dialog.tag b/src/web/app/desktop/-tags/input-dialog.tag
new file mode 100644
index 0000000000..a1634429cf
--- /dev/null
+++ b/src/web/app/desktop/-tags/input-dialog.tag
@@ -0,0 +1,172 @@
+<mk-input-dialog>
+	<mk-window ref="window" is-modal={ true } width={ '500px' }>
+		<yield to="header">
+			%fa:i-cursor%{ parent.title }
+		</yield>
+		<yield to="content">
+			<div class="body">
+				<input ref="text" type={ parent.type } oninput={ parent.onInput } onkeydown={ parent.onKeydown } placeholder={ parent.placeholder }/>
+			</div>
+			<div class="action">
+				<button class="cancel" @click="parent.cancel">キャンセル</button>
+				<button class="ok" disabled={ !parent.allowEmpty && refs.text.value.length == 0 } @click="parent.ok">決定</button>
+			</div>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> mk-window
+				[data-yield='header']
+					> [data-fa]
+						margin-right 4px
+
+				[data-yield='content']
+					> .body
+						padding 16px
+
+						> input
+							display block
+							padding 8px
+							margin 0
+							width 100%
+							max-width 100%
+							min-width 100%
+							font-size 1em
+							color #333
+							background #fff
+							outline none
+							border solid 1px rgba($theme-color, 0.1)
+							border-radius 4px
+							transition border-color .3s ease
+
+							&:hover
+								border-color rgba($theme-color, 0.2)
+								transition border-color .1s ease
+
+							&:focus
+								color $theme-color
+								border-color rgba($theme-color, 0.5)
+								transition border-color 0s ease
+
+							&::-webkit-input-placeholder
+								color rgba($theme-color, 0.3)
+
+					> .action
+						height 72px
+						background lighten($theme-color, 95%)
+
+						.ok
+						.cancel
+							display block
+							position absolute
+							bottom 16px
+							cursor pointer
+							padding 0
+							margin 0
+							width 120px
+							height 40px
+							font-size 1em
+							outline none
+							border-radius 4px
+
+							&:focus
+								&:after
+									content ""
+									pointer-events none
+									position absolute
+									top -5px
+									right -5px
+									bottom -5px
+									left -5px
+									border 2px solid rgba($theme-color, 0.3)
+									border-radius 8px
+
+							&:disabled
+								opacity 0.7
+								cursor default
+
+						.ok
+							right 16px
+							color $theme-color-foreground
+							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+							border solid 1px lighten($theme-color, 15%)
+
+							&:not(:disabled)
+								font-weight bold
+
+							&:hover:not(:disabled)
+								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+								border-color $theme-color
+
+							&:active:not(:disabled)
+								background $theme-color
+								border-color $theme-color
+
+						.cancel
+							right 148px
+							color #888
+							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+							border solid 1px #e2e2e2
+
+							&:hover
+								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+								border-color #dcdcdc
+
+							&:active
+								background #ececec
+								border-color #dcdcdc
+
+	</style>
+	<script lang="typescript">
+		this.done = false;
+
+		this.title = this.opts.title;
+		this.placeholder = this.opts.placeholder;
+		this.default = this.opts.default;
+		this.allowEmpty = this.opts.allowEmpty != null ? this.opts.allowEmpty : true;
+		this.type = this.opts.type ? this.opts.type : 'text';
+
+		this.on('mount', () => {
+			this.text = this.$refs.window.refs.text;
+			if (this.default) this.text.value = this.default;
+			this.text.focus();
+
+			this.$refs.window.on('closing', () => {
+				if (this.done) {
+					this.opts.onOk(this.text.value);
+				} else {
+					if (this.opts.onCancel) this.opts.onCancel();
+				}
+			});
+
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+		});
+
+		this.cancel = () => {
+			this.done = false;
+			this.$refs.window.close();
+		};
+
+		this.ok = () => {
+			if (!this.allowEmpty && this.text.value == '') return;
+			this.done = true;
+			this.$refs.window.close();
+		};
+
+		this.onInput = () => {
+			this.update();
+		};
+
+		this.onKeydown = e => {
+			if (e.which == 13) { // Enter
+				e.preventDefault();
+				e.stopPropagation();
+				this.ok();
+			}
+		};
+	</script>
+</mk-input-dialog>
diff --git a/src/web/app/desktop/-tags/list-user.tag b/src/web/app/desktop/-tags/list-user.tag
new file mode 100644
index 0000000000..bde90b1cc6
--- /dev/null
+++ b/src/web/app/desktop/-tags/list-user.tag
@@ -0,0 +1,93 @@
+<mk-list-user>
+	<a class="avatar-anchor" href={ '/' + user.username }>
+		<img class="avatar" src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</a>
+	<div class="main">
+		<header>
+			<a class="name" href={ '/' + user.username }>{ user.name }</a>
+			<span class="username">@{ user.username }</span>
+		</header>
+		<div class="body">
+			<p class="followed" v-if="user.is_followed">フォローされています</p>
+			<div class="description">{ user.description }</div>
+		</div>
+	</div>
+	<mk-follow-button user={ user }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			margin 0
+			padding 16px
+			font-size 16px
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .avatar-anchor
+				display block
+				float left
+				margin 0 16px 0 0
+
+				> .avatar
+					display block
+					width 58px
+					height 58px
+					margin 0
+					border-radius 8px
+					vertical-align bottom
+
+			> .main
+				float left
+				width calc(100% - 74px)
+
+				> header
+					margin-bottom 2px
+
+					> .name
+						display inline
+						margin 0
+						padding 0
+						color #777
+						font-size 1em
+						font-weight 700
+						text-align left
+						text-decoration none
+
+						&:hover
+							text-decoration underline
+
+					> .username
+						text-align left
+						margin 0 0 0 8px
+						color #ccc
+
+				> .body
+					> .followed
+						display inline-block
+						margin 0 0 4px 0
+						padding 2px 8px
+						vertical-align top
+						font-size 10px
+						color #71afc7
+						background #eefaff
+						border-radius 4px
+
+					> .description
+						cursor default
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1.1em
+						color #717171
+
+			> mk-follow-button
+				position absolute
+				top 16px
+				right 16px
+
+	</style>
+	<script lang="typescript">this.user = this.opts.user</script>
+</mk-list-user>
diff --git a/src/web/app/desktop/-tags/messaging/room-window.tag b/src/web/app/desktop/-tags/messaging/room-window.tag
new file mode 100644
index 0000000000..ca11873644
--- /dev/null
+++ b/src/web/app/desktop/-tags/messaging/room-window.tag
@@ -0,0 +1,32 @@
+<mk-messaging-room-window>
+	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout={ popout }>
+		<yield to="header">%fa:comments%メッセージ: { parent.user.name }</yield>
+		<yield to="content">
+			<mk-messaging-room user={ parent.user }/>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> [data-fa]
+						margin-right 4px
+
+				[data-yield='content']
+					> mk-messaging-room
+						height 100%
+						overflow auto
+
+	</style>
+	<script lang="typescript">
+		this.user = this.opts.user;
+
+		this.popout = `${_URL_}/i/messaging/${this.user.username}`;
+
+		this.on('mount', () => {
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+		});
+	</script>
+</mk-messaging-room-window>
diff --git a/src/web/app/desktop/-tags/messaging/window.tag b/src/web/app/desktop/-tags/messaging/window.tag
new file mode 100644
index 0000000000..e078bccad7
--- /dev/null
+++ b/src/web/app/desktop/-tags/messaging/window.tag
@@ -0,0 +1,34 @@
+<mk-messaging-window>
+	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
+		<yield to="header">%fa:comments%メッセージ</yield>
+		<yield to="content">
+			<mk-messaging ref="index"/>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> [data-fa]
+						margin-right 4px
+
+				[data-yield='content']
+					> mk-messaging
+						height 100%
+						overflow auto
+
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+
+			this.$refs.window.refs.index.on('navigate-user', user => {
+				riot.mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
+					user: user
+				});
+			});
+		});
+	</script>
+</mk-messaging-window>
diff --git a/src/web/app/desktop/-tags/notifications.tag b/src/web/app/desktop/-tags/notifications.tag
new file mode 100644
index 0000000000..a599e5d6a5
--- /dev/null
+++ b/src/web/app/desktop/-tags/notifications.tag
@@ -0,0 +1,301 @@
+<mk-notifications>
+	<div class="notifications" v-if="notifications.length != 0">
+		<template each={ notification, i in notifications }>
+			<div class="notification { notification.type }">
+				<mk-time time={ notification.created_at }/>
+				<template v-if="notification.type == 'reaction'">
+					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
+						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
+					<div class="text">
+						<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
+						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
+						</a>
+					</div>
+				</template>
+				<template v-if="notification.type == 'repost'">
+					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
+					<div class="text">
+						<p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+							%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
+						</a>
+					</div>
+				</template>
+				<template v-if="notification.type == 'quote'">
+					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
+					<div class="text">
+						<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+					</div>
+				</template>
+				<template v-if="notification.type == 'follow'">
+					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
+						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
+					<div class="text">
+						<p>%fa:user-plus%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
+					</div>
+				</template>
+				<template v-if="notification.type == 'reply'">
+					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
+					<div class="text">
+						<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+					</div>
+				</template>
+				<template v-if="notification.type == 'mention'">
+					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
+					<div class="text">
+						<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+					</div>
+				</template>
+				<template v-if="notification.type == 'poll_vote'">
+					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
+						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
+					<div class="text">
+						<p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
+						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
+						</a>
+					</div>
+				</template>
+			</div>
+			<p class="date" v-if="i != notifications.length - 1 && notification._date != notifications[i + 1]._date">
+				<span>%fa:angle-up%{ notification._datetext }</span>
+				<span>%fa:angle-down%{ notifications[i + 1]._datetext }</span>
+			</p>
+		</template>
+	</div>
+	<button class="more { fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" disabled={ fetchingMoreNotifications }>
+		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
+	</button>
+	<p class="empty" v-if="notifications.length == 0 && !loading">ありません！</p>
+	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .notifications
+				> .notification
+					margin 0
+					padding 16px
+					overflow-wrap break-word
+					font-size 0.9em
+					border-bottom solid 1px rgba(0, 0, 0, 0.05)
+
+					&:last-child
+						border-bottom none
+
+					> mk-time
+						display inline
+						position absolute
+						top 16px
+						right 12px
+						vertical-align top
+						color rgba(0, 0, 0, 0.6)
+						font-size small
+
+					&:after
+						content ""
+						display block
+						clear both
+
+					> .avatar-anchor
+						display block
+						float left
+						position -webkit-sticky
+						position sticky
+						top 16px
+
+						> img
+							display block
+							min-width 36px
+							min-height 36px
+							max-width 36px
+							max-height 36px
+							border-radius 6px
+
+					> .text
+						float right
+						width calc(100% - 36px)
+						padding-left 8px
+
+						p
+							margin 0
+
+							i, mk-reaction-icon
+								margin-right 4px
+
+					.post-preview
+						color rgba(0, 0, 0, 0.7)
+
+					.post-ref
+						color rgba(0, 0, 0, 0.7)
+
+						[data-fa]
+							font-size 1em
+							font-weight normal
+							font-style normal
+							display inline-block
+							margin-right 3px
+
+					&.repost, &.quote
+						.text p i
+							color #77B255
+
+					&.follow
+						.text p i
+							color #53c7ce
+
+					&.reply, &.mention
+						.text p i
+							color #555
+
+				> .date
+					display block
+					margin 0
+					line-height 32px
+					text-align center
+					font-size 0.8em
+					color #aaa
+					background #fdfdfd
+					border-bottom solid 1px rgba(0, 0, 0, 0.05)
+
+					span
+						margin 0 16px
+
+					[data-fa]
+						margin-right 8px
+
+			> .more
+				display block
+				width 100%
+				padding 16px
+				color #555
+				border-top solid 1px rgba(0, 0, 0, 0.05)
+
+				&:hover
+					background rgba(0, 0, 0, 0.025)
+
+				&:active
+					background rgba(0, 0, 0, 0.05)
+
+				&.fetching
+					cursor wait
+
+				> [data-fa]
+					margin-right 4px
+
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .loading
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		import getPostSummary from '../../../../common/get-post-summary.ts';
+		this.getPostSummary = getPostSummary;
+
+		this.mixin('i');
+		this.mixin('api');
+		this.mixin('user-preview');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.notifications = [];
+		this.loading = true;
+
+		this.on('mount', () => {
+			const max = 10;
+
+			this.api('i/notifications', {
+				limit: max + 1
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				}
+
+				this.update({
+					loading: false,
+					notifications: notifications
+				});
+			});
+
+			this.connection.on('notification', this.onNotification);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('notification', this.onNotification);
+			this.stream.dispose(this.connectionId);
+		});
+
+		this.on('update', () => {
+			this.notifications.forEach(notification => {
+				const date = new Date(notification.created_at).getDate();
+				const month = new Date(notification.created_at).getMonth() + 1;
+				notification._date = date;
+				notification._datetext = `${month}月 ${date}日`;
+			});
+		});
+
+		this.onNotification = notification => {
+			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
+			this.connection.send({
+				type: 'read_notification',
+				id: notification.id
+			});
+
+			this.notifications.unshift(notification);
+			this.update();
+		};
+
+		this.fetchMoreNotifications = () => {
+			this.update({
+				fetchingMoreNotifications: true
+			});
+
+			const max = 30;
+
+			this.api('i/notifications', {
+				limit: max + 1,
+				until_id: this.notifications[this.notifications.length - 1].id
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				} else {
+					this.moreNotifications = false;
+				}
+				this.update({
+					notifications: this.notifications.concat(notifications),
+					fetchingMoreNotifications: false
+				});
+			});
+		};
+	</script>
+</mk-notifications>
diff --git a/src/web/app/desktop/-tags/pages/drive.tag b/src/web/app/desktop/-tags/pages/drive.tag
new file mode 100644
index 0000000000..f4e2a3740a
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/drive.tag
@@ -0,0 +1,37 @@
+<mk-drive-page>
+	<mk-drive-browser ref="browser" folder={ opts.folder }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position fixed
+			width 100%
+			height 100%
+			background #fff
+
+			> mk-drive-browser
+				height 100%
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			document.title = 'Misskey Drive';
+
+			this.$refs.browser.on('move-root', () => {
+				const title = 'Misskey Drive';
+
+				// Rewrite URL
+				history.pushState(null, title, '/i/drive');
+
+				document.title = title;
+			});
+
+			this.$refs.browser.on('open-folder', folder => {
+				const title = folder.name + ' | Misskey Drive';
+
+				// Rewrite URL
+				history.pushState(null, title, '/i/drive/folder/' + folder.id);
+
+				document.title = title;
+			});
+		});
+	</script>
+</mk-drive-page>
diff --git a/src/web/app/desktop/-tags/pages/entrance.tag b/src/web/app/desktop/-tags/pages/entrance.tag
new file mode 100644
index 0000000000..56cec34909
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/entrance.tag
@@ -0,0 +1,342 @@
+<mk-entrance>
+	<main>
+		<div>
+			<h1>どこにいても、ここにあります</h1>
+			<p>ようこそ！ MisskeyはTwitter風ミニブログSNSです――思ったこと、共有したいことをシンプルに書き残せます。タイムラインを見れば、皆の反応や皆がどう思っているのかもすぐにわかります。</p>
+			<p v-if="stats">これまでに{ stats.posts_count }投稿されました</p>
+		</div>
+		<div>
+			<mk-entrance-signin v-if="mode == 'signin'"/>
+			<mk-entrance-signup v-if="mode == 'signup'"/>
+			<div class="introduction" v-if="mode == 'introduction'">
+				<mk-introduction/>
+				<button @click="signin">わかった</button>
+			</div>
+		</div>
+	</main>
+	<mk-forkit/>
+	<footer>
+		<div>
+			<mk-nav-links/>
+			<p class="c">{ _COPYRIGHT_ }</p>
+		</div>
+	</footer>
+	<!-- ↓ https://github.com/riot/riot/issues/2134 (将来的)-->
+	<style data-disable-scope="data-disable-scope">
+		#wait {
+			right: auto;
+			left: 15px;
+		}
+	</style>
+	<style lang="stylus" scoped>
+		:scope
+			$width = 1000px
+
+			display block
+
+			&:before
+				content ""
+				display block
+				position fixed
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.3)
+
+			> main
+				display block
+				max-width $width
+				margin 0 auto
+				padding 64px 0 0 0
+				padding-bottom 16px
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				> div:first-child
+					position absolute
+					top 64px
+					left 0
+					width calc(100% - 500px)
+					color #fff
+					text-shadow 0 0 32px rgba(0, 0, 0, 0.5)
+					font-weight bold
+
+					> p:last-child
+						padding 1em 0 0 0
+						border-top solid 1px #fff
+
+				> div:last-child
+					float right
+
+					> .introduction
+						max-width 360px
+						margin 0 auto
+						color #777
+
+						> mk-introduction
+							padding 32px
+							background #fff
+							box-shadow 0 4px 16px rgba(0, 0, 0, 0.2)
+
+						> button
+							display block
+							margin 16px auto 0 auto
+							color #666
+
+							&:hover
+								text-decoration underline
+
+			> footer
+				*
+					color #fff !important
+					text-shadow 0 0 8px #000
+					font-weight bold
+
+				> div
+					max-width $width
+					margin 0 auto
+					padding 16px 0
+					text-align center
+					border-top solid 1px #fff
+
+					> .c
+						margin 0
+						line-height 64px
+						font-size 10px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.mode = 'signin';
+
+		this.on('mount', () => {
+			document.documentElement.style.backgroundColor = '#444';
+
+			this.api('meta').then(meta => {
+				const img = meta.top_image ? meta.top_image : '/assets/desktop/index.jpg';
+				document.documentElement.style.backgroundImage = `url("${ img }")`;
+				document.documentElement.style.backgroundSize = 'cover';
+				document.documentElement.style.backgroundPosition = 'center';
+			});
+
+			this.api('stats').then(stats => {
+				this.update({
+					stats
+				});
+			});
+		});
+
+		this.signup = () => {
+			this.update({
+				mode: 'signup'
+			});
+		};
+
+		this.signin = () => {
+			this.update({
+				mode: 'signin'
+			});
+		};
+
+		this.introduction = () => {
+			this.update({
+				mode: 'introduction'
+			});
+		};
+	</script>
+</mk-entrance>
+
+<mk-entrance-signin>
+	<a class="help" href={ _DOCS_URL_ + '/help' } title="お困りですか？">%fa:question%</a>
+	<div class="form">
+		<h1><img v-if="user" src={ user.avatar_url + '?thumbnail&size=32' }/>
+			<p>{ user ? user.name : 'アカウント' }</p>
+		</h1>
+		<mk-signin ref="signin"/>
+	</div>
+	<a href={ _API_URL_ + '/signin/twitter' }>Twitterでサインイン</a>
+	<div class="divider"><span>or</span></div>
+	<button class="signup" @click="parent.signup">新規登録</button><a class="introduction" @click="introduction">Misskeyについて</a>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 290px
+			margin 0 auto
+			text-align center
+
+			&:hover
+				> .help
+					opacity 1
+
+			> .help
+				cursor pointer
+				display block
+				position absolute
+				top 0
+				right 0
+				z-index 1
+				margin 0
+				padding 0
+				font-size 1.2em
+				color #999
+				border none
+				outline none
+				background transparent
+				opacity 0
+				transition opacity 0.1s ease
+
+				&:hover
+					color #444
+
+				&:active
+					color #222
+
+				> [data-fa]
+					padding 14px
+
+			> .form
+				padding 10px 28px 16px 28px
+				background #fff
+				box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
+
+				> h1
+					display block
+					margin 0
+					padding 0
+					height 54px
+					line-height 54px
+					text-align center
+					text-transform uppercase
+					font-size 1em
+					font-weight bold
+					color rgba(0, 0, 0, 0.5)
+					border-bottom solid 1px rgba(0, 0, 0, 0.1)
+
+					> p
+						display inline
+						margin 0
+						padding 0
+
+					> img
+						display inline-block
+						top 10px
+						width 32px
+						height 32px
+						margin-right 8px
+						border-radius 100%
+
+						&[src='']
+							display none
+
+			> .divider
+				padding 16px 0
+				text-align center
+
+				&:before
+				&:after
+					content ""
+					display block
+					position absolute
+					top 50%
+					width 45%
+					height 1px
+					border-top solid 1px rgba(0, 0, 0, 0.1)
+
+				&:before
+					left 0
+
+				&:after
+					right 0
+
+				> *
+					z-index 1
+					padding 0 8px
+					color #fff
+					text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
+
+			> .signup
+				width 100%
+				line-height 56px
+				font-size 1em
+				color #fff
+				background $theme-color
+				border-radius 64px
+
+				&:hover
+					background lighten($theme-color, 5%)
+
+				&:active
+					background darken($theme-color, 5%)
+
+			> .introduction
+				display inline-block
+				margin-top 16px
+				font-size 12px
+				color #666
+
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			this.$refs.signin.on('user', user => {
+				this.update({
+					user: user
+				});
+			});
+		});
+
+		this.introduction = () => {
+			this.parent.introduction();
+		};
+	</script>
+</mk-entrance-signin>
+
+<mk-entrance-signup>
+	<mk-signup/>
+	<button class="cancel" type="button" @click="parent.signin" title="キャンセル">%fa:times%</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 368px
+			margin 0 auto
+
+			&:hover
+				> .cancel
+					opacity 1
+
+			> mk-signup
+				padding 18px 32px 0 32px
+				background #fff
+				box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
+
+			> .cancel
+				cursor pointer
+				display block
+				position absolute
+				top 0
+				right 0
+				z-index 1
+				margin 0
+				padding 0
+				font-size 1.2em
+				color #999
+				border none
+				outline none
+				box-shadow none
+				background transparent
+				opacity 0
+				transition opacity 0.1s ease
+
+				&:hover
+					color #555
+
+				&:active
+					color #222
+
+				> [data-fa]
+					padding 14px
+
+	</style>
+</mk-entrance-signup>
diff --git a/src/web/app/desktop/-tags/pages/home-customize.tag b/src/web/app/desktop/-tags/pages/home-customize.tag
new file mode 100644
index 0000000000..178558f9d7
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/home-customize.tag
@@ -0,0 +1,12 @@
+<mk-home-customize-page>
+	<mk-home ref="home" mode="timeline" customize={ true }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			document.title = 'Misskey - ホームのカスタマイズ';
+		});
+	</script>
+</mk-home-customize-page>
diff --git a/src/web/app/desktop/-tags/pages/home.tag b/src/web/app/desktop/-tags/pages/home.tag
new file mode 100644
index 0000000000..9b9d455b5b
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/home.tag
@@ -0,0 +1,54 @@
+<mk-home-page>
+	<mk-ui ref="ui" page={ page }>
+		<mk-home ref="home" mode={ parent.opts.mode }/>
+	</mk-ui>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+	<script lang="typescript">
+		import Progress from '../../../common/scripts/loading';
+		import getPostSummary from '../../../../../common/get-post-summary.ts';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.unreadCount = 0;
+		this.page = this.opts.mode || 'timeline';
+
+		this.on('mount', () => {
+			this.$refs.ui.refs.home.on('loaded', () => {
+				Progress.done();
+			});
+			document.title = 'Misskey';
+			Progress.start();
+
+			this.connection.on('post', this.onStreamPost);
+			document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('post', this.onStreamPost);
+			this.stream.dispose(this.connectionId);
+			document.removeEventListener('visibilitychange', this.windowOnVisibilitychange);
+		});
+
+		this.onStreamPost = post => {
+			if (document.hidden && post.user_id != this.I.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
+			}
+		};
+
+		this.windowOnVisibilitychange = () => {
+			if (!document.hidden) {
+				this.unreadCount = 0;
+				document.title = 'Misskey';
+			}
+		};
+	</script>
+</mk-home-page>
diff --git a/src/web/app/desktop/-tags/pages/messaging-room.tag b/src/web/app/desktop/-tags/pages/messaging-room.tag
new file mode 100644
index 0000000000..bfa8c2465e
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/messaging-room.tag
@@ -0,0 +1,37 @@
+<mk-messaging-room-page>
+	<mk-messaging-room v-if="user" user={ user } is-naked={ true }/>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+
+	</style>
+	<script lang="typescript">
+		import Progress from '../../../common/scripts/loading';
+
+		this.mixin('api');
+
+		this.fetching = true;
+		this.user = null;
+
+		this.on('mount', () => {
+			Progress.start();
+
+			document.documentElement.style.background = '#fff';
+
+			this.api('users/show', {
+				username: this.opts.user
+			}).then(user => {
+				this.update({
+					fetching: false,
+					user: user
+				});
+
+				document.title = 'メッセージ: ' + this.user.name;
+
+				Progress.done();
+			});
+		});
+	</script>
+</mk-messaging-room-page>
diff --git a/src/web/app/desktop/-tags/pages/not-found.tag b/src/web/app/desktop/-tags/pages/not-found.tag
new file mode 100644
index 0000000000..f2b4ef09a9
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/not-found.tag
@@ -0,0 +1,11 @@
+<mk-not-found>
+	<mk-ui>
+		<main>
+			<h1>Not Found</h1>
+		</main>
+	</mk-ui>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+</mk-not-found>
diff --git a/src/web/app/desktop/-tags/pages/post.tag b/src/web/app/desktop/-tags/pages/post.tag
new file mode 100644
index 0000000000..488adc6e39
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/post.tag
@@ -0,0 +1,58 @@
+<mk-post-page>
+	<mk-ui ref="ui">
+		<main v-if="!parent.fetching">
+			<a v-if="parent.post.next" href={ parent.post.next }>%fa:angle-up%%i18n:desktop.tags.mk-post-page.next%</a>
+			<mk-post-detail ref="detail" post={ parent.post }/>
+			<a v-if="parent.post.prev" href={ parent.post.prev }>%fa:angle-down%%i18n:desktop.tags.mk-post-page.prev%</a>
+		</main>
+	</mk-ui>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			main
+				padding 16px
+				text-align center
+
+				> a
+					display inline-block
+
+					&:first-child
+						margin-bottom 4px
+
+					&:last-child
+						margin-top 4px
+
+					> [data-fa]
+						margin-right 4px
+
+				> mk-post-detail
+					margin 0 auto
+					width 640px
+
+	</style>
+	<script lang="typescript">
+		import Progress from '../../../common/scripts/loading';
+
+		this.mixin('api');
+
+		this.fetching = true;
+		this.post = null;
+
+		this.on('mount', () => {
+			Progress.start();
+
+			this.api('posts/show', {
+				post_id: this.opts.post
+			}).then(post => {
+
+				this.update({
+					fetching: false,
+					post: post
+				});
+
+				Progress.done();
+			});
+		});
+	</script>
+</mk-post-page>
diff --git a/src/web/app/desktop/-tags/pages/search.tag b/src/web/app/desktop/-tags/pages/search.tag
new file mode 100644
index 0000000000..eaa80a039c
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/search.tag
@@ -0,0 +1,20 @@
+<mk-search-page>
+	<mk-ui ref="ui">
+		<mk-search ref="search" query={ parent.opts.query }/>
+	</mk-ui>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+	<script lang="typescript">
+		import Progress from '../../../common/scripts/loading';
+
+		this.on('mount', () => {
+			Progress.start();
+
+			this.$refs.ui.refs.search.on('loaded', () => {
+				Progress.done();
+			});
+		});
+	</script>
+</mk-search-page>
diff --git a/src/web/app/desktop/-tags/pages/selectdrive.tag b/src/web/app/desktop/-tags/pages/selectdrive.tag
new file mode 100644
index 0000000000..dd4d30f412
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/selectdrive.tag
@@ -0,0 +1,161 @@
+<mk-selectdrive-page>
+	<mk-drive-browser ref="browser" multiple={ multiple }/>
+	<div>
+		<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" @click="upload">%fa:upload%</button>
+		<button class="cancel" @click="close">%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
+		<button class="ok" @click="ok">%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
+	</div>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position fixed
+			width 100%
+			height 100%
+			background #fff
+
+			> mk-drive-browser
+				height calc(100% - 72px)
+
+			> div
+				position fixed
+				bottom 0
+				left 0
+				width 100%
+				height 72px
+				background lighten($theme-color, 95%)
+
+				.upload
+					display inline-block
+					position absolute
+					top 8px
+					left 16px
+					cursor pointer
+					padding 0
+					margin 8px 4px 0 0
+					width 40px
+					height 40px
+					font-size 1em
+					color rgba($theme-color, 0.5)
+					background transparent
+					outline none
+					border solid 1px transparent
+					border-radius 4px
+
+					&:hover
+						background transparent
+						border-color rgba($theme-color, 0.3)
+
+					&:active
+						color rgba($theme-color, 0.6)
+						background transparent
+						border-color rgba($theme-color, 0.5)
+						box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+
+					&:focus
+						&:after
+							content ""
+							pointer-events none
+							position absolute
+							top -5px
+							right -5px
+							bottom -5px
+							left -5px
+							border 2px solid rgba($theme-color, 0.3)
+							border-radius 8px
+
+				.ok
+				.cancel
+					display block
+					position absolute
+					bottom 16px
+					cursor pointer
+					padding 0
+					margin 0
+					width 120px
+					height 40px
+					font-size 1em
+					outline none
+					border-radius 4px
+
+					&:focus
+						&:after
+							content ""
+							pointer-events none
+							position absolute
+							top -5px
+							right -5px
+							bottom -5px
+							left -5px
+							border 2px solid rgba($theme-color, 0.3)
+							border-radius 8px
+
+					&:disabled
+						opacity 0.7
+						cursor default
+
+				.ok
+					right 16px
+					color $theme-color-foreground
+					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+					border solid 1px lighten($theme-color, 15%)
+
+					&:not(:disabled)
+						font-weight bold
+
+					&:hover:not(:disabled)
+						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+						border-color $theme-color
+
+					&:active:not(:disabled)
+						background $theme-color
+						border-color $theme-color
+
+				.cancel
+					right 148px
+					color #888
+					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+					border solid 1px #e2e2e2
+
+					&:hover
+						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+						border-color #dcdcdc
+
+					&:active
+						background #ececec
+						border-color #dcdcdc
+
+	</style>
+	<script lang="typescript">
+		const q = (new URL(location)).searchParams;
+		this.multiple = q.get('multiple') == 'true' ? true : false;
+
+		this.on('mount', () => {
+			document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%';
+
+			this.$refs.browser.on('selected', file => {
+				this.files = [file];
+				this.ok();
+			});
+
+			this.$refs.browser.on('change-selection', files => {
+				this.update({
+					files: files
+				});
+			});
+		});
+
+		this.upload = () => {
+			this.$refs.browser.selectLocalFile();
+		};
+
+		this.close = () => {
+			window.close();
+		};
+
+		this.ok = () => {
+			window.opener.cb(this.multiple ? this.files : this.files[0]);
+			window.close();
+		};
+	</script>
+</mk-selectdrive-page>
diff --git a/src/web/app/desktop/-tags/pages/user.tag b/src/web/app/desktop/-tags/pages/user.tag
new file mode 100644
index 0000000000..abed2ef021
--- /dev/null
+++ b/src/web/app/desktop/-tags/pages/user.tag
@@ -0,0 +1,27 @@
+<mk-user-page>
+	<mk-ui ref="ui">
+		<mk-user ref="user" user={ parent.user } page={ parent.opts.page }/>
+	</mk-ui>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+	<script lang="typescript">
+		import Progress from '../../../common/scripts/loading';
+
+		this.user = this.opts.user;
+
+		this.on('mount', () => {
+			Progress.start();
+
+			this.$refs.ui.refs.user.on('user-fetched', user => {
+				Progress.set(0.5);
+				document.title = user.name + ' | Misskey';
+			});
+
+			this.$refs.ui.refs.user.on('loaded', () => {
+				Progress.done();
+			});
+		});
+	</script>
+</mk-user-page>
diff --git a/src/web/app/desktop/-tags/post-detail-sub.tag b/src/web/app/desktop/-tags/post-detail-sub.tag
new file mode 100644
index 0000000000..2088056700
--- /dev/null
+++ b/src/web/app/desktop/-tags/post-detail-sub.tag
@@ -0,0 +1,149 @@
+<mk-post-detail-sub title={ title }>
+	<a class="avatar-anchor" href={ '/' + post.user.username }>
+		<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ post.user_id }/>
+	</a>
+	<div class="main">
+		<header>
+			<div class="left">
+				<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>
+				<span class="username">@{ post.user.username }</span>
+			</div>
+			<div class="right">
+				<a class="time" href={ '/' + post.user.username + '/' + post.id }>
+					<mk-time time={ post.created_at }/>
+				</a>
+			</div>
+		</header>
+		<div class="body">
+			<div class="text" ref="text"></div>
+			<div class="media" v-if="post.media">
+				<mk-images images={ post.media }/>
+			</div>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			margin 0
+			padding 20px 32px
+			background #fdfdfd
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			&:hover
+				> .main > footer > button
+					color #888
+
+			> .avatar-anchor
+				display block
+				float left
+				margin 0 16px 0 0
+
+				> .avatar
+					display block
+					width 44px
+					height 44px
+					margin 0
+					border-radius 4px
+					vertical-align bottom
+
+			> .main
+				float left
+				width calc(100% - 60px)
+
+				> header
+					margin-bottom 4px
+					white-space nowrap
+
+					&:after
+						content ""
+						display block
+						clear both
+
+					> .left
+						float left
+
+						> .name
+							display inline
+							margin 0
+							padding 0
+							color #777
+							font-size 1em
+							font-weight 700
+							text-align left
+							text-decoration none
+
+							&:hover
+								text-decoration underline
+
+						> .username
+							text-align left
+							margin 0 0 0 8px
+							color #ccc
+
+					> .right
+						float right
+
+						> .time
+							font-size 0.9em
+							color #c0c0c0
+
+				> .body
+
+					> .text
+						cursor default
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1em
+						color #717171
+
+						> mk-url-preview
+							margin-top 8px
+
+	</style>
+	<script lang="typescript">
+		import compile from '../../common/scripts/text-compiler';
+		import dateStringify from '../../common/scripts/date-stringify';
+
+		this.mixin('api');
+		this.mixin('user-preview');
+
+		this.post = this.opts.post;
+		this.title = dateStringify(this.post.created_at);
+
+		this.on('mount', () => {
+			if (this.post.text) {
+				const tokens = this.post.ast;
+
+				this.$refs.text.innerHTML = compile(tokens);
+
+				Array.from(this.$refs.text.children).forEach(e => {
+					if (e.tagName == 'MK-URL') riot.mount(e);
+				});
+			}
+		});
+
+		this.like = () => {
+			if (this.post.is_liked) {
+				this.api('posts/likes/delete', {
+					post_id: this.post.id
+				}).then(() => {
+					this.post.is_liked = false;
+					this.update();
+				});
+			} else {
+				this.api('posts/likes/create', {
+					post_id: this.post.id
+				}).then(() => {
+					this.post.is_liked = true;
+					this.update();
+				});
+			}
+		};
+	</script>
+</mk-post-detail-sub>
diff --git a/src/web/app/desktop/-tags/post-detail.tag b/src/web/app/desktop/-tags/post-detail.tag
new file mode 100644
index 0000000000..5f35ce6afa
--- /dev/null
+++ b/src/web/app/desktop/-tags/post-detail.tag
@@ -0,0 +1,328 @@
+<mk-post-detail title={ title }>
+	<div class="main">
+		<button class="read-more" v-if="p.reply && p.reply.reply_id && context == null" title="会話をもっと読み込む" @click="loadContext" disabled={ contextFetching }>
+			<template v-if="!contextFetching">%fa:ellipsis-v%</template>
+			<template v-if="contextFetching">%fa:spinner .pulse%</template>
+		</button>
+		<div class="context">
+			<template each={ post in context }>
+				<mk-post-detail-sub post={ post }/>
+			</template>
+		</div>
+		<div class="reply-to" v-if="p.reply">
+			<mk-post-detail-sub post={ p.reply }/>
+		</div>
+		<div class="repost" v-if="isRepost">
+			<p>
+				<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
+					<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
+				</a>
+				%fa:retweet%<a class="name" href={ '/' + post.user.username }>
+				{ post.user.name }
+			</a>
+			がRepost
+		</p>
+		</div>
+		<article>
+			<a class="avatar-anchor" href={ '/' + p.user.username }>
+				<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ p.user.id }/>
+			</a>
+			<header>
+				<a class="name" href={ '/' + p.user.username } data-user-preview={ p.user.id }>{ p.user.name }</a>
+				<span class="username">@{ p.user.username }</span>
+				<a class="time" href={ '/' + p.user.username + '/' + p.id }>
+					<mk-time time={ p.created_at }/>
+				</a>
+			</header>
+			<div class="body">
+				<div class="text" ref="text"></div>
+				<div class="media" v-if="p.media">
+					<mk-images images={ p.media }/>
+				</div>
+				<mk-poll v-if="p.poll" post={ p }/>
+			</div>
+			<footer>
+				<mk-reactions-viewer post={ p }/>
+				<button @click="reply" title="返信">
+					%fa:reply%<p class="count" v-if="p.replies_count > 0">{ p.replies_count }</p>
+				</button>
+				<button @click="repost" title="Repost">
+					%fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p>
+				</button>
+				<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="リアクション">
+					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p>
+				</button>
+				<button @click="menu" ref="menuButton">
+					%fa:ellipsis-h%
+				</button>
+			</footer>
+		</article>
+		<div class="replies" v-if="!compact">
+			<template each={ post in replies }>
+				<mk-post-detail-sub post={ post }/>
+			</template>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			margin 0
+			padding 0
+			overflow hidden
+			text-align left
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.1)
+			border-radius 8px
+
+			> .main
+
+				> .read-more
+					display block
+					margin 0
+					padding 10px 0
+					width 100%
+					font-size 1em
+					text-align center
+					color #999
+					cursor pointer
+					background #fafafa
+					outline none
+					border none
+					border-bottom solid 1px #eef0f2
+					border-radius 6px 6px 0 0
+
+					&:hover
+						background #f6f6f6
+
+					&:active
+						background #f0f0f0
+
+					&:disabled
+						color #ccc
+
+				> .context
+					> *
+						border-bottom 1px solid #eef0f2
+
+				> .repost
+					color #9dbb00
+					background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+					> p
+						margin 0
+						padding 16px 32px
+
+						.avatar-anchor
+							display inline-block
+
+							.avatar
+								vertical-align bottom
+								min-width 28px
+								min-height 28px
+								max-width 28px
+								max-height 28px
+								margin 0 8px 0 0
+								border-radius 6px
+
+						[data-fa]
+							margin-right 4px
+
+						.name
+							font-weight bold
+
+					& + article
+						padding-top 8px
+
+				> .reply-to
+					border-bottom 1px solid #eef0f2
+
+				> article
+					padding 28px 32px 18px 32px
+
+					&:after
+						content ""
+						display block
+						clear both
+
+					&:hover
+						> .main > footer > button
+							color #888
+
+					> .avatar-anchor
+						display block
+						width 60px
+						height 60px
+
+						> .avatar
+							display block
+							width 60px
+							height 60px
+							margin 0
+							border-radius 8px
+							vertical-align bottom
+
+					> header
+						position absolute
+						top 28px
+						left 108px
+						width calc(100% - 108px)
+
+						> .name
+							display inline-block
+							margin 0
+							line-height 24px
+							color #777
+							font-size 18px
+							font-weight 700
+							text-align left
+							text-decoration none
+
+							&:hover
+								text-decoration underline
+
+						> .username
+							display block
+							text-align left
+							margin 0
+							color #ccc
+
+						> .time
+							position absolute
+							top 0
+							right 32px
+							font-size 1em
+							color #c0c0c0
+
+					> .body
+						padding 8px 0
+
+						> .text
+							cursor default
+							display block
+							margin 0
+							padding 0
+							overflow-wrap break-word
+							font-size 1.5em
+							color #717171
+
+							> mk-url-preview
+								margin-top 8px
+
+					> footer
+						font-size 1.2em
+
+						> button
+							margin 0 28px 0 0
+							padding 8px
+							background transparent
+							border none
+							font-size 1em
+							color #ddd
+							cursor pointer
+
+							&:hover
+								color #666
+
+							> .count
+								display inline
+								margin 0 0 0 8px
+								color #999
+
+							&.reacted
+								color $theme-color
+
+				> .replies
+					> *
+						border-top 1px solid #eef0f2
+
+	</style>
+	<script lang="typescript">
+		import compile from '../../common/scripts/text-compiler';
+		import dateStringify from '../../common/scripts/date-stringify';
+
+		this.mixin('api');
+		this.mixin('user-preview');
+
+		this.compact = this.opts.compact;
+		this.contextFetching = false;
+		this.context = null;
+		this.post = this.opts.post;
+		this.isRepost = this.post.repost != null;
+		this.p = this.isRepost ? this.post.repost : this.post;
+		this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
+		this.title = dateStringify(this.p.created_at);
+
+		this.on('mount', () => {
+			if (this.p.text) {
+				const tokens = this.p.ast;
+
+				this.$refs.text.innerHTML = compile(tokens);
+
+				Array.from(this.$refs.text.children).forEach(e => {
+					if (e.tagName == 'MK-URL') riot.mount(e);
+				});
+
+				// URLをプレビュー
+				tokens
+				.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+				.map(t => {
+					riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
+						url: t.url
+					});
+				});
+			}
+
+			// Get replies
+			if (!this.compact) {
+				this.api('posts/replies', {
+					post_id: this.p.id,
+					limit: 8
+				}).then(replies => {
+					this.update({
+						replies: replies
+					});
+				});
+			}
+		});
+
+		this.reply = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
+				reply: this.p
+			});
+		};
+
+		this.repost = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-repost-form-window')), {
+				post: this.p
+			});
+		};
+
+		this.react = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
+				source: this.$refs.reactButton,
+				post: this.p
+			});
+		};
+
+		this.menu = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-post-menu')), {
+				source: this.$refs.menuButton,
+				post: this.p
+			});
+		};
+
+		this.loadContext = () => {
+			this.contextFetching = true;
+
+			// Fetch context
+			this.api('posts/context', {
+				post_id: this.p.reply_id
+			}).then(context => {
+				this.update({
+					contextFetching: false,
+					context: context.reverse()
+				});
+			});
+		};
+	</script>
+</mk-post-detail>
diff --git a/src/web/app/desktop/-tags/post-form-window.tag b/src/web/app/desktop/-tags/post-form-window.tag
new file mode 100644
index 0000000000..562621bde2
--- /dev/null
+++ b/src/web/app/desktop/-tags/post-form-window.tag
@@ -0,0 +1,68 @@
+<mk-post-form-window>
+	<mk-window ref="window" is-modal={ true }>
+		<yield to="header">
+			<span v-if="!parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.post%</span>
+			<span v-if="parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.reply%</span>
+			<span class="files" v-if="parent.files.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.attaches%'.replace('{}', parent.files.length) }</span>
+			<span class="uploading-files" v-if="parent.uploadingFiles.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.uploading-media%'.replace('{}', parent.uploadingFiles.length) }<mk-ellipsis/></span>
+		</yield>
+		<yield to="content">
+			<div class="ref" v-if="parent.opts.reply">
+				<mk-post-preview post={ parent.opts.reply }/>
+			</div>
+			<div class="body">
+				<mk-post-form ref="form" reply={ parent.opts.reply }/>
+			</div>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+
+				[data-yield='header']
+					> .files
+					> .uploading-files
+						margin-left 8px
+						opacity 0.8
+
+						&:before
+							content '('
+
+						&:after
+							content ')'
+
+				[data-yield='content']
+					> .ref
+						> mk-post-preview
+							margin 16px 22px
+
+	</style>
+	<script lang="typescript">
+		this.uploadingFiles = [];
+		this.files = [];
+
+		this.on('mount', () => {
+			this.$refs.window.refs.form.focus();
+
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+
+			this.$refs.window.refs.form.on('post', () => {
+				this.$refs.window.close();
+			});
+
+			this.$refs.window.refs.form.on('change-uploading-files', files => {
+				this.update({
+					uploadingFiles: files || []
+				});
+			});
+
+			this.$refs.window.refs.form.on('change-files', files => {
+				this.update({
+					files: files || []
+				});
+			});
+		});
+	</script>
+</mk-post-form-window>
diff --git a/src/web/app/desktop/-tags/post-form.tag b/src/web/app/desktop/-tags/post-form.tag
new file mode 100644
index 0000000000..ddbb485d99
--- /dev/null
+++ b/src/web/app/desktop/-tags/post-form.tag
@@ -0,0 +1,540 @@
+<mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
+	<div class="content">
+		<textarea :class="{ with: (files.length != 0 || poll) }" ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea>
+		<div class="medias { with: poll }" show={ files.length != 0 }>
+			<ul ref="media">
+				<li each={ files } data-id={ id }>
+					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
+					<img class="remove" @click="removeFile" src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
+				</li>
+			</ul>
+			<p class="remain">{ 4 - files.length }/4</p>
+		</div>
+		<mk-poll-editor v-if="poll" ref="poll" ondestroy={ onPollDestroyed }/>
+	</div>
+	<mk-uploader ref="uploader"/>
+	<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="selectFile">%fa:upload%</button>
+	<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" @click="selectFileFromDrive">%fa:cloud%</button>
+	<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</button>
+	<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="addPoll">%fa:chart-pie%</button>
+	<p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p>
+	<button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } @click="post">
+		{ wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis v-if="wait"/>
+	</button>
+	<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" onchange={ changeFile }/>
+	<div class="dropzone" v-if="draghover"></div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 16px
+			background lighten($theme-color, 95%)
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .content
+
+				[ref='text']
+					display block
+					padding 12px
+					margin 0
+					width 100%
+					max-width 100%
+					min-width 100%
+					min-height calc(16px + 12px + 12px)
+					font-size 16px
+					color #333
+					background #fff
+					outline none
+					border solid 1px rgba($theme-color, 0.1)
+					border-radius 4px
+					transition border-color .3s ease
+
+					&:hover
+						border-color rgba($theme-color, 0.2)
+						transition border-color .1s ease
+
+						& + *
+						& + * + *
+							border-color rgba($theme-color, 0.2)
+							transition border-color .1s ease
+
+					&:focus
+						color $theme-color
+						border-color rgba($theme-color, 0.5)
+						transition border-color 0s ease
+
+						& + *
+						& + * + *
+							border-color rgba($theme-color, 0.5)
+							transition border-color 0s ease
+
+					&:disabled
+						opacity 0.5
+
+					&::-webkit-input-placeholder
+						color rgba($theme-color, 0.3)
+
+					&.with
+						border-bottom solid 1px rgba($theme-color, 0.1) !important
+						border-radius 4px 4px 0 0
+
+				> .medias
+					margin 0
+					padding 0
+					background lighten($theme-color, 98%)
+					border solid 1px rgba($theme-color, 0.1)
+					border-top none
+					border-radius 0 0 4px 4px
+					transition border-color .3s ease
+
+					&.with
+						border-bottom solid 1px rgba($theme-color, 0.1) !important
+						border-radius 0
+
+					> .remain
+						display block
+						position absolute
+						top 8px
+						right 8px
+						margin 0
+						padding 0
+						color rgba($theme-color, 0.4)
+
+					> ul
+						display block
+						margin 0
+						padding 4px
+						list-style none
+
+						&:after
+							content ""
+							display block
+							clear both
+
+						> li
+							display block
+							float left
+							margin 0
+							padding 0
+							border solid 4px transparent
+							cursor move
+
+							&:hover > .remove
+								display block
+
+							> .img
+								width 64px
+								height 64px
+								background-size cover
+								background-position center center
+
+							> .remove
+								display none
+								position absolute
+								top -6px
+								right -6px
+								width 16px
+								height 16px
+								cursor pointer
+
+				> mk-poll-editor
+					background lighten($theme-color, 98%)
+					border solid 1px rgba($theme-color, 0.1)
+					border-top none
+					border-radius 0 0 4px 4px
+					transition border-color .3s ease
+
+			> mk-uploader
+				margin 8px 0 0 0
+				padding 8px
+				border solid 1px rgba($theme-color, 0.2)
+				border-radius 4px
+
+			[ref='file']
+				display none
+
+			.text-count
+				pointer-events none
+				display block
+				position absolute
+				bottom 16px
+				right 138px
+				margin 0
+				line-height 40px
+				color rgba($theme-color, 0.5)
+
+				&.over
+					color #ec3828
+
+			[ref='submit']
+				display block
+				position absolute
+				bottom 16px
+				right 16px
+				cursor pointer
+				padding 0
+				margin 0
+				width 110px
+				height 40px
+				font-size 1em
+				color $theme-color-foreground
+				background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+				outline none
+				border solid 1px lighten($theme-color, 15%)
+				border-radius 4px
+
+				&:not(:disabled)
+					font-weight bold
+
+				&:hover:not(:disabled)
+					background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+					border-color $theme-color
+
+				&:active:not(:disabled)
+					background $theme-color
+					border-color $theme-color
+
+				&:focus
+					&:after
+						content ""
+						pointer-events none
+						position absolute
+						top -5px
+						right -5px
+						bottom -5px
+						left -5px
+						border 2px solid rgba($theme-color, 0.3)
+						border-radius 8px
+
+				&:disabled
+					opacity 0.7
+					cursor default
+
+				&.wait
+					background linear-gradient(
+						45deg,
+						darken($theme-color, 10%) 25%,
+						$theme-color              25%,
+						$theme-color              50%,
+						darken($theme-color, 10%) 50%,
+						darken($theme-color, 10%) 75%,
+						$theme-color              75%,
+						$theme-color
+					)
+					background-size 32px 32px
+					animation stripe-bg 1.5s linear infinite
+					opacity 0.7
+					cursor wait
+
+					@keyframes stripe-bg
+						from {background-position: 0 0;}
+						to   {background-position: -64px 32px;}
+
+			[ref='upload']
+			[ref='drive']
+			.kao
+			.poll
+				display inline-block
+				cursor pointer
+				padding 0
+				margin 8px 4px 0 0
+				width 40px
+				height 40px
+				font-size 1em
+				color rgba($theme-color, 0.5)
+				background transparent
+				outline none
+				border solid 1px transparent
+				border-radius 4px
+
+				&:hover
+					background transparent
+					border-color rgba($theme-color, 0.3)
+
+				&:active
+					color rgba($theme-color, 0.6)
+					background linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
+					border-color rgba($theme-color, 0.5)
+					box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset
+
+				&:focus
+					&:after
+						content ""
+						pointer-events none
+						position absolute
+						top -5px
+						right -5px
+						bottom -5px
+						left -5px
+						border 2px solid rgba($theme-color, 0.3)
+						border-radius 8px
+
+			> .dropzone
+				position absolute
+				left 0
+				top 0
+				width 100%
+				height 100%
+				border dashed 2px rgba($theme-color, 0.5)
+				pointer-events none
+
+	</style>
+	<script lang="typescript">
+		import Sortable from 'sortablejs';
+		import getKao from '../../common/scripts/get-kao';
+		import notify from '../scripts/notify';
+		import Autocomplete from '../scripts/autocomplete';
+
+		this.mixin('api');
+
+		this.wait = false;
+		this.uploadings = [];
+		this.files = [];
+		this.autocomplete = null;
+		this.poll = false;
+
+		this.inReplyToPost = this.opts.reply;
+
+		this.repost = this.opts.repost;
+
+		this.placeholder = this.repost
+			? '%i18n:desktop.tags.mk-post-form.quote-placeholder%'
+			: this.inReplyToPost
+				? '%i18n:desktop.tags.mk-post-form.reply-placeholder%'
+				: '%i18n:desktop.tags.mk-post-form.post-placeholder%';
+
+		this.submitText = this.repost
+			? '%i18n:desktop.tags.mk-post-form.repost%'
+			: this.inReplyToPost
+				? '%i18n:desktop.tags.mk-post-form.reply%'
+				: '%i18n:desktop.tags.mk-post-form.post%';
+
+		this.draftId = this.repost
+			? 'repost:' + this.repost.id
+			: this.inReplyToPost
+				? 'reply:' + this.inReplyToPost.id
+				: 'post';
+
+		this.on('mount', () => {
+			this.$refs.uploader.on('uploaded', file => {
+				this.addFile(file);
+			});
+
+			this.$refs.uploader.on('change-uploads', uploads => {
+				this.$emit('change-uploading-files', uploads);
+			});
+
+			this.autocomplete = new Autocomplete(this.$refs.text);
+			this.autocomplete.attach();
+
+			// 書きかけの投稿を復元
+			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
+			if (draft) {
+				this.$refs.text.value = draft.data.text;
+				this.files = draft.data.files;
+				if (draft.data.poll) {
+					this.poll = true;
+					this.update();
+					this.$refs.poll.set(draft.data.poll);
+				}
+				this.$emit('change-files', this.files);
+				this.update();
+			}
+
+			new Sortable(this.$refs.media, {
+				animation: 150
+			});
+		});
+
+		this.on('unmount', () => {
+			this.autocomplete.detach();
+		});
+
+		this.focus = () => {
+			this.$refs.text.focus();
+		};
+
+		this.clear = () => {
+			this.$refs.text.value = '';
+			this.files = [];
+			this.poll = false;
+			this.$emit('change-files');
+			this.update();
+		};
+
+		this.ondragover = e => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.draghover = true;
+			e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+		};
+
+		this.ondragenter = e => {
+			this.draghover = true;
+		};
+
+		this.ondragleave = e => {
+			this.draghover = false;
+		};
+
+		this.ondrop = e => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(this.upload);
+				return;
+			}
+
+			// データ取得
+			const data = e.dataTransfer.getData('text');
+			if (data == null) return false;
+
+			try {
+				// パース
+				const obj = JSON.parse(data);
+
+				// (ドライブの)ファイルだったら
+				if (obj.type == 'file') {
+					this.files.push(obj.file);
+					this.update();
+				}
+			} catch (e) {
+
+			}
+		};
+
+		this.onkeydown = e => {
+			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
+		};
+
+		this.onpaste = e => {
+			Array.from(e.clipboardData.items).forEach(item => {
+				if (item.kind == 'file') {
+					this.upload(item.getAsFile());
+				}
+			});
+		};
+
+		this.selectFile = () => {
+			this.$refs.file.click();
+		};
+
+		this.selectFileFromDrive = () => {
+			const i = riot.mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), {
+				multiple: true
+			})[0];
+			i.one('selected', files => {
+				files.forEach(this.addFile);
+			});
+		};
+
+		this.changeFile = () => {
+			Array.from(this.$refs.file.files).forEach(this.upload);
+		};
+
+		this.upload = file => {
+			this.$refs.uploader.upload(file);
+		};
+
+		this.addFile = file => {
+			this.files.push(file);
+			this.$emit('change-files', this.files);
+			this.update();
+		};
+
+		this.removeFile = e => {
+			const file = e.item;
+			this.files = this.files.filter(x => x.id != file.id);
+			this.$emit('change-files', this.files);
+			this.update();
+		};
+
+		this.addPoll = () => {
+			this.poll = true;
+		};
+
+		this.onPollDestroyed = () => {
+			this.update({
+				poll: false
+			});
+		};
+
+		this.post = e => {
+			this.wait = true;
+
+			const files = [];
+
+			if (this.files.length > 0) {
+				Array.from(this.$refs.media.children).forEach(el => {
+					const id = el.getAttribute('data-id');
+					const file = this.files.find(f => f.id == id);
+					files.push(file);
+				});
+			}
+
+			this.api('posts/create', {
+				text: this.$refs.text.value == '' ? undefined : this.$refs.text.value,
+				media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined,
+				reply_id: this.inReplyToPost ? this.inReplyToPost.id : undefined,
+				repost_id: this.repost ? this.repost.id : undefined,
+				poll: this.poll ? this.$refs.poll.get() : undefined
+			}).then(data => {
+				this.clear();
+				this.removeDraft();
+				this.$emit('post');
+				notify(this.repost
+					? '%i18n:desktop.tags.mk-post-form.reposted%'
+					: this.inReplyToPost
+						? '%i18n:desktop.tags.mk-post-form.replied%'
+						: '%i18n:desktop.tags.mk-post-form.posted%');
+			}).catch(err => {
+				notify(this.repost
+					? '%i18n:desktop.tags.mk-post-form.repost-failed%'
+					: this.inReplyToPost
+						? '%i18n:desktop.tags.mk-post-form.reply-failed%'
+						: '%i18n:desktop.tags.mk-post-form.post-failed%');
+			}).then(() => {
+				this.update({
+					wait: false
+				});
+			});
+		};
+
+		this.kao = () => {
+			this.$refs.text.value += getKao();
+		};
+
+		this.on('update', () => {
+			this.saveDraft();
+		});
+
+		this.saveDraft = () => {
+			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+			data[this.draftId] = {
+				updated_at: new Date(),
+				data: {
+					text: this.$refs.text.value,
+					files: this.files,
+					poll: this.poll && this.$refs.poll ? this.$refs.poll.get() : undefined
+				}
+			}
+
+			localStorage.setItem('drafts', JSON.stringify(data));
+		};
+
+		this.removeDraft = () => {
+			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+			delete data[this.draftId];
+
+			localStorage.setItem('drafts', JSON.stringify(data));
+		};
+	</script>
+</mk-post-form>
diff --git a/src/web/app/desktop/-tags/post-preview.tag b/src/web/app/desktop/-tags/post-preview.tag
new file mode 100644
index 0000000000..eb71e5e879
--- /dev/null
+++ b/src/web/app/desktop/-tags/post-preview.tag
@@ -0,0 +1,94 @@
+<mk-post-preview title={ title }>
+	<article><a class="avatar-anchor" href={ '/' + post.user.username }><img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ post.user_id }/></a>
+		<div class="main">
+			<header><a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a><span class="username">@{ post.user.username }</span><a class="time" href={ '/' + post.user.username + '/' + post.id }>
+					<mk-time time={ post.created_at }/></a></header>
+			<div class="body">
+				<mk-sub-post-content class="text" post={ post }/>
+			</div>
+		</div>
+	</article>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			margin 0
+			padding 0
+			font-size 0.9em
+			background #fff
+
+			> article
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				&:hover
+					> .main > footer > button
+						color #888
+
+				> .avatar-anchor
+					display block
+					float left
+					margin 0 16px 0 0
+
+					> .avatar
+						display block
+						width 52px
+						height 52px
+						margin 0
+						border-radius 8px
+						vertical-align bottom
+
+				> .main
+					float left
+					width calc(100% - 68px)
+
+					> header
+						display flex
+						margin 4px 0
+						white-space nowrap
+
+						> .name
+							margin 0 .5em 0 0
+							padding 0
+							color #607073
+							font-size 1em
+							line-height 1.1em
+							font-weight 700
+							text-align left
+							text-decoration none
+							white-space normal
+
+							&:hover
+								text-decoration underline
+
+						> .username
+							text-align left
+							margin 0 .5em 0 0
+							color #d1d8da
+
+						> .time
+							margin-left auto
+							color #b2b8bb
+
+					> .body
+
+						> .text
+							cursor default
+							margin 0
+							padding 0
+							font-size 1.1em
+							color #717171
+
+	</style>
+	<script lang="typescript">
+		import dateStringify from '../../common/scripts/date-stringify';
+
+		this.mixin('user-preview');
+
+		this.post = this.opts.post;
+
+		this.title = dateStringify(this.post.created_at);
+	</script>
+</mk-post-preview>
diff --git a/src/web/app/desktop/-tags/progress-dialog.tag b/src/web/app/desktop/-tags/progress-dialog.tag
new file mode 100644
index 0000000000..5df5d7f57a
--- /dev/null
+++ b/src/web/app/desktop/-tags/progress-dialog.tag
@@ -0,0 +1,97 @@
+<mk-progress-dialog>
+	<mk-window ref="window" is-modal={ false } can-close={ false } width={ '500px' }>
+		<yield to="header">{ parent.title }<mk-ellipsis/></yield>
+		<yield to="content">
+			<div class="body">
+				<p class="init" v-if="isNaN(parent.value)">待機中<mk-ellipsis/></p>
+				<p class="percentage" v-if="!isNaN(parent.value)">{ Math.floor((parent.value / parent.max) * 100) }</p>
+				<progress v-if="!isNaN(parent.value) && parent.value < parent.max" value={ isNaN(parent.value) ? 0 : parent.value } max={ parent.max }></progress>
+				<div class="progress waiting" v-if="parent.value >= parent.max"></div>
+			</div>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> mk-window
+				[data-yield='content']
+
+					> .body
+						padding 18px 24px 24px 24px
+
+						> .init
+							display block
+							margin 0
+							text-align center
+							color rgba(#000, 0.7)
+
+						> .percentage
+							display block
+							margin 0 0 4px 0
+							text-align center
+							line-height 16px
+							color rgba($theme-color, 0.7)
+
+							&:after
+								content '%'
+
+						> progress
+						> .progress
+							display block
+							margin 0
+							width 100%
+							height 10px
+							background transparent
+							border none
+							border-radius 4px
+							overflow hidden
+
+							&::-webkit-progress-value
+								background $theme-color
+
+							&::-webkit-progress-bar
+								background rgba($theme-color, 0.1)
+
+						> .progress
+							background linear-gradient(
+								45deg,
+								lighten($theme-color, 30%) 25%,
+								$theme-color               25%,
+								$theme-color               50%,
+								lighten($theme-color, 30%) 50%,
+								lighten($theme-color, 30%) 75%,
+								$theme-color               75%,
+								$theme-color
+							)
+							background-size 32px 32px
+							animation progress-dialog-tag-progress-waiting 1.5s linear infinite
+
+							@keyframes progress-dialog-tag-progress-waiting
+								from {background-position: 0 0;}
+								to   {background-position: -64px 32px;}
+
+	</style>
+	<script lang="typescript">
+		this.title = this.opts.title;
+		this.value = parseInt(this.opts.value, 10);
+		this.max = parseInt(this.opts.max, 10);
+
+		this.on('mount', () => {
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+		});
+
+		this.updateProgress = (value, max) => {
+			this.update({
+				value: parseInt(value, 10),
+				max: parseInt(max, 10)
+			});
+		};
+
+		this.close = () => {
+			this.$refs.window.close();
+		};
+	</script>
+</mk-progress-dialog>
diff --git a/src/web/app/desktop/-tags/repost-form-window.tag b/src/web/app/desktop/-tags/repost-form-window.tag
new file mode 100644
index 0000000000..25f509c626
--- /dev/null
+++ b/src/web/app/desktop/-tags/repost-form-window.tag
@@ -0,0 +1,47 @@
+<mk-repost-form-window>
+	<mk-window ref="window" is-modal={ true }>
+		<yield to="header">
+			%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%
+		</yield>
+		<yield to="content">
+			<mk-repost-form ref="form" post={ parent.opts.post }/>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> [data-fa]
+						margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.onDocumentKeydown = e => {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 27) { // Esc
+					this.$refs.window.close();
+				}
+			}
+		};
+
+		this.on('mount', () => {
+			this.$refs.window.refs.form.on('cancel', () => {
+				this.$refs.window.close();
+			});
+
+			this.$refs.window.refs.form.on('posted', () => {
+				this.$refs.window.close();
+			});
+
+			document.addEventListener('keydown', this.onDocumentKeydown);
+
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+		});
+
+		this.on('unmount', () => {
+			document.removeEventListener('keydown', this.onDocumentKeydown);
+		});
+	</script>
+</mk-repost-form-window>
diff --git a/src/web/app/desktop/-tags/repost-form.tag b/src/web/app/desktop/-tags/repost-form.tag
new file mode 100644
index 0000000000..afe555b6d6
--- /dev/null
+++ b/src/web/app/desktop/-tags/repost-form.tag
@@ -0,0 +1,127 @@
+<mk-repost-form>
+	<mk-post-preview post={ opts.post }/>
+	<template v-if="!quote">
+		<footer>
+			<a class="quote" v-if="!quote" @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a>
+			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
+			<button class="ok" @click="ok" disabled={ wait }>{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }</button>
+		</footer>
+	</template>
+	<template v-if="quote">
+		<mk-post-form ref="form" repost={ opts.post }/>
+	</template>
+	<style lang="stylus" scoped>
+		:scope
+
+			> mk-post-preview
+				margin 16px 22px
+
+			> div
+				padding 16px
+
+			> footer
+				height 72px
+				background lighten($theme-color, 95%)
+
+				> .quote
+					position absolute
+					bottom 16px
+					left 28px
+					line-height 40px
+
+				button
+					display block
+					position absolute
+					bottom 16px
+					cursor pointer
+					padding 0
+					margin 0
+					width 120px
+					height 40px
+					font-size 1em
+					outline none
+					border-radius 4px
+
+					&:focus
+						&:after
+							content ""
+							pointer-events none
+							position absolute
+							top -5px
+							right -5px
+							bottom -5px
+							left -5px
+							border 2px solid rgba($theme-color, 0.3)
+							border-radius 8px
+
+				> .cancel
+					right 148px
+					color #888
+					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+					border solid 1px #e2e2e2
+
+					&:hover
+						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+						border-color #dcdcdc
+
+					&:active
+						background #ececec
+						border-color #dcdcdc
+
+				> .ok
+					right 16px
+					font-weight bold
+					color $theme-color-foreground
+					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+					border solid 1px lighten($theme-color, 15%)
+
+					&:hover
+						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+						border-color $theme-color
+
+					&:active
+						background $theme-color
+						border-color $theme-color
+
+	</style>
+	<script lang="typescript">
+		import notify from '../scripts/notify';
+
+		this.mixin('api');
+
+		this.wait = false;
+		this.quote = false;
+
+		this.cancel = () => {
+			this.$emit('cancel');
+		};
+
+		this.ok = () => {
+			this.wait = true;
+			this.api('posts/create', {
+				repost_id: this.opts.post.id
+			}).then(data => {
+				this.$emit('posted');
+				notify('%i18n:desktop.tags.mk-repost-form.success%');
+			}).catch(err => {
+				notify('%i18n:desktop.tags.mk-repost-form.failure%');
+			}).then(() => {
+				this.update({
+					wait: false
+				});
+			});
+		};
+
+		this.onquote = () => {
+			this.update({
+				quote: true
+			});
+
+			this.$refs.form.on('post', () => {
+				this.$emit('posted');
+			});
+
+			this.$refs.form.focus();
+		};
+	</script>
+</mk-repost-form>
diff --git a/src/web/app/desktop/-tags/search-posts.tag b/src/web/app/desktop/-tags/search-posts.tag
new file mode 100644
index 0000000000..52c68b754c
--- /dev/null
+++ b/src/web/app/desktop/-tags/search-posts.tag
@@ -0,0 +1,96 @@
+<mk-search-posts>
+	<div class="loading" v-if="isLoading">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="isEmpty">%fa:search%「{ query }」に関する投稿は見つかりませんでした。</p>
+	<mk-timeline ref="timeline">
+		<yield to="footer">
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
+		</yield/>
+	</mk-timeline>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+
+			> .loading
+				padding 64px 0
+
+			> .empty
+				display block
+				margin 0 auto
+				padding 32px
+				max-width 400px
+				text-align center
+				color #999
+
+				> [data-fa]
+					display block
+					margin-bottom 16px
+					font-size 3em
+					color #ccc
+
+	</style>
+	<script lang="typescript">
+		import parse from '../../common/scripts/parse-search-query';
+
+		this.mixin('api');
+
+		this.query = this.opts.query;
+		this.isLoading = true;
+		this.isEmpty = false;
+		this.moreLoading = false;
+		this.limit = 30;
+		this.offset = 0;
+
+		this.on('mount', () => {
+			document.addEventListener('keydown', this.onDocumentKeydown);
+			window.addEventListener('scroll', this.onScroll);
+
+			this.api('posts/search', parse(this.query)).then(posts => {
+				this.update({
+					isLoading: false,
+					isEmpty: posts.length == 0
+				});
+				this.$refs.timeline.setPosts(posts);
+				this.$emit('loaded');
+			});
+		});
+
+		this.on('unmount', () => {
+			document.removeEventListener('keydown', this.onDocumentKeydown);
+			window.removeEventListener('scroll', this.onScroll);
+		});
+
+		this.onDocumentKeydown = e => {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					this.$refs.timeline.focus();
+				}
+			}
+		};
+
+		this.more = () => {
+			if (this.moreLoading || this.isLoading || this.timeline.posts.length == 0) return;
+			this.offset += this.limit;
+			this.update({
+				moreLoading: true
+			});
+			return this.api('posts/search', Object.assign({}, parse(this.query), {
+				limit: this.limit,
+				offset: this.offset
+			})).then(posts => {
+				this.update({
+					moreLoading: false
+				});
+				this.$refs.timeline.prependPosts(posts);
+			});
+		};
+
+		this.onScroll = () => {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 16) this.more();
+		};
+	</script>
+</mk-search-posts>
diff --git a/src/web/app/desktop/-tags/search.tag b/src/web/app/desktop/-tags/search.tag
new file mode 100644
index 0000000000..28127b721b
--- /dev/null
+++ b/src/web/app/desktop/-tags/search.tag
@@ -0,0 +1,34 @@
+<mk-search>
+	<header>
+		<h1>{ query }</h1>
+	</header>
+	<mk-search-posts ref="posts" query={ query }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding-bottom 32px
+
+			> header
+				width 100%
+				max-width 600px
+				margin 0 auto
+				color #555
+
+			> mk-search-posts
+				max-width 600px
+				margin 0 auto
+				border solid 1px rgba(0, 0, 0, 0.075)
+				border-radius 6px
+				overflow hidden
+
+	</style>
+	<script lang="typescript">
+		this.query = this.opts.query;
+
+		this.on('mount', () => {
+			this.$refs.posts.on('loaded', () => {
+				this.$emit('loaded');
+			});
+		});
+	</script>
+</mk-search>
diff --git a/src/web/app/desktop/-tags/select-file-from-drive-window.tag b/src/web/app/desktop/-tags/select-file-from-drive-window.tag
new file mode 100644
index 0000000000..d6234d5fd9
--- /dev/null
+++ b/src/web/app/desktop/-tags/select-file-from-drive-window.tag
@@ -0,0 +1,173 @@
+<mk-select-file-from-drive-window>
+	<mk-window ref="window" is-modal={ true } width={ '800px' } height={ '500px' }>
+		<yield to="header">
+			<mk-raw content={ parent.title }/>
+			<span class="count" v-if="parent.multiple && parent.files.length > 0">({ parent.files.length }ファイル選択中)</span>
+		</yield>
+		<yield to="content">
+			<mk-drive-browser ref="browser" multiple={ parent.multiple }/>
+			<div>
+				<button class="upload" title="PCからドライブにファイルをアップロード" @click="parent.upload">%fa:upload%</button>
+				<button class="cancel" @click="parent.close">キャンセル</button>
+				<button class="ok" disabled={ parent.multiple && parent.files.length == 0 } @click="parent.ok">決定</button>
+			</div>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> mk-raw
+						> [data-fa]
+							margin-right 4px
+
+					.count
+						margin-left 8px
+						opacity 0.7
+
+				[data-yield='content']
+					> mk-drive-browser
+						height calc(100% - 72px)
+
+					> div
+						height 72px
+						background lighten($theme-color, 95%)
+
+						> .upload
+							display inline-block
+							position absolute
+							top 8px
+							left 16px
+							cursor pointer
+							padding 0
+							margin 8px 4px 0 0
+							width 40px
+							height 40px
+							font-size 1em
+							color rgba($theme-color, 0.5)
+							background transparent
+							outline none
+							border solid 1px transparent
+							border-radius 4px
+
+							&:hover
+								background transparent
+								border-color rgba($theme-color, 0.3)
+
+							&:active
+								color rgba($theme-color, 0.6)
+								background transparent
+								border-color rgba($theme-color, 0.5)
+								box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+
+							&:focus
+								&:after
+									content ""
+									pointer-events none
+									position absolute
+									top -5px
+									right -5px
+									bottom -5px
+									left -5px
+									border 2px solid rgba($theme-color, 0.3)
+									border-radius 8px
+
+						> .ok
+						> .cancel
+							display block
+							position absolute
+							bottom 16px
+							cursor pointer
+							padding 0
+							margin 0
+							width 120px
+							height 40px
+							font-size 1em
+							outline none
+							border-radius 4px
+
+							&:focus
+								&:after
+									content ""
+									pointer-events none
+									position absolute
+									top -5px
+									right -5px
+									bottom -5px
+									left -5px
+									border 2px solid rgba($theme-color, 0.3)
+									border-radius 8px
+
+							&:disabled
+								opacity 0.7
+								cursor default
+
+						> .ok
+							right 16px
+							color $theme-color-foreground
+							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+							border solid 1px lighten($theme-color, 15%)
+
+							&:not(:disabled)
+								font-weight bold
+
+							&:hover:not(:disabled)
+								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+								border-color $theme-color
+
+							&:active:not(:disabled)
+								background $theme-color
+								border-color $theme-color
+
+						> .cancel
+							right 148px
+							color #888
+							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+							border solid 1px #e2e2e2
+
+							&:hover
+								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+								border-color #dcdcdc
+
+							&:active
+								background #ececec
+								border-color #dcdcdc
+
+	</style>
+	<script lang="typescript">
+		this.files = [];
+
+		this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
+		this.title = this.opts.title || '%fa:R file%ファイルを選択';
+
+		this.on('mount', () => {
+			this.$refs.window.refs.browser.on('selected', file => {
+				this.files = [file];
+				this.ok();
+			});
+
+			this.$refs.window.refs.browser.on('change-selection', files => {
+				this.update({
+					files: files
+				});
+			});
+
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+		});
+
+		this.close = () => {
+			this.$refs.window.close();
+		};
+
+		this.upload = () => {
+			this.$refs.window.refs.browser.selectLocalFile();
+		};
+
+		this.ok = () => {
+			this.$emit('selected', this.multiple ? this.files : this.files[0]);
+			this.$refs.window.close();
+		};
+	</script>
+</mk-select-file-from-drive-window>
diff --git a/src/web/app/desktop/-tags/select-folder-from-drive-window.tag b/src/web/app/desktop/-tags/select-folder-from-drive-window.tag
new file mode 100644
index 0000000000..2f98f30a63
--- /dev/null
+++ b/src/web/app/desktop/-tags/select-folder-from-drive-window.tag
@@ -0,0 +1,112 @@
+<mk-select-folder-from-drive-window>
+	<mk-window ref="window" is-modal={ true } width={ '800px' } height={ '500px' }>
+		<yield to="header">
+			<mk-raw content={ parent.title }/>
+		</yield>
+		<yield to="content">
+			<mk-drive-browser ref="browser"/>
+			<div>
+				<button class="cancel" @click="parent.close">キャンセル</button>
+				<button class="ok" @click="parent.ok">決定</button>
+			</div>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> mk-raw
+						> [data-fa]
+							margin-right 4px
+
+				[data-yield='content']
+					> mk-drive-browser
+						height calc(100% - 72px)
+
+					> div
+						height 72px
+						background lighten($theme-color, 95%)
+
+						.ok
+						.cancel
+							display block
+							position absolute
+							bottom 16px
+							cursor pointer
+							padding 0
+							margin 0
+							width 120px
+							height 40px
+							font-size 1em
+							outline none
+							border-radius 4px
+
+							&:focus
+								&:after
+									content ""
+									pointer-events none
+									position absolute
+									top -5px
+									right -5px
+									bottom -5px
+									left -5px
+									border 2px solid rgba($theme-color, 0.3)
+									border-radius 8px
+
+							&:disabled
+								opacity 0.7
+								cursor default
+
+						.ok
+							right 16px
+							color $theme-color-foreground
+							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+							border solid 1px lighten($theme-color, 15%)
+
+							&:not(:disabled)
+								font-weight bold
+
+							&:hover:not(:disabled)
+								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+								border-color $theme-color
+
+							&:active:not(:disabled)
+								background $theme-color
+								border-color $theme-color
+
+						.cancel
+							right 148px
+							color #888
+							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+							border solid 1px #e2e2e2
+
+							&:hover
+								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+								border-color #dcdcdc
+
+							&:active
+								background #ececec
+								border-color #dcdcdc
+
+	</style>
+	<script lang="typescript">
+		this.files = [];
+
+		this.title = this.opts.title || '%fa:R folder%フォルダを選択';
+
+		this.on('mount', () => {
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+		});
+
+		this.close = () => {
+			this.$refs.window.close();
+		};
+
+		this.ok = () => {
+			this.$emit('selected', this.$refs.window.refs.browser.folder);
+			this.$refs.window.close();
+		};
+	</script>
+</mk-select-folder-from-drive-window>
diff --git a/src/web/app/desktop/-tags/set-avatar-suggestion.tag b/src/web/app/desktop/-tags/set-avatar-suggestion.tag
new file mode 100644
index 0000000000..e67a8c66d4
--- /dev/null
+++ b/src/web/app/desktop/-tags/set-avatar-suggestion.tag
@@ -0,0 +1,48 @@
+<mk-set-avatar-suggestion @click="set">
+	<p><b>アバターを設定</b>してみませんか？
+		<button @click="close">%fa:times%</button>
+	</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			cursor pointer
+			color #fff
+			background #a8cad0
+
+			&:hover
+				background #70abb5
+
+			> p
+				display block
+				margin 0 auto
+				padding 8px
+				max-width 1024px
+
+				> a
+					font-weight bold
+					color #fff
+
+				> button
+					position absolute
+					top 0
+					right 0
+					padding 8px
+					color #fff
+
+	</style>
+	<script lang="typescript">
+		import updateAvatar from '../scripts/update-avatar';
+
+		this.mixin('i');
+
+		this.set = () => {
+			updateAvatar(this.I);
+		};
+
+		this.close = e => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.$destroy();
+		};
+	</script>
+</mk-set-avatar-suggestion>
diff --git a/src/web/app/desktop/-tags/set-banner-suggestion.tag b/src/web/app/desktop/-tags/set-banner-suggestion.tag
new file mode 100644
index 0000000000..0d32c9a0e3
--- /dev/null
+++ b/src/web/app/desktop/-tags/set-banner-suggestion.tag
@@ -0,0 +1,48 @@
+<mk-set-banner-suggestion @click="set">
+	<p><b>バナーを設定</b>してみませんか？
+		<button @click="close">%fa:times%</button>
+	</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			cursor pointer
+			color #fff
+			background #a8cad0
+
+			&:hover
+				background #70abb5
+
+			> p
+				display block
+				margin 0 auto
+				padding 8px
+				max-width 1024px
+
+				> a
+					font-weight bold
+					color #fff
+
+				> button
+					position absolute
+					top 0
+					right 0
+					padding 8px
+					color #fff
+
+	</style>
+	<script lang="typescript">
+		import updateBanner from '../scripts/update-banner';
+
+		this.mixin('i');
+
+		this.set = () => {
+			updateBanner(this.I);
+		};
+
+		this.close = e => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.$destroy();
+		};
+	</script>
+</mk-set-banner-suggestion>
diff --git a/src/web/app/desktop/-tags/settings-window.tag b/src/web/app/desktop/-tags/settings-window.tag
new file mode 100644
index 0000000000..094225f61f
--- /dev/null
+++ b/src/web/app/desktop/-tags/settings-window.tag
@@ -0,0 +1,30 @@
+<mk-settings-window>
+	<mk-window ref="window" is-modal={ true } width={ '700px' } height={ '550px' }>
+		<yield to="header">%fa:cog%設定</yield>
+		<yield to="content">
+			<mk-settings/>
+		</yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> [data-fa]
+						margin-right 4px
+
+				[data-yield='content']
+					overflow hidden
+
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			this.$refs.window.on('closed', () => {
+				this.$destroy();
+			});
+		});
+
+		this.close = () => {
+			this.$refs.window.close();
+		};
+	</script>
+</mk-settings-window>
diff --git a/src/web/app/desktop/-tags/settings.tag b/src/web/app/desktop/-tags/settings.tag
new file mode 100644
index 0000000000..4bf210cef4
--- /dev/null
+++ b/src/web/app/desktop/-tags/settings.tag
@@ -0,0 +1,426 @@
+<mk-settings>
+	<div class="nav">
+		<p :class="{ active: page == 'profile' }" onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
+		<p :class="{ active: page == 'web' }" onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
+		<p :class="{ active: page == 'notification' }" onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
+		<p :class="{ active: page == 'drive' }" onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p>
+		<p :class="{ active: page == 'mute' }" onmousedown={ setPage.bind(null, 'mute') }>%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p>
+		<p :class="{ active: page == 'apps' }" onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
+		<p :class="{ active: page == 'twitter' }" onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
+		<p :class="{ active: page == 'security' }" onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
+		<p :class="{ active: page == 'api' }" onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
+		<p :class="{ active: page == 'other' }" onmousedown={ setPage.bind(null, 'other') }>%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p>
+	</div>
+	<div class="pages">
+		<section class="profile" show={ page == 'profile' }>
+			<h1>%i18n:desktop.tags.mk-settings.profile%</h1>
+			<mk-profile-setting/>
+		</section>
+
+		<section class="web" show={ page == 'web' }>
+			<h1>デザイン</h1>
+			<a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
+		</section>
+
+		<section class="drive" show={ page == 'drive' }>
+			<h1>%i18n:desktop.tags.mk-settings.drive%</h1>
+			<mk-drive-setting/>
+		</section>
+
+		<section class="mute" show={ page == 'mute' }>
+			<h1>%i18n:desktop.tags.mk-settings.mute%</h1>
+			<mk-mute-setting/>
+		</section>
+
+		<section class="apps" show={ page == 'apps' }>
+			<h1>アプリケーション</h1>
+			<mk-authorized-apps/>
+		</section>
+
+		<section class="twitter" show={ page == 'twitter' }>
+			<h1>Twitter</h1>
+			<mk-twitter-setting/>
+		</section>
+
+		<section class="password" show={ page == 'security' }>
+			<h1>%i18n:desktop.tags.mk-settings.password%</h1>
+			<mk-password-setting/>
+		</section>
+
+		<section class="2fa" show={ page == 'security' }>
+			<h1>%i18n:desktop.tags.mk-settings.2fa%</h1>
+			<mk-2fa-setting/>
+		</section>
+
+		<section class="signin" show={ page == 'security' }>
+			<h1>サインイン履歴</h1>
+			<mk-signin-history/>
+		</section>
+
+		<section class="api" show={ page == 'api' }>
+			<h1>API</h1>
+			<mk-api-info/>
+		</section>
+
+		<section class="other" show={ page == 'other' }>
+			<h1>%i18n:desktop.tags.mk-settings.license%</h1>
+			%license%
+		</section>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display flex
+			width 100%
+			height 100%
+
+			> .nav
+				flex 0 0 200px
+				width 100%
+				height 100%
+				padding 16px 0 0 0
+				overflow auto
+				border-right solid 1px #ddd
+
+				> p
+					display block
+					padding 10px 16px
+					margin 0
+					color #666
+					cursor pointer
+					user-select none
+					transition margin-left 0.2s ease
+
+					> [data-fa]
+						margin-right 4px
+
+					&:hover
+						color #555
+
+					&.active
+						margin-left 8px
+						color $theme-color !important
+
+			> .pages
+				width 100%
+				height 100%
+				flex auto
+				overflow auto
+
+				> section
+					margin 32px
+					color #4a535a
+
+					> h1
+						display block
+						margin 0 0 1em 0
+						padding 0 0 8px 0
+						font-size 1em
+						color #555
+						border-bottom solid 1px #eee
+
+	</style>
+	<script lang="typescript">
+		this.page = 'profile';
+
+		this.setPage = page => {
+			this.page = page;
+		};
+	</script>
+</mk-settings>
+
+<mk-profile-setting>
+	<label class="avatar ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		<button class="ui" @click="avatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.name%</p>
+		<input ref="accountName" type="text" value={ I.name } class="ui"/>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.location%</p>
+		<input ref="accountLocation" type="text" value={ I.profile.location } class="ui"/>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.description%</p>
+		<textarea ref="accountDescription" class="ui">{ I.description }</textarea>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.birthday%</p>
+		<input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/>
+	</label>
+	<button class="ui primary" @click="updateAccount">%i18n:desktop.tags.mk-profile-setting.save%</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .avatar
+				> img
+					display inline-block
+					vertical-align top
+					width 64px
+					height 64px
+					border-radius 4px
+
+				> button
+					margin-left 8px
+
+	</style>
+	<script lang="typescript">
+		import updateAvatar from '../scripts/update-avatar';
+		import notify from '../scripts/notify';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.avatar = () => {
+			updateAvatar(this.I);
+		};
+
+		this.updateAccount = () => {
+			this.api('i/update', {
+				name: this.$refs.accountName.value,
+				location: this.$refs.accountLocation.value || null,
+				description: this.$refs.accountDescription.value || null,
+				birthday: this.$refs.accountBirthday.value || null
+			}).then(() => {
+				notify('プロフィールを更新しました');
+			});
+		};
+	</script>
+</mk-profile-setting>
+
+<mk-api-info>
+	<p>Token: <code>{ I.token }</code></p>
+	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
+	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
+	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
+	<button class="ui" @click="regenerateToken">%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #4a535a
+
+			code
+				display inline-block
+				padding 4px 6px
+				color #555
+				background #eee
+				border-radius 2px
+	</style>
+	<script lang="typescript">
+		import passwordDialog from '../scripts/password-dialog';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.regenerateToken = () => {
+			passwordDialog('%i18n:desktop.tags.mk-api-info.enter-password%', password => {
+				this.api('i/regenerate_token', {
+					password: password
+				});
+			});
+		};
+	</script>
+</mk-api-info>
+
+<mk-password-setting>
+	<button @click="reset" class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #4a535a
+	</style>
+	<script lang="typescript">
+		import passwordDialog from '../scripts/password-dialog';
+		import dialog from '../scripts/dialog';
+		import notify from '../scripts/notify';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.reset = () => {
+			passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-current-password%', currentPassword => {
+				passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-new-password%', newPassword => {
+					passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-new-password-again%', newPassword2 => {
+						if (newPassword !== newPassword2) {
+							dialog(null, '%i18n:desktop.tags.mk-password-setting.not-match%', [{
+								text: 'OK'
+							}]);
+							return;
+						}
+						this.api('i/change_password', {
+							current_password: currentPassword,
+							new_password: newPassword
+						}).then(() => {
+							notify('%i18n:desktop.tags.mk-password-setting.changed%');
+						});
+					});
+				});
+			});
+		};
+	</script>
+</mk-password-setting>
+
+<mk-2fa-setting>
+	<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
+	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
+	<p v-if="!data && !I.two_factor_enabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<template v-if="I.two_factor_enabled">
+		<p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p>
+		<button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
+	</template>
+	<div v-if="data">
+		<ol>
+			<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>
+			<li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li>
+			<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
+				<input type="number" ref="token" class="ui">
+				<button @click="submit" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
+			</li>
+		</ol>
+		<div class="ui info"><p>%fa:info-circle%%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #4a535a
+
+	</style>
+	<script lang="typescript">
+		import passwordDialog from '../scripts/password-dialog';
+		import notify from '../scripts/notify';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.register = () => {
+			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
+				this.api('i/2fa/register', {
+					password: password
+				}).then(data => {
+					this.update({
+						data: data
+					});
+				});
+			});
+		};
+
+		this.unregister = () => {
+			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
+				this.api('i/2fa/unregister', {
+					password: password
+				}).then(data => {
+					notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%');
+					this.I.two_factor_enabled = false;
+					this.I.update();
+				});
+			});
+		};
+
+		this.submit = () => {
+			this.api('i/2fa/done', {
+				token: this.$refs.token.value
+			}).then(() => {
+				notify('%i18n:desktop.tags.mk-2fa-setting.success%');
+				this.I.two_factor_enabled = true;
+				this.I.update();
+			}).catch(() => {
+				notify('%i18n:desktop.tags.mk-2fa-setting.failed%');
+			});
+		};
+	</script>
+</mk-2fa-setting>
+
+<mk-drive-setting>
+	<svg viewBox="0 0 1 1" preserveAspectRatio="none">
+		<circle
+			riot-r={ r }
+			cx="50%" cy="50%"
+			fill="none"
+			stroke-width="0.1"
+			stroke="rgba(0, 0, 0, 0.05)"/>
+		<circle
+			riot-r={ r }
+			cx="50%" cy="50%"
+			riot-stroke-dasharray={ Math.PI * (r * 2) }
+			riot-stroke-dashoffset={ strokeDashoffset }
+			fill="none"
+			stroke-width="0.1"
+			riot-stroke={ color }/>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle">{ (usageP * 100).toFixed(0) }%</text>
+	</svg>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #4a535a
+
+			> svg
+				display block
+				height 128px
+
+				> circle
+					transform-origin center
+					transform rotate(-90deg)
+					transition stroke-dashoffset 0.5s ease
+
+				> text
+					font-size 0.15px
+					fill rgba(0, 0, 0, 0.6)
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.r = 0.4;
+
+		this.on('mount', () => {
+			this.api('drive').then(info => {
+				const usageP = info.usage / info.capacity;
+				const color = `hsl(${180 - (usageP * 180)}, 80%, 70%)`;
+				const strokeDashoffset = (1 - usageP) * (Math.PI * (this.r * 2));
+
+				this.update({
+					color,
+					strokeDashoffset,
+					usageP,
+					usage: info.usage,
+					capacity: info.capacity
+				});
+			});
+		});
+	</script>
+</mk-drive-setting>
+
+<mk-mute-setting>
+	<div class="none ui info" v-if="!fetching && users.length == 0">
+		<p>%fa:info-circle%%i18n:desktop.tags.mk-mute-setting.no-users%</p>
+	</div>
+	<div class="users" v-if="users.length != 0">
+		<div each={ user in users }>
+			<p><b>{ user.name }</b> @{ user.username }</p>
+		</div>
+	</div>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.apps = [];
+		this.fetching = true;
+
+		this.on('mount', () => {
+			this.api('mute/list').then(x => {
+				this.update({
+					fetching: false,
+					users: x.users
+				});
+			});
+		});
+	</script>
+</mk-mute-setting>
diff --git a/src/web/app/desktop/-tags/sub-post-content.tag b/src/web/app/desktop/-tags/sub-post-content.tag
new file mode 100644
index 0000000000..40b3b30058
--- /dev/null
+++ b/src/web/app/desktop/-tags/sub-post-content.tag
@@ -0,0 +1,54 @@
+<mk-sub-post-content>
+	<div class="body">
+		<a class="reply" v-if="post.reply_id">
+			%fa:reply%
+		</a>
+		<span ref="text"></span>
+		<a class="quote" v-if="post.repost_id" href={ '/post:' + post.repost_id }>RP: ...</a>
+	</div>
+	<details v-if="post.media">
+		<summary>({ post.media.length }つのメディア)</summary>
+		<mk-images images={ post.media }/>
+	</details>
+	<details v-if="post.poll">
+		<summary>投票</summary>
+		<mk-poll post={ post }/>
+	</details>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow-wrap break-word
+
+			> .body
+				> .reply
+					margin-right 6px
+					color #717171
+
+				> .quote
+					margin-left 4px
+					font-style oblique
+					color #a0bf46
+
+			mk-poll
+				font-size 80%
+
+	</style>
+	<script lang="typescript">
+		import compile from '../../common/scripts/text-compiler';
+
+		this.mixin('user-preview');
+
+		this.post = this.opts.post;
+
+		this.on('mount', () => {
+			if (this.post.text) {
+				const tokens = this.post.ast;
+				this.$refs.text.innerHTML = compile(tokens, false);
+
+				Array.from(this.$refs.text.children).forEach(e => {
+					if (e.tagName == 'MK-URL') riot.mount(e);
+				});
+			}
+		});
+	</script>
+</mk-sub-post-content>
diff --git a/src/web/app/desktop/-tags/timeline.tag b/src/web/app/desktop/-tags/timeline.tag
new file mode 100644
index 0000000000..7f79d18b47
--- /dev/null
+++ b/src/web/app/desktop/-tags/timeline.tag
@@ -0,0 +1,704 @@
+<mk-timeline>
+	<template each={ post, i in posts }>
+		<mk-timeline-post post={ post }/>
+		<p class="date" v-if="i != posts.length - 1 && post._date != posts[i + 1]._date"><span>%fa:angle-up%{ post._datetext }</span><span>%fa:angle-down%{ posts[i + 1]._datetext }</span></p>
+	</template>
+	<footer data-yield="footer">
+		<yield from="footer"/>
+	</footer>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .date
+				display block
+				margin 0
+				line-height 32px
+				font-size 14px
+				text-align center
+				color #aaa
+				background #fdfdfd
+				border-bottom solid 1px #eaeaea
+
+				span
+					margin 0 16px
+
+				[data-fa]
+					margin-right 8px
+
+			> footer
+				padding 16px
+				text-align center
+				color #ccc
+				border-top solid 1px #eaeaea
+				border-bottom-left-radius 4px
+				border-bottom-right-radius 4px
+
+	</style>
+	<script lang="typescript">
+		this.posts = [];
+
+		this.on('update', () => {
+			this.posts.forEach(post => {
+				const date = new Date(post.created_at).getDate();
+				const month = new Date(post.created_at).getMonth() + 1;
+				post._date = date;
+				post._datetext = `${month}月 ${date}日`;
+			});
+		});
+
+		this.setPosts = posts => {
+			this.update({
+				posts: posts
+			});
+		};
+
+		this.prependPosts = posts => {
+			posts.forEach(post => {
+				this.posts.push(post);
+				this.update();
+			});
+		}
+
+		this.addPost = post => {
+			this.posts.unshift(post);
+			this.update();
+		};
+
+		this.tail = () => {
+			return this.posts[this.posts.length - 1];
+		};
+
+		this.clear = () => {
+			this.posts = [];
+			this.update();
+		};
+
+		this.focus = () => {
+			this.root.children[0].focus();
+		};
+
+	</script>
+</mk-timeline>
+
+<mk-timeline-post tabindex="-1" title={ title } onkeydown={ onKeyDown } dblclick={ onDblClick }>
+	<div class="reply-to" v-if="p.reply">
+		<mk-timeline-post-sub post={ p.reply }/>
+	</div>
+	<div class="repost" v-if="isRepost">
+		<p>
+			<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
+				<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
+			</a>
+			%fa:retweet%{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
+		</p>
+		<mk-time time={ post.created_at }/>
+	</div>
+	<article>
+		<a class="avatar-anchor" href={ '/' + p.user.username }>
+			<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ p.user.id }/>
+		</a>
+		<div class="main">
+			<header>
+				<a class="name" href={ '/' + p.user.username } data-user-preview={ p.user.id }>{ p.user.name }</a>
+				<span class="is-bot" v-if="p.user.is_bot">bot</span>
+				<span class="username">@{ p.user.username }</span>
+				<div class="info">
+					<span class="app" v-if="p.app">via <b>{ p.app.name }</b></span>
+					<a class="created-at" href={ url }>
+						<mk-time time={ p.created_at }/>
+					</a>
+				</div>
+			</header>
+			<div class="body">
+				<div class="text" ref="text">
+					<p class="channel" v-if="p.channel != null"><a href={ _CH_URL_ + '/' + p.channel.id } target="_blank">{ p.channel.title }</a>:</p>
+					<a class="reply" v-if="p.reply">
+						%fa:reply%
+					</a>
+					<p class="dummy"></p>
+					<a class="quote" v-if="p.repost != null">RP:</a>
+				</div>
+				<div class="media" v-if="p.media">
+					<mk-images images={ p.media }/>
+				</div>
+				<mk-poll v-if="p.poll" post={ p } ref="pollViewer"/>
+				<div class="repost" v-if="p.repost">%fa:quote-right -flip-h%
+					<mk-post-preview class="repost" post={ p.repost }/>
+				</div>
+			</div>
+			<footer>
+				<mk-reactions-viewer post={ p } ref="reactionsViewer"/>
+				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-post.reply%">
+					%fa:reply%<p class="count" v-if="p.replies_count > 0">{ p.replies_count }</p>
+				</button>
+				<button @click="repost" title="%i18n:desktop.tags.mk-timeline-post.repost%">
+					%fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p>
+				</button>
+				<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%">
+					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p>
+				</button>
+				<button @click="menu" ref="menuButton">
+					%fa:ellipsis-h%
+				</button>
+				<button @click="toggleDetail" title="%i18n:desktop.tags.mk-timeline-post.detail">
+					<template v-if="!isDetailOpened">%fa:caret-down%</template>
+					<template v-if="isDetailOpened">%fa:caret-up%</template>
+				</button>
+			</footer>
+		</div>
+	</article>
+	<div class="detail" v-if="isDetailOpened">
+		<mk-post-status-graph width="462" height="130" post={ p }/>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			margin 0
+			padding 0
+			background #fff
+			border-bottom solid 1px #eaeaea
+
+			&:first-child
+				border-top-left-radius 6px
+				border-top-right-radius 6px
+
+				> .repost
+					border-top-left-radius 6px
+					border-top-right-radius 6px
+
+			&:last-of-type
+				border-bottom none
+
+			&:focus
+				z-index 1
+
+				&:after
+					content ""
+					pointer-events none
+					position absolute
+					top 2px
+					right 2px
+					bottom 2px
+					left 2px
+					border 2px solid rgba($theme-color, 0.3)
+					border-radius 4px
+
+			> .repost
+				color #9dbb00
+				background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+				> p
+					margin 0
+					padding 16px 32px
+					line-height 28px
+
+					.avatar-anchor
+						display inline-block
+
+						.avatar
+							vertical-align bottom
+							width 28px
+							height 28px
+							margin 0 8px 0 0
+							border-radius 6px
+
+					[data-fa]
+						margin-right 4px
+
+					.name
+						font-weight bold
+
+				> mk-time
+					position absolute
+					top 16px
+					right 32px
+					font-size 0.9em
+					line-height 28px
+
+				& + article
+					padding-top 8px
+
+			> .reply-to
+				padding 0 16px
+				background rgba(0, 0, 0, 0.0125)
+
+				> mk-post-preview
+					background transparent
+
+			> article
+				padding 28px 32px 18px 32px
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				&:hover
+					> .main > footer > button
+						color #888
+
+				> .avatar-anchor
+					display block
+					float left
+					margin 0 16px 10px 0
+					position -webkit-sticky
+					position sticky
+					top 74px
+
+					> .avatar
+						display block
+						width 58px
+						height 58px
+						margin 0
+						border-radius 8px
+						vertical-align bottom
+
+				> .main
+					float left
+					width calc(100% - 74px)
+
+					> header
+						display flex
+						margin-bottom 4px
+						white-space nowrap
+						line-height 1.4
+
+						> .name
+							display block
+							margin 0 .5em 0 0
+							padding 0
+							overflow hidden
+							color #777
+							font-size 1em
+							font-weight 700
+							text-align left
+							text-decoration none
+							text-overflow ellipsis
+
+							&:hover
+								text-decoration underline
+
+						> .is-bot
+							text-align left
+							margin 0 .5em 0 0
+							padding 1px 6px
+							font-size 12px
+							color #aaa
+							border solid 1px #ddd
+							border-radius 3px
+
+						> .username
+							text-align left
+							margin 0 .5em 0 0
+							color #ccc
+
+						> .info
+							margin-left auto
+							text-align right
+							font-size 0.9em
+
+							> .app
+								margin-right 8px
+								padding-right 8px
+								color #ccc
+								border-right solid 1px #eaeaea
+
+							> .created-at
+								color #c0c0c0
+
+					> .body
+
+						> .text
+							cursor default
+							display block
+							margin 0
+							padding 0
+							overflow-wrap break-word
+							font-size 1.1em
+							color #717171
+
+							> .dummy
+								display none
+
+							mk-url-preview
+								margin-top 8px
+
+							> .channel
+								margin 0
+
+							> .reply
+								margin-right 8px
+								color #717171
+
+							> .quote
+								margin-left 4px
+								font-style oblique
+								color #a0bf46
+
+							code
+								padding 4px 8px
+								margin 0 0.5em
+								font-size 80%
+								color #525252
+								background #f8f8f8
+								border-radius 2px
+
+							pre > code
+								padding 16px
+								margin 0
+
+							[data-is-me]:after
+								content "you"
+								padding 0 4px
+								margin-left 4px
+								font-size 80%
+								color $theme-color-foreground
+								background $theme-color
+								border-radius 4px
+
+						> mk-poll
+							font-size 80%
+
+						> .repost
+							margin 8px 0
+
+							> [data-fa]:first-child
+								position absolute
+								top -8px
+								left -8px
+								z-index 1
+								color #c0dac6
+								font-size 28px
+								background #fff
+
+							> mk-post-preview
+								padding 16px
+								border dashed 1px #c0dac6
+								border-radius 8px
+
+					> footer
+						> button
+							margin 0 28px 0 0
+							padding 0 8px
+							line-height 32px
+							font-size 1em
+							color #ddd
+							background transparent
+							border none
+							cursor pointer
+
+							&:hover
+								color #666
+
+							> .count
+								display inline
+								margin 0 0 0 8px
+								color #999
+
+							&.reacted
+								color $theme-color
+
+							&:last-child
+								position absolute
+								right 0
+								margin 0
+
+			> .detail
+				padding-top 4px
+				background rgba(0, 0, 0, 0.0125)
+
+	</style>
+	<script lang="typescript">
+		import compile from '../../common/scripts/text-compiler';
+		import dateStringify from '../../common/scripts/date-stringify';
+
+		this.mixin('i');
+		this.mixin('api');
+		this.mixin('user-preview');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.isDetailOpened = false;
+
+		this.set = post => {
+			this.post = post;
+			this.isRepost = this.post.repost && this.post.text == null && this.post.media_ids == null && this.post.poll == null;
+			this.p = this.isRepost ? this.post.repost : this.post;
+			this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
+			this.title = dateStringify(this.p.created_at);
+			this.url = `/${this.p.user.username}/${this.p.id}`;
+		};
+
+		this.set(this.opts.post);
+
+		this.refresh = post => {
+			this.set(post);
+			this.update();
+			if (this.$refs.reactionsViewer) this.$refs.reactionsViewer.update({
+				post
+			});
+			if (this.$refs.pollViewer) this.$refs.pollViewer.init(post);
+		};
+
+		this.onStreamPostUpdated = data => {
+			const post = data.post;
+			if (post.id == this.post.id) {
+				this.refresh(post);
+			}
+		};
+
+		this.onStreamConnected = () => {
+			this.capture();
+		};
+
+		this.capture = withHandler => {
+			if (this.SIGNIN) {
+				this.connection.send({
+					type: 'capture',
+					id: this.post.id
+				});
+				if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
+			}
+		};
+
+		this.decapture = withHandler => {
+			if (this.SIGNIN) {
+				this.connection.send({
+					type: 'decapture',
+					id: this.post.id
+				});
+				if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
+			}
+		};
+
+		this.on('mount', () => {
+			this.capture(true);
+
+			if (this.SIGNIN) {
+				this.connection.on('_connected_', this.onStreamConnected);
+			}
+
+			if (this.p.text) {
+				const tokens = this.p.ast;
+
+				this.$refs.text.innerHTML = this.$refs.text.innerHTML.replace('<p class="dummy"></p>', compile(tokens));
+
+				Array.from(this.$refs.text.children).forEach(e => {
+					if (e.tagName == 'MK-URL') riot.mount(e);
+				});
+
+				// URLをプレビュー
+				tokens
+				.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+				.map(t => {
+					riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
+						url: t.url
+					});
+				});
+			}
+		});
+
+		this.on('unmount', () => {
+			this.decapture(true);
+			this.connection.off('_connected_', this.onStreamConnected);
+			this.stream.dispose(this.connectionId);
+		});
+
+		this.reply = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
+				reply: this.p
+			});
+		};
+
+		this.repost = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-repost-form-window')), {
+				post: this.p
+			});
+		};
+
+		this.react = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
+				source: this.$refs.reactButton,
+				post: this.p
+			});
+		};
+
+		this.menu = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-post-menu')), {
+				source: this.$refs.menuButton,
+				post: this.p
+			});
+		};
+
+		this.toggleDetail = () => {
+			this.update({
+				isDetailOpened: !this.isDetailOpened
+			});
+		};
+
+		this.onKeyDown = e => {
+			let shouldBeCancel = true;
+
+			switch (true) {
+				case e.which == 38: // [↑]
+				case e.which == 74: // [j]
+				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
+					focus(this.root, e => e.previousElementSibling);
+					break;
+
+				case e.which == 40: // [↓]
+				case e.which == 75: // [k]
+				case e.which == 9: // [Tab]
+					focus(this.root, e => e.nextElementSibling);
+					break;
+
+				case e.which == 81: // [q]
+				case e.which == 69: // [e]
+					this.repost();
+					break;
+
+				case e.which == 70: // [f]
+				case e.which == 76: // [l]
+					this.like();
+					break;
+
+				case e.which == 82: // [r]
+					this.reply();
+					break;
+
+				default:
+					shouldBeCancel = false;
+			}
+
+			if (shouldBeCancel) e.preventDefault();
+		};
+
+		this.onDblClick = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-detailed-post-window')), {
+				post: this.p.id
+			});
+		};
+
+		function focus(el, fn) {
+			const target = fn(el);
+			if (target) {
+				if (target.hasAttribute('tabindex')) {
+					target.focus();
+				} else {
+					focus(target, fn);
+				}
+			}
+		}
+	</script>
+</mk-timeline-post>
+
+<mk-timeline-post-sub title={ title }>
+	<article>
+		<a class="avatar-anchor" href={ '/' + post.user.username }>
+			<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ post.user_id }/>
+		</a>
+		<div class="main">
+			<header>
+				<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>
+				<span class="username">@{ post.user.username }</span>
+				<a class="created-at" href={ '/' + post.user.username + '/' + post.id }>
+					<mk-time time={ post.created_at }/>
+				</a>
+			</header>
+			<div class="body">
+				<mk-sub-post-content class="text" post={ post }/>
+			</div>
+		</div>
+	</article>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			margin 0
+			padding 0
+			font-size 0.9em
+
+			> article
+				padding 16px
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				&:hover
+					> .main > footer > button
+						color #888
+
+				> .avatar-anchor
+					display block
+					float left
+					margin 0 14px 0 0
+
+					> .avatar
+						display block
+						width 52px
+						height 52px
+						margin 0
+						border-radius 8px
+						vertical-align bottom
+
+				> .main
+					float left
+					width calc(100% - 66px)
+
+					> header
+						display flex
+						margin-bottom 2px
+						white-space nowrap
+						line-height 21px
+
+						> .name
+							display block
+							margin 0 .5em 0 0
+							padding 0
+							overflow hidden
+							color #607073
+							font-size 1em
+							font-weight 700
+							text-align left
+							text-decoration none
+							text-overflow ellipsis
+
+							&:hover
+								text-decoration underline
+
+						> .username
+							text-align left
+							margin 0 .5em 0 0
+							color #d1d8da
+
+						> .created-at
+							margin-left auto
+							color #b2b8bb
+
+					> .body
+
+						> .text
+							cursor default
+							margin 0
+							padding 0
+							font-size 1.1em
+							color #717171
+
+							pre
+								max-height 120px
+								font-size 80%
+
+	</style>
+	<script lang="typescript">
+		import dateStringify from '../../common/scripts/date-stringify';
+
+		this.mixin('user-preview');
+
+		this.post = this.opts.post;
+		this.title = dateStringify(this.post.created_at);
+	</script>
+</mk-timeline-post-sub>
diff --git a/src/web/app/desktop/-tags/ui.tag b/src/web/app/desktop/-tags/ui.tag
new file mode 100644
index 0000000000..e5008b838f
--- /dev/null
+++ b/src/web/app/desktop/-tags/ui.tag
@@ -0,0 +1,896 @@
+<mk-ui>
+	<mk-ui-header page={ opts.page }/>
+	<mk-set-avatar-suggestion v-if="SIGNIN && I.avatar_id == null"/>
+	<mk-set-banner-suggestion v-if="SIGNIN && I.banner_id == null"/>
+	<div class="content">
+		<yield />
+	</div>
+	<mk-stream-indicator v-if="SIGNIN"/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+
+		this.openPostForm = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')));
+		};
+
+		this.on('mount', () => {
+			document.addEventListener('keydown', this.onkeydown);
+		});
+
+		this.on('unmount', () => {
+			document.removeEventListener('keydown', this.onkeydown);
+		});
+
+		this.onkeydown = e => {
+			if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return;
+
+			if (e.which == 80 || e.which == 78) { // p or n
+				e.preventDefault();
+				this.openPostForm();
+			}
+		};
+	</script>
+</mk-ui>
+
+<mk-ui-header>
+	<mk-donation v-if="SIGNIN && I.client_settings.show_donation"/>
+	<mk-special-message/>
+	<div class="main">
+		<div class="backdrop"></div>
+		<div class="main">
+			<div class="container">
+				<div class="left">
+					<mk-ui-header-nav page={ opts.page }/>
+				</div>
+				<div class="right">
+					<mk-ui-header-search/>
+					<mk-ui-header-account v-if="SIGNIN"/>
+					<mk-ui-header-notifications v-if="SIGNIN"/>
+					<mk-ui-header-post-button v-if="SIGNIN"/>
+					<mk-ui-header-clock/>
+				</div>
+			</div>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position -webkit-sticky
+			position sticky
+			top 0
+			z-index 1024
+			width 100%
+			box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+			> .main
+
+				> .backdrop
+					position absolute
+					top 0
+					z-index 1023
+					width 100%
+					height 48px
+					backdrop-filter blur(12px)
+					background #f7f7f7
+
+					&:after
+						content ""
+						display block
+						width 100%
+						height 48px
+						background-image url(/assets/desktop/header-logo.svg)
+						background-size 46px
+						background-position center
+						background-repeat no-repeat
+						opacity 0.3
+
+				> .main
+					z-index 1024
+					margin 0
+					padding 0
+					background-clip content-box
+					font-size 0.9rem
+					user-select none
+
+					> .container
+						width 100%
+						max-width 1300px
+						margin 0 auto
+
+						&:after
+							content ""
+							display block
+							clear both
+
+						> .left
+							float left
+							height 3rem
+
+						> .right
+							float right
+							height 48px
+
+							@media (max-width 1100px)
+								> mk-ui-header-search
+									display none
+
+	</style>
+	<script lang="typescript">this.mixin('i');</script>
+</mk-ui-header>
+
+<mk-ui-header-search>
+	<form class="search" onsubmit={ onsubmit }>
+		%fa:search%
+		<input ref="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
+		<div class="result"></div>
+	</form>
+	<style lang="stylus" scoped>
+		:scope
+
+			> form
+				display block
+				float left
+
+				> [data-fa]
+					display block
+					position absolute
+					top 0
+					left 0
+					width 48px
+					text-align center
+					line-height 48px
+					color #9eaba8
+					pointer-events none
+
+					> *
+						vertical-align middle
+
+				> input
+					user-select text
+					cursor auto
+					margin 8px 0 0 0
+					padding 6px 18px 6px 36px
+					width 14em
+					height 32px
+					font-size 1em
+					background rgba(0, 0, 0, 0.05)
+					outline none
+					//border solid 1px #ddd
+					border none
+					border-radius 16px
+					transition color 0.5s ease, border 0.5s ease
+					font-family FontAwesome, sans-serif
+
+					&::placeholder
+						color #9eaba8
+
+					&:hover
+						background rgba(0, 0, 0, 0.08)
+
+					&:focus
+						box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
+
+	</style>
+	<script lang="typescript">
+		this.mixin('page');
+
+		this.onsubmit = e => {
+			e.preventDefault();
+			this.page('/search?q=' + encodeURIComponent(this.$refs.q.value));
+		};
+	</script>
+</mk-ui-header-search>
+
+<mk-ui-header-post-button>
+	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
+	<style lang="stylus" scoped>
+		:scope
+			display inline-block
+			padding 8px
+			height 100%
+			vertical-align top
+
+			> button
+				display inline-block
+				margin 0
+				padding 0 10px
+				height 100%
+				font-size 1.2em
+				font-weight normal
+				text-decoration none
+				color $theme-color-foreground
+				background $theme-color !important
+				outline none
+				border none
+				border-radius 4px
+				transition background 0.1s ease
+				cursor pointer
+
+				*
+					pointer-events none
+
+				&:hover
+					background lighten($theme-color, 10%) !important
+
+				&:active
+					background darken($theme-color, 10%) !important
+					transition background 0s ease
+
+	</style>
+	<script lang="typescript">
+		this.post = e => {
+			this.parent.parent.openPostForm();
+		};
+	</script>
+</mk-ui-header-post-button>
+
+<mk-ui-header-notifications>
+	<button data-active={ isOpen } @click="toggle" title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
+		%fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
+	</button>
+	<div class="notifications" v-if="isOpen">
+		<mk-notifications/>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			float left
+
+			> button
+				display block
+				margin 0
+				padding 0
+				width 32px
+				color #9eaba8
+				border none
+				background transparent
+				cursor pointer
+
+				*
+					pointer-events none
+
+				&:hover
+				&[data-active='true']
+					color darken(#9eaba8, 20%)
+
+				&:active
+					color darken(#9eaba8, 30%)
+
+				> [data-fa].bell
+					font-size 1.2em
+					line-height 48px
+
+				> [data-fa].circle
+					margin-left -5px
+					vertical-align super
+					font-size 10px
+					color $theme-color
+
+			> .notifications
+				display block
+				position absolute
+				top 56px
+				right -72px
+				width 300px
+				background #fff
+				border-radius 4px
+				box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+
+				&:before
+					content ""
+					pointer-events none
+					display block
+					position absolute
+					top -28px
+					right 74px
+					border-top solid 14px transparent
+					border-right solid 14px transparent
+					border-bottom solid 14px rgba(0, 0, 0, 0.1)
+					border-left solid 14px transparent
+
+				&:after
+					content ""
+					pointer-events none
+					display block
+					position absolute
+					top -27px
+					right 74px
+					border-top solid 14px transparent
+					border-right solid 14px transparent
+					border-bottom solid 14px #fff
+					border-left solid 14px transparent
+
+				> mk-notifications
+					max-height 350px
+					font-size 1rem
+					overflow auto
+
+	</style>
+	<script lang="typescript">
+		import contains from '../../common/scripts/contains';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		if (this.SIGNIN) {
+			this.mixin('stream');
+			this.connection = this.stream.getConnection();
+			this.connectionId = this.stream.use();
+		}
+
+		this.isOpen = false;
+
+		this.on('mount', () => {
+			if (this.SIGNIN) {
+				this.connection.on('read_all_notifications', this.onReadAllNotifications);
+				this.connection.on('unread_notification', this.onUnreadNotification);
+
+				// Fetch count of unread notifications
+				this.api('notifications/get_unread_count').then(res => {
+					if (res.count > 0) {
+						this.update({
+							hasUnreadNotifications: true
+						});
+					}
+				});
+			}
+		});
+
+		this.on('unmount', () => {
+			if (this.SIGNIN) {
+				this.connection.off('read_all_notifications', this.onReadAllNotifications);
+				this.connection.off('unread_notification', this.onUnreadNotification);
+				this.stream.dispose(this.connectionId);
+			}
+		});
+
+		this.onReadAllNotifications = () => {
+			this.update({
+				hasUnreadNotifications: false
+			});
+		};
+
+		this.onUnreadNotification = () => {
+			this.update({
+				hasUnreadNotifications: true
+			});
+		};
+
+		this.toggle = () => {
+			this.isOpen ? this.close() : this.open();
+		};
+
+		this.open = () => {
+			this.update({
+				isOpen: true
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.addEventListener('mousedown', this.mousedown);
+			});
+		};
+
+		this.close = () => {
+			this.update({
+				isOpen: false
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.removeEventListener('mousedown', this.mousedown);
+			});
+		};
+
+		this.mousedown = e => {
+			e.preventDefault();
+			if (!contains(this.root, e.target) && this.root != e.target) this.close();
+			return false;
+		};
+	</script>
+</mk-ui-header-notifications>
+
+<mk-ui-header-nav>
+	<ul>
+		<template v-if="SIGNIN">
+			<li class="home { active: page == 'home' }">
+				<a href={ _URL_ }>
+					%fa:home%
+					<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
+				</a>
+			</li>
+			<li class="messaging">
+				<a @click="messaging">
+					%fa:comments%
+					<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
+					<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
+				</a>
+			</li>
+		</template>
+		<li class="ch">
+			<a href={ _CH_URL_ } target="_blank">
+				%fa:tv%
+				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
+			</a>
+		</li>
+		<li class="info">
+			<a href="https://twitter.com/misskey_xyz" target="_blank">
+				%fa:info%
+				<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
+			</a>
+		</li>
+	</ul>
+	<style lang="stylus" scoped>
+		:scope
+			display inline-block
+			margin 0
+			padding 0
+			line-height 3rem
+			vertical-align top
+
+			> ul
+				display inline-block
+				margin 0
+				padding 0
+				vertical-align top
+				line-height 3rem
+				list-style none
+
+				> li
+					display inline-block
+					vertical-align top
+					height 48px
+					line-height 48px
+
+					&.active
+						> a
+							border-bottom solid 3px $theme-color
+
+					> a
+						display inline-block
+						z-index 1
+						height 100%
+						padding 0 24px
+						font-size 13px
+						font-variant small-caps
+						color #9eaba8
+						text-decoration none
+						transition none
+						cursor pointer
+
+						*
+							pointer-events none
+
+						&:hover
+							color darken(#9eaba8, 20%)
+							text-decoration none
+
+						> [data-fa]:first-child
+							margin-right 8px
+
+						> [data-fa]:last-child
+							margin-left 5px
+							font-size 10px
+							color $theme-color
+
+							@media (max-width 1100px)
+								margin-left -5px
+
+						> p
+							display inline
+							margin 0
+
+							@media (max-width 1100px)
+								display none
+
+						@media (max-width 700px)
+							padding 0 12px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		if (this.SIGNIN) {
+			this.mixin('stream');
+			this.connection = this.stream.getConnection();
+			this.connectionId = this.stream.use();
+		}
+
+		this.page = this.opts.page;
+
+		this.on('mount', () => {
+			if (this.SIGNIN) {
+				this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
+				this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
+
+				// Fetch count of unread messaging messages
+				this.api('messaging/unread').then(res => {
+					if (res.count > 0) {
+						this.update({
+							hasUnreadMessagingMessages: true
+						});
+					}
+				});
+			}
+		});
+
+		this.on('unmount', () => {
+			if (this.SIGNIN) {
+				this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
+				this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
+				this.stream.dispose(this.connectionId);
+			}
+		});
+
+		this.onReadAllMessagingMessages = () => {
+			this.update({
+				hasUnreadMessagingMessages: false
+			});
+		};
+
+		this.onUnreadMessagingMessage = () => {
+			this.update({
+				hasUnreadMessagingMessages: true
+			});
+		};
+
+		this.messaging = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-messaging-window')));
+		};
+	</script>
+</mk-ui-header-nav>
+
+<mk-ui-header-clock>
+	<div class="header">
+		<time ref="time">
+			<span class="yyyymmdd">{ yyyy }/{ mm }/{ dd }</span>
+			<br>
+			<span class="hhnn">{ hh }<span style="visibility:{ now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{ nn }</span>
+		</time>
+	</div>
+	<div class="content">
+		<mk-analog-clock/>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display inline-block
+			overflow visible
+
+			> .header
+				padding 0 12px
+				text-align center
+				font-size 10px
+
+				&, *
+					cursor: default
+
+				&:hover
+					background #899492
+
+					& + .content
+						visibility visible
+
+					> time
+						color #fff !important
+
+						*
+							color #fff !important
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				> time
+					display table-cell
+					vertical-align middle
+					height 48px
+					color #9eaba8
+
+					> .yyyymmdd
+						opacity 0.7
+
+			> .content
+				visibility hidden
+				display block
+				position absolute
+				top auto
+				right 0
+				z-index 3
+				margin 0
+				padding 0
+				width 256px
+				background #899492
+
+	</style>
+	<script lang="typescript">
+		this.now = new Date();
+
+		this.draw = () => {
+			const now = this.now = new Date();
+			this.yyyy = now.getFullYear();
+			this.mm = ('0' + (now.getMonth() + 1)).slice(-2);
+			this.dd = ('0' + now.getDate()).slice(-2);
+			this.hh = ('0' + now.getHours()).slice(-2);
+			this.nn = ('0' + now.getMinutes()).slice(-2);
+			this.update();
+		};
+
+		this.on('mount', () => {
+			this.draw();
+			this.clock = setInterval(this.draw, 1000);
+		});
+
+		this.on('unmount', () => {
+			clearInterval(this.clock);
+		});
+	</script>
+</mk-ui-header-clock>
+
+<mk-ui-header-account>
+	<button class="header" data-active={ isOpen.toString() } @click="toggle">
+		<span class="username">{ I.username }<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
+		<img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</button>
+	<div class="menu" v-if="isOpen">
+		<ul>
+			<li>
+				<a href={ '/' + I.username }>%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
+			</li>
+			<li @click="drive">
+				<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
+			</li>
+			<li>
+				<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
+			</li>
+		</ul>
+		<ul>
+			<li @click="settings">
+				<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
+			</li>
+		</ul>
+		<ul>
+			<li @click="signout">
+				<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
+			</li>
+		</ul>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			float left
+
+			> .header
+				display block
+				margin 0
+				padding 0
+				color #9eaba8
+				border none
+				background transparent
+				cursor pointer
+
+				*
+					pointer-events none
+
+				&:hover
+				&[data-active='true']
+					color darken(#9eaba8, 20%)
+
+					> .avatar
+						filter saturate(150%)
+
+				&:active
+					color darken(#9eaba8, 30%)
+
+				> .username
+					display block
+					float left
+					margin 0 12px 0 16px
+					max-width 16em
+					line-height 48px
+					font-weight bold
+					font-family Meiryo, sans-serif
+					text-decoration none
+
+					[data-fa]
+						margin-left 8px
+
+				> .avatar
+					display block
+					float left
+					min-width 32px
+					max-width 32px
+					min-height 32px
+					max-height 32px
+					margin 8px 8px 8px 0
+					border-radius 4px
+					transition filter 100ms ease
+
+			> .menu
+				display block
+				position absolute
+				top 56px
+				right -2px
+				width 230px
+				font-size 0.8em
+				background #fff
+				border-radius 4px
+				box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+
+				&:before
+					content ""
+					pointer-events none
+					display block
+					position absolute
+					top -28px
+					right 12px
+					border-top solid 14px transparent
+					border-right solid 14px transparent
+					border-bottom solid 14px rgba(0, 0, 0, 0.1)
+					border-left solid 14px transparent
+
+				&:after
+					content ""
+					pointer-events none
+					display block
+					position absolute
+					top -27px
+					right 12px
+					border-top solid 14px transparent
+					border-right solid 14px transparent
+					border-bottom solid 14px #fff
+					border-left solid 14px transparent
+
+				ul
+					display block
+					margin 10px 0
+					padding 0
+					list-style none
+
+					& + ul
+						padding-top 10px
+						border-top solid 1px #eee
+
+					> li
+						display block
+						margin 0
+						padding 0
+
+						> a
+						> p
+							display block
+							z-index 1
+							padding 0 28px
+							margin 0
+							line-height 40px
+							color #868C8C
+							cursor pointer
+
+							*
+								pointer-events none
+
+							> [data-fa]:first-of-type
+								margin-right 6px
+
+							> [data-fa]:last-of-type
+								display block
+								position absolute
+								top 0
+								right 8px
+								z-index 1
+								padding 0 20px
+								font-size 1.2em
+								line-height 40px
+
+							&:hover, &:active
+								text-decoration none
+								background $theme-color
+								color $theme-color-foreground
+
+	</style>
+	<script lang="typescript">
+		import contains from '../../common/scripts/contains';
+		import signout from '../../common/scripts/signout';
+		this.signout = signout;
+
+		this.mixin('i');
+
+		this.isOpen = false;
+
+		this.on('before-unmount', () => {
+			this.close();
+		});
+
+		this.toggle = () => {
+			this.isOpen ? this.close() : this.open();
+		};
+
+		this.open = () => {
+			this.update({
+				isOpen: true
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.addEventListener('mousedown', this.mousedown);
+			});
+		};
+
+		this.close = () => {
+			this.update({
+				isOpen: false
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.removeEventListener('mousedown', this.mousedown);
+			});
+		};
+
+		this.mousedown = e => {
+			e.preventDefault();
+			if (!contains(this.root, e.target) && this.root != e.target) this.close();
+			return false;
+		};
+
+		this.drive = () => {
+			this.close();
+			riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-window')));
+		};
+
+		this.settings = () => {
+			this.close();
+			riot.mount(document.body.appendChild(document.createElement('mk-settings-window')));
+		};
+
+	</script>
+</mk-ui-header-account>
+
+<mk-ui-notification>
+	<p>{ opts.message }</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position fixed
+			z-index 10000
+			top -128px
+			left 0
+			right 0
+			margin 0 auto
+			padding 128px 0 0 0
+			width 500px
+			color rgba(#000, 0.6)
+			background rgba(#fff, 0.9)
+			border-radius 0 0 8px 8px
+			box-shadow 0 2px 4px rgba(#000, 0.2)
+			transform translateY(-64px)
+			opacity 0
+
+			> p
+				margin 0
+				line-height 64px
+				text-align center
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.on('mount', () => {
+			anime({
+				targets: this.root,
+				opacity: 1,
+				translateY: [-64, 0],
+				easing: 'easeOutElastic',
+				duration: 500
+			});
+
+			setTimeout(() => {
+				anime({
+					targets: this.root,
+					opacity: 0,
+					translateY: -64,
+					duration: 500,
+					easing: 'easeInElastic',
+					complete: () => this.$destroy()
+				});
+			}, 6000);
+		});
+	</script>
+</mk-ui-notification>
diff --git a/src/web/app/desktop/-tags/user-followers-window.tag b/src/web/app/desktop/-tags/user-followers-window.tag
new file mode 100644
index 0000000000..82bec6992d
--- /dev/null
+++ b/src/web/app/desktop/-tags/user-followers-window.tag
@@ -0,0 +1,19 @@
+<mk-user-followers-window>
+	<mk-window is-modal={ false } width={ '400px' } height={ '550px' }><yield to="header"><img src={ parent.user.avatar_url + '?thumbnail&size=64' } alt=""/>{ parent.user.name }のフォロワー</yield>
+<yield to="content">
+		<mk-user-followers user={ parent.user }/></yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> img
+						display inline-block
+						vertical-align bottom
+						height calc(100% - 10px)
+						margin 5px
+						border-radius 4px
+
+	</style>
+	<script lang="typescript">this.user = this.opts.user</script>
+</mk-user-followers-window>
diff --git a/src/web/app/desktop/-tags/user-followers.tag b/src/web/app/desktop/-tags/user-followers.tag
new file mode 100644
index 0000000000..a1b44f0f5b
--- /dev/null
+++ b/src/web/app/desktop/-tags/user-followers.tag
@@ -0,0 +1,23 @@
+<mk-user-followers>
+	<mk-users-list fetch={ fetch } count={ user.followers_count } you-know-count={ user.followers_you_know_count } no-users={ 'フォロワーはいないようです。' }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			height 100%
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = this.opts.user;
+
+		this.fetch = (iknow, limit, cursor, cb) => {
+			this.api('users/followers', {
+				user_id: this.user.id,
+				iknow: iknow,
+				limit: limit,
+				cursor: cursor ? cursor : undefined
+			}).then(cb);
+		};
+	</script>
+</mk-user-followers>
diff --git a/src/web/app/desktop/-tags/user-following-window.tag b/src/web/app/desktop/-tags/user-following-window.tag
new file mode 100644
index 0000000000..0f1c4b3ea6
--- /dev/null
+++ b/src/web/app/desktop/-tags/user-following-window.tag
@@ -0,0 +1,19 @@
+<mk-user-following-window>
+	<mk-window is-modal={ false } width={ '400px' } height={ '550px' }><yield to="header"><img src={ parent.user.avatar_url + '?thumbnail&size=64' } alt=""/>{ parent.user.name }のフォロー</yield>
+<yield to="content">
+		<mk-user-following user={ parent.user }/></yield>
+	</mk-window>
+	<style lang="stylus" scoped>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> img
+						display inline-block
+						vertical-align bottom
+						height calc(100% - 10px)
+						margin 5px
+						border-radius 4px
+
+	</style>
+	<script lang="typescript">this.user = this.opts.user</script>
+</mk-user-following-window>
diff --git a/src/web/app/desktop/-tags/user-following.tag b/src/web/app/desktop/-tags/user-following.tag
new file mode 100644
index 0000000000..db46bf110e
--- /dev/null
+++ b/src/web/app/desktop/-tags/user-following.tag
@@ -0,0 +1,23 @@
+<mk-user-following>
+	<mk-users-list fetch={ fetch } count={ user.following_count } you-know-count={ user.following_you_know_count } no-users={ 'フォロー中のユーザーはいないようです。' }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			height 100%
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = this.opts.user;
+
+		this.fetch = (iknow, limit, cursor, cb) => {
+			this.api('users/following', {
+				user_id: this.user.id,
+				iknow: iknow,
+				limit: limit,
+				cursor: cursor ? cursor : undefined
+			}).then(cb);
+		};
+	</script>
+</mk-user-following>
diff --git a/src/web/app/desktop/-tags/user-preview.tag b/src/web/app/desktop/-tags/user-preview.tag
new file mode 100644
index 0000000000..10c37de641
--- /dev/null
+++ b/src/web/app/desktop/-tags/user-preview.tag
@@ -0,0 +1,149 @@
+<mk-user-preview>
+	<template v-if="user != null">
+		<div class="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=512)' : '' }></div><a class="avatar" href={ '/' + user.username } target="_blank"><img src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+		<div class="title">
+			<p class="name">{ user.name }</p>
+			<p class="username">@{ user.username }</p>
+		</div>
+		<div class="description">{ user.description }</div>
+		<div class="status">
+			<div>
+				<p>投稿</p><a>{ user.posts_count }</a>
+			</div>
+			<div>
+				<p>フォロー</p><a>{ user.following_count }</a>
+			</div>
+			<div>
+				<p>フォロワー</p><a>{ user.followers_count }</a>
+			</div>
+		</div>
+		<mk-follow-button v-if="SIGNIN && user.id != I.id" user={ userPromise }/>
+	</template>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position absolute
+			z-index 2048
+			margin-top -8px
+			width 250px
+			background #fff
+			background-clip content-box
+			border solid 1px rgba(0, 0, 0, 0.1)
+			border-radius 4px
+			overflow hidden
+			opacity 0
+
+			> .banner
+				height 84px
+				background-color #f5f5f5
+				background-size cover
+				background-position center
+
+			> .avatar
+				display block
+				position absolute
+				top 62px
+				left 13px
+
+				> img
+					display block
+					width 58px
+					height 58px
+					margin 0
+					border solid 3px #fff
+					border-radius 8px
+
+			> .title
+				display block
+				padding 8px 0 8px 82px
+
+				> .name
+					display block
+					margin 0
+					font-weight bold
+					line-height 16px
+					color #656565
+
+				> .username
+					display block
+					margin 0
+					line-height 16px
+					font-size 0.8em
+					color #999
+
+			> .description
+				padding 0 16px
+				font-size 0.7em
+				color #555
+
+			> .status
+				padding 8px 16px
+
+				> div
+					display inline-block
+					width 33%
+
+					> p
+						margin 0
+						font-size 0.7em
+						color #aaa
+
+					> a
+						font-size 1em
+						color $theme-color
+
+			> mk-follow-button
+				position absolute
+				top 92px
+				right 8px
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.u = this.opts.user;
+		this.user = null;
+		this.userPromise =
+			typeof this.u == 'string' ?
+				new Promise((resolve, reject) => {
+					this.api('users/show', {
+						user_id: this.u[0] == '@' ? undefined : this.u,
+						username: this.u[0] == '@' ? this.u.substr(1) : undefined
+					}).then(resolve);
+				})
+			: Promise.resolve(this.u);
+
+		this.on('mount', () => {
+			this.userPromise.then(user => {
+				this.update({
+					user: user
+				});
+				this.open();
+			});
+		});
+
+		this.open = () => {
+			anime({
+				targets: this.root,
+				opacity: 1,
+				'margin-top': 0,
+				duration: 200,
+				easing: 'easeOutQuad'
+			});
+		};
+
+		this.close = () => {
+			anime({
+				targets: this.root,
+				opacity: 0,
+				'margin-top': '-8px',
+				duration: 200,
+				easing: 'easeOutQuad',
+				complete: () => this.$destroy()
+			});
+		};
+	</script>
+</mk-user-preview>
diff --git a/src/web/app/desktop/-tags/user-timeline.tag b/src/web/app/desktop/-tags/user-timeline.tag
new file mode 100644
index 0000000000..f018ba64e1
--- /dev/null
+++ b/src/web/app/desktop/-tags/user-timeline.tag
@@ -0,0 +1,150 @@
+<mk-user-timeline>
+	<header>
+		<span data-is-active={ mode == 'default' } @click="setMode.bind(this, 'default')">投稿</span><span data-is-active={ mode == 'with-replies' } @click="setMode.bind(this, 'with-replies')">投稿と返信</span>
+	</header>
+	<div class="loading" v-if="isLoading">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="isEmpty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
+	<mk-timeline ref="timeline">
+		<yield to="footer">
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
+		</yield/>
+	</mk-timeline>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+
+			> header
+				padding 8px 16px
+				border-bottom solid 1px #eee
+
+				> span
+					margin-right 16px
+					line-height 27px
+					font-size 18px
+					color #555
+
+					&:not([data-is-active])
+						color $theme-color
+						cursor pointer
+
+						&:hover
+							text-decoration underline
+
+			> .loading
+				padding 64px 0
+
+			> .empty
+				display block
+				margin 0 auto
+				padding 32px
+				max-width 400px
+				text-align center
+				color #999
+
+				> [data-fa]
+					display block
+					margin-bottom 16px
+					font-size 3em
+					color #ccc
+
+	</style>
+	<script lang="typescript">
+		import isPromise from '../../common/scripts/is-promise';
+
+		this.mixin('api');
+
+		this.user = null;
+		this.userPromise = isPromise(this.opts.user)
+			? this.opts.user
+			: Promise.resolve(this.opts.user);
+		this.isLoading = true;
+		this.isEmpty = false;
+		this.moreLoading = false;
+		this.unreadCount = 0;
+		this.mode = 'default';
+
+		this.on('mount', () => {
+			document.addEventListener('keydown', this.onDocumentKeydown);
+			window.addEventListener('scroll', this.onScroll);
+
+			this.userPromise.then(user => {
+				this.update({
+					user: user
+				});
+
+				this.fetch(() => this.$emit('loaded'));
+			});
+		});
+
+		this.on('unmount', () => {
+			document.removeEventListener('keydown', this.onDocumentKeydown);
+			window.removeEventListener('scroll', this.onScroll);
+		});
+
+		this.onDocumentKeydown = e => {
+			if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+				if (e.which == 84) { // [t]
+					this.$refs.timeline.focus();
+				}
+			}
+		};
+
+		this.fetch = cb => {
+			this.api('users/posts', {
+				user_id: this.user.id,
+				until_date: this.date ? this.date.getTime() : undefined,
+				with_replies: this.mode == 'with-replies'
+			}).then(posts => {
+				this.update({
+					isLoading: false,
+					isEmpty: posts.length == 0
+				});
+				this.$refs.timeline.setPosts(posts);
+				if (cb) cb();
+			});
+		};
+
+		this.more = () => {
+			if (this.moreLoading || this.isLoading || this.$refs.timeline.posts.length == 0) return;
+			this.update({
+				moreLoading: true
+			});
+			this.api('users/posts', {
+				user_id: this.user.id,
+				with_replies: this.mode == 'with-replies',
+				until_id: this.$refs.timeline.tail().id
+			}).then(posts => {
+				this.update({
+					moreLoading: false
+				});
+				this.$refs.timeline.prependPosts(posts);
+			});
+		};
+
+		this.onScroll = () => {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 16/*遊び*/) {
+				this.more();
+			}
+		};
+
+		this.setMode = mode => {
+			this.update({
+				mode: mode
+			});
+			this.fetch();
+		};
+
+		this.warp = date => {
+			this.update({
+				date: date
+			});
+
+			this.fetch();
+		};
+	</script>
+</mk-user-timeline>
diff --git a/src/web/app/desktop/-tags/user.tag b/src/web/app/desktop/-tags/user.tag
new file mode 100644
index 0000000000..8221926f45
--- /dev/null
+++ b/src/web/app/desktop/-tags/user.tag
@@ -0,0 +1,852 @@
+<mk-user>
+	<div class="user" v-if="!fetching">
+		<header>
+			<mk-user-header user={ user }/>
+		</header>
+		<mk-user-home v-if="page == 'home'" user={ user }/>
+		<mk-user-graphs v-if="page == 'graphs'" user={ user }/>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .user
+				> header
+					> mk-user-header
+						overflow hidden
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.username = this.opts.user;
+		this.page = this.opts.page ? this.opts.page : 'home';
+		this.fetching = true;
+		this.user = null;
+
+		this.on('mount', () => {
+			this.api('users/show', {
+				username: this.username
+			}).then(user => {
+				this.update({
+					fetching: false,
+					user: user
+				});
+				this.$emit('loaded');
+			});
+		});
+	</script>
+</mk-user>
+
+<mk-user-header data-is-dark-background={ user.banner_url != null }>
+	<div class="banner-container" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' }>
+		<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' } @click="onUpdateBanner"></div>
+	</div>
+	<div class="fade"></div>
+	<div class="container">
+		<img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/>
+		<div class="title">
+			<p class="name" href={ '/' + user.username }>{ user.name }</p>
+			<p class="username">@{ user.username }</p>
+			<p class="location" v-if="user.profile.location">%fa:map-marker%{ user.profile.location }</p>
+		</div>
+		<footer>
+			<a href={ '/' + user.username } data-active={ parent.page == 'home' }>%fa:home%概要</a>
+			<a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }>%fa:image%メディア</a>
+			<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }>%fa:chart-bar%グラフ</a>
+		</footer>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			$banner-height = 320px
+			$footer-height = 58px
+
+			display block
+			background #f7f7f7
+			box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+			&[data-is-dark-background]
+				> .banner-container
+					> .banner
+						background-color #383838
+
+				> .fade
+					background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
+
+				> .container
+					> .title
+						color #fff
+
+						> .name
+							text-shadow 0 0 8px #000
+
+			> .banner-container
+				height $banner-height
+				overflow hidden
+				background-size cover
+				background-position center
+
+				> .banner
+					height 100%
+					background-color #f5f5f5
+					background-size cover
+					background-position center
+
+			> .fade
+				$fade-hight = 78px
+
+				position absolute
+				top ($banner-height - $fade-hight)
+				left 0
+				width 100%
+				height $fade-hight
+
+			> .container
+				max-width 1200px
+				margin 0 auto
+
+				> .avatar
+					display block
+					position absolute
+					bottom 16px
+					left 16px
+					z-index 2
+					width 160px
+					height 160px
+					margin 0
+					border solid 3px #fff
+					border-radius 8px
+					box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
+
+				> .title
+					position absolute
+					bottom $footer-height
+					left 0
+					width 100%
+					padding 0 0 8px 195px
+					color #656565
+					font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
+
+					> .name
+						display block
+						margin 0
+						line-height 40px
+						font-weight bold
+						font-size 2em
+
+					> .username
+					> .location
+						display inline-block
+						margin 0 16px 0 0
+						line-height 20px
+						opacity 0.8
+
+						> i
+							margin-right 4px
+
+				> footer
+					z-index 1
+					height $footer-height
+					padding-left 195px
+
+					> a
+						display inline-block
+						margin 0
+						padding 0 16px
+						height $footer-height
+						line-height $footer-height
+						color #555
+
+						&[data-active]
+							border-bottom solid 4px $theme-color
+
+						> i
+							margin-right 6px
+
+					> button
+						display block
+						position absolute
+						top 0
+						right 0
+						margin 8px
+						padding 0
+						width $footer-height - 16px
+						line-height $footer-height - 16px - 2px
+						font-size 1.2em
+						color #777
+						border solid 1px #eee
+						border-radius 4px
+
+						&:hover
+							color #555
+							border solid 1px #ddd
+
+	</style>
+	<script lang="typescript">
+		import updateBanner from '../scripts/update-banner';
+
+		this.mixin('i');
+
+		this.user = this.opts.user;
+
+		this.on('mount', () => {
+			window.addEventListener('load', this.scroll);
+			window.addEventListener('scroll', this.scroll);
+			window.addEventListener('resize', this.scroll);
+		});
+
+		this.on('unmount', () => {
+			window.removeEventListener('load', this.scroll);
+			window.removeEventListener('scroll', this.scroll);
+			window.removeEventListener('resize', this.scroll);
+		});
+
+		this.scroll = () => {
+			const top = window.scrollY;
+
+			const z = 1.25; // 奥行き(小さいほど奥)
+			const pos = -(top / z);
+			this.$refs.banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
+
+			const blur = top / 32
+			if (blur <= 10) this.$refs.banner.style.filter = `blur(${blur}px)`;
+		};
+
+		this.onUpdateBanner = () => {
+			if (!this.SIGNIN || this.I.id != this.user.id) return;
+
+			updateBanner(this.I, i => {
+				this.user.banner_url = i.banner_url;
+				this.update();
+			});
+		};
+	</script>
+</mk-user-header>
+
+<mk-user-profile>
+	<div class="friend-form" v-if="SIGNIN && I.id != user.id">
+		<mk-big-follow-button user={ user }/>
+		<p class="followed" v-if="user.is_followed">%i18n:desktop.tags.mk-user.follows-you%</p>
+		<p v-if="user.is_muted">%i18n:desktop.tags.mk-user.muted% <a @click="unmute">%i18n:desktop.tags.mk-user.unmute%</a></p>
+		<p v-if="!user.is_muted"><a @click="mute">%i18n:desktop.tags.mk-user.mute%</a></p>
+	</div>
+	<div class="description" v-if="user.description">{ user.description }</div>
+	<div class="birthday" v-if="user.profile.birthday">
+		<p>%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
+	</div>
+	<div class="twitter" v-if="user.twitter">
+		<p>%fa:B twitter%<a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
+	</div>
+	<div class="status">
+	  <p class="posts-count">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p>
+		<p class="following">%fa:angle-right%<a @click="showFollowing">{ user.following_count }</a>人を<b>フォロー</b></p>
+		<p class="followers">%fa:angle-right%<a @click="showFollowers">{ user.followers_count }</a>人の<b>フォロワー</b></p>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> *:first-child
+				border-top none !important
+
+			> .friend-form
+				padding 16px
+				border-top solid 1px #eee
+
+				> mk-big-follow-button
+					width 100%
+
+				> .followed
+					margin 12px 0 0 0
+					padding 0
+					text-align center
+					line-height 24px
+					font-size 0.8em
+					color #71afc7
+					background #eefaff
+					border-radius 4px
+
+			> .description
+				padding 16px
+				color #555
+				border-top solid 1px #eee
+
+			> .birthday
+				padding 16px
+				color #555
+				border-top solid 1px #eee
+
+				> p
+					margin 0
+
+					> i
+						margin-right 8px
+
+			> .twitter
+				padding 16px
+				color #555
+				border-top solid 1px #eee
+
+				> p
+					margin 0
+
+					> i
+						margin-right 8px
+
+			> .status
+				padding 16px
+				color #555
+				border-top solid 1px #eee
+
+				> p
+					margin 8px 0
+
+					> i
+						margin-left 8px
+						margin-right 8px
+
+	</style>
+	<script lang="typescript">
+		this.age = require('s-age');
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.user = this.opts.user;
+
+		this.showFollowing = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-user-following-window')), {
+				user: this.user
+			});
+		};
+
+		this.showFollowers = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-user-followers-window')), {
+				user: this.user
+			});
+		};
+
+		this.mute = () => {
+			this.api('mute/create', {
+				user_id: this.user.id
+			}).then(() => {
+				this.user.is_muted = true;
+				this.update();
+			}, e => {
+				alert('error');
+			});
+		};
+
+		this.unmute = () => {
+			this.api('mute/delete', {
+				user_id: this.user.id
+			}).then(() => {
+				this.user.is_muted = false;
+				this.update();
+			}, e => {
+				alert('error');
+			});
+		};
+	</script>
+</mk-user-profile>
+
+<mk-user-photos>
+	<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
+	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
+	<div class="stream" v-if="!initializing && images.length > 0">
+		<template each={ image in images }>
+			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
+		</template>
+	</div>
+	<p class="empty" v-if="!initializing && images.length == 0">%i18n:desktop.tags.mk-user.photos.no-photos%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> i
+					margin-right 4px
+
+			> .stream
+				display -webkit-flex
+				display -moz-flex
+				display -ms-flex
+				display flex
+				justify-content center
+				flex-wrap wrap
+				padding 8px
+
+				> .img
+					flex 1 1 33%
+					width 33%
+					height 80px
+					background-position center center
+					background-size cover
+					background-clip content-box
+					border solid 2px transparent
+
+			> .initializing
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> i
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		import isPromise from '../../common/scripts/is-promise';
+
+		this.mixin('api');
+
+		this.images = [];
+		this.initializing = true;
+		this.user = null;
+		this.userPromise = isPromise(this.opts.user)
+			? this.opts.user
+			: Promise.resolve(this.opts.user);
+
+		this.on('mount', () => {
+			this.userPromise.then(user => {
+				this.update({
+					user: user
+				});
+
+				this.api('users/posts', {
+					user_id: this.user.id,
+					with_media: true,
+					limit: 9
+				}).then(posts => {
+					this.initializing = false;
+					posts.forEach(post => {
+						post.media.forEach(media => {
+							if (this.images.length < 9) this.images.push(media);
+						});
+					});
+					this.update();
+				});
+			});
+		});
+	</script>
+</mk-user-photos>
+
+<mk-user-frequently-replied-users>
+	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
+	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
+	<div class="user" v-if="!initializing && users.length != 0" each={ _user in users }>
+		<a class="avatar-anchor" href={ '/' + _user.username }>
+			<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>
+		</a>
+		<div class="body">
+			<a class="name" href={ '/' + _user.username } data-user-preview={ _user.id }>{ _user.name }</a>
+			<p class="username">@{ _user.username }</p>
+		</div>
+		<mk-follow-button user={ _user }/>
+	</div>
+	<p class="empty" v-if="!initializing && users.length == 0">%i18n:desktop.tags.mk-user.frequently-replied-users.no-users%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> i
+					margin-right 4px
+
+			> .initializing
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> i
+					margin-right 4px
+
+			> .user
+				padding 16px
+				border-bottom solid 1px #eee
+
+				&:last-child
+					border-bottom none
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				> .avatar-anchor
+					display block
+					float left
+					margin 0 12px 0 0
+
+					> .avatar
+						display block
+						width 42px
+						height 42px
+						margin 0
+						border-radius 8px
+						vertical-align bottom
+
+				> .body
+					float left
+					width calc(100% - 54px)
+
+					> .name
+						margin 0
+						font-size 16px
+						line-height 24px
+						color #555
+
+					> .username
+						display block
+						margin 0
+						font-size 15px
+						line-height 16px
+						color #ccc
+
+				> mk-follow-button
+					position absolute
+					top 16px
+					right 16px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = this.opts.user;
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.api('users/get_frequently_replied_users', {
+				user_id: this.user.id,
+				limit: 4
+			}).then(docs => {
+				this.update({
+					users: docs.map(doc => doc.user),
+					initializing: false
+				});
+			});
+		});
+	</script>
+</mk-user-frequently-replied-users>
+
+<mk-user-followers-you-know>
+	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
+	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
+	<div v-if="!initializing && users.length > 0">
+	<template each={ user in users }>
+		<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
+	</template>
+	</div>
+	<p class="empty" v-if="!initializing && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> i
+					margin-right 4px
+
+			> div
+				padding 8px
+
+				> a
+					display inline-block
+					margin 4px
+
+					> img
+						width 48px
+						height 48px
+						vertical-align bottom
+						border-radius 100%
+
+			> .initializing
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> i
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = this.opts.user;
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.api('users/followers', {
+				user_id: this.user.id,
+				iknow: true,
+				limit: 16
+			}).then(x => {
+				this.update({
+					users: x.users,
+					initializing: false
+				});
+			});
+		});
+	</script>
+</mk-user-followers-you-know>
+
+<mk-user-home>
+	<div>
+		<div ref="left">
+			<mk-user-profile user={ user }/>
+			<mk-user-photos user={ user }/>
+			<mk-user-followers-you-know v-if="SIGNIN && I.id !== user.id" user={ user }/>
+			<p>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time time={ user.last_used_at }/></b></p>
+		</div>
+	</div>
+	<main>
+		<mk-post-detail v-if="user.pinned_post" post={ user.pinned_post } compact={ true }/>
+		<mk-user-timeline ref="tl" user={ user }/>
+	</main>
+	<div>
+		<div ref="right">
+			<mk-calendar-widget warp={ warp } start={ new Date(user.created_at) }/>
+			<mk-activity-widget user={ user }/>
+			<mk-user-frequently-replied-users user={ user }/>
+			<div class="nav"><mk-nav-links/></div>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display flex
+			justify-content center
+			margin 0 auto
+			max-width 1200px
+
+			> main
+			> div > div
+				> *:not(:last-child)
+					margin-bottom 16px
+
+			> main
+				padding 16px
+				width calc(100% - 275px * 2)
+
+				> mk-user-timeline
+					border solid 1px rgba(0, 0, 0, 0.075)
+					border-radius 6px
+
+			> div
+				width 275px
+				margin 0
+
+				&:first-child > div
+					padding 16px 0 16px 16px
+
+					> p
+						display block
+						margin 0
+						padding 0 12px
+						text-align center
+						font-size 0.8em
+						color #aaa
+
+				&:last-child > div
+					padding 16px 16px 16px 0
+
+					> .nav
+						padding 16px
+						font-size 12px
+						color #aaa
+						background #fff
+						border solid 1px rgba(0, 0, 0, 0.075)
+						border-radius 6px
+
+						a
+							color #999
+
+						i
+							color #ccc
+
+	</style>
+	<script lang="typescript">
+		import ScrollFollower from '../scripts/scroll-follower';
+
+		this.mixin('i');
+
+		this.user = this.opts.user;
+
+		this.on('mount', () => {
+			this.$refs.tl.on('loaded', () => {
+				this.$emit('loaded');
+			});
+
+			this.scrollFollowerLeft = new ScrollFollower(this.$refs.left, this.parent.root.getBoundingClientRect().top);
+			this.scrollFollowerRight = new ScrollFollower(this.$refs.right, this.parent.root.getBoundingClientRect().top);
+		});
+
+		this.on('unmount', () => {
+			this.scrollFollowerLeft.dispose();
+			this.scrollFollowerRight.dispose();
+		});
+
+		this.warp = date => {
+			this.$refs.tl.warp(date);
+		};
+	</script>
+</mk-user-home>
+
+<mk-user-graphs>
+	<section>
+		<div>
+			<h1>%fa:pencil-alt%投稿</h1>
+			<mk-user-graphs-activity-chart user={ opts.user }/>
+		</div>
+	</section>
+	<section>
+		<div>
+			<h1>フォロー/フォロワー</h1>
+			<mk-user-friends-graph user={ opts.user }/>
+		</div>
+	</section>
+	<section>
+		<div>
+			<h1>いいね</h1>
+			<mk-user-likes-graph user={ opts.user }/>
+		</div>
+	</section>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> section
+				margin 16px 0
+				color #666
+				border-bottom solid 1px rgba(0, 0, 0, 0.1)
+
+				> div
+					max-width 1200px
+					margin 0 auto
+					padding 0 16px
+
+					> h1
+						margin 0 0 16px 0
+						padding 0
+						font-size 1.3em
+
+						> i
+							margin-right 8px
+
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			this.$emit('loaded');
+		});
+	</script>
+</mk-user-graphs>
+
+<mk-user-graphs-activity-chart>
+	<svg v-if="data" ref="canvas" viewBox="0 0 365 1" preserveAspectRatio="none">
+		<g each={ d, i in data.reverse() }>
+			<rect width="0.8" riot-height={ d.postsH }
+				riot-x={ i + 0.1 } riot-y={ 1 - d.postsH - d.repliesH - d.repostsH }
+				fill="#41ddde"/>
+			<rect width="0.8" riot-height={ d.repliesH }
+				riot-x={ i + 0.1 } riot-y={ 1 - d.repliesH - d.repostsH }
+				fill="#f7796c"/>
+			<rect width="0.8" riot-height={ d.repostsH }
+				riot-x={ i + 0.1 } riot-y={ 1 - d.repostsH }
+				fill="#a1de41"/>
+			</g>
+	</svg>
+	<p>直近1年間分の統計です。一番右が現在で、一番左が1年前です。青は通常の投稿、赤は返信、緑はRepostをそれぞれ表しています。</p>
+	<p>
+		<span>だいたい*1日に<b>{ averageOfAllTypePostsEachDays }回</b>投稿(返信、Repost含む)しています。</span><br>
+		<span>だいたい*1日に<b>{ averageOfPostsEachDays }回</b>投稿(通常の)しています。</span><br>
+		<span>だいたい*1日に<b>{ averageOfRepliesEachDays }回</b>返信しています。</span><br>
+		<span>だいたい*1日に<b>{ averageOfRepostsEachDays }回</b>Repostしています。</span><br>
+	</p>
+	<p>* 中央値</p>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> svg
+				display block
+				width 100%
+				height 180px
+
+				> rect
+					transform-origin center
+
+	</style>
+	<script lang="typescript">
+		import getMedian from '../../common/scripts/get-median';
+
+		this.mixin('api');
+
+		this.user = this.opts.user;
+
+		this.on('mount', () => {
+			this.api('aggregation/users/activity', {
+				user_id: this.user.id,
+				limit: 365
+			}).then(data => {
+				data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+				this.peak = Math.max.apply(null, data.map(d => d.total));
+				data.forEach(d => {
+					d.postsH = d.posts / this.peak;
+					d.repliesH = d.replies / this.peak;
+					d.repostsH = d.reposts / this.peak;
+				});
+
+				this.update({
+					data,
+					averageOfAllTypePostsEachDays: getMedian(data.map(d => d.total)),
+					averageOfPostsEachDays: getMedian(data.map(d => d.posts)),
+					averageOfRepliesEachDays: getMedian(data.map(d => d.replies)),
+					averageOfRepostsEachDays: getMedian(data.map(d => d.reposts))
+				});
+			});
+		});
+	</script>
+</mk-user-graphs-activity-chart>
diff --git a/src/web/app/desktop/-tags/users-list.tag b/src/web/app/desktop/-tags/users-list.tag
new file mode 100644
index 0000000000..bf002ae552
--- /dev/null
+++ b/src/web/app/desktop/-tags/users-list.tag
@@ -0,0 +1,138 @@
+<mk-users-list>
+	<nav>
+		<div>
+			<span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて<span>{ opts.count }</span></span>
+			<span v-if="SIGNIN && opts.youKnowCount" data-is-active={ mode == 'iknow' } @click="setMode.bind(this, 'iknow')">知り合い<span>{ opts.youKnowCount }</span></span>
+		</div>
+	</nav>
+	<div class="users" v-if="!fetching && users.length != 0">
+		<div each={ users }>
+			<mk-list-user user={ this }/>
+		</div>
+	</div>
+	<button class="more" v-if="!fetching && next != null" @click="more" disabled={ moreFetching }>
+		<span v-if="!moreFetching">もっと</span>
+		<span v-if="moreFetching">読み込み中<mk-ellipsis/></span>
+	</button>
+	<p class="no" v-if="!fetching && users.length == 0">{ opts.noUsers }</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			height 100%
+			background #fff
+
+			> nav
+				z-index 1
+				box-shadow 0 1px 0 rgba(#000, 0.1)
+
+				> div
+					display flex
+					justify-content center
+					margin 0 auto
+					max-width 600px
+
+					> span
+						display block
+						flex 1 1
+						text-align center
+						line-height 52px
+						font-size 14px
+						color #657786
+						border-bottom solid 2px transparent
+						cursor pointer
+
+						*
+							pointer-events none
+
+						&[data-is-active]
+							font-weight bold
+							color $theme-color
+							border-color $theme-color
+							cursor default
+
+						> span
+							display inline-block
+							margin-left 4px
+							padding 2px 5px
+							font-size 12px
+							line-height 1
+							color #888
+							background #eee
+							border-radius 20px
+
+			> .users
+				height calc(100% - 54px)
+				overflow auto
+
+				> *
+					border-bottom solid 1px rgba(0, 0, 0, 0.05)
+
+					> *
+						max-width 600px
+						margin 0 auto
+
+			> .no
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .fetching
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+
+		this.limit = 30;
+		this.mode = 'all';
+
+		this.fetching = true;
+		this.moreFetching = false;
+
+		this.on('mount', () => {
+			this.fetch(() => this.$emit('loaded'));
+		});
+
+		this.fetch = cb => {
+			this.update({
+				fetching: true
+			});
+			this.opts.fetch(this.mode == 'iknow', this.limit, null, obj => {
+				this.update({
+					fetching: false,
+					users: obj.users,
+					next: obj.next
+				});
+				if (cb) cb();
+			});
+		};
+
+		this.more = () => {
+			this.update({
+				moreFetching: true
+			});
+			this.opts.fetch(this.mode == 'iknow', this.limit, this.cursor, obj => {
+				this.update({
+					moreFetching: false,
+					users: this.users.concat(obj.users),
+					next: obj.next
+				});
+			});
+		};
+
+		this.setMode = mode => {
+			this.update({
+				mode: mode
+			});
+			this.fetch();
+		};
+	</script>
+</mk-users-list>
diff --git a/src/web/app/desktop/-tags/widgets/activity.tag b/src/web/app/desktop/-tags/widgets/activity.tag
new file mode 100644
index 0000000000..8c20ef5a68
--- /dev/null
+++ b/src/web/app/desktop/-tags/widgets/activity.tag
@@ -0,0 +1,246 @@
+<mk-activity-widget data-melt={ design == 2 }>
+	<template v-if="design == 0">
+		<p class="title">%fa:chart-bar%%i18n:desktop.tags.mk-activity-widget.title%</p>
+		<button @click="toggle" title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
+	</template>
+	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<mk-activity-widget-calender v-if="!initializing && view == 0" data={ [].concat(activity) }/>
+	<mk-activity-widget-chart v-if="!initializing && view == 1" data={ [].concat(activity) }/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			&[data-melt]
+				background transparent !important
+				border none !important
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .initializing
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.design = this.opts.design || 0;
+		this.view = this.opts.view || 0;
+
+		this.user = this.opts.user;
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.api('aggregation/users/activity', {
+				user_id: this.user.id,
+				limit: 20 * 7
+			}).then(activity => {
+				this.update({
+					initializing: false,
+					activity
+				});
+			});
+		});
+
+		this.toggle = () => {
+			this.view++;
+			if (this.view == 2) this.view = 0;
+			this.update();
+			this.$emit('view-changed', this.view);
+		};
+	</script>
+</mk-activity-widget>
+
+<mk-activity-widget-calender>
+	<svg viewBox="0 0 21 7" preserveAspectRatio="none">
+		<rect each={ data } class="day"
+			width="1" height="1"
+			riot-x={ x } riot-y={ date.weekday }
+			rx="1" ry="1"
+			fill="transparent">
+			<title>{ date.year }/{ date.month }/{ date.day }<br/>Post: { posts }, Reply: { replies }, Repost: { reposts }</title>
+		</rect>
+		<rect each={ data }
+			riot-width={ v } riot-height={ v }
+			riot-x={ x + ((1 - v) / 2) } riot-y={ date.weekday + ((1 - v) / 2) }
+			rx="1" ry="1"
+			fill={ color }
+			style="pointer-events: none;"/>
+		<rect class="today"
+			width="1" height="1"
+			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
+			rx="1" ry="1"
+			fill="none"
+			stroke-width="0.1"
+			stroke="#f73520"/>
+	</svg>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> svg
+				display block
+				padding 10px
+				width 100%
+
+				> rect
+					transform-origin center
+
+					&.day
+						&:hover
+							fill rgba(0, 0, 0, 0.05)
+
+	</style>
+	<script lang="typescript">
+		this.data = this.opts.data;
+		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		const peak = Math.max.apply(null, this.data.map(d => d.total));
+
+		let x = 0;
+		this.data.reverse().forEach(d => {
+			d.x = x;
+			d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
+
+			d.v = d.total / (peak / 2);
+			if (d.v > 1) d.v = 1;
+			const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
+			const cs = d.v * 100;
+			const cl = 15 + ((1 - d.v) * 80);
+			d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
+
+			if (d.date.weekday == 6) x++;
+		});
+	</script>
+</mk-activity-widget-calender>
+
+<mk-activity-widget-chart>
+	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none" onmousedown={ onMousedown }>
+		<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
+		<polyline
+			riot-points={ pointsPost }
+			fill="none"
+			stroke-width="1"
+			stroke="#41ddde"/>
+		<polyline
+			riot-points={ pointsReply }
+			fill="none"
+			stroke-width="1"
+			stroke="#f7796c"/>
+		<polyline
+			riot-points={ pointsRepost }
+			fill="none"
+			stroke-width="1"
+			stroke="#a1de41"/>
+		<polyline
+			riot-points={ pointsTotal }
+			fill="none"
+			stroke-width="1"
+			stroke="#555"
+			stroke-dasharray="2 2"/>
+	</svg>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> svg
+				display block
+				padding 10px
+				width 100%
+				cursor all-scroll
+	</style>
+	<script lang="typescript">
+		this.viewBoxX = 140;
+		this.viewBoxY = 60;
+		this.zoom = 1;
+		this.pos = 0;
+
+		this.data = this.opts.data.reverse();
+		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		const peak = Math.max.apply(null, this.data.map(d => d.total));
+
+		this.on('mount', () => {
+			this.render();
+		});
+
+		this.render = () => {
+			this.update({
+				pointsPost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' '),
+				pointsReply: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
+				pointsRepost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' '),
+				pointsTotal: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
+			});
+		};
+
+		this.onMousedown = e => {
+			e.preventDefault();
+
+			const clickX = e.clientX;
+			const clickY = e.clientY;
+			const baseZoom = this.zoom;
+			const basePos = this.pos;
+
+			// 動かした時
+			dragListen(me => {
+				let moveLeft = me.clientX - clickX;
+				let moveTop = me.clientY - clickY;
+
+				this.zoom = baseZoom + (-moveTop / 20);
+				this.pos = basePos + moveLeft;
+				if (this.zoom < 1) this.zoom = 1;
+				if (this.pos > 0) this.pos = 0;
+				if (this.pos < -(((this.data.length - 1) * this.zoom) - this.viewBoxX)) this.pos = -(((this.data.length - 1) * this.zoom) - this.viewBoxX);
+
+				this.render();
+			});
+		};
+
+		function dragListen(fn) {
+			window.addEventListener('mousemove',  fn);
+			window.addEventListener('mouseleave', dragClear.bind(null, fn));
+			window.addEventListener('mouseup',    dragClear.bind(null, fn));
+		}
+
+		function dragClear(fn) {
+			window.removeEventListener('mousemove',  fn);
+			window.removeEventListener('mouseleave', dragClear);
+			window.removeEventListener('mouseup',    dragClear);
+		}
+	</script>
+</mk-activity-widget-chart>
+
diff --git a/src/web/app/desktop/-tags/widgets/calendar.tag b/src/web/app/desktop/-tags/widgets/calendar.tag
new file mode 100644
index 0000000000..d20180f1c3
--- /dev/null
+++ b/src/web/app/desktop/-tags/widgets/calendar.tag
@@ -0,0 +1,241 @@
+<mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }>
+	<template v-if="opts.design == 0 || opts.design == 1">
+		<button @click="prev" title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
+		<p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
+		<button @click="next" title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
+	</template>
+
+	<div class="calendar">
+		<div class="weekday" v-if="opts.design == 0 || opts.design == 2 || opts.design == 4} each={ day, i in Array(7).fill(0)"
+			data-today={ year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i }
+			data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div>
+		<div each={ day, i in Array(paddingDays).fill(0) }></div>
+		<div class="day" each={ day, i in Array(days).fill(0) }
+				data-today={ isToday(i + 1) }
+				data-selected={ isSelected(i + 1) }
+				data-is-out-of-range={ isOutOfRange(i + 1) }
+				data-is-donichi={ isDonichi(i + 1) }
+				@click="go.bind(null, i + 1)"
+				title={ isOutOfRange(i + 1) ? null : '%i18n:desktop.tags.mk-calendar-widget.go%' }><div>{ i + 1 }</div></div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #777
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+			&[data-melt]
+				background transparent !important
+				border none !important
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				text-align center
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> [data-fa]
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+				&:first-of-type
+					left 0
+
+				&:last-of-type
+					right 0
+
+			> .calendar
+				display flex
+				flex-wrap wrap
+				padding 16px
+
+				*
+					user-select none
+
+				> div
+					width calc(100% * (1/7))
+					text-align center
+					line-height 32px
+					font-size 14px
+
+					&.weekday
+						color #19a2a9
+
+						&[data-is-donichi]
+							color #ef95a0
+
+						&[data-today]
+							box-shadow 0 0 0 1px #19a2a9 inset
+							border-radius 6px
+
+							&[data-is-donichi]
+								box-shadow 0 0 0 1px #ef95a0 inset
+
+					&.day
+						cursor pointer
+						color #777
+
+						> div
+							border-radius 6px
+
+						&:hover > div
+							background rgba(0, 0, 0, 0.025)
+
+						&:active > div
+							background rgba(0, 0, 0, 0.05)
+
+						&[data-is-donichi]
+							color #ef95a0
+
+						&[data-is-out-of-range]
+							cursor default
+							color rgba(#777, 0.5)
+
+							&[data-is-donichi]
+								color rgba(#ef95a0, 0.5)
+
+						&[data-selected]
+							font-weight bold
+
+							> div
+								background rgba(0, 0, 0, 0.025)
+
+							&:active > div
+								background rgba(0, 0, 0, 0.05)
+
+						&[data-today]
+							> div
+								color $theme-color-foreground
+								background $theme-color
+
+							&:hover > div
+								background lighten($theme-color, 10%)
+
+							&:active > div
+								background darken($theme-color, 10%)
+
+	</style>
+	<script lang="typescript">
+		if (this.opts.design == null) this.opts.design = 0;
+
+		const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+		function isLeapYear(year) {
+			return (year % 400 == 0) ? true :
+				(year % 100 == 0) ? false :
+					(year % 4 == 0) ? true :
+						false;
+		}
+
+		this.today = new Date();
+		this.year = this.today.getFullYear();
+		this.month = this.today.getMonth() + 1;
+		this.selected = this.today;
+		this.weekdayText = [
+			'%i18n:common.weekday-short.sunday%',
+			'%i18n:common.weekday-short.monday%',
+			'%i18n:common.weekday-short.tuesday%',
+			'%i18n:common.weekday-short.wednesday%',
+			'%i18n:common.weekday-short.thursday%',
+			'%i18n:common.weekday-short.friday%',
+			'%i18n:common.weekday-short.satruday%'
+		];
+
+		this.on('mount', () => {
+			this.calc();
+		});
+
+		this.isToday = day => {
+			return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate();
+		};
+
+		this.isSelected = day => {
+			return this.year == this.selected.getFullYear() && this.month == this.selected.getMonth() + 1 && day == this.selected.getDate();
+		};
+
+		this.isOutOfRange = day => {
+			const test = (new Date(this.year, this.month - 1, day)).getTime();
+			return test > this.today.getTime() ||
+				(this.opts.start ? test < this.opts.start.getTime() : false);
+		};
+
+		this.isDonichi = day => {
+			const weekday = (new Date(this.year, this.month - 1, day)).getDay();
+			return weekday == 0 || weekday == 6;
+		};
+
+		this.calc = () => {
+			let days = eachMonthDays[this.month - 1];
+
+			// うるう年なら+1日
+			if (this.month == 2 && isLeapYear(this.year)) days++;
+
+			const date = new Date(this.year, this.month - 1, 1);
+			const weekday = date.getDay();
+
+			this.update({
+				paddingDays: weekday,
+				days: days
+			});
+		};
+
+		this.prev = () => {
+			if (this.month == 1) {
+				this.update({
+					year: this.year - 1,
+					month: 12
+				});
+			} else {
+				this.update({
+					month: this.month - 1
+				});
+			}
+			this.calc();
+		};
+
+		this.next = () => {
+			if (this.month == 12) {
+				this.update({
+					year: this.year + 1,
+					month: 1
+				});
+			} else {
+				this.update({
+					month: this.month + 1
+				});
+			}
+			this.calc();
+		};
+
+		this.go = day => {
+			if (this.isOutOfRange(day)) return;
+			const date = new Date(this.year, this.month - 1, day, 23, 59, 59, 999);
+			this.update({
+				selected: date
+			});
+			this.opts.warp(date);
+		};
+</script>
+</mk-calendar-widget>
diff --git a/src/web/app/desktop/-tags/window.tag b/src/web/app/desktop/-tags/window.tag
new file mode 100644
index 0000000000..051b43f076
--- /dev/null
+++ b/src/web/app/desktop/-tags/window.tag
@@ -0,0 +1,549 @@
+<mk-window data-flexible={ isFlexible } ondragover={ ondragover }>
+	<div class="bg" ref="bg" show={ isModal } @click="bgClick"></div>
+	<div class="main" ref="main" tabindex="-1" data-is-modal={ isModal } onmousedown={ onBodyMousedown } onkeydown={ onKeydown }>
+		<div class="body">
+			<header ref="header" onmousedown={ onHeaderMousedown }>
+				<h1 data-yield="header"><yield from="header"/></h1>
+				<div>
+					<button class="popout" v-if="popoutUrl" onmousedown={ repelMove } @click="popout" title="ポップアウト">%fa:R window-restore%</button>
+					<button class="close" v-if="canClose" onmousedown={ repelMove } @click="close" title="閉じる">%fa:times%</button>
+				</div>
+			</header>
+			<div class="content" data-yield="content"><yield from="content"/></div>
+		</div>
+		<div class="handle top" v-if="canResize" onmousedown={ onTopHandleMousedown }></div>
+		<div class="handle right" v-if="canResize" onmousedown={ onRightHandleMousedown }></div>
+		<div class="handle bottom" v-if="canResize" onmousedown={ onBottomHandleMousedown }></div>
+		<div class="handle left" v-if="canResize" onmousedown={ onLeftHandleMousedown }></div>
+		<div class="handle top-left" v-if="canResize" onmousedown={ onTopLeftHandleMousedown }></div>
+		<div class="handle top-right" v-if="canResize" onmousedown={ onTopRightHandleMousedown }></div>
+		<div class="handle bottom-right" v-if="canResize" onmousedown={ onBottomRightHandleMousedown }></div>
+		<div class="handle bottom-left" v-if="canResize" onmousedown={ onBottomLeftHandleMousedown }></div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .bg
+				display block
+				position fixed
+				z-index 2048
+				top 0
+				left 0
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.7)
+				opacity 0
+				pointer-events none
+
+			> .main
+				display block
+				position fixed
+				z-index 2048
+				top 15%
+				left 0
+				margin 0
+				opacity 0
+				pointer-events none
+
+				&:focus
+					&:not([data-is-modal])
+						> .body
+							box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+
+				> .handle
+					$size = 8px
+
+					position absolute
+
+					&.top
+						top -($size)
+						left 0
+						width 100%
+						height $size
+						cursor ns-resize
+
+					&.right
+						top 0
+						right -($size)
+						width $size
+						height 100%
+						cursor ew-resize
+
+					&.bottom
+						bottom -($size)
+						left 0
+						width 100%
+						height $size
+						cursor ns-resize
+
+					&.left
+						top 0
+						left -($size)
+						width $size
+						height 100%
+						cursor ew-resize
+
+					&.top-left
+						top -($size)
+						left -($size)
+						width $size * 2
+						height $size * 2
+						cursor nwse-resize
+
+					&.top-right
+						top -($size)
+						right -($size)
+						width $size * 2
+						height $size * 2
+						cursor nesw-resize
+
+					&.bottom-right
+						bottom -($size)
+						right -($size)
+						width $size * 2
+						height $size * 2
+						cursor nwse-resize
+
+					&.bottom-left
+						bottom -($size)
+						left -($size)
+						width $size * 2
+						height $size * 2
+						cursor nesw-resize
+
+				> .body
+					height 100%
+					overflow hidden
+					background #fff
+					border-radius 6px
+					box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+
+					> header
+						$header-height = 40px
+
+						z-index 128
+						height $header-height
+						overflow hidden
+						white-space nowrap
+						cursor move
+						background #fff
+						border-radius 6px 6px 0 0
+						box-shadow 0 1px 0 rgba(#000, 0.1)
+
+						&, *
+							user-select none
+
+						> h1
+							pointer-events none
+							display block
+							margin 0 auto
+							overflow hidden
+							height $header-height
+							text-overflow ellipsis
+							text-align center
+							font-size 1em
+							line-height $header-height
+							font-weight normal
+							color #666
+
+						> div:last-child
+							position absolute
+							top 0
+							right 0
+							display block
+							z-index 1
+
+							> *
+								display inline-block
+								margin 0
+								padding 0
+								cursor pointer
+								font-size 1.2em
+								color rgba(#000, 0.4)
+								border none
+								outline none
+								background transparent
+
+								&:hover
+									color rgba(#000, 0.6)
+
+								&:active
+									color darken(#000, 30%)
+
+								> [data-fa]
+									padding 0
+									width $header-height
+									line-height $header-height
+									text-align center
+
+					> .content
+						height 100%
+
+			&:not([flexible])
+				> .main > .body > .content
+					height calc(100% - 40px)
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+		import contains from '../../common/scripts/contains';
+
+		this.minHeight = 40;
+		this.minWidth = 200;
+
+		this.isModal = this.opts.isModal != null ? this.opts.isModal : false;
+		this.canClose = this.opts.canClose != null ? this.opts.canClose : true;
+		this.popoutUrl = this.opts.popout;
+		this.isFlexible = this.opts.height == null;
+		this.canResize = !this.isFlexible;
+
+		this.on('mount', () => {
+			this.$refs.main.style.width = this.opts.width || '530px';
+			this.$refs.main.style.height = this.opts.height || 'auto';
+
+			this.$refs.main.style.top = '15%';
+			this.$refs.main.style.left = (window.innerWidth / 2) - (this.$refs.main.offsetWidth / 2) + 'px';
+
+			this.$refs.header.addEventListener('contextmenu', e => {
+				e.preventDefault();
+			});
+
+			window.addEventListener('resize', this.onBrowserResize);
+
+			this.open();
+		});
+
+		this.on('unmount', () => {
+			window.removeEventListener('resize', this.onBrowserResize);
+		});
+
+		this.onBrowserResize = () => {
+			const position = this.$refs.main.getBoundingClientRect();
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = this.$refs.main.offsetWidth;
+			const windowHeight = this.$refs.main.offsetHeight;
+			if (position.left < 0) this.$refs.main.style.left = 0;
+			if (position.top < 0) this.$refs.main.style.top = 0;
+			if (position.left + windowWidth > browserWidth) this.$refs.main.style.left = browserWidth - windowWidth + 'px';
+			if (position.top + windowHeight > browserHeight) this.$refs.main.style.top = browserHeight - windowHeight + 'px';
+		};
+
+		this.open = () => {
+			this.$emit('opening');
+
+			this.top();
+
+			if (this.isModal) {
+				this.$refs.bg.style.pointerEvents = 'auto';
+				anime({
+					targets: this.$refs.bg,
+					opacity: 1,
+					duration: 100,
+					easing: 'linear'
+				});
+			}
+
+			this.$refs.main.style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				scale: [1.1, 1],
+				duration: 200,
+				easing: 'easeOutQuad'
+			});
+
+			//this.$refs.main.focus();
+
+			setTimeout(() => {
+				this.$emit('opened');
+			}, 300);
+		};
+
+		this.popout = () => {
+			const position = this.$refs.main.getBoundingClientRect();
+
+			const width = parseInt(getComputedStyle(this.$refs.main, '').width, 10);
+			const height = parseInt(getComputedStyle(this.$refs.main, '').height, 10);
+			const x = window.screenX + position.left;
+			const y = window.screenY + position.top;
+
+			const url = typeof this.popoutUrl == 'function' ? this.popoutUrl() : this.popoutUrl;
+
+			window.open(url, url,
+				`height=${height},width=${width},left=${x},top=${y}`);
+
+			this.close();
+		};
+
+		this.close = () => {
+			this.$emit('closing');
+
+			if (this.isModal) {
+				this.$refs.bg.style.pointerEvents = 'none';
+				anime({
+					targets: this.$refs.bg,
+					opacity: 0,
+					duration: 300,
+					easing: 'linear'
+				});
+			}
+
+			this.$refs.main.style.pointerEvents = 'none';
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				scale: 0.8,
+				duration: 300,
+				easing: [0.5, -0.5, 1, 0.5]
+			});
+
+			setTimeout(() => {
+				this.$emit('closed');
+			}, 300);
+		};
+
+		// 最前面へ移動します
+		this.top = () => {
+			let z = 0;
+
+			const ws = document.querySelectorAll('mk-window');
+			ws.forEach(w => {
+				if (w == this.root) return;
+				const m = w.querySelector(':scope > .main');
+				const mz = Number(document.defaultView.getComputedStyle(m, null).zIndex);
+				if (mz > z) z = mz;
+			});
+
+			if (z > 0) {
+				this.$refs.main.style.zIndex = z + 1;
+				if (this.isModal) this.$refs.bg.style.zIndex = z + 1;
+			}
+		};
+
+		this.repelMove = e => {
+			e.stopPropagation();
+			return true;
+		};
+
+		this.bgClick = () => {
+			if (this.canClose) this.close();
+		};
+
+		this.onBodyMousedown = () => {
+			this.top();
+		};
+
+		// ヘッダー掴み時
+		this.onHeaderMousedown = e => {
+			e.preventDefault();
+
+			if (!contains(this.$refs.main, document.activeElement)) this.$refs.main.focus();
+
+			const position = this.$refs.main.getBoundingClientRect();
+
+			const clickX = e.clientX;
+			const clickY = e.clientY;
+			const moveBaseX = clickX - position.left;
+			const moveBaseY = clickY - position.top;
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = this.$refs.main.offsetWidth;
+			const windowHeight = this.$refs.main.offsetHeight;
+
+			// 動かした時
+			dragListen(me => {
+				let moveLeft = me.clientX - moveBaseX;
+				let moveTop = me.clientY - moveBaseY;
+
+				// 上はみ出し
+				if (moveTop < 0) moveTop = 0;
+
+				// 左はみ出し
+				if (moveLeft < 0) moveLeft = 0;
+
+				// 下はみ出し
+				if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
+
+				// 右はみ出し
+				if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
+
+				this.$refs.main.style.left = moveLeft + 'px';
+				this.$refs.main.style.top = moveTop + 'px';
+			});
+		};
+
+		// 上ハンドル掴み時
+		this.onTopHandleMousedown = e => {
+			e.preventDefault();
+
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(this.$refs.main, '').height, 10);
+			const top = parseInt(getComputedStyle(this.$refs.main, '').top, 10);
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + move > 0) {
+					if (height + -move > this.minHeight) {
+						this.applyTransformHeight(height + -move);
+						this.applyTransformTop(top + move);
+					} else { // 最小の高さより小さくなろうとした時
+						this.applyTransformHeight(this.minHeight);
+						this.applyTransformTop(top + (height - this.minHeight));
+					}
+				} else { // 上のはみ出し時
+					this.applyTransformHeight(top + height);
+					this.applyTransformTop(0);
+				}
+			});
+		};
+
+		// 右ハンドル掴み時
+		this.onRightHandleMousedown = e => {
+			e.preventDefault();
+
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(this.$refs.main, '').width, 10);
+			const left = parseInt(getComputedStyle(this.$refs.main, '').left, 10);
+			const browserWidth = window.innerWidth;
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + width + move < browserWidth) {
+					if (width + move > this.minWidth) {
+						this.applyTransformWidth(width + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(this.minWidth);
+					}
+				} else { // 右のはみ出し時
+					this.applyTransformWidth(browserWidth - left);
+				}
+			});
+		};
+
+		// 下ハンドル掴み時
+		this.onBottomHandleMousedown = e => {
+			e.preventDefault();
+
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(this.$refs.main, '').height, 10);
+			const top = parseInt(getComputedStyle(this.$refs.main, '').top, 10);
+			const browserHeight = window.innerHeight;
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + height + move < browserHeight) {
+					if (height + move > this.minHeight) {
+						this.applyTransformHeight(height + move);
+					} else { // 最小の高さより小さくなろうとした時
+						this.applyTransformHeight(this.minHeight);
+					}
+				} else { // 下のはみ出し時
+					this.applyTransformHeight(browserHeight - top);
+				}
+			});
+		};
+
+		// 左ハンドル掴み時
+		this.onLeftHandleMousedown = e => {
+			e.preventDefault();
+
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(this.$refs.main, '').width, 10);
+			const left = parseInt(getComputedStyle(this.$refs.main, '').left, 10);
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + move > 0) {
+					if (width + -move > this.minWidth) {
+						this.applyTransformWidth(width + -move);
+						this.applyTransformLeft(left + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(this.minWidth);
+						this.applyTransformLeft(left + (width - this.minWidth));
+					}
+				} else { // 左のはみ出し時
+					this.applyTransformWidth(left + width);
+					this.applyTransformLeft(0);
+				}
+			});
+		};
+
+		// 左上ハンドル掴み時
+		this.onTopLeftHandleMousedown = e => {
+			this.onTopHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		};
+
+		// 右上ハンドル掴み時
+		this.onTopRightHandleMousedown = e => {
+			this.onTopHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		};
+
+		// 右下ハンドル掴み時
+		this.onBottomRightHandleMousedown = e => {
+			this.onBottomHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		};
+
+		// 左下ハンドル掴み時
+		this.onBottomLeftHandleMousedown = e => {
+			this.onBottomHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		};
+
+		// 高さを適用
+		this.applyTransformHeight = height => {
+			this.$refs.main.style.height = height + 'px';
+		};
+
+		// 幅を適用
+		this.applyTransformWidth = width => {
+			this.$refs.main.style.width = width + 'px';
+		};
+
+		// Y座標を適用
+		this.applyTransformTop = top => {
+			this.$refs.main.style.top = top + 'px';
+		};
+
+		// X座標を適用
+		this.applyTransformLeft = left => {
+			this.$refs.main.style.left = left + 'px';
+		};
+
+		function dragListen(fn) {
+			window.addEventListener('mousemove',  fn);
+			window.addEventListener('mouseleave', dragClear.bind(null, fn));
+			window.addEventListener('mouseup',    dragClear.bind(null, fn));
+		}
+
+		function dragClear(fn) {
+			window.removeEventListener('mousemove',  fn);
+			window.removeEventListener('mouseleave', dragClear);
+			window.removeEventListener('mouseup',    dragClear);
+		}
+
+		this.ondragover = e => {
+			e.dataTransfer.dropEffect = 'none';
+		};
+
+		this.onKeydown = e => {
+			if (e.which == 27) { // Esc
+				if (this.canClose) {
+					e.preventDefault();
+					e.stopPropagation();
+					this.close();
+				}
+			}
+		};
+
+	</script>
+</mk-window>
diff --git a/src/web/app/desktop/tags/analog-clock.tag b/src/web/app/desktop/tags/analog-clock.tag
deleted file mode 100644
index 6b2bce3b2c..0000000000
--- a/src/web/app/desktop/tags/analog-clock.tag
+++ /dev/null
@@ -1,95 +0,0 @@
-<mk-analog-clock>
-	<canvas ref="canvas" width="256" height="256"></canvas>
-	<style lang="stylus" scoped>
-		:scope
-			> canvas
-				display block
-				width 256px
-				height 256px
-	</style>
-	<script lang="typescript">
-		const Vec2 = function(x, y) {
-			this.x = x;
-			this.y = y;
-		};
-
-		this.on('mount', () => {
-			this.draw()
-			this.clock = setInterval(this.draw, 1000);
-		});
-
-		this.on('unmount', () => {
-			clearInterval(this.clock);
-		});
-
-		this.draw = () => {
-			const now = new Date();
-			const s = now.getSeconds();
-			const m = now.getMinutes();
-			const h = now.getHours();
-
-			const ctx = this.$refs.canvas.getContext('2d');
-			const canvW = this.$refs.canvas.width;
-			const canvH = this.$refs.canvas.height;
-			ctx.clearRect(0, 0, canvW, canvH);
-
-			{ // 背景
-				const center = Math.min((canvW / 2), (canvH / 2));
-				const lineStart =    center * 0.90;
-				const shortLineEnd = center * 0.87;
-				const longLineEnd =  center * 0.84;
-				for (let i = 0; i < 60; i++) {
-					const angle = Math.PI * i / 30;
-					const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
-					ctx.beginPath();
-					ctx.lineWidth = 1;
-					ctx.moveTo((canvW / 2) + uv.x * lineStart, (canvH / 2) + uv.y * lineStart);
-					if (i % 5 == 0) {
-						ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
-						ctx.lineTo((canvW / 2) + uv.x * longLineEnd, (canvH / 2) + uv.y * longLineEnd);
-					} else {
-						ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
-						ctx.lineTo((canvW / 2) + uv.x * shortLineEnd, (canvH / 2) + uv.y * shortLineEnd);
-					}
-					ctx.stroke();
-				}
-			}
-
-			{ // 分
-				const angle = Math.PI * (m + s / 60) / 30;
-				const length = Math.min(canvW, canvH) / 2.6;
-				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
-				ctx.beginPath();
-				ctx.strokeStyle = '#ffffff';
-				ctx.lineWidth = 2;
-				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
-				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
-				ctx.stroke();
-			}
-
-			{ // 時
-				const angle = Math.PI * (h % 12 + m / 60) / 6;
-				const length = Math.min(canvW, canvH) / 4;
-				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
-				ctx.beginPath();
-				ctx.strokeStyle = _THEME_COLOR_;
-				ctx.lineWidth = 2;
-				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
-				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
-				ctx.stroke();
-			}
-
-			{ // 秒
-				const angle = Math.PI * s / 30;
-				const length = Math.min(canvW, canvH) / 2.6;
-				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
-				ctx.beginPath();
-				ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
-				ctx.lineWidth = 1;
-				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
-				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
-				ctx.stroke();
-			}
-		};
-	</script>
-</mk-analog-clock>
diff --git a/src/web/app/desktop/tags/autocomplete-suggestion.tag b/src/web/app/desktop/tags/autocomplete-suggestion.tag
deleted file mode 100644
index a0215666c0..0000000000
--- a/src/web/app/desktop/tags/autocomplete-suggestion.tag
+++ /dev/null
@@ -1,197 +0,0 @@
-<mk-autocomplete-suggestion>
-	<ol class="users" ref="users" v-if="users.length > 0">
-		<li each={ users } @click="parent.onClick" onkeydown={ parent.onKeydown } tabindex="-1">
-			<img class="avatar" src={ avatar_url + '?thumbnail&size=32' } alt=""/>
-			<span class="name">{ name }</span>
-			<span class="username">@{ username }</span>
-		</li>
-	</ol>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position absolute
-			z-index 65535
-			margin-top calc(1em + 8px)
-			overflow hidden
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.1)
-			border-radius 4px
-
-			> .users
-				display block
-				margin 0
-				padding 4px 0
-				max-height 190px
-				max-width 500px
-				overflow auto
-				list-style none
-
-				> li
-					display block
-					padding 4px 12px
-					white-space nowrap
-					overflow hidden
-					font-size 0.9em
-					color rgba(0, 0, 0, 0.8)
-					cursor default
-
-					&, *
-						user-select none
-
-					&:hover
-					&[data-selected='true']
-						color #fff
-						background $theme-color
-
-						.name
-							color #fff
-
-						.username
-							color #fff
-
-					&:active
-						color #fff
-						background darken($theme-color, 10%)
-
-						.name
-							color #fff
-
-						.username
-							color #fff
-
-					.avatar
-						vertical-align middle
-						min-width 28px
-						min-height 28px
-						max-width 28px
-						max-height 28px
-						margin 0 8px 0 0
-						border-radius 100%
-
-					.name
-						margin 0 8px 0 0
-						/*font-weight bold*/
-						font-weight normal
-						color rgba(0, 0, 0, 0.8)
-
-					.username
-						font-weight normal
-						color rgba(0, 0, 0, 0.3)
-
-	</style>
-	<script lang="typescript">
-		import contains from '../../common/scripts/contains';
-
-		this.mixin('api');
-
-		this.q = this.opts.q;
-		this.textarea = this.opts.textarea;
-		this.fetching = true;
-		this.users = [];
-		this.select = -1;
-
-		this.on('mount', () => {
-			this.textarea.addEventListener('keydown', this.onKeydown);
-
-			document.querySelectorAll('body *').forEach(el => {
-				el.addEventListener('mousedown', this.mousedown);
-			});
-
-			this.api('users/search_by_username', {
-				query: this.q,
-				limit: 30
-			}).then(users => {
-				this.update({
-					fetching: false,
-					users: users
-				});
-			});
-		});
-
-		this.on('unmount', () => {
-			this.textarea.removeEventListener('keydown', this.onKeydown);
-
-			document.querySelectorAll('body *').forEach(el => {
-				el.removeEventListener('mousedown', this.mousedown);
-			});
-		});
-
-		this.mousedown = e => {
-			if (!contains(this.root, e.target) && (this.root != e.target)) this.close();
-		};
-
-		this.onClick = e => {
-			this.complete(e.item);
-		};
-
-		this.onKeydown = e => {
-			const cancel = () => {
-				e.preventDefault();
-				e.stopPropagation();
-			};
-
-			switch (e.which) {
-				case 10: // [ENTER]
-				case 13: // [ENTER]
-					if (this.select !== -1) {
-						cancel();
-						this.complete(this.users[this.select]);
-					} else {
-						this.close();
-					}
-					break;
-
-				case 27: // [ESC]
-					cancel();
-					this.close();
-					break;
-
-				case 38: // [↑]
-					if (this.select !== -1) {
-						cancel();
-						this.selectPrev();
-					} else {
-						this.close();
-					}
-					break;
-
-				case 9: // [TAB]
-				case 40: // [↓]
-					cancel();
-					this.selectNext();
-					break;
-
-				default:
-					this.close();
-			}
-		};
-
-		this.selectNext = () => {
-			if (++this.select >= this.users.length) this.select = 0;
-			this.applySelect();
-		};
-
-		this.selectPrev = () => {
-			if (--this.select < 0) this.select = this.users.length - 1;
-			this.applySelect();
-		};
-
-		this.applySelect = () => {
-			Array.from(this.$refs.users.children).forEach(el => {
-				el.removeAttribute('data-selected');
-			});
-
-			this.$refs.users.children[this.select].setAttribute('data-selected', 'true');
-			this.$refs.users.children[this.select].focus();
-		};
-
-		this.complete = user => {
-			this.opts.complete(user);
-		};
-
-		this.close = () => {
-			this.opts.close();
-		};
-
-	</script>
-</mk-autocomplete-suggestion>
diff --git a/src/web/app/desktop/tags/big-follow-button.tag b/src/web/app/desktop/tags/big-follow-button.tag
deleted file mode 100644
index 5ea09fdfc8..0000000000
--- a/src/web/app/desktop/tags/big-follow-button.tag
+++ /dev/null
@@ -1,153 +0,0 @@
-<mk-big-follow-button>
-	<button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
-		<span v-if="!wait && user.is_following">%fa:minus%フォロー解除</span>
-		<span v-if="!wait && !user.is_following">%fa:plus%フォロー</span>
-		<template v-if="wait">%fa:spinner .pulse .fw%</template>
-	</button>
-	<div class="init" v-if="init">%fa:spinner .pulse .fw%</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> button
-			> .init
-				display block
-				cursor pointer
-				padding 0
-				margin 0
-				width 100%
-				line-height 38px
-				font-size 1em
-				outline none
-				border-radius 4px
-
-				*
-					pointer-events none
-
-				i
-					margin-right 8px
-
-				&:focus
-					&:after
-						content ""
-						pointer-events none
-						position absolute
-						top -5px
-						right -5px
-						bottom -5px
-						left -5px
-						border 2px solid rgba($theme-color, 0.3)
-						border-radius 8px
-
-				&.follow
-					color #888
-					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-					border solid 1px #e2e2e2
-
-					&:hover
-						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-						border-color #dcdcdc
-
-					&:active
-						background #ececec
-						border-color #dcdcdc
-
-				&.unfollow
-					color $theme-color-foreground
-					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-					border solid 1px lighten($theme-color, 15%)
-
-					&:not(:disabled)
-						font-weight bold
-
-					&:hover:not(:disabled)
-						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-						border-color $theme-color
-
-					&:active:not(:disabled)
-						background $theme-color
-						border-color $theme-color
-
-				&.wait
-					cursor wait !important
-					opacity 0.7
-
-	</style>
-	<script lang="typescript">
-		import isPromise from '../../common/scripts/is-promise';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.user = null;
-		this.userPromise = isPromise(this.opts.user)
-			? this.opts.user
-			: Promise.resolve(this.opts.user);
-		this.init = true;
-		this.wait = false;
-
-		this.on('mount', () => {
-			this.userPromise.then(user => {
-				this.update({
-					init: false,
-					user: user
-				});
-				this.connection.on('follow', this.onStreamFollow);
-				this.connection.on('unfollow', this.onStreamUnfollow);
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('follow', this.onStreamFollow);
-			this.connection.off('unfollow', this.onStreamUnfollow);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.onStreamFollow = user => {
-			if (user.id == this.user.id) {
-				this.update({
-					user: user
-				});
-			}
-		};
-
-		this.onStreamUnfollow = user => {
-			if (user.id == this.user.id) {
-				this.update({
-					user: user
-				});
-			}
-		};
-
-		this.onclick = () => {
-			this.wait = true;
-			if (this.user.is_following) {
-				this.api('following/delete', {
-					user_id: this.user.id
-				}).then(() => {
-					this.user.is_following = false;
-				}).catch(err => {
-					console.error(err);
-				}).then(() => {
-					this.wait = false;
-					this.update();
-				});
-			} else {
-				this.api('following/create', {
-					user_id: this.user.id
-				}).then(() => {
-					this.user.is_following = true;
-				}).catch(err => {
-					console.error(err);
-				}).then(() => {
-					this.wait = false;
-					this.update();
-				});
-			}
-		};
-	</script>
-</mk-big-follow-button>
diff --git a/src/web/app/desktop/tags/contextmenu.tag b/src/web/app/desktop/tags/contextmenu.tag
deleted file mode 100644
index ee4c48fbde..0000000000
--- a/src/web/app/desktop/tags/contextmenu.tag
+++ /dev/null
@@ -1,138 +0,0 @@
-<mk-contextmenu>
-	<yield />
-	<style lang="stylus" scoped>
-		:scope
-			$width = 240px
-			$item-height = 38px
-			$padding = 10px
-
-			display none
-			position fixed
-			top 0
-			left 0
-			z-index 4096
-			width $width
-			font-size 0.8em
-			background #fff
-			border-radius 0 4px 4px 4px
-			box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
-			opacity 0
-
-			ul
-				display block
-				margin 0
-				padding $padding 0
-				list-style none
-
-			li
-				display block
-
-				&.separator
-					margin-top $padding
-					padding-top $padding
-					border-top solid 1px #eee
-
-				&.has-child
-					> p
-						cursor default
-
-						> [data-fa]:last-child
-							position absolute
-							top 0
-							right 8px
-							line-height $item-height
-
-					&:hover > ul
-						visibility visible
-
-					&:active
-						> p, a
-							background $theme-color
-
-				> p, a
-					display block
-					z-index 1
-					margin 0
-					padding 0 32px 0 38px
-					line-height $item-height
-					color #868C8C
-					text-decoration none
-					cursor pointer
-
-					&:hover
-						text-decoration none
-
-					*
-						pointer-events none
-
-					> i
-						width 28px
-						margin-left -28px
-						text-align center
-
-				&:hover
-					> p, a
-						text-decoration none
-						background $theme-color
-						color $theme-color-foreground
-
-				&:active
-					> p, a
-						text-decoration none
-						background darken($theme-color, 10%)
-						color $theme-color-foreground
-
-			li > ul
-				visibility hidden
-				position absolute
-				top 0
-				left $width
-				margin-top -($padding)
-				width $width
-				background #fff
-				border-radius 0 4px 4px 4px
-				box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
-				transition visibility 0s linear 0.2s
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-		import contains from '../../common/scripts/contains';
-
-		this.root.addEventListener('contextmenu', e => {
-			e.preventDefault();
-		});
-
-		this.mousedown = e => {
-			e.preventDefault();
-			if (!contains(this.root, e.target) && (this.root != e.target)) this.close();
-			return false;
-		};
-
-		this.open = pos => {
-			document.querySelectorAll('body *').forEach(el => {
-				el.addEventListener('mousedown', this.mousedown);
-			});
-
-			this.root.style.display = 'block';
-			this.root.style.left = pos.x + 'px';
-			this.root.style.top = pos.y + 'px';
-
-			anime({
-				targets: this.root,
-				opacity: [0, 1],
-				duration: 100,
-				easing: 'linear'
-			});
-		};
-
-		this.close = () => {
-			document.querySelectorAll('body *').forEach(el => {
-				el.removeEventListener('mousedown', this.mousedown);
-			});
-
-			this.$emit('closed');
-			this.$destroy();
-		};
-	</script>
-</mk-contextmenu>
diff --git a/src/web/app/desktop/tags/crop-window.tag b/src/web/app/desktop/tags/crop-window.tag
deleted file mode 100644
index c26f74b121..0000000000
--- a/src/web/app/desktop/tags/crop-window.tag
+++ /dev/null
@@ -1,196 +0,0 @@
-<mk-crop-window>
-	<mk-window ref="window" is-modal={ true } width={ '800px' }>
-		<yield to="header">%fa:crop%{ parent.title }</yield>
-		<yield to="content">
-			<div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div>
-			<div class="action">
-				<button class="skip" @click="parent.skip">クロップをスキップ</button>
-				<button class="cancel" @click="parent.cancel">キャンセル</button>
-				<button class="ok" @click="parent.ok">決定</button>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-
-					> .body
-						> img
-							width 100%
-							max-height 400px
-
-					.cropper-modal {
-						opacity: 0.8;
-					}
-
-					.cropper-view-box {
-						outline-color: $theme-color;
-					}
-
-					.cropper-line, .cropper-point {
-						background-color: $theme-color;
-					}
-
-					.cropper-bg {
-						animation: cropper-bg 0.5s linear infinite;
-					}
-
-					@-webkit-keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					@-moz-keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					@-ms-keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					@keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					> .action
-						height 72px
-						background lighten($theme-color, 95%)
-
-						.ok
-						.cancel
-						.skip
-							display block
-							position absolute
-							bottom 16px
-							cursor pointer
-							padding 0
-							margin 0
-							height 40px
-							font-size 1em
-							outline none
-							border-radius 4px
-
-							&:focus
-								&:after
-									content ""
-									pointer-events none
-									position absolute
-									top -5px
-									right -5px
-									bottom -5px
-									left -5px
-									border 2px solid rgba($theme-color, 0.3)
-									border-radius 8px
-
-							&:disabled
-								opacity 0.7
-								cursor default
-
-						.ok
-						.cancel
-							width 120px
-
-						.ok
-							right 16px
-							color $theme-color-foreground
-							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-							border solid 1px lighten($theme-color, 15%)
-
-							&:not(:disabled)
-								font-weight bold
-
-							&:hover:not(:disabled)
-								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-								border-color $theme-color
-
-							&:active:not(:disabled)
-								background $theme-color
-								border-color $theme-color
-
-						.cancel
-						.skip
-							color #888
-							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-							border solid 1px #e2e2e2
-
-							&:hover
-								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-								border-color #dcdcdc
-
-							&:active
-								background #ececec
-								border-color #dcdcdc
-
-						.cancel
-							right 148px
-
-						.skip
-							left 16px
-							width 150px
-
-	</style>
-	<script lang="typescript">
-		const Cropper = require('cropperjs');
-
-		this.image = this.opts.file;
-		this.title = this.opts.title;
-		this.aspectRatio = this.opts.aspectRatio;
-		this.cropper = null;
-
-		this.on('mount', () => {
-			this.img = this.$refs.window.refs.img;
-			this.cropper = new Cropper(this.img, {
-				aspectRatio: this.aspectRatio,
-				highlight: false,
-				viewMode: 1
-			});
-		});
-
-		this.ok = () => {
-			this.cropper.getCroppedCanvas().toBlob(blob => {
-				this.$emit('cropped', blob);
-				this.$refs.window.close();
-			});
-		};
-
-		this.skip = () => {
-			this.$emit('skipped');
-			this.$refs.window.close();
-		};
-
-		this.cancel = () => {
-			this.$emit('canceled');
-			this.$refs.window.close();
-		};
-	</script>
-</mk-crop-window>
diff --git a/src/web/app/desktop/tags/detailed-post-window.tag b/src/web/app/desktop/tags/detailed-post-window.tag
deleted file mode 100644
index 57e390d50d..0000000000
--- a/src/web/app/desktop/tags/detailed-post-window.tag
+++ /dev/null
@@ -1,80 +0,0 @@
-<mk-detailed-post-window>
-	<div class="bg" ref="bg" @click="bgClick"></div>
-	<div class="main" ref="main" v-if="!fetching">
-		<mk-post-detail ref="detail" post={ post }/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			opacity 0
-
-			> .bg
-				display block
-				position fixed
-				z-index 1000
-				top 0
-				left 0
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.7)
-
-			> .main
-				display block
-				position fixed
-				z-index 1000
-				top 20%
-				left 0
-				right 0
-				margin 0 auto 0 auto
-				padding 0
-				width 638px
-				text-align center
-
-				> mk-post-detail
-					margin 0 auto
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.mixin('api');
-
-		this.fetching = true;
-		this.post = null;
-
-		this.on('mount', () => {
-			anime({
-				targets: this.root,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-
-			this.api('posts/show', {
-				post_id: this.opts.post
-			}).then(post => {
-
-				this.update({
-					fetching: false,
-					post: post
-				});
-			});
-		});
-
-		this.close = () => {
-			this.$refs.bg.style.pointerEvents = 'none';
-			this.$refs.main.style.pointerEvents = 'none';
-			anime({
-				targets: this.root,
-				opacity: 0,
-				duration: 300,
-				easing: 'linear',
-				complete: () => this.$destroy()
-			});
-		};
-
-		this.bgClick = () => {
-			this.close();
-		};
-	</script>
-</mk-detailed-post-window>
diff --git a/src/web/app/desktop/tags/dialog.tag b/src/web/app/desktop/tags/dialog.tag
deleted file mode 100644
index ba2fa514d1..0000000000
--- a/src/web/app/desktop/tags/dialog.tag
+++ /dev/null
@@ -1,144 +0,0 @@
-<mk-dialog>
-	<div class="bg" ref="bg" @click="bgClick"></div>
-	<div class="main" ref="main">
-		<header ref="header"></header>
-		<div class="body" ref="body"></div>
-		<div class="buttons">
-			<template each={ opts.buttons }>
-				<button @click="_onclick">{ text }</button>
-			</template>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .bg
-				display block
-				position fixed
-				z-index 8192
-				top 0
-				left 0
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.7)
-				opacity 0
-				pointer-events none
-
-			> .main
-				display block
-				position fixed
-				z-index 8192
-				top 20%
-				left 0
-				right 0
-				margin 0 auto 0 auto
-				padding 32px 42px
-				width 480px
-				background #fff
-				opacity 0
-
-				> header
-					margin 1em 0
-					color $theme-color
-					// color #43A4EC
-					font-weight bold
-
-					&:empty
-						display none
-
-					> i
-						margin-right 0.5em
-
-				> .body
-					margin 1em 0
-					color #888
-
-				> .buttons
-					> button
-						display inline-block
-						float right
-						margin 0
-						padding 10px 10px
-						font-size 1.1em
-						font-weight normal
-						text-decoration none
-						color #888
-						background transparent
-						outline none
-						border none
-						border-radius 0
-						cursor pointer
-						transition color 0.1s ease
-
-						i
-							margin 0 0.375em
-
-						&:hover
-							color $theme-color
-
-						&:active
-							color darken($theme-color, 10%)
-							transition color 0s ease
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.canThrough = opts.canThrough != null ? opts.canThrough : true;
-		this.opts.buttons.forEach(button => {
-			button._onclick = () => {
-				if (button.onclick) button.onclick();
-				this.close();
-			};
-		});
-
-		this.on('mount', () => {
-			this.$refs.header.innerHTML = this.opts.title;
-			this.$refs.body.innerHTML = this.opts.text;
-
-			this.$refs.bg.style.pointerEvents = 'auto';
-			anime({
-				targets: this.$refs.bg,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.main,
-				opacity: 1,
-				scale: [1.2, 1],
-				duration: 300,
-				easing: [ 0, 0.5, 0.5, 1 ]
-			});
-		});
-
-		this.close = () => {
-			this.$refs.bg.style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.bg,
-				opacity: 0,
-				duration: 300,
-				easing: 'linear'
-			});
-
-			this.$refs.main.style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.main,
-				opacity: 0,
-				scale: 0.8,
-				duration: 300,
-				easing: [ 0.5, -0.5, 1, 0.5 ],
-				complete: () => this.$destroy()
-			});
-		};
-
-		this.bgClick = () => {
-			if (this.canThrough) {
-				if (this.opts.onThrough) this.opts.onThrough();
-				this.close();
-			}
-		};
-	</script>
-</mk-dialog>
diff --git a/src/web/app/desktop/tags/donation.tag b/src/web/app/desktop/tags/donation.tag
deleted file mode 100644
index fe446f2e61..0000000000
--- a/src/web/app/desktop/tags/donation.tag
+++ /dev/null
@@ -1,66 +0,0 @@
-<mk-donation>
-	<button class="close" @click="close">閉じる x</button>
-	<div class="message">
-		<p>利用者の皆さま、</p>
-		<p>
-			今日は、日本の皆さまにお知らせがあります。
-			Misskeyの援助をお願いいたします。
-			私は独立性を守るため、一切の広告を掲載いたしません。
-			平均で約¥1,500の寄付をいただき、運営しております。
-			援助をしてくださる利用者はほんの少数です。
-			お願いいたします。
-			今日、利用者の皆さまが¥300ご援助くだされば、募金活動を一時間で終了することができます。
-			コーヒー1杯ほどの金額です。
-			Misskeyを活用しておられるのでしたら、広告を掲載せずにもう1年活動できるよう、どうか1分だけお時間をください。
-			私は小さな非営利個人ですが、サーバー、プログラム、人件費など、世界でトップクラスのウェブサイト同等のコストがかかります。
-			利用者は何億人といますが、他の大きなサイトに比べてほんの少額の費用で運営しているのです。
-			人間の可能性、自由、そして機会。知識こそ、これらの基盤を成すものです。
-			私は、誰もが無料かつ制限なく知識に触れられるべきだと信じています。
-			募金活動を終了し、Misskeyの改善に戻れるようご援助ください。
-			よろしくお願いいたします。
-		</p>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #fff
-			background #03072C
-
-			> .close
-				position absolute
-				top 16px
-				right 16px
-				z-index 1
-
-			> .message
-				padding 32px
-				font-size 1.4em
-				font-family serif
-
-				> p
-					display block
-					margin 0 auto
-					max-width 1200px
-
-				> p:first-child
-					margin-bottom 16px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.close = e => {
-			e.preventDefault();
-			e.stopPropagation();
-
-			this.I.client_settings.show_donation = false;
-			this.I.update();
-			this.api('i/update', {
-				show_donation: false
-			});
-
-			this.$destroy();
-		};
-	</script>
-</mk-donation>
diff --git a/src/web/app/desktop/tags/drive/base-contextmenu.tag b/src/web/app/desktop/tags/drive/base-contextmenu.tag
deleted file mode 100644
index c93d630263..0000000000
--- a/src/web/app/desktop/tags/drive/base-contextmenu.tag
+++ /dev/null
@@ -1,44 +0,0 @@
-<mk-drive-browser-base-contextmenu>
-	<mk-contextmenu ref="ctx">
-		<ul>
-			<li @click="parent.createFolder">
-				<p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
-			</li>
-			<li @click="parent.upload">
-				<p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
-			</li>
-			<li @click="parent.urlUpload">
-				<p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
-			</li>
-		</ul>
-	</mk-contextmenu>
-	<script lang="typescript">
-		this.browser = this.opts.browser;
-
-		this.on('mount', () => {
-			this.$refs.ctx.on('closed', () => {
-				this.$emit('closed');
-				this.$destroy();
-			});
-		});
-
-		this.open = pos => {
-			this.$refs.ctx.open(pos);
-		};
-
-		this.createFolder = () => {
-			this.browser.createFolder();
-			this.$refs.ctx.close();
-		};
-
-		this.upload = () => {
-			this.browser.selectLocalFile();
-			this.$refs.ctx.close();
-		};
-
-		this.urlUpload = () => {
-			this.browser.urlUpload();
-			this.$refs.ctx.close();
-		};
-	</script>
-</mk-drive-browser-base-contextmenu>
diff --git a/src/web/app/desktop/tags/drive/browser-window.tag b/src/web/app/desktop/tags/drive/browser-window.tag
deleted file mode 100644
index db7b898341..0000000000
--- a/src/web/app/desktop/tags/drive/browser-window.tag
+++ /dev/null
@@ -1,60 +0,0 @@
-<mk-drive-browser-window>
-	<mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' } popout={ popout }>
-		<yield to="header">
-			<p class="info" v-if="parent.usage"><b>{ parent.usage.toFixed(1) }%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
-			%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%
-		</yield>
-		<yield to="content">
-			<mk-drive-browser multiple={ true } folder={ parent.folder } ref="browser"/>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> .info
-						position absolute
-						top 0
-						left 16px
-						margin 0
-						font-size 80%
-
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-					> mk-drive-browser
-						height 100%
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.folder = this.opts.folder ? this.opts.folder : null;
-
-		this.popout = () => {
-			const folder = this.$refs.window.refs.browser.folder;
-			if (folder) {
-				return `${_URL_}/i/drive/folder/${folder.id}`;
-			} else {
-				return `${_URL_}/i/drive`;
-			}
-		};
-
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-
-			this.api('drive').then(info => {
-				this.update({
-					usage: info.usage / info.capacity * 100
-				});
-			});
-		});
-
-		this.close = () => {
-			this.$refs.window.close();
-		};
-	</script>
-</mk-drive-browser-window>
diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag
deleted file mode 100644
index 7aaedab822..0000000000
--- a/src/web/app/desktop/tags/drive/browser.tag
+++ /dev/null
@@ -1,736 +0,0 @@
-<mk-drive-browser>
-	<nav>
-		<div class="path" oncontextmenu={ pathOncontextmenu }>
-			<mk-drive-browser-nav-folder :class="{ current: folder == null }" folder={ null }/>
-			<template each={ folder in hierarchyFolders }>
-				<span class="separator">%fa:angle-right%</span>
-				<mk-drive-browser-nav-folder folder={ folder }/>
-			</template>
-			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
-			<span class="folder current" v-if="folder != null">{ folder.name }</span>
-		</div>
-		<input class="search" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-drive-browser.search%"/>
-	</nav>
-	<div class="main { uploading: uploads.length > 0, fetching: fetching }" ref="main" onmousedown={ onmousedown } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu }>
-		<div class="selection" ref="selection"></div>
-		<div class="contents" ref="contents">
-			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
-				<template each={ folder in folders }>
-					<mk-drive-browser-folder class="folder" folder={ folder }/>
-				</template>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" each={ Array(10).fill(16) }></div>
-				<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
-			</div>
-			<div class="files" ref="filesContainer" v-if="files.length > 0">
-				<template each={ file in files }>
-					<mk-drive-browser-file class="file" file={ file }/>
-				</template>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" each={ Array(10).fill(16) }></div>
-				<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
-			</div>
-			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
-				<p v-if="draghover">%i18n:desktop.tags.mk-drive-browser.empty-draghover%</p>
-				<p v-if="!draghover && folder == null"><strong>%i18n:desktop.tags.mk-drive-browser.empty-drive%</strong><br/>%i18n:desktop.tags.mk-drive-browser.empty-drive-description%</p>
-				<p v-if="!draghover && folder != null">%i18n:desktop.tags.mk-drive-browser.empty-folder%</p>
-			</div>
-		</div>
-		<div class="fetching" v-if="fetching">
-			<div class="spinner">
-				<div class="dot1"></div>
-				<div class="dot2"></div>
-			</div>
-		</div>
-	</div>
-	<div class="dropzone" v-if="draghover"></div>
-	<mk-uploader ref="uploader"/>
-	<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" onchange={ changeFileInput }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> nav
-				display block
-				z-index 2
-				width 100%
-				overflow auto
-				font-size 0.9em
-				color #555
-				background #fff
-				//border-bottom 1px solid #dfdfdf
-				box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
-
-				&, *
-					user-select none
-
-				> .path
-					display inline-block
-					vertical-align bottom
-					margin 0
-					padding 0 8px
-					width calc(100% - 200px)
-					line-height 38px
-					white-space nowrap
-
-					> *
-						display inline-block
-						margin 0
-						padding 0 8px
-						line-height 38px
-						cursor pointer
-
-						i
-							margin-right 4px
-
-						*
-							pointer-events none
-
-						&:hover
-							text-decoration underline
-
-						&.current
-							font-weight bold
-							cursor default
-
-							&:hover
-								text-decoration none
-
-						&.separator
-							margin 0
-							padding 0
-							opacity 0.5
-							cursor default
-
-							> [data-fa]
-								margin 0
-
-				> .search
-					display inline-block
-					vertical-align bottom
-					user-select text
-					cursor auto
-					margin 0
-					padding 0 18px
-					width 200px
-					font-size 1em
-					line-height 38px
-					background transparent
-					outline none
-					//border solid 1px #ddd
-					border none
-					border-radius 0
-					box-shadow none
-					transition color 0.5s ease, border 0.5s ease
-					font-family FontAwesome, sans-serif
-
-					&[data-active='true']
-						background #fff
-
-					&::-webkit-input-placeholder,
-					&:-ms-input-placeholder,
-					&:-moz-placeholder
-						color $ui-control-foreground-color
-
-			> .main
-				padding 8px
-				height calc(100% - 38px)
-				overflow auto
-
-				&, *
-					user-select none
-
-				&.fetching
-					cursor wait !important
-
-					*
-						pointer-events none
-
-					> .contents
-						opacity 0.5
-
-				&.uploading
-					height calc(100% - 38px - 100px)
-
-				> .selection
-					display none
-					position absolute
-					z-index 128
-					top 0
-					left 0
-					border solid 1px $theme-color
-					background rgba($theme-color, 0.5)
-					pointer-events none
-
-				> .contents
-
-					> .folders
-					> .files
-						display flex
-						flex-wrap wrap
-
-						> .folder
-						> .file
-							flex-grow 1
-							width 144px
-							margin 4px
-
-						> .padding
-							flex-grow 1
-							pointer-events none
-							width 144px + 8px // 8px is margin
-
-					> .empty
-						padding 16px
-						text-align center
-						color #999
-						pointer-events none
-
-						> p
-							margin 0
-
-				> .fetching
-					.spinner
-						margin 100px auto
-						width 40px
-						height 40px
-						text-align center
-
-						animation sk-rotate 2.0s infinite linear
-
-					.dot1, .dot2
-						width 60%
-						height 60%
-						display inline-block
-						position absolute
-						top 0
-						background-color rgba(0, 0, 0, 0.3)
-						border-radius 100%
-
-						animation sk-bounce 2.0s infinite ease-in-out
-
-					.dot2
-						top auto
-						bottom 0
-						animation-delay -1.0s
-
-					@keyframes sk-rotate { 100% { transform: rotate(360deg); }}
-
-					@keyframes sk-bounce {
-						0%, 100% {
-							transform: scale(0.0);
-						} 50% {
-							transform: scale(1.0);
-						}
-					}
-
-			> .dropzone
-				position absolute
-				left 0
-				top 38px
-				width 100%
-				height calc(100% - 38px)
-				border dashed 2px rgba($theme-color, 0.5)
-				pointer-events none
-
-			> mk-uploader
-				height 100px
-				padding 16px
-				background #fff
-
-			> input
-				display none
-
-	</style>
-	<script lang="typescript">
-		import contains from '../../../common/scripts/contains';
-		import dialog from '../../scripts/dialog';
-		import inputDialog from '../../scripts/input-dialog';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('drive-stream');
-		this.connection = this.driveStream.getConnection();
-		this.connectionId = this.driveStream.use();
-
-		this.files = [];
-		this.folders = [];
-		this.hierarchyFolders = [];
-		this.selectedFiles = [];
-
-		this.uploads = [];
-
-		// 現在の階層(フォルダ)
-		// * null でルートを表す
-		this.folder = null;
-
-		this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
-
-		// ドロップされようとしているか
-		this.draghover = false;
-
-		// 自信の所有するアイテムがドラッグをスタートさせたか
-		// (自分自身の階層にドロップできないようにするためのフラグ)
-		this.isDragSource = false;
-
-		this.on('mount', () => {
-			this.$refs.uploader.on('uploaded', file => {
-				this.addFile(file, true);
-			});
-
-			this.$refs.uploader.on('change-uploads', uploads => {
-				this.update({
-					uploads: uploads
-				});
-			});
-
-			this.connection.on('file_created', this.onStreamDriveFileCreated);
-			this.connection.on('file_updated', this.onStreamDriveFileUpdated);
-			this.connection.on('folder_created', this.onStreamDriveFolderCreated);
-			this.connection.on('folder_updated', this.onStreamDriveFolderUpdated);
-
-			if (this.opts.folder) {
-				this.move(this.opts.folder);
-			} else {
-				this.fetch();
-			}
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('file_created', this.onStreamDriveFileCreated);
-			this.connection.off('file_updated', this.onStreamDriveFileUpdated);
-			this.connection.off('folder_created', this.onStreamDriveFolderCreated);
-			this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
-			this.driveStream.dispose(this.connectionId);
-		});
-
-		this.onStreamDriveFileCreated = file => {
-			this.addFile(file, true);
-		};
-
-		this.onStreamDriveFileUpdated = file => {
-			const current = this.folder ? this.folder.id : null;
-			if (current != file.folder_id) {
-				this.removeFile(file);
-			} else {
-				this.addFile(file, true);
-			}
-		};
-
-		this.onStreamDriveFolderCreated = folder => {
-			this.addFolder(folder, true);
-		};
-
-		this.onStreamDriveFolderUpdated = folder => {
-			const current = this.folder ? this.folder.id : null;
-			if (current != folder.parent_id) {
-				this.removeFolder(folder);
-			} else {
-				this.addFolder(folder, true);
-			}
-		};
-
-		this.onmousedown = e => {
-			if (contains(this.$refs.foldersContainer, e.target) || contains(this.$refs.filesContainer, e.target)) return true;
-
-			const rect = this.$refs.main.getBoundingClientRect();
-
-			const left = e.pageX + this.$refs.main.scrollLeft - rect.left - window.pageXOffset
-			const top = e.pageY + this.$refs.main.scrollTop - rect.top - window.pageYOffset
-
-			const move = e => {
-				this.$refs.selection.style.display = 'block';
-
-				const cursorX = e.pageX + this.$refs.main.scrollLeft - rect.left - window.pageXOffset;
-				const cursorY = e.pageY + this.$refs.main.scrollTop - rect.top - window.pageYOffset;
-				const w = cursorX - left;
-				const h = cursorY - top;
-
-				if (w > 0) {
-					this.$refs.selection.style.width = w + 'px';
-					this.$refs.selection.style.left = left + 'px';
-				} else {
-					this.$refs.selection.style.width = -w + 'px';
-					this.$refs.selection.style.left = cursorX + 'px';
-				}
-
-				if (h > 0) {
-					this.$refs.selection.style.height = h + 'px';
-					this.$refs.selection.style.top = top + 'px';
-				} else {
-					this.$refs.selection.style.height = -h + 'px';
-					this.$refs.selection.style.top = cursorY + 'px';
-				}
-			};
-
-			const up = e => {
-				document.documentElement.removeEventListener('mousemove', move);
-				document.documentElement.removeEventListener('mouseup', up);
-
-				this.$refs.selection.style.display = 'none';
-			};
-
-			document.documentElement.addEventListener('mousemove', move);
-			document.documentElement.addEventListener('mouseup', up);
-		};
-
-		this.pathOncontextmenu = e => {
-			e.preventDefault();
-			e.stopImmediatePropagation();
-			return false;
-		};
-
-		this.ondragover = e => {
-			e.preventDefault();
-			e.stopPropagation();
-
-			// ドラッグ元が自分自身の所有するアイテムかどうか
-			if (!this.isDragSource) {
-				// ドラッグされてきたものがファイルだったら
-				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
-				this.draghover = true;
-			} else {
-				// 自分自身にはドロップさせない
-				e.dataTransfer.dropEffect = 'none';
-				return false;
-			}
-		};
-
-		this.ondragenter = e => {
-			e.preventDefault();
-			if (!this.isDragSource) this.draghover = true;
-		};
-
-		this.ondragleave = e => {
-			this.draghover = false;
-		};
-
-		this.ondrop = e => {
-			e.preventDefault();
-			e.stopPropagation();
-
-			this.draghover = false;
-
-			// ドロップされてきたものがファイルだったら
-			if (e.dataTransfer.files.length > 0) {
-				Array.from(e.dataTransfer.files).forEach(file => {
-					this.upload(file, this.folder);
-				});
-				return false;
-			}
-
-			// データ取得
-			const data = e.dataTransfer.getData('text');
-			if (data == null) return false;
-
-			// パース
-			// TODO: JSONじゃなかったら中断
-			const obj = JSON.parse(data);
-
-			// (ドライブの)ファイルだったら
-			if (obj.type == 'file') {
-				const file = obj.id;
-				if (this.files.some(f => f.id == file)) return false;
-				this.removeFile(file);
-				this.api('drive/files/update', {
-					file_id: file,
-					folder_id: this.folder ? this.folder.id : null
-				});
-			// (ドライブの)フォルダーだったら
-			} else if (obj.type == 'folder') {
-				const folder = obj.id;
-				// 移動先が自分自身ならreject
-				if (this.folder && folder == this.folder.id) return false;
-				if (this.folders.some(f => f.id == folder)) return false;
-				this.removeFolder(folder);
-				this.api('drive/folders/update', {
-					folder_id: folder,
-					parent_id: this.folder ? this.folder.id : null
-				}).then(() => {
-					// something
-				}).catch(err => {
-					switch (err) {
-						case 'detected-circular-definition':
-							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
-								'%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%', [{
-								text: '%i18n:common.ok%'
-							}]);
-							break;
-						default:
-							alert('%i18n:desktop.tags.mk-drive-browser.unhandled-error% ' + err);
-					}
-				});
-			}
-
-			return false;
-		};
-
-		this.oncontextmenu = e => {
-			e.preventDefault();
-			e.stopImmediatePropagation();
-
-			const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-base-contextmenu')), {
-				browser: this
-			})[0];
-			ctx.open({
-				x: e.pageX - window.pageXOffset,
-				y: e.pageY - window.pageYOffset
-			});
-
-			return false;
-		};
-
-		this.selectLocalFile = () => {
-			this.$refs.fileInput.click();
-		};
-
-		this.urlUpload = () => {
-			inputDialog('%i18n:desktop.tags.mk-drive-browser.url-upload%',
-				'%i18n:desktop.tags.mk-drive-browser.url-of-file%', null, url => {
-
-				this.api('drive/files/upload_from_url', {
-					url: url,
-					folder_id: this.folder ? this.folder.id : undefined
-				});
-
-				dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
-					'%i18n:desktop.tags.mk-drive-browser.may-take-time%', [{
-					text: '%i18n:common.ok%'
-				}]);
-			});
-		};
-
-		this.createFolder = () => {
-			inputDialog('%i18n:desktop.tags.mk-drive-browser.create-folder%',
-				'%i18n:desktop.tags.mk-drive-browser.folder-name%', null, name => {
-
-				this.api('drive/folders/create', {
-					name: name,
-					folder_id: this.folder ? this.folder.id : undefined
-				}).then(folder => {
-					this.addFolder(folder, true);
-					this.update();
-				});
-			});
-		};
-
-		this.changeFileInput = () => {
-			Array.from(this.$refs.fileInput.files).forEach(file => {
-				this.upload(file, this.folder);
-			});
-		};
-
-		this.upload = (file, folder) => {
-			if (folder && typeof folder == 'object') folder = folder.id;
-			this.$refs.uploader.upload(file, folder);
-		};
-
-		this.chooseFile = file => {
-			const isAlreadySelected = this.selectedFiles.some(f => f.id == file.id);
-			if (this.multiple) {
-				if (isAlreadySelected) {
-					this.selectedFiles = this.selectedFiles.filter(f => f.id != file.id);
-				} else {
-					this.selectedFiles.push(file);
-				}
-				this.update();
-				this.$emit('change-selection', this.selectedFiles);
-			} else {
-				if (isAlreadySelected) {
-					this.$emit('selected', file);
-				} else {
-					this.selectedFiles = [file];
-					this.$emit('change-selection', [file]);
-				}
-			}
-		};
-
-		this.newWindow = folderId => {
-			riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-window')), {
-				folder: folderId
-			});
-		};
-
-		this.move = target => {
-			if (target == null) {
-				this.goRoot();
-				return;
-			} else if (typeof target == 'object') {
-				target = target.id;
-			}
-
-			this.update({
-				fetching: true
-			});
-
-			this.api('drive/folders/show', {
-				folder_id: target
-			}).then(folder => {
-				this.folder = folder;
-				this.hierarchyFolders = [];
-
-				const dive = folder => {
-					this.hierarchyFolders.unshift(folder);
-					if (folder.parent) dive(folder.parent);
-				};
-
-				if (folder.parent) dive(folder.parent);
-
-				this.update();
-				this.$emit('open-folder', folder);
-				this.fetch();
-			});
-		};
-
-		this.addFolder = (folder, unshift = false) => {
-			const current = this.folder ? this.folder.id : null;
-			if (current != folder.parent_id) return;
-
-			if (this.folders.some(f => f.id == folder.id)) {
-				const exist = this.folders.map(f => f.id).indexOf(folder.id);
-				this.folders[exist] = folder;
-				this.update();
-				return;
-			}
-
-			if (unshift) {
-				this.folders.unshift(folder);
-			} else {
-				this.folders.push(folder);
-			}
-
-			this.update();
-		};
-
-		this.addFile = (file, unshift = false) => {
-			const current = this.folder ? this.folder.id : null;
-			if (current != file.folder_id) return;
-
-			if (this.files.some(f => f.id == file.id)) {
-				const exist = this.files.map(f => f.id).indexOf(file.id);
-				this.files[exist] = file;
-				this.update();
-				return;
-			}
-
-			if (unshift) {
-				this.files.unshift(file);
-			} else {
-				this.files.push(file);
-			}
-
-			this.update();
-		};
-
-		this.removeFolder = folder => {
-			if (typeof folder == 'object') folder = folder.id;
-			this.folders = this.folders.filter(f => f.id != folder);
-			this.update();
-		};
-
-		this.removeFile = file => {
-			if (typeof file == 'object') file = file.id;
-			this.files = this.files.filter(f => f.id != file);
-			this.update();
-		};
-
-		this.appendFile = file => this.addFile(file);
-		this.appendFolder = file => this.addFolder(file);
-		this.prependFile = file => this.addFile(file, true);
-		this.prependFolder = file => this.addFolder(file, true);
-
-		this.goRoot = () => {
-			// 既にrootにいるなら何もしない
-			if (this.folder == null) return;
-
-			this.update({
-				folder: null,
-				hierarchyFolders: []
-			});
-			this.$emit('move-root');
-			this.fetch();
-		};
-
-		this.fetch = () => {
-			this.update({
-				folders: [],
-				files: [],
-				moreFolders: false,
-				moreFiles: false,
-				fetching: true
-			});
-
-			let fetchedFolders = null;
-			let fetchedFiles = null;
-
-			const foldersMax = 30;
-			const filesMax = 30;
-
-			// フォルダ一覧取得
-			this.api('drive/folders', {
-				folder_id: this.folder ? this.folder.id : null,
-				limit: foldersMax + 1
-			}).then(folders => {
-				if (folders.length == foldersMax + 1) {
-					this.moreFolders = true;
-					folders.pop();
-				}
-				fetchedFolders = folders;
-				complete();
-			});
-
-			// ファイル一覧取得
-			this.api('drive/files', {
-				folder_id: this.folder ? this.folder.id : null,
-				limit: filesMax + 1
-			}).then(files => {
-				if (files.length == filesMax + 1) {
-					this.moreFiles = true;
-					files.pop();
-				}
-				fetchedFiles = files;
-				complete();
-			});
-
-			let flag = false;
-			const complete = () => {
-				if (flag) {
-					fetchedFolders.forEach(this.appendFolder);
-					fetchedFiles.forEach(this.appendFile);
-					this.update({
-						fetching: false
-					});
-				} else {
-					flag = true;
-				}
-			};
-		};
-
-		this.fetchMoreFiles = () => {
-			this.update({
-				fetching: true
-			});
-
-			const max = 30;
-
-			// ファイル一覧取得
-			this.api('drive/files', {
-				folder_id: this.folder ? this.folder.id : null,
-				limit: max + 1
-			}).then(files => {
-				if (files.length == max + 1) {
-					this.moreFiles = true;
-					files.pop();
-				} else {
-					this.moreFiles = false;
-				}
-				files.forEach(this.appendFile);
-				this.update({
-					fetching: false
-				});
-			});
-		};
-
-	</script>
-</mk-drive-browser>
diff --git a/src/web/app/desktop/tags/drive/file-contextmenu.tag b/src/web/app/desktop/tags/drive/file-contextmenu.tag
deleted file mode 100644
index 125f70b614..0000000000
--- a/src/web/app/desktop/tags/drive/file-contextmenu.tag
+++ /dev/null
@@ -1,99 +0,0 @@
-<mk-drive-browser-file-contextmenu>
-	<mk-contextmenu ref="ctx">
-		<ul>
-			<li @click="parent.rename">
-				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p>
-			</li>
-			<li @click="parent.copyUrl">
-				<p>%fa:link%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p>
-			</li>
-			<li><a href={ parent.file.url + '?download' } download={ parent.file.name } @click="parent.download">%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
-			<li class="separator"></li>
-			<li @click="parent.delete">
-				<p>%fa:R trash-alt%%i18n:common.delete%</p>
-			</li>
-			<li class="separator"></li>
-			<li class="has-child">
-				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%%fa:caret-right%</p>
-				<ul>
-					<li @click="parent.setAvatar">
-						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%</p>
-					</li>
-					<li @click="parent.setBanner">
-						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%</p>
-					</li>
-				</ul>
-			</li>
-			<li class="has-child">
-				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...%fa:caret-right%</p>
-				<ul>
-					<li @click="parent.addApp">
-						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...</p>
-					</li>
-				</ul>
-			</li>
-		</ul>
-	</mk-contextmenu>
-	<script lang="typescript">
-		import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
-		import dialog from '../../scripts/dialog';
-		import inputDialog from '../../scripts/input-dialog';
-		import updateAvatar from '../../scripts/update-avatar';
-		import NotImplementedException from '../../scripts/not-implemented-exception';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.browser = this.opts.browser;
-		this.file = this.opts.file;
-
-		this.on('mount', () => {
-			this.$refs.ctx.on('closed', () => {
-				this.$emit('closed');
-				this.$destroy();
-			});
-		});
-
-		this.open = pos => {
-			this.$refs.ctx.open(pos);
-		};
-
-		this.rename = () => {
-			this.$refs.ctx.close();
-
-			inputDialog('%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename-file%', '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.input-new-file-name%', this.file.name, name => {
-				this.api('drive/files/update', {
-					file_id: this.file.id,
-					name: name
-				})
-			});
-		};
-
-		this.copyUrl = () => {
-			copyToClipboard(this.file.url);
-			this.$refs.ctx.close();
-			dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
-				'%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%', [{
-				text: '%i18n:common.ok%'
-			}]);
-		};
-
-		this.download = () => {
-			this.$refs.ctx.close();
-		};
-
-		this.setAvatar = () => {
-			this.$refs.ctx.close();
-			updateAvatar(this.I, null, this.file);
-		};
-
-		this.setBanner = () => {
-			this.$refs.ctx.close();
-			updateBanner(this.I, null, this.file);
-		};
-
-		this.addApp = () => {
-			NotImplementedException();
-		};
-	</script>
-</mk-drive-browser-file-contextmenu>
diff --git a/src/web/app/desktop/tags/drive/file.tag b/src/web/app/desktop/tags/drive/file.tag
deleted file mode 100644
index a669f5fff4..0000000000
--- a/src/web/app/desktop/tags/drive/file.tag
+++ /dev/null
@@ -1,217 +0,0 @@
-<mk-drive-browser-file data-is-selected={ isSelected } data-is-contextmenu-showing={ isContextmenuShowing.toString() } @click="onclick" oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
-	<div class="label" v-if="I.avatar_id == file.id"><img src="/assets/label.svg"/>
-		<p>%i18n:desktop.tags.mk-drive-browser-file.avatar%</p>
-	</div>
-	<div class="label" v-if="I.banner_id == file.id"><img src="/assets/label.svg"/>
-		<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
-	</div>
-	<div class="thumbnail" ref="thumbnail" style="background-color:{ file.properties.average_color ? 'rgb(' + file.properties.average_color.join(',') + ')' : 'transparent' }">
-		<img src={ file.url + '?thumbnail&size=128' } alt="" onload={ onload }/>
-	</div>
-	<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" v-if="file.name.lastIndexOf('.') != -1">{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 8px 0 0 0
-			height 180px
-			border-radius 4px
-
-			&, *
-				cursor pointer
-
-			&:hover
-				background rgba(0, 0, 0, 0.05)
-
-				> .label
-					&:before
-					&:after
-						background #0b65a5
-
-			&:active
-				background rgba(0, 0, 0, 0.1)
-
-				> .label
-					&:before
-					&:after
-						background #0b588c
-
-			&[data-is-selected]
-				background $theme-color
-
-				&:hover
-					background lighten($theme-color, 10%)
-
-				&:active
-					background darken($theme-color, 10%)
-
-				> .label
-					&:before
-					&:after
-						display none
-
-				> .name
-					color $theme-color-foreground
-
-			&[data-is-contextmenu-showing='true']
-				&:after
-					content ""
-					pointer-events none
-					position absolute
-					top -4px
-					right -4px
-					bottom -4px
-					left -4px
-					border 2px dashed rgba($theme-color, 0.3)
-					border-radius 4px
-
-			> .label
-				position absolute
-				top 0
-				left 0
-				pointer-events none
-
-				&:before
-					content ""
-					display block
-					position absolute
-					z-index 1
-					top 0
-					left 57px
-					width 28px
-					height 8px
-					background #0c7ac9
-
-				&:after
-					content ""
-					display block
-					position absolute
-					z-index 1
-					top 57px
-					left 0
-					width 8px
-					height 28px
-					background #0c7ac9
-
-				> img
-					position absolute
-					z-index 2
-					top 0
-					left 0
-
-				> p
-					position absolute
-					z-index 3
-					top 19px
-					left -28px
-					width 120px
-					margin 0
-					text-align center
-					line-height 28px
-					color #fff
-					transform rotate(-45deg)
-
-			> .thumbnail
-				width 128px
-				height 128px
-				margin auto
-
-				> img
-					display block
-					position absolute
-					top 0
-					left 0
-					right 0
-					bottom 0
-					margin auto
-					max-width 128px
-					max-height 128px
-					pointer-events none
-
-			> .name
-				display block
-				margin 4px 0 0 0
-				font-size 0.8em
-				text-align center
-				word-break break-all
-				color #444
-				overflow hidden
-
-				> .ext
-					opacity 0.5
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-		import bytesToSize from '../../../common/scripts/bytes-to-size';
-
-		this.mixin('i');
-
-		this.file = this.opts.file;
-		this.browser = this.parent;
-		this.title = `${this.file.name}\n${this.file.type} ${bytesToSize(this.file.datasize)}`;
-		this.isContextmenuShowing = false;
-		this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id);
-
-		this.browser.on('change-selection', selections => {
-			this.isSelected = selections.some(f => f.id == this.file.id);
-			this.update();
-		});
-
-		this.onclick = () => {
-			this.browser.chooseFile(this.file);
-		};
-
-		this.oncontextmenu = e => {
-			e.preventDefault();
-			e.stopImmediatePropagation();
-
-			this.update({
-				isContextmenuShowing: true
-			});
-			const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-file-contextmenu')), {
-				browser: this.browser,
-				file: this.file
-			})[0];
-			ctx.open({
-				x: e.pageX - window.pageXOffset,
-				y: e.pageY - window.pageYOffset
-			});
-			ctx.on('closed', () => {
-				this.update({
-					isContextmenuShowing: false
-				});
-			});
-			return false;
-		};
-
-		this.ondragstart = e => {
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('text', JSON.stringify({
-				type: 'file',
-				id: this.file.id,
-				file: this.file
-			}));
-			this.isDragging = true;
-
-			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
-			// (=あなたの子供が、ドラッグを開始しましたよ)
-			this.browser.isDragSource = true;
-		};
-
-		this.ondragend = e => {
-			this.isDragging = false;
-			this.browser.isDragSource = false;
-		};
-
-		this.onload = () => {
-			if (this.file.properties.average_color) {
-				anime({
-					targets: this.$refs.thumbnail,
-					backgroundColor: `rgba(${this.file.properties.average_color.join(',')}, 0)`,
-					duration: 100,
-					easing: 'linear'
-				});
-			}
-		};
-	</script>
-</mk-drive-browser-file>
diff --git a/src/web/app/desktop/tags/drive/folder-contextmenu.tag b/src/web/app/desktop/tags/drive/folder-contextmenu.tag
deleted file mode 100644
index 0cb7f6eb80..0000000000
--- a/src/web/app/desktop/tags/drive/folder-contextmenu.tag
+++ /dev/null
@@ -1,63 +0,0 @@
-<mk-drive-browser-folder-contextmenu>
-	<mk-contextmenu ref="ctx">
-		<ul>
-			<li @click="parent.move">
-				<p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
-			</li>
-			<li @click="parent.newWindow">
-				<p>%fa:R window-restore%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
-			</li>
-			<li class="separator"></li>
-			<li @click="parent.rename">
-				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p>
-			</li>
-			<li class="separator"></li>
-			<li @click="parent.delete">
-				<p>%fa:R trash-alt%%i18n:common.delete%</p>
-			</li>
-		</ul>
-	</mk-contextmenu>
-	<script lang="typescript">
-		import inputDialog from '../../scripts/input-dialog';
-
-		this.mixin('api');
-
-		this.browser = this.opts.browser;
-		this.folder = this.opts.folder;
-
-		this.open = pos => {
-			this.$refs.ctx.open(pos);
-
-			this.$refs.ctx.on('closed', () => {
-				this.$emit('closed');
-				this.$destroy();
-			});
-		};
-
-		this.move = () => {
-			this.browser.move(this.folder.id);
-			this.$refs.ctx.close();
-		};
-
-		this.newWindow = () => {
-			this.browser.newWindow(this.folder.id);
-			this.$refs.ctx.close();
-		};
-
-		this.createFolder = () => {
-			this.browser.createFolder();
-			this.$refs.ctx.close();
-		};
-
-		this.rename = () => {
-			this.$refs.ctx.close();
-
-			inputDialog('%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename-folder%', '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.input-new-folder-name%', this.folder.name, name => {
-				this.api('drive/folders/update', {
-					folder_id: this.folder.id,
-					name: name
-				});
-			});
-		};
-	</script>
-</mk-drive-browser-folder-contextmenu>
diff --git a/src/web/app/desktop/tags/drive/folder.tag b/src/web/app/desktop/tags/drive/folder.tag
deleted file mode 100644
index ed16bfb0d7..0000000000
--- a/src/web/app/desktop/tags/drive/folder.tag
+++ /dev/null
@@ -1,202 +0,0 @@
-<mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } @click="onclick" onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
-	<p class="name"><template v-if="hover">%fa:R folder-open .fw%</template><template v-if="!hover">%fa:R folder .fw%</template>{ folder.name }</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 8px
-			height 64px
-			background lighten($theme-color, 95%)
-			border-radius 4px
-
-			&, *
-				cursor pointer
-
-			*
-				pointer-events none
-
-			&:hover
-				background lighten($theme-color, 90%)
-
-			&:active
-				background lighten($theme-color, 85%)
-
-			&[data-is-contextmenu-showing='true']
-			&[data-draghover='true']
-				&:after
-					content ""
-					pointer-events none
-					position absolute
-					top -4px
-					right -4px
-					bottom -4px
-					left -4px
-					border 2px dashed rgba($theme-color, 0.3)
-					border-radius 4px
-
-			&[data-draghover='true']
-				background lighten($theme-color, 90%)
-
-			> .name
-				margin 0
-				font-size 0.9em
-				color darken($theme-color, 30%)
-
-				> [data-fa]
-					margin-right 4px
-				  margin-left 2px
-					text-align left
-
-	</style>
-	<script lang="typescript">
-		import dialog from '../../scripts/dialog';
-
-		this.mixin('api');
-
-		this.folder = this.opts.folder;
-		this.browser = this.parent;
-
-		this.title = this.folder.name;
-		this.hover = false;
-		this.draghover = false;
-		this.isContextmenuShowing = false;
-
-		this.onclick = () => {
-			this.browser.move(this.folder);
-		};
-
-		this.onmouseover = () => {
-			this.hover = true;
-		};
-
-		this.onmouseout = () => {
-			this.hover = false
-		};
-
-		this.ondragover = e => {
-			e.preventDefault();
-			e.stopPropagation();
-
-			// 自分自身がドラッグされていない場合
-			if (!this.isDragging) {
-				// ドラッグされてきたものがファイルだったら
-				if (e.dataTransfer.effectAllowed === 'all') {
-					e.dataTransfer.dropEffect = 'copy';
-				} else {
-					e.dataTransfer.dropEffect = 'move';
-				}
-			} else {
-				// 自分自身にはドロップさせない
-				e.dataTransfer.dropEffect = 'none';
-			}
-			return false;
-		};
-
-		this.ondragenter = e => {
-			e.preventDefault();
-			if (!this.isDragging) this.draghover = true;
-		};
-
-		this.ondragleave = () => {
-			this.draghover = false;
-		};
-
-		this.ondrop = e => {
-			e.preventDefault();
-			e.stopPropagation();
-			this.draghover = false;
-
-			// ファイルだったら
-			if (e.dataTransfer.files.length > 0) {
-				Array.from(e.dataTransfer.files).forEach(file => {
-					this.browser.upload(file, this.folder);
-				});
-				return false;
-			};
-
-			// データ取得
-			const data = e.dataTransfer.getData('text');
-			if (data == null) return false;
-
-			// パース
-			// TODO: Validate JSON
-			const obj = JSON.parse(data);
-
-			// (ドライブの)ファイルだったら
-			if (obj.type == 'file') {
-				const file = obj.id;
-				this.browser.removeFile(file);
-				this.api('drive/files/update', {
-					file_id: file,
-					folder_id: this.folder.id
-				});
-			// (ドライブの)フォルダーだったら
-			} else if (obj.type == 'folder') {
-				const folder = obj.id;
-				// 移動先が自分自身ならreject
-				if (folder == this.folder.id) return false;
-				this.browser.removeFolder(folder);
-				this.api('drive/folders/update', {
-					folder_id: folder,
-					parent_id: this.folder.id
-				}).then(() => {
-					// something
-				}).catch(err => {
-					switch (err) {
-						case 'detected-circular-definition':
-							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
-								'%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%', [{
-								text: '%i18n:common.ok%'
-							}]);
-							break;
-						default:
-							alert('%i18n:desktop.tags.mk-drive-browser-folder.unhandled-error% ' + err);
-					}
-				});
-			}
-
-			return false;
-		};
-
-		this.ondragstart = e => {
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('text', JSON.stringify({
-				type: 'folder',
-				id: this.folder.id
-			}));
-			this.isDragging = true;
-
-			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
-			// (=あなたの子供が、ドラッグを開始しましたよ)
-			this.browser.isDragSource = true;
-		};
-
-		this.ondragend = e => {
-			this.isDragging = false;
-			this.browser.isDragSource = false;
-		};
-
-		this.oncontextmenu = e => {
-			e.preventDefault();
-			e.stopImmediatePropagation();
-
-			this.update({
-				isContextmenuShowing: true
-			});
-			const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-folder-contextmenu')), {
-				browser: this.browser,
-				folder: this.folder
-			})[0];
-			ctx.open({
-				x: e.pageX - window.pageXOffset,
-				y: e.pageY - window.pageYOffset
-			});
-			ctx.on('closed', () => {
-				this.update({
-					isContextmenuShowing: false
-				});
-			});
-
-			return false;
-		};
-	</script>
-</mk-drive-browser-folder>
diff --git a/src/web/app/desktop/tags/drive/nav-folder.tag b/src/web/app/desktop/tags/drive/nav-folder.tag
deleted file mode 100644
index 4bca80f683..0000000000
--- a/src/web/app/desktop/tags/drive/nav-folder.tag
+++ /dev/null
@@ -1,96 +0,0 @@
-<mk-drive-browser-nav-folder data-draghover={ draghover } @click="onclick" ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
-	<template v-if="folder == null">%fa:cloud%</template><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
-	<style lang="stylus" scoped>
-		:scope
-			&[data-draghover]
-				background #eee
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.folder = this.opts.folder ? this.opts.folder : null;
-		this.browser = this.parent;
-
-		this.hover = false;
-
-		this.onclick = () => {
-			this.browser.move(this.folder);
-		};
-
-		this.onmouseover = () => {
-			this.hover = true
-		};
-
-		this.onmouseout = () => {
-			this.hover = false
-		};
-
-		this.ondragover = e => {
-			e.preventDefault();
-			e.stopPropagation();
-
-			// このフォルダがルートかつカレントディレクトリならドロップ禁止
-			if (this.folder == null && this.browser.folder == null) {
-				e.dataTransfer.dropEffect = 'none';
-			// ドラッグされてきたものがファイルだったら
-			} else if (e.dataTransfer.effectAllowed == 'all') {
-				e.dataTransfer.dropEffect = 'copy';
-			} else {
-				e.dataTransfer.dropEffect = 'move';
-			}
-			return false;
-		};
-
-		this.ondragenter = () => {
-			if (this.folder || this.browser.folder) this.draghover = true;
-		};
-
-		this.ondragleave = () => {
-			if (this.folder || this.browser.folder) this.draghover = false;
-		};
-
-		this.ondrop = e => {
-			e.stopPropagation();
-			this.draghover = false;
-
-			// ファイルだったら
-			if (e.dataTransfer.files.length > 0) {
-				Array.from(e.dataTransfer.files).forEach(file => {
-					this.browser.upload(file, this.folder);
-				});
-				return false;
-			};
-
-			// データ取得
-			const data = e.dataTransfer.getData('text');
-			if (data == null) return false;
-
-			// パース
-			// TODO: Validate JSON
-			const obj = JSON.parse(data);
-
-			// (ドライブの)ファイルだったら
-			if (obj.type == 'file') {
-				const file = obj.id;
-				this.browser.removeFile(file);
-				this.api('drive/files/update', {
-					file_id: file,
-					folder_id: this.folder ? this.folder.id : null
-				});
-			// (ドライブの)フォルダーだったら
-			} else if (obj.type == 'folder') {
-				const folder = obj.id;
-				// 移動先が自分自身ならreject
-				if (this.folder && folder == this.folder.id) return false;
-				this.browser.removeFolder(folder);
-				this.api('drive/folders/update', {
-					folder_id: folder,
-					parent_id: this.folder ? this.folder.id : null
-				});
-			}
-
-			return false;
-		};
-	</script>
-</mk-drive-browser-nav-folder>
diff --git a/src/web/app/desktop/tags/ellipsis-icon.tag b/src/web/app/desktop/tags/ellipsis-icon.tag
deleted file mode 100644
index 619f0d84f7..0000000000
--- a/src/web/app/desktop/tags/ellipsis-icon.tag
+++ /dev/null
@@ -1,37 +0,0 @@
-<mk-ellipsis-icon>
-	<div></div>
-	<div></div>
-	<div></div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 70px
-			margin 0 auto
-			text-align center
-
-			> div
-				display inline-block
-				width 18px
-				height 18px
-				background-color rgba(0, 0, 0, 0.3)
-				border-radius 100%
-				animation bounce 1.4s infinite ease-in-out both
-
-				&:nth-child(1)
-					animation-delay 0s
-
-				&:nth-child(2)
-					margin 0 6px
-					animation-delay 0.16s
-
-				&:nth-child(3)
-					animation-delay 0.32s
-
-			@keyframes bounce
-				0%, 80%, 100%
-					transform scale(0)
-				40%
-					transform scale(1)
-
-	</style>
-</mk-ellipsis-icon>
diff --git a/src/web/app/desktop/tags/follow-button.tag b/src/web/app/desktop/tags/follow-button.tag
deleted file mode 100644
index fa7d43e039..0000000000
--- a/src/web/app/desktop/tags/follow-button.tag
+++ /dev/null
@@ -1,150 +0,0 @@
-<mk-follow-button>
-	<button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
-		<template v-if="!wait && user.is_following">%fa:minus%</template>
-		<template v-if="!wait && !user.is_following">%fa:plus%</template>
-		<template v-if="wait">%fa:spinner .pulse .fw%</template>
-	</button>
-	<div class="init" v-if="init">%fa:spinner .pulse .fw%</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> button
-			> .init
-				display block
-				cursor pointer
-				padding 0
-				margin 0
-				width 32px
-				height 32px
-				font-size 1em
-				outline none
-				border-radius 4px
-
-				*
-					pointer-events none
-
-				&:focus
-					&:after
-						content ""
-						pointer-events none
-						position absolute
-						top -5px
-						right -5px
-						bottom -5px
-						left -5px
-						border 2px solid rgba($theme-color, 0.3)
-						border-radius 8px
-
-				&.follow
-					color #888
-					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-					border solid 1px #e2e2e2
-
-					&:hover
-						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-						border-color #dcdcdc
-
-					&:active
-						background #ececec
-						border-color #dcdcdc
-
-				&.unfollow
-					color $theme-color-foreground
-					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-					border solid 1px lighten($theme-color, 15%)
-
-					&:not(:disabled)
-						font-weight bold
-
-					&:hover:not(:disabled)
-						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-						border-color $theme-color
-
-					&:active:not(:disabled)
-						background $theme-color
-						border-color $theme-color
-
-				&.wait
-					cursor wait !important
-					opacity 0.7
-
-	</style>
-	<script lang="typescript">
-		import isPromise from '../../common/scripts/is-promise';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.user = null;
-		this.userPromise = isPromise(this.opts.user)
-			? this.opts.user
-			: Promise.resolve(this.opts.user);
-		this.init = true;
-		this.wait = false;
-
-		this.on('mount', () => {
-			this.userPromise.then(user => {
-				this.update({
-					init: false,
-					user: user
-				});
-				this.connection.on('follow', this.onStreamFollow);
-				this.connection.on('unfollow', this.onStreamUnfollow);
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('follow', this.onStreamFollow);
-			this.connection.off('unfollow', this.onStreamUnfollow);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.onStreamFollow = user => {
-			if (user.id == this.user.id) {
-				this.update({
-					user: user
-				});
-			}
-		};
-
-		this.onStreamUnfollow = user => {
-			if (user.id == this.user.id) {
-				this.update({
-					user: user
-				});
-			}
-		};
-
-		this.onclick = () => {
-			this.wait = true;
-			if (this.user.is_following) {
-				this.api('following/delete', {
-					user_id: this.user.id
-				}).then(() => {
-					this.user.is_following = false;
-				}).catch(err => {
-					console.error(err);
-				}).then(() => {
-					this.wait = false;
-					this.update();
-				});
-			} else {
-				this.api('following/create', {
-					user_id: this.user.id
-				}).then(() => {
-					this.user.is_following = true;
-				}).catch(err => {
-					console.error(err);
-				}).then(() => {
-					this.wait = false;
-					this.update();
-				});
-			}
-		};
-	</script>
-</mk-follow-button>
diff --git a/src/web/app/desktop/tags/following-setuper.tag b/src/web/app/desktop/tags/following-setuper.tag
deleted file mode 100644
index 75ce76ae53..0000000000
--- a/src/web/app/desktop/tags/following-setuper.tag
+++ /dev/null
@@ -1,169 +0,0 @@
-<mk-following-setuper>
-	<p class="title">気になるユーザーをフォロー:</p>
-	<div class="users" v-if="!fetching && users.length > 0">
-		<div class="user" each={ users }><a class="avatar-anchor" href={ '/' + username }><img class="avatar" src={ avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ id }/></a>
-			<div class="body"><a class="name" href={ '/' + username } target="_blank" data-user-preview={ id }>{ name }</a>
-				<p class="username">@{ username }</p>
-			</div>
-			<mk-follow-button user={ this }/>
-		</div>
-	</div>
-	<p class="empty" v-if="!fetching && users.length == 0">おすすめのユーザーは見つかりませんでした。</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
-	<a class="refresh" @click="refresh">もっと見る</a>
-	<button class="close" @click="close" title="閉じる">%fa:times%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 24px
-
-			> .title
-				margin 0 0 12px 0
-				font-size 1em
-				font-weight bold
-				color #888
-
-			> .users
-				&:after
-					content ""
-					display block
-					clear both
-
-				> .user
-					padding 16px
-					width 238px
-					float left
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> .avatar-anchor
-						display block
-						float left
-						margin 0 12px 0 0
-
-						> .avatar
-							display block
-							width 42px
-							height 42px
-							margin 0
-							border-radius 8px
-							vertical-align bottom
-
-					> .body
-						float left
-						width calc(100% - 54px)
-
-						> .name
-							margin 0
-							font-size 16px
-							line-height 24px
-							color #555
-
-						> .username
-							margin 0
-							font-size 15px
-							line-height 16px
-							color #ccc
-
-					> mk-follow-button
-						position absolute
-						top 16px
-						right 16px
-
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> .fetching
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-			> .refresh
-				display block
-				margin 0 8px 0 0
-				text-align right
-				font-size 0.9em
-				color #999
-
-			> .close
-				cursor pointer
-				display block
-				position absolute
-				top 6px
-				right 6px
-				z-index 1
-				margin 0
-				padding 0
-				font-size 1.2em
-				color #999
-				border none
-				outline none
-				background transparent
-
-				&:hover
-					color #555
-
-				&:active
-					color #222
-
-				> [data-fa]
-					padding 14px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-		this.mixin('user-preview');
-
-		this.users = null;
-		this.fetching = true;
-
-		this.limit = 6;
-		this.page = 0;
-
-		this.on('mount', () => {
-			this.fetch();
-		});
-
-		this.fetch = () => {
-			this.update({
-				fetching: true,
-				users: null
-			});
-
-			this.api('users/recommendation', {
-				limit: this.limit,
-				offset: this.limit * this.page
-			}).then(users => {
-				this.fetching = false
-				this.users = users
-				this.update({
-					fetching: false,
-					users: users
-				});
-			});
-		};
-
-		this.refresh = () => {
-			if (this.users.length < this.limit) {
-				this.page = 0;
-			} else {
-				this.page++;
-			}
-			this.fetch();
-		};
-
-		this.close = () => {
-			this.$destroy();
-		};
-	</script>
-</mk-following-setuper>
diff --git a/src/web/app/desktop/tags/home-widgets/access-log.tag b/src/web/app/desktop/tags/home-widgets/access-log.tag
deleted file mode 100644
index fea18299e8..0000000000
--- a/src/web/app/desktop/tags/home-widgets/access-log.tag
+++ /dev/null
@@ -1,95 +0,0 @@
-<mk-access-log-home-widget>
-	<template v-if="data.design == 0">
-		<p class="title">%fa:server%%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
-	</template>
-	<div ref="log">
-		<p each={ requests }>
-			<span class="ip" style="color:{ fg }; background:{ bg }">{ ip }</span>
-			<span>{ method }</span>
-			<span>{ path }</span>
-		</p>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow hidden
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> div
-				max-height 250px
-				overflow auto
-
-				> p
-					margin 0
-					padding 8px
-					font-size 0.8em
-					color #555
-
-					&:nth-child(odd)
-						background rgba(0, 0, 0, 0.025)
-
-					> .ip
-						margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		import seedrandom from 'seedrandom';
-
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.mixin('requests-stream');
-		this.connection = this.requestsStream.getConnection();
-		this.connectionId = this.requestsStream.use();
-
-		this.requests = [];
-
-		this.on('mount', () => {
-			this.connection.on('request', this.onRequest);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('request', this.onRequest);
-			this.requestsStream.dispose(this.connectionId);
-		});
-
-		this.onRequest = request => {
-			const random = seedrandom(request.ip);
-			const r = Math.floor(random() * 255);
-			const g = Math.floor(random() * 255);
-			const b = Math.floor(random() * 255);
-			const luma = (0.2126 * r) + (0.7152 * g) + (0.0722 * b); // SMPTE C, Rec. 709 weightings
-			request.bg = `rgb(${r}, ${g}, ${b})`;
-			request.fg = luma >= 165 ? '#000' : '#fff';
-
-			this.requests.push(request);
-			if (this.requests.length > 30) this.requests.shift();
-			this.update();
-
-			this.$refs.log.scrollTop = this.$refs.log.scrollHeight;
-		};
-
-		this.func = () => {
-			if (++this.data.design == 2) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-access-log-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/activity.tag b/src/web/app/desktop/tags/home-widgets/activity.tag
deleted file mode 100644
index 878de6d13a..0000000000
--- a/src/web/app/desktop/tags/home-widgets/activity.tag
+++ /dev/null
@@ -1,32 +0,0 @@
-<mk-activity-home-widget>
-	<mk-activity-widget design={ data.design } view={ data.view } user={ I } ref="activity"/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		this.data = {
-			view: 0,
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.initializing = true;
-
-		this.on('mount', () => {
-			this.$refs.activity.on('view-changed', view => {
-				this.data.view = view;
-				this.save();
-			});
-		});
-
-		this.func = () => {
-			if (++this.data.design == 3) this.data.design = 0;
-			this.$refs.activity.update({
-				design: this.data.design
-			});
-			this.save();
-		};
-	</script>
-</mk-activity-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/broadcast.tag b/src/web/app/desktop/tags/home-widgets/broadcast.tag
deleted file mode 100644
index 91ddbb4ab4..0000000000
--- a/src/web/app/desktop/tags/home-widgets/broadcast.tag
+++ /dev/null
@@ -1,143 +0,0 @@
-<mk-broadcast-home-widget data-found={ broadcasts.length != 0 } data-melt={ data.design == 1 }>
-	<div class="icon">
-		<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
-			<path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
-			<path class="wave a" d="M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z"></path>
-			<path class="wave b" d="M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z"></path>
-			<path class="wave c" d="M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z"></path>
-			<path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
-		</svg>
-	</div>
-	<p class="fetching" v-if="fetching">%i18n:desktop.tags.mk-broadcast-home-widget.fetching%<mk-ellipsis/></p>
-	<h1 v-if="!fetching">{
-		broadcasts.length == 0 ? '%i18n:desktop.tags.mk-broadcast-home-widget.no-broadcasts%' : broadcasts[i].title
-	}</h1>
-	<p v-if="!fetching"><mk-raw v-if="broadcasts.length != 0" content={ broadcasts[i].text }/><template v-if="broadcasts.length == 0">%i18n:desktop.tags.mk-broadcast-home-widget.have-a-nice-day%</template></p>
-	<a v-if="broadcasts.length > 1" @click="next">%i18n:desktop.tags.mk-broadcast-home-widget.next% &gt;&gt;</a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 10px
-			border solid 1px #4078c0
-			border-radius 6px
-
-			&[data-melt]
-				border none
-
-			&[data-found]
-				padding-left 50px
-
-				> .icon
-					display block
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .icon
-				display none
-				float left
-				margin-left -40px
-
-				> svg
-					fill currentColor
-					color #4078c0
-
-					> .wave
-						opacity 1
-
-						&.a
-							animation wave 20s ease-in-out 2.1s infinite
-						&.b
-							animation wave 20s ease-in-out 2s infinite
-						&.c
-							animation wave 20s ease-in-out 2s infinite
-						&.d
-							animation wave 20s ease-in-out 2.1s infinite
-
-						@keyframes wave
-							0%
-								opacity 1
-							1.5%
-								opacity 0
-							3.5%
-								opacity 0
-							5%
-								opacity 1
-							6.5%
-								opacity 0
-							8.5%
-								opacity 0
-							10%
-								opacity 1
-
-			> h1
-				margin 0
-				font-size 0.95em
-				font-weight normal
-				color #4078c0
-
-			> p
-				display block
-				z-index 1
-				margin 0
-				font-size 0.7em
-				color #555
-
-				&.fetching
-					text-align center
-
-				a
-					color #555
-					text-decoration underline
-
-			> a
-				display block
-				font-size 0.7em
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-		this.mixin('os');
-
-		this.i = 0;
-		this.fetching = true;
-		this.broadcasts = [];
-
-		this.on('mount', () => {
-			this.mios.getMeta().then(meta => {
-				let broadcasts = [];
-				if (meta.broadcasts) {
-					meta.broadcasts.forEach(broadcast => {
-						if (broadcast[_LANG_]) {
-							broadcasts.push(broadcast[_LANG_]);
-						}
-					});
-				}
-				this.update({
-					fetching: false,
-					broadcasts: broadcasts
-				});
-			});
-		});
-
-		this.next = () => {
-			if (this.i == this.broadcasts.length - 1) {
-				this.i = 0;
-			} else {
-				this.i++;
-			}
-			this.update();
-		};
-
-		this.func = () => {
-			if (++this.data.design == 2) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-broadcast-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/calendar.tag b/src/web/app/desktop/tags/home-widgets/calendar.tag
deleted file mode 100644
index 46d47662b9..0000000000
--- a/src/web/app/desktop/tags/home-widgets/calendar.tag
+++ /dev/null
@@ -1,167 +0,0 @@
-<mk-calendar-home-widget data-melt={ data.design == 1 } data-special={ special }>
-	<div class="calendar" data-is-holiday={ isHoliday }>
-		<p class="month-and-year"><span class="year">{ year }年</span><span class="month">{ month }月</span></p>
-		<p class="day">{ day }日</p>
-		<p class="week-day">{ weekDay }曜日</p>
-	</div>
-	<div class="info">
-		<div>
-			<p>今日:<b>{ dayP.toFixed(1) }%</b></p>
-			<div class="meter">
-				<div class="val" style={ 'width:' + dayP + '%' }></div>
-			</div>
-		</div>
-		<div>
-			<p>今月:<b>{ monthP.toFixed(1) }%</b></p>
-			<div class="meter">
-				<div class="val" style={ 'width:' + monthP + '%' }></div>
-			</div>
-		</div>
-		<div>
-			<p>今年:<b>{ yearP.toFixed(1) }%</b></p>
-			<div class="meter">
-				<div class="val" style={ 'width:' + yearP + '%' }></div>
-			</div>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 16px 0
-			color #777
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			&[data-special='on-new-years-day']
-				border-color #ef95a0
-
-			&[data-melt]
-				background transparent
-				border none
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .calendar
-				float left
-				width 60%
-				text-align center
-
-				&[data-is-holiday]
-					> .day
-						color #ef95a0
-
-				> p
-					margin 0
-					line-height 18px
-					font-size 14px
-
-					> span
-						margin 0 4px
-
-				> .day
-					margin 10px 0
-					line-height 32px
-					font-size 28px
-
-			> .info
-				display block
-				float left
-				width 40%
-				padding 0 16px 0 0
-
-				> div
-					margin-bottom 8px
-
-					&:last-child
-						margin-bottom 4px
-
-					> p
-						margin 0 0 2px 0
-						font-size 12px
-						line-height 18px
-						color #888
-
-						> b
-							margin-left 2px
-
-					> .meter
-						width 100%
-						overflow hidden
-						background #eee
-						border-radius 8px
-
-						> .val
-							height 4px
-							background $theme-color
-
-					&:nth-child(1)
-						> .meter > .val
-							background #f7796c
-
-					&:nth-child(2)
-						> .meter > .val
-							background #a1de41
-
-					&:nth-child(3)
-						> .meter > .val
-							background #41ddde
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.draw = () => {
-			const now = new Date();
-			const nd = now.getDate();
-			const nm = now.getMonth();
-			const ny = now.getFullYear();
-
-			this.year = ny;
-			this.month = nm + 1;
-			this.day = nd;
-			this.weekDay = ['日', '月', '火', '水', '木', '金', '土'][now.getDay()];
-
-			this.dayNumer   = now - new Date(ny, nm, nd);
-			this.dayDenom   = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
-			this.monthNumer = now - new Date(ny, nm, 1);
-			this.monthDenom = new Date(ny, nm + 1, 1) - new Date(ny, nm, 1);
-			this.yearNumer  = now - new Date(ny, 0, 1);
-			this.yearDenom  = new Date(ny + 1, 0, 1) - new Date(ny, 0, 1);
-
-			this.dayP   = this.dayNumer   / this.dayDenom   * 100;
-			this.monthP = this.monthNumer / this.monthDenom * 100;
-			this.yearP  = this.yearNumer  / this.yearDenom  * 100;
-
-			this.isHoliday = now.getDay() == 0 || now.getDay() == 6;
-
-			this.special =
-				nm == 0 && nd == 1 ? 'on-new-years-day' :
-				false;
-
-			this.update();
-		};
-
-		this.draw();
-
-		this.on('mount', () => {
-			this.clock = setInterval(this.draw, 1000);
-		});
-
-		this.on('unmount', () => {
-			clearInterval(this.clock);
-		});
-
-		this.func = () => {
-			if (++this.data.design == 2) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-calendar-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/channel.tag b/src/web/app/desktop/tags/home-widgets/channel.tag
deleted file mode 100644
index 98bf6bf7ec..0000000000
--- a/src/web/app/desktop/tags/home-widgets/channel.tag
+++ /dev/null
@@ -1,318 +0,0 @@
-<mk-channel-home-widget>
-	<template v-if="!data.compact">
-		<p class="title">%fa:tv%{
-			channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
-		}</p>
-		<button @click="settings" title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
-	</template>
-	<p class="get-started" v-if="this.data.channel == null">%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
-	<mk-channel ref="channel" show={ this.data.channel }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-			overflow hidden
-
-			> .title
-				z-index 2
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> .get-started
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> mk-channel
-				height 200px
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			channel: null,
-			compact: false
-		};
-
-		this.mixin('widget');
-
-		this.on('mount', () => {
-			if (this.data.channel) {
-				this.zap();
-			}
-		});
-
-		this.zap = () => {
-			this.update({
-				fetching: true
-			});
-
-			this.api('channels/show', {
-				channel_id: this.data.channel
-			}).then(channel => {
-				this.update({
-					fetching: false,
-					channel: channel
-				});
-
-				this.$refs.channel.zap(channel);
-			});
-		};
-
-		this.settings = () => {
-			const id = window.prompt('チャンネルID');
-			if (!id) return;
-			this.data.channel = id;
-			this.zap();
-
-			// Save state
-			this.save();
-		};
-
-		this.func = () => {
-			this.data.compact = !this.data.compact;
-			this.save();
-		};
-	</script>
-</mk-channel-home-widget>
-
-<mk-channel>
-	<p v-if="fetching">読み込み中<mk-ellipsis/></p>
-	<div v-if="!fetching" ref="posts">
-		<p v-if="posts.length == 0">まだ投稿がありません</p>
-		<mk-channel-post each={ post in posts.slice().reverse() } post={ post } form={ parent.refs.form }/>
-	</div>
-	<mk-channel-form ref="form"/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> p
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> div
-				height calc(100% - 38px)
-				overflow auto
-				font-size 0.9em
-
-				> mk-channel-post
-					border-bottom solid 1px #eee
-
-					&:last-child
-						border-bottom none
-
-			> mk-channel-form
-				position absolute
-				left 0
-				bottom 0
-
-	</style>
-	<script lang="typescript">
-		import ChannelStream from '../../../common/scripts/streaming/channel-stream';
-
-		this.mixin('api');
-
-		this.fetching = true;
-		this.channel = null;
-		this.posts = [];
-
-		this.on('unmount', () => {
-			if (this.connection) {
-				this.connection.off('post', this.onPost);
-				this.connection.close();
-			}
-		});
-
-		this.zap = channel => {
-			this.update({
-				fetching: true,
-				channel: channel
-			});
-
-			this.api('channels/posts', {
-				channel_id: channel.id
-			}).then(posts => {
-				this.update({
-					fetching: false,
-					posts: posts
-				});
-
-				this.scrollToBottom();
-
-				if (this.connection) {
-					this.connection.off('post', this.onPost);
-					this.connection.close();
-				}
-				this.connection = new ChannelStream(this.channel.id);
-				this.connection.on('post', this.onPost);
-			});
-		};
-
-		this.onPost = post => {
-			this.posts.unshift(post);
-			this.update();
-			this.scrollToBottom();
-		};
-
-		this.scrollToBottom = () => {
-			this.$refs.posts.scrollTop = this.$refs.posts.scrollHeight;
-		};
-	</script>
-</mk-channel>
-
-<mk-channel-post>
-	<header>
-		<a class="index" @click="reply">{ post.index }:</a>
-		<a class="name" href={ _URL_ + '/' + post.user.username }><b>{ post.user.name }</b></a>
-		<span>ID:<i>{ post.user.username }</i></span>
-	</header>
-	<div>
-		<a v-if="post.reply">&gt;&gt;{ post.reply.index }</a>
-		{ post.text }
-		<div class="media" v-if="post.media">
-			<template each={ file in post.media }>
-				<a href={ file.url } target="_blank">
-					<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
-				</a>
-			</template>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 0
-			color #444
-
-			> header
-				position -webkit-sticky
-				position sticky
-				z-index 1
-				top 0
-				padding 8px 4px 4px 16px
-				background rgba(255, 255, 255, 0.9)
-
-				> .index
-					margin-right 0.25em
-
-				> .name
-					margin-right 0.5em
-					color #008000
-
-			> div
-				padding 0 16px 16px 16px
-
-				> .media
-					> a
-						display inline-block
-
-						> img
-							max-width 100%
-							vertical-align bottom
-
-	</style>
-	<script lang="typescript">
-		this.post = this.opts.post;
-		this.form = this.opts.form;
-
-		this.reply = () => {
-			this.form.refs.text.value = `>>${ this.post.index } `;
-		};
-	</script>
-</mk-channel-post>
-
-<mk-channel-form>
-	<input ref="text" disabled={ wait } onkeydown={ onkeydown } placeholder="書いて">
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 100%
-			height 38px
-			padding 4px
-			border-top solid 1px #ddd
-
-			> input
-				padding 0 8px
-				width 100%
-				height 100%
-				font-size 14px
-				color #55595c
-				border solid 1px #dadada
-				border-radius 4px
-
-				&:hover
-				&:focus
-					border-color #aeaeae
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.clear = () => {
-			this.$refs.text.value = '';
-		};
-
-		this.onkeydown = e => {
-			if (e.which == 10 || e.which == 13) this.post();
-		};
-
-		this.post = () => {
-			this.update({
-				wait: true
-			});
-
-			let text = this.$refs.text.value;
-			let reply = null;
-
-			if (/^>>([0-9]+) /.test(text)) {
-				const index = text.match(/^>>([0-9]+) /)[1];
-				reply = this.parent.posts.find(p => p.index.toString() == index);
-				text = text.replace(/^>>([0-9]+) /, '');
-			}
-
-			this.api('posts/create', {
-				text: text,
-				reply_id: reply ? reply.id : undefined,
-				channel_id: this.parent.channel.id
-			}).then(data => {
-				this.clear();
-			}).catch(err => {
-				alert('失敗した');
-			}).then(() => {
-				this.update({
-					wait: false
-				});
-			});
-		};
-	</script>
-</mk-channel-form>
diff --git a/src/web/app/desktop/tags/home-widgets/donation.tag b/src/web/app/desktop/tags/home-widgets/donation.tag
deleted file mode 100644
index 5ed5c137b5..0000000000
--- a/src/web/app/desktop/tags/home-widgets/donation.tag
+++ /dev/null
@@ -1,36 +0,0 @@
-<mk-donation-home-widget>
-	<article>
-		<h1>%fa:heart%%i18n:desktop.tags.mk-donation-home-widget.title%</h1>
-		<p>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr(0, '%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('{'))}<a href="/syuilo" data-user-preview="@syuilo">@syuilo</a>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr('%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('}') + 1)}</p>
-	</article>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px #ead8bb
-			border-radius 6px
-
-			> article
-				padding 20px
-
-				> h1
-					margin 0 0 5px 0
-					font-size 1em
-					color #888
-
-					> [data-fa]
-						margin-right 0.25em
-
-				> p
-					display block
-					z-index 1
-					margin 0
-					font-size 0.8em
-					color #999
-
-	</style>
-	<script lang="typescript">
-		this.mixin('widget');
-		this.mixin('user-preview');
-	</script>
-</mk-donation-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/mentions.tag b/src/web/app/desktop/tags/home-widgets/mentions.tag
deleted file mode 100644
index 81f9b2875e..0000000000
--- a/src/web/app/desktop/tags/home-widgets/mentions.tag
+++ /dev/null
@@ -1,125 +0,0 @@
-<mk-mentions-home-widget>
-	<header><span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて</span><span data-is-active={ mode == 'following' } @click="setMode.bind(this, 'following')">フォロー中</span></header>
-	<div class="loading" v-if="isLoading">
-		<mk-ellipsis-icon/>
-	</div>
-	<p class="empty" v-if="isEmpty">%fa:R comments%<span v-if="mode == 'all'">あなた宛ての投稿はありません。</span><span v-if="mode == 'following'">あなたがフォローしているユーザーからの言及はありません。</span></p>
-	<mk-timeline ref="timeline">
-		<yield to="footer">
-			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
-		</yield/>
-	</mk-timeline>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> header
-				padding 8px 16px
-				border-bottom solid 1px #eee
-
-				> span
-					margin-right 16px
-					line-height 27px
-					font-size 18px
-					color #555
-
-					&:not([data-is-active])
-						color $theme-color
-						cursor pointer
-
-						&:hover
-							text-decoration underline
-
-			> .loading
-				padding 64px 0
-
-			> .empty
-				display block
-				margin 0 auto
-				padding 32px
-				max-width 400px
-				text-align center
-				color #999
-
-				> [data-fa]
-					display block
-					margin-bottom 16px
-					font-size 3em
-					color #ccc
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.isLoading = true;
-		this.isEmpty = false;
-		this.moreLoading = false;
-		this.mode = 'all';
-
-		this.on('mount', () => {
-			document.addEventListener('keydown', this.onDocumentKeydown);
-			window.addEventListener('scroll', this.onScroll);
-
-			this.fetch(() => this.$emit('loaded'));
-		});
-
-		this.on('unmount', () => {
-			document.removeEventListener('keydown', this.onDocumentKeydown);
-			window.removeEventListener('scroll', this.onScroll);
-		});
-
-		this.onDocumentKeydown = e => {
-			if (e.target.tagName != 'INPUT' && tag != 'TEXTAREA') {
-				if (e.which == 84) { // t
-					this.$refs.timeline.focus();
-				}
-			}
-		};
-
-		this.fetch = cb => {
-			this.api('posts/mentions', {
-				following: this.mode == 'following'
-			}).then(posts => {
-				this.update({
-					isLoading: false,
-					isEmpty: posts.length == 0
-				});
-				this.$refs.timeline.setPosts(posts);
-				if (cb) cb();
-			});
-		};
-
-		this.more = () => {
-			if (this.moreLoading || this.isLoading || this.$refs.timeline.posts.length == 0) return;
-			this.update({
-				moreLoading: true
-			});
-			this.api('posts/mentions', {
-				following: this.mode == 'following',
-				until_id: this.$refs.timeline.tail().id
-			}).then(posts => {
-				this.update({
-					moreLoading: false
-				});
-				this.$refs.timeline.prependPosts(posts);
-			});
-		};
-
-		this.onScroll = () => {
-			const current = window.scrollY + window.innerHeight;
-			if (current > document.body.offsetHeight - 8) this.more();
-		};
-
-		this.setMode = mode => {
-			this.update({
-				mode: mode
-			});
-			this.fetch();
-		};
-	</script>
-</mk-mentions-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/messaging.tag b/src/web/app/desktop/tags/home-widgets/messaging.tag
deleted file mode 100644
index d3b77b58cc..0000000000
--- a/src/web/app/desktop/tags/home-widgets/messaging.tag
+++ /dev/null
@@ -1,52 +0,0 @@
-<mk-messaging-home-widget>
-	<template v-if="data.design == 0">
-		<p class="title">%fa:comments%%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
-	</template>
-	<mk-messaging ref="index" compact={ true }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow hidden
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 2
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> mk-messaging
-				max-height 250px
-				overflow auto
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.on('mount', () => {
-			this.$refs.index.on('navigate-user', user => {
-				riot.mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
-					user: user
-				});
-			});
-		});
-
-		this.func = () => {
-			if (++this.data.design == 2) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-messaging-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/nav.tag b/src/web/app/desktop/tags/home-widgets/nav.tag
deleted file mode 100644
index 890fb4d8f7..0000000000
--- a/src/web/app/desktop/tags/home-widgets/nav.tag
+++ /dev/null
@@ -1,23 +0,0 @@
-<mk-nav-home-widget>
-	<mk-nav-links/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 16px
-			font-size 12px
-			color #aaa
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			a
-				color #999
-
-			i
-				color #ccc
-
-	</style>
-	<script lang="typescript">
-		this.mixin('widget');
-	</script>
-</mk-nav-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/notifications.tag b/src/web/app/desktop/tags/home-widgets/notifications.tag
deleted file mode 100644
index bd915b197b..0000000000
--- a/src/web/app/desktop/tags/home-widgets/notifications.tag
+++ /dev/null
@@ -1,66 +0,0 @@
-<mk-notifications-home-widget>
-	<template v-if="!data.compact">
-		<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
-		<button @click="settings" title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
-	</template>
-	<mk-notifications/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> mk-notifications
-				max-height 300px
-				overflow auto
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			compact: false
-		};
-
-		this.mixin('widget');
-
-		this.settings = () => {
-			const w = riot.mount(document.body.appendChild(document.createElement('mk-settings-window')))[0];
-			w.switch('notification');
-		};
-
-		this.func = () => {
-			this.data.compact = !this.data.compact;
-			this.save();
-		};
-	</script>
-</mk-notifications-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/photo-stream.tag b/src/web/app/desktop/tags/home-widgets/photo-stream.tag
deleted file mode 100644
index a2d95dede3..0000000000
--- a/src/web/app/desktop/tags/home-widgets/photo-stream.tag
+++ /dev/null
@@ -1,118 +0,0 @@
-<mk-photo-stream-home-widget data-melt={ data.design == 2 }>
-	<template v-if="data.design == 0">
-		<p class="title">%fa:camera%%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
-	</template>
-	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<div class="stream" v-if="!initializing && images.length > 0">
-		<template each={ image in images }>
-			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
-		</template>
-	</div>
-	<p class="empty" v-if="!initializing && images.length == 0">%i18n:desktop.tags.mk-photo-stream-home-widget.no-photos%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			&[data-melt]
-				background transparent !important
-				border none !important
-
-				> .stream
-					padding 0
-
-					> .img
-						border solid 4px transparent
-						border-radius 8px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> .stream
-				display -webkit-flex
-				display -moz-flex
-				display -ms-flex
-				display flex
-				justify-content center
-				flex-wrap wrap
-				padding 8px
-
-				> .img
-					flex 1 1 33%
-					width 33%
-					height 80px
-					background-position center center
-					background-size cover
-					border solid 2px transparent
-					border-radius 4px
-
-			> .initializing
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.images = [];
-		this.initializing = true;
-
-		this.on('mount', () => {
-			this.connection.on('drive_file_created', this.onStreamDriveFileCreated);
-
-			this.api('drive/stream', {
-				type: 'image/*',
-				limit: 9
-			}).then(images => {
-				this.update({
-					initializing: false,
-					images: images
-				});
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('drive_file_created', this.onStreamDriveFileCreated);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.onStreamDriveFileCreated = file => {
-			if (/^image\/.+$/.test(file.type)) {
-				this.images.unshift(file);
-				if (this.images.length > 9) this.images.pop();
-				this.update();
-			}
-		};
-
-		this.func = () => {
-			if (++this.data.design == 3) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-photo-stream-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/post-form.tag b/src/web/app/desktop/tags/home-widgets/post-form.tag
deleted file mode 100644
index d5824477b9..0000000000
--- a/src/web/app/desktop/tags/home-widgets/post-form.tag
+++ /dev/null
@@ -1,103 +0,0 @@
-<mk-post-form-home-widget>
-	<mk-post-form v-if="place == 'main'"/>
-	<template v-if="place != 'main'">
-		<template v-if="data.design == 0">
-			<p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
-		</template>
-		<textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
-		<button @click="post" disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
-	</template>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			overflow hidden
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> textarea
-				display block
-				width 100%
-				max-width 100%
-				min-width 100%
-				padding 16px
-				margin-bottom 28px + 16px
-				border none
-				border-bottom solid 1px #eee
-
-			> button
-				display block
-				position absolute
-				bottom 8px
-				right 8px
-				margin 0
-				padding 0 10px
-				height 28px
-				color $theme-color-foreground
-				background $theme-color !important
-				outline none
-				border none
-				border-radius 4px
-				transition background 0.1s ease
-				cursor pointer
-
-				&:hover
-					background lighten($theme-color, 10%) !important
-
-				&:active
-					background darken($theme-color, 10%) !important
-					transition background 0s ease
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.func = () => {
-			if (++this.data.design == 2) this.data.design = 0;
-			this.save();
-		};
-
-		this.onkeydown = e => {
-			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
-		};
-
-		this.post = () => {
-			this.update({
-				posting: true
-			});
-
-			this.api('posts/create', {
-				text: this.$refs.text.value
-			}).then(data => {
-				this.clear();
-			}).catch(err => {
-				alert('失敗した');
-			}).then(() => {
-				this.update({
-					posting: false
-				});
-			});
-		};
-
-		this.clear = () => {
-			this.$refs.text.value = '';
-		};
-	</script>
-</mk-post-form-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/profile.tag b/src/web/app/desktop/tags/home-widgets/profile.tag
deleted file mode 100644
index 02a1f0d5a3..0000000000
--- a/src/web/app/desktop/tags/home-widgets/profile.tag
+++ /dev/null
@@ -1,116 +0,0 @@
-<mk-profile-home-widget data-compact={ data.design == 1 || data.design == 2 } data-melt={ data.design == 2 }>
-	<div class="banner" style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' } title="クリックでバナー編集" @click="setBanner"></div>
-	<img class="avatar" src={ I.avatar_url + '?thumbnail&size=96' } @click="setAvatar" alt="avatar" title="クリックでアバター編集" data-user-preview={ I.id }/>
-	<a class="name" href={ '/' + I.username }>{ I.name }</a>
-	<p class="username">@{ I.username }</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow hidden
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			&[data-compact]
-				> .banner:before
-					content ""
-					display block
-					width 100%
-					height 100%
-					background rgba(0, 0, 0, 0.5)
-
-				> .avatar
-					top ((100px - 58px) / 2)
-					left ((100px - 58px) / 2)
-					border none
-					border-radius 100%
-					box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
-
-				> .name
-					position absolute
-					top 0
-					left 92px
-					margin 0
-					line-height 100px
-					color #fff
-					text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
-
-				> .username
-					display none
-
-			&[data-melt]
-				background transparent !important
-				border none !important
-
-				> .banner
-					visibility hidden
-
-				> .avatar
-					box-shadow none
-
-				> .name
-					color #666
-					text-shadow none
-
-			> .banner
-				height 100px
-				background-color #f5f5f5
-				background-size cover
-				background-position center
-				cursor pointer
-
-			> .avatar
-				display block
-				position absolute
-				top 76px
-				left 16px
-				width 58px
-				height 58px
-				margin 0
-				border solid 3px #fff
-				border-radius 8px
-				vertical-align bottom
-				cursor pointer
-
-			> .name
-				display block
-				margin 10px 0 0 84px
-				line-height 16px
-				font-weight bold
-				color #555
-
-			> .username
-				display block
-				margin 4px 0 8px 84px
-				line-height 16px
-				font-size 0.9em
-				color #999
-
-	</style>
-	<script lang="typescript">
-		import inputDialog from '../../scripts/input-dialog';
-		import updateAvatar from '../../scripts/update-avatar';
-		import updateBanner from '../../scripts/update-banner';
-
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.mixin('user-preview');
-
-		this.setAvatar = () => {
-			updateAvatar(this.I);
-		};
-
-		this.setBanner = () => {
-			updateBanner(this.I);
-		};
-
-		this.func = () => {
-			if (++this.data.design == 3) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-profile-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/recommended-polls.tag b/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
deleted file mode 100644
index cfbcd1e929..0000000000
--- a/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
+++ /dev/null
@@ -1,119 +0,0 @@
-<mk-recommended-polls-home-widget>
-	<template v-if="!data.compact">
-		<p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
-		<button @click="fetch" title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
-	</template>
-	<div class="poll" v-if="!loading && poll != null">
-		<p v-if="poll.text"><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
-		<p v-if="!poll.text"><a href="/{ poll.user.username }/{ poll.id }">%fa:link%</a></p>
-		<mk-poll post={ poll }/>
-	</div>
-	<p class="empty" v-if="!loading && poll == null">%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p>
-	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				border-bottom solid 1px #eee
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> .poll
-				padding 16px
-				font-size 12px
-				color #555
-
-				> p
-					margin 0 0 8px 0
-
-					> a
-						color inherit
-
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> .loading
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			compact: false
-		};
-
-		this.mixin('widget');
-
-		this.poll = null;
-		this.loading = true;
-
-		this.offset = 0;
-
-		this.on('mount', () => {
-			this.fetch();
-		});
-
-		this.fetch = () => {
-			this.update({
-				loading: true,
-				poll: null
-			});
-			this.api('posts/polls/recommendation', {
-				limit: 1,
-				offset: this.offset
-			}).then(posts => {
-				const poll = posts ? posts[0] : null;
-				if (poll == null) {
-					this.offset = 0;
-				} else {
-					this.offset++;
-				}
-				this.update({
-					loading: false,
-					poll: poll
-				});
-			});
-		};
-
-		this.func = () => {
-			this.data.compact = !this.data.compact;
-			this.save();
-		};
-	</script>
-</mk-recommended-polls-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/rss-reader.tag b/src/web/app/desktop/tags/home-widgets/rss-reader.tag
deleted file mode 100644
index 4e0ed702e2..0000000000
--- a/src/web/app/desktop/tags/home-widgets/rss-reader.tag
+++ /dev/null
@@ -1,109 +0,0 @@
-<mk-rss-reader-home-widget>
-	<template v-if="!data.compact">
-		<p class="title">%fa:rss-square%RSS</p>
-		<button @click="settings" title="設定">%fa:cog%</button>
-	</template>
-	<div class="feed" v-if="!initializing">
-		<template each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></template>
-	</div>
-	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> .feed
-				padding 12px 16px
-				font-size 0.9em
-
-				> a
-					display block
-					padding 4px 0
-					color #666
-					border-bottom dashed 1px #eee
-
-					&:last-child
-						border-bottom none
-
-			> .initializing
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			compact: false
-		};
-
-		this.mixin('widget');
-
-		this.url = 'http://news.yahoo.co.jp/pickup/rss.xml';
-		this.items = [];
-		this.initializing = true;
-
-		this.on('mount', () => {
-			this.fetch();
-			this.clock = setInterval(this.fetch, 60000);
-		});
-
-		this.on('unmount', () => {
-			clearInterval(this.clock);
-		});
-
-		this.fetch = () => {
-			fetch(`https://api.rss2json.com/v1/api.json?rss_url=${this.url}`, {
-				cache: 'no-cache'
-			}).then(res => {
-				res.json().then(feed => {
-					this.update({
-						initializing: false,
-						items: feed.items
-					});
-				});
-			});
-		};
-
-		this.settings = () => {
-		};
-
-		this.func = () => {
-			this.data.compact = !this.data.compact;
-			this.save();
-		};
-	</script>
-</mk-rss-reader-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/server.tag b/src/web/app/desktop/tags/home-widgets/server.tag
deleted file mode 100644
index 992517163a..0000000000
--- a/src/web/app/desktop/tags/home-widgets/server.tag
+++ /dev/null
@@ -1,533 +0,0 @@
-<mk-server-home-widget data-melt={ data.design == 2 }>
-	<template v-if="data.design == 0">
-		<p class="title">%fa:server%%i18n:desktop.tags.mk-server-home-widget.title%</p>
-		<button @click="toggle" title="%i18n:desktop.tags.mk-server-home-widget.toggle%">%fa:sort%</button>
-	</template>
-	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<mk-server-home-widget-cpu-and-memory-usage v-if="!initializing" show={ data.view == 0 } connection={ connection }/>
-	<mk-server-home-widget-cpu v-if="!initializing" show={ data.view == 1 } connection={ connection } meta={ meta }/>
-	<mk-server-home-widget-memory v-if="!initializing" show={ data.view == 2 } connection={ connection }/>
-	<mk-server-home-widget-disk v-if="!initializing" show={ data.view == 3 } connection={ connection }/>
-	<mk-server-home-widget-uptimes v-if="!initializing" show={ data.view == 4 } connection={ connection }/>
-	<mk-server-home-widget-info v-if="!initializing" show={ data.view == 5 } connection={ connection } meta={ meta }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			&[data-melt]
-				background transparent !important
-				border none !important
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> .initializing
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('os');
-
-		this.data = {
-			view: 0,
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.mixin('server-stream');
-		this.connection = this.serverStream.getConnection();
-		this.connectionId = this.serverStream.use();
-
-		this.initializing = true;
-
-		this.on('mount', () => {
-			this.mios.getMeta().then(meta => {
-				this.update({
-					initializing: false,
-					meta
-				});
-			});
-		});
-
-		this.on('unmount', () => {
-			this.serverStream.dispose(this.connectionId);
-		});
-
-		this.toggle = () => {
-			this.data.view++;
-			if (this.data.view == 6) this.data.view = 0;
-
-			// Save widget state
-			this.save();
-		};
-
-		this.func = () => {
-			if (++this.data.design == 3) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-server-home-widget>
-
-<mk-server-home-widget-cpu-and-memory-usage>
-	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
-		<defs>
-			<linearGradient id={ cpuGradientId } x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
-				<stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask id={ cpuMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
-				<polygon
-					riot-points={ cpuPolygonPoints }
-					fill="#fff"
-					fill-opacity="0.5"/>
-				<polyline
-					riot-points={ cpuPolylinePoints }
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"/>
-			</mask>
-		</defs>
-		<rect
-			x="-1" y="-1"
-			riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 }
-			style="stroke: none; fill: url(#{ cpuGradientId }); mask: url(#{ cpuMaskId })"/>
-		<text x="1" y="5">CPU <tspan>{ cpuP }%</tspan></text>
-	</svg>
-	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
-		<defs>
-			<linearGradient id={ memGradientId } x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
-				<stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask id={ memMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
-				<polygon
-					riot-points={ memPolygonPoints }
-					fill="#fff"
-					fill-opacity="0.5"/>
-				<polyline
-					riot-points={ memPolylinePoints }
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"/>
-			</mask>
-		</defs>
-		<rect
-			x="-1" y="-1"
-			riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 }
-			style="stroke: none; fill: url(#{ memGradientId }); mask: url(#{ memMaskId })"/>
-		<text x="1" y="5">MEM <tspan>{ memP }%</tspan></text>
-	</svg>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> svg
-				display block
-				padding 10px
-				width 50%
-				float left
-
-				&:first-child
-					padding-right 5px
-
-				&:last-child
-					padding-left 5px
-
-				> text
-					font-size 5px
-					fill rgba(0, 0, 0, 0.55)
-
-					> tspan
-						opacity 0.5
-
-			&:after
-				content ""
-				display block
-				clear both
-	</style>
-	<script lang="typescript">
-		import uuid from 'uuid';
-
-		this.viewBoxX = 50;
-		this.viewBoxY = 30;
-		this.stats = [];
-		this.connection = this.opts.connection;
-		this.cpuGradientId = uuid();
-		this.cpuMaskId = uuid();
-		this.memGradientId = uuid();
-		this.memMaskId = uuid();
-
-		this.on('mount', () => {
-			this.connection.on('stats', this.onStats);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('stats', this.onStats);
-		});
-
-		this.onStats = stats => {
-			stats.mem.used = stats.mem.total - stats.mem.free;
-			this.stats.push(stats);
-			if (this.stats.length > 50) this.stats.shift();
-
-			const cpuPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - s.cpu_usage) * this.viewBoxY}`).join(' ');
-			const memPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - (s.mem.used / s.mem.total)) * this.viewBoxY}`).join(' ');
-
-			const cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ cpuPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
-			const memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ memPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
-
-			const cpuP = (stats.cpu_usage * 100).toFixed(0);
-			const memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
-
-			this.update({
-				cpuPolylinePoints,
-				memPolylinePoints,
-				cpuPolygonPoints,
-				memPolygonPoints,
-				cpuP,
-				memP
-			});
-		};
-	</script>
-</mk-server-home-widget-cpu-and-memory-usage>
-
-<mk-server-home-widget-cpu>
-	<mk-server-home-widget-pie ref="pie"/>
-	<div>
-		<p>%fa:microchip%CPU</p>
-		<p>{ cores } Cores</p>
-		<p>{ model }</p>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> mk-server-home-widget-pie
-				padding 10px
-				height 100px
-				float left
-
-			> div
-				float left
-				width calc(100% - 100px)
-				padding 10px 10px 10px 0
-
-				> p
-					margin 0
-					font-size 12px
-					color #505050
-
-					&:first-child
-						font-weight bold
-
-						> [data-fa]
-							margin-right 4px
-
-			&:after
-				content ""
-				display block
-				clear both
-
-	</style>
-	<script lang="typescript">
-		this.cores = this.opts.meta.cpu.cores;
-		this.model = this.opts.meta.cpu.model;
-		this.connection = this.opts.connection;
-
-		this.on('mount', () => {
-			this.connection.on('stats', this.onStats);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('stats', this.onStats);
-		});
-
-		this.onStats = stats => {
-			this.$refs.pie.render(stats.cpu_usage);
-		};
-	</script>
-</mk-server-home-widget-cpu>
-
-<mk-server-home-widget-memory>
-	<mk-server-home-widget-pie ref="pie"/>
-	<div>
-		<p>%fa:flask%Memory</p>
-		<p>Total: { bytesToSize(total, 1) }</p>
-		<p>Used: { bytesToSize(used, 1) }</p>
-		<p>Free: { bytesToSize(free, 1) }</p>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> mk-server-home-widget-pie
-				padding 10px
-				height 100px
-				float left
-
-			> div
-				float left
-				width calc(100% - 100px)
-				padding 10px 10px 10px 0
-
-				> p
-					margin 0
-					font-size 12px
-					color #505050
-
-					&:first-child
-						font-weight bold
-
-						> [data-fa]
-							margin-right 4px
-
-			&:after
-				content ""
-				display block
-				clear both
-
-	</style>
-	<script lang="typescript">
-		import bytesToSize from '../../../common/scripts/bytes-to-size';
-
-		this.connection = this.opts.connection;
-		this.bytesToSize = bytesToSize;
-
-		this.on('mount', () => {
-			this.connection.on('stats', this.onStats);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('stats', this.onStats);
-		});
-
-		this.onStats = stats => {
-			stats.mem.used = stats.mem.total - stats.mem.free;
-			this.$refs.pie.render(stats.mem.used / stats.mem.total);
-
-			this.update({
-				total: stats.mem.total,
-				used: stats.mem.used,
-				free: stats.mem.free
-			});
-		};
-	</script>
-</mk-server-home-widget-memory>
-
-<mk-server-home-widget-disk>
-	<mk-server-home-widget-pie ref="pie"/>
-	<div>
-		<p>%fa:R hdd%Storage</p>
-		<p>Total: { bytesToSize(total, 1) }</p>
-		<p>Available: { bytesToSize(available, 1) }</p>
-		<p>Used: { bytesToSize(used, 1) }</p>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> mk-server-home-widget-pie
-				padding 10px
-				height 100px
-				float left
-
-			> div
-				float left
-				width calc(100% - 100px)
-				padding 10px 10px 10px 0
-
-				> p
-					margin 0
-					font-size 12px
-					color #505050
-
-					&:first-child
-						font-weight bold
-
-						> [data-fa]
-							margin-right 4px
-
-			&:after
-				content ""
-				display block
-				clear both
-
-	</style>
-	<script lang="typescript">
-		import bytesToSize from '../../../common/scripts/bytes-to-size';
-
-		this.connection = this.opts.connection;
-		this.bytesToSize = bytesToSize;
-
-		this.on('mount', () => {
-			this.connection.on('stats', this.onStats);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('stats', this.onStats);
-		});
-
-		this.onStats = stats => {
-			stats.disk.used = stats.disk.total - stats.disk.free;
-
-			this.$refs.pie.render(stats.disk.used / stats.disk.total);
-
-			this.update({
-				total: stats.disk.total,
-				used: stats.disk.used,
-				available: stats.disk.available
-			});
-		};
-	</script>
-</mk-server-home-widget-disk>
-
-<mk-server-home-widget-uptimes>
-	<p>Uptimes</p>
-	<p>Process: { process ? process.toFixed(0) : '---' }s</p>
-	<p>OS: { os ? os.toFixed(0) : '---' }s</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 10px 14px
-
-			> p
-				margin 0
-				font-size 12px
-				color #505050
-
-				&:first-child
-					font-weight bold
-
-	</style>
-	<script lang="typescript">
-		this.connection = this.opts.connection;
-
-		this.on('mount', () => {
-			this.connection.on('stats', this.onStats);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('stats', this.onStats);
-		});
-
-		this.onStats = stats => {
-			this.update({
-				process: stats.process_uptime,
-				os: stats.os_uptime
-			});
-		};
-	</script>
-</mk-server-home-widget-uptimes>
-
-<mk-server-home-widget-info>
-	<p>Maintainer: <b>{ meta.maintainer }</b></p>
-	<p>Machine: { meta.machine }</p>
-	<p>Node: { meta.node }</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 10px 14px
-
-			> p
-				margin 0
-				font-size 12px
-				color #505050
-
-	</style>
-	<script lang="typescript">
-		this.meta = this.opts.meta;
-	</script>
-</mk-server-home-widget-info>
-
-<mk-server-home-widget-pie>
-	<svg viewBox="0 0 1 1" preserveAspectRatio="none">
-		<circle
-			riot-r={ r }
-			cx="50%" cy="50%"
-			fill="none"
-			stroke-width="0.1"
-			stroke="rgba(0, 0, 0, 0.05)"/>
-		<circle
-			riot-r={ r }
-			cx="50%" cy="50%"
-			riot-stroke-dasharray={ Math.PI * (r * 2) }
-			riot-stroke-dashoffset={ strokeDashoffset }
-			fill="none"
-			stroke-width="0.1"
-			riot-stroke={ color }/>
-		<text x="50%" y="50%" dy="0.05" text-anchor="middle">{ (p * 100).toFixed(0) }%</text>
-	</svg>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> svg
-				display block
-				height 100%
-
-				> circle
-					transform-origin center
-					transform rotate(-90deg)
-					transition stroke-dashoffset 0.5s ease
-
-				> text
-					font-size 0.15px
-					fill rgba(0, 0, 0, 0.6)
-
-	</style>
-	<script lang="typescript">
-		this.r = 0.4;
-
-		this.render = p => {
-			const color = `hsl(${180 - (p * 180)}, 80%, 70%)`;
-			const strokeDashoffset = (1 - p) * (Math.PI * (this.r * 2));
-
-			this.update({
-				p,
-				color,
-				strokeDashoffset
-			});
-		};
-	</script>
-</mk-server-home-widget-pie>
diff --git a/src/web/app/desktop/tags/home-widgets/slideshow.tag b/src/web/app/desktop/tags/home-widgets/slideshow.tag
deleted file mode 100644
index 817b138d31..0000000000
--- a/src/web/app/desktop/tags/home-widgets/slideshow.tag
+++ /dev/null
@@ -1,151 +0,0 @@
-<mk-slideshow-home-widget>
-	<div @click="choose">
-		<p v-if="data.folder === undefined">クリックしてフォルダを指定してください</p>
-		<p v-if="data.folder !== undefined && images.length == 0 && !fetching">このフォルダには画像がありません</p>
-		<div ref="slideA" class="slide a"></div>
-		<div ref="slideB" class="slide b"></div>
-	</div>
-	<button @click="resize">%fa:expand%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow hidden
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			&:hover > button
-				display block
-
-			> button
-				position absolute
-				left 0
-				bottom 0
-				display none
-				padding 4px
-				font-size 24px
-				color #fff
-				text-shadow 0 0 8px #000
-
-			> div
-				width 100%
-				height 100%
-				cursor pointer
-
-				> *
-					pointer-events none
-
-				> .slide
-					position absolute
-					top 0
-					left 0
-					width 100%
-					height 100%
-					background-size cover
-					background-position center
-
-					&.b
-						opacity 0
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.data = {
-			folder: undefined,
-			size: 0
-		};
-
-		this.mixin('widget');
-
-		this.images = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.applySize();
-
-			if (this.data.folder !== undefined) {
-				this.fetch();
-			}
-
-			this.clock = setInterval(this.change, 10000);
-		});
-
-		this.on('unmount', () => {
-			clearInterval(this.clock);
-		});
-
-		this.applySize = () => {
-			let h;
-
-			if (this.data.size == 1) {
-				h = 250;
-			} else {
-				h = 170;
-			}
-
-			this.root.style.height = `${h}px`;
-		};
-
-		this.resize = () => {
-			this.data.size++;
-			if (this.data.size == 2) this.data.size = 0;
-
-			this.applySize();
-			this.save();
-		};
-
-		this.change = () => {
-			if (this.images.length == 0) return;
-
-			const index = Math.floor(Math.random() * this.images.length);
-			const img = `url(${ this.images[index].url }?thumbnail&size=1024)`;
-
-			this.$refs.slideB.style.backgroundImage = img;
-
-			anime({
-				targets: this.$refs.slideB,
-				opacity: 1,
-				duration: 1000,
-				easing: 'linear',
-				complete: () => {
-					this.$refs.slideA.style.backgroundImage = img;
-					anime({
-						targets: this.$refs.slideB,
-						opacity: 0,
-						duration: 0
-					});
-				}
-			});
-		};
-
-		this.fetch = () => {
-			this.update({
-				fetching: true
-			});
-
-			this.api('drive/files', {
-				folder_id: this.data.folder,
-				type: 'image/*',
-				limit: 100
-			}).then(images => {
-				this.update({
-					fetching: false,
-					images: images
-				});
-				this.$refs.slideA.style.backgroundImage = '';
-				this.$refs.slideB.style.backgroundImage = '';
-				this.change();
-			});
-		};
-
-		this.choose = () => {
-			const i = riot.mount(document.body.appendChild(document.createElement('mk-select-folder-from-drive-window')))[0];
-			i.one('selected', folder => {
-				this.data.folder = folder ? folder.id : null;
-				this.fetch();
-				this.save();
-			});
-		};
-	</script>
-</mk-slideshow-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/timeline.tag b/src/web/app/desktop/tags/home-widgets/timeline.tag
deleted file mode 100644
index 4668ebfa87..0000000000
--- a/src/web/app/desktop/tags/home-widgets/timeline.tag
+++ /dev/null
@@ -1,143 +0,0 @@
-<mk-timeline-home-widget>
-	<mk-following-setuper v-if="noFollowing"/>
-	<div class="loading" v-if="isLoading">
-		<mk-ellipsis-icon/>
-	</div>
-	<p class="empty" v-if="isEmpty && !isLoading">%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p>
-	<mk-timeline ref="timeline" hide={ isLoading }>
-		<yield to="footer">
-			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
-		</yield/>
-	</mk-timeline>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> mk-following-setuper
-				border-bottom solid 1px #eee
-
-			> .loading
-				padding 64px 0
-
-			> .empty
-				display block
-				margin 0 auto
-				padding 32px
-				max-width 400px
-				text-align center
-				color #999
-
-				> [data-fa]
-					display block
-					margin-bottom 16px
-					font-size 3em
-					color #ccc
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.isLoading = true;
-		this.isEmpty = false;
-		this.moreLoading = false;
-		this.noFollowing = this.I.following_count == 0;
-
-		this.on('mount', () => {
-			this.connection.on('post', this.onStreamPost);
-			this.connection.on('follow', this.onStreamFollow);
-			this.connection.on('unfollow', this.onStreamUnfollow);
-
-			document.addEventListener('keydown', this.onDocumentKeydown);
-			window.addEventListener('scroll', this.onScroll);
-
-			this.load(() => this.$emit('loaded'));
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('post', this.onStreamPost);
-			this.connection.off('follow', this.onStreamFollow);
-			this.connection.off('unfollow', this.onStreamUnfollow);
-			this.stream.dispose(this.connectionId);
-
-			document.removeEventListener('keydown', this.onDocumentKeydown);
-			window.removeEventListener('scroll', this.onScroll);
-		});
-
-		this.onDocumentKeydown = e => {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 84) { // t
-					this.$refs.timeline.focus();
-				}
-			}
-		};
-
-		this.load = (cb) => {
-			this.update({
-				isLoading: true
-			});
-
-			this.api('posts/timeline', {
-				until_date: this.date ? this.date.getTime() : undefined
-			}).then(posts => {
-				this.update({
-					isLoading: false,
-					isEmpty: posts.length == 0
-				});
-				this.$refs.timeline.setPosts(posts);
-				if (cb) cb();
-			});
-		};
-
-		this.more = () => {
-			if (this.moreLoading || this.isLoading || this.$refs.timeline.posts.length == 0) return;
-			this.update({
-				moreLoading: true
-			});
-			this.api('posts/timeline', {
-				until_id: this.$refs.timeline.tail().id
-			}).then(posts => {
-				this.update({
-					moreLoading: false
-				});
-				this.$refs.timeline.prependPosts(posts);
-			});
-		};
-
-		this.onStreamPost = post => {
-			this.update({
-				isEmpty: false
-			});
-			this.$refs.timeline.addPost(post);
-		};
-
-		this.onStreamFollow = () => {
-			this.load();
-		};
-
-		this.onStreamUnfollow = () => {
-			this.load();
-		};
-
-		this.onScroll = () => {
-			const current = window.scrollY + window.innerHeight;
-			if (current > document.body.offsetHeight - 8) this.more();
-		};
-
-		this.warp = date => {
-			this.update({
-				date: date
-			});
-
-			this.load();
-		};
-	</script>
-</mk-timeline-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/timemachine.tag b/src/web/app/desktop/tags/home-widgets/timemachine.tag
deleted file mode 100644
index 43f59fe674..0000000000
--- a/src/web/app/desktop/tags/home-widgets/timemachine.tag
+++ /dev/null
@@ -1,23 +0,0 @@
-<mk-timemachine-home-widget>
-	<mk-calendar-widget design={ data.design } warp={ warp }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.warp = date => {
-			this.opts.tl.warp(date);
-		};
-
-		this.func = () => {
-			if (++this.data.design == 6) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-timemachine-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/tips.tag b/src/web/app/desktop/tags/home-widgets/tips.tag
deleted file mode 100644
index a352253cef..0000000000
--- a/src/web/app/desktop/tags/home-widgets/tips.tag
+++ /dev/null
@@ -1,94 +0,0 @@
-<mk-tips-home-widget>
-	<p ref="tip">%fa:R lightbulb%<span ref="text"></span></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow visible !important
-
-			> p
-				display block
-				margin 0
-				padding 0 12px
-				text-align center
-				font-size 0.7em
-				color #999
-
-				> [data-fa]
-					margin-right 4px
-
-				kbd
-					display inline
-					padding 0 6px
-					margin 0 2px
-					font-size 1em
-					font-family inherit
-					border solid 1px #999
-					border-radius 2px
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.mixin('widget');
-
-		this.tips = [
-			'<kbd>t</kbd>でタイムラインにフォーカスできます',
-			'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
-			'投稿フォームにはファイルをドラッグ&ドロップできます',
-			'投稿フォームにクリップボードにある画像データをペーストできます',
-			'ドライブにファイルをドラッグ&ドロップしてアップロードできます',
-			'ドライブでファイルをドラッグしてフォルダ移動できます',
-			'ドライブでフォルダをドラッグしてフォルダ移動できます',
-			'ホームは設定からカスタマイズできます',
-			'MisskeyはMIT Licenseです',
-			'タイムマシンウィジェットを利用すると、簡単に過去のタイムラインに遡れます',
-			'投稿の ... をクリックして、投稿をユーザーページにピン留めできます',
-			'ドライブの容量は(デフォルトで)1GBです',
-			'投稿に添付したファイルは全てドライブに保存されます',
-			'ホームのカスタマイズ中、ウィジェットを右クリックしてデザインを変更できます',
-			'タイムライン上部にもウィジェットを設置できます',
-			'投稿をダブルクリックすると詳細が見れます',
-			'「**」でテキストを囲むと**強調表示**されます',
-			'チャンネルウィジェットを利用すると、よく利用するチャンネルを素早く確認できます',
-			'いくつかのウィンドウはブラウザの外に切り離すことができます',
-			'カレンダーウィジェットのパーセンテージは、経過の割合を示しています',
-			'APIを利用してbotの開発なども行えます',
-			'MisskeyはLINEを通じてでも利用できます',
-			'まゆかわいいよまゆ',
-			'Misskeyは2014年にサービスを開始しました',
-			'対応ブラウザではMisskeyを開いていなくても通知を受け取れます'
-		]
-
-		this.on('mount', () => {
-			this.set();
-			this.clock = setInterval(this.change, 20000);
-		});
-
-		this.on('unmount', () => {
-			clearInterval(this.clock);
-		});
-
-		this.set = () => {
-			this.$refs.text.innerHTML = this.tips[Math.floor(Math.random() * this.tips.length)];
-		};
-
-		this.change = () => {
-			anime({
-				targets: this.$refs.tip,
-				opacity: 0,
-				duration: 500,
-				easing: 'linear',
-				complete: this.set
-			});
-
-			setTimeout(() => {
-				anime({
-					targets: this.$refs.tip,
-					opacity: 1,
-					duration: 500,
-					easing: 'linear'
-				});
-			}, 500);
-		};
-	</script>
-</mk-tips-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/trends.tag b/src/web/app/desktop/tags/home-widgets/trends.tag
deleted file mode 100644
index 5e297ebc7b..0000000000
--- a/src/web/app/desktop/tags/home-widgets/trends.tag
+++ /dev/null
@@ -1,125 +0,0 @@
-<mk-trends-home-widget>
-	<template v-if="!data.compact">
-		<p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
-		<button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
-	</template>
-	<div class="post" v-if="!loading && post != null">
-		<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
-		<p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p>
-	</div>
-	<p class="empty" v-if="!loading && post == null">%i18n:desktop.tags.mk-trends-home-widget.nothing%</p>
-	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				border-bottom solid 1px #eee
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> .post
-				padding 16px
-				font-size 12px
-				font-style oblique
-				color #555
-
-				> p
-					margin 0
-
-				> .text,
-				> .author
-					> a
-						color inherit
-
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> .loading
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			compact: false
-		};
-
-		this.mixin('widget');
-
-		this.post = null;
-		this.loading = true;
-
-		this.offset = 0;
-
-		this.on('mount', () => {
-			this.fetch();
-		});
-
-		this.fetch = () => {
-			this.update({
-				loading: true,
-				post: null
-			});
-			this.api('posts/trend', {
-				limit: 1,
-				offset: this.offset,
-				repost: false,
-				reply: false,
-				media: false,
-				poll: false
-			}).then(posts => {
-				const post = posts ? posts[0] : null;
-				if (post == null) {
-					this.offset = 0;
-				} else {
-					this.offset++;
-				}
-				this.update({
-					loading: false,
-					post: post
-				});
-			});
-		};
-
-		this.func = () => {
-			this.data.compact = !this.data.compact;
-			this.save();
-		};
-	</script>
-</mk-trends-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/user-recommendation.tag b/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
deleted file mode 100644
index 5344da1f2b..0000000000
--- a/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
+++ /dev/null
@@ -1,165 +0,0 @@
-<mk-user-recommendation-home-widget>
-	<template v-if="!data.compact">
-		<p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
-		<button @click="refresh" title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
-	</template>
-	<div class="user" v-if="!loading && users.length != 0" each={ _user in users }>
-		<a class="avatar-anchor" href={ '/' + _user.username }>
-			<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>
-		</a>
-		<div class="body">
-			<a class="name" href={ '/' + _user.username } data-user-preview={ _user.id }>{ _user.name }</a>
-			<p class="username">@{ _user.username }</p>
-		</div>
-		<mk-follow-button user={ _user }/>
-	</div>
-	<p class="empty" v-if="!loading && users.length == 0">%i18n:desktop.tags.mk-user-recommendation-home-widget.no-one%</p>
-	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				border-bottom solid 1px #eee
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> .user
-				padding 16px
-				border-bottom solid 1px #eee
-
-				&:last-child
-					border-bottom none
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				> .avatar-anchor
-					display block
-					float left
-					margin 0 12px 0 0
-
-					> .avatar
-						display block
-						width 42px
-						height 42px
-						margin 0
-						border-radius 8px
-						vertical-align bottom
-
-				> .body
-					float left
-					width calc(100% - 54px)
-
-					> .name
-						margin 0
-						font-size 16px
-						line-height 24px
-						color #555
-
-					> .username
-						display block
-						margin 0
-						font-size 15px
-						line-height 16px
-						color #ccc
-
-				> mk-follow-button
-					position absolute
-					top 16px
-					right 16px
-
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> .loading
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.data = {
-			compact: false
-		};
-
-		this.mixin('widget');
-		this.mixin('user-preview');
-
-		this.users = null;
-		this.loading = true;
-
-		this.limit = 3;
-		this.page = 0;
-
-		this.on('mount', () => {
-			this.fetch();
-		});
-
-		this.fetch = () => {
-			this.update({
-				loading: true,
-				users: null
-			});
-			this.api('users/recommendation', {
-				limit: this.limit,
-				offset: this.limit * this.page
-			}).then(users => {
-				this.update({
-					loading: false,
-					users: users
-				});
-			});
-		};
-
-		this.refresh = () => {
-			if (this.users.length < this.limit) {
-				this.page = 0;
-			} else {
-				this.page++;
-			}
-			this.fetch();
-		};
-
-		this.func = () => {
-			this.data.compact = !this.data.compact;
-			this.save();
-		};
-	</script>
-</mk-user-recommendation-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/version.tag b/src/web/app/desktop/tags/home-widgets/version.tag
deleted file mode 100644
index 6dd8ad6444..0000000000
--- a/src/web/app/desktop/tags/home-widgets/version.tag
+++ /dev/null
@@ -1,20 +0,0 @@
-<mk-version-home-widget>
-	<p>ver { _VERSION_ } (葵 aoi)</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow visible !important
-
-			> p
-				display block
-				margin 0
-				padding 0 12px
-				text-align center
-				font-size 0.7em
-				color #aaa
-
-	</style>
-	<script lang="typescript">
-		this.mixin('widget');
-	</script>
-</mk-version-home-widget>
diff --git a/src/web/app/desktop/tags/images.tag b/src/web/app/desktop/tags/images.tag
deleted file mode 100644
index 1094e0d968..0000000000
--- a/src/web/app/desktop/tags/images.tag
+++ /dev/null
@@ -1,172 +0,0 @@
-<mk-images>
-	<template each={ image in images }>
-		<mk-images-image image={ image }/>
-	</template>
-	<style lang="stylus" scoped>
-		:scope
-			display grid
-			grid-gap 4px
-			height 256px
-	</style>
-	<script lang="typescript">
-		this.images = this.opts.images;
-
-		this.on('mount', () => {
-			if (this.images.length == 1) {
-				this.root.style.gridTemplateRows = '1fr';
-
-				this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
-			} else if (this.images.length == 2) {
-				this.root.style.gridTemplateColumns = '1fr 1fr';
-				this.root.style.gridTemplateRows = '1fr';
-
-				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
-			} else if (this.images.length == 3) {
-				this.root.style.gridTemplateColumns = '1fr 0.5fr';
-				this.root.style.gridTemplateRows = '1fr 1fr';
-
-				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
-				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
-			} else if (this.images.length == 4) {
-				this.root.style.gridTemplateColumns = '1fr 1fr';
-				this.root.style.gridTemplateRows = '1fr 1fr';
-
-				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
-				this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
-			}
-		});
-	</script>
-</mk-images>
-
-<mk-images-image>
-	<a ref="view"
-		href={ image.url }
-		onmousemove={ mousemove }
-		onmouseleave={ mouseleave }
-		style={ styles }
-		@click="click"
-		title={ image.name }></a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow hidden
-			border-radius 4px
-
-			> a
-				display block
-				cursor zoom-in
-				overflow hidden
-				width 100%
-				height 100%
-				background-position center
-
-				&:not(:hover)
-					background-size cover
-
-	</style>
-	<script lang="typescript">
-		this.image = this.opts.image;
-		this.styles = {
-			'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
-			'background-image': `url(${this.image.url}?thumbnail&size=512)`
-		};
-
-		this.mousemove = e => {
-			const rect = this.$refs.view.getBoundingClientRect();
-			const mouseX = e.clientX - rect.left;
-			const mouseY = e.clientY - rect.top;
-			const xp = mouseX / this.$refs.view.offsetWidth * 100;
-			const yp = mouseY / this.$refs.view.offsetHeight * 100;
-			this.$refs.view.style.backgroundPosition = xp + '% ' + yp + '%';
-			this.$refs.view.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
-		};
-
-		this.mouseleave = () => {
-			this.$refs.view.style.backgroundPosition = '';
-		};
-
-		this.click = ev => {
-			ev.preventDefault();
-			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
-				image: this.image
-			});
-			return false;
-		};
-	</script>
-</mk-images-image>
-
-<mk-image-dialog>
-	<div class="bg" ref="bg" @click="close"></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } @click="close"/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position fixed
-			z-index 2048
-			top 0
-			left 0
-			width 100%
-			height 100%
-			opacity 0
-
-			> .bg
-				display block
-				position fixed
-				z-index 1
-				top 0
-				left 0
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.7)
-
-			> img
-				position fixed
-				z-index 2
-				top 0
-				right 0
-				bottom 0
-				left 0
-				max-width 100%
-				max-height 100%
-				margin auto
-				cursor zoom-out
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.image = this.opts.image;
-
-		this.on('mount', () => {
-			anime({
-				targets: this.root,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-		});
-
-		this.close = () => {
-			anime({
-				targets: this.root,
-				opacity: 0,
-				duration: 100,
-				easing: 'linear',
-				complete: () => this.$destroy()
-			});
-		};
-	</script>
-</mk-image-dialog>
diff --git a/src/web/app/desktop/tags/index.ts b/src/web/app/desktop/tags/index.ts
deleted file mode 100644
index 4edda83534..0000000000
--- a/src/web/app/desktop/tags/index.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-require('./contextmenu.tag');
-require('./dialog.tag');
-require('./window.tag');
-require('./input-dialog.tag');
-require('./follow-button.tag');
-require('./drive/base-contextmenu.tag');
-require('./drive/file-contextmenu.tag');
-require('./drive/folder-contextmenu.tag');
-require('./drive/file.tag');
-require('./drive/folder.tag');
-require('./drive/nav-folder.tag');
-require('./drive/browser-window.tag');
-require('./drive/browser.tag');
-require('./select-file-from-drive-window.tag');
-require('./select-folder-from-drive-window.tag');
-require('./crop-window.tag');
-require('./settings.tag');
-require('./settings-window.tag');
-require('./analog-clock.tag');
-require('./notifications.tag');
-require('./post-form-window.tag');
-require('./post-form.tag');
-require('./post-preview.tag');
-require('./repost-form-window.tag');
-require('./home-widgets/user-recommendation.tag');
-require('./home-widgets/timeline.tag');
-require('./home-widgets/mentions.tag');
-require('./home-widgets/calendar.tag');
-require('./home-widgets/donation.tag');
-require('./home-widgets/tips.tag');
-require('./home-widgets/nav.tag');
-require('./home-widgets/profile.tag');
-require('./home-widgets/notifications.tag');
-require('./home-widgets/rss-reader.tag');
-require('./home-widgets/photo-stream.tag');
-require('./home-widgets/broadcast.tag');
-require('./home-widgets/version.tag');
-require('./home-widgets/recommended-polls.tag');
-require('./home-widgets/trends.tag');
-require('./home-widgets/activity.tag');
-require('./home-widgets/server.tag');
-require('./home-widgets/slideshow.tag');
-require('./home-widgets/channel.tag');
-require('./home-widgets/timemachine.tag');
-require('./home-widgets/post-form.tag');
-require('./home-widgets/access-log.tag');
-require('./home-widgets/messaging.tag');
-require('./timeline.tag');
-require('./messaging/window.tag');
-require('./messaging/room-window.tag');
-require('./following-setuper.tag');
-require('./ellipsis-icon.tag');
-require('./ui.tag');
-require('./home.tag');
-require('./user-timeline.tag');
-require('./user.tag');
-require('./big-follow-button.tag');
-require('./pages/entrance.tag');
-require('./pages/home.tag');
-require('./pages/home-customize.tag');
-require('./pages/user.tag');
-require('./pages/post.tag');
-require('./pages/search.tag');
-require('./pages/not-found.tag');
-require('./pages/selectdrive.tag');
-require('./pages/drive.tag');
-require('./pages/messaging-room.tag');
-require('./autocomplete-suggestion.tag');
-require('./progress-dialog.tag');
-require('./user-preview.tag');
-require('./post-detail.tag');
-require('./post-detail-sub.tag');
-require('./search.tag');
-require('./search-posts.tag');
-require('./set-avatar-suggestion.tag');
-require('./set-banner-suggestion.tag');
-require('./repost-form.tag');
-require('./sub-post-content.tag');
-require('./images.tag');
-require('./donation.tag');
-require('./users-list.tag');
-require('./user-following.tag');
-require('./user-followers.tag');
-require('./user-following-window.tag');
-require('./user-followers-window.tag');
-require('./list-user.tag');
-require('./detailed-post-window.tag');
-require('./widgets/calendar.tag');
-require('./widgets/activity.tag');
diff --git a/src/web/app/desktop/tags/input-dialog.tag b/src/web/app/desktop/tags/input-dialog.tag
deleted file mode 100644
index a1634429cf..0000000000
--- a/src/web/app/desktop/tags/input-dialog.tag
+++ /dev/null
@@ -1,172 +0,0 @@
-<mk-input-dialog>
-	<mk-window ref="window" is-modal={ true } width={ '500px' }>
-		<yield to="header">
-			%fa:i-cursor%{ parent.title }
-		</yield>
-		<yield to="content">
-			<div class="body">
-				<input ref="text" type={ parent.type } oninput={ parent.onInput } onkeydown={ parent.onKeydown } placeholder={ parent.placeholder }/>
-			</div>
-			<div class="action">
-				<button class="cancel" @click="parent.cancel">キャンセル</button>
-				<button class="ok" disabled={ !parent.allowEmpty && refs.text.value.length == 0 } @click="parent.ok">決定</button>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-					> .body
-						padding 16px
-
-						> input
-							display block
-							padding 8px
-							margin 0
-							width 100%
-							max-width 100%
-							min-width 100%
-							font-size 1em
-							color #333
-							background #fff
-							outline none
-							border solid 1px rgba($theme-color, 0.1)
-							border-radius 4px
-							transition border-color .3s ease
-
-							&:hover
-								border-color rgba($theme-color, 0.2)
-								transition border-color .1s ease
-
-							&:focus
-								color $theme-color
-								border-color rgba($theme-color, 0.5)
-								transition border-color 0s ease
-
-							&::-webkit-input-placeholder
-								color rgba($theme-color, 0.3)
-
-					> .action
-						height 72px
-						background lighten($theme-color, 95%)
-
-						.ok
-						.cancel
-							display block
-							position absolute
-							bottom 16px
-							cursor pointer
-							padding 0
-							margin 0
-							width 120px
-							height 40px
-							font-size 1em
-							outline none
-							border-radius 4px
-
-							&:focus
-								&:after
-									content ""
-									pointer-events none
-									position absolute
-									top -5px
-									right -5px
-									bottom -5px
-									left -5px
-									border 2px solid rgba($theme-color, 0.3)
-									border-radius 8px
-
-							&:disabled
-								opacity 0.7
-								cursor default
-
-						.ok
-							right 16px
-							color $theme-color-foreground
-							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-							border solid 1px lighten($theme-color, 15%)
-
-							&:not(:disabled)
-								font-weight bold
-
-							&:hover:not(:disabled)
-								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-								border-color $theme-color
-
-							&:active:not(:disabled)
-								background $theme-color
-								border-color $theme-color
-
-						.cancel
-							right 148px
-							color #888
-							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-							border solid 1px #e2e2e2
-
-							&:hover
-								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-								border-color #dcdcdc
-
-							&:active
-								background #ececec
-								border-color #dcdcdc
-
-	</style>
-	<script lang="typescript">
-		this.done = false;
-
-		this.title = this.opts.title;
-		this.placeholder = this.opts.placeholder;
-		this.default = this.opts.default;
-		this.allowEmpty = this.opts.allowEmpty != null ? this.opts.allowEmpty : true;
-		this.type = this.opts.type ? this.opts.type : 'text';
-
-		this.on('mount', () => {
-			this.text = this.$refs.window.refs.text;
-			if (this.default) this.text.value = this.default;
-			this.text.focus();
-
-			this.$refs.window.on('closing', () => {
-				if (this.done) {
-					this.opts.onOk(this.text.value);
-				} else {
-					if (this.opts.onCancel) this.opts.onCancel();
-				}
-			});
-
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-
-		this.cancel = () => {
-			this.done = false;
-			this.$refs.window.close();
-		};
-
-		this.ok = () => {
-			if (!this.allowEmpty && this.text.value == '') return;
-			this.done = true;
-			this.$refs.window.close();
-		};
-
-		this.onInput = () => {
-			this.update();
-		};
-
-		this.onKeydown = e => {
-			if (e.which == 13) { // Enter
-				e.preventDefault();
-				e.stopPropagation();
-				this.ok();
-			}
-		};
-	</script>
-</mk-input-dialog>
diff --git a/src/web/app/desktop/tags/list-user.tag b/src/web/app/desktop/tags/list-user.tag
deleted file mode 100644
index bde90b1cc6..0000000000
--- a/src/web/app/desktop/tags/list-user.tag
+++ /dev/null
@@ -1,93 +0,0 @@
-<mk-list-user>
-	<a class="avatar-anchor" href={ '/' + user.username }>
-		<img class="avatar" src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
-	</a>
-	<div class="main">
-		<header>
-			<a class="name" href={ '/' + user.username }>{ user.name }</a>
-			<span class="username">@{ user.username }</span>
-		</header>
-		<div class="body">
-			<p class="followed" v-if="user.is_followed">フォローされています</p>
-			<div class="description">{ user.description }</div>
-		</div>
-	</div>
-	<mk-follow-button user={ user }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 16px
-			font-size 16px
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .avatar-anchor
-				display block
-				float left
-				margin 0 16px 0 0
-
-				> .avatar
-					display block
-					width 58px
-					height 58px
-					margin 0
-					border-radius 8px
-					vertical-align bottom
-
-			> .main
-				float left
-				width calc(100% - 74px)
-
-				> header
-					margin-bottom 2px
-
-					> .name
-						display inline
-						margin 0
-						padding 0
-						color #777
-						font-size 1em
-						font-weight 700
-						text-align left
-						text-decoration none
-
-						&:hover
-							text-decoration underline
-
-					> .username
-						text-align left
-						margin 0 0 0 8px
-						color #ccc
-
-				> .body
-					> .followed
-						display inline-block
-						margin 0 0 4px 0
-						padding 2px 8px
-						vertical-align top
-						font-size 10px
-						color #71afc7
-						background #eefaff
-						border-radius 4px
-
-					> .description
-						cursor default
-						display block
-						margin 0
-						padding 0
-						overflow-wrap break-word
-						font-size 1.1em
-						color #717171
-
-			> mk-follow-button
-				position absolute
-				top 16px
-				right 16px
-
-	</style>
-	<script lang="typescript">this.user = this.opts.user</script>
-</mk-list-user>
diff --git a/src/web/app/desktop/tags/messaging/room-window.tag b/src/web/app/desktop/tags/messaging/room-window.tag
deleted file mode 100644
index ca11873644..0000000000
--- a/src/web/app/desktop/tags/messaging/room-window.tag
+++ /dev/null
@@ -1,32 +0,0 @@
-<mk-messaging-room-window>
-	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout={ popout }>
-		<yield to="header">%fa:comments%メッセージ: { parent.user.name }</yield>
-		<yield to="content">
-			<mk-messaging-room user={ parent.user }/>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-					> mk-messaging-room
-						height 100%
-						overflow auto
-
-	</style>
-	<script lang="typescript">
-		this.user = this.opts.user;
-
-		this.popout = `${_URL_}/i/messaging/${this.user.username}`;
-
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-	</script>
-</mk-messaging-room-window>
diff --git a/src/web/app/desktop/tags/messaging/window.tag b/src/web/app/desktop/tags/messaging/window.tag
deleted file mode 100644
index e078bccad7..0000000000
--- a/src/web/app/desktop/tags/messaging/window.tag
+++ /dev/null
@@ -1,34 +0,0 @@
-<mk-messaging-window>
-	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
-		<yield to="header">%fa:comments%メッセージ</yield>
-		<yield to="content">
-			<mk-messaging ref="index"/>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-					> mk-messaging
-						height 100%
-						overflow auto
-
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-
-			this.$refs.window.refs.index.on('navigate-user', user => {
-				riot.mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
-					user: user
-				});
-			});
-		});
-	</script>
-</mk-messaging-window>
diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag
deleted file mode 100644
index a599e5d6a5..0000000000
--- a/src/web/app/desktop/tags/notifications.tag
+++ /dev/null
@@ -1,301 +0,0 @@
-<mk-notifications>
-	<div class="notifications" v-if="notifications.length != 0">
-		<template each={ notification, i in notifications }>
-			<div class="notification { notification.type }">
-				<mk-time time={ notification.created_at }/>
-				<template v-if="notification.type == 'reaction'">
-					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
-						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
-					</a>
-					<div class="text">
-						<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
-						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
-							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
-						</a>
-					</div>
-				</template>
-				<template v-if="notification.type == 'repost'">
-					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
-						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
-					</a>
-					<div class="text">
-						<p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
-						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
-							%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
-						</a>
-					</div>
-				</template>
-				<template v-if="notification.type == 'quote'">
-					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
-						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
-					</a>
-					<div class="text">
-						<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
-						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
-					</div>
-				</template>
-				<template v-if="notification.type == 'follow'">
-					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
-						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
-					</a>
-					<div class="text">
-						<p>%fa:user-plus%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
-					</div>
-				</template>
-				<template v-if="notification.type == 'reply'">
-					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
-						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
-					</a>
-					<div class="text">
-						<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
-						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
-					</div>
-				</template>
-				<template v-if="notification.type == 'mention'">
-					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
-						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
-					</a>
-					<div class="text">
-						<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
-						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
-					</div>
-				</template>
-				<template v-if="notification.type == 'poll_vote'">
-					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
-						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
-					</a>
-					<div class="text">
-						<p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
-						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
-							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
-						</a>
-					</div>
-				</template>
-			</div>
-			<p class="date" v-if="i != notifications.length - 1 && notification._date != notifications[i + 1]._date">
-				<span>%fa:angle-up%{ notification._datetext }</span>
-				<span>%fa:angle-down%{ notifications[i + 1]._datetext }</span>
-			</p>
-		</template>
-	</div>
-	<button class="more { fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" disabled={ fetchingMoreNotifications }>
-		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
-	</button>
-	<p class="empty" v-if="notifications.length == 0 && !loading">ありません！</p>
-	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .notifications
-				> .notification
-					margin 0
-					padding 16px
-					overflow-wrap break-word
-					font-size 0.9em
-					border-bottom solid 1px rgba(0, 0, 0, 0.05)
-
-					&:last-child
-						border-bottom none
-
-					> mk-time
-						display inline
-						position absolute
-						top 16px
-						right 12px
-						vertical-align top
-						color rgba(0, 0, 0, 0.6)
-						font-size small
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> .avatar-anchor
-						display block
-						float left
-						position -webkit-sticky
-						position sticky
-						top 16px
-
-						> img
-							display block
-							min-width 36px
-							min-height 36px
-							max-width 36px
-							max-height 36px
-							border-radius 6px
-
-					> .text
-						float right
-						width calc(100% - 36px)
-						padding-left 8px
-
-						p
-							margin 0
-
-							i, mk-reaction-icon
-								margin-right 4px
-
-					.post-preview
-						color rgba(0, 0, 0, 0.7)
-
-					.post-ref
-						color rgba(0, 0, 0, 0.7)
-
-						[data-fa]
-							font-size 1em
-							font-weight normal
-							font-style normal
-							display inline-block
-							margin-right 3px
-
-					&.repost, &.quote
-						.text p i
-							color #77B255
-
-					&.follow
-						.text p i
-							color #53c7ce
-
-					&.reply, &.mention
-						.text p i
-							color #555
-
-				> .date
-					display block
-					margin 0
-					line-height 32px
-					text-align center
-					font-size 0.8em
-					color #aaa
-					background #fdfdfd
-					border-bottom solid 1px rgba(0, 0, 0, 0.05)
-
-					span
-						margin 0 16px
-
-					[data-fa]
-						margin-right 8px
-
-			> .more
-				display block
-				width 100%
-				padding 16px
-				color #555
-				border-top solid 1px rgba(0, 0, 0, 0.05)
-
-				&:hover
-					background rgba(0, 0, 0, 0.025)
-
-				&:active
-					background rgba(0, 0, 0, 0.05)
-
-				&.fetching
-					cursor wait
-
-				> [data-fa]
-					margin-right 4px
-
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> .loading
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		import getPostSummary from '../../../../common/get-post-summary.ts';
-		this.getPostSummary = getPostSummary;
-
-		this.mixin('i');
-		this.mixin('api');
-		this.mixin('user-preview');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.notifications = [];
-		this.loading = true;
-
-		this.on('mount', () => {
-			const max = 10;
-
-			this.api('i/notifications', {
-				limit: max + 1
-			}).then(notifications => {
-				if (notifications.length == max + 1) {
-					this.moreNotifications = true;
-					notifications.pop();
-				}
-
-				this.update({
-					loading: false,
-					notifications: notifications
-				});
-			});
-
-			this.connection.on('notification', this.onNotification);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('notification', this.onNotification);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.on('update', () => {
-			this.notifications.forEach(notification => {
-				const date = new Date(notification.created_at).getDate();
-				const month = new Date(notification.created_at).getMonth() + 1;
-				notification._date = date;
-				notification._datetext = `${month}月 ${date}日`;
-			});
-		});
-
-		this.onNotification = notification => {
-			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
-			this.connection.send({
-				type: 'read_notification',
-				id: notification.id
-			});
-
-			this.notifications.unshift(notification);
-			this.update();
-		};
-
-		this.fetchMoreNotifications = () => {
-			this.update({
-				fetchingMoreNotifications: true
-			});
-
-			const max = 30;
-
-			this.api('i/notifications', {
-				limit: max + 1,
-				until_id: this.notifications[this.notifications.length - 1].id
-			}).then(notifications => {
-				if (notifications.length == max + 1) {
-					this.moreNotifications = true;
-					notifications.pop();
-				} else {
-					this.moreNotifications = false;
-				}
-				this.update({
-					notifications: this.notifications.concat(notifications),
-					fetchingMoreNotifications: false
-				});
-			});
-		};
-	</script>
-</mk-notifications>
diff --git a/src/web/app/desktop/tags/pages/drive.tag b/src/web/app/desktop/tags/pages/drive.tag
deleted file mode 100644
index f4e2a3740a..0000000000
--- a/src/web/app/desktop/tags/pages/drive.tag
+++ /dev/null
@@ -1,37 +0,0 @@
-<mk-drive-page>
-	<mk-drive-browser ref="browser" folder={ opts.folder }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position fixed
-			width 100%
-			height 100%
-			background #fff
-
-			> mk-drive-browser
-				height 100%
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			document.title = 'Misskey Drive';
-
-			this.$refs.browser.on('move-root', () => {
-				const title = 'Misskey Drive';
-
-				// Rewrite URL
-				history.pushState(null, title, '/i/drive');
-
-				document.title = title;
-			});
-
-			this.$refs.browser.on('open-folder', folder => {
-				const title = folder.name + ' | Misskey Drive';
-
-				// Rewrite URL
-				history.pushState(null, title, '/i/drive/folder/' + folder.id);
-
-				document.title = title;
-			});
-		});
-	</script>
-</mk-drive-page>
diff --git a/src/web/app/desktop/tags/pages/entrance.tag b/src/web/app/desktop/tags/pages/entrance.tag
deleted file mode 100644
index 56cec34909..0000000000
--- a/src/web/app/desktop/tags/pages/entrance.tag
+++ /dev/null
@@ -1,342 +0,0 @@
-<mk-entrance>
-	<main>
-		<div>
-			<h1>どこにいても、ここにあります</h1>
-			<p>ようこそ！ MisskeyはTwitter風ミニブログSNSです――思ったこと、共有したいことをシンプルに書き残せます。タイムラインを見れば、皆の反応や皆がどう思っているのかもすぐにわかります。</p>
-			<p v-if="stats">これまでに{ stats.posts_count }投稿されました</p>
-		</div>
-		<div>
-			<mk-entrance-signin v-if="mode == 'signin'"/>
-			<mk-entrance-signup v-if="mode == 'signup'"/>
-			<div class="introduction" v-if="mode == 'introduction'">
-				<mk-introduction/>
-				<button @click="signin">わかった</button>
-			</div>
-		</div>
-	</main>
-	<mk-forkit/>
-	<footer>
-		<div>
-			<mk-nav-links/>
-			<p class="c">{ _COPYRIGHT_ }</p>
-		</div>
-	</footer>
-	<!-- ↓ https://github.com/riot/riot/issues/2134 (将来的)-->
-	<style data-disable-scope="data-disable-scope">
-		#wait {
-			right: auto;
-			left: 15px;
-		}
-	</style>
-	<style lang="stylus" scoped>
-		:scope
-			$width = 1000px
-
-			display block
-
-			&:before
-				content ""
-				display block
-				position fixed
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.3)
-
-			> main
-				display block
-				max-width $width
-				margin 0 auto
-				padding 64px 0 0 0
-				padding-bottom 16px
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				> div:first-child
-					position absolute
-					top 64px
-					left 0
-					width calc(100% - 500px)
-					color #fff
-					text-shadow 0 0 32px rgba(0, 0, 0, 0.5)
-					font-weight bold
-
-					> p:last-child
-						padding 1em 0 0 0
-						border-top solid 1px #fff
-
-				> div:last-child
-					float right
-
-					> .introduction
-						max-width 360px
-						margin 0 auto
-						color #777
-
-						> mk-introduction
-							padding 32px
-							background #fff
-							box-shadow 0 4px 16px rgba(0, 0, 0, 0.2)
-
-						> button
-							display block
-							margin 16px auto 0 auto
-							color #666
-
-							&:hover
-								text-decoration underline
-
-			> footer
-				*
-					color #fff !important
-					text-shadow 0 0 8px #000
-					font-weight bold
-
-				> div
-					max-width $width
-					margin 0 auto
-					padding 16px 0
-					text-align center
-					border-top solid 1px #fff
-
-					> .c
-						margin 0
-						line-height 64px
-						font-size 10px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.mode = 'signin';
-
-		this.on('mount', () => {
-			document.documentElement.style.backgroundColor = '#444';
-
-			this.api('meta').then(meta => {
-				const img = meta.top_image ? meta.top_image : '/assets/desktop/index.jpg';
-				document.documentElement.style.backgroundImage = `url("${ img }")`;
-				document.documentElement.style.backgroundSize = 'cover';
-				document.documentElement.style.backgroundPosition = 'center';
-			});
-
-			this.api('stats').then(stats => {
-				this.update({
-					stats
-				});
-			});
-		});
-
-		this.signup = () => {
-			this.update({
-				mode: 'signup'
-			});
-		};
-
-		this.signin = () => {
-			this.update({
-				mode: 'signin'
-			});
-		};
-
-		this.introduction = () => {
-			this.update({
-				mode: 'introduction'
-			});
-		};
-	</script>
-</mk-entrance>
-
-<mk-entrance-signin>
-	<a class="help" href={ _DOCS_URL_ + '/help' } title="お困りですか？">%fa:question%</a>
-	<div class="form">
-		<h1><img v-if="user" src={ user.avatar_url + '?thumbnail&size=32' }/>
-			<p>{ user ? user.name : 'アカウント' }</p>
-		</h1>
-		<mk-signin ref="signin"/>
-	</div>
-	<a href={ _API_URL_ + '/signin/twitter' }>Twitterでサインイン</a>
-	<div class="divider"><span>or</span></div>
-	<button class="signup" @click="parent.signup">新規登録</button><a class="introduction" @click="introduction">Misskeyについて</a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 290px
-			margin 0 auto
-			text-align center
-
-			&:hover
-				> .help
-					opacity 1
-
-			> .help
-				cursor pointer
-				display block
-				position absolute
-				top 0
-				right 0
-				z-index 1
-				margin 0
-				padding 0
-				font-size 1.2em
-				color #999
-				border none
-				outline none
-				background transparent
-				opacity 0
-				transition opacity 0.1s ease
-
-				&:hover
-					color #444
-
-				&:active
-					color #222
-
-				> [data-fa]
-					padding 14px
-
-			> .form
-				padding 10px 28px 16px 28px
-				background #fff
-				box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
-
-				> h1
-					display block
-					margin 0
-					padding 0
-					height 54px
-					line-height 54px
-					text-align center
-					text-transform uppercase
-					font-size 1em
-					font-weight bold
-					color rgba(0, 0, 0, 0.5)
-					border-bottom solid 1px rgba(0, 0, 0, 0.1)
-
-					> p
-						display inline
-						margin 0
-						padding 0
-
-					> img
-						display inline-block
-						top 10px
-						width 32px
-						height 32px
-						margin-right 8px
-						border-radius 100%
-
-						&[src='']
-							display none
-
-			> .divider
-				padding 16px 0
-				text-align center
-
-				&:before
-				&:after
-					content ""
-					display block
-					position absolute
-					top 50%
-					width 45%
-					height 1px
-					border-top solid 1px rgba(0, 0, 0, 0.1)
-
-				&:before
-					left 0
-
-				&:after
-					right 0
-
-				> *
-					z-index 1
-					padding 0 8px
-					color #fff
-					text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
-
-			> .signup
-				width 100%
-				line-height 56px
-				font-size 1em
-				color #fff
-				background $theme-color
-				border-radius 64px
-
-				&:hover
-					background lighten($theme-color, 5%)
-
-				&:active
-					background darken($theme-color, 5%)
-
-			> .introduction
-				display inline-block
-				margin-top 16px
-				font-size 12px
-				color #666
-
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			this.$refs.signin.on('user', user => {
-				this.update({
-					user: user
-				});
-			});
-		});
-
-		this.introduction = () => {
-			this.parent.introduction();
-		};
-	</script>
-</mk-entrance-signin>
-
-<mk-entrance-signup>
-	<mk-signup/>
-	<button class="cancel" type="button" @click="parent.signin" title="キャンセル">%fa:times%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 368px
-			margin 0 auto
-
-			&:hover
-				> .cancel
-					opacity 1
-
-			> mk-signup
-				padding 18px 32px 0 32px
-				background #fff
-				box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
-
-			> .cancel
-				cursor pointer
-				display block
-				position absolute
-				top 0
-				right 0
-				z-index 1
-				margin 0
-				padding 0
-				font-size 1.2em
-				color #999
-				border none
-				outline none
-				box-shadow none
-				background transparent
-				opacity 0
-				transition opacity 0.1s ease
-
-				&:hover
-					color #555
-
-				&:active
-					color #222
-
-				> [data-fa]
-					padding 14px
-
-	</style>
-</mk-entrance-signup>
diff --git a/src/web/app/desktop/tags/pages/home-customize.tag b/src/web/app/desktop/tags/pages/home-customize.tag
deleted file mode 100644
index 178558f9d7..0000000000
--- a/src/web/app/desktop/tags/pages/home-customize.tag
+++ /dev/null
@@ -1,12 +0,0 @@
-<mk-home-customize-page>
-	<mk-home ref="home" mode="timeline" customize={ true }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			document.title = 'Misskey - ホームのカスタマイズ';
-		});
-	</script>
-</mk-home-customize-page>
diff --git a/src/web/app/desktop/tags/pages/home.tag b/src/web/app/desktop/tags/pages/home.tag
deleted file mode 100644
index 9b9d455b5b..0000000000
--- a/src/web/app/desktop/tags/pages/home.tag
+++ /dev/null
@@ -1,54 +0,0 @@
-<mk-home-page>
-	<mk-ui ref="ui" page={ page }>
-		<mk-home ref="home" mode={ parent.opts.mode }/>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import Progress from '../../../common/scripts/loading';
-		import getPostSummary from '../../../../../common/get-post-summary.ts';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.unreadCount = 0;
-		this.page = this.opts.mode || 'timeline';
-
-		this.on('mount', () => {
-			this.$refs.ui.refs.home.on('loaded', () => {
-				Progress.done();
-			});
-			document.title = 'Misskey';
-			Progress.start();
-
-			this.connection.on('post', this.onStreamPost);
-			document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('post', this.onStreamPost);
-			this.stream.dispose(this.connectionId);
-			document.removeEventListener('visibilitychange', this.windowOnVisibilitychange);
-		});
-
-		this.onStreamPost = post => {
-			if (document.hidden && post.user_id != this.I.id) {
-				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
-			}
-		};
-
-		this.windowOnVisibilitychange = () => {
-			if (!document.hidden) {
-				this.unreadCount = 0;
-				document.title = 'Misskey';
-			}
-		};
-	</script>
-</mk-home-page>
diff --git a/src/web/app/desktop/tags/pages/messaging-room.tag b/src/web/app/desktop/tags/pages/messaging-room.tag
deleted file mode 100644
index bfa8c2465e..0000000000
--- a/src/web/app/desktop/tags/pages/messaging-room.tag
+++ /dev/null
@@ -1,37 +0,0 @@
-<mk-messaging-room-page>
-	<mk-messaging-room v-if="user" user={ user } is-naked={ true }/>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-
-	</style>
-	<script lang="typescript">
-		import Progress from '../../../common/scripts/loading';
-
-		this.mixin('api');
-
-		this.fetching = true;
-		this.user = null;
-
-		this.on('mount', () => {
-			Progress.start();
-
-			document.documentElement.style.background = '#fff';
-
-			this.api('users/show', {
-				username: this.opts.user
-			}).then(user => {
-				this.update({
-					fetching: false,
-					user: user
-				});
-
-				document.title = 'メッセージ: ' + this.user.name;
-
-				Progress.done();
-			});
-		});
-	</script>
-</mk-messaging-room-page>
diff --git a/src/web/app/desktop/tags/pages/not-found.tag b/src/web/app/desktop/tags/pages/not-found.tag
deleted file mode 100644
index f2b4ef09a9..0000000000
--- a/src/web/app/desktop/tags/pages/not-found.tag
+++ /dev/null
@@ -1,11 +0,0 @@
-<mk-not-found>
-	<mk-ui>
-		<main>
-			<h1>Not Found</h1>
-		</main>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-</mk-not-found>
diff --git a/src/web/app/desktop/tags/pages/post.tag b/src/web/app/desktop/tags/pages/post.tag
deleted file mode 100644
index 488adc6e39..0000000000
--- a/src/web/app/desktop/tags/pages/post.tag
+++ /dev/null
@@ -1,58 +0,0 @@
-<mk-post-page>
-	<mk-ui ref="ui">
-		<main v-if="!parent.fetching">
-			<a v-if="parent.post.next" href={ parent.post.next }>%fa:angle-up%%i18n:desktop.tags.mk-post-page.next%</a>
-			<mk-post-detail ref="detail" post={ parent.post }/>
-			<a v-if="parent.post.prev" href={ parent.post.prev }>%fa:angle-down%%i18n:desktop.tags.mk-post-page.prev%</a>
-		</main>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			main
-				padding 16px
-				text-align center
-
-				> a
-					display inline-block
-
-					&:first-child
-						margin-bottom 4px
-
-					&:last-child
-						margin-top 4px
-
-					> [data-fa]
-						margin-right 4px
-
-				> mk-post-detail
-					margin 0 auto
-					width 640px
-
-	</style>
-	<script lang="typescript">
-		import Progress from '../../../common/scripts/loading';
-
-		this.mixin('api');
-
-		this.fetching = true;
-		this.post = null;
-
-		this.on('mount', () => {
-			Progress.start();
-
-			this.api('posts/show', {
-				post_id: this.opts.post
-			}).then(post => {
-
-				this.update({
-					fetching: false,
-					post: post
-				});
-
-				Progress.done();
-			});
-		});
-	</script>
-</mk-post-page>
diff --git a/src/web/app/desktop/tags/pages/search.tag b/src/web/app/desktop/tags/pages/search.tag
deleted file mode 100644
index eaa80a039c..0000000000
--- a/src/web/app/desktop/tags/pages/search.tag
+++ /dev/null
@@ -1,20 +0,0 @@
-<mk-search-page>
-	<mk-ui ref="ui">
-		<mk-search ref="search" query={ parent.opts.query }/>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import Progress from '../../../common/scripts/loading';
-
-		this.on('mount', () => {
-			Progress.start();
-
-			this.$refs.ui.refs.search.on('loaded', () => {
-				Progress.done();
-			});
-		});
-	</script>
-</mk-search-page>
diff --git a/src/web/app/desktop/tags/pages/selectdrive.tag b/src/web/app/desktop/tags/pages/selectdrive.tag
deleted file mode 100644
index dd4d30f412..0000000000
--- a/src/web/app/desktop/tags/pages/selectdrive.tag
+++ /dev/null
@@ -1,161 +0,0 @@
-<mk-selectdrive-page>
-	<mk-drive-browser ref="browser" multiple={ multiple }/>
-	<div>
-		<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" @click="upload">%fa:upload%</button>
-		<button class="cancel" @click="close">%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
-		<button class="ok" @click="ok">%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
-	</div>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position fixed
-			width 100%
-			height 100%
-			background #fff
-
-			> mk-drive-browser
-				height calc(100% - 72px)
-
-			> div
-				position fixed
-				bottom 0
-				left 0
-				width 100%
-				height 72px
-				background lighten($theme-color, 95%)
-
-				.upload
-					display inline-block
-					position absolute
-					top 8px
-					left 16px
-					cursor pointer
-					padding 0
-					margin 8px 4px 0 0
-					width 40px
-					height 40px
-					font-size 1em
-					color rgba($theme-color, 0.5)
-					background transparent
-					outline none
-					border solid 1px transparent
-					border-radius 4px
-
-					&:hover
-						background transparent
-						border-color rgba($theme-color, 0.3)
-
-					&:active
-						color rgba($theme-color, 0.6)
-						background transparent
-						border-color rgba($theme-color, 0.5)
-						box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
-
-					&:focus
-						&:after
-							content ""
-							pointer-events none
-							position absolute
-							top -5px
-							right -5px
-							bottom -5px
-							left -5px
-							border 2px solid rgba($theme-color, 0.3)
-							border-radius 8px
-
-				.ok
-				.cancel
-					display block
-					position absolute
-					bottom 16px
-					cursor pointer
-					padding 0
-					margin 0
-					width 120px
-					height 40px
-					font-size 1em
-					outline none
-					border-radius 4px
-
-					&:focus
-						&:after
-							content ""
-							pointer-events none
-							position absolute
-							top -5px
-							right -5px
-							bottom -5px
-							left -5px
-							border 2px solid rgba($theme-color, 0.3)
-							border-radius 8px
-
-					&:disabled
-						opacity 0.7
-						cursor default
-
-				.ok
-					right 16px
-					color $theme-color-foreground
-					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-					border solid 1px lighten($theme-color, 15%)
-
-					&:not(:disabled)
-						font-weight bold
-
-					&:hover:not(:disabled)
-						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-						border-color $theme-color
-
-					&:active:not(:disabled)
-						background $theme-color
-						border-color $theme-color
-
-				.cancel
-					right 148px
-					color #888
-					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-					border solid 1px #e2e2e2
-
-					&:hover
-						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-						border-color #dcdcdc
-
-					&:active
-						background #ececec
-						border-color #dcdcdc
-
-	</style>
-	<script lang="typescript">
-		const q = (new URL(location)).searchParams;
-		this.multiple = q.get('multiple') == 'true' ? true : false;
-
-		this.on('mount', () => {
-			document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%';
-
-			this.$refs.browser.on('selected', file => {
-				this.files = [file];
-				this.ok();
-			});
-
-			this.$refs.browser.on('change-selection', files => {
-				this.update({
-					files: files
-				});
-			});
-		});
-
-		this.upload = () => {
-			this.$refs.browser.selectLocalFile();
-		};
-
-		this.close = () => {
-			window.close();
-		};
-
-		this.ok = () => {
-			window.opener.cb(this.multiple ? this.files : this.files[0]);
-			window.close();
-		};
-	</script>
-</mk-selectdrive-page>
diff --git a/src/web/app/desktop/tags/pages/user.tag b/src/web/app/desktop/tags/pages/user.tag
deleted file mode 100644
index abed2ef021..0000000000
--- a/src/web/app/desktop/tags/pages/user.tag
+++ /dev/null
@@ -1,27 +0,0 @@
-<mk-user-page>
-	<mk-ui ref="ui">
-		<mk-user ref="user" user={ parent.user } page={ parent.opts.page }/>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import Progress from '../../../common/scripts/loading';
-
-		this.user = this.opts.user;
-
-		this.on('mount', () => {
-			Progress.start();
-
-			this.$refs.ui.refs.user.on('user-fetched', user => {
-				Progress.set(0.5);
-				document.title = user.name + ' | Misskey';
-			});
-
-			this.$refs.ui.refs.user.on('loaded', () => {
-				Progress.done();
-			});
-		});
-	</script>
-</mk-user-page>
diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag
deleted file mode 100644
index 2088056700..0000000000
--- a/src/web/app/desktop/tags/post-detail-sub.tag
+++ /dev/null
@@ -1,149 +0,0 @@
-<mk-post-detail-sub title={ title }>
-	<a class="avatar-anchor" href={ '/' + post.user.username }>
-		<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ post.user_id }/>
-	</a>
-	<div class="main">
-		<header>
-			<div class="left">
-				<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>
-				<span class="username">@{ post.user.username }</span>
-			</div>
-			<div class="right">
-				<a class="time" href={ '/' + post.user.username + '/' + post.id }>
-					<mk-time time={ post.created_at }/>
-				</a>
-			</div>
-		</header>
-		<div class="body">
-			<div class="text" ref="text"></div>
-			<div class="media" v-if="post.media">
-				<mk-images images={ post.media }/>
-			</div>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 20px 32px
-			background #fdfdfd
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			&:hover
-				> .main > footer > button
-					color #888
-
-			> .avatar-anchor
-				display block
-				float left
-				margin 0 16px 0 0
-
-				> .avatar
-					display block
-					width 44px
-					height 44px
-					margin 0
-					border-radius 4px
-					vertical-align bottom
-
-			> .main
-				float left
-				width calc(100% - 60px)
-
-				> header
-					margin-bottom 4px
-					white-space nowrap
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> .left
-						float left
-
-						> .name
-							display inline
-							margin 0
-							padding 0
-							color #777
-							font-size 1em
-							font-weight 700
-							text-align left
-							text-decoration none
-
-							&:hover
-								text-decoration underline
-
-						> .username
-							text-align left
-							margin 0 0 0 8px
-							color #ccc
-
-					> .right
-						float right
-
-						> .time
-							font-size 0.9em
-							color #c0c0c0
-
-				> .body
-
-					> .text
-						cursor default
-						display block
-						margin 0
-						padding 0
-						overflow-wrap break-word
-						font-size 1em
-						color #717171
-
-						> mk-url-preview
-							margin-top 8px
-
-	</style>
-	<script lang="typescript">
-		import compile from '../../common/scripts/text-compiler';
-		import dateStringify from '../../common/scripts/date-stringify';
-
-		this.mixin('api');
-		this.mixin('user-preview');
-
-		this.post = this.opts.post;
-		this.title = dateStringify(this.post.created_at);
-
-		this.on('mount', () => {
-			if (this.post.text) {
-				const tokens = this.post.ast;
-
-				this.$refs.text.innerHTML = compile(tokens);
-
-				Array.from(this.$refs.text.children).forEach(e => {
-					if (e.tagName == 'MK-URL') riot.mount(e);
-				});
-			}
-		});
-
-		this.like = () => {
-			if (this.post.is_liked) {
-				this.api('posts/likes/delete', {
-					post_id: this.post.id
-				}).then(() => {
-					this.post.is_liked = false;
-					this.update();
-				});
-			} else {
-				this.api('posts/likes/create', {
-					post_id: this.post.id
-				}).then(() => {
-					this.post.is_liked = true;
-					this.update();
-				});
-			}
-		};
-	</script>
-</mk-post-detail-sub>
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
deleted file mode 100644
index 5f35ce6afa..0000000000
--- a/src/web/app/desktop/tags/post-detail.tag
+++ /dev/null
@@ -1,328 +0,0 @@
-<mk-post-detail title={ title }>
-	<div class="main">
-		<button class="read-more" v-if="p.reply && p.reply.reply_id && context == null" title="会話をもっと読み込む" @click="loadContext" disabled={ contextFetching }>
-			<template v-if="!contextFetching">%fa:ellipsis-v%</template>
-			<template v-if="contextFetching">%fa:spinner .pulse%</template>
-		</button>
-		<div class="context">
-			<template each={ post in context }>
-				<mk-post-detail-sub post={ post }/>
-			</template>
-		</div>
-		<div class="reply-to" v-if="p.reply">
-			<mk-post-detail-sub post={ p.reply }/>
-		</div>
-		<div class="repost" v-if="isRepost">
-			<p>
-				<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
-					<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
-				</a>
-				%fa:retweet%<a class="name" href={ '/' + post.user.username }>
-				{ post.user.name }
-			</a>
-			がRepost
-		</p>
-		</div>
-		<article>
-			<a class="avatar-anchor" href={ '/' + p.user.username }>
-				<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ p.user.id }/>
-			</a>
-			<header>
-				<a class="name" href={ '/' + p.user.username } data-user-preview={ p.user.id }>{ p.user.name }</a>
-				<span class="username">@{ p.user.username }</span>
-				<a class="time" href={ '/' + p.user.username + '/' + p.id }>
-					<mk-time time={ p.created_at }/>
-				</a>
-			</header>
-			<div class="body">
-				<div class="text" ref="text"></div>
-				<div class="media" v-if="p.media">
-					<mk-images images={ p.media }/>
-				</div>
-				<mk-poll v-if="p.poll" post={ p }/>
-			</div>
-			<footer>
-				<mk-reactions-viewer post={ p }/>
-				<button @click="reply" title="返信">
-					%fa:reply%<p class="count" v-if="p.replies_count > 0">{ p.replies_count }</p>
-				</button>
-				<button @click="repost" title="Repost">
-					%fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p>
-				</button>
-				<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="リアクション">
-					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p>
-				</button>
-				<button @click="menu" ref="menuButton">
-					%fa:ellipsis-h%
-				</button>
-			</footer>
-		</article>
-		<div class="replies" v-if="!compact">
-			<template each={ post in replies }>
-				<mk-post-detail-sub post={ post }/>
-			</template>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 0
-			overflow hidden
-			text-align left
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.1)
-			border-radius 8px
-
-			> .main
-
-				> .read-more
-					display block
-					margin 0
-					padding 10px 0
-					width 100%
-					font-size 1em
-					text-align center
-					color #999
-					cursor pointer
-					background #fafafa
-					outline none
-					border none
-					border-bottom solid 1px #eef0f2
-					border-radius 6px 6px 0 0
-
-					&:hover
-						background #f6f6f6
-
-					&:active
-						background #f0f0f0
-
-					&:disabled
-						color #ccc
-
-				> .context
-					> *
-						border-bottom 1px solid #eef0f2
-
-				> .repost
-					color #9dbb00
-					background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-					> p
-						margin 0
-						padding 16px 32px
-
-						.avatar-anchor
-							display inline-block
-
-							.avatar
-								vertical-align bottom
-								min-width 28px
-								min-height 28px
-								max-width 28px
-								max-height 28px
-								margin 0 8px 0 0
-								border-radius 6px
-
-						[data-fa]
-							margin-right 4px
-
-						.name
-							font-weight bold
-
-					& + article
-						padding-top 8px
-
-				> .reply-to
-					border-bottom 1px solid #eef0f2
-
-				> article
-					padding 28px 32px 18px 32px
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					&:hover
-						> .main > footer > button
-							color #888
-
-					> .avatar-anchor
-						display block
-						width 60px
-						height 60px
-
-						> .avatar
-							display block
-							width 60px
-							height 60px
-							margin 0
-							border-radius 8px
-							vertical-align bottom
-
-					> header
-						position absolute
-						top 28px
-						left 108px
-						width calc(100% - 108px)
-
-						> .name
-							display inline-block
-							margin 0
-							line-height 24px
-							color #777
-							font-size 18px
-							font-weight 700
-							text-align left
-							text-decoration none
-
-							&:hover
-								text-decoration underline
-
-						> .username
-							display block
-							text-align left
-							margin 0
-							color #ccc
-
-						> .time
-							position absolute
-							top 0
-							right 32px
-							font-size 1em
-							color #c0c0c0
-
-					> .body
-						padding 8px 0
-
-						> .text
-							cursor default
-							display block
-							margin 0
-							padding 0
-							overflow-wrap break-word
-							font-size 1.5em
-							color #717171
-
-							> mk-url-preview
-								margin-top 8px
-
-					> footer
-						font-size 1.2em
-
-						> button
-							margin 0 28px 0 0
-							padding 8px
-							background transparent
-							border none
-							font-size 1em
-							color #ddd
-							cursor pointer
-
-							&:hover
-								color #666
-
-							> .count
-								display inline
-								margin 0 0 0 8px
-								color #999
-
-							&.reacted
-								color $theme-color
-
-				> .replies
-					> *
-						border-top 1px solid #eef0f2
-
-	</style>
-	<script lang="typescript">
-		import compile from '../../common/scripts/text-compiler';
-		import dateStringify from '../../common/scripts/date-stringify';
-
-		this.mixin('api');
-		this.mixin('user-preview');
-
-		this.compact = this.opts.compact;
-		this.contextFetching = false;
-		this.context = null;
-		this.post = this.opts.post;
-		this.isRepost = this.post.repost != null;
-		this.p = this.isRepost ? this.post.repost : this.post;
-		this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
-		this.title = dateStringify(this.p.created_at);
-
-		this.on('mount', () => {
-			if (this.p.text) {
-				const tokens = this.p.ast;
-
-				this.$refs.text.innerHTML = compile(tokens);
-
-				Array.from(this.$refs.text.children).forEach(e => {
-					if (e.tagName == 'MK-URL') riot.mount(e);
-				});
-
-				// URLをプレビュー
-				tokens
-				.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-				.map(t => {
-					riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
-						url: t.url
-					});
-				});
-			}
-
-			// Get replies
-			if (!this.compact) {
-				this.api('posts/replies', {
-					post_id: this.p.id,
-					limit: 8
-				}).then(replies => {
-					this.update({
-						replies: replies
-					});
-				});
-			}
-		});
-
-		this.reply = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
-				reply: this.p
-			});
-		};
-
-		this.repost = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-repost-form-window')), {
-				post: this.p
-			});
-		};
-
-		this.react = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
-				source: this.$refs.reactButton,
-				post: this.p
-			});
-		};
-
-		this.menu = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-post-menu')), {
-				source: this.$refs.menuButton,
-				post: this.p
-			});
-		};
-
-		this.loadContext = () => {
-			this.contextFetching = true;
-
-			// Fetch context
-			this.api('posts/context', {
-				post_id: this.p.reply_id
-			}).then(context => {
-				this.update({
-					contextFetching: false,
-					context: context.reverse()
-				});
-			});
-		};
-	</script>
-</mk-post-detail>
diff --git a/src/web/app/desktop/tags/post-form-window.tag b/src/web/app/desktop/tags/post-form-window.tag
deleted file mode 100644
index 562621bde2..0000000000
--- a/src/web/app/desktop/tags/post-form-window.tag
+++ /dev/null
@@ -1,68 +0,0 @@
-<mk-post-form-window>
-	<mk-window ref="window" is-modal={ true }>
-		<yield to="header">
-			<span v-if="!parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.post%</span>
-			<span v-if="parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.reply%</span>
-			<span class="files" v-if="parent.files.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.attaches%'.replace('{}', parent.files.length) }</span>
-			<span class="uploading-files" v-if="parent.uploadingFiles.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.uploading-media%'.replace('{}', parent.uploadingFiles.length) }<mk-ellipsis/></span>
-		</yield>
-		<yield to="content">
-			<div class="ref" v-if="parent.opts.reply">
-				<mk-post-preview post={ parent.opts.reply }/>
-			</div>
-			<div class="body">
-				<mk-post-form ref="form" reply={ parent.opts.reply }/>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-
-				[data-yield='header']
-					> .files
-					> .uploading-files
-						margin-left 8px
-						opacity 0.8
-
-						&:before
-							content '('
-
-						&:after
-							content ')'
-
-				[data-yield='content']
-					> .ref
-						> mk-post-preview
-							margin 16px 22px
-
-	</style>
-	<script lang="typescript">
-		this.uploadingFiles = [];
-		this.files = [];
-
-		this.on('mount', () => {
-			this.$refs.window.refs.form.focus();
-
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-
-			this.$refs.window.refs.form.on('post', () => {
-				this.$refs.window.close();
-			});
-
-			this.$refs.window.refs.form.on('change-uploading-files', files => {
-				this.update({
-					uploadingFiles: files || []
-				});
-			});
-
-			this.$refs.window.refs.form.on('change-files', files => {
-				this.update({
-					files: files || []
-				});
-			});
-		});
-	</script>
-</mk-post-form-window>
diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag
deleted file mode 100644
index ddbb485d99..0000000000
--- a/src/web/app/desktop/tags/post-form.tag
+++ /dev/null
@@ -1,540 +0,0 @@
-<mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
-	<div class="content">
-		<textarea :class="{ with: (files.length != 0 || poll) }" ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea>
-		<div class="medias { with: poll }" show={ files.length != 0 }>
-			<ul ref="media">
-				<li each={ files } data-id={ id }>
-					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
-					<img class="remove" @click="removeFile" src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
-				</li>
-			</ul>
-			<p class="remain">{ 4 - files.length }/4</p>
-		</div>
-		<mk-poll-editor v-if="poll" ref="poll" ondestroy={ onPollDestroyed }/>
-	</div>
-	<mk-uploader ref="uploader"/>
-	<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="selectFile">%fa:upload%</button>
-	<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" @click="selectFileFromDrive">%fa:cloud%</button>
-	<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</button>
-	<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="addPoll">%fa:chart-pie%</button>
-	<p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p>
-	<button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } @click="post">
-		{ wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis v-if="wait"/>
-	</button>
-	<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" onchange={ changeFile }/>
-	<div class="dropzone" v-if="draghover"></div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 16px
-			background lighten($theme-color, 95%)
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .content
-
-				[ref='text']
-					display block
-					padding 12px
-					margin 0
-					width 100%
-					max-width 100%
-					min-width 100%
-					min-height calc(16px + 12px + 12px)
-					font-size 16px
-					color #333
-					background #fff
-					outline none
-					border solid 1px rgba($theme-color, 0.1)
-					border-radius 4px
-					transition border-color .3s ease
-
-					&:hover
-						border-color rgba($theme-color, 0.2)
-						transition border-color .1s ease
-
-						& + *
-						& + * + *
-							border-color rgba($theme-color, 0.2)
-							transition border-color .1s ease
-
-					&:focus
-						color $theme-color
-						border-color rgba($theme-color, 0.5)
-						transition border-color 0s ease
-
-						& + *
-						& + * + *
-							border-color rgba($theme-color, 0.5)
-							transition border-color 0s ease
-
-					&:disabled
-						opacity 0.5
-
-					&::-webkit-input-placeholder
-						color rgba($theme-color, 0.3)
-
-					&.with
-						border-bottom solid 1px rgba($theme-color, 0.1) !important
-						border-radius 4px 4px 0 0
-
-				> .medias
-					margin 0
-					padding 0
-					background lighten($theme-color, 98%)
-					border solid 1px rgba($theme-color, 0.1)
-					border-top none
-					border-radius 0 0 4px 4px
-					transition border-color .3s ease
-
-					&.with
-						border-bottom solid 1px rgba($theme-color, 0.1) !important
-						border-radius 0
-
-					> .remain
-						display block
-						position absolute
-						top 8px
-						right 8px
-						margin 0
-						padding 0
-						color rgba($theme-color, 0.4)
-
-					> ul
-						display block
-						margin 0
-						padding 4px
-						list-style none
-
-						&:after
-							content ""
-							display block
-							clear both
-
-						> li
-							display block
-							float left
-							margin 0
-							padding 0
-							border solid 4px transparent
-							cursor move
-
-							&:hover > .remove
-								display block
-
-							> .img
-								width 64px
-								height 64px
-								background-size cover
-								background-position center center
-
-							> .remove
-								display none
-								position absolute
-								top -6px
-								right -6px
-								width 16px
-								height 16px
-								cursor pointer
-
-				> mk-poll-editor
-					background lighten($theme-color, 98%)
-					border solid 1px rgba($theme-color, 0.1)
-					border-top none
-					border-radius 0 0 4px 4px
-					transition border-color .3s ease
-
-			> mk-uploader
-				margin 8px 0 0 0
-				padding 8px
-				border solid 1px rgba($theme-color, 0.2)
-				border-radius 4px
-
-			[ref='file']
-				display none
-
-			.text-count
-				pointer-events none
-				display block
-				position absolute
-				bottom 16px
-				right 138px
-				margin 0
-				line-height 40px
-				color rgba($theme-color, 0.5)
-
-				&.over
-					color #ec3828
-
-			[ref='submit']
-				display block
-				position absolute
-				bottom 16px
-				right 16px
-				cursor pointer
-				padding 0
-				margin 0
-				width 110px
-				height 40px
-				font-size 1em
-				color $theme-color-foreground
-				background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-				outline none
-				border solid 1px lighten($theme-color, 15%)
-				border-radius 4px
-
-				&:not(:disabled)
-					font-weight bold
-
-				&:hover:not(:disabled)
-					background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-					border-color $theme-color
-
-				&:active:not(:disabled)
-					background $theme-color
-					border-color $theme-color
-
-				&:focus
-					&:after
-						content ""
-						pointer-events none
-						position absolute
-						top -5px
-						right -5px
-						bottom -5px
-						left -5px
-						border 2px solid rgba($theme-color, 0.3)
-						border-radius 8px
-
-				&:disabled
-					opacity 0.7
-					cursor default
-
-				&.wait
-					background linear-gradient(
-						45deg,
-						darken($theme-color, 10%) 25%,
-						$theme-color              25%,
-						$theme-color              50%,
-						darken($theme-color, 10%) 50%,
-						darken($theme-color, 10%) 75%,
-						$theme-color              75%,
-						$theme-color
-					)
-					background-size 32px 32px
-					animation stripe-bg 1.5s linear infinite
-					opacity 0.7
-					cursor wait
-
-					@keyframes stripe-bg
-						from {background-position: 0 0;}
-						to   {background-position: -64px 32px;}
-
-			[ref='upload']
-			[ref='drive']
-			.kao
-			.poll
-				display inline-block
-				cursor pointer
-				padding 0
-				margin 8px 4px 0 0
-				width 40px
-				height 40px
-				font-size 1em
-				color rgba($theme-color, 0.5)
-				background transparent
-				outline none
-				border solid 1px transparent
-				border-radius 4px
-
-				&:hover
-					background transparent
-					border-color rgba($theme-color, 0.3)
-
-				&:active
-					color rgba($theme-color, 0.6)
-					background linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
-					border-color rgba($theme-color, 0.5)
-					box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset
-
-				&:focus
-					&:after
-						content ""
-						pointer-events none
-						position absolute
-						top -5px
-						right -5px
-						bottom -5px
-						left -5px
-						border 2px solid rgba($theme-color, 0.3)
-						border-radius 8px
-
-			> .dropzone
-				position absolute
-				left 0
-				top 0
-				width 100%
-				height 100%
-				border dashed 2px rgba($theme-color, 0.5)
-				pointer-events none
-
-	</style>
-	<script lang="typescript">
-		import Sortable from 'sortablejs';
-		import getKao from '../../common/scripts/get-kao';
-		import notify from '../scripts/notify';
-		import Autocomplete from '../scripts/autocomplete';
-
-		this.mixin('api');
-
-		this.wait = false;
-		this.uploadings = [];
-		this.files = [];
-		this.autocomplete = null;
-		this.poll = false;
-
-		this.inReplyToPost = this.opts.reply;
-
-		this.repost = this.opts.repost;
-
-		this.placeholder = this.repost
-			? '%i18n:desktop.tags.mk-post-form.quote-placeholder%'
-			: this.inReplyToPost
-				? '%i18n:desktop.tags.mk-post-form.reply-placeholder%'
-				: '%i18n:desktop.tags.mk-post-form.post-placeholder%';
-
-		this.submitText = this.repost
-			? '%i18n:desktop.tags.mk-post-form.repost%'
-			: this.inReplyToPost
-				? '%i18n:desktop.tags.mk-post-form.reply%'
-				: '%i18n:desktop.tags.mk-post-form.post%';
-
-		this.draftId = this.repost
-			? 'repost:' + this.repost.id
-			: this.inReplyToPost
-				? 'reply:' + this.inReplyToPost.id
-				: 'post';
-
-		this.on('mount', () => {
-			this.$refs.uploader.on('uploaded', file => {
-				this.addFile(file);
-			});
-
-			this.$refs.uploader.on('change-uploads', uploads => {
-				this.$emit('change-uploading-files', uploads);
-			});
-
-			this.autocomplete = new Autocomplete(this.$refs.text);
-			this.autocomplete.attach();
-
-			// 書きかけの投稿を復元
-			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
-			if (draft) {
-				this.$refs.text.value = draft.data.text;
-				this.files = draft.data.files;
-				if (draft.data.poll) {
-					this.poll = true;
-					this.update();
-					this.$refs.poll.set(draft.data.poll);
-				}
-				this.$emit('change-files', this.files);
-				this.update();
-			}
-
-			new Sortable(this.$refs.media, {
-				animation: 150
-			});
-		});
-
-		this.on('unmount', () => {
-			this.autocomplete.detach();
-		});
-
-		this.focus = () => {
-			this.$refs.text.focus();
-		};
-
-		this.clear = () => {
-			this.$refs.text.value = '';
-			this.files = [];
-			this.poll = false;
-			this.$emit('change-files');
-			this.update();
-		};
-
-		this.ondragover = e => {
-			e.preventDefault();
-			e.stopPropagation();
-			this.draghover = true;
-			e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
-		};
-
-		this.ondragenter = e => {
-			this.draghover = true;
-		};
-
-		this.ondragleave = e => {
-			this.draghover = false;
-		};
-
-		this.ondrop = e => {
-			e.preventDefault();
-			e.stopPropagation();
-			this.draghover = false;
-
-			// ファイルだったら
-			if (e.dataTransfer.files.length > 0) {
-				Array.from(e.dataTransfer.files).forEach(this.upload);
-				return;
-			}
-
-			// データ取得
-			const data = e.dataTransfer.getData('text');
-			if (data == null) return false;
-
-			try {
-				// パース
-				const obj = JSON.parse(data);
-
-				// (ドライブの)ファイルだったら
-				if (obj.type == 'file') {
-					this.files.push(obj.file);
-					this.update();
-				}
-			} catch (e) {
-
-			}
-		};
-
-		this.onkeydown = e => {
-			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
-		};
-
-		this.onpaste = e => {
-			Array.from(e.clipboardData.items).forEach(item => {
-				if (item.kind == 'file') {
-					this.upload(item.getAsFile());
-				}
-			});
-		};
-
-		this.selectFile = () => {
-			this.$refs.file.click();
-		};
-
-		this.selectFileFromDrive = () => {
-			const i = riot.mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), {
-				multiple: true
-			})[0];
-			i.one('selected', files => {
-				files.forEach(this.addFile);
-			});
-		};
-
-		this.changeFile = () => {
-			Array.from(this.$refs.file.files).forEach(this.upload);
-		};
-
-		this.upload = file => {
-			this.$refs.uploader.upload(file);
-		};
-
-		this.addFile = file => {
-			this.files.push(file);
-			this.$emit('change-files', this.files);
-			this.update();
-		};
-
-		this.removeFile = e => {
-			const file = e.item;
-			this.files = this.files.filter(x => x.id != file.id);
-			this.$emit('change-files', this.files);
-			this.update();
-		};
-
-		this.addPoll = () => {
-			this.poll = true;
-		};
-
-		this.onPollDestroyed = () => {
-			this.update({
-				poll: false
-			});
-		};
-
-		this.post = e => {
-			this.wait = true;
-
-			const files = [];
-
-			if (this.files.length > 0) {
-				Array.from(this.$refs.media.children).forEach(el => {
-					const id = el.getAttribute('data-id');
-					const file = this.files.find(f => f.id == id);
-					files.push(file);
-				});
-			}
-
-			this.api('posts/create', {
-				text: this.$refs.text.value == '' ? undefined : this.$refs.text.value,
-				media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined,
-				reply_id: this.inReplyToPost ? this.inReplyToPost.id : undefined,
-				repost_id: this.repost ? this.repost.id : undefined,
-				poll: this.poll ? this.$refs.poll.get() : undefined
-			}).then(data => {
-				this.clear();
-				this.removeDraft();
-				this.$emit('post');
-				notify(this.repost
-					? '%i18n:desktop.tags.mk-post-form.reposted%'
-					: this.inReplyToPost
-						? '%i18n:desktop.tags.mk-post-form.replied%'
-						: '%i18n:desktop.tags.mk-post-form.posted%');
-			}).catch(err => {
-				notify(this.repost
-					? '%i18n:desktop.tags.mk-post-form.repost-failed%'
-					: this.inReplyToPost
-						? '%i18n:desktop.tags.mk-post-form.reply-failed%'
-						: '%i18n:desktop.tags.mk-post-form.post-failed%');
-			}).then(() => {
-				this.update({
-					wait: false
-				});
-			});
-		};
-
-		this.kao = () => {
-			this.$refs.text.value += getKao();
-		};
-
-		this.on('update', () => {
-			this.saveDraft();
-		});
-
-		this.saveDraft = () => {
-			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
-
-			data[this.draftId] = {
-				updated_at: new Date(),
-				data: {
-					text: this.$refs.text.value,
-					files: this.files,
-					poll: this.poll && this.$refs.poll ? this.$refs.poll.get() : undefined
-				}
-			}
-
-			localStorage.setItem('drafts', JSON.stringify(data));
-		};
-
-		this.removeDraft = () => {
-			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
-
-			delete data[this.draftId];
-
-			localStorage.setItem('drafts', JSON.stringify(data));
-		};
-	</script>
-</mk-post-form>
diff --git a/src/web/app/desktop/tags/post-preview.tag b/src/web/app/desktop/tags/post-preview.tag
deleted file mode 100644
index eb71e5e879..0000000000
--- a/src/web/app/desktop/tags/post-preview.tag
+++ /dev/null
@@ -1,94 +0,0 @@
-<mk-post-preview title={ title }>
-	<article><a class="avatar-anchor" href={ '/' + post.user.username }><img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ post.user_id }/></a>
-		<div class="main">
-			<header><a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a><span class="username">@{ post.user.username }</span><a class="time" href={ '/' + post.user.username + '/' + post.id }>
-					<mk-time time={ post.created_at }/></a></header>
-			<div class="body">
-				<mk-sub-post-content class="text" post={ post }/>
-			</div>
-		</div>
-	</article>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 0
-			font-size 0.9em
-			background #fff
-
-			> article
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				&:hover
-					> .main > footer > button
-						color #888
-
-				> .avatar-anchor
-					display block
-					float left
-					margin 0 16px 0 0
-
-					> .avatar
-						display block
-						width 52px
-						height 52px
-						margin 0
-						border-radius 8px
-						vertical-align bottom
-
-				> .main
-					float left
-					width calc(100% - 68px)
-
-					> header
-						display flex
-						margin 4px 0
-						white-space nowrap
-
-						> .name
-							margin 0 .5em 0 0
-							padding 0
-							color #607073
-							font-size 1em
-							line-height 1.1em
-							font-weight 700
-							text-align left
-							text-decoration none
-							white-space normal
-
-							&:hover
-								text-decoration underline
-
-						> .username
-							text-align left
-							margin 0 .5em 0 0
-							color #d1d8da
-
-						> .time
-							margin-left auto
-							color #b2b8bb
-
-					> .body
-
-						> .text
-							cursor default
-							margin 0
-							padding 0
-							font-size 1.1em
-							color #717171
-
-	</style>
-	<script lang="typescript">
-		import dateStringify from '../../common/scripts/date-stringify';
-
-		this.mixin('user-preview');
-
-		this.post = this.opts.post;
-
-		this.title = dateStringify(this.post.created_at);
-	</script>
-</mk-post-preview>
diff --git a/src/web/app/desktop/tags/progress-dialog.tag b/src/web/app/desktop/tags/progress-dialog.tag
deleted file mode 100644
index 5df5d7f57a..0000000000
--- a/src/web/app/desktop/tags/progress-dialog.tag
+++ /dev/null
@@ -1,97 +0,0 @@
-<mk-progress-dialog>
-	<mk-window ref="window" is-modal={ false } can-close={ false } width={ '500px' }>
-		<yield to="header">{ parent.title }<mk-ellipsis/></yield>
-		<yield to="content">
-			<div class="body">
-				<p class="init" v-if="isNaN(parent.value)">待機中<mk-ellipsis/></p>
-				<p class="percentage" v-if="!isNaN(parent.value)">{ Math.floor((parent.value / parent.max) * 100) }</p>
-				<progress v-if="!isNaN(parent.value) && parent.value < parent.max" value={ isNaN(parent.value) ? 0 : parent.value } max={ parent.max }></progress>
-				<div class="progress waiting" v-if="parent.value >= parent.max"></div>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> mk-window
-				[data-yield='content']
-
-					> .body
-						padding 18px 24px 24px 24px
-
-						> .init
-							display block
-							margin 0
-							text-align center
-							color rgba(#000, 0.7)
-
-						> .percentage
-							display block
-							margin 0 0 4px 0
-							text-align center
-							line-height 16px
-							color rgba($theme-color, 0.7)
-
-							&:after
-								content '%'
-
-						> progress
-						> .progress
-							display block
-							margin 0
-							width 100%
-							height 10px
-							background transparent
-							border none
-							border-radius 4px
-							overflow hidden
-
-							&::-webkit-progress-value
-								background $theme-color
-
-							&::-webkit-progress-bar
-								background rgba($theme-color, 0.1)
-
-						> .progress
-							background linear-gradient(
-								45deg,
-								lighten($theme-color, 30%) 25%,
-								$theme-color               25%,
-								$theme-color               50%,
-								lighten($theme-color, 30%) 50%,
-								lighten($theme-color, 30%) 75%,
-								$theme-color               75%,
-								$theme-color
-							)
-							background-size 32px 32px
-							animation progress-dialog-tag-progress-waiting 1.5s linear infinite
-
-							@keyframes progress-dialog-tag-progress-waiting
-								from {background-position: 0 0;}
-								to   {background-position: -64px 32px;}
-
-	</style>
-	<script lang="typescript">
-		this.title = this.opts.title;
-		this.value = parseInt(this.opts.value, 10);
-		this.max = parseInt(this.opts.max, 10);
-
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-
-		this.updateProgress = (value, max) => {
-			this.update({
-				value: parseInt(value, 10),
-				max: parseInt(max, 10)
-			});
-		};
-
-		this.close = () => {
-			this.$refs.window.close();
-		};
-	</script>
-</mk-progress-dialog>
diff --git a/src/web/app/desktop/tags/repost-form-window.tag b/src/web/app/desktop/tags/repost-form-window.tag
deleted file mode 100644
index 25f509c626..0000000000
--- a/src/web/app/desktop/tags/repost-form-window.tag
+++ /dev/null
@@ -1,47 +0,0 @@
-<mk-repost-form-window>
-	<mk-window ref="window" is-modal={ true }>
-		<yield to="header">
-			%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%
-		</yield>
-		<yield to="content">
-			<mk-repost-form ref="form" post={ parent.opts.post }/>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.onDocumentKeydown = e => {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 27) { // Esc
-					this.$refs.window.close();
-				}
-			}
-		};
-
-		this.on('mount', () => {
-			this.$refs.window.refs.form.on('cancel', () => {
-				this.$refs.window.close();
-			});
-
-			this.$refs.window.refs.form.on('posted', () => {
-				this.$refs.window.close();
-			});
-
-			document.addEventListener('keydown', this.onDocumentKeydown);
-
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-
-		this.on('unmount', () => {
-			document.removeEventListener('keydown', this.onDocumentKeydown);
-		});
-	</script>
-</mk-repost-form-window>
diff --git a/src/web/app/desktop/tags/repost-form.tag b/src/web/app/desktop/tags/repost-form.tag
deleted file mode 100644
index afe555b6d6..0000000000
--- a/src/web/app/desktop/tags/repost-form.tag
+++ /dev/null
@@ -1,127 +0,0 @@
-<mk-repost-form>
-	<mk-post-preview post={ opts.post }/>
-	<template v-if="!quote">
-		<footer>
-			<a class="quote" v-if="!quote" @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a>
-			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
-			<button class="ok" @click="ok" disabled={ wait }>{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }</button>
-		</footer>
-	</template>
-	<template v-if="quote">
-		<mk-post-form ref="form" repost={ opts.post }/>
-	</template>
-	<style lang="stylus" scoped>
-		:scope
-
-			> mk-post-preview
-				margin 16px 22px
-
-			> div
-				padding 16px
-
-			> footer
-				height 72px
-				background lighten($theme-color, 95%)
-
-				> .quote
-					position absolute
-					bottom 16px
-					left 28px
-					line-height 40px
-
-				button
-					display block
-					position absolute
-					bottom 16px
-					cursor pointer
-					padding 0
-					margin 0
-					width 120px
-					height 40px
-					font-size 1em
-					outline none
-					border-radius 4px
-
-					&:focus
-						&:after
-							content ""
-							pointer-events none
-							position absolute
-							top -5px
-							right -5px
-							bottom -5px
-							left -5px
-							border 2px solid rgba($theme-color, 0.3)
-							border-radius 8px
-
-				> .cancel
-					right 148px
-					color #888
-					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-					border solid 1px #e2e2e2
-
-					&:hover
-						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-						border-color #dcdcdc
-
-					&:active
-						background #ececec
-						border-color #dcdcdc
-
-				> .ok
-					right 16px
-					font-weight bold
-					color $theme-color-foreground
-					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-					border solid 1px lighten($theme-color, 15%)
-
-					&:hover
-						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-						border-color $theme-color
-
-					&:active
-						background $theme-color
-						border-color $theme-color
-
-	</style>
-	<script lang="typescript">
-		import notify from '../scripts/notify';
-
-		this.mixin('api');
-
-		this.wait = false;
-		this.quote = false;
-
-		this.cancel = () => {
-			this.$emit('cancel');
-		};
-
-		this.ok = () => {
-			this.wait = true;
-			this.api('posts/create', {
-				repost_id: this.opts.post.id
-			}).then(data => {
-				this.$emit('posted');
-				notify('%i18n:desktop.tags.mk-repost-form.success%');
-			}).catch(err => {
-				notify('%i18n:desktop.tags.mk-repost-form.failure%');
-			}).then(() => {
-				this.update({
-					wait: false
-				});
-			});
-		};
-
-		this.onquote = () => {
-			this.update({
-				quote: true
-			});
-
-			this.$refs.form.on('post', () => {
-				this.$emit('posted');
-			});
-
-			this.$refs.form.focus();
-		};
-	</script>
-</mk-repost-form>
diff --git a/src/web/app/desktop/tags/search-posts.tag b/src/web/app/desktop/tags/search-posts.tag
deleted file mode 100644
index 52c68b754c..0000000000
--- a/src/web/app/desktop/tags/search-posts.tag
+++ /dev/null
@@ -1,96 +0,0 @@
-<mk-search-posts>
-	<div class="loading" v-if="isLoading">
-		<mk-ellipsis-icon/>
-	</div>
-	<p class="empty" v-if="isEmpty">%fa:search%「{ query }」に関する投稿は見つかりませんでした。</p>
-	<mk-timeline ref="timeline">
-		<yield to="footer">
-			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
-		</yield/>
-	</mk-timeline>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-
-			> .loading
-				padding 64px 0
-
-			> .empty
-				display block
-				margin 0 auto
-				padding 32px
-				max-width 400px
-				text-align center
-				color #999
-
-				> [data-fa]
-					display block
-					margin-bottom 16px
-					font-size 3em
-					color #ccc
-
-	</style>
-	<script lang="typescript">
-		import parse from '../../common/scripts/parse-search-query';
-
-		this.mixin('api');
-
-		this.query = this.opts.query;
-		this.isLoading = true;
-		this.isEmpty = false;
-		this.moreLoading = false;
-		this.limit = 30;
-		this.offset = 0;
-
-		this.on('mount', () => {
-			document.addEventListener('keydown', this.onDocumentKeydown);
-			window.addEventListener('scroll', this.onScroll);
-
-			this.api('posts/search', parse(this.query)).then(posts => {
-				this.update({
-					isLoading: false,
-					isEmpty: posts.length == 0
-				});
-				this.$refs.timeline.setPosts(posts);
-				this.$emit('loaded');
-			});
-		});
-
-		this.on('unmount', () => {
-			document.removeEventListener('keydown', this.onDocumentKeydown);
-			window.removeEventListener('scroll', this.onScroll);
-		});
-
-		this.onDocumentKeydown = e => {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 84) { // t
-					this.$refs.timeline.focus();
-				}
-			}
-		};
-
-		this.more = () => {
-			if (this.moreLoading || this.isLoading || this.timeline.posts.length == 0) return;
-			this.offset += this.limit;
-			this.update({
-				moreLoading: true
-			});
-			return this.api('posts/search', Object.assign({}, parse(this.query), {
-				limit: this.limit,
-				offset: this.offset
-			})).then(posts => {
-				this.update({
-					moreLoading: false
-				});
-				this.$refs.timeline.prependPosts(posts);
-			});
-		};
-
-		this.onScroll = () => {
-			const current = window.scrollY + window.innerHeight;
-			if (current > document.body.offsetHeight - 16) this.more();
-		};
-	</script>
-</mk-search-posts>
diff --git a/src/web/app/desktop/tags/search.tag b/src/web/app/desktop/tags/search.tag
deleted file mode 100644
index 28127b721b..0000000000
--- a/src/web/app/desktop/tags/search.tag
+++ /dev/null
@@ -1,34 +0,0 @@
-<mk-search>
-	<header>
-		<h1>{ query }</h1>
-	</header>
-	<mk-search-posts ref="posts" query={ query }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding-bottom 32px
-
-			> header
-				width 100%
-				max-width 600px
-				margin 0 auto
-				color #555
-
-			> mk-search-posts
-				max-width 600px
-				margin 0 auto
-				border solid 1px rgba(0, 0, 0, 0.075)
-				border-radius 6px
-				overflow hidden
-
-	</style>
-	<script lang="typescript">
-		this.query = this.opts.query;
-
-		this.on('mount', () => {
-			this.$refs.posts.on('loaded', () => {
-				this.$emit('loaded');
-			});
-		});
-	</script>
-</mk-search>
diff --git a/src/web/app/desktop/tags/select-file-from-drive-window.tag b/src/web/app/desktop/tags/select-file-from-drive-window.tag
deleted file mode 100644
index d6234d5fd9..0000000000
--- a/src/web/app/desktop/tags/select-file-from-drive-window.tag
+++ /dev/null
@@ -1,173 +0,0 @@
-<mk-select-file-from-drive-window>
-	<mk-window ref="window" is-modal={ true } width={ '800px' } height={ '500px' }>
-		<yield to="header">
-			<mk-raw content={ parent.title }/>
-			<span class="count" v-if="parent.multiple && parent.files.length > 0">({ parent.files.length }ファイル選択中)</span>
-		</yield>
-		<yield to="content">
-			<mk-drive-browser ref="browser" multiple={ parent.multiple }/>
-			<div>
-				<button class="upload" title="PCからドライブにファイルをアップロード" @click="parent.upload">%fa:upload%</button>
-				<button class="cancel" @click="parent.close">キャンセル</button>
-				<button class="ok" disabled={ parent.multiple && parent.files.length == 0 } @click="parent.ok">決定</button>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> mk-raw
-						> [data-fa]
-							margin-right 4px
-
-					.count
-						margin-left 8px
-						opacity 0.7
-
-				[data-yield='content']
-					> mk-drive-browser
-						height calc(100% - 72px)
-
-					> div
-						height 72px
-						background lighten($theme-color, 95%)
-
-						> .upload
-							display inline-block
-							position absolute
-							top 8px
-							left 16px
-							cursor pointer
-							padding 0
-							margin 8px 4px 0 0
-							width 40px
-							height 40px
-							font-size 1em
-							color rgba($theme-color, 0.5)
-							background transparent
-							outline none
-							border solid 1px transparent
-							border-radius 4px
-
-							&:hover
-								background transparent
-								border-color rgba($theme-color, 0.3)
-
-							&:active
-								color rgba($theme-color, 0.6)
-								background transparent
-								border-color rgba($theme-color, 0.5)
-								box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
-
-							&:focus
-								&:after
-									content ""
-									pointer-events none
-									position absolute
-									top -5px
-									right -5px
-									bottom -5px
-									left -5px
-									border 2px solid rgba($theme-color, 0.3)
-									border-radius 8px
-
-						> .ok
-						> .cancel
-							display block
-							position absolute
-							bottom 16px
-							cursor pointer
-							padding 0
-							margin 0
-							width 120px
-							height 40px
-							font-size 1em
-							outline none
-							border-radius 4px
-
-							&:focus
-								&:after
-									content ""
-									pointer-events none
-									position absolute
-									top -5px
-									right -5px
-									bottom -5px
-									left -5px
-									border 2px solid rgba($theme-color, 0.3)
-									border-radius 8px
-
-							&:disabled
-								opacity 0.7
-								cursor default
-
-						> .ok
-							right 16px
-							color $theme-color-foreground
-							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-							border solid 1px lighten($theme-color, 15%)
-
-							&:not(:disabled)
-								font-weight bold
-
-							&:hover:not(:disabled)
-								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-								border-color $theme-color
-
-							&:active:not(:disabled)
-								background $theme-color
-								border-color $theme-color
-
-						> .cancel
-							right 148px
-							color #888
-							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-							border solid 1px #e2e2e2
-
-							&:hover
-								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-								border-color #dcdcdc
-
-							&:active
-								background #ececec
-								border-color #dcdcdc
-
-	</style>
-	<script lang="typescript">
-		this.files = [];
-
-		this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
-		this.title = this.opts.title || '%fa:R file%ファイルを選択';
-
-		this.on('mount', () => {
-			this.$refs.window.refs.browser.on('selected', file => {
-				this.files = [file];
-				this.ok();
-			});
-
-			this.$refs.window.refs.browser.on('change-selection', files => {
-				this.update({
-					files: files
-				});
-			});
-
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-
-		this.close = () => {
-			this.$refs.window.close();
-		};
-
-		this.upload = () => {
-			this.$refs.window.refs.browser.selectLocalFile();
-		};
-
-		this.ok = () => {
-			this.$emit('selected', this.multiple ? this.files : this.files[0]);
-			this.$refs.window.close();
-		};
-	</script>
-</mk-select-file-from-drive-window>
diff --git a/src/web/app/desktop/tags/select-folder-from-drive-window.tag b/src/web/app/desktop/tags/select-folder-from-drive-window.tag
deleted file mode 100644
index 2f98f30a63..0000000000
--- a/src/web/app/desktop/tags/select-folder-from-drive-window.tag
+++ /dev/null
@@ -1,112 +0,0 @@
-<mk-select-folder-from-drive-window>
-	<mk-window ref="window" is-modal={ true } width={ '800px' } height={ '500px' }>
-		<yield to="header">
-			<mk-raw content={ parent.title }/>
-		</yield>
-		<yield to="content">
-			<mk-drive-browser ref="browser"/>
-			<div>
-				<button class="cancel" @click="parent.close">キャンセル</button>
-				<button class="ok" @click="parent.ok">決定</button>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> mk-raw
-						> [data-fa]
-							margin-right 4px
-
-				[data-yield='content']
-					> mk-drive-browser
-						height calc(100% - 72px)
-
-					> div
-						height 72px
-						background lighten($theme-color, 95%)
-
-						.ok
-						.cancel
-							display block
-							position absolute
-							bottom 16px
-							cursor pointer
-							padding 0
-							margin 0
-							width 120px
-							height 40px
-							font-size 1em
-							outline none
-							border-radius 4px
-
-							&:focus
-								&:after
-									content ""
-									pointer-events none
-									position absolute
-									top -5px
-									right -5px
-									bottom -5px
-									left -5px
-									border 2px solid rgba($theme-color, 0.3)
-									border-radius 8px
-
-							&:disabled
-								opacity 0.7
-								cursor default
-
-						.ok
-							right 16px
-							color $theme-color-foreground
-							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-							border solid 1px lighten($theme-color, 15%)
-
-							&:not(:disabled)
-								font-weight bold
-
-							&:hover:not(:disabled)
-								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-								border-color $theme-color
-
-							&:active:not(:disabled)
-								background $theme-color
-								border-color $theme-color
-
-						.cancel
-							right 148px
-							color #888
-							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-							border solid 1px #e2e2e2
-
-							&:hover
-								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-								border-color #dcdcdc
-
-							&:active
-								background #ececec
-								border-color #dcdcdc
-
-	</style>
-	<script lang="typescript">
-		this.files = [];
-
-		this.title = this.opts.title || '%fa:R folder%フォルダを選択';
-
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-
-		this.close = () => {
-			this.$refs.window.close();
-		};
-
-		this.ok = () => {
-			this.$emit('selected', this.$refs.window.refs.browser.folder);
-			this.$refs.window.close();
-		};
-	</script>
-</mk-select-folder-from-drive-window>
diff --git a/src/web/app/desktop/tags/set-avatar-suggestion.tag b/src/web/app/desktop/tags/set-avatar-suggestion.tag
deleted file mode 100644
index e67a8c66d4..0000000000
--- a/src/web/app/desktop/tags/set-avatar-suggestion.tag
+++ /dev/null
@@ -1,48 +0,0 @@
-<mk-set-avatar-suggestion @click="set">
-	<p><b>アバターを設定</b>してみませんか？
-		<button @click="close">%fa:times%</button>
-	</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			cursor pointer
-			color #fff
-			background #a8cad0
-
-			&:hover
-				background #70abb5
-
-			> p
-				display block
-				margin 0 auto
-				padding 8px
-				max-width 1024px
-
-				> a
-					font-weight bold
-					color #fff
-
-				> button
-					position absolute
-					top 0
-					right 0
-					padding 8px
-					color #fff
-
-	</style>
-	<script lang="typescript">
-		import updateAvatar from '../scripts/update-avatar';
-
-		this.mixin('i');
-
-		this.set = () => {
-			updateAvatar(this.I);
-		};
-
-		this.close = e => {
-			e.preventDefault();
-			e.stopPropagation();
-			this.$destroy();
-		};
-	</script>
-</mk-set-avatar-suggestion>
diff --git a/src/web/app/desktop/tags/set-banner-suggestion.tag b/src/web/app/desktop/tags/set-banner-suggestion.tag
deleted file mode 100644
index 0d32c9a0e3..0000000000
--- a/src/web/app/desktop/tags/set-banner-suggestion.tag
+++ /dev/null
@@ -1,48 +0,0 @@
-<mk-set-banner-suggestion @click="set">
-	<p><b>バナーを設定</b>してみませんか？
-		<button @click="close">%fa:times%</button>
-	</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			cursor pointer
-			color #fff
-			background #a8cad0
-
-			&:hover
-				background #70abb5
-
-			> p
-				display block
-				margin 0 auto
-				padding 8px
-				max-width 1024px
-
-				> a
-					font-weight bold
-					color #fff
-
-				> button
-					position absolute
-					top 0
-					right 0
-					padding 8px
-					color #fff
-
-	</style>
-	<script lang="typescript">
-		import updateBanner from '../scripts/update-banner';
-
-		this.mixin('i');
-
-		this.set = () => {
-			updateBanner(this.I);
-		};
-
-		this.close = e => {
-			e.preventDefault();
-			e.stopPropagation();
-			this.$destroy();
-		};
-	</script>
-</mk-set-banner-suggestion>
diff --git a/src/web/app/desktop/tags/settings-window.tag b/src/web/app/desktop/tags/settings-window.tag
deleted file mode 100644
index 094225f61f..0000000000
--- a/src/web/app/desktop/tags/settings-window.tag
+++ /dev/null
@@ -1,30 +0,0 @@
-<mk-settings-window>
-	<mk-window ref="window" is-modal={ true } width={ '700px' } height={ '550px' }>
-		<yield to="header">%fa:cog%設定</yield>
-		<yield to="content">
-			<mk-settings/>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-					overflow hidden
-
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-
-		this.close = () => {
-			this.$refs.window.close();
-		};
-	</script>
-</mk-settings-window>
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
deleted file mode 100644
index 4bf210cef4..0000000000
--- a/src/web/app/desktop/tags/settings.tag
+++ /dev/null
@@ -1,426 +0,0 @@
-<mk-settings>
-	<div class="nav">
-		<p :class="{ active: page == 'profile' }" onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
-		<p :class="{ active: page == 'web' }" onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
-		<p :class="{ active: page == 'notification' }" onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
-		<p :class="{ active: page == 'drive' }" onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p>
-		<p :class="{ active: page == 'mute' }" onmousedown={ setPage.bind(null, 'mute') }>%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p>
-		<p :class="{ active: page == 'apps' }" onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
-		<p :class="{ active: page == 'twitter' }" onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
-		<p :class="{ active: page == 'security' }" onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
-		<p :class="{ active: page == 'api' }" onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
-		<p :class="{ active: page == 'other' }" onmousedown={ setPage.bind(null, 'other') }>%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p>
-	</div>
-	<div class="pages">
-		<section class="profile" show={ page == 'profile' }>
-			<h1>%i18n:desktop.tags.mk-settings.profile%</h1>
-			<mk-profile-setting/>
-		</section>
-
-		<section class="web" show={ page == 'web' }>
-			<h1>デザイン</h1>
-			<a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
-		</section>
-
-		<section class="drive" show={ page == 'drive' }>
-			<h1>%i18n:desktop.tags.mk-settings.drive%</h1>
-			<mk-drive-setting/>
-		</section>
-
-		<section class="mute" show={ page == 'mute' }>
-			<h1>%i18n:desktop.tags.mk-settings.mute%</h1>
-			<mk-mute-setting/>
-		</section>
-
-		<section class="apps" show={ page == 'apps' }>
-			<h1>アプリケーション</h1>
-			<mk-authorized-apps/>
-		</section>
-
-		<section class="twitter" show={ page == 'twitter' }>
-			<h1>Twitter</h1>
-			<mk-twitter-setting/>
-		</section>
-
-		<section class="password" show={ page == 'security' }>
-			<h1>%i18n:desktop.tags.mk-settings.password%</h1>
-			<mk-password-setting/>
-		</section>
-
-		<section class="2fa" show={ page == 'security' }>
-			<h1>%i18n:desktop.tags.mk-settings.2fa%</h1>
-			<mk-2fa-setting/>
-		</section>
-
-		<section class="signin" show={ page == 'security' }>
-			<h1>サインイン履歴</h1>
-			<mk-signin-history/>
-		</section>
-
-		<section class="api" show={ page == 'api' }>
-			<h1>API</h1>
-			<mk-api-info/>
-		</section>
-
-		<section class="other" show={ page == 'other' }>
-			<h1>%i18n:desktop.tags.mk-settings.license%</h1>
-			%license%
-		</section>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display flex
-			width 100%
-			height 100%
-
-			> .nav
-				flex 0 0 200px
-				width 100%
-				height 100%
-				padding 16px 0 0 0
-				overflow auto
-				border-right solid 1px #ddd
-
-				> p
-					display block
-					padding 10px 16px
-					margin 0
-					color #666
-					cursor pointer
-					user-select none
-					transition margin-left 0.2s ease
-
-					> [data-fa]
-						margin-right 4px
-
-					&:hover
-						color #555
-
-					&.active
-						margin-left 8px
-						color $theme-color !important
-
-			> .pages
-				width 100%
-				height 100%
-				flex auto
-				overflow auto
-
-				> section
-					margin 32px
-					color #4a535a
-
-					> h1
-						display block
-						margin 0 0 1em 0
-						padding 0 0 8px 0
-						font-size 1em
-						color #555
-						border-bottom solid 1px #eee
-
-	</style>
-	<script lang="typescript">
-		this.page = 'profile';
-
-		this.setPage = page => {
-			this.page = page;
-		};
-	</script>
-</mk-settings>
-
-<mk-profile-setting>
-	<label class="avatar ui from group">
-		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
-		<button class="ui" @click="avatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button>
-	</label>
-	<label class="ui from group">
-		<p>%i18n:desktop.tags.mk-profile-setting.name%</p>
-		<input ref="accountName" type="text" value={ I.name } class="ui"/>
-	</label>
-	<label class="ui from group">
-		<p>%i18n:desktop.tags.mk-profile-setting.location%</p>
-		<input ref="accountLocation" type="text" value={ I.profile.location } class="ui"/>
-	</label>
-	<label class="ui from group">
-		<p>%i18n:desktop.tags.mk-profile-setting.description%</p>
-		<textarea ref="accountDescription" class="ui">{ I.description }</textarea>
-	</label>
-	<label class="ui from group">
-		<p>%i18n:desktop.tags.mk-profile-setting.birthday%</p>
-		<input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/>
-	</label>
-	<button class="ui primary" @click="updateAccount">%i18n:desktop.tags.mk-profile-setting.save%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .avatar
-				> img
-					display inline-block
-					vertical-align top
-					width 64px
-					height 64px
-					border-radius 4px
-
-				> button
-					margin-left 8px
-
-	</style>
-	<script lang="typescript">
-		import updateAvatar from '../scripts/update-avatar';
-		import notify from '../scripts/notify';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.avatar = () => {
-			updateAvatar(this.I);
-		};
-
-		this.updateAccount = () => {
-			this.api('i/update', {
-				name: this.$refs.accountName.value,
-				location: this.$refs.accountLocation.value || null,
-				description: this.$refs.accountDescription.value || null,
-				birthday: this.$refs.accountBirthday.value || null
-			}).then(() => {
-				notify('プロフィールを更新しました');
-			});
-		};
-	</script>
-</mk-profile-setting>
-
-<mk-api-info>
-	<p>Token: <code>{ I.token }</code></p>
-	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
-	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
-	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
-	<button class="ui" @click="regenerateToken">%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #4a535a
-
-			code
-				display inline-block
-				padding 4px 6px
-				color #555
-				background #eee
-				border-radius 2px
-	</style>
-	<script lang="typescript">
-		import passwordDialog from '../scripts/password-dialog';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.regenerateToken = () => {
-			passwordDialog('%i18n:desktop.tags.mk-api-info.enter-password%', password => {
-				this.api('i/regenerate_token', {
-					password: password
-				});
-			});
-		};
-	</script>
-</mk-api-info>
-
-<mk-password-setting>
-	<button @click="reset" class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #4a535a
-	</style>
-	<script lang="typescript">
-		import passwordDialog from '../scripts/password-dialog';
-		import dialog from '../scripts/dialog';
-		import notify from '../scripts/notify';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.reset = () => {
-			passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-current-password%', currentPassword => {
-				passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-new-password%', newPassword => {
-					passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-new-password-again%', newPassword2 => {
-						if (newPassword !== newPassword2) {
-							dialog(null, '%i18n:desktop.tags.mk-password-setting.not-match%', [{
-								text: 'OK'
-							}]);
-							return;
-						}
-						this.api('i/change_password', {
-							current_password: currentPassword,
-							new_password: newPassword
-						}).then(() => {
-							notify('%i18n:desktop.tags.mk-password-setting.changed%');
-						});
-					});
-				});
-			});
-		};
-	</script>
-</mk-password-setting>
-
-<mk-2fa-setting>
-	<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
-	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
-	<p v-if="!data && !I.two_factor_enabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
-	<template v-if="I.two_factor_enabled">
-		<p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p>
-		<button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
-	</template>
-	<div v-if="data">
-		<ol>
-			<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>
-			<li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li>
-			<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
-				<input type="number" ref="token" class="ui">
-				<button @click="submit" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
-			</li>
-		</ol>
-		<div class="ui info"><p>%fa:info-circle%%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #4a535a
-
-	</style>
-	<script lang="typescript">
-		import passwordDialog from '../scripts/password-dialog';
-		import notify from '../scripts/notify';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.register = () => {
-			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
-				this.api('i/2fa/register', {
-					password: password
-				}).then(data => {
-					this.update({
-						data: data
-					});
-				});
-			});
-		};
-
-		this.unregister = () => {
-			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
-				this.api('i/2fa/unregister', {
-					password: password
-				}).then(data => {
-					notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%');
-					this.I.two_factor_enabled = false;
-					this.I.update();
-				});
-			});
-		};
-
-		this.submit = () => {
-			this.api('i/2fa/done', {
-				token: this.$refs.token.value
-			}).then(() => {
-				notify('%i18n:desktop.tags.mk-2fa-setting.success%');
-				this.I.two_factor_enabled = true;
-				this.I.update();
-			}).catch(() => {
-				notify('%i18n:desktop.tags.mk-2fa-setting.failed%');
-			});
-		};
-	</script>
-</mk-2fa-setting>
-
-<mk-drive-setting>
-	<svg viewBox="0 0 1 1" preserveAspectRatio="none">
-		<circle
-			riot-r={ r }
-			cx="50%" cy="50%"
-			fill="none"
-			stroke-width="0.1"
-			stroke="rgba(0, 0, 0, 0.05)"/>
-		<circle
-			riot-r={ r }
-			cx="50%" cy="50%"
-			riot-stroke-dasharray={ Math.PI * (r * 2) }
-			riot-stroke-dashoffset={ strokeDashoffset }
-			fill="none"
-			stroke-width="0.1"
-			riot-stroke={ color }/>
-		<text x="50%" y="50%" dy="0.05" text-anchor="middle">{ (usageP * 100).toFixed(0) }%</text>
-	</svg>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #4a535a
-
-			> svg
-				display block
-				height 128px
-
-				> circle
-					transform-origin center
-					transform rotate(-90deg)
-					transition stroke-dashoffset 0.5s ease
-
-				> text
-					font-size 0.15px
-					fill rgba(0, 0, 0, 0.6)
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.r = 0.4;
-
-		this.on('mount', () => {
-			this.api('drive').then(info => {
-				const usageP = info.usage / info.capacity;
-				const color = `hsl(${180 - (usageP * 180)}, 80%, 70%)`;
-				const strokeDashoffset = (1 - usageP) * (Math.PI * (this.r * 2));
-
-				this.update({
-					color,
-					strokeDashoffset,
-					usageP,
-					usage: info.usage,
-					capacity: info.capacity
-				});
-			});
-		});
-	</script>
-</mk-drive-setting>
-
-<mk-mute-setting>
-	<div class="none ui info" v-if="!fetching && users.length == 0">
-		<p>%fa:info-circle%%i18n:desktop.tags.mk-mute-setting.no-users%</p>
-	</div>
-	<div class="users" v-if="users.length != 0">
-		<div each={ user in users }>
-			<p><b>{ user.name }</b> @{ user.username }</p>
-		</div>
-	</div>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.apps = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.api('mute/list').then(x => {
-				this.update({
-					fetching: false,
-					users: x.users
-				});
-			});
-		});
-	</script>
-</mk-mute-setting>
diff --git a/src/web/app/desktop/tags/sub-post-content.tag b/src/web/app/desktop/tags/sub-post-content.tag
deleted file mode 100644
index 40b3b30058..0000000000
--- a/src/web/app/desktop/tags/sub-post-content.tag
+++ /dev/null
@@ -1,54 +0,0 @@
-<mk-sub-post-content>
-	<div class="body">
-		<a class="reply" v-if="post.reply_id">
-			%fa:reply%
-		</a>
-		<span ref="text"></span>
-		<a class="quote" v-if="post.repost_id" href={ '/post:' + post.repost_id }>RP: ...</a>
-	</div>
-	<details v-if="post.media">
-		<summary>({ post.media.length }つのメディア)</summary>
-		<mk-images images={ post.media }/>
-	</details>
-	<details v-if="post.poll">
-		<summary>投票</summary>
-		<mk-poll post={ post }/>
-	</details>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow-wrap break-word
-
-			> .body
-				> .reply
-					margin-right 6px
-					color #717171
-
-				> .quote
-					margin-left 4px
-					font-style oblique
-					color #a0bf46
-
-			mk-poll
-				font-size 80%
-
-	</style>
-	<script lang="typescript">
-		import compile from '../../common/scripts/text-compiler';
-
-		this.mixin('user-preview');
-
-		this.post = this.opts.post;
-
-		this.on('mount', () => {
-			if (this.post.text) {
-				const tokens = this.post.ast;
-				this.$refs.text.innerHTML = compile(tokens, false);
-
-				Array.from(this.$refs.text.children).forEach(e => {
-					if (e.tagName == 'MK-URL') riot.mount(e);
-				});
-			}
-		});
-	</script>
-</mk-sub-post-content>
diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag
deleted file mode 100644
index 7f79d18b47..0000000000
--- a/src/web/app/desktop/tags/timeline.tag
+++ /dev/null
@@ -1,704 +0,0 @@
-<mk-timeline>
-	<template each={ post, i in posts }>
-		<mk-timeline-post post={ post }/>
-		<p class="date" v-if="i != posts.length - 1 && post._date != posts[i + 1]._date"><span>%fa:angle-up%{ post._datetext }</span><span>%fa:angle-down%{ posts[i + 1]._datetext }</span></p>
-	</template>
-	<footer data-yield="footer">
-		<yield from="footer"/>
-	</footer>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .date
-				display block
-				margin 0
-				line-height 32px
-				font-size 14px
-				text-align center
-				color #aaa
-				background #fdfdfd
-				border-bottom solid 1px #eaeaea
-
-				span
-					margin 0 16px
-
-				[data-fa]
-					margin-right 8px
-
-			> footer
-				padding 16px
-				text-align center
-				color #ccc
-				border-top solid 1px #eaeaea
-				border-bottom-left-radius 4px
-				border-bottom-right-radius 4px
-
-	</style>
-	<script lang="typescript">
-		this.posts = [];
-
-		this.on('update', () => {
-			this.posts.forEach(post => {
-				const date = new Date(post.created_at).getDate();
-				const month = new Date(post.created_at).getMonth() + 1;
-				post._date = date;
-				post._datetext = `${month}月 ${date}日`;
-			});
-		});
-
-		this.setPosts = posts => {
-			this.update({
-				posts: posts
-			});
-		};
-
-		this.prependPosts = posts => {
-			posts.forEach(post => {
-				this.posts.push(post);
-				this.update();
-			});
-		}
-
-		this.addPost = post => {
-			this.posts.unshift(post);
-			this.update();
-		};
-
-		this.tail = () => {
-			return this.posts[this.posts.length - 1];
-		};
-
-		this.clear = () => {
-			this.posts = [];
-			this.update();
-		};
-
-		this.focus = () => {
-			this.root.children[0].focus();
-		};
-
-	</script>
-</mk-timeline>
-
-<mk-timeline-post tabindex="-1" title={ title } onkeydown={ onKeyDown } dblclick={ onDblClick }>
-	<div class="reply-to" v-if="p.reply">
-		<mk-timeline-post-sub post={ p.reply }/>
-	</div>
-	<div class="repost" v-if="isRepost">
-		<p>
-			<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
-				<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
-			</a>
-			%fa:retweet%{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
-		</p>
-		<mk-time time={ post.created_at }/>
-	</div>
-	<article>
-		<a class="avatar-anchor" href={ '/' + p.user.username }>
-			<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ p.user.id }/>
-		</a>
-		<div class="main">
-			<header>
-				<a class="name" href={ '/' + p.user.username } data-user-preview={ p.user.id }>{ p.user.name }</a>
-				<span class="is-bot" v-if="p.user.is_bot">bot</span>
-				<span class="username">@{ p.user.username }</span>
-				<div class="info">
-					<span class="app" v-if="p.app">via <b>{ p.app.name }</b></span>
-					<a class="created-at" href={ url }>
-						<mk-time time={ p.created_at }/>
-					</a>
-				</div>
-			</header>
-			<div class="body">
-				<div class="text" ref="text">
-					<p class="channel" v-if="p.channel != null"><a href={ _CH_URL_ + '/' + p.channel.id } target="_blank">{ p.channel.title }</a>:</p>
-					<a class="reply" v-if="p.reply">
-						%fa:reply%
-					</a>
-					<p class="dummy"></p>
-					<a class="quote" v-if="p.repost != null">RP:</a>
-				</div>
-				<div class="media" v-if="p.media">
-					<mk-images images={ p.media }/>
-				</div>
-				<mk-poll v-if="p.poll" post={ p } ref="pollViewer"/>
-				<div class="repost" v-if="p.repost">%fa:quote-right -flip-h%
-					<mk-post-preview class="repost" post={ p.repost }/>
-				</div>
-			</div>
-			<footer>
-				<mk-reactions-viewer post={ p } ref="reactionsViewer"/>
-				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-post.reply%">
-					%fa:reply%<p class="count" v-if="p.replies_count > 0">{ p.replies_count }</p>
-				</button>
-				<button @click="repost" title="%i18n:desktop.tags.mk-timeline-post.repost%">
-					%fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p>
-				</button>
-				<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%">
-					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p>
-				</button>
-				<button @click="menu" ref="menuButton">
-					%fa:ellipsis-h%
-				</button>
-				<button @click="toggleDetail" title="%i18n:desktop.tags.mk-timeline-post.detail">
-					<template v-if="!isDetailOpened">%fa:caret-down%</template>
-					<template v-if="isDetailOpened">%fa:caret-up%</template>
-				</button>
-			</footer>
-		</div>
-	</article>
-	<div class="detail" v-if="isDetailOpened">
-		<mk-post-status-graph width="462" height="130" post={ p }/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 0
-			background #fff
-			border-bottom solid 1px #eaeaea
-
-			&:first-child
-				border-top-left-radius 6px
-				border-top-right-radius 6px
-
-				> .repost
-					border-top-left-radius 6px
-					border-top-right-radius 6px
-
-			&:last-of-type
-				border-bottom none
-
-			&:focus
-				z-index 1
-
-				&:after
-					content ""
-					pointer-events none
-					position absolute
-					top 2px
-					right 2px
-					bottom 2px
-					left 2px
-					border 2px solid rgba($theme-color, 0.3)
-					border-radius 4px
-
-			> .repost
-				color #9dbb00
-				background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-				> p
-					margin 0
-					padding 16px 32px
-					line-height 28px
-
-					.avatar-anchor
-						display inline-block
-
-						.avatar
-							vertical-align bottom
-							width 28px
-							height 28px
-							margin 0 8px 0 0
-							border-radius 6px
-
-					[data-fa]
-						margin-right 4px
-
-					.name
-						font-weight bold
-
-				> mk-time
-					position absolute
-					top 16px
-					right 32px
-					font-size 0.9em
-					line-height 28px
-
-				& + article
-					padding-top 8px
-
-			> .reply-to
-				padding 0 16px
-				background rgba(0, 0, 0, 0.0125)
-
-				> mk-post-preview
-					background transparent
-
-			> article
-				padding 28px 32px 18px 32px
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				&:hover
-					> .main > footer > button
-						color #888
-
-				> .avatar-anchor
-					display block
-					float left
-					margin 0 16px 10px 0
-					position -webkit-sticky
-					position sticky
-					top 74px
-
-					> .avatar
-						display block
-						width 58px
-						height 58px
-						margin 0
-						border-radius 8px
-						vertical-align bottom
-
-				> .main
-					float left
-					width calc(100% - 74px)
-
-					> header
-						display flex
-						margin-bottom 4px
-						white-space nowrap
-						line-height 1.4
-
-						> .name
-							display block
-							margin 0 .5em 0 0
-							padding 0
-							overflow hidden
-							color #777
-							font-size 1em
-							font-weight 700
-							text-align left
-							text-decoration none
-							text-overflow ellipsis
-
-							&:hover
-								text-decoration underline
-
-						> .is-bot
-							text-align left
-							margin 0 .5em 0 0
-							padding 1px 6px
-							font-size 12px
-							color #aaa
-							border solid 1px #ddd
-							border-radius 3px
-
-						> .username
-							text-align left
-							margin 0 .5em 0 0
-							color #ccc
-
-						> .info
-							margin-left auto
-							text-align right
-							font-size 0.9em
-
-							> .app
-								margin-right 8px
-								padding-right 8px
-								color #ccc
-								border-right solid 1px #eaeaea
-
-							> .created-at
-								color #c0c0c0
-
-					> .body
-
-						> .text
-							cursor default
-							display block
-							margin 0
-							padding 0
-							overflow-wrap break-word
-							font-size 1.1em
-							color #717171
-
-							> .dummy
-								display none
-
-							mk-url-preview
-								margin-top 8px
-
-							> .channel
-								margin 0
-
-							> .reply
-								margin-right 8px
-								color #717171
-
-							> .quote
-								margin-left 4px
-								font-style oblique
-								color #a0bf46
-
-							code
-								padding 4px 8px
-								margin 0 0.5em
-								font-size 80%
-								color #525252
-								background #f8f8f8
-								border-radius 2px
-
-							pre > code
-								padding 16px
-								margin 0
-
-							[data-is-me]:after
-								content "you"
-								padding 0 4px
-								margin-left 4px
-								font-size 80%
-								color $theme-color-foreground
-								background $theme-color
-								border-radius 4px
-
-						> mk-poll
-							font-size 80%
-
-						> .repost
-							margin 8px 0
-
-							> [data-fa]:first-child
-								position absolute
-								top -8px
-								left -8px
-								z-index 1
-								color #c0dac6
-								font-size 28px
-								background #fff
-
-							> mk-post-preview
-								padding 16px
-								border dashed 1px #c0dac6
-								border-radius 8px
-
-					> footer
-						> button
-							margin 0 28px 0 0
-							padding 0 8px
-							line-height 32px
-							font-size 1em
-							color #ddd
-							background transparent
-							border none
-							cursor pointer
-
-							&:hover
-								color #666
-
-							> .count
-								display inline
-								margin 0 0 0 8px
-								color #999
-
-							&.reacted
-								color $theme-color
-
-							&:last-child
-								position absolute
-								right 0
-								margin 0
-
-			> .detail
-				padding-top 4px
-				background rgba(0, 0, 0, 0.0125)
-
-	</style>
-	<script lang="typescript">
-		import compile from '../../common/scripts/text-compiler';
-		import dateStringify from '../../common/scripts/date-stringify';
-
-		this.mixin('i');
-		this.mixin('api');
-		this.mixin('user-preview');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.isDetailOpened = false;
-
-		this.set = post => {
-			this.post = post;
-			this.isRepost = this.post.repost && this.post.text == null && this.post.media_ids == null && this.post.poll == null;
-			this.p = this.isRepost ? this.post.repost : this.post;
-			this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
-			this.title = dateStringify(this.p.created_at);
-			this.url = `/${this.p.user.username}/${this.p.id}`;
-		};
-
-		this.set(this.opts.post);
-
-		this.refresh = post => {
-			this.set(post);
-			this.update();
-			if (this.$refs.reactionsViewer) this.$refs.reactionsViewer.update({
-				post
-			});
-			if (this.$refs.pollViewer) this.$refs.pollViewer.init(post);
-		};
-
-		this.onStreamPostUpdated = data => {
-			const post = data.post;
-			if (post.id == this.post.id) {
-				this.refresh(post);
-			}
-		};
-
-		this.onStreamConnected = () => {
-			this.capture();
-		};
-
-		this.capture = withHandler => {
-			if (this.SIGNIN) {
-				this.connection.send({
-					type: 'capture',
-					id: this.post.id
-				});
-				if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
-			}
-		};
-
-		this.decapture = withHandler => {
-			if (this.SIGNIN) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.post.id
-				});
-				if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
-			}
-		};
-
-		this.on('mount', () => {
-			this.capture(true);
-
-			if (this.SIGNIN) {
-				this.connection.on('_connected_', this.onStreamConnected);
-			}
-
-			if (this.p.text) {
-				const tokens = this.p.ast;
-
-				this.$refs.text.innerHTML = this.$refs.text.innerHTML.replace('<p class="dummy"></p>', compile(tokens));
-
-				Array.from(this.$refs.text.children).forEach(e => {
-					if (e.tagName == 'MK-URL') riot.mount(e);
-				});
-
-				// URLをプレビュー
-				tokens
-				.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-				.map(t => {
-					riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
-						url: t.url
-					});
-				});
-			}
-		});
-
-		this.on('unmount', () => {
-			this.decapture(true);
-			this.connection.off('_connected_', this.onStreamConnected);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.reply = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
-				reply: this.p
-			});
-		};
-
-		this.repost = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-repost-form-window')), {
-				post: this.p
-			});
-		};
-
-		this.react = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
-				source: this.$refs.reactButton,
-				post: this.p
-			});
-		};
-
-		this.menu = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-post-menu')), {
-				source: this.$refs.menuButton,
-				post: this.p
-			});
-		};
-
-		this.toggleDetail = () => {
-			this.update({
-				isDetailOpened: !this.isDetailOpened
-			});
-		};
-
-		this.onKeyDown = e => {
-			let shouldBeCancel = true;
-
-			switch (true) {
-				case e.which == 38: // [↑]
-				case e.which == 74: // [j]
-				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
-					focus(this.root, e => e.previousElementSibling);
-					break;
-
-				case e.which == 40: // [↓]
-				case e.which == 75: // [k]
-				case e.which == 9: // [Tab]
-					focus(this.root, e => e.nextElementSibling);
-					break;
-
-				case e.which == 81: // [q]
-				case e.which == 69: // [e]
-					this.repost();
-					break;
-
-				case e.which == 70: // [f]
-				case e.which == 76: // [l]
-					this.like();
-					break;
-
-				case e.which == 82: // [r]
-					this.reply();
-					break;
-
-				default:
-					shouldBeCancel = false;
-			}
-
-			if (shouldBeCancel) e.preventDefault();
-		};
-
-		this.onDblClick = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-detailed-post-window')), {
-				post: this.p.id
-			});
-		};
-
-		function focus(el, fn) {
-			const target = fn(el);
-			if (target) {
-				if (target.hasAttribute('tabindex')) {
-					target.focus();
-				} else {
-					focus(target, fn);
-				}
-			}
-		}
-	</script>
-</mk-timeline-post>
-
-<mk-timeline-post-sub title={ title }>
-	<article>
-		<a class="avatar-anchor" href={ '/' + post.user.username }>
-			<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ post.user_id }/>
-		</a>
-		<div class="main">
-			<header>
-				<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>
-				<span class="username">@{ post.user.username }</span>
-				<a class="created-at" href={ '/' + post.user.username + '/' + post.id }>
-					<mk-time time={ post.created_at }/>
-				</a>
-			</header>
-			<div class="body">
-				<mk-sub-post-content class="text" post={ post }/>
-			</div>
-		</div>
-	</article>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 0
-			font-size 0.9em
-
-			> article
-				padding 16px
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				&:hover
-					> .main > footer > button
-						color #888
-
-				> .avatar-anchor
-					display block
-					float left
-					margin 0 14px 0 0
-
-					> .avatar
-						display block
-						width 52px
-						height 52px
-						margin 0
-						border-radius 8px
-						vertical-align bottom
-
-				> .main
-					float left
-					width calc(100% - 66px)
-
-					> header
-						display flex
-						margin-bottom 2px
-						white-space nowrap
-						line-height 21px
-
-						> .name
-							display block
-							margin 0 .5em 0 0
-							padding 0
-							overflow hidden
-							color #607073
-							font-size 1em
-							font-weight 700
-							text-align left
-							text-decoration none
-							text-overflow ellipsis
-
-							&:hover
-								text-decoration underline
-
-						> .username
-							text-align left
-							margin 0 .5em 0 0
-							color #d1d8da
-
-						> .created-at
-							margin-left auto
-							color #b2b8bb
-
-					> .body
-
-						> .text
-							cursor default
-							margin 0
-							padding 0
-							font-size 1.1em
-							color #717171
-
-							pre
-								max-height 120px
-								font-size 80%
-
-	</style>
-	<script lang="typescript">
-		import dateStringify from '../../common/scripts/date-stringify';
-
-		this.mixin('user-preview');
-
-		this.post = this.opts.post;
-		this.title = dateStringify(this.post.created_at);
-	</script>
-</mk-timeline-post-sub>
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
deleted file mode 100644
index e5008b838f..0000000000
--- a/src/web/app/desktop/tags/ui.tag
+++ /dev/null
@@ -1,896 +0,0 @@
-<mk-ui>
-	<mk-ui-header page={ opts.page }/>
-	<mk-set-avatar-suggestion v-if="SIGNIN && I.avatar_id == null"/>
-	<mk-set-banner-suggestion v-if="SIGNIN && I.banner_id == null"/>
-	<div class="content">
-		<yield />
-	</div>
-	<mk-stream-indicator v-if="SIGNIN"/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-
-		this.openPostForm = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')));
-		};
-
-		this.on('mount', () => {
-			document.addEventListener('keydown', this.onkeydown);
-		});
-
-		this.on('unmount', () => {
-			document.removeEventListener('keydown', this.onkeydown);
-		});
-
-		this.onkeydown = e => {
-			if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return;
-
-			if (e.which == 80 || e.which == 78) { // p or n
-				e.preventDefault();
-				this.openPostForm();
-			}
-		};
-	</script>
-</mk-ui>
-
-<mk-ui-header>
-	<mk-donation v-if="SIGNIN && I.client_settings.show_donation"/>
-	<mk-special-message/>
-	<div class="main">
-		<div class="backdrop"></div>
-		<div class="main">
-			<div class="container">
-				<div class="left">
-					<mk-ui-header-nav page={ opts.page }/>
-				</div>
-				<div class="right">
-					<mk-ui-header-search/>
-					<mk-ui-header-account v-if="SIGNIN"/>
-					<mk-ui-header-notifications v-if="SIGNIN"/>
-					<mk-ui-header-post-button v-if="SIGNIN"/>
-					<mk-ui-header-clock/>
-				</div>
-			</div>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position -webkit-sticky
-			position sticky
-			top 0
-			z-index 1024
-			width 100%
-			box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
-
-			> .main
-
-				> .backdrop
-					position absolute
-					top 0
-					z-index 1023
-					width 100%
-					height 48px
-					backdrop-filter blur(12px)
-					background #f7f7f7
-
-					&:after
-						content ""
-						display block
-						width 100%
-						height 48px
-						background-image url(/assets/desktop/header-logo.svg)
-						background-size 46px
-						background-position center
-						background-repeat no-repeat
-						opacity 0.3
-
-				> .main
-					z-index 1024
-					margin 0
-					padding 0
-					background-clip content-box
-					font-size 0.9rem
-					user-select none
-
-					> .container
-						width 100%
-						max-width 1300px
-						margin 0 auto
-
-						&:after
-							content ""
-							display block
-							clear both
-
-						> .left
-							float left
-							height 3rem
-
-						> .right
-							float right
-							height 48px
-
-							@media (max-width 1100px)
-								> mk-ui-header-search
-									display none
-
-	</style>
-	<script lang="typescript">this.mixin('i');</script>
-</mk-ui-header>
-
-<mk-ui-header-search>
-	<form class="search" onsubmit={ onsubmit }>
-		%fa:search%
-		<input ref="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
-		<div class="result"></div>
-	</form>
-	<style lang="stylus" scoped>
-		:scope
-
-			> form
-				display block
-				float left
-
-				> [data-fa]
-					display block
-					position absolute
-					top 0
-					left 0
-					width 48px
-					text-align center
-					line-height 48px
-					color #9eaba8
-					pointer-events none
-
-					> *
-						vertical-align middle
-
-				> input
-					user-select text
-					cursor auto
-					margin 8px 0 0 0
-					padding 6px 18px 6px 36px
-					width 14em
-					height 32px
-					font-size 1em
-					background rgba(0, 0, 0, 0.05)
-					outline none
-					//border solid 1px #ddd
-					border none
-					border-radius 16px
-					transition color 0.5s ease, border 0.5s ease
-					font-family FontAwesome, sans-serif
-
-					&::placeholder
-						color #9eaba8
-
-					&:hover
-						background rgba(0, 0, 0, 0.08)
-
-					&:focus
-						box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
-
-	</style>
-	<script lang="typescript">
-		this.mixin('page');
-
-		this.onsubmit = e => {
-			e.preventDefault();
-			this.page('/search?q=' + encodeURIComponent(this.$refs.q.value));
-		};
-	</script>
-</mk-ui-header-search>
-
-<mk-ui-header-post-button>
-	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display inline-block
-			padding 8px
-			height 100%
-			vertical-align top
-
-			> button
-				display inline-block
-				margin 0
-				padding 0 10px
-				height 100%
-				font-size 1.2em
-				font-weight normal
-				text-decoration none
-				color $theme-color-foreground
-				background $theme-color !important
-				outline none
-				border none
-				border-radius 4px
-				transition background 0.1s ease
-				cursor pointer
-
-				*
-					pointer-events none
-
-				&:hover
-					background lighten($theme-color, 10%) !important
-
-				&:active
-					background darken($theme-color, 10%) !important
-					transition background 0s ease
-
-	</style>
-	<script lang="typescript">
-		this.post = e => {
-			this.parent.parent.openPostForm();
-		};
-	</script>
-</mk-ui-header-post-button>
-
-<mk-ui-header-notifications>
-	<button data-active={ isOpen } @click="toggle" title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
-		%fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
-	</button>
-	<div class="notifications" v-if="isOpen">
-		<mk-notifications/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			float left
-
-			> button
-				display block
-				margin 0
-				padding 0
-				width 32px
-				color #9eaba8
-				border none
-				background transparent
-				cursor pointer
-
-				*
-					pointer-events none
-
-				&:hover
-				&[data-active='true']
-					color darken(#9eaba8, 20%)
-
-				&:active
-					color darken(#9eaba8, 30%)
-
-				> [data-fa].bell
-					font-size 1.2em
-					line-height 48px
-
-				> [data-fa].circle
-					margin-left -5px
-					vertical-align super
-					font-size 10px
-					color $theme-color
-
-			> .notifications
-				display block
-				position absolute
-				top 56px
-				right -72px
-				width 300px
-				background #fff
-				border-radius 4px
-				box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
-
-				&:before
-					content ""
-					pointer-events none
-					display block
-					position absolute
-					top -28px
-					right 74px
-					border-top solid 14px transparent
-					border-right solid 14px transparent
-					border-bottom solid 14px rgba(0, 0, 0, 0.1)
-					border-left solid 14px transparent
-
-				&:after
-					content ""
-					pointer-events none
-					display block
-					position absolute
-					top -27px
-					right 74px
-					border-top solid 14px transparent
-					border-right solid 14px transparent
-					border-bottom solid 14px #fff
-					border-left solid 14px transparent
-
-				> mk-notifications
-					max-height 350px
-					font-size 1rem
-					overflow auto
-
-	</style>
-	<script lang="typescript">
-		import contains from '../../common/scripts/contains';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		if (this.SIGNIN) {
-			this.mixin('stream');
-			this.connection = this.stream.getConnection();
-			this.connectionId = this.stream.use();
-		}
-
-		this.isOpen = false;
-
-		this.on('mount', () => {
-			if (this.SIGNIN) {
-				this.connection.on('read_all_notifications', this.onReadAllNotifications);
-				this.connection.on('unread_notification', this.onUnreadNotification);
-
-				// Fetch count of unread notifications
-				this.api('notifications/get_unread_count').then(res => {
-					if (res.count > 0) {
-						this.update({
-							hasUnreadNotifications: true
-						});
-					}
-				});
-			}
-		});
-
-		this.on('unmount', () => {
-			if (this.SIGNIN) {
-				this.connection.off('read_all_notifications', this.onReadAllNotifications);
-				this.connection.off('unread_notification', this.onUnreadNotification);
-				this.stream.dispose(this.connectionId);
-			}
-		});
-
-		this.onReadAllNotifications = () => {
-			this.update({
-				hasUnreadNotifications: false
-			});
-		};
-
-		this.onUnreadNotification = () => {
-			this.update({
-				hasUnreadNotifications: true
-			});
-		};
-
-		this.toggle = () => {
-			this.isOpen ? this.close() : this.open();
-		};
-
-		this.open = () => {
-			this.update({
-				isOpen: true
-			});
-			document.querySelectorAll('body *').forEach(el => {
-				el.addEventListener('mousedown', this.mousedown);
-			});
-		};
-
-		this.close = () => {
-			this.update({
-				isOpen: false
-			});
-			document.querySelectorAll('body *').forEach(el => {
-				el.removeEventListener('mousedown', this.mousedown);
-			});
-		};
-
-		this.mousedown = e => {
-			e.preventDefault();
-			if (!contains(this.root, e.target) && this.root != e.target) this.close();
-			return false;
-		};
-	</script>
-</mk-ui-header-notifications>
-
-<mk-ui-header-nav>
-	<ul>
-		<template v-if="SIGNIN">
-			<li class="home { active: page == 'home' }">
-				<a href={ _URL_ }>
-					%fa:home%
-					<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
-				</a>
-			</li>
-			<li class="messaging">
-				<a @click="messaging">
-					%fa:comments%
-					<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
-					<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
-				</a>
-			</li>
-		</template>
-		<li class="ch">
-			<a href={ _CH_URL_ } target="_blank">
-				%fa:tv%
-				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
-			</a>
-		</li>
-		<li class="info">
-			<a href="https://twitter.com/misskey_xyz" target="_blank">
-				%fa:info%
-				<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
-			</a>
-		</li>
-	</ul>
-	<style lang="stylus" scoped>
-		:scope
-			display inline-block
-			margin 0
-			padding 0
-			line-height 3rem
-			vertical-align top
-
-			> ul
-				display inline-block
-				margin 0
-				padding 0
-				vertical-align top
-				line-height 3rem
-				list-style none
-
-				> li
-					display inline-block
-					vertical-align top
-					height 48px
-					line-height 48px
-
-					&.active
-						> a
-							border-bottom solid 3px $theme-color
-
-					> a
-						display inline-block
-						z-index 1
-						height 100%
-						padding 0 24px
-						font-size 13px
-						font-variant small-caps
-						color #9eaba8
-						text-decoration none
-						transition none
-						cursor pointer
-
-						*
-							pointer-events none
-
-						&:hover
-							color darken(#9eaba8, 20%)
-							text-decoration none
-
-						> [data-fa]:first-child
-							margin-right 8px
-
-						> [data-fa]:last-child
-							margin-left 5px
-							font-size 10px
-							color $theme-color
-
-							@media (max-width 1100px)
-								margin-left -5px
-
-						> p
-							display inline
-							margin 0
-
-							@media (max-width 1100px)
-								display none
-
-						@media (max-width 700px)
-							padding 0 12px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		if (this.SIGNIN) {
-			this.mixin('stream');
-			this.connection = this.stream.getConnection();
-			this.connectionId = this.stream.use();
-		}
-
-		this.page = this.opts.page;
-
-		this.on('mount', () => {
-			if (this.SIGNIN) {
-				this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
-				this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
-
-				// Fetch count of unread messaging messages
-				this.api('messaging/unread').then(res => {
-					if (res.count > 0) {
-						this.update({
-							hasUnreadMessagingMessages: true
-						});
-					}
-				});
-			}
-		});
-
-		this.on('unmount', () => {
-			if (this.SIGNIN) {
-				this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
-				this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
-				this.stream.dispose(this.connectionId);
-			}
-		});
-
-		this.onReadAllMessagingMessages = () => {
-			this.update({
-				hasUnreadMessagingMessages: false
-			});
-		};
-
-		this.onUnreadMessagingMessage = () => {
-			this.update({
-				hasUnreadMessagingMessages: true
-			});
-		};
-
-		this.messaging = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-messaging-window')));
-		};
-	</script>
-</mk-ui-header-nav>
-
-<mk-ui-header-clock>
-	<div class="header">
-		<time ref="time">
-			<span class="yyyymmdd">{ yyyy }/{ mm }/{ dd }</span>
-			<br>
-			<span class="hhnn">{ hh }<span style="visibility:{ now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{ nn }</span>
-		</time>
-	</div>
-	<div class="content">
-		<mk-analog-clock/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display inline-block
-			overflow visible
-
-			> .header
-				padding 0 12px
-				text-align center
-				font-size 10px
-
-				&, *
-					cursor: default
-
-				&:hover
-					background #899492
-
-					& + .content
-						visibility visible
-
-					> time
-						color #fff !important
-
-						*
-							color #fff !important
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				> time
-					display table-cell
-					vertical-align middle
-					height 48px
-					color #9eaba8
-
-					> .yyyymmdd
-						opacity 0.7
-
-			> .content
-				visibility hidden
-				display block
-				position absolute
-				top auto
-				right 0
-				z-index 3
-				margin 0
-				padding 0
-				width 256px
-				background #899492
-
-	</style>
-	<script lang="typescript">
-		this.now = new Date();
-
-		this.draw = () => {
-			const now = this.now = new Date();
-			this.yyyy = now.getFullYear();
-			this.mm = ('0' + (now.getMonth() + 1)).slice(-2);
-			this.dd = ('0' + now.getDate()).slice(-2);
-			this.hh = ('0' + now.getHours()).slice(-2);
-			this.nn = ('0' + now.getMinutes()).slice(-2);
-			this.update();
-		};
-
-		this.on('mount', () => {
-			this.draw();
-			this.clock = setInterval(this.draw, 1000);
-		});
-
-		this.on('unmount', () => {
-			clearInterval(this.clock);
-		});
-	</script>
-</mk-ui-header-clock>
-
-<mk-ui-header-account>
-	<button class="header" data-active={ isOpen.toString() } @click="toggle">
-		<span class="username">{ I.username }<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
-		<img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
-	</button>
-	<div class="menu" v-if="isOpen">
-		<ul>
-			<li>
-				<a href={ '/' + I.username }>%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
-			</li>
-			<li @click="drive">
-				<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
-			</li>
-			<li>
-				<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
-			</li>
-		</ul>
-		<ul>
-			<li @click="settings">
-				<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
-			</li>
-		</ul>
-		<ul>
-			<li @click="signout">
-				<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
-			</li>
-		</ul>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			float left
-
-			> .header
-				display block
-				margin 0
-				padding 0
-				color #9eaba8
-				border none
-				background transparent
-				cursor pointer
-
-				*
-					pointer-events none
-
-				&:hover
-				&[data-active='true']
-					color darken(#9eaba8, 20%)
-
-					> .avatar
-						filter saturate(150%)
-
-				&:active
-					color darken(#9eaba8, 30%)
-
-				> .username
-					display block
-					float left
-					margin 0 12px 0 16px
-					max-width 16em
-					line-height 48px
-					font-weight bold
-					font-family Meiryo, sans-serif
-					text-decoration none
-
-					[data-fa]
-						margin-left 8px
-
-				> .avatar
-					display block
-					float left
-					min-width 32px
-					max-width 32px
-					min-height 32px
-					max-height 32px
-					margin 8px 8px 8px 0
-					border-radius 4px
-					transition filter 100ms ease
-
-			> .menu
-				display block
-				position absolute
-				top 56px
-				right -2px
-				width 230px
-				font-size 0.8em
-				background #fff
-				border-radius 4px
-				box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
-
-				&:before
-					content ""
-					pointer-events none
-					display block
-					position absolute
-					top -28px
-					right 12px
-					border-top solid 14px transparent
-					border-right solid 14px transparent
-					border-bottom solid 14px rgba(0, 0, 0, 0.1)
-					border-left solid 14px transparent
-
-				&:after
-					content ""
-					pointer-events none
-					display block
-					position absolute
-					top -27px
-					right 12px
-					border-top solid 14px transparent
-					border-right solid 14px transparent
-					border-bottom solid 14px #fff
-					border-left solid 14px transparent
-
-				ul
-					display block
-					margin 10px 0
-					padding 0
-					list-style none
-
-					& + ul
-						padding-top 10px
-						border-top solid 1px #eee
-
-					> li
-						display block
-						margin 0
-						padding 0
-
-						> a
-						> p
-							display block
-							z-index 1
-							padding 0 28px
-							margin 0
-							line-height 40px
-							color #868C8C
-							cursor pointer
-
-							*
-								pointer-events none
-
-							> [data-fa]:first-of-type
-								margin-right 6px
-
-							> [data-fa]:last-of-type
-								display block
-								position absolute
-								top 0
-								right 8px
-								z-index 1
-								padding 0 20px
-								font-size 1.2em
-								line-height 40px
-
-							&:hover, &:active
-								text-decoration none
-								background $theme-color
-								color $theme-color-foreground
-
-	</style>
-	<script lang="typescript">
-		import contains from '../../common/scripts/contains';
-		import signout from '../../common/scripts/signout';
-		this.signout = signout;
-
-		this.mixin('i');
-
-		this.isOpen = false;
-
-		this.on('before-unmount', () => {
-			this.close();
-		});
-
-		this.toggle = () => {
-			this.isOpen ? this.close() : this.open();
-		};
-
-		this.open = () => {
-			this.update({
-				isOpen: true
-			});
-			document.querySelectorAll('body *').forEach(el => {
-				el.addEventListener('mousedown', this.mousedown);
-			});
-		};
-
-		this.close = () => {
-			this.update({
-				isOpen: false
-			});
-			document.querySelectorAll('body *').forEach(el => {
-				el.removeEventListener('mousedown', this.mousedown);
-			});
-		};
-
-		this.mousedown = e => {
-			e.preventDefault();
-			if (!contains(this.root, e.target) && this.root != e.target) this.close();
-			return false;
-		};
-
-		this.drive = () => {
-			this.close();
-			riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-window')));
-		};
-
-		this.settings = () => {
-			this.close();
-			riot.mount(document.body.appendChild(document.createElement('mk-settings-window')));
-		};
-
-	</script>
-</mk-ui-header-account>
-
-<mk-ui-notification>
-	<p>{ opts.message }</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position fixed
-			z-index 10000
-			top -128px
-			left 0
-			right 0
-			margin 0 auto
-			padding 128px 0 0 0
-			width 500px
-			color rgba(#000, 0.6)
-			background rgba(#fff, 0.9)
-			border-radius 0 0 8px 8px
-			box-shadow 0 2px 4px rgba(#000, 0.2)
-			transform translateY(-64px)
-			opacity 0
-
-			> p
-				margin 0
-				line-height 64px
-				text-align center
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.on('mount', () => {
-			anime({
-				targets: this.root,
-				opacity: 1,
-				translateY: [-64, 0],
-				easing: 'easeOutElastic',
-				duration: 500
-			});
-
-			setTimeout(() => {
-				anime({
-					targets: this.root,
-					opacity: 0,
-					translateY: -64,
-					duration: 500,
-					easing: 'easeInElastic',
-					complete: () => this.$destroy()
-				});
-			}, 6000);
-		});
-	</script>
-</mk-ui-notification>
diff --git a/src/web/app/desktop/tags/user-followers-window.tag b/src/web/app/desktop/tags/user-followers-window.tag
deleted file mode 100644
index 82bec6992d..0000000000
--- a/src/web/app/desktop/tags/user-followers-window.tag
+++ /dev/null
@@ -1,19 +0,0 @@
-<mk-user-followers-window>
-	<mk-window is-modal={ false } width={ '400px' } height={ '550px' }><yield to="header"><img src={ parent.user.avatar_url + '?thumbnail&size=64' } alt=""/>{ parent.user.name }のフォロワー</yield>
-<yield to="content">
-		<mk-user-followers user={ parent.user }/></yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> img
-						display inline-block
-						vertical-align bottom
-						height calc(100% - 10px)
-						margin 5px
-						border-radius 4px
-
-	</style>
-	<script lang="typescript">this.user = this.opts.user</script>
-</mk-user-followers-window>
diff --git a/src/web/app/desktop/tags/user-followers.tag b/src/web/app/desktop/tags/user-followers.tag
deleted file mode 100644
index a1b44f0f5b..0000000000
--- a/src/web/app/desktop/tags/user-followers.tag
+++ /dev/null
@@ -1,23 +0,0 @@
-<mk-user-followers>
-	<mk-users-list fetch={ fetch } count={ user.followers_count } you-know-count={ user.followers_you_know_count } no-users={ 'フォロワーはいないようです。' }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			height 100%
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.fetch = (iknow, limit, cursor, cb) => {
-			this.api('users/followers', {
-				user_id: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		};
-	</script>
-</mk-user-followers>
diff --git a/src/web/app/desktop/tags/user-following-window.tag b/src/web/app/desktop/tags/user-following-window.tag
deleted file mode 100644
index 0f1c4b3ea6..0000000000
--- a/src/web/app/desktop/tags/user-following-window.tag
+++ /dev/null
@@ -1,19 +0,0 @@
-<mk-user-following-window>
-	<mk-window is-modal={ false } width={ '400px' } height={ '550px' }><yield to="header"><img src={ parent.user.avatar_url + '?thumbnail&size=64' } alt=""/>{ parent.user.name }のフォロー</yield>
-<yield to="content">
-		<mk-user-following user={ parent.user }/></yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> img
-						display inline-block
-						vertical-align bottom
-						height calc(100% - 10px)
-						margin 5px
-						border-radius 4px
-
-	</style>
-	<script lang="typescript">this.user = this.opts.user</script>
-</mk-user-following-window>
diff --git a/src/web/app/desktop/tags/user-following.tag b/src/web/app/desktop/tags/user-following.tag
deleted file mode 100644
index db46bf110e..0000000000
--- a/src/web/app/desktop/tags/user-following.tag
+++ /dev/null
@@ -1,23 +0,0 @@
-<mk-user-following>
-	<mk-users-list fetch={ fetch } count={ user.following_count } you-know-count={ user.following_you_know_count } no-users={ 'フォロー中のユーザーはいないようです。' }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			height 100%
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.fetch = (iknow, limit, cursor, cb) => {
-			this.api('users/following', {
-				user_id: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		};
-	</script>
-</mk-user-following>
diff --git a/src/web/app/desktop/tags/user-preview.tag b/src/web/app/desktop/tags/user-preview.tag
deleted file mode 100644
index 10c37de641..0000000000
--- a/src/web/app/desktop/tags/user-preview.tag
+++ /dev/null
@@ -1,149 +0,0 @@
-<mk-user-preview>
-	<template v-if="user != null">
-		<div class="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=512)' : '' }></div><a class="avatar" href={ '/' + user.username } target="_blank"><img src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
-		<div class="title">
-			<p class="name">{ user.name }</p>
-			<p class="username">@{ user.username }</p>
-		</div>
-		<div class="description">{ user.description }</div>
-		<div class="status">
-			<div>
-				<p>投稿</p><a>{ user.posts_count }</a>
-			</div>
-			<div>
-				<p>フォロー</p><a>{ user.following_count }</a>
-			</div>
-			<div>
-				<p>フォロワー</p><a>{ user.followers_count }</a>
-			</div>
-		</div>
-		<mk-follow-button v-if="SIGNIN && user.id != I.id" user={ userPromise }/>
-	</template>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position absolute
-			z-index 2048
-			margin-top -8px
-			width 250px
-			background #fff
-			background-clip content-box
-			border solid 1px rgba(0, 0, 0, 0.1)
-			border-radius 4px
-			overflow hidden
-			opacity 0
-
-			> .banner
-				height 84px
-				background-color #f5f5f5
-				background-size cover
-				background-position center
-
-			> .avatar
-				display block
-				position absolute
-				top 62px
-				left 13px
-
-				> img
-					display block
-					width 58px
-					height 58px
-					margin 0
-					border solid 3px #fff
-					border-radius 8px
-
-			> .title
-				display block
-				padding 8px 0 8px 82px
-
-				> .name
-					display block
-					margin 0
-					font-weight bold
-					line-height 16px
-					color #656565
-
-				> .username
-					display block
-					margin 0
-					line-height 16px
-					font-size 0.8em
-					color #999
-
-			> .description
-				padding 0 16px
-				font-size 0.7em
-				color #555
-
-			> .status
-				padding 8px 16px
-
-				> div
-					display inline-block
-					width 33%
-
-					> p
-						margin 0
-						font-size 0.7em
-						color #aaa
-
-					> a
-						font-size 1em
-						color $theme-color
-
-			> mk-follow-button
-				position absolute
-				top 92px
-				right 8px
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.u = this.opts.user;
-		this.user = null;
-		this.userPromise =
-			typeof this.u == 'string' ?
-				new Promise((resolve, reject) => {
-					this.api('users/show', {
-						user_id: this.u[0] == '@' ? undefined : this.u,
-						username: this.u[0] == '@' ? this.u.substr(1) : undefined
-					}).then(resolve);
-				})
-			: Promise.resolve(this.u);
-
-		this.on('mount', () => {
-			this.userPromise.then(user => {
-				this.update({
-					user: user
-				});
-				this.open();
-			});
-		});
-
-		this.open = () => {
-			anime({
-				targets: this.root,
-				opacity: 1,
-				'margin-top': 0,
-				duration: 200,
-				easing: 'easeOutQuad'
-			});
-		};
-
-		this.close = () => {
-			anime({
-				targets: this.root,
-				opacity: 0,
-				'margin-top': '-8px',
-				duration: 200,
-				easing: 'easeOutQuad',
-				complete: () => this.$destroy()
-			});
-		};
-	</script>
-</mk-user-preview>
diff --git a/src/web/app/desktop/tags/user-timeline.tag b/src/web/app/desktop/tags/user-timeline.tag
deleted file mode 100644
index f018ba64e1..0000000000
--- a/src/web/app/desktop/tags/user-timeline.tag
+++ /dev/null
@@ -1,150 +0,0 @@
-<mk-user-timeline>
-	<header>
-		<span data-is-active={ mode == 'default' } @click="setMode.bind(this, 'default')">投稿</span><span data-is-active={ mode == 'with-replies' } @click="setMode.bind(this, 'with-replies')">投稿と返信</span>
-	</header>
-	<div class="loading" v-if="isLoading">
-		<mk-ellipsis-icon/>
-	</div>
-	<p class="empty" v-if="isEmpty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
-	<mk-timeline ref="timeline">
-		<yield to="footer">
-			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
-		</yield/>
-	</mk-timeline>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-
-			> header
-				padding 8px 16px
-				border-bottom solid 1px #eee
-
-				> span
-					margin-right 16px
-					line-height 27px
-					font-size 18px
-					color #555
-
-					&:not([data-is-active])
-						color $theme-color
-						cursor pointer
-
-						&:hover
-							text-decoration underline
-
-			> .loading
-				padding 64px 0
-
-			> .empty
-				display block
-				margin 0 auto
-				padding 32px
-				max-width 400px
-				text-align center
-				color #999
-
-				> [data-fa]
-					display block
-					margin-bottom 16px
-					font-size 3em
-					color #ccc
-
-	</style>
-	<script lang="typescript">
-		import isPromise from '../../common/scripts/is-promise';
-
-		this.mixin('api');
-
-		this.user = null;
-		this.userPromise = isPromise(this.opts.user)
-			? this.opts.user
-			: Promise.resolve(this.opts.user);
-		this.isLoading = true;
-		this.isEmpty = false;
-		this.moreLoading = false;
-		this.unreadCount = 0;
-		this.mode = 'default';
-
-		this.on('mount', () => {
-			document.addEventListener('keydown', this.onDocumentKeydown);
-			window.addEventListener('scroll', this.onScroll);
-
-			this.userPromise.then(user => {
-				this.update({
-					user: user
-				});
-
-				this.fetch(() => this.$emit('loaded'));
-			});
-		});
-
-		this.on('unmount', () => {
-			document.removeEventListener('keydown', this.onDocumentKeydown);
-			window.removeEventListener('scroll', this.onScroll);
-		});
-
-		this.onDocumentKeydown = e => {
-			if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
-				if (e.which == 84) { // [t]
-					this.$refs.timeline.focus();
-				}
-			}
-		};
-
-		this.fetch = cb => {
-			this.api('users/posts', {
-				user_id: this.user.id,
-				until_date: this.date ? this.date.getTime() : undefined,
-				with_replies: this.mode == 'with-replies'
-			}).then(posts => {
-				this.update({
-					isLoading: false,
-					isEmpty: posts.length == 0
-				});
-				this.$refs.timeline.setPosts(posts);
-				if (cb) cb();
-			});
-		};
-
-		this.more = () => {
-			if (this.moreLoading || this.isLoading || this.$refs.timeline.posts.length == 0) return;
-			this.update({
-				moreLoading: true
-			});
-			this.api('users/posts', {
-				user_id: this.user.id,
-				with_replies: this.mode == 'with-replies',
-				until_id: this.$refs.timeline.tail().id
-			}).then(posts => {
-				this.update({
-					moreLoading: false
-				});
-				this.$refs.timeline.prependPosts(posts);
-			});
-		};
-
-		this.onScroll = () => {
-			const current = window.scrollY + window.innerHeight;
-			if (current > document.body.offsetHeight - 16/*遊び*/) {
-				this.more();
-			}
-		};
-
-		this.setMode = mode => {
-			this.update({
-				mode: mode
-			});
-			this.fetch();
-		};
-
-		this.warp = date => {
-			this.update({
-				date: date
-			});
-
-			this.fetch();
-		};
-	</script>
-</mk-user-timeline>
diff --git a/src/web/app/desktop/tags/user.tag b/src/web/app/desktop/tags/user.tag
deleted file mode 100644
index 8221926f45..0000000000
--- a/src/web/app/desktop/tags/user.tag
+++ /dev/null
@@ -1,852 +0,0 @@
-<mk-user>
-	<div class="user" v-if="!fetching">
-		<header>
-			<mk-user-header user={ user }/>
-		</header>
-		<mk-user-home v-if="page == 'home'" user={ user }/>
-		<mk-user-graphs v-if="page == 'graphs'" user={ user }/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .user
-				> header
-					> mk-user-header
-						overflow hidden
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.username = this.opts.user;
-		this.page = this.opts.page ? this.opts.page : 'home';
-		this.fetching = true;
-		this.user = null;
-
-		this.on('mount', () => {
-			this.api('users/show', {
-				username: this.username
-			}).then(user => {
-				this.update({
-					fetching: false,
-					user: user
-				});
-				this.$emit('loaded');
-			});
-		});
-	</script>
-</mk-user>
-
-<mk-user-header data-is-dark-background={ user.banner_url != null }>
-	<div class="banner-container" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' }>
-		<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' } @click="onUpdateBanner"></div>
-	</div>
-	<div class="fade"></div>
-	<div class="container">
-		<img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/>
-		<div class="title">
-			<p class="name" href={ '/' + user.username }>{ user.name }</p>
-			<p class="username">@{ user.username }</p>
-			<p class="location" v-if="user.profile.location">%fa:map-marker%{ user.profile.location }</p>
-		</div>
-		<footer>
-			<a href={ '/' + user.username } data-active={ parent.page == 'home' }>%fa:home%概要</a>
-			<a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }>%fa:image%メディア</a>
-			<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }>%fa:chart-bar%グラフ</a>
-		</footer>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			$banner-height = 320px
-			$footer-height = 58px
-
-			display block
-			background #f7f7f7
-			box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
-
-			&[data-is-dark-background]
-				> .banner-container
-					> .banner
-						background-color #383838
-
-				> .fade
-					background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
-
-				> .container
-					> .title
-						color #fff
-
-						> .name
-							text-shadow 0 0 8px #000
-
-			> .banner-container
-				height $banner-height
-				overflow hidden
-				background-size cover
-				background-position center
-
-				> .banner
-					height 100%
-					background-color #f5f5f5
-					background-size cover
-					background-position center
-
-			> .fade
-				$fade-hight = 78px
-
-				position absolute
-				top ($banner-height - $fade-hight)
-				left 0
-				width 100%
-				height $fade-hight
-
-			> .container
-				max-width 1200px
-				margin 0 auto
-
-				> .avatar
-					display block
-					position absolute
-					bottom 16px
-					left 16px
-					z-index 2
-					width 160px
-					height 160px
-					margin 0
-					border solid 3px #fff
-					border-radius 8px
-					box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
-
-				> .title
-					position absolute
-					bottom $footer-height
-					left 0
-					width 100%
-					padding 0 0 8px 195px
-					color #656565
-					font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
-
-					> .name
-						display block
-						margin 0
-						line-height 40px
-						font-weight bold
-						font-size 2em
-
-					> .username
-					> .location
-						display inline-block
-						margin 0 16px 0 0
-						line-height 20px
-						opacity 0.8
-
-						> i
-							margin-right 4px
-
-				> footer
-					z-index 1
-					height $footer-height
-					padding-left 195px
-
-					> a
-						display inline-block
-						margin 0
-						padding 0 16px
-						height $footer-height
-						line-height $footer-height
-						color #555
-
-						&[data-active]
-							border-bottom solid 4px $theme-color
-
-						> i
-							margin-right 6px
-
-					> button
-						display block
-						position absolute
-						top 0
-						right 0
-						margin 8px
-						padding 0
-						width $footer-height - 16px
-						line-height $footer-height - 16px - 2px
-						font-size 1.2em
-						color #777
-						border solid 1px #eee
-						border-radius 4px
-
-						&:hover
-							color #555
-							border solid 1px #ddd
-
-	</style>
-	<script lang="typescript">
-		import updateBanner from '../scripts/update-banner';
-
-		this.mixin('i');
-
-		this.user = this.opts.user;
-
-		this.on('mount', () => {
-			window.addEventListener('load', this.scroll);
-			window.addEventListener('scroll', this.scroll);
-			window.addEventListener('resize', this.scroll);
-		});
-
-		this.on('unmount', () => {
-			window.removeEventListener('load', this.scroll);
-			window.removeEventListener('scroll', this.scroll);
-			window.removeEventListener('resize', this.scroll);
-		});
-
-		this.scroll = () => {
-			const top = window.scrollY;
-
-			const z = 1.25; // 奥行き(小さいほど奥)
-			const pos = -(top / z);
-			this.$refs.banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
-
-			const blur = top / 32
-			if (blur <= 10) this.$refs.banner.style.filter = `blur(${blur}px)`;
-		};
-
-		this.onUpdateBanner = () => {
-			if (!this.SIGNIN || this.I.id != this.user.id) return;
-
-			updateBanner(this.I, i => {
-				this.user.banner_url = i.banner_url;
-				this.update();
-			});
-		};
-	</script>
-</mk-user-header>
-
-<mk-user-profile>
-	<div class="friend-form" v-if="SIGNIN && I.id != user.id">
-		<mk-big-follow-button user={ user }/>
-		<p class="followed" v-if="user.is_followed">%i18n:desktop.tags.mk-user.follows-you%</p>
-		<p v-if="user.is_muted">%i18n:desktop.tags.mk-user.muted% <a @click="unmute">%i18n:desktop.tags.mk-user.unmute%</a></p>
-		<p v-if="!user.is_muted"><a @click="mute">%i18n:desktop.tags.mk-user.mute%</a></p>
-	</div>
-	<div class="description" v-if="user.description">{ user.description }</div>
-	<div class="birthday" v-if="user.profile.birthday">
-		<p>%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
-	</div>
-	<div class="twitter" v-if="user.twitter">
-		<p>%fa:B twitter%<a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
-	</div>
-	<div class="status">
-	  <p class="posts-count">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p>
-		<p class="following">%fa:angle-right%<a @click="showFollowing">{ user.following_count }</a>人を<b>フォロー</b></p>
-		<p class="followers">%fa:angle-right%<a @click="showFollowers">{ user.followers_count }</a>人の<b>フォロワー</b></p>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> *:first-child
-				border-top none !important
-
-			> .friend-form
-				padding 16px
-				border-top solid 1px #eee
-
-				> mk-big-follow-button
-					width 100%
-
-				> .followed
-					margin 12px 0 0 0
-					padding 0
-					text-align center
-					line-height 24px
-					font-size 0.8em
-					color #71afc7
-					background #eefaff
-					border-radius 4px
-
-			> .description
-				padding 16px
-				color #555
-				border-top solid 1px #eee
-
-			> .birthday
-				padding 16px
-				color #555
-				border-top solid 1px #eee
-
-				> p
-					margin 0
-
-					> i
-						margin-right 8px
-
-			> .twitter
-				padding 16px
-				color #555
-				border-top solid 1px #eee
-
-				> p
-					margin 0
-
-					> i
-						margin-right 8px
-
-			> .status
-				padding 16px
-				color #555
-				border-top solid 1px #eee
-
-				> p
-					margin 8px 0
-
-					> i
-						margin-left 8px
-						margin-right 8px
-
-	</style>
-	<script lang="typescript">
-		this.age = require('s-age');
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.showFollowing = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-user-following-window')), {
-				user: this.user
-			});
-		};
-
-		this.showFollowers = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-user-followers-window')), {
-				user: this.user
-			});
-		};
-
-		this.mute = () => {
-			this.api('mute/create', {
-				user_id: this.user.id
-			}).then(() => {
-				this.user.is_muted = true;
-				this.update();
-			}, e => {
-				alert('error');
-			});
-		};
-
-		this.unmute = () => {
-			this.api('mute/delete', {
-				user_id: this.user.id
-			}).then(() => {
-				this.user.is_muted = false;
-				this.update();
-			}, e => {
-				alert('error');
-			});
-		};
-	</script>
-</mk-user-profile>
-
-<mk-user-photos>
-	<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
-	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
-	<div class="stream" v-if="!initializing && images.length > 0">
-		<template each={ image in images }>
-			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
-		</template>
-	</div>
-	<p class="empty" v-if="!initializing && images.length == 0">%i18n:desktop.tags.mk-user.photos.no-photos%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> i
-					margin-right 4px
-
-			> .stream
-				display -webkit-flex
-				display -moz-flex
-				display -ms-flex
-				display flex
-				justify-content center
-				flex-wrap wrap
-				padding 8px
-
-				> .img
-					flex 1 1 33%
-					width 33%
-					height 80px
-					background-position center center
-					background-size cover
-					background-clip content-box
-					border solid 2px transparent
-
-			> .initializing
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> i
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		import isPromise from '../../common/scripts/is-promise';
-
-		this.mixin('api');
-
-		this.images = [];
-		this.initializing = true;
-		this.user = null;
-		this.userPromise = isPromise(this.opts.user)
-			? this.opts.user
-			: Promise.resolve(this.opts.user);
-
-		this.on('mount', () => {
-			this.userPromise.then(user => {
-				this.update({
-					user: user
-				});
-
-				this.api('users/posts', {
-					user_id: this.user.id,
-					with_media: true,
-					limit: 9
-				}).then(posts => {
-					this.initializing = false;
-					posts.forEach(post => {
-						post.media.forEach(media => {
-							if (this.images.length < 9) this.images.push(media);
-						});
-					});
-					this.update();
-				});
-			});
-		});
-	</script>
-</mk-user-photos>
-
-<mk-user-frequently-replied-users>
-	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
-	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
-	<div class="user" v-if="!initializing && users.length != 0" each={ _user in users }>
-		<a class="avatar-anchor" href={ '/' + _user.username }>
-			<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>
-		</a>
-		<div class="body">
-			<a class="name" href={ '/' + _user.username } data-user-preview={ _user.id }>{ _user.name }</a>
-			<p class="username">@{ _user.username }</p>
-		</div>
-		<mk-follow-button user={ _user }/>
-	</div>
-	<p class="empty" v-if="!initializing && users.length == 0">%i18n:desktop.tags.mk-user.frequently-replied-users.no-users%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> i
-					margin-right 4px
-
-			> .initializing
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> i
-					margin-right 4px
-
-			> .user
-				padding 16px
-				border-bottom solid 1px #eee
-
-				&:last-child
-					border-bottom none
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				> .avatar-anchor
-					display block
-					float left
-					margin 0 12px 0 0
-
-					> .avatar
-						display block
-						width 42px
-						height 42px
-						margin 0
-						border-radius 8px
-						vertical-align bottom
-
-				> .body
-					float left
-					width calc(100% - 54px)
-
-					> .name
-						margin 0
-						font-size 16px
-						line-height 24px
-						color #555
-
-					> .username
-						display block
-						margin 0
-						font-size 15px
-						line-height 16px
-						color #ccc
-
-				> mk-follow-button
-					position absolute
-					top 16px
-					right 16px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-		this.initializing = true;
-
-		this.on('mount', () => {
-			this.api('users/get_frequently_replied_users', {
-				user_id: this.user.id,
-				limit: 4
-			}).then(docs => {
-				this.update({
-					users: docs.map(doc => doc.user),
-					initializing: false
-				});
-			});
-		});
-	</script>
-</mk-user-frequently-replied-users>
-
-<mk-user-followers-you-know>
-	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
-	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
-	<div v-if="!initializing && users.length > 0">
-	<template each={ user in users }>
-		<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
-	</template>
-	</div>
-	<p class="empty" v-if="!initializing && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> i
-					margin-right 4px
-
-			> div
-				padding 8px
-
-				> a
-					display inline-block
-					margin 4px
-
-					> img
-						width 48px
-						height 48px
-						vertical-align bottom
-						border-radius 100%
-
-			> .initializing
-			> .empty
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> i
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-		this.initializing = true;
-
-		this.on('mount', () => {
-			this.api('users/followers', {
-				user_id: this.user.id,
-				iknow: true,
-				limit: 16
-			}).then(x => {
-				this.update({
-					users: x.users,
-					initializing: false
-				});
-			});
-		});
-	</script>
-</mk-user-followers-you-know>
-
-<mk-user-home>
-	<div>
-		<div ref="left">
-			<mk-user-profile user={ user }/>
-			<mk-user-photos user={ user }/>
-			<mk-user-followers-you-know v-if="SIGNIN && I.id !== user.id" user={ user }/>
-			<p>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time time={ user.last_used_at }/></b></p>
-		</div>
-	</div>
-	<main>
-		<mk-post-detail v-if="user.pinned_post" post={ user.pinned_post } compact={ true }/>
-		<mk-user-timeline ref="tl" user={ user }/>
-	</main>
-	<div>
-		<div ref="right">
-			<mk-calendar-widget warp={ warp } start={ new Date(user.created_at) }/>
-			<mk-activity-widget user={ user }/>
-			<mk-user-frequently-replied-users user={ user }/>
-			<div class="nav"><mk-nav-links/></div>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display flex
-			justify-content center
-			margin 0 auto
-			max-width 1200px
-
-			> main
-			> div > div
-				> *:not(:last-child)
-					margin-bottom 16px
-
-			> main
-				padding 16px
-				width calc(100% - 275px * 2)
-
-				> mk-user-timeline
-					border solid 1px rgba(0, 0, 0, 0.075)
-					border-radius 6px
-
-			> div
-				width 275px
-				margin 0
-
-				&:first-child > div
-					padding 16px 0 16px 16px
-
-					> p
-						display block
-						margin 0
-						padding 0 12px
-						text-align center
-						font-size 0.8em
-						color #aaa
-
-				&:last-child > div
-					padding 16px 16px 16px 0
-
-					> .nav
-						padding 16px
-						font-size 12px
-						color #aaa
-						background #fff
-						border solid 1px rgba(0, 0, 0, 0.075)
-						border-radius 6px
-
-						a
-							color #999
-
-						i
-							color #ccc
-
-	</style>
-	<script lang="typescript">
-		import ScrollFollower from '../scripts/scroll-follower';
-
-		this.mixin('i');
-
-		this.user = this.opts.user;
-
-		this.on('mount', () => {
-			this.$refs.tl.on('loaded', () => {
-				this.$emit('loaded');
-			});
-
-			this.scrollFollowerLeft = new ScrollFollower(this.$refs.left, this.parent.root.getBoundingClientRect().top);
-			this.scrollFollowerRight = new ScrollFollower(this.$refs.right, this.parent.root.getBoundingClientRect().top);
-		});
-
-		this.on('unmount', () => {
-			this.scrollFollowerLeft.dispose();
-			this.scrollFollowerRight.dispose();
-		});
-
-		this.warp = date => {
-			this.$refs.tl.warp(date);
-		};
-	</script>
-</mk-user-home>
-
-<mk-user-graphs>
-	<section>
-		<div>
-			<h1>%fa:pencil-alt%投稿</h1>
-			<mk-user-graphs-activity-chart user={ opts.user }/>
-		</div>
-	</section>
-	<section>
-		<div>
-			<h1>フォロー/フォロワー</h1>
-			<mk-user-friends-graph user={ opts.user }/>
-		</div>
-	</section>
-	<section>
-		<div>
-			<h1>いいね</h1>
-			<mk-user-likes-graph user={ opts.user }/>
-		</div>
-	</section>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> section
-				margin 16px 0
-				color #666
-				border-bottom solid 1px rgba(0, 0, 0, 0.1)
-
-				> div
-					max-width 1200px
-					margin 0 auto
-					padding 0 16px
-
-					> h1
-						margin 0 0 16px 0
-						padding 0
-						font-size 1.3em
-
-						> i
-							margin-right 8px
-
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			this.$emit('loaded');
-		});
-	</script>
-</mk-user-graphs>
-
-<mk-user-graphs-activity-chart>
-	<svg v-if="data" ref="canvas" viewBox="0 0 365 1" preserveAspectRatio="none">
-		<g each={ d, i in data.reverse() }>
-			<rect width="0.8" riot-height={ d.postsH }
-				riot-x={ i + 0.1 } riot-y={ 1 - d.postsH - d.repliesH - d.repostsH }
-				fill="#41ddde"/>
-			<rect width="0.8" riot-height={ d.repliesH }
-				riot-x={ i + 0.1 } riot-y={ 1 - d.repliesH - d.repostsH }
-				fill="#f7796c"/>
-			<rect width="0.8" riot-height={ d.repostsH }
-				riot-x={ i + 0.1 } riot-y={ 1 - d.repostsH }
-				fill="#a1de41"/>
-			</g>
-	</svg>
-	<p>直近1年間分の統計です。一番右が現在で、一番左が1年前です。青は通常の投稿、赤は返信、緑はRepostをそれぞれ表しています。</p>
-	<p>
-		<span>だいたい*1日に<b>{ averageOfAllTypePostsEachDays }回</b>投稿(返信、Repost含む)しています。</span><br>
-		<span>だいたい*1日に<b>{ averageOfPostsEachDays }回</b>投稿(通常の)しています。</span><br>
-		<span>だいたい*1日に<b>{ averageOfRepliesEachDays }回</b>返信しています。</span><br>
-		<span>だいたい*1日に<b>{ averageOfRepostsEachDays }回</b>Repostしています。</span><br>
-	</p>
-	<p>* 中央値</p>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> svg
-				display block
-				width 100%
-				height 180px
-
-				> rect
-					transform-origin center
-
-	</style>
-	<script lang="typescript">
-		import getMedian from '../../common/scripts/get-median';
-
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.on('mount', () => {
-			this.api('aggregation/users/activity', {
-				user_id: this.user.id,
-				limit: 365
-			}).then(data => {
-				data.forEach(d => d.total = d.posts + d.replies + d.reposts);
-				this.peak = Math.max.apply(null, data.map(d => d.total));
-				data.forEach(d => {
-					d.postsH = d.posts / this.peak;
-					d.repliesH = d.replies / this.peak;
-					d.repostsH = d.reposts / this.peak;
-				});
-
-				this.update({
-					data,
-					averageOfAllTypePostsEachDays: getMedian(data.map(d => d.total)),
-					averageOfPostsEachDays: getMedian(data.map(d => d.posts)),
-					averageOfRepliesEachDays: getMedian(data.map(d => d.replies)),
-					averageOfRepostsEachDays: getMedian(data.map(d => d.reposts))
-				});
-			});
-		});
-	</script>
-</mk-user-graphs-activity-chart>
diff --git a/src/web/app/desktop/tags/users-list.tag b/src/web/app/desktop/tags/users-list.tag
deleted file mode 100644
index bf002ae552..0000000000
--- a/src/web/app/desktop/tags/users-list.tag
+++ /dev/null
@@ -1,138 +0,0 @@
-<mk-users-list>
-	<nav>
-		<div>
-			<span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて<span>{ opts.count }</span></span>
-			<span v-if="SIGNIN && opts.youKnowCount" data-is-active={ mode == 'iknow' } @click="setMode.bind(this, 'iknow')">知り合い<span>{ opts.youKnowCount }</span></span>
-		</div>
-	</nav>
-	<div class="users" v-if="!fetching && users.length != 0">
-		<div each={ users }>
-			<mk-list-user user={ this }/>
-		</div>
-	</div>
-	<button class="more" v-if="!fetching && next != null" @click="more" disabled={ moreFetching }>
-		<span v-if="!moreFetching">もっと</span>
-		<span v-if="moreFetching">読み込み中<mk-ellipsis/></span>
-	</button>
-	<p class="no" v-if="!fetching && users.length == 0">{ opts.noUsers }</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			height 100%
-			background #fff
-
-			> nav
-				z-index 1
-				box-shadow 0 1px 0 rgba(#000, 0.1)
-
-				> div
-					display flex
-					justify-content center
-					margin 0 auto
-					max-width 600px
-
-					> span
-						display block
-						flex 1 1
-						text-align center
-						line-height 52px
-						font-size 14px
-						color #657786
-						border-bottom solid 2px transparent
-						cursor pointer
-
-						*
-							pointer-events none
-
-						&[data-is-active]
-							font-weight bold
-							color $theme-color
-							border-color $theme-color
-							cursor default
-
-						> span
-							display inline-block
-							margin-left 4px
-							padding 2px 5px
-							font-size 12px
-							line-height 1
-							color #888
-							background #eee
-							border-radius 20px
-
-			> .users
-				height calc(100% - 54px)
-				overflow auto
-
-				> *
-					border-bottom solid 1px rgba(0, 0, 0, 0.05)
-
-					> *
-						max-width 600px
-						margin 0 auto
-
-			> .no
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> .fetching
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-
-		this.limit = 30;
-		this.mode = 'all';
-
-		this.fetching = true;
-		this.moreFetching = false;
-
-		this.on('mount', () => {
-			this.fetch(() => this.$emit('loaded'));
-		});
-
-		this.fetch = cb => {
-			this.update({
-				fetching: true
-			});
-			this.opts.fetch(this.mode == 'iknow', this.limit, null, obj => {
-				this.update({
-					fetching: false,
-					users: obj.users,
-					next: obj.next
-				});
-				if (cb) cb();
-			});
-		};
-
-		this.more = () => {
-			this.update({
-				moreFetching: true
-			});
-			this.opts.fetch(this.mode == 'iknow', this.limit, this.cursor, obj => {
-				this.update({
-					moreFetching: false,
-					users: this.users.concat(obj.users),
-					next: obj.next
-				});
-			});
-		};
-
-		this.setMode = mode => {
-			this.update({
-				mode: mode
-			});
-			this.fetch();
-		};
-	</script>
-</mk-users-list>
diff --git a/src/web/app/desktop/tags/widgets/activity.tag b/src/web/app/desktop/tags/widgets/activity.tag
deleted file mode 100644
index 8c20ef5a68..0000000000
--- a/src/web/app/desktop/tags/widgets/activity.tag
+++ /dev/null
@@ -1,246 +0,0 @@
-<mk-activity-widget data-melt={ design == 2 }>
-	<template v-if="design == 0">
-		<p class="title">%fa:chart-bar%%i18n:desktop.tags.mk-activity-widget.title%</p>
-		<button @click="toggle" title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
-	</template>
-	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<mk-activity-widget-calender v-if="!initializing && view == 0" data={ [].concat(activity) }/>
-	<mk-activity-widget-chart v-if="!initializing && view == 1" data={ [].concat(activity) }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			&[data-melt]
-				background transparent !important
-				border none !important
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				right 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-			> .initializing
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.design = this.opts.design || 0;
-		this.view = this.opts.view || 0;
-
-		this.user = this.opts.user;
-		this.initializing = true;
-
-		this.on('mount', () => {
-			this.api('aggregation/users/activity', {
-				user_id: this.user.id,
-				limit: 20 * 7
-			}).then(activity => {
-				this.update({
-					initializing: false,
-					activity
-				});
-			});
-		});
-
-		this.toggle = () => {
-			this.view++;
-			if (this.view == 2) this.view = 0;
-			this.update();
-			this.$emit('view-changed', this.view);
-		};
-	</script>
-</mk-activity-widget>
-
-<mk-activity-widget-calender>
-	<svg viewBox="0 0 21 7" preserveAspectRatio="none">
-		<rect each={ data } class="day"
-			width="1" height="1"
-			riot-x={ x } riot-y={ date.weekday }
-			rx="1" ry="1"
-			fill="transparent">
-			<title>{ date.year }/{ date.month }/{ date.day }<br/>Post: { posts }, Reply: { replies }, Repost: { reposts }</title>
-		</rect>
-		<rect each={ data }
-			riot-width={ v } riot-height={ v }
-			riot-x={ x + ((1 - v) / 2) } riot-y={ date.weekday + ((1 - v) / 2) }
-			rx="1" ry="1"
-			fill={ color }
-			style="pointer-events: none;"/>
-		<rect class="today"
-			width="1" height="1"
-			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
-			rx="1" ry="1"
-			fill="none"
-			stroke-width="0.1"
-			stroke="#f73520"/>
-	</svg>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> svg
-				display block
-				padding 10px
-				width 100%
-
-				> rect
-					transform-origin center
-
-					&.day
-						&:hover
-							fill rgba(0, 0, 0, 0.05)
-
-	</style>
-	<script lang="typescript">
-		this.data = this.opts.data;
-		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
-		const peak = Math.max.apply(null, this.data.map(d => d.total));
-
-		let x = 0;
-		this.data.reverse().forEach(d => {
-			d.x = x;
-			d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
-
-			d.v = d.total / (peak / 2);
-			if (d.v > 1) d.v = 1;
-			const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
-			const cs = d.v * 100;
-			const cl = 15 + ((1 - d.v) * 80);
-			d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
-
-			if (d.date.weekday == 6) x++;
-		});
-	</script>
-</mk-activity-widget-calender>
-
-<mk-activity-widget-chart>
-	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none" onmousedown={ onMousedown }>
-		<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
-		<polyline
-			riot-points={ pointsPost }
-			fill="none"
-			stroke-width="1"
-			stroke="#41ddde"/>
-		<polyline
-			riot-points={ pointsReply }
-			fill="none"
-			stroke-width="1"
-			stroke="#f7796c"/>
-		<polyline
-			riot-points={ pointsRepost }
-			fill="none"
-			stroke-width="1"
-			stroke="#a1de41"/>
-		<polyline
-			riot-points={ pointsTotal }
-			fill="none"
-			stroke-width="1"
-			stroke="#555"
-			stroke-dasharray="2 2"/>
-	</svg>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> svg
-				display block
-				padding 10px
-				width 100%
-				cursor all-scroll
-	</style>
-	<script lang="typescript">
-		this.viewBoxX = 140;
-		this.viewBoxY = 60;
-		this.zoom = 1;
-		this.pos = 0;
-
-		this.data = this.opts.data.reverse();
-		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
-		const peak = Math.max.apply(null, this.data.map(d => d.total));
-
-		this.on('mount', () => {
-			this.render();
-		});
-
-		this.render = () => {
-			this.update({
-				pointsPost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' '),
-				pointsReply: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
-				pointsRepost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' '),
-				pointsTotal: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
-			});
-		};
-
-		this.onMousedown = e => {
-			e.preventDefault();
-
-			const clickX = e.clientX;
-			const clickY = e.clientY;
-			const baseZoom = this.zoom;
-			const basePos = this.pos;
-
-			// 動かした時
-			dragListen(me => {
-				let moveLeft = me.clientX - clickX;
-				let moveTop = me.clientY - clickY;
-
-				this.zoom = baseZoom + (-moveTop / 20);
-				this.pos = basePos + moveLeft;
-				if (this.zoom < 1) this.zoom = 1;
-				if (this.pos > 0) this.pos = 0;
-				if (this.pos < -(((this.data.length - 1) * this.zoom) - this.viewBoxX)) this.pos = -(((this.data.length - 1) * this.zoom) - this.viewBoxX);
-
-				this.render();
-			});
-		};
-
-		function dragListen(fn) {
-			window.addEventListener('mousemove',  fn);
-			window.addEventListener('mouseleave', dragClear.bind(null, fn));
-			window.addEventListener('mouseup',    dragClear.bind(null, fn));
-		}
-
-		function dragClear(fn) {
-			window.removeEventListener('mousemove',  fn);
-			window.removeEventListener('mouseleave', dragClear);
-			window.removeEventListener('mouseup',    dragClear);
-		}
-	</script>
-</mk-activity-widget-chart>
-
diff --git a/src/web/app/desktop/tags/widgets/calendar.tag b/src/web/app/desktop/tags/widgets/calendar.tag
deleted file mode 100644
index d20180f1c3..0000000000
--- a/src/web/app/desktop/tags/widgets/calendar.tag
+++ /dev/null
@@ -1,241 +0,0 @@
-<mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }>
-	<template v-if="opts.design == 0 || opts.design == 1">
-		<button @click="prev" title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
-		<p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
-		<button @click="next" title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
-	</template>
-
-	<div class="calendar">
-		<div class="weekday" v-if="opts.design == 0 || opts.design == 2 || opts.design == 4} each={ day, i in Array(7).fill(0)"
-			data-today={ year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i }
-			data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div>
-		<div each={ day, i in Array(paddingDays).fill(0) }></div>
-		<div class="day" each={ day, i in Array(days).fill(0) }
-				data-today={ isToday(i + 1) }
-				data-selected={ isSelected(i + 1) }
-				data-is-out-of-range={ isOutOfRange(i + 1) }
-				data-is-donichi={ isDonichi(i + 1) }
-				@click="go.bind(null, i + 1)"
-				title={ isOutOfRange(i + 1) ? null : '%i18n:desktop.tags.mk-calendar-widget.go%' }><div>{ i + 1 }</div></div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #777
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			&[data-melt]
-				background transparent !important
-				border none !important
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				text-align center
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> button
-				position absolute
-				z-index 2
-				top 0
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color #ccc
-
-				&:hover
-					color #aaa
-
-				&:active
-					color #999
-
-				&:first-of-type
-					left 0
-
-				&:last-of-type
-					right 0
-
-			> .calendar
-				display flex
-				flex-wrap wrap
-				padding 16px
-
-				*
-					user-select none
-
-				> div
-					width calc(100% * (1/7))
-					text-align center
-					line-height 32px
-					font-size 14px
-
-					&.weekday
-						color #19a2a9
-
-						&[data-is-donichi]
-							color #ef95a0
-
-						&[data-today]
-							box-shadow 0 0 0 1px #19a2a9 inset
-							border-radius 6px
-
-							&[data-is-donichi]
-								box-shadow 0 0 0 1px #ef95a0 inset
-
-					&.day
-						cursor pointer
-						color #777
-
-						> div
-							border-radius 6px
-
-						&:hover > div
-							background rgba(0, 0, 0, 0.025)
-
-						&:active > div
-							background rgba(0, 0, 0, 0.05)
-
-						&[data-is-donichi]
-							color #ef95a0
-
-						&[data-is-out-of-range]
-							cursor default
-							color rgba(#777, 0.5)
-
-							&[data-is-donichi]
-								color rgba(#ef95a0, 0.5)
-
-						&[data-selected]
-							font-weight bold
-
-							> div
-								background rgba(0, 0, 0, 0.025)
-
-							&:active > div
-								background rgba(0, 0, 0, 0.05)
-
-						&[data-today]
-							> div
-								color $theme-color-foreground
-								background $theme-color
-
-							&:hover > div
-								background lighten($theme-color, 10%)
-
-							&:active > div
-								background darken($theme-color, 10%)
-
-	</style>
-	<script lang="typescript">
-		if (this.opts.design == null) this.opts.design = 0;
-
-		const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-
-		function isLeapYear(year) {
-			return (year % 400 == 0) ? true :
-				(year % 100 == 0) ? false :
-					(year % 4 == 0) ? true :
-						false;
-		}
-
-		this.today = new Date();
-		this.year = this.today.getFullYear();
-		this.month = this.today.getMonth() + 1;
-		this.selected = this.today;
-		this.weekdayText = [
-			'%i18n:common.weekday-short.sunday%',
-			'%i18n:common.weekday-short.monday%',
-			'%i18n:common.weekday-short.tuesday%',
-			'%i18n:common.weekday-short.wednesday%',
-			'%i18n:common.weekday-short.thursday%',
-			'%i18n:common.weekday-short.friday%',
-			'%i18n:common.weekday-short.satruday%'
-		];
-
-		this.on('mount', () => {
-			this.calc();
-		});
-
-		this.isToday = day => {
-			return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate();
-		};
-
-		this.isSelected = day => {
-			return this.year == this.selected.getFullYear() && this.month == this.selected.getMonth() + 1 && day == this.selected.getDate();
-		};
-
-		this.isOutOfRange = day => {
-			const test = (new Date(this.year, this.month - 1, day)).getTime();
-			return test > this.today.getTime() ||
-				(this.opts.start ? test < this.opts.start.getTime() : false);
-		};
-
-		this.isDonichi = day => {
-			const weekday = (new Date(this.year, this.month - 1, day)).getDay();
-			return weekday == 0 || weekday == 6;
-		};
-
-		this.calc = () => {
-			let days = eachMonthDays[this.month - 1];
-
-			// うるう年なら+1日
-			if (this.month == 2 && isLeapYear(this.year)) days++;
-
-			const date = new Date(this.year, this.month - 1, 1);
-			const weekday = date.getDay();
-
-			this.update({
-				paddingDays: weekday,
-				days: days
-			});
-		};
-
-		this.prev = () => {
-			if (this.month == 1) {
-				this.update({
-					year: this.year - 1,
-					month: 12
-				});
-			} else {
-				this.update({
-					month: this.month - 1
-				});
-			}
-			this.calc();
-		};
-
-		this.next = () => {
-			if (this.month == 12) {
-				this.update({
-					year: this.year + 1,
-					month: 1
-				});
-			} else {
-				this.update({
-					month: this.month + 1
-				});
-			}
-			this.calc();
-		};
-
-		this.go = day => {
-			if (this.isOutOfRange(day)) return;
-			const date = new Date(this.year, this.month - 1, day, 23, 59, 59, 999);
-			this.update({
-				selected: date
-			});
-			this.opts.warp(date);
-		};
-</script>
-</mk-calendar-widget>
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
deleted file mode 100644
index 051b43f076..0000000000
--- a/src/web/app/desktop/tags/window.tag
+++ /dev/null
@@ -1,549 +0,0 @@
-<mk-window data-flexible={ isFlexible } ondragover={ ondragover }>
-	<div class="bg" ref="bg" show={ isModal } @click="bgClick"></div>
-	<div class="main" ref="main" tabindex="-1" data-is-modal={ isModal } onmousedown={ onBodyMousedown } onkeydown={ onKeydown }>
-		<div class="body">
-			<header ref="header" onmousedown={ onHeaderMousedown }>
-				<h1 data-yield="header"><yield from="header"/></h1>
-				<div>
-					<button class="popout" v-if="popoutUrl" onmousedown={ repelMove } @click="popout" title="ポップアウト">%fa:R window-restore%</button>
-					<button class="close" v-if="canClose" onmousedown={ repelMove } @click="close" title="閉じる">%fa:times%</button>
-				</div>
-			</header>
-			<div class="content" data-yield="content"><yield from="content"/></div>
-		</div>
-		<div class="handle top" v-if="canResize" onmousedown={ onTopHandleMousedown }></div>
-		<div class="handle right" v-if="canResize" onmousedown={ onRightHandleMousedown }></div>
-		<div class="handle bottom" v-if="canResize" onmousedown={ onBottomHandleMousedown }></div>
-		<div class="handle left" v-if="canResize" onmousedown={ onLeftHandleMousedown }></div>
-		<div class="handle top-left" v-if="canResize" onmousedown={ onTopLeftHandleMousedown }></div>
-		<div class="handle top-right" v-if="canResize" onmousedown={ onTopRightHandleMousedown }></div>
-		<div class="handle bottom-right" v-if="canResize" onmousedown={ onBottomRightHandleMousedown }></div>
-		<div class="handle bottom-left" v-if="canResize" onmousedown={ onBottomLeftHandleMousedown }></div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .bg
-				display block
-				position fixed
-				z-index 2048
-				top 0
-				left 0
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.7)
-				opacity 0
-				pointer-events none
-
-			> .main
-				display block
-				position fixed
-				z-index 2048
-				top 15%
-				left 0
-				margin 0
-				opacity 0
-				pointer-events none
-
-				&:focus
-					&:not([data-is-modal])
-						> .body
-							box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.2)
-
-				> .handle
-					$size = 8px
-
-					position absolute
-
-					&.top
-						top -($size)
-						left 0
-						width 100%
-						height $size
-						cursor ns-resize
-
-					&.right
-						top 0
-						right -($size)
-						width $size
-						height 100%
-						cursor ew-resize
-
-					&.bottom
-						bottom -($size)
-						left 0
-						width 100%
-						height $size
-						cursor ns-resize
-
-					&.left
-						top 0
-						left -($size)
-						width $size
-						height 100%
-						cursor ew-resize
-
-					&.top-left
-						top -($size)
-						left -($size)
-						width $size * 2
-						height $size * 2
-						cursor nwse-resize
-
-					&.top-right
-						top -($size)
-						right -($size)
-						width $size * 2
-						height $size * 2
-						cursor nesw-resize
-
-					&.bottom-right
-						bottom -($size)
-						right -($size)
-						width $size * 2
-						height $size * 2
-						cursor nwse-resize
-
-					&.bottom-left
-						bottom -($size)
-						left -($size)
-						width $size * 2
-						height $size * 2
-						cursor nesw-resize
-
-				> .body
-					height 100%
-					overflow hidden
-					background #fff
-					border-radius 6px
-					box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
-
-					> header
-						$header-height = 40px
-
-						z-index 128
-						height $header-height
-						overflow hidden
-						white-space nowrap
-						cursor move
-						background #fff
-						border-radius 6px 6px 0 0
-						box-shadow 0 1px 0 rgba(#000, 0.1)
-
-						&, *
-							user-select none
-
-						> h1
-							pointer-events none
-							display block
-							margin 0 auto
-							overflow hidden
-							height $header-height
-							text-overflow ellipsis
-							text-align center
-							font-size 1em
-							line-height $header-height
-							font-weight normal
-							color #666
-
-						> div:last-child
-							position absolute
-							top 0
-							right 0
-							display block
-							z-index 1
-
-							> *
-								display inline-block
-								margin 0
-								padding 0
-								cursor pointer
-								font-size 1.2em
-								color rgba(#000, 0.4)
-								border none
-								outline none
-								background transparent
-
-								&:hover
-									color rgba(#000, 0.6)
-
-								&:active
-									color darken(#000, 30%)
-
-								> [data-fa]
-									padding 0
-									width $header-height
-									line-height $header-height
-									text-align center
-
-					> .content
-						height 100%
-
-			&:not([flexible])
-				> .main > .body > .content
-					height calc(100% - 40px)
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-		import contains from '../../common/scripts/contains';
-
-		this.minHeight = 40;
-		this.minWidth = 200;
-
-		this.isModal = this.opts.isModal != null ? this.opts.isModal : false;
-		this.canClose = this.opts.canClose != null ? this.opts.canClose : true;
-		this.popoutUrl = this.opts.popout;
-		this.isFlexible = this.opts.height == null;
-		this.canResize = !this.isFlexible;
-
-		this.on('mount', () => {
-			this.$refs.main.style.width = this.opts.width || '530px';
-			this.$refs.main.style.height = this.opts.height || 'auto';
-
-			this.$refs.main.style.top = '15%';
-			this.$refs.main.style.left = (window.innerWidth / 2) - (this.$refs.main.offsetWidth / 2) + 'px';
-
-			this.$refs.header.addEventListener('contextmenu', e => {
-				e.preventDefault();
-			});
-
-			window.addEventListener('resize', this.onBrowserResize);
-
-			this.open();
-		});
-
-		this.on('unmount', () => {
-			window.removeEventListener('resize', this.onBrowserResize);
-		});
-
-		this.onBrowserResize = () => {
-			const position = this.$refs.main.getBoundingClientRect();
-			const browserWidth = window.innerWidth;
-			const browserHeight = window.innerHeight;
-			const windowWidth = this.$refs.main.offsetWidth;
-			const windowHeight = this.$refs.main.offsetHeight;
-			if (position.left < 0) this.$refs.main.style.left = 0;
-			if (position.top < 0) this.$refs.main.style.top = 0;
-			if (position.left + windowWidth > browserWidth) this.$refs.main.style.left = browserWidth - windowWidth + 'px';
-			if (position.top + windowHeight > browserHeight) this.$refs.main.style.top = browserHeight - windowHeight + 'px';
-		};
-
-		this.open = () => {
-			this.$emit('opening');
-
-			this.top();
-
-			if (this.isModal) {
-				this.$refs.bg.style.pointerEvents = 'auto';
-				anime({
-					targets: this.$refs.bg,
-					opacity: 1,
-					duration: 100,
-					easing: 'linear'
-				});
-			}
-
-			this.$refs.main.style.pointerEvents = 'auto';
-			anime({
-				targets: this.$refs.main,
-				opacity: 1,
-				scale: [1.1, 1],
-				duration: 200,
-				easing: 'easeOutQuad'
-			});
-
-			//this.$refs.main.focus();
-
-			setTimeout(() => {
-				this.$emit('opened');
-			}, 300);
-		};
-
-		this.popout = () => {
-			const position = this.$refs.main.getBoundingClientRect();
-
-			const width = parseInt(getComputedStyle(this.$refs.main, '').width, 10);
-			const height = parseInt(getComputedStyle(this.$refs.main, '').height, 10);
-			const x = window.screenX + position.left;
-			const y = window.screenY + position.top;
-
-			const url = typeof this.popoutUrl == 'function' ? this.popoutUrl() : this.popoutUrl;
-
-			window.open(url, url,
-				`height=${height},width=${width},left=${x},top=${y}`);
-
-			this.close();
-		};
-
-		this.close = () => {
-			this.$emit('closing');
-
-			if (this.isModal) {
-				this.$refs.bg.style.pointerEvents = 'none';
-				anime({
-					targets: this.$refs.bg,
-					opacity: 0,
-					duration: 300,
-					easing: 'linear'
-				});
-			}
-
-			this.$refs.main.style.pointerEvents = 'none';
-
-			anime({
-				targets: this.$refs.main,
-				opacity: 0,
-				scale: 0.8,
-				duration: 300,
-				easing: [0.5, -0.5, 1, 0.5]
-			});
-
-			setTimeout(() => {
-				this.$emit('closed');
-			}, 300);
-		};
-
-		// 最前面へ移動します
-		this.top = () => {
-			let z = 0;
-
-			const ws = document.querySelectorAll('mk-window');
-			ws.forEach(w => {
-				if (w == this.root) return;
-				const m = w.querySelector(':scope > .main');
-				const mz = Number(document.defaultView.getComputedStyle(m, null).zIndex);
-				if (mz > z) z = mz;
-			});
-
-			if (z > 0) {
-				this.$refs.main.style.zIndex = z + 1;
-				if (this.isModal) this.$refs.bg.style.zIndex = z + 1;
-			}
-		};
-
-		this.repelMove = e => {
-			e.stopPropagation();
-			return true;
-		};
-
-		this.bgClick = () => {
-			if (this.canClose) this.close();
-		};
-
-		this.onBodyMousedown = () => {
-			this.top();
-		};
-
-		// ヘッダー掴み時
-		this.onHeaderMousedown = e => {
-			e.preventDefault();
-
-			if (!contains(this.$refs.main, document.activeElement)) this.$refs.main.focus();
-
-			const position = this.$refs.main.getBoundingClientRect();
-
-			const clickX = e.clientX;
-			const clickY = e.clientY;
-			const moveBaseX = clickX - position.left;
-			const moveBaseY = clickY - position.top;
-			const browserWidth = window.innerWidth;
-			const browserHeight = window.innerHeight;
-			const windowWidth = this.$refs.main.offsetWidth;
-			const windowHeight = this.$refs.main.offsetHeight;
-
-			// 動かした時
-			dragListen(me => {
-				let moveLeft = me.clientX - moveBaseX;
-				let moveTop = me.clientY - moveBaseY;
-
-				// 上はみ出し
-				if (moveTop < 0) moveTop = 0;
-
-				// 左はみ出し
-				if (moveLeft < 0) moveLeft = 0;
-
-				// 下はみ出し
-				if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
-
-				// 右はみ出し
-				if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
-
-				this.$refs.main.style.left = moveLeft + 'px';
-				this.$refs.main.style.top = moveTop + 'px';
-			});
-		};
-
-		// 上ハンドル掴み時
-		this.onTopHandleMousedown = e => {
-			e.preventDefault();
-
-			const base = e.clientY;
-			const height = parseInt(getComputedStyle(this.$refs.main, '').height, 10);
-			const top = parseInt(getComputedStyle(this.$refs.main, '').top, 10);
-
-			// 動かした時
-			dragListen(me => {
-				const move = me.clientY - base;
-				if (top + move > 0) {
-					if (height + -move > this.minHeight) {
-						this.applyTransformHeight(height + -move);
-						this.applyTransformTop(top + move);
-					} else { // 最小の高さより小さくなろうとした時
-						this.applyTransformHeight(this.minHeight);
-						this.applyTransformTop(top + (height - this.minHeight));
-					}
-				} else { // 上のはみ出し時
-					this.applyTransformHeight(top + height);
-					this.applyTransformTop(0);
-				}
-			});
-		};
-
-		// 右ハンドル掴み時
-		this.onRightHandleMousedown = e => {
-			e.preventDefault();
-
-			const base = e.clientX;
-			const width = parseInt(getComputedStyle(this.$refs.main, '').width, 10);
-			const left = parseInt(getComputedStyle(this.$refs.main, '').left, 10);
-			const browserWidth = window.innerWidth;
-
-			// 動かした時
-			dragListen(me => {
-				const move = me.clientX - base;
-				if (left + width + move < browserWidth) {
-					if (width + move > this.minWidth) {
-						this.applyTransformWidth(width + move);
-					} else { // 最小の幅より小さくなろうとした時
-						this.applyTransformWidth(this.minWidth);
-					}
-				} else { // 右のはみ出し時
-					this.applyTransformWidth(browserWidth - left);
-				}
-			});
-		};
-
-		// 下ハンドル掴み時
-		this.onBottomHandleMousedown = e => {
-			e.preventDefault();
-
-			const base = e.clientY;
-			const height = parseInt(getComputedStyle(this.$refs.main, '').height, 10);
-			const top = parseInt(getComputedStyle(this.$refs.main, '').top, 10);
-			const browserHeight = window.innerHeight;
-
-			// 動かした時
-			dragListen(me => {
-				const move = me.clientY - base;
-				if (top + height + move < browserHeight) {
-					if (height + move > this.minHeight) {
-						this.applyTransformHeight(height + move);
-					} else { // 最小の高さより小さくなろうとした時
-						this.applyTransformHeight(this.minHeight);
-					}
-				} else { // 下のはみ出し時
-					this.applyTransformHeight(browserHeight - top);
-				}
-			});
-		};
-
-		// 左ハンドル掴み時
-		this.onLeftHandleMousedown = e => {
-			e.preventDefault();
-
-			const base = e.clientX;
-			const width = parseInt(getComputedStyle(this.$refs.main, '').width, 10);
-			const left = parseInt(getComputedStyle(this.$refs.main, '').left, 10);
-
-			// 動かした時
-			dragListen(me => {
-				const move = me.clientX - base;
-				if (left + move > 0) {
-					if (width + -move > this.minWidth) {
-						this.applyTransformWidth(width + -move);
-						this.applyTransformLeft(left + move);
-					} else { // 最小の幅より小さくなろうとした時
-						this.applyTransformWidth(this.minWidth);
-						this.applyTransformLeft(left + (width - this.minWidth));
-					}
-				} else { // 左のはみ出し時
-					this.applyTransformWidth(left + width);
-					this.applyTransformLeft(0);
-				}
-			});
-		};
-
-		// 左上ハンドル掴み時
-		this.onTopLeftHandleMousedown = e => {
-			this.onTopHandleMousedown(e);
-			this.onLeftHandleMousedown(e);
-		};
-
-		// 右上ハンドル掴み時
-		this.onTopRightHandleMousedown = e => {
-			this.onTopHandleMousedown(e);
-			this.onRightHandleMousedown(e);
-		};
-
-		// 右下ハンドル掴み時
-		this.onBottomRightHandleMousedown = e => {
-			this.onBottomHandleMousedown(e);
-			this.onRightHandleMousedown(e);
-		};
-
-		// 左下ハンドル掴み時
-		this.onBottomLeftHandleMousedown = e => {
-			this.onBottomHandleMousedown(e);
-			this.onLeftHandleMousedown(e);
-		};
-
-		// 高さを適用
-		this.applyTransformHeight = height => {
-			this.$refs.main.style.height = height + 'px';
-		};
-
-		// 幅を適用
-		this.applyTransformWidth = width => {
-			this.$refs.main.style.width = width + 'px';
-		};
-
-		// Y座標を適用
-		this.applyTransformTop = top => {
-			this.$refs.main.style.top = top + 'px';
-		};
-
-		// X座標を適用
-		this.applyTransformLeft = left => {
-			this.$refs.main.style.left = left + 'px';
-		};
-
-		function dragListen(fn) {
-			window.addEventListener('mousemove',  fn);
-			window.addEventListener('mouseleave', dragClear.bind(null, fn));
-			window.addEventListener('mouseup',    dragClear.bind(null, fn));
-		}
-
-		function dragClear(fn) {
-			window.removeEventListener('mousemove',  fn);
-			window.removeEventListener('mouseleave', dragClear);
-			window.removeEventListener('mouseup',    dragClear);
-		}
-
-		this.ondragover = e => {
-			e.dataTransfer.dropEffect = 'none';
-		};
-
-		this.onKeydown = e => {
-			if (e.which == 27) { // Esc
-				if (this.canClose) {
-					e.preventDefault();
-					e.stopPropagation();
-					this.close();
-				}
-			}
-		};
-
-	</script>
-</mk-window>
-- 
cgit v1.2.3-freya