ページにいいねできるように

src/client/app/common/views/pages/page/page.vue

@@ -12,6 +12,11 @@
 		<small>@{{ page.user.username }}</small>
 		<router-link v-if="$store.getters.isSignedIn && $store.state.i.id === page.userId" :to="`/i/pages/edit/${page.id}`">{{ $t('edit-this-page') }}</router-link>
 		<router-link :to="`./${page.name}/view-source`">{{ $t('view-source') }}</router-link>
+		<div class="like">
+			<button @click="unlike()" v-if="page.isLiked" :title="$t('unlike')"><fa :icon="faHeartS"/></button>
+			<button @click="like()" v-else :title="$t('like')"><fa :icon="faHeart"/></button>
+			<span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span>
+		</div>
 	</footer>
 </div>
 </template>
@@ -19,8 +24,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../../i18n';
-import { faICursor, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faStickyNote } from '@fortawesome/free-regular-svg-icons';
+import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
+import { faHeart } from '@fortawesome/free-regular-svg-icons';
 import XBlock from './page.block.vue';
 import { ASEvaluator } from '../../../../../../misc/aiscript/evaluator';
 import { collectPageVars } from '../../../scripts/collect-page-vars';
@@ -76,7 +81,7 @@ export default Vue.extend({
 		return {
 			page: null,
 			script: null,
-			faPlus, faICursor, faSave, faStickyNote
+			faHeartS, faHeart
 		};
 	},
 
@@ -103,6 +108,24 @@ export default Vue.extend({
 		getPageVars() {
 			return collectPageVars(this.page.content);
 		},
+
+		like() {
+			this.$root.api('pages/like', {
+				pageId: this.page.id,
+			}).then(() => {
+				this.page.isLiked = true;
+				this.page.likedCount++;
+			});
+		},
+
+		unlike() {
+			this.$root.api('pages/unlike', {
+				pageId: this.page.id,
+			}).then(() => {
+				this.page.isLiked = false;
+				this.page.likedCount--;
+			});
+		}
 	}
 });
 </script>
@@ -161,4 +184,7 @@ export default Vue.extend({
 		> a + a
 			margin-left 8px
 
+		> .like
+			margin-top 16px
+
 </style>