2.0.0

i18n: Add Polish translation

.eslintrc

@@ -14,6 +14,7 @@
 		"vue/no-unused-vars": false,
 		"vue/attributes-order": false,
 		"vue/require-prop-types": false,
+		"vue/require-default-prop": false,
 		"no-console": 0,
 		"no-unused-vars": 0,
 		"no-empty": 0

.gitignore

@@ -10,4 +10,3 @@ npm-debug.log
 run.bat
 api-docs.json
 package-lock.json
-version.json

README.md

@@ -18,10 +18,11 @@ ultimately sophisticated new type of mini-blog based SNS.
 
 :sparkles: Features
 ----------------------------------------------------------------
-* Automatically updated timeline
 * Reactions
+* User lists
 * Private messages
-* ServiceWorker support
+* Mute
+* Real time contents
 * ActivityPub compatible
 
 and more! You can touch with your own eyes at https://misskey.xyz/.
@@ -44,9 +45,9 @@ If you want to translate Misskey, please see [Translation guide](./docs/translat
 
 :mortar_board: Notable contributors
 ----------------------------------------------------------------
-| ![syuilo][syuilo-icon] | ![Morisawa Aya][ayamorisawa-icon] | ![otofune][otofune-icon] | ![akihikodaki][akihikodaki-icon] | ![rinsuki][rinsuki-icon] |
-|:-:|:-:|:-:|:-:|:-:|
-| [syuilo][syuilo-link]<br>Owner | [Aya Morisawa][ayamorisawa-link]<br>Collaborator | [otofune][otofune-link]<br>Collaborator | [akihikodaki][akihikodaki-link] | [rinsuki][rinsuki-link] |
+| ![syuilo][syuilo-icon] | ![Morisawa Aya][ayamorisawa-icon] | ![otofune][otofune-icon] | ![akihikodaki][akihikodaki-icon] | ![tamaina][tamaina-icon] | ![rinsuki][rinsuki-icon] |
+|:-:|:-:|:-:|:-:|:-:|:-:|
+| [syuilo][syuilo-link]<br>Owner | [Aya Morisawa][ayamorisawa-link]<br>Collaborator | [otofune][otofune-link]<br>Collaborator | [akihikodaki][akihikodaki-link] | [tamaina][tamaina-link] | [rinsuki][rinsuki-link] |
 
 [List of all contributors](https://github.com/syuilo/misskey/graphs/contributors)
 
@@ -92,6 +93,8 @@ Misskey is an open-source software licensed under [GNU AGPLv3](LICENSE).
 [akihikodaki-icon]: https://avatars2.githubusercontent.com/u/17036990?s=70&v=4
 [rinsuki-link]:     https://github.com/rinsuki
 [rinsuki-icon]:     https://avatars0.githubusercontent.com/u/6533808?s=70&v=4
+[tamaina-link]:     https://github.com/tamaina
+[tamaina-icon]:     https://avatars1.githubusercontent.com/u/7973572?s=70&v=4
 
 [mirro-san-link]:   https://github.com/mirro-san
 [mirro-san-icon]:   https://avatars1.githubusercontent.com/u/17948612?s=70&v=4

cli/clean-drive.js

@@ -0,0 +1,84 @@
+const chalk = require('chalk');
+const log = require('single-line-log').stdout;
+const sequential = require('promise-sequential');
+const { default: DriveFile, deleteDriveFile } = require('../built/models/drive-file');
+const { default: Note } = require('../built/models/note');
+const { default: MessagingMessage } = require('../built/models/messaging-message');
+const { default: User } = require('../built/models/user');
+
+const args = process.argv.slice(2);
+
+const skip = parseInt(args[0] || '0', 10);
+
+async function main() {
+	const promiseGens = [];
+
+	const count = await DriveFile.count({});
+
+	let prev;
+
+	for (let i = skip; i < count; i++) {
+		promiseGens.push(() => {
+			const promise = new Promise(async (res, rej) => {
+				function skip() {
+					res([i, file, false]);
+				}
+
+				const file = await DriveFile.findOne(prev ? {
+					_id: { $lt: prev._id }
+				} : {}, {
+					sort: {
+						_id: -1
+					}
+				});
+
+				prev = file;
+
+				if (file == null) return skip();
+
+				log(chalk`{gray ${i}} scanning {bold ${file._id}} ${file.filename} ...`);
+
+				const attachingUsersCount = await User.count({
+					$or: [{
+						avatarId: file._id
+					}, {
+						bannerId: file._id
+					}]
+				}, { limit: 1 });
+				if (attachingUsersCount !== 0) return skip();
+
+				const attachingNotesCount = await Note.count({
+					mediaIds: file._id
+				}, { limit: 1 });
+				if (attachingNotesCount !== 0) return skip();
+
+				const attachingMessagesCount = await MessagingMessage.count({
+					fileId: file._id
+				}, { limit: 1 });
+				if (attachingMessagesCount !== 0) return skip();
+
+				deleteDriveFile(file).then(() => {
+					res([i, file, true]);
+				}).catch(rej);
+			});
+
+			promise.then(([i, file, deleted]) => {
+				if (deleted) {
+					log(chalk`{gray ${i}} {red deleted: {bold ${file._id}} ${file.filename}}`);
+				} else {
+					log(chalk`{gray ${i}} {green skipped: {bold ${file._id}} ${file.filename}}`);
+				}
+				log.clear();
+				console.log();
+			});
+
+			return promise;
+		});
+	}
+
+	return await sequential(promiseGens);
+}
+
+main().then(() => {
+	console.log('done');
+}).catch(console.error);

cli/init.js

@@ -140,8 +140,8 @@ inquirer.prompt(form).then(as => {
 			pass: as['es_pass'] || null
 		},
 		recaptcha: {
-			siteKey: as['recaptcha_site'],
-			secretKey: as['recaptcha_secret']
+			site_key: as['recaptcha_site'],
+			secret_key: as['recaptcha_secret']
 		}
 	};
 

cli/suspend.js

@@ -0,0 +1,18 @@
+const mongo = require('mongodb');
+const User = require('../built/models/user').default;
+
+const args = process.argv.slice(2);
+
+const userId = new mongo.ObjectID(args[0]);
+
+console.log(`Suspending ${userId}...`);
+
+User.update({ _id: userId }, {
+	$set: {
+		isSuspended: true
+	}
+}).then(() => {
+	console.log(`Suspended ${userId}`);
+}, e => {
+	console.error(e);
+});

docs/manage.ja.md

@@ -0,0 +1,13 @@
+# 運営ガイド
+
+## ジョブキューの状態を調べる
+Misskeyのディレクトリで:
+``` shell
+node_modules/kue/bin/kue-dashboard -p 3050
+```
+ポート3050にアクセスするとUIが表示されます
+
+## ユーザーを凍結する
+``` shell
+node cli/suspend (ユーザーID)
+```

gulpfile.ts

@@ -21,7 +21,7 @@ import * as htmlmin from 'gulp-htmlmin';
 const uglifyes = require('uglify-es');
 
 import { fa } from './src/build/fa';
-import version from './src/version';
+const client = require('./built/client/meta.json');
 import config from './src/config';
 
 const uglify = uglifyComposer(uglifyes, console);
@@ -113,7 +113,7 @@ gulp.task('build:client', [
 
 gulp.task('build:client:script', () =>
 	gulp.src(['./src/client/app/boot.js', './src/client/app/safe.js'])
-		.pipe(replace('VERSION', JSON.stringify(version)))
+		.pipe(replace('VERSION', JSON.stringify(client.version)))
 		.pipe(replace('API', JSON.stringify(config.api_url)))
 		.pipe(replace('ENV', JSON.stringify(env)))
 		.pipe(isProduction ? uglify({

locales/en.yml

@@ -98,7 +98,9 @@ common/views/components/nav.vue:
   feedback: "Feedback"
 
 common/views/components/note-menu.vue:
+  favorite: "Favorite this note"
   pin: "Pin to profile page"
+  remote: "Show on origin"
 
 common/views/components/poll.vue:
   vote-to: "Vote for '{}'"
@@ -367,9 +369,12 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
+  favorites: "Favorites"
+  lists: "Lists"
   customize: "Customize"
   settings: "Settings"
   signout: "Sign out"
+  dark: "Fall in dark"
 
 desktop/views/components/ui.header.nav.vue:
   home: "Home"
@@ -406,6 +411,7 @@ desktop/views/pages/user/user.friends.vue:
   no-users: "No users"
 
 desktop/views/pages/user/user.header.vue:
+  is-suspended: "This account has been suspended."
   is-remote: "This user is a remote user, so the information is not accurate. "
   view-remote: "See accurate information"
 
@@ -594,6 +600,7 @@ mobile/views/pages/user.vue:
   overview: "Overview"
   timeline: "Timeline"
   media: "Media"
+  is-suspended: "This account has been suspended."
   is-remote: "This user is a remote user, so the information is not accurate. "
   view-remote: "See accurate information"
 

locales/fr.yml

@@ -98,7 +98,9 @@ common/views/components/nav.vue:
   feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
+  favorite: "Favorite this note"
   pin: "Épingler sur votre profile"
+  remote: "投稿元で見る"
 
 common/views/components/poll.vue:
   vote-to: "Voter pour '{}'"
@@ -367,9 +369,12 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Votre profil"
   drive: "Drive"
+  favorites: "Favorites"
+  lists: "リスト"
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"
+  dark: "Fall in dark"
 
 desktop/views/components/ui.header.nav.vue:
   home: "Accueil"
@@ -406,6 +411,7 @@ desktop/views/pages/user/user.friends.vue:
   no-users: "Pas d'utilisateurs"
 
 desktop/views/pages/user/user.header.vue:
+  is-suspended: "This account has been suspended."
   is-remote: "Cet utilisateur n'est pas un utilisateur de Misskey. Certaines informations peuvent être erronées "
   view-remote: "Voir les informations détaillées"
 
@@ -594,6 +600,7 @@ mobile/views/pages/user.vue:
   overview: "Aperçu"
   timeline: "Fil d'actualité"
   media: "Media"
+  is-suspended: "This account has been suspended."
   is-remote: "Cet utilisateur n'est pas un utilisateur de Misskey. Certaines informations peuvent être erronées "
   view-remote: "Voir les informations détaillées"
 

locales/index.ts

@@ -13,7 +13,8 @@ const native = loadLang('ja');
 const langs = {
 	'en': loadLang('en'),
 	'fr': loadLang('fr'),
-	'ja': native
+	'ja': native,
+ 'pl': loadLang('pl')
 };
 
 Object.entries(langs).map(([, locale]) => {

locales/ja.yml

@@ -98,7 +98,9 @@ common/views/components/nav.vue:
   feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
+  favorite: "お気に入り"
   pin: "ピン留め"
+  remote: "投稿元で見る"
 
 common/views/components/poll.vue:
   vote-to: "「{}」に投票する"
@@ -367,9 +369,12 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
+  favorites: "お気に入り"
+  lists: "リスト"
   customize: "カスタマイズ"
   settings: "設定"
   signout: "サインアウト"
+  dark: "闇に飲まれる"
 
 desktop/views/components/ui.header.nav.vue:
   home: "ホーム"
@@ -406,7 +411,8 @@ desktop/views/pages/user/user.friends.vue:
   no-users: "よく話すユーザーはいません"
 
 desktop/views/pages/user/user.header.vue:
-  is-remote: "このユーザーはリモートユーザーのため情報が正確ではありません。"
+  is-suspended: "このユーザーは凍結されています。"
+  is-remote: "このユーザーはリモートユーザーです。"
   view-remote: "正確な情報を見る"
 
 desktop/views/pages/user/user.home.vue:
@@ -594,7 +600,8 @@ mobile/views/pages/user.vue:
   overview: "概要"
   timeline: "タイムライン"
   media: "メディア"
-  is-remote: "このユーザーはリモートユーザーのため情報が正確ではありません。"
+  is-suspended: "このユーザーは凍結されています。"
+  is-remote: "このユーザーはリモートユーザーです。"
   view-remote: "正確な情報を見る"
 
 mobile/views/pages/user/home.vue:

locales/pl.yml

@@ -0,0 +1,628 @@
+common:
+  misskey: "Dziel się zawartością z innymi korzystając z Misskey."
+
+  time:
+    unknown: "nieznany"
+    future: "w przyszłości"
+    just_now: "teraz"
+    seconds_ago: "{} sek. temu"
+    minutes_ago: "{} min. temu"
+    hours_ago: "{} godz. temu"
+    days_ago: "{} dni temu"
+    weeks_ago: "{} tyg. temu"
+    months_ago: "{} mies. temu"
+    years_ago: "{} lat temu"
+
+  weekday-short:
+    sunday: "N"
+    monday: "Pn"
+    tuesday: "W"
+    wednesday: "Ś"
+    thursday: "C"
+    friday: "P"
+    satruday: "S"
+
+  reactions:
+    like: "Lubię"
+    love: "Kocham"
+    laugh: "Śmieszne"
+    hmm: "Hmm…?"
+    surprise: "Wow"
+    congrats: "Gratuluję!"
+    angry: "Wściekły"
+    confused: "Zmieszany"
+    pudding: "Pudding"
+
+  delete: "Usuń"
+  loading: "Ładowanie"
+  ok: "OK"
+  update-available: "Nowa wersja Misskey jest dostępna ({newer}, obecna to {current}). Odśwież stronę, aby zastosować aktualizację."
+  my-token-regenerated: "Twój token został wygenerowany. Zostaniesz wylogowany."
+
+common/views/components/connect-failed.vue:
+  title: "Nie udało się połączyć z serwerem"
+  description: "Wystąpił problem z Twoim połączeniem z Internetem, lub z serwerem. {Spróbuj ponownie} wkrótce."
+  thanks: "Dziękujemy za korzystanie z Misskey."
+  troubleshoot: "Rozwiązywanie problemów"
+
+common/views/components/connect-failed.troubleshooter.vue:
+  title: "Rozwiązywanie problemów"
+  network: "Połączenie z siecią"
+  checking-network: "Sprawdzanie połączenia sieciowego"
+  internet: "Połączenie z Internetem"
+  checking-internet: "Sprawdzanie połączenia z Internetem"
+  server: "Połączenie z serwerem"
+  checking-server: "Sprawdzanie połączenia z serwerem"
+  finding: "Wyszukiwanie problemu"
+  no-network: "Brak połączenia z siecią"
+  no-network-desc: "Upewnij się, że jesteś połączony z siecią."
+  no-internet: "Brak połączenia z Internetem"
+  no-internet-desc: "Upewnij się, że jesteś połączony z Internetem."
+  no-server: "Nie udało się połączyć z serwerem"
+  no-server-desc: "Połączenie sieciowe działa, ale nie udało się połączyć z serwerem Misskey. Możliwe że serwer nie działa lub trwają prace konserwacyjne, spróbuj ponownie później."
+  success: "Pomyślnie połączono z serwerem Misskey"
+  success-desc: "Wygląda na to, że udało się połączyć. Odśwież stronę."
+  flush: "Wyczyść pamięć podręczną"
+  set-version: "Określ wersję"
+
+common/views/components/messaging.vue:
+  search-user: "Znajdź użytkownika"
+  you: "Ty"
+  no-history: "Brak historii"
+
+common/views/components/messaging-room.vue:
+  empty: "Brak konwersacji"
+  more: "Więcej"
+  no-history: "Brak dalszej historii"
+  resize-form: "Przeciągnij aby zmienić rozmiar"
+  new-message: "Nowa wiadomość"
+
+common/views/components/messaging-room.form.vue:
+  input-message-here: "Wprowadź wiadomość tutaj"
+  send: "Wyślij"
+  attach-from-local: "Załącz pliki z komputera"
+  attach-from-drive: "Załącz pliki z dysku"
+
+common/views/components/messaging-room.message.vue:
+  is-read: "Przeczytano"
+  deleted: "Wiadomość została usunięta"
+
+common/views/components/nav.vue:
+  about: "O stronie"
+  stats: "Statystyki"
+  status: "Stan"
+  wiki: "Wiki"
+  donors: "Sponsorzy"
+  repository: "Repozytorium"
+  develop: "Autorzy"
+  feedback: "Opinie"
+
+common/views/components/note-menu.vue:
+  favorite: "Dodaj do ulubionych"
+  pin: "Przypnij do profilu"
+
+common/views/components/poll.vue:
+  vote-to: "Zagłosuj na '{}'"
+  vote-count: "{} głosów"
+  total-users: "{} głosujących"
+  vote: "Zagłosuj"
+  show-result: "Pokaż wyniki"
+  voted: "Zagłosowano"
+
+common/views/components/poll-editor.vue:
+  no-only-one-choice: "Musisz wprowadzić dwie lub więcej opcji."
+  choice-n: "Opcja {}"
+  remove: "Usuń tą opcję"
+  add: "+ Dodaj opcję"
+  destroy: "Usuń ankietę"
+
+common/views/components/reaction-picker.vue:
+  choose-reaction: "Wybierz reakcję"
+
+common/views/components/signin.vue:
+  username: "Nazwa użytkownika"
+  password: "Hasło"
+  token: "Token"
+  signing-in: "Logowanie…"
+  signin: "Zaloguj"
+
+common/views/components/signup.vue:
+  username: "Nazwa użytkownika"
+  checking: "Sprawdzanie…"
+  available: "Dostępna"
+  unavailable: "Niedostępna"
+  error: "Błąd sieci"
+  invalid-format: "Może zawierać litery, cyfry i myślniki."
+  too-short: "Wprowadź przynajmniej jeden znak"
+  too-long: "Nazwa nie może zawierać więcej niż 20 znaków"
+  password: "Hasło"
+  password-placeholder: "Zalecamy korzystanie z hasła zawierającego przynajmniej 8 znaków."
+  weak-password: "Słabe"
+  normal-password: "Średnie"
+  strong-password: "Silne"
+  retype: "Powtórz hasło"
+  retype-placeholder: "Potwierdź hasło"
+  password-matched: "OK"
+  password-not-matched: "Hasła nie zgadzają się"
+  recaptcha: "Weryfikacja"
+  create: "Utwórz konto"
+  some-error: "Nie udało się utworzyć konta. Spróbuj ponownie."
+
+common/views/components/special-message.vue:
+  new-year: "Szczęśliwego nowego roku!"
+  christmas: "Wesołych świąt!"
+
+common/views/components/stream-indicator.vue:
+  connecting: "Łączenie"
+  reconnecting: "Ponowne łączenie"
+  connected: "Połączono"
+
+common/views/components/twitter-setting.vue:
+  description: "Jeżeli połączysz konto Twittera z kontem Misskey, informacje z Twittera będą widoczne na Twoim profilu i będziesz mógł logować się z użyciem Twittera."
+  connected-to: "Jesteś połączony z tym kontem Twittera"
+  detail: "Szczegóły…"
+  reconnect: "Połącz ponownie"
+  connect: "Połącz z kontem Twittera"
+  disconnect: "Rozłącz"
+
+common/views/components/uploader.vue:
+  waiting: "Oczekiwanie"
+
+common/views/widgets/broadcast.vue:
+  no-broadcasts: "Brak transmisji"
+  have-a-nice-day: "Miłego dnia!"
+  next: "Dalej"
+
+common/views/widgets/donation.vue:
+  title: "Dotacje"
+  text: "Aby utrzymywać Misskey, płacimy za domenę, serwery i nie tylko… Nie zarabiamy na tym, więc byłoby nam miło, gdybyśmy uzyskali od Ciebie dotację. Jeżeli jesteś zainteresowany, skontaktuj się z {}. Dziękujemy za wsparcie!"
+
+common/views/widgets/photo-stream.vue:
+  no-photos: "Brak zdjęć"
+
+common/views/widgets/server.vue:
+  title: "Informacje o serwerze"
+  toggle: "Przełącz widok"
+
+desktop/views/components/activity.vue:
+  title: "Aktywność"
+  toggle: "Przełącz widok"
+
+desktop/views/components/calendar.vue:
+  title: "{1} / {2}"
+  prev: "Poprzedni miesiąc"
+  next: "Następny miesiąc"
+  go: "Naciśnij, aby przejść"
+
+desktop/views/components/drive-window.vue:
+  used: "wykorzystane"
+  drive: "Dysk"
+
+desktop/views/components/drive.file.vue:
+  avatar: "Awatar"
+  banner: "Baner"
+  contextmenu:
+    rename: "Zmień nazwę"
+    copy-url: "Skopiuj adres"
+    download: "Pobierz"
+    else-files: "Inne"
+    set-as-avatar: "Ustaw jako awatar"
+    set-as-banner: "Ustaw jako baner"
+    open-in-app: "Otwórz w aplikacji"
+    add-app: "Dodaj aplikację"
+    rename-file: "Zmień nazwę pliku"
+    input-new-file-name: "Wprowadź nową nazwę"
+    copied: "Skopiowano"
+    copied-url-to-clipboard: "Skopiowano adres do schowka"
+
+desktop/views/components/drive.folder.vue:
+  unable-to-process: "Nie udało się ukończyć działania."
+  circular-reference-detected: "Docelowy katalog znajduje się w katalogu, który chcesz przenieść."
+  unhandled-error: "Nieznany błąd"
+  contextmenu:
+    move-to-this-folder: "Przenieś do tego katalogu"
+    show-in-new-window: "Otwórz w nowym oknie"
+    rename: "Zmień nazwę"
+    rename-folder: "Zmień nazwę katalogu"
+    input-new-folder-name: "Wprowadź nową nazwę"
+
+desktop/views/components/drive.nav-folder.vue:
+  drive: "Dysk"
+
+desktop/views/components/drive.vue:
+  search: "Szukaj"
+  load-more: "Załaduj więcej"
+  empty-drive: "Twój dysk jest posty"
+  empty-drive-description: "Możesz wysłać plik klikając prawym przyciskiem myszy i wybierając \"Wyślij plik\" lub przeciągnąć plik i upuścić w tym oknie."
+  empty-folder: "Ten katalog jest posty"
+  unable-to-process: "Nie udało się dokończyć działania."
+  circular-reference-detected: "Ten katalog znajduje się w katalogu, który chcesz przenieść."
+  unhandled-error: "Nieznany błąd"
+  url-upload: "Wyślij z adresu"
+  url-of-file: "Adres URL pliku, który chcesz wysłać"
+  may-take-time: "Może trochę potrwać, zanim wysyłanie zostanie ukończone."
+  create-folder: "Utwórz katalog"
+  folder-name: "Nazwa katalogu"
+  contextmenu:
+    create-folder: "Utwórz katalog"
+    upload: "Wyślij plik"
+    url-upload: "Wyślij z adresu URL"
+
+desktop/views/components/messaging-window.vue:
+  title: "Wiadomości"
+
+desktop/views/components/notes.note.vue:
+  reposted-by: "Udostępniono przez {}"
+  reply: "Odpowiedz"
+  add-reaction: "Dodaj reakcję"
+  detail: "Pokaż szczegóły"
+
+desktop/views/components/notifications.vue:
+  more: "Więcej"
+  empty: "Brak powiadomień"
+
+desktop/views/components/post-form.vue:
+  note-placeholder: "Co się dzieje?"
+  reply-placeholder: "Odpowiedz na ten wpis…"
+  quote-placeholder: "Zacytuj ten wpis…"
+  note: "Wyślij"
+  reply: "Odpowiedz"
+  posted: "Posted!"
+  replied: "Odpowiedziano!"
+  reposted: "Udostępniono!"
+  note-failed: "Nie udało się wysłać"
+  reply-failed: "Nie udało się odpowiedzieć"
+  posting: "Wysyłanie"
+  attach-media-from-local: "Załącz zawartość multimedialną z komputera"
+  attach-media-from-drive: "Załącz zawartość multimedialną z dysku"
+  attach-cancel: "Usuń załącznik"
+  insert-a-kao: "v(‘ω’)v"
+  create-poll: "Utwórz ankietę"
+  text-remain: "pozostałe znaki: {}"
+
+desktop/views/components/post-form-window.vue:
+  note: "Nowy wpis"
+  reply: "Odpowiedz"
+  attaches: "{} załączników multimedialnych"
+  uploading-media: "Wysyłanie {} treści multimedialnych"
+
+desktop/views/components/renote-form.vue:
+  quote: "Cytuj…"
+  cancel: "Anuluj"
+  reposting: "Udostępnianie…"
+  success: "Udostępniono!"
+
+desktop/views/components/settings.vue:
+  profile: "Profil"
+  notification: "Powiadomienie"
+  apps: "Aplikacje"
+  mute: "Wycisz"
+  drive: "Dysk"
+  security: "Bezpieczeństwo"
+  password: "Hasło"
+  2fa: "Uwierzytelnianie dwuetapowe"
+  other: "Inne"
+  license: "Licencja"
+
+desktop/views/components/settings.2fa.vue:
+  intro: "Jeżeli skonfigurujesz uwierzytelnianie dwuetapowe, aby zablokować się będziesz potrzebować (oprócz hasła) kodu ze skonfigurowanego urządzenia (np. smartfonu), co zwiększy bezpieczeństwo."
+  detail: "Zobacz szczegóły…"
+  url: "https://www.google.com/landing/2step/"
+  caution: "Jeżeli stracisz dostęp do urządzenia, nie będziesz mógł logować się do Misskey!"
+  register: "Zarejestruj urządzenie"
+  already-registered: "Urządzenie jest już zarejestrowane"
+  unregister: "Wyłącz"
+  unregistered: "Wyłączono uwierzytelnianie dwuetapowe."
+  enter-password: "Wprowadź hasło"
+  authenticator: "Na początek musisz zainstalować Google Authenticator na swoim urządzeniu:"
+  howtoinstall: "Jak zainstalować"
+  scan: "Później, zeskanuje ten kod QR:"
+  done: "Wprowadź token wyświetlony na Twoim urządzeniu:"
+  submit: "Wyślij"
+  success: "Pomyślnie ukończono konfigurację!"
+  failed: "Nie udało się skonfigurować uwierzytelniania dwuetapowego, upewnij się że wprowadziłeś prawidłowy token."
+  info: "Od teraz, wprowadzaj token wyświetlany na urządzeniu przy każdym logowaniu do Misskey."
+
+desktop/views/components/settings.api.vue:
+  caution: "Nie pokazuj tego tokenu osobom trzecim (nie wprowadzaj go nigdzie indziej), aby konto nie trafiło w niepowołane ręce."
+  regeneration-of-token: "W przypadku wycieku tokenu, możesz wygenerować nowy."
+  regenerate-token: "Wygeneruj nowy token"
+  enter-password: "Wprowadź hasło"
+
+desktop/views/components/settings.app.vue:
+  no-apps: "Brak zautoryzowanych aplikacji"
+
+desktop/views/components/settings.mute.vue:
+  no-users: "Brak wyciszonych użytkowników"
+
+desktop/views/components/settings.password.vue:
+  reset: "Zmień hasło"
+  enter-current-password: "Wprowadź obecne hasło"
+  enter-new-password: "Wprowadź nowe hasło"
+  enter-new-password-again: "Wprowadź ponownie nowe hasło"
+  not-match: "Nowe hasła nie pasują do siebie"
+  changed: "Pomyślnie zmieniono hasło"
+
+desktop/views/components/settings.profile.vue:
+  avatar: "Awatar"
+  choice-avatar: "Wybierz obraz"
+  name: "Nazwa"
+  location: "Lokalizacja"
+  description: "Opis"
+  birthday: "Data urodzenia"
+  save: "Aktualizuj profil"
+
+desktop/views/components/ui.header.account.vue:
+  profile: "Twój profil"
+  drive: "Dysk"
+  favorites: "Ulubione"
+  lists: "Listy"
+  customize: "Dostosuj"
+  settings: "Ustawienia"
+  signout: "Wyloguj się"
+  dark: "Sprowadź ciemność"
+
+desktop/views/components/ui.header.nav.vue:
+  home: "Strona główna"
+  messaging: "Wiadomości"
+  game: "Gra"
+
+desktop/views/components/ui.header.notifications.vue:
+  title: "Powiadomienia"
+
+desktop/views/components/ui.header.post.vue:
+  post: "Utwórz nowy wpis"
+
+desktop/views/components/ui.header.search.vue:
+  placeholder: "Szukaj"
+
+desktop/views/pages/note.vue:
+  prev: "Poprzedni wpis"
+  next: "Następny wpis"
+
+desktop/views/pages/selectdrive.vue:
+  title: "Wybierz plik(i)"
+  ok: "OK"
+  cancel: "Anuluj"
+  upload: "Wyślij pliki z Twojego komputera"
+
+desktop/views/pages/user/user.followers-you-know.vue:
+  title: "Śledzący których znasz"
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+desktop/views/pages/user/user.friends.vue:
+  title: "Najczęściej odpisujący"
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+desktop/views/pages/user/user.header.vue:
+  is-suspended: "To konto zostało zawieszone."
+  is-remote: "To jest użytkownik zdalnej instancji, informacje mogą nie być w pełni dokładne."
+  view-remote: "Wyświetl dokładne informacje"
+
+desktop/views/pages/user/user.home.vue:
+  last-used-at: "Ostatnio aktywny: "
+
+desktop/views/pages/user/user.photos.vue:
+  title: "Zdjęcia"
+  loading: "Ładowanie"
+  no-photos: "Brak zdjęć"
+
+desktop/views/pages/user/user.profile.vue:
+  follows-you: "Śledzi Cię"
+  stalk: "Stalkuj"
+  stalking: "Stalkujesz"
+  unstalk: "Przestań stalkować"
+  mute: "Wycisz"
+  muted: "Wyciszyłeś"
+  unmute: "Cofnij wyciszenie"
+
+desktop/views/widgets/notifications.vue:
+  title: "Powiadomienia"
+  settings: "Ustawienia"
+
+desktop/views/widgets/polls.vue:
+  title: "Ankiety"
+  refresh: "Pokaż inne"
+  nothing: "Pusto"
+
+desktop/views/widgets/post-form.vue:
+  title: "Wpis"
+  note: "Wpis"
+  placeholder: "Co się dzieje?"
+
+desktop/views/widgets/trends.vue:
+  title: "Na czasie"
+  refresh: "Pokaż inne"
+  nothing: "Pusto"
+
+desktop/views/widgets/users.vue:
+  title: "Polecani użytkownicy"
+  refresh: "Pokaż innych"
+  no-one: "Pusto"
+
+desktop/views/widgets/channel.vue:
+  title: "Kanał"
+  settings: "Ustawienia widżetu"
+
+mobile/views/components/drive.vue:
+  drive: "Dysk"
+  used: "użyto"
+  folder-count: "Katalog(i)"
+  count-separator: ", "
+  file-count: "Plik(i)"
+  load-more: "Załaduj więcej"
+  nothing-in-drive: "Pusto"
+  folder-is-empty: "Ten katalog jest pusty"
+
+mobile/views/components/drive-file-chooser.vue:
+  select-file: "Wybierz plik"
+
+mobile/views/components/drive-folder-chooser.vue:
+  select-folder: "Wybierz katalog"
+
+mobile/views/components/drive.file-detail.vue:
+  download: "Pobierz"
+  rename: "Zmień nazwę"
+  move: "Przenieś"
+  hash: "Hash (md5)"
+  exif: "EXIF"
+
+mobile/views/components/follow-button.vue:
+  follow: "Śledź"
+  unfollow: "Przestań śledzić"
+
+mobile/views/components/note-detail.vue:
+  reply: "Odpowiedz"
+  reaction: "Reakcja"
+
+mobile/views/components/notifications.vue:
+  more: "Więcej"
+  empty: "Brak powiadomień"
+
+mobile/views/components/post-form.vue:
+  submit: "Wyślij"
+  reply-placeholder: "Odpowiedź na ten wpis…"
+  note-placeholder: "Co się dzieje?"
+
+mobile/views/components/sub-note-content.vue:
+  media-count: "{} zawartości multimedialnej"
+  poll: "Ankieta"
+
+mobile/views/components/timeline.vue:
+  empty: "Brak wpisów"
+  load-more: "Więcej"
+
+mobile/views/components/ui.nav.vue:
+  home: "Strona główna"
+  notifications: "Powiadomienia"
+  messaging: "Wiadomości"
+  drive: "Dysk"
+  settings: "Ustawienia"
+  about: "O Misskey"
+  search: "Szukaj"
+
+mobile/views/components/user-timeline.vue:
+  no-notes: "Wygląda na to, że ten użytkownik nie opublikował jeszcze niczego"
+  no-notes-with-media: "Brak wpisów z zawartością multimedialną"
+  load-more: "Więcej"
+
+mobile/views/components/users-list.vue:
+  all: "Wszyscy"
+  known: "Znasz"
+  load-more: "Więcej"
+
+mobile/views/pages/drive.vue:
+  drive: "Dysk"
+
+mobile/views/pages/followers.vue:
+  followers-of: "Śledzący {}"
+
+mobile/views/pages/following.vue:
+  following-of: "Śledzeni przez {}"
+
+mobile/views/pages/home.vue:
+  timeline: "Oś czasu"
+
+mobile/views/pages/messaging.vue:
+  messaging: "Wiadomości"
+
+mobile/views/pages/messaging-room.vue:
+  messaging: "Wiadomości"
+
+mobile/views/pages/note.vue:
+  title: "Wyślij"
+  prev: "Poprzedni wpis"
+  next: "Następny wpis"
+
+mobile/views/pages/notifications.vue:
+  notifications: "Powiadomienia"
+  read-all: "Czy na pewno chcesz oznaczyć wszystkie powiadomienia jako przeczytane?"
+
+mobile/views/pages/profile-setting.vue:
+  title: "Ustawienia profilu"
+  will-be-published: "Te ustawienia profilu zostaną zaktualizowane."
+  name: "Nazwa"
+  location: "Lokalizacja"
+  description: "Opis"
+  birthday: "Data urodzenia"
+  avatar: "Awatar"
+  banner: "Baner"
+  avatar-saved: "Pomyślnie zaktualizowano awatar"
+  banner-saved: "Pomyślnie zaktualizowano baner"
+  set-avatar: "Wybierz awatar"
+  set-banner: "Wybierz baner"
+  save: "Zapisz"
+  saved: "Pomyślnie zaktualizowano profil"
+
+mobile/views/pages/search.vue:
+  search: "Szukaj"
+  empty: "Nie znaleziono wpisów zawierających '{}'"
+
+mobile/views/pages/selectdrive.vue:
+  select-file: "Wybierz plik"
+
+mobile/views/pages/settings.vue:
+  signed-in-as: "Zalogowany jako {}"
+  profile: "Profil"
+  twitter-integration: "Integracja z Twitterem"
+  signin-history: "Historia logowań"
+  settings: "Ustawienia"
+  signout: "Wyloguj"
+
+mobile/views/pages/user.vue:
+  follows-you: "Śledzi Cię"
+  following: "Śledzeni"
+  followers: "Śledzący"
+  notes: "Wpisy"
+  overview: "Przegląd"
+  timeline: "Oś czasu"
+  media: "Zawartość multimedialna"
+  is-suspended: "To konto zostało zablokowane"
+  is-remote: "To jest użytkownik zdalnej instancji, informacje mogą nie być w pełni dokładne."
+  view-remote: "Wyświetl dokładne informacje"
+
+mobile/views/pages/user/home.vue:
+  recent-notes: "Ostatnie wpisy"
+  images: "Zdjęcia"
+  activity: "Aktywność"
+  keywords: "Słowa kluczowe"
+  domains: "Domeny"
+  frequently-replied-users: "Często aktywni użytkownicy"
+  followers-you-know: "Śledzący których znasz"
+  last-used-at: "Ostatnio aktywny:"
+
+mobile/views/pages/user/home.followers-you-know.vue:
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+mobile/views/pages/user/home.friends.vue:
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+mobile/views/pages/user/home.notes.vue:
+  loading: "Ładowanie"
+  no-notes: "Brak wpisów"
+
+mobile/views/pages/user/home.photos.vue:
+  loading: "Ładowanie"
+  no-photos: "Brak zdjęć"
+
+docs:
+  edit-this-page-on-github: "Znalazłeś błąd lub chcesz pomóc w tworzeniu dokumentacji?"
+  edit-this-page-on-github-link: "Edytuj stronę na GitHubie!"
+
+  api:
+    entities:
+      properties: "Właściwości"
+    endpoints:
+      params: "Parametry"
+      res: "Odpowiedź"
+    props:
+      name: "Nazwa"
+      type: "Rodzaj"
+      optional: "Nieobowiązkowy"
+      description: "Opis"
+      yes: "Tak"
+      no: "Nie"

migration/2.0.0.js

@@ -0,0 +1,57 @@
+// for Node.js interpret
+
+const chalk = require('chalk');
+const sequential = require('promise-sequential');
+
+const { default: User } = require('../built/models/user');
+const { default: DriveFile } = require('../built/models/drive-file');
+
+async function main() {
+	const promiseGens = [];
+
+	const count = await DriveFile.count({});
+
+	let prev;
+
+	for (let i = 0; i < count; i++) {
+		promiseGens.push(() => {
+			const promise = new Promise(async (res, rej) => {
+				const file = await DriveFile.findOne(prev ? {
+					_id: { $gt: prev._id }
+				} : {}, {
+					sort: {
+						_id: 1
+					}
+				});
+
+				prev = file;
+
+				const user = await User.findOne({ _id: file.metadata.userId });
+
+				DriveFile.update({
+					_id: file._id
+				}, {
+					$set: {
+						'metadata._user': {
+							host: user.host
+						}
+					}
+				}).then(() => {
+					res([i, file]);
+				}).catch(rej);
+			});
+
+			promise.then(([i, file]) => {
+				console.log(chalk`{gray ${i}} {green done: {bold ${file._id}} ${file.filename}}`);
+			});
+
+			return promise;
+		});
+	}
+
+	return await sequential(promiseGens);
+}
+
+main().then(() => {
+	console.log('ALL DONE');
+}).catch(console.error);

migration/2018-04-19.js

@@ -1,49 +0,0 @@
-// for Node.js interpret
-
-const { default: User } = require('../built/models/user');
-const { default: Following } = require('../built/models/following');
-const { default: zip } = require('@prezzemolo/zip')
-
-const migrate = async (following) => {
-	const follower = await User.findOne({ _id: following.followerId });
-	const followee = await User.findOne({ _id: following.followeeId });
-	const result = await Following.update(following._id, {
-		$set: {
-			stalk: true,
-			_follower: {
-				host: follower.host,
-				inbox: follower.host != null ? follower.inbox : undefined
-			},
-			_followee: {
-				host: followee.host,
-				inbox: followee.host != null ? followee.inbox : undefined
-			}
-		}
-	});
-	return result.ok === 1;
-}
-
-async function main() {
-	const count = await Following.count({});
-
-	const dop = Number.parseInt(process.argv[2]) || 5
-	const idop = ((count - (count % dop)) / dop) + 1
-
-	return zip(
-		1,
-		async (time) => {
-			console.log(`${time} / ${idop}`)
-			const doc = await Following.find({}, {
-				limit: dop, skip: time * dop
-			})
-			return Promise.all(doc.map(migrate))
-		},
-		idop
-	).then(a => {
-		const rv = []
-		a.forEach(e => rv.push(...e))
-		return rv
-	})
-}
-
-main().then(console.dir).catch(console.error)

package.json

@@ -1,12 +1,9 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "0.0.5023",
+	"version": "2.0.0",
+	"clientVersion": "1.0.5184",
 	"codename": "nighthike",
-	"license": "MIT",
-	"description": "A miniblog-based SNS",
-	"bugs": "https://github.com/syuilo/misskey/issues",
-	"repository": "https://github.com/syuilo/misskey.git",
 	"main": "./built/index.js",
 	"private": true,
 	"scripts": {
@@ -34,7 +31,7 @@
 		"@prezzemolo/rap": "0.1.2",
 		"@prezzemolo/zip": "0.0.3",
 		"@types/bcryptjs": "2.4.1",
-		"@types/chai": "4.1.2",
+		"@types/chai": "4.1.3",
 		"@types/chai-http": "3.0.4",
 		"@types/debug": "0.0.30",
 		"@types/deep-equal": "1.0.1",
@@ -54,21 +51,22 @@
 		"@types/js-yaml": "3.11.1",
 		"@types/koa": "2.0.45",
 		"@types/koa-bodyparser": "4.2.0",
-		"@types/koa-compress": "^2.0.8",
+		"@types/koa-compress": "2.0.8",
 		"@types/koa-favicon": "2.0.19",
+		"@types/koa-logger": "3.1.0",
 		"@types/koa-mount": "3.0.1",
 		"@types/koa-multer": "1.0.0",
-		"@types/koa-router": "7.0.27",
+		"@types/koa-router": "7.0.28",
 		"@types/koa-send": "4.1.1",
 		"@types/koa__cors": "2.2.2",
 		"@types/kue": "0.11.8",
 		"@types/license-checker": "15.0.0",
 		"@types/mkdirp": "0.5.2",
-		"@types/mocha": "5.0.0",
+		"@types/mocha": "5.2.0",
 		"@types/mongodb": "3.0.15",
 		"@types/monk": "6.0.0",
 		"@types/ms": "0.7.30",
-		"@types/node": "9.6.5",
+		"@types/node": "9.6.6",
 		"@types/nopt": "3.0.29",
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "0.8.1",
@@ -78,10 +76,11 @@
 		"@types/request-promise-native": "1.0.14",
 		"@types/rimraf": "2.0.2",
 		"@types/seedrandom": "2.4.27",
+		"@types/single-line-log": "^1.1.0",
 		"@types/speakeasy": "2.0.2",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.3",
-		"@types/webpack": "4.1.3",
+		"@types/webpack": "4.1.4",
 		"@types/webpack-stream": "3.2.10",
 		"@types/websocket": "0.0.38",
 		"@types/ws": "4.0.2",
@@ -90,10 +89,10 @@
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
 		"bootstrap-vue": "2.0.0-rc.6",
-		"cafy": "3.2.1",
+		"cafy": "8.0.0",
 		"chai": "4.1.2",
 		"chai-http": "4.0.0",
-		"chalk": "2.4.0",
+		"chalk": "2.4.1",
 		"crc-32": "1.2.0",
 		"css-loader": "0.28.11",
 		"debug": "3.1.0",
@@ -102,12 +101,12 @@
 		"diskusage": "0.2.4",
 		"dompurify": "1.0.3",
 		"elasticsearch": "14.2.2",
-		"element-ui": "2.3.4",
+		"element-ui": "2.3.6",
 		"emojilib": "2.2.12",
 		"escape-regexp": "0.0.1",
 		"eslint": "4.19.1",
-		"eslint-plugin-vue": "4.4.0",
-		"eventemitter3": "3.0.1",
+		"eslint-plugin-vue": "4.5.0",
+		"eventemitter3": "3.1.0",
 		"exif-js": "2.3.0",
 		"file-loader": "1.1.11",
 		"file-type": "7.6.0",
@@ -135,28 +134,30 @@
 		"is-root": "2.0.0",
 		"is-url": "1.2.4",
 		"js-yaml": "3.11.0",
-		"jsdom": "11.8.0",
-		"koa": "2.5.0",
+		"jsdom": "11.9.0",
+		"koa": "2.5.1",
 		"koa-bodyparser": "4.2.0",
 		"koa-compress": "3.0.0",
 		"koa-favicon": "2.0.1",
-		"koa-json-body": "^5.3.0",
+		"koa-json-body": "5.3.0",
+		"koa-logger": "3.2.0",
 		"koa-mount": "3.0.0",
 		"koa-multer": "1.0.2",
 		"koa-router": "7.4.0",
 		"koa-send": "4.1.3",
+		"koa-slow": "2.1.0",
 		"kue": "0.11.6",
 		"license-checker": "18.0.0",
 		"loader-utils": "1.1.0",
 		"mecab-async": "0.1.2",
 		"mkdirp": "0.5.1",
-		"mocha": "5.1.0",
+		"mocha": "5.1.1",
 		"moji": "0.5.1",
 		"mongodb": "3.0.7",
 		"monk": "6.0.5",
 		"ms": "2.1.1",
 		"nan": "2.10.0",
-		"node-sass": "4.8.3",
+		"node-sass": "4.9.0",
 		"node-sass-json-importer": "3.2.0",
 		"nopt": "4.0.1",
 		"nprogress": "0.2.0",
@@ -165,6 +166,7 @@
 		"os-utils": "0.0.14",
 		"progress-bar-webpack-plugin": "1.11.0",
 		"prominence": "0.2.0",
+		"promise-sequential": "^1.1.1",
 		"pug": "2.0.3",
 		"punycode": "2.1.0",
 		"qrcode": "1.2.0",
@@ -179,6 +181,7 @@
 		"s-age": "1.1.2",
 		"sass-loader": "7.0.1",
 		"seedrandom": "2.4.3",
+		"single-line-log": "^1.1.2",
 		"speakeasy": "2.0.0",
 		"style-loader": "0.21.0",
 		"stylus": "0.54.5",
@@ -190,9 +193,9 @@
 		"textarea-caret": "3.1.0",
 		"tmp": "0.0.33",
 		"ts-loader": "4.2.0",
-		"ts-node": "6.0.0",
+		"ts-node": "6.0.1",
 		"tslint": "5.9.1",
-		"typescript": "2.8.1",
+		"typescript": "2.8.3",
 		"typescript-eslint-parser": "15.0.0",
 		"uglify-es": "3.3.9",
 		"url-loader": "1.0.1",
@@ -201,17 +204,18 @@
 		"vue": "2.5.16",
 		"vue-cropperjs": "2.2.0",
 		"vue-js-modal": "1.3.13",
-		"vue-json-tree-view": "2.1.3",
-		"vue-loader": "14.2.2",
+		"vue-json-tree-view": "2.1.4",
+		"vue-loader": "15.0.3",
 		"vue-router": "3.0.1",
 		"vue-template-compiler": "2.5.16",
 		"vuedraggable": "2.16.0",
+		"vuex": "3.0.1",
 		"web-push": "3.3.0",
 		"webfinger.js": "2.6.6",
 		"webpack": "4.6.0",
-		"webpack-cli": "2.0.14",
+		"webpack-cli": "2.0.15",
 		"webpack-replace-loader": "1.3.0",
-		"websocket": "1.0.25",
+		"websocket": "1.0.26",
 		"ws": "5.1.1",
 		"xev": "2.0.0"
 	}

src/cafy-id.ts

@@ -0,0 +1,29 @@
+import * as mongo from 'mongodb';
+import { Query } from 'cafy';
+
+export const isAnId = x => mongo.ObjectID.isValid(x);
+export const isNotAnId = x => !isAnId(x);
+
+/**
+ * ID
+ */
+export default class ID extends Query<mongo.ObjectID> {
+	constructor() {
+		super();
+
+		this.transform = v => {
+			if (isAnId(v) && !mongo.ObjectID.prototype.isPrototypeOf(v)) {
+				return new mongo.ObjectID(v);
+			} else {
+				return v;
+			}
+		};
+
+		this.push(v => {
+			if (!mongo.ObjectID.prototype.isPrototypeOf(v) && isNotAnId(v)) {
+				return new Error('must-be-an-id');
+			}
+			return true;
+		});
+	}
+}

src/client/app/auth/views/form.vue

@@ -94,13 +94,13 @@ export default Vue.extend({
 			margin 0 auto -38px auto
 			border solid 5px #fff
 			border-radius 100%
-			box-shadow 0 2px 2px rgba(0, 0, 0, 0.1)
+			box-shadow 0 2px 2px rgba(#000, 0.1)
 
 	> .app
 		padding 44px 16px 0 16px
 		color #555
 		background #eee
-		box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) inset
+		box-shadow 0 2px 2px rgba(#000, 0.1) inset
 
 		&:after
 			content ''

src/client/app/auth/views/index.vue

@@ -94,7 +94,7 @@ export default Vue.extend({
 		margin 0 auto
 		text-align center
 		background #fff
-		box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
+		box-shadow 0px 4px 16px rgba(#000, 0.2)
 
 		> .fetching
 			margin 0

src/client/app/boot.js

@@ -11,14 +11,12 @@
 
 'use strict';
 
-// Chromeで確認したことなのですが、constやletを用いたとしても
-// グローバルなスコープで定数/変数を定義するとwindowのプロパティ
-// としてそれがアクセスできるようになる訳ではありませんが、普通に
-// コンソールから定数/変数名を入力するとアクセスできてしまいます。
-// ブロック内に入れてスコープを非グローバル化するとそれが防げます
-// (Chrome以外のブラウザでは検証していません)
-{
-	if (localStorage.getItem('shouldFlush') == 'true') refresh();
+(function() {
+	// キャッシュ削除要求があれば従う
+	if (localStorage.getItem('shouldFlush') == 'true') {
+		refresh();
+		return;
+	}
 
 	// Get the current url information
 	const url = new URL(location.href);
@@ -62,6 +60,11 @@
 		app = isMobile ? 'mobile' : 'desktop';
 	}
 
+	// Dark/Light
+	if (localStorage.getItem('darkmode') == 'true') {
+		document.documentElement.setAttribute('data-darkmode', 'true');
+	}
+
 	// Script version
 	const ver = localStorage.getItem('v') || VERSION;
 
@@ -72,11 +75,16 @@
 	const raw = (localStorage.getItem('useRawScript') == 'true' && isDebug)
 		|| ENV != 'production';
 
+	// Get salt query
+	const salt = localStorage.getItem('salt')
+		? '?salt=' + localStorage.getItem('salt')
+		: '';
+
 	// Load an app script
 	// Note: 'async' make it possible to load the script asyncly.
 	//       'defer' make it possible to run the script when the dom loaded.
 	const script = document.createElement('script');
-	script.setAttribute('src', `/assets/${app}.${ver}.${lang}.${raw ? 'raw' : 'min'}.js`);
+	script.setAttribute('src', `/assets/${app}.${ver}.${lang}.${raw ? 'raw' : 'min'}.js${salt}`);
 	script.setAttribute('async', 'true');
 	script.setAttribute('defer', 'true');
 	head.appendChild(script);
@@ -97,8 +105,8 @@
 		const meta = await res.json();
 
 		// Compare versions
-		if (meta.version != ver) {
-			localStorage.setItem('v', meta.version);
+		if (meta.clientVersion != ver) {
+			localStorage.setItem('v', meta.clientVersion);
 
 			alert(
 				'Misskeyの新しいバージョンがあります。ページを再度読み込みします。' +
@@ -112,6 +120,9 @@
 	function refresh() {
 		localStorage.setItem('shouldFlush', 'false');
 
+		// Random
+		localStorage.setItem('salt', Math.random().toString());
+
 		// Clear cache (serive worker)
 		try {
 			navigator.serviceWorker.controller.postMessage('clear');
@@ -126,4 +137,4 @@
 		// Force reload
 		location.reload(true);
 	}
-}
+})();

src/client/app/common/define-widget.ts

@@ -18,61 +18,65 @@ export default function<T extends object>(data: {
 				default: false
 			}
 		},
+
 		computed: {
 			id(): string {
 				return this.widget.id;
+			},
+
+			props(): T {
+				return this.widget.data;
 			}
 		},
+
 		data() {
 			return {
-				props: data.props ? data.props() : {} as T,
-				bakedOldProps: null,
-				preventSave: false
+				bakedOldProps: null
 			};
 		},
+
 		created() {
-			if (this.props) {
-				Object.keys(this.props).forEach(prop => {
-					if (this.widget.data.hasOwnProperty(prop)) {
-						this.props[prop] = this.widget.data[prop];
-					}
-				});
-			}
+			this.mergeProps();
+
+			this.$watch('props', () => {
+				this.mergeProps();
+			});
 
 			this.bakeProps();
+		},
 
-			this.$watch('props', newProps => {
-				if (this.preventSave) {
-					this.preventSave = false;
-					this.bakeProps();
-					return;
+		methods: {
+			bakeProps() {
+				this.bakedOldProps = JSON.stringify(this.props);
+			},
+
+			mergeProps() {
+				if (data.props) {
+					const defaultProps = data.props();
+					Object.keys(defaultProps).forEach(prop => {
+						if (!this.props.hasOwnProperty(prop)) {
+							Vue.set(this.props, prop, defaultProps[prop]);
+						}
+					});
 				}
-				if (this.bakedOldProps == JSON.stringify(newProps)) return;
+			},
+
+			save() {
+				if (this.bakedOldProps == JSON.stringify(this.props)) return;
 
 				this.bakeProps();
 
 				if (this.isMobile) {
 					(this as any).api('i/update_mobile_home', {
 						id: this.id,
-						data: newProps
-					}).then(() => {
-						(this as any).os.i.clientSettings.mobileHome.find(w => w.id == this.id).data = newProps;
+						data: this.props
 					});
 				} else {
 					(this as any).api('i/update_home', {
 						id: this.id,
-						data: newProps
-					}).then(() => {
-						(this as any).os.i.clientSettings.home.find(w => w.id == this.id).data = newProps;
+						data: this.props
 					});
 				}
-			}, {
-				deep: true
-			});
-		},
-		methods: {
-			bakeProps() {
-				this.bakedOldProps = JSON.stringify(this.props);
 			}
 		}
 	});

src/client/app/common/scripts/check-for-update.ts

@@ -1,9 +1,9 @@
-import MiOS from '../mios';
+import MiOS from '../../mios';
 import { version as current } from '../../config';
 
 export default async function(mios: MiOS, force = false, silent = false) {
 	const meta = await mios.getMeta(force);
-	const newer = meta.version;
+	const newer = meta.clientVersion;
 
 	if (newer != current) {
 		localStorage.setItem('should-refresh', 'true');

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

@@ -1,5 +1,5 @@
 import Stream from './stream';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Channel stream connection

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

@@ -1,6 +1,6 @@
 import Stream from './stream';
 import StreamManager from './stream-manager';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Drive stream connection

src/client/app/common/scripts/streaming/global-timeline.ts

@@ -1,6 +1,6 @@
 import Stream from './stream';
 import StreamManager from './stream-manager';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Global timeline stream connection

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

@@ -2,7 +2,7 @@ import * as merge from 'object-assign-deep';
 
 import Stream from './stream';
 import StreamManager from './stream-manager';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Home stream connection
@@ -25,10 +25,31 @@ export class HomeStream extends Stream {
 				console.log('I updated:', i);
 			}
 			merge(me, i);
+
+			// キャッシュ更新
+			os.bakeMe();
+		});
+
+		this.on('clientSettingUpdated', x => {
+			os.store.commit('settings/set', {
+				key: x.key,
+				value: x.value
+			});
+		});
+
+		this.on('home_updated', x => {
+			if (x.home) {
+				os.store.commit('settings/setHome', x.home);
+			} else {
+				os.store.commit('settings/setHomeWidget', {
+					id: x.id,
+					data: x.data
+				});
+			}
 		});
 
 		// トークンが再生成されたとき
-		// このままではAPIが利用できないので強制的にサインアウトさせる
+		// このままではMisskeyが利用できないので強制的にサインアウトさせる
 		this.on('my_token_regenerated', () => {
 			alert('%i18n:!common.my-token-regenerated%');
 			os.signout();

src/client/app/common/scripts/streaming/local-timeline.ts

@@ -1,6 +1,6 @@
 import Stream from './stream';
 import StreamManager from './stream-manager';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Local timeline stream connection

src/client/app/common/scripts/streaming/messaging-index.ts

@@ -1,6 +1,6 @@
 import Stream from './stream';
 import StreamManager from './stream-manager';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Messaging index stream connection

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

@@ -1,5 +1,5 @@
 import Stream from './stream';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Messaging stream connection

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

@@ -1,5 +1,5 @@
 import Stream from './stream';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 export class OthelloGameStream extends Stream {
 	constructor(os: MiOS, me, game) {

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

@@ -1,6 +1,6 @@
 import StreamManager from './stream-manager';
 import Stream from './stream';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 export class OthelloStream extends Stream {
 	constructor(os: MiOS, me) {

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

@@ -1,6 +1,6 @@
 import Stream from './stream';
 import StreamManager from './stream-manager';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Server stream connection

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

@@ -2,7 +2,7 @@ import { EventEmitter } from 'eventemitter3';
 import * as uuid from 'uuid';
 import * as ReconnectingWebsocket from 'reconnecting-websocket';
 import { wsUrl } from '../../../config';
-import MiOS from '../../mios';
+import MiOS from '../../../mios';
 
 /**
  * Misskey stream connection

src/client/app/common/scripts/streaming/user-list.ts

@@ -0,0 +1,17 @@
+import Stream from './stream';
+import MiOS from '../../mios';
+
+export class UserListStream extends Stream {
+	constructor(os: MiOS, me, listId) {
+		super(os, 'user-list', {
+			i: me.token,
+			listId
+		});
+
+		(this as any).on('_connected_', () => {
+			this.send({
+				i: me.token
+			});
+		});
+	}
+}

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

@@ -234,7 +234,7 @@ export default Vue.extend({
 	margin-top calc(1em + 8px)
 	overflow hidden
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.1)
+	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	transition top 0.1s ease, left 0.1s ease
 
@@ -253,7 +253,7 @@ export default Vue.extend({
 			white-space nowrap
 			overflow hidden
 			font-size 0.9em
-			color rgba(0, 0, 0, 0.8)
+			color rgba(#000, 0.8)
 			cursor default
 
 			&, *
@@ -285,10 +285,10 @@ export default Vue.extend({
 
 		.name
 			margin 0 8px 0 0
-			color rgba(0, 0, 0, 0.8)
+			color rgba(#000, 0.8)
 
 		.username
-			color rgba(0, 0, 0, 0.3)
+			color rgba(#000, 0.3)
 
 	> .emojis > li
 
@@ -298,10 +298,10 @@ export default Vue.extend({
 			width 24px
 
 		.name
-			color rgba(0, 0, 0, 0.8)
+			color rgba(#000, 0.8)
 
 		.alias
 			margin 0 0 0 8px
-			color rgba(0, 0, 0, 0.3)
+			color rgba(#000, 0.3)
 
 </style>

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

@@ -0,0 +1,39 @@
+<template>
+	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="{ borderRadius: clientSettings.circleIcons ? '100%' : null }">
+		<img v-if="disablePreview" :src="`${user.avatarUrl}?thumbnail&size=128`" alt=""/>
+		<img v-else :src="`${user.avatarUrl}?thumbnail&size=128`" alt="" v-user-preview="user.id"/>
+	</router-link>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		user: {
+			required: true
+		},
+		target: {
+			required: false,
+			default: null
+		},
+		disablePreview: {
+			required: false,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-avatar
+	display block
+
+	> img
+		display inline-block
+		width 100%
+		height 100%
+		margin 0
+		border-radius inherit
+		vertical-align bottom
+		transition border-radius 1s ease
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+<div class="mk-google">
+	<input type="search" v-model="query" :placeholder="q">
+	<button @click="search">検索</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['q'],
+	data() {
+		return {
+			query: null
+		};
+	},
+	mounted() {
+		this.query = this.q;
+	},
+	methods: {
+		search() {
+			window.open(`https://www.google.com/?#q=${this.query}`, '_blank');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	display flex
+	margin 8px 0
+
+	> input
+		flex-shrink 1
+		padding 10px
+		width 100%
+		height 40px
+		font-family sans-serif
+		font-size 16px
+		color isDark ? #dee4e8 : #55595c
+		background isDark ? #191b22 : #fff
+		border solid 1px isDark ? #495156 : #dadada
+		border-radius 4px 0 0 4px
+
+		&:hover
+			border-color isDark ? #777c86 : #b0b0b0
+
+	> button
+		flex-shrink 0
+		padding 0 16px
+		border solid 1px isDark ? #495156 : #dadada
+		border-left none
+		border-radius 0 4px 4px 0
+
+		&:hover
+			background-color isDark ? #2e3440 : #eee
+
+		&:active
+			box-shadow 0 2px 4px rgba(#000, 0.15) inset
+
+.mk-google[data-darkmode]
+	root(true)
+
+.mk-google:not([data-darkmode])
+	root(false)
+
+</style>

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

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import signin from './signin.vue';
 import signup from './signup.vue';
 import forkit from './forkit.vue';
+import avatar from './avatar.vue';
 import nav from './nav.vue';
 import noteHtml from './note-html';
 import poll from './poll.vue';
@@ -28,6 +29,7 @@ import welcomeTimeline from './welcome-timeline.vue';
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
 Vue.component('mk-forkit', forkit);
+Vue.component('mk-avatar', avatar);
 Vue.component('mk-nav', nav);
 Vue.component('mk-note-html', noteHtml);
 Vue.component('mk-poll', poll);

src/client/app/common/views/components/media-list.vue

@@ -2,7 +2,7 @@
 <div class="mk-media-list" :data-count="mediaList.length">
 	<template v-for="media in mediaList">
 		<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
-		<mk-media-image :image="media" :key="media.id" v-else />
+		<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
 	</template>
 </div>
 </template>
@@ -11,7 +11,14 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['mediaList'],
+	props: {
+		mediaList: {
+			required: true
+		},
+		raw: {
+			default: false
+		}
+	}
 });
 </script>
 
@@ -23,7 +30,7 @@ export default Vue.extend({
 
 	@media (max-width 500px)
 		height 192px
-	
+
 	&[data-count="1"]
 		grid-template-rows 1fr
 	&[data-count="2"]
@@ -40,7 +47,7 @@ export default Vue.extend({
 	&[data-count="4"]
 		grid-template-columns 1fr 1fr
 		grid-template-rows 1fr 1fr
-	
+
 	:nth-child(1)
 		grid-column 1 / 2
 		grid-row 1 / 2
@@ -53,5 +60,5 @@ export default Vue.extend({
 	:nth-child(4)
 		grid-column 2 / 3
 		grid-row 2 / 3
-		
+
 </style>

src/client/app/common/views/components/messaging-room.message.vue

@@ -1,8 +1,6 @@
 <template>
 <div class="message" :data-is-me="isMe">
-	<router-link class="avatar-anchor" :to="message.user | userPage" :title="message.user | acct" target="_blank">
-		<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
-	</router-link>
+	<mk-avatar class="avatar" :user="message.user" target="_blank"/>
 	<div class="content">
 		<div class="balloon" :data-no-text="message.text == null">
 			<p class="read" v-if="isMe && message.isRead">%i18n:@is-read%</p>
@@ -67,20 +65,14 @@ export default Vue.extend({
 	padding 10px 12px 10px 12px
 	background-color transparent
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		position absolute
 		top 10px
-
-		> .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
+		width 54px
+		height 54px
+		border-radius 8px
+		transition all 0.1s ease
 
 	> .content
 
@@ -134,7 +126,7 @@ export default Vue.extend({
 				bottom -4px
 				left -12px
 				margin 0
-				color rgba(0, 0, 0, 0.5)
+				color rgba(#000, 0.5)
 				font-size 11px
 
 			> .content
@@ -146,7 +138,7 @@ export default Vue.extend({
 					overflow hidden
 					overflow-wrap break-word
 					font-size 1em
-					color rgba(0, 0, 0, 0.5)
+					color rgba(#000, 0.5)
 
 				> .text
 					display block
@@ -155,7 +147,7 @@ export default Vue.extend({
 					overflow hidden
 					overflow-wrap break-word
 					font-size 1em
-					color rgba(0, 0, 0, 0.8)
+					color rgba(#000, 0.8)
 
 					& + .file
 						> a
@@ -195,13 +187,13 @@ export default Vue.extend({
 			display block
 			margin 2px 0 0 0
 			font-size 10px
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			> [data-fa]
 				margin-left 4px
 
 	&:not([data-is-me])
-		> .avatar-anchor
+		> .avatar
 			left 12px
 
 		> .content
@@ -225,7 +217,7 @@ export default Vue.extend({
 				text-align left
 
 	&[data-is-me]
-		> .avatar-anchor
+		> .avatar
 			right 12px
 
 		> .content

src/client/app/common/views/components/messaging-room.vue

@@ -256,7 +256,7 @@ export default Vue.extend({
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			[data-fa]
 				margin-right 4px
@@ -267,7 +267,7 @@ export default Vue.extend({
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			[data-fa]
 				margin-right 4px
@@ -278,7 +278,7 @@ export default Vue.extend({
 			padding 16px
 			text-align center
 			font-size 0.8em
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			[data-fa]
 				margin-right 4px
@@ -289,14 +289,14 @@ export default Vue.extend({
 			padding 0 12px
 			line-height 24px
 			color #fff
-			background rgba(0, 0, 0, 0.3)
+			background rgba(#000, 0.3)
 			border-radius 12px
 
 			&:hover
-				background rgba(0, 0, 0, 0.4)
+				background rgba(#000, 0.4)
 
 			&:active
-				background rgba(0, 0, 0, 0.5)
+				background rgba(#000, 0.5)
 
 			&.fetching
 				cursor wait
@@ -322,7 +322,7 @@ export default Vue.extend({
 				left 0
 				right 0
 				margin 0 auto
-				background rgba(0, 0, 0, 0.1)
+				background rgba(#000, 0.1)
 
 			> span
 				display inline-block
@@ -330,7 +330,7 @@ export default Vue.extend({
 				padding 0 16px
 				//font-weight bold
 				line-height 32px
-				color rgba(0, 0, 0, 0.3)
+				color rgba(#000, 0.3)
 				background #fff
 
 	> footer

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

@@ -13,7 +13,7 @@
 					@click="navigate(user)"
 					tabindex="-1"
 				>
-					<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=32`" alt=""/>
+					<mk-avatar class="avatar" :user="user"/>
 					<span class="name">{{ user | userName }}</span>
 					<span class="username">@{{ user | acct }}</span>
 				</li>
@@ -31,7 +31,7 @@
 				:key="message.id"
 			>
 				<div>
-					<img class="avatar" :src="`${isMe(message) ? message.recipient.avatarUrl : message.user.avatarUrl}?thumbnail&size=64`" alt=""/>
+					<mk-avatar class="avatar" :user="isMe(message) ? message.recipient : message.user"/>
 					<header>
 						<span class="name">{{ isMe(message) ? message.recipient : message.user | userName }}</span>
 						<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
@@ -169,7 +169,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-messaging
+root(isDark)
 
 	&[data-compact]
 		font-size 0.8em
@@ -205,11 +205,11 @@ export default Vue.extend({
 		z-index 1
 		width 100%
 		background #fff
-		box-shadow 0 0px 2px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0px 2px rgba(#000, 0.2)
 
 		> .form
 			padding 8px
-			background #f7f7f7
+			background isDark ? #282c37 : #f7f7f7
 
 			> label
 				display block
@@ -241,13 +241,14 @@ export default Vue.extend({
 				line-height 38px
 				color #000
 				outline none
-				border solid 1px #eee
+				background isDark ? #191b22 : #fff
+				border solid 1px isDark ? #495156 : #eee
 				border-radius 5px
 				box-shadow none
 				transition color 0.5s ease, border 0.5s ease
 
 				&:hover
-					border solid 1px #ddd
+					border solid 1px isDark ? #b0b0b0 : #ddd
 					transition border 0.2s ease
 
 				&:focus
@@ -278,7 +279,7 @@ export default Vue.extend({
 					vertical-align top
 					white-space nowrap
 					overflow hidden
-					color rgba(0, 0, 0, 0.8)
+					color rgba(#000, 0.8)
 					text-decoration none
 					transition none
 					cursor pointer
@@ -317,32 +318,32 @@ export default Vue.extend({
 						margin 0 8px 0 0
 						/*font-weight bold*/
 						font-weight normal
-						color rgba(0, 0, 0, 0.8)
+						color rgba(#000, 0.8)
 
 					.username
 						font-weight normal
-						color rgba(0, 0, 0, 0.3)
+						color rgba(#000, 0.3)
 
 	> .history
 
 		> a
 			display block
 			text-decoration none
-			background #fff
-			border-bottom solid 1px #eee
+			background isDark ? #282c37 : #fff
+			border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			*
 				pointer-events none
 				user-select none
 
 			&:hover
-				background #fafafa
+				background isDark ? #1e2129 : #fafafa
 
 				> .avatar
 					filter saturate(200%)
 
 			&:active
-				background #eee
+				background isDark ? #14161b : #eee
 
 			&[data-is-read]
 			&[data-is-me]
@@ -382,17 +383,17 @@ export default Vue.extend({
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color rgba(0, 0, 0, 0.9)
+						color isDark ? #fff : rgba(#000, 0.9)
 						font-weight bold
 						transition all 0.1s ease
 
 					> .username
 						margin 0 8px
-						color rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(#000, 0.5)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(#000, 0.5)
 						font-size 80%
 
 				> .avatar
@@ -412,10 +413,10 @@ export default Vue.extend({
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color rgba(0, 0, 0, 0.8)
+						color isDark ? #fff : rgba(#000, 0.8)
 
 						.me
-							color rgba(0, 0, 0, 0.4)
+							color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
 
 					> .image
 						display block
@@ -460,4 +461,10 @@ export default Vue.extend({
 					> .avatar
 						margin 0 12px 0 0
 
+.mk-messaging[data-darkmode]
+	root(true)
+
+.mk-messaging:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -4,6 +4,7 @@ import parse from '../../../../../text/parse';
 import getAcct from '../../../../../acct/render';
 import { url } from '../../../config';
 import MkUrl from './url.vue';
+import MkGoogle from './google.vue';
 
 const flatten = list => list.reduce(
 	(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
@@ -145,6 +146,13 @@ export default Vue.component('mk-note-html', {
 					const emoji = emojilib.lib[token.emoji];
 					return createElement('span', emoji ? emoji.char : token.content);
 
+				case 'search':
+					return createElement(MkGoogle, {
+						props: {
+							q: token.query
+						}
+					});
+
 				default:
 					console.log('unknown ast type:', token.type);
 			}

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

@@ -2,6 +2,7 @@
 <div class="mk-note-menu">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact }" ref="popover">
+		<button @click="favorite">%i18n:@favorite%</button>
 		<button v-if="note.userId == os.i.id" @click="pin">%i18n:@pin%</button>
 		<a v-if="note.uri" :href="note.uri" target="_blank">%i18n:@remote%</a>
 	</div>
@@ -58,6 +59,14 @@ export default Vue.extend({
 			});
 		},
 
+		favorite() {
+			(this as any).api('notes/favorites/create', {
+				noteId: this.note.id
+			}).then(() => {
+				this.$destroy();
+			});
+		},
+
 		close() {
 			(this.$refs.backdrop as any).style.pointerEvents = 'none';
 			anime({
@@ -96,7 +105,7 @@ $border-color = rgba(27, 31, 35, 0.15)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.1)
+		background rgba(#000, 0.1)
 		opacity 0
 
 	> .popover
@@ -142,6 +151,7 @@ $border-color = rgba(27, 31, 35, 0.15)
 		> a
 			display block
 			padding 8px 16px
+			width 100%
 
 			&:hover
 				color $theme-color-foreground

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

@@ -31,7 +31,7 @@
 		<section v-if="invitations.length > 0">
 			<h2>対局の招待があります！:</h2>
 			<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
-				<img :src="`${i.parent.avatarUrl}?thumbnail&size=32`" alt="">
+				<mk-avatar class="avatar" :user="i.parent"/>
 				<span class="name"><b>{{ i.parent.name }}</b></span>
 				<span class="username">@{{ i.parent.username }}</span>
 				<mk-time :time="i.createdAt"/>
@@ -40,8 +40,8 @@
 		<section v-if="myGames.length > 0">
 			<h2>自分の対局</h2>
 			<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
-				<img :src="`${g.user1.avatarUrl}?thumbnail&size=32`" alt="">
-				<img :src="`${g.user2.avatarUrl}?thumbnail&size=32`" alt="">
+				<mk-avatar class="avatar" :user="g.user1.avatarUrl"/>
+				<mk-avatar class="avatar" :user="g.user2.avatarUrl"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
 				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
 			</a>
@@ -49,8 +49,8 @@
 		<section v-if="games.length > 0">
 			<h2>みんなの対局</h2>
 			<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
-				<img :src="`${g.user1.avatarUrl}?thumbnail&size=32`" alt="">
-				<img :src="`${g.user2.avatarUrl}?thumbnail&size=32`" alt="">
+				<mk-avatar class="avatar" :user="g.user1.avatarUrl"/>
+				<mk-avatar class="avatar" :user="g.user2.avatarUrl"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
 				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
 			</a>
@@ -271,8 +271,7 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
 			border-radius 100%
 
 		> span
@@ -301,8 +300,7 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
 			border-radius 100%
 
 		> span

src/client/app/common/views/components/poll-editor.vue

@@ -69,7 +69,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-poll-editor
+root(isDark)
 	padding 8px
 
 	> .caution
@@ -102,6 +102,8 @@ export default Vue.extend({
 				padding 6px 8px
 				width 300px
 				font-size 14px
+				color isDark ? #fff : #000
+				background isDark ? #191b22 : #fff
 				border solid 1px rgba($theme-color, 0.1)
 				border-radius 4px
 
@@ -139,4 +141,10 @@ export default Vue.extend({
 		&:active
 			color darken($theme-color, 30%)
 
+.mk-poll-editor[data-darkmode]
+	root(true)
+
+.mk-poll-editor:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -68,7 +68,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-poll
+root(isDark)
 
 	> ul
 		display block
@@ -81,16 +81,17 @@ export default Vue.extend({
 			margin 4px 0
 			padding 4px 8px
 			width 100%
-			border solid 1px #eee
+			color isDark ? #fff : #000
+			border solid 1px isDark ? #5e636f : #eee
 			border-radius 4px
 			overflow hidden
 			cursor pointer
 
 			&:hover
-				background rgba(0, 0, 0, 0.05)
+				background rgba(#000, 0.05)
 
 			&:active
-				background rgba(0, 0, 0, 0.1)
+				background rgba(#000, 0.1)
 
 			> .backdrop
 				position absolute
@@ -108,6 +109,8 @@ export default Vue.extend({
 					margin-left 4px
 
 	> p
+		color isDark ? #a3aebf : #000
+
 		a
 			color inherit
 
@@ -121,4 +124,10 @@ export default Vue.extend({
 			&:active
 				background transparent
 
+.mk-poll[data-darkmode]
+	root(true)
+
+.mk-poll:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -110,7 +110,7 @@ export default Vue.extend({
 
 $border-color = rgba(27, 31, 35, 0.15)
 
-.mk-reaction-picker
+root(isDark)
 	position initial
 
 	> .backdrop
@@ -120,13 +120,14 @@ $border-color = rgba(27, 31, 35, 0.15)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.1)
+		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
 		opacity 0
 
 	> .popover
+		$bgcolor = isDark ? #2c303c : #fff
 		position absolute
 		z-index 10001
-		background #fff
+		background $bgcolor
 		border 1px solid $border-color
 		border-radius 4px
 		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
@@ -159,15 +160,15 @@ $border-color = rgba(27, 31, 35, 0.15)
 				border-top solid $balloon-size transparent
 				border-left solid $balloon-size transparent
 				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size #fff
+				border-bottom solid $balloon-size $bgcolor
 
 		> p
 			display block
 			margin 0
 			padding 8px 10px
 			font-size 14px
-			color #586069
-			border-bottom solid 1px #e1e4e8
+			color isDark ? #d6dce2 : #586069
+			border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
 
 		> div
 			padding 4px
@@ -182,10 +183,16 @@ $border-color = rgba(27, 31, 35, 0.15)
 				border-radius 2px
 
 				&:hover
-					background #eee
+					background isDark ? #252731 : #eee
 
 				&:active
 					background $theme-color
 					box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 
+.mk-reaction-picker[data-darkmode]
+	root(true)
+
+.mk-reaction-picker:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/components/reactions-viewer.vue

@@ -1,15 +1,15 @@
 <template>
 <div class="mk-reactions-viewer">
 	<template v-if="reactions">
-		<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
-		<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
-		<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span>
-		<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span>
-		<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span>
-		<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span>
-		<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span>
-		<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span>
-		<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span>
+		<span v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
+		<span v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
+		<span v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
+		<span v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
+		<span v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
+		<span v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
+		<span v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
+		<span v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
+		<span v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
 	</template>
 </div>
 </template>
@@ -27,9 +27,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-reactions-viewer
-	border-top dashed 1px #eee
-	border-bottom dashed 1px #eee
+root(isDark)
+	$borderColor = isDark ? #5e6673 : #eee
+	border-top dashed 1px $borderColor
+	border-bottom dashed 1px $borderColor
 	margin 4px 0
 
 	&:empty
@@ -44,6 +45,12 @@ export default Vue.extend({
 		> span
 			margin-left 4px
 			font-size 1.2em
-			color #444
+			color isDark ? #d1d5dc : #444
+
+.mk-reactions-viewer[data-darkmode]
+	root(true)
+
+.mk-reactions-viewer:not([data-darkmode])
+	root(false)
 
 </style>

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

@@ -91,7 +91,7 @@ export default Vue.extend({
 			width 100%
 			line-height 44px
 			font-size 1em
-			color rgba(0, 0, 0, 0.7)
+			color rgba(#000, 0.7)
 			background #fff
 			outline none
 			border solid 1px #eee
@@ -117,7 +117,7 @@ export default Vue.extend({
 		margin -6px 0 0 0
 		width 100%
 		font-size 1.2em
-		color rgba(0, 0, 0, 0.5)
+		color rgba(#000, 0.5)
 		outline none
 		border none
 		border-radius 0

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

@@ -234,13 +234,13 @@ export default Vue.extend({
 		color #333 !important
 		background #fff !important
 		outline none
-		border solid 1px rgba(0, 0, 0, 0.1)
+		border solid 1px rgba(#000, 0.1)
 		border-radius 4px
 		box-shadow 0 0 0 114514px #fff inset
 		transition all .3s ease
 
 		&:hover
-			border-color rgba(0, 0, 0, 0.2)
+			border-color rgba(#000, 0.2)
 			transition all .1s ease
 
 		&:focus

src/client/app/common/views/components/stream-indicator.vue

@@ -73,7 +73,7 @@ export default Vue.extend({
 	padding 6px 12px
 	font-size 0.9em
 	color #fff
-	background rgba(0, 0, 0, 0.8)
+	background rgba(#000, 0.8)
 	border-radius 4px
 
 	> p

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

@@ -87,7 +87,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-switch
+root(isDark)
 	display flex
 	margin 12px 0
 	cursor pointer
@@ -121,11 +121,12 @@ export default Vue.extend({
 	&:hover
 		> .label
 			> span
-				color #2e3338
+				color isDark ? #fff : #2e3338
 
 		> .button
-			background #ced2da
-			border-color #ced2da
+			$color = isDark ? #15181d : #ced2da
+			background $color
+			border-color $color
 
 	> input
 		position absolute
@@ -147,14 +148,16 @@ export default Vue.extend({
 				border-radius 14px
 
 	> .button
+		$color = isDark ? #1c1f25 : #dcdfe6
+
 		display inline-block
 		margin 0
 		width 40px
 		min-width 40px
 		height 20px
 		min-height 20px
-		background #dcdfe6
-		border 1px solid #dcdfe6
+		background $color
+		border 1px solid $color
 		outline none
 		border-radius 10px
 		transition inherit
@@ -179,12 +182,18 @@ export default Vue.extend({
 		> span
 			display block
 			line-height 20px
-			color #4a535a
+			color isDark ? #c4ccd2 : #4a535a
 			transition inherit
 
 		> p
 			margin 0
 			//font-size 90%
-			color #9daab3
+			color isDark ? #78858e : #9daab3
+
+.mk-switch[data-darkmode]
+	root(true)
+
+.mk-switch:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/components/twitter-setting.vue

@@ -50,8 +50,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-twitter-setting
-	color #4a535a
-
 	.account
 		border solid 1px #e1e8ed
 		border-radius 4px

src/client/app/common/views/components/url-preview.vue

@@ -2,8 +2,8 @@
 <iframe v-if="youtubeId" type="text/html" height="250"
 	:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
 	frameborder="0"/>
-<div v-else>
-	<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
+<div v-else class="mk-url-preview">
+	<a :href="url" target="_blank" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
 		<article>
 			<header>
@@ -65,78 +65,85 @@ export default Vue.extend({
 iframe
 	width 100%
 
-.mk-url-preview
-	display block
-	font-size 16px
-	border solid 1px #eee
-	border-radius 4px
-	overflow hidden
+root(isDark)
+	> a
+		display block
+		font-size 16px
+		border solid 1px isDark ? #191b1f : #eee
+		border-radius 4px
+		overflow hidden
 
-	&:hover
-		text-decoration none
-		border-color #ddd
+		&:hover
+			text-decoration none
+			border-color isDark ? #4f5561 : #ddd
 
-		> article > header > h1
-			text-decoration underline
-
-	> .thumbnail
-		position absolute
-		width 100px
-		height 100%
-		background-position center
-		background-size cover
-
-		& + article
-			left 100px
-			width calc(100% - 100px)
-
-	> article
-		padding 16px
-
-		> header
-			margin-bottom 8px
-
-			> h1
-				margin 0
-				font-size 1em
-				color #555
-
-		> p
-			margin 0
-			color #777
-			font-size 0.8em
-
-		> footer
-			margin-top 8px
-			height 16px
-
-			> img
-				display inline-block
-				width 16px
-				height 16px
-				margin-right 4px
-				vertical-align top
-
-			> p
-				display inline-block
-				margin 0
-				color #666
-				font-size 0.8em
-				line-height 16px
-				vertical-align top
-
-	@media (max-width 500px)
-		font-size 8px
-		border none
+			> article > header > h1
+				text-decoration underline
 
 		> .thumbnail
-			width 70px
+			position absolute
+			width 100px
+			height 100%
+			background-position center
+			background-size cover
 
 			& + article
-				left 70px
-				width calc(100% - 70px)
+				left 100px
+				width calc(100% - 100px)
 
 		> article
-			padding 8px
+			padding 16px
+
+			> header
+				margin-bottom 8px
+
+				> h1
+					margin 0
+					font-size 1em
+					color isDark ? #d6dae0 : #555
+
+			> p
+				margin 0
+				color isDark ? #a4aab3 : #777
+				font-size 0.8em
+
+			> footer
+				margin-top 8px
+				height 16px
+
+				> img
+					display inline-block
+					width 16px
+					height 16px
+					margin-right 4px
+					vertical-align top
+
+				> p
+					display inline-block
+					margin 0
+					color isDark ? #b0b4bf : #666
+					font-size 0.8em
+					line-height 16px
+					vertical-align top
+
+		@media (max-width 500px)
+			font-size 8px
+			border none
+
+			> .thumbnail
+				width 70px
+
+				& + article
+					left 70px
+					width calc(100% - 70px)
+
+			> article
+				padding 8px
+
+.mk-url-preview[data-darkmode]
+	root(true)
+
+.mk-url-preview:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/components/visibility-chooser.vue

@@ -0,0 +1,223 @@
+<template>
+<div class="mk-visibility-chooser">
+	<div class="backdrop" ref="backdrop" @click="close"></div>
+	<div class="popover" :class="{ compact }" ref="popover">
+		<div @click="choose('public')" :class="{ active: v == 'public' }">
+			<div>%fa:globe%</div>
+			<div>
+				<span>公開</span>
+			</div>
+		</div>
+		<div @click="choose('home')" :class="{ active: v == 'home' }">
+			<div>%fa:home%</div>
+			<div>
+				<span>ホーム</span>
+				<span>ホームタイムラインにのみ公開</span>
+			</div>
+		</div>
+		<div @click="choose('followers')" :class="{ active: v == 'followers' }">
+			<div>%fa:unlock%</div>
+			<div>
+				<span>フォロワー</span>
+				<span>自分のフォロワーにのみ公開</span>
+			</div>
+		</div>
+		<div @click="choose('specified')" :class="{ active: v == 'specified' }">
+			<div>%fa:envelope%</div>
+			<div>
+				<span>ダイレクト</span>
+				<span>指定したユーザーにのみ公開</span>
+			</div>
+		</div>
+		<div @click="choose('private')" :class="{ active: v == 'private' }">
+			<div>%fa:lock%</div>
+			<div>
+				<span>非公開</span>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['source', 'compact', 'v'],
+	mounted() {
+		this.$nextTick(() => {
+			const popover = this.$refs.popover as any;
+
+			const rect = this.source.getBoundingClientRect();
+			const width = popover.offsetWidth;
+			const height = popover.offsetHeight;
+
+			let left;
+			let top;
+
+			if (this.compact) {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+				left = (x - (width / 2));
+				top = (y - (height / 2));
+			} else {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
+				left = (x - (width / 2));
+				top = y;
+			}
+
+			if (left + width > window.innerWidth) {
+				left = window.innerWidth - width;
+			}
+
+			popover.style.left = left + 'px';
+			popover.style.top = top + '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
+			});
+		});
+	},
+	methods: {
+		choose(visibility) {
+			this.$emit('chosen', visibility);
+			this.$destroy();
+		},
+		close() {
+			(this.$refs.backdrop as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 0,
+				duration: 200,
+				easing: 'linear'
+			});
+
+			(this.$refs.popover as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.popover,
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+$border-color = rgba(27, 31, 35, 0.15)
+
+root(isDark)
+	position initial
+
+	> .backdrop
+		position fixed
+		top 0
+		left 0
+		z-index 10000
+		width 100%
+		height 100%
+		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		opacity 0
+
+	> .popover
+		$bgcolor = isDark ? #2c303c : #fff
+		position absolute
+		z-index 10001
+		width 240px
+		padding 8px 0
+		background $bgcolor
+		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 = 10px
+
+		&: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 $bgcolor
+
+		> div
+			display flex
+			padding 8px 14px
+			font-size 12px
+			color isDark ? #fff : #666
+			cursor pointer
+
+			&:hover
+				background isDark ? #252731 : #eee
+
+			&:active
+				background isDark ? #21242b : #ddd
+
+			&.active
+				color $theme-color-foreground
+				background $theme-color
+
+			> *
+				user-select none
+				pointer-events none
+
+			> *:first-child
+				display flex
+				justify-content center
+				align-items center
+				margin-right 10px
+
+			> *:last-child
+				flex 1 1 auto
+
+				> span:first-child
+					display block
+					font-weight bold
+
+				> span:last-child:not(:first-child)
+					opacity 0.6
+
+.mk-visibility-chooser[data-darkmode]
+	root(true)
+
+.mk-visibility-chooser:not([data-darkmode])
+	root(false)
+
+</style>

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

@@ -1,9 +1,7 @@
 <template>
 <div class="mk-welcome-timeline">
 	<div v-for="note in notes">
-		<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.user.id">
-			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="note.user" target="_blank"/>
 		<div class="body">
 			<header>
 				<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
@@ -62,25 +60,22 @@ export default Vue.extend({
 		overflow-wrap break-word
 		font-size .9em
 		color #4C4C4C
-		border-bottom 1px solid rgba(0, 0, 0, 0.05)
+		border-bottom 1px solid rgba(#000, 0.05)
 
 		&:after
 			content ""
 			display block
 			clear both
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
 			position -webkit-sticky
 			position sticky
 			top 16px
-
-			> img
-				display block
-				width 42px
-				height 42px
-				border-radius 6px
+			width 42px
+			height 42px
+			border-radius 6px
 
 		> .body
 			float right

src/client/app/common/views/widgets/access-log.vue

@@ -61,6 +61,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });
@@ -78,7 +79,7 @@ export default define({
 		color #555
 
 		&:nth-child(odd)
-			background rgba(0, 0, 0, 0.025)
+			background rgba(#000, 0.025)
 
 		> b
 			margin-right 4px

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

@@ -68,6 +68,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });

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

@@ -73,6 +73,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		},
 		tick() {
 			const now = new Date();
@@ -109,11 +110,11 @@ export default define({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mkw-calendar
+root(isDark)
 	padding 16px 0
-	color #777
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	color isDark ? #c5ced6 :#777
+	background isDark ? #282C37 : #fff
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-special='on-new-years-day']
@@ -126,7 +127,7 @@ export default define({
 	&[data-mobile]
 		border none
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 	&:after
 		content ""
@@ -171,7 +172,7 @@ export default define({
 				margin 0 0 2px 0
 				font-size 12px
 				line-height 18px
-				color #888
+				color isDark ? #7a8692 : #888
 
 				> b
 					margin-left 2px
@@ -179,7 +180,7 @@ export default define({
 			> .meter
 				width 100%
 				overflow hidden
-				background #eee
+				background isDark ? #1c1f25 : #eee
 				border-radius 8px
 
 				> .val
@@ -198,4 +199,10 @@ export default define({
 				> .meter > .val
 					background #41ddde
 
+.mkw-calendar[data-darkmode]
+	root(true)
+
+.mkw-calendar:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -19,9 +19,9 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-donation
-	background #fff
-	border solid 1px #ead8bb
+root(isDark)
+	background isDark ? #282c37 : #fff
+	border solid 1px isDark ? #c3831c : #ead8bb
 	border-radius 6px
 
 	> article
@@ -30,7 +30,7 @@ export default define({
 		> h1
 			margin 0 0 5px 0
 			font-size 1em
-			color #888
+			color isDark ? #b2bac1 : #888
 
 			> [data-fa]
 				margin-right 0.25em
@@ -40,13 +40,13 @@ export default define({
 			z-index 1
 			margin 0
 			font-size 0.8em
-			color #999
+			color isDark ? #a1a6ab : #999
 
 	&[data-mobile]
 		border none
 		background #ead8bb
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 		> article
 			> h1
@@ -55,4 +55,10 @@ export default define({
 			> p
 				color #777d71
 
+.mkw-donation[data-darkmode]
+	root(true)
+
+.mkw-donation:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-nav">
 	<mk-widget-container>
-		<div :class="$style.body">
+		<div class="mkw-nav--body">
 			<mk-nav/>
 		</div>
 	</mk-widget-container>
@@ -15,17 +15,24 @@ export default define({
 });
 </script>
 
-<style lang="stylus" module>
-.body
-	padding 16px
-	font-size 12px
-	color #aaa
-	background #fff
+<style lang="stylus" scoped>
+root(isDark)
+	.mkw-nav--body
+		padding 16px
+		font-size 12px
+		color isDark ? #9aa4b3 : #aaa
+		background isDark ? #282c37 : #fff
 
-	a
-		color #999
+		a
+			color isDark ? #9aa4b3 : #999
 
-	i
-		color #ccc
+		i
+			color isDark ? #9aa4b3 : #ccc
+
+.mkw-nav[data-darkmode]
+	root(true)
+
+.mkw-nav:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/widgets/photo-stream.vue

@@ -59,6 +59,8 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+
+			this.save();
 		}
 	}
 });

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

@@ -4,9 +4,11 @@
 		<template slot="header">%fa:rss-square%RSS</template>
 		<button slot="func" title="設定" @click="setting">%fa:cog%</button>
 
-		<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-		<div :class="$style.feed" v-else>
-			<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
+		<div class="mkw-rss--body">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<div class="feed" v-else>
+				<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
+			</div>
 		</div>
 	</mk-widget-container>
 </div>
@@ -38,6 +40,7 @@ export default define({
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		},
 		fetch() {
 			fetch(`https://api.rss2json.com/v1/api.json?rss_url=${this.url}`, {
@@ -56,38 +59,46 @@ export default define({
 });
 </script>
 
-<style lang="stylus" module>
-.feed
-	padding 12px 16px
-	font-size 0.9em
+<style lang="stylus" scoped>
+root(isDark)
+	.mkw-rss--body
+		.feed
+			padding 12px 16px
+			font-size 0.9em
 
-	> a
-		display block
-		padding 4px 0
-		color #666
-		border-bottom dashed 1px #eee
+			> a
+				display block
+				padding 4px 0
+				color isDark ? #9aa4b3 : #666
+				border-bottom dashed 1px isDark ? #1c2023 : #eee
 
-		&:last-child
-			border-bottom none
+				&:last-child
+					border-bottom none
 
-.fetching
-	margin 0
-	padding 16px
-	text-align center
-	color #aaa
+		.fetching
+			margin 0
+			padding 16px
+			text-align center
+			color #aaa
 
-	> [data-fa]
-		margin-right 4px
+			> [data-fa]
+				margin-right 4px
 
-&[data-mobile]
-	.feed
-		padding 0
-		font-size 1em
+		&[data-mobile]
+			.feed
+				padding 0
+				font-size 1em
 
-		> a
-			padding 8px 16px
+				> a
+					padding 8px 16px
 
-			&:nth-child(even)
-				background rgba(0, 0, 0, 0.05)
+					&:nth-child(even)
+						background rgba(#000, 0.05)
+
+.mkw-rss[data-darkmode]
+	root(true)
+
+.mkw-rss:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/widgets/server.cpu-memory.vue

@@ -100,7 +100,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.cpu-memory
+root(isDark)
 	> svg
 		display block
 		padding 10px
@@ -115,7 +115,7 @@ export default Vue.extend({
 
 		> text
 			font-size 5px
-			fill rgba(0, 0, 0, 0.55)
+			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
 
 			> tspan
 				opacity 0.5
@@ -124,4 +124,11 @@ export default Vue.extend({
 		content ""
 		display block
 		clear both
+
+.cpu-memory[data-darkmode]
+	root(true)
+
+.cpu-memory:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.cpu.vue

@@ -38,7 +38,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.cpu
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -52,7 +52,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -65,4 +65,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.cpu[data-darkmode]
+	root(true)
+
+.cpu:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.disk.vue

@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.disk
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -73,4 +73,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.disk[data-darkmode]
+	root(true)
+
+.disk:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.memory.vue

@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.memory
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -73,4 +73,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.memory[data-darkmode]
+	root(true)
+
+.memory:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.pie.vue

@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-svg
+root(isDark)
 	display block
 	height 100%
 
@@ -56,6 +56,12 @@ svg
 
 	> text
 		font-size 0.15px
-		fill rgba(0, 0, 0, 0.6)
+		fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
+
+svg[data-darkmode]
+	root(true)
+
+svg:not([data-darkmode])
+	root(false)
 
 </style>

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

@@ -68,6 +68,7 @@ export default define({
 			} else {
 				this.props.view++;
 			}
+			this.save();
 		},
 		func() {
 			if (this.props.design == 2) {
@@ -75,6 +76,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });

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

@@ -64,6 +64,7 @@ export default define({
 			} else {
 				this.props.size++;
 			}
+			this.save();
 
 			this.applySize();
 		},
@@ -111,6 +112,7 @@ export default define({
 		choose() {
 			(this as any).apis.chooseDriveFolder().then(folder => {
 				this.props.folder = folder ? folder.id : null;
+				this.save();
 				this.fetch();
 			});
 		}
@@ -122,13 +124,13 @@ export default define({
 .mkw-slideshow
 	overflow hidden
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-mobile]
 		border none
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 	> div
 		width 100%

src/client/app/desktop/api/update-avatar.ts

@@ -1,4 +1,4 @@
-import OS from '../../common/mios';
+import OS from '../../mios';
 import { apiUrl } from '../../config';
 import CropWindow from '../views/components/crop-window.vue';
 import ProgressDialog from '../views/components/progress-dialog.vue';

src/client/app/desktop/api/update-banner.ts

@@ -1,4 +1,4 @@
-import OS from '../../common/mios';
+import OS from '../../mios';
 import { apiUrl } from '../../config';
 import CropWindow from '../views/components/crop-window.vue';
 import ProgressDialog from '../views/components/progress-dialog.vue';
@@ -95,7 +95,7 @@ export default (os: OS) => {
 				multiple: false,
 				title: '%fa:image%バナーにする画像を選択'
 			});
-		
+
 		return selectedFile
 			.then(cropImage)
 			.then(setBanner)

src/client/app/desktop/script.ts

@@ -2,6 +2,7 @@
  * Desktop Client
  */
 
+import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 // Style
@@ -24,8 +25,10 @@ import updateBanner from './api/update-banner';
 
 import MkIndex from './views/pages/index.vue';
 import MkUser from './views/pages/user/user.vue';
+import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
+import MkUserList from './views/pages/user-list.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
@@ -49,9 +52,11 @@ init(async (launch) => {
 		routes: [
 			{ path: '/', name: 'index', component: MkIndex },
 			{ path: '/i/customize-home', component: MkHomeCustomize },
+			{ path: '/i/favorites', component: MkFavorites },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
+			{ path: '/i/lists/:list', component: MkUserList },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/othello', component: MkOthello },

src/client/app/desktop/style.styl

@@ -44,6 +44,26 @@ html
 	height 100%
 	background #f7f7f7
 
+	&[data-darkmode]
+		background #191B22
+
+		&, *
+			&::-webkit-scrollbar-track
+				background-color #282C37
+
+			&::-webkit-scrollbar
+				width 6px
+				height 6px
+
+			&::-webkit-scrollbar-thumb
+				background-color #454954
+
+				&:hover
+					background-color #535660
+
+				&:active
+					background-color $theme-color
+
 body
 	display flex
 	flex-direction column

src/client/app/desktop/ui.styl

@@ -123,3 +123,59 @@ textarea.ui
 		font-size 90%
 		font-weight bold
 		color rgba(#373a3c, 0.9)
+
+html[data-darkmode]
+	button.ui
+	.button.ui
+		color #fff
+		background linear-gradient(to bottom, #313543 0%, #282c37 100%)
+		border-color #1c2023
+
+		&:hover
+			background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
+			border-color #151a1d
+
+		&:active
+			background #22262f
+			border-color #151a1d
+
+		&.primary
+			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: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
+
+	input:not([type]).ui
+	input[type='text'].ui
+	input[type='password'].ui
+	input[type='email'].ui
+	input[type='date'].ui
+	input[type='number'].ui
+	textarea.ui
+		display block
+		padding 10px
+		width 100%
+		height 40px
+		font-family sans-serif
+		font-size 16px
+		color #dee4e8
+		background #191b22
+		border solid 1px #495156
+		border-radius 4px
+
+		&:hover
+			border-color #b0b0b0
+
+		&:focus
+			border-color $theme-color
+
+	.ui.from.group
+		> p:first-child
+			color #c0c7cc

src/client/app/desktop/views/components/activity.calendar.vue

@@ -61,6 +61,6 @@ svg
 
 		&.day
 			&:hover
-				fill rgba(0, 0, 0, 0.05)
+				fill rgba(#000, 0.05)
 
 </style>

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

@@ -1,14 +1,15 @@
 <template>
-<div class="mk-activity" :data-melt="design == 2">
-	<template v-if="design == 0">
-		<p class="title">%fa:chart-bar%%i18n:@title%</p>
-		<button @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
-	</template>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<template v-else>
-		<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
-		<x-chart v-show="view == 1" :data="[].concat(activity)"/>
-	</template>
+<div class="mk-activity">
+	<mk-widget-container :show-header="design == 0" :naked="design == 2">
+		<template slot="header">%fa:chart-bar%%i18n:@title%</template>
+		<button slot="func" title="%i18n:@toggle%" @click="toggle">%fa:sort%</button>
+
+		<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		<template v-else>
+			<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
+			<x-chart v-show="view == 1" :data="[].concat(activity)"/>
+		</template>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -64,53 +65,14 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" scoped>
-.mk-activity
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
+<style lang="stylus" module>
+.fetching
+	margin 0
+	padding 16px
+	text-align center
+	color #aaa
 
-	&[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
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> [data-fa]
-			margin-right 4px
+	> [data-fa]
+		margin-right 4px
 
 </style>

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

@@ -133,10 +133,10 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-calendar
-	color #777
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+root(isDark)
+	color isDark ? #c5ced6 : #777
+	background isDark ? #282C37 : #fff
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-melt]
@@ -152,7 +152,7 @@ export default Vue.extend({
 		font-size 0.9em
 		font-weight bold
 		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+		box-shadow 0 1px rgba(#000, 0.07)
 
 		> [data-fa]
 			margin-right 4px
@@ -214,10 +214,10 @@ export default Vue.extend({
 					border-radius 6px
 
 				&:hover > div
-					background rgba(0, 0, 0, 0.025)
+					background rgba(#000, 0.025)
 
 				&:active > div
-					background rgba(0, 0, 0, 0.05)
+					background rgba(#000, 0.05)
 
 				&[data-is-donichi]
 					color #ef95a0
@@ -233,10 +233,10 @@ export default Vue.extend({
 					font-weight bold
 
 					> div
-						background rgba(0, 0, 0, 0.025)
+						background rgba(#000, 0.025)
 
 					&:active > div
-						background rgba(0, 0, 0, 0.05)
+						background rgba(#000, 0.05)
 
 				&[data-today]
 					> div
@@ -249,4 +249,10 @@ export default Vue.extend({
 					&:active > div
 						background darken($theme-color, 10%)
 
+.mk-calendar[data-darkmode]
+	root(true)
+
+.mk-calendar:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/context-menu.menu.vue

@@ -31,7 +31,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.menu
+root(isDark)
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -46,7 +46,7 @@ export default Vue.extend({
 		&.divider
 			margin-top $padding
 			padding-top $padding
-			border-top solid 1px #eee
+			border-top solid 1px isDark ? #1c2023 : #eee
 
 		&.nest
 			> p
@@ -75,7 +75,7 @@ export default Vue.extend({
 			margin 0
 			padding 0 32px 0 38px
 			line-height $item-height
-			color #868C8C
+			color isDark ? #c8cece : #868C8C
 			text-decoration none
 			cursor pointer
 
@@ -104,11 +104,17 @@ export default Vue.extend({
 		left $width
 		margin-top -($padding)
 		width $width
-		background #fff
+		background isDark ? #282c37 :#fff
 		border-radius 0 4px 4px 4px
-		box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+		box-shadow 2px 2px 8px rgba(#000, 0.2)
 		transition visibility 0s linear 0.2s
 
+.menu[data-darkmode]
+	root(true)
+
+.menu:not([data-darkmode])
+	root(false)
+
 </style>
 
 <style lang="stylus" module>

src/client/app/desktop/views/components/context-menu.vue

@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.context-menu
+root(isDark)
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -66,9 +66,15 @@ export default Vue.extend({
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background #fff
+	background isDark ? #282c37 : #fff
 	border-radius 0 4px 4px 4px
-	box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
 
+.context-menu[data-darkmode]
+	root(true)
+
+.context-menu:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -102,7 +102,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 		opacity 0
 		pointer-events none
 

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

@@ -186,7 +186,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.root.file
+root(isDark)
 	padding 8px 0 0 0
 	height 180px
 	border-radius 4px
@@ -195,7 +195,7 @@ export default Vue.extend({
 		cursor pointer
 
 	&:hover
-		background rgba(0, 0, 0, 0.05)
+		background rgba(#000, 0.05)
 
 		> .label
 			&:before
@@ -203,7 +203,7 @@ export default Vue.extend({
 				background #0b65a5
 
 	&:active
-		background rgba(0, 0, 0, 0.1)
+		background rgba(#000, 0.1)
 
 		> .label
 			&:before
@@ -308,10 +308,16 @@ export default Vue.extend({
 		font-size 0.8em
 		text-align center
 		word-break break-all
-		color #444
+		color isDark ? #fff : #444
 		overflow hidden
 
 		> .ext
 			opacity 0.5
 
+.root.file[data-darkmode]
+	root(true)
+
+.root.file:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -577,7 +577,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-drive
+root(isDark)
 
 	> nav
 		display block
@@ -585,10 +585,9 @@ export default Vue.extend({
 		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)
+		color isDark ? #d2d9dc : #555
+		background isDark ? #282c37 : #fff
+		box-shadow 0 1px 0 rgba(#000, 0.05)
 
 		&, *
 			user-select none
@@ -665,6 +664,7 @@ export default Vue.extend({
 		padding 8px
 		height calc(100% - 38px)
 		overflow auto
+		background isDark ? #191b22 : #fff
 
 		&, *
 			user-select none
@@ -733,7 +733,7 @@ export default Vue.extend({
 				display inline-block
 				position absolute
 				top 0
-				background-color rgba(0, 0, 0, 0.3)
+				background-color rgba(#000, 0.3)
 				border-radius 100%
 
 				animation sk-bounce 2.0s infinite ease-in-out
@@ -770,4 +770,10 @@ export default Vue.extend({
 	> input
 		display none
 
+.mk-drive[data-darkmode]
+	root(true)
+
+.mk-drive:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/ellipsis-icon.vue

@@ -14,7 +14,7 @@
 		display inline-block
 		width 18px
 		height 18px
-		background-color rgba(0, 0, 0, 0.3)
+		background-color rgba(#000, 0.3)
 		border-radius 100%
 		animation bounce 1.4s infinite ease-in-out both
 

src/client/app/desktop/views/components/follow-button.vue

@@ -19,6 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	props: {
 		user: {
@@ -30,6 +31,7 @@ export default Vue.extend({
 			default: 'compact'
 		}
 	},
+
 	data() {
 		return {
 			wait: false,
@@ -37,6 +39,7 @@ export default Vue.extend({
 			connectionId: null
 		};
 	},
+
 	mounted() {
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
@@ -44,13 +47,14 @@ export default Vue.extend({
 		this.connection.on('follow', this.onFollow);
 		this.connection.on('unfollow', this.onUnfollow);
 	},
+
 	beforeDestroy() {
 		this.connection.off('follow', this.onFollow);
 		this.connection.off('unfollow', this.onUnfollow);
 		(this as any).os.stream.dispose(this.connectionId);
 	},
-	methods: {
 
+	methods: {
 		onFollow(user) {
 			if (user.id == this.user.id) {
 				this.user.isFollowing = user.isFollowing;
@@ -94,7 +98,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-follow-button
+root(isDark)
 	display block
 	cursor pointer
 	padding 0
@@ -121,17 +125,17 @@ export default Vue.extend({
 			border-radius 8px
 
 	&.follow
-		color #888
-		background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-		border solid 1px #e2e2e2
+		color isDark ? #fff : #888
+		background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+		border solid 1px isDark ? #1c2023 : #e2e2e2
 
 		&:hover
-			background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-			border-color #dcdcdc
+			background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+			border-color isDark ? #151a1d : #dcdcdc
 
 		&:active
-			background #ececec
-			border-color #dcdcdc
+			background isDark ? #22262f : #ececec
+			border-color isDark ? #151a1d : #dcdcdc
 
 	&.unfollow
 		color $theme-color-foreground
@@ -161,4 +165,10 @@ export default Vue.extend({
 		i
 			margin-right 8px
 
+.mk-follow-button[data-darkmode]
+	root(true)
+
+.mk-follow-button:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/friends-maker.vue

@@ -3,9 +3,7 @@
 	<p class="title">気になるユーザーをフォロー:</p>
 	<div class="users" v-if="!fetching && users.length > 0">
 		<div class="user" v-for="user in users" :key="user.id">
-			<router-link class="avatar-anchor" :to="user | userPage">
-				<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="user.id"/>
-			</router-link>
+			<mk-avatar class="avatar" :user="user" target="_blank"/>
 			<div class="body">
 				<router-link class="name" :to="user | userPage" v-user-preview="user.id">{{ user | userName }}</router-link>
 				<p class="username">@{{ user | acct }}</p>
@@ -86,18 +84,13 @@ export default Vue.extend({
 				display block
 				clear both
 
-			> .avatar-anchor
+			> .avatar
 				display block
 				float left
 				margin 0 12px 0 0
-
-				> .avatar
-					display block
-					width 42px
-					height 42px
-					margin 0
-					border-radius 8px
-					vertical-align bottom
+				width 42px
+				height 42px
+				border-radius 8px
 
 			> .body
 				float left

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

@@ -53,7 +53,7 @@
 			<div class="main">
 				<a @click="hint">カスタマイズのヒント</a>
 				<div>
-					<mk-post-form v-if="os.i.clientSettings.showPostFormOnTopOfTl"/>
+					<mk-post-form v-if="clientSettings.showPostFormOnTopOfTl"/>
 					<mk-timeline ref="tl" @loaded="onTlLoaded"/>
 				</div>
 			</div>
@@ -63,7 +63,7 @@
 				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp"/>
 			</div>
 			<div class="main">
-				<mk-post-form v-if="os.i.clientSettings.showPostFormOnTopOfTl"/>
+				<mk-post-form v-if="clientSettings.showPostFormOnTopOfTl"/>
 				<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
 				<mk-mentions @loaded="onTlLoaded" v-if="mode == 'mentions'"/>
 			</div>
@@ -81,6 +81,7 @@ export default Vue.extend({
 	components: {
 		XDraggable
 	},
+
 	props: {
 		customize: {
 			type: Boolean,
@@ -91,61 +92,43 @@ export default Vue.extend({
 			default: 'timeline'
 		}
 	},
+
 	data() {
 		return {
 			connection: null,
 			connectionId: null,
 			widgetAdderSelected: null,
-			trash: [],
-			widgets: {
-				left: [],
-				right: []
-			}
+			trash: []
 		};
 	},
+
 	computed: {
-		home: {
-			get(): any[] {
-				//#region 互換性のため
-				(this as any).os.i.clientSettings.home.forEach(w => {
-					if (w.name == 'rss-reader') w.name = 'rss';
-					if (w.name == 'user-recommendation') w.name = 'users';
-					if (w.name == 'recommended-polls') w.name = 'polls';
-				});
-				//#endregion
-				return (this as any).os.i.clientSettings.home;
-			},
-			set(value) {
-				(this as any).os.i.clientSettings.home = value;
-			}
+		home(): any[] {
+			return this.$store.state.settings.data.home;
 		},
 		left(): any[] {
 			return this.home.filter(w => w.place == 'left');
 		},
 		right(): any[] {
 			return this.home.filter(w => w.place == 'right');
+		},
+		widgets(): any {
+			return {
+				left: this.left,
+				right: this.right
+			};
 		}
 	},
-	created() {
-		this.widgets.left = this.left;
-		this.widgets.right = this.right;
-		this.$watch('os.i.clientSettings', i => {
-			this.widgets.left = this.left;
-			this.widgets.right = this.right;
-		}, {
-			deep: true
-		});
-	},
+
 	mounted() {
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
-
-		this.connection.on('home_updated', this.onHomeUpdated);
 	},
+
 	beforeDestroy() {
-		this.connection.off('home_updated', this.onHomeUpdated);
 		(this as any).os.stream.dispose(this.connectionId);
 	},
+
 	methods: {
 		hint() {
 			(this as any).apis.dialog({
@@ -159,56 +142,44 @@ export default Vue.extend({
 				}]
 			});
 		},
+
 		onTlLoaded() {
 			this.$emit('loaded');
 		},
-		onHomeUpdated(data) {
-			if (data.home) {
-				(this as any).os.i.clientSettings.home = data.home;
-				this.widgets.left = data.home.filter(w => w.place == 'left');
-				this.widgets.right = data.home.filter(w => w.place == 'right');
-			} else {
-				const w = (this as any).os.i.clientSettings.home.find(w => w.id == data.id);
-				if (w != null) {
-					w.data = data.data;
-					this.$refs[w.id][0].preventSave = true;
-					this.$refs[w.id][0].props = w.data;
-					this.widgets.left = (this as any).os.i.clientSettings.home.filter(w => w.place == 'left');
-					this.widgets.right = (this as any).os.i.clientSettings.home.filter(w => w.place == 'right');
-				}
-			}
-		},
+
 		onWidgetContextmenu(widgetId) {
 			const w = (this.$refs[widgetId] as any)[0];
 			if (w.func) w.func();
 		},
+
 		onWidgetSort() {
 			this.saveHome();
 		},
+
 		onTrash(evt) {
 			this.saveHome();
 		},
+
 		addWidget() {
-			const widget = {
+			this.$store.dispatch('settings/addHomeWidget', {
 				name: this.widgetAdderSelected,
 				id: uuid(),
 				place: 'left',
 				data: {}
-			};
-
-			this.widgets.left.unshift(widget);
-			this.saveHome();
+			});
 		},
+
 		saveHome() {
 			const left = this.widgets.left;
 			const right = this.widgets.right;
-			this.home = left.concat(right);
+			this.$store.commit('settings/setHome', left.concat(right));
 			left.forEach(w => w.place = 'left');
 			right.forEach(w => w.place = 'right');
 			(this as any).api('i/update_home', {
 				home: this.home
 			});
 		},
+
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
 		}
@@ -219,7 +190,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-home
+root(isDark)
 	display block
 
 	&[data-customize]
@@ -249,8 +220,9 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 48px
-		background #f7f7f7
-		box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+		color isDark ? #fff : #000
+		background isDark ? #313543 : #f7f7f7
+		box-shadow 0 1px 1px rgba(#000, 0.075)
 
 		> a
 			display block
@@ -278,7 +250,7 @@ export default Vue.extend({
 		> div
 			display flex
 			margin 0 auto
-			max-width 1200px - 32px
+			max-width 1220px - 32px
 
 			> div
 				width 50%
@@ -289,7 +261,7 @@ export default Vue.extend({
 						line-height 48px
 
 				&.trash
-					border-left solid 1px #ddd
+					border-left solid 1px isDark ? #1c2023 : #ddd
 
 					> div
 						width 100%
@@ -309,7 +281,7 @@ export default Vue.extend({
 		display flex
 		justify-content center
 		margin 0 auto
-		max-width 1200px
+		max-width 1220px
 
 		> *
 			.customize-container
@@ -329,7 +301,7 @@ export default Vue.extend({
 
 			.mk-post-form
 				margin-bottom 16px
-				border solid 1px #e5e5e5
+				border solid 1px rgba(#000, 0.075)
 				border-radius 4px
 
 		> *:not(.main)
@@ -357,4 +329,10 @@ export default Vue.extend({
 				max-width 700px
 				margin 0 auto
 
+.mk-home[data-darkmode]
+	root(true)
+
+.mk-home:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -28,6 +28,7 @@ import friendsMaker from './friends-maker.vue';
 import followers from './followers.vue';
 import following from './following.vue';
 import usersList from './users-list.vue';
+import userListTimeline from './user-list-timeline.vue';
 import widgetContainer from './widget-container.vue';
 
 Vue.component('mk-ui', ui);
@@ -58,4 +59,5 @@ Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-followers', followers);
 Vue.component('mk-following', following);
 Vue.component('mk-users-list', usersList);
+Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('mk-widget-container', widgetContainer);

src/client/app/desktop/views/components/media-image-dialog.vue

@@ -52,7 +52,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 
 	> img
 		position fixed

src/client/app/desktop/views/components/media-image.vue

@@ -14,12 +14,20 @@ import Vue from 'vue';
 import MkMediaImageDialog from './media-image-dialog.vue';
 
 export default Vue.extend({
-	props: ['image'],
+	props: {
+		image: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		}
+	},
 	computed: {
 		style(): any {
 			return {
 				'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': `url(${this.image.url}?thumbnail&size=512)`
+				'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)`
 			};
 		}
 	},
@@ -31,7 +39,7 @@ export default Vue.extend({
 			const xp = mouseX / this.$el.offsetWidth * 100;
 			const yp = mouseY / this.$el.offsetHeight * 100;
 			this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
-			this.$el.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
+			this.$el.style.backgroundImage = `url("${this.image.url}")`;
 		},
 
 		onMouseleave() {

src/client/app/desktop/views/components/media-video-dialog.vue

@@ -54,7 +54,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 
 	> video
 		position fixed

src/client/app/desktop/views/components/media-video.vue

@@ -52,6 +52,7 @@ export default Vue.extend({
 	width 100%
 	height 100%
 	border-radius 4px
+
 .mk-media-video-thumbnail
 	display flex
 	justify-content center

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

@@ -1,8 +1,8 @@
 <template>
 <div class="mk-mentions">
 	<header>
-		<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて</span>
-		<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
+		<span :data-active="mode == 'all'" @click="mode = 'all'">すべて</span>
+		<span :data-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
 	</header>
 	<div class="fetching" v-if="fetching">
 		<mk-ellipsis-icon/>
@@ -85,7 +85,7 @@ export default Vue.extend({
 
 .mk-mentions
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> header
@@ -98,7 +98,7 @@ export default Vue.extend({
 			font-size 18px
 			color #555
 
-			&:not([data-is-active])
+			&:not([data-active])
 				color $theme-color
 				cursor pointer
 

src/client/app/desktop/views/components/note-detail.sub.vue

@@ -1,8 +1,6 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<div class="left">
@@ -16,7 +14,10 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
+			<div class="text">
+				<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
+				<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
+			</div>
 			<div class="media" v-if="note.mediaIds.length > 0">
 				<mk-media-list :media-list="note.media"/>
 			</div>
@@ -40,10 +41,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
+root(isDark)
 	margin 0
 	padding 20px 32px
-	background #fdfdfd
+	background isDark ? #21242d : #fdfdfd
 
 	&:after
 		content ""
@@ -54,18 +55,13 @@ export default Vue.extend({
 		> .main > footer > button
 			color #888
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 44px
-			height 44px
-			margin 0
-			border-radius 4px
-			vertical-align bottom
+		width 44px
+		height 44px
+		border-radius 4px
 
 	> .main
 		float left
@@ -87,7 +83,7 @@ export default Vue.extend({
 					display inline
 					margin 0
 					padding 0
-					color #777
+					color isDark ? #fff : #777
 					font-size 1em
 					font-weight 700
 					text-align left
@@ -99,24 +95,29 @@ export default Vue.extend({
 				> .username
 					text-align left
 					margin 0 0 0 8px
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 			> .right
 				float right
 
 				> .time
 					font-size 0.9em
-					color #c0c0c0
+					color isDark ? #606984 : #c0c0c0
+
+		> .body
+			> .text
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1em
+				color isDark ? #959ba7 : #717171
+
+.sub[data-darkmode]
+	root(true)
+
+.sub:not([data-darkmode])
+	root(false)
 
 </style>
-
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1em
-	color #717171
-</style>

src/client/app/desktop/views/components/note-detail.vue

@@ -18,18 +18,14 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
+			<mk-avatar class="avatar" :user="note.user"/>
 			%fa:retweet%
 			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
 			がRenote
 		</p>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="p.user"/>
 		<header>
 			<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
 			<span class="username">@{{ p.user | acct }}</span>
@@ -38,9 +34,12 @@
 			</router-link>
 		</header>
 		<div class="body">
-			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
+			<div class="text">
+				<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
+				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
+			</div>
 			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media"/>
+				<mk-media-list :media-list="p.media" :raw="true"/>
 			</div>
 			<mk-poll v-if="p.poll" :note="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
@@ -156,7 +155,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
@@ -214,13 +213,13 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-note-detail
-	margin 0
+root(isDark)
+	margin 0 auto
 	padding 0
 	overflow hidden
 	text-align left
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.1)
+	background isDark ? #282C37 : #fff
+	border solid 1px rgba(#000, 0.1)
 	border-radius 8px
 
 	> .read-more
@@ -232,44 +231,39 @@ export default Vue.extend({
 		text-align center
 		color #999
 		cursor pointer
-		background #fafafa
+		background isDark ? #21242d : #fafafa
 		outline none
 		border none
-		border-bottom solid 1px #eef0f2
+		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
 		border-radius 6px 6px 0 0
 
 		&:hover
-			background #f6f6f6
+			background isDark ? #2e3440 : #f6f6f6
 
 		&:active
-			background #f0f0f0
+			background isDark ? #21242b : #f0f0f0
 
 		&:disabled
-			color #ccc
+			color isDark ? #21242b : #ccc
 
 	> .context
 		> *
-			border-bottom 1px solid #eef0f2
+			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
 		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
 		> p
 			margin 0
 			padding 16px 32px
 
-			.avatar-anchor
+			.avatar
 				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
+				width 28px
+				height 28px
+				margin 0 8px 0 0
+				border-radius 6px
 
 			[data-fa]
 				margin-right 4px
@@ -281,7 +275,7 @@ export default Vue.extend({
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid #eef0f2
+		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> article
 		padding 28px 32px 18px 32px
@@ -292,21 +286,13 @@ export default Vue.extend({
 			clear both
 
 		&:hover
-			> .main > footer > button
-				color #888
+			> footer > button
+				color isDark ? #707b97 : #888
 
-		> .avatar-anchor
-			display block
+		> .avatar
 			width 60px
 			height 60px
-
-			> .avatar
-				display block
-				width 60px
-				height 60px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
+			border-radius 8px
 
 		> header
 			position absolute
@@ -318,7 +304,7 @@ export default Vue.extend({
 				display inline-block
 				margin 0
 				line-height 24px
-				color #777
+				color isDark ? #fff : #627079
 				font-size 18px
 				font-weight 700
 				text-align left
@@ -331,18 +317,27 @@ export default Vue.extend({
 				display block
 				text-align left
 				margin 0
-				color #ccc
+				color isDark ? #606984 : #ccc
 
 			> .time
 				position absolute
 				top 0
 				right 32px
 				font-size 1em
-				color #c0c0c0
+				color isDark ? #606984 : #c0c0c0
 
 		> .body
 			padding 8px 0
 
+			> .text
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1.5em
+				color isDark ? #fff : #717171
+
 			> .renote
 				margin 8px 0
 
@@ -404,11 +399,11 @@ export default Vue.extend({
 				background transparent
 				border none
 				font-size 1em
-				color #ddd
+				color isDark ? #606984 : #ccc
 				cursor pointer
 
 				&:hover
-					color #666
+					color isDark ? #9198af : #666
 
 				> .count
 					display inline
@@ -420,17 +415,12 @@ export default Vue.extend({
 
 	> .replies
 		> *
-			border-top 1px solid #eef0f2
+			border-top 1px solid isDark ? #1c2023 : #eef0f2
+
+.mk-note-detail[data-darkmode]
+	root(true)
+
+.mk-note-detail:not([data-darkmode])
+	root(false)
 
 </style>
-
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1.5em
-	color #717171
-</style>

src/client/app/desktop/views/components/note-preview.vue

@@ -1,8 +1,6 @@
 <template>
 <div class="mk-note-preview" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
@@ -33,31 +31,21 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-note-preview
+root(isDark)
 	font-size 0.9em
-	background #fff
 
 	&:after
 		content ""
 		display block
 		clear both
 
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 52px
+		height 52px
+		border-radius 8px
 
 	> .main
 		float left
@@ -65,12 +53,13 @@ export default Vue.extend({
 
 		> header
 			display flex
+			align-items baseline
 			white-space nowrap
 
 			> .name
 				margin 0 .5em 0 0
 				padding 0
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight bold
 				text-decoration none
@@ -81,11 +70,11 @@ export default Vue.extend({
 
 			> .username
 				margin 0 .5em 0 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .time
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
 
@@ -94,6 +83,12 @@ export default Vue.extend({
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
+
+.mk-note-preview[data-darkmode]
+	root(true)
+
+.mk-note-preview:not([data-darkmode])
+	root(false)
 
 </style>

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

@@ -1,15 +1,22 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
 			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="created-at" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
+			<div class="info">
+				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
+				<router-link class="created-at" :to="note | notePage">
+					<mk-time :time="note.createdAt"/>
+				</router-link>
+				<span class="visibility" v-if="note.visibility != 'public'">
+					<template v-if="note.visibility == 'home'">%fa:home%</template>
+					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
+					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
+					<template v-if="note.visibility == 'private'">%fa:lock%</template>
+				</span>
+			</div>
 		</header>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
@@ -33,32 +40,24 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
+root(isDark)
 	margin 0
-	padding 16px
+	padding 16px 32px
 	font-size 0.9em
+	background isDark ? #21242d : #fcfcfc
 
 	&:after
 		content ""
 		display block
 		clear both
 
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 14px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 52px
+		height 52px
+		border-radius 8px
 
 	> .main
 		float left
@@ -66,6 +65,7 @@ export default Vue.extend({
 
 		> header
 			display flex
+			align-items baseline
 			margin-bottom 2px
 			white-space nowrap
 			line-height 21px
@@ -75,7 +75,7 @@ export default Vue.extend({
 				margin 0 .5em 0 0
 				padding 0
 				overflow hidden
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight bold
 				text-decoration none
@@ -86,23 +86,40 @@ export default Vue.extend({
 
 			> .username
 				margin 0 .5em 0 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
-			> .created-at
+			> .info
 				margin-left auto
-				color #b2b8bb
+				font-size 0.9em
+
+				> *
+					color isDark ? #606984 : #b2b8bb
+
+				> .mobile
+					margin-right 6px
+
+				> .visibility
+					margin-left 6px
 
 		> .body
+			max-height 128px
+			overflow hidden
 
 			> .text
 				cursor default
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
 
 				pre
 					max-height 120px
 					font-size 80%
 
+.sub[data-darkmode]
+	root(true)
+
+.sub:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -1,24 +1,18 @@
 <template>
 <div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
-	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || os.i.clientSettings.showReplyTarget)">
+	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || clientSettings.showReplyTarget)">
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
-			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
-			<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
+		<mk-avatar class="avatar" :user="note.user"/>
+		%fa:retweet%
+		<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
+		<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
+		<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="p.user"/>
 		<div class="main">
 			<header>
 				<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
@@ -30,30 +24,43 @@
 					<router-link class="created-at" :to="p | notePage">
 						<mk-time :time="p.createdAt"/>
 					</router-link>
+					<span class="visibility" v-if="p.visibility != 'public'">
+						<template v-if="p.visibility == 'home'">%fa:home%</template>
+						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
+						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
+						<template v-if="p.visibility == 'private'">%fa:lock%</template>
+					</span>
 				</div>
 			</header>
 			<div class="body">
 				<p class="channel" v-if="p.channel">
 					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
 				</p>
-				<div class="text">
-					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.renote">RP:</a>
+				<p v-if="p.cw != null" class="cw">
+					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
+					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
+				</p>
+				<div class="content" v-show="p.cw == null || showContent">
+					<div class="text">
+						<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
+						<a class="reply" v-if="p.reply">%fa:reply%</a>
+						<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+						<a class="rp" v-if="p.renote">RP:</a>
+					</div>
+					<div class="media" v-if="p.media.length > 0">
+						<mk-media-list :media-list="p.media"/>
+					</div>
+					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+					<div class="tags" v-if="p.tags && p.tags.length > 0">
+						<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+					</div>
+					<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+					<div class="map" v-if="p.geo" ref="map"></div>
+					<div class="renote" v-if="p.renote">
+						<mk-note-preview :note="p.renote"/>
+					</div>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
@@ -115,6 +122,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			isDetailOpened: false,
 			connection: null,
 			connectionId: null
@@ -170,7 +178,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
@@ -291,20 +299,21 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.note
+root(isDark)
 	margin 0
 	padding 0
-	background #fff
-	border-bottom solid 1px #eaeaea
+	background isDark ? #282C37 : #fff
+	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
-	&:first-child
-		border-top-left-radius 6px
-		border-top-right-radius 6px
-
-		> .renote
+	&[data-round]
+		&:first-child
 			border-top-left-radius 6px
 			border-top-right-radius 6px
 
+			> .renote
+				border-top-left-radius 6px
+				border-top-right-radius 6px
+
 	&:last-of-type
 		border-bottom none
 
@@ -323,47 +332,45 @@ export default Vue.extend({
 			border-radius 4px
 
 	> .renote
+		display flex
+		align-items baseline
+		padding 16px 32px
+		line-height 28px
 		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
-		> p
-			margin 0
-			padding 16px 32px
-			line-height 28px
+		.avatar
+			display inline-block
+			width 28px
+			height 28px
+			margin 0 8px 0 0
+			border-radius 6px
 
-			.avatar-anchor
-				display inline-block
+		[data-fa]
+			margin-right 4px
 
-				.avatar
-					vertical-align bottom
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
+		> span
+			flex-shrink 0
 
-			[data-fa]
-				margin-right 4px
+			&:last-of-type
+				margin-right 8px
 
-			.name
-				font-weight bold
+		.name
+			overflow hidden
+			flex-shrink 1
+			text-overflow ellipsis
+			white-space nowrap
+			font-weight bold
 
 		> .mk-time
-			position absolute
-			top 16px
-			right 32px
+			display block
+			margin-left auto
+			flex-shrink 0
 			font-size 0.9em
-			line-height 28px
 
 		& + article
 			padding-top 8px
 
-	> .reply-to
-		padding 0 16px
-		background rgba(0, 0, 0, 0.0125)
-
-		> .mk-note-preview
-			background transparent
-
 	> article
 		padding 28px 32px 18px 32px
 
@@ -374,31 +381,26 @@ export default Vue.extend({
 
 		&:hover
 			> .main > footer > button
-				color #888
+				color isDark ? #707b97 : #888
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
 			margin 0 16px 10px 0
+			width 58px
+			height 58px
+			border-radius 8px
 			//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
-				align-items center
+				align-items baseline
 				margin-bottom 4px
 				white-space nowrap
 
@@ -407,7 +409,7 @@ export default Vue.extend({
 					margin 0 .5em 0 0
 					padding 0
 					overflow hidden
-					color #627079
+					color isDark ? #fff : #627079
 					font-size 1em
 					font-weight bold
 					text-decoration none
@@ -420,126 +422,156 @@ export default Vue.extend({
 					margin 0 .5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color #aaa
-					border solid 1px #ddd
+					color isDark ? #758188 : #aaa
+					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
 				> .username
 					margin 0 .5em 0 0
-					color #ccc
+					overflow hidden
+					text-overflow ellipsis
+					color isDark ? #606984 : #ccc
 
 				> .info
 					margin-left auto
 					font-size 0.9em
 
+					> *
+						color isDark ? #606984 : #c0c0c0
+
 					> .mobile
 						margin-right 8px
-						color #ccc
 
 					> .app
 						margin-right 8px
 						padding-right 8px
-						color #ccc
 						border-right solid 1px #eaeaea
 
-					> .created-at
-						color #c0c0c0
+					> .visibility
+						margin-left 8px
 
 			> .body
 
-				> .text
+				> .cw
 					cursor default
 					display block
 					margin 0
 					padding 0
 					overflow-wrap break-word
 					font-size 1.1em
-					color #717171
+					color isDark ? #fff : #717171
 
-					>>> .title
-						display block
-						margin-bottom 4px
-						padding 4px
-						font-size 90%
-						text-align center
-						background #eef1f3
-						border-radius 4px
-
-					>>> .code
-						margin 8px 0
-
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
-
-					> .reply
+					> .text
 						margin-right 8px
-						color #717171
 
-					> .rp
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
-
-				> .map
-					width 100%
-					height 300px
-
-					&:empty
-						display none
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
+					> .toggle
 						display inline-block
-						margin 0 8px 0 0
-						padding 2px 8px 2px 16px
-						font-size 90%
-						color #8d969e
-						background #edf0f3
-						border-radius 4px
-
-						&:before
-							content ""
-							display block
-							position absolute
-							top 0
-							bottom 0
-							left 4px
-							width 8px
-							height 8px
-							margin auto 0
-							background #fff
-							border-radius 100%
+						padding 4px 8px
+						font-size 0.7em
+						color isDark ? #393f4f : #fff
+						background isDark ? #687390 : #b1b9c1
+						border-radius 2px
+						cursor pointer
+						user-select none
 
 						&:hover
-							text-decoration none
-							background #e2e7ec
+							background isDark ? #707b97 : #bbc4ce
 
-				.mk-url-preview
-					margin-top 8px
+				> .content
 
-				> .channel
-					margin 0
+					> .text
+						cursor default
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1.1em
+						color isDark ? #fff : #717171
 
-				> .mk-poll
-					font-size 80%
+						>>> .title
+							display block
+							margin-bottom 4px
+							padding 4px
+							font-size 90%
+							text-align center
+							background isDark ? #2f3944 : #eef1f3
+							border-radius 4px
 
-				> .renote
-					margin 8px 0
+						>>> .code
+							margin 8px 0
 
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px #c0dac6
-						border-radius 8px
+						>>> .quote
+							margin 8px
+							padding 6px 12px
+							color isDark ? #6f808e : #aaa
+							border-left solid 3px isDark ? #637182 : #eee
+
+						> .reply
+							margin-right 8px
+							color isDark ? #99abbf : #717171
+
+						> .rp
+							margin-left 4px
+							font-style oblique
+							color #a0bf46
+
+					> .location
+						margin 4px 0
+						font-size 12px
+						color #ccc
+
+					> .map
+						width 100%
+						height 300px
+
+						&:empty
+							display none
+
+					> .tags
+						margin 4px 0 0 0
+
+						> *
+							display inline-block
+							margin 0 8px 0 0
+							padding 2px 8px 2px 16px
+							font-size 90%
+							color #8d969e
+							background #edf0f3
+							border-radius 4px
+
+							&:before
+								content ""
+								display block
+								position absolute
+								top 0
+								bottom 0
+								left 4px
+								width 8px
+								height 8px
+								margin auto 0
+								background #fff
+								border-radius 100%
+
+							&:hover
+								text-decoration none
+								background #e2e7ec
+
+					.mk-url-preview
+						margin-top 8px
+
+					> .channel
+						margin 0
+
+					> .mk-poll
+						font-size 80%
+
+					> .renote
+						margin 8px 0
+
+						> .mk-note-preview
+							padding 16px
+							border dashed 1px isDark ? #4e945e : #c0dac6
+							border-radius 8px
 
 			> footer
 				> button
@@ -547,13 +579,13 @@ export default Vue.extend({
 					padding 0 8px
 					line-height 32px
 					font-size 1em
-					color #ddd
+					color isDark ? #606984 : #ddd
 					background transparent
 					border none
 					cursor pointer
 
 					&:hover
-						color #666
+						color isDark ? #9198af : #666
 
 					> .count
 						display inline
@@ -570,7 +602,13 @@ export default Vue.extend({
 
 	> .detail
 		padding-top 4px
-		background rgba(0, 0, 0, 0.0125)
+		background rgba(#000, 0.0125)
+
+.note[data-darkmode]
+	root(true)
+
+.note:not([data-darkmode])
+	root(false)
 
 </style>
 

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

@@ -1,32 +1,65 @@
 <template>
 <div class="mk-notes">
-	<template v-for="(note, i) in _notes">
-		<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
-		<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
-			<span>%fa:angle-up%{{ note._datetext }}</span>
-			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
-		</p>
-	</template>
-	<footer>
-		<slot name="footer"></slot>
+	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
+
+	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
+
+	<div v-if="!fetching && requestInitPromise != null">
+		<p>読み込みに失敗しました。</p>
+		<button @click="resolveInitPromise">リトライ</button>
+	</div>
+
+	<transition-group name="mk-notes" class="transition">
+		<template v-for="(note, i) in _notes">
+			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+				<span>%fa:angle-up%{{ note._datetext }}</span>
+				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</transition-group>
+
+	<footer v-if="more">
+		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<template v-if="!moreFetching">%i18n:@load-more%</template>
+			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+		</button>
 	</footer>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { url } from '../../../config';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
+
 import XNote from './notes.note.vue';
 
+const displayLimit = 30;
+
 export default Vue.extend({
 	components: {
 		XNote
 	},
+
 	props: {
-		notes: {
-			type: Array,
-			default: () => []
+		more: {
+			type: Function,
+			required: false
 		}
 	},
+
+	data() {
+		return {
+			requestInitPromise: null as () => Promise<any[]>,
+			notes: [],
+			queue: [],
+			unreadCount: 0,
+			fetching: true,
+			moreFetching: false
+		};
+	},
+
 	computed: {
 		_notes(): any[] {
 			return (this.notes as any).map(note => {
@@ -38,52 +71,202 @@ export default Vue.extend({
 			});
 		}
 	},
+
+	mounted() {
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
+		window.addEventListener('scroll', this.onScroll);
+	},
+
+	beforeDestroy() {
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
+		window.removeEventListener('scroll', this.onScroll);
+	},
+
 	methods: {
+		isScrollTop() {
+			return window.scrollY <= 8;
+		},
+
 		focus() {
 			(this.$el as any).children[0].focus();
 		},
+
 		onNoteUpdated(i, note) {
 			Vue.set((this as any).notes, i, note);
+		},
+
+		init(promiseGenerator: () => Promise<any[]>) {
+			this.requestInitPromise = promiseGenerator;
+			this.resolveInitPromise();
+		},
+
+		resolveInitPromise() {
+			this.queue = [];
+			this.notes = [];
+			this.fetching = true;
+
+			const promise = this.requestInitPromise();
+
+			promise.then(notes => {
+				this.notes = notes;
+				this.requestInitPromise = null;
+				this.fetching = false;
+			}, e => {
+				this.fetching = false;
+			});
+		},
+
+		prepend(note, silent = false) {
+			//#region 弾く
+			const isMyNote = note.userId == (this as any).os.i.id;
+			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
+
+			if ((this as any).clientSettings.showMyRenotes === false) {
+				if (isMyNote && isPureRenote) {
+					return;
+				}
+			}
+
+			if ((this as any).clientSettings.showRenotedMyNotes === false) {
+				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
+					return;
+				}
+			}
+			//#endregion
+
+			// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
+			if ((document.hidden || !this.isScrollTop()) && note.userId !== (this as any).os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
+			}
+
+			if (this.isScrollTop()) {
+				// Prepend the note
+				this.notes.unshift(note);
+
+				// サウンドを再生する
+				if ((this as any).os.isEnableSounds && !silent) {
+					const sound = new Audio(`${url}/assets/post.mp3`);
+					sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
+					sound.play();
+				}
+
+				// オーバーフローしたら古い投稿は捨てる
+				if (this.notes.length >= displayLimit) {
+					this.notes = this.notes.slice(0, displayLimit);
+				}
+			} else {
+				this.queue.push(note);
+			}
+		},
+
+		append(note) {
+			this.notes.push(note);
+		},
+
+		tail() {
+			return this.notes[this.notes.length - 1];
+		},
+
+		releaseQueue() {
+			this.queue.forEach(n => this.prepend(n, true));
+			this.queue = [];
+		},
+
+		async loadMore() {
+			if (this.more == null) return;
+			if (this.moreFetching) return;
+
+			this.moreFetching = true;
+			await this.more();
+			this.moreFetching = false;
+		},
+
+		clearNotification() {
+			this.unreadCount = 0;
+			document.title = 'Misskey';
+		},
+
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.clearNotification();
+			}
+		},
+
+		onScroll() {
+			if (this.isScrollTop()) {
+				this.releaseQueue();
+				this.clearNotification();
+			}
+
+			if ((this as any).clientSettings.fetchOnScroll !== false) {
+				const current = window.scrollY + window.innerHeight;
+				if (current > document.body.offsetHeight - 8) this.loadMore();
+			}
 		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.mk-notes
+@import '~const.styl'
 
-	> .date
-		display block
-		margin 0
-		line-height 32px
-		font-size 14px
-		text-align center
-		color #aaa
-		background #fdfdfd
-		border-bottom solid 1px #eaeaea
+root(isDark)
+	.transition
+		.mk-notes-enter
+		.mk-notes-leave-to
+			opacity 0
+			transform translateY(-30px)
 
-		span
-			margin 0 16px
+		> *
+			transition transform .3s ease, opacity .3s ease
 
-		[data-fa]
-			margin-right 8px
+		> .date
+			display block
+			margin 0
+			line-height 32px
+			font-size 14px
+			text-align center
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+
+			span
+				margin 0 16px
+
+			[data-fa]
+				margin-right 8px
+
+	> .newer-indicator
+		position -webkit-sticky
+		position sticky
+		z-index 100
+		height 3px
+		background $theme-color
 
 	> footer
-		> *
+		> button
 			display block
 			margin 0
 			padding 16px
 			width 100%
 			text-align center
 			color #ccc
-			border-top solid 1px #eaeaea
-			border-bottom-left-radius 4px
-			border-bottom-right-radius 4px
+			background isDark ? #282C37 : #fff
+			border-top solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom-left-radius 6px
+			border-bottom-right-radius 6px
 
-		> button
 			&:hover
-				background #f5f5f5
+				background isDark ? #2e3440 : #f5f5f5
 
 			&:active
-				background #eee
+				background isDark ? #21242b : #eee
+
+.mk-notes[data-darkmode]
+	root(true)
+
+.mk-notes:not([data-darkmode])
+	root(false)
+
 </style>