✌️

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

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

src/client/app/desktop/script.ts

@@ -25,6 +25,7 @@ import updateBanner from './api/update-banner';
 
 import MkIndex from './views/pages/index.vue';
 import MkUser from './views/pages/user/user.vue';
+import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
@@ -50,6 +51,7 @@ init(async (launch) => {
 		routes: [
 			{ path: '/', name: 'index', component: MkIndex },
 			{ path: '/i/customize-home', component: MkHomeCustomize },
+			{ path: '/i/favorites', component: MkFavorites },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },

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

@@ -0,0 +1,73 @@
+<template>
+<mk-ui>
+	<main v-if="!fetching">
+		<template v-for="favorite in favorites">
+			<mk-note-detail :note="favorite.note" :key="favorite.note.id"/>
+		</template>
+		<a v-if="existMore" @click="more">さらに読み込む</a>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			favorites: [],
+			existMore: false,
+			moreFetching: false
+		};
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('i/favorites', {
+				limit: 11
+			}).then(favorites => {
+				if (favorites.length == 11) {
+					this.existMore = true;
+					favorites.pop();
+				}
+
+				this.favorites = favorites;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		more() {
+			this.moreFetching = true;
+			(this as any).api('i/favorites', {
+				limit: 11,
+				maxId: this.favorites[this.favorites.length - 1].id
+			}).then(favorites => {
+				if (favorites.length == 11) {
+					this.existMore = true;
+					favorites.pop();
+				} else {
+					this.existMore = false;
+				}
+
+				this.favorites = this.favorites.concat(favorites);
+				this.moreFetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	margin 0 auto
+	padding 16px
+	max-width 700px
+</style>