2.5.0

Fix typo.

README.md

@@ -52,9 +52,9 @@ If you want to translate Misskey, please see [Translation guide](./docs/translat
 [List of all contributors](https://github.com/syuilo/misskey/graphs/contributors)
 
 ### :earth_americas: Translators
-| ![][mirro-san-icon] | ![][Conan-kun-icon] |
-|:-:|:-:|
-| [Mirro][mirro-san-link]<br>English, French | [Asriel][Conan-kun-link]<br>English, French |
+| ![][mirro-san-icon] | ![][Conan-kun-icon] | ![][m4sk1n-icon] |
+|:-:|:-:|:-:|
+| [Mirro][mirro-san-link]<br>English, French | [Asriel][Conan-kun-link]<br>English, French | [Marcin Mikołajczak][m4sk1n-link]<br>Polish |
 
 :four_leaf_clover: Copyright
 ----------------------------------------------------------------
@@ -100,4 +100,5 @@ Misskey is an open-source software licensed under [GNU AGPLv3](LICENSE).
 [mirro-san-icon]:   https://avatars1.githubusercontent.com/u/17948612?s=70&v=4
 [Conan-kun-link]:   https://github.com/Conan-kun
 [Conan-kun-icon]:   https://avatars3.githubusercontent.com/u/30003708?s=70&v=4
-
+[m4sk1n-link]:      https://github.com/m4sk1n
+[m4sk1n-icon]:      https://avatars3.githubusercontent.com/u/21127288?s=70&v=4

cli/clean-cached-remote-files.js

@@ -0,0 +1,101 @@
+const chalk = require('chalk');
+const log = require('single-line-log').stdout;
+const sequential = require('promise-sequential');
+const { default: DriveFile, DriveFileChunk } = require('../built/models/drive-file');
+const { default: DriveFileThumbnail, DriveFileThumbnailChunk } = require('../built/models/drive-file-thumbnail');
+const { default: User } = require('../built/models/user');
+
+const q = {
+	'metadata._user.host': {
+		$ne: null
+	}
+};
+
+async function main() {
+	const promiseGens = [];
+
+	const count = await DriveFile.count(q);
+
+	let prev;
+
+	for (let i = 0; i < count; i++) {
+		promiseGens.push(() => {
+			const promise = new Promise(async (res, rej) => {
+				const file = await DriveFile.findOne(prev ? Object.assign({
+					_id: { $lt: prev._id }
+				}, q) : q, {
+					sort: {
+						_id: -1
+					}
+				});
+
+				prev = file;
+
+				function skip() {
+					res([i, file, false]);
+				}
+
+				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();
+
+				Promise.all([
+					// チャンクをすべて削除
+					DriveFileChunk.remove({
+						files_id: file._id
+					}),
+
+					DriveFile.update({ _id: file._id }, {
+						$set: {
+							'metadata.deletedAt': new Date(),
+							'metadata.isExpired': true
+						}
+					})
+				]).then(async () => {
+					res([i, file, true]);
+
+					//#region サムネイルもあれば削除
+					const thumbnail = await DriveFileThumbnail.findOne({
+						'metadata.originalId': file._id
+					});
+
+					if (thumbnail) {
+						DriveFileThumbnailChunk.remove({
+							files_id: thumbnail._id
+						});
+
+						DriveFileThumbnail.remove({ _id: thumbnail._id });
+					}
+					//#endregion
+				});
+			});
+
+			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('ALL DONE');
+}).catch(console.error);

cli/clean-unused-drive-files.js

@@ -0,0 +1,80 @@
+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');
+
+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: { $lt: prev._id }
+				} : {}, {
+					sort: {
+						_id: -1
+					}
+				});
+
+				prev = file;
+
+				function skip() {
+					res([i, file, false]);
+				}
+
+				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);

gulpfile.ts

@@ -59,9 +59,15 @@ gulp.task('build:ts', () => {
 		.pipe(gulp.dest('./built/'));
 });
 
-gulp.task('build:copy', () =>
+gulp.task('build:copy:views', () =>
+	gulp.src('./src/server/web/views/**/*').pipe(gulp.dest('./built/server/web/views'))
+);
+
+gulp.task('build:copy', ['build:copy:views'], () =>
 	gulp.src([
 		'./build/Release/crypto_key.node',
+		'./src/const.json',
+		'./src/server/web/views/**/*',
 		'./src/**/assets/**/*',
 		'!./src/client/app/**/assets/**/*'
 	]).pipe(gulp.dest('./built/'))

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/pl.yml

@@ -0,0 +1,637 @@
+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: "Podziel się opinią"
+
+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 pusty"
+  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ć"
+  url-upload-requested: "Zaplanowano wysyłanie"
+  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"
+  renote: "Przeredaguj"
+  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"
+  renote: "Przeredaguj"
+  posted: "Opublikowano!"
+  replied: "Odpowiedziano!"
+  reposted: "Udostępniono!"
+  note-failed: "Nie udało się wysłać"
+  reply-failed: "Nie udało się odpowiedzieć"
+  renote-failed: "Nie udało się przeredagować"
+  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"
+  renote: "Przeredaguj"
+  reposting: "Udostępnianie…"
+  success: "Udostępniono!"
+  failure: "Nie udało się przeredagować"
+
+desktop/views/components/renote-form-window.vue:
+  title: "Czy na pewno chcesz przeredagować ten wpis?"
+
+desktop/views/components/settings.vue:
+  profile: "Profil"
+  notification: "Powiadomienia"
+  apps: "Aplikacje"
+  mute: "Wyciszanie"
+  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: "Najbardziej aktywni"
+  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/2.4.0.js

@@ -0,0 +1,71 @@
+// 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 User.count({});
+
+	let prev;
+
+	for (let i = 0; i < count; i++) {
+		promiseGens.push(() => {
+			const promise = new Promise(async (res, rej) => {
+				const user = await User.findOne(prev ? {
+					_id: { $gt: prev._id }
+				} : {}, {
+					sort: {
+						_id: 1
+					}
+				});
+
+				prev = user;
+
+				const set = {};
+
+				if (user.avatarId != null) {
+					const file = await DriveFile.findOne({ _id: user.avatarId });
+
+					if (file && file.metadata.properties.avgColor) {
+						set.avatarColor = file.metadata.properties.avgColor;
+					}
+				}
+
+				if (user.bannerId != null) {
+					const file = await DriveFile.findOne({ _id: user.bannerId });
+
+					if (file && file.metadata.properties.avgColor) {
+						set.bannerColor = file.metadata.properties.avgColor;
+					}
+				}
+
+				if (Object.keys(set).length === 0) return res([i, user]);
+
+				User.update({
+					_id: user._id
+				}, {
+					$set: set
+				}).then(() => {
+					res([i, user]);
+				}).catch(rej);
+			});
+
+			promise.then(([i, user]) => {
+				console.log(chalk`{gray ${i}} {green done: {bold ${user._id}} @${user.username}}`);
+			});
+
+			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,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "1.1.0",
-	"clientVersion": "1.0.5130",
+	"version": "2.5.0",
+	"clientVersion": "1.0.5241",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -58,6 +58,7 @@
 		"@types/koa-multer": "1.0.0",
 		"@types/koa-router": "7.0.28",
 		"@types/koa-send": "4.1.1",
+		"@types/koa-views": "^2.0.3",
 		"@types/koa__cors": "2.2.2",
 		"@types/kue": "0.11.8",
 		"@types/license-checker": "15.0.0",
@@ -68,6 +69,7 @@
 		"@types/ms": "0.7.30",
 		"@types/node": "9.6.6",
 		"@types/nopt": "3.0.29",
+		"@types/parse5": "^3.0.0",
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "0.8.1",
 		"@types/ratelimiter": "2.1.28",
@@ -76,6 +78,7 @@
 		"@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",
@@ -88,7 +91,7 @@
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
 		"bootstrap-vue": "2.0.0-rc.6",
-		"cafy": "7.0.1",
+		"cafy": "8.0.0",
 		"chai": "4.1.2",
 		"chai-http": "4.0.0",
 		"chalk": "2.4.1",
@@ -145,6 +148,7 @@
 		"koa-router": "7.4.0",
 		"koa-send": "4.1.3",
 		"koa-slow": "2.1.0",
+		"koa-views": "^6.1.4",
 		"kue": "0.11.6",
 		"license-checker": "18.0.0",
 		"loader-utils": "1.1.0",
@@ -163,8 +167,10 @@
 		"object-assign-deep": "0.4.0",
 		"on-build-webpack": "0.1.0",
 		"os-utils": "0.0.14",
+		"parse5": "^4.0.0",
 		"progress-bar-webpack-plugin": "1.11.0",
 		"prominence": "0.2.0",
+		"promise-sequential": "^1.1.1",
 		"pug": "2.0.3",
 		"punycode": "2.1.0",
 		"qrcode": "1.2.0",
@@ -179,6 +185,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",

src/build/i18n.ts

@@ -7,7 +7,7 @@ import locale from '../../locales';
 export default class Replacer {
 	private lang: string;
 
-	public pattern = /%i18n:([a-z_\-@\.\!]+?)%/g;
+	public pattern = /%i18n:([a-z0-9_\-@\.\!]+?)%/g;
 
 	constructor(lang: string) {
 		this.lang = lang;

src/cafy-id.ts

@@ -8,8 +8,8 @@ export const isNotAnId = x => !isAnId(x);
  * ID
  */
 export default class ID extends Query<mongo.ObjectID> {
-	constructor(...args) {
-		super(...args);
+	constructor() {
+		super();
 
 		this.transform = v => {
 			if (isAnId(v) && !mongo.ObjectID.prototype.isPrototypeOf(v)) {
@@ -19,7 +19,7 @@ export default class ID extends Query<mongo.ObjectID> {
 			}
 		};
 
-		this.pushValidator(v => {
+		this.push(v => {
 			if (!mongo.ObjectID.prototype.isPrototypeOf(v) && isNotAnId(v)) {
 				return new Error('must-be-an-id');
 			}

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/base.pug

@@ -1,3 +1,5 @@
+block vars
+
 doctype html
 
 != '\n<!-- Thank you for using Misskey! @syuilo -->\n'
@@ -9,9 +11,17 @@ html
 		meta(name='application-name' content='Misskey')
 		meta(name='theme-color' content=themeColor)
 		meta(name='referrer' content='origin')
+		meta(property='og:site_name' content='Misskey')
 		link(rel='manifest' href='/manifest.json')
 
-		title Misskey
+		title
+			block title
+				| Misskey
+
+		block desc
+			meta(name='description' content='A SNS')
+
+		block meta
 
 		style
 			include ./../../../built/client/assets/init.css

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,4 +1,4 @@
-import MiOS from '../mios';
+import MiOS from '../../mios';
 import { version as current } from '../../config';
 
 export default async function(mios: MiOS, force = false, silent = false) {

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/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,42 @@
+<template>
+	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-if="disablePreview"></router-link>
+	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else v-user-preview="user.id"></router-link>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+		target: {
+			required: false,
+			default: null
+		},
+		disablePreview: {
+			required: false,
+			default: false
+		}
+	},
+	computed: {
+		style(): any {
+			return {
+				backgroundColor: this.user.avatarColor ? `rgb(${ this.user.avatarColor.join(',') })` : null,
+				backgroundImage: `url(${ this.user.avatarUrl }?thumbnail)`,
+				borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null
+			};
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-avatar
+	display inline-block
+	vertical-align bottom
+	background-size cover
+	background-position center center
+	transition border-radius 1s ease
+</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>
@@ -205,7 +205,7 @@ root(isDark)
 		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
@@ -279,7 +279,7 @@ root(isDark)
 					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
@@ -318,11 +318,11 @@ root(isDark)
 						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
 
@@ -383,17 +383,17 @@ root(isDark)
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color isDark ? #fff : 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 isDark ? #606984 : rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(#000, 0.5)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color isDark ? #606984 : rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(#000, 0.5)
 						font-size 80%
 
 				> .avatar
@@ -413,10 +413,10 @@ root(isDark)
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color isDark ? #fff : rgba(0, 0, 0, 0.8)
+						color isDark ? #fff : rgba(#000, 0.8)
 
 						.me
-							color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
+							color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
 
 					> .image
 						display block

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

@@ -105,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

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"/>
+				<mk-avatar class="avatar" :user="g.user2"/>
 				<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"/>
+				<mk-avatar class="avatar" :user="g.user2"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
 				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
 			</a>
@@ -271,8 +271,9 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
+			width 32px
+			height 32px
 			border-radius 100%
 
 		> span
@@ -301,8 +302,9 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
+			width 32px
+			height 32px
 			border-radius 100%
 
 		> span

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

@@ -88,10 +88,10 @@ root(isDark)
 			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

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

@@ -120,7 +120,7 @@ root(isDark)
 		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

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/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();
@@ -113,7 +114,7 @@ root(isDark)
 	padding 16px 0
 	color isDark ? #c5ced6 :#777
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-special='on-new-years-day']
@@ -126,7 +127,7 @@ root(isDark)
 	&[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 ""

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

@@ -46,7 +46,7 @@ root(isDark)
 		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

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

@@ -40,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}`, {
@@ -92,7 +93,7 @@ root(isDark)
 					padding 8px 16px
 
 					&:nth-child(even)
-						background rgba(0, 0, 0, 0.05)
+						background rgba(#000, 0.05)
 
 .mkw-rss[data-darkmode]
 	root(true)

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

@@ -56,7 +56,7 @@ root(isDark)
 
 	> text
 		font-size 0.15px
-		fill isDark ? rgba(#fff, 0.6) : rgba(0, 0, 0, 0.6)
+		fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
 
 svg[data-darkmode]
 	root(true)

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';

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/calendar.vue

@@ -136,7 +136,7 @@ export default Vue.extend({
 root(isDark)
 	color isDark ? #c5ced6 : #777
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-melt]
@@ -152,7 +152,7 @@ root(isDark)
 		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 @@ root(isDark)
 					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 @@ root(isDark)
 					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

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

@@ -106,7 +106,7 @@ root(isDark)
 		width $width
 		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]

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

@@ -68,7 +68,7 @@ root(isDark)
 	font-size 0.8em
 	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]

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

@@ -195,7 +195,7 @@ root(isDark)
 		cursor pointer
 
 	&:hover
-		background rgba(0, 0, 0, 0.05)
+		background rgba(#000, 0.05)
 
 		> .label
 			&:before
@@ -203,7 +203,7 @@ root(isDark)
 				background #0b65a5
 
 	&:active
-		background rgba(0, 0, 0, 0.1)
+		background rgba(#000, 0.1)
 
 		> .label
 			&:before

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

@@ -587,7 +587,7 @@ root(isDark)
 		font-size 0.9em
 		color isDark ? #d2d9dc : #555
 		background isDark ? #282c37 : #fff
-		box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
+		box-shadow 0 1px 0 rgba(#000, 0.05)
 
 		&, *
 			user-select none
@@ -733,7 +733,7 @@ root(isDark)
 				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

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/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);
 		}
@@ -251,7 +222,7 @@ root(isDark)
 		height 48px
 		color isDark ? #fff : #000
 		background isDark ? #313543 : #f7f7f7
-		box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+		box-shadow 0 1px 1px rgba(#000, 0.075)
 
 		> a
 			display block
@@ -279,7 +250,7 @@ root(isDark)
 		> div
 			display flex
 			margin 0 auto
-			max-width 1200px - 32px
+			max-width 1220px - 32px
 
 			> div
 				width 50%
@@ -310,7 +281,7 @@ root(isDark)
 		display flex
 		justify-content center
 		margin 0 auto
-		max-width 1200px
+		max-width 1220px
 
 		> *
 			.customize-container

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)`
 			};
 		}
 	},

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

@@ -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

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>
@@ -41,18 +39,13 @@ root(isDark)
 		display block
 		clear both
 
-	> .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
@@ -60,6 +53,7 @@ root(isDark)
 
 		> header
 			display flex
+			align-items baseline
 			white-space nowrap
 
 			> .name

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"/>
@@ -35,26 +42,22 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	margin 0
-	padding 16px
+	padding 16px 32px
 	font-size 0.9em
+	background isDark ? #21242d : #fcfcfc
 
 	&:after
 		content ""
 		display block
 		clear both
 
-	> .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
@@ -62,6 +65,7 @@ root(isDark)
 
 		> header
 			display flex
+			align-items baseline
 			margin-bottom 2px
 			white-space nowrap
 			line-height 21px
@@ -84,9 +88,18 @@ root(isDark)
 				margin 0 .5em 0 0
 				color isDark ? #606984 : #d1d8da
 
-			> .created-at
+			> .info
 				margin-left auto
-				color isDark ? #606984 : #b2b8bb
+				font-size 0.9em
+
+				> *
+					color isDark ? #606984 : #b2b8bb
+
+				> .mobile
+					margin-right 6px
+
+				> .visibility
+					margin-left 6px
 
 		> .body
 			max-height 128px

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

@@ -1,12 +1,10 @@
 <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">
-		<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%
 		<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>
@@ -14,9 +12,7 @@
 		<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>
@@ -28,6 +24,12 @@
 					<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">
@@ -40,6 +42,7 @@
 				</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>
@@ -175,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]);
@@ -330,21 +333,18 @@ root(isDark)
 
 	> .renote
 		display flex
-		align-items baseline
+		align-items center
 		padding 16px 32px
 		line-height 28px
 		color #9dbb00
 		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
-		.avatar-anchor
+		.avatar
 			display inline-block
-
-			.avatar
-				vertical-align bottom
-				width 28px
-				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
@@ -371,13 +371,6 @@ root(isDark)
 		& + 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
 
@@ -390,29 +383,24 @@ root(isDark)
 			> .main > footer > button
 				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
 
@@ -434,7 +422,7 @@ root(isDark)
 					margin 0 .5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color isDark ? #758188 :#aaa
+					color isDark ? #758188 : #aaa
 					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
@@ -448,18 +436,19 @@ root(isDark)
 					margin-left auto
 					font-size 0.9em
 
+					> *
+						color isDark ? #606984 : #c0c0c0
+
 					> .mobile
 						margin-right 8px
-						color isDark ? #606984 : #ccc
 
 					> .app
 						margin-right 8px
 						padding-right 8px
-						color #ccc
 						border-right solid 1px #eaeaea
 
-					> .created-at
-						color isDark ? #606984 : #c0c0c0
+					> .visibility
+						margin-left 8px
 
 			> .body
 
@@ -613,7 +602,7 @@ root(isDark)
 
 	> .detail
 		padding-top 4px
-		background rgba(0, 0, 0, 0.0125)
+		background rgba(#000, 0.0125)
 
 .note[data-darkmode]
 	root(true)

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

@@ -121,13 +121,13 @@ export default Vue.extend({
 			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).os.i.clientSettings.showMyRenotes === false) {
+			if ((this as any).clientSettings.showMyRenotes === false) {
 				if (isMyNote && isPureRenote) {
 					return;
 				}
 			}
 
-			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
+			if ((this as any).clientSettings.showRenotedMyNotes === false) {
 				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
 					return;
 				}
@@ -156,7 +156,7 @@ export default Vue.extend({
 					this.notes = this.notes.slice(0, displayLimit);
 				}
 			} else {
-				this.queue.unshift(note);
+				this.queue.push(note);
 			}
 		},
 
@@ -199,7 +199,7 @@ export default Vue.extend({
 				this.clearNotification();
 			}
 
-			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
+			if ((this as any).clientSettings.fetchOnScroll !== false) {
 				const current = window.scrollY + window.innerHeight;
 				if (current > document.body.offsetHeight - 8) this.loadMore();
 			}

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

@@ -6,9 +6,7 @@
 				<div class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
 					<template v-if="notification.type == 'reaction'">
-						<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
-							<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p>
 								<mk-reaction-icon :reaction="notification.reaction"/>
@@ -20,9 +18,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'renote'">
-						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
-							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
 							<p>%fa:retweet%
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
@@ -33,9 +29,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'quote'">
-						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
-							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
 							<p>%fa:quote-left%
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
@@ -44,9 +38,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'follow'">
-						<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
-							<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p>%fa:user-plus%
 								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
@@ -54,9 +46,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'reply'">
-						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
-							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
 							<p>%fa:reply%
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
@@ -65,9 +55,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'mention'">
-						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
-							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
 							<p>%fa:at%
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
@@ -76,9 +64,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'poll_vote'">
-						<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
-							<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
 							<router-link class="note-ref" :to="notification.note | notePage">
@@ -204,7 +190,7 @@ root(isDark)
 				padding 16px
 				overflow-wrap break-word
 				font-size 0.9em
-				border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
+				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
 
 				&:last-child
 					border-bottom none
@@ -215,7 +201,7 @@ root(isDark)
 					top 16px
 					right 12px
 					vertical-align top
-					color isDark ? #606984 : rgba(0, 0, 0, 0.6)
+					color isDark ? #606984 : rgba(#000, 0.6)
 					font-size small
 
 				&:after
@@ -223,20 +209,15 @@ root(isDark)
 					display block
 					clear both
 
-				> .avatar-anchor
+				> .avatar
 					display block
 					float left
 					position -webkit-sticky
 					position sticky
 					top 16px
-
-					> img
-						display block
-						min-width 36px
-						min-height 36px
-						max-width 36px
-						max-height 36px
-						border-radius 6px
+					width 36px
+					height 36px
+					border-radius 6px
 
 				> .text
 					float right
@@ -250,10 +231,10 @@ root(isDark)
 							margin-right 4px
 
 				.note-preview
-					color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+					color isDark ? #c2cad4 : rgba(#000, 0.7)
 
 				.note-ref
-					color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+					color isDark ? #c2cad4 : rgba(#000, 0.7)
 
 					[data-fa]
 						font-size 1em
@@ -282,7 +263,7 @@ root(isDark)
 				font-size 0.8em
 				color isDark ? #666b79 : #aaa
 				background isDark ? #242731 : #fdfdfd
-				border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
+				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
 
 				span
 					margin 0 16px
@@ -295,13 +276,13 @@ root(isDark)
 		width 100%
 		padding 16px
 		color #555
-		border-top solid 1px rgba(0, 0, 0, 0.05)
+		border-top solid 1px rgba(#000, 0.05)
 
 		&:hover
-			background rgba(0, 0, 0, 0.025)
+			background rgba(#000, 0.025)
 
 		&:active
-			background rgba(0, 0, 0, 0.05)
+			background rgba(#000, 0.05)
 
 		&.fetching
 			cursor wait

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

@@ -6,6 +6,10 @@
 	@drop.stop="onDrop"
 >
 	<div class="content">
+		<div v-if="visibility == 'specified'" class="visibleUsers">
+			<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
+			<a @click="addVisibleUser">+ユーザーを追加</a>
+		</div>
 		<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
 		<textarea :class="{ with: (files.length != 0 || poll) }"
 			ref="text" v-model="text" :disabled="posting"
@@ -30,7 +34,8 @@
 	<button class="poll" title="%i18n:@create-poll%" @click="poll = true">%fa:chart-pie%</button>
 	<button class="poll" title="内容を隠す" @click="useCw = !useCw">%fa:eye-slash%</button>
 	<button class="geo" title="位置情報を添付する" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
-	<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:!@text-remain%'.replace('{}', 1000 - text.length) }}</p>
+	<button class="visibility" title="公開範囲" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
+	<p class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</p>
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
 		{{ posting ? '%i18n:!@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
 	</button>
@@ -43,10 +48,12 @@
 import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
 import getKao from '../../../common/scripts/get-kao';
+import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 
 export default Vue.extend({
 	components: {
-		XDraggable
+		XDraggable,
+		MkVisibilityChooser
 	},
 
 	props: ['reply', 'renote'],
@@ -61,6 +68,8 @@ export default Vue.extend({
 			useCw: false,
 			cw: null,
 			geo: null,
+			visibility: 'public',
+			visibleUsers: [],
 			autocomplete: null,
 			draghover: false
 		};
@@ -96,21 +105,11 @@ export default Vue.extend({
 		}
 	},
 
-	watch: {
-		text() {
-			this.saveDraft();
-		},
-
-		poll() {
-			this.saveDraft();
-		},
-
-		files() {
-			this.saveDraft();
-		}
-	},
-
 	mounted() {
+		if (this.reply && this.reply.user.host != null) {
+			this.text = `@${this.reply.user.username}@${this.reply.user.host} `;
+		}
+
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
 			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
@@ -125,10 +124,18 @@ export default Vue.extend({
 				}
 				this.$emit('change-attached-media', this.files);
 			}
+
+			this.$nextTick(() => this.watch());
 		});
 	},
 
 	methods: {
+		watch() {
+			this.$watch('text', () => this.saveDraft());
+			this.$watch('poll', () => this.saveDraft());
+			this.$watch('files', () => this.saveDraft());
+		},
+
 		focus() {
 			(this.$refs.text as any).focus();
 		},
@@ -246,6 +253,32 @@ export default Vue.extend({
 			this.$emit('geo-dettached');
 		},
 
+		setVisibility() {
+			const w = (this as any).os.new(MkVisibilityChooser, {
+				source: this.$refs.visibilityButton,
+				v: this.visibility
+			});
+			w.$once('chosen', v => {
+				this.visibility = v;
+			});
+		},
+
+		addVisibleUser() {
+			(this as any).apis.input({
+				title: 'ユーザー名を入力してください'
+			}).then(username => {
+				(this as any).api('users/show', {
+					username
+				}).then(user => {
+					this.visibleUsers.push(user);
+				});
+			});
+		},
+
+		removeVisibleUser(user) {
+			this.visibleUsers = this.visibleUsers.filter(u => u != user);
+		},
+
 		post() {
 			this.posting = true;
 
@@ -256,6 +289,8 @@ export default Vue.extend({
 				renoteId: this.renote ? this.renote.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 				cw: this.useCw ? this.cw || '' : undefined,
+				visibility: this.visibility,
+				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
 				geo: this.geo ? {
 					coordinates: [this.geo.longitude, this.geo.latitude],
 					altitude: this.geo.altitude,
@@ -328,7 +363,6 @@ root(isDark)
 		clear both
 
 	> .content
-
 		> input
 		> textarea
 			display block
@@ -381,6 +415,14 @@ root(isDark)
 				border-bottom solid 1px rgba($theme-color, 0.1) !important
 				border-radius 4px 4px 0 0
 
+		> .visibleUsers
+			margin-bottom 8px
+			font-size 14px
+
+			> span
+				margin-right 16px
+				color isDark ? #fff : #666
+
 		> .medias
 			margin 0
 			padding 0
@@ -450,19 +492,6 @@ root(isDark)
 	input[type='file']
 		display none
 
-	.text-count
-		pointer-events none
-		display block
-		position absolute
-		bottom 16px
-		right 138px
-		margin 0
-		line-height 40px
-		color rgba($theme-color, 0.5)
-
-		&.over
-			color #ec3828
-
 	.submit
 		display block
 		position absolute
@@ -527,11 +556,25 @@ root(isDark)
 				from {background-position: 0 0;}
 				to   {background-position: -64px 32px;}
 
+	> .text-count
+		pointer-events none
+		display block
+		position absolute
+		bottom 16px
+		right 138px
+		margin 0
+		line-height 40px
+		color rgba($theme-color, 0.5)
+
+		&.over
+			color #ec3828
+
 	> .upload
 	> .drive
 	> .kao
 	> .poll
 	> .geo
+	> .visibility
 		display inline-block
 		cursor pointer
 		padding 0
@@ -553,7 +596,7 @@ root(isDark)
 			color rgba($theme-color, 0.6)
 			background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
 			border-color rgba($theme-color, 0.5)
-			box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset
+			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
 		&:focus
 			&:after

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

@@ -20,7 +20,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>動作</h1>
-			<mk-switch v-model="os.i.clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
+			<mk-switch v-model="clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
 				<span>ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。</span>
 			</mk-switch>
 			<mk-switch v-model="autoPopout" text="ウィンドウの自動ポップアウト">
@@ -41,13 +41,14 @@
 			</div>
 			<div class="div">
 				<mk-switch v-model="darkmode" text="ダークモード"/>
-				<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
+				<mk-switch v-model="clientSettings.circleIcons" @change="onChangeCircleIcons" text="円形のアイコンを使用"/>
+				<mk-switch v-model="clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
 			</div>
-			<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
-			<mk-switch v-model="os.i.clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
-			<mk-switch v-model="os.i.clientSettings.showMyRenotes" @change="onChangeShowMyRenotes" text="自分の行ったRenoteをタイムラインに表示する"/>
-			<mk-switch v-model="os.i.clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes" text="Renoteされた自分の投稿をタイムラインに表示する"/>
-			<mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
+			<mk-switch v-model="clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
+			<mk-switch v-model="clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
+			<mk-switch v-model="clientSettings.showMyRenotes" @change="onChangeShowMyRenotes" text="自分の行ったRenoteをタイムラインに表示する"/>
+			<mk-switch v-model="clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes" text="Renoteされた自分の投稿をタイムラインに表示する"/>
+			<mk-switch v-model="clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
 				<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
 			</mk-switch>
 		</section>
@@ -69,7 +70,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>モバイル</h1>
-			<mk-switch v-model="os.i.clientSettings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
+			<mk-switch v-model="clientSettings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -82,6 +83,7 @@
 					<el-option label="ja-JP" value="ja"/>
 					<el-option label="en-US" value="en"/>
 					<el-option label="fr" value="fr"/>
+					<el-option label="pl" value="pl"/>
 				</el-option-group>
 			</el-select>
 			<div class="none ui info">
@@ -297,8 +299,8 @@ export default Vue.extend({
 			this.$emit('done');
 		},
 		onChangeFetchOnScroll(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'fetchOnScroll',
+			this.$store.dispatch('settings/set', {
+				key: 'fetchOnScroll',
 				value: v
 			});
 		},
@@ -308,50 +310,56 @@ export default Vue.extend({
 			});
 		},
 		onChangeDark(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'dark',
+			this.$store.dispatch('settings/set', {
+				key: 'dark',
 				value: v
 			});
 		},
 		onChangeShowPostFormOnTopOfTl(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showPostFormOnTopOfTl',
+			this.$store.dispatch('settings/set', {
+				key: 'showPostFormOnTopOfTl',
 				value: v
 			});
 		},
 		onChangeShowReplyTarget(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showReplyTarget',
+			this.$store.dispatch('settings/set', {
+				key: 'showReplyTarget',
 				value: v
 			});
 		},
 		onChangeShowMyRenotes(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showMyRenotes',
+			this.$store.dispatch('settings/set', {
+				key: 'showMyRenotes',
 				value: v
 			});
 		},
 		onChangeShowRenotedMyNotes(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showRenotedMyNotes',
+			this.$store.dispatch('settings/set', {
+				key: 'showRenotedMyNotes',
 				value: v
 			});
 		},
 		onChangeShowMaps(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showMaps',
+			this.$store.dispatch('settings/set', {
+				key: 'showMaps',
+				value: v
+			});
+		},
+		onChangeCircleIcons(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'circleIcons',
 				value: v
 			});
 		},
 		onChangeGradientWindowHeader(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'gradientWindowHeader',
+			this.$store.dispatch('settings/set', {
+				key: 'gradientWindowHeader',
 				value: v
 			});
 		},
 		onChangeDisableViaMobile(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'disableViaMobile',
+			this.$store.dispatch('settings/set', {
+				key: 'disableViaMobile',
 				value: v
 			});
 		},

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

@@ -1,6 +1,7 @@
 <template>
 <div class="mk-sub-note-content">
 	<div class="body">
+		<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 		<a class="reply" v-if="note.replyId">%fa:reply%</a>
 		<mk-note-html :text="note.text" :i="os.i"/>
 		<a class="rp" v-if="note.renoteId" :href="`/note:${note.renoteId}`">RP: ...</a>

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

@@ -101,8 +101,8 @@ export default Vue.extend({
 				(this as any).api(this.endpoint, {
 					limit: fetchLimit + 1,
 					untilDate: this.date ? this.date.getTime() : undefined,
-					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -123,8 +123,8 @@ export default Vue.extend({
 			(this as any).api(this.endpoint, {
 				limit: fetchLimit + 1,
 				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();

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

@@ -31,6 +31,12 @@ export default Vue.extend({
 		};
 	},
 
+	created() {
+		if ((this as any).os.i.followingCount == 0) {
+			this.src = 'local';
+		}
+	},
+
 	mounted() {
 		(this.$refs.tl as any).$once('loaded', () => {
 			this.$emit('loaded');
@@ -59,7 +65,7 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> header
@@ -67,7 +73,7 @@ root(isDark)
 		z-index 10
 		background isDark ? #313543 : #fff
 		border-radius 6px 6px 0 0
-		box-shadow 0 1px rgba(0, 0, 0, 0.08)
+		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> button
 			position absolute

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

@@ -2,7 +2,7 @@
 <div class="account">
 	<button class="header" :data-active="isOpen" @click="toggle">
 		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
-		<img class="avatar" :src="`${ os.i.avatarUrl }?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="os.i"/>
 	</button>
 	<transition name="zoom-in-top">
 		<div class="menu" v-if="isOpen">
@@ -22,7 +22,7 @@
 			</ul>
 			<ul>
 				<li>
-					<a href="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</a>
+					<router-link to="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</router-link>
 				</li>
 				<li @click="settings">
 					<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
@@ -165,7 +165,7 @@ root(isDark)
 		font-size 0.8em
 		background $bgcolor
 		border-radius 4px
-		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+		box-shadow 0 1px 4px rgba(#000, 0.25)
 
 		&:before
 			content ""
@@ -176,7 +176,7 @@ root(isDark)
 			right 12px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-bottom solid 14px rgba(#000, 0.1)
 			border-left solid 14px transparent
 
 		&:after

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

@@ -125,7 +125,7 @@ root(isDark)
 		width 300px
 		background $bgcolor
 		border-radius 4px
-		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+		box-shadow 0 1px 4px rgba(#000, 0.25)
 
 		&:before
 			content ""
@@ -136,7 +136,7 @@ root(isDark)
 			right 74px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-bottom solid 14px rgba(#000, 0.1)
 			border-left solid 14px transparent
 
 		&:after

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

@@ -50,7 +50,7 @@ export default Vue.extend({
 		width 14em
 		height 32px
 		font-size 1em
-		background rgba(0, 0, 0, 0.05)
+		background rgba(#000, 0.05)
 		outline none
 		//border solid 1px #ddd
 		border none
@@ -62,7 +62,7 @@ export default Vue.extend({
 			color #9eaba8
 
 		&:hover
-			background rgba(0, 0, 0, 0.08)
+			background rgba(#000, 0.08)
 
 		&:focus
 			box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important

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

@@ -46,9 +46,10 @@ export default Vue.extend({
 		this.$store.commit('setUiHeaderHeight', 48);
 
 		if ((this as any).os.isSignedIn) {
-			const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000
+			const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000;
 			const isHisasiburi = ago >= 3600;
 			(this as any).os.i.lastUsedAt = new Date();
+			(this as any).os.bakeMe();
 			if (isHisasiburi) {
 				(this.$refs.welcomeback as any).style.display = 'block';
 				(this.$refs.main as any).style.overflow = 'hidden';
@@ -103,7 +104,7 @@ root(isDark)
 	top 0
 	z-index 1000
 	width 100%
-	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+	box-shadow 0 1px 1px rgba(#000, 0.075)
 
 	> .main
 		height 48px
@@ -132,7 +133,7 @@ root(isDark)
 				line-height 48px
 				margin 0
 				text-align center
-				color #888
+				color isDark ? #fff : #888
 				opacity 0
 
 			> .container

src/client/app/desktop/views/components/user-list-timeline.vue

@@ -46,8 +46,8 @@ export default Vue.extend({
 				(this as any).api('notes/user-list-timeline', {
 					listId: this.list.id,
 					limit: fetchLimit + 1,
-					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -66,8 +66,8 @@ export default Vue.extend({
 				listId: this.list.id,
 				limit: fetchLimit + 1,
 				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();

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

@@ -2,9 +2,7 @@
 <div class="mk-user-preview">
 	<template v-if="u != null">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl}?thumbnail&size=512)` : ''"></div>
-		<router-link class="avatar" :to="u | userPage">
-			<img :src="`${u.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
 		<div class="title">
 			<router-link class="name" :to="u | userPage">{{ u | userName }}</router-link>
 			<p class="username">@{{ u | acct }}</p>
@@ -94,7 +92,7 @@ root(isDark)
 	width 250px
 	background isDark ? #282c37 : #fff
 	background-clip content-box
-	border solid 1px rgba(0, 0, 0, 0.1)
+	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	overflow hidden
 	opacity 0
@@ -111,14 +109,10 @@ root(isDark)
 		top 62px
 		left 13px
 		z-index 2
-
-		> img
-			display block
-			width 58px
-			height 58px
-			margin 0
-			border solid 3px isDark ? #282c37 : #fff
-			border-radius 8px
+		width 58px
+		height 58px
+		border solid 3px isDark ? #282c37 : #fff
+		border-radius 8px
 
 	> .title
 		display block

src/client/app/desktop/views/components/users-list.item.vue

@@ -1,8 +1,6 @@
 <template>
 <div class="root item">
-	<router-link class="avatar-anchor" :to="user | userPage" v-user-preview="user.id">
-		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="user | userPage" v-user-preview="user.id">{{ user | userName }}</router-link>
@@ -35,18 +33,13 @@ export default Vue.extend({
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 58px
-			height 58px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 58px
+		height 58px
+		border-radius 8px
 
 	> .main
 		float left

src/client/app/desktop/views/components/users-list.vue

@@ -119,7 +119,7 @@ export default Vue.extend({
 		overflow auto
 
 		> *
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+			border-bottom solid 1px rgba(#000, 0.05)
 
 			> *
 				max-width 600px

src/client/app/desktop/views/components/widget-container.vue

@@ -24,8 +24,8 @@ export default Vue.extend({
 	computed: {
 		withGradient(): boolean {
 			return (this as any).os.isSignedIn
-				? (this as any).os.i.clientSettings.gradientWindowHeader != null
-					? (this as any).os.i.clientSettings.gradientWindowHeader
+				? (this as any).clientSettings.gradientWindowHeader != null
+					? (this as any).clientSettings.gradientWindowHeader
 					: false
 				: false;
 		}
@@ -36,7 +36,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 	overflow hidden
 
@@ -55,7 +55,7 @@ root(isDark)
 			font-size 0.9em
 			font-weight bold
 			color isDark ? #e3e5e8 : #888
-			box-shadow 0 1px rgba(0, 0, 0, 0.07)
+			box-shadow 0 1px rgba(#000, 0.07)
 
 			> [data-fa]
 				margin-right 6px

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

@@ -4,7 +4,7 @@
 	<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
 		<div class="body">
 			<header ref="header"
-				:class="{ withGradient }"
+				:class="{ withGradient: clientSettings.gradientWindowHeader }"
 				@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
 			>
 				<h1><slot name="header"></slot></h1>
@@ -17,14 +17,16 @@
 				<slot></slot>
 			</div>
 		</div>
-		<div class="handle top" v-if="canResize" @mousedown.prevent="onTopHandleMousedown"></div>
-		<div class="handle right" v-if="canResize" @mousedown.prevent="onRightHandleMousedown"></div>
-		<div class="handle bottom" v-if="canResize" @mousedown.prevent="onBottomHandleMousedown"></div>
-		<div class="handle left" v-if="canResize" @mousedown.prevent="onLeftHandleMousedown"></div>
-		<div class="handle top-left" v-if="canResize" @mousedown.prevent="onTopLeftHandleMousedown"></div>
-		<div class="handle top-right" v-if="canResize" @mousedown.prevent="onTopRightHandleMousedown"></div>
-		<div class="handle bottom-right" v-if="canResize" @mousedown.prevent="onBottomRightHandleMousedown"></div>
-		<div class="handle bottom-left" v-if="canResize" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+		<template v-if="canResize">
+			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
+			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
+			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
+			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
+			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
+			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
+			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
+			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+		</template>
 	</div>
 </div>
 </template>
@@ -85,17 +87,10 @@ export default Vue.extend({
 
 	computed: {
 		isFlexible(): boolean {
-			return this.height == null;
+			return this.height == 'auto';
 		},
 		canResize(): boolean {
 			return !this.isFlexible;
-		},
-		withGradient(): boolean {
-			return (this as any).os.isSignedIn
-				? (this as any).os.i.clientSettings.gradientWindowHeader != null
-					? (this as any).os.i.clientSettings.gradientWindowHeader
-					: false
-				: false;
 		}
 	},
 
@@ -476,7 +471,7 @@ root(isDark)
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 		opacity 0
 		pointer-events none
 
@@ -493,7 +488,7 @@ root(isDark)
 		&:focus
 			&:not([data-is-modal])
 				> .body
-					box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+					box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
 
 		> .handle
 			$size = 8px
@@ -561,7 +556,7 @@ root(isDark)
 			overflow hidden
 			background isDark ? #282C37 : #fff
 			border-radius 6px
-			box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+			box-shadow 0 2px 6px 0 rgba(#000, 0.2)
 
 			> header
 				$header-height = 40px

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

@@ -114,7 +114,7 @@ export default Vue.extend({
 .notes
 	max-width 600px
 	margin 0 auto
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 	overflow hidden
 

src/client/app/desktop/views/pages/user-list.users.vue

@@ -8,9 +8,7 @@
 			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw% %i18n:common.loading%<mk-ellipsis/></p>
 			<template v-else-if="users.length != 0">
 				<div class="user" v-for="_user in users">
-					<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"/>
 					<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>
@@ -80,18 +78,13 @@ root(isDark)
 			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/pages/user/user.followers-you-know.vue

@@ -38,7 +38,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .followers-you-know
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> .title
@@ -49,7 +49,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)
 
 		> i
 			margin-right 4px

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

@@ -4,9 +4,7 @@
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
 	<template v-if="!fetching && users.length != 0">
 		<div class="user" v-for="friend in users">
-			<router-link class="avatar-anchor" :to="friend | userPage">
-				<img class="avatar" :src="`${friend.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
-			</router-link>
+			<mk-avatar class="avatar" :user="friend"/>
 			<div class="body">
 				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id">{{ friend.name }}</router-link>
 				<p class="username">@{{ friend | acct }}</p>
@@ -44,7 +42,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .friends
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> .title
@@ -55,7 +53,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)
 
 		> i
 			margin-right 4px
@@ -82,18 +80,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/pages/user/user.header.vue

@@ -2,12 +2,12 @@
 <div class="header" :data-is-dark-background="user.bannerUrl != null">
 	<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
 	<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
-	<div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
-		<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
+	<div class="banner-container" :style="style">
+		<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
 		<div class="fade"></div>
 	</div>
 	<div class="container">
-		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 		<div class="title">
 			<p class="name">{{ user | userName }}</p>
 			<p class="username">@{{ user | acct }}</p>
@@ -25,6 +25,15 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	props: ['user'],
+	computed: {
+		style(): any {
+			if (this.user.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.user.bannerColor ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.user.bannerUrl })`
+			};
+		}
+	},
 	mounted() {
 		if (this.user.bannerUrl) {
 			window.addEventListener('load', this.onScroll);
@@ -72,7 +81,7 @@ export default Vue.extend({
 
 	overflow hidden
 	background #f7f7f7
-	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+	box-shadow 0 1px 1px rgba(#000, 0.075)
 
 	> .is-suspended
 	> .is-remote
@@ -99,7 +108,7 @@ export default Vue.extend({
 				background-color #383838
 
 			> .fade
-				background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
+				background linear-gradient(transparent, rgba(#000, 0.7))
 
 		> .container
 			> .title
@@ -139,10 +148,9 @@ export default Vue.extend({
 			z-index 2
 			width 160px
 			height 160px
-			margin 0
 			border solid 3px #fff
 			border-radius 8px
-			box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
+			box-shadow 1px 1px 3px rgba(#000, 0.2)
 
 		> .title
 			position absolute

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

@@ -65,7 +65,7 @@ export default Vue.extend({
 		width calc(100% - 275px * 2)
 
 		> .timeline
-			border solid 1px rgba(0, 0, 0, 0.075)
+			border solid 1px rgba(#000, 0.075)
 			border-radius 6px
 
 	> div
@@ -91,7 +91,7 @@ export default Vue.extend({
 				font-size 12px
 				color #aaa
 				background #fff
-				border solid 1px rgba(0, 0, 0, 0.075)
+				border solid 1px rgba(#000, 0.075)
 				border-radius 6px
 
 				a

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

@@ -41,7 +41,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .photos
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> .title
@@ -52,7 +52,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)
 
 		> i
 			margin-right 4px

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

@@ -118,7 +118,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .profile
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> *:first-child