feat: ✨ Star button

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

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",

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>();

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>();

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>