2.0.0

i18n: Add Polish translation

.eslintrc

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

.gitignore

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

README.md

@@ -18,10 +18,11 @@ ultimately sophisticated new type of mini-blog based SNS.
 
 :sparkles: Features
 ----------------------------------------------------------------
-* Automatically updated timeline
 * Reactions
+* User lists
 * Private messages
-* ServiceWorker support
+* Mute
+* Real time contents
 * ActivityPub compatible
 
 and more! You can touch with your own eyes at https://misskey.xyz/.

cli/clean-drive.js

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

cli/init.js

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

docs/manage.ja.md

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

gulpfile.ts

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

locales/en.yml

@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
   favorites: "Favorites"
+  lists: "Lists"
   customize: "Customize"
   settings: "Settings"
   signout: "Sign out"

locales/fr.yml

@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "Votre profil"
   drive: "Drive"
   favorites: "Favorites"
+  lists: "リスト"
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"

locales/index.ts

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

locales/ja.yml

@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
   favorites: "お気に入り"
+  lists: "リスト"
   customize: "カスタマイズ"
   settings: "設定"
   signout: "サインアウト"

locales/pl.yml

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

migration/2.0.0.js

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

migration/2018-04-19.js

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

package.json

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

src/cafy-id.ts

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

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

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

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

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

src/client/app/boot.js

@@ -61,11 +61,8 @@
 	}
 
 	// Dark/Light
-	const me = JSON.parse(localStorage.getItem('me') || null);
-	if (me && me.clientSettings) {
-		if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) {
-			document.documentElement.setAttribute('data-darkmode', 'true');
-		}
+	if (localStorage.getItem('darkmode') == 'true') {
+		document.documentElement.setAttribute('data-darkmode', 'true');
 	}
 
 	// Script version
@@ -108,8 +105,8 @@
 		const meta = await res.json();
 
 		// Compare versions
-		if (meta.version != ver) {
-			localStorage.setItem('v', meta.version);
+		if (meta.clientVersion != ver) {
+			localStorage.setItem('v', meta.clientVersion);
 
 			alert(
 				'Misskeyの新しいバージョンがあります。ページを再度読み込みします。' +

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/client/app/common/views/components/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.avatarUrl"/>
+				<mk-avatar class="avatar" :user="g.user2.avatarUrl"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
 				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
 			</a>
@@ -49,8 +49,8 @@
 		<section v-if="games.length > 0">
 			<h2>みんなの対局</h2>
 			<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
-				<img :src="`${g.user1.avatarUrl}?thumbnail&size=32`" alt="">
-				<img :src="`${g.user2.avatarUrl}?thumbnail&size=32`" alt="">
+				<mk-avatar class="avatar" :user="g.user1.avatarUrl"/>
+				<mk-avatar class="avatar" :user="g.user2.avatarUrl"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
 				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
 			</a>
@@ -271,8 +271,7 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
 			border-radius 100%
 
 		> span
@@ -301,8 +300,7 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
 			border-radius 100%
 
 		> span

src/client/app/common/views/components/poll.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/url-preview.vue

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

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';
@@ -95,7 +95,7 @@ export default (os: OS) => {
 				multiple: false,
 				title: '%fa:image%バナーにする画像を選択'
 			});
-		
+
 		return selectedFile
 			.then(cropImage)
 			.then(setBanner)

src/client/app/desktop/script.ts

@@ -28,6 +28,7 @@ import MkUser from './views/pages/user/user.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
+import MkUserList from './views/pages/user-list.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
@@ -55,6 +56,7 @@ init(async (launch) => {
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
+			{ path: '/i/lists/:list', component: MkUserList },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/othello', component: MkOthello },

src/client/app/desktop/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/follow-button.vue

@@ -19,6 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	props: {
 		user: {
@@ -30,6 +31,7 @@ export default Vue.extend({
 			default: 'compact'
 		}
 	},
+
 	data() {
 		return {
 			wait: false,
@@ -37,6 +39,7 @@ export default Vue.extend({
 			connectionId: null
 		};
 	},
+
 	mounted() {
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
@@ -44,13 +47,14 @@ export default Vue.extend({
 		this.connection.on('follow', this.onFollow);
 		this.connection.on('unfollow', this.onUnfollow);
 	},
+
 	beforeDestroy() {
 		this.connection.off('follow', this.onFollow);
 		this.connection.off('unfollow', this.onUnfollow);
 		(this as any).os.stream.dispose(this.connectionId);
 	},
-	methods: {
 
+	methods: {
 		onFollow(user) {
 			if (user.id == this.user.id) {
 				this.user.isFollowing = user.isFollowing;

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/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,6 @@
 <template>
 <div class="mk-note-preview" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
@@ -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,30 +24,43 @@
 					<router-link class="created-at" :to="p | notePage">
 						<mk-time :time="p.createdAt"/>
 					</router-link>
+					<span class="visibility" v-if="p.visibility != 'public'">
+						<template v-if="p.visibility == 'home'">%fa:home%</template>
+						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
+						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
+						<template v-if="p.visibility == 'private'">%fa:lock%</template>
+					</span>
 				</div>
 			</header>
 			<div class="body">
 				<p class="channel" v-if="p.channel">
 					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
 				</p>
-				<div class="text">
-					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.renote">RP:</a>
+				<p v-if="p.cw != null" class="cw">
+					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
+					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
+				</p>
+				<div class="content" v-show="p.cw == null || showContent">
+					<div class="text">
+						<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
+						<a class="reply" v-if="p.reply">%fa:reply%</a>
+						<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+						<a class="rp" v-if="p.renote">RP:</a>
+					</div>
+					<div class="media" v-if="p.media.length > 0">
+						<mk-media-list :media-list="p.media"/>
+					</div>
+					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+					<div class="tags" v-if="p.tags && p.tags.length > 0">
+						<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+					</div>
+					<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+					<div class="map" v-if="p.geo" ref="map"></div>
+					<div class="renote" v-if="p.renote">
+						<mk-note-preview :note="p.renote"/>
+					</div>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
@@ -113,6 +122,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			isDetailOpened: false,
 			connection: null,
 			connectionId: null
@@ -168,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]);
@@ -329,15 +339,12 @@ root(isDark)
 		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
@@ -364,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
 
@@ -383,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
 
@@ -427,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
 
@@ -441,22 +436,23 @@ 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
 
-				> .text
+				> .cw
 					cursor default
 					display block
 					margin 0
@@ -465,90 +461,117 @@ root(isDark)
 					font-size 1.1em
 					color isDark ? #fff : #717171
 
-					>>> .title
-						display block
-						margin-bottom 4px
-						padding 4px
-						font-size 90%
-						text-align center
-						background isDark ? #2f3944 : #eef1f3
-						border-radius 4px
-
-					>>> .code
-						margin 8px 0
-
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color isDark ? #6f808e : #aaa
-						border-left solid 3px isDark ? #637182 : #eee
-
-					> .reply
+					> .text
 						margin-right 8px
-						color isDark ? #99abbf : #717171
 
-					> .rp
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
-
-				> .map
-					width 100%
-					height 300px
-
-					&:empty
-						display none
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
+					> .toggle
 						display inline-block
-						margin 0 8px 0 0
-						padding 2px 8px 2px 16px
-						font-size 90%
-						color #8d969e
-						background #edf0f3
-						border-radius 4px
-
-						&:before
-							content ""
-							display block
-							position absolute
-							top 0
-							bottom 0
-							left 4px
-							width 8px
-							height 8px
-							margin auto 0
-							background #fff
-							border-radius 100%
+						padding 4px 8px
+						font-size 0.7em
+						color isDark ? #393f4f : #fff
+						background isDark ? #687390 : #b1b9c1
+						border-radius 2px
+						cursor pointer
+						user-select none
 
 						&:hover
-							text-decoration none
-							background #e2e7ec
+							background isDark ? #707b97 : #bbc4ce
 
-				.mk-url-preview
-					margin-top 8px
+				> .content
 
-				> .channel
-					margin 0
+					> .text
+						cursor default
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1.1em
+						color isDark ? #fff : #717171
 
-				> .mk-poll
-					font-size 80%
+						>>> .title
+							display block
+							margin-bottom 4px
+							padding 4px
+							font-size 90%
+							text-align center
+							background isDark ? #2f3944 : #eef1f3
+							border-radius 4px
 
-				> .renote
-					margin 8px 0
+						>>> .code
+							margin 8px 0
 
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px isDark ? #4e945e : #c0dac6
-						border-radius 8px
+						>>> .quote
+							margin 8px
+							padding 6px 12px
+							color isDark ? #6f808e : #aaa
+							border-left solid 3px isDark ? #637182 : #eee
+
+						> .reply
+							margin-right 8px
+							color isDark ? #99abbf : #717171
+
+						> .rp
+							margin-left 4px
+							font-style oblique
+							color #a0bf46
+
+					> .location
+						margin 4px 0
+						font-size 12px
+						color #ccc
+
+					> .map
+						width 100%
+						height 300px
+
+						&:empty
+							display none
+
+					> .tags
+						margin 4px 0 0 0
+
+						> *
+							display inline-block
+							margin 0 8px 0 0
+							padding 2px 8px 2px 16px
+							font-size 90%
+							color #8d969e
+							background #edf0f3
+							border-radius 4px
+
+							&:before
+								content ""
+								display block
+								position absolute
+								top 0
+								bottom 0
+								left 4px
+								width 8px
+								height 8px
+								margin auto 0
+								background #fff
+								border-radius 100%
+
+							&:hover
+								text-decoration none
+								background #e2e7ec
+
+					.mk-url-preview
+						margin-top 8px
+
+					> .channel
+						margin 0
+
+					> .mk-poll
+						font-size 80%
+
+					> .renote
+						margin 8px 0
+
+						> .mk-note-preview
+							padding 16px
+							border dashed 1px isDark ? #4e945e : #c0dac6
+							border-radius 8px
 
 			> footer
 				> button
@@ -579,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

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

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

@@ -1,96 +1,84 @@
 <template>
 <div class="mk-notifications">
 	<div class="notifications" v-if="notifications.length != 0">
-		<template v-for="(notification, i) in _notifications">
-			<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>
-					<div class="text">
-						<p>
-							<mk-reaction-icon :reaction="notification.reaction"/>
-							<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
-						</p>
-						<router-link class="note-ref" :to="notification.note | notePage">
-							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
-						</router-link>
-					</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>
-					<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>
-						</p>
-						<router-link class="note-ref" :to="notification.note | notePage">
-							%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
-						</router-link>
-					</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>
-					<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>
-						</p>
-						<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
-					</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>
-					<div class="text">
-						<p>%fa:user-plus%
-							<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
-						</p>
-					</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>
-					<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>
-						</p>
-						<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
-					</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>
-					<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>
-						</p>
-						<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
-					</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>
-					<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">
-							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
-						</router-link>
-					</div>
-				</template>
-			</div>
-			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
-				<span>%fa:angle-up%{{ notification._datetext }}</span>
-				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
-			</p>
-		</template>
+		<transition-group name="mk-notifications" class="transition">
+			<template v-for="(notification, i) in _notifications">
+				<div class="notification" :class="notification.type" :key="notification.id">
+					<mk-time :time="notification.createdAt"/>
+					<template v-if="notification.type == 'reaction'">
+						<mk-avatar class="avatar" :user="notification.user"/>
+						<div class="text">
+							<p>
+								<mk-reaction-icon :reaction="notification.reaction"/>
+								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
+							</p>
+							<router-link class="note-ref" :to="notification.note | notePage">
+								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+							</router-link>
+						</div>
+					</template>
+					<template v-if="notification.type == 'renote'">
+						<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>
+							</p>
+							<router-link class="note-ref" :to="notification.note | notePage">
+								%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+							</router-link>
+						</div>
+					</template>
+					<template v-if="notification.type == 'quote'">
+						<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>
+							</p>
+							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
+						</div>
+					</template>
+					<template v-if="notification.type == 'follow'">
+						<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>
+							</p>
+						</div>
+					</template>
+					<template v-if="notification.type == 'reply'">
+						<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>
+							</p>
+							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
+						</div>
+					</template>
+					<template v-if="notification.type == 'mention'">
+						<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>
+							</p>
+							<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
+						</div>
+					</template>
+					<template v-if="notification.type == 'poll_vote'">
+						<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">
+								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+							</router-link>
+						</div>
+					</template>
+				</div>
+				<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
+					<span>%fa:angle-up%{{ notification._datetext }}</span>
+					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+				</p>
+			</template>
+		</transition-group>
 	</div>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
@@ -186,110 +174,115 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
+	.transition
+		.mk-notifications-enter
+		.mk-notifications-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
+
 	> .notifications
-		> .notification
-			margin 0
-			padding 16px
-			overflow-wrap break-word
-			font-size 0.9em
-			border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
+		> *
+			> .notification
+				margin 0
+				padding 16px
+				overflow-wrap break-word
+				font-size 0.9em
+				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
 
-			&:last-child
-				border-bottom none
+				&:last-child
+					border-bottom none
 
-			> .mk-time
-				display inline
-				position absolute
-				top 16px
-				right 12px
-				vertical-align top
-				color isDark ? #606984 : rgba(0, 0, 0, 0.6)
-				font-size small
+				> .mk-time
+					display inline
+					position absolute
+					top 16px
+					right 12px
+					vertical-align top
+					color isDark ? #606984 : rgba(#000, 0.6)
+					font-size small
 
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .avatar-anchor
-				display block
-				float left
-				position -webkit-sticky
-				position sticky
-				top 16px
-
-				> img
+				&:after
+					content ""
 					display block
-					min-width 36px
-					min-height 36px
-					max-width 36px
-					max-height 36px
+					clear both
+
+				> .avatar
+					display block
+					float left
+					position -webkit-sticky
+					position sticky
+					top 16px
+					width 36px
+					height 36px
 					border-radius 6px
 
-			> .text
-				float right
-				width calc(100% - 36px)
-				padding-left 8px
+				> .text
+					float right
+					width calc(100% - 36px)
+					padding-left 8px
 
-				p
-					margin 0
+					p
+						margin 0
 
-					i, .mk-reaction-icon
-						margin-right 4px
+						i, .mk-reaction-icon
+							margin-right 4px
 
-			.note-preview
-				color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+				.note-preview
+					color isDark ? #c2cad4 : rgba(#000, 0.7)
 
-			.note-ref
-				color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+				.note-ref
+					color isDark ? #c2cad4 : rgba(#000, 0.7)
+
+					[data-fa]
+						font-size 1em
+						font-weight normal
+						font-style normal
+						display inline-block
+						margin-right 3px
+
+				&.renote, &.quote
+					.text p i
+						color #77B255
+
+				&.follow
+					.text p i
+						color #53c7ce
+
+				&.reply, &.mention
+					.text p i
+						color #555
+
+			> .date
+				display block
+				margin 0
+				line-height 32px
+				text-align center
+				font-size 0.8em
+				color isDark ? #666b79 : #aaa
+				background isDark ? #242731 : #fdfdfd
+				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+
+				span
+					margin 0 16px
 
 				[data-fa]
-					font-size 1em
-					font-weight normal
-					font-style normal
-					display inline-block
-					margin-right 3px
-
-			&.renote, &.quote
-				.text p i
-					color #77B255
-
-			&.follow
-				.text p i
-					color #53c7ce
-
-			&.reply, &.mention
-				.text p i
-					color #555
-
-		> .date
-			display block
-			margin 0
-			line-height 32px
-			text-align center
-			font-size 0.8em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
-
-			span
-				margin 0 16px
-
-			[data-fa]
-				margin-right 8px
+					margin-right 8px
 
 	> .more
 		display block
 		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,11 @@
 	@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"
 			@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
@@ -27,8 +32,10 @@
 	<button class="drive" title="%i18n:@attach-media-from-drive%" @click="chooseFileFromDrive">%fa:cloud%</button>
 	<button class="kao" title="%i18n:@insert-a-kao%" @click="kao">%fa:R smile%</button>
 	<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>
@@ -41,12 +48,16 @@
 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'],
+
 	data() {
 		return {
 			posting: false,
@@ -54,11 +65,16 @@ export default Vue.extend({
 			files: [],
 			uploadings: [],
 			poll: false,
+			useCw: false,
+			cw: null,
 			geo: null,
+			visibility: 'public',
+			visibleUsers: [],
 			autocomplete: null,
 			draghover: false
 		};
 	},
+
 	computed: {
 		draftId(): string {
 			return this.renote
@@ -67,6 +83,7 @@ export default Vue.extend({
 					? 'reply:' + this.reply.id
 					: 'note';
 		},
+
 		placeholder(): string {
 			return this.renote
 				? '%i18n:!@quote-placeholder%'
@@ -74,6 +91,7 @@ export default Vue.extend({
 					? '%i18n:!@reply-placeholder%'
 					: '%i18n:!@note-placeholder%';
 		},
+
 		submitText(): string {
 			return this.renote
 				? '%i18n:!@renote%'
@@ -81,21 +99,26 @@ export default Vue.extend({
 					? '%i18n:!@reply%'
 					: '%i18n:!@note%';
 		},
+
 		canPost(): boolean {
 			return !this.posting && (this.text.length != 0 || this.files.length != 0 || this.poll || this.renote);
 		}
 	},
+
 	watch: {
 		text() {
 			this.saveDraft();
 		},
+
 		poll() {
 			this.saveDraft();
 		},
+
 		files() {
 			this.saveDraft();
 		}
 	},
+
 	mounted() {
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
@@ -113,13 +136,16 @@ export default Vue.extend({
 			}
 		});
 	},
+
 	methods: {
 		focus() {
 			(this.$refs.text as any).focus();
 		},
+
 		chooseFile() {
 			(this.$refs.file as any).click();
 		},
+
 		chooseFileFromDrive() {
 			(this as any).apis.chooseDriveFile({
 				multiple: true
@@ -127,32 +153,40 @@ export default Vue.extend({
 				files.forEach(this.attachMedia);
 			});
 		},
+
 		attachMedia(driveFile) {
 			this.files.push(driveFile);
 			this.$emit('change-attached-media', this.files);
 		},
+
 		detachMedia(id) {
 			this.files = this.files.filter(x => x.id != id);
 			this.$emit('change-attached-media', this.files);
 		},
+
 		onChangeFile() {
 			Array.from((this.$refs.file as any).files).forEach(this.upload);
 		},
+
 		upload(file) {
 			(this.$refs.uploader as any).upload(file);
 		},
+
 		onChangeUploadings(uploads) {
 			this.$emit('change-uploadings', uploads);
 		},
+
 		clear() {
 			this.text = '';
 			this.files = [];
 			this.poll = false;
 			this.$emit('change-attached-media', this.files);
 		},
+
 		onKeydown(e) {
 			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
 		},
+
 		onPaste(e) {
 			Array.from(e.clipboardData.items).forEach((item: any) => {
 				if (item.kind == 'file') {
@@ -160,6 +194,7 @@ export default Vue.extend({
 				}
 			});
 		},
+
 		onDragover(e) {
 			const isFile = e.dataTransfer.items[0].kind == 'file';
 			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
@@ -169,12 +204,15 @@ export default Vue.extend({
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
 			}
 		},
+
 		onDragenter(e) {
 			this.draghover = true;
 		},
+
 		onDragleave(e) {
 			this.draghover = false;
 		},
+
 		onDrop(e): void {
 			this.draghover = false;
 
@@ -195,6 +233,7 @@ export default Vue.extend({
 			}
 			//#endregion
 		},
+
 		setGeo() {
 			if (navigator.geolocation == null) {
 				alert('お使いの端末は位置情報に対応していません');
@@ -210,10 +249,38 @@ export default Vue.extend({
 				enableHighAccuracy: true
 			});
 		},
+
 		removeGeo() {
 			this.geo = null;
 			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;
 
@@ -223,6 +290,9 @@ export default Vue.extend({
 				replyId: this.reply ? this.reply.id : undefined,
 				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,
@@ -250,6 +320,7 @@ export default Vue.extend({
 				this.posting = false;
 			});
 		},
+
 		saveDraft() {
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
@@ -264,6 +335,7 @@ export default Vue.extend({
 
 			localStorage.setItem('drafts', JSON.stringify(data));
 		},
+
 		deleteDraft() {
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
@@ -271,6 +343,7 @@ export default Vue.extend({
 
 			localStorage.setItem('drafts', JSON.stringify(data));
 		},
+
 		kao() {
 			this.text += getKao();
 		}
@@ -292,52 +365,66 @@ root(isDark)
 		clear both
 
 	> .content
-
-		textarea
+		> input
+		> textarea
 			display block
-			padding 12px
-			margin 0
 			width 100%
-			max-width 100%
-			min-width 100%
-			min-height calc(16px + 12px + 12px)
+			padding 12px
 			font-size 16px
 			color isDark ? #fff : #333
 			background isDark ? #191d23 : #fff
 			outline none
 			border solid 1px rgba($theme-color, 0.1)
 			border-radius 4px
-			transition border-color .3s ease
+			transition border-color .2s ease
 
 			&:hover
 				border-color rgba($theme-color, 0.2)
 				transition border-color .1s ease
 
-				& + *
-				& + * + *
-					border-color rgba($theme-color, 0.2)
-					transition border-color .1s ease
-
 			&:focus
-				color $theme-color
 				border-color rgba($theme-color, 0.5)
 				transition border-color 0s ease
 
-				& + *
-				& + * + *
-					border-color rgba($theme-color, 0.5)
-					transition border-color 0s ease
-
 			&:disabled
 				opacity 0.5
 
 			&::-webkit-input-placeholder
 				color rgba($theme-color, 0.3)
 
+		> input
+			margin-bottom 8px
+
+		> textarea
+			margin 0
+			max-width 100%
+			min-width 100%
+			min-height 64px
+
+			&:hover
+				& + *
+				& + * + *
+					border-color rgba($theme-color, 0.2)
+					transition border-color .1s ease
+
+			&:focus
+				& + *
+				& + * + *
+					border-color rgba($theme-color, 0.5)
+					transition border-color 0s ease
+
 			&.with
 				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
@@ -407,19 +494,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
@@ -484,11 +558,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
@@ -510,7 +598,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="ウィンドウの自動ポップアウト">
@@ -40,14 +40,15 @@
 				<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
 			</div>
 			<div class="div">
-				<mk-switch v-model="os.i.clientSettings.dark" @change="onChangeDark" text="ダークモード"/>
-				<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
+				<mk-switch v-model="darkmode" 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">
@@ -234,6 +236,7 @@ export default Vue.extend({
 			version,
 			latestVersion: undefined,
 			checkingForUpdate: false,
+			darkmode: localStorage.getItem('darkmode') == 'true',
 			enableSounds: localStorage.getItem('enableSounds') == 'true',
 			autoPopout: localStorage.getItem('autoPopout') == 'true',
 			apiViaStream: localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true,
@@ -257,6 +260,9 @@ export default Vue.extend({
 		apiViaStream() {
 			localStorage.setItem('apiViaStream', this.apiViaStream ? 'true' : 'false');
 		},
+		darkmode() {
+			(this as any)._updateDarkmode_(this.darkmode);
+		},
 		enableSounds() {
 			localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
 		},
@@ -293,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
 			});
 		},
@@ -304,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

@@ -1,28 +1,23 @@
 <template>
-<div class="mk-home-timeline">
-	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
+<div class="mk-timeline-core">
 	<mk-friends-maker v-if="src == 'home' && alone"/>
 	<div class="fetching" v-if="fetching">
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" v-if="notes.length == 0 && !fetching">
-		%fa:R comments%%i18n:@empty%
-	</p>
-	<mk-notes :notes="notes" ref="timeline">
-		<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">%i18n:@load-more%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
-		</button>
+
+	<mk-notes ref="timeline" :more="canFetchMore ? more : null">
+		<p :class="$style.empty" slot="empty">
+			%fa:R comments%%i18n:@empty%
+		</p>
 	</mk-notes>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { url } from '../../../config';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 const fetchLimit = 10;
-const displayLimit = 30;
 
 export default Vue.extend({
 	props: {
@@ -37,10 +32,9 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			notes: [],
-			queue: [],
 			connection: null,
 			connectionId: null,
+			unreadCount: 0,
 			date: null
 		};
 	},
@@ -67,7 +61,7 @@ export default Vue.extend({
 		},
 
 		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
+			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
@@ -82,7 +76,7 @@ export default Vue.extend({
 		}
 
 		document.addEventListener('keydown', this.onKeydown);
-		window.addEventListener('scroll', this.onScroll);
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 
 		this.fetch();
 	},
@@ -96,33 +90,29 @@ export default Vue.extend({
 		this.stream.dispose(this.connectionId);
 
 		document.removeEventListener('keydown', this.onKeydown);
-		window.removeEventListener('scroll', this.onScroll);
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 
 	methods: {
-		isScrollTop() {
-			return window.scrollY <= 8;
-		},
-
-		fetch(cb?) {
-			this.queue = [];
+		fetch() {
 			this.fetching = true;
 
-			(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
-			}).then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-					this.existMore = true;
-				}
-				this.notes = notes;
-				this.fetching = false;
-				this.$emit('loaded');
-				if (cb) cb();
-			});
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api(this.endpoint, {
+					limit: fetchLimit + 1,
+					untilDate: this.date ? this.date.getTime() : undefined,
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
 		},
 
 		more() {
@@ -132,65 +122,28 @@ export default Vue.extend({
 
 			(this as any).api(this.endpoint, {
 				limit: fetchLimit + 1,
-				untilId: this.notes[this.notes.length - 1].id,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();
 				} else {
 					this.existMore = false;
 				}
-				this.notes = this.notes.concat(notes);
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
 				this.moreFetching = false;
 			});
 		},
 
-		prependNote(note, silent = false) {
-			// サウンドを再生する
-			if ((this as any).os.isEnableSounds && !silent) {
-				const sound = new Audio(`${url}/assets/post.mp3`);
-				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
-				sound.play();
-			}
-
-			// Prepent a note
-			this.notes.unshift(note);
-
-			// オーバーフローしたら古い投稿は捨てる
-			if (this.notes.length >= displayLimit) {
-				this.notes = this.notes.slice(0, displayLimit);
-			}
-		},
-
-		releaseQueue() {
-			this.queue.forEach(n => this.prependNote(n, true));
-			this.queue = [];
-		},
-
 		onNote(note) {
-			//#region 弾く
-			const isMyNote = note.userId == (this as any).os.i.id;
-			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
-
-			if ((this as any).os.i.clientSettings.showMyRenotes === false) {
-				if (isMyNote && isPureRenote) {
-					return;
-				}
+			if (document.hidden && note.userId !== (this as any).os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 			}
 
-			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
-				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
-					return;
-				}
-			}
-			//#endregion
-
-			if (this.isScrollTop()) {
-				this.prependNote(note);
-			} else {
-				this.queue.unshift(note);
-			}
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
 		},
 
 		onChangeFollowing() {
@@ -206,14 +159,10 @@ export default Vue.extend({
 			this.fetch();
 		},
 
-		onScroll() {
-			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
-				const current = window.scrollY + window.innerHeight;
-				if (current > document.body.offsetHeight - 8) this.more();
-			}
-
-			if (this.isScrollTop()) {
-				this.releaseQueue();
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.unreadCount = 0;
+				document.title = 'Misskey';
 			}
 		},
 
@@ -223,7 +172,7 @@ export default Vue.extend({
 					this.focus();
 				}
 			}
-		},
+		}
 	}
 });
 </script>
@@ -231,32 +180,28 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-home-timeline
-	> .newer-indicator
-		position -webkit-sticky
-		position sticky
-		z-index 100
-		height 3px
-		background $theme-color
-
+.mk-timeline-core
 	> .mk-friends-maker
 		border-bottom solid 1px #eee
 
 	> .fetching
 		padding 64px 0
 
-	> .empty
-		display block
-		margin 0 auto
-		padding 32px
-		max-width 400px
-		text-align center
-		color #999
+</style>
 
-		> [data-fa]
-			display block
-			margin-bottom 16px
-			font-size 3em
-			color #ccc
+<style lang="stylus" module>
+.empty
+	display block
+	margin 0 auto
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-fa]
+		display block
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
 
 </style>

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

@@ -1,19 +1,23 @@
 <template>
 <div class="mk-timeline">
 	<header>
-		<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
-		<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
-		<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+		<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
+		<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
+		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
+		<button @click="chooseList" title="リスト">%fa:list%</button>
 	</header>
 	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
 	<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
 	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
+	<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import XCore from './timeline.core.vue';
+import MkUserListsWindow from './user-lists-window.vue';
 
 export default Vue.extend({
 	components: {
@@ -22,7 +26,8 @@ export default Vue.extend({
 
 	data() {
 		return {
-			src: 'home'
+			src: 'home',
+			list: null
 		};
 	},
 
@@ -35,6 +40,15 @@ export default Vue.extend({
 	methods: {
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
+		},
+
+		chooseList() {
+			const w = (this as any).os.new(MkUserListsWindow);
+			w.$once('choosen', list => {
+				this.list = list;
+				this.src = 'list';
+				w.close();
+			});
 		}
 	}
 });
@@ -45,7 +59,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
@@ -53,7 +67,24 @@ 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
+			z-index 2
+			top 0
+			right 0
+			padding 0
+			width 42px
+			font-size 0.9em
+			line-height 42px
+			color isDark ? #9baec8 : #ccc
+
+			&:hover
+				color isDark ? #b2c1d5 : #aaa
+
+			&:active
+				color isDark ? #b2c1d5 : #999
 
 		> span
 			display inline-block
@@ -62,7 +93,7 @@ root(isDark)
 			font-size 12px
 			user-select none
 
-			&[data-is-active]
+			&[data-active]
 				color $theme-color
 				cursor default
 				font-weight bold
@@ -77,7 +108,7 @@ root(isDark)
 					height 2px
 					background $theme-color
 
-			&:not([data-is-active])
+			&:not([data-active])
 				color isDark ? #9aa2a7 : #6f7477
 				cursor pointer
 

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">
@@ -16,10 +16,13 @@
 				<li>
 					<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
 				</li>
+				<li @click="list">
+					<p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
+				</li>
 			</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>
@@ -42,6 +45,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import MkUserListsWindow from './user-lists-window.vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
@@ -80,6 +84,13 @@ export default Vue.extend({
 			this.close();
 			(this as any).os.new(MkDriveWindow);
 		},
+		list() {
+			this.close();
+			const w = (this as any).os.new(MkUserListsWindow);
+			w.$once('choosen', list => {
+				this.$router.push(`i/lists/${ list.id }`);
+			});
+		},
 		settings() {
 			this.close();
 			(this as any).os.new(MkSettingsWindow);
@@ -88,10 +99,7 @@ export default Vue.extend({
 			(this as any).os.signout();
 		},
 		dark() {
-			(this as any).api('i/update_client_setting', {
-				name: 'dark',
-				value: !(this as any)._darkmode_
-			});
+			(this as any)._updateDarkmode_(!(this as any)._darkmode_);
 		}
 	}
 });
@@ -157,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 ""
@@ -168,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

@@ -0,0 +1,93 @@
+<template>
+<div>
+	<mk-notes ref="timeline" :more="existMore ? more : null"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { UserListStream } from '../../../common/scripts/streaming/user-list';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	props: ['list'],
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+	watch: {
+		$route: 'init'
+	},
+	mounted() {
+		this.init();
+	},
+	beforeDestroy() {
+		this.connection.close();
+	},
+	methods: {
+		init() {
+			if (this.connection) this.connection.close();
+			this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
+			this.connection.on('note', this.onNote);
+			this.connection.on('userAdded', this.onUserAdded);
+			this.connection.on('userRemoved', this.onUserRemoved);
+
+			this.fetch();
+		},
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/user-list-timeline', {
+					listId: this.list.id,
+					limit: fetchLimit + 1,
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+		more() {
+			this.moreFetching = true;
+
+			(this as any).api('notes/list-timeline', {
+				listId: this.list.id,
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+		},
+		onNote(note) {
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+		onUserAdded() {
+			this.fetch();
+		},
+		onUserRemoved() {
+			this.fetch();
+		}
+	}
+});
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
+	<span slot="header">%fa:list% リスト</span>
+
+	<div data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82" :data-darkmode="_darkmode_">
+		<button class="ui" @click="add">リストを作成</button>
+		<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
+	</div>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			lists: []
+		};
+	},
+	mounted() {
+		(this as any).api('users/lists/list').then(lists => {
+			this.fetching = false;
+			this.lists = lists;
+		});
+	},
+	methods: {
+		add() {
+			(this as any).apis.input({
+				title: 'リスト名',
+			}).then(async title => {
+				const list = await (this as any).api('users/lists/create', {
+					title
+				});
+
+				this.$emit('choosen', list);
+			});
+		},
+		choice(list) {
+			this.$emit('choosen', list);
+		},
+		close() {
+			(this as any).$refs.window.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+
+root(isDark)
+	padding 16px
+
+	> button
+		margin-bottom 16px
+
+	> a
+		display block
+		padding 16px
+		border solid 1px isDark ? #1c2023 : #eee
+		border-radius 4px
+
+[data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82"][data-darkmode]
+	root(true)
+
+[data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82"]:not([data-darkmode])
+	root(false)
+
+</style>

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

@@ -2,8 +2,8 @@
 <div class="mk-users-list">
 	<nav>
 		<div>
-			<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
-			<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
+			<span :data-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
+			<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
 		</div>
 	</nav>
 	<div class="users" v-if="!fetching && users.length != 0">
@@ -98,7 +98,7 @@ export default Vue.extend({
 				*
 					pointer-events none
 
-				&[data-is-active]
+				&[data-active]
 					font-weight bold
 					color $theme-color
 					border-color $theme-color
@@ -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