From e83240f4dc66994ee2fbe7cdbb74aff288a95953 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 25 Oct 2022 20:20:41 -0700
Subject: [PATCH] feat: :sparkles: Star button

---
 CALCKEY.md                                    |  2 +-
 package.json                                  |  2 +-
 packages/client/src/components/MkNote.vue     |  3 ++
 .../client/src/components/MkNoteDetailed.vue  |  3 ++
 .../client/src/components/MkStarButton.vue    | 32 +++++++++++++++++++
 5 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/components/MkStarButton.vue

diff --git a/CALCKEY.md b/CALCKEY.md
index 99bf045a6b..1bb016dbf0 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -4,7 +4,6 @@
 
 - MFM button
 - Classic mode make instance icon bring up new context menu
-- Like/star button
 - Backfill remote users
 - User "choices" (recommended users) like Mastodon and Soapbox
 - Option to publicize instance blocks
@@ -46,6 +45,7 @@
   - Redesigned mobile bottom nav bar
   - Post button on TL
 - Star as default reaction
+- Like/star button
 - Rosé Pine by default (+ non-themable elements made Rosé Pine)
 - Better sidebar/navbar
 - Add back groups
diff --git a/package.json b/package.json
index 8e8271b254..857b2a76a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.3",
+	"version": "12.119.0-calc.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 908f6cb80a..75546c90a6 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -71,6 +71,7 @@
 			</div>
 			<footer class="footer">
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="fas fa-face-laugh"></i>
 				</button>
@@ -113,6 +114,7 @@ import XReactionsViewer from '@/components/MkReactionsViewer.vue';
 import XMediaList from '@/components/MkMediaList.vue';
 import XCwButton from '@/components/MkCwButton.vue';
 import XPoll from '@/components/MkPoll.vue';
+import XStarButton from '@/components/MkStarButton.vue';
 import XRenoteButton from '@/components/MkRenoteButton.vue';
 import XQuoteButton from '@/components/MkQuoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
@@ -164,6 +166,7 @@ const isRenote = (
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 66db8f79a0..cbd9d9492f 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -81,6 +81,7 @@
 					</MkA>
 				</div>
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="fas fa-face-laugh"></i>
 				</button>
@@ -123,6 +124,7 @@ import XReactionsViewer from '@/components/MkReactionsViewer.vue';
 import XMediaList from '@/components/MkMediaList.vue';
 import XCwButton from '@/components/MkCwButton.vue';
 import XPoll from '@/components/MkPoll.vue';
+import XStarButton from '@/components/MkStarButton.vue';
 import XRenoteButton from '@/components/MkRenoteButton.vue';
 import XQuoteButton from '@/components/MkQuoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
@@ -173,6 +175,7 @@ const isRenote = (
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
new file mode 100644
index 0000000000..f0a95ab42c
--- /dev/null
+++ b/packages/client/src/components/MkStarButton.vue
@@ -0,0 +1,32 @@
+<template>
+<button class="skdfgljsdkf _button" @click="star()">
+	<i class="fas fa-star"></i>
+</button>
+</template>
+
+<script lang="ts" setup>
+import type { Note } from 'misskey-js/built/entities';
+import { pleaseLogin } from '@/scripts/please-login';
+import * as os from '@/os';
+
+const props = defineProps<{
+	note: Note;
+}>();
+
+function star(): void {
+	pleaseLogin();
+	os.api('notes/reactions/create', {
+		noteId: props.note.id,
+		reaction: '⭐',
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.skdfgljsdkf {
+	display: inline-block;
+	height: 32px;
+	margin: 2px;
+	padding: 0 6px;
+}
+</style>