12.63.0

New Crowdin updates (#6932 )
* New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (German) * New translations ja-JP.yml (English) * New translations ja-JP.yml (German)
2020-12-11 22:40:11 +09:00 · 2020-12-11 22:39:38 +09:00 · 2020-12-11 22:36:57 +09:00 · 2020-12-11 22:15:47 +09:00 · 2020-12-11 21:52:57 +09:00 · 2020-12-11 21:43:28 +09:00
102 changed files with 3446 additions and 1633 deletions
@@ -8,7 +8,7 @@
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge&logo=github)](http://makeapullrequest.com)
 [![Awesome Humane Tech](https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true)](https://github.com/humanetech-community/awesome-humane-tech)

-**A forever evolving, professional microblogging platform.**
+**A forever evolving, interplanetary microblogging platform.**

 <p align="justify">
 <a href="https://join.misskey.page/">Misskey</a> is a decentralized microblogging platform born on Earth.
@@ -251,6 +251,7 @@ registration: "إنشاء حساب"
 enableRegistration: "تفعيل إنشاء الحسابات الجديدة"
 invite: "دعوة"
 basicInfo: "المعلومات الأساسية "
+pinnedNotes: "ملاحظة مدبسة"
 hcaptchaSiteKey: "مفتاح الموقع"
 hcaptchaSecretKey: "المفتاح السري"
 recaptcha: "reCAPTCHA"
@@ -33,6 +33,9 @@ addUser: "Benutzer hinzufügen"
 favorite: "Zu Favoriten hinzufügen"
 favorites: "Favoriten"
 unfavorite: "Aus Favoriten entfernen"
+favorited: "Zu Favoriten hinzugefügt."
+alreadyFavorited: "Bereits zu den Favoriten hinzugefügt."
+cantFavorite: "Hinzufügen zu Favoriten fehlgeschlagen."
 pin: "Anheften"
 unpin: "Lösen"
 copyContent: "Inhalt kopieren"
@@ -87,6 +90,9 @@ followRequestPending: "Ausstehende Follow-Anfrage"
 enterEmoji: "Gib ein Emoji ein"
 renote: "Renote"
 unrenote: "Renote zurücknehmen"
+renoted: "Renote getätigt."
+cantRenote: "Renote dieses Beitrags nicht möglich."
+cantReRenote: "Renote einer Renote nicht möglich."
 quote: "Zitieren"
 pinnedNote: "Angepinnte Notiz"
 you: "Du"
@@ -95,7 +101,7 @@ sensitive: "NSFW"
 add: "Hinzufügen"
 reaction: "Reaktionen"
 reactionSettingDescription: "Gib deine Lieblingsreaktionen ein, um sie der Reaktionsauswahl hinzuzufügen."
-reactionSettingDescription2: "Ziehen zum Reorganisieren, Klicken zum Löschen."
+reactionSettingDescription2: "Ziehe zum Anordnen, Klicke zum Löschen,  Drücke \"+\" zum Hinzufügen"
 rememberNoteVisibility: "Notizsichtbarkeit merken"
 attachCancel: "Anhang entfernen"
 markAsSensitive: "Als NSFW markieren"
@@ -320,6 +326,8 @@ pinnedUsers: "Angepinnte Benutzer"
 pinnedUsersDescription: "Gib einen Benutzernamen pro Zeile ein. Diese werden im \"Erkunden\" Tab angezeigt."
 pinnedPages: "Angepinnte Seiten"
 pinnedPagesDescription: "Gib hier die Pfäde zu den Seiten an, die du an die Spitze dieser Instanz anheften möchtest, getrennt durch neue Zeilen."
+pinnedClipId: "ID des angehefteten Clips"
+pinnedNotes: "Angepinnte Notizen"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "hCaptcha aktivieren"
 hcaptchaSiteKey: "Site key"
@@ -648,6 +656,22 @@ noteFavoritesCount: "Anzahl favorisierter Notizen"
 pageLikesCount: "Anzahl der Seiten, die mir gefallen"
 pageLikedCount: "Anzahl erhaltener \"Gefällt mir\" auf Seiten"
 reversiCount: "Anzahl von Reversi-Runden"
+contact: "Kontakt"
+useSystemFont: "Standardschriftart des Systems verwenden"
+clips: "Clips"
+experimentalFeatures: "Experimentelle Funktionalitäten"
+developer: "Entwickler"
+makeExplorable: "Benutzerkonto in \"Erkunden\" sichtbar machen"
+makeExplorableDescription: "Wenn diese Option deaktiviert ist, ist dein Benutzerkonto nicht im \"Erkunden\"-Bereich sichtbar."
+_aboutMisskey:
+  about: "Misskey ist Open-Source-Software die von syuilo seit 2014 entwickelt wird."
+  contributors: "Hauptmitwirkende"
+  allContributors: "Alle Mitwirkenden"
+  source: "Quellcode"
+  translation: "Misskey übersetzen"
+  donate: "An Misskey spenden"
+  morePatrons: "Wir schätzen ebenso die Unterstützung vieler anderer hier nicht gelisteter Personen sehr. Danke! 🥰"
+  patrons: "UnterstützerInnen"
 _nsfw:
  respect: "Als NSFW markierte Bilder verdecken"
  ignore: "Als NSFW markierte Bilder nicht verdecken"
@@ -958,6 +982,7 @@ _widgets:
  digitalClock: "Digitaluhr"
  federation: "Föderation"
  postForm: "Neue Notiz anfertigen"
+  slideshow: "Diashow"
 _cw:
  hide: "Ausblenden"
  show: "Mehr anzeigen"
@@ -1017,6 +1042,8 @@ _profile:
  metadataDescription: "Du kannst auf deinem Profil vier zusätzliche Informationsblöcke anzeigen lassen."
  metadataLabel: "Name"
  metadataContent: "Inhalt"
+  changeAvatar: "Profilbild ändern"
+  changeBanner: "Banner ändern"
 _exportOrImport:
  allNotes: "Alle Notizen"
  followingList: "Gefolgte Benutzer"
@@ -33,6 +33,9 @@ addUser: "Add a user"
 favorite: "Favorite"
 favorites: "Favorites"
 unfavorite: "Unfavorite"
+favorited: "Added to favorites."
+alreadyFavorited: "Already added to favorites."
+cantFavorite: "Couldn't add to favorites."
 pin: "Pin to profile"
 unpin: "Unpin from profile"
 copyContent: "Copy contents"
@@ -87,6 +90,9 @@ followRequestPending: "Pending follow request"
 enterEmoji: "Enter an emoji"
 renote: "Renote"
 unrenote: "Unrenote"
+renoted: "Renoted."
+cantRenote: "This post can't be renoted."
+cantReRenote: "A renote can't be renoted."
 quote: "Quote"
 pinnedNote: "Pinned note"
 you: "You"
@@ -95,7 +101,7 @@ sensitive: "NSFW"
 add: "Add"
 reaction: "Reaction"
 reactionSettingDescription: "Assign your favorite reactions which want to pin in reaction picker."
-reactionSettingDescription2: "Drag to reorganize, click to delete."
+reactionSettingDescription2: "Drag to reorder, Click to delete, Press \"+\" to add"
 rememberNoteVisibility: "Remember note visibility settings"
 attachCancel: "Remove attachment"
 markAsSensitive: "Mark as NSFW"
@@ -320,6 +326,8 @@ pinnedUsers: "Pinned user"
 pinnedUsersDescription: "List one username per line. Users listed here will be pinned under \"Explore\" tab."
 pinnedPages: "Pinned pages"
 pinnedPagesDescription: "Enter the paths of the pages you want to pin to the top page of this instance, separated by new lines."
+pinnedClipId: "ID of the pinned clip"
+pinnedNotes: "Pinned notes"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "Enable hCaptcha"
 hcaptchaSiteKey: "Site key"
@@ -648,6 +656,22 @@ noteFavoritesCount: "Amount of favorite notes"
 pageLikesCount: "Amount of received Page likes"
 pageLikedCount: "Amount of liked Pages"
 reversiCount: "Number of Reversi matches"
+contact: "Contact"
+useSystemFont: "Use the system's default font"
+clips: "Clips"
+experimentalFeatures: "Experimental features"
+developer: "Developer"
+makeExplorable: "Make account visible in \"Explore\""
+makeExplorableDescription: "If you turn this off, your account will not show up in the \"Explore\" section."
+_aboutMisskey:
+  about: "Misskey is open-source software being developed by syuilo since 2014."
+  contributors: "Main contributors"
+  allContributors: "All contributors"
+  source: "Source code"
+  translation: "Translate Misskey"
+  donate: "Donate to Misskey"
+  morePatrons: "We really appreciate the support of many other helpers not listed here. Thank you! 🥰"
+  patrons: "Backers"
 _nsfw:
  respect: "Hide NSFW media"
  ignore: "Don't hide NSFW media"
@@ -958,6 +982,7 @@ _widgets:
  digitalClock: "Digital clock"
  federation: "Federation"
  postForm: "Compose a note"
+  slideshow: "Slideshow"
 _cw:
  hide: "Hide"
  show: "Load more"
@@ -1017,6 +1042,8 @@ _profile:
  metadataDescription: "You can display up to four additional information sections in your profile."
  metadataLabel: "Label"
  metadataContent: "Content"
+  changeAvatar: "Change avatar"
+  changeBanner: "Change banner"
 _exportOrImport:
  allNotes: "All notes"
  followingList: "Following"
@@ -314,6 +314,7 @@ bannerUrl: "URL de la imagen del banner"
 basicInfo: "Información básica"
 pinnedUsers: "Usuarios fijados"
 pinnedUsersDescription: "Describir los usuarios que quiere fijar en la página \"Descubrir\" separados por una linea nueva"
+pinnedNotes: "Nota fijada"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "Habilitar hCaptcha"
 hcaptchaSiteKey: "Clave del sitio"
@@ -313,6 +313,7 @@ bannerUrl: "URL de l’image de la bannière"
 basicInfo: "Informations basiques"
 pinnedUsers: "Utilisateur·rice épinglé·e"
 pinnedUsersDescription: "Listez les utilisateur·rice·s que vous souhaitez voir épinglé·e·s sur la page \"Découvrir\", un·e par ligne."
+pinnedNotes: "Note épinglée"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "Activer hCaptcha"
 hcaptchaSiteKey: "Clé du site"
@@ -33,6 +33,9 @@ addUser: "ユーザーを追加"
 favorite: "お気に入り"
 favorites: "お気に入り"
 unfavorite: "お気に入り解除"
+favorited: "お気に入りに登録しました。"
+alreadyFavorited: "既にお気に入りに登録されています。"
+cantFavorite: "お気に入りに登録できませんでした。"
 pin: "ピン留め"
 unpin: "ピン留め解除"
 copyContent: "内容をコピー"
@@ -87,6 +90,9 @@ followRequestPending: "フォロー許可待ち"
 enterEmoji: "絵文字を入力"
 renote: "Renote"
 unrenote: "Renote解除"
+renoted: "Renoteしました。"
+cantRenote: "この投稿はRenoteできません。"
+cantReRenote: "RenoteをRenoteすることはできません。"
 quote: "引用"
 pinnedNote: "ピン留めされたノート"
 you: "あなた"
@@ -95,7 +101,7 @@ sensitive: "閲覧注意"
 add: "追加"
 reaction: "リアクション"
 reactionSettingDescription: "リアクションピッカーに表示するリアクションを設定します。"
-reactionSettingDescription2: "ドラッグして並び替えます。クリックして削除します。"
+reactionSettingDescription2: "ドラッグして並び替え、クリックして削除、＋を押して追加します。"
 rememberNoteVisibility: "公開範囲を記憶する"
 attachCancel: "添付取り消し"
 markAsSensitive: "閲覧注意にする"
@@ -320,6 +326,8 @@ pinnedUsers: "ピン留めユーザー"
 pinnedUsersDescription: "「みつける」ページなどにピン留めしたいユーザーを改行で区切って記述します。"
 pinnedPages: "ピン留めページ"
 pinnedPagesDescription: "インスタンスのトップページにピン留めしたいページのパスを改行で区切って記述します。"
+pinnedClipId: "ピン留めするクリップのID"
+pinnedNotes: "ピン留めされたノート"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "hCaptchaを有効にする"
 hcaptchaSiteKey: "サイトキー"
@@ -650,6 +658,12 @@ pageLikedCount: "Pageにいいねされた数"
 reversiCount: "リバーシの対局数"
 contact: "連絡先"
 useSystemFont: "システムのデフォルトのフォントを使う"
+clips: "クリップ"
+experimentalFeatures: "実験的機能"
+developer: "開発者"
+makeExplorable: "アカウントを見つけやすくする"
+makeExplorableDescription: "オフにすると、「みつける」にアカウントが載らなくなります。"
+showGapBetweenNotesInTimeline: "タイムラインのノートを離して表示"

 _aboutMisskey:
  about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
@@ -990,6 +1004,7 @@ _widgets:
  digitalClock: "デジタル時計"
  federation: "連合"
  postForm: "投稿フォーム"
+  slideshow: "スライドショー"

 _cw:
  hide: "隠す"
@@ -1054,6 +1069,8 @@ _profile:
  metadataDescription: "プロフィールに表として4つまでの追加情報を表示することができます。"
  metadataLabel: "ラベル"
  metadataContent: "内容"
+  changeAvatar: "アバター画像を変更"
+  changeBanner: "バナー画像を変更"

 _exportOrImport:
  allNotes: "全てのノート"
@@ -314,6 +314,7 @@ bannerUrl: "バナー画像のURL"
 basicInfo: "基本情報"
 pinnedUsers: "ピン留めしたユーザー"
 pinnedUsersDescription: "「みつける」ページとかにピン留めしたいユーザーをここに書けばええんやで。他ん人との名前は改行で区切ればええんやで。"
+pinnedNotes: "ピン留めされとるノート"
 hcaptcha: "hCaptcha（キャプチャ）"
 enableHcaptcha: "hCaptcha（キャプチャ）をつけとく"
 hcaptchaSiteKey: "サイトキー"
@@ -95,7 +95,6 @@ sensitive: "열람주의"
 add: "추가"
 reaction: "리액션"
 reactionSettingDescription: "리액션 선택 상자에 표시할 리액션을 설정합니다."
-reactionSettingDescription2: "드래그하여 순서를 바꿉니다. 클릭하면 삭제됩니다."
 rememberNoteVisibility: "공개 범위를 기억하기"
 attachCancel: "첨부 취소"
 markAsSensitive: "열람주의로 설정"
@@ -127,6 +126,7 @@ cacheRemoteFilesDescription: "이 설정을 해지하면 리모트 파일을 캐
 flagAsBot: "나는 봇입니다"
 flagAsBotDescription: "이 계정을 자동화된 수단으로 운용할 경우에 활성화해 주세요. 이 플래그를 활성화하면, 다른 봇이 이를 참고하여 봇 끼리의 무한 연쇄 반응을 회피하거나, 이 계정의 시스템 상에서의 취급이 Bot 운영에 최적화되는 등의 변화가 생깁니다."
 flagAsCat: "나는 고양이다냥"
+flagAsCatDescription: "이 계정이 고양이라면 활성화 해주세요."
 autoAcceptFollowed: "팔로우 중인 유저로부터의 팔로우 요청을 자동 수락"
 addAcount: "계정 추가"
 loginFailed: "로그인에 실패했습니다"
@@ -319,6 +319,7 @@ pinnedUsers: "고정된 유저"
 pinnedUsersDescription: "\"발견하기\" 페이지 등에 고정하고 싶은 유저를 한 줄에 한 명씩 적습니다."
 pinnedPages: "고정한 페이지"
 pinnedPagesDescription: "인스턴스의 대문에 고정하고 싶은 페이지의 경로를 한 줄에 하나씩 적습니다."
+pinnedNotes: "고정해놓은 노트"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "hCaptcha 활성화"
 hcaptchaSiteKey: "사이트 키"
@@ -433,6 +434,7 @@ useOsNativeEmojis: "OS 기본 이모지를 사용"
 youHaveNoGroups: "그룹이 없습니다"
 joinOrCreateGroup: "다른 그룹의 초대를 받거나, 직접 새 그룹을 만들어 보세요."
 noHistory: "기록이 없습니다"
+signinHistory: "로그인 기록"
 disableAnimatedMfm: "움직임이 있는 MFM을 비활성화"
 doing: "잠시만요"
 category: "카테고리"
@@ -484,6 +486,7 @@ none: "없음"
 showInPage: "페이지로 보기"
 popout: "새 창으로 열기"
 volume: "음량"
+masterVolume: "마스터 볼륨"
 details: "자세히"
 chooseEmoji: "이모지 선택"
 unableToProcess: "작업을 완료할 수 없습니다"
@@ -581,6 +584,7 @@ regenerateLoginTokenDescription: "로그인할 때 사용되는 내부 토큰을
 setMultipleBySeparatingWithSpace: "공백으로 구분하여 여러 개 설정할 수 있습니다."
 fileIdOrUrl: "파일 ID 또는 URL"
 chatOpenBehavior: "대화를 열 때의 동작"
+behavior: "동작"
 sample: "예시"
 abuseReports: "신고"
 reportAbuse: "신고"
@@ -588,7 +592,9 @@ reportAbuseOf: "{name}을 신고하기"
 fillAbuseReportDescription: "신고하려는 이유를 자세히 알려주세요. 특정 게시물을 신고할 때에는 게시물의 URL도 포함해 주세요."
 abuseReported: "신고를 보냈습니다. 신고해 주셔서 감사합니다."
 send: "전송"
+openInNewTab: "새 탭에서 열기"
 random: "랜덤"
+system: "시스템"
 switchUi: "UI 전환"
 desktop: "데스크탑"
 clip: "클립"
@@ -596,6 +602,18 @@ createNew: "새로 만들기"
 optional: "옵션"
 createNewClip: "새 클립 만들기"
 public: "공개"
+manageAccessTokens: "액세스 토큰 관리"
+yes: "예"
+no: "아니오"
+driveUsage: "드라이브 사용량"
+noCrawle: "검색엔진의 인덱싱 거부"
+noCrawleDescription: "검색엔진에 사용자 페이지, 노트, 페이지 등의 콘텐츠를 인덱싱되지 않게 합니다."
+lockedAccountInfo: "팔로우를 승인으로 승인받더라도 노트의 공개 범위를 '팔로워'로 하지 않는 한 누구나 당신의 노트를 볼 수 있습니다."
+alwaysMarkSensitive: "미디어를 항상 열람 주의로 설정"
+emailVerified: "메일 주소가 확인되었습니다."
+clips: "클립"
+_nsfw:
+  ignore: "열람 주의 미디어 항상 표시"
 _mfm:
  cheatSheet: "MFM 도움말"
  intro: "MFM는 Misskey의 다양한 곳에서 사용할 수 있는 전용 마크업 언어입니다. 여기에서는 MFM에서 사용할 수 있는 구문을 확인할 수 있습니다."
@@ -610,13 +628,20 @@ _mfm:
  smallDescription: "내용을 작고 연하게 보이게 합니다."
  center: "가운데 정렬"
  centerDescription: "내용을 가운데 정렬로 보이게 합니다."
+  inlineCode: "코드(인라인)"
+  blockCode: "코드(블록)"
+  inlineMath: "수식(인라인)"
  inlineMathDescription: "수식(KaTeX)를 인라인으로 보이게 합니다."
+  blockMath: "수식(블록)"
  blockMathDescription: "여러 줄의 수식(KaTeX)를 블록으로 보이게 합니다."
  quote: "인용"
  emoji: "커스텀 이모지"
  emojiDescription: "커스텀 이모지의 이름을 쌍점(:)으로 감싸서 커스텀 이모지를 사용합니다."
  search: "검색"
  searchDescription: "주어진 키워드가 입력된 검색창을 보이게 합니다."
+  flip: "플립"
+  flipDescription: "내용을 상하 또는 좌우로 반전시킵니다."
+  jump: "애니메이션(점프)"
 _reversi:
  reversi: "리버시"
  gameSettings: "대국 설정"
@@ -628,6 +653,7 @@ _reversi:
  thisGameIsStartedSoon: "잠시 후에 대국이 시작됩니다"
  waitingForOther: "상대의 준비가 완료될 때까지 기다리고 있습니다"
  waitingForMe: "당신의 준비 완료를 기다리고 있습니다"
+  ready: "준비 완료"
  myTurn: "당신의 차례입니다"
  turnOf: "{name}님의 차례입니다"
  pastTurnOf: "{name}님의 차례"
@@ -635,6 +661,8 @@ _reversi:
  surrendered: "기권에 의해"
  drawn: "무승부"
  won: "{name}님의 승리"
+  black: "흑"
+  white: "백"
  total: "합계"
  turnCount: "{count}턴 째"
  myGames: "내 대국"
@@ -95,7 +95,7 @@ sensitive: "Содержимое не для всех"
 add: "Добавить"
 reaction: "Реакции"
 reactionSettingDescription: "Подберите, что будет у вас в палитре реакций"
-reactionSettingDescription2: "Меняйте порядок перетаскиванием. Удаляйте нажатием."
+reactionSettingDescription2: "Расставляйте перетаскиванием, удаляйте нажатием, добавляйте кнопкой «+»."
 rememberNoteVisibility: "Запоминать видимость заметок"
 attachCancel: "Удалить вложение"
 markAsSensitive: "Отметить как «не для всех»"
@@ -320,6 +320,8 @@ pinnedUsers: "Прикреплённый пользователь"
 pinnedUsersDescription: "Перечислите по одному имени пользователя в строке. Пользователи, перечисленные здесь, будут привязаны к закладке \"Изучение\"."
 pinnedPages: "Закрепленные страницы"
 pinnedPagesDescription: "Если хотите закрепить страницы на главной сайта, сюда можно добавить пути к ним, каждый в отдельной строке."
+pinnedClipId: "Идентификатор закреплённой памятки"
+pinnedNotes: "Закреплённая заметка"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "Включить hCaptcha"
 hcaptchaSiteKey: "Ключ сайта"
@@ -648,6 +650,20 @@ noteFavoritesCount: "Количество добавленного в избра
 pageLikesCount: "Количество понравившихся страниц"
 pageLikedCount: "Количество страниц, понравившихся другим"
 reversiCount: "Количество сыгранных игр в реверси"
+contact: "Как связаться"
+useSystemFont: "Использовать шрифт, предлагаемый системой"
+clips: "Памятки"
+experimentalFeatures: "Экспериментальные функции"
+developer: "Разработчик"
+_aboutMisskey:
+  about: "Misskey — программа с открытым исходным кодом, которую разрабатывает syuilo с 2014 года."
+  contributors: "Основные соавторы"
+  allContributors: "Все соавторы"
+  source: "Исходный код"
+  translation: "Перевод Misskey"
+  donate: "Пожертвование на Misskey"
+  morePatrons: "Большое спасибо и многим другим, кто принял участие в этом проекте! 🥰"
+  patrons: "Материальная поддержка"
 _nsfw:
  respect: "Скрывать содержимое не для всех"
  ignore: "Показывать содержимое не для всех"
@@ -958,6 +974,7 @@ _widgets:
  digitalClock: "Цифровые часы"
  federation: "Федерация"
  postForm: "Форма отправки"
+  slideshow: "Показ слайдов"
 _cw:
  hide: "Спрятать"
  show: "Показать еще"
@@ -1017,6 +1034,8 @@ _profile:
  metadataDescription: "Можно добавить до четырёх дополнительных граф в профиль."
  metadataLabel: "Метка"
  metadataContent: "Содержимое"
+  changeAvatar: "Поменять аватар"
+  changeBanner: "Поменять изображение в шапке"
 _exportOrImport:
  allNotes: "Все записи\n"
  followingList: "Подписки"
@@ -82,7 +82,7 @@ defaultNoteVisibility: "Видимість за замовчуванням"
 follow: "Підписка"
 followRequest: "Запит на підписку"
 followRequests: "Запити на підписку"
-unfollow: "Відписатися"
+unfollow: "Відписатись"
 followRequestPending: "Очікуючі запити на підписку"
 enterEmoji: "Введіть емодзі"
 renote: "Поширити"
@@ -95,7 +95,6 @@ sensitive: "NSFW"
 add: "Додати"
 reaction: "Реакції"
 reactionSettingDescription: "Виберіть свої улюблені реакції, які хочете закріпити в селекторі реакцій."
-reactionSettingDescription2: "Перетягніть для реорганізації, натисніть для видалення."
 rememberNoteVisibility: "Пам’ятати параметри видимісті"
 attachCancel: "Видалити вкладення"
 markAsSensitive: "Позначити як NSFW"
@@ -144,7 +143,7 @@ recipient: "Кому"
 annotation: "Коментар"
 federation: "Федіверс"
 instances: "Інстанс"
-registeredAt: "Приєднався(-лась)"
+registeredAt: "Приєднався(лась)"
 latestRequestSentAt: "Останній запит надіслано"
 latestRequestReceivedAt: "Останній запит прийнято"
 latestStatus: "Останній статус"
@@ -240,7 +239,7 @@ activity: "Активність"
 images: "Зображення"
 birthday: "День народження"
 yearsOld: "{age} років"
-registeredDate: "Приєднався(-лась)"
+registeredDate: "Приєднався(лась)"
 location: "Локація"
 theme: "Тема"
 themeForLightMode: "Світла тема"
@@ -314,6 +313,7 @@ basicInfo: "Основна інформація"
 pinnedUsers: "Закріплені користувачі"
 pinnedPages: "Закріплені сторінки"
 pinnedPagesDescription: "Введіть шляхи сторінок, які ви бажаєте закріпити на головній сторінці цього інстанса, розділені новими рядками."
+pinnedNotes: "Закріплена нотатка"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "Увімкнути hCaptcha"
 hcaptchaSiteKey: "Ключ сайту"
@@ -337,6 +337,10 @@ withReplies: "Включаючи відповіді"
 connectedTo: "Наступні акаунти під'єднані"
 notesAndReplies: "Нотатки та відповіді"
 withFiles: "Файли"
+silence: "Заглушити"
+silenceConfirm: "Ви впевнені, що хочете заглушити цього користувача?"
+unsilence: "Не глушити"
+unsilenceConfirm: "Ви впевнені, що хочете скасувати глушіння цього користувача?"
 popularUsers: "Популярні користувачі"
 recentlyUpdatedUsers: "Нещодавно активні користувачі"
 recentlyRegisteredUsers: "Нещодавно зареєстровані користувачі"
@@ -419,6 +423,7 @@ groupInvited: "Запрошення до групи"
 aboutX: "Про {x}"
 useOsNativeEmojis: "Використовувати емодзі ОС"
 youHaveNoGroups: "Немає груп"
+joinOrCreateGroup: "Отримуйте запрошення до груп або створюйте свої власні групи."
 noHistory: "Історія порожня"
 signinHistory: "Історія входів"
 disableAnimatedMfm: "Відключити анімації MFM"
@@ -447,6 +452,7 @@ numberOfDays: "Кількість днів"
 hideThisNote: "Сховати цю нотатку"
 showFeaturedNotesInTimeline: "Показувати популярні нотатки у стрічці"
 objectStorage: "Object Storage"
+useObjectStorage: "Використовувати object storage"
 objectStorageBaseUrl: "Base URL"
 objectStorageBucket: "Bucket"
 objectStoragePrefix: "Prefix"
@@ -479,6 +485,7 @@ sort: "Сортування"
 ascendingOrder: "За зростанням"
 descendingOrder: "За спаданням"
 scratchpad: "Чернетка"
+scratchpadDescription: "Scratchpad надає середовище для експериментів з AiScript. Ви можете писати, виконувати його і тестувати взаємодію з Misskey."
 output: "Вихід"
 script: "Скрипт"
 disablePagesScript: "Вимкнути AiScript на Сторінках"
@@ -527,13 +534,16 @@ notificationType: "Тип сповіщення"
 edit: "Редагувати"
 useStarForReactionFallback: "Використовувати ★ як запасний варіант, якщо емодзі реакції невідомий"
 emailConfig: "Налаштування email сервера"
+email: "E-mail"
+emailAddress: "E-mail адреса"
 smtpHost: "Хост"
 smtpPort: "Порт"
 smtpUser: "Ім'я користувача"
 smtpPass: "Пароль"
 testEmail: "Тестовий email"
-wordMute: "Ігнор слів"
+wordMute: "Блокування слів"
 makeActive: "Активувати"
+display: "Відображення"
 copy: "Скопіювати"
 metrics: "Показники"
 overview: "Огляд"
@@ -547,25 +557,83 @@ notificationSettingDesc: "Виберіть типи сповіщень для в
 useGlobalSetting: "Застосувати глобальнi параметри"
 other: "Інше"
 regenerateLoginToken: "Оновити Login Token"
+behavior: "Поведінка"
 sample: "Приклад"
+abuseReports: "Скарги"
 reportAbuse: "Поскаржитись"
 reportAbuseOf: "Поскаржитись на {name}"
 send: "Відправити"
 abuseMarkAsResolved: "Позначити скаргу як вирішену"
 openInNewTab: "Відкрити в новій вкладці"
+defaultNavigationBehaviour: "Поведінка навігації за замовчуванням"
+editTheseSettingsMayBreakAccount: "Зміна цих параметрів може призвести до пошкодження вашого акаунта."
+instanceTicker: "Мітка з назвою інстанса в нотатках"
 waitingFor: "Чекаємо на {x}"
 random: "Випадковий"
 system: "Система"
 switchUi: "Інтерфейс"
 desktop: "Десктоп"
 clip: "Добірка"
+createNew: "Створити новий"
+optional: "Необов'язково"
 public: "Публічний"
+i18nInfo: "Misskey перекладається на різні мови волонтерами. Ви можете допомогти: {link}"
+manageAccessTokens: "Керування токенами доступу"
+accountInfo: "Інформація про акаунт"
+notesCount: "Кількість нотаток"
+repliesCount: "Кількість надісланих відповідей"
+renotesCount: "Кількість поширень"
+repliedCount: "Кількість отриманих відповідей"
+renotedCount: "Кількість отриманих поширень"
+followingCount: "Кількість підписок"
+followersCount: "Кількість підписників"
+sentReactionsCount: "Кількість надісланих реакцій"
+receivedReactionsCount: "Кількість отриманих реакцій"
+pollVotesCount: "Кількість надісланих голосів"
+pollVotedCount: "Кількість отриманих голосів"
+yes: "Так"
+no: "Ні"
+driveFilesCount: "Кількість файлів на диску"
+driveUsage: "Використання місця на диску"
+noCrawle: "Заборонити індексацію"
+noCrawleDescription: "Просити пошукові системи не індексувати ваш профіль, нотатки, сторінки тощо."
+alwaysMarkSensitive: "Позначати NSFW за замовчуванням"
+loadRawImages: "Відображати вкладені зображення повністю замість ескізів"
+disableShowingAnimatedImages: "Не програвати анімовані зображення"
+notSet: "Не налаштовано"
+emailVerified: "Електронну пошту підтверджено."
+noteFavoritesCount: "Кількість улюблених нотаток"
+pageLikesCount: "Кількість отриманих вподобань сторінки"
+pageLikedCount: "Кількість вподобаних сторінок"
+reversiCount: "Кількість матчів \"Реверсі\""
+contact: "Контакт"
+useSystemFont: "Використовувати стандартний шрифт системи"
+clips: "Добірка"
+experimentalFeatures: "Експериментальні функції"
+developer: "Розробник"
+_aboutMisskey:
+  about: "Misskey - це програмне забезпечення з відкритим кодом, яке розробляє syuilo з 2014 року."
+  contributors: "Головні помічники"
+  allContributors: "Всі помічники"
+  source: "Вихідний код"
+  translation: "Перекладати Misskey"
+  donate: "Пожертвувати Misskey"
+  morePatrons: "Ми дуже цінуємо підтримку багатьох інших помічників, не перелічених тут. Дякуємо! 🥰"
+  patrons: "Підтримали"
+_nsfw:
+  respect: "Приховувати NSFW медіа"
+  ignore: "Не приховувати NSFW медіа"
+  force: "Приховувати всі медіа файли"
 _mfm:
  cheatSheet: " Довідка MFM"
  intro: "MFM це ексклюзивна мова розмітки тексту в Misskey, яку можна використовувати в багатьох місцях. Тут ви можете переглянути приклади її синтаксису."
+  dummy: "Misskey розширює світ Федіверсу"
  mention: "Згадка"
+  mentionDescription: "За допомогою знака \"@\" перед ім'ям можна згадати конкретного користувача."
  hashtag: "Хештеґ"
+  hashtagDescription: "За допомогою знака \"решітка\" перед словом задається хештег."
  url: "URL"
+  urlDescription: "Відображаються URL-адреси."
  link: "Посилання"
  linkDescription: "Окремі частини тексту можуть містити посилання"
  bold: "Жирний шрифт"
@@ -579,6 +647,7 @@ _mfm:
  blockCode: "Код (блок)"
  blockCodeDescription: "Показує кілька рядків тексту як блок програмного кода"
  inlineMath: "Формула (у рядку)"
+  inlineMathDescription: "Відображення математичних формул (KaTeX) у рядку"
  blockMath: "Формули (блок)"
  quote: "Цитата"
  emoji: "Кастомні емоджі"
@@ -602,6 +671,7 @@ _reversi:
  blackOrWhite: "Чорні / Білі"
  blackIs: "{name} грає чорними"
  rules: "Правила"
+  botSettings: "Параметри бота"
  thisGameIsStartedSoon: "Гра розпочнеться через кілька секунд"
  waitingForOther: "Чекаємо на хід суперника"
  waitingForMe: "Чекаємо на ваш хід"
@@ -636,9 +706,19 @@ _channel:
  setBanner: "Встановити банер"
  removeBanner: "Видалити банер"
  featured: "Тренди"
+  usersCount: "{n} учасників"
+  notesCount: "{n} дописів"
 _sidebar:
+  full: "Повна"
  icon: "Аватар"
+  hide: "Сховати"
+_wordMute:
+  soft: "М'яко"
+  hard: "Жорстко"
+  mutedNotes: "Заблоковані нотатки"
 _theme:
+  defaultValue: "Значення за замовчуванням"
+  func: "Функції"
  keys:
    accent: "Акцент"
    bg: "Фон"
@@ -682,6 +762,15 @@ _time:
 _tutorial:
  title: "Як користуватись Misskey"
  step1_1: "Ласкаво просимо!"
+  step1_3: "Наразі ваша стрічка порожня, оскільки ви ще не написали жодної нотатки і не підписані на інших."
+  step3_2: "Наступним кроком є написання нотатки. Це можна зробити, натиснувши зображення олівця на екрані."
+_2fa:
+  registerKey: "Зареєструвати новий ключ безпеки"
+_permissions:
+  "write:account": "Змінити дані акаунту"
+  "read:blocks": "Переглянути список заблокованих"
+  "write:blocks": "Редагувати список заблокованих"
+  "read:drive": "Переглянути вміст Диска"
 _antennaSources:
  homeTimeline: "Нотатки тих, на кого ви підписані"
 _widgets:
@@ -689,6 +778,7 @@ _widgets:
  timeline: "Стрічка"
  activity: "Активність"
  federation: "Федіверс"
+  postForm: "Створення нотатки"
 _cw:
  show: "Показати більше"
 _poll:
@@ -710,52 +800,355 @@ _exportOrImport:
 _timelines:
  home: "Домівка"
 _rooms:
+  chooseImage: "Виберіть зображення"
+  roomType: "Тип кімнати"
+  carpetColor: "Колір килима"
  _roomType:
-    default: "За умовчанням"
+    default: "За замовчуванням"
+    washitsu: "В японському стилі"
  _furnitures:
+    milk: "Пакет молока"
+    bed: "Ліжко"
+    low-table: "Журнальний стіл"
+    desk: "Письмовий стіл"
+    chair: "Стілець"
+    chair2: "Стілець 2"
+    fan: "Вентилятор"
+    pc: "Комп’ютер"
+    plant: "Кімнатна рослина"
+    plant2: "Кімнатна рослина 2"
+    eraser: "Ластик"
+    pencil: "Олівець"
+    pudding: "Пудинг"
+    cardboard-box: "Картонна коробка"
+    cardboard-box2: "Картонна коробка 2"
+    cardboard-box3: "Картонна коробка 3"
+    book: "Книга"
+    book2: "Книга 2"
+    piano: "Піаніно"
+    server: "Сервер"
+    moon: "Місяць"
+    corkboard: "Коркова дошка"
+    mousepad: "Килимок для миші"
    monitor: "Монітор"
+    keyboard: "Клавіатура"
+    carpet-stripe: "Смугастий килим"
+    mat: "Мат"
+    doll-ai: "Лялька Аі-тян"
+    banknote: "Пачка грошей"
 _pages:
+  newPage: "Створити сторінку"
+  editPage: "Редагувати сторінку"
+  readPage: "Перегляд вихідного коду"
+  created: "Сторінка успішно створена."
+  updated: "Сторінка успішно оновлена."
+  deleted: "Сторінку видалено"
+  pageSetting: "Налаштування сторінки"
+  nameAlreadyExists: "Вказана адреса сторінки вже існує."
+  invalidNameTitle: "Вказана адреса сторінки неприпустима."
+  invalidNameText: "Переконайтеся, що не залишили порожнім."
+  editThisPage: "Редагувати цю сторінку"
+  viewSource: "Переглянути вихідний код"
+  viewPage: "Переглянути свої сторінки"
+  like: "Вподобати"
+  unlike: "Не вподобати"
+  my: "Мої сторінки"
+  liked: "Вподобані сторінки"
  featured: "Популярні"
+  inspector: "Інспектор"
+  contents: "Вміст"
+  variables: "Змінні"
+  title: "Заголовок"
+  url: "URL сторінки"
+  summary: "Короткий зміст"
+  alignCenter: "Рівняти елементи по центру"
+  hideTitleWhenPinned: "Приховати заголовок сторінки при закріпленні в профілі"
+  font: "Шрифт"
+  fontSerif: "Serif"
+  fontSansSerif: "Sans serif"
+  eyeCatchingImageSet: "Встановити привабливе зображення"
+  eyeCatchingImageRemove: "Видалити привабливе зображення"
+  chooseBlock: "Додати блок"
+  selectType: "Виберіть тип"
+  enterVariableName: "Введіть назву для змінної"
+  contentBlocks: "Контент"
+  inputBlocks: "Ввід"
+  specialBlocks: "Особливе"
  blocks:
+    text: "Текст"
+    textarea: "Текстова область"
+    section: "Розділ"
    image: "Зображення"
+    button: "Кнопка"
+    if: "Якщо"
+    _if:
+      variable: "Змінні"
+    post: "Створення нотатки"
+    _post:
+      text: "Вміст"
+    textInput: "Введення тексту"
+    _textInput:
+      name: "Ім'я змінної"
+      text: "Назва"
+      default: "Значення за замовчуванням"
+    textareaInput: "Багаторядкове введення тексту"
+    _textareaInput:
+      name: "Ім'я змінної"
+      text: "Назва"
+      default: "Значення за замовчуванням"
+    numberInput: "Числове введення"
+    _numberInput:
+      name: "Ім'я змінної"
+      text: "Назва"
+      default: "Значення за замовчуванням"
+    _canvas:
+      width: "Ширина"
+      height: "Висота"
+    note: "Вбудована нотатка"
+    _note:
+      id: "Ідентифікатор нотатки"
+      idDescription: "Також можна вказати посилання на нотатку"
+      detailed: "Детальний вигляд"
+    switch: "Перемикач"
+    _switch:
+      name: "Ім'я змінної"
+      text: "Назва"
+      default: "Значення за замовчуванням"
+    counter: "Лічильник"
+    _counter:
+      name: "Ім'я змінної"
+      text: "Назва"
+      inc: "Збільшити на"
+    _button:
+      text: "Напис"
+      _action:
+        _dialog:
+          content: "Вміст"
+        resetRandom: "Скидання генератора випадковості"
+        pushEvent: "Надіслати подію"
+        _pushEvent:
+          event: "Назві події"
+          message: "Повідомлення для відображення при активації"
+          variable: "Змінна для надсилання"
+          no-variable: "Відсутньо"
+        callAiScript: "Виклик AiScript"
+        _callAiScript:
+          functionName: "Ім'я функції"
+    radioButton: "Вибір"
+    _radioButton:
+      name: "Ім'я змінної"
+      title: "Напис"
+      values: "Варіанти, розділені розривами рядків"
+      default: "Значення за замовчуванням"
  script:
    categories:
+      flow: "Керування потоком"
+      logical: "Логічні операції"
+      operation: "Обчислення"
+      comparison: "Порівняння"
+      random: "Випадковість"
+      value: "Значення"
+      fn: "Функції"
+      text: "Дії з текстом"
+      convert: "Перетворення"
      list: "Списки"
    blocks:
+      text: "Текст"
+      multiLineText: "Текст (багаторядковий)"
+      textList: "Текстовий список"
+      strLen: "Довжина тексту"
+      _strLen:
+        arg1: "Текст"
+      _strPick:
+        arg1: "Текст"
+      strReplace: "Заміна тексту"
+      _strReplace:
+        arg1: "Текст"
+        arg2: "Текст, який потрібно замінити"
+        arg3: "Заміняти на"
+      strReverse: "Перевернути текст"
+      _strReverse:
+        arg1: "Текст"
+      join: "Конкатенація тексту"
      _join:
        arg1: "Списки"
+        arg2: "Розділювач"
+      add: "Додати"
+      _add:
+        arg1: "A"
+        arg2: "B"
+      subtract: "Відняти"
+      _subtract:
+        arg1: "A"
+        arg2: "B"
+      multiply: "Помножити"
+      _multiply:
+        arg1: "A"
+        arg2: "B"
+      divide: "Поділити"
+      _divide:
+        arg1: "A"
+        arg2: "B"
+      mod: "Остача"
+      _mod:
+        arg1: "A"
+        arg2: "B"
+      round: "Десяткове округлення"
+      _round:
+        arg1: "Число"
+      eq: "A дорівнює B"
+      _eq:
+        arg1: "A"
+        arg2: "B"
+      notEq: "A не дорівнює B"
+      _notEq:
+        arg1: "A"
+        arg2: "B"
+      and: "А І Б"
+      _and:
+        arg1: "A"
+        arg2: "B"
+      or: "A АБО B"
+      _or:
+        arg1: "A"
+        arg2: "B"
+      lt: "< A менше, ніж B"
+      _lt:
+        arg1: "A"
+        arg2: "B"
+      gt: "> A більше, ніж B"
+      _gt:
+        arg1: "A"
+        arg2: "B"
+      ltEq: "<= A менше або дорівнює B"
+      _ltEq:
+        arg1: "A"
+        arg2: "B"
+      gtEq: ">= A більше або дорівнює B"
+      _gtEq:
+        arg1: "A"
+        arg2: "B"
+      if: "Умова"
+      _if:
+        arg1: "Якщо"
+        arg2: "Якщо так"
+        arg3: "Якщо ні"
+      not: "НЕ"
+      _not:
+        arg1: "НЕ"
+      random: "Випадково"
+      _random:
+        arg1: "Імовірність"
+      rannum: "Випадкове число"
+      _rannum:
+        arg1: "Мінімальне значення"
+        arg2: "Максимальне значення"
+      randomPick: "Випадковий вибір зі списку"
      _randomPick:
        arg1: "Списки"
+      dailyRandom: "Випадково (триває добу)"
+      _dailyRandom:
+        arg1: "Імовірність"
+      dailyRannum: "Випадкове число (триває добу)"
+      _dailyRannum:
+        arg1: "Мінімальне значення"
+        arg2: "Максимальне значення"
+      dailyRandomPick: "Випадково вибрати зі списку (триває добу)"
      _dailyRandomPick:
        arg1: "Списки"
+      seedRandom: "Випадковість (з насінням)"
+      _seedRandom:
+        arg1: "Насіння"
+        arg2: "Імовірність"
+      seedRannum: "Випадкове число (з насінням)"
+      _seedRannum:
+        arg1: "Насіння"
+        arg2: "Мінімальне значення"
+        arg3: "Максимальне значення"
+      seedRandomPick: "Випадково вибрати зі списку (з насінням)"
      _seedRandomPick:
+        arg1: "Насіння"
        arg2: "Списки"
+      DRPWPM: "Випадково вибрати зі зваженого списку (триває добу)"
+      _DRPWPM:
+        arg1: "Текстовий список"
+      pick: "Вибір зі списку"
      _pick:
        arg1: "Списки"
+        arg2: "Позиція"
+      listLen: "Отримати довжину списку"
      _listLen:
        arg1: "Списки"
+      number: "Число"
+      stringToNumber: "Текст на число"
+      _stringToNumber:
+        arg1: "Текст"
+      numberToString: "Число на текст"
+      _numberToString:
+        arg1: "Число"
+      splitStrByLine: "Розбиття тексту на рядки"
+      _splitStrByLine:
+        arg1: "Текст"
+      ref: "Змінні"
+      aiScriptVar: "Змінна AiScript"
+      fn: "Функції"
      _fn:
-        arg1: "Вихід"
+        arg1: "Вивід"
+      for: "Повторення"
+      _for:
+        arg1: "Кількість повторень"
+        arg2: "Дія"
    types:
+      string: "Текст"
+      number: "Число"
+      boolean: "Прапорець"
      array: "Списки"
+      stringArray: "Текстовий список"
 _relayStatus:
  requesting: "Очікує затвердження"
  accepted: "Затверджено"
  rejected: "Відхилено"
 _notification:
-  youRenoted: "{name} поширив(ла) вашу нотатку"
+  fileUploaded: "Файл успішно завантажено"
+  youGotMention: "{name} згадує вас"
+  youGotReply: "{name} відповідає"
+  youGotQuote: "{name} цитує вас"
+  youRenoted: "{name} поширює"
+  youGotPoll: "{name} бере участь в опитуванні"
+  youGotMessagingMessageFromUser: "Повідомлення від {name}"
+  youGotMessagingMessageFromGroup: "Нове повідомлення в групі {name}"
  youWereFollowed: "Новий підписник"
+  youReceivedFollowRequest: "Ви отримали запит на підписку"
+  yourFollowRequestAccepted: "Запит на підписку прийнято"
  youWereInvitedToGroup: "Запрошення до групи"
  _types:
+    all: "Все"
    follow: "Підписки"
    mention: "Згадка"
-    renote: "Поширити"
-    quote: "Цитата"
+    reply: "Відповіді"
+    renote: "Поширення"
+    quote: "Цитування"
    reaction: "Реакції"
+    pollVote: "Опитування"
+    receiveFollowRequest: "Запити на підписку"
+    followRequestAccepted: "Прийняті підписки"
+    groupInvited: "Запрошення до груп"
+    app: "Сповіщення від додатків"
 _deck:
+  alwaysShowMainColumn: "Завжди показувати головну колонку"
+  columnAlign: "Вирівняти стовпці"
+  addColumn: "Додати стовпець"
+  swapLeft: "Пересунути ліворуч"
+  swapRight: "Пересунути праворуч"
+  swapUp: "Пересунути вгору"
+  swapDown: "Пересунути вниз"
+  stackLeft: "У стовпчик вліво"
+  popRight: "Витягнути вправо"
  _columns:
+    widgets: "Віджети"
    notifications: "Сповіщення"
    tl: "Стрічка"
    antenna: "Антени"
    list: "Списки"
    mentions: "Згадки"
+    direct: "Особисте"
@@ -95,7 +95,7 @@ sensitive: "阅读注意"
 add: "添加"
 reaction: "回应"
 reactionSettingDescription: "选择您想要置顶的回应。"
-reactionSettingDescription2: "通过拖动来重新排列。单击即可删除。"
+reactionSettingDescription2: "拖动重新排序，单击删除，点击 + 添加。"
 rememberNoteVisibility: "记录公开范围"
 attachCancel: "删除附件"
 markAsSensitive: "阅读注意"
@@ -320,6 +320,8 @@ pinnedUsers: "置顶用户"
 pinnedUsersDescription: "在「发现」页面中使用换行标记想要置顶的用户。"
 pinnedPages: "固定页面"
 pinnedPagesDescription: "输入您要固定到实例首页的页面路径，以换行符分隔。"
+pinnedClipId: "置顶的片段ID"
+pinnedNotes: "已置顶的帖子"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "启用 hCaptcha"
 hcaptchaSiteKey: "网站密钥"
@@ -617,7 +619,7 @@ createNew: "新建"
 optional: "可选"
 createNewClip: "新建片段"
 public: "公开"
-i18nInfo: "Misskey已经被志愿者们翻译到了各种语言。如果你也有兴趣，可以来{link}帮助翻译。"
+i18nInfo: "Misskey已经被志愿者们翻译到了各种语言。如果你也有兴趣，可以通过{link}帮助翻译。"
 manageAccessTokens: "管理 Access Tokens"
 accountInfo: "帐户信息"
 notesCount: "贴文数量"
@@ -648,6 +650,20 @@ noteFavoritesCount: "收藏的帖子数"
 pageLikesCount: "页面点赞次数"
 pageLikedCount: "页面被点赞次数"
 reversiCount: "黑白棋对战次数"
+contact: "联系人"
+useSystemFont: "使用系统默认字体"
+clips: "片段"
+experimentalFeatures: "实验性功能"
+developer: "开发者"
+_aboutMisskey:
+  about: "Misskey是由syuilo于2014年开发的开源软件。"
+  contributors: "主要贡献者"
+  allContributors: "全体贡献者"
+  source: "源代码"
+  translation: "翻译Misskey"
+  donate: "赞助Misskey"
+  morePatrons: "还有很多其他的人也在支持我们，非常感谢🥰"
+  patrons: "支持者"
 _nsfw:
  respect: "隐藏NSFW内容"
  ignore: "不隐藏NSFW内容"
@@ -845,6 +861,8 @@ _sfx:
  chatBg: "聊天背景"
  antenna: "天线接收"
  channel: "频道通知"
+  reversiPutBlack: "黑白棋：黑方下子时"
+  reversiPutWhite: "黑白棋：白方下子时"
 _ago:
  unknown: "未知"
  future: "未来"
@@ -956,6 +974,7 @@ _widgets:
  digitalClock: "数字时钟"
  federation: "联邦宇宙"
  postForm: "投稿窗口"
+  slideshow: "幻灯片展示"
 _cw:
  hide: "隐藏"
  show: "查看更多"
@@ -1015,6 +1034,8 @@ _profile:
  metadataDescription: "最多可以在个人资料中以表格形式显示四条其他信息。"
  metadataLabel: "标签"
  metadataContent: "内容"
+  changeAvatar: "修改头像"
+  changeBanner: "修改横幅"
 _exportOrImport:
  allNotes: "所有帖子"
  followingList: "关注中"
@@ -312,6 +312,7 @@ bannerUrl: "橫幅圖片URL"
 basicInfo: "基本資訊"
 pinnedUsers: "置頂用戶"
 pinnedUsersDescription: "在「發現」頁面中使用換行標記想要置頂的用戶。"
+pinnedNotes: "已置頂的貼文"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "啟用 hCaptcha"
 hcaptchaSiteKey: "網站金鑰"
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class instancePinnedClip1607151207216 implements MigrationInterface {
+    name = 'instancePinnedClip1607151207216'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "pinnedClipId" character varying(32)`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "pinnedClipId"`);
+    }
+
+}
@@ -0,0 +1,18 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class isExplorable1607353487793 implements MigrationInterface {
+    name = 'isExplorable1607353487793'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user" ADD "isExplorable" boolean NOT NULL DEFAULT true`);
+        await queryRunner.query(`COMMENT ON COLUMN "user"."isExplorable" IS 'Whether the User is explorable.'`);
+        await queryRunner.query(`CREATE INDEX "IDX_d5a1b83c7cab66f167e6888188" ON "user" ("isExplorable") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "IDX_d5a1b83c7cab66f167e6888188"`);
+        await queryRunner.query(`COMMENT ON COLUMN "user"."isExplorable" IS 'Whether the User is explorable.'`);
+        await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "isExplorable"`);
+    }
+
+}
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.60.1",
+	"version": "12.63.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -35,8 +35,8 @@
 		"lodash": "^4.17.20"
 	},
 	"dependencies": {
-		"@babel/plugin-transform-runtime": "7.11.0",
-		"@elastic/elasticsearch": "7.8.0",
+		"@babel/plugin-transform-runtime": "7.12.1",
+		"@elastic/elasticsearch": "7.10.0",
 		"@fortawesome/fontawesome-svg-core": "1.2.32",
 		"@fortawesome/free-brands-svg-icons": "5.15.1",
 		"@fortawesome/free-regular-svg-icons": "5.15.1",
@@ -48,7 +48,7 @@
 		"@sinonjs/fake-timers": "6.0.1",
 		"@syuilo/aiscript": "0.11.1",
 		"@types/bcryptjs": "2.4.2",
-		"@types/bull": "3.14.0",
+		"@types/bull": "3.14.4",
 		"@types/cbor": "5.0.1",
 		"@types/dateformat": "3.0.1",
 		"@types/double-ended-queue": "2.1.1",
@@ -59,10 +59,10 @@
 		"@types/gulp-replace": "0.0.31",
 		"@types/is-url": "1.2.28",
 		"@types/js-yaml": "3.12.5",
-		"@types/jsdom": "16.2.3",
+		"@types/jsdom": "16.2.5",
 		"@types/jsonld": "1.5.1",
 		"@types/katex": "0.11.0",
-		"@types/koa": "2.11.3",
+		"@types/koa": "2.11.6",
 		"@types/koa-bodyparser": "4.3.0",
 		"@types/koa-cors": "0.0.0",
 		"@types/koa-favicon": "2.0.19",
@@ -70,68 +70,69 @@
 		"@types/koa-mount": "4.0.0",
 		"@types/koa-send": "4.1.2",
 		"@types/koa-views": "2.0.4",
-		"@types/koa__cors": "3.0.1",
-		"@types/koa__multer": "2.0.1",
+		"@types/koa__cors": "3.0.2",
+		"@types/koa__multer": "2.0.2",
 		"@types/koa__router": "8.0.2",
-		"@types/markdown-it": "10.0.1",
+		"@types/markdown-it": "10.0.3",
+		"@types/matter-js": "0.14.8",
 		"@types/mocha": "7.0.2",
-		"@types/node": "14.0.22",
+		"@types/node": "14.14.11",
 		"@types/node-fetch": "2.5.7",
 		"@types/nodemailer": "6.4.0",
 		"@types/nprogress": "0.2.0",
 		"@types/oauth": "0.9.1",
 		"@types/parse5": "5.0.3",
-		"@types/parsimmon": "1.10.2",
+		"@types/parsimmon": "1.10.6",
 		"@types/portscanner": "2.1.0",
 		"@types/pug": "2.0.4",
-		"@types/qrcode": "1.3.4",
+		"@types/qrcode": "1.3.5",
 		"@types/random-seed": "0.3.3",
-		"@types/ratelimiter": "2.1.28",
-		"@types/redis": "2.8.25",
-		"@types/rename": "1.0.1",
+		"@types/ratelimiter": "3.4.0",
+		"@types/redis": "2.8.28",
+		"@types/rename": "1.0.2",
 		"@types/request-stats": "3.0.0",
 		"@types/rimraf": "3.0.0",
 		"@types/seedrandom": "2.4.28",
-		"@types/sharp": "0.26.0",
+		"@types/sharp": "0.26.1",
 		"@types/sinonjs__fake-timers": "6.0.1",
 		"@types/speakeasy": "2.0.5",
 		"@types/tinycolor2": "1.4.2",
 		"@types/tmp": "0.2.0",
 		"@types/uuid": "8.3.0",
 		"@types/web-push": "3.3.0",
-		"@types/webpack": "4.41.24",
+		"@types/webpack": "4.41.25",
 		"@types/webpack-stream": "3.2.11",
 		"@types/websocket": "1.0.1",
-		"@types/ws": "7.2.7",
+		"@types/ws": "7.4.0",
 		"@typescript-eslint/parser": "4.6.1",
 		"@vue/compiler-sfc": "3.0.3",
 		"abort-controller": "3.0.0",
-		"apexcharts": "3.22.1",
+		"apexcharts": "3.22.3",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.787.0",
+		"aws-sdk": "2.806.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "1.1.3",
-		"bull": "3.18.1",
+		"bull": "3.20.0",
 		"cafy": "15.2.1",
 		"cbor": "5.1.0",
 		"chalk": "4.1.0",
 		"chart.js": "2.9.4",
-		"cli-highlight": "2.1.4",
+		"cli-highlight": "2.1.9",
 		"commander": "4.1.1",
 		"content-disposition": "0.5.3",
-		"core-js": "3.7.0",
+		"core-js": "3.8.1",
 		"crc-32": "1.2.0",
 		"css-loader": "5.0.1",
 		"cssnano": "4.1.10",
-		"dateformat": "3.0.3",
+		"dateformat": "4.3.1",
 		"deep-entries": "3.1.0",
 		"diskusage": "1.1.3",
 		"double-ended-queue": "2.1.0-0",
 		"escape-regexp": "0.0.1",
-		"eslint": "7.12.1",
-		"eslint-plugin-vue": "7.1.0",
+		"eslint": "7.15.0",
+		"eslint-plugin-vue": "7.2.0",
 		"eventemitter3": "4.0.7",
 		"feed": "4.2.1",
 		"fibers": "5.0.0",
@@ -174,23 +175,24 @@
 		"langmap": "0.0.16",
 		"lookup-dns-cache": "2.1.0",
 		"markdown-it": "11.0.1",
-		"markdown-it-anchor": "6.0.0",
+		"markdown-it-anchor": "6.0.1",
+		"matter-js": "0.14.2",
 		"mocha": "8.2.1",
 		"moji": "0.5.1",
 		"ms": "2.1.2",
 		"multer": "1.4.2",
 		"nested-property": "4.0.0",
 		"node-fetch": "2.6.1",
-		"nodemailer": "6.4.15",
+		"nodemailer": "6.4.16",
 		"object-assign-deep": "0.4.0",
 		"os-utils": "0.0.14",
 		"p-cancelable": "2.0.0",
 		"parse5": "6.0.1",
 		"parsimmon": "1.16.0",
-		"pg": "8.4.2",
+		"pg": "8.5.1",
 		"portscanner": "2.2.0",
-		"postcss": "8.1.6",
-		"postcss-loader": "4.0.4",
+		"postcss": "8.2.1",
+		"postcss-loader": "4.1.0",
 		"prismjs": "1.22.0",
 		"probe-image-size": "6.0.0",
 		"promise-limit": "2.7.0",
@@ -215,7 +217,7 @@
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
 		"sass": "1.29.0",
-		"sass-loader": "10.0.5",
+		"sass-loader": "10.1.0",
 		"seedrandom": "3.0.5",
 		"sharp": "0.26.2",
 		"speakeasy": "2.0.0",
@@ -223,43 +225,44 @@
 		"style-loader": "2.0.0",
 		"summaly": "2.4.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "4.28.1",
+		"systeminformation": "4.31.0",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.117.1",
 		"tinycolor2": "1.4.2",
 		"tmp": "0.2.1",
-		"ts-loader": "8.0.9",
-		"ts-node": "9.0.0",
+		"ts-loader": "8.0.11",
+		"ts-node": "9.1.0",
 		"tslint": "6.1.3",
 		"tslint-sonarts": "1.9.0",
 		"typeorm": "0.2.29",
-		"typescript": "4.0.5",
+		"typescript": "4.1.2",
 		"ulid": "2.3.0",
 		"url-loader": "4.1.1",
 		"uuid": "8.3.1",
 		"v-debounce": "0.1.2",
+		"vanilla-tilt": "1.7.0",
 		"vue": "3.0.3",
 		"vue-color": "2.7.1",
-		"vue-draggable-next": "1.0.8",
 		"vue-i18n": "9.0.0-beta.7",
 		"vue-json-pretty": "1.7.1",
 		"vue-loader": "16.0.0",
-		"vue-prism-editor": "1.2.2",
-		"vue-router": "4.0.0-rc.2",
+		"vue-prism-editor": "2.0.0-alpha.2",
+		"vue-router": "4.0.1",
 		"vue-style-loader": "4.1.2",
-		"vuex": "4.0.0-rc.1",
+		"vuedraggable": "4.0.1",
+		"vuex": "4.0.0-rc.2",
 		"vuex-persistedstate": "3.1.0",
 		"web-push": "3.4.4",
-		"webpack": "5.8.0",
+		"webpack": "5.10.0",
 		"webpack-cli": "4.2.0",
-		"websocket": "1.0.32",
-		"ws": "7.3.1",
+		"websocket": "1.0.33",
+		"ws": "7.4.1",
 		"xev": "2.0.1"
 	},
 	"devDependencies": {
-		"@types/chai": "4.2.11",
-		"@types/fluent-ffmpeg": "2.1.14",
+		"@types/chai": "4.2.14",
+		"@types/fluent-ffmpeg": "2.1.16",
 		"chai": "4.2.0",
 		"cross-env": "7.0.2"
 	}
@@ -1,5 +1,5 @@
 declare module '*.vue' {
-	import { defineComponent } from 'vue';
-	const component: ReturnType<typeof defineComponent>;
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
 	export default component;
 }
@@ -1,9 +1,8 @@
 <template>
 <button class="kpoogebi _button"
-	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full }"
+	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
 	@click="onClick"
 	:disabled="wait"
-	v-if="isFollowing != null"
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
@@ -44,6 +43,11 @@ export default defineComponent({
 			required: false,
 			default: false,
 		},
+		large: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},

 	data() {
@@ -149,6 +153,12 @@ export default defineComponent({
 		font-size: 14px;
 	}

+	&.large {
+		font-size: 16px;
+		height: 38px;
+		padding: 0 12px 0 16px;
+	}
+
 	&:not(.full) {
 		width: 31px;
 	}
@@ -3,12 +3,18 @@
 	<a class="main _button _formPanel _formClickable" :href="to" target="_blank" v-if="external">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
-		<Fa :icon="faExternalLinkAlt" class="right"/>
+		<span class="right">
+			<span class="text"><slot name="suffix"></slot></span>
+			<Fa :icon="faExternalLinkAlt" class="icon"/>
+		</span>
 	</a>
 	<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" v-else>
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
-		<Fa :icon="faChevronRight" class="right"/>
+		<span class="right">
+			<span class="text"><slot name="suffix"></slot></span>
+			<Fa :icon="faChevronRight" class="icon"/>
+		</span>
 	</MkA>
 </div>
 </template>
@@ -84,6 +90,10 @@ export default defineComponent({
 		> .right {
 			margin-left: auto;
 			opacity: 0.7;
+
+			> .text:not(:empty) {
+				margin-right: 0.75em;
+			}
 		}
 	}
 }
@@ -11,7 +11,7 @@
 import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
-import { acct, userPage } from '../filters/user';
+import { acct, userPage } from '@/filters/user';

 export default defineComponent({
 	props: {
@@ -8,7 +8,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { twemojiSvgBase } from '../../misc/twemoji-base';
+import { twemojiSvgBase } from '@/../misc/twemoji-base';

 export default defineComponent({
 	props: {
@@ -11,7 +11,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import MkButton from './ui/button.vue';
+import MkButton from '@/components/ui/button.vue';

 export default defineComponent({
 	components: {
@@ -4,7 +4,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import MfmCore from './mfm';
+import MfmCore from '@/components/mfm';

 export default defineComponent({
 	components: {
@@ -1,16 +1,16 @@
 import { App } from 'vue';

-import mfm from './misskey-flavored-markdown.vue';
-import a from './ui/a.vue';
-import acct from './acct.vue';
-import avatar from './avatar.vue';
-import emoji from './emoji.vue';
-import userName from './user-name.vue';
-import ellipsis from './ellipsis.vue';
-import time from './time.vue';
-import url from './url.vue';
-import loading from './loading.vue';
-import error from './error.vue';
+import mfm from './global/misskey-flavored-markdown.vue';
+import a from './global/a.vue';
+import acct from './global/acct.vue';
+import avatar from './global/avatar.vue';
+import emoji from './global/emoji.vue';
+import userName from './global/user-name.vue';
+import ellipsis from './global/ellipsis.vue';
+import time from './global/time.vue';
+import url from './global/url.vue';
+import loading from './global/loading.vue';
+import error from './global/error.vue';

 export default function(app: App) {
 	app.component('Mfm', mfm);
@@ -1,15 +1,15 @@
 import { VNode, defineComponent, h } from 'vue';
-import { MfmForest } from '../../mfm/prelude';
-import { parse, parsePlain } from '../../mfm/parse';
-import MkUrl from './url.vue';
-import MkLink from './link.vue';
-import MkMention from './mention.vue';
-import MkEmoji from './emoji.vue';
-import { concat } from '../../prelude/array';
-import MkFormula from './formula.vue';
-import MkCode from './code.vue';
-import MkGoogle from './google.vue';
-import MkA from './ui/a.vue';
+import { MfmForest } from '@/../mfm/prelude';
+import { parse, parsePlain } from '@/../mfm/parse';
+import MkUrl from '@/components/global/url.vue';
+import MkLink from '@/components/link.vue';
+import MkMention from '@/components/mention.vue';
+import MkEmoji from '@/components/global/emoji.vue';
+import { concat } from '@/../prelude/array';
+import MkFormula from '@/components/formula.vue';
+import MkCode from '@/components/code.vue';
+import MkGoogle from '@/components/google.vue';
+import MkA from '@/components/global/a.vue';
 import { host } from '@/config';

 export default defineComponent({
@@ -490,8 +490,25 @@ export default defineComponent({
 		},

 		renoteDirectly() {
-			os.api('notes/create', {
+			os.apiWithDialog('notes/create', {
 				renoteId: this.appearNote.id
+			}, undefined, (res: any) => {
+				os.dialog({
+					type: 'success',
+					text: this.$t('renoted'),
+				});
+			}, (e: Error) => {
+				if (e.id === 'b5c90186-4ab0-49c8-9bba-a1f76c282ba4') {
+					os.dialog({
+						type: 'error',
+						text: this.$t('cantRenote'),
+					});
+				} else if (e.id === 'fd4cc33e-2a37-48dd-99cc-9b806eb2031a') {
+					os.dialog({
+						type: 'error',
+						text: this.$t('cantReRenote'),
+					});
+				}
 			});
 		},

@@ -533,6 +550,23 @@ export default defineComponent({
 			pleaseLogin();
 			os.apiWithDialog('notes/favorites/create', {
 				noteId: this.appearNote.id
+			}, undefined, (res: any) => {
+				os.dialog({
+					type: 'success',
+					text: this.$t('favorited'),
+				});
+			}, (e: Error) => {
+				if (e.id === 'a402c12b-34dd-41d2-97d8-4d2ffd96a1a6') {
+					os.dialog({
+						type: 'error',
+						text: this.$t('alreadyFavorited'),
+					});
+				} else if (e.id === '6dd26674-e060-4816-909a-45ba3f4da458') {
+					os.dialog({
+						type: 'error',
+						text: this.$t('cantFavorite'),
+					});
+				}
 			});
 		},

@@ -1,12 +1,14 @@
 <template>
 <div class="skeikyzd" v-show="files.length != 0">
-	<XDraggable class="files" :list="files" animation="150" delay="100" delay-on-touch-only="true">
-		<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
-			<MkDriveFileThumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
-			<div class="sensitive" v-if="file.isSensitive">
-				<Fa class="icon" :icon="faExclamationTriangle"/>
+	<XDraggable class="files" v-model="_files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
+		<template #item="{element}">
+			<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
+				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
+				<div class="sensitive" v-if="element.isSensitive">
+					<Fa class="icon" :icon="faExclamationTriangle"/>
+				</div>
 			</div>
-		</div>
+		</template>
 	</XDraggable>
 	<p class="remain">{{ 4 - files.length }}/4</p>
 </div>
@@ -21,7 +23,7 @@ import * as os from '@/os';

 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		MkDriveFileThumbnail
 	},

@@ -36,7 +38,7 @@ export default defineComponent({
 		}
 	},

-	emits: ['updated', 'detach'],
+	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],

 	data() {
 		return {
@@ -46,6 +48,17 @@ export default defineComponent({
 		};
 	},

+	computed: {
+		_files: {
+			get() {
+				return this.files;
+			},
+			set(value) {
+				this.$emit('updated', value);
+			}
+		}
+	},
+
 	methods: {
 		detachMedia(id) {
 			if (this.detachMediaFn) {
@@ -59,8 +72,7 @@ export default defineComponent({
 				fileId: file.id,
 				isSensitive: !file.isSensitive
 			}).then(() => {
-				file.isSensitive = !file.isSensitive;
-				this.$emit('updated', file);
+				this.$emit('changeSensitive', file, !file.isSensitive);
 			});
 		},
 		async rename(file) {
@@ -76,8 +88,8 @@ export default defineComponent({
 				fileId: file.id,
 				name: result
 			}).then(() => {
+				this.$emit('changeName', file, result);
 				file.name = result;
-				this.$emit('updated', file);
 			});
 		},
 		showFileMenu(file, ev: MouseEvent) {
@@ -36,7 +36,7 @@
 		</div>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" @keydown="onKeydown">
 		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste"></textarea>
-		<XPostFormAttaches class="attaches" :files="files" @updated="updateMedia" @detach="detachMedia"/>
+		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
 			<button class="_button" @click="chooseFileFrom" v-tooltip="$t('attachFile')"><Fa :icon="faPhotoVideo"/></button>
@@ -359,12 +359,20 @@ export default defineComponent({
 			});
 		},

-		detachMedia(id) {
+		detachFile(id) {
 			this.files = this.files.filter(x => x.id != id);
 		},

-		updateMedia(file) {
-			this.files[this.files.findIndex(x => x.id === file.id)] = file;
+		updateFiles(files) {
+			this.files = files;
+		},
+
+		updateFileSensitive(file, sensitive) {
+			this.files[this.files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+		},
+
+		updateFileName(file, name) {
+			this.files[this.files.findIndex(x => x.id === file.id)].name = name;
 		},

 		upload(file: File, name?: string) {
@@ -26,6 +26,8 @@ export default defineComponent({
 .jmgmzlwq {
 	font-size: 0.8em;
 	padding: 16px;
+	background: var(--infoWarnBg);
+	color: var(--infoWarnFg);

 	> a {
 		margin-left: 4px;
@@ -36,11 +36,12 @@
 				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('passwordNotMatched') }}</p>
 			</template>
 		</MkInput>
-		<MkSwitch v-model:value="ToSAgreement" v-if="meta.tosUrl">
+		<label v-if="meta.tosUrl" class="tou">
+			<input type="checkbox" v-model="ToSAgreement">
 			<i18n-t keypath="agreeTo">
 				<a :href="meta.tosUrl" class="_link" target="_blank">{{ $t('tos') }}</a>
 			</i18n-t>
-		</MkSwitch>
+		</label>
 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
 		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
 		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary>{{ $t('start') }}</MkButton>
@@ -207,5 +208,11 @@ export default defineComponent({
 	.captcha {
 		margin: 16px 0;
 	}
+
+	> .tou {
+		display: block;
+		margin: 16px 0;
+		cursor: pointer;
+	}
 }
 </style>
@@ -1,5 +1,5 @@
 <template>
-<XNotes ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes :class="{ _noGap_: !$store.state.device.showGapBetweenNotesInTimeline }" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>

 <script lang="ts">
@@ -1,49 +1,67 @@
 <template>
-<FormBase class="znqjceqz">
-	<section class="_formItem">
-		<div class="_formPanel" style="text-align: center; padding: 16px;">
-			<img src="/assets/icons/512.png" alt="" style="display: block; width: 100px; margin: 0 auto; border-radius: 16px;"/>
-			<div style="margin-top: 0.75em;">Misskey</div>
-			<div style="opacity: 0.5;">v{{ version }}</div>
-		</div>
-	</section>
-	<section class="_formItem" style="text-align: center;">
-		{{ $t('_aboutMisskey.about') }}
-	</section>
-	<FormGroup>
-		<FormLink to="https://github.com/syuilo/misskey" external><template #icon><Fa :icon="faCode"/></template>{{ $t('_aboutMisskey.source') }}</FormLink>
-		<FormLink to="https://crowdin.com/project/misskey" external><template #icon><Fa :icon="faLanguage"/></template>{{ $t('_aboutMisskey.translation') }}</FormLink>
-		<FormLink to="https://www.patreon.com/syuilo" external><template #icon><Fa :icon="faHandHoldingMedical"/></template>{{ $t('_aboutMisskey.donate') }}</FormLink>
-	</FormGroup>
-	<FormGroup>
-		<template #label>{{ $t('_aboutMisskey.contributors') }}</template>
-		<FormLink to="https://github.com/syuilo" external>@syuilo</FormLink>
-		<FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink>
-		<FormLink to="https://github.com/mei23" external>@mei23</FormLink>
-		<FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink>
-		<FormLink to="https://github.com/tamaina" external>@tamaina</FormLink>
-		<FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink>
-		<FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink>
-		<FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink>
-		<template #caption><MkLink url="https://github.com/syuilo/misskey/graphs/contributors">{{ $t('_aboutMisskey.allContributors') }}</MkLink></template>
-	</FormGroup>
-	<FormGroup>
-		<template #label><Mfm text="[jelly ❤]"/> {{ $t('_aboutMisskey.patrons') }}</template>
-		<FormKeyValueView v-for="patron in patrons" :key="patron"><template #key>{{ patron }}</template></FormKeyValueView>
-		<template #caption>{{ $t('_aboutMisskey.morePatrons') }}</template>
-	</FormGroup>
-</FormBase>
+<div style="overflow: hidden;">
+	<FormBase class="znqjceqz">
+		<div id="debug"></div>
+		<section class="_formItem about">
+			<div class="_formPanel panel" :class="{ playing: easterEggEngine != null }" ref="about">
+				<img src="/assets/icons/512.png" alt="" class="icon" ref="icon" @load="iconLoaded" draggable="false"/>
+				<div class="misskey">Misskey</div>
+				<div class="version">v{{ version }}</div>
+				<span class="emoji" v-for="emoji in easterEggEmojis" :key="emoji.id" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$store.state.instance.meta.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
+			</div>
+		</section>
+		<section class="_formItem" style="text-align: center; padding: 0 16px;" @click="gravity">
+			{{ $t('_aboutMisskey.about') }}
+		</section>
+		<FormGroup>
+			<FormLink to="https://github.com/syuilo/misskey" external>
+				<template #icon><Fa :icon="faCode"/></template>
+				{{ $t('_aboutMisskey.source') }}
+				<template #suffix>GitHub</template>
+			</FormLink>
+			<FormLink to="https://crowdin.com/project/misskey" external>
+				<template #icon><Fa :icon="faLanguage"/></template>
+				{{ $t('_aboutMisskey.translation') }}
+				<template #suffix>Crowdin</template>
+			</FormLink>
+			<FormLink to="https://www.patreon.com/syuilo" external>
+				<template #icon><Fa :icon="faHandHoldingMedical"/></template>
+				{{ $t('_aboutMisskey.donate') }}
+				<template #suffix>Patreon</template>
+			</FormLink>
+		</FormGroup>
+		<FormGroup>
+			<template #label>{{ $t('_aboutMisskey.contributors') }}</template>
+			<FormLink to="https://github.com/syuilo" external>@syuilo</FormLink>
+			<FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink>
+			<FormLink to="https://github.com/mei23" external>@mei23</FormLink>
+			<FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink>
+			<FormLink to="https://github.com/tamaina" external>@tamaina</FormLink>
+			<FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink>
+			<FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink>
+			<FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink>
+			<template #caption><MkLink url="https://github.com/syuilo/misskey/graphs/contributors">{{ $t('_aboutMisskey.allContributors') }}</MkLink></template>
+		</FormGroup>
+		<FormGroup>
+			<template #label><Mfm text="[jelly ❤]"/> {{ $t('_aboutMisskey.patrons') }}</template>
+			<FormKeyValueView v-for="patron in patrons" :key="patron"><template #key>{{ patron }}</template></FormKeyValueView>
+			<template #caption>{{ $t('_aboutMisskey.morePatrons') }}</template>
+		</FormGroup>
+	</FormBase>
+</div>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faInfoCircle, faCode, faLanguage, faHandHoldingMedical, } from '@fortawesome/free-solid-svg-icons';
+import VanillaTilt from 'vanilla-tilt';
 import { version } from '@/config';
 import FormLink from '@/components/form/link.vue';
 import FormBase from '@/components/form/base.vue';
 import FormGroup from '@/components/form/group.vue';
 import FormKeyValueView from '@/components/form/key-value-view.vue';
 import MkLink from '@/components/link.vue';
+import { physics } from '@/scripts/physics.ts';
 import * as os from '@/os';

 const patrons = [
@@ -102,9 +120,53 @@ export default defineComponent({
 			},
 			version,
 			patrons,
+			easterEggReady: false,
+			easterEggEmojis: [],
+			easterEggEngine: null,
 			faInfoCircle, faCode, faLanguage, faHandHoldingMedical,
 		}
 	},
+
+	mounted() {
+		VanillaTilt.init(this.$refs.icon, {
+			max: 30,
+			perspective: 500,
+			scale: 1.125,
+			speed: 1000,
+		});
+	},
+
+	beforeUnmount() {
+		if (this.easterEggEngine) {
+			this.easterEggEngine.stop();
+		}
+	},
+
+	methods: {
+		iconLoaded() {
+			const emojis = this.$store.state.settings.reactions;
+			const containerWidth = this.$refs.about.offsetWidth;
+			for (let i = 0; i < 32; i++) {
+				this.easterEggEmojis.push({
+					id: i.toString(),
+					top: -(128 + (Math.random() * 256)),
+					left: (Math.random() * containerWidth),
+					emoji: emojis[Math.floor(Math.random() * emojis.length)],
+				});
+			}
+
+			this.$nextTick(() => {
+				this.easterEggReady = true;
+			});
+		},
+
+		gravity() {
+			if (!this.easterEggReady) return;
+			this.easterEggReady = false;
+			this.$refs.icon.vanillaTilt.destroy();
+			this.easterEggEngine = physics(this.$refs.about);
+		}
+	}
 });
 </script>

@@ -113,5 +175,58 @@ export default defineComponent({
 	max-width: 800px;
 	box-sizing: border-box;
 	margin: 0 auto;
+
+	> .about {
+		> .panel {
+			position: relative;
+			text-align: center;
+			padding: 16px;
+
+			&.playing {
+				&, * {
+					user-select: none;
+				}
+
+				* {
+					will-change: transform;
+				}
+
+				> .emoji {
+					visibility: visible;
+				}
+			}
+
+			> .icon {
+				display: block;
+				width: 100px;
+				margin: 0 auto;
+				border-radius: 16px;
+			}
+
+			> .misskey {
+				margin: 0.75em auto 0 auto;
+				width: max-content;
+			}
+
+			> .version {
+				margin: 0 auto;
+				width: max-content;
+				opacity: 0.5;
+			}
+
+			> .emoji {
+				position: absolute;
+				top: 0;
+				left: 0;
+				visibility: hidden;
+
+				> .emoji {
+					pointer-events: none;
+					font-size: 24px;
+					width: 24px;
+				}
+			}
+		}
+	}
 }
 </style>
@@ -21,6 +21,8 @@
 			<template #value>{{ meta.maintainerEmail }}</template>
 		</FormKeyValueView>
 	</FormGroup>
+
+	<FormLink v-if="meta.tosUrl" :to="meta.tosUrl" external>{{ $t('tos') }}</FormLink>
 </FormBase>
 </template>

@@ -20,7 +20,7 @@
 		</div>
 	</div>

-	<XPostForm :channel="channel" class="post-form _content _panel _vMargin" fixed v-if="this.$store.getters.isSignedIn"/>
+	<XPostForm :channel="channel" class="post-form _content _panel _vMargin" fixed v-if="$store.getters.isSignedIn"/>

 	<XTimeline class="_content _vMargin" src="channel" :channel="channelId" @before="before" @after="after"/>
 </div>
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<div class="_section" style="padding: 0;" v-if="this.$store.getters.isSignedIn">
+	<div class="_section" style="padding: 0;" v-if="$store.getters.isSignedIn">
 		<MkTab class="_content" v-model:value="tab">
 			<option value="featured"><Fa :icon="faFireAlt"/> {{ $t('_channel.featured') }}</option>
 			<option value="following"><Fa :icon="faHeart"/> {{ $t('_channel.following') }}</option>
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="lznhrdub">
 	<div class="_section">
 		<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $t('searchUser') }}</span></MkInput>

@@ -186,6 +186,11 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+.lznhrdub {
+	max-width: 1400px;
+	margin: 0 auto;
+}
+
 .localfedi7 {
 	color: #fff;
 	padding: 16px;
@@ -18,6 +18,8 @@
 		</div>
 	</section>

+	<MkInput v-model:value="pinnedClipId">{{ $t('pinnedClipId') }}</MkInput>
+
 	<section class="_card _vMargin">
 		<div class="_content">
 			<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</MkInput>
@@ -285,6 +287,7 @@ export default defineComponent({
 			blockedHosts: '',
 			pinnedUsers: '',
 			pinnedPages: '',
+			pinnedClipId: null,
 			maintainerName: null,
 			maintainerEmail: null,
 			name: null,
@@ -373,6 +376,7 @@ export default defineComponent({
 		this.blockedHosts = this.meta.blockedHosts.join('\n');
 		this.pinnedUsers = this.meta.pinnedUsers.join('\n');
 		this.pinnedPages = this.meta.pinnedPages.join('\n');
+		this.pinnedClipId = this.meta.pinnedClipId;
 		this.enableServiceWorker = this.meta.enableServiceWorker;
 		this.swPublicKey = this.meta.swPublickey;
 		this.swPrivateKey = this.meta.swPrivateKey;
@@ -526,6 +530,7 @@ export default defineComponent({
 				blockedHosts: this.blockedHosts.split('\n') || [],
 				pinnedUsers: this.pinnedUsers ? this.pinnedUsers.split('\n') : [],
 				pinnedPages: this.pinnedPages ? this.pinnedPages.split('\n') : [],
+				pinnedClipId: (this.pinnedClipId && this.pinnedClipId) != '' ? this.pinnedClipId : null,
 				enableServiceWorker: this.enableServiceWorker,
 				swPublicKey: this.swPublicKey,
 				swPrivateKey: this.swPrivateKey,
@@ -24,7 +24,7 @@
 		</div>
 		<div class="_section">
 			<div class="_content">
-				<MkSwitch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @update:value="toggleModerator" v-model:value="moderator">{{ $t('moderator') }}</MkSwitch>
+				<MkSwitch v-if="user.host == null && $store.state.i.isAdmin && (moderator || !user.isAdmin)" @update:value="toggleModerator" v-model:value="moderator">{{ $t('moderator') }}</MkSwitch>
 				<MkSwitch @update:value="toggleSilence" v-model:value="silenced">{{ $t('silence') }}</MkSwitch>
 				<MkSwitch @update:value="toggleSuspend" v-model:value="suspended">{{ $t('suspend') }}</MkSwitch>
 			</div>
@@ -1,6 +1,8 @@
 <template>
-<XDraggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
-	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @update:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
+<XDraggable tag="div" v-model="blocks" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
+	<template #item="{element}">
+		<component :is="'x-' + element.type" :value="element" @update:value="updateItem" @remove="() => removeItem(element)" :hpml="hpml"/>
+	</template>
 </XDraggable>
 </template>

@@ -25,7 +27,7 @@ import * as os from '@/os';

 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
 	},

@@ -39,9 +41,16 @@ export default defineComponent({
 		},
 	},

+	emits: ['update:value'],
+
 	computed: {
-		blocks() {
-			return this.value;
+		blocks: {
+			get() {
+				return this.value;
+			},
+			set(value) {
+				this.$emit('update:value', value);
+			}
 		}
 	},

@@ -57,6 +66,7 @@ export default defineComponent({
 		},

 		removeItem(el) {
+			console.log(el);
 			const i = this.blocks.findIndex(x => x.id === el.id);
 			const newValue = [
 				...this.blocks.slice(0, i),
@@ -52,6 +52,7 @@ export default defineComponent({
 			default: null
 		}
 	},
+	emits: ['toggle', 'remove'],
 	data() {
 		return {
 			showBody: this.expanded,
@@ -53,18 +53,19 @@
 		<MkContainer :body-togglable="true" class="_vMargin">
 			<template #header><Fa :icon="faMagic"/> {{ $t('_pages.variables') }}</template>
 			<div class="qmuvgica">
-				<XDraggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-					<XVariable v-for="variable in variables"
-						:value="variable"
-						:removable="true"
-						@update:value="v => updateVariable(v)"
-						@remove="() => removeVariable(variable)"
-						:key="variable.name"
-						:hpml="hpml"
-						:name="variable.name"
-						:title="variable.name"
-						:draggable="true"
-					/>
+				<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+					<template #item="{element}">
+						<XVariable
+							:value="element"
+							:removable="true"
+							@update:value="v => updateVariable(v)"
+							@remove="() => removeVariable(element)"
+							:hpml="hpml"
+							:name="element.name"
+							:title="element.name"
+							:draggable="true"
+						/>
+					</template>
 				</XDraggable>

 				<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
@@ -109,7 +110,7 @@ import { selectFile } from '@/scripts/select-file';

 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput,
 	},

@@ -341,12 +342,7 @@ export default defineComponent({
 		},

 		removeVariable(v) {
-			const i = this.variables.findIndex(x => x.name === v.name);
-			const newValue = [
-				...this.variables.slice(0, i),
-				...this.variables.slice(i + 1)
-			];
-			this.variables = newValue;
+			this.variables = this.variables.filter(x => x.name !== v.name);
 		},

 		getPageBlockList() {
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkTab v-model:value="tab" v-if="this.$store.getters.isSignedIn">
+	<MkTab v-model:value="tab" v-if="$store.getters.isSignedIn">
 		<option value="featured"><Fa :icon="faFireAlt"/> {{ $t('_pages.featured') }}</option>
 		<option value="my"><Fa :icon="faEdit"/> {{ $t('_pages.my') }}</option>
 		<option value="liked"><Fa :icon="faHeart"/> {{ $t('_pages.liked') }}</option>
@@ -1,7 +1,7 @@
 <template>
 <div class="">
-	<div class="_panel">
-		<prism-editor class="_code" v-model:value="code" :highlight="highlighter" :line-numbers="false"/>
+	<div class="_panel iltifgqe">
+		<PrismEditor class="_code code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
 		<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton>
 	</div>

@@ -129,6 +129,13 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+.iltifgqe {
+	position: relative;
+
+	> .code {
+	}
+}
+
 .bepmlvbi {
 	padding: 16px;

@@ -0,0 +1,46 @@
+<template>
+<FormBase>
+
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from 'vue';
+import { faFlask } from '@fortawesome/free-solid-svg-icons';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
+import FormKeyValueView from '@/components/form/key-value-view.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		FormBase,
+		FormSelect,
+		FormSwitch,
+		FormButton,
+		FormLink,
+		FormGroup,
+		FormKeyValueView,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$t('experimentalFeatures'),
+				icon: faFlask
+			},
+			stats: null
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+});
+</script>
@@ -33,6 +33,7 @@
 		<FormSwitch v-model:value="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</FormSwitch>
 		<FormSwitch v-model:value="reduceAnimation">{{ $t('reduceUiAnimation') }}</FormSwitch>
 		<FormSwitch v-model:value="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</FormSwitch>
+		<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $t('showGapBetweenNotesInTimeline') }}</FormSwitch>
 		<FormSwitch v-model:value="loadRawImages">{{ $t('loadRawImages') }}</FormSwitch>
 		<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $t('disableShowingAnimatedImages') }}</FormSwitch>
 		<FormSwitch v-model:value="useSystemFont">{{ $t('useSystemFont') }}</FormSwitch>
@@ -140,6 +141,11 @@ export default defineComponent({
 			set(value) { this.$store.commit('device/set', { key: 'useBlurEffectForModal', value: value }); }
 		},

+		showGapBetweenNotesInTimeline: {
+			get() { return this.$store.state.device.showGapBetweenNotesInTimeline; },
+			set(value) { this.$store.commit('device/set', { key: 'showGapBetweenNotesInTimeline', value: value }); }
+		},
+
 		disableAnimatedMfm: {
 			get() { return !this.$store.state.device.animatedMfm; },
 			set(value) { this.$store.commit('device/set', { key: 'animatedMfm', value: !value }); }
@@ -102,6 +102,7 @@ export default defineComponent({
 				case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
 				case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
 				case 'regedit': return defineAsyncComponent(() => import('./regedit.vue'));
+				case 'experimental-features': return defineAsyncComponent(() => import('./experimental-features.vue'));
 				default: return null;
 			}
 		});
@@ -5,8 +5,10 @@
 	</FormSwitch>

 	<FormLink to="/settings/account-info">{{ $t('accountInfo') }}</FormLink>
+	<FormLink to="/settings/experimental-features">{{ $t('experimentalFeatures') }}</FormLink>

 	<FormGroup>
+		<template #label>{{ $t('developer') }}</template>
 		<FormSwitch v-model:value="debug" @update:value="changeDebug">
 			DEBUG MODE
 		</FormSwitch>
@@ -9,6 +9,10 @@
 		{{ $t('noCrawle') }}
 		<template #desc>{{ $t('noCrawleDescription') }}</template>
 	</FormSwitch>
+	<FormSwitch v-model:value="isExplorable" @update:value="save()">
+		{{ $t('makeExplorable') }}
+		<template #desc>{{ $t('makeExplorableDescription') }}</template>
+	</FormSwitch>
 	<FormSwitch v-model:value="rememberNoteVisibility" @update:value="save()">{{ $t('rememberNoteVisibility') }}</FormSwitch>
 	<FormGroup v-if="!rememberNoteVisibility">
 		<template #label>{{ $t('defaultNoteVisibility') }}</template>
@@ -51,6 +55,7 @@ export default defineComponent({
 			isLocked: false,
 			autoAcceptFollowed: false,
 			noCrawle: false,
+			isExplorable: false,
 		}
 	},

@@ -75,6 +80,7 @@ export default defineComponent({
 		this.isLocked = this.$store.state.i.isLocked;
 		this.autoAcceptFollowed = this.$store.state.i.autoAcceptFollowed;
 		this.noCrawle = this.$store.state.i.noCrawle;
+		this.isExplorable = this.$store.state.i.isExplorable;
 	},

 	mounted() {
@@ -87,6 +93,7 @@ export default defineComponent({
 				isLocked: !!this.isLocked,
 				autoAcceptFollowed: !!this.autoAcceptFollowed,
 				noCrawle: !!this.noCrawle,
+				isExplorable: !!this.isExplorable,
 			});
 		}
 	}
@@ -1,8 +1,12 @@
 <template>
-<FormBase class="llvierxe">
-	<div class="header _formItem" :style="{ backgroundImage: $store.state.i.bannerUrl ? `url(${ $store.state.i.bannerUrl })` : null }" @click="changeBanner">
-		<MkAvatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true" @click.stop="changeAvatar"/>
-	</div>
+<FormBase>
+	<FormGroup>
+		<div class="_formItem _formPanel llvierxe" :style="{ backgroundImage: $store.state.i.bannerUrl ? `url(${ $store.state.i.bannerUrl })` : null }">
+			<MkAvatar class="avatar" :user="$store.state.i"/>
+		</div>
+		<FormButton @click="changeAvatar" primary>{{ $t('_profile.changeAvatar') }}</FormButton>
+		<FormButton @click="changeBanner" primary>{{ $t('_profile.changeBanner') }}</FormButton>
+	</FormGroup>

 	<FormInput v-model:value="name" :max="30">
 		<span>{{ $t('_profile.name') }}</span>
@@ -245,30 +249,26 @@ export default defineComponent({

 <style lang="scss" scoped>
 .llvierxe {
-	> .header {
-		position: relative;
-		height: 150px;
-		overflow: hidden;
-		background-size: cover;
-		background-position: center;
-		border-radius: 5px;
-		border: solid 1px var(--divider);
-		box-sizing: border-box;
-		cursor: pointer;
+	position: relative;
+	height: 150px;
+	background-size: cover;
+	background-position: center;

-		> .avatar {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			display: block;
-			width: 72px;
-			height: 72px;
-			margin: auto;
-			cursor: pointer;
-			box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.5);
-		}
+	> * {
+		pointer-events: none;
+	}
+
+	> .avatar {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: block;
+		width: 72px;
+		height: 72px;
+		margin: auto;
+		box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.5);
 	}
 }
 </style>
@@ -3,16 +3,18 @@
 	<div class="_formItem">
 		<div class="_formLabel">{{ $t('reactionSettingDescription') }}</div>
 		<div class="_formPanel">
-			<XDraggable class="zoaiodol" :list="reactions" animation="150" delay="100" delay-on-touch-only="true">
-				<button class="_button item" v-for="reaction in reactions" :key="reaction" @click="remove(reaction, $event)">
-					<MkEmoji :emoji="reaction" :normal="true"/>
-				</button>
+			<XDraggable class="zoaiodol" v-model="reactions" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
+				<template #item="{element}">
+					<button class="_button item" @click="remove(element, $event)">
+						<MkEmoji :emoji="element" :normal="true"/>
+					</button>
+				</template>
 				<template #footer>
-					<button>a</button>
+					<button class="_button add" @click="chooseEmoji"><Fa :icon="faPlus"/></button>
 				</template>
 			</XDraggable>
 		</div>
-		<div class="_formCaption">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></div>
+		<div class="_formCaption">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="preview">{{ $t('preview') }}</button></div>
 	</div>

 	<FormRadios v-model="reactionPickerWidth">
@@ -35,8 +37,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
-import { faUndo } from '@fortawesome/free-solid-svg-icons';
-import { VueDraggableNext } from 'vue-draggable-next';
+import { faUndo, faPlus } from '@fortawesome/free-solid-svg-icons';
+import XDraggable from 'vuedraggable';
 import FormInput from '@/components/form/input.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FormBase from '@/components/form/base.vue';
@@ -50,7 +52,7 @@ export default defineComponent({
 		FormButton,
 		FormBase,
 		FormRadios,
-		XDraggable: VueDraggableNext,
+		XDraggable,
 	},

 	emits: ['info'],
@@ -66,7 +68,7 @@ export default defineComponent({
 				}
 			},
 			reactions: JSON.parse(JSON.stringify(this.$store.state.settings.reactions)),
-			faLaugh, faSave, faEye, faUndo
+			faLaugh, faSave, faEye, faUndo, faPlus
 		}
 	},

@@ -152,5 +154,10 @@ export default defineComponent({
 		padding: 8px;
 		cursor: move;
 	}
+
+	> .add {
+		display: inline-block;
+		padding: 8px;
+	}
 }
 </style>
@@ -0,0 +1,57 @@
+<template>
+<div>
+	<MkPagination :pagination="pagination" #default="{items}" ref="list">
+		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _vMargin">
+			<b>{{ item.name }}</b>
+			<div v-if="item.description" class="description">{{ item.description }}</div>
+		</MkA>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import { userPage, acct } from '../../filters/user';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			pagination: {
+				endpoint: 'users/clips',
+				limit: 20,
+				params: {
+					userId: this.user.id,
+				}
+			},
+		};
+	},
+
+	watch: {
+		user() {
+			this.$refs.list.reload();
+		}
+	},
+
+	methods: {
+		userPage,
+		
+		acct
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
@@ -1,22 +1,24 @@
 <template>
-<div class="kjeftjfm" v-size="{ max: [500] }">
-	<div class="with">
-		<button class="_button" @click="with_ = null" :class="{ active: with_ === null }">{{ $t('notes') }}</button>
-		<button class="_button" @click="with_ = 'replies'" :class="{ active: with_ === 'replies' }">{{ $t('notesAndReplies') }}</button>
-		<button class="_button" @click="with_ = 'files'" :class="{ active: with_ === 'files' }">{{ $t('withFiles') }}</button>
-	</div>
-	<XNotes ref="timeline" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+<div>
+	<MkTab v-model:value="with_" class="_vMargin">
+		<option :value="null">{{ $t('notes') }}</option>
+		<option value="replies">{{ $t('notesAndReplies') }}</option>
+		<option value="files">{{ $t('withFiles') }}</option>
+	</MkTab>
+	<XNotes ref="timeline" class="_vMargin" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
 </div>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
 import XNotes from '@/components/notes.vue';
+import MkTab from '@/components/tab.vue';
 import * as os from '@/os';

 export default defineComponent({
 	components: {
-		XNotes
+		XNotes,
+		MkTab,
 	},

 	props: {
@@ -54,29 +56,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-.kjeftjfm {
-	> .with {
-		display: flex;
-		margin-bottom: var(--margin);
-
-		> button {
-			flex: 1;
-			padding: 11px 8px 8px 8px;
-			border-bottom: solid 3px transparent;
-
-			&.active {
-				color: var(--accent);
-				border-bottom-color: var(--accent);
-			}
-		}
-	}
-
-	&.max-width_500px {
-		> .with {
-			font-size: 80%;
-		}
-	}
-}
-</style>
@@ -1,37 +1,112 @@
 <template>
 <div>
-	<div class="mk-user-page" v-if="user" v-size="{ max: [500] }" :class="{ _section: narrow === false }">
+	<div class="ftskorzw wide _section" v-if="user && narrow === false">
+		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_vMargin"/>
+
+		<div class="banner-container _vMargin" :style="style">
+			<div class="banner" ref="banner" :style="style"></div>
+		</div>
+		<div class="contents">
+			<div class="side _forceContainerFull_">
+				<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+				<div class="name">
+					<MkUserName :user="user" :nowrap="false" class="name"/>
+					<MkAcct :user="user" :detail="true" class="acct"/>
+				</div>
+				<div class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed"><span>{{ $t('followsYou') }}</span></div>
+				<div class="status">
+					<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
+						<b>{{ number(user.notesCount) }}</b>
+						<span>{{ $t('notes') }}</span>
+					</MkA>
+					<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+						<b>{{ number(user.followingCount) }}</b>
+						<span>{{ $t('following') }}</span>
+					</MkA>
+					<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+						<b>{{ number(user.followersCount) }}</b>
+						<span>{{ $t('followers') }}</span>
+					</MkA>
+				</div>
+				<div class="description">
+					<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+					<p v-else class="empty">{{ $t('noAccountDescription') }}</p>
+				</div>
+				<div class="fields system">
+					<dl class="field" v-if="user.location">
+						<dt class="name"><Fa :icon="faMapMarker" fixed-width/> {{ $t('location') }}</dt>
+						<dd class="value">{{ user.location }}</dd>
+					</dl>
+					<dl class="field" v-if="user.birthday">
+						<dt class="name"><Fa :icon="faBirthdayCake" fixed-width/> {{ $t('birthday') }}</dt>
+						<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+					</dl>
+					<dl class="field">
+						<dt class="name"><Fa :icon="faCalendarAlt" fixed-width/> {{ $t('registeredDate') }}</dt>
+						<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
+					</dl>
+				</div>
+				<div class="fields" v-if="user.fields.length > 0">
+					<dl class="field" v-for="(field, i) in user.fields" :key="i">
+						<dt class="name">
+							<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+						</dt>
+						<dd class="value">
+							<Mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :colored="false"/>
+						</dd>
+					</dl>
+				</div>
+				<XActivity :user="user" :key="user.id" class="_vMargin"/>
+				<XPhotos :user="user" :key="user.id" class="_vMargin"/>
+			</div>
+			<div class="main">
+				<div class="nav _vMargin">
+					<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
+						<Fa :icon="faCommentAlt" class="icon"/>
+						<span>{{ $t('notes') }}</span>
+					</MkA>
+					<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
+						<Fa :icon="faPaperclip" class="icon"/>
+						<span>{{ $t('clips') }}</span>
+					</MkA>
+					<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
+						<Fa :icon="faFileAlt" class="icon"/>
+						<span>{{ $t('pages') }}</span>
+					</MkA>
+					<div class="actions">
+						<button @click="menu" class="menu _button"><Fa :icon="faEllipsisH"/></button>
+						<MkFollowButton v-if="!$store.getters.isSignedIn || $store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+					</div>
+				</div>
+				<template v-if="page === 'index'">
+					<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
+						<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :detail="true" :pinned="true"/>
+					</div>
+					<div class="_vMargin">
+						<XUserTimeline :user="user"/>
+					</div>
+				</template>
+				<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_vMargin"/>
+				<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_vMargin"/>
+				<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
+				<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
+			</div>
+		</div>
+	</div>
+	<div class="ftskorzw narrow _section" v-else-if="user && narrow === true" v-size="{ max: [500] }">
 		<!-- TODO -->
 		<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSuspended') }}</div> -->
 		<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSilenced') }}</div> -->

-		<div class="main">
-			<div class="profile _vMargin" :class="{ _section: narrow === true }">
-				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_content _vMargin"/>
+		<div class="profile _content _vMargin">
+			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_vMargin"/>

-				<div class="_content _panel _vMargin" :key="user.id">
-					<div class="banner-container" :style="style">
-						<div class="banner" ref="banner" :style="style"></div>
-						<div class="fade"></div>
-						<div class="title">
-							<MkUserName class="name" :user="user" :nowrap="true"/>
-							<div class="bottom">
-								<span class="username"><MkAcct :user="user" :detail="true" /></span>
-								<span v-if="user.isAdmin" :title="$t('isAdmin')" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
-								<span v-if="!user.isAdmin && user.isModerator" :title="$t('isModerator')" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
-								<span v-if="user.isLocked" :title="$t('isLocked')"><Fa :icon="faLock"/></span>
-								<span v-if="user.isBot" :title="$t('isBot')"><Fa :icon="faRobot"/></span>
-							</div>
-						</div>
-						<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('followsYou') }}</span>
-						<div class="actions" v-if="$store.getters.isSignedIn">
-							<button @click="menu" class="menu _button"><Fa :icon="faEllipsisH"/></button>
-							<MkFollowButton v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
-						</div>
-					</div>
-					<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+			<div class="_vMargin _panel main" :key="user.id">
+				<div class="banner-container" :style="style">
+					<div class="banner" ref="banner" :style="style"></div>
+					<div class="fade"></div>
 					<div class="title">
-						<MkUserName :user="user" :nowrap="false" class="name"/>
+						<MkUserName class="name" :user="user" :nowrap="true"/>
 						<div class="bottom">
 							<span class="username"><MkAcct :user="user" :detail="true" /></span>
 							<span v-if="user.isAdmin" :title="$t('isAdmin')" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
@@ -40,70 +115,99 @@
 							<span v-if="user.isBot" :title="$t('isBot')"><Fa :icon="faRobot"/></span>
 						</div>
 					</div>
-					<div class="description">
-						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-						<p v-else class="empty">{{ $t('noAccountDescription') }}</p>
+					<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('followsYou') }}</span>
+					<div class="actions" v-if="$store.getters.isSignedIn">
+						<button @click="menu" class="menu _button"><Fa :icon="faEllipsisH"/></button>
+						<MkFollowButton v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 					</div>
-					<div class="fields system">
-						<dl class="field" v-if="user.location">
-							<dt class="name"><Fa :icon="faMapMarker" fixed-width/> {{ $t('location') }}</dt>
-							<dd class="value">{{ user.location }}</dd>
-						</dl>
-						<dl class="field" v-if="user.birthday">
-							<dt class="name"><Fa :icon="faBirthdayCake" fixed-width/> {{ $t('birthday') }}</dt>
-							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-						</dl>
-						<dl class="field">
-							<dt class="name"><Fa :icon="faCalendarAlt" fixed-width/> {{ $t('registeredDate') }}</dt>
-							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-						</dl>
-					</div>
-					<div class="fields" v-if="user.fields.length > 0">
-						<dl class="field" v-for="(field, i) in user.fields" :key="i">
-							<dt class="name">
-								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
-							</dt>
-							<dd class="value">
-								<Mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :colored="false"/>
-							</dd>
-						</dl>
-					</div>
-					<div class="status">
-						<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
-							<b>{{ number(user.notesCount) }}</b>
-							<span>{{ $t('notes') }}</span>
-						</MkA>
-						<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
-							<b>{{ number(user.followingCount) }}</b>
-							<span>{{ $t('following') }}</span>
-						</MkA>
-						<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
-							<b>{{ number(user.followersCount) }}</b>
-							<span>{{ $t('followers') }}</span>
-						</MkA>
+				</div>
+				<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+				<div class="title">
+					<MkUserName :user="user" :nowrap="false" class="name"/>
+					<div class="bottom">
+						<span class="username"><MkAcct :user="user" :detail="true" /></span>
+						<span v-if="user.isAdmin" :title="$t('isAdmin')" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
+						<span v-if="!user.isAdmin && user.isModerator" :title="$t('isModerator')" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
+						<span v-if="user.isLocked" :title="$t('isLocked')"><Fa :icon="faLock"/></span>
+						<span v-if="user.isBot" :title="$t('isBot')"><Fa :icon="faRobot"/></span>
 					</div>
 				</div>
+				<div class="description">
+					<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+					<p v-else class="empty">{{ $t('noAccountDescription') }}</p>
+				</div>
+				<div class="fields system">
+					<dl class="field" v-if="user.location">
+						<dt class="name"><Fa :icon="faMapMarker" fixed-width/> {{ $t('location') }}</dt>
+						<dd class="value">{{ user.location }}</dd>
+					</dl>
+					<dl class="field" v-if="user.birthday">
+						<dt class="name"><Fa :icon="faBirthdayCake" fixed-width/> {{ $t('birthday') }}</dt>
+						<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+					</dl>
+					<dl class="field">
+						<dt class="name"><Fa :icon="faCalendarAlt" fixed-width/> {{ $t('registeredDate') }}</dt>
+						<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
+					</dl>
+				</div>
+				<div class="fields" v-if="user.fields.length > 0">
+					<dl class="field" v-for="(field, i) in user.fields" :key="i">
+						<dt class="name">
+							<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+						</dt>
+						<dd class="value">
+							<Mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :colored="false"/>
+						</dd>
+					</dl>
+				</div>
+				<div class="status">
+					<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
+						<b>{{ number(user.notesCount) }}</b>
+						<span>{{ $t('notes') }}</span>
+					</MkA>
+					<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+						<b>{{ number(user.followingCount) }}</b>
+						<span>{{ $t('following') }}</span>
+					</MkA>
+					<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+						<b>{{ number(user.followersCount) }}</b>
+						<span>{{ $t('followers') }}</span>
+					</MkA>
+				</div>
 			</div>
+		</div>

-			<template v-if="page === 'index'">
-				<div v-if="user.pinnedNotes.length > 0" :class="{ _section: narrow === true, _vMargin: narrow === false }">
-					<XNote v-for="note in user.pinnedNotes" class="note _content _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :detail="true" :pinned="true"/>
-				</div>
-				<div v-if="narrow === true" class="_section">
-					<XPhotos class="_content _vMargin" :user="user" :key="user.id"/>
-					<XActivity class="_content _vMargin" :user="user" :key="user.id"/>
-				</div>
-				<div :class="{ _section: narrow === true, _vMargin: narrow === false }">
-					<XUserTimeline :user="user" class="_content"/>
-				</div>
-			</template>
-			<XFollowList v-else-if="page === 'following'" :class="{ _section: narrow === true, _vMargin: narrow === false }" type="following" :user="user"/>
-			<XFollowList v-else-if="page === 'followers'" :class="{ _section: narrow === true, _vMargin: narrow === false }" type="followers" :user="user"/>
-		</div>
-		<div class="side" v-if="narrow === false">
-			<XPhotos class="_vMargin" :user="user" :key="user.id"/>
-			<XActivity class="_vMargin" :user="user" :key="user.id"/>
+		<div class="nav _vMargin">
+			<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
+				<Fa :icon="faCommentAlt" class="icon"/>
+				<span>{{ $t('notes') }}</span>
+			</MkA>
+			<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
+				<Fa :icon="faPaperclip" class="icon"/>
+				<span>{{ $t('clips') }}</span>
+			</MkA>
+			<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
+				<Fa :icon="faFileAlt" class="icon"/>
+				<span>{{ $t('pages') }}</span>
+			</MkA>
 		</div>
+
+		<template v-if="page === 'index'">
+			<div class="_content _vMargin">
+				<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
+					<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :detail="true" :pinned="true"/>
+				</div>
+				<XPhotos :user="user" :key="user.id" class="_vMargin"/>
+				<XActivity :user="user" :key="user.id" class="_vMargin"/>
+			</div>
+			<div class="_content _vMargin">
+				<XUserTimeline :user="user" class="_content"/>
+			</div>
+		</template>
+		<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
+		<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
+		<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
+		<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
 	</div>
 	<div v-else-if="error">
 		<MkError @retry="fetch()"/>
@@ -113,8 +217,8 @@

 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
-import { faCalendarAlt, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
+import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faPaperclip, faFileAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt, faBookmark as farBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
 import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/note.vue';
@@ -122,6 +226,7 @@ import MkFollowButton from '@/components/follow-button.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
+import MkTab from '@/components/tab.vue';
 import Progress from '@/scripts/loading';
 import parseAcct from '../../../misc/acct/parse';
 import { getScrollPosition } from '@/scripts/scroll';
@@ -138,7 +243,10 @@ export default defineComponent({
 		MkContainer,
 		MkRemoteCaution,
 		MkFolder,
+		MkTab,
 		XFollowList: defineAsyncComponent(() => import('./follow-list.vue')),
+		XClips: defineAsyncComponent(() => import('./clips.vue')),
+		XPages: defineAsyncComponent(() => import('./pages.vue')),
 		XPhotos: defineAsyncComponent(() => import('./index.photos.vue')),
 		XActivity: defineAsyncComponent(() => import('./index.activity.vue')),
 	},
@@ -169,7 +277,7 @@ export default defineComponent({
 			error: null,
 			parallaxAnimationId: null,
 			narrow: null,
-			faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt
+			faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt, faCommentAlt, faPaperclip, faFileAlt,
 		};
 	},

@@ -253,235 +361,437 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-.mk-user-page {
-	display: flex;
-	max-width: 1050px;
+.ftskorzw.wide {
+	max-width: 1150px;
 	margin: 0 auto;
-	
-	> .main {
-		flex: 1;

-		> .punished {
-			font-size: 0.8em;
-			padding: 16px;
+	> .banner-container {
+		position: relative;
+		height: 450px;
+		border-radius: 16px;
+		overflow: hidden;
+		background-size: cover;
+		background-position: center;
+
+		> .banner {
+			height: 100%;
+			background-color: #4c5e6d;
+			background-size: cover;
+			background-position: center;
+			box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
+			will-change: background-position;
 		}
+	}

-		> .profile {
-			> ._content {
-				position: relative;
-				overflow: hidden;
+	> .contents {
+		display: flex;

-				> .banner-container {
-					position: relative;
-					height: 250px;
-					overflow: hidden;
-					background-size: cover;
-					background-position: center;
+		> .side {
+			width: 360px;

-					> .banner {
-						height: 100%;
-						background-color: #4c5e6d;
-						background-size: cover;
-						background-position: center;
-						box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
-						will-change: background-position;
-					}
+			> .avatar {
+				display: block;
+				width: 180px;
+				height: 180px;
+				margin: -130px auto 0 auto;
+			}

-					> .fade {
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						width: 100%;
-						height: 78px;
-						background: linear-gradient(transparent, rgba(#000, 0.7));
-					}
+			> .name {
+				padding: 16px 0px 20px 0;
+				text-align: center;

-					> .followed {
-						position: absolute;
-						top: 12px;
-						left: 12px;
-						padding: 4px 8px;
-						color: #fff;
-						background: rgba(0, 0, 0, 0.7);
-						font-size: 0.7em;
-						border-radius: 6px;
-					}
-
-					> .actions {
-						position: absolute;
-						top: 12px;
-						right: 12px;
-						-webkit-backdrop-filter: blur(8px);
-						backdrop-filter: blur(8px);
-						background: rgba(0, 0, 0, 0.2);
-						padding: 8px;
-						border-radius: 24px;
-
-						> .menu {
-							vertical-align: bottom;
-							height: 31px;
-							width: 31px;
-							color: #fff;
-							text-shadow: 0 0 8px #000;
-							font-size: 16px;
-						}
-
-						> .koudoku {
-							margin-left: 4px;
-							vertical-align: bottom;
-						}
-					}
-
-					> .title {
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						width: 100%;
-						padding: 0 0 8px 154px;
-						box-sizing: border-box;
-						color: #fff;
-
-						> .name {
-							display: block;
-							margin: 0;
-							line-height: 32px;
-							font-weight: bold;
-							font-size: 1.8em;
-							text-shadow: 0 0 8px #000;
-						}
-
-						> .bottom {
-							> * {
-								display: inline-block;
-								margin-right: 16px;
-								line-height: 20px;
-								opacity: 0.8;
-
-								&.username {
-									font-weight: bold;
-								}
-							}
-						}
-					}
-				}
-
-				> .title {
-					display: none;
-					text-align: center;
-					padding: 50px 8px 16px 8px;
-					font-weight: bold;
-					border-bottom: solid 1px var(--divider);
-
-					> .bottom {
-						> * {
-							display: inline-block;
-							margin-right: 8px;
-							opacity: 0.8;
-						}
-					}
-				}
-
-				> .avatar {
+				> .name {
 					display: block;
-					position: absolute;
-					top: 170px;
-					left: 16px;
-					z-index: 2;
-					width: 120px;
-					height: 120px;
-					box-shadow: 1px 1px 3px rgba(#000, 0.2);
+					font-size: 1.75em;
+					font-weight: bold;
 				}
+			}

-				> .description {
-					padding: 24px 24px 24px 154px;
-					font-size: 0.95em;
+			> .followed {
+				text-align: center;

-					> .empty {
-						margin: 0;
-						opacity: 0.5;
-					}
+				> span {
+					display: inline-block;
+					font-size: 80%;
+					padding: 8px 12px;
+					margin-bottom: 20px;
+					border: solid 1px var(--divider);
+					border-radius: 999px;
 				}
+			}

-				> .fields {
-					padding: 24px;
-					font-size: 0.9em;
-					border-top: solid 1px var(--divider);
+			> .status {
+				display: flex;
+				padding: 20px 16px;
+				border-top: solid 1px var(--divider);
+				font-size: 90%;

-					> .field {
-						display: flex;
-						padding: 0;
-						margin: 0;
-						align-items: center;
+				> a {
+					flex: 1;
+					text-align: center;

-						&:not(:last-child) {
-							margin-bottom: 8px;
-						}
-
-						> .name {
-							width: 30%;
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							font-weight: bold;
-							text-align: center;
-						}
-
-						> .value {
-							width: 70%;
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-						}
+					&.active {
+						color: var(--accent);
 					}

-					&.system > .field > .name {
+					&:hover {
+						text-decoration: none;
+					}
+
+					> b {
+						display: block;
+						line-height: 16px;
+					}
+
+					> span {
+						font-size: 75%;
 					}
 				}
+			}

-				> .status {
+			> .description {
+				padding: 20px 16px;
+				border-top: solid 1px var(--divider);
+				font-size: 90%;
+			}
+
+			> .fields {
+				padding: 20px 16px;
+				border-top: solid 1px var(--divider);
+				font-size: 90%;
+
+				> .field {
 					display: flex;
-					padding: 24px;
-					border-top: solid 1px var(--divider);
+					padding: 0;
+					margin: 0;
+					align-items: center;

-					> a {
-						flex: 1;
-						text-align: center;
+					&:not(:last-child) {
+						margin-bottom: 8px;
+					}

-						&.active {
-							color: var(--accent);
-						}
+					> .name {
+						width: 30%;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						font-weight: bold;
+					}

-						&:hover {
-							text-decoration: none;
-						}
-
-						> b {
-							display: block;
-							line-height: 16px;
-						}
-
-						> span {
-							font-size: 70%;
-						}
+					> .value {
+						width: 70%;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						margin: 0;
 					}
 				}
 			}
 		}

-		> .content {
-			margin-bottom: var(--margin);
+		> .main {
+			flex: 1;
+			margin-left: var(--margin);
+			min-width: 0;
+
+			> .nav {
+				display: flex;
+				align-items: center;
+				margin-top: var(--margin);
+				//font-size: 120%;
+				font-weight: bold;
+
+				> .link {
+					display: inline-block;
+					padding: 15px 24px 12px 24px;
+					text-align: center;
+					border-bottom: solid 3px transparent;
+
+					&:hover {
+						text-decoration: none;
+					}
+
+					&.active {
+						color: var(--accent);
+						border-bottom-color: var(--accent);
+					}
+
+					&:not(.active):hover {
+						color: var(--fgHighlighted);
+					}
+
+					> .icon {
+						margin-right: 6px;
+					}
+				}
+
+				> .actions {
+					display: flex;
+					align-items: center;
+					margin-left: auto;
+
+					> .menu {
+						padding: 12px 16px;
+					}
+				}
+			}
+		}
+	}
+}
+
+.ftskorzw.narrow {
+	max-width: 100vw;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	> .punished {
+		font-size: 0.8em;
+		padding: 16px;
+	}
+
+	> .profile {
+
+		> .main {
+			position: relative;
+			overflow: hidden;
+
+			> .banner-container {
+				position: relative;
+				height: 250px;
+				overflow: hidden;
+				background-size: cover;
+				background-position: center;
+
+				> .banner {
+					height: 100%;
+					background-color: #4c5e6d;
+					background-size: cover;
+					background-position: center;
+					box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
+					will-change: background-position;
+				}
+
+				> .fade {
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					width: 100%;
+					height: 78px;
+					background: linear-gradient(transparent, rgba(#000, 0.7));
+				}
+
+				> .followed {
+					position: absolute;
+					top: 12px;
+					left: 12px;
+					padding: 4px 8px;
+					color: #fff;
+					background: rgba(0, 0, 0, 0.7);
+					font-size: 0.7em;
+					border-radius: 6px;
+				}
+
+				> .actions {
+					position: absolute;
+					top: 12px;
+					right: 12px;
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+					background: rgba(0, 0, 0, 0.2);
+					padding: 8px;
+					border-radius: 24px;
+
+					> .menu {
+						vertical-align: bottom;
+						height: 31px;
+						width: 31px;
+						color: #fff;
+						text-shadow: 0 0 8px #000;
+						font-size: 16px;
+					}
+
+					> .koudoku {
+						margin-left: 4px;
+						vertical-align: bottom;
+					}
+				}
+
+				> .title {
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					width: 100%;
+					padding: 0 0 8px 154px;
+					box-sizing: border-box;
+					color: #fff;
+
+					> .name {
+						display: block;
+						margin: 0;
+						line-height: 32px;
+						font-weight: bold;
+						font-size: 1.8em;
+						text-shadow: 0 0 8px #000;
+					}
+
+					> .bottom {
+						> * {
+							display: inline-block;
+							margin-right: 16px;
+							line-height: 20px;
+							opacity: 0.8;
+
+							&.username {
+								font-weight: bold;
+							}
+						}
+					}
+				}
+			}
+
+			> .title {
+				display: none;
+				text-align: center;
+				padding: 50px 8px 16px 8px;
+				font-weight: bold;
+				border-bottom: solid 1px var(--divider);
+
+				> .bottom {
+					> * {
+						display: inline-block;
+						margin-right: 8px;
+						opacity: 0.8;
+					}
+				}
+			}
+
+			> .avatar {
+				display: block;
+				position: absolute;
+				top: 170px;
+				left: 16px;
+				z-index: 2;
+				width: 120px;
+				height: 120px;
+				box-shadow: 1px 1px 3px rgba(#000, 0.2);
+			}
+
+			> .description {
+				padding: 24px 24px 24px 154px;
+				font-size: 0.95em;
+
+				> .empty {
+					margin: 0;
+					opacity: 0.5;
+				}
+			}
+
+			> .fields {
+				padding: 24px;
+				font-size: 0.9em;
+				border-top: solid 1px var(--divider);
+
+				> .field {
+					display: flex;
+					padding: 0;
+					margin: 0;
+					align-items: center;
+
+					&:not(:last-child) {
+						margin-bottom: 8px;
+					}
+
+					> .name {
+						width: 30%;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						font-weight: bold;
+						text-align: center;
+					}
+
+					> .value {
+						width: 70%;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						margin: 0;
+					}
+				}
+
+				&.system > .field > .name {
+				}
+			}
+
+			> .status {
+				display: flex;
+				padding: 24px;
+				border-top: solid 1px var(--divider);
+
+				> a {
+					flex: 1;
+					text-align: center;
+
+					&.active {
+						color: var(--accent);
+					}
+
+					&:hover {
+						text-decoration: none;
+					}
+
+					> b {
+						display: block;
+						line-height: 16px;
+					}
+
+					> span {
+						font-size: 70%;
+					}
+				}
+			}
 		}
 	}

-	> .side {
-		flex-basis: 300px;
-		margin-left: var(--margin);
+	> .nav {
+		display: flex;
+		align-items: center;
+		margin-top: var(--margin);
+		//font-size: 120%;
+		font-weight: bold;
+
+		> .link {
+			flex: 1;
+			display: inline-block;
+			padding: 16px;
+			text-align: center;
+			border-bottom: solid 3px transparent;
+
+			&:hover {
+				text-decoration: none;
+			}
+
+			&.active {
+				color: var(--accent);
+				border-bottom-color: var(--accent);
+			}
+
+			&:not(.active):hover {
+				color: var(--fgHighlighted);
+			}
+
+			> .icon {
+				margin-right: 6px;
+			}
+		}
+	}
+
+	> .content {
+		margin-bottom: var(--margin);
 	}

 	&.max-width_500px {
-		display: block;
-
-		> .main > .profile > ._content {
+		> .profile > .main {
 			> .banner-container {
 				height: 140px;

@@ -520,6 +830,10 @@ export default defineComponent({
 				padding: 16px;
 			}
 		}
+
+		> .nav {
+			font-size: 80%;
+		}
 	}
 }
 </style>
@@ -0,0 +1,56 @@
+<template>
+<div>
+	<MkPagination :pagination="pagination" #default="{items}" ref="list">
+		<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_vMargin"/>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkPagePreview from '@/components/page-preview.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import { userPage, acct } from '../../filters/user';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+		MkPagePreview,
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			pagination: {
+				endpoint: 'users/pages',
+				limit: 20,
+				params: {
+					userId: this.user.id,
+				}
+			},
+		};
+	},
+
+	watch: {
+		user() {
+			this.$refs.list.reload();
+		}
+	},
+
+	methods: {
+		userPage,
+		
+		acct
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
@@ -1,141 +0,0 @@
-<template>
-<div class="xyeqzsjl _panel">
-	<header>
-		<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
-		<XHeader class="title" :info="pageInfo" :with-back="false"/>
-	</header>
-	<div>
-		<component :is="component" v-bind="props" :ref="changePage"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
-import XWindow from '@/components/ui/window.vue';
-import XHeader from '@/ui/_common_/header.vue';
-import { popout } from '@/scripts/popout';
-import { resolve } from '@/router';
-import { url } from '@/config';
-
-export default defineComponent({
-	components: {
-		XWindow,
-		XHeader,
-	},
-
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			}
-		};
-	},
-
-	props: {
-		initialPath: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			pageInfo: null,
-			path: this.initialPath,
-			component: null,
-			props: null,
-			history: [],
-			faChevronLeft,
-		};
-	},
-
-	computed: {
-		url(): string {
-			return url + this.path;
-		},
-	},
-
-	created() {
-		const { component, props } = resolve(this.initialPath);
-		this.component = component;
-		this.props = props;
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page.INFO) {
-				this.pageInfo = page.INFO;
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		expand() {
-			this.$router.push(this.path);
-			this.$refs.window.close();
-		},
-
-		popout() {
-			popout(this.path, this.$el);
-			this.$refs.window.close();
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.xyeqzsjl {
-	--section-padding: 16px;
-
-	display: flex;
-	flex-direction: column;
-	contain: content;
-
-	> header {
-		$height: 50px;
-		display: flex;
-		position: relative;
-		z-index: 1;
-		height: $height;
-		line-height: $height;
-		box-shadow: 0px 1px var(--divider);
-
-		> button {
-			height: $height;
-			width: $height;
-
-			&:hover {
-				color: var(--fgHighlighted);
-			}
-		}
-
-		> .title {
-			flex: 1;
-			position: relative;
-			line-height: $height;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			text-align: center;
-		}
-	}
-
-	> div {
-		flex: 1;
-		overflow: auto;
-	}
-}
-</style>
@@ -1,8 +1,27 @@
 <template>
 <div class="rsqzvsbo _section" v-if="meta">
-	<div class="blocks">
-		<XBlock class="block" v-for="path in meta.pinnedPages" :initial-path="path" :key="path"/>
+	<div class="overview _monospace" v-if="stats">
+		<div class="stats">
+			<div><span>Users</span><span>{{ number(stats.originalUsersCount) }}</span></div>
+			<div><span>Notes</span><span>{{ number(stats.originalNotesCount) }}</span></div>
+			<div><span>Reactions</span><span>{{ number(stats.reactionsCount) }}</span></div>
+		</div>
+		<div class="tags">
+			<MkA class="tag" v-for="tag in tags" :to="`/tags/${encodeURIComponent(tag.tag)}`">#{{ tag.tag }}</MkA>
+		</div>
 	</div>
+	<template v-if="meta.pinnedClipId">
+		<h2># {{ $t('pinnedNotes') }}</h2>
+		<MkPagination :pagination="clipPagination" #default="{items}">
+			<XNote class="kmkqjgkl" v-for="note in items" :note="note" :key="note.id"/>
+		</MkPagination>
+	</template>
+	<template v-else>
+		<h2># {{ $t('featured') }}</h2>
+		<MkPagination :pagination="featuredPagination" #default="{items}">
+			<XNote class="kmkqjgkl" v-for="note in items" :note="note" :key="note.id"/>
+		</MkPagination>
+	</template>
 </div>
 </template>

@@ -12,16 +31,17 @@ import { toUnicode } from 'punycode';
 import XSigninDialog from '@/components/signin-dialog.vue';
 import XSignupDialog from '@/components/signup-dialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XNotes from '@/components/notes.vue';
-import XBlock from './welcome.entrance.block.vue';
+import XNote from '@/components/note.vue';
+import MkPagination from '@/components/ui/pagination.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
+import number from '@/filters/number';

 export default defineComponent({
 	components: {
 		MkButton,
-		XNotes,
-		XBlock,
+		XNote,
+		MkPagination,
 	},

 	data() {
@@ -29,6 +49,20 @@ export default defineComponent({
 			host: toUnicode(host),
 			instanceName,
 			meta: null,
+			stats: null,
+			tags: [],
+			clipPagination: {
+				endpoint: 'clips/notes',
+				limit: 10,
+				params: () => ({
+					clipId: this.meta.pinnedClipId,
+				})
+			},
+			featuredPagination: {
+				endpoint: 'notes/featured',
+				limit: 10,
+				offsetMode: true
+			},
 		};
 	},

@@ -40,6 +74,13 @@ export default defineComponent({
 		os.api('stats').then(stats => {
 			this.stats = stats;
 		});
+
+		os.api('hashtags/list', {
+			sort: '+mentionedLocalUsers',
+			limit: 8
+		}).then(tags => {
+			this.tags = tags;
+		});
 	},

 	methods: {
@@ -53,7 +94,9 @@ export default defineComponent({
 			os.popup(XSignupDialog, {
 				autoSet: true
 			}, {}, 'closed');
-		}
+		},
+
+		number
 	}
 });
 </script>
@@ -62,19 +105,77 @@ export default defineComponent({
 .rsqzvsbo {
 	text-align: center;

-	> .blocks {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-		grid-gap: var(--margin);
-		text-align: left;
+	> h2 {
+		display: inline-block;
+		color: #fff;
+		margin: 16px;
+		padding: 8px 12px;
+		background: rgba(0, 0, 0, 0.5);
+	}

-		> .block {
-			height: 600px;
+	> .overview {
+		> .stats, > .tags {
+			display: inline-block;
+			vertical-align: top;
+			width: 530px;
+			padding: 32px;
+			margin: 16px;
+			box-sizing: border-box;
+
+			@media (max-width: 800px) {
+				display: block;
+				width: 100%;
+				margin: 12px 0;
+			}
 		}

-		@media (max-width: 800px) {
-			grid-template-columns: 1fr;
+		> .stats {
+			background: var(--accent);
+			border-radius: 12px;
+			color: #fff;
+			font-size: 1.5em;
+
+			> div {
+				display: flex;
+
+				> span:first-child {
+					opacity: 0.7;
+					font-weight: bold;
+				}
+
+				> span:last-child {
+					margin-left: auto;
+				}
+			}
+		}
+
+		> .tags {
+			background: var(--panel);
+			border-radius: 12px;
+			color: var(--fg);
+			font-size: 1.5em;
+
+			> .tag {
+				margin-right: 1em;
+			}
 		}
 	}
 }
+
+.kmkqjgkl {
+	display: inline-block;
+	vertical-align: middle;
+	width: 530px;
+	margin: 16px;
+	box-sizing: border-box;
+	text-align: left;
+	box-shadow: 0 6px 46px rgb(0 0 0 / 25%);
+	border-radius: 12px;
+
+	@media (max-width: 800px) {
+		display: block;
+		width: 100%;
+		margin: 12px 0;
+	}
+}
 </style>
@@ -7,9 +7,10 @@ import getAcct from '../../misc/acct/render';
 import * as os from '@/os';
 import { store, userActions } from '@/store';
 import { router } from '@/router';
-import { popout } from './popout';

 export function getUserMenu(user) {
+	const meId = store.getters.isSignedIn ? store.state.i.id : null;
+
 	async function pushList() {
 		const t = i18n.global.t('selectList'); // なぜか後で参照すると null になるので最初にメモリに確保しておく
 		const lists = await os.api('users/lists/list');
@@ -130,7 +131,7 @@ export function getUserMenu(user) {
 		action: () => {
 			os.post({ specified: user });
 		}
-	}, store.state.i.id != user.id ? {
+	}, meId != user.id ? {
 		type: 'link',
 		icon: faComments,
 		text: i18n.global.t('startMessaging'),
@@ -139,13 +140,13 @@ export function getUserMenu(user) {
 		icon: faListUl,
 		text: i18n.global.t('addToList'),
 		action: pushList
-	}, store.state.i.id != user.id ? {
+	}, meId != user.id ? {
 		icon: faUsers,
 		text: i18n.global.t('inviteToGroup'),
 		action: inviteGroup
 	} : undefined] as any;

-	if (store.getters.isSignedIn && store.state.i.id != user.id) {
+	if (store.getters.isSignedIn && meId != user.id) {
 		menu = menu.concat([null, {
 			icon: user.isMuted ? faEye : faEyeSlash,
 			text: user.isMuted ? i18n.global.t('unmute') : i18n.global.t('mute'),
@@ -175,7 +176,7 @@ export function getUserMenu(user) {
 		}
 	}

-	if (store.getters.isSignedIn && store.state.i.id === user.id) {
+	if (store.getters.isSignedIn && meId === user.id) {
 		menu = menu.concat([null, {
 			icon: faPencilAlt,
 			text: i18n.global.t('editProfile'),
@@ -0,0 +1,148 @@
+import * as Matter from 'matter-js';
+
+export function physics(container: HTMLElement) {
+	const containerWidth = container.offsetWidth;
+	const containerHeight = container.offsetHeight;
+	const containerCenterX = containerWidth / 2;
+
+	// サイズ固定化(要らないかも？)
+	container.style.position = 'relative';
+	container.style.boxSizing = 'border-box';
+	container.style.width = `${containerWidth}px`;
+	container.style.height = `${containerHeight}px`;
+
+	// create engine
+	const engine = Matter.Engine.create({
+		constraintIterations: 4,
+		positionIterations: 8,
+		velocityIterations: 8,
+	});
+
+	const world = engine.world;
+
+	// create renderer
+	const render = Matter.Render.create({
+		engine: engine,
+		//element: document.getElementById('debug'),
+		options: {
+			width: containerWidth,
+			height: containerHeight,
+			background: 'transparent', // transparent to hide
+			wireframeBackground: 'transparent', // transparent to hide
+		}
+	});
+
+	// Disable to hide debug
+	Matter.Render.run(render);
+
+	// create runner
+	const runner = Matter.Runner.create();
+	Matter.Runner.run(runner, engine);
+
+	const groundThickness = 1024;
+	const ground = Matter.Bodies.rectangle(containerCenterX, containerHeight + (groundThickness / 2), containerWidth, groundThickness, {
+		isStatic:     true,
+		restitution:  0.1,
+		friction:     2
+	});
+
+	//const wallRight = Matter.Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, wallopts);
+	//const wallLeft = Matter.Bodies.rectangle(-50, window.innerHeight/2, 100, window.innerHeight, wallopts);
+
+	Matter.World.add(world, [
+		ground,
+		//wallRight,
+		//wallLeft,
+	]);
+
+	const objEls = Array.from(container.children);
+	const objs = [];
+	for (const objEl of objEls) {
+		const left = objEl.dataset.physicsX ? parseInt(objEl.dataset.physicsX) : objEl.offsetLeft;
+		const top = objEl.dataset.physicsY ? parseInt(objEl.dataset.physicsY) : objEl.offsetTop;
+
+		let obj;
+		if (objEl.classList.contains('_physics_circle_')) {
+			obj = Matter.Bodies.circle(
+				left + (objEl.offsetWidth / 2),
+				top + (objEl.offsetHeight / 2),
+				Math.max(objEl.offsetWidth, objEl.offsetHeight) / 2,
+			);
+		} else {
+			const style = window.getComputedStyle(objEl);
+			obj = Matter.Bodies.rectangle(
+				left + (objEl.offsetWidth / 2),
+				top + (objEl.offsetHeight / 2),
+				objEl.offsetWidth,
+				objEl.offsetHeight,
+				{
+					chamfer: { radius: parseInt(style.borderRadius, 10) },
+				}
+			);
+		}
+		objEl.id = obj.id;
+		objs.push(obj);
+	}
+
+	Matter.World.add(engine.world, objs);
+
+	// Add mouse control
+
+	const mouse = Matter.Mouse.create(container);
+	const mouseConstraint = Matter.MouseConstraint.create(engine, {
+		mouse: mouse,
+		constraint: {
+			stiffness: 0.05,
+			render: {
+				visible: false
+			}
+		}
+	});
+
+	Matter.World.add(engine.world, mouseConstraint);
+
+	// keep the mouse in sync with rendering
+	render.mouse = mouse;
+
+	for (const objEl of objEls) {
+		objEl.style.position = `absolute`;
+		objEl.style.top = 0;
+		objEl.style.left = 0;
+		objEl.style.margin = 0;
+	}
+
+	window.requestAnimationFrame(update);
+
+	let stop = false;
+
+	function update() {
+		for (const objEl of objEls) {
+			const obj = objs.find(obj => obj.id.toString() === objEl.id.toString());
+			if (obj == null) continue;
+
+			const x = (obj.position.x - objEl.offsetWidth / 2);
+			const y = (obj.position.y - objEl.offsetHeight / 2);
+			const angle = obj.angle;
+			objEl.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
+		}
+
+		if (!stop) {
+			window.requestAnimationFrame(update);
+		}
+	}
+
+	// 奈落に落ちたオブジェクトは消す
+	const intervalId = setInterval(() => {
+		for (const obj of objs) {
+			if (obj.position.y > (containerHeight + 1024)) Matter.World.remove(world, obj);
+		}
+	}, 1000 * 10);
+
+	return {
+		stop: () => {
+			stop = true;
+			Matter.Runner.stop(runner);
+			clearInterval(intervalId);
+		}
+	};
+}
@@ -80,6 +80,7 @@ export const defaultDeviceSettings = {
 	useFullReactionPicker: false,
 	reactionPickerWidth: 1,
 	reactionPickerHeight: 1,
+	showGapBetweenNotesInTimeline: true,
 	sidebarDisplay: 'full', // full, icon, hide
 	instanceTicker: 'remote', // none, remote, always
 	roomGraphicsQuality: 'medium',
@@ -298,6 +299,7 @@ export const store = createStore({
 				},

 				//#region Deck
+				// TODO: deck関連は動的にモジュール読み込みしたい
 				addDeckColumn(state, column) {
 					if (column.name == undefined) column.name = null;
 					state.deck.columns.push(column);
@@ -415,6 +417,12 @@ export const store = createStore({
 					column.widgets = column.widgets.filter(w => w.id != x.widget.id);
 				},

+				setDeckWidgets(state, x) {
+					const column = state.deck.columns.find(c => c.id == x.id);
+					if (column == null) return;
+					column.widgets = x.widgets;
+				},
+
 				renameDeckColumn(state, x) {
 					const column = state.deck.columns.find(c => c.id == x.id);
 					if (column == null) return;
@@ -422,9 +430,9 @@ export const store = createStore({
 				},

 				updateDeckColumn(state, x) {
-					let column = state.deck.columns.find(c => c.id == x.id);
-					if (column == null) return;
-					column = x;
+					const column = state.deck.columns.findIndex(c => c.id == x.id);
+					if (column > -1) return;
+					state.deck.columns[column] = x;
 				},
 				//#endregion

@@ -2,7 +2,7 @@

 :root {
 	--baseContentWidth: 760px;
-	--radius: 8px;
+	--radius: 12px;
 	--marginFull: 16px;
 	--marginHalf: 10px;

@@ -26,7 +26,7 @@ html {
 	background-position: center;
 	color: var(--fg);
 	overflow: auto;
-	font-family: "BIZ UDPGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+	font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
 	line-height: 1.35;
 	text-size-adjust: 100%;

@@ -236,8 +236,6 @@ hr {
 }

 ._panel {
-	//position: relative;
-	//z-index: 1;
 	background: var(--panel);
 	border-radius: var(--radius);
 	//border: var(--panelBorder);
@@ -289,12 +287,24 @@ hr {
 	}
 }

-._close_ ._list_ > * {
+._noGap_ ._list_ {
+	@extend ._panel;
+
+	> * {
+		margin: 0 !important;
+		border: none;
+		border-bottom: solid 1px var(--divider);
+		border-radius: 0;
+		box-shadow: none;
+	}
+}
+
+._inContainer_ ._list_ > * {
+	margin: 0 !important;
 	border: none;
 	border-bottom: solid 1px var(--divider);
 	border-radius: 0;
 	box-shadow: none;
-	margin: 0 !important;
 }

 ._loadMore {
@@ -322,6 +332,7 @@ hr {
 ._popup {
 	background: var(--panel);
 	border-radius: var(--radius);
+	contain: content;
 }

 ._section {
@@ -76,5 +76,6 @@
 		X13: 'rgba(255, 255, 255, 0.15)',
 		X14: ':alpha<0.5<@navBg',
 		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
 	},
 }
@@ -76,5 +76,6 @@
 		X13: 'rgba(0, 0, 0, 0.15)',
 		X14: ':alpha<0.5<@navBg',
 		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
 	},
 }
@@ -8,7 +8,7 @@

 	props: {
 		divider: '#2d2d2d',
-		panel: '#0a0a0a',
+		panel: '#131313',
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
 		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
@@ -3,7 +3,7 @@
 	<XSidebar ref="nav"/>

 	<!-- TODO: deckMainColumnPlace を見て位置変える -->
-	<deck-column class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
+	<DeckColumn class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
 		<template #header>
 			<XHeader :info="pageInfo"/>
 		</template>
@@ -15,13 +15,13 @@
 				</keep-alive>
 			</transition>
 		</router-view>
-	</deck-column>
+	</DeckColumn>

 	<template v-for="ids in layout">
 		<div v-if="ids.length > 1" class="folder column">
-			<deck-column-core v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
+			<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
 		</div>
-		<deck-column-core v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
+		<DeckColumnCore v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
 	</template>

 	<button @click="addColumn" class="_button add"><Fa :icon="faPlus"/></button>
@@ -1,6 +1,6 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _inContainer_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
@@ -13,14 +13,16 @@
 				<MkButton inline @click="edit = false">{{ $t('close') }}</MkButton>
 			</header>
 			<XDraggable
-				:list="column.widgets"
+				v-model="_widgets"
+				item-key="id"
 				animation="150"
-				@sort="onWidgetSort"
 			>
-				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
-					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><Fa :icon="faTimes"/></button>
-					<component :is="`mkw-${widget.name}`" :widget="widget" :setting-callback="setting => settings[widget.id] = setting" :column="column"/>
-				</div>
+				<template #item="{element}">
+					<div class="customize-container" @click="widgetFunc(element.id)">
+						<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
+						<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column"/>
+					</div>
+				</template>
 			</XDraggable>
 		</template>
 		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
@@ -40,7 +42,7 @@ import { widgets } from '../../widgets';
 export default defineComponent({
 	components: {
 		XColumn,
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		MkSelect,
 		MkButton,
 	},
@@ -67,6 +69,20 @@ export default defineComponent({
 		};
 	},

+	computed: {
+		_widgets: {
+			get() {
+				return this.column.widgets;
+			},
+			set(value) {
+				this.$store.commit('deviceUser/setDeckWidgets', {
+					id: this.column.id,
+					widgets: value
+				});
+			}
+		}
+	},
+
 	created() {
 		this.menu = [{
 			icon: faCog,
@@ -82,10 +98,6 @@ export default defineComponent({
 			this.settings[id]();
 		},

-		onWidgetSort() {
-			this.saveWidgets();
-		},
-
 		addWidget() {
 			if (this.widgetAdderSelected == null) return;

@@ -107,10 +119,6 @@ export default defineComponent({
 				widget
 			});
 		},
-
-		saveWidgets() {
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
-		}
 	}
 });
 </script>
@@ -142,7 +142,6 @@ export default defineComponent({
 			-webkit-backdrop-filter: blur(32px);
 			backdrop-filter: blur(32px);
 			background-color: var(--header);
-			border-bottom: solid 1px var(--divider);

 			> ._button {
 				height: $header-height;
@@ -294,7 +294,7 @@ export default defineComponent({
 			-webkit-backdrop-filter: blur(32px);
 			backdrop-filter: blur(32px);
 			background-color: var(--header);
-			border-bottom: solid 1px var(--divider);
+			//border-bottom: solid 1px var(--divider);
 			user-select: none;
 		}

@@ -3,25 +3,27 @@
 	<template v-if="editMode">
 		<MkButton primary @click="addWidget" class="add"><Fa :icon="faPlus"/></MkButton>
 		<XDraggable
-			:list="widgets"
+			v-model="widgets"
+			item-key="id"
 			handle=".handle"
 			animation="150"
 			class="sortable"
-			@sort="onWidgetSort"
 		>
-			<div v-for="widget in widgets" class="customize-container _panel" :key="widget.id">
-				<header>
-					<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><Fa :icon="faTimes"/></button>
-				</header>
-				<div @click="widgetFunc(widget.id)">
-					<component class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :setting-callback="setting => settings[widget.id] = setting"/>
+			<template #item="{element}">
+				<div class="customize-container _panel">
+					<header>
+						<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + element.name) }}<button class="remove _button" @click="removeWidget(element)"><Fa :icon="faTimes"/></button>
+					</header>
+					<div @click="widgetFunc(element.id)">
+						<component class="_inContainer_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting"/>
+					</div>
 				</div>
-			</div>
+			</template>
 		</XDraggable>
 		<button @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $t('editWidgetsExit') }}</button>
 	</template>
 	<template v-else>
-		<component v-for="widget in widgets" class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget"/>
+		<component v-for="widget in widgets" class="_inContainer_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget"/>
 		<button @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $t('editWidgets') }}</button>
 	</template>
 </div>
@@ -38,7 +40,7 @@ import MkButton from '@/components/ui/button.vue';
 export default defineComponent({
 	components: {
 		MkButton,
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 	},

 	emits: ['mounted'],
@@ -52,8 +54,13 @@ export default defineComponent({
 	},

 	computed: {
-		widgets(): any {
-			return this.$store.state.deviceUser.widgets;
+		widgets: {
+			get() {
+				return this.$store.state.deviceUser.widgets;
+			},
+			set(value) {
+				this.$store.commit('deviceUser/setWidgets', value);
+			}
 		},
 	},

@@ -66,11 +73,6 @@ export default defineComponent({
 			this.settings[id]();
 		},

-		onWidgetSort() {
-			// TODO: vuexを直接書き換えているのでなんとかする
-			this.saveHome();
-		},
-
 		async addWidget() {
 			const { canceled, result: widget } = await os.dialog({
 				type: null,
@@ -1,5 +1,5 @@
 <template>
-<DesignA/>
+<DesignB/>
 <XCommon/>
 </template>

@@ -2,12 +2,6 @@
 <div class="mk-app">
 	<div class="banner" v-if="$route.path === '/'" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
 		<div>
-			<header>
-				<MkA class="link" to="/">{{ $t('home') }}</MkA>
-				<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
-				<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
-				<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
-			</header>
 			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
 			<div class="about" v-if="meta">
 				<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
@@ -20,16 +14,6 @@
 	</div>
 	<div class="banner-mini" v-else :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
 		<div>
-			<header>
-				<MkA class="link" to="/">{{ $t('home') }}</MkA>
-				<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
-				<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
-				<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
-				<div class="action">
-					<button class="_button primary" @click="signup()">{{ $t('signup') }}</button>
-					<button class="_button" @click="signin()">{{ $t('login') }}</button>
-				</div>
-			</header>
 			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
 		</div>
 	</div>
@@ -62,10 +46,8 @@ import { host, instanceName } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
 import MkPagination from '@/components/ui/pagination.vue';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XHeader from '../_common_/header.vue';
+import XHeader from './header.vue';

 const DESKTOP_THRESHOLD = 1100;

@@ -150,18 +132,6 @@ export default defineComponent({
 		onTransition() {
 			if (window._scroll) window._scroll();
 		},
-
-		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
-			}, {}, 'closed');
-		},
-
-		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
-			}, {}, 'closed');
-		}
 	}
 });
 </script>
@@ -264,59 +234,6 @@ export default defineComponent({
 	}

 	> .main {
-		> header {
-			position: relative;
-			z-index: 1;
-			background: var(--panel);
-			padding: 0 32px;
-			text-align: left;
-			overflow: auto;
-			white-space: nowrap;
-
-			> .link {
-				display: inline-block;
-				line-height: 60px;
-				padding: 0 0.7em;
-
-				&.MkA-active {
-					box-shadow: 0 -2px 0 0 var(--accent) inset;
-				}
-			}
-		}
-
-		> .banner {
-			position: relative;
-			width: 100%;
-			height: 200px;
-			background-size: cover;
-			background-position: center;
-
-			&.asBg {
-				position: absolute;
-				left: 0;
-				height: 320px;
-			}
-
-			&:after {
-				content: "";
-				display: block;
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				height: 64px;
-				background: linear-gradient(transparent, var(--bg));
-			}
-
-			> h1 {
-				margin: 0;
-				text-align: center;
-				color: #fff;
-				text-shadow: 0 0 8px #000;
-				line-height: 200px;
-			}
-		}
-
 		> .contents {
 			position: relative;
 			z-index: 1;
@@ -326,14 +243,6 @@ export default defineComponent({
 				top: 0;
 				left: 0;
 				z-index: 1000;
-				height: 60px;
-				width: 100%;
-				line-height: 60px;
-				text-align: center;
-				-webkit-backdrop-filter: blur(32px);
-				backdrop-filter: blur(32px);
-				background-color: var(--header);
-				border-bottom: 1px solid var(--divider);
 			}

 			> .powered-by {
@@ -1,60 +1,50 @@
 <template>
-<div class="mk-app">
+<div class="mk-app" :style="{ backgroundImage: root ? `url(${ $store.state.instance.meta.backgroundImageUrl })` : 'none' }">
+	<a v-if="root" href="https://github.com/syuilo/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
 	<div class="side" v-if="!narrow">
-		<div :style="{ backgroundImage: `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
-			<div class="fade"></div>
-			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
-			<div class="about _panel" v-if="meta">
-				<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
-			</div>
-			<div class="action">
-				<button class="_button primary" @click="signup()">{{ $t('signup') }}</button>
-				<button class="_button" @click="signin()">{{ $t('login') }}</button>
-			</div>
-			<div class="announcements panel">
-				<header>{{ $t('announcements') }}</header>
-				<MkPagination :pagination="announcements" #default="{items}" class="list">
-					<section class="item" v-for="(announcement, i) in items" :key="announcement.id">
-						<div class="title">{{ announcement.title }}</div>
-						<div class="content">
-							<Mfm :text="announcement.text"/>
-							<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-						</div>
-					</section>
-				</MkPagination>
-			</div>
-		</div>
+		<XKanban class="kanban" full :transparent="root" :powered-by="root"/>
 	</div>

 	<div class="main">
-		<header>
-			<MkA class="link" to="/">{{ $t('home') }}</MkA>
-			<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
-			<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
-			<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
-		</header>
+		<XKanban class="banner" :full="root" :transparent="root" :powered-by="root" v-if="narrow"/>

-		<div v-if="narrow" class="banner" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
-			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
-		</div>
-
-		<div class="contents" ref="contents" :class="{ wallpaper }">
-			<header class="header" ref="header" v-show="$route.path !== '/'">
-				<XHeader :info="pageInfo"/>
-			</header>
-			<main ref="main">
+		<div class="contents">
+			<XHeader class="header" :info="pageInfo" v-if="!root"/>
+			<main>
 				<router-view v-slot="{ Component }">
 					<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
 						<component :is="Component" :ref="changePage"/>
 					</transition>
 				</router-view>
 			</main>
-			<div class="powered-by">
+			<div class="powered-by" v-if="!root">
 				<b><MkA to="/">{{ host }}</MkA></b>
 				<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
 			</div>
 		</div>
 	</div>
+
+	<transition name="tray-back">
+		<div class="menu-back _modalBg"
+			v-if="showMenu"
+			@click="showMenu = false"
+			@touchstart.passive="showMenu = false"
+		></div>
+	</transition>
+
+	<transition name="tray">
+		<div v-if="showMenu" class="menu">
+			<MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $t('home') }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $t('explore') }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $t('featured') }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $t('channel') }}</MkA>
+			<div class="action">
+				<button class="_buttonPrimary" @click="signup()">{{ $t('signup') }}</button>
+				<button class="_button" @click="signin()">{{ $t('login') }}</button>
+			</div>
+		</div>
+	</transition>
 </div>
 </template>

@@ -68,13 +58,15 @@ import MkPagination from '@/components/ui/pagination.vue';
 import XSigninDialog from '@/components/signin-dialog.vue';
 import XSignupDialog from '@/components/signup-dialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XHeader from '../_common_/header.vue';
+import XHeader from './header.vue';
+import XKanban from './kanban.vue';

 const DESKTOP_THRESHOLD = 1100;

 export default defineComponent({
 	components: {
 		XHeader,
+		XKanban,
 		MkPagination,
 		MkButton,
 	},
@@ -86,6 +78,7 @@ export default defineComponent({
 			pageKey: 0,
 			pageInfo: null,
 			meta: null,
+			showMenu: false,
 			narrow: window.innerWidth < 1280,
 			announcements: {
 				endpoint: 'announcements',
@@ -106,6 +99,10 @@ export default defineComponent({
 				'h|/': this.help
 			};
 		},
+
+		root(): boolean {
+			return this.$route.path === '/';
+		},
 	},

 	watch: {
@@ -165,192 +162,65 @@ export default defineComponent({
 });
 </script>

+<style>
+.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+</style>
+
 <style lang="scss" scoped>
+.tray-enter-active,
+.tray-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-enter-from,
+.tray-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.tray-back-enter-active,
+.tray-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-back-enter-from,
+.tray-back-leave-active {
+	opacity: 0;
+}
+
 .mk-app {
 	display: flex;
 	min-height: 100vh;
+	background-position: center;
+	background-size: cover;
+	background-attachment: fixed;

 	> .side {
 		width: 500px;
 		height: 100vh;
-		text-align: center;

-		> div {
+		> .kanban {
 			position: fixed;
 			top: 0;
 			left: 0;
 			width: 500px;
 			height: 100vh;
-			background-position: center;
-			background-size: cover;
-
-			> .panel {
-				-webkit-backdrop-filter: blur(8px);
-				backdrop-filter: blur(8px);
-				background: rgba(0, 0, 0, 0.5);
-				border-radius: var(--radius);
-
-				&, * {
-					color: #fff !important;
-				}
-			}
-
-			> .fade {
-				position: absolute;
-				z-index: -1;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 300px;
-				background: linear-gradient(rgba(#000, 0.5), transparent);
-			}
-
-			> h1 {
-				display: block;
-				margin: 0;
-				padding: 64px 32px 48px 32px;
-				color: #fff;
-
-				> .logo {
-					vertical-align: bottom;
-					max-height: 150px;
-				}
-			}
-
-			> .about {
-				display: block;
-				margin: 0 64px 16px 64px;
-				padding: 24px;
-				text-align: center;
-				box-sizing: border-box;
-			}
-
-			> .action {
-				padding: 0 64px;
-
-				> button {
-					display: block;
-					width: 100%;
-					padding: 10px;
-					box-sizing: border-box;
-					text-align: center;
-					border-radius: 999px;
-					background: var(--panel);
-
-					&.primary {
-						background: var(--accent);
-						color: #fff;
-					}
-
-					&:first-child {
-						margin-bottom: 16px;
-					}
-				}
-			}
-
-			> .announcements {
-				margin: 64px 64px 16px 64px;
-				text-align: left;
-
-				> header {
-					padding: 12px 16px;
-					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
-				}
-
-				> .list {
-					max-height: 300px;
-					overflow: auto;
-
-					> .item {
-						padding: 12px 16px;
-
-						& + .item {
-							border-top: solid 1px rgba(255, 255, 255, 0.5);
-						}
-
-						> .title {
-							font-weight: bold;
-						}
-					}
-				}
-			}
+			overflow: auto;
 		}
 	}

 	> .main {
 		flex: 1;
-
-		> header {
-			position: relative;
-			z-index: 1;
-			background: var(--panel);
-			padding: 0 32px;
-			text-align: left;
-			overflow: auto;
-			white-space: nowrap;
-
-			> .link {
-				display: inline-block;
-				line-height: 60px;
-				padding: 0 0.7em;
-
-				&.MkA-active {
-					box-shadow: 0 -2px 0 0 var(--accent) inset;
-				}
-			}
-		}
+		min-width: 0;

 		> .banner {
-			position: relative;
-			width: 100%;
-			height: 200px;
-			background-size: cover;
-			background-position: center;
-
-			&:after {
-				content: "";
-				display: block;
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				height: 64px;
-				background: linear-gradient(transparent, var(--bg));
-			}
-
-			> h1 {
-				margin: 0;
-				padding: 32px;
-				text-align: center;
-				color: #fff;
-				text-shadow: 0 0 8px #000;
-
-				> .logo {
-					vertical-align: bottom;
-					max-height: 150px;
-				}
-			}
 		}

 		> .contents {
 			position: relative;
 			z-index: 1;

-			> .header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				z-index: 1000;
-				height: 60px;
-				width: 100%;
-				line-height: 60px;
-				text-align: center;
-				-webkit-backdrop-filter: blur(32px);
-				backdrop-filter: blur(32px);
-				background-color: var(--header);
-				border-bottom: 1px solid var(--divider);
-			}
-
 			> .powered-by {
 				padding: 28px;
 				font-size: 14px;
@@ -365,8 +235,54 @@ export default defineComponent({
 			}
 		}
 	}
+
+	> .menu-back {
+		position: fixed;
+		z-index: 1001;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+	}
+
+	> .menu {
+		position: fixed;
+		z-index: 1001;
+		top: 0;
+		left: 0;
+		width: 240px;
+		height: 100vh;
+		background: var(--panel);
+
+		> .link {
+			display: block;
+			padding: 16px;
+
+			> .icon {
+				margin-right: 1em;
+			}
+		}
+
+		> .action {
+			padding: 16px;
+
+			> button {
+				display: block;
+				width: 100%;
+				padding: 10px;
+				box-sizing: border-box;
+				text-align: center;
+				border-radius: 999px;
+
+				&._button {
+					background: var(--panel);
+				}
+
+				&:first-child {
+					margin-bottom: 16px;
+				}
+			}
+		}
+	}
 }
 </style>
-
-<style lang="scss">
-</style>
@@ -0,0 +1,230 @@
+<template>
+<div class="sqxihjet">
+	<div class="wide" v-if="narrow === false">
+		<div class="content">
+			<MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $t('home') }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $t('explore') }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $t('featured') }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $t('channel') }}</MkA>
+			<div class="page active link" v-if="info">
+				<div class="title">
+					<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
+					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+					<span v-if="info.title" class="text">{{ info.title }}</span>
+					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+				</div>
+				<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
+			</div>
+			<div class="right">
+				<button class="_button search" @click="search()"><Fa :icon="faSearch" class="icon"/><span>{{ $t('search') }}</span></button>
+				<button class="_buttonPrimary signup" @click="signup()">{{ $t('signup') }}</button>
+				<button class="_button login" @click="signin()">{{ $t('login') }}</button>
+			</div>
+		</div>
+	</div>
+	<div class="narrow" v-else-if="narrow === true">
+		<button class="menu _button" @click="$parent.showMenu = true">
+			<Fa :icon="faBars" class="icon"/>
+		</button>
+		<div class="title" v-if="info">
+			<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
+			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+			<span v-if="info.title" class="text">{{ info.title }}</span>
+			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+		</div>
+		<button class="action _button" v-if="info && info.action" @click.stop="info.action.handler">
+			<Fa :icon="info.action.icon" :key="info.action.icon" class="icon"/>
+		</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars } from '@fortawesome/free-solid-svg-icons';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import * as os from '@/os';
+import { search } from '@/scripts/search';
+
+export default defineComponent({
+	props: {
+		info: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			narrow: null,
+			showMenu: false,
+			faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars,
+		};
+	},
+
+	mounted() {
+		this.narrow = this.$el.clientWidth < 1300;
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		search
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.sqxihjet {
+	$height: 60px;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+	line-height: $height;
+	-webkit-backdrop-filter: blur(32px);
+	backdrop-filter: blur(32px);
+	background-color: var(--X16);
+
+	> .wide {
+		> .content {
+			max-width: 1400px;
+			margin: 0 auto;
+			display: flex;
+			align-items: center;
+
+			> .link {
+				$line: 3px;
+				display: inline-block;
+				padding: 0 16px;
+				line-height: $height - ($line * 2);
+				border-top: solid $line transparent;
+				border-bottom: solid $line transparent;
+
+				> .icon {
+					margin-right: 0.5em;
+				}
+
+				&.page {
+					border-bottom-color: var(--accent);
+				}
+			}
+
+			> .page {
+				> .title {
+					display: inline-block;
+					vertical-align: bottom;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					position: relative;
+
+					> .icon + .text {
+						margin-left: 8px;
+					}
+
+					> .avatar {
+						$size: 32px;
+						display: inline-block;
+						width: $size;
+						height: $size;
+						vertical-align: middle;
+						margin-right: 8px;
+						pointer-events: none;
+					}
+
+					&._button {
+						&:hover {
+							color: var(--fgHighlighted);
+						}
+					}
+
+					&.selected {
+						box-shadow: 0 -2px 0 0 var(--accent) inset;
+						color: var(--fgHighlighted);
+					}
+				}
+
+				> .action {
+					padding: 0 0 0 16px;
+				}
+			}
+
+			> .right {
+				margin-left: auto;
+
+				> .search {
+					background: var(--bg);
+					border-radius: 999px;
+					width: 230px;
+					line-height: $height - 20px;
+					margin-right: 16px;
+					text-align: left;
+
+					> * {
+						opacity: 0.7;
+					}
+
+					> .icon {
+						padding: 0 16px;
+					}
+				}
+
+				> .signup {
+					border-radius: 999px;
+					padding: 0 24px;
+					line-height: $height - 20px;
+				}
+
+				> .login {
+					padding: 0 16px;
+				}
+			}
+		}
+	}
+
+	> .narrow {
+		display: flex;
+
+		> .menu,
+		> .action {
+			width: $height;
+			height: $height;
+			font-size: 20px;
+		}
+
+		> .title {
+			flex: 1;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			position: relative;
+			text-align: center;
+
+			> .icon + .text {
+				margin-left: 8px;
+			}
+
+			> .avatar {
+				$size: 32px;
+				display: inline-block;
+				width: $size;
+				height: $size;
+				vertical-align: middle;
+				margin-right: 8px;
+				pointer-events: none;
+			}
+		}
+	}
+}
+</style>
@@ -0,0 +1,257 @@
+<template>
+<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
+	<div class="back" :class="{ transparent }"></div>
+	<div class="contents">
+		<div class="wrapper">
+			<h1 v-if="meta" :class="{ full }">
+				<MkA to="/" class="link"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></MkA>
+			</h1>
+			<template v-if="full">
+				<div class="about" v-if="meta">
+					<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
+				</div>
+				<div class="action">
+					<button class="_buttonPrimary" @click="signup()">{{ $t('signup') }}</button>
+					<button class="_button" @click="signin()">{{ $t('login') }}</button>
+				</div>
+				<div class="announcements panel">
+					<header>{{ $t('announcements') }}</header>
+					<MkPagination :pagination="announcements" #default="{items}" class="list">
+						<section class="item" v-for="(announcement, i) in items" :key="announcement.id">
+							<div class="title">{{ announcement.title }}</div>
+							<div class="content">
+								<Mfm :text="announcement.text"/>
+								<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+							</div>
+						</section>
+					</MkPagination>
+				</div>
+				<div class="powered-by" v-if="poweredBy">
+					<b><MkA to="/">{{ host }}</MkA></b>
+					<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
+				</div>
+			</template>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { } from '@fortawesome/free-solid-svg-icons';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import MkPagination from '@/components/ui/pagination.vue';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+		MkButton,
+	},
+
+	props: {
+		full: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		transparent: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		poweredBy: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			host,
+			instanceName,
+			pageInfo: null,
+			meta: null,
+			narrow: window.innerWidth < 1280,
+			announcements: {
+				endpoint: 'announcements',
+				limit: 10,
+			},
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rwqkcmrc {
+	position: relative;
+	text-align: center;
+	background-position: center;
+	background-size: cover;
+	// TODO: パララックスにしたい
+
+	> .back {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.3);
+
+		&.transparent {
+			-webkit-backdrop-filter: blur(12px);
+			backdrop-filter: blur(12px);
+		}
+	}
+
+	> .contents {
+		position: relative;
+		z-index: 1;
+		height: inherit;
+		overflow: auto;
+
+		> .wrapper {
+			max-width: 380px;
+			padding: 0 16px;
+			box-sizing: border-box;
+			margin: 0 auto;
+
+			> .panel {
+				-webkit-backdrop-filter: blur(8px);
+				backdrop-filter: blur(8px);
+				background: rgba(0, 0, 0, 0.5);
+				border-radius: var(--radius);
+
+				&, * {
+					color: #fff !important;
+				}
+			}
+
+			> h1 {
+				display: block;
+				margin: 0;
+				padding: 32px 0 32px 0;
+				color: #fff;
+
+				&.full {
+					padding: 64px 0 0 0;
+
+					> .link {
+						> ::v-deep(.logo) {
+							max-height: 130px;
+						}
+					}
+				}
+
+				> .link {
+					display: block;
+
+					> ::v-deep(.logo) {
+						vertical-align: bottom;
+						max-height: 100px;
+					}
+				}
+			}
+
+			> .about {
+				display: block;
+				margin: 24px 0;
+				text-align: center;
+				box-sizing: border-box;
+				text-shadow: 0 0 8px black;
+				color: #fff;
+			}
+
+			> .action {
+				> button {
+					display: block;
+					width: 100%;
+					padding: 10px;
+					box-sizing: border-box;
+					text-align: center;
+					border-radius: 999px;
+
+					&._button {
+						background: var(--panel);
+					}
+
+					&:first-child {
+						margin-bottom: 16px;
+					}
+				}
+			}
+
+			> .announcements {
+				margin: 32px 0;
+				text-align: left;
+
+				> header {
+					padding: 12px 16px;
+					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
+				}
+
+				> .list {
+					max-height: 300px;
+					overflow: auto;
+
+					> .item {
+						padding: 12px 16px;
+
+						& + .item {
+							border-top: solid 1px rgba(255, 255, 255, 0.5);
+						}
+
+						> .title {
+							font-weight: bold;
+						}
+
+						> .content {
+							> img {
+								max-width: 100%;
+							}
+						}
+					}
+				}
+			}
+
+			> .powered-by {
+				padding: 28px;
+				font-size: 14px;
+				text-align: center;
+				border-top: 1px solid rgba(255, 255, 255, 0.5);
+				color: #fff;
+
+				> small {
+					display: block;
+					margin-top: 8px;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+}
+</style>
@@ -13,6 +13,7 @@ export default function(app: App) {
 	app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue')));
 	app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
 	app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
+	app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
 }

 export const widgets = [
@@ -28,4 +29,5 @@ export const widgets = [
 	'digitalClock',
 	'federation',
 	'postForm',
+	'slideshow',
 ];
@@ -0,0 +1,168 @@
+<template>
+<div class="kvausudm _panel">
+	<div @click="choose">
+		<p v-if="props.folderId == null">
+			<template v-if="isCustomizeMode">{{ $t('folder-customize-mode') }}</template>
+			<template v-else>{{ $t('folder') }}</template>
+		</p>
+		<p v-if="props.folderId != null && images.length === 0 && !fetching">{{ $t('no-image') }}</p>
+		<div ref="slideA" class="slide a"></div>
+		<div ref="slideB" class="slide b"></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {  } from '@fortawesome/free-solid-svg-icons';
+import define from './define';
+import * as os from '@/os';
+
+const widget = define({
+	name: 'slideshow',
+	props: () => ({
+		height: {
+			type: 'number',
+			default: 300,
+		},
+		folderId: {
+			type: 'string',
+			default: null,
+			hidden: true,
+		},
+	})
+});
+
+export default defineComponent({
+	extends: widget,
+	data() {
+		return {
+			images: [],
+			fetching: true,
+			clock: null
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.applySize();
+		});
+
+		if (this.props.folderId != null) {
+			this.fetch();
+		}
+
+		this.clock = setInterval(this.change, 10000);
+	},
+	beforeUnmount() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		applySize() {
+			let h;
+
+			if (this.props.size == 1) {
+				h = 250;
+			} else {
+				h = 170;
+			}
+
+			this.$el.style.height = `${h}px`;
+		},
+		resize() {
+			if (this.props.size == 1) {
+				this.props.size = 0;
+			} else {
+				this.props.size++;
+			}
+			this.save();
+
+			this.applySize();
+		},
+		change() {
+			if (this.images.length == 0) return;
+
+			const index = Math.floor(Math.random() * this.images.length);
+			const img = `url(${ this.images[index].url })`;
+
+			(this.$refs.slideB as any).style.backgroundImage = img;
+
+			this.$refs.slideB.classList.add('anime');
+			setTimeout(() => {
+				// 既にこのウィジェットがunmountされていたら要素がない
+				if ((this.$refs.slideA as any) == null) return;
+
+				(this.$refs.slideA as any).style.backgroundImage = img;
+
+				this.$refs.slideB.classList.remove('anime');
+			}, 1000);
+		},
+		fetch() {
+			this.fetching = true;
+
+			os.api('drive/files', {
+				folderId: this.props.folderId,
+				type: 'image/*',
+				limit: 100
+			}).then(images => {
+				this.images = images;
+				this.fetching = false;
+				(this.$refs.slideA as any).style.backgroundImage = '';
+				(this.$refs.slideB as any).style.backgroundImage = '';
+				this.change();
+			});
+		},
+		choose() {
+			os.selectDriveFolder(false).then(folder => {
+				if (folder == null) {
+					return;
+				}
+				this.props.folderId = folder.id;
+				this.save();
+				this.fetch();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.kvausudm {
+	position: relative;
+
+	> div {
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+
+		> p {
+			display: block;
+			margin: 1em;
+			text-align: center;
+			color: #888;
+		}
+
+		> * {
+			pointer-events: none;
+		}
+
+		> .slide {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-size: cover;
+			background-position: center;
+
+			&.b {
+				opacity: 0;
+			}
+
+			&.anime {
+				transition: opacity 1s;
+				opacity: 1;
+			}
+		}
+	}
+}
+</style>
@@ -1,6 +1,7 @@
 import { Entity, Column, PrimaryColumn, ManyToOne, JoinColumn } from 'typeorm';
 import { User } from './user';
 import { id } from '../id';
+import { Clip } from './clip';

@Entity()
 export class Meta {
@@ -81,6 +82,12 @@ export class Meta {
 	})
 	public pinnedPages: string[];

+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public pinnedClipId: Clip['id'] | null;
+
 	@Column('varchar', {
 		length: 512,
 		nullable: true,
@@ -157,6 +157,13 @@ export class User {
 	})
 	public isModerator: boolean;

+	@Index()
+	@Column('boolean', {
+		default: true,
+		comment: 'Whether the User is explorable.'
+	})
+	public isExplorable: boolean;
+
 	@Column('varchar', {
 		length: 128, array: true, default: '{}'
 	})
@@ -24,6 +24,12 @@ export class ClipRepository extends Repository<Clip> {
 			isPublic: clip.isPublic,
 		});
 	}
+
+	public packMany(
+		clips: Clip[],
+	) {
+		return Promise.all(clips.map(x => this.pack(x)));
+	}
 }

 export const packedClipSchema = {
@@ -240,6 +240,7 @@ export class UserRepository extends Repository<User> {
 				carefulBot: profile!.carefulBot,
 				autoAcceptFollowed: profile!.autoAcceptFollowed,
 				noCrawle: profile!.noCrawle,
+				isExplorable: user.isExplorable,
 				hasUnreadSpecifiedNotes: NoteUnreads.count({
 					where: { userId: user.id, isSpecified: true },
 					take: 1
@@ -153,6 +153,7 @@ export async function createPerson(uri: string, resolver?: Resolver): Promise<Us
 				lastFetchedAt: new Date(),
 				name: person.name,
 				isLocked: !!person.manuallyApprovesFollowers,
+				isExplorable: !!person.discoverable,
 				username: person.preferredUsername,
 				usernameLower: person.preferredUsername!.toLowerCase(),
 				host,
@@ -336,6 +337,7 @@ export async function updatePerson(uri: string, resolver?: Resolver | null, hint
 		isBot: object.type === 'Service',
 		isCat: (person as any).isCat === true,
 		isLocked: !!person.manuallyApprovesFollowers,
+		isExplorable: !!person.discoverable,
 	} as Partial<User>;

 	if (avatar) {
@@ -38,6 +38,7 @@ export const attachLdSignature = async (activity: any, user: ILocalUser): Promis
 		toot: 'http://joinmastodon.org/ns#',
 		Emoji: 'toot:Emoji',
 		featured: 'toot:featured',
+		discoverable: 'toot:discoverable',
 		// schema
 		schema: 'http://schema.org#',
 		PropertyValue: 'schema:PropertyValue',
@@ -70,6 +70,7 @@ export async function renderPerson(user: ILocalUser) {
 		image: banner ? renderImage(banner) : null,
 		tag,
 		manuallyApprovesFollowers: user.isLocked,
+		discoverable: !!user.isExplorable,
 		publicKey: renderKey(user, keypair, `#main-key`),
 		isCat: user.isCat,
 		attachment: attachment.length ? attachment : undefined
@@ -135,6 +135,7 @@ export interface IPerson extends IObject {
 	name?: string;
 	preferredUsername?: string;
 	manuallyApprovesFollowers?: boolean;
+	discoverable?: boolean;
 	inbox?: string;
 	sharedInbox?: string;	// 後方互換性のため
 	publicKey: {
@@ -220,6 +220,10 @@ export const meta = {
 			validator: $.optional.arr($.str),
 		},

+		pinnedClipId: {
+			validator: $.optional.nullable.type(ID),
+		},
+
 		langs: {
 			validator: $.optional.arr($.str),
 			desc: {
@@ -561,6 +565,10 @@ export default define(meta, async (ps, me) => {
 		set.pinnedPages = ps.pinnedPages.filter(Boolean);
 	}

+	if (ps.pinnedClipId !== undefined) {
+		set.pinnedClipId = ps.pinnedClipId;
+	}
+
 	if (ps.summalyProxy !== undefined) {
 		set.summalyProxy = ps.summalyProxy;
 	}
@@ -92,6 +92,10 @@ export const meta = {
 			}
 		},

+		isExplorable: {
+			validator: $.optional.bool,
+		},
+
 		carefulBot: {
 			validator: $.optional.bool,
 			desc: {
@@ -208,6 +212,7 @@ export default define(meta, async (ps, user, token) => {
 	}
 	if (ps.mutingNotificationTypes !== undefined) profileUpdates.mutingNotificationTypes = ps.mutingNotificationTypes as typeof notificationTypes[number][];
 	if (typeof ps.isLocked === 'boolean') updates.isLocked = ps.isLocked;
+	if (typeof ps.isExplorable === 'boolean') updates.isExplorable = ps.isExplorable;
 	if (typeof ps.isBot === 'boolean') updates.isBot = ps.isBot;
 	if (typeof ps.carefulBot === 'boolean') profileUpdates.carefulBot = ps.carefulBot;
 	if (typeof ps.autoAcceptFollowed === 'boolean') profileUpdates.autoAcceptFollowed = ps.autoAcceptFollowed;
@@ -143,6 +143,7 @@ export default define(meta, async (ps, me) => {

 		...(ps.detail ? {
 			pinnedPages: instance.pinnedPages,
+			pinnedClipId: instance.pinnedClipId,
 			cacheRemoteFiles: instance.cacheRemoteFiles,
 			proxyRemoteFiles: instance.proxyRemoteFiles,
 			requireSetup: (await Users.count({
@@ -1,5 +1,5 @@
 import define from '../define';
-import { Notes, Users } from '../../../models';
+import { NoteReactions, Notes, Users } from '../../../models';
 import { federationChart, driveChart } from '../../../services/chart';

 export const meta = {
@@ -48,10 +48,13 @@ export const meta = {
 };

 export default define(meta, async () => {
-	const [notesCount,
+	const [
+		notesCount,
 		originalNotesCount,
 		usersCount,
 		originalUsersCount,
+		reactionsCount,
+		//originalReactionsCount,
 		instances,
 		driveUsageLocal,
 		driveUsageRemote
@@ -60,6 +63,8 @@ export default define(meta, async () => {
 		Notes.count({ where: { userHost: null }, cache: 3600000 }),
 		Users.count({ cache: 3600000 }),
 		Users.count({ where: { host: null }, cache: 3600000 }),
+		NoteReactions.count({ cache: 3600000 }), // 1 hour
+		//NoteReactions.count({ where: { userHost: null }, cache: 3600000 }),
 		federationChart.getChart('hour', 1, null).then(chart => chart.instance.total[0]),
 		driveChart.getChart('hour', 1, null).then(chart => chart.local.totalSize[0]),
 		driveChart.getChart('hour', 1, null).then(chart => chart.remote.totalSize[0]),
@@ -70,6 +75,8 @@ export default define(meta, async () => {
 		originalNotesCount,
 		usersCount,
 		originalUsersCount,
+		reactionsCount,
+		//originalReactionsCount,
 		instances,
 		driveUsageLocal,
 		driveUsageRemote
@@ -64,12 +64,13 @@ export const meta = {

 export default define(meta, async (ps, me) => {
 	const query = Users.createQueryBuilder('user');
+	query.where('user.isExplorable = TRUE');

 	switch (ps.state) {
-		case 'admin': query.where('user.isAdmin = TRUE'); break;
-		case 'moderator': query.where('user.isModerator = TRUE'); break;
-		case 'adminOrModerator': query.where('user.isAdmin = TRUE OR isModerator = TRUE'); break;
-		case 'alive': query.where('user.updatedAt > :date', { date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5) }); break;
+		case 'admin': query.andWhere('user.isAdmin = TRUE'); break;
+		case 'moderator': query.andWhere('user.isModerator = TRUE'); break;
+		case 'adminOrModerator': query.andWhere('user.isAdmin = TRUE OR isModerator = TRUE'); break;
+		case 'alive': query.andWhere('user.updatedAt > :date', { date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5) }); break;
 	}

 	switch (ps.origin) {
@@ -0,0 +1,40 @@
+import $ from 'cafy';
+import { ID } from '../../../../misc/cafy-id';
+import define from '../../define';
+import { Clips } from '../../../../models';
+import { makePaginationQuery } from '../../common/make-pagination-query';
+
+export const meta = {
+	tags: ['users', 'clips'],
+
+	params: {
+		userId: {
+			validator: $.type(ID),
+		},
+
+		limit: {
+			validator: $.optional.num.range(1, 100),
+			default: 10
+		},
+
+		sinceId: {
+			validator: $.optional.type(ID),
+		},
+
+		untilId: {
+			validator: $.optional.type(ID),
+		},
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	const query = makePaginationQuery(Clips.createQueryBuilder('clip'), ps.sinceId, ps.untilId)
+		.andWhere(`clip.userId = :userId`, { userId: ps.userId })
+		.andWhere('clip.isPublic = true');
+
+	const clips = await query
+		.take(ps.limit!)
+		.getMany();
+
+	return await Clips.packMany(clips);
+});
@@ -0,0 +1,40 @@
+import $ from 'cafy';
+import { ID } from '../../../../misc/cafy-id';
+import define from '../../define';
+import { Pages } from '../../../../models';
+import { makePaginationQuery } from '../../common/make-pagination-query';
+
+export const meta = {
+	tags: ['users', 'pages'],
+
+	params: {
+		userId: {
+			validator: $.type(ID),
+		},
+
+		limit: {
+			validator: $.optional.num.range(1, 100),
+			default: 10
+		},
+
+		sinceId: {
+			validator: $.optional.type(ID),
+		},
+
+		untilId: {
+			validator: $.optional.type(ID),
+		},
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	const query = makePaginationQuery(Pages.createQueryBuilder('page'), ps.sinceId, ps.untilId)
+		.andWhere(`page.userId = :userId`, { userId: ps.userId })
+		.andWhere('page.visibility = \'public\'');
+
+	const pages = await query
+		.take(ps.limit!)
+		.getMany();
+
+	return await Pages.packMany(pages);
+});
@@ -42,6 +42,7 @@ export const meta = {
 export default define(meta, async (ps, me) => {
 	const query = Users.createQueryBuilder('user')
 		.where('user.isLocked = FALSE')
+		.andWhere('user.isExplorable = TRUE')
 		.andWhere('user.host IS NULL')
 		.andWhere('user.updatedAt >= :date', { date: new Date(Date.now() - ms('7days')) })
 		.andWhere('user.id != :meId', { meId: me.id })
@@ -34,6 +34,7 @@ export async function createSystemUser(username: string) {
 			token: secret,
 			isAdmin: false,
 			isLocked: true,
+			isExplorable: false,
 			isBot: true,
 		}));

--- a/Show More
+++ b/Show More