CherryPick Initialized, Update Friendly UI

2024-11-27 06:18:46 +09:00 · 2022-08-31 22:53:59 +09:00 · 2022-08-31 22:53:59 +09:00 · d9d9550d7b
commit d9d9550d7b
parent da75f83c3f
55 changed files with 12294 additions and 80 deletions
--- a/.config/example.yml
+++ b/.config/example.yml
@ -1,5 +1,5 @@
 #━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-# Misskey configuration
+# CherryPick configuration
 #━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 #   ┌─────┐
@ -15,19 +15,19 @@ url: https://example.tld/
 #───┘ Port and TLS settings └───────────────────────────────────

 #
-# Misskey requires a reverse proxy to support HTTPS connections.
+# CherryPick requires a reverse proxy to support HTTPS connections.
 #
-#                 +----- https://example.tld/ ------------+
-#   +------+      |+-------------+      +----------------+|
-#   | User | ---> || Proxy (443) | ---> | Misskey (3000) ||
-#   +------+      |+-------------+      +----------------+|
-#                 +---------------------------------------+
+#                 +-------- https://example.tld/ ------------+
+#   +------+      |+-------------+      +-------------------+|
+#   | User | ---> || Proxy (443) | ---> | CherryPick (3000) ||
+#   +------+      |+-------------+      +-------------------+|
+#                 +------------------------------------------+
 #
 #   You need to set up a reverse proxy. (e.g. nginx)
 #   An encrypted connection with HTTPS is highly recommended
 #   because tokens may be transferred in GET requests.

-# The port that your Misskey server should listen on.
+# The port that your CherryPick server should listen on.
 port: 3000

 #   ┌──────────────────────────┐
@ -38,11 +38,11 @@ db:
  port: 5432

  # Database name
-  db: misskey
+  db: cherrypick

  # Auth
-  user: example-misskey-user
-  pass: example-misskey-pass
+  user: example-cherrypick-user
+  pass: example-cherrypick-pass

  # Whether disable Caching queries
  #disableCache: true
--- a/.github/workflows/docker-develop.yml
+++ b/.github/workflows/docker-develop.yml
@ -18,7 +18,7 @@ jobs:
        id: meta
        uses: docker/metadata-action@v3
        with:
-          images: misskey/misskey
+          images: noridev/cherrypick
      - name: Log in to Docker Hub
        uses: docker/login-action@v1
        with:
@ -29,5 +29,5 @@ jobs:
        with:
          context: .
          push: true
-          tags: misskey/misskey:develop
+          tags: noridev/cherrypick:develop
          labels: develop
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@ -17,7 +17,7 @@ jobs:
        id: meta
        uses: docker/metadata-action@v3
        with:
-          images: misskey/misskey
+          images: noridev/cherrypick
      - name: Log in to Docker Hub
        uses: docker/login-action@v1
        with:
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -21,7 +21,7 @@ jobs:
        ports:
          - 54312:5432
        env:
-          POSTGRES_DB: test-misskey
+          POSTGRES_DB: test-cherrypick
          POSTGRES_HOST_AUTH_METHOD: trust
      redis:
        image: redis:6
@ -66,7 +66,7 @@ jobs:
        ports:
          - 54312:5432
        env:
-          POSTGRES_DB: test-misskey
+          POSTGRES_DB: test-cherrypick
          POSTGRES_HOST_AUTH_METHOD: trust
      redis:
        image: redis:6
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@ -0,0 +1,324 @@
+<!--
+## 12.x.x-cp-2.x.x (unreleased)
+
+### Improvements
+
+### Bugfixes
+
+-->
+
+## 12.x.x-cp-2.x.x (unreleased)
+
+### Improvements
+- 클라이언트: 전반적인 UI의 브러시 업
+- 클라이언트: MFM 함수 구문의 제안 구현
+- 클라이언트: 읽지 않은 알림만 표시하는 기능
+- 클라이언트: 알림 페이지에서 알림 종류에 따른 필터
+- 클라이언트: 애니메이션 줄이기 설정 적용 범위 확대
+- 클라이언트: 테마 컴파일러에 hue와 saturate 함수 추가
+- 클라이언트: 노트 작성 폼에 취소선 기능 추가
+- 클라이언트: 제어판 성능 개선
+- 클라이언트: 자신의 리액션을 볼 수 있도록 개선
+	- 설정에 따라, 리액션 목록을 모두에게 공개할 수 있음
+- 클라이언트: 유저 검색 정확도 개선
+- 클라이언트: 새로운 라이트 테마 추가
+- 클라이언트: 새로운 다크 테마 추가
+- 클라이언트: /share 쿼리로 댓글이나 파일 등의 정보를 전달할 수 있도록 변경
+- UI(friendly): 내비게이션 메뉴 버튼에 알림 인디케이터 추가
+- UI(friendly): 발견하기 탭에서 내비게이션 메뉴에 접근할 수 있도록 개선
+- UI(friendly): 타임라인 헤더의 모달 팝업에 표시되는 인디케이터의 디자인 조정
+- UI(friendly): 타임라인의 노트 디자인을 Misskey 기본 테마와 병합하고 디자인 개선
+- UI(friendly): 헤더 작동 방식 최적화
+- UI(friendly): 전반적인 UI를 Misskey 기본 테마와 병합
+- ActivityPub: HTML -> MFM 변환 강화
+- API: 그룹에서의 users/groups/leave 엔드포인트 구현
+- API: i/notifications 에 unreadOnly 옵션 추가
+- API: ap계열의 엔드포인트 로그인 필수화 + 속도 제한 추가
+- API: 사용자의 리액션 목록을 가져오는 users/reactions 추가
+- API: users/search 및 users/search-by-username-and-host 를 강화
+- MFM: 굵게 <b></b> 및 취소선 <s></s> 태그 구문 추가
+- Docker: Node.js를 17.0.1으로 업데이트
+- 계정 등록 시 이메일 주소 설정을 필수로 설정하는 옵션 추가
+- 페이지 로드 오류 페이지에 새로 고침 버튼 추가
+- 뮤트 및 차단 목록을 import 할 수 있도록 변경
+- 차트의 동기화를 매일 0시에 자동으로 수행
+
+### Bugfixes
+- 클라이언트: 헤더의 탭이 반환되는 문제
+- 클라이언트: 헤더에 탭이 표시된 상태에서 타이틀을 클릭했을 때 탭 선택 팝업이 표시되는 문제
+- 클라이언트(friendly): 안테나, 리스트 타임라인을 불러올 수 없는 문제
+- 클라이언트: 유저 페이지의 탭이 작동하지 않는 문제
+- 클라이언트: 핀 고정 사용자 설정 항목이 없는 문제
+- 클라이언트: Deck UI 에서 겹친 컬럼의 한쪽을 접은 상태에서 오른쪽으로 내밀면 깨지는 문제
+- 클라이언트: 테마 관리를 할 수 없는 문제
+- 클라이언트: 리모트 노트에서 의도치 않게 로컬 커스텀 이모지가 사용될 수 있는 문제
+- 클라이언트: 알림상에서 로컬 리액션이 나타나지 않는 문제
+- 클라이언트: 위젯을 추가할 수 없는 문제
+- UI(friendly): 헤더에 타이틀이 표시되지 않는 문제
+- API: 애플리케이션 알림을 가져오지 않는 문제
+- MFM: 링크 레이블의 언급은 텍스트로 구문 분석함
+- MFM: URL 노드에 속성을 추가하여 <>로 묶었는지 여부를 나타냄
+- MFM: 해시태그에서 < 및 > 의 사용을 허용하지 않음
+- ActivityPub: not reacted 한 Undo.Like 가 inbox에 잔존하는 문제
+- createDeleteAccountJob 수정
+- 관리자용 작업 대기열에 지연된 작업이 목록에 표시되지 않는 문제 수정
+- 일부 번역 개선
+- 의존 패키지 업데이트
+
+### Changes
+- 보수성 및 사용성 측면에서 CherryPick 명령줄 옵션이 제거되었습니다.
+	- 필요한 경우, 환경변수로 대체할 수 있습니다.
+- MFM: 성능, 보수성, 구문 오인식 억제 관점에서 구형 함수 구문의 지원을 종료했습니다.
+	- 구문 (`[foo bar]`)를 사용하지 않으며, 현행 구문 (`$[foo bar]`)를 사용해 주세요.
+- 모더레이터를 차단하지 못하도록 설정된 부분이 연합간에 문제를 야기할 수 있음이 확인되어, 해당 부분을 제거했습니다.
+- 데이터베이스에 로그를 저장하지 않습니다.
+	- 로그를 영속화 하려면 syslog를 이용해 주세요.
+
+---
+
+## 12.91.0-cp-2.2.2 (2021/09/23)
+
+### Bugfixes
+- UI(friendly): 헤더 디자인 버그 수정
+
+---
+
+## 12.91.0-cp-2.2.1 (2021/09/23)
+
+### Bugfixes
+- UI(friendly): 헤더 디자인 버그 수정
+
+---
+
+## 12.91.0-cp-2.2.0 (2021/09/23)
+
+## Features
+- Friendly: 계정 전환 팝업에서 현재 로그인된 계정 또는 로그인된 모든 계정을 로그아웃하는 기능 추가
+- VIP 등급 추가 및 전용 기능 추가
+- 팔로워의 비공개 및 다이렉트 노트를 LTL에 표시하는 기능 제거(임시)
+- 고양이로 설정된 계정이면 프로필 아이콘에 마우스 오버시 고양이 귀 애니메이션을 활성화
+
+### Improvements
+- UI: 모바일 환경에서 노트 작성 폼의 해시태그 영역 여백 조정
+- ActivityPub: 리모트 유저를 Delete 하는 작업 지원
+- ActivityPub: 차단된 인스턴스에 대한 resolver 확인 추가
+- ActivityPub: deliver 큐의 메모리 사용량 감소
+- API: 관리자용 계정 삭제 API 구현(/admin/accounts/delete)
+	- 리모트 유저의 삭제도 가능하도록 개선
+- 계정이 정지되었을 때, 정지되었다는 내용을 표시한 후 로그아웃하도록 변경
+- 정지된 계정에 로그인하고자 할 때, 정지되었다는 내용을 표시하도록 변경
+- 리스트, 안테나 타임라인을 개별 페이지로 분할
+- 후원자 목록 갱신
+- 일부 언어 개선
+- Docker 문서 개선
+- 광고 제거 기능의 가독성 개선
+- 클라이언트 디자인 조정
+- Docker Hub에 Image push 대응
+- GitLocalize 대응
+- Sentry 대응
+- UI 개선
+- MFM에 sparkles 효과 추가
+- 로그인 하지 않은 사용자는 서버 업데이트 내역을 띄우지 않도록 변경
+- 클라이언트를 부팅했을 때 업데이트가 가능한 경우, 오류 표시 및 대화 상자가 나타나지 않도록 변경
+- 의존 패키지 업데이트
+- 일부 문서 업데이트
+
+### Bugfixes
+- UI(Friendly, Friendly-legacy): 아이 모드를 대응하지 않는 문제 수정
+- UI(Friendly): 계정을 전환할 수 없던 문제 수정
+- Dockerfile 수정
+- 노트 번역 시 공개 범위를 고려하지 않는 문제 수정
+- 노트 상세 페이지에서 구분선이 남는 문제 수정
+- 팝업으로 설정 페이지를 띄우면 계정을 폐쇄할 수 없는 문제 수정
+- 계정 데이터 가져오기/내보내기 처리가 안 되는 문제 수정
+- 안테나를 불러올 수 없는 문제 수정
+- "문제가 발생했습니다" 팝업창을 열면 X 버튼이 존재하지 않아 창을 닫을 수 없는 문제 수정
+
+---
+
+## 12.90.0-cp-2.1.1 (2021/09/05)
+
+## Features
+- 로그 탭 복원
+
+### Improvements
+- Friendly UI: 프로필 아이콘을 누르면 네비게이션 메뉴가 뜨도록 변경
+- 클라이언트 디자인 조정
+- 업데이트 내역 문서 개선
+- 아이 모드, 그리고 아이 위젯
+	- 클라이언트에서 아이쨩을 소환할 수 있게 되었어요.
+- URL로부터 업로드, AP의 첨부파일, 외부 파일에 대한 프록시 등에서는 Private 주소 등의 요청을 거부하도록 변경했어요.
+	- development에서 동작하는 경우, 이 제한이 적용되지 않아요.
+	- Proxy 사용 시, 이 제한이 적용되지 않아요.
+		Proxy 사용 중에도 제한을 적용하려면 Proxy 측에서 설정해야 해요.
+	- `default.yml`에서 `allowedPrivateNetworks`에 CIDR를 추가함으로써, 목적지 네트워크를 지정해 이 제한을 우회할 수 있어요.
+- 업로드, 다운로드 할 수 있는 파일 크기에 하드 리밋이 적용되었어요.(약 250MB)
+	- `default.yml`에서 `maxFileSize`를 변경함으로써, 제한값을 변경할 수 있어요.
+
+### Bugfixes
+- Friendly UI: 홈 영역에서 헤더에 뒤로가기 버튼이 생기는 문제 수정
+- Friendly UI: 계정 전환 팝업이 뜨지 않는 문제 수정
+- 답글, 리노트, 삭제 후 다시 편집 및 Friendly UI 이외의 UI에서 노트 작성 폼의 디자인 문제 수정
+- 모바일 환경이 아니면 노트 작성 폼에 모달 배경 뜨도록 수정
+- 번역에서 DeepL Pro 계정을 지원하지 않는 문제 수정
+- 인스턴스 설정에서 DeepL Auth Key가 비워지는 문제 수정
+- 보안 향상
+- CSS 사용자화 기능 활성화 시 에러가 발생하는 문제 수정
+- 초기 설정 시 관리자가 가입 페이지에서 로그인 할 수 없는 문제 수정
+- CW 유지 설정을 복원
+- 클라이언트 표시 수정
+
+---
+
+## 12.89.0-cp-2.1.0 (2021/08/23)
+
+### Features
+- 테마 스토어
+- 프로필 아이콘을 사각형으로 표시하는 옵션
+- CSS 사용자화
+- 노트 작성 팝업에 어시스턴트 추가
+- 이모지 추가 제안
+- 메뉴를 상단에 표시할 수 있는 옵션 추가
+- 타임라인 추가 (고양이, 리모트 팔로잉, 팔로워)
+- MFM: 무지개 효과 추가
+- 노트가 보여지는 타임라인을 노트 본문에 표시
+- UI 흐림 효과 전환 기능
+- 해시태그를 간편하게 추가할 수 있도록 노트 작성 폼에 기능 추가
+- CherryPick 디스코드 커뮤니티 추가
+- 이모지 목록을 볼 수 있는 페이지 추가
+- 인스턴스 목록을 볼 수 있는 페이지 추가
+- 노트 번역 기능 추가
+	- 사용하려면 서버 관리자가 DeepL 무료 계정을 생성하고 발급받은 인증 키를 '인스턴스 설정 > 기타 > DeepL Auth Key'에 추가해야 합니다.
+- CherryPick을 업데이트 하면 대화상자를 표시하도록 추가
+- 작업 대기열 위젯에 경보음을 울리는 설정 추가
+- 미디어 우클릭 방지 기능 추가
+
+### UX Improvements
+- 아날로그 시계 위젯의 바늘 두께를 사용자화 할 수 있는 옵션 추가
+- 팔로우 알림을 메일로 발송하는 경우, 팔로우 한 사람의 닉네임이 표시되도록 변경
+- 환영 페이지의 콘텐츠를 더욱 풍부하게 표시하도록 기능 확장
+- 알림으로 표시된 노트를 읽으면, 알림 페이지에서도 해당 노트를 읽음으로 표시하도록 변경
+- 이메일로 발신되는 새 팔로워 알림 메시지의 내용 개선
+- 도움말 문서를 전반적으로 개선
+
+### UI Improvements
+- Friendly UI: 공지사항 모달 팝업 헤더에 아이콘 추가
+- 알림 내용이 너무 긴 경우, 일정 길이 이상이 되면 내용을 자르도록 개선
+- 리노트 페이지에서 유저 정보가 너무 긴 경우, 일부만 표시하도록 변경
+- 타임라인에 새 노트가 있으면 뜨는 인디케이터의 디자인 조정
+- 프로필 페이지의 유저 상세 메뉴를 복원
+- 공지사항 아이콘 변경
+- 노트 작성 폼의 디자인 개선
+
+### Improvements
+- 계정 삭제 안정성 향상
+- 이모지의 자동 완성 동작 개선
+- localStorage의 accounts가 indexedDB로 보존되도록 변경
+- ActivityPub: 작업 대기열 시행 타이밍 조정 (#7635)
+- API: sw/unregister 추가
+- 단어 뮤트 문서 추가
+- 의존 패키지 업데이트
+- 일부 언어 추가
+- AP Actor 수정
+- DB에 로그를 저장하지 않도록 변경
+- MiAS 주소 변경
+- 렌더 슬롯에 함수를 사용하여 성능 향상
+- 클라이언트 업데이트시 테마 캐시를 지우도록 변경
+- 이모지 자동 완성시 첫 글자는 최근에 사용한 이모지를 제안하도록 변경
+- 이모지 자동 완성 성능 개선
+- about-misskey 페이지에 문서 링크 추가
+- Docker: Node.js를 16.6.2로 업데이트
+- 차단 동작 개선
+	- 차단된 유저가 차단한 유저에 대해 어떠한 행동도 할 수 없습니다. 자세한 내용은 문서를 확인해 주십시오.
+- 데이터베이스 인덱스 최적화
+- Proxy 사용 시 Keep-Alive 지원
+- DNS 캐시에서 네거티브 캐시 지원
+
+### Bugfixes
+- Friendly UI: 공지사항 팝업창의 footer UI 오류 수정
+- 일부 디자인 오류 수정
+- 함수 빌더 MFM 문법 오류 수정
+- API Authenticate 및 인증 방식의 일부 보안 문제 수정
+- 드라이브의 기본 업로드 위치를 지정해도 반영되지 않는 문제 수정
+- CORS 오류
+- 스트리밍이 불안정한 문제 수정
+- 암호를 재설정해도 새 암호가 표시되지 않는 문제 수정
+- 채널을 생성하면 계정을 삭제할 수 없는 문제 수정
+- 노트를 [삭제 후 다시 편집]하면 투표의 항목이 [object Object]가 되는 문제 수정
+- 터치 조작으로 창을 닫을 수 없던 문제 수정
+- 리노트한 시각이 노트를 게시한 시각으로 표시되는 문제 수정
+- 제어판에서 파일 삭제 시 보기 수정
+- ActivityPub: 긴 사용자 이름 및 자기소개 지원
+
+---
+
+## 12.83.0-cp-2.0.0 (2021/06/14)
+
+### CherryPick
+Misskey 기반의 새로운 클라이언트를 선보입니다!
+CherryPick은 다른 클라이언트의 유용한 기능들을 **이식**하고 **자체 기능**을 추가하여 사용성을 높인 **개조 클라이언트** 입니다.
+~ CherryPick은 좋은 것만 뽑아서 쓰는 Cherry picking의 의미를 지니고 있어요! ~
+
+
+### Friendly UI
+#### 완전히 새롭게 디자인된 Friendly UI를 만나보세요!
+
+### Features
+- Friendly UI: 타임라인 설정을 통해, 헤더에 타임라인을 추가하고 순서를 변경할 수 있어요!
+- Friendly UI: 헤더에서 공지사항을 열람할 수 있어요!
+- Friendly UI: 새 노트 알림의 디자인(4가지)을 선택할 수 있어요!
+- 현재 로그인된 모든 계정을 로그아웃 할 수 있는 기능을 추가했어요!
+- 인용된 노트의 미디어를 자동으로 펼치는 기능을 추가했어요! 이 옵션은 설정에서 해제할 수 있어요.
+- 카오모지 뽑기가 추가됐어요!
+
+### UX Improvements
+- Friendly UI: 헤더에서 타임라인 위치를 직관적으로 알 수 있도록 새롭게 변경했어요!
+- Friendly UI: 계정 전환을 보다 직관적으로 할 수 있도록 새롭게 변경했어요!
+- Friendly UI: 팔로워의 비공개 노트 및 다이렉트 노트를 로컬 타임라인(LTL)에 표시하는 기능을 추가했어요.
+- Friendly UI: 타임라인에 새 노트가 있을 때 내비게이션바에 인디케이터로 알려줘요.
+- Friendly UI: 그룹, 채널, 안테나 페이지에도 플로팅 버튼을 추가했어요!
+- 노트 페이지에서 리노트 하거나 인용한 개수를 확인할 수 있어요.
+- 리노트 하거나 인용한 유저를 확인할 수 있어요.
+- 인스턴스 요약 탭에 CherryPick 버전이 표시돼요.
+- 노트 작성 시 보여질 내용을 미리 볼 수 있는 기능을 추가했어요!
+- 노트 작성 화면에서 사용할 수 있는 각종 퀵액션을 추가했어요!
+- 노트 게시 전 최종 확인(검토)하는 옵션이 추가됐어요! 설정에서 켤 수 있어요.
+- 사이드바 설정을 보다 직관적으로 할 수 있도록 새롭게 변경했어요!
+- 위젯 편집시 의도치 않은 이동이 발생하지 않도록, 편집 환경을 전반적으로 개선했어요!
+- 모바일 환경에서 유저 프로필 프리뷰가 뜨지 않도록 조정했어요.
+- 발견하기와 검색을 통합했어요! 이제 검색 기능은 여기서 이용해 주세요 :)
+- 노트와 유저를 동시에 검색할 수 있게 변경했어요.
+- 사이드 바와 내비게이션 바의 배치를 개선했어요.
+- 더 작은 폰트(verySmail) 크기를 추가했어요!
+- 프로필 페이지에 프로필 수정 버튼을 추가했어요! 이제 수정을 위해서 더보기 버튼을 누르지 않아도 돼요.
+- 프로필 페이지에서 더보기 버튼을 하나로 줄였어요. (저도 왜 이게 2개나 있는지 모르겠어요...)
+
+### UI Improvements
+- Friendly UI: 새 노트 알림의 아이콘이 변경됐어요.
+- 가독성을 위해 로고 색상을 약간 조정했어요.
+- 답글 노트를 리노트 했을 때, 리노트 한 유저를 노트 영역의 맨 위에 표시하도록 변경했어요.
+- 기본 테마를 변경했어요!
+- 모바일 환경에서 토스트 알림 디자인을 개선했어요! 궁금하면 저를 팔로우 해보세요🙂
+- 플로팅 버튼의 그림자를 조정했어요.
+- 이모지 버튼의 디자인을 변경했어요.
+
+### Improvements
+- misskey.js 버전을 업데이트 했어요.
+- 의존 패키지를 업데이트 했어요.
+- 베젤리스 디바이스를 대응했어요!
+- 클라이언트의 버전이 업데이트 되었을 때 나타나는 팝업에 한국어를 추가했어요! (펄-럭)
+- 리버시에서 향후 호환성에 문제가 발생할 수 있는 부분을 업데이트 했어요!
+- 플로팅 버튼의 작동 방식을 개선했어요.
+- 타임라인의 노트 간격 옵션을 기본 활성화로 설정했어요.
+- 테마 찾아보기 연결 주소가 변경됐어요.
+
+### Bugfixes
+- 리모트 유저 정보 갱신시 발생하는 오류가 수정됐어요.
+- 리모트 유저의 프로필을 불러올 때 문제를 야기할 수 있는 부분이 수정됐어요.
+- 환영 페이지에서 배너 이미지가 뜨지 않는 문제를 수정했어요!
+- 비로그인 상태에서 유저 프로필의 노트를 열람하지 못하는 문제를 수정했어요.
+- 환영 페이지에서 GitHub 바로가기와 더보기 버튼이 겹쳐있는 경우 더보기 버튼을 누를 수 없었던 문제를 수정했어요.
+- 이미지가 노트 영역을 뚫고 나오는 문제를 수정했어요.
+- 일본어 및 한국어를 제외한 언어에서 도움말의 API 문서의 목차가 작동하지 않는 문제를 수정했어요.
+- 알림 토스트의 텍스트가 eclipse 되지 않는 문제를 수정했어요.
+- 사이드바와 인스턴스 유저 관리 페이지에서 유저 닉네임이 너무 길면 overflow되는 문제를 수정했어요.
--- a/package.json
+++ b/package.json
@ -1,10 +1,10 @@
 {
-	"name": "misskey",
-	"version": "12.118.1",
+	"name": "cherrypick",
+	"version": "12.118.1-cp-2.3.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/misskey-dev/misskey.git"
+		"url": "https://github.com/kokonect-link/cherrypick.git"
 	},
 	"private": true,
 	"scripts": {
--- a/packages/backend/src/boot/master.ts
+++ b/packages/backend/src/boot/master.ts
@ -23,28 +23,30 @@ const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/meta.json
 const logger = new Logger('core', 'cyan');
 const bootLogger = logger.createSubLogger('boot', 'magenta', false);

-const themeColor = chalk.hex('#86b300');
+const themeColor = chalk.hex('#ffa9c3');

 function greet() {
 	if (!envOption.quiet) {
-		//#region Misskey logo
+		//#region CherryPick logo
 		const v = `v${meta.version}`;
-		console.log(themeColor('  _____ _         _           '));
-		console.log(themeColor(' |     |_|___ ___| |_ ___ _ _ '));
-		console.log(themeColor(' | | | | |_ -|_ -| \'_| -_| | |'));
-		console.log(themeColor(' |_|_|_|_|___|___|_,_|___|_  |'));
-		console.log(' ' + chalk.gray(v) + themeColor('                        |___|\n'.substr(v.length)));
+		console.log(chalk.hex('#ffa9c3').bold('  _________ .__                                ') + chalk.hex('#95e3e8').bold('__________.__        __    '));
+		console.log(chalk.hex('#ffa9c3').bold(' \\_   ___ \\|  |__   __________________ ___.__.') + chalk.hex('#95e3e8').bold('\\______   \\__| ____ |  | __'));
+		console.log(chalk.hex('#ffa9c3').bold(' /    \\  \\/|  |  \\_/ __ \\_  __ \\_  __ <   |  |') + chalk.hex('#95e3e8').bold(' |     ___/  |/ ___\\|  |/ /'));
+		console.log(chalk.hex('#ffa9c3').bold(' \\     \\___|   Y  \\  ___/|  | \\/|  | \\/\\___  |') + chalk.hex('#95e3e8').bold(' |    |   |  \\  \\___|    < '));
+		console.log(chalk.hex('#ffa9c3').bold('  \\______  /___|  /\\___  >__|   |__|   / ____|') + chalk.hex('#95e3e8').bold(' |____|   |__|\\___  >__|_ \\'));
+		console.log(chalk.hex('#ffa9c3').bold('         \\/     \\/     \\/              \\/     ') + chalk.hex('#95e3e8').bold('                  \\/     \\/'));
 		//#endregion

-		console.log(' Misskey is an open-source decentralized microblogging platform.');
-		console.log(chalk.rgb(255, 136, 0)(' If you like Misskey, please donate to support development. https://www.patreon.com/syuilo'));
+		console.log(chalk.hex('#ffa9c3').bold(' Cherry') + chalk.hex('#95e3e8').bold('Pick') + (' is an open-source decentralized microblogging platform based from') + (chalk.hex('#9ec23f').bold(' Misskey') + ('.')));
+		console.log(chalk.hex('#ffbb00')(' If you like ') + chalk.hex('#ffa9c3').bold('Cherry') + chalk.hex('#95e3e8').bold('Pick') + chalk.hex('#ffbb00')(', please donate to support development. https://www.patreon.com/noridev'));
+		// console.log(chalk.hex('#ffa9c3').bold(' KOKO') + chalk.hex('#95e3e8').bold('NECT') + chalk.hex('#ffa9c3')(' with') + chalk.hex('#95e3e8').bold(' NoriDev.'));

 		console.log('');
 		console.log(chalkTemplate`--- ${os.hostname()} {gray (PID: ${process.pid.toString()})} ---`);
 	}

-	bootLogger.info('Welcome to Misskey!');
-	bootLogger.info(`Misskey v${meta.version}`, null, true);
+	bootLogger.info('Welcome to CherryPick!');
+	bootLogger.info(`CherryPick v${meta.version}`, null, true);
 }

 /**
@ -66,7 +68,7 @@ export async function masterMain() {
 		process.exit(1);
 	}

-	bootLogger.succ('Misskey initialized');
+	bootLogger.succ(chalk.hex('#ffa9c3')('Cherry') + chalk.hex('#95e3e8')('Pick') + (' initialized'));

 	if (!envOption.disableClustering) {
 		await spawnWorkers(config.clusterLimit);
--- a/packages/backend/src/server/web/manifest.json
+++ b/packages/backend/src/server/web/manifest.json
@ -1,10 +1,10 @@
 {
-	"short_name": "Misskey",
-	"name": "Misskey",
+	"short_name": "CherryPick",
+	"name": "CherryPick",
 	"start_url": "/",
 	"display": "standalone",
-	"background_color": "#313a42",
-	"theme_color": "#86b300",
+	"background_color": "#95e3e8",
+	"theme_color": "#ffa9c3",
 	"icons": [
 		{
 			"src": "/static-assets/icons/192.png",
--- a/packages/backend/src/server/web/manifest.ts
+++ b/packages/backend/src/server/web/manifest.ts
@ -9,8 +9,8 @@ export const manifestHandler = async (ctx: Koa.Context) => {

 	const instance = await fetchMeta(true);

-	res.short_name = instance.name || 'Misskey';
-	res.name = instance.name || 'Misskey';
+	res.short_name = instance.name || 'CherryPick';
+	res.name = instance.name || 'CherryPick';
 	if (instance.themeColor) res.theme_color = instance.themeColor;

 	ctx.set('Cache-Control', 'max-age=300');
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@ -7,26 +7,26 @@ doctype html

 //
 	-
-	  _____ _         _           
-	 |     |_|___ ___| |_ ___ _ _ 
-	 | | | | |_ -|_ -| '_| -_| | |
-	 |_|_|_|_|___|___|_,_|___|_  |
-	                         |___|
-	 Thank you for using Misskey!
-	 If you are reading this message... how about joining the development?
-	 https://github.com/misskey-dev/misskey
-	 
+		_________ .__                                __________.__        __
+		\_   ___ \|  |__   __________________ ___.__.\______   \__| ____ |  | __
+		/    \  \/|  |  \_/ __ \_  __ \_  __ <   |  | |     ___/  |/ ___\|  |/ /
+		\     \___|   Y  \  ___/|  | \/|  | \/\___  | |    |   |  \  \___|    <
+		\______  /___|  /\___  >__|   |__|   / ____| |____|   |__|\___  >__|_ \
+			\/     \/     \/              \/                       \/     \/
+		Thank you for using CherryPick!
+		If you are reading this message... how about joining the development?
+		https://github.com/kokonect-link/cherrypick

 html

 	head
 		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
+		meta(name='application-name' content='CherryPick')
 		meta(name='referrer' content='origin')
 		meta(name='theme-color' content= themeColor || '#86b300')
 		meta(name='theme-color-orig' content= themeColor || '#86b300')
 		meta(property='twitter:card' content='summary')
-		meta(property='og:site_name' content= instanceName || 'Misskey')
+		meta(property='og:site_name' content= instanceName || 'CherryPick')
 		meta(name='viewport' content='width=device-width, initial-scale=1')
 		link(rel='icon' href= icon || '/favicon.ico')
 		link(rel='apple-touch-icon' href= icon || '/apple-touch-icon.png')
@ -45,7 +45,7 @@ html

 		title
 			block title
-				= title || 'Misskey'
+				= title || 'CherryPick'

 		block desc
 			meta(name='description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨')
@ -53,8 +53,8 @@ html
 		block meta

 		block og
-			meta(property='og:title'       content= title || 'Misskey') 
-			meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨') 
+			meta(property='og:title'       content= title || 'CherryPick')
+			meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨')
 			meta(property='og:image'       content= img)

 		style
@ -76,13 +76,13 @@ html
 			img#splashIcon(src= icon || '/static-assets/splash.png')
 			div#splashSpinner
 				<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
-					<g transform="matrix(1,0,0,1,12,12)">
-						<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
+				<g transform="matrix(1,0,0,1,12,12)">
+				<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+				</g>
 				</svg>
 				<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
-					<g transform="matrix(1,0,0,1,12,12)">
-						<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
+				<g transform="matrix(1,0,0,1,12,12)">
+				<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+				</g>
 				</svg>
 		block content
--- a/packages/backend/src/server/web/views/bios.pug
+++ b/packages/backend/src/server/web/views/bios.pug
@ -4,8 +4,8 @@ html

 	head
 		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
-		title Misskey Repair Tool
+		meta(name='application-name' content='CherryPick')
+		title CherryPick Repair Tool
 		style
 			include ../bios.css
 		script
@ -13,7 +13,7 @@ html

 	body
 		header
-			h1 Misskey Repair Tool #{version}
+			h1 CherryPick Repair Tool #{version}
 		main
 			div.tabs
 				button#ls edit local storage
--- a/packages/backend/src/server/web/views/cli.pug
+++ b/packages/backend/src/server/web/views/cli.pug
@ -4,8 +4,8 @@ html

 	head
 		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
-		title Misskey Cli
+		meta(name='application-name' content='CherryPick')
+		title CherryPick Cli
 		style
 			include ../cli.css
 		script
@ -13,7 +13,7 @@ html

 	body
 		header
-			h1 Misskey Cli #{version}
+			h1 CherryPick Cli #{version}
 		main
 			div#form
 				textarea#text
--- a/packages/backend/src/server/web/views/flush.pug
+++ b/packages/backend/src/server/web/views/flush.pug
@ -4,7 +4,7 @@ html
 	#msg
 	script.
 		const msg = document.getElementById('msg');
-		const successText = `\nSuccess Flush! <a href="/">Back to Misskey</a>\n成功しました。<a href="/">Misskeyを開き直してください。</a>`;
+		const successText = `\nSuccess Flush! <a href="/">Back to CherryPick</a>\n成功しました。<a href="/">CherryPickを開き直してください。</a>`;

 		message('Start flushing.');

--- a/packages/backend/src/server/web/views/info-card.pug
+++ b/packages/backend/src/server/web/views/info-card.pug
@ -4,7 +4,7 @@ html

 	head
 		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
+		meta(name='application-name' content='CherryPick')
 		title= meta.name || host
 		style.
 			html, body {
--- a/packages/client/src/components/global/CPPageHeader.vue
+++ b/packages/client/src/components/global/CPPageHeader.vue
@ -0,0 +1,346 @@
+<template>
+<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
+	<template v-if="metadata">
+		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
+			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
+			<i v-else-if="metadata.icon" class="icon" :class="metadata.icon"></i>
+
+			<div class="title">
+				<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true" class="title"/>
+				<div v-else-if="metadata.title" class="title">{{ metadata.title }}</div>
+				<div v-if="!narrow && metadata.subtitle" class="subtitle">
+					{{ metadata.subtitle }}
+				</div>
+				<div v-if="narrow && hasTabs" class="subtitle activeTab">
+					{{ tabs.find(tab => tab.key === props.tab)?.title }}
+					<i class="chevron fas fa-chevron-down"></i>
+				</div>
+			</div>
+		</div>
+		<div v-if="!narrow || hideTitle" class="tabs">
+			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+			<div ref="tabHighlightEl" class="highlight"></div>
+		</div>
+	</template>
+	<div class="buttons right">
+		<template v-for="action in actions">
+			<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
+import tinycolor from 'tinycolor2';
+import { popupMenu } from '@/os';
+import { scrollToTop } from '@/scripts/scroll';
+import { i18n } from '@/i18n';
+import { globalEvents } from '@/events';
+import { injectPageMetadata } from '@/scripts/page-metadata';
+
+type Tab = {
+	key?: string | null;
+	title: string;
+	icon?: string;
+	iconOnly?: boolean;
+	onClick?: (ev: MouseEvent) => void;
+};
+
+const props = defineProps<{
+	tabs?: Tab[];
+	tab?: string;
+	actions?: {
+		text: string;
+		icon: string;
+		handler: (ev: MouseEvent) => void;
+	}[];
+	thin?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:tab', key: string);
+}>();
+
+const metadata = injectPageMetadata();
+
+const hideTitle = inject('shouldOmitHeaderTitle', false);
+const thin_ = props.thin || inject('shouldHeaderThin', false);
+
+const el = $ref<HTMLElement | null>(null);
+const tabRefs = {};
+const tabHighlightEl = $ref<HTMLElement | null>(null);
+const bg = ref(null);
+let narrow = $ref(false);
+const height = ref(0);
+const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
+const hasActions = $computed(() => props.actions && props.actions.length > 0);
+const show = $computed(() => {
+	return !hideTitle || hasTabs || hasActions;
+});
+
+const showTabsPopup = (ev: MouseEvent) => {
+	if (!hasTabs) return;
+	if (!narrow) return;
+	ev.preventDefault();
+	ev.stopPropagation();
+	const menu = props.tabs.map(tab => ({
+		text: tab.title,
+		icon: tab.icon,
+		active: tab.key != null && tab.key === props.tab,
+		action: (ev) => {
+			onTabClick(tab, ev);
+		},
+	}));
+	popupMenu(menu, ev.currentTarget ?? ev.target);
+};
+
+const preventDrag = (ev: TouchEvent) => {
+	ev.stopPropagation();
+};
+
+const onClick = () => {
+	scrollToTop(el, { behavior: 'smooth' });
+};
+
+function onTabMousedown(tab: Tab, ev: MouseEvent): void {
+	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
+	if (tab.key) {
+		emit('update:tab', tab.key);
+	}
+}
+
+function onTabClick(tab: Tab, ev: MouseEvent): void {
+	if (tab.onClick) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		tab.onClick(ev);
+	}
+	if (tab.key) {
+		emit('update:tab', tab.key);
+	}
+}
+
+const calcBg = () => {
+	const rawBg = metadata?.bg || 'var(--bg)';
+	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+	tinyBg.setAlpha(0.85);
+	bg.value = tinyBg.toRgbString();
+};
+
+let ro: ResizeObserver | null;
+
+onMounted(() => {
+	calcBg();
+	globalEvents.on('themeChanged', calcBg);
+
+	watch(() => [props.tab, props.tabs], () => {
+		nextTick(() => {
+			const tabEl = tabRefs[props.tab];
+			if (tabEl && tabHighlightEl) {
+				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+				const parentRect = tabEl.parentElement.getBoundingClientRect();
+				const rect = tabEl.getBoundingClientRect();
+				tabHighlightEl.style.width = rect.width + 'px';
+				tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
+			}
+		});
+	}, {
+		immediate: true,
+	});
+
+	if (el && el.parentElement) {
+		narrow = el.parentElement.offsetWidth < 500;
+		ro = new ResizeObserver((entries, observer) => {
+			if (el.parentElement && document.body.contains(el)) {
+				narrow = el.parentElement.offsetWidth < 500;
+			}
+		});
+		ro.observe(el.parentElement);
+	}
+});
+
+onUnmounted(() => {
+	globalEvents.off('themeChanged', calcBg);
+	if (ro) ro.disconnect();
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	--height: 55px;
+	display: flex;
+	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-bottom: solid 0.5px var(--divider);
+	contain: strict;
+	height: var(--height);
+
+	&.thin {
+		--height: 45px;
+
+		> .buttons {
+			> .button {
+				font-size: 0.9em;
+			}
+		}
+	}
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			flex: 1;
+			margin: 0 auto;
+			margin-left: var(--height);
+
+			> *:first-child {
+				margin-left: auto;
+			}
+
+			> *:last-child {
+				margin-right: auto;
+			}
+		}
+	}
+
+	> .buttons {
+		--margin: 8px;
+		display: flex;
+    align-items: center;
+		height: var(--height);
+		margin: 0 var(--margin);
+
+		&.right {
+			margin-left: auto;
+		}
+
+		&:empty {
+			width: var(--height);
+		}
+
+		> .button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: calc(var(--height) - (var(--margin) * 2));
+			width: calc(var(--height) - (var(--margin) * 2));
+			box-sizing: border-box;
+			position: relative;
+			border-radius: 5px;
+
+			&:hover {
+				background: rgba(0, 0, 0, 0.05);
+			}
+
+			&.highlighted {
+				color: var(--accent);
+			}
+		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
+	}
+
+	> .titleContainer {
+		display: flex;
+		align-items: center;
+		max-width: 400px;
+		overflow: auto;
+		white-space: nowrap;
+		text-align: left;
+		font-weight: bold;
+		flex-shrink: 0;
+		margin-left: 24px;
+
+		> .avatar {
+			$size: 32px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: 0 8px;
+			pointer-events: none;
+		}
+
+		> .icon {
+			margin-right: 8px;
+			width: 16px;
+			text-align: center;
+		}
+
+		> .title {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			line-height: 1.1;
+
+			> .subtitle {
+				opacity: 0.6;
+				font-size: 0.8em;
+				font-weight: normal;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&.activeTab {
+					text-align: center;
+
+					> .chevron {
+						display: inline-block;
+						margin-left: 6px;
+					}
+				}
+			}
+		}
+	}
+
+	> .tabs {
+		position: relative;
+		margin-left: 16px;
+		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .tab {
+			display: inline-block;
+			position: relative;
+			padding: 0 10px;
+			height: 100%;
+			font-weight: normal;
+			opacity: 0.7;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			&.active {
+				opacity: 1;
+			}
+
+			> .icon + .title {
+				margin-left: 8px;
+			}
+		}
+
+		> .highlight {
+			position: absolute;
+			bottom: 0;
+			height: 3px;
+			background: var(--accent);
+			border-radius: 999px;
+			transition: all 0.2s ease;
+			pointer-events: none;
+		}
+	}
+}
+</style>
--- a/packages/client/src/components/index.ts
+++ b/packages/client/src/components/index.ts
@ -15,6 +15,7 @@ import MkLoading from './global/loading.vue';
 import MkError from './global/error.vue';
 import MkAd from './global/ad.vue';
 import MkPageHeader from './global/page-header.vue';
+import CPPageHeader from './global/CPPageHeader.vue';
 import MkSpacer from './global/spacer.vue';
 import MkStickyContainer from './global/sticky-container.vue';

@ -34,6 +35,7 @@ export default function(app: App) {
 	app.component('MkError', MkError);
 	app.component('MkAd', MkAd);
 	app.component('MkPageHeader', MkPageHeader);
+	app.component('CPPageHeader', CPPageHeader);
 	app.component('MkSpacer', MkSpacer);
 	app.component('MkStickyContainer', MkStickyContainer);
 }
@ -55,6 +57,7 @@ declare module '@vue/runtime-core' {
 		MkError: typeof MkError;
 		MkAd: typeof MkAd;
 		MkPageHeader: typeof MkPageHeader;
+		CPPageHeader: typeof CPPageHeader;
 		MkSpacer: typeof MkSpacer;
 		MkStickyContainer: typeof MkStickyContainer;
 	}
--- a/packages/client/src/config.ts
+++ b/packages/client/src/config.ts
@ -10,6 +10,6 @@ export const lang = localStorage.getItem('lang');
 export const langs = _LANGS_;
 export const locale = JSON.parse(localStorage.getItem('locale'));
 export const version = _VERSION_;
-export const instanceName = siteName === 'Misskey' ? host : siteName;
+export const instanceName = siteName === 'CherryPick' ? host : siteName;
 export const ui = localStorage.getItem('ui');
 export const debug = localStorage.getItem('debug') === 'true';
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@ -173,7 +173,8 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
 		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
 		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-		defineAsyncComponent(() => import('@/ui/universal.vue')),
+		ui === 'default' ? defineAsyncComponent(() => import('@/ui/universal.vue')) :
+		defineAsyncComponent(() => import('@/ui/friendly.vue')),
 	);

 	if (_DEV_) {
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@ -102,6 +102,13 @@ export const navbarItemDef = reactive({
 		icon: 'fas fa-columns',
 		action: (ev) => {
 			os.popupMenu([{
+				text: i18n.ts.default,
+				active: ui === 'friendly' || ui === null,
+				action: () => {
+					localStorage.setItem('ui', 'friendly');
+					unisonReload();
+				},
+			}, {
 				text: i18n.ts.default,
 				active: ui === 'default' || ui === null,
 				action: () => {
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@ -7,7 +7,7 @@
 				<div id="debug"></div>
 				<div ref="containerEl" v-panel class="_formBlock about" :class="{ playing: easterEggEngine != null }">
 					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
-					<div class="misskey">Misskey</div>
+					<div class="misskey">CherryPick</div>
 					<div class="version">v{{ version }}</div>
 					<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
 				</div>
@ -19,7 +19,7 @@
 				</div>
 				<FormSection>
 					<div class="_formLinks">
-						<FormLink to="https://github.com/misskey-dev/misskey" external>
+						<FormLink to="https://github.com/kokonect-link/cherrypick" external>
 							<template #icon><i class="fas fa-code"></i></template>
 							{{ i18n.ts._aboutMisskey.source }}
 							<template #suffix>GitHub</template>
@ -29,7 +29,7 @@
 							{{ i18n.ts._aboutMisskey.translation }}
 							<template #suffix>Crowdin</template>
 						</FormLink>
-						<FormLink to="https://www.patreon.com/syuilo" external>
+						<FormLink to="https://www.patreon.com/noridev" external>
 							<template #icon><i class="fas fa-hand-holding-medical"></i></template>
 							{{ i18n.ts._aboutMisskey.donate }}
 							<template #suffix>Patreon</template>
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@ -198,6 +198,7 @@ export const routes = [{
 	component: page(() => import('./pages/explore.vue')),
 }, {
 	path: '/explore',
+	name: 'explore',
 	component: page(() => import('./pages/explore.vue')),
 }, {
 	path: '/search',
@ -374,6 +375,7 @@ export const routes = [{
 	}],
 }, {
 	path: '/my/notifications',
+	name: 'my-notifications',
 	component: page(() => import('./pages/notifications.vue')),
 	loginRequired: true,
 }, {
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@ -18,6 +18,7 @@ export const themeProps = Object.keys(lightTheme.props).filter(key => !key.start

 export const getBuiltinThemes = () => Promise.all(
 	[
+		'l-cherrypick',
 		'l-light',
 		'l-coffee',
 		'l-apricot',
@ -27,6 +28,7 @@ export const getBuiltinThemes = () => Promise.all(
 		'l-sushi',
 		'l-u0',

+		'd-cherrypick',
 		'd-dark',
 		'd-persimmon',
 		'd-astro',
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@ -269,8 +269,8 @@ type Plugin = {
 /**
 * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
 */
-import lightTheme from '@/themes/l-light.json5';
-import darkTheme from '@/themes/d-green-lime.json5';
+import lightTheme from '@/themes/l-cherrypick.json5';
+import darkTheme from '@/themes/d-cherrypick.json5';

 export class ColdDeviceStorage {
 	public static default = {
--- a/packages/client/src/themes/_dark.json5
+++ b/packages/client/src/themes/_dark.json5
@ -4,12 +4,12 @@
 	id: 'dark',

 	name: 'Dark',
-	author: 'syuilo',
-	desc: 'Default dark theme',
+	author: 'noridev',
+	desc: 'CherryPick default dark theme',
 	kind: 'dark',

 	props: {
-		accent: '#86b300',
+		accent: '#ffa9c3',
 		accentDarken: ':darken<10<@accent',
 		accentLighten: ':lighten<10<@accent',
 		accentedBg: ':alpha<0.15<@accent',
@ -44,6 +44,7 @@
 		mention: '@accent',
 		mentionMe: '@mention',
 		renote: '#229e82',
+		renoteHover: ':lighten<5<@renote',
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
@ -69,7 +70,8 @@
 		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
 		driveFolderBg: ':alpha<0.3<@accent',
 		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
-		badge: '#31b1ce',
+		badge: '#ffa9c3',
+		patron: '#a3faff',
 		messageBg: '@bg',
 		success: '#86b300',
 		error: '#ec4137',
@ -79,6 +81,9 @@
 		codeBoolean: '#c59eff',
 		deckDivider: '#000',
 		htmlThemeColor: '@bg',
+		cherry: '#ffa9c3',
+		pick: '#95e3e8',
+		pickLighten: ':lighten<10<@pick',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(255, 255, 255, 0.05)',
 		X4: 'rgba(255, 255, 255, 0.1)',
--- a/packages/client/src/themes/_light.json5
+++ b/packages/client/src/themes/_light.json5
@ -4,12 +4,12 @@
 	id: 'light',

 	name: 'Light',
-	author: 'syuilo',
-	desc: 'Default light theme',
+	author: 'noridev',
+	desc: 'CherryPick default light theme',
 	kind: 'light',

 	props: {
-		accent: '#86b300',
+		accent: '#ffa9c3',
 		accentDarken: ':darken<10<@accent',
 		accentLighten: ':lighten<10<@accent',
 		accentedBg: ':alpha<0.15<@accent',
@ -44,6 +44,7 @@
 		mention: '@accent',
 		mentionMe: '@mention',
 		renote: '#229e82',
+		renoteHover: ':lighten<5<@renote',
 		modalBg: 'rgba(0, 0, 0, 0.3)',
 		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
@ -69,7 +70,8 @@
 		listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
 		driveFolderBg: ':alpha<0.3<@accent',
 		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
-		badge: '#31b1ce',
+		badge: '#ffa9c3',
+		patron: '#a3faff',
 		messageBg: '@bg',
 		success: '#86b300',
 		error: '#ec4137',
@ -79,6 +81,9 @@
 		codeBoolean: '#62b70c',
 		deckDivider: ':darken<3<@bg',
 		htmlThemeColor: '@bg',
+		cherry: '#ffa9c3',
+		pick: '#95e3e8',
+		pickLighten: ':lighten<10<@pick',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(0, 0, 0, 0.05)',
 		X4: 'rgba(0, 0, 0, 0.1)',
--- a/packages/client/src/themes/d-cherrypick.json5
+++ b/packages/client/src/themes/d-cherrypick.json5
@ -0,0 +1,28 @@
+{
+	id: 'da73e355-3f13-4f0d-8202-d0946716601a',
+	base: 'dark',
+	name: 'CherryPick Dark',
+	author: 'noridev',
+	desc: 'CherryPick default dark theme',
+
+	props: {
+		bg: '#373940',
+		fg: 'rgb(199, 209, 216)',
+		fgHighlighted: '#fff',
+		divider: 'rgba(255, 255, 255, 0.14)',
+		panel: '#3e3f47',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		infoFg: '@accent',
+		infoBg: 'rgb(0, 0, 0)',
+		acrylicPanel: ':alpha<0.9<@panel',
+		header: '@bg',
+		navBg: '@panel',
+		navHoverFg: '@pick',
+		renote: '@accent',
+		mention: '#da6d35',
+		mentionMe: '#d44c4c',
+		hashtag: '#4cb8d4',
+		link: '@accent',
+	},
+}
--- a/packages/client/src/themes/l-cherrypick.json5
+++ b/packages/client/src/themes/l-cherrypick.json5
@ -0,0 +1,20 @@
+{
+	id: '7540fce3-218f-4e1b-8182-b9481d977078',
+	base: 'light',
+	name: 'CherryPick Light',
+	author: 'noridev',
+	desc: 'CherryPick default light theme',
+
+	props: {
+		bg: '#f9f9f9',
+		fg: '#676767',
+		divider: 'rgb(223, 223, 223)',
+		acrylicPanel: ':alpha<0.9<@panel',
+		header: '@bg',
+		navBg: '#fff',
+		navHoverFg: '@pick',
+		panel: '#fff',
+		panelHeaderDivider: '@divider',
+		messageBg: '#dedede',
+	},
+}
--- a/packages/client/src/ui/friendly-legacy-2/friendly.header.vue
+++ b/packages/client/src/ui/friendly-legacy-2/friendly.header.vue
@ -0,0 +1,314 @@
+<template>
+<div class="azykntjl">
+	<div class="body">
+		<div class="left">
+			<MkA class="item index" active-class="active" to="/" exact v-click-anime v-tooltip="$ts.timeline">
+				<i class="fas fa-home fa-fw"></i>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime v-tooltip="$ts[menuDef[item].title]">
+					<i class="fa-fw" :class="menuDef[item].icon"></i>
+					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.instance">
+				<i class="fas fa-server fa-fw"></i>
+			</MkA>
+			<button class="item _button" @click="more" v-click-anime>
+				<i class="fas fa-ellipsis-h fa-fw"></i>
+				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+			</button>
+		</div>
+		<div class="right">
+			<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.settings">
+				<i class="fas fa-cog fa-fw"></i>
+			</MkA>
+			<button class="item _button account" @click="openProfile" v-click-anime>
+				<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+			</button>
+			<button class="_button toggler" @click="openAccountMenu">
+				<i class="fas fa-chevron-down"/>
+			</button>
+			<div class="post" @click="post">
+				<MkButton class="button" gradate full>
+					<i class="fas fa-pencil-alt fa-fw"></i>
+				</MkButton>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+import MkButton from '@client/components/ui/button.vue';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+
+	data() {
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			settingsWindowed: false,
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	methods: {
+		calcViewState() {
+			this.settingsWindowed = (window.innerWidth > 1400);
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			await os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${this.$i.username}`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => {
+							this.addAccount();
+						},
+					}, {
+						text: this.$ts.createAccount,
+						action: () => {
+							this.createAccount();
+						},
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => {
+							this.signout();
+						},
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => {
+							this.signoutAll();
+						},
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.azykntjl {
+	$height: 60px;
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	width: 100%;
+	height: $height;
+	background-color: var(--bg);
+
+	> .body {
+		max-width: 1380px;
+		margin: 0 auto;
+		display: flex;
+
+		> .right,
+		> .left {
+
+			> .item {
+				position: relative;
+				font-size: 0.9em;
+				display: inline-block;
+				padding: 0 12px;
+				line-height: $height;
+
+				> i,
+				> .avatar {
+					margin-right: 0;
+				}
+
+				> i {
+					left: 10px;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .indicator {
+					position: absolute;
+					bottom: 10px;
+					right: 0;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+			}
+
+			> .divider {
+				display: inline-block;
+				height: 16px;
+				margin: 0 10px;
+				border-right: solid 0.5px var(--divider);
+			}
+
+			> .post {
+				display: inline-block;
+			
+				> .button {
+					width: 40px;
+					height: 40px;
+					padding: 0;
+					min-width: 0;
+				}
+			}
+
+			> .account {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: top;
+
+				> .name {
+					margin-left: 10px;
+					font-weight: bold;
+				}
+			}
+
+			> .toggler {
+				position: relative;
+				right: 5px;
+				width: 36px;
+				height: 36px;
+			}
+		}
+
+		> .right {
+			margin-left: auto;
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy-2/friendly.side.vue
+++ b/packages/client/src/ui/friendly-legacy-2/friendly.side.vue
@ -0,0 +1,162 @@
+<template>
+<div class="qvzfzxam _narrow_" v-if="component">
+	<div class="container">
+		<header class="header" @contextmenu.prevent.stop="onContextmenu">
+			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
+			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
+			<XHeader class="title" :info="pageInfo" :with-back="false"/>
+			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
+		</header>
+		<component :is="component" v-bind="props" :ref="changePage"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XHeader from './friendly/header.vue';
+import * as os from '@client/os';
+import copyToClipboard from '@client/scripts/copy-to-clipboard';
+import { resolve } from '@client/router';
+import { url } from '@client/config';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		XHeader
+	},
+
+	provide() {
+		return {
+			navHook: (path) => {
+				this.navigate(path);
+			}
+		};
+	},
+
+	data() {
+		return {
+			path: null,
+			component: null,
+			props: {},
+			pageInfo: null,
+			history: [],
+		};
+	},
+
+	computed: {
+		url(): string {
+			return url + this.path;
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+			}
+		},
+
+		navigate(path, record = true) {
+			if (record && this.path) 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);
+		},
+
+		close() {
+			this.path = null;
+			this.component = null;
+			this.props = {};
+		},
+
+		onContextmenu(e) {
+			os.contextMenu([{
+				type: 'label',
+				text: this.path,
+			}, {
+				icon: 'fas fa-expand-alt',
+				text: this.$ts.showInPage,
+				action: () => {
+					this.$router.push(this.path);
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(this.path);
+					this.close();
+				}
+			}, null, {
+				icon: 'fas fa-external-link-alt',
+				text: this.$ts.openInNewTab,
+				action: () => {
+					window.open(this.url, '_blank');
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-link',
+				text: this.$ts.copyLink,
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}], e);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qvzfzxam {
+	$header-height: 58px; // TODO: どこかに集約したい
+
+	--root-margin: 16px;
+	--margin: var(--marginHalf);
+
+	> .container {
+		position: fixed;
+		width: 370px;
+		height: 100vh;
+		overflow: auto;
+		box-sizing: border-box;
+
+		> .header {
+			display: flex;
+			position: sticky;
+			z-index: 1000;
+			top: 0;
+			height: $header-height;
+			width: 100%;
+			line-height: $header-height;
+			text-align: center;
+			font-weight: bold;
+			//background-color: var(--panel);
+			-webkit-backdrop-filter: blur(32px);
+			backdrop-filter: blur(32px);
+			background-color: var(--header);
+
+			> ._button {
+				height: $header-height;
+				width: $header-height;
+
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			> .title {
+				flex: 1;
+				position: relative;
+			}
+		}
+	}
+}
+</style>
+
--- a/packages/client/src/ui/friendly-legacy-2/friendly.sidebar.vue
+++ b/packages/client/src/ui/friendly-legacy-2/friendly.sidebar.vue
@ -0,0 +1,631 @@
+<template>
+<div class="npcljfve" :class="{ iconOnly }">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = isAccountMenuMode = false"
+			@touchstart.passive="showing = isAccountMenuMode = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav">
+			<div class="profile">
+				<button v-if="!iconOnly" class="item _button account" @click="openProfile">
+					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+				</button>
+				<button v-if="iconOnly" class="item _button account" @click="openAccountMenu">
+					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+				</button>
+				<button v-else class="_button toggler" @click="toggleMenuMode">
+					<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
+					<i v-else class="fas fa-chevron-down"/>
+				</button>
+			</div>
+			<template v-if="!isAccountMenuMode">
+				<div class="post" @click="post">
+					<MkButton class="button" gradate full rounded>
+						<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
+					</MkButton>
+				</div>
+				<div class="divider"></div>
+				<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+					<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+						<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+				</MkA>
+				<button class="item _button" @click="more" v-click-anime>
+					<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+					<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+				</button>
+				<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+				</MkA>
+				<div class="divider"></div>
+				<template v-if="$i.isPatron">
+					<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
+						<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
+					</button>
+					<button v-else class="patron-button _button" @click="patron" v-click-anime>
+						<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
+					</button>
+				</template>
+				<button v-else class="patron-button _button" @click="patron" v-click-anime>
+					<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
+				</button>
+				<div class="divider"></div>
+				<div class="about">
+					<MkA class="link" to="/about" v-click-anime>
+						<template v-if="isKokonect">
+							<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+							<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
+							<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
+						</template>
+						<template v-else>
+							<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+						</template>
+					</MkA>
+				</div>
+				<!--<MisskeyLogo class="misskey"/>-->
+			</template>
+			<template v-else>
+				<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
+					<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
+				</button>
+				<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
+				<div class="divider"></div>
+				<button class="item-switch-acct _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
+				<button class="item-switch-acct danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
+			</template>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+import MkButton from '@client/components/ui/button.vue';
+import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import MisskeyLogo from '@/../assets/client/misskey.svg';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MisskeyLogo,
+	},
+
+	data() {
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			settingsWindowed: false,
+			isAccountMenuMode: false,
+			loadingAccounts: false,
+			showing: false,
+			isKokonect: null
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.isAccountMenuMode = false;
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	mounted() {
+		const sticky = new StickySidebar(this.$el.parentElement, 16);
+		window.addEventListener('scroll', () => {
+			sticky.calc(window.scrollY);
+		}, { passive: true });
+
+		this.init();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
+			this.settingsWindowed = (window.innerWidth > 1400);
+		},
+
+		show() {
+			this.showing = true;
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async fetchAccounts() {
+			this.loadingAccounts = true;
+			this.accounts = await os.getAccounts();
+			this.loadingAccounts = false;
+		},
+
+		toggleMenuMode() {
+			this.isAccountMenuMode = !this.isAccountMenuMode;
+			if (this.isAccountMenuMode) {
+				this.fetchAccounts();
+			}
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${ this.$i.username }`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => { this.addAccount(); },
+					}, {
+						text: this.$ts.createAccount,
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => { this.signout(); },
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => { this.signoutAll(); },
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		patron() {
+			window.open("https://www.patreon.com/noridev", "_blank");
+		},
+
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
+		},
+
+		async openDrawerAccountMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.existingAccount,
+				action: () => { this.addAccount(); },
+			}, {
+				text: this.$ts.createAccount,
+				action: () => { this.createAccount(); },
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		async openSignoutMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.logout,
+				action: () => { this.signout(); },
+				danger: true,
+			}, {
+				text: this.$ts.logoutAll,
+				action: () => { this.signoutAll(); },
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.npcljfve {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+	$avatar-size: 46px;
+	$avatar-margin: 8px;
+
+	padding: 0 16px;
+	box-sizing: border-box;
+	width: 260px;
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width !important;
+
+		> .nav {
+			> .divider {
+				margin: 8px auto;
+				width: calc(100% - 32px);
+			}
+
+			> .post {
+				> .button {
+					width: 46px;
+					height: 46px;
+					padding: 0;
+				}
+
+				@media (max-width: (850px)) {
+					display: none;
+				}
+			}
+
+			> .item,
+				.patron-button {
+				padding-left: 0;
+				width: 100%;
+				text-align: center;
+				font-size: $ui-font-size * 1.1;
+				line-height: 3.7rem;
+				overflow: unset;
+
+				> i,
+				> .avatar {
+					margin-right: 0;
+				}
+
+				> i {
+					left: 10px;
+				}
+
+				> .text,
+					.name,
+					.patron-text {
+					display: none;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: unset;
+					bottom: 11px;
+					left: 33px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .patron,
+				.not-patron {
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	> .nav {
+		> .divider {
+			margin: 10px 0;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .post {
+			position: sticky;
+			top: 65px;
+			z-index: 1;
+			padding: 16px 0;
+			background: var(--bg);
+
+			> .button {
+				min-width: 0;
+			}
+		}
+
+		> .about {
+			fill: currentColor;
+			padding: 8px 0 16px 0;
+			text-align: center;
+
+			> .link {
+				display: block;
+				//width: 32px;
+				margin: 0 auto;
+
+				img {
+					display: block;
+					width: 100%;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+			}
+		}
+
+		> .item,
+			.patron-button {
+			position: relative;
+			display: block;
+			font-size: $ui-font-size;
+			line-height: 2.6rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+
+			> i {
+				width: 32px;
+				margin-left: 3px;
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				margin-left: unset;
+				margin-right: $avatar-margin;
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .name {
+				margin-left: 10px;
+				font-weight: bold;
+			}
+
+			> .indicator {
+				position: absolute;
+				bottom: 10px;
+				left: 0;
+				color: var(--navIndicator);
+				font-size: 7px;
+				animation: blink 1s infinite;
+			}
+
+			> .patron,
+				.not-patron {
+				margin-left: 6px;
+				margin-right: 12px;
+			}
+
+			> .patron {
+				color: var(--patron);
+			}
+
+			> .patron-text {
+				font-size: 0.9em;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+		}
+
+		> .item-switch-acct {
+			position: relative;
+			display: block;
+			font-size: $ui-font-size;
+			line-height: 3rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+			padding-left: 12px;
+
+			> i {
+				width: 32px;
+				margin-left: 3px;
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				margin-left: unset;
+				margin-right: $avatar-margin;
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .name {
+				margin-left: 10px;
+				font-weight: bold;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+
+			&.danger {
+				color: red;
+			}
+		}
+
+		> .patron-button {
+			background: unset;
+			border: unset;
+		}
+
+		> .profile {
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			background: var(--bg);
+			padding: 10px 0 0 0;
+
+			> .item {
+				position: relative;
+				display: block;
+				font-size: $ui-font-size;
+				line-height: 2.6rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+
+				> i {
+					width: 32px;
+					margin-left: 3px;
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					margin-left: unset;
+					margin-right: $avatar-margin;
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 10px;
+					font-weight: bold;
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+			}
+
+			> .account {
+				padding: 10px 20px 0 0;
+			}
+
+			> .toggler {
+				position: absolute;
+				right: 0;
+				top: 25px;
+				width: 36px;
+				height: 36px;
+				z-index: 400;
+			}
+		}
+
+		> .account {
+			padding: 20px 0 0;
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy-2/friendly.vue
+++ b/packages/client/src/ui/friendly-legacy-2/friendly.vue
@ -0,0 +1,612 @@
+<template>
+<div class="mk-app" :class="{ wallpaper, isMobile }">
+	<XHeaderMenu v-if="showMenuOnTop"/>
+
+	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
+		<template v-if="!isMobile">
+			<div class="sidebar" v-if="!showMenuOnTop">
+				<XSidebar/>
+			</div>
+			<div class="widgets left" ref="widgetsLeft" v-else>
+				<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
+			</div>
+		</template>
+
+		<main class="main _panel" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
+			<header class="header">
+				<XHeader @kn-drawernav="showDrawerNav" :info="pageInfo" :back-button="true" @back="back()"/>
+			</header>
+			<div class="content">
+				<router-view v-slot="{ Component }">
+					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
+						<keep-alive :include="['timeline']">
+							<component :is="Component" :ref="changePage"/>
+						</keep-alive>
+					</transition>
+				</router-view>
+			</div>
+		</main>
+
+		<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
+			<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
+		</div>
+	</div>
+
+	<button v-if="fabButton && !(isDesktop || isWideTablet)" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
+
+	<div class="buttons" v-if="isMobile">
+		<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
+		<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
+		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
+	</div>
+
+	<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
+
+	<transition name="tray-back">
+		<div class="tray-back _modalBg"
+			v-if="widgetsShowing"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</transition>
+
+	<transition name="tray">
+		<XWidgets v-if="widgetsShowing" class="tray"/>
+	</transition>
+
+	<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
+import { instanceName } from '@client/config';
+import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import XSidebar from './friendly.sidebar.vue';
+import XDrawerSidebar from './sidebar.vue';
+import XCommon from '../_common_/common.vue';
+import XHeader from './header.vue';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import * as symbols from '@client/symbols';
+import XTimeline from '@client/components/timeline.vue';
+import { eventBus } from '@client/friendly/eventBus';
+
+const DESKTOP_THRESHOLD = 1100;
+const WIDE_TABLET_THRESHOLD = 850;
+const MOBILE_THRESHOLD = 600;
+
+localStorage.setItem('ui', 'friendly');
+
+export default defineComponent({
+	components: {
+		XCommon,
+		XSidebar,
+		XDrawerSidebar,
+		XHeader,
+		XTimeline,
+		XHeaderMenu: defineAsyncComponent(() => import('./friendly.header.vue')),
+		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
+	},
+
+	provide() {
+		return {
+			shouldHeaderThin: this.showMenuOnTop,
+		};
+	},
+
+	data() {
+		return {
+			pageInfo: null,
+			menuDef: menuDef,
+			navHidden: false,
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			widgetsShowing: false,
+			fullView: false,
+			wallpaper: localStorage.getItem('wallpaper') != null,
+			queue: 0,
+			routeList: [
+				'index',
+				'explore',
+				'notifications',
+				'messaging',
+				'user',
+				'drive',
+				'clips',
+				'pages',
+				'ads',
+				'gallery',
+				'channels',
+				'groups',
+				'antennas'
+			],
+			fabButton: false
+		};
+	},
+
+	computed: {
+		navIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+
+		fabIcon() {
+			return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
+		},
+
+		showMenuOnTop(): boolean {
+			return !this.isMobile && this.$store.state.menuDisplay === 'top';
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
+		if (this.$store.state.widgets.length === 0) {
+			this.$store.set('widgets', [{
+				name: 'calendar',
+				id: 'a', place: null, data: {}
+			}, {
+				name: 'notifications',
+				id: 'b', place: null, data: {}
+			}, {
+				name: 'trends',
+				id: 'c', place: null, data: {}
+			}]);
+		}
+
+		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
+		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
+	},
+
+	mounted() {
+		window.addEventListener('resize', () => {
+			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
+			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+		}, { passive: true });
+
+		this.navHidden = this.isMobile;
+
+		if (this.$store.state.aiChanMode) {
+			const iframeRect = this.$refs.live2d.getBoundingClientRect();
+			window.addEventListener('mousemove', ev => {
+				this.$refs.live2d.contentWindow.postMessage({
+					type: 'moveCursor',
+					body: {
+						x: ev.clientX - iframeRect.left,
+						y: ev.clientY - iframeRect.top,
+					}
+				}, '*');
+			}, { passive: true });
+			window.addEventListener('touchmove', ev => {
+				this.$refs.live2d.contentWindow.postMessage({
+					type: 'moveCursor',
+					body: {
+						x: ev.touches[0].clientX - iframeRect.left,
+						y: ev.touches[0].clientY - iframeRect.top,
+					}
+				}, '*');
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+				document.title = `${this.pageInfo.title} | ${instanceName}`;
+				this.fabButton = this.routeList.includes(this.$route.name);
+			}
+		},
+
+		attachSticky(ref) {
+			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+			window.addEventListener('scroll', () => {
+				sticky.calc(window.scrollY);
+			}, { passive: true });
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		back() {
+			history.back();
+		},
+
+		showDrawerNav() {
+			this.$refs.drawerNav.show();
+		},
+
+		onTransition() {
+			if (window._scroll) window._scroll();
+		},
+
+		onHeaderClick() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		onContextmenu(e) {
+			const isLink = (el: HTMLElement) => {
+				if (el.tagName === 'A') return true;
+				if (el.parentElement) {
+					return isLink(el.parentElement);
+				}
+			};
+			if (isLink(e.target)) return;
+			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
+			if (window.getSelection().toString() !== '') return;
+			const path = this.$route.path;
+			os.contextMenu([{
+				type: 'label',
+				text: path,
+			}, {
+				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
+				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
+				action: () => {
+					this.fullView = !this.fullView;
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				}
+			}], e);
+		},
+
+		queueUpdated(q) {
+			this.queue = q;
+		},
+
+		queueReset() {
+			this.queue = 0;
+		},
+
+		onFabClicked(e) {
+			if (this.pageInfo && this.pageInfo.action) {
+				this.pageInfo.action.handler(e);
+			} else {
+				os.post_form();
+			}
+		},
+
+		onAiClick(ev) {
+			//if (this.live2d) this.live2d.click(ev);
+		}
+	}
+});
+</script>
+
+<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 {
+	$nav-hide-threshold: 600px;
+	$header-height: 60px;
+	$ui-font-size: 1em;
+	$widgets-hide-threshold: 1200px;
+	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+		//backdrop-filter: blur(4px);
+	}
+
+	&.isMobile {
+		> .columns {
+			display: block;
+			margin: 0;
+
+			> .main {
+				margin: 0;
+				padding-bottom: 92px;
+				border: none;
+				width: 100%;
+				border-radius: 0;
+
+				> .header {
+					width: 100%;
+				}
+			}
+		}
+
+		> .buttons {
+			> .button {
+				&:hover {
+					background: var(--panel);
+				}
+			}
+		}
+	}
+
+	> .columns {
+		display: flex;
+		justify-content: center;
+		max-width: 100%;
+		//margin: 32px 0;
+
+		&.fullView {
+			margin: 0;
+		
+			> .sidebar {
+				display: none;
+			}
+
+			> .widgets {
+				display: none;
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+
+		> .main {
+			min-width: 0;
+			width: 750px;
+			margin: 0 16px 0 0;
+			background: var(--bg);
+			box-shadow: 0 0 0 1px var(--divider);
+			border-radius: 0;
+			border: initial;
+			--margin: 12px;
+
+			> .header {
+				position: sticky;
+				z-index: 1000;
+				top: var(--globalHeaderHeight, 0px);
+				height: $header-height;
+				line-height: $header-height;
+				-webkit-backdrop-filter: blur(32px);
+				backdrop-filter: blur(32px);
+				background-color: var(--header);
+			}
+
+			> .content {
+				background: var(--bg);
+				--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
+			}
+
+			@media (max-width: 850px) {
+				padding-top: $header-height;
+
+				> .header {
+					position: fixed;
+					width: calc(100% - #{$nav-icon-only-width});
+				}
+			}
+		}
+
+		> .widgets {
+			//--panelShadow: none;
+			width: 300px;
+			margin-top: 16px;
+
+			@media (max-width: $widgets-hide-threshold) {
+				display: none;
+			}
+
+			&.left {
+				margin-right: 16px;
+			}
+		}
+
+		> .sidebar {
+			margin-top: 16px;
+		}
+
+		&.withGlobalHeader {
+			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
+
+			> .main {
+				margin-top: 1px;
+				border-radius: var(--radius);
+				box-shadow: 0 0 0 1px var(--divider);
+			}
+
+			> .widgets {
+				--stickyTop: var(--globalHeaderHeight);
+				margin-top: 1px;
+			}
+		}
+
+		@media (max-width: 850px) {
+			margin: 0;
+
+			> .sidebar {
+				border-right: solid 0.5px var(--divider);
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+	}
+
+	> .fab {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		right: calc(32px + var(--margin) * 2 + 300px);
+		bottom: 32px;
+		width: 55px;
+		height: 55px;
+		border-radius: 100%;
+		// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		background: var(--accent);
+		color: white;
+
+		@media (max-width: $widgets-hide-threshold) {
+			right: 30px;
+		}
+
+		@media (max-width: $nav-hide-threshold) {
+			bottom: calc(66px + env(safe-area-inset-bottom));
+			right: 15px;
+		}
+
+		@media (min-width: (850px) + 1px) {
+			display: none;
+		}
+
+		@media (min-width: (600px) + 1px) {
+			bottom: calc(45px + env(safe-area-inset-bottom));
+		}
+	}
+
+	> .buttons {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		//padding: 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		-webkit-backdrop-filter: blur(32px);
+		backdrop-filter: blur(32px);
+		background-color: var(--header);
+		border-top: solid 0.5px var(--divider);
+
+		> .button {
+			position: relative;
+			flex: 1;
+			//padding: 0;
+			margin: auto;
+			height: 50px;
+			//border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
+			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
+
+			&:not(:last-child) {
+				//margin-right: 12px;
+			}
+
+			@media (max-width: 300px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				background: var(--X2);
+			}
+
+			&.active {
+					color: var(--accent);
+			}
+
+			> .indicator,
+				.indicator-home {
+				position: absolute;
+				top: 7px;
+				right: 20px;
+				color: var(--indicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .indicator-home {
+				top: 8px;
+				right: 25px;
+				font-size: 6px;
+				animation: none;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 18px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .tray-back {
+		z-index: 1001;
+	}
+
+	> .tray {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		background: var(--bg);
+	}
+
+	> .ivnzpscs {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 300px;
+		height: 600px;
+		border: none;
+		pointer-events: none;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy-2/friendly.widgets.vue
+++ b/packages/client/src/ui/friendly-legacy-2/friendly.widgets.vue
@ -0,0 +1,84 @@
+<template>
+<div class="ddiqwdnk">
+	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<MkAd v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" class="a" :prefer="['square']"/>
+
+	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XWidgets from '@client/components/widgets.vue';
+
+export default defineComponent({
+	components: {
+		XWidgets
+	},
+
+	props: {
+		place: {
+			type: String,
+		}
+	},
+
+	emits: ['mounted'],
+
+	data() {
+		return {
+			editMode: false,
+		};
+	},
+
+	mounted() {
+		this.$emit('mounted', this.$el);
+	},
+
+	methods: {
+		addWidget(widget) {
+			this.$store.set('widgets', [{
+				...widget,
+				place: this.place,
+			}, ...this.$store.state.widgets]);
+		},
+
+		removeWidget(widget) {
+			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
+		},
+
+		updateWidget({ id, data }) {
+			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
+				...w,
+				data: data
+			} : w));
+		},
+
+		updateWidgets(widgets) {
+			this.$store.set('widgets', [
+				...this.$store.state.widgets.filter(w => w.place !== this.place),
+				...widgets
+			]);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ddiqwdnk {
+	position: sticky;
+	height: min-content;
+	box-sizing: border-box;
+	padding-bottom: 8px;
+
+	> .widgets,
+	> .a {
+		width: 300px;
+	}
+
+	> .edit {
+		display: block;
+		margin: 28px auto;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy-2/header.vue
+++ b/packages/client/src/ui/friendly-legacy-2/header.vue
@ -0,0 +1,465 @@
+<template>
+<div class="fdidabkb" :class="{ slim: titleOnly || narrow }" :style="`--height:${height};`" :key="key">
+	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
+		<div class="buttons left" v-if="backButton && canBack && !fabButton">
+			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
+		</div>
+	</transition>
+	<div class="buttons left" v-if="isMobile">
+		<button class="_button button" v-if="!(backButton && canBack) || fabButton" @click="showDrawerNav">
+			<MkAvatar class="avatar" v-if="!canBack || menuBar" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
+			<!-- <i class="fas fa-bars"/> -->
+			<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
+		</button>
+	</div>
+	<template v-if="info">
+		<div class="titleContainer" :class="{ center: $route.name !== 'user' }" @click="showTabsPopup">
+			<template v-if="info.tabs">
+				<template v-if="$route.name === 'user'">
+					<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+					<div class="title_user">
+						<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
+						<div class="subtitle" v-if="!narrow && info.subtitle">
+							{{ info.subtitle }}
+						</div>
+						<div class="subtitle activeTab" v-if="narrow && hasTabs">
+							{{ info.tabs.find(tab => tab.active)?.title }}
+							<i class="chevron fas fa-chevron-down"></i>
+						</div>
+					</div>
+				</template>
+				<div class="title tabs" v-else v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
+					<i v-if="tab.icon" class="fa-fw" :class="tab.icon" :key="tab.icon"/>
+					<span v-if="tab.title" class="title">{{ tab.title }}</span>
+					<i class="fas fa-circle indicator" v-if="tab.indicate"/>
+				</div>
+			</template>
+
+			<template v-else>
+				<i v-if="info.icon" class="icon" :class="info.icon"></i>
+				<div class="title">
+					<div v-if="info.title" class="title">{{ info.title }}</div>
+				</div>
+			</template>
+		</div>
+		<div class="tabs" v-if="!narrow && $route.name !== 'index'">
+			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+		</div>
+	</template>
+
+	<div class="buttons right">
+		<button v-if="queue > 0 && $route.name === 'index' && ($store.state.newNoteNotiBehavior === 'smail' || $store.state.newNoteNotiBehavior === 'header')" :class="{ 'new _button': $store.state.newNoteNotiBehavior === 'header', 'new-hover _buttonPrimary': $store.state.newNoteNotiBehavior === 'smail' }" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
+		<template v-if="info && info.actions && !narrow">
+			<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+		</template>
+		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
+		<button v-if="closeButton" class="_button button" @click.stop="$emit('close')" @touchstart="preventDrag" v-tooltip="$ts.close"><i class="fas fa-times"></i></button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { popupMenu } from '@client/os';
+import { url } from '@client/config';
+import { eventBus } from "@client/friendly/eventBus";
+
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 600;
+
+export default defineComponent({
+	props: {
+		info: {
+			required: true
+		},
+		menu: {
+			required: false
+		},
+		backButton: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		closeButton: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		titleOnly: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		showIndicator: {
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			canBack: false,
+			narrow: false,
+			height: 0,
+			key: 0,
+			queue: 0,
+			routeList: [
+				'explore',
+				'notifications',
+				'messaging'
+			],
+			fabButton: false,
+			menuBar: false,
+		};
+	},
+
+	computed: {
+		hasTabs(): boolean {
+			return this.info.tabs && this.info.tabs.length > 0;
+		},
+
+		shouldShowMenu() {
+			if (this.info == null) return false;
+			if (this.info.actions != null && this.narrow) return true;
+			if (this.info.menu != null) return true;
+			if (this.info.share != null) return true;
+			if (this.menu != null) return true;
+			return false;
+		}
+	},
+
+	watch: {
+		info() {
+			this.key++;
+		},
+
+		$route: {
+			handler(to, from) {
+				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
+				this.fabButton = this.routeList.includes(this.$route.name);
+				this.menuBar = this.routeList.includes(this.$route.name);
+			},
+			immediate: true
+		},
+	},
+
+	created() {
+		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
+		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
+	},
+
+	mounted() {
+		this.height = this.$el.parentElement.offsetHeight + 'px';
+		this.narrow = this.titleOnly || window.innerWidth < 600;
+		new ResizeObserver((entries, observer) => {
+			this.height = this.$el.parentElement.offsetHeight + 'px';
+			this.narrow = this.titleOnly || window.innerWidth < 600;
+		}).observe(this.$el);
+	},
+
+	methods: {
+		share() {
+			navigator.share({
+				url: url + this.info.path,
+				...this.info.share,
+			});
+		},
+
+		showDrawerNav() {
+			this.$emit('kn-drawernav');
+		},
+
+		onHeaderClick() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		showMenu(ev) {
+			let menu = this.info.menu ? this.info.menu() : [];
+			if (!this.narrow && this.info.actions) {
+				menu = [...this.info.actions.map(x => ({
+					text: x.text,
+					icon: x.icon,
+					action: x.handler
+				})), menu.length > 0 ? null : undefined, ...menu];
+			}
+			if (this.info.share) {
+				if (menu.length > 0) menu.push(null);
+				menu.push({
+					text: this.$ts.share,
+					icon: 'fas fa-share-alt',
+					action: this.share
+				});
+			}
+			if (this.menu) {
+				if (menu.length > 0) menu.push(null);
+				menu = menu.concat(this.menu);
+			}
+			popupMenu(menu, ev.currentTarget || ev.target);
+		},
+
+		showTabsPopup(ev) {
+			if (!this.hasTabs) return;
+			if (!this.narrow) return;
+			ev.preventDefault();
+			ev.stopPropagation();
+			const menu = this.info.tabs.map(tab => ({
+				text: tab.title,
+				icon: tab.icon,
+				action: tab.onClick,
+			}));
+			popupMenu(menu, ev.currentTarget || ev.target);
+		},
+
+		preventDrag(ev) {
+			ev.stopPropagation();
+		},
+
+		queueUpdated(q) {
+			this.queue = q;
+		},
+
+		queueReset() {
+			this.queue = 0;
+		},
+
+		top() {
+			this.onHeaderClick();
+			this.queueReset();
+			eventBus.emit('kn-header-new-queue-reset', 0);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	$ui-font-size: 1em;
+	$avatar-size: 32px;
+	$avatar-margin: 10px;
+
+	display: flex;
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			margin: 0 auto;
+		}
+	}
+
+	> .buttons {
+		&.left, &.right {
+			>.button {
+				height: var(--height);
+				width: var(--height);
+			}
+		}
+
+		&.left {
+			position: relative;
+			z-index: 1;
+			top: 0;
+			left: 0;
+
+			> .button {
+				height: var(--height);
+				width: var(--height);
+
+				> .indicator {
+					position: absolute;
+					bottom: 13px;
+					left: 43px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+			}
+
+			@media (max-width: 600px) {
+				position: absolute;
+			}
+		}
+
+		&.right {
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			right: 0;
+			margin-left: 0;
+
+			> .new {
+				width: $avatar-size;
+				height: var(--height);
+			}
+
+			> .new-hover {
+				position: absolute;
+				width: $avatar-size;
+				height: $avatar-size;
+				top: 55px;
+				right: 14px;
+				border-radius: 100%;
+				// border: 2px solid var(--patron);
+				line-height: 0;
+				background: var(--pick);
+				margin-top: 10px;
+				// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+
+				&:hover {
+					background: var(--pickLighten);
+				}
+			}
+		}
+
+		&:empty {
+			width: var(--height);
+		}
+	}
+
+	> .titleContainer {
+		display: flex;
+		align-items: center;
+		overflow: auto;
+		white-space: nowrap;
+		text-align: left;
+		font-weight: bold;
+		height: var(--height);
+		flex-shrink: 0;
+
+		> .avatar {
+			$size: 32px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: 0 8px;
+			pointer-events: none;
+		}
+
+		> .icon {
+			margin-right: 8px;
+		}
+
+		> .title,
+			.title_user {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			> .indicator {
+				position: absolute;
+				top: 13px;
+				right: 7px;
+				color: var(--indicator);
+				font-size: 7px;
+				animation: blink 1s infinite;
+			}
+
+			> .patron {
+				margin-left: 0.5em;
+				color: var(--patron);
+			}
+
+			> .subtitle {
+				opacity: 0.6;
+				font-size: 0.8em;
+				font-weight: normal;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&.activeTab {
+					text-align: center;
+
+					> .chevron {
+						display: inline-block;
+						margin-left: 6px;
+					}
+				}
+			}
+
+			&._button {
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			&.selected {
+				box-shadow: 0 -2px 0 0 var(--accent) inset;
+				color: var(--fgHighlighted);
+			}
+		}
+
+		> .title {
+			display: inline-block;
+			vertical-align: bottom;
+			position: relative;
+		}
+
+		> .title_user {
+			min-width: 0;
+			line-height: 1.1;
+		}
+
+		&.center {
+			margin: 0 auto;
+		}
+
+		> .tabs {
+			padding: 0 16px;
+		}
+	}
+
+	> .tabs {
+		margin-left: 16px;
+		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .tab {
+			display: inline-block;
+			position: relative;
+			padding: 0 10px;
+			height: 100%;
+			font-weight: normal;
+			opacity: 0.7;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			&.active {
+				opacity: 1;
+
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					margin: 0 auto;
+					width: 100%;
+					height: 3px;
+					background: var(--accent);
+				}
+			}
+
+			> .icon + .title {
+				margin-left: 8px;
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy-2/sidebar.vue
+++ b/packages/client/src/ui/friendly-legacy-2/sidebar.vue
@ -0,0 +1,735 @@
+<template>
+<div class="mvcprjjd">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = isAccountMenuMode = false"
+			@touchstart.passive="showing = isAccountMenuMode = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
+			<div>
+				<div class="profile">
+					<button class="item _button account" @click="openProfile">
+						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+					</button>
+					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
+						<i class="fas fa-ellipsis-v"/>
+					</button>
+					<button v-else class="_button toggler" @click="toggleMenuMode">
+						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
+						<i v-else class="fas fa-chevron-down"/>
+					</button>
+				</div>
+				<template v-if="!isAccountMenuMode">
+					<div class="divider"></div>
+					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+					</MkA>
+					<template v-for="item in menu">
+						<div v-if="item === '-'" class="divider"></div>
+						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+						</component>
+					</template>
+					<div class="divider"></div>
+					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
+						<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+					</MkA>
+					<button class="item _button" @click="more" v-click-anime>
+						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+					</button>
+					<MkA class="item" active-class="active" to="/settings" v-click-anime>
+						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+					</MkA>
+					<!-- <button class="item _button post" @click="post">
+						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+					</button> -->
+					<div class="divider"></div>
+					<template v-if="$i.isPatron">
+						<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
+							<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
+						</button>
+						<button v-else class="patron-button _button" @click="patron" v-click-anime>
+							<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
+						</button>
+					</template>
+					<button v-else class="patron-button _button" @click="patron" v-click-anime>
+						<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
+					</button>
+					<div class="divider"></div>
+					<div class="about">
+						<MkA class="link" to="/about" v-click-anime>
+							<template v-if="isKokonect">
+								<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+								<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
+							</template>
+							<template v-else>
+								<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+							</template>
+						</MkA>
+					</div>
+				</template>
+				<template v-else>
+					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
+						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
+					</button>
+					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
+					<div class="divider" v-if="accounts.length > 0"></div>
+					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
+					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
+				</template>
+			</div>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/friendly/menu-mobile';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+
+export default defineComponent({
+	props: {
+		defaultHidden: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	data() {
+		return {
+			host: host,
+			showing: false,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			hidden: this.defaultHidden,
+			isAccountMenuMode: false,
+			loadingAccounts: false,
+			isKokonect: null
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+
+		hidden() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		}
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	mounted() {
+		this.init();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
+			if (!this.defaultHidden) {
+				this.hidden = (window.innerWidth <= 650);
+			}
+		},
+
+		show() {
+			this.showing = true;
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async fetchAccounts() {
+			this.loadingAccounts = true;
+			this.accounts = await os.getAccounts();
+			this.loadingAccounts = false;
+		},
+
+		toggleMenuMode() {
+			this.isAccountMenuMode = !this.isAccountMenuMode;
+			if (this.isAccountMenuMode) {
+				this.fetchAccounts();
+			}
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${ this.$i.username }`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => { this.addAccount(); },
+					}, {
+						text: this.$ts.createAccount,
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => { this.signout(); },
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => { this.signoutAll(); },
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		patron() {
+			window.open("https://www.patreon.com/noridev", "_blank");
+		},
+
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
+		},
+
+		async openDrawerAccountMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.existingAccount,
+				action: () => { this.addAccount(); },
+			}, {
+				text: this.$ts.createAccount,
+				action: () => { this.createAccount(); },
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		async openSignoutMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.logout,
+				action: () => { this.signout(); },
+				danger: true,
+			}, {
+				text: this.$ts.logoutAll,
+				action: () => { this.signoutAll(); },
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-enter-active,
+.nav-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);
+}
+.nav-enter-from,
+.nav-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.nav-back-enter-active,
+.nav-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.nav-back-enter-from,
+.nav-back-leave-active {
+	opacity: 0;
+}
+
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px;
+	$nav-icon-only-width: 86px;
+
+	> .nav-back {
+		z-index: 1001;
+	}
+
+	> .nav {
+		$avatar-size: 38px;
+		$avatar-margin: 8px;
+
+		flex: 0 0 $nav-width;
+		width: $nav-width;
+		box-sizing: border-box;
+
+		&.iconOnly {
+			flex: 0 0 $nav-icon-only-width;
+			width: $nav-icon-only-width;
+
+			&:not(.hidden) {
+				> div {
+					width: $nav-icon-only-width;
+
+					> .divider {
+						margin: 8px auto;
+						width: calc(100% - 32px);
+					}
+
+					> .item,
+						.patron-button {
+						padding: 18px 0;
+						width: 100%;
+						text-align: center;
+						font-size: $ui-font-size * 1.1;
+						line-height: initial;
+
+						> i,
+						> .avatar {
+							display: block;
+							margin: 0 auto;
+						}
+
+						> i {
+							opacity: 0.7;
+						}
+
+						> .text,
+							.patron-text {
+							display: none;
+						}
+
+						> .patron,
+							.not-patron {
+							margin: 0;
+						}
+
+						&:hover, &.active {
+							> i, > .text {
+								opacity: 1;
+							}
+						}
+
+						&:first-child {
+							margin-bottom: 8px;
+						}
+
+						&:last-child {
+							margin-top: 8px;
+						}
+					}
+				}
+			}
+		}
+
+		&.hidden {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+		}
+
+		&:not(.hidden) {
+			display: block !important;
+		}
+
+		> div {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+			width: $nav-width;
+			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+			height: calc(var(--vh, 1vh) * 100);
+			box-sizing: border-box;
+			overflow: auto;
+			overflow-x: clip;
+			background: var(--navBg);
+
+			> .divider {
+				margin: 16px;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> .about {
+				fill: currentColor;
+				padding: 8px 0 16px 0;
+				text-align: center;
+				
+				> .link {
+					display: block;
+					//width: 32px;
+					margin: 0 auto;
+					
+					img {
+						display: block;
+						width: 100%;
+					}
+
+					&:hover {
+						text-decoration: none;
+					}
+				}
+			}
+
+			> .item,
+				.patron-button {
+				position: relative;
+				display: block;
+				padding: 0 24px;
+				font-size: $ui-font-size;
+				line-height: 2.85rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					position: relative;
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 5px;
+					font-weight: bold;
+				}
+
+				> .indicator {
+					position: absolute;
+					bottom: 8px;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .text {
+					position: relative;
+					font-size: 0.9em;
+				}
+
+				> .patron,
+					.not-patron {
+					margin-left: 6px;
+					margin-right: 12px;
+				}
+
+				> .patron {
+					color: var(--patron);
+				}
+
+				> .patron-text {
+					font-size: 0.9em;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover, &.active {
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 24px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 8px;
+						background: var(--accentedBg);
+					}
+				}
+
+				&:last-child {
+					position: sticky;
+					z-index: 1;
+					bottom: 0;
+					margin-top: 16px;
+					border-top: solid 0.5px var(--divider);
+					padding-top: 8px;
+					padding-bottom: 8px;
+					background: var(--X14);
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+					color: var(--fgOnAccent);
+
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 20px);
+						height: calc(100% - 20px);
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+				}
+			}
+
+			> .item-switch-acct,
+			> .item-button {
+				position: relative;
+				display: block;
+				padding: 12px 24px 0;
+				font-size: $ui-font-size;
+				line-height: 3rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 5px;
+					font-weight: bold;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&.danger {
+					color: red;
+				}
+			}
+
+			> .item-button {
+				padding: 0 24px;
+			}
+
+			> .profile {
+				position: sticky;
+				z-index: 1;
+				top: 0;
+				display: flex;
+				text-align: center;
+				justify-content: center;
+				align-items: center;
+				background: var(--X14);
+				-webkit-backdrop-filter: blur(8px);
+				backdrop-filter: blur(8px);
+
+				> .item {
+					position: relative;
+					display: block;
+					padding: 12px 24px 0;
+					font-size: $ui-font-size;
+					line-height: 3rem;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					color: var(--navFg);
+
+					> i {
+						width: 32px;
+					}
+
+					> i,
+					> .avatar {
+						margin-right: $avatar-margin;
+					}
+
+					> .avatar {
+						width: $avatar-size;
+						height: $avatar-size;
+						vertical-align: middle;
+					}
+
+					> .name {
+						margin-left: 5px;
+						font-weight: bold;
+					}
+
+					&.active {
+						color: var(--navActive);
+					}
+
+					&:hover {
+						text-decoration: none;
+						color: var(--navHoverFg);
+					}
+				}
+
+				> .toggler {
+					//position: absolute;
+					//right: 15px;
+					width: 36px;
+					height: 36px;
+					margin: 12px 15px 0 0;
+					padding: 10px;
+					z-index: 400;
+				}
+			}
+
+			> .patron-button {
+				background: unset;
+				border: unset;
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy/friendly.side.vue
+++ b/packages/client/src/ui/friendly-legacy/friendly.side.vue
@ -0,0 +1,162 @@
+<template>
+<div class="qvzfzxam _narrow_" v-if="component">
+	<div class="container">
+		<header class="header" @contextmenu.prevent.stop="onContextmenu">
+			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
+			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
+			<XHeader class="title" :info="pageInfo" :with-back="false"/>
+			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
+		</header>
+		<component :is="component" v-bind="props" :ref="changePage"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XHeader from './friendly/header.vue';
+import * as os from '@client/os';
+import copyToClipboard from '@client/scripts/copy-to-clipboard';
+import { resolve } from '@client/router';
+import { url } from '@client/config';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		XHeader
+	},
+
+	provide() {
+		return {
+			navHook: (path) => {
+				this.navigate(path);
+			}
+		};
+	},
+
+	data() {
+		return {
+			path: null,
+			component: null,
+			props: {},
+			pageInfo: null,
+			history: [],
+		};
+	},
+
+	computed: {
+		url(): string {
+			return url + this.path;
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+			}
+		},
+
+		navigate(path, record = true) {
+			if (record && this.path) 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);
+		},
+
+		close() {
+			this.path = null;
+			this.component = null;
+			this.props = {};
+		},
+
+		onContextmenu(e) {
+			os.contextMenu([{
+				type: 'label',
+				text: this.path,
+			}, {
+				icon: 'fas fa-expand-alt',
+				text: this.$ts.showInPage,
+				action: () => {
+					this.$router.push(this.path);
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(this.path);
+					this.close();
+				}
+			}, null, {
+				icon: 'fas fa-external-link-alt',
+				text: this.$ts.openInNewTab,
+				action: () => {
+					window.open(this.url, '_blank');
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-link',
+				text: this.$ts.copyLink,
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}], e);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qvzfzxam {
+	$header-height: 58px; // TODO: どこかに集約したい
+
+	--root-margin: 16px;
+	--margin: var(--marginHalf);
+
+	> .container {
+		position: fixed;
+		width: 370px;
+		height: 100vh;
+		overflow: auto;
+		box-sizing: border-box;
+
+		> .header {
+			display: flex;
+			position: sticky;
+			z-index: 1000;
+			top: 0;
+			height: $header-height;
+			width: 100%;
+			line-height: $header-height;
+			text-align: center;
+			font-weight: bold;
+			//background-color: var(--panel);
+			-webkit-backdrop-filter: blur(32px);
+			backdrop-filter: blur(32px);
+			background-color: var(--header);
+
+			> ._button {
+				height: $header-height;
+				width: $header-height;
+
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			> .title {
+				flex: 1;
+				position: relative;
+			}
+		}
+	}
+}
+</style>
+
--- a/packages/client/src/ui/friendly-legacy/friendly.sidebar.vue
+++ b/packages/client/src/ui/friendly-legacy/friendly.sidebar.vue
@ -0,0 +1,426 @@
+<template>
+<div class="npcljfve" :class="{ iconOnly }">
+	<button class="item _button account profile" @click="openProfile" @contextmenu.stop.prevent="openAccountMenu" v-click-anime>
+		<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+	</button>
+	<div class="post" @click="post">
+		<MkButton class="button" gradate full rounded>
+			<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
+		</MkButton>
+	</div>
+	<div class="divider"></div>
+	<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+		<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+	</MkA>
+	<template v-for="item in menu">
+		<div v-if="item === '-'" class="divider"></div>
+		<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+		</component>
+	</template>
+	<div class="divider"></div>
+	<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+		<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+	</MkA>
+	<button class="item _button" @click="more" v-click-anime>
+		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+	</button>
+	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+		<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+	</MkA>
+	<div class="divider"></div>
+	<template v-if="$i.isPatron">
+		<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
+			<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
+		</button>
+		<button v-else class="patron-button _button" @click="patron" v-click-anime>
+			<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
+		</button>
+	</template>
+	<button v-else class="patron-button _button" @click="patron" v-click-anime>
+		<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
+	</button>
+	<div class="divider"></div>
+	<div class="about">
+		<MkA class="link" to="/about" v-click-anime>
+			<template v-if="isKokonect">
+				<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+				<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
+				<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
+			</template>
+			<template v-else>
+				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+			</template>
+		</MkA>
+	</div>
+	<!--<MisskeyLogo class="misskey"/>-->
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import { getAccounts, addAccount, login } from '@client/account';
+import MkButton from '@client/components/ui/button.vue';
+import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import MisskeyLogo from '@/../assets/client/misskey.svg';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MisskeyLogo,
+	},
+
+	data() {
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			settingsWindowed: false,
+			isKokonect: null
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	mounted() {
+		const sticky = new StickySidebar(this.$el.parentElement, 16);
+		window.addEventListener('scroll', () => {
+			sticky.calc(window.scrollY);
+		}, { passive: true });
+
+		this.init();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
+			this.settingsWindowed = (window.innerWidth > 1400);
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = (await getAccounts()).filter(x => x.id !== this.$i.id);
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			await os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${this.$i.username}`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				icon: 'fas fa-plus',
+				text: this.$ts.addAccount,
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => {
+							this.addAccount();
+						},
+					}, {
+						text: this.$ts.createAccount,
+						action: () => {
+							this.createAccount();
+						},
+					}], ev.currentTarget || ev.target);
+				},
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		switchAccount(account: any) {
+			const storedAccounts = getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		patron() {
+			window.open("https://www.patreon.com/noridev", "_blank");
+		},
+
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.npcljfve {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+	$avatar-size: 46px;
+	$avatar-margin: 8px;
+
+	padding: 0 16px;
+	box-sizing: border-box;
+	width: 260px;
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width !important;
+
+		> .divider {
+			margin: 8px auto;
+			width: calc(100% - 32px);
+		}
+
+		> .post {
+			> .button {
+				width: 46px;
+				height: 46px;
+				padding: 0;
+			}
+
+			@media (max-width: (850px)) {
+				display: none;
+			}
+		}
+
+		> .item,
+			.patron-button {
+			padding-left: 0;
+			width: 100%;
+			text-align: center;
+			font-size: $ui-font-size * 1.1;
+			line-height: 3.7rem;
+			overflow: unset;
+
+			> i,
+			> .avatar {
+				margin-right: 0;
+			}
+
+			> i {
+				left: 10px;
+			}
+
+			> .text,
+				.name,
+				.patron-text {
+				display: none;
+			}
+
+			> .indicator {
+				position: absolute;
+				top: unset;
+				bottom: 11px;
+				left: 33px;
+				color: var(--navIndicator);
+				font-size: 7px;
+				animation: blink 1s infinite;
+			}
+
+			> .patron,
+				.not-patron {
+				margin: 0;
+			}
+		}
+	}
+
+	> .divider {
+		margin: 10px 0;
+		border-top: solid 0.5px var(--divider);
+	}
+
+	> .post {
+		position: sticky;
+		top: 65px;
+		z-index: 1;
+		padding: 16px 0;
+		background: var(--bg);
+
+		> .button {
+			min-width: 0;
+		}
+	}
+
+	> .about {
+		fill: currentColor;
+		padding: 8px 0 16px 0;
+		text-align: center;
+
+		> .link {
+			display: block;
+			//width: 32px;
+			margin: 0 auto;
+
+			img {
+				display: block;
+				width: 100%;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+		}
+	}
+
+	> .item,
+		.patron-button {
+		position: relative;
+		display: block;
+		font-size: $ui-font-size;
+		line-height: 2.6rem;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		width: 100%;
+		text-align: left;
+		box-sizing: border-box;
+
+		> i {
+			width: 32px;
+			margin-left: 3px;
+			margin-right: $avatar-margin;
+		}
+
+		> .avatar {
+			margin-left: unset;
+			margin-right: $avatar-margin;
+			width: $avatar-size;
+			height: $avatar-size;
+			vertical-align: middle;
+		}
+
+		> .name {
+			margin-left: 10px;
+			font-weight: bold;
+		}
+
+		> .indicator {
+			position: absolute;
+			bottom: 10px;
+			left: 0;
+			color: var(--navIndicator);
+			font-size: 7px;
+			animation: blink 1s infinite;
+		}
+
+		> .patron,
+			.not-patron {
+			margin-left: 6px;
+			margin-right: 12px;
+		}
+
+		> .patron {
+			color: var(--patron);
+		}
+
+		> .patron-text {
+			font-size: 0.9em;
+		}
+
+		&:hover {
+			text-decoration: none;
+			color: var(--navHoverFg);
+		}
+
+		&.active {
+			color: var(--navActive);
+		}
+	}
+
+	> .patron-button {
+		background: unset;
+		border: unset;
+	}
+
+	> .profile {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		background: var(--bg);
+		padding: 15px 0 0 0;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy/friendly.vue
+++ b/packages/client/src/ui/friendly-legacy/friendly.vue
@ -0,0 +1,581 @@
+<template>
+<div class="mk-app" :class="{ wallpaper, isMobile }">
+	<XHeaderMenu v-if="showMenuOnTop"/>
+
+	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
+		<template v-if="!isMobile">
+			<div class="sidebar" v-if="!showMenuOnTop">
+				<XSidebar/>
+			</div>
+			<div class="widgets left" ref="widgetsLeft" v-else>
+				<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
+			</div>
+		</template>
+
+		<main class="main _panel" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
+			<header class="header">
+				<XHeader @kn-drawernav="showDrawerNav" :info="pageInfo"/>
+			</header>
+			<div class="content">
+				<router-view v-slot="{ Component }">
+					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
+						<keep-alive :include="['timeline']">
+							<component :is="Component" :ref="changePage"/>
+						</keep-alive>
+					</transition>
+				</router-view>
+			</div>
+		</main>
+
+		<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
+			<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
+		</div>
+	</div>
+
+	<div class="floatbtn" v-if="!isDesktop">
+		<button v-if="$route.name === 'index' || $route.name === 'notifications' || $route.name === 'user'" class="post _buttonPrimary" @click="post()" v-click-anime><i class="fas fa-pencil-alt"/></button>
+		<button v-if="$route.name === 'messaging'" class="post _buttonPrimary" @click="createMessagingRoom()" v-click-anime><i class="fas fa-plus"/></button>
+		<button v-if="$route.name === 'drive'" class="post _buttonPrimary" @click="driveMenu()" v-click-anime><i class="fas fa-plus"/></button>
+		<button v-if="$route.name === 'clips'" class="post _buttonPrimary" @click="createClip()" v-click-anime><i class="fas fa-plus"/></button>
+		<button v-if="$route.name === 'pages'" class="post _buttonPrimary" @click="createPage()" v-click-anime><i class="fas fa-plus"/></button>
+		<button v-if="$route.name === 'ads'" class="post _buttonPrimary" @click="createAd()" v-click-anime><i class="fas fa-plus"/></button>
+  </div>
+
+	<div class="buttons" v-if="isMobile">
+		<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i></button>
+		<button class="button search _button" @click="search"><i class="fas fa-search"/></button>
+		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
+	</div>
+
+	<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
+
+	<transition name="tray-back">
+		<div class="tray-back _modalBg"
+			v-if="widgetsShowing"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</transition>
+
+	<transition name="tray">
+		<XWidgets v-if="widgetsShowing" class="tray"/>
+	</transition>
+
+	<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
+import { instanceName } from '@client/config';
+import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import XSidebar from './friendly.sidebar.vue';
+import XDrawerSidebar from './sidebar.vue';
+import XCommon from '../_common_/common.vue';
+import XHeader from './header.vue';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import * as symbols from '@client/symbols';
+import XTimeline from '@client/components/timeline.vue';
+import { search } from '@client/scripts/search';
+import { eventBus } from '@client/friendly/eventBus';
+
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 600;
+
+export default defineComponent({
+	components: {
+		XCommon,
+		XSidebar,
+		XDrawerSidebar,
+		XHeader,
+		XTimeline,
+		XHeaderMenu: defineAsyncComponent(() => import('../classic.header.vue')),
+		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
+	},
+
+	data() {
+		return {
+			pageInfo: null,
+			menuDef: menuDef,
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			widgetsShowing: false,
+			fullView: false,
+			wallpaper: localStorage.getItem('wallpaper') != null,
+		};
+	},
+
+	computed: {
+		navIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+
+		showMenuOnTop(): boolean {
+			return !this.isMobile && this.$store.state.menuDisplay === 'top';
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
+		if (this.$store.state.widgets.length === 0) {
+			this.$store.set('widgets', [{
+				name: 'calendar',
+				id: 'a', place: 'right', data: {}
+			}, {
+				name: 'notifications',
+				id: 'b', place: 'right', data: {}
+			}, {
+				name: 'trends',
+				id: 'c', place: 'right', data: {}
+			}]);
+		}
+	},
+
+	mounted() {
+		window.addEventListener('resize', () => {
+			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
+			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+		}, { passive: true });
+
+		if (this.$store.state.aiChanMode) {
+			const iframeRect = this.$refs.live2d.getBoundingClientRect();
+			window.addEventListener('mousemove', ev => {
+				this.$refs.live2d.contentWindow.postMessage({
+					type: 'moveCursor',
+					body: {
+						x: ev.clientX - iframeRect.left,
+						y: ev.clientY - iframeRect.top,
+					}
+				}, '*');
+			}, { passive: true });
+			window.addEventListener('touchmove', ev => {
+				this.$refs.live2d.contentWindow.postMessage({
+					type: 'moveCursor',
+					body: {
+						x: ev.touches[0].clientX - iframeRect.left,
+						y: ev.touches[0].clientY - iframeRect.top,
+					}
+				}, '*');
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+				document.title = `${this.pageInfo.title} | ${instanceName}`;
+			}
+		},
+
+		attachSticky(ref) {
+			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+			window.addEventListener('scroll', () => {
+				sticky.calc(window.scrollY);
+			}, { passive: true });
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		createMessagingRoom() {
+			eventBus.emit('kn-createmsgroom');
+		},
+
+		driveMenu() {
+			eventBus.emit('kn-drivemenu');
+		},
+
+		createClip() {
+			eventBus.emit('kn-createclip');
+		},
+
+		createPage() {
+			eventBus.emit('kn-createpage');
+		},
+
+		createAd() {
+			eventBus.emit('kn-createad');
+		},
+
+		search() {
+			search();
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		showDrawerNav() {
+			this.$refs.drawerNav.show();
+		},
+
+		onTransition() {
+			if (window._scroll) window._scroll();
+		},
+
+		onHeaderClick() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		onContextmenu(e) {
+			const isLink = (el: HTMLElement) => {
+				if (el.tagName === 'A') return true;
+				if (el.parentElement) {
+					return isLink(el.parentElement);
+				}
+			};
+			if (isLink(e.target)) return;
+			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
+			if (window.getSelection().toString() !== '') return;
+			const path = this.$route.path;
+			os.contextMenu([{
+				type: 'label',
+				text: path,
+			}, {
+				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
+				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
+				action: () => {
+					this.fullView = !this.fullView;
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				}
+			}], e);
+		},
+
+		onAiClick(ev) {
+			//if (this.live2d) this.live2d.click(ev);
+		}
+	}
+});
+</script>
+
+<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 {
+	$nav-hide-threshold: 650px;
+	$header-height: 50px;
+	$ui-font-size: 1em;
+	$widgets-hide-threshold: 1200px;
+	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+		//backdrop-filter: blur(4px);
+	}
+
+	&.isMobile {
+		> .columns {
+			display: block;
+			margin: 0;
+
+			> .main {
+				margin: 0;
+				padding-bottom: 92px;
+				border: none;
+				width: 100%;
+				border-radius: 0;
+
+				> .header {
+					width: 100%;
+				}
+			}
+		}
+
+		> .buttons {
+			> .button {
+				&:hover {
+					background: var(--panel);
+				}
+			}
+		}
+	}
+
+	> .columns {
+		display: flex;
+		justify-content: center;
+		max-width: 100%;
+		//margin: 32px 0;
+
+		&.fullView {
+			margin: 0;
+		
+			> .sidebar {
+				display: none;
+			}
+
+			> .widgets {
+				display: none;
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+
+		> .main {
+			min-width: 0;
+			width: 750px;
+			margin: 0 16px 0 0;
+			background: var(--bg);
+			box-shadow: 0 0 0 1px var(--divider);
+			border-radius: 0;
+			--margin: 12px;
+
+			> .header {
+				position: sticky;
+				z-index: 1000;
+				top: var(--globalHeaderHeight, 0px);
+				height: $header-height;
+				line-height: $header-height;
+				-webkit-backdrop-filter: blur(32px);
+				backdrop-filter: blur(32px);
+				background-color: var(--header);
+			}
+
+			> .content {
+				background: var(--bg);
+				--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
+			}
+
+			@media (max-width: 850px) {
+				padding-top: $header-height;
+
+				> .header {
+					position: fixed;
+					width: calc(100% - #{$nav-icon-only-width});
+				}
+			}
+		}
+
+		> .widgets {
+			//--panelShadow: none;
+			width: 300px;
+			margin-top: 16px;
+
+			@media (max-width: $widgets-hide-threshold) {
+				display: none;
+			}
+
+			&.left {
+				margin-right: 16px;
+			}
+		}
+
+		> .sidebar {
+			margin-top: 16px;
+		}
+
+		&.withGlobalHeader {
+			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
+
+			> .main {
+				margin-top: 1px;
+				border-radius: var(--radius);
+				box-shadow: 0 0 0 1px var(--divider);
+			}
+
+			> .widgets {
+				--stickyTop: var(--globalHeaderHeight);
+				margin-top: 1px;
+			}
+		}
+
+		@media (max-width: 850px) {
+			margin: 0;
+
+			> .sidebar {
+				border-right: solid 0.5px var(--divider);
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+	}
+
+	> .floatbtn {
+		position: fixed;
+		z-index: 1000;
+		bottom: 77px;
+		box-sizing: border-box;
+		padding: 18px 0 calc(constant(safe-area-inset-bottom) + 43px); /* iOS 11.0 */
+		padding: 18px 0 calc(env(safe-area-inset-bottom) + 43px); /* iOS 11.2 */
+
+		> .post {
+			position: fixed;
+			z-index: 1000;
+			width: 55px;
+			height: 55px;
+			border-radius: 100%;
+			box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+			font-size: 22px;
+			right: 15px;
+		}
+
+		@media (min-width: (850px) + 1px) {
+			display: none;
+		}
+
+		@media (min-width: (600px) + 1px) {
+			bottom: 50px;
+
+			> .post {
+				right: 30px;
+			}
+		}
+	}
+
+	> .buttons {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		//padding: 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		-webkit-backdrop-filter: blur(32px);
+		backdrop-filter: blur(32px);
+		background-color: var(--header);
+		border-top: solid 0.5px var(--divider);
+
+		> .button {
+			position: relative;
+			flex: 1;
+			//padding: 0;
+			margin: auto;
+			height: 50px;
+			//border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
+			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
+
+			&:not(:last-child) {
+				//margin-right: 12px;
+			}
+
+			@media (max-width: 300px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				background: var(--X2);
+			}
+
+			&.active {
+					color: var(--accent);
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 7px;
+				right: 20px;
+				color: var(--indicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 18px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .tray-back {
+		z-index: 1001;
+	}
+
+	> .tray {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		background: var(--bg);
+	}
+
+	> .ivnzpscs {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 300px;
+		height: 600px;
+		border: none;
+		pointer-events: none;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy/friendly.widgets.vue
+++ b/packages/client/src/ui/friendly-legacy/friendly.widgets.vue
@ -0,0 +1,84 @@
+<template>
+<div class="ddiqwdnk">
+	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<MkAd v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" class="a" prefer="square"/>
+
+	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XWidgets from '@client/components/widgets.vue';
+
+export default defineComponent({
+	components: {
+		XWidgets
+	},
+
+	props: {
+		place: {
+			type: String,
+		}
+	},
+
+	emits: ['mounted'],
+
+	data() {
+		return {
+			editMode: false,
+		};
+	},
+
+	mounted() {
+		this.$emit('mounted', this.$el);
+	},
+
+	methods: {
+		addWidget(widget) {
+			this.$store.set('widgets', [{
+				...widget,
+				place: this.place,
+			}, ...this.$store.state.widgets]);
+		},
+
+		removeWidget(widget) {
+			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
+		},
+
+		updateWidget({ id, data }) {
+			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
+				...w,
+				data: data
+			} : w));
+		},
+
+		updateWidgets(widgets) {
+			this.$store.set('widgets', [
+				...this.$store.state.widgets.filter(w => w.place !== this.place),
+				...widgets
+			]);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ddiqwdnk {
+	position: sticky;
+	height: min-content;
+	box-sizing: border-box;
+	padding-bottom: 8px;
+
+	> .widgets,
+	> .a {
+		width: 300px;
+	}
+
+	> .edit {
+		display: block;
+		margin: 16px auto;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy/header.vue
+++ b/packages/client/src/ui/friendly-legacy/header.vue
@ -0,0 +1,309 @@
+<template>
+<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
+	<template v-if="info">
+		<div class="titleContainer" @click="onHeaderClick">
+			<div class="title">
+				<!-- <i v-if="info.icon" class="icon" :class="info.icon"></i> -->
+				<MkAvatar v-if="info.avatar && !($route.name === 'note')" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+				<span v-else-if="info.title" class="text">{{ info.title }}</span>
+			</div>
+		</div>
+		<div class="buttons_L" v-if="isMobile">
+			<button class="_button button_L" v-if="!(withBack && canBack) || ($route.name === 'notifications' || $route.name === 'messaging')" @click="showDrawerNav" v-click-anime>
+				<i class="fas fa-bars"/>
+				<span v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator">
+					<i class="fas fa-circle"></i>
+				</span>
+			</button>
+			<MkAvatar class="avatar" v-if="!(withBack && canBack) || ($route.name === 'notifications' || $route.name === 'messaging')" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
+			<MkAvatar class="avatar_back" v-else-if="withBack && canBack && !(info.avatar)" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
+			<!--
+			<template v-if="$i.isPatron && !(info.avatar) || ($route.name === 'notifications' || $route.name === 'messaging')">
+				<span class="patron" v-if="$i.isVip"><i class="fas fa-gem"></i></span>
+				<span class="patron" v-else><i class="fas fa-heart"></i></span>
+			</template>
+			-->
+		</div>
+	</template>
+	<div class="buttons_R">
+		<button v-if="queue > 0 && $route.name === 'index' && !isDesktop" class="new _buttonPrimary" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
+		<template v-if="info && info.actions && showActions">
+			<button v-for="action in info.actions" class="_button button_R" @click.stop="action.handler" v-tooltip="action.text" v-click-anime><i :class="action.icon"></i></button>
+		</template>
+		<button v-if="showMenu" class="_button button_R" @click.stop="menu" v-click-anime><i class="fas fa-ellipsis-h"></i></button>
+	</div>
+	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
+		<button class="_button back" v-if="withBack && canBack && isMobile && !($route.name === 'notifications' || $route.name === 'messaging')" @click.stop="back()" v-click-anime><i class="fas fa-chevron-left"></i></button>
+		<button class="_button back" v-else-if="withBack && canBack && !isMobile" @click.stop="back()" v-click-anime><i class="fas fa-chevron-left"></i></button>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { popupMenu } from '@client/os';
+import { url } from '@client/config';
+import { eventBus } from "../../friendly/eventBus";
+
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 600;
+
+export default defineComponent({
+	props: {
+		info: {
+			required: true
+		},
+		withBack: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
+		center: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
+		showIndicator: {
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			canBack: false,
+			showActions: false,
+			height: 0,
+			key: 0,
+			queue: 0,
+		};
+	},
+
+	computed: {
+		showMenu() {
+			if (this.info == null) return false;
+			if (this.info.actions != null && !this.showActions) return true;
+			if (this.info.menu != null) return true;
+			if (this.info.share != null) return true;
+			return false;
+		}
+	},
+
+	watch: {
+		info() {
+			this.key++;
+		},
+
+		$route: {
+			handler(to, from) {
+				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
+			},
+			immediate: true
+		},
+	},
+
+	created() {
+		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
+		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
+	},
+
+	mounted() {
+		this.height = this.$el.parentElement.offsetHeight + 'px';
+		this.showActions = this.$el.parentElement.offsetWidth >= 500;
+		new ResizeObserver((entries, observer) => {
+			this.height = this.$el.parentElement.offsetHeight + 'px';
+			this.showActions = this.$el.parentElement.offsetWidth >= 500;
+		}).observe(this.$el);
+
+		window.addEventListener('resize', () => {
+			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
+			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+		}, { passive: true });
+	},
+
+	methods: {
+		back() {
+			if (this.canBack) this.$router.back();
+		},
+
+		share() {
+			navigator.share({
+				url: url + this.info.path,
+				...this.info.share,
+			});
+		},
+
+		showDrawerNav() {
+			this.$emit('kn-drawernav');
+		},
+
+		onHeaderClick() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		menu(ev) {
+			let menu = this.info.menu ? this.info.menu() : [];
+			if (!this.showActions && this.info.actions) {
+				menu = [...this.info.actions.map(x => ({
+					text: x.text,
+					icon: x.icon,
+					action: x.handler
+				})), menu.length > 0 ? null : undefined, ...menu];
+			}
+			if (this.info.share) {
+				if (menu.length > 0) menu.push(null);
+				menu.push({
+					text: this.$ts.share,
+					icon: 'fas fa-share-alt',
+					action: this.share
+				});
+			}
+			popupMenu(menu, ev.currentTarget || ev.target);
+		},
+
+		queueUpdated(q) {
+			this.queue = q;
+		},
+
+		queueReset() {
+			this.queue = 0;
+		},
+
+		top() {
+			this.onHeaderClick();
+			this.queueReset();
+			eventBus.emit('kn-header-new-queue-reset', 0);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	$ui-font-size: 1em;
+	$avatar-size: 32px;
+	$avatar-margin: 10px;
+
+	&.center {
+		text-align: center;
+
+		> .titleContainer {
+			margin: 0 auto;
+		}
+	}
+
+	> .back {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		height: var(--height);
+		width: var(--height);
+	}
+
+	> .buttons_L {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+
+		> .button_L {
+			height: var(--height);
+			width: var(--height);
+
+			> .indicator {
+			position: absolute;
+			bottom: 13px;
+			left: 35px;
+			color: var(--navIndicator);
+			font-size: 7px;
+			animation: blink 1s infinite;
+			}
+		}
+
+		> .avatar {
+			width: $avatar-size;
+			height: $avatar-size;
+			vertical-align: middle;
+		}
+
+		> .avatar_back {
+			margin-left: 50px;
+			width: $avatar-size;
+			height: $avatar-size;
+			vertical-align: middle;
+		}
+
+		> .patron {
+			margin-left: 0.5em;
+			color: var(--patron);
+		}
+	}
+
+	> .buttons_R {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		right: 0;
+
+		> .button_R {
+			height: var(--height);
+			width: var(--height);
+		}
+
+		> .new {
+			position: absolute;
+			z-index: 1;
+			right: 50px;
+			width: $avatar-size;
+			height: $avatar-size;
+			border-radius: 100px;
+			// border: 2px solid var(--patron);
+			background: transparent;
+
+			i {
+				color: var(--panelHeaderFg)
+			}
+		}
+	}
+
+	> .titleContainer {
+		overflow: auto;
+		white-space: nowrap;
+		width: calc(100% - (var(--height) * 2));
+
+		> .title {
+			display: inline-block;
+			vertical-align: bottom;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding: 0 16px;
+			position: relative;
+			height: var(--height);
+
+			> .icon + .text {
+				margin-left: 8px;
+			}
+
+			> .avatar {
+				$size: 32px;
+				display: inline-block;
+				width: $size;
+				height: $size;
+				vertical-align: bottom;
+				margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0;
+				pointer-events: none;
+			}
+
+			> .patron {
+				margin-left: 0.5em;
+				color: var(--patron);
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-legacy/sidebar.vue
+++ b/packages/client/src/ui/friendly-legacy/sidebar.vue
@ -0,0 +1,540 @@
+<template>
+<div class="mvcprjjd">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = false"
+			@touchstart.passive="showing = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
+			<div>
+				<button class="item _button account" @click="openAccountMenu" v-click-anime>
+					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+				</button>
+				<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+					<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
+						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+						<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
+					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+				</MkA>
+				<button class="item _button" @click="more" v-click-anime>
+					<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+					<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+				</button>
+				<MkA class="item" active-class="active" to="/settings" v-click-anime>
+					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+				</MkA>
+				<!-- <button class="item _button post" @click="post">
+					<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+				</button> -->
+				<div class="divider"></div>
+				<template v-if="$i.isPatron">
+					<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
+						<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
+					</button>
+					<button v-else class="patron-button _button" @click="patron" v-click-anime>
+						<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
+					</button>
+				</template>
+				<button v-else class="patron-button _button" @click="patron" v-click-anime>
+					<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
+				</button>
+				<div class="divider"></div>
+				<div class="about">
+					<MkA class="link" to="/about" v-click-anime>
+						<template v-if="isKokonect">
+							<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+							<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
+						</template>
+						<template v-else>
+							<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+						</template>
+					</MkA>
+				</div>
+			</div>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/friendly/menu-mobile';
+import { getAccounts, addAccount, login } from '@client/account';
+
+export default defineComponent({
+	props: {
+		defaultHidden: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	data() {
+		return {
+			host: host,
+			showing: false,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			hidden: this.defaultHidden,
+			isKokonect: null
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+
+		hidden() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		}
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	mounted() {
+		this.init();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
+			if (!this.defaultHidden) {
+				this.hidden = (window.innerWidth <= 650);
+			}
+		},
+
+		show() {
+			this.showing = true;
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = getAccounts().filter(x => x.id !== this.$i.id);
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${ this.$i.username }`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				icon: 'fas fa-plus',
+				text: this.$ts.addAccount,
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => { this.addAccount(); },
+					}, {
+						text: this.$ts.createAccount,
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		switchAccount(account: any) {
+			const storedAccounts = getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		patron() {
+			window.open("https://www.patreon.com/noridev", "_blank");
+		},
+
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-enter-active,
+.nav-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);
+}
+.nav-enter-from,
+.nav-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.nav-back-enter-active,
+.nav-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.nav-back-enter-from,
+.nav-back-leave-active {
+	opacity: 0;
+}
+
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px;
+	$nav-icon-only-width: 86px;
+
+	> .nav-back {
+		z-index: 1001;
+	}
+
+	> .nav {
+		$avatar-size: 38px;
+		$avatar-margin: 8px;
+
+		flex: 0 0 $nav-width;
+		width: $nav-width;
+		box-sizing: border-box;
+
+		&.iconOnly {
+			flex: 0 0 $nav-icon-only-width;
+			width: $nav-icon-only-width;
+
+			&:not(.hidden) {
+				> div {
+					width: $nav-icon-only-width;
+
+					> .divider {
+						margin: 8px auto;
+						width: calc(100% - 32px);
+					}
+
+					> .item,
+						.patron-button {
+						padding: 18px 0;
+						width: 100%;
+						text-align: center;
+						font-size: $ui-font-size * 1.1;
+						line-height: initial;
+
+						> i,
+						> .avatar {
+							display: block;
+							margin: 0 auto;
+						}
+
+						> i {
+							opacity: 0.7;
+						}
+
+						> .text,
+							.patron-text {
+							display: none;
+						}
+
+						> .patron,
+							.not-patron {
+							margin: 0;
+						}
+
+						&:hover, &.active {
+							> i, > .text {
+								opacity: 1;
+							}
+						}
+
+						&:first-child {
+							margin-bottom: 8px;
+						}
+
+						&:last-child {
+							margin-top: 8px;
+						}
+					}
+				}
+			}
+		}
+
+		&.hidden {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+		}
+
+		&:not(.hidden) {
+			display: block !important;
+		}
+
+		> div {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+			width: $nav-width;
+			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+			height: calc(var(--vh, 1vh) * 100);
+			box-sizing: border-box;
+			overflow: auto;
+			overflow-x: clip;
+			background: var(--navBg);
+
+			> .divider {
+				margin: 16px 16px;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> .about {
+				fill: currentColor;
+				padding: 8px 0 16px 0;
+				text-align: center;
+				
+				> .link {
+					display: block;
+					//width: 32px;
+					margin: 0 auto;
+					
+					img {
+						display: block;
+						width: 100%;
+					}
+
+					&:hover {
+						text-decoration: none;
+					}
+				}
+			}
+
+			> .item,
+				.patron-button {
+				position: relative;
+				display: block;
+				padding: 0 24px;
+				font-size: $ui-font-size;
+				line-height: 2.85rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					position: relative;
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 5px;
+					font-weight: bold;
+				}
+
+				> .indicator {
+					position: absolute;
+					bottom: 8px;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .text {
+					position: relative;
+					font-size: 0.9em;
+				}
+
+				> .patron,
+					.not-patron {
+					margin-left: 6px;
+					margin-right: 12px;
+				}
+
+				> .patron {
+					color: var(--patron);
+				}
+
+				> .patron-text {
+					font-size: 0.9em;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover, &.active {
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 24px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 8px;
+						background: var(--accentedBg);
+					}
+				}
+
+				&:first-child, &:last-child {
+					position: sticky;
+					z-index: 1;
+					padding-top: 8px;
+					padding-bottom: 8px;
+					background: var(--X14);
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+				}
+
+				&:first-child {
+					top: 0;
+					margin-bottom: 16px;
+					border-bottom: solid 0.5px var(--divider);
+				}
+
+				&:last-child {
+					bottom: 0;
+					margin-top: 16px;
+					border-top: solid 0.5px var(--divider);
+					color: var(--fgOnAccent);
+
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 20px);
+						height: calc(100% - 20px);
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+				}
+			}
+
+			> .patron-button {
+				background: unset;
+				border: unset;
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old-2/friendly.side.vue
+++ b/packages/client/src/ui/friendly-old-2/friendly.side.vue
@ -0,0 +1,158 @@
+<template>
+<div class="qvzfzxam _narrow_" v-if="component">
+	<div class="container">
+		<header class="header" @contextmenu.prevent.stop="onContextmenu">
+			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
+			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
+			<span class="title">{{ pageInfo.title }}</span>
+			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
+		</header>
+		<MkHeader class="pageHeader" :info="pageInfo"/>
+		<component :is="component" v-bind="props" :ref="changePage"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import * as os from '@client/os';
+import copyToClipboard from '@client/scripts/copy-to-clipboard';
+import { resolve } from '@client/router';
+import { url } from '@client/config';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	provide() {
+		return {
+			navHook: (path) => {
+				this.navigate(path);
+			}
+		};
+	},
+
+	data() {
+		return {
+			path: null,
+			component: null,
+			props: {},
+			pageInfo: null,
+			history: [],
+		};
+	},
+
+	computed: {
+		url(): string {
+			return url + this.path;
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+			}
+		},
+
+		navigate(path, record = true) {
+			if (record && this.path) 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);
+		},
+
+		close() {
+			this.path = null;
+			this.component = null;
+			this.props = {};
+		},
+
+		onContextmenu(e) {
+			os.contextMenu([{
+				type: 'label',
+				text: this.path,
+			}, {
+				icon: 'fas fa-expand-alt',
+				text: this.$ts.showInPage,
+				action: () => {
+					this.$router.push(this.path);
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(this.path);
+					this.close();
+				}
+			}, null, {
+				icon: 'fas fa-external-link-alt',
+				text: this.$ts.openInNewTab,
+				action: () => {
+					window.open(this.url, '_blank');
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-link',
+				text: this.$ts.copyLink,
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}], e);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qvzfzxam {
+	$header-height: 58px; // TODO: どこかに集約したい
+
+	--root-margin: 16px;
+	--margin: var(--marginHalf);
+
+	> .container {
+		position: fixed;
+		width: 370px;
+		height: 100vh;
+		overflow: auto;
+		box-sizing: border-box;
+
+		> .header {
+			display: flex;
+			position: sticky;
+			z-index: 1000;
+			top: 0;
+			height: $header-height;
+			width: 100%;
+			line-height: $header-height;
+			text-align: center;
+			font-weight: bold;
+			//background-color: var(--panel);
+			-webkit-backdrop-filter: var(--blur, blur(32px));
+			backdrop-filter: var(--blur, blur(32px));
+			background-color: var(--header);
+
+			> ._button {
+				height: $header-height;
+				width: $header-height;
+
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			> .title {
+				flex: 1;
+				position: relative;
+			}
+		}
+	}
+}
+</style>
+
--- a/packages/client/src/ui/friendly-old-2/friendly.vue
+++ b/packages/client/src/ui/friendly-old-2/friendly.vue
@ -0,0 +1,506 @@
+<template>
+<div class="mk-app" :class="{ wallpaper }">
+	<XSidebar v-if="!isMobile" ref="nav" class="sidebar"/>
+	<XSidebarMobile v-if="isMobile" ref="nav" class="sidebar"/>
+
+	<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
+		<main ref="main">
+			<div class="content">
+				<MkStickyContainer>
+					<template #header><MkHeaderCP v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo" @back="back()"/></template>
+					<router-view v-slot="{ Component }">
+						<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
+							<keep-alive :include="['timeline']">
+								<component :is="Component" :ref="changePage"/>
+							</keep-alive>
+						</transition>
+					</router-view>
+				</MkStickyContainer>
+			</div>
+			<div class="spacer"></div>
+		</main>
+	</div>
+
+	<XSide v-if="isDesktop" class="side" ref="side"/>
+
+	<div v-if="isDesktop" class="widgets" ref="widgets">
+		<XWidgets @mounted="attachSticky"/>
+	</div>
+
+	<div class="buttons" :class="{ navHidden }">
+		<!-- <button class="button nav _button" @click="showNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
+		<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
+		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
+	</div>
+
+	<button v-if="fabButton && !isMobile" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
+
+	<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+
+	<transition name="tray-back">
+		<div class="tray-back _modalBg"
+			v-if="widgetsShowing"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</transition>
+
+	<transition name="tray">
+		<XWidgets v-if="widgetsShowing" class="tray"/>
+	</transition>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { instanceName } from '@client/config';
+import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import XSidebar from './sidebar.vue';
+import XSidebarMobile from './sidebar-mobile.vue';
+import XCommon from '../_common_/common.vue';
+import XSide from './friendly.side.vue';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import * as symbols from '@client/symbols';
+import { eventBus } from '@client/friendly/eventBus';
+
+const DESKTOP_THRESHOLD = 1100;
+const WIDE_TABLET_THRESHOLD = 850;
+const MOBILE_THRESHOLD = 600;
+
+localStorage.setItem('ui', 'friendly');
+
+export default defineComponent({
+	components: {
+		XCommon,
+		XSidebar,
+		XSidebarMobile,
+		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue')),
+		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
+	},
+
+	provide() {
+		return {
+			sideViewHook: this.isDesktop ? (url) => {
+				this.$refs.side.navigate(url);
+			} : null
+		};
+	},
+
+	data() {
+		return {
+			pageInfo: null,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			menuDef: menuDef,
+			navHidden: false,
+			widgetsShowing: false,
+			wallpaper: localStorage.getItem('wallpaper') != null,
+			queue: 0,
+			routeList: [
+				'index',
+				'explore',
+				'notifications',
+				'messaging',
+				'user',
+				'drive',
+				'clips',
+				'pages',
+				'ads',
+				'gallery',
+				'channels',
+				'groups',
+				'antennas'
+			],
+			fabButton: false
+		};
+	},
+
+	computed: {
+		navIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+
+		fabIcon() {
+			return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
+		if (this.$store.state.widgets.length === 0) {
+			this.$store.set('widgets', [{
+				name: 'calendar',
+				id: 'a', place: 'right', data: {}
+			}, {
+				name: 'notifications',
+				id: 'b', place: 'right', data: {}
+			}, {
+				name: 'trends',
+				id: 'c', place: 'right', data: {}
+			}]);
+		}
+
+		eventBus.on('kn-drawernav', () => this.showNav());
+		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
+		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
+	},
+
+	mounted() {
+		this.adjustUI();
+
+		const ro = new ResizeObserver((entries, observer) => {
+			this.adjustUI();
+		});
+
+		ro.observe(this.$refs.contents);
+
+		window.addEventListener('resize', this.adjustUI, { passive: true });
+
+		if (!this.isDesktop) {
+			window.addEventListener('resize', () => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+				document.title = `${this.pageInfo.title} | ${instanceName}`;
+				this.fabButton = this.routeList.includes(this.$route.name);
+			}
+		},
+
+		adjustUI() {
+			const navWidth = this.$refs.nav.$el.offsetWidth;
+			this.navHidden = navWidth === 0;
+		},
+
+		showNav() {
+			this.$refs.nav.show();
+		},
+
+		attachSticky(el) {
+			const sticky = new StickySidebar(this.$refs.widgets);
+			window.addEventListener('scroll', () => {
+				sticky.calc(window.scrollY);
+			}, { passive: true });
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		back() {
+			history.back();
+		},
+
+		onTransition() {
+			if (window._scroll) window._scroll();
+		},
+
+		onContextmenu(e) {
+			const isLink = (el: HTMLElement) => {
+				if (el.tagName === 'A') return true;
+				if (el.parentElement) {
+					return isLink(el.parentElement);
+				}
+			};
+			if (isLink(e.target)) return;
+			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
+			if (window.getSelection().toString() !== '') return;
+			const path = this.$route.path;
+			os.contextMenu([{
+				type: 'label',
+				text: path,
+			}, {
+				icon: 'fas fa-columns',
+				text: this.$ts.openInSideView,
+				action: () => {
+					this.$refs.side.navigate(path);
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				}
+			}], e);
+		},
+
+		queueUpdated(q) {
+			this.queue = q;
+		},
+
+		queueReset() {
+			this.queue = 0;
+		},
+
+		onFabClicked(e) {
+			if (this.pageInfo && this.pageInfo.action) {
+				this.pageInfo.action.handler(e);
+			} else {
+				os.post_form();
+			}
+		},
+	}
+});
+</script>
+
+<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 {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$widgets-hide-threshold: 1090px;
+	$nav-hide-threshold: 600px;
+
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+	display: flex;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+		//backdrop-filter: var(--blur, blur(4px));
+	}
+
+	> .sidebar {
+	}
+
+	> .contents {
+		width: 100%;
+		min-width: 0;
+		background: var(--panel);
+
+		> main {
+			min-width: 0;
+
+			> .spacer {
+				height: 82px;
+
+				@media (min-width: ($widgets-hide-threshold + 1px)) {
+					display: none;
+				}
+			}
+		}
+	}
+
+	> .side {
+		min-width: 370px;
+		max-width: 370px;
+		border-left: solid 0.5px var(--divider);
+	}
+
+	> .widgets {
+		padding: 0 var(--margin);
+		border-left: solid 0.5px var(--divider);
+		background: var(--bg);
+
+		@media (max-width: $widgets-hide-threshold) {
+			display: none;
+		}
+	}
+
+	> .widgetButton {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		bottom: 32px;
+		right: 32px;
+		width: 64px;
+		height: 64px;
+		border-radius: 100%;
+		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		background: var(--panel);
+
+		&.navHidden {
+			display: none;
+		}
+
+		@media (min-width: ($widgets-hide-threshold + 1px)) {
+			display: none;
+		}
+	}
+
+	> .buttons {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		//padding: 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		-webkit-backdrop-filter: var(--blur, blur(32px));
+		backdrop-filter: var(--blur, blur(32px));
+		background-color: var(--header);
+		border-top: solid 0.5px var(--divider);
+
+		&:not(.navHidden) {
+			display: none;
+		}
+
+		> .button {
+			position: relative;
+			flex: 1;
+			//padding: 0;
+			margin: auto;
+			height: 50px;
+			//border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
+			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
+
+			&:not(:last-child) {
+				//margin-right: 12px;
+			}
+
+			@media (max-width: 300px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				background: var(--X2);
+			}
+
+			&.active {
+				color: var(--accent);
+			}
+
+			> .indicator,
+				.indicator-home {
+				position: absolute;
+				top: 7px;
+				right: 20px;
+				color: var(--indicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .indicator-home {
+				top: 8px;
+				right: 25px;
+				font-size: 6px;
+				animation: none;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 18px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .fab {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		right: calc(32px + var(--margin) * 2 + 300px);
+		bottom: 32px;
+		width: 55px;
+		height: 55px;
+		border-radius: 100%;
+		// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		background: var(--accent);
+		color: white;
+
+		@media (max-width: $widgets-hide-threshold) {
+			right: 30px;
+		}
+
+		@media (max-width: $nav-hide-threshold) {
+			bottom: calc(66px + env(safe-area-inset-bottom));
+			right: 15px;
+		}
+
+		@media (min-width: (850px) + 1px) {
+			display: none;
+		}
+
+		@media (min-width: (600px) + 1px) {
+			bottom: calc(45px + env(safe-area-inset-bottom));
+		}
+	}
+
+	> .tray-back {
+		z-index: 1001;
+	}
+
+	> .tray {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		background: var(--bg);
+	}
+}
+</style>
+
+<style lang="scss">
+</style>
--- a/packages/client/src/ui/friendly-old-2/friendly.widgets.vue
+++ b/packages/client/src/ui/friendly-old-2/friendly.widgets.vue
@ -0,0 +1,79 @@
+<template>
+<div class="efzpzdvf">
+	<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+
+	<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XWidgets from '@client/components/widgets.vue';
+import * as os from '@client/os';
+
+export default defineComponent({
+	components: {
+		XWidgets
+	},
+
+	emits: ['mounted'],
+
+	data() {
+		return {
+			editMode: false,
+		};
+	},
+
+	mounted() {
+		this.$emit('mounted', this.$el);
+	},
+
+	methods: {
+		addWidget(widget) {
+			this.$store.set('widgets', [{
+				...widget,
+				place: null,
+			}, ...this.$store.state.widgets]);
+		},
+
+		removeWidget(widget) {
+			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
+		},
+
+		updateWidget({ id, data }) {
+			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
+				...w,
+				data: data
+			} : w));
+		},
+
+		updateWidgets(widgets) {
+			this.$store.set('widgets', widgets);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.efzpzdvf {
+	position: sticky;
+	height: min-content;
+	min-height: 100vh;
+	padding: var(--margin) 0;
+	box-sizing: border-box;
+
+	> * {
+		margin: var(--margin) 0;
+		width: 300px;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
+	> .add {
+		margin: 0 auto;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old-2/header.vue
+++ b/packages/client/src/ui/friendly-old-2/header.vue
@ -0,0 +1,437 @@
+<template>
+<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
+	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
+		<div class="buttons left" v-if="canBack && !fabButton">
+			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
+		</div>
+	</transition>
+	<div class="buttons left" v-if="isMobile && !canBack">
+		<button class="_button button" v-if="!canBack || fabButton" @click="showNav">
+			<MkAvatar class="avatar" v-if="!canBack" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
+			<!-- <i class="fas fa-bars"/> -->
+			<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
+		</button>
+	</div>
+	<template v-if="info">
+		<div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
+			<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+			<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
+
+			<div class="title">
+				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
+				<div v-else-if="info.title" class="title">{{ info.title }}</div>
+				<div class="subtitle" v-if="!narrow && info.subtitle">
+					{{ info.subtitle }}
+				</div>
+				<div class="subtitle activeTab" v-if="narrow && hasTabs">
+					{{ info.tabs.find(tab => tab.active)?.title }}
+					<i class="chevron fas fa-chevron-down"></i>
+				</div>
+			</div>
+		</div>
+		<div class="tabs" v-if="!narrow || hideTitle">
+			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+		</div>
+	</template>
+	<div class="buttons right">
+		<template v-if="info && info.actions && !narrow">
+			<template v-for="action in info.actions">
+				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+			</template>
+		</template>
+		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject, watch } from 'vue';
+import * as tinycolor from 'tinycolor2';
+import { popupMenu } from '@client/os';
+import { url } from '@client/config';
+import { scrollToTop } from '@client/scripts/scroll';
+import MkButton from '@client/components/ui/button.vue';
+import { i18n } from '@client/i18n';
+import { globalEvents } from '@client/events';
+import { eventBus } from "@client/friendly/eventBus";
+import {useRoute} from "vue-router";
+
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 600;
+
+export default defineComponent({
+	components: {
+		MkButton
+	},
+
+	props: {
+		info: {
+			type: Object as PropType<{
+				actions?: {}[];
+				tabs?: {}[];
+			}>,
+			required: true
+		},
+		menu: {
+			required: false
+		},
+		thin: {
+			required: false,
+			default: false
+		},
+	},
+
+	setup(props) {
+		const el = ref<HTMLElement>(null);
+		const bg = ref(null);
+		const narrow = ref(false);
+		const height = ref(0);
+		const hasTabs = computed(() => {
+			return props.info.tabs && props.info.tabs.length > 0;
+		});
+		const shouldShowMenu = computed(() => {
+			if (props.info == null) return false;
+			if (props.info.actions != null && narrow.value) return true;
+			if (props.info.menu != null) return true;
+			if (props.info.share != null) return true;
+			if (props.menu != null) return true;
+			return false;
+		});
+		const canBack = ref(false);
+		const fabButton = ref(false);
+		const routeList = ref([
+			'/',
+			'/explore',
+			'/my/notifications',
+			'/my/messaging'
+		]);
+		const route = useRoute();
+
+		const share = () => {
+			navigator.share({
+				url: url + props.info.path,
+				...props.info.share,
+			});
+		};
+
+		const showMenu = (ev: MouseEvent) => {
+			let menu = props.info.menu ? props.info.menu() : [];
+			if (narrow.value && props.info.actions) {
+				menu = [...props.info.actions.map(x => ({
+					text: x.text,
+					icon: x.icon,
+					action: x.handler
+				})), menu.length > 0 ? null : undefined, ...menu];
+			}
+			if (props.info.share) {
+				if (menu.length > 0) menu.push(null);
+				menu.push({
+					text: i18n.locale.share,
+					icon: 'fas fa-share-alt',
+					action: share
+				});
+			}
+			if (props.menu) {
+				if (menu.length > 0) menu.push(null);
+				menu = menu.concat(props.menu);
+			}
+			popupMenu(menu, ev.currentTarget || ev.target);
+		};
+
+		const showTabsPopup = (ev: MouseEvent) => {
+			if (!hasTabs.value) return;
+			if (!narrow.value) return;
+			ev.preventDefault();
+			ev.stopPropagation();
+			const menu = props.info.tabs.map(tab => ({
+				text: tab.title,
+				icon: tab.icon,
+				action: tab.onClick,
+			}));
+			popupMenu(menu, ev.currentTarget || ev.target);
+		};
+
+		const preventDrag = (ev: TouchEvent) => {
+			ev.stopPropagation();
+		};
+
+		const onClick = () => {
+			scrollToTop(el.value, { behavior: 'smooth' });
+		};
+
+		const calcBg = () => {
+			const rawBg = props.info?.bg || 'var(--bg)';
+			const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+			tinyBg.setAlpha(0.85);
+			bg.value = tinyBg.toRgbString();
+		};
+
+		const showNav = () => {
+			eventBus.emit('kn-drawernav');
+		};
+
+		watch(
+			route, (to, from) => {
+				canBack.value = (window.history.length > 0 && !(routeList.value.includes(to.path)));
+				fabButton.value = routeList.value.includes(to.path);
+			}, { immediate: true }
+		)
+
+		onMounted(() => {
+			calcBg();
+			globalEvents.on('themeChanged', calcBg);
+			onUnmounted(() => {
+				globalEvents.off('themeChanged', calcBg);
+			});
+		
+			if (el.value.parentElement) {
+				narrow.value = el.value.parentElement.offsetWidth < 500;
+				const ro = new ResizeObserver((entries, observer) => {
+					if (el.value) {
+						narrow.value = el.value.parentElement.offsetWidth < 500;
+					}
+				});
+				ro.observe(el.value.parentElement);
+				onUnmounted(() => {
+					ro.disconnect();
+				});
+			}
+
+			console.log(canBack.value)
+			console.log(fabButton.value)
+			console.log(routeList.value)
+		});
+
+		return {
+			el,
+			bg,
+			narrow,
+			height,
+			hasTabs,
+			shouldShowMenu,
+			canBack,
+			fabButton,
+			routeList,
+			share,
+			showMenu,
+			showTabsPopup,
+			preventDrag,
+			onClick,
+			showNav,
+			hideTitle: inject('shouldOmitHeaderTitle', false),
+			thin_: props.thin || inject('shouldHeaderThin', false),
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	$avatar-size: 32px;
+	$avatar-margin: 10px;
+	--height: 60px;
+	display: flex;
+	position: sticky;
+	top: var(--stickyTop, 0);
+	z-index: 1000;
+	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-bottom: solid 0.5px var(--divider);
+
+	&.thin {
+		--height: 50px;
+
+		> .buttons {
+			> .button {
+				font-size: 0.9em;
+			}
+		}
+	}
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			flex: 1;
+			margin: 0 auto;
+			margin-left: var(--height);
+
+			> *:first-child {
+				margin-left: auto;
+			}
+
+			> *:last-child {
+				margin-right: auto;
+			}
+		}
+	}
+
+	> .buttons {
+		--margin: 8px;
+		display: flex;
+    align-items: center;
+		height: var(--height);
+		margin: 0 var(--margin);
+
+		&.left {
+			position: relative;
+			z-index: 1;
+			top: 0;
+			left: 0;
+
+			> .button {
+				> .indicator {
+					position: absolute;
+					bottom: 13px;
+					left: 43px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+			}
+
+			@media (max-width: 600px) {
+				position: absolute;
+			}
+		}
+
+		&.right {
+			margin-left: auto;
+		}
+
+		&:empty {
+			width: var(--height);
+		}
+
+		> .button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: calc(var(--height) - (var(--margin) * 2));
+			width: calc(var(--height) - (var(--margin) * 2));
+			box-sizing: border-box;
+			position: relative;
+			border-radius: 5px;
+
+			&:hover {
+				background: rgba(0, 0, 0, 0.05);
+			}
+
+			&.highlighted {
+				color: var(--accent);
+			}
+		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
+	}
+
+	> .titleContainer {
+		display: flex;
+		align-items: center;
+		overflow: auto;
+		white-space: nowrap;
+		text-align: left;
+		font-weight: bold;
+		flex-shrink: 0;
+		margin-left: 24px;
+
+		> .avatar {
+			$size: 32px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: 0 8px;
+			pointer-events: none;
+		}
+
+		> .icon {
+			margin-right: 8px;
+		}
+
+		> .title {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			line-height: 1.1;
+
+			> .subtitle {
+				opacity: 0.6;
+				font-size: 0.8em;
+				font-weight: normal;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&.activeTab {
+					text-align: center;
+
+					> .chevron {
+						display: inline-block;
+						margin-left: 6px;
+					}
+				}
+			}
+		}
+	}
+
+	> .tabs {
+		margin-left: 16px;
+		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .tab {
+			display: inline-block;
+			position: relative;
+			padding: 0 10px;
+			height: 100%;
+			font-weight: normal;
+			opacity: 0.7;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			&.active {
+				opacity: 1;
+
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					margin: 0 auto;
+					width: 100%;
+					height: 3px;
+					background: var(--accent);
+				}
+			}
+
+			> .icon + .title {
+				margin-left: 8px;
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old-2/sidebar-mobile.vue
+++ b/packages/client/src/ui/friendly-old-2/sidebar-mobile.vue
@ -0,0 +1,656 @@
+<template>
+<div class="mvcprjjd">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = isAccountMenuMode = false"
+			@touchstart.passive="showing = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
+			<div>
+				<div class="profile">
+					<button class="item _button account" @click="openProfile">
+						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+					</button>
+					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
+						<i class="fas fa-ellipsis-v"/>
+					</button>
+					<button v-else class="_button toggler" @click="toggleMenuMode">
+						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
+						<i v-else class="fas fa-chevron-down"/>
+					</button>
+				</div>
+				<template v-if="!isAccountMenuMode">
+					<div style="margin: 15px"></div>
+					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+					</MkA>
+					<template v-for="item in menu">
+						<div v-if="item === '-'" class="divider"></div>
+						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+						</component>
+					</template>
+					<div class="divider"></div>
+					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
+						<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+					</MkA>
+					<button class="item _button" @click="more" v-click-anime>
+						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+					</button>
+					<MkA class="item" active-class="active" to="/settings" v-click-anime>
+						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+					</MkA>
+					<button class="item _button post" @click="post" data-cy-open-post-form>
+						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+					</button>
+				</template>
+				<template v-else>
+					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
+						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
+					</button>
+					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
+					<div class="divider"></div>
+					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
+					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
+				</template>
+			</div>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/friendly/menu-mobile';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+
+export default defineComponent({
+	props: {
+		defaultHidden: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	data() {
+		return {
+			host: host,
+			showing: false,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			hidden: this.defaultHidden,
+			isAccountMenuMode: false,
+			loadingAccounts: false,
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+
+		hidden() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		}
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
+			if (!this.defaultHidden) {
+				this.hidden = (window.innerWidth <= 650);
+			}
+		},
+
+		show() {
+			this.showing = true;
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async fetchAccounts() {
+			this.loadingAccounts = true;
+			this.accounts = await os.getAccounts();
+			this.loadingAccounts = false;
+		},
+
+		toggleMenuMode() {
+			this.isAccountMenuMode = !this.isAccountMenuMode;
+			if (this.isAccountMenuMode) {
+				this.fetchAccounts();
+			}
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${ this.$i.username }`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => { this.addAccount(); },
+					}, {
+						text: this.$ts.createAccount,
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => { this.signout(); },
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => { this.signoutAll(); },
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		async openDrawerAccountMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.existingAccount,
+				action: () => { this.addAccount(); },
+			}, {
+				text: this.$ts.createAccount,
+				action: () => { this.createAccount(); },
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		async openSignoutMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.logout,
+				action: () => { this.signout(); },
+				danger: true,
+			}, {
+				text: this.$ts.logoutAll,
+				action: () => { this.signoutAll(); },
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-enter-active,
+.nav-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);
+}
+.nav-enter-from,
+.nav-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.nav-back-enter-active,
+.nav-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.nav-back-enter-from,
+.nav-back-leave-active {
+	opacity: 0;
+}
+
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px;
+	$nav-icon-only-width: 86px;
+
+	> .nav-back {
+		z-index: 1001;
+	}
+
+	> .nav {
+		$avatar-size: 32px;
+		$avatar-margin: 8px;
+
+		flex: 0 0 $nav-width;
+		width: $nav-width;
+		box-sizing: border-box;
+
+		&.iconOnly {
+			flex: 0 0 $nav-icon-only-width;
+			width: $nav-icon-only-width;
+
+			&:not(.hidden) {
+				> div {
+					width: $nav-icon-only-width;
+
+					> .divider {
+						margin: 8px auto;
+						width: calc(100% - 32px);
+					}
+
+					> .item {
+						padding-left: 0;
+						padding: 18px 0;
+						width: 100%;
+						text-align: center;
+						font-size: $ui-font-size * 1.1;
+						line-height: initial;
+
+						> i,
+						> .avatar {
+							display: block;
+							margin: 0 auto;
+						}
+
+						> i {
+							opacity: 0.7;
+						}
+
+						> .text {
+							display: none;
+						}
+
+						&:hover, &.active {
+							> i, > .text {
+								opacity: 1;
+							}
+						}
+
+						&:first-child {
+							margin-bottom: 8px;
+						}
+
+						&:last-child {
+							margin-top: 8px;
+						}
+					}
+				}
+			}
+		}
+
+		&.hidden {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+		}
+
+		&:not(.hidden) {
+			display: block !important;
+		}
+
+		> div {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+			width: $nav-width;
+			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+			height: calc(var(--vh, 1vh) * 100);
+			box-sizing: border-box;
+			overflow: auto;
+			overflow-x: clip;
+			background: var(--navBg);
+
+			> .divider {
+				margin: 16px 16px;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> .item {
+				position: relative;
+				display: block;
+				padding-left: 24px;
+				font-size: $ui-font-size;
+				line-height: 2.85rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					position: relative;
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: 0;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
+				}
+
+				> .text {
+					position: relative;
+					font-size: 0.9em;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover, &.active {
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 24px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: var(--accentedBg);
+					}
+				}
+
+				&:first-child, &:last-child {
+					position: sticky;
+					z-index: 1;
+					padding-top: 8px;
+					padding-bottom: 8px;
+					background: var(--X14);
+					-webkit-backdrop-filter: var(--blur, blur(8px));
+					backdrop-filter: var(--blur, blur(8px));
+				}
+
+				&:first-child {
+					top: 0;
+
+					&:hover, &.active {
+						&:before {
+							content: none;
+						}
+					}
+				}
+
+				&:last-child {
+					bottom: 0;
+					color: var(--fgOnAccent);
+
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 20px);
+						height: calc(100% - 20px);
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+					
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+				}
+			}
+
+			> .item-switch-acct,
+			> .item-button {
+				position: relative;
+				display: block;
+				padding: 12px 24px 0;
+				font-size: $ui-font-size;
+				line-height: 3rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 5px;
+					font-weight: bold;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&.danger {
+					color: red;
+				}
+			}
+
+			> .item-button {
+				padding: 0 24px;
+			}
+
+			> .profile {
+				position: sticky;
+				z-index: 1;
+				top: 0;
+				display: flex;
+				text-align: center;
+				justify-content: center;
+				align-items: center;
+				background: var(--X14);
+				-webkit-backdrop-filter: blur(8px);
+				backdrop-filter: blur(8px);
+
+				> .item {
+					position: relative;
+					display: block;
+					padding: 12px 24px 0;
+					font-size: $ui-font-size;
+					line-height: 3rem;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					color: var(--navFg);
+
+					> i {
+						width: 32px;
+					}
+
+					> i,
+					> .avatar {
+						margin-right: $avatar-margin;
+					}
+
+					> .avatar {
+						width: $avatar-size;
+						height: $avatar-size;
+						vertical-align: middle;
+					}
+
+					> .name {
+						margin-left: 5px;
+						font-weight: bold;
+					}
+
+					&.active {
+						color: var(--navActive);
+					}
+
+					&:hover {
+						text-decoration: none;
+						color: var(--navHoverFg);
+					}
+				}
+
+				> .toggler {
+					//position: absolute;
+					//right: 15px;
+					width: 36px;
+					height: 36px;
+					margin: 12px 15px 0 0;
+					padding: 10px;
+					z-index: 400;
+				}
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old-2/sidebar.vue
+++ b/packages/client/src/ui/friendly-old-2/sidebar.vue
@ -0,0 +1,656 @@
+<template>
+<div class="mvcprjjd">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = isAccountMenuMode = false"
+			@touchstart.passive="showing = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
+			<div>
+				<div class="profile">
+					<button class="item _button account" @click="openProfile">
+						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+					</button>
+					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
+						<i class="fas fa-ellipsis-v"/>
+					</button>
+					<button v-else class="_button toggler" @click="toggleMenuMode">
+						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
+						<i v-else class="fas fa-chevron-down"/>
+					</button>
+				</div>
+				<template v-if="!isAccountMenuMode">
+					<div style="margin: 15px"></div>
+					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+					</MkA>
+					<template v-for="item in menu">
+						<div v-if="item === '-'" class="divider"></div>
+						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+						</component>
+					</template>
+					<div class="divider"></div>
+					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
+						<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+					</MkA>
+					<button class="item _button" @click="more" v-click-anime>
+						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+					</button>
+					<MkA class="item" active-class="active" to="/settings" v-click-anime>
+						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+					</MkA>
+					<button class="item _button post" @click="post" data-cy-open-post-form>
+						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+					</button>
+				</template>
+				<template v-else>
+					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
+						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
+					</button>
+					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
+					<div class="divider"></div>
+					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
+					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
+				</template>
+			</div>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+
+export default defineComponent({
+	props: {
+		defaultHidden: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	data() {
+		return {
+			host: host,
+			showing: false,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			hidden: this.defaultHidden,
+			isAccountMenuMode: false,
+			loadingAccounts: false,
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+
+		hidden() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		}
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
+			if (!this.defaultHidden) {
+				this.hidden = (window.innerWidth <= 650);
+			}
+		},
+
+		show() {
+			this.showing = true;
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async fetchAccounts() {
+			this.loadingAccounts = true;
+			this.accounts = await os.getAccounts();
+			this.loadingAccounts = false;
+		},
+
+		toggleMenuMode() {
+			this.isAccountMenuMode = !this.isAccountMenuMode;
+			if (this.isAccountMenuMode) {
+				this.fetchAccounts();
+			}
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${ this.$i.username }`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => { this.addAccount(); },
+					}, {
+						text: this.$ts.createAccount,
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => { this.signout(); },
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => { this.signoutAll(); },
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		async openDrawerAccountMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.existingAccount,
+				action: () => { this.addAccount(); },
+			}, {
+				text: this.$ts.createAccount,
+				action: () => { this.createAccount(); },
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		async openSignoutMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.logout,
+				action: () => { this.signout(); },
+				danger: true,
+			}, {
+				text: this.$ts.logoutAll,
+				action: () => { this.signoutAll(); },
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-enter-active,
+.nav-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);
+}
+.nav-enter-from,
+.nav-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.nav-back-enter-active,
+.nav-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.nav-back-enter-from,
+.nav-back-leave-active {
+	opacity: 0;
+}
+
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px;
+	$nav-icon-only-width: 86px;
+
+	> .nav-back {
+		z-index: 1001;
+	}
+
+	> .nav {
+		$avatar-size: 32px;
+		$avatar-margin: 8px;
+
+		flex: 0 0 $nav-width;
+		width: $nav-width;
+		box-sizing: border-box;
+
+		&.iconOnly {
+			flex: 0 0 $nav-icon-only-width;
+			width: $nav-icon-only-width;
+
+			&:not(.hidden) {
+				> div {
+					width: $nav-icon-only-width;
+
+					> .divider {
+						margin: 8px auto;
+						width: calc(100% - 32px);
+					}
+
+					> .item {
+						padding-left: 0;
+						padding: 18px 0;
+						width: 100%;
+						text-align: center;
+						font-size: $ui-font-size * 1.1;
+						line-height: initial;
+
+						> i,
+						> .avatar {
+							display: block;
+							margin: 0 auto;
+						}
+
+						> i {
+							opacity: 0.7;
+						}
+
+						> .text {
+							display: none;
+						}
+
+						&:hover, &.active {
+							> i, > .text {
+								opacity: 1;
+							}
+						}
+
+						&:first-child {
+							margin-bottom: 8px;
+						}
+
+						&:last-child {
+							margin-top: 8px;
+						}
+					}
+				}
+			}
+		}
+
+		&.hidden {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+		}
+
+		&:not(.hidden) {
+			display: block !important;
+		}
+
+		> div {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+			width: $nav-width;
+			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+			height: calc(var(--vh, 1vh) * 100);
+			box-sizing: border-box;
+			overflow: auto;
+			overflow-x: clip;
+			background: var(--navBg);
+
+			> .divider {
+				margin: 16px 16px;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> .item {
+				position: relative;
+				display: block;
+				padding-left: 24px;
+				font-size: $ui-font-size;
+				line-height: 2.85rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					position: relative;
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: 0;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
+				}
+
+				> .text {
+					position: relative;
+					font-size: 0.9em;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover, &.active {
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 24px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: var(--accentedBg);
+					}
+				}
+
+				&:first-child, &:last-child {
+					position: sticky;
+					z-index: 1;
+					padding-top: 8px;
+					padding-bottom: 8px;
+					background: var(--X14);
+					-webkit-backdrop-filter: var(--blur, blur(8px));
+					backdrop-filter: var(--blur, blur(8px));
+				}
+
+				&:first-child {
+					top: 0;
+
+					&:hover, &.active {
+						&:before {
+							content: none;
+						}
+					}
+				}
+
+				&:last-child {
+					bottom: 0;
+					color: var(--fgOnAccent);
+
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 20px);
+						height: calc(100% - 20px);
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+					
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+				}
+			}
+
+			> .item-switch-acct,
+			> .item-button {
+				position: relative;
+				display: block;
+				padding: 12px 24px 0;
+				font-size: $ui-font-size;
+				line-height: 3rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 5px;
+					font-weight: bold;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&.danger {
+					color: red;
+				}
+			}
+
+			> .item-button {
+				padding: 0 24px;
+			}
+
+			> .profile {
+				position: sticky;
+				z-index: 1;
+				top: 0;
+				display: flex;
+				text-align: center;
+				justify-content: center;
+				align-items: center;
+				background: var(--X14);
+				-webkit-backdrop-filter: blur(8px);
+				backdrop-filter: blur(8px);
+
+				> .item {
+					position: relative;
+					display: block;
+					padding: 12px 24px 0;
+					font-size: $ui-font-size;
+					line-height: 3rem;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					color: var(--navFg);
+
+					> i {
+						width: 32px;
+					}
+
+					> i,
+					> .avatar {
+						margin-right: $avatar-margin;
+					}
+
+					> .avatar {
+						width: $avatar-size;
+						height: $avatar-size;
+						vertical-align: middle;
+					}
+
+					> .name {
+						margin-left: 5px;
+						font-weight: bold;
+					}
+
+					&.active {
+						color: var(--navActive);
+					}
+
+					&:hover {
+						text-decoration: none;
+						color: var(--navHoverFg);
+					}
+				}
+
+				> .toggler {
+					//position: absolute;
+					//right: 15px;
+					width: 36px;
+					height: 36px;
+					margin: 12px 15px 0 0;
+					padding: 10px;
+					z-index: 400;
+				}
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old/friendly.header.vue
+++ b/packages/client/src/ui/friendly-old/friendly.header.vue
@ -0,0 +1,314 @@
+<template>
+<div class="azykntjl">
+	<div class="body">
+		<div class="left">
+			<MkA class="item index" active-class="active" to="/" exact v-click-anime v-tooltip="$ts.timeline">
+				<i class="fas fa-home fa-fw"></i>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime v-tooltip="$ts[menuDef[item].title]">
+					<i class="fa-fw" :class="menuDef[item].icon"></i>
+					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.instance">
+				<i class="fas fa-server fa-fw"></i>
+			</MkA>
+			<button class="item _button" @click="more" v-click-anime>
+				<i class="fas fa-ellipsis-h fa-fw"></i>
+				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+			</button>
+		</div>
+		<div class="right">
+			<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.settings">
+				<i class="fas fa-cog fa-fw"></i>
+			</MkA>
+			<button class="item _button account" @click="openProfile" v-click-anime>
+				<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+			</button>
+			<button class="_button toggler" @click="openAccountMenu">
+				<i class="fas fa-chevron-down"/>
+			</button>
+			<div class="post" @click="post">
+				<MkButton class="button" gradate full>
+					<i class="fas fa-pencil-alt fa-fw"></i>
+				</MkButton>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+import MkButton from '@client/components/ui/button.vue';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+
+	data() {
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			settingsWindowed: false,
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	methods: {
+		calcViewState() {
+			this.settingsWindowed = (window.innerWidth > 1400);
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			await os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${this.$i.username}`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => {
+							this.addAccount();
+						},
+					}, {
+						text: this.$ts.createAccount,
+						action: () => {
+							this.createAccount();
+						},
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => {
+							this.signout();
+						},
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => {
+							this.signoutAll();
+						},
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.azykntjl {
+	$height: 60px;
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	width: 100%;
+	height: $height;
+	background-color: var(--bg);
+
+	> .body {
+		max-width: 1380px;
+		margin: 0 auto;
+		display: flex;
+
+		> .right,
+		> .left {
+
+			> .item {
+				position: relative;
+				font-size: 0.9em;
+				display: inline-block;
+				padding: 0 12px;
+				line-height: $height;
+
+				> i,
+				> .avatar {
+					margin-right: 0;
+				}
+
+				> i {
+					left: 10px;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .indicator {
+					position: absolute;
+					bottom: 10px;
+					right: 0;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+			}
+
+			> .divider {
+				display: inline-block;
+				height: 16px;
+				margin: 0 10px;
+				border-right: solid 0.5px var(--divider);
+			}
+
+			> .post {
+				display: inline-block;
+			
+				> .button {
+					width: 40px;
+					height: 40px;
+					padding: 0;
+					min-width: 0;
+				}
+			}
+
+			> .account {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: top;
+
+				> .name {
+					margin-left: 10px;
+					font-weight: bold;
+				}
+			}
+
+			> .toggler {
+				position: relative;
+				right: 5px;
+				width: 36px;
+				height: 36px;
+			}
+		}
+
+		> .right {
+			margin-left: auto;
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old/friendly.side.vue
+++ b/packages/client/src/ui/friendly-old/friendly.side.vue
@ -0,0 +1,162 @@
+<template>
+<div class="qvzfzxam _narrow_" v-if="component">
+	<div class="container">
+		<header class="header" @contextmenu.prevent.stop="onContextmenu">
+			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
+			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
+			<XHeader class="title" :info="pageInfo" :with-back="false"/>
+			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
+		</header>
+		<component :is="component" v-bind="props" :ref="changePage"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XHeader from './friendly/header.vue';
+import * as os from '@client/os';
+import copyToClipboard from '@client/scripts/copy-to-clipboard';
+import { resolve } from '@client/router';
+import { url } from '@client/config';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		XHeader
+	},
+
+	provide() {
+		return {
+			navHook: (path) => {
+				this.navigate(path);
+			}
+		};
+	},
+
+	data() {
+		return {
+			path: null,
+			component: null,
+			props: {},
+			pageInfo: null,
+			history: [],
+		};
+	},
+
+	computed: {
+		url(): string {
+			return url + this.path;
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+			}
+		},
+
+		navigate(path, record = true) {
+			if (record && this.path) 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);
+		},
+
+		close() {
+			this.path = null;
+			this.component = null;
+			this.props = {};
+		},
+
+		onContextmenu(e) {
+			os.contextMenu([{
+				type: 'label',
+				text: this.path,
+			}, {
+				icon: 'fas fa-expand-alt',
+				text: this.$ts.showInPage,
+				action: () => {
+					this.$router.push(this.path);
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(this.path);
+					this.close();
+				}
+			}, null, {
+				icon: 'fas fa-external-link-alt',
+				text: this.$ts.openInNewTab,
+				action: () => {
+					window.open(this.url, '_blank');
+					this.close();
+				}
+			}, {
+				icon: 'fas fa-link',
+				text: this.$ts.copyLink,
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}], e);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qvzfzxam {
+	$header-height: 58px; // TODO: どこかに集約したい
+
+	--root-margin: 16px;
+	--margin: var(--marginHalf);
+
+	> .container {
+		position: fixed;
+		width: 370px;
+		height: 100vh;
+		overflow: auto;
+		box-sizing: border-box;
+
+		> .header {
+			display: flex;
+			position: sticky;
+			z-index: 1000;
+			top: 0;
+			height: $header-height;
+			width: 100%;
+			line-height: $header-height;
+			text-align: center;
+			font-weight: bold;
+			//background-color: var(--panel);
+			-webkit-backdrop-filter: blur(32px);
+			backdrop-filter: blur(32px);
+			background-color: var(--header);
+
+			> ._button {
+				height: $header-height;
+				width: $header-height;
+
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			> .title {
+				flex: 1;
+				position: relative;
+			}
+		}
+	}
+}
+</style>
+
--- a/packages/client/src/ui/friendly-old/friendly.sidebar.vue
+++ b/packages/client/src/ui/friendly-old/friendly.sidebar.vue
@ -0,0 +1,631 @@
+<template>
+<div class="npcljfve" :class="{ iconOnly }">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = isAccountMenuMode = false"
+			@touchstart.passive="showing = isAccountMenuMode = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav">
+			<div class="profile">
+				<button v-if="!iconOnly" class="item _button account" @click="openProfile">
+					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+				</button>
+				<button v-if="iconOnly" class="item _button account" @click="openAccountMenu">
+					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+				</button>
+				<button v-else class="_button toggler" @click="toggleMenuMode">
+					<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
+					<i v-else class="fas fa-chevron-down"/>
+				</button>
+			</div>
+			<template v-if="!isAccountMenuMode">
+				<div class="post" @click="post">
+					<MkButton class="button" gradate full rounded>
+						<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
+					</MkButton>
+				</div>
+				<div class="divider"></div>
+				<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+					<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+						<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+				</MkA>
+				<button class="item _button" @click="more" v-click-anime>
+					<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+					<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+				</button>
+				<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+				</MkA>
+				<div class="divider"></div>
+				<template v-if="$i.isPatron">
+					<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
+						<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
+					</button>
+					<button v-else class="patron-button _button" @click="patron" v-click-anime>
+						<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
+					</button>
+				</template>
+				<button v-else class="patron-button _button" @click="patron" v-click-anime>
+					<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
+				</button>
+				<div class="divider"></div>
+				<div class="about">
+					<MkA class="link" to="/about" v-click-anime>
+						<template v-if="isKokonect">
+							<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+							<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
+							<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
+						</template>
+						<template v-else>
+							<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+						</template>
+					</MkA>
+				</div>
+				<!--<MisskeyLogo class="misskey"/>-->
+			</template>
+			<template v-else>
+				<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
+					<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
+				</button>
+				<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
+				<div class="divider"></div>
+				<button class="item-switch-acct _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
+				<button class="item-switch-acct danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
+			</template>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+import MkButton from '@client/components/ui/button.vue';
+import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import MisskeyLogo from '@/../assets/client/misskey.svg';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MisskeyLogo,
+	},
+
+	data() {
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			settingsWindowed: false,
+			isAccountMenuMode: false,
+			loadingAccounts: false,
+			showing: false,
+			isKokonect: null
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.isAccountMenuMode = false;
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	mounted() {
+		const sticky = new StickySidebar(this.$el.parentElement, 16);
+		window.addEventListener('scroll', () => {
+			sticky.calc(window.scrollY);
+		}, { passive: true });
+
+		this.init();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
+			this.settingsWindowed = (window.innerWidth > 1400);
+		},
+
+		show() {
+			this.showing = true;
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async fetchAccounts() {
+			this.loadingAccounts = true;
+			this.accounts = await os.getAccounts();
+			this.loadingAccounts = false;
+		},
+
+		toggleMenuMode() {
+			this.isAccountMenuMode = !this.isAccountMenuMode;
+			if (this.isAccountMenuMode) {
+				this.fetchAccounts();
+			}
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${ this.$i.username }`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => { this.addAccount(); },
+					}, {
+						text: this.$ts.createAccount,
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => { this.signout(); },
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => { this.signoutAll(); },
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		patron() {
+			window.open("https://www.patreon.com/noridev", "_blank");
+		},
+
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
+		},
+
+		async openDrawerAccountMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.existingAccount,
+				action: () => { this.addAccount(); },
+			}, {
+				text: this.$ts.createAccount,
+				action: () => { this.createAccount(); },
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		async openSignoutMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.logout,
+				action: () => { this.signout(); },
+				danger: true,
+			}, {
+				text: this.$ts.logoutAll,
+				action: () => { this.signoutAll(); },
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.npcljfve {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+	$avatar-size: 46px;
+	$avatar-margin: 8px;
+
+	padding: 0 16px;
+	box-sizing: border-box;
+	width: 260px;
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width !important;
+
+		> .nav {
+			> .divider {
+				margin: 8px auto;
+				width: calc(100% - 32px);
+			}
+
+			> .post {
+				> .button {
+					width: 46px;
+					height: 46px;
+					padding: 0;
+				}
+
+				@media (max-width: (850px)) {
+					display: none;
+				}
+			}
+
+			> .item,
+				.patron-button {
+				padding-left: 0;
+				width: 100%;
+				text-align: center;
+				font-size: $ui-font-size * 1.1;
+				line-height: 3.7rem;
+				overflow: unset;
+
+				> i,
+				> .avatar {
+					margin-right: 0;
+				}
+
+				> i {
+					left: 10px;
+				}
+
+				> .text,
+					.name,
+					.patron-text {
+					display: none;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: unset;
+					bottom: 11px;
+					left: 33px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .patron,
+				.not-patron {
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	> .nav {
+		> .divider {
+			margin: 10px 0;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .post {
+			position: sticky;
+			top: 65px;
+			z-index: 1;
+			padding: 16px 0;
+			background: var(--bg);
+
+			> .button {
+				min-width: 0;
+			}
+		}
+
+		> .about {
+			fill: currentColor;
+			padding: 8px 0 16px 0;
+			text-align: center;
+
+			> .link {
+				display: block;
+				//width: 32px;
+				margin: 0 auto;
+
+				img {
+					display: block;
+					width: 100%;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+			}
+		}
+
+		> .item,
+			.patron-button {
+			position: relative;
+			display: block;
+			font-size: $ui-font-size;
+			line-height: 2.6rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+
+			> i {
+				width: 32px;
+				margin-left: 3px;
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				margin-left: unset;
+				margin-right: $avatar-margin;
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .name {
+				margin-left: 10px;
+				font-weight: bold;
+			}
+
+			> .indicator {
+				position: absolute;
+				bottom: 10px;
+				left: 0;
+				color: var(--navIndicator);
+				font-size: 7px;
+				animation: blink 1s infinite;
+			}
+
+			> .patron,
+				.not-patron {
+				margin-left: 6px;
+				margin-right: 12px;
+			}
+
+			> .patron {
+				color: var(--patron);
+			}
+
+			> .patron-text {
+				font-size: 0.9em;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+		}
+
+		> .item-switch-acct {
+			position: relative;
+			display: block;
+			font-size: $ui-font-size;
+			line-height: 3rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+			padding-left: 12px;
+
+			> i {
+				width: 32px;
+				margin-left: 3px;
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				margin-left: unset;
+				margin-right: $avatar-margin;
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .name {
+				margin-left: 10px;
+				font-weight: bold;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+
+			&.danger {
+				color: red;
+			}
+		}
+
+		> .patron-button {
+			background: unset;
+			border: unset;
+		}
+
+		> .profile {
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			background: var(--bg);
+			padding: 10px 0 0 0;
+
+			> .item {
+				position: relative;
+				display: block;
+				font-size: $ui-font-size;
+				line-height: 2.6rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+
+				> i {
+					width: 32px;
+					margin-left: 3px;
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					margin-left: unset;
+					margin-right: $avatar-margin;
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 10px;
+					font-weight: bold;
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+			}
+
+			> .account {
+				padding: 10px 20px 0 0;
+			}
+
+			> .toggler {
+				position: absolute;
+				right: 0;
+				top: 25px;
+				width: 36px;
+				height: 36px;
+				z-index: 400;
+			}
+		}
+
+		> .account {
+			padding: 20px 0 0;
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old/friendly.vue
+++ b/packages/client/src/ui/friendly-old/friendly.vue
@ -0,0 +1,600 @@
+<template>
+<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
+	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
+
+	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
+		<template v-if="!isMobile">
+			<div class="sidebar" v-if="!showMenuOnTop">
+				<XSidebar/>
+			</div>
+			<div class="widgets left" ref="widgetsLeft" v-else>
+				<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
+			</div>
+		</template>
+
+		<main class="main _panel" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
+			<header class="header">
+				<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
+			</header>
+			<div class="content">
+				<router-view v-slot="{ Component }">
+					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
+						<keep-alive :include="['timeline']">
+							<component :is="Component" :ref="changePage"/>
+						</keep-alive>
+					</transition>
+				</router-view>
+			</div>
+		</main>
+
+		<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
+			<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
+		</div>
+	</div>
+
+	<button v-if="fabButton && !(isDesktop || isWideTablet)" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
+
+	<div class="buttons" v-if="isMobile">
+		<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
+		<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
+		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
+	</div>
+
+	<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
+
+	<transition name="tray-back">
+		<div class="tray-back _modalBg"
+			v-if="widgetsShowing"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</transition>
+
+	<transition name="tray">
+		<XWidgets v-if="widgetsShowing" class="tray"/>
+	</transition>
+
+	<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
+import { instanceName } from '@client/config';
+import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import XSidebar from './friendly.sidebar.vue';
+import XDrawerSidebar from './sidebar.vue';
+import XCommon from '../_common_/common.vue';
+import XHeader from './header.vue';
+import * as os from '@client/os';
+import { menuDef } from '@client/menu';
+import * as symbols from '@client/symbols';
+import XTimeline from '@client/components/timeline.vue';
+import { eventBus } from '@client/friendly/eventBus';
+
+const DESKTOP_THRESHOLD = 1100;
+const WIDE_TABLET_THRESHOLD = 850;
+const MOBILE_THRESHOLD = 600;
+
+localStorage.setItem('ui', 'friendly');
+
+export default defineComponent({
+	components: {
+		XCommon,
+		XSidebar,
+		XDrawerSidebar,
+		XHeader,
+		XTimeline,
+		XHeaderMenu: defineAsyncComponent(() => import('./friendly.header.vue')),
+		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
+	},
+
+	provide() {
+		return {
+			shouldHeaderThin: this.showMenuOnTop,
+		};
+	},
+
+	data() {
+		return {
+			pageInfo: null,
+			menuDef: menuDef,
+			globalHeaderHeight: 0,
+			navHidden: false,
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			widgetsShowing: false,
+			fullView: false,
+			wallpaper: localStorage.getItem('wallpaper') != null,
+			queue: 0,
+			routeList: [
+				'index',
+				'explore',
+				'notifications',
+				'messaging',
+				'user',
+				'drive',
+				'clips',
+				'pages',
+				'ads',
+				'gallery',
+				'channels',
+				'groups',
+				'antennas'
+			],
+			fabButton: false
+		};
+	},
+
+	computed: {
+		navIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+
+		fabIcon() {
+			return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
+		},
+
+		showMenuOnTop(): boolean {
+			return !this.isMobile && this.$store.state.menuDisplay === 'top';
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
+		if (this.$store.state.widgets.length === 0) {
+			this.$store.set('widgets', [{
+				name: 'calendar',
+				id: 'a', place: null, data: {}
+			}, {
+				name: 'notifications',
+				id: 'b', place: null, data: {}
+			}, {
+				name: 'trends',
+				id: 'c', place: null, data: {}
+			}]);
+		}
+
+		eventBus.on('kn-drawernav', () => this.showDrawerNav());
+		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
+		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
+	},
+
+	mounted() {
+		window.addEventListener('resize', () => {
+			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
+			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+		}, { passive: true });
+
+		this.navHidden = this.isMobile;
+
+		if (this.$store.state.aiChanMode) {
+			const iframeRect = this.$refs.live2d.getBoundingClientRect();
+			window.addEventListener('mousemove', ev => {
+				this.$refs.live2d.contentWindow.postMessage({
+					type: 'moveCursor',
+					body: {
+						x: ev.clientX - iframeRect.left,
+						y: ev.clientY - iframeRect.top,
+					}
+				}, '*');
+			}, { passive: true });
+			window.addEventListener('touchmove', ev => {
+				this.$refs.live2d.contentWindow.postMessage({
+					type: 'moveCursor',
+					body: {
+						x: ev.touches[0].clientX - iframeRect.left,
+						y: ev.touches[0].clientY - iframeRect.top,
+					}
+				}, '*');
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page[symbols.PAGE_INFO]) {
+				this.pageInfo = page[symbols.PAGE_INFO];
+				document.title = `${this.pageInfo.title} | ${instanceName}`;
+				this.fabButton = this.routeList.includes(this.$route.name);
+			}
+		},
+
+		attachSticky(ref) {
+			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+			window.addEventListener('scroll', () => {
+				sticky.calc(window.scrollY);
+			}, { passive: true });
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		back() {
+			history.back();
+		},
+
+		showDrawerNav() {
+			this.$refs.drawerNav.show();
+		},
+
+		onTransition() {
+			if (window._scroll) window._scroll();
+		},
+
+		onHeaderClick() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		onContextmenu(e) {
+			const isLink = (el: HTMLElement) => {
+				if (el.tagName === 'A') return true;
+				if (el.parentElement) {
+					return isLink(el.parentElement);
+				}
+			};
+			if (isLink(e.target)) return;
+			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
+			if (window.getSelection().toString() !== '') return;
+			const path = this.$route.path;
+			os.contextMenu([{
+				type: 'label',
+				text: path,
+			}, {
+				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
+				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
+				action: () => {
+					this.fullView = !this.fullView;
+				}
+			}, {
+				icon: 'fas fa-window-maximize',
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				}
+			}], e);
+		},
+
+		queueUpdated(q) {
+			this.queue = q;
+		},
+
+		queueReset() {
+			this.queue = 0;
+		},
+
+		onFabClicked(e) {
+			if (this.pageInfo && this.pageInfo.action) {
+				this.pageInfo.action.handler(e);
+			} else {
+				os.post_form();
+			}
+		},
+
+		onAiClick(ev) {
+			//if (this.live2d) this.live2d.click(ev);
+		}
+	}
+});
+</script>
+
+<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 {
+	$nav-hide-threshold: 600px;
+	$header-height: 60px;
+	$ui-font-size: 1em;
+	$widgets-hide-threshold: 1200px;
+	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+		//backdrop-filter: var(--blur, blur(4px));
+	}
+
+	&.isMobile {
+		> .columns {
+			display: block;
+			margin: 0;
+
+			> .main {
+				margin: 0;
+				padding-bottom: 92px;
+				border: none;
+				width: 100%;
+				border-radius: 0;
+
+				> .header {
+					width: 100%;
+				}
+			}
+		}
+
+		> .buttons {
+			> .button {
+				&:hover {
+					background: var(--panel);
+				}
+			}
+		}
+	}
+
+	> .columns {
+		display: flex;
+		justify-content: center;
+		max-width: 100%;
+		//margin: 32px 0;
+
+		&.fullView {
+			margin: 0;
+		
+			> .sidebar {
+				display: none;
+			}
+
+			> .widgets {
+				display: none;
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+
+		> .main {
+			min-width: 0;
+			width: 750px;
+			margin: 0 16px 0 0;
+			background: var(--panel);
+			border-left: solid 1px var(--divider);
+			border-right: solid 1px var(--divider);
+			border-radius: 0;
+			overflow: clip;
+			--margin: 12px;
+
+			> .header {
+				position: sticky;
+				z-index: 1000;
+				top: var(--globalHeaderHeight, 0px);
+				height: $header-height;
+				line-height: $header-height;
+				-webkit-backdrop-filter: blur(32px);
+				backdrop-filter: blur(32px);
+				background-color: var(--header);
+			}
+		}
+
+		> .widgets {
+			//--panelShadow: none;
+			width: 300px;
+			margin-top: 16px;
+
+			@media (max-width: $widgets-hide-threshold) {
+				display: none;
+			}
+
+			&.left {
+				margin-right: 16px;
+			}
+		}
+
+		> .sidebar {
+			margin-top: 16px;
+		}
+
+		&.withGlobalHeader {
+			> .main {
+				margin-top: 0;
+				border: solid 1px var(--divider);
+				border-radius: var(--radius);
+				--stickyTop: var(--globalHeaderHeight);
+			}
+
+			> .widgets {
+				--stickyTop: var(--globalHeaderHeight);
+				margin-top: 0;
+			}
+		}
+
+		@media (max-width: 850px) {
+			margin: 0;
+
+			> .sidebar {
+				border-right: solid 0.5px var(--divider);
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+	}
+
+	> .fab {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		right: calc(32px + var(--margin) * 2 + 300px);
+		bottom: 32px;
+		width: 55px;
+		height: 55px;
+		border-radius: 100%;
+		// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		background: var(--accent);
+		color: white;
+
+		@media (max-width: $widgets-hide-threshold) {
+			right: 30px;
+		}
+
+		@media (max-width: $nav-hide-threshold) {
+			bottom: calc(66px + env(safe-area-inset-bottom));
+			right: 15px;
+		}
+
+		@media (min-width: (850px) + 1px) {
+			display: none;
+		}
+
+		@media (min-width: (600px) + 1px) {
+			bottom: calc(45px + env(safe-area-inset-bottom));
+		}
+	}
+
+	> .buttons {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		//padding: 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		-webkit-backdrop-filter: var(--blur, blur(32px));
+		backdrop-filter: var(--blur, blur(32px));
+		background-color: var(--header);
+		border-top: solid 0.5px var(--divider);
+
+		> .button {
+			position: relative;
+			flex: 1;
+			//padding: 0;
+			margin: auto;
+			height: 50px;
+			//border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
+			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
+
+			&:not(:last-child) {
+				//margin-right: 12px;
+			}
+
+			@media (max-width: 300px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				background: var(--X2);
+			}
+
+			&.active {
+					color: var(--accent);
+			}
+
+			> .indicator,
+				.indicator-home {
+				position: absolute;
+				top: 7px;
+				right: 20px;
+				color: var(--indicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .indicator-home {
+				top: 8px;
+				right: 25px;
+				font-size: 6px;
+				animation: none;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 18px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .tray-back {
+		z-index: 1001;
+	}
+
+	> .tray {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		background: var(--bg);
+	}
+
+	> .ivnzpscs {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 300px;
+		height: 600px;
+		border: none;
+		pointer-events: none;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old/friendly.widgets.vue
+++ b/packages/client/src/ui/friendly-old/friendly.widgets.vue
@ -0,0 +1,84 @@
+<template>
+<div class="ddiqwdnk">
+	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<MkAd v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" class="a" :prefer="['square']"/>
+
+	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XWidgets from '@client/components/widgets.vue';
+
+export default defineComponent({
+	components: {
+		XWidgets
+	},
+
+	props: {
+		place: {
+			type: String,
+		}
+	},
+
+	emits: ['mounted'],
+
+	data() {
+		return {
+			editMode: false,
+		};
+	},
+
+	mounted() {
+		this.$emit('mounted', this.$el);
+	},
+
+	methods: {
+		addWidget(widget) {
+			this.$store.set('widgets', [{
+				...widget,
+				place: this.place,
+			}, ...this.$store.state.widgets]);
+		},
+
+		removeWidget(widget) {
+			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
+		},
+
+		updateWidget({ id, data }) {
+			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
+				...w,
+				data: data
+			} : w));
+		},
+
+		updateWidgets(widgets) {
+			this.$store.set('widgets', [
+				...this.$store.state.widgets.filter(w => w.place !== this.place),
+				...widgets
+			]);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ddiqwdnk {
+	position: sticky;
+	height: min-content;
+	box-sizing: border-box;
+	padding-bottom: 8px;
+
+	> .widgets,
+	> .a {
+		width: 300px;
+	}
+
+	> .edit {
+		display: block;
+		margin: 28px auto;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old/header.vue
+++ b/packages/client/src/ui/friendly-old/header.vue
@ -0,0 +1,556 @@
+<template>
+<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="`--height:${height};`" :key="key" ref="el">
+	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
+		<div class="buttons left" v-if="backButton && canBack && !fabButton">
+			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
+		</div>
+	</transition>
+	<div class="buttons left" v-if="isMobile && !canBack">
+		<button class="_button button" v-if="!(backButton && canBack) || fabButton" @click="showDrawerNav">
+			<MkAvatar class="avatar" v-if="!canBack || menuBar" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
+			<!-- <i class="fas fa-bars"/> -->
+			<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
+		</button>
+	</div>
+	<template v-if="info">
+		<div class="titleContainer" :class="{ center: $route.name !== 'user' }" @click="showTabsPopup" v-if="!hideTitle">
+			<template v-if="info.tabs || $route.name === 'user'">
+				<template v-if="$route.name === 'user'">
+					<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+					<div class="title_user">
+						<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
+						<div class="subtitle" v-if="!narrow && info.subtitle">
+							{{ info.subtitle }}
+						</div>
+						<div class="subtitle activeTab" v-if="narrow && hasTabs">
+							{{ info.tabs.find(tab => tab.active)?.title }}
+							<i class="chevron fas fa-chevron-down"></i>
+						</div>
+					</div>
+				</template>
+				<div class="title tabs" v-else v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
+					<i v-if="tab.icon" class="fa-fw" :class="tab.icon" :key="tab.icon"/>
+					<span v-if="tab.title" class="title">{{ tab.title }}</span>
+					<i class="fas fa-circle indicator" v-if="tab.indicate"/>
+				</div>
+			</template>
+
+			<template v-else>
+				<i v-if="info.icon" class="icon" :class="info.icon"></i>
+				<div class="title">
+					<div v-if="info.title" class="title">{{ info.title }}</div>
+				</div>
+			</template>
+		</div>
+
+		<div class="tabs" v-if="!narrow && $route.name !== 'index' || hideTitle">
+			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+		</div>
+	</template>
+
+	<div class="buttons right">
+		<button v-if="queue > 0 && $route.name === 'index' && ($store.state.newNoteNotiBehavior === 'smail' || $store.state.newNoteNotiBehavior === 'header')" :class="{ 'new _button': $store.state.newNoteNotiBehavior === 'header', 'new-hover _buttonPrimary': $store.state.newNoteNotiBehavior === 'smail' }" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
+		<template v-if="info && info.actions && !narrow">
+			<template v-for="action in info.actions">
+				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+			</template>
+		</template>
+		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, watch, PropType, ref, inject } from 'vue';
+import * as tinycolor from 'tinycolor2';
+import { eventBus } from "@client/friendly/eventBus";
+import { popupMenu } from '@client/os';
+import { url } from '@client/config';
+import { scrollToTop } from '@client/scripts/scroll';
+import MkButton from '@client/components/ui/button.vue';
+import { i18n } from '@client/i18n';
+import { globalEvents } from '@client/events';
+
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 600;
+
+export default defineComponent({
+	components: {
+		MkButton
+	},
+
+	props: {
+		info: {
+			type: Object as PropType<{
+				actions?: {}[];
+				tabs?: {}[];
+			}>,
+			required: true
+		},
+		menu: {
+			required: false
+		},
+		thin: {
+			required: false,
+			default: false
+		},
+		backButton: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		closeButton: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		titleOnly: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		showIndicator: {
+			required: false,
+			default: false
+		}
+	},
+
+	setup(props) {
+		const el = ref<HTMLElement>(null);
+		const bg = ref(null);
+		const narrow = ref(false);
+		const height = ref(0);
+		const hasTabs = computed(() => {
+			return props.info.tabs && props.info.tabs.length > 0;
+		});
+		const shouldShowMenu = computed(() => {
+			if (props.info == null) return false;
+			if (props.info.actions != null && narrow.value) return true;
+			if (props.info.menu != null) return true;
+			if (props.info.share != null) return true;
+			if (props.menu != null) return true;
+			return false;
+		});
+		const canBack = ref(false);
+		const key = ref(0);
+		const queue = ref(0);
+		const fabButton = ref(false);
+		const menuBar = ref(false);
+
+		const share = () => {
+			navigator.share({
+				url: url + props.info.path,
+				...props.info.share,
+			});
+		};
+
+		const showMenu = (ev: MouseEvent) => {
+			let menu = props.info.menu ? props.info.menu() : [];
+			if (narrow.value && props.info.actions) {
+				menu = [...props.info.actions.map(x => ({
+					text: x.text,
+					icon: x.icon,
+					action: x.handler
+				})), menu.length > 0 ? null : undefined, ...menu];
+			}
+			if (props.info.share) {
+				if (menu.length > 0) menu.push(null);
+				menu.push({
+					text: i18n.locale.share,
+					icon: 'fas fa-share-alt',
+					action: share
+				});
+			}
+			if (props.menu) {
+				if (menu.length > 0) menu.push(null);
+				menu = menu.concat(props.menu);
+			}
+			popupMenu(menu, ev.currentTarget || ev.target);
+		};
+
+		const showTabsPopup = (ev: MouseEvent) => {
+			if (!hasTabs.value) return;
+			if (!narrow.value) return;
+			ev.preventDefault();
+			ev.stopPropagation();
+			const menu = props.info.tabs.map(tab => ({
+				text: tab.title,
+				icon: tab.icon,
+				action: tab.onClick,
+			}));
+			popupMenu(menu, ev.currentTarget || ev.target);
+		};
+
+		const preventDrag = (ev: TouchEvent) => {
+			ev.stopPropagation();
+		};
+
+		const onClick = () => {
+			scrollToTop(el.value, { behavior: 'smooth' });
+		};
+
+		const calcBg = () => {
+			const rawBg = props.info?.bg || 'var(--bg)';
+			const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+			tinyBg.setAlpha(0.85);
+			bg.value = tinyBg.toRgbString();
+		};
+
+		const showDrawerNav = () => {
+			eventBus.emit('kn-drawernav');
+		};
+
+		const onHeaderClick = () => {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		};
+
+		const queueUpdated = (q) => {
+			this.queue = q;
+		};
+
+		const queueReset = () => {
+			this.queue = 0;
+		};
+
+		const top = () => {
+			this.onHeaderClick();
+			this.queueReset();
+			eventBus.emit('kn-header-new-queue-reset', 0);
+		};
+
+		onMounted(() => {
+			calcBg();
+			globalEvents.on('themeChanged', calcBg);
+			onUnmounted(() => {
+				globalEvents.off('themeChanged', calcBg);
+			});
+
+			if (el.value.parentElement) {
+				height.value = el.value.parentElement.offsetHeight + 'px';
+				narrow.value = el.value.parentElement.offsetWidth < 500;
+				const ro = new ResizeObserver((entries, observer) => {
+					if (el.value) {
+						height.value = el.value.parentElement.offsetHeight + 'px';
+						narrow.value = el.value.parentElement.offsetWidth < 500;
+					}
+				});
+				ro.observe(el.value.parentElement);
+				onUnmounted(() => {
+					ro.disconnect();
+				});
+				setTimeout(() => {
+					const currentStickyTop = getComputedStyle(el.value.parentElement).getPropertyValue('--stickyTop') || '0px';
+					el.value.style.setProperty('--stickyTop', currentStickyTop);
+					el.value.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${el.value.offsetHeight}px)`);
+				}, 100); // レンダリング順序の関係で親のstickyTopの設定が少し遅れることがあるため
+			}
+		});
+
+		return {
+			el,
+			bg,
+			narrow,
+			height,
+			hasTabs,
+			shouldShowMenu,
+			canBack,
+			key,
+			queue,
+			fabButton,
+			menuBar,
+			share,
+			showMenu,
+			showTabsPopup,
+			preventDrag,
+			onClick,
+			showDrawerNav,
+			onHeaderClick,
+			queueUpdated,
+			queueReset,
+			top,
+			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			routeList: [
+				'explore',
+				'notifications',
+				'messaging'
+			],
+			hideTitle: inject('shouldOmitHeaderTitle', false),
+			thin_: props.thin || inject('shouldHeaderThin', false),
+		};
+	},
+
+	watch: {
+		$route: {
+			handler(to, from) {
+				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
+				this.fabButton = this.routeList.includes(this.$route.name);
+				this.menuBar = this.routeList.includes(this.$route.name);
+			},
+			immediate: true
+		},
+	},
+
+	created() {
+		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
+		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
+		console.log(this.fabButton);
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	$ui-font-size: 1em;
+	$avatar-size: 32px;
+	$avatar-margin: 10px;
+	display: flex;
+
+	&.thin {
+		--height: 50px;
+
+		> .titleContainer {
+			> .buttons {
+				&.left, &.right {
+					> .button {
+						$size: 50px;
+						height: $size;
+						width: $size;
+					}
+				}
+			}
+		}
+	}
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			margin: 0 auto;
+		}
+
+		> .buttons {
+			&.right {
+				margin-left: 0;
+			}
+		}
+	}
+
+	> .buttons {
+		&:empty {
+			width: var(--height);
+		}
+
+		&.left, &.right {
+			>.button {
+				height: var(--height);
+				width: var(--height);
+			}
+		}
+
+		&.left {
+			position: relative;
+			z-index: 1;
+			top: 0;
+			left: 0;
+
+			> .button {
+				> .indicator {
+					position: absolute;
+					bottom: 13px;
+					left: 43px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+			}
+
+			@media (max-width: 600px) {
+				position: absolute;
+			}
+		}
+
+		&.right {
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			right: 0;
+			margin-left: 0;
+
+			> .new {
+				width: $avatar-size;
+				height: var(--height);
+			}
+
+			> .new-hover {
+				position: absolute;
+				width: $avatar-size;
+				height: $avatar-size;
+				top: 55px;
+				right: 14px;
+				border-radius: 100%;
+				// border: 2px solid var(--patron);
+				line-height: 0;
+				background: var(--pick);
+				margin-top: 10px;
+				// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+
+				&:hover {
+					background: var(--pickLighten);
+				}
+			}
+		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
+	}
+
+	> .titleContainer {
+		display: flex;
+		align-items: center;
+		overflow: auto;
+		white-space: nowrap;
+		text-align: left;
+		font-weight: bold;
+		height: var(--height);
+		flex-shrink: 0;
+
+		> .avatar {
+			$size: 32px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: 0 8px;
+			pointer-events: none;
+		}
+
+		> .icon {
+			margin-right: 8px;
+		}
+
+		> .title,
+			.title_user {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			> .indicator {
+				position: absolute;
+				top: 13px;
+				right: 7px;
+				color: var(--indicator);
+				font-size: 7px;
+				animation: blink 1s infinite;
+			}
+
+			> .patron {
+				margin-left: 0.5em;
+				color: var(--patron);
+			}
+
+			> .subtitle {
+				opacity: 0.6;
+				font-size: 0.8em;
+				font-weight: normal;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&.activeTab {
+					text-align: center;
+
+					> .chevron {
+						display: inline-block;
+						margin-left: 6px;
+					}
+				}
+			}
+
+			&._button {
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			&.selected {
+				box-shadow: 0 -2px 0 0 var(--accent) inset;
+				color: var(--fgHighlighted);
+			}
+		}
+
+		> .title {
+			display: inline-block;
+			vertical-align: bottom;
+			position: relative;
+		}
+
+		> .title_user {
+			min-width: 0;
+			line-height: 1.1;
+		}
+
+		&.center {
+			margin: 0 auto;
+		}
+
+		> .tabs {
+			padding: 0 16px;
+		}
+	}
+
+	> .tabs {
+		margin-left: 16px;
+		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .tab {
+			display: inline-block;
+			position: relative;
+			padding: 0 10px;
+			height: 100%;
+			font-weight: normal;
+			opacity: 0.7;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			&.active {
+				opacity: 1;
+
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					margin: 0 auto;
+					width: 100%;
+					height: 3px;
+					background: var(--accent);
+				}
+			}
+
+			> .icon + .title {
+				margin-left: 8px;
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly-old/sidebar.vue
+++ b/packages/client/src/ui/friendly-old/sidebar.vue
@ -0,0 +1,735 @@
+<template>
+<div class="mvcprjjd">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = isAccountMenuMode = false"
+			@touchstart.passive="showing = isAccountMenuMode = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
+			<div>
+				<div class="profile">
+					<button class="item _button account" @click="openProfile">
+						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+					</button>
+					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
+						<i class="fas fa-ellipsis-v"/>
+					</button>
+					<button v-else class="_button toggler" @click="toggleMenuMode">
+						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
+						<i v-else class="fas fa-chevron-down"/>
+					</button>
+				</div>
+				<template v-if="!isAccountMenuMode">
+					<div class="divider"></div>
+					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
+						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+					</MkA>
+					<template v-for="item in menu">
+						<div v-if="item === '-'" class="divider"></div>
+						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+						</component>
+					</template>
+					<div class="divider"></div>
+					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
+						<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+					</MkA>
+					<button class="item _button" @click="more" v-click-anime>
+						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+					</button>
+					<MkA class="item" active-class="active" to="/settings" v-click-anime>
+						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+					</MkA>
+					<!-- <button class="item _button post" @click="post">
+						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+					</button> -->
+					<div class="divider"></div>
+					<template v-if="$i.isPatron">
+						<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
+							<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
+						</button>
+						<button v-else class="patron-button _button" @click="patron" v-click-anime>
+							<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
+						</button>
+					</template>
+					<button v-else class="patron-button _button" @click="patron" v-click-anime>
+						<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
+					</button>
+					<div class="divider"></div>
+					<div class="about">
+						<MkA class="link" to="/about" v-click-anime>
+							<template v-if="isKokonect">
+								<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+								<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
+							</template>
+							<template v-else>
+								<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+							</template>
+						</MkA>
+					</div>
+				</template>
+				<template v-else>
+					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
+						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
+					</button>
+					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
+					<div class="divider" v-if="accounts.length > 0"></div>
+					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
+					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
+				</template>
+			</div>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { host } from '@client/config';
+import { search } from '@client/scripts/search';
+import * as os from '@client/os';
+import { menuDef } from '@client/friendly/menu-mobile';
+import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
+
+export default defineComponent({
+	props: {
+		defaultHidden: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	data() {
+		return {
+			host: host,
+			showing: false,
+			accounts: [],
+			connection: null,
+			menuDef: menuDef,
+			iconOnly: false,
+			hidden: this.defaultHidden,
+			isAccountMenuMode: false,
+			loadingAccounts: false,
+			isKokonect: null
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+
+		hidden() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		}
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	mounted() {
+		this.init();
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
+			if (!this.defaultHidden) {
+				this.hidden = (window.innerWidth <= 650);
+			}
+		},
+
+		show() {
+			this.showing = true;
+		},
+
+		post() {
+			os.post_form();
+		},
+
+		search() {
+			search();
+		},
+
+		openProfile() {
+			this.$router.push({ path: `/@${ this.$i.username }` })
+		},
+
+		async fetchAccounts() {
+			this.loadingAccounts = true;
+			this.accounts = await os.getAccounts();
+			this.loadingAccounts = false;
+		},
+
+		toggleMenuMode() {
+			this.isAccountMenuMode = !this.isAccountMenuMode;
+			if (this.isAccountMenuMode) {
+				this.fetchAccounts();
+			}
+		},
+
+		async openAccountMenu(ev) {
+			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
+			}));
+
+			os.popupMenu([...[{
+				type: 'link',
+				text: this.$ts.profile,
+				to: `/@${ this.$i.username }`,
+				avatar: this.$i,
+			}, null, ...accountItemPromises, {
+				text: this.$ts.addAccount,
+				icon: 'fas fa-plus',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.existingAccount,
+						action: () => { this.addAccount(); },
+					}, {
+						text: this.$ts.createAccount,
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}, {
+				text: this.$ts.logout,
+				icon: 'fas fa-sign-out-alt',
+				action: () => {
+					os.popupMenu([{
+						text: this.$ts.logout,
+						action: () => { this.signout(); },
+						danger: true,
+					}, {
+						text: this.$ts.logoutAll,
+						action: () => { this.signoutAll(); },
+						danger: true,
+					}], ev.currentTarget || ev.target);
+				},
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		more(ev) {
+			os.popup(import('@client/components/launch-pad.vue'), {}, {
+			}, 'closed');
+		},
+
+		addAccount() {
+			os.popup(import('@client/components/signin-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					os.success();
+				},
+			}, 'closed');
+		},
+
+		createAccount() {
+			os.popup(import('@client/components/signup-dialog.vue'), {}, {
+				done: res => {
+					addAccount(res.id, res.i);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
+		},
+
+		async switchAccount(account: any) {
+			const storedAccounts = await getAccounts();
+			const token = storedAccounts.find(x => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			login(token);
+		},
+
+		patron() {
+			window.open("https://www.patreon.com/noridev", "_blank");
+		},
+
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
+		},
+
+		async openDrawerAccountMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.existingAccount,
+				action: () => { this.addAccount(); },
+			}, {
+				text: this.$ts.createAccount,
+				action: () => { this.createAccount(); },
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		async openSignoutMenu(ev) {
+			os.popupMenu([...[{
+				text: this.$ts.logout,
+				action: () => { this.signout(); },
+				danger: true,
+			}, {
+				text: this.$ts.logoutAll,
+				action: () => { this.signoutAll(); },
+				danger: true,
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
+			});
+		},
+
+		signout,
+		signoutAll,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-enter-active,
+.nav-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);
+}
+.nav-enter-from,
+.nav-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.nav-back-enter-active,
+.nav-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.nav-back-enter-from,
+.nav-back-leave-active {
+	opacity: 0;
+}
+
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px;
+	$nav-icon-only-width: 86px;
+
+	> .nav-back {
+		z-index: 1001;
+	}
+
+	> .nav {
+		$avatar-size: 38px;
+		$avatar-margin: 8px;
+
+		flex: 0 0 $nav-width;
+		width: $nav-width;
+		box-sizing: border-box;
+
+		&.iconOnly {
+			flex: 0 0 $nav-icon-only-width;
+			width: $nav-icon-only-width;
+
+			&:not(.hidden) {
+				> div {
+					width: $nav-icon-only-width;
+
+					> .divider {
+						margin: 8px auto;
+						width: calc(100% - 32px);
+					}
+
+					> .item,
+						.patron-button {
+						padding: 18px 0;
+						width: 100%;
+						text-align: center;
+						font-size: $ui-font-size * 1.1;
+						line-height: initial;
+
+						> i,
+						> .avatar {
+							display: block;
+							margin: 0 auto;
+						}
+
+						> i {
+							opacity: 0.7;
+						}
+
+						> .text,
+							.patron-text {
+							display: none;
+						}
+
+						> .patron,
+							.not-patron {
+							margin: 0;
+						}
+
+						&:hover, &.active {
+							> i, > .text {
+								opacity: 1;
+							}
+						}
+
+						&:first-child {
+							margin-bottom: 8px;
+						}
+
+						&:last-child {
+							margin-top: 8px;
+						}
+					}
+				}
+			}
+		}
+
+		&.hidden {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+		}
+
+		&:not(.hidden) {
+			display: block !important;
+		}
+
+		> div {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+			width: $nav-width;
+			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+			height: calc(var(--vh, 1vh) * 100);
+			box-sizing: border-box;
+			overflow: auto;
+			overflow-x: clip;
+			background: var(--navBg);
+
+			> .divider {
+				margin: 16px;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> .about {
+				fill: currentColor;
+				padding: 8px 0 16px 0;
+				text-align: center;
+				
+				> .link {
+					display: block;
+					//width: 32px;
+					margin: 0 auto;
+					
+					img {
+						display: block;
+						width: 100%;
+					}
+
+					&:hover {
+						text-decoration: none;
+					}
+				}
+			}
+
+			> .item,
+				.patron-button {
+				position: relative;
+				display: block;
+				padding: 0 24px;
+				font-size: $ui-font-size;
+				line-height: 2.85rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					position: relative;
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 5px;
+					font-weight: bold;
+				}
+
+				> .indicator {
+					position: absolute;
+					bottom: 8px;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 7px;
+					animation: blink 1s infinite;
+				}
+
+				> .text {
+					position: relative;
+					font-size: 0.9em;
+				}
+
+				> .patron,
+					.not-patron {
+					margin-left: 6px;
+					margin-right: 12px;
+				}
+
+				> .patron {
+					color: var(--patron);
+				}
+
+				> .patron-text {
+					font-size: 0.9em;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover, &.active {
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 24px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 8px;
+						background: var(--accentedBg);
+					}
+				}
+
+				&:last-child {
+					position: sticky;
+					z-index: 1;
+					bottom: 0;
+					margin-top: 16px;
+					border-top: solid 0.5px var(--divider);
+					padding-top: 8px;
+					padding-bottom: 8px;
+					background: var(--X14);
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+					color: var(--fgOnAccent);
+
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 20px);
+						height: calc(100% - 20px);
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+				}
+			}
+
+			> .item-switch-acct,
+			> .item-button {
+				position: relative;
+				display: block;
+				padding: 12px 24px 0;
+				font-size: $ui-font-size;
+				line-height: 3rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> i {
+					width: 32px;
+				}
+
+				> i,
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .name {
+					margin-left: 5px;
+					font-weight: bold;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&.danger {
+					color: red;
+				}
+			}
+
+			> .item-button {
+				padding: 0 24px;
+			}
+
+			> .profile {
+				position: sticky;
+				z-index: 1;
+				top: 0;
+				display: flex;
+				text-align: center;
+				justify-content: center;
+				align-items: center;
+				background: var(--X14);
+				-webkit-backdrop-filter: blur(8px);
+				backdrop-filter: blur(8px);
+
+				> .item {
+					position: relative;
+					display: block;
+					padding: 12px 24px 0;
+					font-size: $ui-font-size;
+					line-height: 3rem;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					color: var(--navFg);
+
+					> i {
+						width: 32px;
+					}
+
+					> i,
+					> .avatar {
+						margin-right: $avatar-margin;
+					}
+
+					> .avatar {
+						width: $avatar-size;
+						height: $avatar-size;
+						vertical-align: middle;
+					}
+
+					> .name {
+						margin-left: 5px;
+						font-weight: bold;
+					}
+
+					&.active {
+						color: var(--navActive);
+					}
+
+					&:hover {
+						text-decoration: none;
+						color: var(--navHoverFg);
+					}
+				}
+
+				> .toggler {
+					//position: absolute;
+					//right: 15px;
+					width: 36px;
+					height: 36px;
+					margin: 12px 15px 0 0;
+					padding: 10px;
+					z-index: 400;
+				}
+			}
+
+			> .patron-button {
+				background: unset;
+				border: unset;
+			}
+		}
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly.vue
+++ b/packages/client/src/ui/friendly.vue
@ -0,0 +1,448 @@
+<template>
+<div class="dkgtipfy" :class="{ wallpaper }">
+	<XSidebar v-if="!isMobile" class="sidebar"/>
+
+	<MkStickyContainer class="contents">
+		<template #header><XStatusBars :class="$style.statusbars"/></template>
+		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
+			<div :class="$style.content">
+				<RouterView/>
+			</div>
+			<div :class="$style.spacer"></div>
+		</main>
+	</MkStickyContainer>
+
+	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
+		<XWidgets @mounted="attachSticky"/>
+	</div>
+
+	<button v-if="isMobile" class="navButton nav _button" @click="drawerMenuShowing = true"><MkAvatar class="avatar" v-if="!canBack" :user="$i" :disable-preview="true" :show-indicator="true"/></button>
+
+	<button v-if="isMobile" class="postButton post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
+
+	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+
+	<div v-if="isMobile" class="buttons">
+		<!-- <button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
+		<button class="button home _button" :class="{ active: mainRouter.currentRoute.value.name === 'index' }" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.replace('/')"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
+		<button class="button explore _button" :class="{ active: mainRouter.currentRoute.value.name === 'explore' }" @click="mainRouter.currentRoute.value.name === 'explore' ? top() : mainRouter.replace('/explore')"><i class="fas fa-hashtag"/></button>
+		<button class="button notifications _button" :class="{ active: mainRouter.currentRoute.value.name === 'my-notifications' }" @click="mainRouter.currentRoute.value.name === 'my-notifications' ? top() : mainRouter.replace('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button tab _button" :class="{ active: mainRouter.currentRoute.value.name === 'messaging' }" @click="mainRouter.currentRoute.value.name === 'messaging' ? top() : mainRouter.replace('/my/messaging')"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+		<!-- <button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button> -->
+	</div>
+
+	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
+		<div
+			v-if="drawerMenuShowing"
+			class="menuDrawer-back _modalBg"
+			@click="drawerMenuShowing = false"
+			@touchstart.passive="drawerMenuShowing = false"
+		></div>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'menuDrawer' : ''">
+		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
+		<div
+			v-if="widgetsShowing"
+			class="widgetsDrawer-back _modalBg"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
+		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
+	</transition>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, provide, onMounted, computed, ref, watch, ComputedRef } from 'vue';
+import XCommon from './_common_/common.vue';
+import { instanceName } from '@/config';
+import { StickySidebar } from '@/scripts/sticky-sidebar';
+import XDrawerMenu from '@/ui/friendly/navbar-for-mobile.vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { navbarItemDef } from '@/navbar';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { Router } from '@/nirax';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { deviceKind } from '@/scripts/device-kind';
+const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
+const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
+const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 500;
+
+// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
+const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
+const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+window.addEventListener('resize', () => {
+	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+});
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+const widgetsEl = $ref<HTMLElement>();
+const widgetsShowing = $ref(false);
+
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	console.log(info);
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
+
+const menuIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const drawerMenuShowing = ref(false);
+
+mainRouter.on('change', () => {
+	drawerMenuShowing.value = false;
+});
+
+document.documentElement.style.overflowY = 'scroll';
+
+if (defaultStore.state.widgets.length === 0) {
+	defaultStore.set('widgets', [{
+		name: 'calendar',
+		id: 'a', place: 'right', data: {},
+	}, {
+		name: 'notifications',
+		id: 'b', place: 'right', data: {},
+	}, {
+		name: 'trends',
+		id: 'c', place: 'right', data: {},
+	}]);
+}
+
+onMounted(() => {
+	if (!isDesktop.value) {
+		window.addEventListener('resize', () => {
+			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
+		}, { passive: true });
+	}
+});
+
+const onContextmenu = (ev) => {
+	const isLink = (el: HTMLElement) => {
+		if (el.tagName === 'A') return true;
+		if (el.parentElement) {
+			return isLink(el.parentElement);
+		}
+	};
+	if (isLink(ev.target)) return;
+	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
+	if (window.getSelection()?.toString() !== '') return;
+	const path = mainRouter.getCurrentPath();
+	os.contextMenu([{
+		type: 'label',
+		text: path,
+	}, {
+		icon: 'fas fa-window-maximize',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(path);
+		},
+	}], ev);
+};
+
+const attachSticky = (el) => {
+	const sticky = new StickySidebar(widgetsEl);
+	window.addEventListener('scroll', () => {
+		sticky.calc(window.scrollY);
+	}, { passive: true });
+};
+
+function top() {
+	window.scroll({ top: 0, behavior: 'smooth' });
+}
+
+const wallpaper = localStorage.getItem('wallpaper') != null;
+</script>
+
+<style lang="scss" scoped>
+.widgetsDrawer-enter-active,
+.widgetsDrawer-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);
+}
+.widgetsDrawer-enter-from,
+.widgetsDrawer-leave-active {
+	opacity: 0;
+	transform: translateX(240px);
+}
+
+.widgetsDrawer-back-enter-active,
+.widgetsDrawer-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.widgetsDrawer-back-enter-from,
+.widgetsDrawer-back-leave-active {
+	opacity: 0;
+}
+
+.menuDrawer-enter-active,
+.menuDrawer-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);
+}
+.menuDrawer-enter-from,
+.menuDrawer-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.menuDrawer-back-enter-active,
+.menuDrawer-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menuDrawer-back-enter-from,
+.menuDrawer-back-leave-active {
+	opacity: 0;
+}
+
+.dkgtipfy {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$widgets-hide-threshold: 1090px;
+	$float-button-size: 58px;
+
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+	display: flex;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+		//backdrop-filter: var(--blur, blur(4px));
+	}
+
+	> .sidebar {
+		border-right: solid 0.5px var(--divider);
+	}
+
+	> .contents {
+		width: 100%;
+		min-width: 0;
+		background: var(--bg);
+	}
+
+	> .widgets {
+		padding: 0 var(--margin);
+		border-left: solid 0.5px var(--divider);
+		background: var(--bg);
+
+		@media (max-width: $widgets-hide-threshold) {
+			display: none;
+		}
+	}
+
+	> .navButton {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		bottom: 70px;
+		left: 10px;
+		width: $float-button-size;
+		height: $float-button-size;
+		// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		// background: var(--panel);
+
+		> .avatar {
+			width: $float-button-size;
+			height: $float-button-size;
+			vertical-align: middle;
+			opacity: 0.7;
+		}
+	}
+
+	> .postButton {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		bottom: 70px;
+		right: 0;
+		width: $float-button-size;
+		height: $float-button-size;
+		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		background: var(--panel);
+		opacity: 0.7;
+	}
+
+	> .widgetButton {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		bottom: 32px;
+		right: 32px;
+		width: 64px;
+		height: 64px;
+		border-radius: 100%;
+		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		background: var(--panel);
+	}
+
+	> .widgetsDrawer-back {
+		z-index: 1001;
+	}
+
+	> .widgetsDrawer {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--bg);
+	}
+
+	> .buttons {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		// left: 0;
+		// padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		-webkit-backdrop-filter: var(--blur, blur(32px));
+		backdrop-filter: var(--blur, blur(32px));
+		background-color: var(--header);
+		border-top: solid 0.5px var(--divider);
+
+		> .button {
+			position: relative;
+			flex: 1;
+			// padding: 0;
+			margin: auto;
+			height: 50px;
+			// border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px);
+
+			&:not(:last-child) {
+				// margin-right: 12px;
+			}
+
+			@media (max-width: 300px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				// background: var(--X2);
+			}
+
+			&.active {
+				color: var(--accent);
+			}
+
+			> .indicator,
+				.indicator-home{
+				position: absolute;
+				top: 7px;
+				right: 20px;
+				color: var(--indicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .indicator-home {
+				top: 8px;
+				right: 25px;
+				font-size: 6px;
+				animation: none;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 18px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .menuDrawer-back {
+		z-index: 1001;
+	}
+
+	> .menuDrawer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		width: 240px;
+		box-sizing: border-box;
+		contain: strict;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--navBg);
+	}
+}
+</style>
+
+<style lang="scss" module>
+.statusbars {
+	position: sticky;
+	top: 0;
+	left: 0;
+}
+
+.spacer {
+	$widgets-hide-threshold: 1090px;
+
+	height: calc(env(safe-area-inset-bottom, 0px) + 96px);
+
+	@media (min-width: ($widgets-hide-threshold + 1px)) {
+		display: none;
+	}
+}
+</style>
--- a/packages/client/src/ui/friendly/navbar-for-mobile.vue
+++ b/packages/client/src/ui/friendly/navbar-for-mobile.vue
@ -0,0 +1,342 @@
+<template>
+<div class="kmwsukvl">
+	<div class="body">
+		<div class="top">
+			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
+			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
+				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			</button>
+		</div>
+		<div class="middle">
+			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+					<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+				<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+			</MkA>
+			<button v-click-anime class="item _button" @click="more">
+				<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+			</button>
+			<MkA v-click-anime class="item" active-class="active" to="/settings">
+				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+			</MkA>
+		</div>
+		<div class="bottom">
+			<button class="item _button post" data-cy-open-post-form @click="os.post">
+				<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+			</button>
+			<div class="profile">
+				<button v-click-anime class="item _button account" @click="openProfile">
+					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
+				</button>
+				<button class="item _button drawer" @click="openAccountMenu"><i class="fas fa-chevron-up"/></button>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import {computed, defineAsyncComponent, defineComponent, provide, ref, toRef, watch} from 'vue';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { openAccountMenu as openAccountMenu_ } from '@/account';
+import { defaultStore } from '@/store';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+import { mainRouter } from '@/router';
+import { $i } from '@/account';
+
+const menu = toRef(defaultStore.state, 'menu');
+const otherMenuItemIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (menu.value.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+provide('router', mainRouter);
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function openInstanceMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: instance.name ?? host,
+		type: 'label',
+	}, {
+		type: 'link',
+		text: i18n.ts.instanceInfo,
+		icon: 'fas fa-info-circle',
+		to: '/about',
+	}, {
+		type: 'link',
+		text: i18n.ts.customEmojis,
+		icon: 'fas fa-laugh',
+		to: '/about#emojis',
+	}, {
+		type: 'link',
+		text: i18n.ts.federation,
+		icon: 'fas fa-globe',
+		to: '/about#federation',
+	}, null, {
+		type: 'parent',
+		text: i18n.ts.help,
+		icon: 'fas fa-question-circle',
+		children: [{
+			type: 'link',
+			to: '/mfm-cheat-sheet',
+			text: i18n.ts._mfm.cheatSheet,
+			icon: 'fas fa-code',
+		}, {
+			type: 'link',
+			to: '/scratchpad',
+			text: i18n.ts.scratchpad,
+			icon: 'fas fa-terminal',
+		}, {
+			type: 'link',
+			to: '/api-console',
+			text: 'API Console',
+			icon: 'fas fa-terminal',
+		}, null, {
+			text: i18n.ts.document,
+			icon: 'fas fa-question-circle',
+			action: () => {
+				window.open('https://misskey-hub.net/help.html', '_blank');
+			},
+		}],
+	}, {
+		type: 'link',
+		text: i18n.ts.aboutMisskey,
+		to: '/about-misskey',
+	}], ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
+}
+
+function more() {
+	os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {
+	}, 'closed');
+}
+
+function openProfile() {
+	mainRouter.push(`/@${ $i.username }`);
+}
+</script>
+
+<style lang="scss" scoped>
+.kmwsukvl {
+	> .body {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		> .top {
+			position: sticky;
+			top: 0;
+			z-index: 1;
+			padding: 20px 0;
+			background: var(--X14);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+
+			> .banner {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background-size: cover;
+				background-position: center center;
+				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+			}
+
+			> .instance {
+				position: relative;
+				display: block;
+				text-align: center;
+				width: 100%;
+
+				> .icon {
+					display: inline-block;
+					width: 38px;
+					aspect-ratio: 1;
+				}
+			}
+		}
+
+		> .bottom {
+			position: sticky;
+			bottom: 0;
+			padding: 20px 0;
+			background: var(--X14);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+
+			> .post {
+				position: relative;
+				display: block;
+				width: 100%;
+				height: 40px;
+				color: var(--fgOnAccent);
+				font-weight: bold;
+				text-align: left;
+
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 38px);
+					height: 100%;
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+				}
+
+				&:hover, &.active {
+					&:before {
+						background: var(--accentLighten);
+					}
+				}
+
+				> .icon {
+					position: relative;
+					margin-left: 30px;
+					margin-right: 8px;
+					width: 32px;
+				}
+
+				> .text {
+					position: relative;
+				}
+			}
+
+			> .profile {
+				display: flex;
+				margin-top: 16px;
+
+				> .account {
+					position: relative;
+					display: flex;
+					align-items: center;
+					padding-left: 30px;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+
+					> .avatar {
+						position: relative;
+						width: 32px;
+						aspect-ratio: 1;
+						margin-right: 8px;
+					}
+
+					> .name {
+						margin-left: 5px;
+						font-weight: bold;
+					}
+				}
+
+				> .drawer {
+					display: flex;
+					align-items: center;
+					padding: 16px;
+					margin-right: 16px;
+				}
+			}
+		}
+
+		> .middle {
+			flex: 1;
+
+			> .divider {
+				margin: 16px 16px;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> .item {
+				position: relative;
+				display: block;
+				padding-left: 24px;
+				line-height: 2.85rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> .icon {
+					position: relative;
+					width: 32px;
+					margin-right: 8px;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: 0;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
+				}
+
+				> .text {
+					position: relative;
+					font-size: 0.9em;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover, &.active {
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 24px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: var(--accentedBg);
+					}
+				}
+			}
+		}
+	}
+}
+</style>